{
  "name": "input-group",
  "type": "registry:ui",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "input",
    "textarea"
  ],
  "files": [
    {
      "path": "ui/input-group/InputGroup.vue",
      "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 border-input dark:bg-input/30 relative flex w-full items-center rounded-md border outline-none',\n      'h-9 min-w-0 has-[>textarea]:h-auto',\n\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\n      // Focus state.\n      'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1',\n\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "ui/input-group/InputGroupAddon.vue",
      "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",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "ui/input-group/InputGroupButton.vue",
      "content": "<script setup lang=\"ts\">\nimport type { InputGroupButtonProps } from \".\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/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    :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",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "ui/input-group/InputGroupInput.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Input } from \"@/registry/new-york/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      'flex-1 rounded-none border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent ring-offset-transparent dark:bg-transparent',\n      props.class,\n    )\"\n  />\n</template>\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "ui/input-group/InputGroupText.vue",
      "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      'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=\\'size-\\'])]:size-4',\n      props.class,\n    )\"\n  >\n    <slot />\n  </span>\n</template>\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "ui/input-group/InputGroupTextarea.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Textarea } from \"@/registry/new-york/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      'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 focus-visible:ring-transparent ring-offset-transparent dark:bg-transparent',\n      props.class,\n    )\"\n  />\n</template>\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "ui/input-group/index.ts",
      "content": "import type { VariantProps } from \"class-variance-authority\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/registry/new-york/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  \"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\nexport type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>\n\nexport const inputGroupButtonVariants = cva(\n  \"text-sm shadow-none flex gap-2 items-center\",\n  {\n    variants: {\n      size: {\n        \"xs\": \"h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2\",\n        \"sm\": \"h-8 px-2.5 gap-1.5 rounded-md 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\nexport type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>\n\nexport interface InputGroupButtonProps {\n  variant?: ButtonVariants[\"variant\"]\n  size?: InputGroupButtonVariants[\"size\"]\n  class?: HTMLAttributes[\"class\"]\n}\n",
      "type": "registry:ui",
      "target": ""
    }
  ]
}