{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area-primary",
  "title": "Area-primary scroll",
  "description": "Styled scroll: the Area-primary set. 5 decorative scroll variations (SolidPrimaryScrollArea, SoftPrimaryScrollArea, RingPrimaryScrollArea, GradientPrimaryScrollArea, GlowPrimaryScrollArea) 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/scroll-area-primary.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Scroll-area primary ailesi: 5 dekoratif kaydirma alani. Thumb primary aksan\n   tonunu tasar (solid, soft, ring, gradient, glow). Renkler YALNIZ token; alfa\n   color-mix ile. size -> viewport yuksekligi. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst height: Record<StyledSize, string> = {\n  sm: \"h-40\",\n  md: \"h-56\",\n  lg: \"h-72\",\n  xl: \"h-96\",\n}\n\nconst base = \"w-full overflow-y-auto rounded-lg border border-border bg-surface-2 p-3\"\n\n/* Varsayilan icerik: kaydirmayi tetikleyecek kadar uzun, token-stilli satirlar. */\nfunction DefaultRows({ count = 16 }: { count?: number }) {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {Array.from({ length: count }).map((_, i) => (\n        <div\n          key={i}\n          className=\"flex items-center justify-between rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground\"\n        >\n          <span className=\"font-medium\">Satir {i + 1}</span>\n          <span className=\"text-xs text-muted-foreground\">token</span>\n        </div>\n      ))}\n    </div>\n  )\n}\n\ntype Props = {\n  className?: string\n  size?: StyledSize\n  children?: React.ReactNode\n}\n\n/* Solid: dolu primary thumb. */\nexport function SolidPrimaryScrollArea({ className, size = \"md\", children }: Props) {\n  return (\n    <div\n      data-slot=\"styled-scroll-area\"\n      className={cn(\n        base,\n        height[size],\n        \"[scrollbar-width:thin] [scrollbar-color:var(--color-primary)_transparent]\",\n        \"[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-primary\",\n        className\n      )}\n    >\n      {children ?? <DefaultRows />}\n    </div>\n  )\n}\n\n/* Soft: yari saydam primary thumb. */\nexport function SoftPrimaryScrollArea({ className, size = \"md\", children }: Props) {\n  return (\n    <div\n      data-slot=\"styled-scroll-area\"\n      className={cn(\n        base,\n        height[size],\n        \"[scrollbar-width:thin] [scrollbar-color:color-mix(in_oklab,var(--color-primary)_45%,transparent)_transparent]\",\n        \"[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[color-mix(in_oklab,var(--color-primary)_45%,transparent)]\",\n        className\n      )}\n    >\n      {children ?? <DefaultRows />}\n    </div>\n  )\n}\n\n/* Ring: primary cerceveli, ici seyreltilmis thumb (halka gorunumu). */\nexport function RingPrimaryScrollArea({ className, size = \"md\", children }: Props) {\n  return (\n    <div\n      data-slot=\"styled-scroll-area\"\n      className={cn(\n        base,\n        height[size],\n        \"[scrollbar-width:thin] [scrollbar-color:var(--color-primary)_transparent]\",\n        \"[&::-webkit-scrollbar]:w-3 [&::-webkit-scrollbar-track]:bg-transparent\",\n        \"[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-primary [&::-webkit-scrollbar-thumb]:bg-[color-mix(in_oklab,var(--color-primary)_18%,transparent)]\",\n        className\n      )}\n    >\n      {children ?? <DefaultRows />}\n    </div>\n  )\n}\n\n/* Gradient: a thumb with a vertical gradient from primary to a diluted primary. */\nexport function GradientPrimaryScrollArea({ className, size = \"md\", children }: Props) {\n  return (\n    <div\n      data-slot=\"styled-scroll-area\"\n      className={cn(\n        base,\n        height[size],\n        \"[scrollbar-width:thin] [scrollbar-color:var(--color-primary)_transparent]\",\n        \"[&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar-track]:bg-transparent\",\n        \"[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gradient-to-b [&::-webkit-scrollbar-thumb]:from-primary [&::-webkit-scrollbar-thumb]:to-[color-mix(in_oklab,var(--color-primary)_50%,transparent)]\",\n        className\n      )}\n    >\n      {children ?? <DefaultRows />}\n    </div>\n  )\n}\n\n/* Glow: primary thumb + primary tonlu isilti golgesi. */\nexport function GlowPrimaryScrollArea({ className, size = \"md\", children }: Props) {\n  return (\n    <div\n      data-slot=\"styled-scroll-area\"\n      className={cn(\n        base,\n        height[size],\n        \"[scrollbar-width:thin] [scrollbar-color:var(--color-primary)_transparent]\",\n        \"[&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar-track]:bg-transparent\",\n        \"[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-primary [&::-webkit-scrollbar-thumb]:shadow-[0_0_8px_color-mix(in_oklab,var(--color-primary)_60%,transparent)]\",\n        className\n      )}\n    >\n      {children ?? <DefaultRows />}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/scroll-area-primary.tsx"
    }
  ],
  "categories": [
    "styled",
    "scroll"
  ],
  "type": "registry:component"
}