{
  "name": "stepper",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "stepper.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport type { HTMLAttributes, ReactNode } from \"react\";\r\n\r\nconst rootClass = css({\r\n  display: \"flex\",\r\n  width: \"100%\",\r\n  fontFamily: theme.fontFamily.sans,\r\n  '&[data-orientation=\"vertical\"]': { flexDirection: \"column\", gap: theme.space[1] },\r\n});\r\n\r\nconst stepClass = css({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  gap: theme.space[2.5],\r\n  minWidth: 0,\r\n  '[data-orientation=\"horizontal\"] > &': { flex: 1 },\r\n  '[data-orientation=\"vertical\"] > &': { alignItems: \"flex-start\", paddingBottom: theme.space[4] },\r\n});\r\n\r\nconst markerClass = css({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  justifyContent: \"center\",\r\n  flexShrink: 0,\r\n  width: \"1.75rem\",\r\n  height: \"1.75rem\",\r\n  borderRadius: \"9999px\",\r\n  border: `2px solid ${theme.color.border}`,\r\n  backgroundColor: theme.color.background,\r\n  color: theme.color.mutedForeground,\r\n  fontSize: theme.fontSize.xs,\r\n  fontWeight: theme.fontWeight.semibold,\r\n  fontVariantNumeric: \"tabular-nums\",\r\n  transitionProperty: \"background-color, border-color, color\",\r\n  transitionDuration: theme.duration.base,\r\n  '&[data-state=\"active\"]': {\r\n    borderColor: theme.color.primary,\r\n    color: theme.color.primary,\r\n    boxShadow: `0 0 0 3px ${theme.color.accent}`,\r\n  },\r\n  '&[data-state=\"complete\"]': {\r\n    borderColor: theme.color.primary,\r\n    backgroundColor: theme.color.primary,\r\n    color: theme.color.primaryForeground,\r\n  },\r\n});\r\n\r\nconst labelWrapClass = css({ minWidth: 0, display: \"flex\", flexDirection: \"column\" });\r\n\r\nconst labelClass = css({\r\n  fontSize: theme.fontSize.sm,\r\n  fontWeight: theme.fontWeight.medium,\r\n  color: theme.color.mutedForeground,\r\n  whiteSpace: \"nowrap\",\r\n  overflow: \"hidden\",\r\n  textOverflow: \"ellipsis\",\r\n  '[data-state=\"active\"] + & , [data-state=\"complete\"] + &': { color: theme.color.foreground },\r\n});\r\n\r\nconst descriptionClass = css({\r\n  fontSize: theme.fontSize.xs,\r\n  color: theme.color.mutedForeground,\r\n});\r\n\r\nconst connectorClass = css({\r\n  flex: 1,\r\n  height: \"2px\",\r\n  minWidth: theme.space[3],\r\n  borderRadius: \"9999px\",\r\n  backgroundColor: theme.color.border,\r\n  transitionProperty: \"background-color\",\r\n  transitionDuration: theme.duration.base,\r\n  '&[data-complete=\"true\"]': { backgroundColor: theme.color.primary },\r\n});\r\n\r\nexport interface Step {\r\n  label: ReactNode;\r\n  description?: ReactNode;\r\n}\r\n\r\nexport interface StepperProps extends HTMLAttributes<HTMLDivElement> {\r\n  steps: Step[];\r\n  /** Zero-based index of the active step. Everything before it renders complete. */\r\n  current: number;\r\n  orientation?: \"horizontal\" | \"vertical\";\r\n}\r\n\r\n/** Progress through a multi-step flow — onboarding, a wizard, a staged agent run. */\r\nexport function Stepper({ steps, current, orientation = \"horizontal\", className, ...props }: StepperProps) {\r\n  return (\r\n    <div\r\n      className={className ? `${rootClass} ${className}` : rootClass}\r\n      data-orientation={orientation}\r\n      aria-label={props[\"aria-label\"] ?? \"Progress\"}\r\n      {...props}\r\n    >\r\n      {steps.map((step, index) => {\r\n        const state = index < current ? \"complete\" : index === current ? \"active\" : \"upcoming\";\r\n        const isLast = index === steps.length - 1;\r\n        return (\r\n          <div key={index} className={stepClass}>\r\n            <span className={markerClass} data-state={state} aria-current={state === \"active\" ? \"step\" : undefined}>\r\n              {state === \"complete\" ? (\r\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\r\n                  <path\r\n                    d=\"M3 7.5L5.75 10.25L11 4.5\"\r\n                    stroke=\"currentColor\"\r\n                    strokeWidth=\"2\"\r\n                    strokeLinecap=\"round\"\r\n                    strokeLinejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              ) : (\r\n                index + 1\r\n              )}\r\n            </span>\r\n            <span className={labelWrapClass}>\r\n              <span className={labelClass}>{step.label}</span>\r\n              {step.description ? <span className={descriptionClass}>{step.description}</span> : null}\r\n            </span>\r\n            {!isLast && orientation === \"horizontal\" ? (\r\n              <span className={connectorClass} data-complete={index < current} aria-hidden=\"true\" />\r\n            ) : null}\r\n          </div>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}