{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle",
  "type": "registry:ui",
  "title": "Toggle",
  "description": "Two-state pressable button for toolbars (bold/italic), with outline and size variants.",
  "dependencies": [
    "@radix-ui/react-toggle",
    "@saasflare/ui",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "components/ui/toggle.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Toggle — two-state button with pressed/unpressed styling, size variants, and outline mode.\n * @module packages/ui/components/ui/toggle\n * @layer core\n *\n * @component\n * @example\n * import { Toggle } from '@saasflare/ui';\n * <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n *   <BoldIcon className=\"size-4\" />\n * </Toggle>\n */\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/**\n * Toggle variant definitions (cva): `variant` (default | outline) × `size`\n * (sm | md | lg). Consumed by {@link Toggle} and shared with ToggleGroupItem\n * so grouped items match standalone toggles.\n */\nconst toggleVariants = cva(\n  \"inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all duration-150 outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground active:scale-95 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        md: \"h-9 min-w-9 px-2\",\n        sm: \"h-8 min-w-8 px-1.5\",\n        lg: \"h-10 min-w-10 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * Props for {@link Toggle}.\n *\n * Extends the Radix Toggle root props with {@link SaasflareComponentProps},\n * so `surface`, `radius`, `animated`, and `iconWeight` can be supplied\n * per-instance or inherited from <SaasflareProvider>.\n */\ninterface ToggleProps\n  extends Omit<React.ComponentProps<typeof TogglePrimitive.Root>, keyof SaasflareComponentProps>,\n    Omit<VariantProps<typeof toggleVariants>, \"size\">,\n    SaasflareComponentProps {\n  /** Visual size. (`\"default\"` is a deprecated alias for `\"md\"`.) */\n  size?: VariantProps<typeof toggleVariants>[\"size\"] | \"default\"\n}\n\n/**\n * Two-state button that switches between pressed and unpressed — e.g. toolbar\n * formatting controls like bold or italic. Icon-only usage requires an\n * `aria-label` for an accessible name.\n *\n * @component\n * @layer core\n *\n * @example\n * <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n *   <BoldIcon className=\"size-4\" />\n * </Toggle>\n */\nfunction Toggle({\n  className,\n  variant,\n  size,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: ToggleProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const resolvedSize = size === \"default\" ? \"md\" : size\n\n  return (\n    <TogglePrimitive.Root\n      {...props}\n      data-slot=\"toggle\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      className={cn(toggleVariants({ variant, size: resolvedSize, className }))}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants, type ToggleProps }\n",
      "target": "components/ui/toggle.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/toggle.json"
  }
}