{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-group-glass",
  "title": "Group-glass input",
  "description": "Styled input: the Group-glass set. 5 decorative input variations (FrostGroup, TintGroup, SmokeGroup, CrystalGroup, DepthGroup) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens",
    "@ai2/glass"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/input-group-glass.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AtSign, Globe, Hash, Lock, Sparkles } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { glassDepth } from \"@/registry/ai2/ui/glass\"\n\n/* Glass input group family: 5 frosted-glass fields. Every variant shares the same\n   anatomy (an icon addon + a real <input>); the difference is ONLY on the surface.\n   The glass surface comes from the glassDepth scale in @ai2/glass (NO hand-made\n   backdrop-blur, AGENTS.md 4.5): the step gives the surface (blur + translucency +\n   the ai2 inset signature) and the variant gives the character - frost (neutral),\n   tint (info toned), smoke (a foreground scrim), crystal (clear + a bright edge),\n   depth (a gradient layer). The glass sits on the ROOT and the <input> stays\n   transparent. Color comes ONLY from tokens; alpha via color-mix. No motion, the\n   transitions ride on the token CSS transitions. Every field has an accessible\n   label.\n\n   TRAP: glassDepth carries a [box-shadow:...]; because cn() is tailwind-merge, a\n   second shadow-* silently deletes the signature. Extra depth comes from the\n   border/gradient. */\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\n/* Focus through OUTLINE, NOT ring: because the glass sits on the ROOT, the glassDepth signature (the arbitrary property `[box-shadow:...]`) was overriding Tailwind's ring chain and the ring was never drawn (measured, 2026-07-15). outline is a separate property and does not collide. */\nconst rootBase =\n  \"group inline-flex w-64 max-w-full items-center overflow-hidden rounded-lg border transition-colors duration-(--motion-base) focus-within:border-primary focus-within:outline-[3px] focus-within:outline-offset-0 focus-within:outline-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\nconst fieldBase =\n  \"h-full w-full min-w-0 bg-transparent px-2 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40\"\n\nconst iconBase =\n  \"ml-3 shrink-0 text-muted-foreground transition-colors group-focus-within:text-primary\"\n\ntype Props = Omit<React.ComponentProps<\"input\">, \"size\"> & { size?: StyledSize }\n\n/* Shared shell: surfaceClassName carries each variant's glass technique. */\nfunction GlassShell({\n  className,\n  size = \"md\",\n  surfaceClassName,\n  icon,\n  label,\n  trailing,\n  ...props\n}: Props & {\n  surfaceClassName: string\n  icon: React.ReactNode\n  label: string\n  trailing?: React.ReactNode\n}) {\n  const id = React.useId()\n  return (\n    <div\n      data-slot=\"styled-input-group\"\n      className={cn(rootBase, height[size], surfaceClassName, className)}\n    >\n      <label htmlFor={id} className=\"sr-only\">\n        {label}\n      </label>\n      <span className={iconBase}>{icon}</span>\n      <input id={id} {...props} className={fieldBase} />\n      {trailing ? <span className=\"mr-3 shrink-0 text-muted-foreground\">{trailing}</span> : null}\n    </div>\n  )\n}\n\n/* Frost: classic frosted glass. sm (4px) -> it was already looking for the lightest blur (blur-sm); the shallowest step on the scale is the exact equivalent. Character: a neutral border. */\nexport function FrostGroup(props: Props) {\n  return (\n    <GlassShell\n      {...props}\n      label=\"Frosted field\"\n      icon={<Globe />}\n      surfaceClassName={cn(\n        glassDepth.sm,\n        \"border-[color-mix(in_oklab,var(--color-foreground)_12%,transparent)]\"\n      )}\n    />\n  )\n}\n\n/* Tint: info-toned translucent glass. md (8px) -> the default step; the hue carries the character. The tint fill takes over the step's bg (the supports-[] variant is overridden too), so it owns the translucency itself. */\nexport function TintGroup(props: Props) {\n  return (\n    <GlassShell\n      {...props}\n      label=\"Tinted field\"\n      icon={<Sparkles />}\n      surfaceClassName={cn(\n        glassDepth.md,\n        \"border-[color-mix(in_oklab,var(--color-info)_28%,transparent)] bg-[color-mix(in_oklab,var(--color-info)_10%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-info)_10%,transparent)]\"\n      )}\n    />\n  )\n}\n\n/* Smoke: dark foreground glass. lg (16px) -> \"what is behind becomes texture, not text\". Character: a foreground scrim. */\nexport function SmokeGroup(props: Props) {\n  return (\n    <GlassShell\n      {...props}\n      label=\"Smoked field\"\n      icon={<Lock />}\n      surfaceClassName={cn(\n        glassDepth.lg,\n        \"border-[color-mix(in_oklab,var(--color-foreground)_18%,transparent)] bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)]\"\n      )}\n    />\n  )\n}\n\n/* Crystal: clear glass plus a bright edge. md (8px) -> the same step as Tint with a different character: a colourless low background fill plus a bright border. The hand-written bright-edge inset shadow was REMOVED - the glassDepth signature's top inset highlight is exactly for that job, and a second [box-shadow:] would erase the signature. */\nexport function CrystalGroup(props: Props) {\n  return (\n    <GlassShell\n      {...props}\n      label=\"Crystal field\"\n      icon={<AtSign />}\n      trailing={<Sparkles />}\n      surfaceClassName={cn(\n        glassDepth.md,\n        \"border-[color-mix(in_oklab,var(--color-background)_60%,transparent)] bg-[color-mix(in_oklab,var(--color-background)_40%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-background)_40%,transparent)]\"\n      )}\n    />\n  )\n}\n\n/* Depth: gradient glass where the area lifts off the page. xl (24px) -> the \"detached layer\" feel the old shadow-lg plus blur-md was after now comes from the maximum diffusion step; shadow-lg was REMOVED because it would erase the signature. Because the gradient carries the character, the step's bg fill is deliberately zeroed - the translucency is the gradient's responsibility. */\nexport function DepthGroup(props: Props) {\n  return (\n    <GlassShell\n      {...props}\n      label=\"Depth field\"\n      icon={<Hash />}\n      surfaceClassName={cn(\n        glassDepth.xl,\n        \"border-[color-mix(in_oklab,var(--color-foreground)_14%,transparent)] bg-transparent supports-[backdrop-filter]:bg-transparent bg-gradient-to-b from-[color-mix(in_oklab,var(--color-background)_70%,transparent)] to-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)]\"\n      )}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/input-group-glass.tsx"
    }
  ],
  "categories": [
    "styled",
    "input"
  ],
  "type": "registry:component"
}