{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-group",
  "title": "Input Group",
  "description": "Groups input fields with addons, buttons, and text.",
  "dependencies": [
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/button.json",
    "https://optics.agusmayol.com.ar/r/input.json",
    "https://optics.agusmayol.com.ar/r/textarea.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/input-group.jsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button, buttonVariants } from \"@/registry/optics/button\";\nimport { Input } from \"@/registry/optics/input\";\nimport { Textarea } from \"@/registry/optics/textarea\";\n\nfunction InputGroup({ className = \"\", variant, ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"input-group\"\n\t\t\trole=\"group\"\n\t\t\tclassName={cn(\n\t\t\t\t\"border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-7 rounded-md border transition-colors has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-[2px] has-[[data-slot][aria-invalid=true]]:ring-[2px] has-[textarea]:rounded-md has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n\t\t\t\tvariant &&\n\t\t\t\t\tbuttonVariants({\n\t\t\t\t\t\tvariant: variant,\n\t\t\t\t\t\tclassName: \"cursor-text\",\n\t\t\t\t\t\tanimation: \"colors\",\n\t\t\t\t\t}),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst inputGroupAddonVariants = cva(\n\t\"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-1 py-2 text-xs/relaxed font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5 flex cursor-text items-center justify-center select-none\",\n\t{\n\t\tvariants: {\n\t\t\talign: {\n\t\t\t\t\"inline-start\":\n\t\t\t\t\t\"pl-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem] order-first\",\n\t\t\t\t\"inline-end\":\n\t\t\t\t\t\"pr-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem] order-last\",\n\t\t\t\t\"block-start\":\n\t\t\t\t\t\"px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n\t\t\t\t\"block-end\":\n\t\t\t\t\t\"px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\talign: \"inline-start\",\n\t\t},\n\t},\n);\n\nfunction InputGroupAddon({ className = \"\", align = \"inline-start\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\tdata-slot=\"input-group-addon\"\n\t\t\tdata-align={align}\n\t\t\tclassName={cn(inputGroupAddonVariants({ align }), className)}\n\t\t\tonClick={(e) => {\n\t\t\t\tif (e.target.closest(\"button\")) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\te.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst inputGroupButtonVariants = cva(\n\t\"gap-2 rounded-md text-xs/relaxed shadow-none flex items-center\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: \"h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3\",\n\t\t\t\tsm: \"\",\n\t\t\t\t\"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n\t\t\t\t\"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"xs\",\n\t\t},\n\t},\n);\n\nfunction InputGroupButton({\n\tclassName = \"\",\n\ttype = \"button\",\n\tvariant = \"ghost\",\n\tsize = \"xs\",\n\t...props\n}) {\n\treturn (\n\t\t<Button\n\t\t\ttype={type}\n\t\t\tdata-size={size}\n\t\t\tvariant={variant}\n\t\t\tclassName={cn(inputGroupButtonVariants({ size }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction InputGroupText({ className = \"\", ...props }) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"text-muted-foreground gap-2 text-xs/relaxed [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction InputGroupInput({ className = \"\", ...props }) {\n\treturn (\n\t\t<Input\n\t\t\tdata-slot=\"input-group-control\"\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction InputGroupTextarea({ className = \"\", ...props }) {\n\treturn (\n\t\t<Textarea\n\t\t\tdata-slot=\"input-group-control\"\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nInputGroup.displayName = \"InputGroup\";\nInputGroupAddon.displayName = \"InputGroupAddon\";\nInputGroupButton.displayName = \"InputGroupButton\";\nInputGroupText.displayName = \"InputGroupText\";\nInputGroupInput.displayName = \"InputGroupInput\";\nInputGroupTextarea.displayName = \"InputGroupTextarea\";\n\nexport {\n\tInputGroup,\n\tInputGroupAddon,\n\tInputGroupButton,\n\tInputGroupText,\n\tInputGroupInput,\n\tInputGroupTextarea,\n};\n",
      "type": "registry:component",
      "target": "components/optics/input-group.jsx"
    }
  ],
  "type": "registry:component"
}