import plugin from 'tailwindcss/plugin';
/**
 * Checkbox component — a styled checkbox with label and description support.
 *
 * Class Names:
 *
 *  btu-checkbox              - Wrapper element
 *  btu-checkbox-input        - The hidden <input type="checkbox">
 *  btu-checkbox-box          - The visible checkbox square
 *  btu-checkbox-icon         - Icon element inside the box (check or minus)
 *  btu-checkbox-text         - Optional container for label, description, and error (flex column)
 *  btu-checkbox-label        - Primary label text
 *  btu-checkbox-description  - Secondary description text
 *  btu-checkbox-error        - Error message text
 *  btu-checkbox-md           - Medium size variant (20px, default is sm with no modifier)
 *  btu-checkbox-invalid      - Error state modifier
 *
 * CSS Custom Properties:
 *
 *  --checkbox-color-primary   - Background and border when checked/indeterminate  (default: oklch(primary-700))
 *  --checkbox-color-border    - Border color in unchecked state                   (default: oklch(gray-300))
 *  --checkbox-color-error     - Border/text color in error                        (default: oklch(error-600))
 *  --checkbox-border-radius   - Corner rounding                                   (default: 4px)
 *  --checkbox-label-spacing   - Gap between box and label text                    (default: 0.75rem)
 *
 * Internal sizing (not intended for consumer override):
 *
 *  --checkbox-box-size        - Width/height of the checkbox square (set by size variant)
 *  --checkbox-icon-size       - Width/height of the icon inside the box (set by size variant)
 *
 * Rendered DOM (the component generates this internally; consumers only write <btu-checkbox ...>):
 *
 *  <btu-checkbox>
 *    <input type="checkbox" class="btu-checkbox-input">
 *    <span class="btu-checkbox-box">
 *      <btu-icon class="btu-checkbox-icon" symbol="check" style="--icon-size: var(--checkbox-icon-size)"></btu-icon>
 *    </span>
 *    <span class="btu-checkbox-text">
 *      <span class="btu-checkbox-label">Remember me</span>
 *      <span class="btu-checkbox-description">Save your login details</span>
 *      <span class="btu-checkbox-error">Error message here</span>
 *    </span>
 *  </btu-checkbox>
 */
module.exports = plugin(function ({ addComponents, config }) {
    const components = {
        // -------------------------------------------------------------------------
        // Wrapper
        // -------------------------------------------------------------------------
        '.btu-checkbox': {
            '--checkbox-box-size': '1rem',
            '--checkbox-icon-size': '0.75rem',
            display: 'inline-flex',
            alignItems: 'flex-start',
            gap: 'var(--checkbox-label-spacing, 0.75rem)',
            cursor: 'pointer',
            userSelect: 'none',
        },
        // -------------------------------------------------------------------------
        // Hidden input (sr-only pattern)
        // -------------------------------------------------------------------------
        '.btu-checkbox-input': {
            position: 'absolute',
            width: '1px',
            height: '1px',
            padding: '0',
            margin: '-1px',
            overflow: 'hidden',
            clipPath: 'inset(50%)',
            whiteSpace: 'nowrap',
            borderWidth: '0',
        },
        // -------------------------------------------------------------------------
        // Visible checkbox box
        // -------------------------------------------------------------------------
        '.btu-checkbox-box': {
            flexShrink: '0',
            position: 'relative',
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            marginTop: '0.125rem',
            width: 'var(--checkbox-box-size)',
            height: 'var(--checkbox-box-size)',
            borderRadius: 'var(--checkbox-border-radius, 4px)',
            border: '1px solid var(--checkbox-color-border, oklch(var(--btu-theme-gray-300)))',
            background: 'var(--btu-theme-white)',
            transition: 'transform 200ms cubic-bezier(0.12, 0.32, 0.54, 2), background 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out',
        },
        // -------------------------------------------------------------------------
        // Icon inside the box
        // -------------------------------------------------------------------------
        '.btu-checkbox-icon': {
            opacity: '0',
            transform: 'scale(0.5)',
            color: 'var(--btu-theme-white)',
            pointerEvents: 'none',
            transition: 'transform 150ms ease-in, opacity 150ms ease-in',
        },
        // -------------------------------------------------------------------------
        // Checked / indeterminate state
        // -------------------------------------------------------------------------
        '.btu-checkbox-input:is(:checked, :indeterminate) ~ .btu-checkbox-box': {
            background: 'var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700)))',
            borderColor: 'var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700)))',
        },
        '.btu-checkbox-input:is(:checked, :indeterminate) ~ .btu-checkbox-box .btu-checkbox-icon': {
            opacity: '1',
            transform: 'scale(1)',
            transition: 'transform 200ms cubic-bezier(0.12, 0.32, 0.54, 2), opacity 200ms cubic-bezier(0.12, 0.32, 0.54, 2)',
        },
        // -------------------------------------------------------------------------
        // Hover state
        // -------------------------------------------------------------------------
        '.btu-checkbox:hover .btu-checkbox-input:not(:disabled) ~ .btu-checkbox-box': {
            background: 'color-mix(in oklch, var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700))), white 92%)',
            borderColor: 'color-mix(in oklch, var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700))), black 15%)',
        },
        '.btu-checkbox:hover .btu-checkbox-input:not(:disabled):is(:checked, :indeterminate) ~ .btu-checkbox-box': {
            background: 'color-mix(in oklch, var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700))), black 15%)',
            borderColor: 'color-mix(in oklch, var(--checkbox-color-primary, oklch(var(--btu-theme-primary-700))), black 15%)',
        },
        // -------------------------------------------------------------------------
        // Active press — box scale bounce (snap in fast, spring back with bounce bezier)
        // -------------------------------------------------------------------------
        '.btu-checkbox:active .btu-checkbox-input:not(:disabled, :checked, :indeterminate) ~ .btu-checkbox-box': {
            transform: 'scale(0.9)',
            transitionDuration: '0.05s',
        },
        '.btu-checkbox:active .btu-checkbox-input:not(:disabled):is(:checked, :indeterminate) ~ .btu-checkbox-box': {
            transform: 'scale(1.1)',
            transitionDuration: '0.05s',
        },
        // -------------------------------------------------------------------------
        // Focus visible — ring on the box
        // -------------------------------------------------------------------------
        '.btu-checkbox-input:focus-visible ~ .btu-checkbox-box': {
            borderColor: 'oklch(var(--btu-theme-primary-600))',
            boxShadow: '0px 0px 0px 4px oklch(var(--btu-theme-primary-100))',
        },
        // -------------------------------------------------------------------------
        // Disabled state
        // -------------------------------------------------------------------------
        '.btu-checkbox-input:disabled ~ .btu-checkbox-box': {
            background: 'oklch(var(--btu-theme-gray-100))',
            borderColor: 'oklch(var(--btu-theme-gray-300))',
            pointerEvents: 'none',
        },
        '.btu-checkbox-input:disabled:is(:checked, :indeterminate) ~ .btu-checkbox-box': {
            background: 'oklch(var(--btu-theme-gray-100))',
            borderColor: 'oklch(var(--btu-theme-gray-300))',
        },
        '.btu-checkbox-input:disabled:is(:checked, :indeterminate) ~ .btu-checkbox-box .btu-checkbox-icon': {
            color: 'oklch(var(--btu-theme-gray-300))',
        },
        '.btu-checkbox-input:disabled ~ .btu-checkbox-text': {
            color: 'oklch(var(--btu-theme-gray-300))',
        },
        '.btu-checkbox:has(.btu-checkbox-input:disabled)': {
            pointerEvents: 'none',
        },
        // -------------------------------------------------------------------------
        // Invalid / error state
        // -------------------------------------------------------------------------
        '.btu-checkbox-invalid .btu-checkbox-box': {
            borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
        },
        '.btu-checkbox-invalid .btu-checkbox-input:is(:checked, :indeterminate) ~ .btu-checkbox-box': {
            borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
        },
        '.btu-checkbox-invalid .btu-checkbox-label': {
            color: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
        },
        '.btu-checkbox-invalid:hover .btu-checkbox-input:not(:disabled, :checked, :indeterminate) ~ .btu-checkbox-box': {
            background: 'var(--btu-theme-white)',
            borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
        },
        '.btu-checkbox-invalid:hover .btu-checkbox-input:not(:disabled):is(:checked, :indeterminate) ~ .btu-checkbox-box': {
            borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
        },
        '.btu-checkbox-invalid .btu-checkbox-input:focus-visible ~ .btu-checkbox-box': {
            borderColor: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
        },
        // -------------------------------------------------------------------------
        // Text elements
        // -------------------------------------------------------------------------
        '.btu-checkbox-text': {
            display: 'flex',
            flexDirection: 'column',
            gap: '0.125rem',
        },
        '.btu-checkbox-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-checkbox-description': {
            fontSize: config('theme.fontSize.xs')?.[0] ?? '0.75rem',
            lineHeight: config('theme.fontSize.xs')?.[1] ?? '1.125rem',
            color: 'oklch(var(--btu-theme-gray-500))',
        },
        '.btu-checkbox-error': {
            fontSize: config('theme.fontSize.xs')?.[0] ?? '0.75rem',
            lineHeight: config('theme.fontSize.xs')?.[1] ?? '1.125rem',
            color: 'var(--checkbox-color-error, oklch(var(--btu-theme-error-600)))',
        },
        // -------------------------------------------------------------------------
        // Size variants
        // -------------------------------------------------------------------------
        // sm is the default — no modifier class needed, base dimensions apply
        '.btu-checkbox-md': {
            '--checkbox-box-size': '1.25rem',
            '--checkbox-icon-size': '0.875rem',
        },
        '.btu-checkbox-md .btu-checkbox-label': {
            fontSize: config('theme.fontSize.base')?.[0] ?? '1rem',
            lineHeight: config('theme.fontSize.base')?.[1] ?? '1.5rem',
        },
        '.btu-checkbox-md .btu-checkbox-description, .btu-checkbox-md .btu-checkbox-error': {
            fontSize: config('theme.fontSize.sm')?.[0] ?? '0.875rem',
            lineHeight: config('theme.fontSize.sm')?.[1] ?? '1.25rem',
        },
        // -------------------------------------------------------------------------
        // Reduced motion
        // -------------------------------------------------------------------------
        '@media (prefers-reduced-motion: reduce)': {
            '.btu-checkbox-box': {
                transition: 'background 0.01ms ease, border-color 0.01ms ease, box-shadow 0.01ms ease, transform 0.01ms ease',
            },
            '.btu-checkbox:active .btu-checkbox-input:not(:disabled) ~ .btu-checkbox-box': {
                transform: 'scale(1)',
            },
            '.btu-checkbox-icon': {
                transition: 'opacity 0.01ms ease',
                transform: 'scale(1)',
            },
            '.btu-checkbox-input:is(:checked, :indeterminate) ~ .btu-checkbox-box .btu-checkbox-icon': {
                transform: 'scale(1)',
                transition: 'opacity 0.01ms ease',
            },
        },
    };
    addComponents(components);
});
//# sourceMappingURL=tailwind-plugin-checkbox.js.map