{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"approval-card","type":"registry:component","title":"Approval Card","description":"A human-in-the-loop decision surface for approvals, single or multiple-choice questions, custom responses, and multi-step review flows.","author":"Saurabh ","dependencies":["clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/agents/approval-card/index.tsx","type":"registry:component","target":"@components/agents/approval-card/index.tsx","content":"\"use client\";\n// beui.dev/components/agents/approval-card\n\nimport {\n ArrowLeft,\n ArrowRight,\n Check,\n CircleHelp,\n LoaderCircle,\n MessageSquareText,\n X,\n} from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { AgentDisclosure } from \"@/components/agents/agent-disclosure\";\nimport { ActionSwapRollText } from \"@/components/motion/action-swap-roll\";\nimport { Button } from \"@/components/motion/button\";\nimport { Checkbox } from \"@/components/motion/checkbox\";\nimport { Input } from \"@/components/motion/input\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/motion/radio\";\nimport { EASE_OUT, SPRING_SWAP } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\nimport type {\n ApprovalCardAnswer,\n ApprovalCardAnswers,\n ApprovalCardProps,\n ApprovalCardQuestion,\n ApprovalCardStatus,\n} from \"./types\";\n\nexport type {\n ApprovalCardAnswer,\n ApprovalCardAnswers,\n ApprovalCardOption,\n ApprovalCardProps,\n ApprovalCardQuestion,\n ApprovalCardStatus,\n} from \"./types\";\n\nconst EMPTY_ANSWER: ApprovalCardAnswer = { selected: [], custom: \"\" };\n\nfunction getStatusLabel(status: ApprovalCardStatus) {\n if (status === \"submitting\") return \"Submitting\";\n if (status === \"approved\") return \"Approved\";\n if (status === \"rejected\") return \"Rejected\";\n if (status === \"changes-requested\") return \"Changes requested\";\n if (status === \"answered\") return \"Response submitted\";\n return \"Input required\";\n}\n\nfunction getStatusClass(status: ApprovalCardStatus) {\n if (status === \"approved\" || status === \"answered\") {\n return \"text-emerald-600 dark:text-emerald-400\";\n }\n if (status === \"rejected\") return \"text-rose-600 dark:text-rose-400\";\n if (status === \"changes-requested\") {\n return \"text-amber-600 dark:text-amber-400\";\n }\n return \"text-muted-foreground\";\n}\n\nfunction getStatusBadgeClass(status: ApprovalCardStatus) {\n if (status === \"pending\" || status === \"changes-requested\") {\n return \"border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400\";\n }\n if (status === \"submitting\") {\n return \"border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400\";\n }\n if (status === \"approved\" || status === \"answered\") {\n return \"border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400\";\n }\n return \"border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400\";\n}\n\nfunction isAnswered(answer: ApprovalCardAnswer) {\n return answer.selected.length > 0 || Boolean(answer.custom?.trim());\n}\n\nfunction QuestionOptions({\n question,\n answer,\n disabled,\n onChange,\n onSingleSelect,\n}: {\n question: ApprovalCardQuestion;\n answer: ApprovalCardAnswer;\n disabled: boolean;\n onChange: (answer: ApprovalCardAnswer) => void;\n onSingleSelect?: () => void;\n}) {\n const custom = answer.custom ?? \"\";\n\n return (\n
\n {question.options?.length ? (\n question.multiple ? (\n
\n {question.options.map((option) => (\n \n onChange({\n ...answer,\n selected: checked\n ? [...answer.selected, option.value]\n : answer.selected.filter((value) => value !== option.value),\n })\n }\n className=\"min-h-9 rounded-lg px-1.5 py-1\"\n />\n ))}\n
\n ) : (\n {\n onChange({ selected: [value], custom: \"\" });\n onSingleSelect?.();\n }}\n className=\"gap-0.5\"\n >\n {question.options.map((option) => (\n \n ))}\n \n )\n ) : null}\n\n {question.allowCustom ? (\n \n onChange({\n selected: question.multiple ? answer.selected : [],\n custom: value,\n })\n }\n className={cn(\"p-0.5\", question.options?.length && \"mt-1.5\")}\n classNames={{\n field:\n \"h-10 rounded-xl border-0 bg-background/70 focus-within:bg-background\",\n input: \"px-3 text-sm\",\n }}\n />\n ) : null}\n
\n );\n}\n\nfunction ProgressDots({ current, ids }: { current: number; ids: string[] }) {\n return (\n \n \n Question {current + 1} of {ids.length}\n \n {ids.map((id, index) => (\n \n ))}\n \n );\n}\n\nexport function ApprovalCard({\n title = \"Approval required\",\n description,\n children,\n questions = [],\n status = \"pending\",\n answers,\n defaultAnswers = {},\n onAnswersChange,\n step,\n defaultStep = 0,\n onStepChange,\n onSubmit,\n onApprove,\n onReject,\n onRequestChanges,\n onDismiss,\n approveLabel = \"Approve\",\n submitLabel = \"Submit response\",\n result,\n className,\n}: ApprovalCardProps) {\n const reduce = useReducedMotion() ?? false;\n const [internalAnswers, setInternalAnswers] =\n useState(defaultAnswers);\n const [internalStep, setInternalStep] = useState(defaultStep);\n const autoAdvanceTimer = useRef(undefined);\n const currentAnswers = answers ?? internalAnswers;\n const currentStep = Math.min(\n Math.max(0, step ?? internalStep),\n Math.max(0, questions.length - 1),\n );\n const question = questions[currentStep];\n const questionMode = questions.length > 0;\n const pending = status === \"pending\";\n const busy = status === \"submitting\";\n const interactive = pending || busy;\n const currentAnswer = question\n ? (currentAnswers[question.id] ?? EMPTY_ANSWER)\n : EMPTY_ANSWER;\n const displayTitle = question?.title ?? title;\n const titleKey = question?.id ?? String(status);\n const statusLabel = getStatusLabel(status);\n\n const clearAutoAdvance = useCallback(() => {\n if (autoAdvanceTimer.current === undefined) return;\n window.clearTimeout(autoAdvanceTimer.current);\n autoAdvanceTimer.current = undefined;\n }, []);\n\n useEffect(() => clearAutoAdvance, [clearAutoAdvance]);\n\n const setAnswers = useCallback(\n (next: ApprovalCardAnswers) => {\n if (answers === undefined) setInternalAnswers(next);\n onAnswersChange?.(next);\n },\n [answers, onAnswersChange],\n );\n\n const setStep = (next: number) => {\n clearAutoAdvance();\n if (step === undefined) setInternalStep(next);\n onStepChange?.(next);\n };\n\n const updateCurrentAnswer = (next: ApprovalCardAnswer) => {\n if (!question) return;\n setAnswers({ ...currentAnswers, [question.id]: next });\n };\n\n const continueQuestion = () => {\n if (currentStep < questions.length - 1) {\n setStep(currentStep + 1);\n return;\n }\n onSubmit?.(currentAnswers);\n };\n\n const queueAutoAdvance = () => {\n if (\n !question ||\n question.multiple ||\n question.autoAdvance === false ||\n currentStep >= questions.length - 1 ||\n busy\n ) {\n return;\n }\n\n clearAutoAdvance();\n autoAdvanceTimer.current = window.setTimeout(() => {\n setStep(currentStep + 1);\n }, 240);\n };\n\n return (\n \n
\n \n {busy ? (\n \n ) : interactive ? (\n questionMode ? (\n \n ) : (\n \n )\n ) : status === \"rejected\" ? (\n \n ) : (\n \n )}\n \n\n
\n
\n

\n \n {displayTitle}\n \n

\n {questionMode && interactive ? (\n \n {currentStep + 1}/{questions.length}\n \n ) : (\n \n {statusLabel}\n \n )}\n {onDismiss ? (\n \n \n \n ) : null}\n
\n\n \n {questionMode && question ? (\n \n \n {question.description ? (\n

\n {question.description}\n

\n ) : null}\n \n \n \n ) : (\n
\n {description ? (\n

\n {description}\n

\n ) : null}\n {children ?
{children}
: null}\n
\n )}\n\n {questionMode ? (\n
\n setStep(currentStep - 1)}\n className=\"rounded-full\"\n >\n \n \n item.id)}\n />\n \n {busy ? (\n \n ) : currentStep === questions.length - 1 ? (\n <>\n {submitLabel}\n \n \n ) : (\n \n )}\n \n
\n ) : (\n
\n \n {approveLabel}\n \n {onRequestChanges ? (\n \n Request changes\n \n ) : null}\n {onReject ? (\n \n Reject\n \n ) : null}\n
\n )}\n \n\n {!interactive ? (\n

\n {result ?? statusLabel}\n

\n ) : null}\n
\n
\n \n );\n}\n"},{"path":"components/agents/approval-card/types.ts","type":"registry:component","target":"@components/agents/approval-card/types.ts","content":"// beui.dev/components/agents/approval-card\nimport type { ReactNode } from \"react\";\n\nexport type ApprovalCardStatus =\n | \"pending\"\n | \"submitting\"\n | \"approved\"\n | \"rejected\"\n | \"changes-requested\"\n | \"answered\";\n\nexport interface ApprovalCardOption {\n value: string;\n label: string;\n disabled?: boolean;\n}\n\nexport interface ApprovalCardQuestion {\n id: string;\n title: ReactNode;\n description?: ReactNode;\n options?: ApprovalCardOption[];\n multiple?: boolean;\n autoAdvance?: boolean;\n allowCustom?: boolean;\n customPlaceholder?: string;\n}\n\nexport interface ApprovalCardAnswer {\n selected: string[];\n custom?: string;\n}\n\nexport type ApprovalCardAnswers = Record;\n\nexport interface ApprovalCardProps {\n title?: ReactNode;\n description?: ReactNode;\n children?: ReactNode;\n questions?: ApprovalCardQuestion[];\n status?: ApprovalCardStatus;\n answers?: ApprovalCardAnswers;\n defaultAnswers?: ApprovalCardAnswers;\n onAnswersChange?: (answers: ApprovalCardAnswers) => void;\n step?: number;\n defaultStep?: number;\n onStepChange?: (step: number) => void;\n onSubmit?: (answers: ApprovalCardAnswers) => void;\n onApprove?: () => void;\n onReject?: () => void;\n onRequestChanges?: () => void;\n onDismiss?: () => void;\n approveLabel?: ReactNode;\n submitLabel?: ReactNode;\n result?: ReactNode;\n className?: string;\n}\n"},{"path":"components/agents/agent-disclosure.tsx","type":"registry:component","target":"@components/agents/agent-disclosure.tsx","content":"\"use client\";\n\nimport { motion, type HTMLMotionProps, useReducedMotion } from \"motion/react\";\nimport type { CSSProperties } from \"react\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface AgentDisclosureProps\n extends Omit, \"animate\" | \"initial\"> {\n open: boolean;\n openHeight?: CSSProperties[\"height\"];\n}\n\n/** Shared transform-only reveal for collapsible agent content. */\nexport function AgentDisclosure({\n open,\n openHeight = \"auto\",\n className,\n style,\n transition,\n ...props\n}: AgentDisclosureProps) {\n const reduce = useReducedMotion() ?? false;\n\n return (\n \n );\n}\n"},{"path":"components/motion/action-swap-roll.tsx","type":"registry:component","target":"@components/motion/action-swap-roll.tsx","content":"\"use client\";\n\nimport {\n ActionSwapButton,\n ActionSwapIcon,\n ActionSwapText,\n type ActionSwapButtonProps,\n type ActionSwapIconProps,\n type ActionSwapTextProps,\n} from \"./action-swap\";\n\nexport type {\n ActionSwapButtonSize,\n ActionSwapButtonVariant,\n ActionSwapItem,\n} from \"./action-swap\";\n\nexport type ActionSwapRollButtonProps = Omit;\nexport type ActionSwapRollTextProps = Omit;\nexport type ActionSwapRollIconProps = Omit;\n\nexport function ActionSwapRollButton(props: ActionSwapRollButtonProps) {\n return ;\n}\n\nexport function ActionSwapRollText(props: ActionSwapRollTextProps) {\n return ;\n}\n\nexport function ActionSwapRollIcon(props: ActionSwapRollIconProps) {\n return ;\n}\n"},{"path":"components/motion/button/index.tsx","type":"registry:component","target":"@components/motion/button/index.tsx","content":"export { Button } from \"./base\";\nexport type { ButtonProps, ButtonVariant, ButtonSize } from \"./base\";\n\nexport { StatefulButton } from \"./stateful\";\nexport type { StatefulButtonProps, ButtonState } from \"./stateful\";\n\nexport { MagneticButton } from \"./magnetic\";\nexport type { MagneticButtonProps } from \"./magnetic\";\n"},{"path":"components/motion/checkbox.tsx","type":"registry:component","target":"@components/motion/checkbox.tsx","content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useId } from \"react\";\nimport { EASE_OUT, SPRING_PRESS } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nconst CHECK_PATH = \"M5 13l4 4L19 7\";\nconst INDETERMINATE_PATH = \"M6 12h12\";\n\nexport interface CheckboxProps {\n checked: boolean;\n onCheckedChange: (checked: boolean) => void;\n disabled?: boolean;\n indeterminate?: boolean;\n label?: string;\n className?: string;\n id?: string;\n \"aria-label\"?: string;\n}\n\nexport function Checkbox({\n checked,\n onCheckedChange,\n disabled,\n indeterminate,\n label,\n className,\n id: idProp,\n \"aria-label\": ariaLabel,\n}: CheckboxProps) {\n const autoId = useId();\n const id = idProp ?? autoId;\n const reduce = useReducedMotion();\n const showMark = checked || indeterminate;\n const path = indeterminate ? INDETERMINATE_PATH : CHECK_PATH;\n\n return (\n \n !disabled && onCheckedChange(!checked)}\n whileTap={reduce || disabled ? undefined : { scale: 0.92 }}\n transition={SPRING_PRESS}\n data-state={\n checked ? \"checked\" : indeterminate ? \"indeterminate\" : \"unchecked\"\n }\n className={cn(\n \"inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 outline-none transition-colors duration-200\",\n \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n \"disabled:cursor-not-allowed disabled:opacity-60\",\n showMark\n ? \"border-primary bg-primary text-primary-foreground\"\n : \"border-muted-foreground/50 bg-background hover:border-muted-foreground\",\n )}\n >\n \n {showMark ? (\n \n {indeterminate ? \"Partially selected\" : \"Selected\"}\n \n \n ) : null}\n \n \n {label ? (\n \n {label}\n \n ) : null}\n \n );\n}\n"},{"path":"components/motion/input.tsx","type":"registry:component","target":"@components/motion/input.tsx","content":"\"use client\";\n\nimport {\n AnimatePresence,\n animate,\n motion,\n useReducedMotion,\n} from \"motion/react\";\nimport {\n forwardRef,\n useEffect,\n useId,\n useRef,\n useState,\n type InputHTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type InputClassNames = {\n root?: string;\n label?: string;\n field?: string;\n input?: string;\n leftIcon?: string;\n rightIcon?: string;\n successIcon?: string;\n errorMessage?: string;\n};\n\nexport interface InputProps extends Omit<\n InputHTMLAttributes,\n \"value\" | \"defaultValue\" | \"onChange\"\n> {\n label?: string;\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n /** Truthy error triggers a shake, red border and (if a string) a message. */\n error?: string | boolean;\n success?: boolean;\n leftIcon?: ReactNode;\n rightIcon?: ReactNode;\n className?: string;\n classNames?: InputClassNames;\n}\n\nexport const Input = forwardRef(function Input(\n {\n label,\n value: valueProp,\n defaultValue,\n onChange,\n onFocus,\n onBlur,\n error,\n success,\n leftIcon,\n rightIcon,\n className,\n classNames,\n disabled,\n id: idProp,\n type,\n ...rest\n },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? reactId;\n const reduce = useReducedMotion();\n\n const controlled = valueProp !== undefined;\n const [internal, setInternal] = useState(defaultValue ?? \"\");\n const value = controlled ? (valueProp ?? \"\") : internal;\n\n const [focused, setFocused] = useState(false);\n\n const fieldRef = useRef(null);\n\n const hasError = Boolean(error);\n const errorMessage = typeof error === \"string\" ? error : null;\n\n // Right edge shows the success check, otherwise the caller's right icon.\n const rightSlot = success ? null : rightIcon;\n\n // Shake the field when an error appears.\n useEffect(() => {\n if (!fieldRef.current || reduce || !hasError) return;\n animate(\n fieldRef.current,\n { x: [0, -6, 6, -4, 4, -2, 0] },\n { duration: 0.45 },\n );\n }, [hasError, reduce]);\n\n const handleChange = (next: string) => {\n if (!controlled) setInternal(next);\n onChange?.(next);\n };\n\n return (\n \n {label ? (\n \n {label}\n \n ) : null}\n\n \n {leftIcon ? (\n \n {leftIcon}\n \n ) : null}\n\n handleChange(e.target.value)}\n onFocus={(event) => {\n setFocused(true);\n onFocus?.(event);\n }}\n onBlur={(event) => {\n setFocused(false);\n onBlur?.(event);\n }}\n className={cn(\n \"peer h-full w-full bg-transparent text-base leading-6 text-foreground caret-foreground outline-none\",\n \"placeholder:text-muted-foreground/60\",\n leftIcon ? \"pl-10\" : \"pl-3.5\",\n rightSlot || success ? \"pr-10\" : \"pr-3.5\",\n disabled && \"cursor-not-allowed\",\n classNames?.input,\n )}\n />\n\n {success ? (\n \n \n \n ) : rightSlot ? (\n \n {rightSlot}\n \n ) : null}\n \n\n \n {errorMessage ? (\n \n {errorMessage}\n \n ) : null}\n \n \n );\n});\n"},{"path":"components/motion/radio.tsx","type":"registry:component","target":"@components/motion/radio.tsx","content":"\"use client\";\n\nimport { motion, MotionConfig, useReducedMotion } from \"motion/react\";\nimport {\n createContext,\n useCallback,\n useContext,\n useId,\n useMemo,\n useState,\n type ReactNode,\n} from \"react\";\nimport { SPRING_LAYOUT, SPRING_PRESS } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\ntype RadioCtx = {\n value: string;\n setValue: (value: string) => void;\n layoutId: string;\n};\n\nconst RadioCtx = createContext(null);\n\nfunction useRadioGroup() {\n const ctx = useContext(RadioCtx);\n if (!ctx) {\n throw new Error(\"RadioGroupItem must be used inside \");\n }\n return ctx;\n}\n\nexport interface RadioGroupProps {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n children: ReactNode;\n className?: string;\n orientation?: \"vertical\" | \"horizontal\";\n}\n\nexport function RadioGroup({\n value,\n defaultValue = \"\",\n onValueChange,\n children,\n className,\n orientation = \"vertical\",\n}: RadioGroupProps) {\n const [internal, setInternal] = useState(defaultValue);\n const layoutId = useId();\n const reduce = useReducedMotion();\n const controlled = value !== undefined;\n const current = controlled ? value : internal;\n const setValue = useCallback(\n (next: string) => {\n if (!controlled) setInternal(next);\n onValueChange?.(next);\n },\n [controlled, onValueChange],\n );\n const contextValue = useMemo(\n () => ({ value: current, setValue, layoutId }),\n [current, layoutId, setValue],\n );\n\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nexport interface RadioGroupItemProps {\n value: string;\n label?: string;\n disabled?: boolean;\n className?: string;\n id?: string;\n}\n\nexport function RadioGroupItem({\n value,\n label,\n disabled,\n className,\n id: idProp,\n}: RadioGroupItemProps) {\n const { value: groupValue, setValue, layoutId } = useRadioGroup();\n const autoId = useId();\n const id = idProp ?? autoId;\n const reduce = useReducedMotion();\n const selected = groupValue === value;\n\n return (\n \n !disabled && setValue(value)}\n whileTap={reduce || disabled ? undefined : { scale: 0.92 }}\n transition={SPRING_PRESS}\n data-state={selected ? \"checked\" : \"unchecked\"}\n className={cn(\n \"relative inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 outline-none transition-colors duration-200\",\n \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n \"disabled:cursor-not-allowed disabled:opacity-60\",\n selected\n ? \"border-primary\"\n : \"border-muted-foreground/50 hover:border-muted-foreground\",\n )}\n >\n {selected ? (\n \n ) : null}\n \n {label ? (\n \n {label}\n \n ) : null}\n \n );\n}\n"},{"path":"lib/ease.ts","type":"registry:lib","target":"@lib/ease.ts","content":"// Shared motion tokens. Easing curves mirror the CSS custom properties in\n// globals.css; springs are the canonical physics used across components.\n// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.\n\nexport const EASE_OUT = [0.16, 1, 0.3, 1] as const;\nexport const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\nexport const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;\n\n/** CSS string form of EASE_OUT for inline style transitions. */\nexport const EASE_OUT_CSS = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\n/** Press feedback on buttons and other tappable surfaces. */\nexport const SPRING_PRESS = {\n type: \"spring\",\n stiffness: 500,\n damping: 30,\n mass: 0.6,\n} as const;\n\n/** Content swaps — label/icon slots trading places inside a control. */\nexport const SPRING_SWAP = {\n type: \"spring\",\n stiffness: 460,\n damping: 30,\n mass: 0.55,\n} as const;\n\n/** Overlay panel entrances — modals and sheets summoned by pointer. */\nexport const SPRING_PANEL = {\n type: \"spring\",\n stiffness: 420,\n damping: 40,\n mass: 0.5,\n} as const;\n\n/** Shared-layout glides — pills, indicators and panels morphing between positions. */\nexport const SPRING_LAYOUT = {\n type: \"spring\",\n stiffness: 360,\n damping: 32,\n mass: 0.6,\n} as const;\n\n/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */\nexport const SPRING_MOUSE = {\n stiffness: 200,\n damping: 15,\n mass: 0.3,\n} as const;\n\n/** Dragged handles and fills (sliders) — critically damped `useSpring` config,\n * so the value follows the pointer butterily and never rebounds off an end. */\nexport const SPRING_GLIDE = {\n stiffness: 700,\n damping: 50,\n mass: 0.5,\n} as const;\n"},{"path":"lib/utils.ts","type":"registry:lib","target":"@lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"},{"path":"components/motion/action-swap.tsx","type":"registry:component","target":"@components/motion/action-swap.tsx","content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion, type HTMLMotionProps, type Variants } from \"motion/react\";\nimport { useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { EASE_OUT, EASE_OUT_CSS, SPRING_PRESS, SPRING_SWAP } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ActionSwapItem = {\n id: string;\n label: ReactNode;\n icon?: ReactNode;\n ariaLabel?: string;\n};\n\nexport type ActionSwapButtonVariant = \"primary\" | \"secondary\" | \"outline\" | \"ghost\";\nexport type ActionSwapButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon\";\nexport type ActionSwapAnimation = \"blur\" | \"roll\" | \"cascade\";\n\n/** Animations with a single-element variant set (cascade animates per letter). */\ntype CoreAnimation = \"blur\" | \"roll\";\n\nexport interface ActionSwapButtonProps extends Omit<\n HTMLMotionProps<\"button\">,\n \"children\" | \"onChange\"\n> {\n items: ActionSwapItem[];\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string, item: ActionSwapItem) => void;\n variant?: ActionSwapButtonVariant;\n size?: ActionSwapButtonSize;\n animation?: ActionSwapAnimation;\n iconOnly?: boolean;\n cycle?: boolean;\n}\n\nexport interface ActionSwapTextProps {\n value: string;\n children: ReactNode;\n animation?: ActionSwapAnimation;\n className?: string;\n}\n\nexport interface ActionSwapIconProps {\n value: string;\n children: ReactNode;\n animation?: ActionSwapAnimation;\n className?: string;\n}\n\nconst BLUR_TRANSITION = { duration: 0.2, ease: \"easeInOut\" } as const;\nconst ROLL_TRANSITION = SPRING_SWAP;\nconst ROLL_EXIT_TRANSITION = { duration: 0.14, ease: EASE_OUT } as const;\nconst SWAP_BLUR = \"blur(8px)\";\nconst ROLL_BLUR = \"blur(3px)\";\n\n// Cascade rolls the label one letter at a time, left to right. The leaving\n// and landing strings overlap as independent layers (no shared cells), so\n// proportional glyph widths never jitter. Exits cascade at half the enter\n// stagger so the tail of the old label lingers briefly.\nconst CASCADE_STAGGER = 0.025;\n\nconst CASCADE_LETTER_VARIANTS: Variants = {\n initial: { opacity: 0, y: \"105%\", filter: ROLL_BLUR },\n animate: (delay: number = 0) => ({\n opacity: 1,\n y: \"0%\",\n filter: \"blur(0px)\",\n transition: { ...SPRING_SWAP, delay },\n }),\n exit: (delay: number = 0) => ({\n opacity: 0,\n y: \"-105%\",\n filter: ROLL_BLUR,\n transition: { duration: 0.16, ease: EASE_OUT, delay: delay * 0.5 },\n }),\n};\n\nconst TEXT_VARIANTS: Record = {\n blur: {\n initial: { opacity: 0, scale: 0.94, filter: SWAP_BLUR },\n animate: {\n opacity: 1,\n scale: 1,\n filter: \"blur(0px)\",\n transition: BLUR_TRANSITION,\n },\n exit: {\n opacity: 0,\n scale: 0.94,\n filter: SWAP_BLUR,\n transition: BLUR_TRANSITION,\n },\n },\n roll: {\n initial: { opacity: 0, y: \"90%\", filter: ROLL_BLUR },\n animate: {\n opacity: 1,\n y: \"0%\",\n filter: \"blur(0px)\",\n transition: ROLL_TRANSITION,\n },\n exit: {\n opacity: 0,\n y: \"-90%\",\n filter: ROLL_BLUR,\n transition: ROLL_EXIT_TRANSITION,\n },\n },\n};\n\nconst ICON_VARIANTS: Record = {\n blur: {\n initial: { opacity: 0, scale: 0.25, filter: SWAP_BLUR },\n animate: {\n opacity: 1,\n scale: 1,\n filter: \"blur(0px)\",\n transition: BLUR_TRANSITION,\n },\n exit: {\n opacity: 0,\n scale: 0.25,\n filter: SWAP_BLUR,\n transition: BLUR_TRANSITION,\n },\n },\n roll: {\n initial: { opacity: 0, y: 12, filter: ROLL_BLUR },\n animate: {\n opacity: 1,\n y: 0,\n filter: \"blur(0px)\",\n transition: ROLL_TRANSITION,\n },\n exit: {\n opacity: 0,\n y: -12,\n filter: ROLL_BLUR,\n transition: ROLL_EXIT_TRANSITION,\n },\n },\n};\n\nconst VARIANT_CLASS: Record = {\n primary: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n secondary: \"border border-border bg-card text-foreground hover:border-border\",\n outline: \"border border-border bg-transparent text-foreground hover:bg-primary/5\",\n ghost: \"text-muted-foreground hover:bg-primary/5 hover:text-foreground\",\n};\n\nconst SIZE_CLASS: Record = {\n sm: \"h-8 gap-1.5 rounded-full px-3 text-xs\",\n md: \"h-10 gap-2 rounded-full px-4 text-sm\",\n lg: \"h-12 gap-2.5 rounded-full px-5 text-base\",\n icon: \"h-10 w-10 rounded-full\",\n};\n\nexport function ActionSwapText({\n value,\n children,\n animation = \"blur\",\n className,\n}: ActionSwapTextProps) {\n const reduce = useReducedMotion();\n const measureRef = useRef(null);\n const [width, setWidth] = useState();\n\n useLayoutEffect(() => {\n const nextWidth = measureRef.current?.offsetWidth;\n if (!nextWidth) return;\n setWidth((currentWidth) => (currentWidth === nextWidth ? currentWidth : nextWidth));\n });\n\n // Cascade needs a plain string to split into letters; non-string content\n // and reduced motion fall back to the closest single-element animation.\n const label = typeof children === \"string\" ? children : null;\n const cascade = animation === \"cascade\" && label !== null && !reduce;\n const coreAnimation: CoreAnimation =\n animation === \"cascade\" ? \"roll\" : animation;\n\n return (\n \n \n {children}\n \n {cascade ? (\n <>\n {/* Letters are decorative fragments; readers get the whole label. */}\n {label}\n \n \n {label.split(\"\").map((char, i) => (\n \n {char}\n \n ))}\n \n \n \n ) : (\n \n \n {children}\n \n \n )}\n \n );\n}\n\nexport function ActionSwapIcon({\n value,\n children,\n animation = \"blur\",\n className,\n}: ActionSwapIconProps) {\n const reduce = useReducedMotion();\n // Icons are single elements — cascade maps to its closest motion, roll.\n const coreAnimation: CoreAnimation =\n animation === \"cascade\" ? \"roll\" : animation;\n\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nexport function ActionSwapButton({\n items,\n value,\n defaultValue,\n onValueChange,\n variant = \"secondary\",\n size = \"md\",\n animation = \"blur\",\n iconOnly = size === \"icon\",\n cycle = true,\n className,\n disabled,\n onClick,\n ...rest\n}: ActionSwapButtonProps) {\n const reduce = useReducedMotion();\n const [internalValue, setInternalValue] = useState(defaultValue ?? items[0]?.id);\n const currentValue = value ?? internalValue;\n const activeIndex = Math.max(0, items.findIndex((item) => item.id === currentValue));\n const activeItem = items[activeIndex] ?? items[0];\n const hasIcon = items.some((item) => item.icon);\n const nextItem = cycle && items.length > 0 ? items[(activeIndex + 1) % items.length] : undefined;\n\n if (!activeItem) return null;\n\n const accessibleLabel = activeItem.ariaLabel ?? (iconOnly && typeof activeItem.label === \"string\" ? activeItem.label : undefined);\n\n return (\n {\n onClick?.(event);\n if (event.defaultPrevented || disabled || !cycle || !nextItem) return;\n if (value === undefined) setInternalValue(nextItem.id);\n onValueChange?.(nextItem.id, nextItem);\n }}\n {...rest}\n >\n {hasIcon ? (\n \n {activeItem.icon ?? null}\n \n ) : null}\n {!iconOnly ? (\n \n {activeItem.label}\n \n ) : null}\n \n );\n}\n"},{"path":"components/motion/button/base.tsx","type":"registry:component","target":"@components/motion/button/base.tsx","content":"\"use client\";\n\nimport {\n AnimatePresence,\n motion,\n useReducedMotion,\n type HTMLMotionProps,\n} from \"motion/react\";\nimport {\n forwardRef,\n type PointerEvent,\n type ReactNode,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { EASE_OUT, SPRING_PRESS } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\nimport { useHoverCapable } from \"@/lib/hooks/use-hover-capable\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"outline\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon\";\n\nexport interface ButtonProps extends Omit<\n HTMLMotionProps<\"button\">,\n \"children\"\n> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n pressScale?: number;\n /** Spawn a Material-style ripple from the press point. Off by default. */\n ripple?: boolean;\n children?: ReactNode;\n}\n\ntype Ripple = { id: number; x: number; y: number; size: number };\n\nconst VARIANT_CLASS: Record = {\n primary: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n secondary: \"border border-border bg-card text-foreground hover:border-border\",\n ghost: \"text-muted-foreground hover:text-foreground hover:bg-primary/5\",\n outline:\n \"border border-border bg-transparent text-foreground hover:bg-primary/5\",\n};\n\nconst SIZE_CLASS: Record = {\n sm: \"h-8 px-3 text-xs gap-1.5 rounded-full\",\n md: \"h-10 px-5 text-sm gap-2 rounded-full\",\n lg: \"h-12 px-6 text-base gap-2 rounded-full\",\n icon: \"h-8 w-8 rounded-lg\",\n};\n\nexport const Button = forwardRef(\n function Button(\n {\n variant = \"primary\",\n size = \"md\",\n pressScale = 0.93,\n ripple = false,\n className,\n children,\n onPointerDown,\n ...rest\n },\n ref,\n ) {\n const reduce = useReducedMotion();\n const canHover = useHoverCapable();\n const [ripples, setRipples] = useState([]);\n const nextId = useRef(0);\n\n const handlePointerDown = useCallback(\n (event: PointerEvent) => {\n if (ripple && !reduce) {\n const rect = event.currentTarget.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height) * 2;\n const id = nextId.current++;\n setRipples((prev) => [\n ...prev,\n {\n id,\n x: event.clientX - rect.left,\n y: event.clientY - rect.top,\n size,\n },\n ]);\n }\n onPointerDown?.(event);\n },\n [ripple, reduce, onPointerDown],\n );\n\n return (\n \n {ripple && !reduce ? (\n \n \n {ripples.map((r) => (\n \n setRipples((prev) => prev.filter((x) => x.id !== r.id))\n }\n />\n ))}\n \n \n ) : null}\n {children}\n \n );\n },\n);\n"},{"path":"components/motion/button/magnetic.tsx","type":"registry:component","target":"@components/motion/button/magnetic.tsx","content":"\"use client\";\n\nimport { forwardRef } from \"react\";\nimport { Magnetic } from \"../magnetic\";\nimport { Button, type ButtonProps } from \"./base\";\n\nexport interface MagneticButtonProps extends ButtonProps {\n /** Magnetic pull strength. Default 0.25. */\n strength?: number;\n /** Class applied to the magnetic wrapper. */\n magneticClassName?: string;\n}\n\nexport const MagneticButton = forwardRef(function MagneticButton(\n { strength = 0.25, magneticClassName, children, ...rest },\n ref,\n) {\n return (\n \n \n \n );\n});\n"},{"path":"components/motion/button/stateful.tsx","type":"registry:component","target":"@components/motion/button/stateful.tsx","content":"\"use client\";\n\nimport { Check, Loader2, X } from \"lucide-react\";\nimport {\n AnimatePresence,\n motion,\n useReducedMotion,\n type Variants,\n} from \"motion/react\";\nimport {\n forwardRef,\n type ReactNode,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { EASE_OUT, SPRING_SWAP } from \"@/lib/ease\";\nimport { Button, type ButtonProps } from \"./base\";\n\nexport type ButtonState = \"idle\" | \"loading\" | \"success\" | \"error\";\n\nexport interface StatefulButtonProps extends Omit {\n state?: ButtonState;\n children: ReactNode;\n loadingText?: ReactNode;\n successText?: ReactNode;\n errorText?: ReactNode;\n icon?: ReactNode;\n}\n\nconst CASCADE_STAGGER = 0.025;\nconst ROLL_BLUR = \"blur(6px)\";\n\nconst CASCADE_LETTER_VARIANTS: Variants = {\n initial: { opacity: 0, y: \"105%\", filter: ROLL_BLUR },\n animate: (delay: number = 0) => ({\n opacity: 1,\n y: \"0%\",\n filter: \"blur(0px)\",\n transition: { ...SPRING_SWAP, delay },\n }),\n exit: (delay: number = 0) => ({\n opacity: 0,\n y: \"-105%\",\n filter: ROLL_BLUR,\n transition: { duration: 0.16, ease: EASE_OUT, delay: delay * 0.5 },\n }),\n};\n\nconst ICON_VARIANTS: Variants = {\n // Width collapses too, so the icon adds/removes its own space smoothly\n // instead of popping the row width in a single frame.\n initial: { opacity: 0, width: 0, scale: 0.7, filter: ROLL_BLUR },\n animate: {\n opacity: 1,\n width: \"1.5rem\",\n scale: 1,\n filter: \"blur(0px)\",\n transition: SPRING_SWAP,\n },\n exit: {\n opacity: 0,\n width: 0,\n scale: 0.7,\n filter: ROLL_BLUR,\n transition: { duration: 0.16, ease: EASE_OUT },\n },\n};\n\nfunction IconSlot({ keyId, children }: { keyId: string; children: ReactNode }) {\n const reduce = useReducedMotion();\n return (\n \n {children}\n \n );\n}\n\nfunction TextSlot({\n value,\n children,\n}: {\n value: string;\n children: ReactNode;\n}) {\n const reduce = useReducedMotion();\n const measureRef = useRef(null);\n const [width, setWidth] = useState();\n const label = typeof children === \"string\" ? children : null;\n const cascade = label !== null && !reduce;\n\n // Measure strings with the same per-letter layout as the cascade. Measuring\n // the whole string preserves kerning, which can make it narrower than the\n // inline-block letters and clip the final glyph during the width animation.\n useLayoutEffect(() => {\n const nextWidth = measureRef.current?.offsetWidth;\n if (!nextWidth) return;\n setWidth((current) => (current === nextWidth ? current : nextWidth));\n });\n\n return (\n \n \n {cascade\n ? label.split(\"\").map((char, index) => (\n \n {char}\n \n ))\n : children}\n \n\n {cascade ? (\n <>\n {label}\n \n \n {label.split(\"\").map((char, index) => (\n \n {char}\n \n ))}\n \n \n \n ) : (\n \n \n {children}\n \n \n )}\n \n );\n}\n\nexport const StatefulButton = forwardRef(function StatefulButton(\n {\n state = \"idle\",\n children,\n loadingText = \"Loading\",\n successText = \"Done\",\n errorText = \"Try again\",\n icon,\n disabled,\n ...rest\n },\n ref,\n) {\n const isBusy = state === \"loading\";\n const stateText =\n state === \"loading\"\n ? loadingText\n : state === \"success\"\n ? successText\n : state === \"error\"\n ? errorText\n : children;\n const textKey =\n typeof stateText === \"string\" ? `${state}-${stateText}` : state;\n\n return (\n \n );\n});\n"},{"path":"lib/hooks/use-hover-capable.ts","type":"registry:hook","target":"@lib/hooks/use-hover-capable.ts","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * Returns true only on devices that have a true hover (mouse / trackpad).\n * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere\n * — gate hover-only effects (scale lifts, magnetic pulls) behind this.\n */\nexport function useHoverCapable() {\n const [canHover, setCanHover] = useState(false);\n\n useEffect(() => {\n if (typeof window === \"undefined\" || !window.matchMedia) return;\n const mq = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n const update = () => setCanHover(mq.matches);\n update();\n mq.addEventListener?.(\"change\", update);\n return () => mq.removeEventListener?.(\"change\", update);\n }, []);\n\n return canHover;\n}\n"},{"path":"components/motion/magnetic.tsx","type":"registry:component","target":"@components/motion/magnetic.tsx","content":"\"use client\";\n\nimport { motion, useMotionValue, useReducedMotion, useSpring } from \"motion/react\";\nimport { useRef, type ReactNode } from \"react\";\nimport { SPRING_MOUSE } from \"@/lib/ease\";\nimport { useHoverCapable } from \"@/lib/hooks/use-hover-capable\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MagneticProps {\n children: ReactNode;\n strength?: number;\n className?: string;\n}\n\nexport function Magnetic({ children, strength = 0.35, className }: MagneticProps) {\n const ref = useRef(null);\n const reduce = useReducedMotion();\n const canHover = useHoverCapable();\n // Decorative cursor-follow: skip on touch (phantom hover) and reduced motion.\n const enabled = !reduce && canHover;\n const x = useMotionValue(0);\n const y = useMotionValue(0);\n const sx = useSpring(x, SPRING_MOUSE);\n const sy = useSpring(y, SPRING_MOUSE);\n\n const onMove = (e: React.MouseEvent) => {\n const el = ref.current;\n if (!el || !enabled) return;\n const rect = el.getBoundingClientRect();\n x.set((e.clientX - rect.left - rect.width / 2) * strength);\n y.set((e.clientY - rect.top - rect.height / 2) * strength);\n };\n\n const onLeave = () => {\n x.set(0);\n y.set(0);\n };\n\n return (\n \n {children}\n \n );\n}\n"}]}