{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inputs-glass",
  "title": "Glass inputs",
  "description": "Styled inputs: the Glass set. 5 decorative inputs variations (FrostInput, TintInput, CrystalInput, SmokeInput, DepthGlassInput) 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/inputs-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 input family: 5 frosted/translucent text inputs. The glass SURFACE now\n   comes from the glassDepth scale in @ai2/glass (NO hand-made backdrop-blur,\n   AGENTS.md 4.5). The step gives the surface (blur + translucency + the ai2 inset\n   signature) and the variant gives the CHARACTER (tint, border, focus color). The\n   effects are pure CSS, so motion/react is not needed. Color comes ONLY from\n   tokens; transparency uses either a Tailwind alpha utility or color-mix, NEVER a\n   raw var(--x)/0.25. Each one wraps a real <input>; the glass is on the wrapper and\n   the control stays transparent.\n\n   TRAP: glassDepth carries a [box-shadow:...] and cn() is tailwind-merge, so a\n   second shadow-* / [box-shadow:...] silently deletes the signature. Extra depth is\n   therefore expressed with a border, not a shadow. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst height: Record<StyledSize, string> = {\n  sm: \"h-8 text-sm\",\n  md: \"h-9 text-sm\",\n  lg: \"h-10 text-base\",\n  xl: \"h-12 text-base\",\n}\n\nconst fieldBase =\n  \"w-full 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   the glassDepth signature is an arbitrary property `[box-shadow:...]`, meaning it\n   writes box-shadow DIRECTLY and overrides Tailwind's ring chain\n   (--tw-ring-shadow) entirely. ring-[3px] was drawing nothing on the glass;\n   :focus-within matched, but the boxShadow stayed byte-for-byte identical to its\n   unfocused state. Since outline is a separate CSS property it does not collide\n   with the signature, and it follows the border-radius. */\nconst wrapBase =\n  \"relative inline-flex w-56 max-w-full items-center rounded-xl border px-3 transition-colors focus-within:outline-[3px] focus-within:outline-offset-0 focus-within:outline-ring/50\"\n\ntype Props = Omit<React.ComponentProps<\"input\">, \"size\"> & { size?: StyledSize }\n\n/* Frost: the lightest glass. sm (4px) -> the intent \"frosted but still readable\n   behind\" is exactly the shallowest step on the scale; the family's baseline. The\n   character: a neutral border. */\nexport function FrostInput({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-input\"\n      className={cn(\n        wrapBase,\n        glassDepth.sm,\n        \"border-border/60 focus-within:border-ring\",\n        height[size],\n        className\n      )}\n    >\n      <input {...props} className={cn(fieldBase, \"h-full\")} />\n    </span>\n  )\n}\n\n/* Tint: info-toned glass. md (8px) -> the default step; since the colour already carries the character it is enough for the surface to stay neutral. The tint fill TAKES OVER the step's bg-background/60 value, so it owns the translucency itself (the supports-[] variant has to be overridden too, otherwise the step's variant paints over the tint). */\nexport function TintInput({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-input\"\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      <input {...props} className={cn(fieldBase, \"h-full\")} />\n    </span>\n  )\n}\n\n/* Crystal: clear glass with a sharp edge. md (8px) -> the same step as Tint but a different character: a surface-3 fill plus a thin border instead of colour. The old hand-written top and bottom inset highlight lines were REMOVED: the glassDepth signature already carries exactly that inset highlight, and adding a second [box-shadow:] would erase it. */\nexport function CrystalInput({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-input\"\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      <input {...props} className={cn(fieldBase, \"h-full\")} />\n    </span>\n  )\n}\n\n/* Smoke: dark, smoky glass. lg (16px) -> the intent of \"what is behind becomes texture, not text\" is exactly the description of the lg step. Character: a foreground scrim. */\nexport function SmokeInput({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-input\"\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      <input {...props} className={cn(fieldBase, \"h-full\")} />\n    </span>\n  )\n}\n\n/* DepthGlass: the deepest glass. xl (24px) -> the \"detached from the page\" feel that\n   the old shadow-xl + blur-lg was after now comes from the maximum diffusion step.\n   NO extra shadow is added: a second shadow-* would have deleted the signature, so\n   the extra weight comes from a pronounced border instead. */\nexport function DepthGlassInput({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-input\"\n      className={cn(\n        wrapBase,\n        glassDepth.xl,\n        \"border-border focus-within:border-ring\",\n        height[size],\n        className\n      )}\n    >\n      <input {...props} className={cn(fieldBase, \"h-full\")} />\n    </span>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/inputs-glass.tsx"
    }
  ],
  "categories": [
    "styled",
    "inputs"
  ],
  "type": "registry:component"
}