import plugin from 'tailwindcss/plugin';
/**
 * Tooltip plugin using CSS anchor positioning and the native Popover API.
 *
 * Uses the HTML popover attribute for top-layer rendering. Animations use
 * @starting-style for entry and transition-behavior: allow-discrete for exit.
 *
 * Class Names:
 *
 *  btu-tooltip            - Base tooltip styles (hidden by default via popover)
 *  btu-tooltip-top        - Position above trigger (default)
 *  btu-tooltip-bottom     - Position below trigger
 *  btu-tooltip-left       - Position left of trigger
 *  btu-tooltip-right      - Position right of trigger
 *  btu-tooltip-no-arrow   - Hide the arrow pseudo-element
 *
 * Offset Sizes:
 *
 *  btu-tooltip-offset-sm  - 4px offset
 *  btu-tooltip-offset-md  - 8px offset (same as default)
 *  btu-tooltip-offset-lg  - 12px offset
 *  btu-tooltip-offset-xl  - 16px offset
 *
 * CSS Custom Properties:
 *
 *  --tooltip-color-background  - Background color (default: var(--btu-theme-white, #fff))
 *  --tooltip-color-text        - Text color (default: oklch(var(--btu-theme-gray-900)))
 *  --tooltip-border-radius     - Border radius (default: theme borderRadius.lg)
 */
module.exports = plugin(function ({ addComponents, theme, config }) {
    addComponents({
        // Base tooltip styles — exit state (applied when closing, before display:none)
        '.btu-tooltip': {
            // Structural custom properties — kept as declarations since they're
            // controlled by component props, not external CSS on parent elements.
            '--tooltip-offset': '8px',
            '--tooltip-arrow-size': '8px',
            padding: '8px 12px',
            backgroundColor: 'var(--tooltip-color-background, var(--btu-theme-white, #fff))',
            color: `var(--tooltip-color-text, oklch(var(--btu-theme-gray-900)))`,
            borderRadius: `var(--tooltip-border-radius, ${theme('borderRadius.lg')})`,
            boxShadow: theme('boxShadow.lg'),
            // theme('fontSize.xs') returns only the size string; config() gives the raw tuple
            fontSize: config('theme.fontSize.xs')?.[0] ?? '0.75rem',
            lineHeight: config('theme.fontSize.xs')?.[1] ?? '1.125rem',
            fontWeight: '500',
            whiteSpace: 'nowrap',
            textAlign: 'left',
            pointerEvents: 'none',
            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 (default)
        // Gap via inset `bottom`; margin-top drives the arrow flip via `margin: inherit`
        '.btu-tooltip-top': {
            'position-area': 'top',
            bottom: 'var(--tooltip-offset)',
            marginTop: 'var(--tooltip-offset)',
            'position-try-fallbacks': 'flip-block',
            translate: '0 4px',
            '&:popover-open': {
                translate: '0 0',
            },
        },
        // Position: bottom
        // Gap via inset `top`; margin-bottom drives the arrow flip
        '.btu-tooltip-bottom': {
            'position-area': 'bottom',
            top: 'var(--tooltip-offset)',
            marginBottom: 'var(--tooltip-offset)',
            'position-try-fallbacks': 'flip-block',
            translate: '0 -4px',
            '&:popover-open': {
                translate: '0 0',
            },
        },
        // Position: left
        // Gap via inset `right`; margin-left drives the arrow flip
        '.btu-tooltip-left': {
            'position-area': 'left',
            right: 'var(--tooltip-offset)',
            marginLeft: 'var(--tooltip-offset)',
            'position-try-fallbacks': 'flip-inline',
            translate: '4px 0',
            '&:popover-open': {
                translate: '0 0',
            },
        },
        // Position: right
        // Gap via inset `left`; margin-right drives the arrow flip
        '.btu-tooltip-right': {
            'position-area': 'right',
            left: 'var(--tooltip-offset)',
            marginRight: 'var(--tooltip-offset)',
            'position-try-fallbacks': 'flip-inline',
            translate: '-4px 0',
            '&:popover-open': {
                translate: '0 0',
            },
        },
        // Offset sizes
        '.btu-tooltip-offset-sm': { '--tooltip-offset': '4px' },
        '.btu-tooltip-offset-md': { '--tooltip-offset': '8px' },
        '.btu-tooltip-offset-lg': { '--tooltip-offset': '12px' },
        '.btu-tooltip-offset-xl': { '--tooltip-offset': '16px' },
        // @starting-style for entry animations
        '@starting-style': {
            '.btu-tooltip:popover-open': {
                opacity: '0',
            },
            '.btu-tooltip-top:popover-open': {
                translate: '0 4px',
            },
            '.btu-tooltip-bottom:popover-open': {
                translate: '0 -4px',
            },
            '.btu-tooltip-left:popover-open': {
                translate: '4px 0',
            },
            '.btu-tooltip-right:popover-open': {
                translate: '-4px 0',
            },
        },
        // Arrow for vertical tooltips (top/bottom).
        // Extends beyond both tooltip edges via negative inset. A hexagonal
        // clip-path creates arrow tips on both ends; margin: inherit auto-flips
        // the visible tip when position-try-fallbacks: flip-block activates.
        // See: https://frontendmasters.com/blog/perfectly-pointed-tooltips-a-foundation/
        // Arrow for vertical tooltips (top/bottom).
        // Centered at 50% of the tooltip panel. This aligns with the trigger center
        // because position-area centers the tooltip on the anchor element.
        '.btu-tooltip-top::before, .btu-tooltip-bottom::before': {
            content: '""',
            position: 'absolute',
            zIndex: '-1',
            width: 'var(--tooltip-arrow-size)',
            top: 'calc(-1 * var(--tooltip-offset))',
            bottom: 'calc(-1 * var(--tooltip-offset))',
            left: 'calc(50% - var(--tooltip-arrow-size) / 2)',
            clipPath: 'polygon(50% calc(var(--tooltip-offset) - var(--tooltip-arrow-size)), 100% var(--tooltip-offset), 100% calc(100% - var(--tooltip-offset)), 50% calc(100% - var(--tooltip-offset) + var(--tooltip-arrow-size)), 0 calc(100% - var(--tooltip-offset)), 0 var(--tooltip-offset))',
            background: 'inherit',
            margin: 'inherit',
        },
        // Arrow for horizontal tooltips (left/right).
        // Same technique rotated 90° for flip-inline.
        '.btu-tooltip-left::before, .btu-tooltip-right::before': {
            content: '""',
            position: 'absolute',
            zIndex: '-1',
            height: 'var(--tooltip-arrow-size)',
            left: 'calc(-1 * var(--tooltip-offset))',
            right: 'calc(-1 * var(--tooltip-offset))',
            top: 'calc(50% - var(--tooltip-arrow-size) / 2)',
            clipPath: 'polygon(calc(var(--tooltip-offset) - var(--tooltip-arrow-size)) 50%, var(--tooltip-offset) 0, calc(100% - var(--tooltip-offset)) 0, calc(100% - var(--tooltip-offset) + var(--tooltip-arrow-size)) 50%, calc(100% - var(--tooltip-offset)) 100%, var(--tooltip-offset) 100%)',
            background: 'inherit',
            margin: 'inherit',
        },
        // Hide arrow when opted out
        '.btu-tooltip-no-arrow::before': {
            content: 'none',
        },
        // Reduced motion: disable translate animation, keep opacity fade
        '@media (prefers-reduced-motion: reduce)': {
            '.btu-tooltip': {
                translate: 'none !important',
                transition: 'opacity 150ms ease, display 150ms ease allow-discrete, overlay 150ms ease allow-discrete',
            },
        },
    });
});
//# sourceMappingURL=tailwind-plugin-tooltip.js.map