{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "separator",
  "title": "Separator",
  "description": "Horizontal or vertical divider on radix-ui with 2 variants (solid, dashed) and an optional centered label that renders a two-line divider with text (e.g. OR). Decorative by default with correct aria semantics when not.",
  "dependencies": [
    "radix-ui@^1.6.1"
  ],
  "registryDependencies": [
    "@ai2/tokens",
    "@ai2/primitives"
  ],
  "files": [
    {
      "path": "registry/ai2/ui/separator.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"@/registry/ai2/ui/primitives\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst separatorVariants = cva(\"shrink-0\", {\n  variants: {\n    variant: {\n      solid:\n        \"bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:w-px\",\n      dashed:\n        \"border-border data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-dashed data-[orientation=vertical]:border-l data-[orientation=vertical]:border-dashed\",\n    },\n  },\n  defaultVariants: { variant: \"solid\" },\n})\n\ninterface SeparatorProps\n  extends React.ComponentProps<typeof SeparatorPrimitive.Root>,\n    VariantProps<typeof separatorVariants> {\n  /** Optional centered label; renders a horizontal divider with text (e.g. \"OR\"). */\n  label?: React.ReactNode\n}\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  variant,\n  label,\n  ...props\n}: SeparatorProps) {\n  if (label != null) {\n    return (\n      <div\n        data-slot=\"separator\"\n        data-orientation=\"horizontal\"\n        role={decorative ? \"none\" : \"separator\"}\n        className={cn(\n          \"flex items-center gap-3 text-xs font-medium text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        <span\n          data-orientation=\"horizontal\"\n          className={cn(separatorVariants({ variant }), \"h-px flex-1\")}\n        />\n        {label}\n        <span\n          data-orientation=\"horizontal\"\n          className={cn(separatorVariants({ variant }), \"h-px flex-1\")}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        separatorVariants({ variant }),\n        \"data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator, separatorVariants, type SeparatorProps }\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Set orientation=vertical inside a flex row; give the row a height for the divider to show.",
  "categories": [
    "layout"
  ],
  "type": "registry:ui"
}