{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "separator",
  "title": "Separator",
  "author": "Tori Bryan",
  "description": "A thin rule between groups of content, across or down, with an optional label.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/separator.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A rule between groups of content. Give it children for a labeled rule,\n * such as a date in a conversation: a line, the label, and a line.\n */\nfunction Separator({\n  orientation = \"horizontal\",\n  className,\n  children,\n  \"aria-label\": ariaLabel,\n  ...props\n}: SeparatorPrimitive.Props) {\n  if (children === undefined || children === null) {\n    return (\n      <SeparatorPrimitive\n        data-slot=\"separator\"\n        orientation={orientation}\n        aria-label={ariaLabel}\n        className={cn(\n          \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n  // A separator's children are presentational to screen readers, so a text\n  // label is also its name.\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation=\"horizontal\"\n      aria-label={\n        ariaLabel ?? (typeof children === \"string\" ? children : undefined)\n      }\n      className={cn(\n        \"flex w-full items-center gap-3 text-xs font-medium text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      <span data-slot=\"separator-line\" className=\"h-px flex-1 bg-border\" />\n      <span data-slot=\"separator-label\" className=\"shrink-0\">\n        {children}\n      </span>\n      <span data-slot=\"separator-line\" className=\"h-px flex-1 bg-border\" />\n    </SeparatorPrimitive>\n  )\n}\n\nexport { Separator }\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "tier": "base-components",
    "group": "Display",
    "docs": "https://fibo.toribryan.com/?path=/docs/base-components-display-separator--docs"
  },
  "docs": "Docs and live examples: https://fibo.toribryan.com/?path=/docs/base-components-display-separator--docs",
  "categories": [
    "base-components",
    "display"
  ],
  "type": "registry:ui"
}