{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "timescale", "title": "Timescale", "author": "ncdai ", "description": "Ruler-style timeline for plotting milestones along a horizontal or vertical axis.", "files": [ { "path": "src/registry/components/timescale/timescale.tsx", "content": "\"use client\"\n\n// Inspired by Evil Rabbit's Lifeline: https://lifeline.evilrabbit.com\nimport { useEffect, useRef } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type TimescaleRootProps = React.ComponentProps<\"div\"> & {\n orientation?: \"horizontal\" | \"vertical\"\n}\n\nexport function TimescaleRoot({\n className,\n orientation = \"horizontal\",\n ...props\n}: TimescaleRootProps) {\n return (\n \n )\n}\n\nexport type TimescaleViewportProps = React.ComponentProps<\"div\">\n\nexport function TimescaleViewport({\n className,\n ...props\n}: TimescaleViewportProps) {\n return (\n \n )\n}\n\nexport type TimescaleHeaderProps = React.ComponentProps<\"div\">\n\nexport function TimescaleHeader({ className, ...props }: TimescaleHeaderProps) {\n return (\n \n )\n}\n\nexport type TimescaleTrackProps = React.ComponentProps<\"div\">\n\nexport function TimescaleTrack({ className, ...props }: TimescaleTrackProps) {\n return (\n \n )\n}\n\nexport type TimescaleRailProps = React.ComponentProps<\"div\">\n\nexport function TimescaleRail({ className, ...props }: TimescaleRailProps) {\n return (\n \n )\n}\n\nexport type TimescaleItemProps = React.ComponentProps<\"div\">\n\nexport function TimescaleItem({ className, ...props }: TimescaleItemProps) {\n return (\n \n )\n}\n\nexport type TimescaleTickProps = React.ComponentProps<\"span\">\n\nexport function TimescaleTick({ className, ...props }: TimescaleTickProps) {\n return (\n \n )\n}\n\nexport type TimescaleAgeProps = React.ComponentProps<\"p\">\n\nexport function TimescaleAge({ className, ...props }: TimescaleAgeProps) {\n return (\n \n )\n}\n\nexport type TimescaleYearProps = React.ComponentProps<\"p\">\n\nexport function TimescaleYear({ className, ...props }: TimescaleYearProps) {\n return (\n \n )\n}\n\nexport type TimescaleContentProps = React.ComponentProps<\"div\">\n\nexport function TimescaleContent({\n className,\n ...props\n}: TimescaleContentProps) {\n return (\n \n )\n}\n\nconst INTRO_SCROLL_START_HOLD = 200 // ms resting on the first item before scrolling\n\n// Sweeps a horizontal Timescale to its most recent item on mount using native\n// smooth scroll, so `scroll-fade` stays in sync and there is no scroll stepping.\nexport function TimescaleIntroScroll({\n children,\n}: {\n children: React.ReactNode\n}) {\n const ref = useRef(null)\n\n useEffect(() => {\n const viewport = ref.current?.querySelector(\n '[data-slot=\"timescale-viewport\"]'\n )\n if (!viewport) return\n\n const distance = viewport.scrollWidth - viewport.clientWidth\n if (distance <= 0) return\n\n // Respect users who opt out of motion: land at the end without the sweep.\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n viewport.scrollLeft = distance\n return\n }\n\n // A user gesture cancels the native smooth scroll, so no manual interruption\n // handling is needed.\n const timer = window.setTimeout(() => {\n viewport.scrollTo({ left: distance, behavior: \"smooth\" })\n }, INTRO_SCROLL_START_HOLD)\n\n return () => window.clearTimeout(timer)\n }, [])\n\n return (\n
\n {children}\n
\n )\n}\n", "type": "registry:component", "target": "@components/timescale.tsx" } ], "docs": "https://chanhdai.com/components/timescale", "categories": [ "data-display" ], "type": "registry:component" }