{
  "name": "input-group",
  "title": "Input Group",
  "description": "Kura Input Group component source.",
  "type": "ui",
  "add": "when-added",
  "files": [
    {
      "type": "ui",
      "role": "file",
      "content": "import Root from './input-group.svelte';\nimport Addon from './input-group-addon.svelte';\nimport Button from './input-group-button.svelte';\nimport Input from './input-group-input.svelte';\nimport Text from './input-group-text.svelte';\nimport Textarea from './input-group-textarea.svelte';\n\nexport {\n  Root,\n  Addon,\n  Button,\n  Input,\n  Text,\n  Textarea,\n  //\n  Root as InputGroup,\n  Addon as InputGroupAddon,\n  Button as InputGroupButton,\n  Input as InputGroupInput,\n  Text as InputGroupText,\n  Textarea as InputGroupTextarea\n};\n",
      "path": "input-group/index.ts",
      "_imports_": [
        {
          "import": "./input-group.svelte",
          "item": "input-group",
          "file": {
            "type": "ui",
            "path": "input-group/input-group.svelte"
          },
          "meta": {}
        },
        {
          "import": "./input-group-addon.svelte",
          "item": "input-group",
          "file": {
            "type": "ui",
            "path": "input-group/input-group-addon.svelte"
          },
          "meta": {}
        },
        {
          "import": "./input-group-button.svelte",
          "item": "input-group",
          "file": {
            "type": "ui",
            "path": "input-group/input-group-button.svelte"
          },
          "meta": {}
        },
        {
          "import": "./input-group-input.svelte",
          "item": "input-group",
          "file": {
            "type": "ui",
            "path": "input-group/input-group-input.svelte"
          },
          "meta": {}
        },
        {
          "import": "./input-group-text.svelte",
          "item": "input-group",
          "file": {
            "type": "ui",
            "path": "input-group/input-group-text.svelte"
          },
          "meta": {}
        },
        {
          "import": "./input-group-textarea.svelte",
          "item": "input-group",
          "file": {
            "type": "ui",
            "path": "input-group/input-group-textarea.svelte"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\" module>\n  import { tv, type VariantProps } from 'tailwind-variants';\n  export const inputGroupAddonVariants = tv({\n    base: \"text-muted-foreground/50 **:data-[slot=kbd]:bg-background h-auto gap-2 py-2  text-xs font-medium   group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-control **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-3.5 flex cursor-text items-center justify-center select-none\",\n    variants: {\n      align: {\n        'inline-start':\n          'cn-input-group-addon-align-inline-start order-first border-r border-border px-3',\n        'inline-end':\n          'cn-input-group-addon-align-inline-end order-last border-l border-border px-3',\n        'block-start':\n          'border-b border-border px-3 pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5 order-first w-full justify-start',\n        'block-end':\n          'border-t border-border px-3 pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5 order-last w-full justify-start'\n      }\n    },\n    defaultVariants: {\n      align: 'inline-start'\n    }\n  });\n\n  export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];\n</script>\n\n<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    align = 'inline-start',\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {\n    align?: InputGroupAddonAlign;\n  } = $props();\n</script>\n\n<div\n  bind:this={ref}\n  role=\"group\"\n  data-slot=\"input-group-addon\"\n  data-align={align}\n  class={cn(inputGroupAddonVariants({ align }), className)}\n  onclick={(e) => {\n    if ((e.target as HTMLElement).closest('button')) {\n      return;\n    }\n    e.currentTarget.parentElement?.querySelector('input')?.focus();\n  }}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "input-group/input-group-addon.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\" module>\n  import { tv, type VariantProps } from 'tailwind-variants';\n\n  const inputGroupButtonVariants = tv({\n    base: 'gap-2 rounded-none  text-xs flex items-center ',\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: 'cn-input-group-button-size-sm',\n        'icon-xs': 'size-6 p-0 text-xs 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  export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils.js';\n  import type { ComponentProps } from 'svelte';\n  import { Button } from '$lib/components/ui/button/index.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    type = 'button',\n    variant = 'ghost',\n    size = 'xs',\n    ...restProps\n  }: Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {\n    size?: InputGroupButtonSize;\n  } = $props();\n</script>\n\n<Button\n  bind:ref\n  {type}\n  data-size={size}\n  {variant}\n  class={cn(inputGroupButtonVariants({ size }), className)}\n  {...restProps}\n>\n  {@render children?.()}\n</Button>\n",
      "path": "input-group/input-group-button.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/components/ui/button/index.js",
          "item": "button",
          "file": {
            "type": "ui",
            "path": "button/index.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn } from '$lib/utils.js';\n  import type { ComponentProps } from 'svelte';\n  import { Input } from '$lib/components/ui/input/index.js';\n\n  let {\n    ref = $bindable(null),\n    value = $bindable(),\n    class: className,\n    ...props\n  }: ComponentProps<typeof Input> = $props();\n</script>\n\n<Input\n  bind:ref\n  data-slot=\"input-group-control\"\n  class={cn(\n    'border-0 bg-transparent px-3 ring-0 group-has-[>[data-align=inline-end]]/input-group:pr-2 group-has-[>[data-align=inline-start]]/input-group:pl-2 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1',\n    className\n  )}\n  bind:value\n  {...props}\n/>\n",
      "path": "input-group/input-group-input.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/components/ui/input/index.js",
          "item": "input",
          "file": {
            "type": "ui",
            "path": "input/index.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();\n</script>\n\n<span\n  bind:this={ref}\n  data-slot=\"input-group-text\"\n  class={cn(\n    \"gap-2  text-xs font-medium  text-muted-foreground/50  [&_svg:not([class*='size-'])]:size-3.5 flex items-center [&_svg]:pointer-events-none\",\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</span>\n",
      "path": "input-group/input-group-text.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn } from '$lib/utils.js';\n  import { Textarea } from '$lib/components/ui/textarea/index.js';\n  import type { ComponentProps } from 'svelte';\n\n  let {\n    ref = $bindable(null),\n    value = $bindable(),\n    class: className,\n    ...props\n  }: ComponentProps<typeof Textarea> = $props();\n</script>\n\n<Textarea\n  bind:ref\n  data-slot=\"input-group-control\"\n  class={cn(\n    'border-0 bg-transparent px-3 py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none',\n    className\n  )}\n  bind:value\n  {...props}\n/>\n",
      "path": "input-group/input-group-textarea.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/components/ui/textarea/index.js",
          "item": "textarea",
          "file": {
            "type": "ui",
            "path": "textarea/index.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...props\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"input-group\"\n  role=\"group\"\n  class={cn(\n    'group/input-group border-border bg-muted has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:border-destructive/50 h-8 rounded-control border transition-[color,border-color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',\n    className\n  )}\n  {...props}\n>\n  {@render children?.()}\n</div>\n",
      "path": "input-group/input-group.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    }
  ],
  "registryDependencies": [
    "styles",
    "utils",
    "button",
    "input",
    "textarea"
  ],
  "dependencies": [
    {
      "ecosystem": "js",
      "name": "tailwind-variants",
      "version": "^3.2.2"
    }
  ],
  "devDependencies": []
}