{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-group",
  "title": "Input Group",
  "description": "An input with icons, text or buttons attached on either side.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@corsair-ui/utils",
    "@corsair-ui/input"
  ],
  "files": [
    {
      "path": "registry/default/ui/input-group.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\n\n/**\n * An input with icons, text or buttons attached. The group draws the border\n * and the focus ring; the input inside is borderless.\n *\n * @example\n * <InputGroup>\n *   <InputGroupAddon><SearchIcon /></InputGroupAddon>\n *   <InputGroupInput placeholder=\"Search\" aria-label=\"Search\" />\n * </InputGroup>\n */\nfunction InputGroup({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group\"\n      className={cn(\n        \"border-input bg-field relative flex h-9 w-full min-w-0 items-center rounded-md border\",\n        \"transition-[color,border-color,box-shadow] outline-none motion-reduce:transition-none\",\n        \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]\",\n        \"has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20\",\n        \"has-[[data-slot=input-group-control]:disabled]:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground flex h-full shrink-0 items-center gap-2 text-sm select-none [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first pl-3\",\n        \"inline-end\": \"order-last pr-3\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n);\n\n/** Icons, text or a small button on either side of the input. Order in the markup does not matter. */\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupText({ className, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"input-group-text\"\n      className={cn(\"text-muted-foreground flex items-center gap-2 text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction InputGroupInput({ className, ...props }: ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"h-full flex-1 rounded-none border-0 bg-transparent\",\n        \"focus-visible:ring-0 disabled:opacity-100 aria-[invalid=true]:ring-0\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}