{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "scroll-area-shadow", "title": "Area-shadow scroll", "description": "Styled scroll: the Area-shadow set. 5 decorative scroll variations (FloatShadowScrollArea, LiftShadowScrollArea, DeepShadowScrollArea, PillShadowScrollArea, EdgeShadowScrollArea) 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-shadow.tsx", "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Scroll-area shadow family: 5 decorative scroll areas. The thumb carries a\n drop-shadow like a raised, floating chip (float, lift, deep, pill, edge). The\n shadow and thumb colors come ONLY from tokens; alpha via color-mix. size -> the\n viewport height. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst height: Record = {\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
\n {Array.from({ length: count }).map((_, i) => (\n \n Satir {i + 1}\n token\n
\n ))}\n \n )\n}\n\ntype Props = {\n className?: string\n size?: StyledSize\n children?: React.ReactNode\n}\n\n/* Float: iceriden bosluklu, yumusak golgeli yuzen thumb. */\nexport function FloatShadowScrollArea({ className, size = \"md\", children }: Props) {\n return (\n \n {children ?? }\n \n )\n}\n\n/* Lift: daha yuksege kalkmis, uzun ofsetli golge. */\nexport function LiftShadowScrollArea({ className, size = \"md\", children }: Props) {\n return (\n \n {children ?? }\n \n )\n}\n\n/* Deep: koyu, genis bulanik derin golge. */\nexport function DeepShadowScrollArea({ className, size = \"md\", children }: Props) {\n return (\n \n {children ?? }\n \n )\n}\n\n/* Pill: cok yuvarlak, dolgulu hap thumb + yumusak golge. */\nexport function PillShadowScrollArea({ className, size = \"md\", children }: Props) {\n return (\n \n {children ?? }\n \n )\n}\n\n/* Edge: kenara yaslanan thumb + yonlu golge. */\nexport function EdgeShadowScrollArea({ className, size = \"md\", children }: Props) {\n return (\n \n {children ?? }\n \n )\n}\n", "type": "registry:component", "target": "components/ui/scroll-area-shadow.tsx" } ], "categories": [ "styled", "scroll" ], "type": "registry:component" }