{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "step-marker",
  "title": "Step Marker",
  "description": "Step Marker from the Get IT Done design system.",
  "dependencies": [
    "class-variance-authority@^0.7.0",
    "lucide-react@^0.379.0"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/labels-context.json",
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/step-marker.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Check, X } from 'lucide-react';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { useLabels, usePreset } from '@/components/ui/labels-context';\n\nconst stepMarkerVariants = cva('inline-flex shrink-0 select-none items-center justify-center rounded-full border border-solid tabular-nums', {\n  variants: {\n    state: {\n      upcoming: 'border-input bg-background text-text-subtle',\n      current: 'border-background-brand-bold-default bg-background-brand-bold-default text-text-on-brand',\n      complete: 'border-general-success-container bg-general-success-container text-general-success-on-container',\n      error: 'border-general-error-default bg-general-error-default text-general-error-on',\n    },\n    // Product preset (DesignSystemProvider `preset`).\n    preset: { default: '', zero: '' },\n    size: {\n      sm: 'h-icon-md w-icon-md typography-micro-medium [&>svg]:h-icon-2xs [&>svg]:w-icon-2xs',\n      md: 'h-stepper-marker w-stepper-marker typography-ui-semibold [&>svg]:h-icon-sm [&>svg]:w-icon-sm',\n      lg: 'h-avatar-sm w-avatar-sm typography-ui-semibold [&>svg]:h-icon-md [&>svg]:w-icon-md',\n    },\n  },\n  compoundVariants: [\n    // Zero: 1px border, done is the brand fill, current is a brand outline with a 3px soft halo.\n    { preset: 'zero', state: 'current', className: 'bg-background text-text-brand ring-[3px] ring-background-brand-subtle' },\n    { preset: 'zero', state: 'complete', className: 'border-background-brand-bold-default bg-background-brand-bold-default text-text-on-brand' },\n  ],\n  defaultVariants: { state: 'upcoming', size: 'md', preset: 'default' },\n});\n\nexport interface StepMarkerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>, Omit<VariantProps<typeof stepMarkerVariants>, 'preset'> {\n  // The step number or short text shown in `upcoming` and `current`. `complete` shows a check, `error` a cross.\n  step: number | string;\n  // Screen reader texts for the check and cross. Win over the provider text.\n  completedLabel?: string;\n  failedLabel?: string;\n}\n\n// Numbered step marker for lists and flows outside Stepper (onboarding checklists, process lists). The number stays visible text.\nconst StepMarker = React.forwardRef<HTMLSpanElement, StepMarkerProps>(({ className, state, size, step, completedLabel, failedLabel, ...props }, ref) => {\n  const l = useLabels({ stepCompleted: completedLabel, stepFailed: failedLabel });\n  const resolved = state ?? 'upcoming';\n  const zero = usePreset() === 'zero';\n  return (\n    <span\n      ref={ref}\n      data-state={resolved}\n      aria-current={resolved === 'current' ? 'step' : undefined}\n      className={cn(stepMarkerVariants({ state: resolved, size, preset: zero ? 'zero' : 'default' }), className)}\n      {...props}\n    >\n      {resolved === 'complete' ? (\n        <>\n          <Check aria-hidden=\"true\" className=\"[stroke-width:var(--size-icon-stroke-check,3)]\" />\n          <span className=\"sr-only\">{`${step}, ${l.stepCompleted}`}</span>\n        </>\n      ) : resolved === 'error' ? (\n        <>\n          <X aria-hidden=\"true\" />\n          <span className=\"sr-only\">{`${step}, ${l.stepFailed}`}</span>\n        </>\n      ) : (\n        step\n      )}\n    </span>\n  );\n});\nStepMarker.displayName = 'StepMarker';\n\nexport { StepMarker, stepMarkerVariants };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}