{
  "name": "button-group",
  "title": "Button Group",
  "description": "Kura Button Group component source.",
  "type": "ui",
  "add": "when-added",
  "files": [
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn } from '$lib/utils.js';\n  import type { ComponentProps } from 'svelte';\n  import { Separator } from '$lib/components/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-input 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",
      "path": "button-group/button-group-separator.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/components/ui/separator/index.js",
          "item": "separator",
          "file": {
            "type": "ui",
            "path": "separator/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  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-border group-has-[>[data-variant=outline]]/button-group:border-border gap-2 border bg-muted px-2.5 text-xs font-medium text-muted-foreground [&_svg:not([class*='size-'])]:size-4 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",
      "path": "button-group/button-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\" module>\n  import { tv, type VariantProps } from 'tailwind-variants';\n\n  export const buttonGroupVariants = tv({\n    base: \"has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-2.5 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 rounded-control flex w-fit items-stretch [&>*]:rounded-none [&>*]: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          '[&>:first-child]:rounded-s-control [&>:last-child]:rounded-e-control [&>[data-slot]~[data-slot]]:border-l-0',\n        vertical:\n          'flex-col [&>:first-child]:rounded-t-control [&>:last-child]:rounded-b-control [&>[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 '$lib/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",
      "path": "button-group/button-group.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "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",
      "path": "button-group/index.ts",
      "_imports_": [
        {
          "import": "./button-group.svelte",
          "item": "button-group",
          "file": {
            "type": "ui",
            "path": "button-group/button-group.svelte"
          },
          "meta": {}
        },
        {
          "import": "./button-group-text.svelte",
          "item": "button-group",
          "file": {
            "type": "ui",
            "path": "button-group/button-group-text.svelte"
          },
          "meta": {}
        },
        {
          "import": "./button-group-separator.svelte",
          "item": "button-group",
          "file": {
            "type": "ui",
            "path": "button-group/button-group-separator.svelte"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    }
  ],
  "registryDependencies": [
    "styles",
    "utils",
    "separator"
  ],
  "dependencies": [
    {
      "ecosystem": "js",
      "name": "tailwind-variants",
      "version": "^3.2.2"
    }
  ],
  "devDependencies": []
}