{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "textarea-glass",
  "title": "Glass textarea",
  "description": "Styled textarea: the Glass set. 5 decorative textarea variations (FrostTextarea, TintTextarea, SmokeTextarea, CrystalTextarea, DepthTextarea) 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",
    "@ai2/glass"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/textarea-glass.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { glassDepth } from \"@/registry/ai2/ui/glass\"\n\n/* Glass textarea family: 5 frosted/translucent multi-line fields. The glass SURFACE\n   comes from the glassDepth scale in @ai2/glass (NO hand-made backdrop-blur,\n   AGENTS.md 4.5); the step gives the surface and the variant gives the character.\n   The step mapping is byte-for-byte the same as inputs-glass - same family, same\n   language. The effects are pure CSS, so motion/react is not needed. Color comes\n   ONLY from tokens, NEVER a raw var(--x)/0.25. Each one wraps a real <textarea>;\n   the glass is on the wrapper and the control stays transparent.\n   Size = min-height.\n\n   TRAP: glassDepth carries a [box-shadow:...]; because cn() is tailwind-merge, a\n   second shadow-* silently deletes the signature. Extra depth is given with a\n   border. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst height: Record<StyledSize, string> = {\n  sm: \"min-h-16 text-sm\",\n  md: \"min-h-20 text-sm\",\n  lg: \"min-h-24 text-base\",\n  xl: \"min-h-28 text-base\",\n}\n\nconst fieldBase =\n  \"w-full resize-y bg-transparent text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\"\n\n/* Focus is given with OUTLINE, NOT a ring. The reason was measured (2026-07-15):\n   because the glassDepth signature is the arbitrary property `[box-shadow:...]` it\n   writes box-shadow directly and overrides Tailwind's ring chain\n   (--tw-ring-shadow); the ring was never drawn on the glass at all. outline is a\n   separate CSS property and does not collide. */\nconst wrapBase =\n  \"relative flex w-72 max-w-full flex-col rounded-xl border px-3 py-2 transition-colors focus-within:outline-[3px] focus-within:outline-offset-0 focus-within:outline-ring/50\"\n\ntype Props = React.ComponentProps<\"textarea\"> & { size?: StyledSize }\n\n/* Frost: en hafif cam. sm (4px) -> ailenin taban cizgisi; arkasi hala okunur.\n   Karakter: notr kenarlik. */\nexport function FrostTextarea({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-textarea\"\n      className={cn(\n        wrapBase,\n        glassDepth.sm,\n        \"border-border/60 focus-within:border-ring\",\n        height[size],\n        className\n      )}\n    >\n      <textarea aria-label=\"Message\" {...props} className={cn(fieldBase, \"flex-1\", height[size])} />\n    </span>\n  )\n}\n\n/* Tint: info-toned glass. md (8px) -> the default step; because the colour carries the character the surface stays neutral. The tint fill takes over the step's bg (the supports-[] variant is overridden too), so it owns the translucency itself. */\nexport function TintTextarea({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-textarea\"\n      className={cn(\n        wrapBase,\n        glassDepth.md,\n        \"border-info/25 bg-info/15 supports-[backdrop-filter]:bg-info/10 focus-within:border-primary focus-within:outline-info/40\",\n        height[size],\n        className\n      )}\n    >\n      <textarea aria-label=\"Message\" {...props} className={cn(fieldBase, \"flex-1\", height[size])} />\n    </span>\n  )\n}\n\n/* Smoke: dark, smoky glass. lg (16px) -> \"what is behind becomes texture, not text\". Character: a foreground scrim. */\nexport function SmokeTextarea({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-textarea\"\n      className={cn(\n        wrapBase,\n        glassDepth.lg,\n        \"border-foreground/15 bg-foreground/15 supports-[backdrop-filter]:bg-foreground/10 focus-within:border-foreground/40\",\n        height[size],\n        className\n      )}\n    >\n      <textarea aria-label=\"Message\" {...props} className={cn(fieldBase, \"flex-1\", height[size])} />\n    </span>\n  )\n}\n\n/* Crystal: clear glass with a sharp edge. md (8px) -> the same step as Tint, a\n   different character: a surface-3 fill + a thin border instead of color. The\n   hand-written top/bottom inset highlight lines were REMOVED - the glassDepth\n   signature already carries that inset highlight and a second [box-shadow:] would\n   have deleted it. */\nexport function CrystalTextarea({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-textarea\"\n      className={cn(\n        wrapBase,\n        glassDepth.md,\n        \"border-border/50 bg-surface-3/55 supports-[backdrop-filter]:bg-surface-3/55 focus-within:border-ring\",\n        height[size],\n        className\n      )}\n    >\n      <textarea aria-label=\"Message\" {...props} className={cn(fieldBase, \"flex-1\", height[size])} />\n    </span>\n  )\n}\n\n/* Depth: the deepest glass. xl (24px) -> the \"detached from the page\" feel that the\n   old shadow-xl + blur-lg was after now comes from the maximum diffusion step. NO\n   extra shadow is added (it would have deleted the signature); the extra weight comes\n   from a pronounced border instead. */\nexport function DepthTextarea({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-textarea\"\n      className={cn(\n        wrapBase,\n        glassDepth.xl,\n        \"border-border focus-within:border-ring\",\n        height[size],\n        className\n      )}\n    >\n      <textarea aria-label=\"Message\" {...props} className={cn(fieldBase, \"flex-1\", height[size])} />\n    </span>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/textarea-glass.tsx"
    }
  ],
  "categories": [
    "styled",
    "textarea"
  ],
  "type": "registry:component"
}