{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "textarea-outline",
  "title": "Outline textarea",
  "description": "Styled textarea: the Outline set. 5 decorative textarea variations (RingTextarea, DashedTextarea, DoubleTextarea, ThickTextarea, CornerTextarea) 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/textarea-outline.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Outline textarea family: 5 multi-line fields where the border is the main visual.\n   The difference is only the frame technique: an offset ring, a dashed line, a\n   double line, a thick line and corner brackets. The surface stays plain in every\n   variant. The effects are pure CSS (focus-within + token transitions), so\n   motion/react is not needed. Color comes ONLY from tokens; transparency via a\n   Tailwind alpha utility or color-mix. Each one wraps a real <textarea> and passes\n   through all the native props. Size = min-height. */\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\nconst wrapBase =\n  \"relative flex w-72 max-w-full flex-col px-3 py-2 transition-colors focus-within:ring-[3px] focus-within:ring-ring/50\"\n\ntype Props = React.ComponentProps<\"textarea\"> & { size?: StyledSize }\n\n/* Ring: ince kenarlik + govdeden ayrilan offset halka (ring-offset). */\nexport function RingTextarea({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-textarea\"\n      className={cn(\n        wrapBase,\n        \"rounded-lg border border-border ring-1 ring-border/50 ring-offset-2 ring-offset-background focus-within:border-ring focus-within:ring-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/* Dashed: a dashed border that turns primary on focus. */\nexport function DashedTextarea({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-textarea\"\n      className={cn(\n        wrapBase,\n        \"rounded-lg border-2 border-dashed border-border focus-within:border-primary\",\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/* Double: cift cizgili kalin kenarlik (border-double 4px). */\nexport function DoubleTextarea({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-textarea\"\n      className={cn(\n        wrapBase,\n        \"rounded-lg border-4 border-double border-border focus-within:border-primary\",\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/* Thick: a single thick line that rises to foreground contrast on focus. */\nexport function ThickTextarea({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-textarea\"\n      className={cn(\n        wrapBase,\n        \"rounded-lg border-2 border-foreground/30 focus-within:border-foreground\",\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/* Corner: no border, only 4 corner brackets; turns primary on focus. */\nexport function CornerTextarea({ className, size = \"md\", ...props }: Props) {\n  const corner =\n    \"pointer-events-none absolute size-3 border-border transition-colors duration-(--motion-base) motion-reduce:transition-none\"\n  return (\n    <span\n      data-slot=\"styled-textarea\"\n      className={cn(wrapBase, \"group rounded-none\", height[size], className)}\n    >\n      <textarea aria-label=\"Message\" {...props} className={cn(fieldBase, \"flex-1\", height[size])} />\n      <span aria-hidden=\"true\" className={cn(corner, \"left-0 top-0 border-l-2 border-t-2 group-focus-within:border-primary\")} />\n      <span aria-hidden=\"true\" className={cn(corner, \"right-0 top-0 border-r-2 border-t-2 group-focus-within:border-primary\")} />\n      <span aria-hidden=\"true\" className={cn(corner, \"bottom-0 left-0 border-b-2 border-l-2 group-focus-within:border-primary\")} />\n      <span aria-hidden=\"true\" className={cn(corner, \"bottom-0 right-0 border-b-2 border-r-2 group-focus-within:border-primary\")} />\n    </span>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/textarea-outline.tsx"
    }
  ],
  "categories": [
    "styled",
    "textarea"
  ],
  "type": "registry:component"
}