loopwind 0.23.0 → 0.24.0

package/dist/lib/tailwind-browser.js

@@ -1,853 +0,0 @@
-/**
- * Browser-safe version of tailwind.ts
- * This version doesn't import any Node.js modules and can be bundled for browser use.
- */
-// Tailwind color palette
-const TAILWIND_COLORS = {
-    slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' },
-    gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' },
-    zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' },
-    neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' },
-    stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' },
-    red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a' },
-    orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' },
-    amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' },
-    yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006' },
-    lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' },
-    green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' },
-    emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' },
-    teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' },
-    cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' },
-    sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' },
-    blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' },
-    indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' },
-    violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' },
-    purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' },
-    fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' },
-    pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' },
-    rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' },
-};
-// Browser-safe resolver functions
-function resolveColor(colorName, config) {
-    // First check Tailwind palette (e.g., "blue-600")
-    const colorMatch = colorName.match(/^(\w+)-(\d+)$/);
-    if (colorMatch) {
-        const [, name, shade] = colorMatch;
-        if (TAILWIND_COLORS[name]?.[shade]) {
-            return TAILWIND_COLORS[name][shade];
-        }
-    }
-    // Check config
-    if (!config?.theme)
-        return null;
-    // Check extend first
-    const extendColors = config.theme.extend?.colors;
-    if (extendColors?.[colorName])
-        return extendColors[colorName];
-    // Check base colors
-    const baseColors = config.theme.colors;
-    if (baseColors?.[colorName])
-        return baseColors[colorName];
-    return null;
-}
-function resolveSpacing(value, config) {
-    if (!config?.theme)
-        return null;
-    const extendSpacing = config.theme.extend?.spacing;
-    if (extendSpacing?.[value])
-        return extendSpacing[value];
-    const baseSpacing = config.theme.spacing;
-    if (baseSpacing?.[value])
-        return baseSpacing[value];
-    return null;
-}
-function resolveFontSize(size, config) {
-    if (!config?.theme)
-        return null;
-    const extendFontSize = config.theme.extend?.fontSize;
-    if (extendFontSize?.[size]) {
-        const val = extendFontSize[size];
-        if (Array.isArray(val)) {
-            return { fontSize: val[0], lineHeight: val[1] };
-        }
-        return { fontSize: val };
-    }
-    const baseFontSize = config.theme.fontSize;
-    if (baseFontSize?.[size]) {
-        const val = baseFontSize[size];
-        if (Array.isArray(val)) {
-            return { fontSize: val[0], lineHeight: val[1] };
-        }
-        return { fontSize: val };
-    }
-    return null;
-}
-function resolveBorderRadius(value, config) {
-    if (!config?.theme)
-        return null;
-    const extendRadius = config.theme.extend?.borderRadius;
-    if (extendRadius?.[value])
-        return extendRadius[value];
-    const baseRadius = config.theme.borderRadius;
-    if (baseRadius?.[value])
-        return baseRadius[value];
-    return null;
-}
-/**
- * Tailwind class to style property mapping
- */
-const TAILWIND_MAP = {
-    // Display
-    'flex': { display: 'flex' },
-    'inline-flex': { display: 'inline-flex' },
-    'block': { display: 'block' },
-    'inline-block': { display: 'inline-block' },
-    'hidden': { display: 'none' },
-    'contents': { display: 'contents' },
-    // Position
-    'static': { position: 'static' },
-    'relative': { position: 'relative' },
-    'absolute': { position: 'absolute' },
-    // Overflow
-    'overflow-visible': { overflow: 'visible' },
-    'overflow-hidden': { overflow: 'hidden' },
-    // Flex Direction
-    'flex-row': { flexDirection: 'row' },
-    'flex-col': { flexDirection: 'column' },
-    'flex-row-reverse': { flexDirection: 'row-reverse' },
-    'flex-col-reverse': { flexDirection: 'column-reverse' },
-    // Flex Wrap
-    'flex-wrap': { flexWrap: 'wrap' },
-    'flex-nowrap': { flexWrap: 'nowrap' },
-    'flex-wrap-reverse': { flexWrap: 'wrap-reverse' },
-    // Flex
-    'flex-1': { flex: '1 1 0%' },
-    'flex-auto': { flex: '1 1 auto' },
-    'flex-initial': { flex: '0 1 auto' },
-    'flex-none': { flex: 'none' },
-    // Justify Content
-    'justify-start': { justifyContent: 'flex-start' },
-    'justify-end': { justifyContent: 'flex-end' },
-    'justify-center': { justifyContent: 'center' },
-    'justify-between': { justifyContent: 'space-between' },
-    'justify-around': { justifyContent: 'space-around' },
-    'justify-evenly': { justifyContent: 'space-evenly' },
-    // Align Items
-    'items-start': { alignItems: 'flex-start' },
-    'items-end': { alignItems: 'flex-end' },
-    'items-center': { alignItems: 'center' },
-    'items-baseline': { alignItems: 'baseline' },
-    'items-stretch': { alignItems: 'stretch' },
-    // Width & Height
-    'w-full': { width: '100%' },
-    'h-full': { height: '100%' },
-    'w-screen': { width: '100vw' },
-    'h-screen': { height: '100vh' },
-    'w-auto': { width: 'auto' },
-    'h-auto': { height: 'auto' },
-    // Text Alignment
-    'text-left': { textAlign: 'left' },
-    'text-center': { textAlign: 'center' },
-    'text-right': { textAlign: 'right' },
-    'text-justify': { textAlign: 'justify' },
-    // Font Weight
-    'font-thin': { fontWeight: 100 },
-    'font-extralight': { fontWeight: 200 },
-    'font-light': { fontWeight: 300 },
-    'font-normal': { fontWeight: 400 },
-    'font-medium': { fontWeight: 500 },
-    'font-semibold': { fontWeight: 600 },
-    'font-bold': { fontWeight: 700 },
-    'font-extrabold': { fontWeight: 800 },
-    'font-black': { fontWeight: 900 },
-    // Font Style
-    'italic': { fontStyle: 'italic' },
-    'not-italic': { fontStyle: 'normal' },
-    // Colors
-    'text-white': { color: '#ffffff' },
-    'text-black': { color: '#000000' },
-    'bg-white': { background: '#ffffff' },
-    'bg-black': { background: '#000000' },
-    'bg-transparent': { background: 'transparent' },
-    // Rounded
-    'rounded': { borderRadius: '0.25rem' },
-    'rounded-none': { borderRadius: '0' },
-    'rounded-sm': { borderRadius: '0.125rem' },
-    'rounded-md': { borderRadius: '0.375rem' },
-    'rounded-lg': { borderRadius: '0.5rem' },
-    'rounded-xl': { borderRadius: '0.75rem' },
-    'rounded-2xl': { borderRadius: '1rem' },
-    'rounded-3xl': { borderRadius: '1.5rem' },
-    'rounded-full': { borderRadius: '9999px' },
-};
-// Spacing scale
-const SPACING_SCALE = {
-    '0': '0px',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '20': '5rem',
-    '24': '6rem',
-    '32': '8rem',
-    '40': '10rem',
-    '48': '12rem',
-    '56': '14rem',
-    '64': '16rem',
-};
-// Font size map
-const FONT_SIZE_MAP = {
-    'text-xs': { fontSize: '0.75rem', lineHeight: '1rem' },
-    'text-sm': { fontSize: '0.875rem', lineHeight: '1.25rem' },
-    'text-base': { fontSize: '1rem', lineHeight: '1.5rem' },
-    'text-lg': { fontSize: '1.125rem', lineHeight: '1.75rem' },
-    'text-xl': { fontSize: '1.25rem', lineHeight: '1.75rem' },
-    'text-2xl': { fontSize: '1.5rem', lineHeight: '2rem' },
-    'text-3xl': { fontSize: '1.875rem', lineHeight: '2.25rem' },
-    'text-4xl': { fontSize: '2.25rem', lineHeight: '2.5rem' },
-    'text-5xl': { fontSize: '3rem', lineHeight: '1' },
-    'text-6xl': { fontSize: '3.75rem', lineHeight: '1' },
-    'text-7xl': { fontSize: '4.5rem', lineHeight: '1' },
-    'text-8xl': { fontSize: '6rem', lineHeight: '1' },
-    'text-9xl': { fontSize: '8rem', lineHeight: '1' },
-};
-/**
- * Interpolate linearly between spring keyframes
- * Based on CSS linear() spring easing
- */
-function interpolateSpringKeyframes(t) {
-    // Spring keyframes: [progress, value] pairs
-    const keyframes = [
-        [0, 0],
-        [0.0115, 0.0069],
-        [0.023, 0.026],
-        [0.0518, 0.1135],
-        [0.0778, 0.2229],
-        [0.1584, 0.5977],
-        [0.1783, 0.7014],
-        [0.1982, 0.7904],
-        [0.2181, 0.8641],
-        [0.238, 0.9228],
-        [0.288, 0.9676],
-        [0.3168, 1.0032],
-        [0.3367, 1.0225],
-        [0.3629, 1.0352],
-        [0.3888, 1.0431],
-        [0.4205, 1.046],
-        [0.4435, 1.0448],
-        [0.4723, 1.0407],
-        [0.6163, 1.0118],
-        [0.6941, 1.0025],
-        [0.8035, 0.9981],
-        [0.9994, 0.9992],
-        [1, 1]
-    ];
-    // Find the two keyframes to interpolate between
-    for (let i = 0; i < keyframes.length - 1; i++) {
-        const [t1, v1] = keyframes[i];
-        const [t2, v2] = keyframes[i + 1];
-        if (t >= t1 && t <= t2) {
-            // Linear interpolation between keyframes
-            const progress = (t - t1) / (t2 - t1);
-            return v1 + (v2 - v1) * progress;
-        }
-    }
-    return t < 0.5 ? 0 : 1;
-}
-/**
- * Generate a spring easing function with custom parameters
- * Based on kvin.me/css-springs implementation
- * @param mass - Mass of the spring (default: 1)
- * @param stiffness - Stiffness of the spring (default: 100)
- * @param damping - Damping coefficient (default: 10)
- * @param velocity - Initial velocity (default: 0)
- * @returns Spring easing function
- */
-function generateSpringEasing(mass = 1, stiffness = 100, damping = 10, velocity = 0) {
-    const w0 = Math.sqrt(stiffness / mass);
-    const zeta = damping / (2 * Math.sqrt(stiffness * mass));
-    const wd = zeta < 1 ? w0 * Math.sqrt(1 - zeta * zeta) : 0;
-    const b = zeta < 1 ? (zeta * w0 + -velocity) / wd : -velocity + w0;
-    function solver(t) {
-        let result;
-        if (zeta < 1) {
-            result = Math.exp(-t * zeta * w0) * (1 * Math.cos(wd * t) + b * Math.sin(wd * t));
-        }
-        else {
-            result = (1 + b * t) * Math.exp(-t * w0);
-        }
-        return 1 - result;
-    }
-    // Calculate ideal duration (when spring settles)
-    const duration = (() => {
-        const step = 1 / 6;
-        let time = 0;
-        while (true) {
-            if (Math.abs(1 - solver(time)) < 0.001) {
-                const restStart = time;
-                let restSteps = 1;
-                while (true) {
-                    time += step;
-                    if (Math.abs(1 - solver(time)) >= 0.001)
-                        break;
-                    restSteps++;
-                    if (restSteps === 16)
-                        return restStart;
-                }
-            }
-            time += step;
-        }
-    })();
-    // Return easing function normalized to 0-1 range
-    return (t) => solver(duration * t);
-}
-// Easing functions
-const easingFunctions = {
-    'linear': (t) => t,
-    'ease-in': (t) => t * t,
-    'ease-out': (t) => t * (2 - t),
-    'ease-in-out': (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
-    'ease-in-cubic': (t) => t * t * t,
-    'ease-out-cubic': (t) => (--t) * t * t + 1,
-    'ease-in-out-cubic': (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
-    'ease-in-quart': (t) => t * t * t * t,
-    'ease-out-quart': (t) => 1 - (--t) * t * t * t,
-    'ease-in-out-quart': (t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t,
-    'spring': interpolateSpringKeyframes,
-};
-function hexToRgba(hex, opacity) {
-    const cleanHex = hex.replace('#', '');
-    const r = parseInt(cleanHex.substring(0, 2), 16);
-    const g = parseInt(cleanHex.substring(2, 4), 16);
-    const b = parseInt(cleanHex.substring(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-}
-function parseTimeValue(value) {
-    if (value.startsWith('[') && value.endsWith(']')) {
-        const inner = value.slice(1, -1);
-        if (inner.endsWith('ms')) {
-            return parseFloat(inner.slice(0, -2));
-        }
-        else if (inner.endsWith('s')) {
-            return parseFloat(inner.slice(0, -1)) * 1000;
-        }
-        return parseFloat(inner);
-    }
-    return parseFloat(value);
-}
-function parseClass(className, tailwindConfig = null, loopwindConfig = null) {
-    if (TAILWIND_MAP[className]) {
-        return TAILWIND_MAP[className];
-    }
-    // Handle font-family classes (font-sans, font-serif, font-mono)
-    const fontFamilyMatch = className.match(/^font-(sans|serif|mono)$/);
-    if (fontFamilyMatch) {
-        const fontType = fontFamilyMatch[1];
-        // Check loopwindConfig for custom font definitions
-        if (loopwindConfig?.fonts?.[fontType]) {
-            const fontDef = loopwindConfig.fonts[fontType];
-            // Could be array format or object with family
-            let familyArray;
-            if (Array.isArray(fontDef)) {
-                familyArray = fontDef;
-            }
-            else if (fontDef.family) {
-                familyArray = fontDef.family;
-            }
-            else {
-                familyArray = [];
-            }
-            if (familyArray.length > 0) {
-                const fontFamily = familyArray.map(f => f.includes(' ') ? `'${f}'` : f).join(', ');
-                return { fontFamily };
-            }
-        }
-        // Default fallbacks if not in loopwindConfig (Inter is bundled with loopwind)
-        const defaultFonts = {
-            'sans': "Inter, ui-sans-serif, system-ui, sans-serif",
-            'serif': "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
-            'mono': "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace"
-        };
-        return { fontFamily: defaultFonts[fontType] };
-    }
-    // Parse arbitrary values like text-[62px], w-[200px], etc.
-    const arbitraryFontMatch = className.match(/^text-\[(.+)\]$/);
-    if (arbitraryFontMatch) {
-        return { fontSize: arbitraryFontMatch[1] };
-    }
-    const arbitraryWidthMatch = className.match(/^w-\[(.+)\]$/);
-    if (arbitraryWidthMatch) {
-        return { width: arbitraryWidthMatch[1] };
-    }
-    const arbitraryHeightMatch = className.match(/^h-\[(.+)\]$/);
-    if (arbitraryHeightMatch) {
-        return { height: arbitraryHeightMatch[1] };
-    }
-    const arbitraryPaddingMatch = className.match(/^(p)(x|y|t|b|l|r)?-\[(.+)\]$/);
-    if (arbitraryPaddingMatch) {
-        const [, , direction, value] = arbitraryPaddingMatch;
-        if (!direction)
-            return { padding: value };
-        if (direction === 'x')
-            return { paddingLeft: value, paddingRight: value };
-        if (direction === 'y')
-            return { paddingTop: value, paddingBottom: value };
-        const dirMap = { t: 'Top', b: 'Bottom', l: 'Left', r: 'Right' };
-        return { [`padding${dirMap[direction]}`]: value };
-    }
-    const arbitraryMarginMatch = className.match(/^(m)(x|y|t|b|l|r)?-\[(.+)\]$/);
-    if (arbitraryMarginMatch) {
-        const [, , direction, value] = arbitraryMarginMatch;
-        if (!direction)
-            return { margin: value };
-        if (direction === 'x')
-            return { marginLeft: value, marginRight: value };
-        if (direction === 'y')
-            return { marginTop: value, marginBottom: value };
-        const dirMap = { t: 'Top', b: 'Bottom', l: 'Left', r: 'Right' };
-        return { [`margin${dirMap[direction]}`]: value };
-    }
-    const arbitraryGapMatch = className.match(/^gap(-x|-y)?-\[(.+)\]$/);
-    if (arbitraryGapMatch) {
-        const [, direction, value] = arbitraryGapMatch;
-        if (!direction)
-            return { gap: value };
-        if (direction === '-x')
-            return { columnGap: value };
-        if (direction === '-y')
-            return { rowGap: value };
-    }
-    const arbitraryRoundedMatch = className.match(/^rounded-\[(.+)\]$/);
-    if (arbitraryRoundedMatch) {
-        return { borderRadius: arbitraryRoundedMatch[1] };
-    }
-    const arbitraryLeadingMatch = className.match(/^leading-\[(.+)\]$/);
-    if (arbitraryLeadingMatch) {
-        return { lineHeight: arbitraryLeadingMatch[1] };
-    }
-    const arbitraryTrackingMatch = className.match(/^tracking-\[(.+)\]$/);
-    if (arbitraryTrackingMatch) {
-        return { letterSpacing: arbitraryTrackingMatch[1] };
-    }
-    // Parse font sizes
-    const fontSizeMatch = className.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/);
-    if (fontSizeMatch) {
-        const size = fontSizeMatch[1];
-        const configSize = resolveFontSize(size, tailwindConfig);
-        if (configSize)
-            return configSize;
-        if (FONT_SIZE_MAP[className])
-            return FONT_SIZE_MAP[className];
-    }
-    // Parse padding/margin
-    const spacingMatch = className.match(/^(p|m)(x|y|t|b|l|r)?-(\d+|px)$/);
-    if (spacingMatch) {
-        const [, type, direction, value] = spacingMatch;
-        let size = resolveSpacing(value, tailwindConfig) || SPACING_SCALE[value] || `${parseInt(value) * 0.25}rem`;
-        const prop = type === 'p' ? 'padding' : 'margin';
-        if (!direction) {
-            return { [prop]: size };
-        }
-        else if (direction === 'x') {
-            return { [`${prop}Left`]: size, [`${prop}Right`]: size };
-        }
-        else if (direction === 'y') {
-            return { [`${prop}Top`]: size, [`${prop}Bottom`]: size };
-        }
-        else {
-            const dirMap = { t: 'Top', b: 'Bottom', l: 'Left', r: 'Right' };
-            return { [`${prop}${dirMap[direction]}`]: size };
-        }
-    }
-    // Parse width/height
-    const sizeMatch = className.match(/^(w|h)-(\d+)$/);
-    if (sizeMatch) {
-        const [, prop, value] = sizeMatch;
-        const size = resolveSpacing(value, tailwindConfig) || SPACING_SCALE[value] || `${parseInt(value) * 0.25}rem`;
-        return { [prop === 'w' ? 'width' : 'height']: size };
-    }
-    // Parse gap
-    const gapMatch = className.match(/^gap(-x|-y)?-(\d+)$/);
-    if (gapMatch) {
-        const [, direction, value] = gapMatch;
-        const size = resolveSpacing(value, tailwindConfig) || SPACING_SCALE[value] || `${parseInt(value) * 0.25}rem`;
-        if (!direction) {
-            return { gap: size };
-        }
-        else if (direction === '-x') {
-            return { columnGap: size };
-        }
-        else if (direction === '-y') {
-            return { rowGap: size };
-        }
-    }
-    // Parse opacity
-    const opacityMatch = className.match(/^opacity-(\d+)$/);
-    if (opacityMatch) {
-        return { opacity: parseInt(opacityMatch[1]) / 100 };
-    }
-    // Parse colors with opacity modifier
-    const bgMatch = className.match(/^bg-([\w-]+)(?:\/(\d+))?$/);
-    if (bgMatch) {
-        const colorName = bgMatch[1];
-        const opacityValue = bgMatch[2];
-        let color = resolveColor(colorName, tailwindConfig);
-        if (!color && loopwindConfig?.colors?.[colorName]) {
-            color = loopwindConfig.colors[colorName];
-        }
-        if (color) {
-            if (opacityValue) {
-                const opacity = parseInt(opacityValue) / 100;
-                const hex = color.replace('#', '');
-                const r = parseInt(hex.substring(0, 2), 16);
-                const g = parseInt(hex.substring(2, 4), 16);
-                const b = parseInt(hex.substring(4, 6), 16);
-                return { background: `rgba(${r}, ${g}, ${b}, ${opacity})` };
-            }
-            return { background: color };
-        }
-    }
-    const textMatch = className.match(/^text-([\w-]+)(?:\/(\d+))?$/);
-    if (textMatch) {
-        const colorName = textMatch[1];
-        const opacityValue = textMatch[2];
-        let color = resolveColor(colorName, tailwindConfig);
-        if (!color && loopwindConfig?.colors?.[colorName]) {
-            color = loopwindConfig.colors[colorName];
-        }
-        if (color) {
-            if (opacityValue) {
-                const opacity = parseInt(opacityValue) / 100;
-                const hex = color.replace('#', '');
-                const r = parseInt(hex.substring(0, 2), 16);
-                const g = parseInt(hex.substring(2, 4), 16);
-                const b = parseInt(hex.substring(4, 6), 16);
-                return { color: `rgba(${r}, ${g}, ${b}, ${opacity})` };
-            }
-            return { color: color };
-        }
-    }
-    // Parse gradients
-    const gradientMatch = className.match(/^bg-(?:gradient|linear)-to-(t|b|l|r|tr|tl|br|bl)$/);
-    if (gradientMatch) {
-        const normalizedClass = className.replace('bg-linear-to-', 'bg-gradient-to-');
-        return { __gradientDirection: normalizedClass };
-    }
-    const gradientStopMatch = className.match(/^(from|via|to)-([\w-]+)(?:\/(\d+))?$/);
-    if (gradientStopMatch) {
-        const [, position, colorName, opacityValue] = gradientStopMatch;
-        let color = resolveColor(colorName, tailwindConfig);
-        if (!color && loopwindConfig?.colors?.[colorName]) {
-            color = loopwindConfig.colors[colorName];
-        }
-        if (color) {
-            let finalColor = color;
-            if (opacityValue) {
-                const opacity = parseInt(opacityValue) / 100;
-                const hex = color.replace('#', '');
-                const r = parseInt(hex.substring(0, 2), 16);
-                const g = parseInt(hex.substring(2, 4), 16);
-                const b = parseInt(hex.substring(4, 6), 16);
-                finalColor = `rgba(${r}, ${g}, ${b}, ${opacity})`;
-            }
-            return { [`__gradient${position.charAt(0).toUpperCase() + position.slice(1)}`]: finalColor };
-        }
-    }
-    return {};
-}
-function parseAnimationClass(className, context, easing, customEasingFunctions = {}) {
-    const { frame = 0, totalFrames = 100, durationMs = 3000 } = context;
-    const allEasingFunctions = { ...easingFunctions, ...customEasingFunctions };
-    const easeFn = allEasingFunctions[easing] || allEasingFunctions['ease-out'];
-    const currentMs = (frame / totalFrames) * durationMs;
-    // Enter animations
-    const enterMatch = className.match(/^enter-([\w-]+)(?:\/(\[[\d.]+(?:ms|s)?\]|\d+)\/(\[[\d.]+(?:ms|s)?\]|\d+))?$/);
-    if (enterMatch) {
-        const [, type, startStr, durationStr] = enterMatch;
-        const startMs = startStr ? parseTimeValue(startStr) : 0;
-        const animDurationMs = durationStr ? parseTimeValue(durationStr) : durationMs;
-        const endMs = startMs + animDurationMs;
-        let localProgress = 0;
-        if (currentMs <= startMs) {
-            localProgress = 0;
-        }
-        else if (currentMs >= endMs) {
-            localProgress = 1;
-        }
-        else {
-            localProgress = (currentMs - startMs) / animDurationMs;
-        }
-        const easedProgress = easeFn(localProgress);
-        return getEnterAnimationStyles(type, easedProgress);
-    }
-    // Exit animations
-    const exitMatch = className.match(/^exit-([\w-]+)(?:\/(\[[\d.]+(?:ms|s)?\]|\d+)\/(\[[\d.]+(?:ms|s)?\]|\d+))?$/);
-    if (exitMatch) {
-        const [, type, startStr, durationStr] = exitMatch;
-        const startMs = startStr ? parseTimeValue(startStr) : 0;
-        const animDurationMs = durationStr ? parseTimeValue(durationStr) : durationMs;
-        const endMs = startMs + animDurationMs;
-        let localProgress = 0;
-        if (currentMs <= startMs) {
-            localProgress = 0;
-        }
-        else if (currentMs >= endMs) {
-            localProgress = 1;
-        }
-        else {
-            localProgress = (currentMs - startMs) / animDurationMs;
-        }
-        const easedProgress = easeFn(localProgress);
-        return getExitAnimationStyles(type, easedProgress);
-    }
-    // Loop animations
-    const loopMatch = className.match(/^loop-([\w-]+)(?:\/(\[[\d.]+(?:ms|s)?\]|\d+))?$/);
-    if (loopMatch) {
-        const [, type, loopDurationStr] = loopMatch;
-        const loopDurationMs = loopDurationStr ? parseTimeValue(loopDurationStr) : 1000;
-        const loopProgress = (currentMs % loopDurationMs) / loopDurationMs;
-        return getLoopAnimationStyles(type, loopProgress);
-    }
-    return null;
-}
-function getEnterAnimationStyles(type, easedProgress) {
-    switch (type) {
-        case 'fade-in':
-            return { opacity: easedProgress };
-        case 'fade-in-up':
-            return { transform: `translateY(${(1 - easedProgress) * 30}px)`, opacity: easedProgress };
-        case 'fade-in-down':
-            return { transform: `translateY(${(1 - easedProgress) * -30}px)`, opacity: easedProgress };
-        case 'fade-in-left':
-            return { transform: `translateX(${(1 - easedProgress) * -30}px)`, opacity: easedProgress };
-        case 'fade-in-right':
-            return { transform: `translateX(${(1 - easedProgress) * 30}px)`, opacity: easedProgress };
-        case 'slide-up':
-            return { transform: `translateY(${(1 - easedProgress) * 100}px)`, opacity: easedProgress };
-        case 'slide-down':
-            return { transform: `translateY(${(1 - easedProgress) * -100}px)`, opacity: easedProgress };
-        case 'slide-left':
-            return { transform: `translateX(${(1 - easedProgress) * -100}px)`, opacity: easedProgress };
-        case 'slide-right':
-            return { transform: `translateX(${(1 - easedProgress) * 100}px)`, opacity: easedProgress };
-        case 'scale-in':
-            return { transform: `scale(${0.5 + easedProgress * 0.5})`, opacity: easedProgress };
-        case 'zoom-in':
-            return { transform: `scale(${easedProgress})`, opacity: easedProgress };
-        case 'bounce-in': {
-            const bounce = easedProgress < 0.7
-                ? easedProgress / 0.7 * 1.1
-                : 1.1 - Math.sin((easedProgress - 0.7) / 0.3 * Math.PI / 2) * 0.1;
-            return { transform: `scale(${bounce})`, opacity: Math.min(1, easedProgress * 2) };
-        }
-        case 'bounce-in-up': {
-            const bounceY = easedProgress < 0.7
-                ? (1 - easedProgress / 0.7) * 50 - (easedProgress / 0.7) * 8
-                : -8 + (easedProgress - 0.7) / 0.3 * 8;
-            return { transform: `translateY(${bounceY}px)`, opacity: Math.min(1, easedProgress * 2) };
-        }
-        default:
-            return null;
-    }
-}
-function getExitAnimationStyles(type, easedProgress) {
-    switch (type) {
-        case 'fade-out':
-            return { opacity: 1 - easedProgress };
-        case 'fade-out-up':
-            return { transform: `translateY(${easedProgress * -30}px)`, opacity: 1 - easedProgress };
-        case 'fade-out-down':
-            return { transform: `translateY(${easedProgress * 30}px)`, opacity: 1 - easedProgress };
-        default:
-            return null;
-    }
-}
-function getLoopAnimationStyles(type, loopProgress) {
-    switch (type) {
-        case 'fade': {
-            const pulseValue = 0.5 + Math.sin(loopProgress * Math.PI * 2) * 0.5;
-            return { opacity: pulseValue };
-        }
-        case 'bounce': {
-            const bounceY = Math.abs(Math.sin(loopProgress * Math.PI)) * -20;
-            return { transform: `translateY(${bounceY}px)` };
-        }
-        case 'spin': {
-            const spinAngle = loopProgress * 360;
-            return { transform: `rotate(${spinAngle}deg)` };
-        }
-        case 'ping': {
-            const pingScale = 1 + loopProgress;
-            const pingOpacity = 1 - loopProgress;
-            return { transform: `scale(${pingScale})`, opacity: pingOpacity };
-        }
-        case 'float': {
-            const floatY = Math.sin(loopProgress * Math.PI * 2) * 10;
-            return { transform: `translateY(${floatY}px)` };
-        }
-        case 'pulse': {
-            const pulseScale = 1 + Math.sin(loopProgress * Math.PI * 2) * 0.05;
-            return { transform: `scale(${pulseScale})` };
-        }
-        default:
-            return null;
-    }
-}
-export function tw(classes, tailwindConfig = null, loopwindConfig = null, animationContext = {}) {
-    const classArray = classes.split(' ').filter(Boolean);
-    let styles = {};
-    let gradientData = {};
-    let transforms = [];
-    let animationOpacities = [];
-    // Default easing (backwards compatible - applies to all animations)
-    let defaultEasing = 'ease-out';
-    // Per-animation-type easing (overrides default for specific types)
-    let enterEasing = null;
-    let exitEasing = null;
-    let loopEasing = null;
-    // Custom spring easing functions (generated on-demand)
-    const customEasingFunctions = {};
-    for (const className of classArray) {
-        // Check for configurable spring easing: spring/mass/stiffness/damping
-        const springConfigMatch = className.match(/^(enter-ease-|exit-ease-|loop-ease-)?spring\/([^\/]+)\/([^\/]+)\/([^\/]+)$/);
-        if (springConfigMatch) {
-            const [, prefix, massStr, stiffnessStr, dampingStr] = springConfigMatch;
-            const mass = parseFloat(massStr);
-            const stiffness = parseFloat(stiffnessStr);
-            const damping = parseFloat(dampingStr);
-            if (!isNaN(mass) && !isNaN(stiffness) && !isNaN(damping)) {
-                const customSpring = generateSpringEasing(mass, stiffness, damping);
-                const customKey = `spring-${mass}-${stiffness}-${damping}`;
-                customEasingFunctions[customKey] = customSpring;
-                if (prefix === 'enter-ease-') {
-                    enterEasing = customKey;
-                }
-                else if (prefix === 'exit-ease-') {
-                    exitEasing = customKey;
-                }
-                else if (prefix === 'loop-ease-') {
-                    loopEasing = customKey;
-                }
-                else {
-                    defaultEasing = customKey;
-                }
-            }
-            continue;
-        }
-        // Check for default easing modifier (applies to all animations)
-        if (easingFunctions[className]) {
-            defaultEasing = className;
-            continue;
-        }
-        // Check for per-animation-type easing modifiers
-        const enterEasingMatch = className.match(/^enter-ease-(.+)$/);
-        if (enterEasingMatch) {
-            const easingName = enterEasingMatch[1];
-            if (easingFunctions[easingName]) {
-                enterEasing = easingName;
-            }
-            continue;
-        }
-        const exitEasingMatch = className.match(/^exit-ease-(.+)$/);
-        if (exitEasingMatch) {
-            const easingName = exitEasingMatch[1];
-            if (easingFunctions[easingName]) {
-                exitEasing = easingName;
-            }
-            continue;
-        }
-        const loopEasingMatch = className.match(/^loop-ease-(.+)$/);
-        if (loopEasingMatch) {
-            const easingName = loopEasingMatch[1];
-            if (easingFunctions[easingName]) {
-                loopEasing = easingName;
-            }
-            continue;
-        }
-        // Determine which easing to use for this animation class
-        let currentEasing = defaultEasing;
-        if (className.startsWith('enter-') && enterEasing) {
-            currentEasing = enterEasing;
-        }
-        else if (className.startsWith('exit-') && exitEasing) {
-            currentEasing = exitEasing;
-        }
-        else if (className.startsWith('loop-') && loopEasing) {
-            currentEasing = loopEasing;
-        }
-        // Merge custom easing functions with built-in ones for this animation
-        const allEasingFunctions = { ...easingFunctions, ...customEasingFunctions };
-        // Check for animation classes
-        const animationResult = parseAnimationClass(className, animationContext, currentEasing, allEasingFunctions);
-        if (animationResult) {
-            if (animationResult.opacity !== undefined) {
-                animationOpacities.push(animationResult.opacity);
-            }
-            if (animationResult.transform) {
-                transforms.push(animationResult.transform);
-            }
-            if (animationResult.transformOrigin) {
-                styles.transformOrigin = animationResult.transformOrigin;
-            }
-            continue;
-        }
-        const parsed = parseClass(className, tailwindConfig, loopwindConfig);
-        // Collect gradient markers
-        if (parsed.__gradientDirection) {
-            gradientData.direction = parsed.__gradientDirection;
-        }
-        else if (parsed.__gradientFrom) {
-            gradientData.from = parsed.__gradientFrom;
-        }
-        else if (parsed.__gradientVia) {
-            gradientData.via = parsed.__gradientVia;
-        }
-        else if (parsed.__gradientTo) {
-            gradientData.to = parsed.__gradientTo;
-        }
-        else if (parsed.transform) {
-            transforms.push(parsed.transform);
-        }
-        else {
-            styles = { ...styles, ...parsed };
-        }
-    }
-    // Convert gradient data to backgroundImage
-    if (gradientData.direction && (gradientData.from || gradientData.to)) {
-        const directionMap = {
-            'bg-gradient-to-t': 'to top',
-            'bg-gradient-to-b': 'to bottom',
-            'bg-gradient-to-l': 'to left',
-            'bg-gradient-to-r': 'to right',
-            'bg-gradient-to-tr': 'to top right',
-            'bg-gradient-to-tl': 'to top left',
-            'bg-gradient-to-br': 'to bottom right',
-            'bg-gradient-to-bl': 'to bottom left',
-        };
-        const direction = directionMap[gradientData.direction] || 'to bottom';
-        const stops = [];
-        if (gradientData.from)
-            stops.push(gradientData.from);
-        if (gradientData.via)
-            stops.push(gradientData.via);
-        if (gradientData.to)
-            stops.push(gradientData.to);
-        styles.backgroundImage = `linear-gradient(${direction}, ${stops.join(', ')})`;
-    }
-    // Combine transforms
-    if (transforms.length > 0) {
-        styles.transform = transforms.join(' ');
-    }
-    // Combine animation opacities
-    if (animationOpacities.length > 0) {
-        styles.opacity = animationOpacities.reduce((acc, val) => acc * val, 1);
-    }
-    return styles;
-}
-//# sourceMappingURL=tailwind-browser.js.map