{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle",
  "title": "Toggle",
  "description": "Two-state toggle button on radix-ui with 2 variants (default, outline), 3 sizes and 2 tones (neutral, brand). Pressed state uses the accent token (neutral) or brand-soft (brand).",
  "dependencies": [
    "class-variance-authority@^0.7.1",
    "radix-ui@^1.6.1"
  ],
  "registryDependencies": [
    "@ai2/tokens",
    "@ai2/primitives"
  ],
  "files": [
    {
      "path": "registry/ai2/ui/toggle.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@/registry/ai2/ui/primitives\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium outline-none transition-colors duration-(--motion-fast) hover:bg-surface-3 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_i]:pointer-events-none [&_i]:shrink-0 [&_i]:text-base [&_i]:leading-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent text-muted-foreground\",\n        outline: \"border border-field-border bg-transparent text-muted-foreground shadow-xs\",\n      },\n      size: {\n        sm: \"h-8 min-w-8 px-1.5\",\n        md: \"h-9 min-w-9 px-2\",\n        lg: \"h-10 min-w-10 px-2.5\",\n      },\n      tone: {\n        neutral: \"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n        brand:\n          \"data-[state=on]:bg-brand-soft data-[state=on]:text-brand-soft-foreground\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"md\", tone: \"neutral\" },\n  }\n)\n\ninterface ToggleProps\n  extends React.ComponentProps<typeof TogglePrimitive.Root>,\n    VariantProps<typeof toggleVariants> {}\n\nfunction Toggle({ className, variant, size, tone, ...props }: ToggleProps) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      data-tone={tone ?? \"neutral\"}\n      className={cn(toggleVariants({ variant, size, tone, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants, type ToggleProps }\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Use for on/off formatting controls (bold, italic). For groups use toggle-group.",
  "categories": [
    "form",
    "actions"
  ],
  "type": "registry:ui"
}