{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-glass",
  "type": "registry:ui",
  "title": "Toggle Glass",
  "description": "Glass-themed toggle switch with shadcn/ui compatible API:",
  "dependencies": [
    "class-variance-authority",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "use-focus",
    "variants"
  ],
  "files": [
    {
      "path": "components/glass/ui/toggle-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * ToggleGlass Component\n *\n * Glass-themed toggle switch with shadcn/ui compatible API:\n * - Theme-aware styling (glass/light/aurora)\n * - Glow effect when active\n * - Size variants (default, sm, lg)\n * - Variant styles (default, outline)\n * - Optional label\n *\n * **shadcn/ui compatible props:**\n * - `pressed` / `defaultPressed` - Control pressed state\n * - `onPressedChange` - Callback when state changes\n * - `variant` - 'default' | 'outline'\n * - `size` - 'default' | 'sm' | 'lg'\n *\n * @example\n * ```tsx\n * // Controlled\n * <ToggleGlass pressed={isOn} onPressedChange={setIsOn} />\n *\n * // Uncontrolled\n * <ToggleGlass defaultPressed={true} />\n *\n * // With variant\n * <ToggleGlass variant=\"outline\" pressed={isOn} onPressedChange={setIsOn} />\n * ```\n */\n\nimport { forwardRef, useState, type CSSProperties } from 'react';\nimport { type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\nimport { useFocus } from '@/lib/hooks/use-focus';\nimport { toggleSizes, type ToggleGlassVariant } from '@/lib/variants/toggle-glass-variants';\nimport '@/glass-theme.css';\n\n// ========================================\n// SIZE CONFIG\n// ========================================\n\nconst sizesConfig = {\n  sm: { track: 'w-8 h-4', knob: 'w-3 h-3', translate: 'translate-x-4' },\n  default: { track: 'w-11 h-6', knob: 'w-5 h-5', translate: 'translate-x-5' },\n  lg: { track: 'w-14 h-7', knob: 'w-6 h-6', translate: 'translate-x-7' },\n} as const;\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\nexport interface ToggleGlassProps\n  extends\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'defaultValue'>,\n    VariantProps<typeof toggleSizes> {\n  /**\n   * Controlled pressed state (shadcn/ui compatible)\n   */\n  readonly pressed?: boolean;\n  /**\n   * Default pressed state for uncontrolled usage\n   */\n  readonly defaultPressed?: boolean;\n  /**\n   * Callback when pressed state changes (shadcn/ui compatible)\n   */\n  readonly onPressedChange?: (pressed: boolean) => void;\n  /**\n   * Visual variant (shadcn/ui compatible)\n   * @default \"default\"\n   */\n  readonly variant?: ToggleGlassVariant;\n  /**\n   * Optional label text\n   */\n  readonly label?: string;\n  /**\n   * className for the wrapper label element (when label is provided).\n   * Use this for spacing, layout, or wrapper-specific styling.\n   * Note: `className` always applies to the toggle button (shadcn/ui pattern).\n   * @since v2.6.0\n   */\n  readonly wrapperClassName?: string;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\nexport const ToggleGlass = forwardRef<HTMLButtonElement, ToggleGlassProps>(\n  (\n    {\n      className,\n      wrapperClassName,\n      size = 'default',\n      variant = 'default',\n      pressed: controlledPressed,\n      defaultPressed = false,\n      onPressedChange,\n      disabled,\n      label,\n      ...props\n    },\n    ref\n  ) => {\n    // Support both controlled and uncontrolled modes\n    const [uncontrolledPressed, setUncontrolledPressed] = useState(defaultPressed);\n    const isControlled = controlledPressed !== undefined;\n    const isPressed = isControlled ? controlledPressed : uncontrolledPressed;\n\n    const { isFocusVisible, focusProps } = useFocus({ focusVisible: true });\n    const s = sizesConfig[size ?? 'default'];\n\n    const handleToggle = () => {\n      if (disabled) return;\n      const newValue = !isPressed;\n      if (!isControlled) {\n        setUncontrolledPressed(newValue);\n      }\n      onPressedChange?.(newValue);\n    };\n\n    const getTrackStyles = (): CSSProperties => {\n      if (variant === 'outline') {\n        return {\n          background: isPressed ? 'var(--toggle-outline-active-bg)' : 'transparent',\n          borderColor: isPressed\n            ? 'var(--toggle-outline-active-border)'\n            : 'var(--toggle-outline-border)',\n          boxShadow: isFocusVisible && !disabled ? 'var(--focus-glow)' : 'none',\n        };\n      }\n      return {\n        background: isPressed ? 'var(--toggle-active-bg)' : 'var(--toggle-bg)',\n        boxShadow:\n          isFocusVisible && !disabled\n            ? 'var(--focus-glow)'\n            : isPressed\n              ? 'var(--toggle-glow)'\n              : 'none',\n      };\n    };\n\n    const knobStyles: CSSProperties = {\n      background: 'var(--toggle-knob)',\n    };\n\n    // Touch area wrapper ensures 44px minimum touch target (Apple HIG)\n    const toggle = (\n      <span className=\"inline-flex items-center justify-center min-h-11\">\n        <button\n          ref={ref}\n          data-slot=\"toggle\"\n          type=\"button\"\n          role=\"switch\"\n          aria-pressed={isPressed}\n          aria-label={label || 'Toggle switch'}\n          disabled={disabled}\n          className={cn(\n            toggleSizes({ size, variant }),\n            disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',\n            className\n          )}\n          style={getTrackStyles()}\n          onClick={handleToggle}\n          onFocus={focusProps.onFocus}\n          onBlur={focusProps.onBlur}\n          {...props}\n        >\n          <div\n            className={cn(\n              'absolute top-0.5 left-0.5 rounded-full shadow-md transition-all duration-300',\n              s.knob,\n              isPressed && s.translate\n            )}\n            style={knobStyles}\n          />\n        </button>\n      </span>\n    );\n\n    if (label) {\n      return (\n        <label\n          className={cn(\n            'inline-flex items-center gap-2 md:gap-2.5',\n            disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',\n            wrapperClassName\n          )}\n        >\n          {toggle}\n          <span className=\"text-xs md:text-sm\" style={{ color: 'var(--text-secondary)' }}>\n            {label}\n          </span>\n        </label>\n      );\n    }\n\n    return toggle;\n  }\n);\n\nToggleGlass.displayName = 'ToggleGlass';\n\n// ========================================\n// SHADCN/UI COMPATIBLE ALIAS\n// ========================================\n\n/**\n * Toggle - shadcn/ui compatible alias for ToggleGlass\n *\n * @example\n * ```tsx\n * import { Toggle } from 'shadcn-glass-ui'\n *\n * // Controlled\n * <Toggle pressed={isOn} onPressedChange={setIsOn}>\n *   <Bold className=\"h-4 w-4\" />\n * </Toggle>\n *\n * // Uncontrolled\n * <Toggle defaultPressed>\n *   <Italic className=\"h-4 w-4\" />\n * </Toggle>\n * ```\n * @since v2.5.0\n */\nexport const Toggle = ToggleGlass;\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"
    }
  }
}