{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "milestone-stepper",
  "type": "registry:ui",
  "title": "Milestone Stepper",
  "description": "A vertical timeline-style stepper for showing milestones, order tracking, or project phases. Supports custom icons and multiple variants.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/milestone-stepper.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\ninterface MilestoneData {\n  id: string | number;\n  title: string;\n  description?: string;\n  date?: string;\n  icon?: React.ReactNode;\n}\n\ntype MilestoneState = \"completed\" | \"current\" | \"upcoming\";\n\n// ── MilestoneStepper ────────────────────────────────────────────────────────\n\ninterface MilestoneStepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  milestones: MilestoneData[];\n  currentMilestone?: number;\n  variant?: \"default\" | \"compact\" | \"detailed\";\n  lineStyle?: \"solid\" | \"dashed\";\n}\n\nfunction MilestoneStepper({\n  milestones,\n  currentMilestone = 0,\n  variant = \"default\",\n  lineStyle = \"solid\",\n  className,\n  ...props\n}: MilestoneStepperProps) {\n  return (\n    <div className={cn(\"w-full\", className)} {...props}>\n      {milestones.map((milestone, index) => {\n        const state: MilestoneState =\n          index < currentMilestone\n            ? \"completed\"\n            : index === currentMilestone\n              ? \"current\"\n              : \"upcoming\";\n\n        return (\n          <MilestoneItem\n            key={milestone.id}\n            milestone={milestone}\n            state={state}\n            isLast={index === milestones.length - 1}\n            variant={variant}\n            lineStyle={lineStyle}\n            index={index}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\n// ── MilestoneItem ───────────────────────────────────────────────────────────\n\ninterface MilestoneItemProps {\n  milestone: MilestoneData;\n  state: MilestoneState;\n  isLast: boolean;\n  variant: \"default\" | \"compact\" | \"detailed\";\n  lineStyle: \"solid\" | \"dashed\";\n  index: number;\n}\n\nfunction MilestoneItem({\n  milestone,\n  state,\n  isLast,\n  variant,\n  lineStyle,\n  index,\n}: MilestoneItemProps) {\n  return (\n    <motion.div\n      className=\"flex gap-3\"\n      initial={{ opacity: 0, x: -4 }}\n      animate={{ opacity: 1, x: 0 }}\n      transition={{\n        type: \"spring\",\n        stiffness: 300,\n        damping: 25,\n        delay: index * 0.06,\n      }}\n    >\n      {/* Indicator column */}\n      <div className=\"flex flex-col items-center flex-shrink-0\">\n        <div className=\"mt-[5px]\">\n          <MilestoneIcon state={state} icon={milestone.icon} />\n        </div>\n        {!isLast && (\n          <div\n            className={cn(\n              \"mt-1.5 flex-1 w-px\",\n              lineStyle === \"dashed\" ? \"border-l border-dashed\" : \"\",\n              state === \"completed\"\n                ? lineStyle === \"dashed\"\n                  ? \"border-foreground/20\"\n                  : \"bg-foreground/20\"\n                : lineStyle === \"dashed\"\n                  ? \"border-foreground/[0.06]\"\n                  : \"bg-foreground/[0.06]\",\n            )}\n          />\n        )}\n      </div>\n\n      {/* Content */}\n      <div\n        className={cn(\n          \"flex-1 min-w-0\",\n          variant === \"compact\"\n            ? \"pb-3\"\n            : variant === \"detailed\"\n              ? \"pb-8\"\n              : \"pb-6\",\n        )}\n      >\n        <div className=\"flex items-start justify-between gap-4\">\n          <div className=\"min-w-0\">\n            <h4\n              className={cn(\n                \"text-[13px] font-medium leading-tight\",\n                state === \"completed\" && \"text-foreground/60\",\n                state === \"current\" && \"text-foreground\",\n                state === \"upcoming\" && \"text-foreground/30\",\n              )}\n            >\n              {milestone.title}\n            </h4>\n            {milestone.description && variant !== \"compact\" && (\n              <p\n                className={cn(\n                  \"mt-1 text-[12px] leading-relaxed\",\n                  state === \"upcoming\"\n                    ? \"text-foreground/20\"\n                    : \"text-foreground/40\",\n                )}\n              >\n                {milestone.description}\n              </p>\n            )}\n          </div>\n          {milestone.date && (\n            <span\n              className={cn(\n                \"shrink-0 text-[11px] font-medium tabular-nums\",\n                state === \"upcoming\"\n                  ? \"text-foreground/20\"\n                  : \"text-foreground/30\",\n              )}\n            >\n              {milestone.date}\n            </span>\n          )}\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\n// ── MilestoneIcon ───────────────────────────────────────────────────────────\n\ninterface MilestoneIconProps {\n  state: MilestoneState;\n  icon?: React.ReactNode;\n}\n\nfunction MilestoneIcon({ state, icon }: MilestoneIconProps) {\n  if (icon) {\n    return (\n      <motion.div\n        className={cn(\n          \"flex size-5 items-center justify-center rounded-full\",\n          state === \"completed\" && \"bg-foreground text-background\",\n          state === \"current\" &&\n            \"bg-foreground text-background ring-[3px] ring-foreground/[0.08]\",\n          state === \"upcoming\" && \"bg-foreground/[0.06] text-foreground/30\",\n        )}\n        initial={{ scale: 0.8 }}\n        animate={{ scale: 1 }}\n        transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n      >\n        <span className=\"[&>svg]:size-2.5\">{icon}</span>\n      </motion.div>\n    );\n  }\n\n  return (\n    <div className=\"relative flex items-center justify-center size-[18px]\">\n      {state === \"current\" && (\n        <motion.div\n          className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-[14px] rounded-full border border-foreground/[0.12]\"\n          initial={{ scale: 0.6, opacity: 0 }}\n          animate={{ scale: 1, opacity: 1 }}\n          transition={{ type: \"spring\", stiffness: 400, damping: 20 }}\n        />\n      )}\n      <motion.div\n        className={cn(\n          \"rounded-full\",\n          state === \"completed\" && \"bg-foreground/80\",\n          state === \"current\" && \"bg-foreground\",\n          state === \"upcoming\" && \"bg-foreground/[0.12]\",\n        )}\n        initial={false}\n        animate={{\n          width: state === \"current\" ? 7 : 5,\n          height: state === \"current\" ? 7 : 5,\n        }}\n        transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n      />\n    </div>\n  );\n}\n\n// ── Exports ─────────────────────────────────────────────────────────────────\n\nexport { MilestoneStepper, MilestoneItem, MilestoneIcon };\nexport type { MilestoneData, MilestoneState };\n",
      "type": "registry:ui",
      "target": "components/ruixen/milestone-stepper.tsx"
    }
  ]
}