{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-group",
  "title": "Input Group",
  "description": "Composable input group with addons, buttons and text. Terminal aesthetic.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils",
    "input",
    "theme-catppuccin-mocha",
    "font-jetbrains-mono"
  ],
  "files": [
    {
      "path": "registry/ui/input-group.tsx",
      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\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\"relative flex items-center\",\n\t\t\t\t\"bg-input\",\n\t\t\t\t\"focus-within:ring-1 focus-within:ring-ring\",\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\"flex items-center whitespace-nowrap text-foreground1 [&_svg]:size-4 [&_svg]:shrink-0\",\n\t{\n\t\tvariants: {\n\t\t\talign: {\n\t\t\t\t\"inline-start\": \"order-first pl-3\",\n\t\t\t\t\"inline-end\": \"order-last pr-3\",\n\t\t\t\t\"block-start\": \"order-first w-full justify-center bg-background3 py-1 px-3\",\n\t\t\t\t\"block-end\": \"order-last w-full justify-center bg-background3 py-1 px-3\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { align: \"inline-start\" },\n\t},\n);\n\ninterface InputGroupAddonProps\n\textends React.ComponentProps<\"div\">,\n\t\tVariantProps<typeof inputGroupAddonVariants> {}\n\nfunction InputGroupAddon({\n\tclassName,\n\talign,\n\tchildren,\n\t...props\n}: InputGroupAddonProps) {\n\tconst ref = React.useRef<HTMLDivElement>(null);\n\n\tconst handleClick = () => {\n\t\tconst control = ref.current?.closest(\"[data-slot=input-group]\")?.querySelector(\n\t\t\t\"[data-slot=input-group-control]\",\n\t\t) as HTMLInputElement | HTMLTextAreaElement | null;\n\t\tcontrol?.focus();\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tdata-slot=\"input-group-addon\"\n\t\t\tclassName={cn(inputGroupAddonVariants({ align }), className)}\n\t\t\tonClick={handleClick}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nconst inputGroupButtonVariants = cva(\n\t\"inline-flex items-center justify-center gap-2 whitespace-nowrap select-none font-mono outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:text-foreground2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: \"px-2 py-0.5 text-xs\",\n\t\t\t\t\"icon-xs\": \"size-5\",\n\t\t\t\tsm: \"px-2 py-1 text-sm\",\n\t\t\t\t\"icon-sm\": \"size-6\",\n\t\t\t},\n\t\t\tvariant: {\n\t\t\t\tdefault:\n\t\t\t\t\t\"bg-background3 text-foreground active:brightness-110\",\n\t\t\t\tghost:\n\t\t\t\t\t\"bg-transparent text-foreground1 active:bg-background3 active:text-foreground\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { size: \"xs\", variant: \"ghost\" },\n\t},\n);\n\ninterface InputGroupButtonProps\n\textends React.ComponentProps<\"button\">,\n\t\tVariantProps<typeof inputGroupButtonVariants> {}\n\nfunction InputGroupButton({\n\tclassName,\n\tsize,\n\tvariant,\n\t...props\n}: InputGroupButtonProps) {\n\treturn (\n\t\t<button\n\t\t\tdata-slot=\"input-group-button\"\n\t\t\tclassName={cn(\n\t\t\t\tinputGroupButtonVariants({ size, variant }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"input-group-text\"\n\t\t\tclassName={cn(\"text-sm text-foreground1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction InputGroupInput({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"input\">) {\n\treturn (\n\t\t<input\n\t\t\tdata-slot=\"input-group-control\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-9 min-w-0 flex-1 bg-transparent text-sm font-mono text-foreground\",\n\t\t\t\t\"placeholder:text-foreground2\",\n\t\t\t\t\"outline-none focus-visible:ring-0 border-0\",\n\t\t\t\t\"disabled:cursor-not-allowed disabled:text-foreground2\",\n\t\t\t\t\"aria-invalid:text-destructive\",\n\t\t\t\t\"px-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction InputGroupTextarea({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"textarea\">) {\n\treturn (\n\t\t<textarea\n\t\t\tdata-slot=\"input-group-control\"\n\t\t\tclassName={cn(\n\t\t\t\t\"min-h-16 w-full flex-1 bg-transparent text-sm font-mono text-foreground\",\n\t\t\t\t\"placeholder:text-foreground2\",\n\t\t\t\t\"outline-none focus-visible:ring-0 border-0\",\n\t\t\t\t\"disabled:cursor-not-allowed disabled:text-foreground2\",\n\t\t\t\t\"aria-invalid:text-destructive\",\n\t\t\t\t\"resize-none field-sizing-content px-3 py-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tInputGroup,\n\tInputGroupAddon,\n\tInputGroupButton,\n\tInputGroupText,\n\tInputGroupInput,\n\tInputGroupTextarea,\n\tinputGroupAddonVariants,\n\tinputGroupButtonVariants,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}