{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "input-group",
	"title": "Input Group",
	"type": "registry:ui",
	"description": "Kura Input Group component source.",
	"devDependencies": [
		"tailwind-variants@^3.2.2"
	],
	"registryDependencies": [
		"button",
		"input",
		"textarea",
		"utils"
	],
	"files": [
		{
			"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",
			"type": "registry:file",
			"target": "input-group/index.ts"
		},
		{
			"content": "<script lang=\"ts\" module>\n  import { tv, type VariantProps } from 'tailwind-variants';\n  export const inputGroupAddonVariants = tv({\n    base: \"text-zinc-500 **:data-[slot=kbd]:bg-background h-auto gap-2 py-2 font-mono text-xs font-semibold tracking-widest uppercase group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **: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-zinc-800 px-3',\n        'inline-end':\n          'cn-input-group-addon-align-inline-end order-last border-l border-zinc-800 px-3',\n        'block-start':\n          'border-b border-zinc-800 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-zinc-800 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 '$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",
			"type": "registry:file",
			"target": "input-group/input-group-addon.svelte"
		},
		{
			"content": "<script lang=\"ts\" module>\n  import { tv, type VariantProps } from 'tailwind-variants';\n\n  const inputGroupButtonVariants = tv({\n    base: 'gap-2 rounded-full font-mono text-xs flex items-center shadow-none',\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 '$UTILS$.js';\n  import type { ComponentProps } from 'svelte';\n  import { Button } from '$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",
			"type": "registry:file",
			"target": "input-group/input-group-button.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { cn } from '$UTILS$.js';\n  import type { ComponentProps } from 'svelte';\n  import { Input } from '$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",
			"type": "registry:file",
			"target": "input-group/input-group-input.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$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 font-mono text-xs font-semibold tracking-widest text-zinc-500 uppercase [&_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",
			"type": "registry:file",
			"target": "input-group/input-group-text.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { cn } from '$UTILS$.js';\n  import { Textarea } from '$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",
			"type": "registry:file",
			"target": "input-group/input-group-textarea.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$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-zinc-800 bg-zinc-900 has-[[data-slot=input-group-control]:focus-visible]:border-zinc-300 has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-zinc-300/25 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:border-destructive/50 h-9 rounded-none 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",
			"type": "registry:file",
			"target": "input-group/input-group.svelte"
		}
	]
}