{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle",
  "title": "Toggle",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/toggle/toggle.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport * as TogglePrimitive from '@radix-ui/react-toggle'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants, type ToggleVariants } from './toggle.variants'\n\nexport interface ToggleProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, 'asChild'>,\n    ToggleVariants {\n  /** Render the child element as the toggle (merging props/styles) instead of\n   *  emitting a <button> — the React equivalent of reka-ui's as-child. */\n  asChild?: boolean\n}\n\nconst Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(\n  ({ className, variant, size, ...props }, ref) => (\n    <TogglePrimitive.Root\n      ref={ref}\n      data-uipkge=\"\"\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size }), className)}\n      {...props}\n    />\n  ),\n)\nToggle.displayName = 'Toggle'\n\nexport { Toggle }\n",
      "type": "registry:ui",
      "target": "~/components/ui/toggle/toggle.tsx"
    },
    {
      "path": "packages/registry-react/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": "~/components/ui/toggle/toggle.variants.ts"
    },
    {
      "path": "packages/registry-react/components/toggle/index.ts",
      "content": "export { Toggle, type ToggleProps } from './toggle'\nexport { toggleVariants, type ToggleVariants } from './toggle.variants'\n",
      "type": "registry:ui",
      "target": "~/components/ui/toggle/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "@radix-ui/react-toggle"
  ],
  "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"
  ]
}