{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "separator",
  "title": "Separator",
  "description": "A rule between groups of content, as a hairline, a dashed break, a labelled divider or a line that fades at both ends.",
  "dependencies": [
    "radix-ui"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/miseui/ui/separator.tsx",
      "content": "import type * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\nimport { cn } from \"@/registry/miseui/lib/utils\"\n\ntype SeparatorVariant = \"line\" | \"dashed\" | \"label\" | \"gradient\"\ntype SeparatorAlign = \"start\" | \"center\" | \"end\"\ntype SeparatorOrientation = \"horizontal\" | \"vertical\"\n\ntype SeparatorProps = React.ComponentProps<typeof SeparatorPrimitive.Root> & {\n  /** `line` a hairline, `dashed` a lesser break, `label` names what follows, `gradient` fades out at both ends. */\n  variant?: SeparatorVariant\n  /** Where the text sits in `label`. */\n  align?: SeparatorAlign\n}\n\n/** Vertical rules stretch with a flex parent; the minimum keeps them visible when there is none. */\nconst RULE_CLASS: Record<Exclude<SeparatorVariant, \"label\">, Record<SeparatorOrientation, string>> = {\n  line: {\n    horizontal: \"h-px w-full bg-border\",\n    vertical: \"min-h-4 w-px self-stretch bg-border\",\n  },\n  dashed: {\n    horizontal: \"h-0 w-full border-t border-dashed\",\n    vertical: \"min-h-4 w-0 self-stretch border-l border-dashed\",\n  },\n  gradient: {\n    horizontal: \"h-px w-full bg-linear-to-r from-transparent via-border to-transparent\",\n    vertical: \"min-h-4 w-px self-stretch bg-linear-to-b from-transparent via-border to-transparent\",\n  },\n}\n\nconst LABEL_CLASS: Record<SeparatorOrientation, string> = {\n  horizontal: \"flex w-full items-center gap-3\",\n  vertical: \"flex min-h-16 flex-col items-center gap-2 self-stretch\",\n}\n\nconst LABEL_RULE_CLASS: Record<SeparatorOrientation, string> = {\n  horizontal: \"h-px flex-1 bg-border\",\n  vertical: \"w-px flex-1 bg-border\",\n}\n\nfunction Separator({\n  variant = \"line\",\n  align = \"center\",\n  orientation = \"horizontal\",\n  className,\n  children,\n  \"aria-label\": ariaLabel,\n  ...props\n}: SeparatorProps) {\n  const shared = { \"data-slot\": \"separator\", \"data-variant\": variant, orientation, ...props }\n  if (variant !== \"label\") {\n    return (\n      <SeparatorPrimitive.Root\n        {...shared}\n        aria-label={ariaLabel}\n        className={cn(\"shrink-0\", RULE_CLASS[variant][orientation], className)}\n      />\n    )\n  }\n  // A separator's children are presentational in ARIA, so the text only reaches a screen reader as its name.\n  const name = ariaLabel ?? (typeof children === \"string\" ? children : undefined)\n  return (\n    <SeparatorPrimitive.Root\n      {...shared}\n      aria-label={name}\n      className={cn(\"text-[13px] text-muted-foreground\", LABEL_CLASS[orientation], className)}\n    >\n      {align === \"start\" ? null : <span data-part=\"rule\" className={LABEL_RULE_CLASS[orientation]} />}\n      <span data-part=\"label\" className=\"shrink-0\">\n        {children}\n      </span>\n      {align === \"end\" ? null : <span data-part=\"rule\" className={LABEL_RULE_CLASS[orientation]} />}\n    </SeparatorPrimitive.Root>\n  )\n}\n\nexport { Separator, type SeparatorProps, type SeparatorVariant, type SeparatorAlign }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}