{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "separator",
  "title": "Separator",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/separator/separator.component.ts",
      "content": "import { Component, Input, booleanAttribute, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\n\nexport type SeparatorOrientation = 'horizontal' | 'vertical'\n\n/**\n * Angular port of UIPKGE Separator (React `Separator` on Radix Separator). Radix semantics:\n * `decorative` (default true) renders role=\"none\" so assistive tech skips it; a semantic\n * separator gets role=\"separator\" and `aria-orientation` only when vertical (horizontal is\n * the ARIA default). `data-orientation` always drives the sizing classes. The host puts\n * `block` first so the h-px / w-px sizing applies on the custom element.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-separator, [ui-separator]',\n  standalone: true,\n  host: {\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.data-slot]': '\"separator\"',\n    '[attr.role]': 'decorative ? \"none\" : \"separator\"',\n    '[attr.aria-orientation]': '!decorative && orientation === \"vertical\" ? \"vertical\" : null',\n    '[attr.data-orientation]': 'orientation',\n    '[class]': 'hostClass',\n  },\n  template: ``,\n})\nexport class UiSeparatorComponent {\n  @Input() orientation: SeparatorOrientation = 'horizontal'\n  @Input({ transform: booleanAttribute }) decorative = true\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn(\n      'block bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',\n      this.className,\n    )\n  }\n}\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/separator/separator.component.ts"
    },
    {
      "path": "packages/registry-angular/components/separator/index.ts",
      "content": "export { UiSeparatorComponent, type SeparatorOrientation } from './separator.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/separator/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Horizontal or vertical visual divider — a `<div>` with the right ARIA role and a registry-token border color. Use between sections, list rows, and toolbar groups.",
  "categories": [
    "layout"
  ]
}