{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "slide-button",
"title": "Slide Button",
"description": "Slide-to-confirm track with a draggable knob, shimmering label and keyboard support.",
"dependencies": [
"motion"
],
"registryDependencies": [
"utils"
],
"files": [
{
"path": "registry/new-york/slide-button/slide-button.tsx",
"content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport {\n AnimatePresence,\n animate,\n motion,\n useMotionValue,\n useMotionValueEvent,\n useReducedMotion,\n useTransform,\n} from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface SlideButtonProps {\n /** Text shown on the track. Default: \"Slide to confirm\" */\n label?: string\n /** Text shown once completed. Default: \"Confirmed\" */\n completeLabel?: string\n /** Fraction of the track the knob must pass to complete, 0 to 1. Default: 0.9 */\n threshold?: number\n /** Track width in px. Default: 280 */\n width?: number\n /** Color of the knob and the trailing fill. Default: \"var(--foreground)\" */\n accentColor?: string\n /** Return to the start this many ms after completing (0 = stay complete). Default: 2000 */\n resetAfter?: number\n /** Called when the knob reaches the end. */\n onComplete?: () => void\n /** Disable interaction. Default: false */\n disabled?: boolean\n className?: string\n}\n\nconst KNOB = 44\nconst PAD = 4\n\nconst Check = () => (\n \n)\n\nconst Chevrons = () => (\n \n)\n\nexport function SlideButton({\n label = \"Slide to confirm\",\n completeLabel = \"Confirmed\",\n threshold = 0.9,\n width = 280,\n accentColor = \"var(--foreground)\",\n resetAfter = 2000,\n onComplete,\n disabled = false,\n className,\n}: SlideButtonProps) {\n const reduced = useReducedMotion()\n const [done, setDone] = useState(false)\n const [percent, setPercent] = useState(0)\n const resetTimer = useRef>(undefined)\n\n const max = Math.max(width - KNOB - PAD * 2, 1)\n const x = useMotionValue(0)\n const fill = useTransform(x, (v) => v + KNOB + PAD * 2)\n const labelOpacity = useTransform(x, [0, max * 0.6], [1, 0])\n const labelX = useTransform(x, [0, max], [0, 24])\n\n useMotionValueEvent(x, \"change\", (v) => setPercent(Math.round((v / max) * 100)))\n useEffect(() => () => clearTimeout(resetTimer.current), [])\n\n const spring = reduced ? { duration: 0 } : { type: \"spring\" as const, stiffness: 420, damping: 36 }\n\n const complete = () => {\n setDone(true)\n animate(x, max, spring)\n onComplete?.()\n if (resetAfter > 0) {\n resetTimer.current = setTimeout(() => {\n setDone(false)\n animate(x, 0, spring)\n }, resetAfter)\n }\n }\n\n const settle = () => {\n if (x.get() >= max * threshold) complete()\n else animate(x, 0, spring)\n }\n\n const onKeyDown = (e: React.KeyboardEvent) => {\n if (done || disabled) return\n const step = max * 0.1\n let target: number | null = null\n if (e.key === \"ArrowRight\" || e.key === \"ArrowUp\") target = Math.min(x.get() + step, max)\n else if (e.key === \"ArrowLeft\" || e.key === \"ArrowDown\") target = Math.max(x.get() - step, 0)\n else if (e.key === \"Home\") target = 0\n else if (e.key === \"End\" || e.key === \"Enter\") target = max\n if (target === null) return\n e.preventDefault()\n if (target >= max * threshold) complete()\n else animate(x, target, spring)\n }\n\n return (\n \n {/* trailing fill */}\n \n\n \n {done ? (\n \n {completeLabel}\n \n ) : (\n \n \n {label}\n {/* Solid foreground band revealed through a sliding clip-path */}\n {!reduced && (\n \n {label}\n \n )}\n \n \n )}\n \n\n \n \n \n {done ? : }\n \n \n \n \n )\n}\n",
"type": "registry:component"
}
],
"docs": "Docs, live playground and every prop: https://trytweenly.vercel.app/docs/components/slide-button",
"type": "registry:component"
}