{"$schema":"https://ui.logic2b.com/schema/registry-item.json","name":"input-group","type":"registry:ui","description":"Wraps an input or textarea with addons (icons, text, buttons) aligned to either edge, sharing one bordered container. Use for search boxes with an icon, inputs with a unit suffix, or inline actions. Parts: InputGroup (root), InputGroupAddon (align inline-start | inline-end | block-start | block-end), InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea.","dependencies":["class-variance-authority"],"registryDependencies":["utils","button"],"files":[{"path":"ui/input-group.tsx","type":"registry:ui","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group\"\n      className={cn(\n        \"group/input-group border-input dark:bg-input/30 relative flex h-9 w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none\",\n        \"has-[>textarea]:h-auto\",\n        \"focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]\",\n        \"has-[[data-slot=input-group-control][aria-invalid=true]]:ring-destructive/20 has-[[data-slot=input-group-control][aria-invalid=true]]:border-destructive dark:has-[[data-slot=input-group-control][aria-invalid=true]]:ring-destructive/40\",\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2 has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n        \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\":\n          \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(event) => {\n        if ((event.target as HTMLElement).closest(\"button\")) return\n        event.currentTarget.parentElement\n          ?.querySelector(\"input\")\n          ?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5\",\n        \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"input-group-text\"\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n"}],"categories":["form"],"accessibility":{"support":"consumer","pattern":"composite input","keyboard":[],"aria":["The inner native input/textarea keeps its semantics; decorative addons can be hidden from assistive technology."],"consumer":["Label the inner control and give addon buttons accessible names."]},"api":{"source":"src/ui/input-group.tsx","exports":[{"name":"InputGroup","kind":"component","propsType":"React.ComponentProps<\"div\">"},{"name":"InputGroupAddon","kind":"component","propsType":"React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>","props":[{"name":"align","type":"null | \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\"","required":false,"default":"\"inline-start\""}]},{"name":"InputGroupButton","kind":"component","propsType":"Omit<React.ComponentProps<typeof Button>, \"size\"> & VariantProps<typeof inputGroupButtonVariants>","props":[{"name":"type","type":"\"button\" | \"submit\" | \"reset\"","required":false,"default":"\"button\""},{"name":"variant","type":"null | \"link\" | \"default\" | \"destructive\" | \"secondary\" | \"outline\" | \"ghost\"","required":false,"default":"\"ghost\""},{"name":"size","type":"null | \"sm\" | \"xs\" | \"icon-xs\" | \"icon-sm\"","required":false,"default":"\"xs\""}]},{"name":"InputGroupText","kind":"component","propsType":"React.ComponentProps<\"span\">"},{"name":"InputGroupInput","kind":"component","propsType":"React.ComponentProps<\"input\">"},{"name":"InputGroupTextarea","kind":"component","propsType":"React.ComponentProps<\"textarea\">"}]}}