{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "detent", "type": "registry:ui", "title": "Detent", "description": "Animated tabs with a shared-layout sliding pill indicator that flashes white as it lands and rests as a neutral pill with a subtle top hairline. Full roving-tabindex keyboard support with arrow keys, Home/End, and correct tablist/tab/tabpanel roles.", "dependencies": [ "motion" ], "registryDependencies": [ "https://crucibleui.com/r/use-reduced-motion.json" ], "files": [ { "path": "registry/default/navigation/detent/detent.tsx", "type": "registry:ui", "target": "components/crucible/detent.tsx", "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport * as React from \"react\";\n\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface DetentItem {\n /** Unique, URL-safe-ish value identifying this tab. */\n value: string;\n /** Tab label. */\n label: React.ReactNode;\n /** Panel content shown when this tab is active. */\n content: React.ReactNode;\n /** Disable this tab — it's skipped by pointer and keyboard navigation. */\n disabled?: boolean;\n}\n\nexport interface DetentProps extends Omit, \"onChange\"> {\n /** Tabs to render, in order. */\n items: DetentItem[];\n /** Controlled active tab value. */\n value?: string;\n /** Initial active tab value when uncontrolled. @default first enabled item */\n defaultValue?: string;\n /** Fires whenever the active tab changes, controlled or not. */\n onValueChange?: (value: string) => void;\n /** Tab list orientation. @default \"horizontal\" */\n orientation?: \"horizontal\" | \"vertical\";\n /** Accessible name for the tablist (e.g. \"Filter by team\"). Props on the root don't reach the tablist itself. */\n label?: string;\n /** Extra classes for the tablist track — e.g. `max-w-full overflow-x-auto` to let many tabs scroll. */\n listClassName?: string;\n /** Extra classes for every tab panel (replaces nothing; merged after the focus-ring defaults). */\n panelClassName?: string;\n}\n\n/**\n * Detent — animated tabs with a shared-layout sliding pill indicator that\n * flashes white as it lands and rests as a neutral pill with a subtle top\n * hairline. Full roving-tabindex keyboard support: Arrow keys move and\n * activate, Home/End jump to the ends, disabled tabs are skipped. Indicator\n * motion collapses to an instant snap under `prefers-reduced-motion`.\n */\nexport function Detent({\n items,\n value,\n defaultValue,\n onValueChange,\n orientation = \"horizontal\",\n label,\n listClassName,\n panelClassName,\n className,\n ...props\n}: DetentProps) {\n const reducedMotion = useReducedMotion();\n const baseId = React.useId();\n const tabRefs = React.useRef>([]);\n // Bumped each time the sliding pill finishes settling into a tab; retriggers\n // the white bloom pulse — the detent \"landing\". Stays 0 on first paint so the\n // component mounts at rest, without a flash.\n const [landCount, setLandCount] = React.useState(0);\n\n const firstEnabled = items.find((item) => !item.disabled)?.value ?? items[0]?.value;\n const [internalValue, setInternalValue] = React.useState(defaultValue ?? firstEnabled);\n const activeValue = value ?? internalValue;\n\n const selectTab = React.useCallback(\n (next: string) => {\n if (value === undefined) setInternalValue(next);\n onValueChange?.(next);\n },\n [value, onValueChange]\n );\n\n const nextEnabledIndex = React.useCallback(\n (from: number, direction: 1 | -1) => {\n const count = items.length;\n let index = from;\n for (let step = 0; step < count; step++) {\n index = (index + direction + count) % count;\n if (!items[index]?.disabled) return index;\n }\n return from;\n },\n [items]\n );\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n const currentIndex = items.findIndex((item) => item.value === activeValue);\n const forwardKey = orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n const backwardKey = orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n\n let nextIndex: number | null = null;\n if (event.key === forwardKey) nextIndex = nextEnabledIndex(currentIndex, 1);\n else if (event.key === backwardKey) nextIndex = nextEnabledIndex(currentIndex, -1);\n else if (event.key === \"Home\") nextIndex = nextEnabledIndex(-1, 1);\n else if (event.key === \"End\") nextIndex = nextEnabledIndex(0, -1);\n\n if (nextIndex === null) return;\n event.preventDefault();\n const nextItem = items[nextIndex];\n if (!nextItem) return;\n selectTab(nextItem.value);\n tabRefs.current[nextIndex]?.focus();\n },\n [items, activeValue, orientation, nextEnabledIndex, selectTab]\n );\n\n return (\n
\n \n \n {items.map((item, index) => {\n const selected = item.value === activeValue;\n return (\n {\n tabRefs.current[index] = el;\n }}\n role=\"tab\"\n type=\"button\"\n id={`${baseId}-tab-${item.value}`}\n aria-selected={selected}\n aria-controls={`${baseId}-panel-${item.value}`}\n tabIndex={selected ? 0 : -1}\n disabled={item.disabled}\n onClick={() => !item.disabled && selectTab(item.value)}\n className={cn(\n \"relative z-10 rounded-full px-4 py-1.5 text-sm font-medium whitespace-nowrap text-white/55 transition-colors duration-200\",\n \"hover:text-white/85\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-950\",\n \"disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-white/55\",\n selected && \"text-white\"\n )}\n >\n {selected && (\n {\n if (!reducedMotion) setLandCount((c) => c + 1);\n }}\n >\n {/* Idle life: a slow, faint sheen glints across the resting\n pill every few seconds. Pure CSS; frozen under reduced motion. */}\n {!reducedMotion && }\n {/* Detent landing: a white brightness + bloom pulse fired the\n instant the pill settles. Gated on landCount>0 so mount is calm. */}\n \n {landCount > 0 && (\n \n )}\n \n \n )}\n {item.label}\n \n );\n })}\n
\n {items.map((item) => (\n