{
  "name": "input-group",
  "type": "registry:ui",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "button",
    "input",
    "textarea"
  ],
  "files": [
    {
      "path": "ui/input-group/InputGroup.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <div\n    data-slot=\"input-group\"\n    role=\"group\"\n    :class=\"cn(\n      'group/input-group cn-input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
    },
    {
      "path": "ui/input-group/InputGroupAddon.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { InputGroupVariants } from \".\"\nimport { cn } from \"@/lib/utils\"\nimport { inputGroupAddonVariants } from \".\"\n\nconst props = withDefaults(defineProps<{\n  align?: InputGroupVariants[\"align\"]\n  class?: HTMLAttributes[\"class\"]\n}>(), {\n  align: \"inline-start\",\n})\n\nfunction handleInputGroupAddonClick(e: MouseEvent) {\n  const currentTarget = e.currentTarget as HTMLElement | null\n  const target = e.target as HTMLElement | null\n  if (target && target.closest(\"button\")) {\n    return\n  }\n  if (currentTarget && currentTarget?.parentElement) {\n    currentTarget.parentElement?.querySelector(\"input\")?.focus()\n  }\n}\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    data-slot=\"input-group-addon\"\n    :data-align=\"props.align\"\n    :class=\"cn(inputGroupAddonVariants({ align: props.align }), props.class)\"\n    @click=\"handleInputGroupAddonClick\"\n  >\n    <slot />\n  </div>\n</template>\n"
    },
    {
      "path": "ui/input-group/InputGroupButton.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { InputGroupButtonProps } from \".\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { inputGroupButtonVariants } from \".\"\n\nconst props = withDefaults(defineProps<InputGroupButtonProps>(), {\n  size: \"xs\",\n  variant: \"ghost\",\n})\n</script>\n\n<template>\n  <Button\n    type=\"button\"\n    :data-size=\"props.size\"\n    :variant=\"props.variant\"\n    :class=\"cn(inputGroupButtonVariants({ size: props.size }), props.class)\"\n  >\n    <slot />\n  </Button>\n</template>\n"
    },
    {
      "path": "ui/input-group/InputGroupInput.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Input } from \"@/components/ui/input\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <Input\n    data-slot=\"input-group-control\"\n    :class=\"cn(\n      'cn-input-group-input flex-1',\n      props.class,\n    )\"\n  />\n</template>\n"
    },
    {
      "path": "ui/input-group/InputGroupText.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <span\n    :class=\"cn(\n      'cn-input-group-text flex items-center [&_svg]:pointer-events-none',\n      props.class,\n    )\"\n  >\n    <slot />\n  </span>\n</template>\n"
    },
    {
      "path": "ui/input-group/InputGroupTextarea.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <Textarea\n    data-slot=\"input-group-control\"\n    :class=\"cn(\n      'cn-input-group-textarea flex-1 resize-none',\n      props.class,\n    )\"\n  />\n</template>\n"
    },
    {
      "path": "ui/input-group/index.ts",
      "type": "registry:ui",
      "content": "import type { VariantProps } from \"class-variance-authority\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/components/ui/button\"\nimport { cva } from \"class-variance-authority\"\n\nexport { default as InputGroup } from \"./InputGroup.vue\"\nexport { default as InputGroupAddon } from \"./InputGroupAddon.vue\"\nexport { default as InputGroupButton } from \"./InputGroupButton.vue\"\nexport { default as InputGroupInput } from \"./InputGroupInput.vue\"\nexport { default as InputGroupText } from \"./InputGroupText.vue\"\nexport { default as InputGroupTextarea } from \"./InputGroupTextarea.vue\"\n\nexport const inputGroupAddonVariants = cva(\n  \"cn-input-group-addon flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"cn-input-group-addon-align-inline-start order-first\",\n        \"inline-end\": \"cn-input-group-addon-align-inline-end order-last\",\n        \"block-start\": \"cn-input-group-addon-align-block-start order-first w-full justify-start\",\n        \"block-end\": \"cn-input-group-addon-align-block-end order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n)\n\nexport type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>\n\nexport const inputGroupButtonVariants = cva(\n  \"cn-input-group-button flex items-center shadow-none\",\n  {\n    variants: {\n      size: {\n        \"xs\": \"cn-input-group-button-size-xs\",\n        \"sm\": \"cn-input-group-button-size-sm\",\n        \"icon-xs\": \"cn-input-group-button-size-icon-xs\",\n        \"icon-sm\": \"cn-input-group-button-size-icon-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  },\n)\n\nexport type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>\n\nexport interface InputGroupButtonProps {\n  variant?: ButtonVariants[\"variant\"]\n  size?: InputGroupButtonVariants[\"size\"]\n  class?: HTMLAttributes[\"class\"]\n}\n"
    }
  ]
}