{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "order-status",
  "title": "Order Status",
  "description": "A compound fulfillment timeline with card, plain, and compact variants.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "https://uaiblocks.dev/r/uai-theme.json",
    "https://uaiblocks.dev/r/uai-utils.json"
  ],
  "files": [
    {
      "path": "src/registry/uai/components/order-status.tsx",
      "content": "import { cva } from \"class-variance-authority\";\nimport { Check, Circle, CircleAlert } from \"lucide-react\";\nimport { type ComponentProps, createContext, type ReactNode, useContext, useId } from \"react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/uai-utils\";\n\nexport const ORDER_STATUS_VARIANTS = [\"card\", \"plain\", \"compact\"] as const;\nexport const ORDER_STATUS_STEP_STATUSES = [\"complete\", \"current\", \"upcoming\", \"issue\"] as const;\nexport const ORDER_STATUS_BADGE_TONES = [\"neutral\", \"progress\", \"success\", \"warning\"] as const;\n\nexport type OrderStatusVariant = (typeof ORDER_STATUS_VARIANTS)[number];\nexport type OrderStatusStepStatus = (typeof ORDER_STATUS_STEP_STATUSES)[number];\nexport type OrderStatusBadgeTone = (typeof ORDER_STATUS_BADGE_TONES)[number];\n\nexport type OrderStatusProps = ComponentProps<\"section\"> & {\n  variant?: OrderStatusVariant;\n};\n\nfunction orderStatusChrome(variant: OrderStatusVariant) {\n  const compact = variant === \"compact\";\n\n  return {\n    headerClass: compact ? \"mb-4\" : \"mb-5\",\n    titleClass: compact ? \"text-[13px]/[18px]\" : \"text-[15px]/5\",\n    descriptionClass: compact ? \"mt-0.5 text-[11.5px]/4\" : \"mt-1 text-[12.5px]/[18px]\",\n    stepClass: compact\n      ? \"grid-cols-[18px_minmax(0,1fr)] gap-2.5 pb-3.5\"\n      : \"grid-cols-[22px_minmax(0,1fr)] gap-3 pb-4\",\n    markerClass: compact ? \"size-[18px]\" : \"size-[22px]\",\n    markerIconClass: compact ? \"size-2.5\" : \"size-3\",\n    connectorClass: compact ? \"left-[8.5px] top-[22px]\" : \"left-[10.5px] top-[26px]\",\n    stepLabelClass: compact ? \"text-[10.5px]/3\" : \"text-[11px]/4\",\n    stepTitleClass: compact ? \"text-[12.5px]/4\" : \"text-[13px]/[18px]\",\n    stepDescriptionClass: compact ? \"mt-0.5 text-[11px]/4\" : \"mt-0.5 text-xs/4\",\n    detailsClass: compact ? \"mt-4 gap-2.5 pt-3.5\" : \"mt-5 gap-3 pt-4\",\n    detailClass: compact ? \"text-xs/4\" : \"text-[12.5px]/[18px]\",\n    detailLabelClass: compact ? \"text-[11px]/4\" : \"text-[11.5px]/4\",\n    actionsClass: compact ? \"mt-4 gap-1.5\" : \"mt-5 gap-2\",\n    actionClass: compact\n      ? \"h-7 px-3 text-[12px] has-[>svg]:px-3\"\n      : \"h-8 px-3.5 text-[12.5px] has-[>svg]:px-3.5\",\n  };\n}\n\nconst orderStatusVariants = cva(\"w-full text-card-foreground\", {\n  variants: {\n    variant: {\n      card: \"rounded-[14px] border border-border/60 bg-card p-[18px]\",\n      plain: \"rounded-none bg-transparent p-0\",\n      compact: \"rounded-xl border border-border/60 bg-card p-3\",\n    },\n  },\n});\n\ntype OrderStatusContextValue = {\n  titleId: string;\n  chrome: ReturnType<typeof orderStatusChrome>;\n};\n\nconst OrderStatusContext = createContext<OrderStatusContextValue | null>(null);\n\nfunction useOrderStatus(name: string) {\n  const context = useContext(OrderStatusContext);\n  if (!context) throw new Error(`${name} must be used within OrderStatus`);\n  return context;\n}\n\nexport function OrderStatus({\n  variant = \"card\",\n  children,\n  className,\n  \"aria-labelledby\": ariaLabelledby,\n  ...props\n}: OrderStatusProps) {\n  const titleId = useId();\n  const chrome = orderStatusChrome(variant);\n\n  return (\n    <OrderStatusContext.Provider value={{ titleId, chrome }}>\n      <section\n        data-slot=\"order-status\"\n        className={cn(orderStatusVariants({ variant }), className)}\n        {...props}\n        data-variant={variant}\n        aria-labelledby={ariaLabelledby ?? titleId}\n      >\n        {children}\n      </section>\n    </OrderStatusContext.Provider>\n  );\n}\n\nexport type OrderStatusHeaderProps = ComponentProps<\"header\">;\n\nexport function OrderStatusHeader({ children, className, ...props }: OrderStatusHeaderProps) {\n  const context = useOrderStatus(\"OrderStatusHeader\");\n\n  return (\n    <header\n      data-slot=\"order-status-header\"\n      className={cn(\n        \"flex items-start justify-between gap-4\",\n        context.chrome.headerClass,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </header>\n  );\n}\n\nexport type OrderStatusTitleProps = ComponentProps<\"h2\">;\n\nexport function OrderStatusTitle({ children, className, ...props }: OrderStatusTitleProps) {\n  const context = useOrderStatus(\"OrderStatusTitle\");\n\n  return (\n    <h2\n      data-slot=\"order-status-title\"\n      className={cn(\"font-medium tracking-[-0.01em]\", context.chrome.titleClass, className)}\n      {...props}\n      id={context.titleId}\n    >\n      {children}\n    </h2>\n  );\n}\n\nexport type OrderStatusDescriptionProps = ComponentProps<\"p\">;\n\nexport function OrderStatusDescription({\n  children,\n  className,\n  ...props\n}: OrderStatusDescriptionProps) {\n  const context = useOrderStatus(\"OrderStatusDescription\");\n\n  return (\n    <p\n      data-slot=\"order-status-description\"\n      className={cn(\n        \"max-w-[48ch] text-muted-foreground text-pretty wrap-anywhere\",\n        context.chrome.descriptionClass,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport type OrderStatusBadgeProps = ComponentProps<\"span\"> & {\n  tone?: OrderStatusBadgeTone;\n};\n\nconst orderStatusBadgeToneClass: Record<OrderStatusBadgeTone, string> = {\n  neutral: \"bg-muted text-muted-foreground\",\n  progress: \"bg-primary/16 text-primary-ink\",\n  success: \"bg-success/14 text-success-ink\",\n  warning: \"bg-warning/14 text-warning-ink\",\n};\n\nexport function OrderStatusBadge({\n  tone = \"neutral\",\n  children,\n  className,\n  ...props\n}: OrderStatusBadgeProps) {\n  useOrderStatus(\"OrderStatusBadge\");\n\n  return (\n    <Badge\n      variant=\"secondary\"\n      data-slot=\"order-status-badge\"\n      data-tone={tone}\n      className={cn(\n        \"h-[22px] shrink-0 gap-1.5 rounded-full border-0 px-2 py-0 text-[11.5px]/4 font-medium whitespace-nowrap tabular-nums before:size-1.5 before:shrink-0 before:rounded-full before:bg-current before:content-['']\",\n        orderStatusBadgeToneClass[tone],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Badge>\n  );\n}\n\nexport type OrderStatusProgressProps = ComponentProps<\"ol\">;\n\nexport function OrderStatusProgress({\n  children,\n  className,\n  \"aria-label\": ariaLabel = \"Order progress\",\n  ...props\n}: OrderStatusProgressProps) {\n  useOrderStatus(\"OrderStatusProgress\");\n\n  return (\n    <ol\n      data-slot=\"order-status-progress\"\n      aria-label={ariaLabel}\n      className={cn(\"grid list-none p-0\", className)}\n      {...props}\n    >\n      {children}\n    </ol>\n  );\n}\n\nexport type OrderStatusStepProps = ComponentProps<\"li\"> & {\n  status?: OrderStatusStepStatus;\n};\n\nconst orderStatusStepLabel: Record<OrderStatusStepStatus, string> = {\n  complete: \"Complete\",\n  current: \"Current\",\n  upcoming: \"Upcoming\",\n  issue: \"Needs attention\",\n};\n\nconst orderStatusStepTextClass: Record<OrderStatusStepStatus, string> = {\n  complete: \"text-subtle-foreground\",\n  current: \"text-primary-ink\",\n  upcoming: \"text-subtle-foreground\",\n  issue: \"text-destructive-ink\",\n};\n\nconst orderStatusStepTitleClass: Record<OrderStatusStepStatus, string> = {\n  complete: \"[&_h3]:text-muted-foreground\",\n  current: \"[&_h3]:text-card-foreground\",\n  upcoming: \"[&_h3]:text-muted-foreground\",\n  issue: \"[&_h3]:text-card-foreground\",\n};\n\nfunction OrderStatusMarker({\n  status,\n  className,\n  iconClassName,\n}: {\n  status: OrderStatusStepStatus;\n  className: string;\n  iconClassName: string;\n}) {\n  const markerClass = {\n    complete:\n      \"border-transparent bg-[color-mix(in_oklab,var(--success)_16%,var(--card))] text-success-ink\",\n    current:\n      \"border-transparent bg-[color-mix(in_oklab,var(--primary)_18%,var(--card))] text-primary-ink ring-3 ring-primary/10 motion-safe:animate-ring-pulse\",\n    upcoming: \"border-border bg-card text-subtle-foreground\",\n    issue:\n      \"border-transparent bg-[color-mix(in_oklab,var(--destructive)_16%,var(--card))] text-destructive-ink\",\n  }[status];\n  const Icon = status === \"complete\" ? Check : status === \"issue\" ? CircleAlert : Circle;\n\n  return (\n    <span\n      className={cn(\n        \"relative z-10 inline-flex items-center justify-center rounded-full border\",\n        markerClass,\n        className,\n      )}\n      aria-hidden=\"true\"\n    >\n      <Icon\n        className={cn(iconClassName, status === \"current\" && \"size-2 fill-current\")}\n        strokeWidth={status === \"current\" ? 0 : 2.25}\n      />\n    </span>\n  );\n}\n\nexport function OrderStatusStep({\n  status = \"upcoming\",\n  children,\n  className,\n  \"aria-current\": ariaCurrent,\n  ...props\n}: OrderStatusStepProps) {\n  const context = useOrderStatus(\"OrderStatusStep\");\n  const complete = status === \"complete\";\n\n  return (\n    <li\n      data-slot=\"order-status-step\"\n      className={cn(\n        \"relative grid last:pb-0 [&:last-child>span:first-child]:hidden\",\n        context.chrome.stepClass,\n        orderStatusStepTitleClass[status],\n        className,\n      )}\n      aria-current={ariaCurrent ?? (status === \"current\" ? \"step\" : undefined)}\n      data-status={status}\n      {...props}\n    >\n      <span\n        className={cn(\n          \"absolute bottom-0.5 w-px -translate-x-1/2 rounded-full\",\n          context.chrome.connectorClass,\n          complete ? \"bg-[color-mix(in_oklab,var(--success)_55%,var(--border))]\" : \"bg-border\",\n        )}\n        aria-hidden=\"true\"\n      />\n      <OrderStatusMarker\n        status={status}\n        className={context.chrome.markerClass}\n        iconClassName={context.chrome.markerIconClass}\n      />\n      <div className=\"min-w-0 pt-px\">\n        <span\n          className={cn(\n            \"mb-0.5 block font-medium\",\n            context.chrome.stepLabelClass,\n            orderStatusStepTextClass[status],\n          )}\n        >\n          {orderStatusStepLabel[status]}\n        </span>\n        {children}\n      </div>\n    </li>\n  );\n}\n\nexport type OrderStatusStepTitleProps = ComponentProps<\"h3\">;\n\nexport function OrderStatusStepTitle({ children, className, ...props }: OrderStatusStepTitleProps) {\n  const context = useOrderStatus(\"OrderStatusStepTitle\");\n\n  return (\n    <h3\n      data-slot=\"order-status-step-title\"\n      className={cn(\"font-medium\", context.chrome.stepTitleClass, className)}\n      {...props}\n    >\n      {children}\n    </h3>\n  );\n}\n\nexport type OrderStatusStepDescriptionProps = ComponentProps<\"p\">;\n\nexport function OrderStatusStepDescription({\n  children,\n  className,\n  ...props\n}: OrderStatusStepDescriptionProps) {\n  const context = useOrderStatus(\"OrderStatusStepDescription\");\n\n  return (\n    <p\n      data-slot=\"order-status-step-description\"\n      className={cn(\n        \"text-muted-foreground wrap-anywhere\",\n        context.chrome.stepDescriptionClass,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n}\n\nexport type OrderStatusDetailsProps = ComponentProps<\"dl\">;\n\nexport function OrderStatusDetails({ children, className, ...props }: OrderStatusDetailsProps) {\n  const context = useOrderStatus(\"OrderStatusDetails\");\n\n  return (\n    <dl\n      data-slot=\"order-status-details\"\n      className={cn(\n        \"grid grid-cols-2 border-t border-border/60 max-[420px]:grid-cols-1\",\n        context.chrome.detailsClass,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </dl>\n  );\n}\n\nexport type OrderStatusDetailProps = ComponentProps<\"div\"> & {\n  label: ReactNode;\n};\n\nexport function OrderStatusDetail({\n  label,\n  children,\n  className,\n  ...props\n}: OrderStatusDetailProps) {\n  const context = useOrderStatus(\"OrderStatusDetail\");\n\n  return (\n    <div\n      data-slot=\"order-status-detail\"\n      className={cn(\"min-w-0\", context.chrome.detailClass, className)}\n      {...props}\n    >\n      <dt className={cn(\"text-subtle-foreground\", context.chrome.detailLabelClass)}>{label}</dt>\n      <dd className=\"mt-0.5 font-medium tabular-nums wrap-anywhere\">{children}</dd>\n    </div>\n  );\n}\n\nexport type OrderStatusActionsProps = ComponentProps<\"div\">;\n\nexport function OrderStatusActions({ children, className, ...props }: OrderStatusActionsProps) {\n  const context = useOrderStatus(\"OrderStatusActions\");\n\n  return (\n    <div\n      data-slot=\"order-status-actions\"\n      className={cn(\"flex flex-wrap\", context.chrome.actionsClass, className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type OrderStatusActionProps = ComponentProps<\"a\"> & {\n  emphasis?: \"primary\" | \"secondary\";\n};\n\nexport function OrderStatusAction({\n  emphasis = \"secondary\",\n  children,\n  className,\n  ...props\n}: OrderStatusActionProps) {\n  const context = useOrderStatus(\"OrderStatusAction\");\n\n  return (\n    <Button\n      asChild\n      variant={emphasis === \"primary\" ? \"default\" : \"secondary\"}\n      className={cn(\n        \"rounded-full py-0 no-underline transition-[scale,background-color,filter] duration-140 ease-out-quint focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-ring active:scale-97 motion-reduce:transition-none motion-reduce:active:scale-100\",\n        context.chrome.actionClass,\n        emphasis === \"primary\"\n          ? \"bg-primary text-primary-foreground hover:bg-primary hover:brightness-[1.08]\"\n          : \"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklab,var(--secondary)_85%,var(--foreground))]\",\n        className,\n      )}\n    >\n      <a data-slot=\"order-status-action\" data-emphasis={emphasis} {...props}>\n        {children}\n      </a>\n    </Button>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@ui/uai/order-status.tsx"
    }
  ],
  "categories": [
    "commerce",
    "data-display"
  ],
  "type": "registry:ui"
}