{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "input-group",
  "title": "Input Group",
  "author": "Matthew Blode",
  "description": "A wrapper that combines an input with addons like icons or buttons.",
  "registryDependencies": ["button", "input", "textarea"],
  "files": [
    {
      "path": "ui/input-group.tsx",
      "content": "\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nconst InputGroup = ({ className, ...props }: React.ComponentProps<\"fieldset\">) => (\n  <fieldset\n    className={cn(\n      \"group/input-group relative flex h-[var(--field-height)] w-full min-w-0 items-center rounded-[var(--field-radius)] border border-input outline-none transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-start]]:h-auto has-[>textarea]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\n      className,\n    )}\n    data-slot=\"input-group\"\n    {...props}\n  />\n);\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 font-medium text-muted-foreground text-sm group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n    variants: {\n      align: {\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"inline-end\":\n          \"order-last shrink-0 whitespace-nowrap pr-[var(--field-padding-x)] has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n        \"inline-start\":\n          \"order-first shrink-0 whitespace-nowrap pl-[var(--field-padding-x)] has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n      },\n    },\n  },\n);\n\nconst InputGroupAddon = ({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"fieldset\"> & VariantProps<typeof inputGroupAddonVariants>) => (\n  <fieldset\n    className={cn(inputGroupAddonVariants({ align }), className)}\n    data-align={align}\n    data-slot=\"input-group-addon\"\n    {...props}\n  />\n);\n\nconst inputGroupButtonVariants = cva(\"flex items-center gap-2 text-sm shadow-none\", {\n  defaultVariants: {\n    size: \"xs\",\n  },\n  variants: {\n    size: {\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n      sm: \"\",\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n    },\n  },\n});\n\nconst InputGroupButton = ({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\";\n  }) => (\n  <Button\n    className={cn(inputGroupButtonVariants({ size }), className)}\n    data-size={size}\n    type={type}\n    variant={variant}\n    {...props}\n  />\n);\n\nconst InputGroupText = ({ className, ...props }: React.ComponentProps<\"span\">) => (\n  <span\n    className={cn(\n      \"flex items-center gap-2 text-muted-foreground text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nconst InputGroupInput = ({ className, ...props }: React.ComponentProps<\"input\">) => (\n  <Input\n    className={cn(\n      \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus:border-0 focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 disabled:bg-transparent group-has-[>[data-align=block-end]]/input-group:pt-3 group-has-[>[data-align=inline-end]]/input-group:pr-1.5 group-has-[>[data-align=block-start]]/input-group:pb-3 group-has-[>[data-align=inline-start]]/input-group:pl-1.5 aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n      className,\n    )}\n    data-slot=\"input-group-control\"\n    {...props}\n  />\n);\n\nconst InputGroupTextarea = ({ className, ...props }: React.ComponentProps<\"textarea\">) => (\n  <Textarea\n    className={cn(\n      \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus:border-0 focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 disabled:bg-transparent group-has-[>[data-align=block-end]]/input-group:pt-3 group-has-[>[data-align=block-start]]/input-group:pb-3 aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n      className,\n    )}\n    data-slot=\"input-group-control\"\n    {...props}\n  />\n);\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n};\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}