{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "separator",
  "type": "registry:ui",
  "title": "Separator",
  "description": "Fluent 2-styled 1px divider with shadcn APIs. Horizontal or vertical orientation, decorative by default with native WAI-ARIA separator semantics when set to non-decorative.",
  "author": "graundtech <https://github.com/graundtech/fluent2-react-kit>",
  "registryDependencies": [
    "https://fluent2-react-kit.graund.io/r/utils.json"
  ],
  "files": [
    {
      "path": "components/ui/separator.tsx",
      "type": "registry:ui",
      "target": "components/ui/separator.tsx",
      "content": "import type { ComponentProps } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Separator — Fluent 2-styled, shadcn-API separator.\n *\n * A thin 1px Fluent divider (`bg-border`) that separates content\n * horizontally or vertically. Implemented natively with a plain `<div>` — no\n * primitive is needed since the WAI-ARIA \"separator\" pattern\n * (https://www.w3.org/WAI/ARIA/apg/patterns/separator/) is trivial: a role\n * swap plus an orientation attribute.\n *\n * Stroke color — deliberate token-consistency deviation: Fluent's Divider uses\n * its own stroke token (`#e0e0e0`, grey-88), one ramp step lighter than the\n * generic `--border` (`#d1d1d1`, grey-82) this component reuses. The kit keeps\n * `bg-border` on purpose: a divider sharing the exact border token used by\n * inputs/cards is worth more than a one-step-lighter grey, and `--border` is\n * intentionally NOT re-pointed globally to `#e0e0e0` (that would lighten every\n * input/card border too). Net effect: the divider reads a hair more prominent\n * than Fluent's spec — an accepted, single-step fidelity trade for token\n * cohesion.\n *\n * ARIA:\n * - `decorative` (default `true`) → `role=\"none\"`, removing it from the\n *   accessibility tree. `aria-orientation` is withheld in this case too —\n *   ARIA forbids relying on global states/properties alongside `role=\"none\"`.\n * - non-decorative → `role=\"separator\"`. `aria-orientation=\"vertical\"` is\n *   emitted only for the vertical case; horizontal is the implicit default\n *   per the APG, so it is intentionally never set to `\"horizontal\"`.\n *\n * Sizing follows current shadcn: a single 1px stroke that fills the cross\n * axis, switched by `data-orientation` selectors rather than a cva variant\n * group (there is only one visual treatment, just two axes).\n *\n * Server-safe: no `\"use client\"`, no hooks — the React import is type-only,\n * so the file can be dropped straight into an RSC tree.\n */\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: ComponentProps<\"div\"> & {\n  orientation?: \"horizontal\" | \"vertical\";\n  decorative?: boolean;\n}) {\n  return (\n    <div\n      role={decorative ? \"none\" : \"separator\"}\n      aria-orientation={\n        !decorative && orientation === \"vertical\" ? \"vertical\" : undefined\n      }\n      data-slot=\"separator\"\n      data-orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Separator };\n"
    }
  ]
}