{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inputs-styled",
  "title": "Inputs essentials",
  "description": "Styled inputs: the essentials set. 5 decorative inputs variations (UnderlineInput, FloatInput, GlowInput, FilledInput, IconInput) 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"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/inputs-styled.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Input family: 5 decorative text inputs. Colour comes ONLY from tokens. Size = height (aligned with the base scale). The focus effects are CSS (focus-within / peer) plus token transitions; the transform-based ones are guarded with motion-reduce. Each wraps a real <input> and passes every native prop through. */\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\ntype Props = Omit<React.ComponentProps<\"input\">, \"size\"> & { size?: StyledSize }\n\n/* Underline: frameless, with a token line growing outwards from the centre on focus. */\nexport function UnderlineInput({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span data-slot=\"styled-input\" className={cn(\"relative inline-flex w-56 max-w-full items-center border-b border-border\", height[size], className)}>\n      <input {...props} className={cn(fieldBase, \"peer px-1\")} />\n      <span className=\"pointer-events-none absolute inset-x-0 bottom-[-1px] h-0.5 origin-center scale-x-0 bg-primary transition-transform duration-(--motion-base) ease-(--motion-ease) peer-focus:scale-x-100 motion-reduce:transition-none\" />\n    </span>\n  )\n}\n\n/* Float: odakta / dolu iken yukari suzulen etiket. */\nexport function FloatInput({ className, size = \"md\", id, ...props }: Props) {\n  const autoId = React.useId()\n  const inputId = id ?? autoId\n  return (\n    <span data-slot=\"styled-input\" className={cn(\"relative inline-flex w-56 max-w-full items-center rounded-lg border border-border px-3\", height[size], className)}>\n      <input id={inputId} placeholder=\" \" {...props} className={cn(fieldBase, \"peer h-full\")} />\n      <label\n        htmlFor={inputId}\n        className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 bg-background px-1 text-muted-foreground transition-all duration-(--motion-base) peer-focus:top-0 peer-focus:text-xs peer-focus:text-primary peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:text-xs motion-reduce:transition-none\"\n      >\n        Label\n      </label>\n    </span>\n  )\n}\n\n/* Glow: odakta token isima halkasi (box-shadow). */\nexport function GlowInput({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-input\"\n      className={cn(\n        \"relative inline-flex w-56 max-w-full items-center rounded-lg border border-border px-3 transition-shadow duration-(--motion-base) focus-within:border-info focus-within:shadow-[0_0_0_3px_color-mix(in_oklab,var(--info)_25%,transparent)]\",\n        height[size],\n        className\n      )}\n    >\n      <input {...props} className={cn(fieldBase, \"h-full\")} />\n    </span>\n  )\n}\n\n/* Filled: dolu yuzey + odakta alttan token vurgu cizgisi. */\nexport function FilledInput({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span data-slot=\"styled-input\" className={cn(\"relative inline-flex w-56 max-w-full items-center overflow-hidden rounded-t-lg border-b border-border bg-surface-2 px-3\", height[size], className)}>\n      <input {...props} className={cn(fieldBase, \"peer h-full\")} />\n      <span className=\"pointer-events-none absolute inset-x-0 bottom-[-1px] h-0.5 origin-center scale-x-0 bg-primary transition-transform duration-(--motion-base) ease-(--motion-ease) peer-focus:scale-x-100 motion-reduce:transition-none\" />\n    </span>\n  )\n}\n\n/* Icon: bastaki ikon, odakta ikon token'a doner. */\nexport function IconInput({ className, size = \"md\", ...props }: Props) {\n  return (\n    <span\n      data-slot=\"styled-input\"\n      className={cn(\n        \"group relative inline-flex w-56 max-w-full items-center gap-2 rounded-lg border border-border pl-3 pr-3 transition-colors focus-within:border-primary\",\n        height[size],\n        className\n      )}\n    >\n      <Search className=\"size-4 shrink-0 text-muted-foreground transition-colors group-focus-within:text-primary\" />\n      <input {...props} className={cn(fieldBase, \"h-full\")} />\n    </span>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/inputs-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "inputs"
  ],
  "type": "registry:component"
}