{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "separator-vertical",
  "title": "Vertical separator",
  "description": "Styled separator: the Vertical set. 5 decorative separator variations (LineVSeparator, GradientVSeparator, DashedVSeparator, DotVSeparator, TallVSeparator) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/separator-vertical.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Vertical separator family: 5 decorative VERTICAL separators. Every export carries its own height, so it renders without props even without a sized parent; when used in a flex row it can be overridden with an h-* class. Colour comes ONLY from tokens, alpha via color-mix. size grows the line THICKNESS (sm..xl). No motion, entirely static and deterministic. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize }\n\n/* Thickness (width) scale for plain lines. */\nconst width: Record<StyledSize, string> = {\n  sm: \"w-px\",\n  md: \"w-0.5\",\n  lg: \"w-1\",\n  xl: \"w-1.5\",\n}\n\n/* Dashed vertical line: repeating-linear-gradient running vertically. */\nconst dashed: Record<StyledSize, string> = {\n  sm: \"w-px [background-image:repeating-linear-gradient(180deg,var(--color-border)_0,var(--color-border)_6px,transparent_6px,transparent_11px)]\",\n  md: \"w-0.5 [background-image:repeating-linear-gradient(180deg,var(--color-border)_0,var(--color-border)_8px,transparent_8px,transparent_14px)]\",\n  lg: \"w-1 [background-image:repeating-linear-gradient(180deg,var(--color-border)_0,var(--color-border)_10px,transparent_10px,transparent_17px)]\",\n  xl: \"w-1.5 [background-image:repeating-linear-gradient(180deg,var(--color-border)_0,var(--color-border)_12px,transparent_12px,transparent_20px)]\",\n}\n\n/* Dotted vertical line: a vertical radial-gradient repeat. */\nconst dotted: Record<StyledSize, string> = {\n  sm: \"w-1 [background-image:radial-gradient(circle,var(--color-border)_1px,transparent_1px)] [background-size:6px_6px]\",\n  md: \"w-1.5 [background-image:radial-gradient(circle,var(--color-border)_1.5px,transparent_1.5px)] [background-size:8px_8px]\",\n  lg: \"w-2 [background-image:radial-gradient(circle,var(--color-border)_2px,transparent_2px)] [background-size:10px_10px]\",\n  xl: \"w-2.5 [background-image:radial-gradient(circle,var(--color-border)_2.5px,transparent_2.5px)] [background-size:12px_12px]\",\n}\n\n/* Default height: a self-sufficient measurement for prop-less rendering. */\nconst stand = \"h-16 shrink-0\"\n\n/* LineV: a plain, fully opaque token vertical line. */\nexport function LineVSeparator({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      className={cn(stand, \"bg-border\", width[size], className)}\n      {...props}\n    />\n  )\n}\n\n/* GradientV: a vertical token line fading to transparent at both ends. */\nexport function GradientVSeparator({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      className={cn(\n        stand,\n        \"bg-gradient-to-b from-transparent via-border to-transparent\",\n        width[size],\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* DashedV: a dashed vertical token line. */\nexport function DashedVSeparator({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      className={cn(\n        stand,\n        \"[background-repeat:repeat-y] [background-position:center]\",\n        dashed[size],\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* DotV: dikey nokta dizisi. */\nexport function DotVSeparator({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      className={cn(\n        stand,\n        \"[background-repeat:repeat-y] [background-position:center]\",\n        dotted[size],\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* TallV: a tall vertical line fading from top to bottom with a soft glow. */\nexport function TallVSeparator({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-separator\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      className={cn(\n        \"h-32 shrink-0 rounded-full bg-gradient-to-b from-transparent via-border to-transparent shadow-[0_0_10px_-1px_var(--color-border)]\",\n        width[size],\n        className\n      )}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/separator-vertical.tsx"
    }
  ],
  "categories": [
    "styled",
    "separator"
  ],
  "type": "registry:component"
}