{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "b-separator",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": ["@base-ui/react"],
  "devDependencies": [],
  "files": [
    {
      "path": "b-separator.tsx",
      "content": "\"use client\";\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst componentThemeClassName =\n  \"[--ic-background:#ffffff] [--ic-foreground:#111111] [--ic-primary:#111111] [--ic-secondary:#646b75] [--ic-surface-border:#e9edf2] [--ic-border:#e3e7ec] [--ic-card:#ffffff] [--ic-card-foreground:#111111] [--ic-muted:#f5f7fa] [--ic-muted-foreground:#6d7480] [--ic-accent:#f3f5f8] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--ic-accent-foreground:#111111] [--ic-input:#e3e7ec] [--ic-ring:rgba(17,17,17,0.16)] [--ic-destructive:#dc2626] [--ic-paper:#fcfcfd] [--ic-popover-foreground:#111111] [--ic-brand:#0ea5e9] [--ic-brand-soft:#bae6fd] [--ic-shadow-soft:0_18px_38px_-24px_rgba(15,23,42,0.35)] [--ic-chart-1:oklch(0.52_0.19_254)] [--ic-chart-2:oklch(0.74_0.11_232)] [--ic-chart-3:oklch(0.42_0.16_262)] [--ic-chart-4:oklch(0.84_0.07_228)] [--ic-chart-5:oklch(0.62_0.14_240)] [--color-background:var(--ic-background)] [--color-foreground:var(--ic-foreground)] [--color-primary:var(--ic-primary)] [--color-secondary:var(--ic-secondary)] [--color-border:var(--ic-border)] [--color-card:var(--ic-card)] [--color-card-foreground:var(--ic-card-foreground)] [--color-muted:var(--ic-muted)] [--color-muted-foreground:var(--ic-muted-foreground)] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--color-input:var(--ic-input)] [--color-ring:var(--ic-ring)] [--color-destructive:var(--ic-destructive)] [--color-paper:var(--ic-paper)] [--color-popover-foreground:var(--ic-popover-foreground)] [--color-brand:var(--ic-brand)] [--color-brand-soft:var(--ic-brand-soft)] [--color-chart-1:var(--ic-chart-1)] [--color-chart-2:var(--ic-chart-2)] [--color-chart-3:var(--ic-chart-3)] [--color-chart-4:var(--ic-chart-4)] [--color-chart-5:var(--ic-chart-5)] dark:[--ic-background:#111111] dark:[--ic-foreground:#f6f3ec] dark:[--ic-primary:#f6f3ec] dark:[--ic-secondary:#cbc6bb] dark:[--ic-surface-border:#2a2a25] dark:[--ic-border:#2b2a25] dark:[--ic-card:#111111] dark:[--ic-card-foreground:#f6f3ec] dark:[--ic-muted:#171716] dark:[--ic-muted-foreground:#9a958a] dark:[--ic-accent:#1a1a18] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] dark:[--ic-accent-foreground:#f6f3ec] dark:[--ic-input:#2b2a25] dark:[--ic-ring:rgba(246,243,236,0.18)] dark:[--ic-destructive:#f87171] dark:[--ic-paper:#171716] dark:[--ic-popover-foreground:#f6f3ec] dark:[--ic-brand:#38bdf8] dark:[--ic-brand-soft:#0c4a6e] dark:[--ic-shadow-soft:0_20px_44px_-28px_rgba(0,0,0,0.6)] dark:[--ic-chart-1:oklch(0.68_0.17_250)] dark:[--ic-chart-2:oklch(0.82_0.09_225)] dark:[--ic-chart-3:oklch(0.58_0.15_260)] dark:[--ic-chart-4:oklch(0.75_0.12_235)] dark:[--ic-chart-5:oklch(0.88_0.06_220)]\";\n\ntype SeparatorOrientation = \"horizontal\" | \"vertical\";\ntype SeparatorVariant = \"line\" | \"dashed\" | \"dotted\";\ntype SeparatorTone = \"default\" | \"muted\" | \"brand\" | \"destructive\";\ntype SeparatorSpacing = \"none\" | \"sm\" | \"md\" | \"lg\";\n\ntype SeparatorStyleOptions = {\n  className?: string;\n  inset: boolean;\n  orientation: SeparatorOrientation;\n  spacing: SeparatorSpacing;\n  tone: SeparatorTone;\n  variant: SeparatorVariant;\n};\n\nexport interface SeparatorProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive>,\n    \"className\" | \"role\" | \"aria-hidden\" | \"aria-orientation\"\n  > {\n  className?: string;\n  decorative?: boolean;\n  inset?: boolean;\n  spacing?: SeparatorSpacing;\n  tone?: SeparatorTone;\n  variant?: SeparatorVariant;\n}\n\nexport interface SeparatorLabelProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  labelClassName?: string;\n  separatorClassName?: string;\n  tone?: SeparatorTone;\n  variant?: SeparatorVariant;\n}\n\nconst TONE_CLASS_NAMES: Record<SeparatorTone, string> = {\n  default: \"[--separator-tone:var(--ic-border)]\",\n  muted:\n    \"[--separator-tone:color-mix(in_oklch,var(--ic-muted-foreground)_32%,transparent)]\",\n  brand: \"[--separator-tone:var(--ic-brand)]\",\n  destructive: \"[--separator-tone:var(--ic-destructive)]\",\n};\n\nconst SPACING_CLASS_NAMES: Record<SeparatorSpacing, string> = {\n  none: \"\",\n  sm: \"data-[orientation=horizontal]:my-2 data-[orientation=vertical]:mx-2\",\n  md: \"data-[orientation=horizontal]:my-4 data-[orientation=vertical]:mx-4\",\n  lg: \"data-[orientation=horizontal]:my-6 data-[orientation=vertical]:mx-6\",\n};\n\nconst INSET_CLASS_NAMES: Record<SeparatorOrientation, string> = {\n  horizontal: \"-mx-1 my-1\",\n  vertical: \"mx-1 -my-1\",\n};\n\nconst VARIANT_CLASS_NAMES: Record<\n  SeparatorOrientation,\n  Record<SeparatorVariant, string>\n> = {\n  horizontal: {\n    line: \"h-px w-full bg-[var(--separator-tone)]\",\n    dashed:\n      \"h-px w-full bg-[length:8px_1px] bg-[linear-gradient(90deg,var(--separator-tone)_0,var(--separator-tone)_58%,transparent_58%,transparent_100%)] bg-repeat-x\",\n    dotted:\n      \"box-border h-px w-full border-0 border-[color:var(--separator-tone)] border-t border-dotted bg-transparent\",\n  },\n  vertical: {\n    line: \"h-auto min-h-4 w-px self-stretch bg-[var(--separator-tone)]\",\n    dashed:\n      \"h-auto min-h-4 w-px self-stretch bg-[length:1px_8px] bg-[linear-gradient(180deg,var(--separator-tone)_0,var(--separator-tone)_58%,transparent_58%,transparent_100%)] bg-repeat-y\",\n    dotted:\n      \"box-border h-auto min-h-4 w-px self-stretch border-0 border-[color:var(--separator-tone)] border-l border-dotted bg-transparent\",\n  },\n};\n\nfunction getSeparatorClassName({\n  className,\n  inset,\n  orientation,\n  spacing,\n  tone,\n  variant,\n}: SeparatorStyleOptions) {\n  return cn(\n    componentThemeClassName,\n    TONE_CLASS_NAMES[tone],\n    SPACING_CLASS_NAMES[spacing],\n    inset ? INSET_CLASS_NAMES[orientation] : undefined,\n    \"shrink-0\",\n    VARIANT_CLASS_NAMES[orientation][variant],\n    className\n  );\n}\n\nfunction getDecorativeA11yProps(\n  decorative: boolean,\n  orientation: SeparatorOrientation\n): Pick<\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive>,\n  \"aria-hidden\" | \"aria-orientation\" | \"role\"\n> {\n  if (decorative) {\n    return {\n      \"aria-hidden\": true,\n      role: \"presentation\",\n    };\n  }\n\n  return {\n    \"aria-orientation\": orientation,\n    role: \"separator\",\n  };\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  (\n    {\n      className,\n      decorative = true,\n      inset = false,\n      orientation = \"horizontal\",\n      spacing = \"none\",\n      tone = \"default\",\n      variant = \"line\",\n      ...props\n    },\n    ref\n  ) => (\n    <SeparatorPrimitive\n      {...props}\n      className={getSeparatorClassName({\n        className,\n        inset,\n        orientation,\n        spacing,\n        tone,\n        variant,\n      })}\n      data-orientation={orientation}\n      data-slot=\"separator\"\n      orientation={orientation}\n      ref={ref}\n      {...getDecorativeA11yProps(decorative, orientation)}\n    />\n  )\n);\n\nSeparator.displayName = \"Separator\";\n\nfunction SeparatorLabel({\n  children,\n  className,\n  labelClassName,\n  separatorClassName,\n  tone = \"default\",\n  variant = \"line\",\n  ...props\n}: SeparatorLabelProps) {\n  const flankingClassName = cn(\"flex-1\", separatorClassName);\n\n  return (\n    <div\n      className={cn(\"flex items-center gap-3\", className)}\n      data-slot=\"separator-label\"\n      {...props}\n    >\n      <Separator\n        className={flankingClassName}\n        decorative\n        spacing=\"none\"\n        tone={tone}\n        variant={variant}\n      />\n      <span\n        className={cn(\"shrink-0 text-muted-foreground text-xs\", labelClassName)}\n      >\n        {children}\n      </span>\n      <Separator\n        className={flankingClassName}\n        decorative\n        spacing=\"none\"\n        tone={tone}\n        variant={variant}\n      />\n    </div>\n  );\n}\n\nSeparatorLabel.displayName = \"SeparatorLabel\";\n\nexport { Separator, SeparatorLabel };\nexport type {\n  SeparatorOrientation,\n  SeparatorSpacing,\n  SeparatorTone,\n  SeparatorVariant,\n};\n",
      "type": "registry:ui"
    }
  ],
  "title": "Separator (Base UI)",
  "description": "Separator with line, dashed, and dotted variants layered over the Base UI primitive, supporting horizontal and vertical orientation with a decorative default."
}