{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-glass",
  "type": "registry:ui",
  "title": "Switch Glass",
  "description": "Glass-themed toggle switch with smooth animations and accessibility features.\n * Built on @radix-ui/react-switch for robust state management and keyboard navigation.\n *\n * ## Features",
  "dependencies": [
    "@radix-ui/react-switch",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/ui/switch-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * SwitchGlass Component\n *\n * Glass-themed toggle switch with smooth animations and accessibility features.\n * Built on @radix-ui/react-switch for robust state management and keyboard navigation.\n *\n * ## Features\n * - Full shadcn/ui API compatibility (drop-in replacement)\n * - Smooth sliding thumb animation (300ms duration)\n * - Optional integrated label with proper touch targets (44px minimum)\n * - Glass morphism styling with gradient backgrounds when active\n * - Controlled and uncontrolled modes\n * - Accessible ARIA attributes and keyboard support (Space/Enter)\n * - Disabled state with visual feedback\n * - Active state glow effect via CSS variables\n *\n * ## CSS Variables\n * - `--toggle-bg` - Background when unchecked\n * - `--toggle-active-bg` - Gradient background when checked\n * - `--toggle-knob` - Thumb/knob color\n * - `--toggle-glow` - Box shadow when checked\n * - `--text-secondary` - Label text color\n *\n * @example Basic usage (controlled)\n * ```tsx\n * import { SwitchGlass } from 'shadcn-glass-ui'\n * import { useState } from 'react'\n *\n * function Settings() {\n *   const [enabled, setEnabled] = useState(false)\n *\n *   return (\n *     <SwitchGlass\n *       checked={enabled}\n *       onCheckedChange={setEnabled}\n *     />\n *   )\n * }\n * ```\n *\n * @example Uncontrolled with default value\n * ```tsx\n * <SwitchGlass defaultChecked />\n * ```\n *\n * @example With integrated label\n * ```tsx\n * <SwitchGlass\n *   label=\"Airplane Mode\"\n *   checked={isOn}\n *   onCheckedChange={setIsOn}\n * />\n * ```\n *\n * @example shadcn/ui compatible alias\n * ```tsx\n * import { Switch } from 'shadcn-glass-ui'\n *\n * <Switch checked={enabled} onCheckedChange={setEnabled} />\n * ```\n *\n * @accessibility\n * - WCAG 2.1 AA compliant via Radix UI primitives\n * - Keyboard navigation: Space and Enter keys toggle state\n * - Proper ARIA role: `switch` with `aria-checked` attribute\n * - Focus visible indicator for keyboard navigation\n * - 44px minimum touch target (Apple HIG compliant) when label is used\n * - Disabled state properly communicated to screen readers\n *\n * @since v1.0.0\n * @see https://www.radix-ui.com/primitives/docs/components/switch\n */\n\n'use client';\n\nimport * as React from 'react';\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\n/**\n * Props for SwitchGlass component.\n *\n * Extends Radix UI Switch.Root props with optional label support.\n * Supports both controlled and uncontrolled modes.\n *\n * @example\n * ```tsx\n * const props: SwitchGlassProps = {\n *   checked: true,\n *   onCheckedChange: (checked) => console.log(checked),\n *   label: 'Enable notifications',\n *   disabled: false,\n * };\n * ```\n */\nexport interface SwitchGlassProps extends React.ComponentPropsWithoutRef<\n  typeof SwitchPrimitive.Root\n> {\n  /**\n   * Optional label text displayed next to the switch.\n   * When provided, the switch is wrapped in a label element with proper touch targets.\n   *\n   * @default undefined\n   */\n  readonly label?: string;\n\n  /**\n   * Controlled checked state.\n   * Use with `onCheckedChange` for controlled mode.\n   *\n   * @default undefined\n   */\n  readonly checked?: boolean;\n\n  /**\n   * Default checked state for uncontrolled mode.\n   *\n   * @default false\n   */\n  readonly defaultChecked?: boolean;\n\n  /**\n   * Callback fired when the checked state changes.\n   *\n   * @param checked - New checked state\n   * @default undefined\n   */\n  readonly onCheckedChange?: (checked: boolean) => void;\n\n  /**\n   * Whether the switch is disabled.\n   *\n   * @default false\n   */\n  readonly disabled?: boolean;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\nexport const SwitchGlass = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitive.Root>,\n  SwitchGlassProps\n>(({ className, label, disabled, checked, defaultChecked, ...props }, ref) => {\n  // Track internal state for styling (Radix handles actual state)\n  const [isChecked, setIsChecked] = React.useState(defaultChecked ?? false);\n  const effectiveChecked = checked ?? isChecked;\n\n  const handleCheckedChange = (newChecked: boolean) => {\n    if (checked === undefined) {\n      setIsChecked(newChecked);\n    }\n    props.onCheckedChange?.(newChecked);\n  };\n\n  const switchElement = (\n    <SwitchPrimitive.Root\n      ref={ref}\n      data-slot=\"switch\"\n      disabled={disabled}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={handleCheckedChange}\n      className={cn(\n        // Layout\n        'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center',\n        'rounded-full border-2 border-transparent',\n        // Transitions\n        'transition-all duration-300',\n        // Focus state\n        'focus-visible:outline-none',\n        // Disabled state\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      style={{\n        background: effectiveChecked ? 'var(--toggle-active-bg)' : 'var(--toggle-bg)',\n        boxShadow: effectiveChecked ? 'var(--toggle-glow)' : 'none',\n      }}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'pointer-events-none block h-5 w-5 rounded-full shadow-lg',\n          'ring-0 transition-transform duration-300',\n          // Movement based on state (Radix adds data-state automatically)\n          'data-[state=checked]:translate-x-5',\n          'data-[state=unchecked]:translate-x-0'\n        )}\n        style={{\n          background: 'var(--toggle-knob)',\n        }}\n      />\n    </SwitchPrimitive.Root>\n  );\n\n  // Wrap in label if label prop provided\n  if (label) {\n    return (\n      <label\n        className={cn(\n          'inline-flex items-center gap-2.5',\n          disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'\n        )}\n      >\n        {/* Touch target wrapper for 44px minimum */}\n        <span className=\"inline-flex items-center justify-center min-h-11\">{switchElement}</span>\n        <span className=\"text-sm\" style={{ color: 'var(--text-secondary)' }}>\n          {label}\n        </span>\n      </label>\n    );\n  }\n\n  return switchElement;\n});\n\nSwitchGlass.displayName = 'SwitchGlass';\n\n// ========================================\n// SHADCN/UI COMPATIBLE ALIAS\n// ========================================\n\n/**\n * Switch - shadcn/ui compatible alias for SwitchGlass\n *\n * @example\n * ```tsx\n * import { Switch } from 'shadcn-glass-ui'\n *\n * <Switch checked={enabled} onCheckedChange={setEnabled} />\n * ```\n * @since v2.5.0\n */\nexport const Switch = SwitchGlass;\n"
    }
  ],
  "categories": [
    "ui"
  ],
  "cssVars": {
    "light": {
      "--glass-bg": "rgba(255, 255, 255, 0.1)",
      "--glass-border": "rgba(255, 255, 255, 0.2)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    },
    "dark": {
      "--glass-bg": "rgba(255, 255, 255, 0.05)",
      "--glass-border": "rgba(255, 255, 255, 0.1)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    }
  }
}