{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "toggle",
  "title": "Toggle",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/toggle/Toggle.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits } from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\nimport { computed, getCurrentInstance } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Toggle, useForwardPropsEmits } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from './toggle.variants'\n\n// Inlined unions for variant/size: Vue's SFC compiler can't extract\n// runtime props from indexed-access types like `ToggleVariants['variant']`,\n// so we spell the unions out. cva still validates at runtime.\n// Same goes for `ToggleProps` from reka-ui (no exports.types condition);\n// we inline only the props we actually expose.\nconst props = withDefaults(\n  defineProps<{\n    class?: HTMLAttributes['class']\n    variant?: 'default' | 'outline'\n    size?: 'default' | 'sm' | 'lg'\n    asChild?: boolean\n    as?: string | object\n    defaultValue?: boolean\n    modelValue?: boolean\n    pressed?: boolean\n    disabled?: boolean\n    name?: string\n    required?: boolean\n  }>(),\n  {\n    variant: 'default',\n    size: 'default',\n    disabled: false,\n  },\n)\n\nconst emits = defineEmits<ToggleEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class', 'size', 'variant', 'modelValue')\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst instance = getCurrentInstance()\nconst isControlled = computed(() => Boolean(instance?.vnode?.props?.['onUpdate:modelValue']))\nconst userPassedModelValue = computed(() => {\n  const raw = instance?.vnode?.props\n  return Boolean(raw && ('modelValue' in raw || 'model-value' in raw))\n})\n\nconst toggleStateBindings = computed(() => {\n  if (isControlled.value) return { 'model-value': props.modelValue }\n  if (userPassedModelValue.value) return { 'default-value': Boolean(props.modelValue) }\n  return { 'default-value': false }\n})\n</script>\n\n<template>\n  <Toggle\n    v-slot=\"slotProps\"\n    data-uipkge\n    data-slot=\"toggle\"\n    v-bind=\"{ ...forwarded, ...toggleStateBindings }\"\n    :class=\"cn(toggleVariants({ variant, size }), props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </Toggle>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/toggle/Toggle.vue"
    },
    {
      "path": "packages/registry-vue/components/toggle/toggle.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so consuming Vue SFCs can import without creating a circular\n * dependency through the index. See card.variants.ts for the canonical\n * example + the SSR symptom that motivated the split.\n */\n\nexport const toggleVariants = cva(\n  // Focus ring intentionally subtle: 1px ring on :focus-visible only, no\n  // border swap. Keyboard users still get a clear focused state; mouse\n  // users don't see a loud 3px halo after click (which lingers because\n  // the button retains focus). Matches the segmented-control density.\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:ring-ring/50 focus-visible:ring-1 outline-none transition-colors duration-200 whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-2 min-w-9',\n        sm: 'h-8 px-1.5 min-w-8',\n        lg: 'h-10 px-2.5 min-w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/toggle/toggle.variants.ts"
    },
    {
      "path": "packages/registry-vue/components/toggle/index.ts",
      "content": "export { default as Toggle } from './Toggle.vue'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// Component.vue <-> index.ts circular import that broke dev SSR for Card).\nexport { toggleVariants, type ToggleVariants } from './toggle.variants'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/toggle/index.ts"
    }
  ],
  "dependencies": [
    "@vueuse/core",
    "class-variance-authority",
    "reka-ui"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "On/off button (different from Switch — this is shaped like a button and lives in toolbars). Three sizes, two variants. Use inside Toggle Group or standalone for \"press to enable\" buttons like bold / italic.",
  "categories": [
    "action"
  ]
}