{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sidebar-001", "title": "Sidebar 001", "description": "Animated vertical sidebar with spring hover highlight, active indicator bar, and per-item dash pattern.", "dependencies": [ "motion", "lucide-react" ], "files": [ { "path": "registry/components/unlumen/sidebar-001/index.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n createContext,\n memo,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nconst MotionChevron = motion.create(ChevronRight);\n\nconst EFFECTS_KEY = \"sidebar-001-effects\";\n\nconst EffectsContext = createContext<{ enabled: boolean; toggle: () => void }>({\n enabled: true,\n toggle: () => {},\n});\n\nfunction EffectsProvider({\n children,\n defaultEnabled = true,\n}: {\n children: React.ReactNode;\n defaultEnabled?: boolean;\n}) {\n const [enabled, setEnabled] = useState(() => {\n if (typeof window === \"undefined\") return defaultEnabled;\n const stored = localStorage.getItem(EFFECTS_KEY);\n return stored !== null ? stored === \"true\" : defaultEnabled;\n });\n\n const toggle = useCallback(() => {\n setEnabled((prev) => {\n const next = !prev;\n localStorage.setItem(EFFECTS_KEY, String(next));\n return next;\n });\n }, []);\n\n const value = useMemo(() => ({ enabled, toggle }), [enabled, toggle]);\n return (\n {children}\n );\n}\n\nexport function useSidebar001Effects() {\n return useContext(EffectsContext);\n}\n\n// ─── Hover context ────────────────────────────────────────────────────────────\n\ninterface HoverRect {\n top: number;\n height: number;\n left: number;\n}\n\nconst HoverContext = createContext<{\n hovered: string | null;\n hoverRect: HoverRect | null;\n containerRef: React.RefObject;\n setHovered: (id: string | null, rect?: HoverRect | null) => void;\n}>({\n hovered: null,\n hoverRect: null,\n containerRef: { current: null },\n setHovered: () => {},\n});\n\nfunction HoverProvider({\n children,\n containerRef,\n}: {\n children: React.ReactNode;\n containerRef: React.RefObject;\n}) {\n const [hovered, setHoveredId] = useState(null);\n const [hoverRect, setHoverRect] = useState(null);\n\n const setHovered = useCallback(\n (id: string | null, rect?: HoverRect | null) => {\n setHoveredId(id);\n setHoverRect(rect ?? null);\n },\n [],\n );\n\n const value = useMemo(\n () => ({ hovered, hoverRect, containerRef, setHovered }),\n [hovered, hoverRect, containerRef, setHovered],\n );\n\n return (\n {children}\n );\n}\n\n// ─── Scroll to active ─────────────────────────────────────────────────────────\n\nfunction useScrollToActive(active: boolean) {\n const ref = useRef(null);\n const scrolled = useRef(false);\n\n useEffect(() => {\n if (!active || scrolled.current || !ref.current) return;\n scrolled.current = true;\n const el = ref.current;\n const schedule =\n typeof requestIdleCallback !== \"undefined\"\n ? (cb: () => void) => requestIdleCallback(cb)\n : (cb: () => void) => setTimeout(cb, 100);\n const cancel =\n typeof cancelIdleCallback !== \"undefined\"\n ? cancelIdleCallback\n : clearTimeout;\n const id = schedule(() => {\n const viewport = el.closest(\"[data-scroll-viewport]\");\n if (!(viewport instanceof HTMLElement)) return;\n const vpRect = viewport.getBoundingClientRect();\n const elRect = el.getBoundingClientRect();\n const offset =\n elRect.top - vpRect.top - vpRect.height / 2 + elRect.height / 2;\n if (Math.abs(offset) > 40)\n viewport.scrollBy({ top: offset, behavior: \"smooth\" });\n });\n return () => cancel(id as number);\n }, [active]);\n\n useEffect(() => {\n if (!active) scrolled.current = false;\n }, [active]);\n\n return ref;\n}\n\n// ─── HoverHighlight ───────────────────────────────────────────────────────────\n\nfunction HoverHighlight() {\n const { hoverRect, hovered } = useContext(HoverContext);\n const { enabled } = useContext(EffectsContext);\n\n return (\n \n {enabled && hovered && hoverRect && (\n \n )}\n \n );\n}\n\n// ─── Sidebar001Item ───────────────────────────────────────────────────────────\n\nexport interface Sidebar001ItemProps {\n href: string;\n label: React.ReactNode;\n isActive: boolean;\n isNew?: boolean;\n className?: string;\n onClick?: React.MouseEventHandler;\n}\n\nexport const Sidebar001Item = memo(function Sidebar001Item({\n href,\n label,\n isActive,\n isNew,\n className,\n onClick,\n}: Sidebar001ItemProps) {\n const { hovered, setHovered, containerRef } = useContext(HoverContext);\n const isHovered = hovered === href;\n const itemRef = useScrollToActive(isActive);\n\n const opacity = isActive\n ? 1\n : hovered !== null\n ? isHovered\n ? 1\n : 0.3\n : 0.55;\n const x = isActive ? 8 : isHovered ? 6 : 0;\n\n return (\n
\n {isActive && (\n \n )}\n\n \n \n \n \n\n \n {\n const el = itemRef.current;\n const container = containerRef.current;\n if (el && container) {\n const elRect = el.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n setHovered(href, {\n top: elRect.top - containerRect.top,\n height: elRect.height,\n left: 25,\n });\n } else {\n setHovered(href);\n }\n }}\n onMouseLeave={() => setHovered(null)}\n className={cn(\n \"relative flex items-center gap-2 ml-2 pl-4 py-1.5 text-sm select-none\",\n className,\n )}\n >\n {label}\n {isNew && (\n \n )}\n \n \n
\n );\n});\n\n// ─── Sidebar001Separator ──────────────────────────────────────────────────────\n\nexport function Sidebar001Separator({\n children,\n className,\n}: {\n children?: React.ReactNode;\n className?: string;\n}) {\n return (\n \n {children}\n \n );\n}\n\n// ─── Sidebar001Group ──────────────────────────────────────────────────────────\n\nexport interface Sidebar001GroupProps {\n label: React.ReactNode;\n children: React.ReactNode;\n defaultOpen?: boolean;\n icon?: React.ReactNode;\n className?: string;\n}\n\nexport function Sidebar001Group({\n label,\n children,\n defaultOpen = false,\n icon,\n className,\n}: Sidebar001GroupProps) {\n const [isOpen, setIsOpen] = useState(false);\n const id = useId();\n const { setHovered, containerRef } = useContext(HoverContext);\n const buttonRef = useRef(null);\n\n useEffect(() => {\n setIsOpen(defaultOpen);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n const el = buttonRef.current;\n const container = containerRef.current;\n if (el && container) {\n const elRect = el.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n setHovered(id, {\n top: elRect.top - containerRect.top,\n height: elRect.height,\n left: 0,\n });\n } else {\n setHovered(id);\n }\n }, [id, setHovered, containerRef]);\n\n const handleMouseLeave = useCallback(() => {\n setHovered(null);\n }, [setHovered]);\n\n return (\n
\n setIsOpen((v) => !v)}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className=\"relative z-1 flex items-center gap-1.5 py-1.5 pr-2 select-none text-left w-full group\"\n >\n {icon ? (\n <>\n \n {icon}\n \n \n {label}\n \n \n \n ) : (\n <>\n \n \n {label}\n \n \n )}\n \n\n \n {isOpen && (\n \n
{children}
\n \n )}\n \n
\n );\n}\n\n// ─── Sidebar001Section ────────────────────────────────────────────────────────\n\nexport function Sidebar001Section({\n label,\n children,\n className,\n}: {\n label?: React.ReactNode;\n children: React.ReactNode;\n className?: string;\n}) {\n return (\n
\n {label && {label}}\n {children}\n
\n );\n}\n\n// ─── Sidebar001Content ────────────────────────────────────────────────────────\n\nexport function Sidebar001Content({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) {\n const containerRef = useContext(HoverContext).containerRef;\n\n return (\n \n
\n \n {children}\n
\n \n );\n}\n\n// ─── Sidebar001 (with resize) ─────────────────────────────────────────────────\n\nexport interface Sidebar001Props {\n children: React.ReactNode;\n className?: string;\n defaultEffectsEnabled?: boolean;\n /** Initial width in px. Default: 240 */\n defaultWidth?: number;\n /** Min resize width in px. Default: 160 */\n minWidth?: number;\n /** Max resize width in px. Default: 400 */\n maxWidth?: number;\n}\n\nexport function Sidebar001({\n children,\n className,\n defaultEffectsEnabled = true,\n defaultWidth = 240,\n minWidth = 160,\n maxWidth = 400,\n}: Sidebar001Props) {\n const containerRef = useRef(null);\n const [width, setWidth] = useState(defaultWidth);\n const dragging = useRef(false);\n const startX = useRef(0);\n const startW = useRef(0);\n\n const onPointerDown = useCallback(\n (e: React.PointerEvent) => {\n e.preventDefault();\n dragging.current = true;\n startX.current = e.clientX;\n startW.current = width;\n (e.target as HTMLElement).setPointerCapture(e.pointerId);\n },\n [width],\n );\n\n const onPointerMove = useCallback(\n (e: React.PointerEvent) => {\n if (!dragging.current) return;\n const next = Math.min(\n maxWidth,\n Math.max(minWidth, startW.current + e.clientX - startX.current),\n );\n setWidth(next);\n },\n [minWidth, maxWidth],\n );\n\n const onPointerUp = useCallback(() => {\n dragging.current = false;\n }, []);\n\n return (\n \n \n \n {children}\n\n {/* Resize handle */}\n \n
\n
\n \n \n \n );\n}\n\n// ─── Sidebar001Header ─────────────────────────────────────────────────────────\n\nexport function Sidebar001Header({\n children,\n className,\n}: {\n children?: React.ReactNode;\n className?: string;\n}) {\n return (\n
{children}
\n );\n}\n\n// ─── Sidebar001Footer ─────────────────────────────────────────────────────────\n\nexport function Sidebar001Footer({\n children,\n className,\n}: {\n children?: React.ReactNode;\n className?: string;\n}) {\n return (\n \n {children}\n \n );\n}\n", "type": "registry:ui", "target": "components/unlumen-ui/sidebar-001.tsx" } ], "type": "registry:ui" }