import plugin from 'tailwindcss/plugin';
/**
 * Switch component — a styled checkbox visually rendered as a sliding switch.
 *
 * Class Names:
 *
 *  btu-switch              - Wrapper element (use as <label>)
 *  btu-switch-input        - The hidden <input type="checkbox">
 *  btu-switch-track        - The pill/track element
 *  btu-switch-knob         - The sliding circular handle (child of btu-switch-track)
 *  btu-switch-text         - Optional container for label + description (flex column)
 *  btu-switch-label        - Primary label text
 *  btu-switch-description  - Secondary description text
 *  btu-switch-[md|lg]      - Size variants (default: sm dimensions)
 *  btu-switch-label-start  - Positions label/text before the track
 *  btu-switch-track-icon-on      - Icon displayed on the track when checked (sm: 0.5rem, md: 0.625rem, lg: 0.75rem)
 *  btu-switch-track-icon-off     - Icon displayed on the track when unchecked (sm: 0.5rem, md: 0.625rem, lg: 0.75rem)
 *
 * CSS Custom Properties:
 *
 *  --switch-color-track-on      - Track background when checked    (default: primary-700)
 *  --switch-color-track-off     - Track background when unchecked  (default: gray-300)
 *  --switch-color-knob    - Knob/handle color                (default: white)
 *  --switch-label-spacing - Gap between track and label text (default: 0.75rem)
 *
 * Example Usage:
 *
 *  <label class="btu-switch">
 *    <input type="checkbox" role="switch" class="btu-switch-input">
 *    <span class="btu-switch-track">
 *      <btu-icon class="btu-switch-track-icon-on" symbol="check"></btu-icon>
 *      <span class="btu-switch-knob"></span>
 *      <btu-icon class="btu-switch-track-icon-off" symbol="x"></btu-icon>
 *    </span>
 *    <span class="btu-switch-text">
 *      <span class="btu-switch-label">Enable notifications</span>
 *      <span class="btu-switch-description">Receive updates via email</span>
 *    </span>
 *  </label>
 */
module.exports = plugin(function ({ addComponents, config, theme }) {
    const components = {
        // -------------------------------------------------------------------------
        // Wrapper
        // -------------------------------------------------------------------------
        '.btu-switch': {
            '--switch-track-width': '1.75rem',
            '--switch-track-height': '1rem',
            '--switch-knob-size': '0.75rem',
            '--switch-knob-padding': '0.125rem',
            '--switch-track-icon-size': '0.5rem',
            display: 'inline-flex',
            alignItems: 'center',
            gap: 'var(--switch-label-spacing, 0.75rem)',
            cursor: 'pointer',
            userSelect: 'none',
        },
        // -------------------------------------------------------------------------
        // Hidden input (sr-only pattern)
        // -------------------------------------------------------------------------
        '.btu-switch-input': {
            position: 'absolute',
            width: '1px',
            height: '1px',
            padding: '0',
            margin: '-1px',
            overflow: 'hidden',
            clipPath: 'inset(50%)',
            whiteSpace: 'nowrap',
            borderWidth: '0',
        },
        // -------------------------------------------------------------------------
        // Track
        // -------------------------------------------------------------------------
        '.btu-switch-track': {
            flexShrink: '0',
            position: 'relative',
            display: 'inline-flex',
            alignItems: 'center',
            width: 'var(--switch-track-width)',
            height: 'var(--switch-track-height)',
            padding: 'var(--switch-knob-padding)',
            borderRadius: '999px',
            background: 'var(--switch-color-track-off, oklch(var(--btu-theme-gray-300)))',
            transition: 'background 150ms ease-in-out',
        },
        // -------------------------------------------------------------------------
        // Knob
        // -------------------------------------------------------------------------
        '.btu-switch-knob': {
            flexShrink: '0',
            width: 'var(--switch-knob-size)',
            height: 'var(--switch-knob-size)',
            borderRadius: '50%',
            background: 'var(--switch-color-knob, var(--btu-theme-white))',
            boxShadow: theme('boxShadow.sm'),
            transition: 'transform 170ms cubic-bezier(.895, .03, .685, .22)',
        },
        // -------------------------------------------------------------------------
        // Track icons (on/off)
        // -------------------------------------------------------------------------
        '.btu-switch-track-icon-on, .btu-switch-track-icon-off': {
            position: 'absolute',
            top: '50%',
            opacity: '0',
            color: 'var(--switch-color-knob, var(--btu-theme-white))',
            pointerEvents: 'none',
            transition: 'opacity 150ms ease-in-out',
        },
        '.btu-switch-track-icon-on': {
            left: 'calc((var(--switch-track-width) - var(--switch-knob-size) - var(--switch-knob-padding)) / 2)',
            transform: 'translate(-50%, -50%)',
        },
        '.btu-switch-track-icon-off': {
            right: 'calc((var(--switch-track-width) - var(--switch-knob-size) - var(--switch-knob-padding)) / 2)',
            transform: 'translate(50%, -50%)',
        },
        '.btu-switch-input:not(:checked) ~ .btu-switch-track .btu-switch-track-icon-off': {
            opacity: '1',
        },
        // -------------------------------------------------------------------------
        // Checked state
        // -------------------------------------------------------------------------
        '.btu-switch-input:checked ~ .btu-switch-track': {
            background: 'var(--switch-color-track-on, oklch(var(--btu-theme-primary-700)))',
        },
        '.btu-switch-input:checked ~ .btu-switch-track .btu-switch-track-icon-on': {
            opacity: '1',
        },
        '.btu-switch-input:checked ~ .btu-switch-track .btu-switch-knob': {
            transform: 'translateX(calc(var(--switch-track-width) - var(--switch-knob-size) - var(--switch-knob-padding) * 2))',
        },
        // -------------------------------------------------------------------------
        // Hover state
        // -------------------------------------------------------------------------
        '.btu-switch:hover .btu-switch-input:not(:disabled) ~ .btu-switch-track': {
            background: 'var(--switch-color-track-off, oklch(var(--btu-theme-gray-400)))',
        },
        '.btu-switch:hover .btu-switch-input:not(:disabled):checked ~ .btu-switch-track': {
            background: 'var(--switch-color-track-on, oklch(var(--btu-theme-primary-800)))',
        },
        // -------------------------------------------------------------------------
        // Focus visible — ring on the track
        // -------------------------------------------------------------------------
        '.btu-switch-input:focus-visible ~ .btu-switch-track': {
            outline: '3px solid oklch(var(--btu-theme-primary-200))',
            outlineOffset: '0px',
        },
        // -------------------------------------------------------------------------
        // Disabled state
        // -------------------------------------------------------------------------
        '.btu-switch-input:disabled ~ .btu-switch-track': {
            opacity: '0.5',
            pointerEvents: 'none',
        },
        '.btu-switch-input:disabled:checked ~ .btu-switch-track': {
            background: 'oklch(var(--btu-theme-primary-200))',
            opacity: '1',
        },
        '.btu-switch-input:disabled ~ .btu-switch-text': {
            color: 'oklch(var(--btu-theme-gray-300))',
        },
        '.btu-switch:has(.btu-switch-input:disabled)': {
            pointerEvents: 'none',
        },
        // -------------------------------------------------------------------------
        // Text elements
        // -------------------------------------------------------------------------
        '.btu-switch-text': {
            display: 'flex',
            flexDirection: 'column',
            gap: '0.125rem',
        },
        '.btu-switch-label': {
            fontSize: config('theme.fontSize.sm')?.[0] ?? '0.875rem',
            lineHeight: config('theme.fontSize.sm')?.[1] ?? '1.25rem',
            fontWeight: '500',
            color: 'oklch(var(--btu-theme-gray-700))',
        },
        '.btu-switch-description': {
            fontSize: config('theme.fontSize.xs')?.[0] ?? '0.75rem',
            lineHeight: config('theme.fontSize.xs')?.[1] ?? '1.125rem',
            color: 'oklch(var(--btu-theme-gray-500))',
        },
        // -------------------------------------------------------------------------
        // Label position: start (label/text before track)
        // -------------------------------------------------------------------------
        '.btu-switch-label-start': {
            flexDirection: 'row-reverse',
        },
        // -------------------------------------------------------------------------
        // Size variants
        // -------------------------------------------------------------------------
        '.btu-switch-md': {
            '--switch-track-width': '2.25rem',
            '--switch-track-height': '1.25rem',
            '--switch-knob-size': '1rem',
            '--switch-track-icon-size': '0.625rem',
        },
        '.btu-switch-lg': {
            '--switch-track-width': '2.75rem',
            '--switch-track-height': '1.5rem',
            '--switch-knob-size': '1.25rem',
            '--switch-track-icon-size': '0.75rem',
        },
        // -------------------------------------------------------------------------
        // Reduced motion
        // -------------------------------------------------------------------------
        '@media (prefers-reduced-motion: reduce)': {
            '.btu-switch-track': {
                transition: 'background 0.01ms ease',
            },
            '.btu-switch-knob': {
                transition: 'transform 0.01ms ease',
            },
            '.btu-switch-track-icon-on, .btu-switch-track-icon-off': {
                transition: 'opacity 0.01ms ease',
            },
        },
    };
    addComponents(components);
});
//# sourceMappingURL=tailwind-plugin-switch.js.map