{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "import-workflow",
  "title": "Import Workflow",
  "description": "File selection, column mapping, validation, preview, and completion.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "label",
    "select",
    "table",
    "https://uaiblocks.dev/r/uai-theme.json",
    "https://uaiblocks.dev/r/uai-utils.json",
    "https://uaiblocks.dev/r/file-upload.json",
    "https://uaiblocks.dev/r/progress-summary.json",
    "https://uaiblocks.dev/r/status-banner.json",
    "https://uaiblocks.dev/r/step-indicator.json"
  ],
  "files": [
    {
      "path": "src/registry/uai/blocks/import-workflow.tsx",
      "content": "\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { ArrowRight } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  createContext,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Table, TableCell, TableHead, TableRow } from \"@/components/ui/table\";\nimport {\n  FileUpload,\n  type FileUploadProps,\n  type FileUploadVariant,\n} from \"@/components/ui/uai/file-upload\";\nimport {\n  ProgressSummary,\n  type ProgressSummaryProps,\n  type ProgressSummaryVariant,\n} from \"@/components/ui/uai/progress-summary\";\nimport {\n  StatusBanner,\n  type StatusBannerProps,\n  type StatusBannerVariant,\n} from \"@/components/ui/uai/status-banner\";\nimport {\n  StepIndicator,\n  type StepIndicatorStatus,\n  StepIndicatorStep,\n  type StepIndicatorVariant,\n} from \"@/components/ui/uai/step-indicator\";\nimport { cn } from \"@/lib/uai-utils\";\n\nconst useIsomorphicLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\ntype RegisterOptionLabel = (value: string, label: ReactNode) => () => void;\n\n/**\n * Base UI's SelectValue prints the raw value unless it knows the label, and its items only mount\n * while the list is open. Options render once more inside this context, outside the Select, to\n * report their labels; Radix shows the same label either way.\n */\nconst OptionLabelsContext = createContext<RegisterOptionLabel | null>(null);\n\nfunction useOptionLabels() {\n  const [labels, setLabels] = useState<Record<string, ReactNode>>({});\n  const register = useCallback<RegisterOptionLabel>((value, label) => {\n    setLabels((current) => ({ ...current, [value]: label }));\n    return () => setLabels(({ [value]: _removed, ...rest }) => rest);\n  }, []);\n  return [labels, register] as const;\n}\n\n/** True inside the label collector, where an option only reports its label and renders nothing. */\nfunction useReportOptionLabel(value: string, label: ReactNode) {\n  const register = useContext(OptionLabelsContext);\n  useIsomorphicLayoutEffect(() => register?.(value, label), [register, value, label]);\n  return register !== null;\n}\n\nexport const IMPORT_WORKFLOW_VARIANTS = [\"wizard\", \"sidebar\", \"compact\"] as const;\nexport type ImportWorkflowVariant = (typeof IMPORT_WORKFLOW_VARIANTS)[number];\nexport type ImportWorkflowProps = Omit<ComponentProps<\"section\">, \"defaultValue\"> & {\n  variant?: ImportWorkflowVariant;\n  /** The current step. */\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n};\n\ntype WorkflowContext = {\n  id: string;\n  variant: ImportWorkflowVariant;\n  value: string;\n  select: (value: string) => void;\n};\nconst Context = createContext<WorkflowContext | null>(null);\nfunction useWorkflow(part: string) {\n  const context = useContext(Context);\n  if (!context) throw new Error(`${part} must be used within ImportWorkflow`);\n  return context;\n}\nconst PanelContext = createContext<string | null>(null);\nconst MappingRowContext = createContext<string | null>(null);\nfunction useMappingRow(part: string) {\n  const id = useContext(MappingRowContext);\n  if (!id) throw new Error(`${part} must be used within ImportWorkflowMappingRow`);\n  return id;\n}\n\nconst stepVariants: Record<ImportWorkflowVariant, StepIndicatorVariant> = {\n  wizard: \"horizontal\",\n  sidebar: \"vertical\",\n  compact: \"compact\",\n};\nconst uploadVariants: Record<ImportWorkflowVariant, FileUploadVariant> = {\n  wizard: \"dropzone\",\n  sidebar: \"dropzone\",\n  compact: \"compact\",\n};\nconst bannerVariants: Record<ImportWorkflowVariant, StatusBannerVariant> = {\n  wizard: \"card\",\n  sidebar: \"tinted\",\n  compact: \"tinted\",\n};\nconst progressVariants: Record<ImportWorkflowVariant, ProgressSummaryVariant> = {\n  wizard: \"card\",\n  sidebar: \"card\",\n  compact: \"compact\",\n};\n\nconst importWorkflowVariants = cva(\n  \"grid min-w-0 content-start border bg-card text-[13px]/[18px] text-card-foreground shadow-[0_1px_2px_oklch(0_0_0/0.04)]\",\n  {\n    variants: {\n      variant: {\n        wizard: \"gap-4 rounded-[14px] p-5\",\n        sidebar: \"gap-4 rounded-[14px] p-5\",\n        compact: \"gap-2.5 rounded-xl p-3.5\",\n      },\n    },\n  },\n);\n\nconst focusRing =\n  \"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\";\n\nconst importWorkflowActionVariants = cva(\n  \"cursor-pointer gap-1.5 rounded-full border-0 py-0 transition-[filter,box-shadow,scale] duration-[120ms,120ms,140ms] ease-[ease-out,ease-out,cubic-bezier(0.23,1,0.32,1)] focus-visible:ring-0 enabled:active:scale-[0.97] disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none motion-reduce:enabled:active:scale-100\",\n  {\n    variants: {\n      emphasis: {\n        primary: \"bg-primary text-primary-foreground hover:bg-primary enabled:hover:brightness-108\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary enabled:hover:shadow-[inset_0_0_0_999px_color-mix(in_oklab,var(--foreground)_9%,transparent)]\",\n      },\n      compact: {\n        true: \"h-[26px] px-[11px] text-[12px]/4 has-[>svg]:px-[11px]\",\n        false: \"h-[30px] px-[13px] text-[12.5px]/4 has-[>svg]:px-[13px]\",\n      },\n    },\n  },\n);\n\n/** Multi-step import: file selection, column mapping, validation, preview, and completion. */\nexport function ImportWorkflow({\n  variant = \"wizard\",\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  className,\n  children,\n  ...props\n}: ImportWorkflowProps) {\n  const id = useId();\n  const [internal, setInternal] = useState(defaultValue);\n  const current = value ?? internal;\n  return (\n    <Context.Provider\n      value={{\n        id,\n        variant,\n        value: current,\n        select: (next) => {\n          if (next === current) return;\n          if (value === undefined) setInternal(next);\n          onValueChange?.(next);\n        },\n      }}\n    >\n      <section\n        aria-labelledby={`${id}-title`}\n        data-slot=\"import-workflow\"\n        data-variant={variant}\n        className={cn(importWorkflowVariants({ variant }), className)}\n        {...props}\n      >\n        {children}\n      </section>\n    </Context.Provider>\n  );\n}\n\nexport function ImportWorkflowHeader({ className, ...props }: ComponentProps<\"div\">) {\n  useWorkflow(\"ImportWorkflowHeader\");\n  return (\n    <div\n      data-slot=\"import-workflow-header\"\n      className={cn(\"flex min-w-0 flex-wrap items-end justify-between gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ImportWorkflowHeading({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"import-workflow-heading\"\n      className={cn(\"grid min-w-0 flex-[1_1_240px] gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function ImportWorkflowTitle({ className, ...props }: ComponentProps<\"h2\">) {\n  const context = useWorkflow(\"ImportWorkflowTitle\");\n  return (\n    <h2\n      data-slot=\"import-workflow-title\"\n      className={cn(\n        \"m-0 font-semibold tracking-[-0.015em] wrap-anywhere\",\n        context.variant === \"compact\" ? \"text-[15px]/5\" : \"text-lg/6\",\n        className,\n      )}\n      {...props}\n      id={`${context.id}-title`}\n    />\n  );\n}\n\nexport function ImportWorkflowDescription({ className, ...props }: ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"import-workflow-description\"\n      className={cn(\"m-0 text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Places the steps above the panel, or beside it in Sidebar. */\nexport function ImportWorkflowBody({ className, ...props }: ComponentProps<\"div\">) {\n  const context = useWorkflow(\"ImportWorkflowBody\");\n  return (\n    <div\n      data-slot=\"import-workflow-body\"\n      className={cn(\n        \"min-w-0 flex-wrap items-start\",\n        context.variant === \"sidebar\" ? \"flex\" : \"grid\",\n        context.variant === \"compact\" ? \"gap-2.5\" : \"gap-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ImportWorkflowSteps({\n  \"aria-label\": label = \"Import progress\",\n  className,\n  ...props\n}: ComponentProps<\"ol\">) {\n  const context = useWorkflow(\"ImportWorkflowSteps\");\n  return (\n    <StepIndicator\n      aria-label={label}\n      {...props}\n      variant={stepVariants[context.variant]}\n      className={cn(context.variant === \"sidebar\" && \"flex-[1_1_180px]\", className)}\n    />\n  );\n}\n\n/** A step. It is current when its value matches the workflow; otherwise it uses `status`. */\nexport function ImportWorkflowStep({\n  value,\n  status = \"upcoming\",\n  ...props\n}: Omit<ComponentProps<typeof StepIndicatorStep>, \"value\" | \"status\"> & {\n  value: string;\n  status?: Exclude<StepIndicatorStatus, \"current\">;\n}) {\n  const context = useWorkflow(\"ImportWorkflowStep\");\n  return <StepIndicatorStep {...props} status={context.value === value ? \"current\" : status} />;\n}\n\n/** Content for one step. Only the current step renders. */\nexport function ImportWorkflowPanel({\n  value,\n  className,\n  ...props\n}: Omit<ComponentProps<\"section\">, \"value\"> & { value: string }) {\n  const context = useWorkflow(\"ImportWorkflowPanel\");\n  const titleId = useId();\n  if (context.value !== value) return null;\n  return (\n    <PanelContext.Provider value={titleId}>\n      <section\n        aria-labelledby={titleId}\n        data-slot=\"import-workflow-panel\"\n        className={cn(\n          \"grid min-w-0 flex-[999_1_360px] animate-in content-start fade-in-0 slide-in-from-bottom-1 duration-240 ease-out-quint fill-mode-both motion-reduce:animate-none\",\n          context.variant === \"compact\" ? \"gap-2.5\" : \"gap-3.5\",\n          className,\n        )}\n        {...props}\n        data-step={value}\n      />\n    </PanelContext.Provider>\n  );\n}\n\nexport function ImportWorkflowPanelTitle({ className, ...props }: ComponentProps<\"h3\">) {\n  const titleId = useContext(PanelContext);\n  if (!titleId) throw new Error(\"ImportWorkflowPanelTitle must be used within ImportWorkflowPanel\");\n  return (\n    <h3\n      data-slot=\"import-workflow-panel-title\"\n      className={cn(\"m-0 text-sm/5 font-medium tracking-[-0.005em]\", className)}\n      {...props}\n      id={titleId}\n    />\n  );\n}\n\n/** File selection. Compose File Upload parts inside it. */\nexport function ImportWorkflowUpload(props: Omit<FileUploadProps, \"variant\">) {\n  const context = useWorkflow(\"ImportWorkflowUpload\");\n  return <FileUpload {...props} variant={uploadVariants[context.variant]} />;\n}\n\n/** Column mapping: each row pairs a source column with a destination field. */\nexport function ImportWorkflowMapping({ className, ...props }: ComponentProps<\"div\">) {\n  const context = useWorkflow(\"ImportWorkflowMapping\");\n  return (\n    <div\n      data-slot=\"import-workflow-mapping\"\n      className={cn(\n        \"grid min-w-0 gap-0.5 bg-[color-mix(in_oklab,var(--muted)_55%,var(--card))]\",\n        context.variant === \"compact\" ? \"rounded-xl p-0.75\" : \"rounded-[14px] p-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ImportWorkflowMappingRow({ className, ...props }: ComponentProps<\"div\">) {\n  const context = useWorkflow(\"ImportWorkflowMappingRow\");\n  const id = useId();\n  return (\n    <MappingRowContext.Provider value={id}>\n      <div\n        data-slot=\"import-workflow-mapping-row\"\n        className={cn(\n          \"flex min-w-0 flex-wrap items-center gap-2.5 transition-[background-color] duration-120 ease-out hover:bg-foreground/4 motion-reduce:transition-none\",\n          context.variant === \"compact\" ? \"rounded-lg px-2 py-[5px]\" : \"rounded-[10px] px-2.5 py-2\",\n          className,\n        )}\n        {...props}\n      />\n    </MappingRowContext.Provider>\n  );\n}\n\nexport function ImportWorkflowMappingSource({\n  className,\n  children,\n  ...props\n}: ComponentProps<\"label\">) {\n  const id = useMappingRow(\"ImportWorkflowMappingSource\");\n  return (\n    <>\n      <Label\n        data-slot=\"import-workflow-mapping-source\"\n        className={cn(\n          \"grid min-w-0 flex-[1_1_160px] gap-px text-[length:inherit] leading-[inherit] font-medium wrap-anywhere select-auto\",\n          className,\n        )}\n        {...props}\n        htmlFor={id}\n      >\n        {children}\n      </Label>\n      <ArrowRight\n        size={14}\n        aria-hidden=\"true\"\n        strokeWidth={1.75}\n        className=\"shrink-0 text-subtle-foreground size-3.5\"\n      />\n    </>\n  );\n}\n\n/** Secondary text inside a source label, such as a sample value. */\nexport function ImportWorkflowMappingSample({ className, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"import-workflow-mapping-sample\"\n      className={cn(\"font-mono text-[11.5px]/4 font-normal text-subtle-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type ImportWorkflowMappingTargetProps = Omit<\n  ComponentProps<typeof SelectTrigger>,\n  \"id\" | \"size\" | \"value\" | \"defaultValue\" | \"onChange\" | \"name\"\n> & {\n  /** Target field. An empty string means the column is skipped. */\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  name?: string;\n  /** Shown while no target is chosen. */\n  placeholder?: string;\n};\n\n// Radix Select forbids empty item values, so the skip option (\"\") maps to this private value.\nconst SKIP_VALUE = \"__uai-import-skip__\";\n\n/** A select of target fields for one column. Compose ImportWorkflowMappingOption items inside. */\nexport function ImportWorkflowMappingTarget({\n  value,\n  defaultValue,\n  onValueChange,\n  name,\n  placeholder,\n  className,\n  children,\n  ...props\n}: ImportWorkflowMappingTargetProps) {\n  const id = useMappingRow(\"ImportWorkflowMappingTarget\");\n  const context = useWorkflow(\"ImportWorkflowMappingTarget\");\n  const [internal, setInternal] = useState(defaultValue);\n  const current = value ?? internal;\n  const selected = current === \"\" ? SKIP_VALUE : (current ?? \"\");\n  const [labels, registerLabel] = useOptionLabels();\n  return (\n    <>\n      <Select\n        name={name}\n        value={selected}\n        onValueChange={(next: string | null) => {\n          if (next === null) return;\n          const target = next === SKIP_VALUE ? \"\" : next;\n          if (value === undefined) setInternal(target);\n          onValueChange?.(target);\n        }}\n      >\n        <SelectTrigger\n          data-slot=\"import-workflow-mapping-target\"\n          data-skipped={current === \"\" ? \"\" : undefined}\n          className={cn(\n            \"w-auto min-w-0 flex-[1_1_160px] cursor-pointer gap-1.5 rounded-lg border-0 bg-card py-0 pr-1.5 pl-2 text-inherit shadow-none inset-ring-1 inset-ring-border transition-shadow duration-120 ease-out hover:inset-ring-border-strong focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring focus-visible:outline-solid motion-reduce:transition-none data-[placeholder]:text-subtle-foreground data-skipped:text-subtle-foreground dark:bg-card dark:hover:bg-card [&_svg]:size-3.5\",\n            context.variant === \"compact\"\n              ? \"text-[12px]/[18px] data-[size=default]:h-[26px]\"\n              : \"text-[13px]/[18px] data-[size=default]:h-[30px]\",\n            className,\n          )}\n          {...props}\n          id={id}\n        >\n          <SelectValue placeholder={placeholder}>\n            {labels[selected] ?? (selected ? undefined : placeholder)}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent className=\"rounded-[14px] border-0 bg-popover text-popover-foreground shadow-[0_0_0_1px_var(--border-strong),0_12px_28px_-10px_oklch(0_0_0/0.32),0_2px_6px_-2px_oklch(0_0_0/0.12)] duration-180 ease-[cubic-bezier(0.16,1,0.3,1)] data-[state=closed]:zoom-out-96 data-closed:zoom-out-96 data-[state=open]:zoom-in-96 data-open:zoom-in-96 data-[state=open]:[--tw-enter-translate-x:0]! data-open:[--tw-enter-translate-x:0]! data-[state=open]:[--tw-enter-translate-y:0]! data-open:[--tw-enter-translate-y:0]! motion-reduce:data-[state=closed]:animate-none motion-reduce:data-closed:animate-none motion-reduce:data-[state=open]:animate-none motion-reduce:data-open:animate-none\">\n          {children}\n        </SelectContent>\n      </Select>\n      <OptionLabelsContext.Provider value={registerLabel}>{children}</OptionLabelsContext.Provider>\n    </>\n  );\n}\n\nexport type ImportWorkflowMappingOptionProps = Omit<ComponentProps<typeof SelectItem>, \"value\"> & {\n  /** Target field. Use an empty string for the \"skip this column\" option. */\n  value: string;\n};\n\n/** One target field inside ImportWorkflowMappingTarget. */\nexport function ImportWorkflowMappingOption({\n  value,\n  className,\n  ...props\n}: ImportWorkflowMappingOptionProps) {\n  const context = useWorkflow(\"ImportWorkflowMappingOption\");\n  const collecting = useReportOptionLabel(value === \"\" ? SKIP_VALUE : value, props.children);\n  if (collecting) return null;\n  return (\n    <SelectItem\n      data-slot=\"import-workflow-mapping-option\"\n      className={cn(\n        \"cursor-pointer rounded-[10px] text-foreground focus:bg-accent focus:text-foreground\",\n        value === \"\" && \"text-subtle-foreground\",\n        context.variant === \"compact\"\n          ? \"min-h-7 py-1 pr-7 pl-2 text-[12px]/[18px]\"\n          : \"min-h-8 py-1.5 pr-8 pl-2.5 text-[13px]/[18px]\",\n        className,\n      )}\n      {...props}\n      value={value === \"\" ? SKIP_VALUE : value}\n    />\n  );\n}\n\n/** Validation results. Compose Status Banner parts inside it. */\nexport function ImportWorkflowIssues(props: Omit<StatusBannerProps, \"variant\">) {\n  const context = useWorkflow(\"ImportWorkflowIssues\");\n  return <StatusBanner {...props} variant={bannerVariants[context.variant]} />;\n}\n\ntype ScrollEdges = { start: boolean; end: boolean };\n\n/** Tracks which ends of a horizontal scroller hide content, so those edges can fade. */\nfunction useScrollEdges(ref: RefObject<HTMLElement | null>) {\n  const [edges, setEdges] = useState<ScrollEdges>({ start: false, end: false });\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    const measure = () => {\n      const offset = Math.abs(element.scrollLeft);\n      const room = element.scrollWidth - element.clientWidth;\n      const start = offset > 1;\n      const end = room - offset > 1;\n      setEdges((previous) =>\n        previous.start === start && previous.end === end ? previous : { start, end },\n      );\n    };\n    measure();\n    element.addEventListener(\"scroll\", measure, { passive: true });\n    const observer = typeof ResizeObserver === \"function\" ? new ResizeObserver(measure) : null;\n    observer?.observe(element);\n    for (const child of element.children) observer?.observe(child);\n    return () => {\n      element.removeEventListener(\"scroll\", measure);\n      observer?.disconnect();\n    };\n  }, [ref]);\n  return edges;\n}\n\n/** Scrollable preview of parsed rows. The wrapper is focusable so keyboard users can scroll it. */\nexport function ImportWorkflowTable({\n  \"aria-label\": label = \"Import preview\",\n  className,\n  ...props\n}: ComponentProps<\"table\">) {\n  const context = useWorkflow(\"ImportWorkflowTable\");\n  const ref = useRef<HTMLElement>(null);\n  const edges = useScrollEdges(ref);\n  return (\n    // The frame carries the border and focus ring so the edge fade masks only the rows.\n    <div\n      className={cn(\n        \"min-w-0 overflow-hidden border has-[>section:focus-visible]:outline-solid has-[>section:focus-visible]:outline-2 has-[>section:focus-visible]:outline-offset-2 has-[>section:focus-visible]:outline-ring\",\n        context.variant === \"compact\" ? \"rounded-xl\" : \"rounded-[14px]\",\n      )}\n    >\n      <section\n        ref={ref}\n        aria-label={label}\n        // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region must be reachable by keyboard.\n        tabIndex={0}\n        data-overflow-start={edges.start ? \"\" : undefined}\n        data-overflow-end={edges.end ? \"\" : undefined}\n        className=\"min-w-0 overflow-x-auto px-1.5 py-0.5 outline-none data-overflow-start:mask-l-from-[calc(100%-24px)] data-overflow-end:mask-r-from-[calc(100%-24px)] [&>[data-slot=table-container]]:overflow-visible\"\n      >\n        <Table\n          data-slot=\"import-workflow-table\"\n          className={cn(\n            \"w-full border-collapse\",\n            context.variant === \"compact\" ? \"text-[12px]/[18px]\" : \"text-[12.5px]/[18px]\",\n            className,\n          )}\n          {...props}\n        />\n      </section>\n    </div>\n  );\n}\n\nexport function ImportWorkflowTableRow({ className, ...props }: ComponentProps<\"tr\">) {\n  return (\n    <TableRow\n      data-slot=\"import-workflow-table-row\"\n      className={cn(\n        \"border-t border-b-0 border-border/70 hover:bg-transparent [tbody>&>td:first-child]:font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ImportWorkflowHeaderCell({\n  scope = \"col\",\n  className,\n  ...props\n}: ComponentProps<\"th\">) {\n  return (\n    <TableHead\n      scope={scope}\n      data-slot=\"import-workflow-header-cell\"\n      className={cn(\n        \"h-8 px-2.5 text-left text-[12px] font-medium whitespace-nowrap text-subtle-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A preview cell. `tone=\"error\"` marks a value that failed validation; include the reason as text. */\nexport function ImportWorkflowCell({\n  tone = \"default\",\n  className,\n  ...props\n}: ComponentProps<\"td\"> & { tone?: \"default\" | \"error\" }) {\n  return (\n    <TableCell\n      data-slot=\"import-workflow-cell\"\n      className={cn(\n        \"h-9 px-2.5 py-0 whitespace-nowrap\",\n        tone === \"error\" && \"bg-destructive/10 text-destructive-ink\",\n        className,\n      )}\n      {...props}\n      data-tone={tone}\n    />\n  );\n}\n\n/** Import progress and completion. Compose Progress Summary parts inside it. */\nexport function ImportWorkflowProgress(props: Omit<ProgressSummaryProps, \"variant\">) {\n  const context = useWorkflow(\"ImportWorkflowProgress\");\n  return <ProgressSummary {...props} variant={progressVariants[context.variant]} />;\n}\n\n/** Back and continue controls. */\nexport function ImportWorkflowFooter({ className, ...props }: ComponentProps<\"div\">) {\n  const context = useWorkflow(\"ImportWorkflowFooter\");\n  return (\n    <div\n      data-slot=\"import-workflow-footer\"\n      className={cn(\n        \"flex flex-wrap items-center justify-end gap-1.5\",\n        context.variant === \"compact\" ? \"pt-0.5\" : \"pt-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function ImportWorkflowAction({\n  emphasis = \"secondary\",\n  type = \"button\",\n  className,\n  ...props\n}: ComponentProps<\"button\"> & { emphasis?: \"primary\" | \"secondary\" }) {\n  const context = useWorkflow(\"ImportWorkflowAction\");\n  return (\n    <Button\n      data-slot=\"import-workflow-action\"\n      variant={emphasis === \"primary\" ? \"default\" : \"secondary\"}\n      data-emphasis={emphasis}\n      className={cn(\n        importWorkflowActionVariants({ emphasis, compact: context.variant === \"compact\" }),\n        focusRing,\n        className,\n      )}\n      {...props}\n      type={type}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/uai/import-workflow.tsx"
    }
  ],
  "categories": [
    "operations",
    "data",
    "import"
  ],
  "type": "registry:block"
}