2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T3b6d,"use client"; import { cva, type VariantProps } from "class-variance-authority"; import { useReducedMotion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; /* ------------------------------------------------------------------------------------------------ * PressableFeedback * * A wrapper that answers a press with layers drawn over whatever it wraps (a Button, a Card, any * element): a ripple that grows from the pointer, a highlight, and a sweep that fills while the press * is held. The wrapped element keeps its own click handling; the wrapper only listens. * * Everything that moves is a transform or opacity animation, so it stays on the compositor. * Reduced motion keeps the state change (the layer still appears, the sweep still fills) and drops the travel * (the ripple fades in at full size instead of growing). * ---------------------------------------------------------------------------------------------- */ const EASE_OUT = "cubic-bezier(0.23, 1, 0.32, 1)"; const EASE_EXIT = "cubic-bezier(0.4, 0, 0.6, 1)"; type RippleState = { id: number; x: number; y: number; size: number; released: boolean }; type PressableFeedbackContextValue = { disabled: boolean; ripples: RippleState[]; dropRipple: (id: number) => void; registerSweep: (animation: Animation | null) => void; holdDuration: number | undefined; }; const PressableFeedbackContext = React.createContext(null); function useFeedback(part: string) { const ctx = React.useContext(PressableFeedbackContext); if (!ctx) throw new Error(`${part} must be rendered inside `); return ctx; } const root = cva("group/pf relative isolate touch-manipulation select-none [-webkit-touch-callout:none] data-disabled:pointer-events-none", { variants: { tone: { /** Light surfaces (cards, outline and secondary buttons): layers drawn in `--foreground`. */ foreground: "[--pf-color:var(--foreground)] [--pf-blend:normal] [--pf-sweep:20%]", /** The default (primary) button: a screen blend lightens the dark surface and leaves the label white. */ primary: "[--pf-color:var(--primary-foreground)] [--pf-blend:screen] [--pf-sweep:24%] dark:[--pf-blend:multiply] dark:[--pf-sweep:22%]", /** Destructive buttons: an overlay blend of a darkened `--destructive` deepens the red and leaves the label white. */ destructive: "[--pf-color:color-mix(in_oklab,var(--destructive),black_70%)] [--pf-blend:overlay] [--pf-sweep:80%]", }, }, defaultVariants: { tone: "foreground" }, }); export type PressableFeedbackProps = VariantProps & { /** Element the root renders as. Defaults to a `div`. */ render?: React.ReactElement>; /** Stops all feedback and the hold timer. Disable the wrapped control as well. */ disabled?: boolean; /** Draw a ripple that grows from the pointer (or from the center for keyboard presses). */ ripple?: boolean; /** Tint the whole surface while hovered and pressed. */ highlight?: boolean; /** Milliseconds a press must be held to confirm. Turns on the hold behavior and the sweep layer. */ holdDuration?: number; /** Draw the sweep layer while holding. Turn off to drive your own visual from `onHoldProgress`-free state via `data-holding`. */ sweep?: boolean; /** When false, releasing early keeps the progress where it reached (progress feedback). Default true: releasing cancels. */ resetOnRelease?: boolean; /** Called once the hold completes. */ onHoldConfirm?: () => void; /** Called when a hold begins. */ onHoldStart?: () => void; /** Called when a hold ends before it completed and the progress reset. */ onHoldCancel?: () => void; /** Announced to assistive tech when the hold completes. */ confirmLabel?: string; className?: string; children?: React.ReactNode; }; /** Wrap a Button or a Card. Add `ripple`, `highlight` or `holdDuration`, or compose the layer parts yourself. */ export function PressableFeedback({ render, disabled = false, ripple = true, highlight = false, holdDuration, sweep = true, resetOnRelease = true, onHoldConfirm, onHoldStart, onHoldCancel, confirmLabel = "Confirmed", tone, className, children, }: PressableFeedbackProps) { const rootRef = React.useRef(null); const [pressed, setPressed] = React.useState(false); const [holding, setHolding] = React.useState(false); const [confirmed, setConfirmed] = React.useState(false); const [ripples, setRipples] = React.useState([]); const nextId = React.useRef(0); const sweepAnim = React.useRef(null); const resetTimer = React.useRef(0); const activeRipple = React.useRef(null); const holdActive = React.useRef(false); const completed = React.useRef(false); const pressInput = React.useRef<"pointer" | "key" | null>(null); const callbacks = React.useRef({ onHoldConfirm, onHoldStart, onHoldCancel, resetOnRelease }); React.useEffect(() => { callbacks.current = { onHoldConfirm, onHoldStart, onHoldCancel, resetOnRelease }; }); React.useEffect(() => () => window.clearTimeout(resetTimer.current), []); const registerSweep = React.useCallback((animation: Animation | null) => { sweepAnim.current = animation; if (animation) { animation.onfinish = () => { if (animation.playbackRate <= 0) return; holdActive.current = false; completed.current = true; setHolding(false); setConfirmed(true); callbacks.current.onHoldConfirm?.(); // Rest on the full sweep for a beat so the confirmation reads, then ease back to empty. window.clearTimeout(resetTimer.current); resetTimer.current = window.setTimeout(() => { animation.playbackRate = -2; animation.play(); setConfirmed(false); }, 800); }; } }, []); const dropRipple = React.useCallback((id: number) => setRipples((all) => all.filter((r) => r.id !== id)), []); const startRipple = (x: number, y: number) => { const el = rootRef.current; if (!el) return; const { width, height } = el.getBoundingClientRect(); const size = Math.hypot(Math.max(x, width - x), Math.max(y, height - y)) * 2; const id = nextId.current++; activeRipple.current = id; setRipples((all) => [...all, { id, x, y, size, released: false }]); }; const releaseRipple = () => { const id = activeRipple.current; activeRipple.current = null; if (id === null) return; setRipples((all) => all.map((r) => (r.id === id ? { ...r, released: true } : r))); }; const startHold = () => { const animation = sweepAnim.current; if (!holdDuration || disabled || holdActive.current) return; window.clearTimeout(resetTimer.current); holdActive.current = true; setHolding(true); setConfirmed(false); callbacks.current.onHoldStart?.(); if (animation) { // A new press starts from empty, synchronously, unless it is resuming kept progress (resetOnRelease off, // not yet confirmed). This also cancels any drain that is still running from the last press. if (callbacks.current.resetOnRelease || completed.current) animation.currentTime = 0; completed.current = false; animation.playbackRate = 1; animation.play(); } else { // No sweep layer: still honour the duration. resetTimer.current = window.setTimeout(() => { holdActive.current = false; setHolding(false); setConfirmed(true); callbacks.current.onHoldConfirm?.(); resetTimer.current = window.setTimeout(() => setConfirmed(false), 800); }, holdDuration); } }; const endHold = () => { if (!holdActive.current) return; holdActive.current = false; setHolding(false); const animation = sweepAnim.current; if (!animation) { window.clearTimeout(resetTimer.current); callbacks.current.onHoldCancel?.(); return; } if (callbacks.current.resetOnRelease) { animation.playbackRate = -4; animation.play(); callbacks.current.onHoldCancel?.(); } else { animation.pause(); } }; const endPress = () => { pressInput.current = null; setPressed(false); releaseRipple(); endHold(); }; const onPointerDown = (e: React.PointerEvent) => { if (disabled || e.button !== 0) return; pressInput.current = "pointer"; setPressed(true); if (ripple) { const rect = e.currentTarget.getBoundingClientRect(); startRipple(e.clientX - rect.left, e.clientY - rect.top); } startHold(); const up = () => { window.removeEventListener("pointerup", up); window.removeEventListener("pointercancel", up); endPress(); }; window.addEventListener("pointerup", up); window.addEventListener("pointercancel", up); }; const onKeyDown = (e: React.KeyboardEvent) => { if (disabled || e.repeat || (e.key !== "Enter" && e.key !== " ")) return; if (pressInput.current) return; pressInput.current = "key"; setPressed(true); if (ripple) { const rect = e.currentTarget.getBoundingClientRect(); startRipple(rect.width / 2, rect.height / 2); } startHold(); }; const onKeyUp = (e: React.KeyboardEvent) => { if (pressInput.current !== "key") return; if (e.key !== "Enter" && e.key !== " ") return; endPress(); }; const onPointerLeave = () => { // A hold is a commitment to one control: sliding off it cancels, like releasing. if (pressInput.current === "pointer" && holdDuration) endPress(); }; const ctx = React.useMemo( () => ({ disabled, ripples, dropRipple, registerSweep, holdDuration }), [disabled, ripples, dropRipple, registerSweep, holdDuration], ); const props: React.HTMLAttributes & Record = { "data-slot": "pressable-feedback", "data-pressed": pressed ? "" : undefined, "data-holding": holding ? "" : undefined, "data-confirmed": confirmed ? "" : undefined, "data-disabled": disabled ? "" : undefined, onPointerDown, onPointerLeave, onKeyDown, onKeyUp, onContextMenu: holdDuration ? (e: React.MouseEvent) => e.preventDefault() : undefined, className: cn(root({ tone }), "inline-flex rounded-lg", className), children: ( {children} {highlight ? : null} {ripple ? : null} {holdDuration && sweep ? : null} {confirmed ? confirmLabel : ""} ), }; const setRef = (node: HTMLElement | null) => { rootRef.current = node; }; return render ? React.cloneElement(render, { ...props, ref: setRef } as React.HTMLAttributes, props.children as React.ReactNode) : React.createElement("div", { ...props, ref: setRef }); } const layer = "pointer-events-none absolute inset-0 z-10 overflow-hidden rounded-[inherit] [mix-blend-mode:var(--pf-blend,normal)]"; /** Tints the surface while hovered (hover devices only) and pressed. */ export function PressableFeedbackHighlight({ className }: { className?: string }) { useFeedback("PressableFeedbackHighlight"); return ( ); } /** Ripples that grow from where the press started and fade on release. Transform and opacity only. */ export function PressableFeedbackRipple({ className }: { className?: string }) { const { ripples, dropRipple } = useFeedback("PressableFeedbackRipple"); return ( {ripples.map((r) => ( ))} ); } function RippleDot({ ripple, onDone }: { ripple: RippleState; onDone: (id: number) => void }) { const ref = React.useRef(null); const reduce = useReducedMotion(); const [grown, setGrown] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const a = el.animate( reduce ? [{ opacity: 0 }, { opacity: 1 }] : [ { transform: "scale(0.12)", opacity: 1 }, { transform: "scale(1)", opacity: 1 }, ], { duration: reduce ? 120 : 480, easing: EASE_OUT, fill: "forwards" }, ); let live = true; a.finished.then(() => live && setGrown(true), () => {}); return () => { live = false; a.cancel(); }; }, [reduce]); React.useEffect(() => { if (!ripple.released || !grown) return; const el = ref.current; if (!el) return; const f = el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 320, easing: EASE_EXIT, fill: "forwards" }); f.finished.then(() => onDone(ripple.id), () => {}); }, [ripple.released, ripple.id, grown, onDone]); return ( ); } /** Fills from the inline start while a hold is in progress. Driven by a paused Web Animation on transform. */ export function PressableFeedbackSweep({ className }: { className?: string }) { const { holdDuration, registerSweep } = useFeedback("PressableFeedbackSweep"); const ref = React.useRef(null); React.useLayoutEffect(() => { const el = ref.current; if (!el || !holdDuration) return; const animation = el.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], { duration: holdDuration, easing: "linear", fill: "both", }); animation.pause(); animation.currentTime = 0; registerSweep(animation); return () => { registerSweep(null); animation.cancel(); }; }, [holdDuration, registerSweep]); return ( ); } export default PressableFeedback; 32:T19e7,"use client"; import { IconCheck, IconTrash, IconPlayerPlayFilled } from "@tabler/icons-react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { DemoGroup, DemoPage } from "../_demo-group"; import { PressableFeedback, PressableFeedbackHighlight, PressableFeedbackRipple, PressableFeedbackSweep, } from "./pressable-feedback"; function PressCard({ title, description, className }: { title: string; description: string; className?: string }) { const [count, setCount] = useState(0); return ( setCount((n) => n + 1)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setCount((n) => n + 1); } }} className={`cursor-pointer outline-none focus-visible:ring-3 focus-visible:ring-ring/50 ${className ?? ""}`} > {title} {description} Pressed {count} ); } function HoldDemo({ duration, label }: { duration: number; label: string }) { const [done, setDone] = useState(0); const [canceled, setCanceled] = useState(0); return (

setDone((n) => n + 1)} onHoldCancel={() => setCanceled((n) => n + 1)}>

{duration} ms. Confirmed {done}, canceled {canceled}.

); } function ProgressDemo({ duration, resetOnRelease }: { duration: number; resetOnRelease: boolean }) { const [done, setDone] = useState(false); return (

setDone(false)} onHoldConfirm={() => setDone(true)} confirmLabel="Export ready" >

{duration} ms, {resetOnRelease ? "resets on release" : "keeps progress on release"}. {done ? "Done." : ""}

); } export function PressableFeedbackDemo() { const [danger, setDanger] = useState(false); return (

setDanger(true)}>

Ripple, highlight and sweep

); } export default PressableFeedbackDemo; 33:T830,import type { BlockMeta } from "../../../lib/block-meta"; export const pressableFeedbackMeta: BlockMeta = { slug: "pressable-feedback", title: "Pressable feedback", description: "A wrapper that answers a press with a pointer-origin ripple, a highlight, and a sweep that fills while the press is held: hold to confirm and progress feedback. Works around Buttons and Cards.", group: "feedback", kobraDeps: [], files: ["blocks/feedback/pressable-feedback/pressable-feedback.tsx"], props: [ { name: "ripple", type: "boolean", default: "true", description: "Ripple that grows from the pointer (center for keyboard presses). Transform and opacity only." }, { name: "highlight", type: "boolean", default: "false", description: "Surface tint on hover (hover devices) and press." }, { name: "holdDuration", type: "number", description: "Milliseconds a press must be held. Turns on hold behavior and the sweep layer." }, { name: "resetOnRelease", type: "boolean", default: "true", description: "False keeps the progress where it reached when released." }, { name: "onHoldConfirm", type: "() => void", description: "The hold completed." }, { name: "onHoldStart / onHoldCancel", type: "() => void", description: "A hold began, or ended early and reset." }, { name: "sweep", type: "boolean", default: "true", description: "Draw the sweep layer. Off, compose your own with the layer parts." }, { name: "tone", type: "'foreground' | 'primary' | 'destructive'", default: "'foreground'", description: "Layer color and blend: foreground for light surfaces, primary for the default button, destructive for destructive buttons. The label always stays legible." }, { name: "disabled", type: "boolean", default: "false", description: "No layers, no hold." }, { name: "render", type: "ReactElement", description: "Element the root renders as." }, { name: "confirmLabel", type: "string", default: "'Confirmed'", description: "Announced when a hold completes." }, ], tags: ["press", "ripple", "hold", "button", "card", "feedback"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#feedback","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Feedback"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Pressable feedback"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Pressable feedback"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"A wrapper that answers a press with a pointer-origin ripple, a highlight, and a sweep that fills while the press is held: hold to confirm and progress feedback. Works around Buttons and Cards."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"pressable-feedback","group":"feedback","minHeight":520,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/feedback/pressable-feedback/pressable-feedback.tsx","code":"$31"},{"path":"blocks/feedback/pressable-feedback/demo.tsx","code":"$32"},{"path":"blocks/feedback/pressable-feedback/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]