{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline-steps",
  "type": "registry:component",
  "title": "Timeline Steps",
  "description": "A component for displaying chronological events, activities, or steps",
  "dependencies": ["class-variance-authority"],
  "files": [
    {
      "path": "registry/abui/ui/timeline-steps.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* -----------------------------------------------------------------------------\n * Timeline (root container)\n * -------------------------------------------------------------------------- */\n\nconst timelineStepsVariants = cva(\"flex\", {\n  variants: {\n    orientation: {\n      vertical: \"flex-col\",\n      horizontal: \"flex-row overflow-x-auto\",\n    },\n    position: {\n      left: \"\",\n      right: \"\",\n      alternate: \"\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n    position: \"left\",\n  },\n})\n\ninterface TimelineStepsProps extends React.ComponentProps<\"div\">, VariantProps<typeof timelineStepsVariants> {}\n\nfunction TimelineSteps({ className, orientation, position, ...props }: TimelineStepsProps) {\n  return (\n    <div\n      data-slot=\"timeline-steps\"\n      data-orientation={orientation}\n      data-position={position}\n      className={cn(timelineStepsVariants({ orientation, position }), className)}\n      {...props}\n    />\n  )\n}\n\n/* -----------------------------------------------------------------------------\n * TimelineItem\n * -------------------------------------------------------------------------- */\n\nconst timelineStepsItemVariants = cva(\"relative flex flex-col\", {\n  variants: {\n    orientation: {\n      vertical: \"pb-8 last:pb-0\",\n      horizontal: \"flex-1 items-center\",\n    },\n    status: {\n      default: \"\",\n      completed: \"\",\n      current: \"\",\n      upcoming: \"opacity-60\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n    status: \"default\",\n  },\n})\n\ninterface TimelineStepsItemProps extends React.ComponentProps<\"div\">, VariantProps<typeof timelineStepsItemVariants> {}\n\nfunction TimelineStepsItem({ className, orientation, status, ...props }: TimelineStepsItemProps) {\n  return (\n    <div\n      data-slot=\"timeline-steps-item\"\n      data-status={status}\n      className={cn(timelineStepsItemVariants({ orientation, status }), className)}\n      {...props}\n    />\n  )\n}\n\n/* -----------------------------------------------------------------------------\n * TimelineConnector (the line connecting items)\n * -------------------------------------------------------------------------- */\n\nconst timelineStepsConnectorVariants = cva(\"\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"absolute left-[calc(var(--timeline-steps-icon-size,2.5rem)/2)] top-[var(--timeline-steps-icon-size,2.5rem)] h-[calc(100%-var(--timeline-steps-icon-size,2.5rem))] w-px -translate-x-1/2\",\n      horizontal: \"absolute top-3 left-[calc(50%+0.75rem)] h-px w-[calc(100%-1.5rem)]\",\n    },\n    variant: {\n      default: \"bg-border\",\n      dashed: \"border-l border-dashed border-border bg-transparent\",\n      dotted: \"border-l border-dotted border-border bg-transparent\",\n    },\n    status: {\n      default: \"\",\n      completed: \"bg-primary\",\n      current: \"bg-gradient-to-b from-primary to-border\",\n      upcoming: \"bg-muted\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n    variant: \"default\",\n    status: \"default\",\n  },\n})\n\ninterface TimelineStepsConnectorProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof timelineStepsConnectorVariants> {}\n\nfunction TimelineStepsConnector({ className, orientation, variant, status, ...props }: TimelineStepsConnectorProps) {\n  return (\n    <div\n      data-slot=\"timeline-steps-connector\"\n      aria-hidden=\"true\"\n      className={cn(timelineStepsConnectorVariants({ orientation, variant, status }), className)}\n      {...props}\n    />\n  )\n}\n\n/* -----------------------------------------------------------------------------\n * TimelineHeader (contains icon and title row)\n * -------------------------------------------------------------------------- */\n\nfunction TimelineStepsHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"timeline-steps-header\" className={cn(\"flex items-center gap-3\", className)} {...props} />\n}\n\n/* -----------------------------------------------------------------------------\n * TimelineStepsIcon (the dot/icon indicator)\n * -------------------------------------------------------------------------- */\n\nconst timelineStepsIconVariants = cva(\n  \"relative z-10 flex shrink-0 items-center justify-center rounded-full border bg-background [--timeline-steps-icon-size:2.5rem]\",\n  {\n    variants: {\n      size: {\n        sm: \"size-6 [--timeline-steps-icon-size:1.5rem] [&>svg]:size-3\",\n        default: \"size-10 [--timeline-steps-icon-size:2.5rem] [&>svg]:size-4\",\n        lg: \"size-12 [--timeline-steps-icon-size:3rem] [&>svg]:size-5\",\n      },\n      variant: {\n        default: \"border-border text-muted-foreground\",\n        primary: \"border-primary bg-primary text-primary-foreground\",\n        secondary: \"border-secondary bg-secondary text-secondary-foreground\",\n        destructive: \"border-destructive bg-destructive text-destructive-foreground\",\n        outline: \"border-border bg-background text-foreground\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n  },\n)\n\ninterface TimelineStepsIconProps extends React.ComponentProps<\"div\">, VariantProps<typeof timelineStepsIconVariants> {}\n\nfunction TimelineStepsIcon({ className, size, variant, ...props }: TimelineStepsIconProps) {\n  return (\n    <div\n      data-slot=\"timeline-steps-icon\"\n      className={cn(timelineStepsIconVariants({ size, variant }), className)}\n      {...props}\n    />\n  )\n}\n\n/* -----------------------------------------------------------------------------\n * TimelineStepsContent (container for description, time, etc.)\n * -------------------------------------------------------------------------- */\n\nfunction TimelineStepsContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"timeline-steps-content\"\n      className={cn(\"ms-[3.25rem] flex flex-col gap-1 pt-0.5 pb-2\", className)}\n      {...props}\n    />\n  )\n}\n\n/* -----------------------------------------------------------------------------\n * TimelineStepsTitle\n * -------------------------------------------------------------------------- */\n\nfunction TimelineStepsTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"timeline-steps-title\"\n      className={cn(\"text-foreground leading-none font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\n/* -----------------------------------------------------------------------------\n * TimelineDescription\n * -------------------------------------------------------------------------- */\n\nfunction TimelineStepsDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"timeline-steps-description\" className={cn(\"text-muted-foreground text-sm\", className)} {...props} />\n  )\n}\n\n/* -----------------------------------------------------------------------------\n * TimelineStepsTime (timestamp display)\n * -------------------------------------------------------------------------- */\n\nfunction TimelineStepsTime({ className, ...props }: React.ComponentProps<\"time\">) {\n  return <time data-slot=\"timeline-steps-time\" className={cn(\"text-muted-foreground text-xs\", className)} {...props} />\n}\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n  TimelineSteps,\n  TimelineStepsItem,\n  TimelineStepsConnector,\n  TimelineStepsHeader,\n  TimelineStepsIcon,\n  TimelineStepsContent,\n  TimelineStepsTitle,\n  TimelineStepsDescription,\n  TimelineStepsTime,\n  timelineStepsVariants,\n  timelineStepsItemVariants,\n  timelineStepsConnectorVariants,\n  timelineStepsIconVariants,\n}\n",
      "type": "registry:ui"
    }
  ]
}