{
  "name": "toggle",
  "type": "registry:ui",
  "title": "Toggle",
  "description": "A two-state pressed button for actions such as bookmarks, mute and text formatting.",
  "registryDependencies": [
    "@siteplane/base"
  ],
  "dependencies": [
    "@base-ui/react@1.5.0",
    "class-variance-authority@0.7.1"
  ],
  "files": [
    {
      "path": "src/components/ui/toggle.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { useResolvedControlSize } from \"@/components/ui/siteplane-provider\";\n\nexport const toggleVariants = cva(\n  \"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base text-foreground outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 not-disabled:not-data-pressed:hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-64 data-pressed:bg-input/64 data-pressed:text-accent-foreground sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-9 min-w-9 px-[calc(--spacing(2)-1px)] sm:h-8 sm:min-w-8\",\n        lg: \"h-10 min-w-10 px-[calc(--spacing(2.5)-1px)] sm:h-9 sm:min-w-9\",\n        sm: \"h-8 min-w-8 px-[calc(--spacing(1.5)-1px)] sm:h-7 sm:min-w-7\",\n        xl: \"h-14 min-w-14 px-[calc(--spacing(3)-1px)] text-lg leading-6 sm:text-lg [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-5\",\n      },\n      variant: {\n        default: \"border-transparent\",\n        outline:\n          \"border-input bg-background not-dark:bg-clip-padding shadow-xs/5 not-disabled:not-data-pressed:hover:bg-accent/50 not-disabled:not-data-pressed:hover:shadow-sm/10 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:data-pressed:bg-input dark:not-disabled:not-data-pressed:hover:bg-input/64 dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/2%)] [:disabled,:active,[data-pressed]]:shadow-none\",\n      },\n    },\n  },\n);\n\nexport function Toggle({\n  className,\n  variant,\n  size,\n  ...props\n}: TogglePrimitive.Props &\n  VariantProps<typeof toggleVariants>): React.ReactElement {\n  const resolvedSize = useResolvedControlSize(size);\n\n  return (\n    <TogglePrimitive\n      className={cn(\n        toggleVariants({ size: resolvedSize, variant }),\n        \"siteplane-toggle-motion\",\n        className,\n      )}\n      data-slot=\"toggle\"\n      {...props}\n    />\n  );\n}\n\nexport { TogglePrimitive };\n"
    }
  ],
  "categories": [
    "actions"
  ],
  "docs": "# Toggle\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nUse Toggle for one two-state button action such as bookmark, mute or text formatting.\n\n## Import\n\n`import { Toggle } from \"@/components/ui/toggle\";`\n\n`import { Button } from \"@/components/ui/button\";`\n\n`import { BoldIcon, BookmarkIcon, StarIcon, Volume2Icon, VolumeXIcon } from \"lucide-react\";`\n\n## Public API\n\n- `Toggle` accepts controlled `pressed`, uncontrolled `defaultPressed`, `onPressedChange`, native button props and Base UI's render contract.\n- `variant=\"default\" | \"outline\"` and `size=\"sm\" | \"default\" | \"lg\" | \"xl\"` are the complete visual variant set.\n- Base UI mirrors the pressed state to `aria-pressed` and `data-pressed`.\n\n## Public Motion\n\n- Toggle uses the shared button-like hover and press feedback while keeping the persistent pressed state visually distinct.\n- Reduced motion removes non-essential scale feedback without changing selection state.\n\n## Public Accessibility\n\n- Give icon-only Toggles an accessible label and keep controlled labels synchronized with state.\n- Use Toggle for one action, Toggle Group for related choices and Switch for a direct settings preference.\n- Preserve `aria-pressed` instead of expressing state with color alone.\n\n## Public Agent Guidance\n\n- Use only the documented variants and sizes.\n- Keep hover, active and persistent pressed state separate.\n- Do not replace the Base UI pressed-state contract with a local click-state wrapper.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/actions/toggle)\n\n- [Registry source](https://ui.siteplane.io/r/toggle.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/components/actions/toggle",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}