{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "Toggle Group",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/toggle-group/ToggleGroup.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ToggleGroupRootEmits } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui'\nimport { provide } from 'vue'\nimport { cn } from '@/lib/utils'\n\n// Inlined unions: SFC compiler can't extract runtime props from\n// `VariantProps<typeof toggleVariants>['...']`. Same for the\n// reka-ui `ToggleGroupRootProps` (no exports.types). Inline the\n// surface we expose.\nconst props = withDefaults(\n  defineProps<{\n    class?: HTMLAttributes['class']\n    variant?: 'default' | 'outline'\n    size?: 'default' | 'sm' | 'lg'\n    spacing?: number\n    asChild?: boolean\n    as?: string | object\n    type?: 'single' | 'multiple'\n    modelValue?: string | string[]\n    defaultValue?: string | string[]\n    disabled?: boolean\n    loop?: boolean\n    orientation?: 'horizontal' | 'vertical'\n    rovingFocus?: boolean\n    dir?: 'ltr' | 'rtl'\n  }>(),\n  {\n    spacing: 0,\n  },\n)\n\nconst emits = defineEmits<ToggleGroupRootEmits>()\n\nprovide('toggleGroup', {\n  variant: props.variant,\n  size: props.size,\n  spacing: props.spacing,\n})\n\nconst delegatedProps = reactiveOmit(props, 'class', 'size', 'variant')\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <ToggleGroupRoot\n    v-slot=\"slotProps\"\n    data-uipkge\n    data-slot=\"toggle-group\"\n    :data-size=\"size\"\n    :data-variant=\"variant\"\n    :data-spacing=\"spacing\"\n    :style=\"{\n      '--gap': spacing,\n    }\"\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',\n        props.class,\n      )\n    \"\n  >\n    <slot v-bind=\"slotProps\" />\n  </ToggleGroupRoot>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/toggle-group/ToggleGroup.vue"
    },
    {
      "path": "packages/registry-vue/components/toggle-group/ToggleGroupItem.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { ToggleGroupItem, useForwardProps } from 'reka-ui'\nimport { inject } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from '@/components/ui/toggle'\n\ntype ToggleGroupContext = {\n  variant?: 'default' | 'outline'\n  size?: 'default' | 'sm' | 'lg'\n  spacing?: number\n}\n\n// Inlined unions: SFC compiler can't extract runtime props from\n// indexed-access types. Same for reka-ui's ToggleGroupItemProps.\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: 'default' | 'outline'\n  size?: 'default' | 'sm' | 'lg'\n  asChild?: boolean\n  as?: string | object\n  value: string\n  disabled?: boolean\n}>()\n\nconst context = inject<ToggleGroupContext>('toggleGroup')\n\nconst delegatedProps = reactiveOmit(props, 'class', 'size', 'variant')\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <ToggleGroupItem\n    v-slot=\"slotProps\"\n    data-uipkge\n    data-slot=\"toggle-group-item\"\n    :data-variant=\"context?.variant || variant\"\n    :data-size=\"context?.size || size\"\n    :data-spacing=\"context?.spacing\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        toggleVariants({\n          variant: context?.variant || variant,\n          size: context?.size || size,\n        }),\n        'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',\n        'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',\n        props.class,\n      )\n    \"\n  >\n    <slot v-bind=\"slotProps\" />\n  </ToggleGroupItem>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/toggle-group/ToggleGroupItem.vue"
    },
    {
      "path": "packages/registry-vue/components/toggle-group/index.ts",
      "content": "export { default as ToggleGroup } from './ToggleGroup.vue'\nexport { default as ToggleGroupItem } from './ToggleGroupItem.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/toggle-group/index.ts"
    }
  ],
  "dependencies": [
    "@vueuse/core",
    "class-variance-authority",
    "reka-ui"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/toggle.json"
  ],
  "description": "Group of `Toggle` buttons that act as a single-select or multi-select control. Use for view-mode pickers (grid/list), text-format toolbars, and any \"pick one of N\" button bar.",
  "categories": [
    "action"
  ]
}