loopwind 0.12.2 → 0.13.0

package/dist/lib/tailwind-browser.js

@@ -0,0 +1,656 @@
+/**
+ * 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 },
+    // 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' },
+};
+// 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,
+};
+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];
+    }
+    // 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) {
+    const { frame = 0, totalFrames = 100, durationMs = 3000 } = context;
+    const easeFn = easingFunctions[easing] || easingFunctions['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 = [];
+    let animationEasing = 'ease-out';
+    for (const className of classArray) {
+        // Check for easing modifiers
+        if (easingFunctions[className]) {
+            animationEasing = className;
+            continue;
+        }
+        // Check for animation classes
+        const animationResult = parseAnimationClass(className, animationContext, animationEasing);
+        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