{
  "name": "toggle-group",
  "title": "Toggle Group",
  "description": "Kura Toggle Group component source.",
  "type": "ui",
  "add": "when-added",
  "files": [
    {
      "type": "ui",
      "role": "file",
      "content": "import Root from './toggle-group.svelte';\nimport Item from './toggle-group-item.svelte';\n\nexport {\n  Root,\n  Item,\n  //\n  Root as ToggleGroup,\n  Item as ToggleGroupItem\n};\n",
      "path": "toggle-group/index.ts",
      "_imports_": [
        {
          "import": "./toggle-group.svelte",
          "item": "toggle-group",
          "file": {
            "type": "ui",
            "path": "toggle-group/toggle-group.svelte"
          },
          "meta": {}
        },
        {
          "import": "./toggle-group-item.svelte",
          "item": "toggle-group",
          "file": {
            "type": "ui",
            "path": "toggle-group/toggle-group-item.svelte"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';\n  import { getToggleGroupCtx } from './toggle-group.svelte';\n  import { cn } from '$lib/utils.js';\n  import { type ToggleVariants, toggleVariants } from '$lib/components/ui/toggle/index.js';\n\n  let {\n    ref = $bindable(null),\n    value = $bindable(),\n    class: className,\n    size,\n    variant,\n    ...restProps\n  }: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();\n\n  const ctx = getToggleGroupCtx();\n</script>\n\n<ToggleGroupPrimitive.Item\n  bind:ref\n  data-slot=\"toggle-group-item\"\n  data-variant={ctx.variant || variant}\n  data-size={ctx.size || size}\n  data-spacing={ctx.spacing}\n  class={cn(\n    'data-[state=on]:relative data-[state=on]:z-10 data-[state=on]:border-primary/60 data-[state=on]:bg-primary/15 data-[state=on]:text-foreground group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-6 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-4 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-4 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-full group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-full group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-full group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-full shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:[&:not(:first-child)]:-ml-px group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:[&:not(:first-child)]:-mt-px',\n    toggleVariants({\n      variant: ctx.variant || variant,\n      size: ctx.size || size\n    }),\n    className\n  )}\n  {value}\n  {...restProps}\n/>\n",
      "path": "toggle-group/toggle-group-item.svelte",
      "_imports_": [
        {
          "import": "./toggle-group.svelte",
          "item": "toggle-group",
          "file": {
            "type": "ui",
            "path": "toggle-group/toggle-group.svelte"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/components/ui/toggle/index.js",
          "item": "toggle",
          "file": {
            "type": "ui",
            "path": "toggle/index.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\" module>\n  import { getContext, setContext } from 'svelte';\n  import type { VariantProps } from 'tailwind-variants';\n  import { toggleVariants } from '$lib/components/ui/toggle/index.js';\n\n  type ToggleVariants = VariantProps<typeof toggleVariants>;\n\n  interface ToggleGroupContext extends ToggleVariants {\n    spacing?: number;\n    orientation?: 'horizontal' | 'vertical';\n  }\n\n  export function setToggleGroupCtx(props: ToggleGroupContext) {\n    setContext('toggleGroup', props);\n  }\n\n  export function getToggleGroupCtx() {\n    return getContext<Required<ToggleGroupContext>>('toggleGroup');\n  }\n</script>\n\n<script lang=\"ts\">\n  import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    value = $bindable(),\n    class: className,\n    size = 'default',\n    spacing = 0,\n    orientation = 'horizontal',\n    variant = 'default',\n    ...restProps\n  }: ToggleGroupPrimitive.RootProps &\n    ToggleVariants & {\n      spacing?: number;\n      orientation?: 'horizontal' | 'vertical';\n    } = $props();\n\n  setToggleGroupCtx({\n    get variant() {\n      return variant;\n    },\n    get size() {\n      return size;\n    },\n    get spacing() {\n      return spacing;\n    },\n    get orientation() {\n      return orientation;\n    }\n  });\n</script>\n\n<!--\nDiscriminated Unions + Destructing (required for bindable) do not\nget along, so we shut typescript up by casting `value` to `never`.\n-->\n<ToggleGroupPrimitive.Root\n  bind:value={value as never}\n  bind:ref\n  {orientation}\n  data-slot=\"toggle-group\"\n  data-variant={variant}\n  data-size={size}\n  data-spacing={spacing}\n  style={`--gap: ${spacing}`}\n  class={cn(\n    'data-[spacing=0]:data-[variant=outline]:rounded-none group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch',\n    className\n  )}\n  {...restProps}\n/>\n",
      "path": "toggle-group/toggle-group.svelte",
      "_imports_": [
        {
          "import": "$lib/components/ui/toggle/index.js",
          "item": "toggle",
          "file": {
            "type": "ui",
            "path": "toggle/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    }
  ],
  "registryDependencies": [
    "styles",
    "utils",
    "toggle"
  ],
  "dependencies": [
    {
      "ecosystem": "js",
      "name": "bits-ui",
      "version": "^2.18.1"
    },
    {
      "ecosystem": "js",
      "name": "tailwind-variants",
      "version": "^3.2.2"
    }
  ],
  "devDependencies": []
}