{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-group",
  "title": "Input Group",
  "description": "Groups an input with leading or trailing addons.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/input-group/input-group.tsx",
      "content": "import * as React from \"react\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@vllnt/ui\";\n\nconst inputGroupVariants = cva(\n  \"flex w-full items-center overflow-hidden rounded-md border border-input bg-background text-sm ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50\",\n);\n\nconst inputGroupAddonVariants = cva(\n  \"flex shrink-0 items-center text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    defaultVariants: {\n      align: \"leading\",\n    },\n    variants: {\n      align: {\n        leading: \"pl-3\",\n        trailing: \"pr-3\",\n      },\n    },\n  },\n);\n\n/** Container that groups an input with leading or trailing addons. */\nexport type InputGroupProps = React.ComponentPropsWithoutRef<\"div\">;\n\nconst InputGroup = ({\n  className,\n  ref,\n  ...props\n}: InputGroupProps & { ref?: React.Ref<HTMLDivElement> }) => (\n  <div\n    className={cn(inputGroupVariants(), className)}\n    data-slot=\"input-group\"\n    ref={ref}\n    role=\"group\"\n    {...props}\n  />\n);\nInputGroup.displayName = \"InputGroup\";\n\n/** Leading or trailing addon (icon, text, or action) inside an InputGroup. */\nexport type InputGroupAddonProps = React.ComponentPropsWithoutRef<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>;\n\nconst InputGroupAddon = ({\n  align,\n  className,\n  ref,\n  ...props\n}: InputGroupAddonProps & { ref?: React.Ref<HTMLDivElement> }) => (\n  <div\n    className={cn(inputGroupAddonVariants({ align }), className)}\n    data-slot=\"input-group-addon\"\n    ref={ref}\n    {...props}\n  />\n);\nInputGroupAddon.displayName = \"InputGroupAddon\";\n\n/** Borderless input that fills the remaining space inside an InputGroup. */\nexport type InputGroupInputProps = React.ComponentPropsWithoutRef<\"input\">;\n\nconst InputGroupInput = ({\n  className,\n  ref,\n  ...props\n}: InputGroupInputProps & { ref?: React.Ref<HTMLInputElement> }) => (\n  <input\n    className={cn(\n      \"h-10 w-full flex-1 bg-transparent px-3 py-2 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed\",\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n);\nInputGroupInput.displayName = \"InputGroupInput\";\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  inputGroupAddonVariants,\n  InputGroupInput,\n  inputGroupVariants,\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}