import plugin from 'tailwindcss/plugin';
/**
 * Popover plugin using CSS anchor positioning and the native Popover API.
 *
 * Uses the HTML popover attribute for top-layer rendering, light dismiss,
 * and focus management. Animations use @starting-style for entry and
 * transition-behavior: allow-discrete for exit.
 *
 * Class Names:
 *
 *  btu-popover            - Base popover styles (hidden by default via popover)
 *  btu-popover-top        - Position above trigger
 *  btu-popover-bottom     - Position below trigger (default)
 *  btu-popover-left       - Position left of trigger
 *  btu-popover-right      - Position right of trigger
 *  btu-popover-no-arrow   - Hide the arrow pseudo-element
 *
 * Offset Sizes:
 *
 *  btu-popover-offset-sm  - 4px offset
 *  btu-popover-offset-md  - 8px offset (same as default)
 *  btu-popover-offset-lg  - 12px offset
 *  btu-popover-offset-xl  - 16px offset
 *
 * CSS Custom Properties:
 *
 *  --popover-color-background  - Background color (default: var(--btu-theme-white, #fff))
 *  --popover-color-title       - Title text color (consumer-applied on title elements; not set by plugin)
 *  --popover-color-content     - Base text color (default: oklch(var(--btu-theme-gray-900)))
 *  --popover-border-radius     - Border radius (default: theme borderRadius.lg)
 */
module.exports = plugin(function ({ addComponents, theme, config }) {
    addComponents({
        // Base popover styles — exit state (applied when closing, before display:none)
        '.btu-popover': {
            // Structural custom properties — kept as declarations since they're
            // controlled by component props, not external CSS on parent elements.
            '--popover-offset': '8px',
            '--popover-arrow-size': '8px',
            padding: '12px 16px',
            backgroundColor: `var(--popover-color-background, var(--btu-theme-white, #fff))`,
            color: 'var(--popover-color-content, oklch(var(--btu-theme-gray-900)))',
            borderRadius: `var(--popover-border-radius, ${theme('borderRadius.lg')})`,
            boxShadow: theme('boxShadow.lg'),
            // theme('fontSize.sm') returns only the size string; config() gives the raw tuple
            fontSize: config('theme.fontSize.sm')?.[0] ?? '0.875rem',
            lineHeight: config('theme.fontSize.sm')?.[1] ?? '1.25rem',
            fontWeight: '400',
            whiteSpace: 'normal',
            textAlign: 'left',
            maxWidth: '20rem',
            pointerEvents: 'auto',
            overflow: 'visible',
            isolation: 'isolate',
            margin: '0',
            inset: 'unset',
            border: 'none',
            opacity: '0',
            translate: '0 0',
            transition: 'opacity 150ms ease, translate 150ms ease, display 150ms ease allow-discrete, overlay 150ms ease allow-discrete',
            'position-visibility': 'anchors-visible',
            // Native popover reset — browser defaults override otherwise
            '&:popover-open': {
                overflow: 'visible',
                opacity: '1',
                translate: '0 0',
            },
        },
        // Position: top
        '.btu-popover-top': {
            'position-area': 'top',
            bottom: 'var(--popover-offset)',
            marginTop: 'var(--popover-offset)',
            'position-try-fallbacks': 'flip-block',
            translate: '0 4px',
            '&:popover-open': {
                translate: '0 0',
            },
        },
        // Position: bottom (default)
        '.btu-popover-bottom': {
            'position-area': 'bottom',
            top: 'var(--popover-offset)',
            marginBottom: 'var(--popover-offset)',
            'position-try-fallbacks': 'flip-block',
            translate: '0 -4px',
            '&:popover-open': {
                translate: '0 0',
            },
        },
        // Position: left
        '.btu-popover-left': {
            'position-area': 'left',
            right: 'var(--popover-offset)',
            marginLeft: 'var(--popover-offset)',
            'position-try-fallbacks': 'flip-inline',
            translate: '4px 0',
            '&:popover-open': {
                translate: '0 0',
            },
        },
        // Position: right
        '.btu-popover-right': {
            'position-area': 'right',
            left: 'var(--popover-offset)',
            marginRight: 'var(--popover-offset)',
            'position-try-fallbacks': 'flip-inline',
            translate: '-4px 0',
            '&:popover-open': {
                translate: '0 0',
            },
        },
        // Offset sizes
        '.btu-popover-offset-sm': { '--popover-offset': '4px' },
        '.btu-popover-offset-md': { '--popover-offset': '8px' },
        '.btu-popover-offset-lg': { '--popover-offset': '12px' },
        '.btu-popover-offset-xl': { '--popover-offset': '16px' },
        // @starting-style for entry animations
        '@starting-style': {
            '.btu-popover:popover-open': {
                opacity: '0',
            },
            '.btu-popover-top:popover-open': {
                translate: '0 4px',
            },
            '.btu-popover-bottom:popover-open': {
                translate: '0 -4px',
            },
            '.btu-popover-left:popover-open': {
                translate: '4px 0',
            },
            '.btu-popover-right:popover-open': {
                translate: '-4px 0',
            },
        },
        // Arrow for vertical popovers (top/bottom)
        // Centered at 50% of the popover panel. This aligns with the trigger center
        // because position-area centers the popover on the anchor element.
        '.btu-popover-top::before, .btu-popover-bottom::before': {
            content: '""',
            position: 'absolute',
            zIndex: '-1',
            width: 'var(--popover-arrow-size)',
            top: 'calc(-1 * var(--popover-offset))',
            bottom: 'calc(-1 * var(--popover-offset))',
            left: 'calc(50% - var(--popover-arrow-size) / 2)',
            clipPath: 'polygon(50% calc(var(--popover-offset) - var(--popover-arrow-size)), 100% var(--popover-offset), 100% calc(100% - var(--popover-offset)), 50% calc(100% - var(--popover-offset) + var(--popover-arrow-size)), 0 calc(100% - var(--popover-offset)), 0 var(--popover-offset))',
            background: 'inherit',
            margin: 'inherit',
        },
        // Arrow for horizontal popovers (left/right)
        '.btu-popover-left::before, .btu-popover-right::before': {
            content: '""',
            position: 'absolute',
            zIndex: '-1',
            height: 'var(--popover-arrow-size)',
            left: 'calc(-1 * var(--popover-offset))',
            right: 'calc(-1 * var(--popover-offset))',
            top: 'calc(50% - var(--popover-arrow-size) / 2)',
            clipPath: 'polygon(calc(var(--popover-offset) - var(--popover-arrow-size)) 50%, var(--popover-offset) 0, calc(100% - var(--popover-offset)) 0, calc(100% - var(--popover-offset) + var(--popover-arrow-size)) 50%, calc(100% - var(--popover-offset)) 100%, var(--popover-offset) 100%)',
            background: 'inherit',
            margin: 'inherit',
        },
        // Hide arrow when opted out
        '.btu-popover-no-arrow::before': {
            content: 'none',
        },
        // Reduced motion: disable translate animation, keep opacity fade
        '@media (prefers-reduced-motion: reduce)': {
            '.btu-popover': {
                translate: 'none !important',
                transition: 'opacity 150ms ease, display 150ms ease allow-discrete, overlay 150ms ease allow-discrete',
            },
        },
    });
});
//# sourceMappingURL=tailwind-plugin-popover.js.map