{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "button-group",
	"title": "Button Group",
	"type": "registry:ui",
	"description": "Kura Button Group component source.",
	"devDependencies": [
		"tailwind-variants@^3.2.2"
	],
	"registryDependencies": [
		"separator",
		"utils"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n  import { cn } from '$UTILS$.js';\n  import type { ComponentProps } from 'svelte';\n  import { Separator } from '$UI$/separator/index.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    orientation = 'vertical',\n    ...restProps\n  }: ComponentProps<typeof Separator> = $props();\n</script>\n\n<Separator\n  bind:ref\n  data-slot=\"button-group-separator\"\n  {orientation}\n  class={cn(\n    'bg-zinc-800 relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto',\n    className\n  )}\n  {...restProps}\n/>\n",
			"type": "registry:file",
			"target": "button-group/button-group-separator.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$UTILS$.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import type { Snippet } from 'svelte';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    child,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {\n    child?: Snippet<[{ props: Record<string, unknown> }]>;\n  } = $props();\n\n  const mergedProps = $derived({\n    ...restProps,\n    class: cn(\n      \"border-zinc-800 group-has-[>[data-variant=outline]]/button-group:border-zinc-800 gap-2 border bg-background px-2.5 font-mono text-xs font-semibold tracking-widest text-zinc-400 uppercase [&_svg:not([class*='size-'])]:size-3.5 flex items-center [&_svg]:pointer-events-none\",\n      className\n    ),\n    'data-slot': 'button-group-text'\n  });\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <div bind:this={ref} {...mergedProps}>\n    {@render mergedProps.children?.()}\n  </div>\n{/if}\n",
			"type": "registry:file",
			"target": "button-group/button-group-text.svelte"
		},
		{
			"content": "<script lang=\"ts\" module>\n  import { tv, type VariantProps } from 'tailwind-variants';\n\n  export const buttonGroupVariants = tv({\n    base: \"has-[>[data-variant=outline]]:[&>input]:border-zinc-800 has-[>[data-variant=outline]]:[&>input:focus-visible]:border-zinc-300 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-zinc-800 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-zinc-300 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-zinc-800 has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-zinc-300 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n    variants: {\n      orientation: {\n        horizontal:\n          '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-full! [&>[data-slot]]:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',\n        vertical:\n          '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-full! flex-col [&>[data-slot]]:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0'\n      }\n    },\n    defaultVariants: {\n      orientation: 'horizontal'\n    }\n  });\n\n  export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>['orientation'];\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    orientation = 'horizontal',\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {\n    orientation?: ButtonGroupOrientation;\n  } = $props();\n</script>\n\n<div\n  bind:this={ref}\n  role=\"group\"\n  data-slot=\"button-group\"\n  data-orientation={orientation}\n  class={cn(buttonGroupVariants({ orientation }), className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
			"type": "registry:file",
			"target": "button-group/button-group.svelte"
		},
		{
			"content": "import Root, { buttonGroupVariants, type ButtonGroupOrientation } from './button-group.svelte';\nimport Text from './button-group-text.svelte';\nimport Separator from './button-group-separator.svelte';\n\nexport {\n  Root,\n  Text,\n  Separator,\n  buttonGroupVariants,\n  type ButtonGroupOrientation,\n  //\n  Root as ButtonGroup,\n  Text as ButtonGroupText,\n  Separator as ButtonGroupSeparator\n};\n",
			"type": "registry:file",
			"target": "button-group/index.ts"
		}
	]
}