{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area-inset",
  "title": "Area-inset scroll",
  "description": "Styled scroll: the Area-inset set. 5 decorative scroll variations (SoftInsetScrollArea, DeepInsetScrollArea, TopInsetScrollArea, BottomInsetScrollArea, FrameInsetScrollArea) 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-inset.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Scroll-area inset family: 5 decorative scroll areas. They draw gradient layers giving an inner-shadow effect at the top and bottom edges (and on all edges in Frame). The shadow goes from a low-alpha tone of the foreground token via color-mix to transparent; the content slides beneath it and signals the overflow. size -> the viewport height. */\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\nconst scrollbar =\n  \"[scrollbar-width:thin] [scrollbar-color:var(--color-border)_transparent] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border\"\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/* Shared shell: a relative wrapper plus the scroll area plus the given edge shadows. */\nfunction InsetShell({\n  className,\n  size = \"md\",\n  children,\n  overlays,\n}: Props & { overlays: React.ReactNode }) {\n  return (\n    <div data-slot=\"styled-scroll-area\" className={cn(\"relative\", className)}>\n      <div className={cn(base, height[size], scrollbar)}>{children ?? <DefaultRows />}</div>\n      {overlays}\n    </div>\n  )\n}\n\nconst topSoft =\n  \"pointer-events-none absolute inset-x-px top-px h-7 rounded-t-lg bg-gradient-to-b from-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] to-transparent\"\nconst bottomSoft =\n  \"pointer-events-none absolute inset-x-px bottom-px h-7 rounded-b-lg bg-gradient-to-t from-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] to-transparent\"\nconst topDeep =\n  \"pointer-events-none absolute inset-x-px top-px h-11 rounded-t-lg bg-gradient-to-b from-[color-mix(in_oklab,var(--color-foreground)_24%,transparent)] to-transparent\"\nconst bottomDeep =\n  \"pointer-events-none absolute inset-x-px bottom-px h-11 rounded-b-lg bg-gradient-to-t from-[color-mix(in_oklab,var(--color-foreground)_24%,transparent)] to-transparent\"\n\n/* Soft: ust ve alt kenarda ince, hafif ic golge. */\nexport function SoftInsetScrollArea(props: Props) {\n  return (\n    <InsetShell\n      {...props}\n      overlays={\n        <>\n          <div aria-hidden className={topSoft} />\n          <div aria-hidden className={bottomSoft} />\n        </>\n      }\n    />\n  )\n}\n\n/* Deep: ust ve alt kenarda derin, belirgin ic golge. */\nexport function DeepInsetScrollArea(props: Props) {\n  return (\n    <InsetShell\n      {...props}\n      overlays={\n        <>\n          <div aria-hidden className={topDeep} />\n          <div aria-hidden className={bottomDeep} />\n        </>\n      }\n    />\n  )\n}\n\n/* Top: an inner shadow on the top edge only. */\nexport function TopInsetScrollArea(props: Props) {\n  return <InsetShell {...props} overlays={<div aria-hidden className={topDeep} />} />\n}\n\n/* Bottom: an inner shadow on the bottom edge only. */\nexport function BottomInsetScrollArea(props: Props) {\n  return <InsetShell {...props} overlays={<div aria-hidden className={bottomDeep} />} />\n}\n\n/* Frame: dort kenarda ic golge; icerigi bir cerceve icine oturtur. */\nexport function FrameInsetScrollArea(props: Props) {\n  return (\n    <InsetShell\n      {...props}\n      overlays={\n        <>\n          <div aria-hidden className={topSoft} />\n          <div aria-hidden className={bottomSoft} />\n          <div\n            aria-hidden\n            className=\"pointer-events-none absolute inset-y-px left-px w-6 rounded-l-lg bg-gradient-to-r from-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] to-transparent\"\n          />\n          <div\n            aria-hidden\n            className=\"pointer-events-none absolute inset-y-px right-px w-6 rounded-r-lg bg-gradient-to-l from-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] to-transparent\"\n          />\n        </>\n      }\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/scroll-area-inset.tsx"
    }
  ],
  "categories": [
    "styled",
    "scroll"
  ],
  "type": "registry:component"
}