{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-group",
  "type": "registry:ui",
  "registryDependencies": [
    "@gc-solid/button",
    "@gc-solid/input",
    "@gc-solid/textarea"
  ],
  "files": [
    {
      "path": "ui/input-group.tsx",
      "content": "import { type Component, type ComponentProps, mergeProps, splitProps } from \"solid-js\"\n\nimport { cva, type VariantProps } from \"class-variance-authority\"\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: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\n        \"group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs outline-none transition-[color,box-shadow] dark:bg-input/30\",\n        \"h-9 min-w-0 has-[>textarea]:h-auto\",\n        // Variants based on alignment.\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n        \"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        // Focus state.\n        \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50\",\n        // Error state.\n        \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\n        local.class\n      )}\n      data-slot=\"input-group\"\n      role=\"group\"\n      {...others}\n    />\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    variants: {\n      align: {\n        \"inline-start\": \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\": \"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 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3\"\n      }\n    },\n    defaultVariants: {\n      align: \"inline-start\"\n    }\n  }\n)\n\ntype InputGroupAddonProps = ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>\n\nconst InputGroupAddon: Component<InputGroupAddonProps> = (rawProps) => {\n  const props = mergeProps({ align: \"inline-start\" } as const, rawProps)\n  const [local, others] = splitProps(props, [\"class\", \"align\"])\n  return (\n    <div\n      class={cn(inputGroupAddonVariants({ align: local.align }), local.class)}\n      data-align={local.align}\n      data-slot=\"input-group-addon\"\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      role=\"group\"\n      {...others}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\"flex items-center gap-2 text-sm shadow-none\", {\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\ntype InputGroupButtonProps = Omit<ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>\n\nconst InputGroupButton: Component<InputGroupButtonProps> = (rawProps) => {\n  const props = mergeProps({ type: \"button\", variant: \"ghost\", size: \"xs\" } as const, rawProps)\n  const [local, others] = splitProps(props, [\"class\", \"type\", \"variant\", \"size\"])\n  return (\n    <Button\n      class={cn(inputGroupButtonVariants({ size: local.size }), local.class)}\n      data-size={local.size}\n      type={local.type}\n      variant={local.variant}\n      {...others}\n    />\n  )\n}\n\nconst InputGroupText: Component<ComponentProps<\"span\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <span\n      class={cn(\n        \"flex items-center gap-2 text-muted-foreground text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\nconst InputGroupInput: Component<ComponentProps<\"input\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <Input\n      class={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent\",\n        local.class\n      )}\n      data-slot=\"input-group-control\"\n      {...others}\n    />\n  )\n}\n\nconst InputGroupTextarea: Component<ComponentProps<\"textarea\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <Textarea\n      class={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent\",\n        local.class\n      )}\n      data-slot=\"input-group-control\"\n      {...others}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea\n}\n",
      "type": "registry:ui"
    }
  ]
}