{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle",
  "type": "registry:ui",
  "title": "Toggle",
  "description": "Pressed-state button and toggle group built on the Button surface.",
  "dependencies": [
    "@base-ui/react@^1.7.0"
  ],
  "registryDependencies": [
    "https://control-ui.dev/r/button.json",
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/sources/control-ui/recipes/button.css",
      "target": "@components/control-ui/styles/recipes/button.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"button\"][data-control=\"true\"]) {\n    --cui-button-radius: var(--radius-control);\n    --cui-button-gap: 0.375rem;\n    --cui-button-icon: 1rem;\n    --cui-button-bg: transparent;\n    --cui-button-bg-image: none;\n    --cui-button-foreground: var(--muted-foreground);\n    --cui-button-hover-bg: oklch(from var(--foreground) l c h / 0.06);\n    --cui-button-hover-foreground: var(--foreground);\n    --cui-button-press-bg: var(--cui-button-hover-bg);\n    --cui-button-press-scale: 0.98;\n    --cui-button-active-bg: oklch(from var(--foreground) l c h / 0.08);\n    --cui-button-active-foreground: var(--foreground);\n    --cui-button-active-hover-bg: var(--cui-button-active-bg);\n    --cui-button-active-shadow: var(--cui-button-shadow);\n    --cui-button-shadow: 0 0 transparent;\n    --cui-button-hover-shadow: var(--cui-button-shadow);\n    --cui-button-press-shadow: var(--cui-button-hover-shadow);\n    border-radius: var(--cui-button-radius);\n    background-color: var(--cui-button-bg);\n    background-image: var(--cui-button-bg-image);\n    box-shadow: var(--cui-button-shadow);\n    color: var(--cui-button-foreground);\n    cursor: pointer;\n    font-weight: 500;\n    outline: none;\n    transition-property: color, background-color, border-color, box-shadow, scale, translate, opacity, filter, backdrop-filter;\n    transition-timing-function: var(--ease-standard);\n    transition-duration: var(--duration-fast);\n  }\n\n  /* Keyed on the family alone so every trigger owns the knob, and declared here so a skin re-values gap\n   * without losing to the size utility that Tailwind emits from a later cascade layer. */\n  :where([data-control-family=\"button\"]) {\n    gap: var(--cui-button-gap);\n  }\n\n  :where([data-control-family=\"button\"][data-size=\"xs\"]) {\n    --cui-button-gap: 0.25rem;\n    --cui-button-icon: 0.875rem;\n  }\n  :where([data-control-family=\"button\"][data-size=\"lg\"]) {\n    --cui-button-gap: 0.5rem;\n    --cui-button-icon: 1.125rem;\n  }\n\n  /* Default clamp for unclassed icons (lucide ships width/height 24); zero specificity, so any utility on the svg wins. */\n  :where([data-control-family=\"button\"][data-control=\"true\"] svg) {\n    pointer-events: none;\n    flex-shrink: 0;\n    width: var(--cui-button-icon);\n    height: var(--cui-button-icon);\n  }\n\n  :where([data-control-family=\"button\"][data-cursor=\"default\"]) {\n    cursor: default;\n  }\n\n  :where([data-control-family=\"button\"][data-variant=\"ghost\"]) {\n    --cui-button-foreground: var(--foreground);\n    --cui-button-active-bg: transparent;\n    --cui-button-active-foreground: var(--foreground);\n    --cui-button-active-hover-bg: var(--cui-button-hover-bg);\n  }\n\n  :where([data-control-family=\"button\"][data-variant=\"solid\"]) {\n    --cui-button-bg: var(--primary);\n    --cui-button-foreground: var(--primary-foreground);\n    --cui-button-hover-bg: oklch(from var(--primary) l c h / 0.9);\n    --cui-button-hover-foreground: var(--primary-foreground);\n    --cui-button-shadow: var(--shadow-sm);\n    --cui-button-active-bg: var(--cui-button-bg);\n    --cui-button-active-foreground: var(--cui-button-foreground);\n    --cui-button-active-hover-bg: var(--cui-button-hover-bg);\n  }\n\n  :where([data-control-family=\"button\"][data-variant=\"surface\"]) {\n    --cui-button-bg: oklch(from var(--card) l c h / 0.72);\n    --cui-button-foreground: var(--foreground);\n    --cui-button-hover-bg: oklch(from var(--foreground) l c h / 0.05);\n    --cui-button-hover-foreground: var(--foreground);\n    --cui-button-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);\n    --cui-button-active-bg: oklch(from var(--primary) l c h / 0.08);\n    --cui-button-active-foreground: var(--primary-text);\n    --cui-button-active-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.6), var(--shadow-sm);\n    --cui-button-active-hover-bg: oklch(from var(--primary) l c h / 0.1);\n  }\n\n  :where([data-control-family=\"button\"]:is([data-variant=\"surface\"], [data-variant=\"ghost\"], [data-variant=\"quiet\"])[data-popup-open]) {\n    background-color: oklch(from var(--foreground) l c h / 0.07);\n    color: var(--cui-button-hover-foreground);\n  }\n\n  :where([data-control-family=\"button\"][data-tone=\"primary\"]:not([data-variant=\"solid\"])) {\n    --cui-button-foreground: var(--primary-text);\n    --cui-button-hover-foreground: var(--primary-text);\n  }\n\n  :where([data-control-family=\"button\"][data-tone=\"danger\"][data-variant=\"solid\"]) {\n    --cui-button-bg: var(--destructive);\n    --cui-button-foreground: var(--destructive-foreground);\n    --cui-button-hover-bg: oklch(from var(--destructive) l c h / 0.9);\n    --cui-button-hover-foreground: var(--destructive-foreground);\n    --cui-button-active-bg: var(--cui-button-bg);\n    --cui-button-active-foreground: var(--cui-button-foreground);\n    --cui-button-active-hover-bg: var(--cui-button-hover-bg);\n  }\n\n  :where([data-control-family=\"button\"][data-tone=\"danger\"]:not([data-variant=\"solid\"])) {\n    --cui-button-foreground: var(--destructive-text);\n    --cui-button-hover-foreground: var(--destructive-text);\n  }\n\n  :where([data-control-family=\"button\"][data-shape=\"circle\"]) {\n    --cui-button-radius: 9999px;\n  }\n\n  @media (hover: hover) {\n    :where([data-control-family=\"button\"][data-control=\"true\"]:hover) {\n      background-color: var(--cui-button-hover-bg);\n      box-shadow: var(--cui-button-hover-shadow);\n      color: var(--cui-button-hover-foreground);\n    }\n  }\n\n  :where([data-control-family=\"button\"][data-active=\"true\"]) {\n    background-color: var(--cui-button-active-bg);\n    box-shadow: var(--cui-button-active-shadow);\n    color: var(--cui-button-active-foreground);\n  }\n\n  @media (hover: hover) {\n    :where([data-control-family=\"button\"][data-active=\"true\"]:hover) {\n      background-color: var(--cui-button-active-hover-bg);\n      color: var(--cui-button-active-foreground);\n    }\n  }\n\n  :where([data-control-family=\"button\"][data-control=\"true\"]:active) {\n    background-color: var(--cui-button-press-bg);\n    box-shadow: var(--cui-button-press-shadow);\n    scale: var(--cui-button-press-scale);\n  }\n\n  :where([data-control-family=\"button\"]:is(:disabled, [data-disabled], [aria-disabled=\"true\"])) {\n    cursor: not-allowed;\n    opacity: 0.45;\n  }\n\n  :where([data-control-family=\"button\"][data-button-kind=\"model-switcher\"][data-slot=\"indicator\"]) {\n    border-radius: calc(infinity * 1px);\n    background-color: var(--primary);\n  }\n}\n\n@property --cui-button-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-button-gap {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-button-icon {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n\n@property --cui-button-bg {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-button-bg-image {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-button-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-button-hover-bg {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-button-hover-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-button-press-bg {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-button-press-scale {\n  syntax: \"<number>\";\n  inherits: true;\n  initial-value: 1;\n}\n\n@property --cui-button-active-bg {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-button-active-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-button-active-hover-bg {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-button-shadow {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-button-hover-shadow {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: none;\n}\n\n@property --cui-button-press-shadow {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: none;\n}\n\n@property --cui-button-active-shadow {\n  syntax: \"*\";\n  inherits: true;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/toggle.tsx",
      "target": "@components/control-ui/ui/toggle.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport type { ComponentProps } from \"react\";\nimport type { ControlledMultiChoice } from \"@/components/control-ui/control-props\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\nimport type { ButtonProps } from \"@/components/control-ui/ui/button\";\nimport { buttonContentClasses, buttonRecipeClasses } from \"@/components/control-ui/ui/button\";\n\nexport type ToggleProps = Omit<ButtonProps, \"render\" | \"nativeButton\" | \"value\"> & {\n  pressed?: boolean;\n  defaultPressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n  value?: string;\n  showCheck?: boolean;\n};\n\nexport type ToggleGroupProps<TValue extends string = string> = Omit<ComponentProps<\"div\">, \"defaultValue\" | \"onChange\"> &\n  ControlledMultiChoice<TValue> & {\n    multiple?: boolean;\n    disabled?: boolean;\n    orientation?: \"horizontal\" | \"vertical\";\n  };\n\n// keeps its own anatomy while sharing Button's visual recipe\nexport function Toggle({\n  variant = \"surface\",\n  size = \"sm\",\n  tone = \"neutral\",\n  active,\n  showCheck = false,\n  className,\n  pressed,\n  defaultPressed,\n  onPressedChange,\n  value,\n  disabled,\n  children,\n  ...props\n}: ToggleProps) {\n  return (\n    <TogglePrimitive\n      pressed={pressed}\n      defaultPressed={defaultPressed}\n      onPressedChange={onPressedChange}\n      value={value}\n      disabled={disabled}\n      render={(renderProps, state) => {\n        const isActive = active ?? state.pressed;\n        return (\n          <button\n            type=\"button\"\n            {...renderProps}\n            data-control-ui=\"toggle\"\n            data-control-family=\"button\"\n            data-slot=\"root\"\n            data-control=\"true\"\n            data-active={isActive ? \"true\" : undefined}\n            data-variant={variant}\n            data-tone={tone}\n            data-size={size}\n            className={cn(buttonRecipeClasses(size), renderProps.className, className)}\n          >\n            <span data-control-ui=\"toggle\" data-control-family=\"button\" data-slot=\"content\" className={buttonContentClasses}>\n              {showCheck ? (\n                <span data-control-ui=\"toggle\" data-slot=\"check\" className=\"flex size-3.5 shrink-0 items-center justify-center\">\n                  {isActive ? (\n                    <svg viewBox=\"0 0 12 12\" className=\"size-3\" aria-hidden=\"true\" fill=\"none\">\n                      <path d=\"M2.5 6.5 5 9l4.5-5\" stroke=\"currentColor\" strokeWidth=\"1.4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                    </svg>\n                  ) : null}\n                </span>\n              ) : null}\n              {renderProps.children}\n            </span>\n          </button>\n        );\n      }}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  );\n}\n\nexport function ToggleGroup<TValue extends string = string>({ className, orientation = \"horizontal\", ...props }: ToggleGroupProps<TValue>) {\n  return (\n    <ToggleGroupPrimitive\n      data-control-ui=\"toggle\"\n      data-slot=\"group\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\"inline-flex items-center gap-1\", orientation === \"vertical\" && \"flex-col\", className)}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/button.css\"": {}
  },
  "meta": {}
}