{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"timeline","type":"registry:ui","title":"Timeline","description":"","dependencies":["radix-ui"],"registryDependencies":[],"files":[{"path":"timeline.tsx","type":"registry:ui","content":"\"use client\"\n\nimport type { HTMLAttributes, TimeHTMLAttributes } from \"react\"\nimport { createContext, useCallback, useContext, useState } from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Types\ntype TimelineContextValue = {\n  activeStep: number\n  setActiveStep: (step: number) => void\n}\n\n// Context\nconst TimelineContext = createContext<TimelineContextValue | undefined>(\n  undefined\n)\n\nconst useTimeline = () => {\n  const context = useContext(TimelineContext)\n  if (!context) {\n    throw new Error(\"useTimeline must be used within a Timeline\")\n  }\n  return context\n}\n\n// Components\ninterface TimelineProps extends HTMLAttributes<HTMLDivElement> {\n  defaultValue?: number\n  value?: number\n  onValueChange?: (value: number) => void\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nfunction Timeline({\n  defaultValue = 1,\n  value,\n  onValueChange,\n  orientation = \"vertical\",\n  className,\n  children,\n  ...props\n}: TimelineProps) {\n  const [activeStep, setInternalStep] = useState(defaultValue)\n\n  const setActiveStep = useCallback(\n    (step: number) => {\n      if (value === undefined) {\n        setInternalStep(step)\n      }\n      onValueChange?.(step)\n    },\n    [value, onValueChange]\n  )\n\n  const currentStep = value ?? activeStep\n\n  return (\n    <TimelineContext.Provider\n      value={{ activeStep: currentStep, setActiveStep }}\n    >\n      <div\n        className={cn(\n          \"group/timeline flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col\",\n          className\n        )}\n        data-orientation={orientation}\n        data-slot=\"timeline\"\n        {...props}\n      >\n        {children}\n      </div>\n    </TimelineContext.Provider>\n  )\n}\n\n// TimelineContent\nfunction TimelineContent({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"timeline-content\"\n      {...props}\n    />\n  )\n}\n\n// TimelineDate\n// TimeHTMLAttributes (not the generic HTMLAttributes) so the <time>-specific `dateTime`\n// attribute is accepted — matches the base wrapper's useRender.ComponentProps<\"time\">.\ninterface TimelineDateProps extends TimeHTMLAttributes<HTMLTimeElement> {\n  asChild?: boolean\n}\n\nfunction TimelineDate({\n  asChild = false,\n  className,\n  ...props\n}: TimelineDateProps) {\n  const Comp = asChild ? Slot.Root : \"time\"\n\n  return (\n    <Comp\n      className={cn(\n        \"text-muted-foreground mb-1 block text-xs font-medium group-data-[orientation=vertical]/timeline:max-sm:h-4\",\n        className\n      )}\n      data-slot=\"timeline-date\"\n      {...props}\n    />\n  )\n}\n\n// TimelineHeader\nfunction TimelineHeader({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn(className)} data-slot=\"timeline-header\" {...props} />\n  )\n}\n\n// TimelineIndicator\ninterface TimelineIndicatorProps extends HTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\nfunction TimelineIndicator({\n  asChild = false,\n  className,\n  children,\n  ...props\n}: TimelineIndicatorProps) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      aria-hidden=\"true\"\n      className={cn(\n        \"border-primary/20 group-data-completed/timeline-item:border-primary absolute size-4 rounded-full border-2 group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:left-0 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:top-0 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2\",\n        className\n      )}\n      data-slot=\"timeline-indicator\"\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\n// TimelineItem\ninterface TimelineItemProps extends HTMLAttributes<HTMLDivElement> {\n  step: number\n}\n\nfunction TimelineItem({ step, className, ...props }: TimelineItemProps) {\n  const { activeStep } = useTimeline()\n\n  return (\n    <div\n      className={cn(\n        \"group/timeline-item has-[+[data-completed]]:**:data-[slot=timeline-separator]:bg-primary relative flex flex-1 flex-col gap-0.5 group-data-[orientation=horizontal]/timeline:mt-8 group-data-[orientation=horizontal]/timeline:not-last:pe-8 group-data-[orientation=vertical]/timeline:ms-8 group-data-[orientation=vertical]/timeline:not-last:pb-6\",\n        className\n      )}\n      data-completed={step <= activeStep || undefined}\n      data-slot=\"timeline-item\"\n      {...props}\n    />\n  )\n}\n\n// TimelineSeparator\nfunction TimelineSeparator({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"bg-primary/10 absolute self-start group-last/timeline-item:hidden group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:h-0.5 group-data-[orientation=horizontal]/timeline:w-[calc(100%-1rem-0.25rem)] group-data-[orientation=horizontal]/timeline:translate-x-4.5 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:h-[calc(100%-1rem-0.25rem)] group-data-[orientation=vertical]/timeline:w-0.5 group-data-[orientation=vertical]/timeline:-translate-x-1/2 group-data-[orientation=vertical]/timeline:translate-y-4.5\",\n        className\n      )}\n      data-slot=\"timeline-separator\"\n      {...props}\n    />\n  )\n}\n\n// TimelineTitle\nfunction TimelineTitle({\n  className,\n  ...props\n}: HTMLAttributes<HTMLHeadingElement>) {\n  return (\n    <h3\n      className={cn(\"text-sm font-medium\", className)}\n      data-slot=\"timeline-title\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n}","target":"components/neui/timeline.tsx"}]}