{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-group-styled",
  "title": "Group-styled input",
  "description": "Styled input: the Group-styled set. 5 decorative input variations (PrefixGroup, SuffixGroup, IconGroup, ButtonGroup, SegmentGroup) 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/input-group-styled.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { AtSign, Copy, Eye, Search } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Input group family: a single-framed unit with addons leaning on TEXT, an ICON or a BUTTON. The root wrapper takes a primary border plus ring through focus-within. Colour comes ONLY from tokens. Size = height (aligned with the base scale). Each wraps a real <input> and passes every native prop through; an Omit is required because of the native `size` clash. The transform transitions are guarded with motion-reduce. */\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 rootBase =\n  \"group inline-flex w-64 max-w-full items-center overflow-hidden rounded-lg border border-field-border bg-transparent transition-colors duration-(--motion-base) focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring/50\"\n\nconst fieldBase =\n  \"h-full w-full min-w-0 bg-transparent px-3 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\"\n\nconst addonBase =\n  \"flex h-full shrink-0 select-none items-center gap-1.5 bg-surface-2 px-3 text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\ntype Props = Omit<React.ComponentProps<\"input\">, \"size\"> & { size?: StyledSize }\n\n/* Prefix: a token text chip on the left (for example \"https://\"). */\nexport function PrefixGroup({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div data-slot=\"styled-input-group\" className={cn(rootBase, height[size], className)}>\n      <span className={cn(addonBase, \"border-r border-field-border\")}>https://</span>\n      <input {...props} className={cn(fieldBase, \"pl-2\")} />\n    </div>\n  )\n}\n\n/* Suffix: a token text chip on the right (for example \".com\"). */\nexport function SuffixGroup({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div data-slot=\"styled-input-group\" className={cn(rootBase, height[size], className)}>\n      <input {...props} className={cn(fieldBase, \"pr-2\")} />\n      <span className={cn(addonBase, \"border-l border-field-border\")}>.com</span>\n    </div>\n  )\n}\n\n/* Icon: a token icon leading and trailing inside the field; turns primary on focus. */\nexport function IconGroup({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div data-slot=\"styled-input-group\" className={cn(rootBase, height[size], \"px-3\", className)}>\n      <AtSign className=\"size-4 shrink-0 text-muted-foreground transition-colors group-focus-within:text-primary\" />\n      <input {...props} className={cn(fieldBase, \"px-2\")} />\n      <Search className=\"size-4 shrink-0 text-muted-foreground transition-colors group-focus-within:text-primary\" />\n    </div>\n  )\n}\n\n/* Button: saga yaslanmis token aksiyon butonu (ornek Copy). */\nexport function ButtonGroup({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div data-slot=\"styled-input-group\" className={cn(rootBase, height[size], className)}>\n      <input {...props} className={fieldBase} />\n      <button\n        type=\"button\"\n        className=\"flex h-full shrink-0 select-none items-center gap-1.5 border-l border-field-border bg-secondary px-3 text-sm font-medium text-secondary-foreground outline-none transition-colors hover:bg-surface-3 focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n      >\n        <Copy />\n        <span>Copy</span>\n      </button>\n    </div>\n  )\n}\n\n/* Segment: solda kucuk token select segmenti + alan. */\nexport function SegmentGroup({ className, size = \"md\", ...props }: Props) {\n  return (\n    <div data-slot=\"styled-input-group\" className={cn(rootBase, height[size], className)}>\n      <select\n        aria-label=\"Protocol\"\n        className=\"h-full shrink-0 select-none border-r border-field-border bg-surface-2 pl-3 pr-2 text-muted-foreground outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n      >\n        <option value=\"https\">https://</option>\n        <option value=\"http\">http://</option>\n      </select>\n      <input {...props} className={cn(fieldBase, \"pl-2\")} />\n      <Eye className=\"mr-3 size-4 shrink-0 text-muted-foreground\" />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/input-group-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "input"
  ],
  "type": "registry:component"
}