{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"availability-scheduler","type":"registry:block","title":"Availability Scheduler","description":"Weekly availability editor where each day springs between available and unavailable, time ranges add and remove with blur-slide motion, times pick from a scrollable dropdown, and a copy menu clones hours to other days.","author":"Saurabh ","dependencies":["clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/availability-scheduler/index.tsx","type":"registry:component","target":"@components/motion/availability-scheduler/index.tsx","content":"\"use client\";\n// beui.dev/components/blocks/availability-scheduler\n\nimport { LayoutGroup, useReducedMotion } from \"motion/react\";\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { DayRow } from \"./day-row\";\nimport {\n type DayAvailability,\n type DayKey,\n WEEKDAYS,\n type WeekAvailability,\n buildOptions,\n defaultWeek,\n} from \"./types\";\n\nexport type {\n DayAvailability,\n DayKey,\n TimeRange,\n WeekAvailability,\n} from \"./types\";\nexport { defaultWeek } from \"./types\";\n\nexport interface AvailabilitySchedulerProps {\n value?: WeekAvailability;\n defaultValue?: WeekAvailability;\n onChange?: (value: WeekAvailability) => void;\n /** Minutes between selectable times. Default 30. */\n step?: number;\n className?: string;\n}\n\nexport function AvailabilityScheduler({\n value,\n defaultValue,\n onChange,\n step = 30,\n className,\n}: AvailabilitySchedulerProps) {\n const reduce = useReducedMotion() ?? false;\n const groupId = useId();\n const options = useMemo(() => buildOptions(step), [step]);\n const idRef = useRef(0);\n\n const [internal, setInternal] = useState(\n () => defaultValue ?? defaultWeek(),\n );\n const controlled = value !== undefined;\n const week = controlled ? value : internal;\n\n const commit = useCallback(\n (next: WeekAvailability) => {\n if (!controlled) setInternal(next);\n onChange?.(next);\n },\n [controlled, onChange],\n );\n\n const setDay = useCallback(\n (day: DayKey, next: DayAvailability) => {\n commit({ ...week, [day]: next });\n },\n [commit, week],\n );\n\n const copyDay = useCallback(\n (from: DayKey, targets: DayKey[]) => {\n const source = week[from];\n const next = { ...week };\n for (const t of targets) {\n next[t] = {\n enabled: source.enabled,\n ranges: source.ranges.map((r) => ({\n ...r,\n id: `${t}-c${idRef.current++}`,\n })),\n };\n }\n commit(next);\n },\n [commit, week],\n );\n\n return (\n \n
\n {WEEKDAYS.map(({ key, label }, i) => (\n setDay(key, next)}\n onCopy={(targets) => copyDay(key, targets)}\n />\n ))}\n
\n \n );\n}\n"},{"path":"components/motion/availability-scheduler/day-row.tsx","type":"registry:component","target":"@components/motion/availability-scheduler/day-row.tsx","content":"\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { Plus, X } from \"lucide-react\";\nimport { useRef } from \"react\";\nimport { Switch } from \"@/components/motion/switch\";\nimport { Tooltip } from \"@/components/motion/tooltip\";\nimport { SPRING_LAYOUT } from \"@/lib/ease\";\nimport { CopyMenu } from \"./copy-menu\";\nimport { IconButton } from \"./icon-button\";\nimport { TimeSelect } from \"./time-select\";\nimport {\n type DayAvailability,\n type DayKey,\n type TimeOption,\n type TimeRange,\n toMinutes,\n toValue,\n} from \"./types\";\n\nexport function DayRow({\n day,\n label,\n state,\n options,\n reduce,\n depth,\n onChange,\n onCopy,\n}: {\n day: DayKey;\n label: string;\n state: DayAvailability;\n options: TimeOption[];\n reduce: boolean;\n // Higher = painted above later rows, so a downward-opening panel always sits\n // over the rows below it — during both open and close animations.\n depth: number;\n onChange: (next: DayAvailability) => void;\n onCopy: (targets: DayKey[]) => void;\n}) {\n const idRef = useRef(0);\n const nextId = () => `${day}-n${idRef.current++}`;\n\n const setEnabled = (enabled: boolean) => {\n if (enabled && state.ranges.length === 0) {\n onChange({\n enabled,\n ranges: [{ id: nextId(), start: \"09:00\", end: \"17:00\" }],\n });\n } else {\n onChange({ ...state, enabled });\n }\n };\n\n const updateRange = (id: string, patch: Partial) => {\n onChange({\n ...state,\n ranges: state.ranges.map((r) => (r.id === id ? { ...r, ...patch } : r)),\n });\n };\n\n const addRange = () => {\n const last = state.ranges[state.ranges.length - 1];\n const start = last ? Math.min(toMinutes(last.end) + 60, 24 * 60 - 60) : 540;\n onChange({\n enabled: true,\n ranges: [\n ...state.ranges,\n { id: nextId(), start: toValue(start), end: toValue(start + 60) },\n ],\n });\n };\n\n const removeRange = (id: string) => {\n const ranges = state.ranges.filter((r) => r.id !== id);\n // Removing the last slot marks the day unavailable.\n onChange({ enabled: ranges.length > 0, ranges });\n };\n\n const actions = (\n <>\n \n \n \n \n \n \n \n );\n\n return (\n \n {/* toggle + label; actions ride along on mobile */}\n
\n
\n \n {label}\n
\n
{actions}
\n
\n\n {/* ranges or unavailable */}\n
\n \n {state.enabled ? (\n state.ranges.map((r, i) => (\n \n
\n updateRange(r.id, { start: v })}\n />\n
\n –\n
\n updateRange(r.id, { end: v })}\n />\n
\n \n removeRange(r.id)}\n >\n \n \n \n \n ))\n ) : (\n \n Unavailable\n \n )}\n \n
\n\n {/* actions (desktop) */}\n
\n {actions}\n
\n \n );\n}\n"},{"path":"components/motion/availability-scheduler/types.ts","type":"registry:component","target":"@components/motion/availability-scheduler/types.ts","content":"export type DayKey = \"mon\" | \"tue\" | \"wed\" | \"thu\" | \"fri\" | \"sat\" | \"sun\";\n\nexport type TimeRange = { id: string; start: string; end: string };\nexport type DayAvailability = { enabled: boolean; ranges: TimeRange[] };\nexport type WeekAvailability = Record;\nexport type TimeOption = { value: string; label: string };\n\nexport const WEEKDAYS: { key: DayKey; label: string }[] = [\n { key: \"mon\", label: \"Monday\" },\n { key: \"tue\", label: \"Tuesday\" },\n { key: \"wed\", label: \"Wednesday\" },\n { key: \"thu\", label: \"Thursday\" },\n { key: \"fri\", label: \"Friday\" },\n { key: \"sat\", label: \"Saturday\" },\n { key: \"sun\", label: \"Sunday\" },\n];\n\n// ─── time helpers ────────────────────────────────────────────────────────────\n\nexport const toMinutes = (v: string) => {\n const [h, m] = v.split(\":\").map(Number);\n return h * 60 + m;\n};\n\nexport const toValue = (mins: number) => {\n const clamped = Math.max(0, Math.min(24 * 60 - 1, mins));\n const h = Math.floor(clamped / 60);\n const m = clamped % 60;\n return `${String(h).padStart(2, \"0\")}:${String(m).padStart(2, \"0\")}`;\n};\n\nexport const label12 = (v: string) => {\n const [h, m] = v.split(\":\").map(Number);\n const ap = h < 12 ? \"AM\" : \"PM\";\n const h12 = h % 12 === 0 ? 12 : h % 12;\n return `${h12}:${String(m).padStart(2, \"0\")} ${ap}`;\n};\n\nexport function buildOptions(step: number): TimeOption[] {\n const out: TimeOption[] = [];\n for (let m = 0; m < 24 * 60; m += step) {\n const value = toValue(m);\n out.push({ value, label: label12(value) });\n }\n return out;\n}\n\n// Default: Mon–Fri 9–5, weekend off. Fixed ids so SSR and first client render\n// agree (new ranges get counter ids afterwards).\nexport function defaultWeek(): WeekAvailability {\n const workday = (day: DayKey): DayAvailability => ({\n enabled: true,\n ranges: [{ id: `${day}-0`, start: \"09:00\", end: \"17:00\" }],\n });\n const off = (day: DayKey): DayAvailability => ({\n enabled: false,\n ranges: [{ id: `${day}-0`, start: \"09:00\", end: \"17:00\" }],\n });\n return {\n mon: workday(\"mon\"),\n tue: workday(\"tue\"),\n wed: workday(\"wed\"),\n thu: workday(\"thu\"),\n fri: workday(\"fri\"),\n sat: off(\"sat\"),\n sun: off(\"sun\"),\n };\n}\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/availability-scheduler/copy-menu.tsx","type":"registry:component","target":"@components/motion/availability-scheduler/copy-menu.tsx","content":"\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { Check, Copy } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Checkbox } from \"@/components/motion/checkbox\";\nimport {\n MorphPopover,\n MorphPopoverContent,\n} from \"@/components/motion/popover-morph\";\nimport { Tooltip } from \"@/components/motion/tooltip\";\nimport { SPRING_PRESS } from \"@/lib/ease\";\nimport { IconButton } from \"./icon-button\";\nimport { type DayKey, WEEKDAYS } from \"./types\";\n\n// Copy this day's hours to other days: a morph popover with a day picker.\nexport function CopyMenu({\n fromLabel,\n reduce,\n onApply,\n}: {\n fromLabel: string;\n reduce: boolean;\n onApply: (targets: DayKey[]) => void;\n}) {\n const [open, setOpen] = useState(false);\n const [copied, setCopied] = useState(false);\n const [picked, setPicked] = useState>(new Set());\n const others = WEEKDAYS.filter((d) => d.label !== fromLabel);\n\n const toggle = (k: DayKey) =>\n setPicked((prev) => {\n const next = new Set(prev);\n if (next.has(k)) next.delete(k);\n else next.add(k);\n return next;\n });\n\n const apply = (targets: DayKey[]) => {\n if (!targets.length) return;\n onApply(targets);\n setOpen(false);\n setPicked(new Set());\n setCopied(true);\n window.setTimeout(() => setCopied(false), 1200);\n };\n\n return (\n \n \n setOpen(!open)}\n >\n \n {copied ? (\n \n \n \n ) : (\n \n \n \n )}\n \n \n \n\n \n

\n Copy times to\n

\n
\n {others.map((d) => (\n toggle(d.key)}\n label={d.label}\n className=\"w-full flex-row-reverse justify-between rounded-lg px-2 py-1.5 transition-colors hover:bg-muted [&_button]:size-4 [&_button]:rounded-[5px] [&_button]:border [&_button[data-state=unchecked]]:border-border-strong\"\n />\n ))}\n
\n
\n apply(others.map((d) => d.key))}\n className=\"flex-1 rounded-lg px-2 py-1.5 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:bg-muted\"\n >\n Every day\n \n apply([...picked])}\n disabled={picked.size === 0}\n className=\"flex-1 rounded-lg bg-primary px-2 py-1.5 text-xs font-semibold text-primary-foreground outline-none transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40\"\n >\n Apply\n \n
\n \n \n );\n}\n"},{"path":"components/motion/availability-scheduler/icon-button.tsx","type":"registry:component","target":"@components/motion/availability-scheduler/icon-button.tsx","content":"\"use client\";\n\nimport { motion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport { SPRING_PRESS } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport function IconButton({\n onClick,\n label,\n disabled,\n expanded,\n reduce,\n children,\n className,\n // Rest props let a wrapping Tooltip inject its hover/focus handlers.\n ...rest\n}: {\n onClick: () => void;\n label: string;\n disabled?: boolean;\n expanded?: boolean;\n reduce: boolean;\n children: ReactNode;\n className?: string;\n [key: string]: unknown;\n}) {\n return (\n \n {children}\n \n );\n}\n"},{"path":"components/motion/availability-scheduler/time-select.tsx","type":"registry:component","target":"@components/motion/availability-scheduler/time-select.tsx","content":"\"use client\";\n\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/motion/select\";\nimport type { TimeOption } from \"./types\";\n\n// Time field: the library Select, with the option list capped so the panel\n// measures a small height and scrolls instead of unfolding all 48 options.\nexport function TimeSelect({\n value,\n onChange,\n options,\n}: {\n value: string;\n onChange: (v: string) => void;\n options: TimeOption[];\n}) {\n return (\n \n );\n}\n"},{"path":"components/motion/switch.tsx","type":"registry:component","target":"@components/motion/switch.tsx","content":"\"use client\";\n\nimport { animate, motion, MotionConfig, useReducedMotion } from \"motion/react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n// Heavy, deliberate thumb — high mass keeps the travel weighty without wobble.\nconst THUMB_SPRING = { type: \"spring\", stiffness: 800, damping: 80, mass: 4 } as const;\n\nexport interface SwitchProps {\n checked: boolean;\n onCheckedChange: (checked: boolean) => void;\n disabled?: boolean;\n label?: string;\n className?: string;\n}\n\nexport function Switch({ checked, onCheckedChange, disabled, label, className }: SwitchProps) {\n const id = useId();\n const thumbRef = useRef(null);\n const reduce = useReducedMotion();\n const [isPressed, setIsPressed] = useState(false);\n const [isPointer, setIsPointer] = useState(false);\n\n // Disabled shake feedback when pressed.\n useEffect(() => {\n if (!thumbRef.current || reduce) return;\n if (disabled && isPressed) {\n animate(\n thumbRef.current,\n { x: [0, -2, 2, -1, 0] },\n { delay: 0.2, duration: 0.6 },\n );\n }\n }, [disabled, isPressed, reduce]);\n\n const squish = !disabled && isPointer && isPressed && !reduce;\n\n return (\n \n \n !disabled && onCheckedChange(!checked)}\n onPointerDown={(e) => {\n setIsPressed(true);\n setIsPointer(e.type.startsWith(\"pointer\"));\n }}\n onPointerUp={() => setIsPressed(false)}\n onPointerLeave={() => setIsPressed(false)}\n initial={false}\n data-state={checked ? \"checked\" : \"unchecked\"}\n className={cn(\n \"group peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center px-1 rounded-full 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 checked ? \"justify-end bg-primary\" : \"justify-start bg-muted-foreground/60\",\n )}\n >\n \n {/* Stretch toward the destination while active. */}\n \n \n \n {label ? (\n \n ) : null}\n \n \n );\n}\n"},{"path":"components/motion/tooltip.tsx","type":"registry:component","target":"@components/motion/tooltip.tsx","content":"\"use client\";\n\nimport {\n AnimatePresence,\n motion,\n useReducedMotion,\n type Variants,\n} from \"motion/react\";\nimport {\n cloneElement,\n isValidElement,\n type ReactElement,\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { useHoverCapable } from \"@/lib/hooks/use-hover-capable\";\nimport { cn } from \"@/lib/utils\";\n\ntype Side = \"top\" | \"right\" | \"bottom\" | \"left\";\n\nexport interface TooltipProps {\n content: ReactNode;\n children: ReactElement;\n side?: Side;\n /** Delay before showing (ms). Default 120. */\n delay?: number;\n className?: string;\n /** Classes for the outer wrapper span. Use to fix baseline / fill parent. */\n wrapperClassName?: string;\n}\n\n// Gap between trigger and tooltip, in px.\nconst GAP = 8;\n\n// Centering transform for the fixed-positioned anchor point, per side.\nconst anchorTransform: Record = {\n top: \"translate(-50%, -100%)\",\n bottom: \"translate(-50%, 0)\",\n left: \"translate(-100%, -50%)\",\n right: \"translate(0, -50%)\",\n};\n\nconst transformOrigin: Record = {\n top: \"center bottom\",\n bottom: \"center top\",\n left: \"right center\",\n right: \"left center\",\n};\n\n// Offset is in the direction *away* from the trigger — content originates near\n// the trigger and rises into resting position.\nconst offsetFrom: Record = {\n top: { y: 8 },\n bottom: { y: -8 },\n left: { x: 8 },\n right: { x: -8 },\n};\n\nfunction buildVariants(side: Side): Variants {\n const o = offsetFrom[side];\n return {\n initial: {\n opacity: 0,\n scale: 0.9,\n filter: \"blur(5px)\",\n x: o.x ?? 0,\n y: o.y ?? 0,\n },\n animate: {\n opacity: 1,\n scale: 1,\n filter: \"blur(0px)\",\n x: 0,\n y: 0,\n transition: {\n type: \"spring\",\n stiffness: 380,\n damping: 30,\n mass: 0.7,\n opacity: { duration: 0.14, ease: EASE_OUT },\n filter: { duration: 0.18, ease: EASE_OUT },\n },\n },\n exit: {\n opacity: 0,\n scale: 0.94,\n filter: \"blur(3px)\",\n x: (o.x ?? 0) * 0.6,\n y: (o.y ?? 0) * 0.6,\n transition: { duration: 0.12, ease: EASE_OUT },\n },\n };\n}\n\nconst REDUCED_VARIANTS: Variants = {\n initial: { opacity: 0 },\n animate: { opacity: 1, transition: { duration: 0.14, ease: EASE_OUT } },\n exit: { opacity: 0, transition: { duration: 0.1, ease: EASE_OUT } },\n};\n\n// Once any tooltip has just closed, neighbouring tooltips open without the\n// initial delay — moving along a toolbar feels instant after the first one.\nconst WARM_WINDOW_MS = 300;\nlet lastHiddenAt = 0;\n\nexport function Tooltip({\n content,\n children,\n side = \"top\",\n delay = 120,\n className,\n wrapperClassName,\n}: TooltipProps) {\n const [open, setOpen] = useState(false);\n const [coords, setCoords] = useState<{ top: number; left: number } | null>(\n null,\n );\n const id = useId();\n const timer = useRef | null>(null);\n const anchorRef = useRef(null);\n const reduce = useReducedMotion();\n const canHover = useHoverCapable();\n\n // Anchor point in viewport coords, on the edge of the trigger facing `side`.\n // Position:fixed means these viewport coords place the tooltip directly, so\n // it escapes every ancestor's stacking context and overflow.\n const place = useCallback(() => {\n const el = anchorRef.current;\n if (!el) return;\n const r = el.getBoundingClientRect();\n const cx = r.left + r.width / 2;\n const cy = r.top + r.height / 2;\n const point: Record = {\n top: { top: r.top - GAP, left: cx },\n bottom: { top: r.bottom + GAP, left: cx },\n left: { top: cy, left: r.left - GAP },\n right: { top: cy, left: r.right + GAP },\n };\n setCoords(point[side]);\n }, [side]);\n\n const show = useCallback(() => {\n if (!canHover) return;\n if (timer.current) clearTimeout(timer.current);\n const warm = Date.now() - lastHiddenAt < WARM_WINDOW_MS;\n timer.current = setTimeout(\n () => {\n place();\n setOpen(true);\n },\n warm ? 0 : delay,\n );\n }, [canHover, delay, place]);\n\n const hide = useCallback(() => {\n if (timer.current) {\n clearTimeout(timer.current);\n timer.current = null;\n }\n setOpen((wasOpen) => {\n if (wasOpen) lastHiddenAt = Date.now();\n return false;\n });\n }, []);\n\n // Keep the tooltip pinned to the trigger while it's open and the page scrolls\n // or resizes (fixed coords are viewport-relative).\n useEffect(() => {\n if (!open) return;\n const onMove = () => place();\n window.addEventListener(\"scroll\", onMove, true);\n window.addEventListener(\"resize\", onMove);\n return () => {\n window.removeEventListener(\"scroll\", onMove, true);\n window.removeEventListener(\"resize\", onMove);\n };\n }, [open, place]);\n\n const variants = useMemo(\n () => (reduce ? REDUCED_VARIANTS : buildVariants(side)),\n [reduce, side],\n );\n\n if (!isValidElement(children)) return children;\n\n const trigger = cloneElement(\n children as ReactElement>,\n {\n onMouseEnter: show,\n onMouseLeave: hide,\n onFocus: show,\n onBlur: hide,\n \"aria-describedby\": id,\n },\n );\n\n return (\n <>\n \n {trigger}\n \n {typeof document !== \"undefined\"\n ? createPortal(\n \n {open && coords ? (\n \n \n {content}\n \n \n ) : null}\n ,\n document.body,\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"},{"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/popover-morph.tsx","type":"registry:component","target":"@components/motion/popover-morph.tsx","content":"\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n cloneElement,\n createContext,\n isValidElement,\n type ReactElement,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { SPRING_PANEL } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\ntype Side = \"top\" | \"bottom\";\ntype Align = \"start\" | \"end\";\n\ntype MorphContextValue = {\n open: boolean;\n setOpen: (open: boolean) => void;\n toggle: () => void;\n triggerId: string;\n contentId: string;\n};\n\nconst MorphContext = createContext(null);\n\nfunction useMorphContext(component: string) {\n const ctx = useContext(MorphContext);\n if (!ctx) throw new Error(`${component} must be used within `);\n return ctx;\n}\n\nexport interface MorphPopoverProps {\n children: ReactNode;\n /** Controlled open state. */\n open?: boolean;\n /** Uncontrolled initial open state. */\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n className?: string;\n}\n\n/**\n * A popover whose panel morphs open from the trigger corner: it's laid out at\n * full size but clipped to the corner nearest the trigger, then unclips as one\n * piece. Closes on outside pointer / Escape. Controlled or uncontrolled.\n */\nexport function MorphPopover({\n children,\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n className,\n}: MorphPopoverProps) {\n const baseId = useId();\n const rootRef = useRef(null);\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const controlled = controlledOpen !== undefined;\n const open = controlled ? controlledOpen : internalOpen;\n\n const setOpen = useCallback(\n (next: boolean) => {\n if (!controlled) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [controlled, onOpenChange],\n );\n const toggle = useCallback(() => setOpen(!open), [setOpen, open]);\n\n useEffect(() => {\n if (!open) return;\n const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && setOpen(false);\n const onPointer = (e: PointerEvent) => {\n if (rootRef.current && !rootRef.current.contains(e.target as Node))\n setOpen(false);\n };\n window.addEventListener(\"keydown\", onKey);\n window.addEventListener(\"pointerdown\", onPointer);\n return () => {\n window.removeEventListener(\"keydown\", onKey);\n window.removeEventListener(\"pointerdown\", onPointer);\n };\n }, [open, setOpen]);\n\n const ctx = useMemo(\n () => ({\n open,\n setOpen,\n toggle,\n triggerId: `${baseId}-trigger`,\n contentId: `${baseId}-content`,\n }),\n [open, setOpen, toggle, baseId],\n );\n\n return (\n \n
\n {children}\n
\n \n );\n}\n\nexport interface MorphPopoverTriggerProps {\n children: ReactElement;\n}\n\n/** Wraps a single element, toggling the popover on click. */\nexport function MorphPopoverTrigger({ children }: MorphPopoverTriggerProps) {\n const ctx = useMorphContext(\"MorphPopoverTrigger\");\n if (!isValidElement(children)) return children;\n\n const child = children as ReactElement>;\n const childOnClick = child.props.onClick as\n | ((e: unknown) => void)\n | undefined;\n\n return cloneElement(child, {\n id: ctx.triggerId,\n onClick: (e: unknown) => {\n childOnClick?.(e);\n ctx.toggle();\n },\n \"aria-haspopup\": \"menu\",\n \"aria-expanded\": ctx.open,\n \"aria-controls\": ctx.open ? ctx.contentId : undefined,\n });\n}\n\nconst originFor = (side: Side, align: Align) =>\n `${side === \"bottom\" ? \"top\" : \"bottom\"} ${align === \"end\" ? \"right\" : \"left\"}`;\n\n// A clip that hides everything but the corner nearest the trigger, so the\n// panel appears to grow out of it. inset(top right bottom left).\nfunction clipHidden(side: Side, align: Align, radius: number) {\n const top = side === \"bottom\" ? \"0%\" : \"92%\";\n const bottom = side === \"bottom\" ? \"92%\" : \"0%\";\n const right = align === \"end\" ? \"0%\" : \"92%\";\n const left = align === \"end\" ? \"92%\" : \"0%\";\n return `inset(${top} ${right} ${bottom} ${left} round ${radius}px)`;\n}\nconst clipShown = (radius: number) => `inset(0% 0% 0% 0% round ${radius}px)`;\n\nexport interface MorphPopoverContentProps {\n children: ReactNode;\n side?: Side;\n align?: Align;\n /** Gap between trigger and panel, in px. Default 8. */\n sideOffset?: number;\n /** Panel corner radius, in px. Default 16. */\n radius?: number;\n className?: string;\n}\n\nexport function MorphPopoverContent({\n children,\n side = \"bottom\",\n align = \"end\",\n sideOffset = 8,\n radius = 16,\n className,\n}: MorphPopoverContentProps) {\n const ctx = useMorphContext(\"MorphPopoverContent\");\n const reduce = useReducedMotion() ?? false;\n\n const posClass = cn(\n side === \"bottom\" ? \"top-full\" : \"bottom-full\",\n align === \"end\" ? \"right-0\" : \"left-0\",\n );\n const marginStyle =\n side === \"bottom\" ? { marginTop: sideOffset } : { marginBottom: sideOffset };\n\n // Close animates with the same spring as open, so it morphs back to the\n // corner instead of snapping shut.\n const wrap = reduce\n ? undefined\n : {\n hidden: { opacity: 0, scale: 0.96 },\n show: { opacity: 1, scale: 1, transition: SPRING_PANEL },\n exit: { opacity: 0, scale: 0.96, transition: SPRING_PANEL },\n };\n const clip = reduce\n ? undefined\n : {\n hidden: { clipPath: clipHidden(side, align, radius) },\n show: { clipPath: clipShown(radius), transition: SPRING_PANEL },\n exit: { clipPath: clipHidden(side, align, radius), transition: SPRING_PANEL },\n };\n\n return (\n \n {ctx.open ? (\n \n \n {children}\n \n \n ) : null}\n \n );\n}\n"},{"path":"components/motion/select.tsx","type":"registry:component","target":"@components/motion/select.tsx","content":"\"use client\";\n\nimport { Check, ChevronDown } from \"lucide-react\";\nimport {\n motion,\n type Transition,\n useReducedMotion,\n type Variants,\n} from \"motion/react\";\nimport {\n createContext,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useId,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\n// Spring with bounce powers the unfold/separation; per-property timings in the\n// content choreograph it (see SelectContent). Mirrors bouncy-accordion's feel.\nconst CHEVRON_TRANSITION: Transition = { type: \"spring\", duration: 0.4, bounce: 0.3 };\n\nconst LIST_VARIANTS: Variants = {\n hidden: {},\n show: { transition: { staggerChildren: 0.035, delayChildren: 0.05 } },\n};\nconst ITEM_VARIANTS: Variants = {\n hidden: { opacity: 0, y: -6, filter: \"blur(3px)\" },\n show: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n};\n\ntype Placement = \"bottom\" | \"top\";\n\ninterface SelectContextValue {\n value: string | undefined;\n open: boolean;\n setOpen: (open: boolean) => void;\n select: (value: string) => void;\n register: (value: string, label: string) => void;\n unregister: (value: string) => void;\n labelFor: (value: string | undefined) => string | undefined;\n reduce: boolean;\n triggerId: string;\n listId: string;\n disabled: boolean;\n placement: Placement;\n setPlacement: (p: Placement) => void;\n}\n\nconst SelectContext = createContext(null);\n\nfunction useSelectContext(component: string) {\n const ctx = useContext(SelectContext);\n if (!ctx) throw new Error(`${component} must be used within