{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "toolbar-expandable", "type": "registry:ui", "description": "Expandable toolbar component with step-based navigation, smooth animations, and enhanced scrolling", "dependencies": [ "motion", "@radix-ui/react-scroll-area" ], "registryDependencies": [ "badge" ], "files": [ { "path": "registry/default/ui/toolbar-expandable.tsx", "content": "\"use client\"\n\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type RefObject,\n} from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\nimport { AnimatePresence, motion, MotionConfig } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\n\nconst transition = {\n type: \"spring\" as const,\n bounce: 0.1,\n duration: 0.25,\n}\n\ninterface DynamicStep {\n id: string\n title: string\n description: string\n icon:\n | React.ComponentType<{ className?: string }>\n | React.ReactElement<{ className?: string }>\n content: React.ReactNode\n}\n\ninterface DynamicToolbarExpandableProps {\n steps: DynamicStep[]\n badgeText?: string\n\n className?: string\n expanded?: boolean\n onExpandedChange?: (expanded: boolean) => void\n activeStep?: string | null\n onActiveStepChange?: (stepId: string | null) => void\n}\n\nconst DynamicToolbarExpandable = React.memo(\n function DynamicToolbarExpandable({\n steps,\n badgeText,\n\n className,\n expanded: controlledExpanded,\n onExpandedChange,\n activeStep: controlledActiveStep,\n onActiveStepChange,\n }) {\n const [internalActive, setInternalActive] = useState(null)\n const [internalIsOpen, setInternalIsOpen] = useState(false)\n\n const active =\n controlledActiveStep !== undefined ? controlledActiveStep : internalActive\n const isOpen =\n controlledExpanded !== undefined ? controlledExpanded : internalIsOpen\n\n const setActive = useCallback(\n (value: string | null) => {\n if (onActiveStepChange) {\n onActiveStepChange(value)\n } else {\n setInternalActive(value)\n }\n },\n [onActiveStepChange]\n )\n\n const setIsOpen = useCallback(\n (value: boolean) => {\n if (onExpandedChange) {\n onExpandedChange(value)\n } else {\n setInternalIsOpen(value)\n }\n },\n [onExpandedChange]\n )\n\n const [previousIndex, setPreviousIndex] = useState(null)\n const [contentRef, contentBounds] = useMeasure()\n const [menuRef, menuBounds] = useMeasure()\n const menuContainerRef = useRef(null)\n const ref = useRef(null)\n const [maxWidth, setMaxWidth] = useState(0)\n\n const heightContent = contentBounds.height\n const widthContainer = menuBounds.width\n\n const handleClickOutside = useCallback(() => {\n setIsOpen(false)\n setActive(null)\n }, [setIsOpen, setActive])\n\n useClickOutside(ref, handleClickOutside)\n\n useEffect(() => {\n if (!widthContainer || maxWidth > 0) return\n setMaxWidth(widthContainer)\n }, [widthContainer, maxWidth])\n\n const scrollButtonIntoView = useCallback(\n (currentIndex: number, previousIndex: number | null) => {\n if (!menuContainerRef.current) return\n\n const isMovingForward =\n previousIndex !== null && currentIndex > previousIndex\n const isMovingBackward =\n previousIndex !== null && currentIndex < previousIndex\n\n let targetIndex = currentIndex\n\n if (isMovingForward) {\n const nextIndex = currentIndex + 1\n if (nextIndex < steps.length) {\n targetIndex = nextIndex\n }\n } else if (isMovingBackward) {\n const prevIndex = currentIndex - 1\n if (prevIndex >= 0) {\n targetIndex = prevIndex\n }\n }\n\n const targetButton = menuContainerRef.current.querySelector(\n `[data-step-index=\"${targetIndex}\"]`\n ) as HTMLElement\n\n if (targetButton) {\n targetButton.scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"center\",\n })\n }\n },\n [steps.length]\n )\n\n const handleNavClick = useCallback(\n (item: string) => {\n if (active === item && isOpen) {\n setIsOpen(false)\n setActive(null)\n return\n }\n\n const currentIndex = steps.findIndex((step) => step.id === item)\n setActive(item)\n setIsOpen(true)\n\n if (currentIndex >= 0) {\n setTimeout(() => {\n scrollButtonIntoView(currentIndex, previousIndex)\n }, 100)\n\n setPreviousIndex(currentIndex)\n }\n },\n [\n active,\n isOpen,\n steps,\n scrollButtonIntoView,\n previousIndex,\n setActive,\n setIsOpen,\n ]\n )\n\n const renderContent = useCallback(() => {\n if (!active) return null\n\n const step = steps.find((s) => s.id === active)\n if (!step) return null\n\n return (\n
\n
\n

\n {step.title}\n

\n

{step.description}

\n
\n {step.content}\n
\n )\n }, [active, steps])\n\n const activeTitle = useMemo(() => {\n if (!active) return \"\"\n const step = steps.find((s) => s.id === active)\n return step?.title || \"\"\n }, [active, steps])\n\n const navigationButtons = useMemo(\n () =>\n steps.map((step, index) => ({\n id: step.id,\n label: step.title,\n step: (index + 1).toString(),\n onClick: () => handleNavClick(step.id),\n isActive: active === step.id,\n isFirst: index === 0,\n isLast: index === steps.length - 1,\n })),\n [steps, active, handleNavClick]\n )\n\n return (\n \n {badgeText && (\n \n {badgeText}\n \n )}\n\n \n \n
\n
\n \n {isOpen ? (\n \n
\n

\n {activeTitle}\n

\n\n
\n
\n {renderContent()}\n
\n
\n
\n \n ) : null}\n \n
\n\n {/* Navigation bar */}\n
\n {\n if (element) {\n menuContainerRef.current = element\n menuRef(element)\n }\n }}\n >\n
\n {navigationButtons.map((button, index) => (\n \n
\n \n {button.step}\n \n
\n \n {button.label}\n \n \n ))}\n
\n \n
\n
\n \n \n \n )\n }\n)\n\nDynamicToolbarExpandable.displayName = \"DynamicToolbarExpandable\"\n\n// ________________________ HOOKS ________________________\ninterface Bounds {\n left: number\n top: number\n width: number\n height: number\n}\n\nfunction useMeasure(): [\n (node: HTMLElement | null) => void,\n Bounds,\n () => void,\n] {\n const [bounds, setBounds] = useState({\n left: 0,\n top: 0,\n width: 0,\n height: 0,\n })\n\n const [node, setNode] = useState(null)\n const observer = useRef(null)\n\n const disconnect = useCallback(() => {\n if (observer.current) {\n observer.current.disconnect()\n }\n }, [])\n\n const ref = useCallback((node: HTMLElement | null) => {\n setNode(node)\n }, [])\n\n useEffect(() => {\n if (!node) return\n\n if (observer.current) {\n observer.current.disconnect()\n }\n\n observer.current = new ResizeObserver(([entry]) => {\n if (entry && entry.contentRect) {\n const { left, top, width, height } = entry.contentRect\n setBounds({ left, top, width, height })\n }\n })\n\n observer.current.observe(node)\n\n return () => {\n if (observer.current) {\n observer.current.disconnect()\n }\n }\n }, [node])\n\n return [ref, bounds, disconnect]\n}\n\nfunction useClickOutside(\n ref: RefObject,\n handler: (event: MouseEvent | TouchEvent) => void\n) {\n useEffect(() => {\n const listener = (event: MouseEvent | TouchEvent) => {\n const el = ref?.current\n if (!el || el.contains((event?.target as Node) || null)) {\n return\n }\n\n handler(event)\n }\n\n document.addEventListener(\"mousedown\", listener)\n document.addEventListener(\"touchstart\", listener)\n\n return () => {\n document.removeEventListener(\"mousedown\", listener)\n document.removeEventListener(\"touchstart\", listener)\n }\n }, [ref, handler])\n}\n\nfunction useTouchPrimary() {\n const [isTouchPrimary, setIsTouchPrimary] = useState(false)\n\n useEffect(() => {\n if (typeof window === \"undefined\") return\n\n const controller = new AbortController()\n const { signal } = controller\n\n const handleTouch = () => {\n const hasTouch = \"ontouchstart\" in window || navigator.maxTouchPoints > 0\n const prefersTouch = window.matchMedia(\"(pointer: coarse)\").matches\n setIsTouchPrimary(hasTouch && prefersTouch)\n }\n\n const mq = window.matchMedia(\"(pointer: coarse)\")\n mq.addEventListener(\"change\", handleTouch, { signal })\n window.addEventListener(\"pointerdown\", handleTouch, { signal })\n\n handleTouch()\n\n return () => controller.abort()\n }, [])\n\n return isTouchPrimary\n}\n\n// ________________________ MODIFIED SCROLL AREA ________________________\n// https://lina.sameer.sh/\n\nconst ScrollAreaContext = React.createContext(false)\ntype Mask = {\n top: boolean\n bottom: boolean\n left: boolean\n right: boolean\n}\n\nconst ScrollArea = React.forwardRef<\n React.ComponentRef,\n React.ComponentPropsWithoutRef & {\n viewportClassName?: string\n /**\n * `maskHeight` is the height of the mask in pixels.\n * pass `0` to disable the mask\n * @default 30\n */\n maskHeight?: number\n maskClassName?: string\n }\n>(\n (\n {\n className,\n children,\n scrollHideDelay = 0,\n viewportClassName,\n maskClassName,\n maskHeight = 30,\n ...props\n },\n ref\n ) => {\n const [showMask, setShowMask] = React.useState({\n top: false,\n bottom: false,\n left: false,\n right: false,\n })\n const viewportRef = React.useRef(null)\n const isTouch = useTouchPrimary()\n\n const checkScrollability = React.useCallback(() => {\n const element = viewportRef.current\n if (!element) return\n\n const {\n scrollTop,\n scrollLeft,\n scrollWidth,\n clientWidth,\n scrollHeight,\n clientHeight,\n } = element\n setShowMask((prev) => ({\n ...prev,\n top: scrollTop > 0,\n bottom: scrollTop + clientHeight < scrollHeight - 1,\n left: scrollLeft > 0,\n right: scrollLeft + clientWidth < scrollWidth - 1,\n }))\n }, [])\n\n React.useEffect(() => {\n if (typeof window === \"undefined\") return\n\n const element = viewportRef.current\n if (!element) return\n\n const controller = new AbortController()\n const { signal } = controller\n\n const resizeObserver = new ResizeObserver(checkScrollability)\n resizeObserver.observe(element)\n\n element.addEventListener(\"scroll\", checkScrollability, { signal })\n window.addEventListener(\"resize\", checkScrollability, { signal })\n\n checkScrollability()\n\n return () => {\n controller.abort()\n resizeObserver.disconnect()\n }\n }, [checkScrollability, isTouch])\n\n return (\n \n {isTouch ? (\n \n \n {children}\n \n\n {maskHeight > 0 && (\n \n )}\n \n ) : (\n \n \n {children}\n \n\n {maskHeight > 0 && (\n \n )}\n \n \n \n )}\n \n )\n }\n)\n\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ComponentRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => {\n const isTouch = React.useContext(ScrollAreaContext)\n\n if (isTouch) return null\n\n return (\n \n \n \n )\n})\n\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nconst ScrollMask = ({\n showMask,\n maskHeight,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n showMask: Mask\n maskHeight: number\n}) => {\n return (\n <>\n \n \n \n )\n}\n\nexport default function ToolbarExpandable(\n props: DynamicToolbarExpandableProps\n) {\n return \n}\n", "type": "registry:ui" } ] }