loopwind 0.9.1

package/dist/lib/tailwind.js

@@ -0,0 +1,994 @@
+import { resolveColor, resolveSpacing, resolveFontSize, resolveBorderRadius, } from './tailwind-config-loader.js';
+/**
+ * Tailwind class to style property mapping
+ * This is a simplified version - in production you'd parse the full Tailwind config
+ */
+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' },
+    // Align Content
+    'content-start': { alignContent: 'flex-start' },
+    'content-end': { alignContent: 'flex-end' },
+    'content-center': { alignContent: 'center' },
+    'content-between': { alignContent: 'space-between' },
+    'content-around': { alignContent: 'space-around' },
+    'content-evenly': { alignContent: 'space-evenly' },
+    'content-stretch': { alignContent: 'stretch' },
+    // Align Self
+    'self-auto': { alignSelf: 'auto' },
+    'self-start': { alignSelf: 'flex-start' },
+    'self-end': { alignSelf: 'flex-end' },
+    'self-center': { alignSelf: 'center' },
+    'self-stretch': { alignSelf: 'stretch' },
+    'self-baseline': { alignSelf: 'baseline' },
+    // 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' },
+    // Max Width
+    'max-w-none': { maxWidth: 'none' },
+    'max-w-xs': { maxWidth: '20rem' },
+    'max-w-sm': { maxWidth: '24rem' },
+    'max-w-md': { maxWidth: '28rem' },
+    'max-w-lg': { maxWidth: '32rem' },
+    'max-w-xl': { maxWidth: '36rem' },
+    'max-w-2xl': { maxWidth: '42rem' },
+    'max-w-3xl': { maxWidth: '48rem' },
+    'max-w-4xl': { maxWidth: '56rem' },
+    'max-w-5xl': { maxWidth: '64rem' },
+    'max-w-6xl': { maxWidth: '72rem' },
+    'max-w-7xl': { maxWidth: '80rem' },
+    'max-w-full': { maxWidth: '100%' },
+    // Min Width
+    'min-w-0': { minWidth: '0' },
+    'min-w-full': { minWidth: '100%' },
+    // Max Height
+    'max-h-full': { maxHeight: '100%' },
+    'max-h-screen': { maxHeight: '100vh' },
+    // Min Height
+    'min-h-0': { minHeight: '0' },
+    'min-h-full': { minHeight: '100%' },
+    'min-h-screen': { minHeight: '100vh' },
+    // Text Alignment
+    'text-left': { textAlign: 'left' },
+    'text-center': { textAlign: 'center' },
+    'text-right': { textAlign: 'right' },
+    'text-justify': { textAlign: 'justify' },
+    // Text Transform
+    'uppercase': { textTransform: 'uppercase' },
+    'lowercase': { textTransform: 'lowercase' },
+    'capitalize': { textTransform: 'capitalize' },
+    'normal-case': { textTransform: 'none' },
+    // Text Decoration
+    'underline': { textDecoration: 'underline' },
+    'line-through': { textDecoration: 'line-through' },
+    'no-underline': { textDecoration: 'none' },
+    // Text Overflow
+    'truncate': { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    'text-ellipsis': { textOverflow: 'ellipsis' },
+    'text-clip': { textOverflow: 'clip' },
+    // White Space
+    'whitespace-normal': { whiteSpace: 'normal' },
+    'whitespace-nowrap': { whiteSpace: 'nowrap' },
+    'whitespace-pre': { whiteSpace: 'pre' },
+    'whitespace-pre-line': { whiteSpace: 'pre-line' },
+    'whitespace-pre-wrap': { whiteSpace: 'pre-wrap' },
+    // Word Break
+    'break-normal': { wordBreak: 'normal', overflowWrap: 'normal' },
+    'break-words': { overflowWrap: 'break-word' },
+    'break-all': { wordBreak: 'break-all' },
+    // 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' },
+    // Line Height
+    'leading-none': { lineHeight: '1' },
+    'leading-tight': { lineHeight: '1.25' },
+    'leading-snug': { lineHeight: '1.375' },
+    'leading-normal': { lineHeight: '1.5' },
+    'leading-relaxed': { lineHeight: '1.625' },
+    'leading-loose': { lineHeight: '2' },
+    // Letter Spacing
+    'tracking-tighter': { letterSpacing: '-0.05em' },
+    'tracking-tight': { letterSpacing: '-0.025em' },
+    'tracking-normal': { letterSpacing: '0em' },
+    'tracking-wide': { letterSpacing: '0.025em' },
+    'tracking-wider': { letterSpacing: '0.05em' },
+    'tracking-widest': { letterSpacing: '0.1em' },
+    // Object Fit
+    'object-contain': { objectFit: 'contain' },
+    'object-cover': { objectFit: 'cover' },
+    'object-fill': { objectFit: 'fill' },
+    'object-none': { objectFit: 'none' },
+    'object-scale-down': { objectFit: 'scale-down' },
+    // Object Position
+    'object-bottom': { objectPosition: 'bottom' },
+    'object-center': { objectPosition: 'center' },
+    'object-left': { objectPosition: 'left' },
+    'object-left-bottom': { objectPosition: 'left bottom' },
+    'object-left-top': { objectPosition: 'left top' },
+    'object-right': { objectPosition: 'right' },
+    'object-right-bottom': { objectPosition: 'right bottom' },
+    'object-right-top': { objectPosition: 'right top' },
+    'object-top': { objectPosition: 'top' },
+    // Background Size
+    'bg-auto': { backgroundSize: 'auto' },
+    'bg-cover': { backgroundSize: 'cover' },
+    'bg-contain': { backgroundSize: 'contain' },
+    // Background Position
+    'bg-bottom': { backgroundPosition: 'bottom' },
+    'bg-center': { backgroundPosition: 'center' },
+    'bg-left': { backgroundPosition: 'left' },
+    'bg-left-bottom': { backgroundPosition: 'left bottom' },
+    'bg-left-top': { backgroundPosition: 'left top' },
+    'bg-right': { backgroundPosition: 'right' },
+    'bg-right-bottom': { backgroundPosition: 'right bottom' },
+    'bg-right-top': { backgroundPosition: 'right top' },
+    'bg-top': { backgroundPosition: 'top' },
+    // Background Repeat
+    'bg-repeat': { backgroundRepeat: 'repeat' },
+    'bg-no-repeat': { backgroundRepeat: 'no-repeat' },
+    'bg-repeat-x': { backgroundRepeat: 'repeat-x' },
+    'bg-repeat-y': { backgroundRepeat: 'repeat-y' },
+    'bg-repeat-round': { backgroundRepeat: 'round' },
+    'bg-repeat-space': { backgroundRepeat: 'space' },
+    // Box Sizing
+    'box-border': { boxSizing: 'border-box' },
+    'box-content': { boxSizing: 'content-box' },
+    // 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' },
+    // Colors - white/black
+    'text-white': { color: '#ffffff' },
+    'text-black': { color: '#000000' },
+    'bg-white': { background: '#ffffff' },
+    'bg-black': { background: '#000000' },
+    'bg-transparent': { background: 'transparent' },
+    // Shadow
+    'shadow-sm': { boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)' },
+    'shadow': { boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)' },
+    'shadow-md': { boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)' },
+    'shadow-lg': { boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)' },
+    'shadow-xl': { boxShadow: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)' },
+    'shadow-2xl': { boxShadow: '0 25px 50px -12px rgb(0 0 0 / 0.25)' },
+    'shadow-inner': { boxShadow: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)' },
+    'shadow-none': { boxShadow: 'none' },
+    // Text Shadow
+    'text-shadow-sm': { textShadow: '0 1px 2px rgb(0 0 0 / 0.5)' },
+    'text-shadow': { textShadow: '0 2px 4px rgb(0 0 0 / 0.5)' },
+    'text-shadow-md': { textShadow: '0 4px 8px rgb(0 0 0 / 0.5)' },
+    'text-shadow-lg': { textShadow: '0 8px 16px rgb(0 0 0 / 0.5)' },
+    'text-shadow-xl': { textShadow: '0 12px 24px rgb(0 0 0 / 0.5)' },
+    'text-shadow-none': { textShadow: 'none' },
+    // Drop Shadow (filter-based)
+    'drop-shadow-sm': { filter: 'drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))' },
+    'drop-shadow': { filter: 'drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))' },
+    'drop-shadow-md': { filter: 'drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))' },
+    'drop-shadow-lg': { filter: 'drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))' },
+    'drop-shadow-xl': { filter: 'drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))' },
+    'drop-shadow-2xl': { filter: 'drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))' },
+    'drop-shadow-none': { filter: 'drop-shadow(0 0 #0000)' },
+    // Blur
+    'blur-none': { filter: 'blur(0)' },
+    'blur-sm': { filter: 'blur(4px)' },
+    'blur': { filter: 'blur(8px)' },
+    'blur-md': { filter: 'blur(12px)' },
+    'blur-lg': { filter: 'blur(16px)' },
+    'blur-xl': { filter: 'blur(24px)' },
+    'blur-2xl': { filter: 'blur(40px)' },
+    'blur-3xl': { filter: 'blur(64px)' },
+    // Brightness
+    'brightness-0': { filter: 'brightness(0)' },
+    'brightness-50': { filter: 'brightness(.5)' },
+    'brightness-75': { filter: 'brightness(.75)' },
+    'brightness-90': { filter: 'brightness(.9)' },
+    'brightness-95': { filter: 'brightness(.95)' },
+    'brightness-100': { filter: 'brightness(1)' },
+    'brightness-105': { filter: 'brightness(1.05)' },
+    'brightness-110': { filter: 'brightness(1.1)' },
+    'brightness-125': { filter: 'brightness(1.25)' },
+    'brightness-150': { filter: 'brightness(1.5)' },
+    'brightness-200': { filter: 'brightness(2)' },
+    // Contrast
+    'contrast-0': { filter: 'contrast(0)' },
+    'contrast-50': { filter: 'contrast(.5)' },
+    'contrast-75': { filter: 'contrast(.75)' },
+    'contrast-100': { filter: 'contrast(1)' },
+    'contrast-125': { filter: 'contrast(1.25)' },
+    'contrast-150': { filter: 'contrast(1.5)' },
+    'contrast-200': { filter: 'contrast(2)' },
+    // Grayscale
+    'grayscale-0': { filter: 'grayscale(0)' },
+    'grayscale': { filter: 'grayscale(100%)' },
+    // Invert
+    'invert-0': { filter: 'invert(0)' },
+    'invert': { filter: 'invert(100%)' },
+    // Sepia
+    'sepia-0': { filter: 'sepia(0)' },
+    'sepia': { filter: 'sepia(100%)' },
+    // Saturate
+    'saturate-0': { filter: 'saturate(0)' },
+    'saturate-50': { filter: 'saturate(.5)' },
+    'saturate-100': { filter: 'saturate(1)' },
+    'saturate-150': { filter: 'saturate(1.5)' },
+    'saturate-200': { filter: 'saturate(2)' },
+    // Hue Rotate
+    'hue-rotate-0': { filter: 'hue-rotate(0deg)' },
+    'hue-rotate-15': { filter: 'hue-rotate(15deg)' },
+    'hue-rotate-30': { filter: 'hue-rotate(30deg)' },
+    'hue-rotate-60': { filter: 'hue-rotate(60deg)' },
+    'hue-rotate-90': { filter: 'hue-rotate(90deg)' },
+    'hue-rotate-180': { filter: 'hue-rotate(180deg)' },
+};
+// Spacing map (margin, padding)
+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' },
+};
+/**
+ * Parse a single Tailwind class to a style object
+ */
+function parseClass(className, tailwindConfig = null, dsgnConfig = null) {
+    // Check static map first
+    if (TAILWIND_MAP[className]) {
+        return TAILWIND_MAP[className];
+    }
+    // Parse font sizes - try Tailwind config first
+    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;
+        }
+        // Fall back to hardcoded
+        if (FONT_SIZE_MAP[className]) {
+            return FONT_SIZE_MAP[className];
+        }
+    }
+    // Parse padding/margin - try Tailwind config spacing first
+    const spacingMatch = className.match(/^(p|m)(x|y|t|b|l|r)?-(\d+|px)$/);
+    if (spacingMatch) {
+        const [, type, direction, value] = spacingMatch;
+        // Try Tailwind config spacing first
+        let size = resolveSpacing(value, tailwindConfig);
+        // Fall back to hardcoded scale
+        if (!size) {
+            size = 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 - try Tailwind config spacing first
+    const sizeMatch = className.match(/^(w|h)-(\d+)$/);
+    if (sizeMatch) {
+        const [, prop, value] = sizeMatch;
+        let size = resolveSpacing(value, tailwindConfig);
+        if (!size) {
+            size = SPACING_SCALE[value] || `${parseInt(value) * 0.25}rem`;
+        }
+        return { [prop === 'w' ? 'width' : 'height']: size };
+    }
+    // Parse gap - try Tailwind config spacing first
+    const gapMatch = className.match(/^gap(-x|-y)?-(\d+)$/);
+    if (gapMatch) {
+        const [, direction, value] = gapMatch;
+        let size = resolveSpacing(value, tailwindConfig);
+        if (!size) {
+            size = 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 border radius - try Tailwind config first
+    const roundedMatch = className.match(/^rounded(?:-(sm|md|lg|xl|2xl|3xl|full))?$/);
+    if (roundedMatch) {
+        const value = roundedMatch[1] || 'DEFAULT';
+        const radius = resolveBorderRadius(value, tailwindConfig);
+        if (radius) {
+            return { borderRadius: radius };
+        }
+        // Fall back to hardcoded
+        if (TAILWIND_MAP[className]) {
+            return TAILWIND_MAP[className];
+        }
+    }
+    // Parse opacity
+    const opacityMatch = className.match(/^opacity-(\d+)$/);
+    if (opacityMatch) {
+        return { opacity: parseInt(opacityMatch[1]) / 100 };
+    }
+    // Parse background opacity
+    const bgOpacityMatch = className.match(/^bg-opacity-(\d+)$/);
+    if (bgOpacityMatch) {
+        return { __bgOpacity: parseInt(bgOpacityMatch[1]) / 100 };
+    }
+    // Parse text opacity
+    const textOpacityMatch = className.match(/^text-opacity-(\d+)$/);
+    if (textOpacityMatch) {
+        return { __textOpacity: parseInt(textOpacityMatch[1]) / 100 };
+    }
+    // Parse border opacity
+    const borderOpacityMatch = className.match(/^border-opacity-(\d+)$/);
+    if (borderOpacityMatch) {
+        return { __borderOpacity: parseInt(borderOpacityMatch[1]) / 100 };
+    }
+    // Parse flex-grow
+    const flexGrowMatch = className.match(/^flex-grow(?:-(\d+))?$/);
+    if (flexGrowMatch) {
+        const value = flexGrowMatch[1] || '1';
+        return { flexGrow: parseInt(value) };
+    }
+    // Parse flex-shrink
+    const flexShrinkMatch = className.match(/^flex-shrink(?:-(\d+))?$/);
+    if (flexShrinkMatch) {
+        const value = flexShrinkMatch[1] || '1';
+        return { flexShrink: parseInt(value) };
+    }
+    // Parse border width (must come before border color to avoid conflicts)
+    // Only matches: border, border-0, border-2, border-4, border-8, border-t-2, etc.
+    const borderWidthMatch = className.match(/^border(?:-(t|r|b|l|x|y))?(?:-(0|2|4|8))?$/);
+    if (borderWidthMatch) {
+        const [, side, width] = borderWidthMatch;
+        // border without side or width means default 1px border
+        if (!side && !width) {
+            // This will be handled by border color parser if it has a color
+            // Only return here if it's truly just "border"
+            if (className === 'border') {
+                return { borderWidth: '1px', borderStyle: 'solid' };
+            }
+        }
+        else {
+            // Has explicit side or width
+            const borderWidth = width ? `${width}px` : '1px';
+            if (!side) {
+                return { borderWidth, borderStyle: 'solid' };
+            }
+            else if (side === 'x') {
+                return { borderLeftWidth: borderWidth, borderRightWidth: borderWidth, borderStyle: 'solid' };
+            }
+            else if (side === 'y') {
+                return { borderTopWidth: borderWidth, borderBottomWidth: borderWidth, borderStyle: 'solid' };
+            }
+            else {
+                const sideMap = { t: 'Top', r: 'Right', b: 'Bottom', l: 'Left' };
+                return { [`border${sideMap[side]}Width`]: borderWidth, borderStyle: 'solid' };
+            }
+        }
+    }
+    // Parse positioning (top, right, bottom, left, inset)
+    const positionMatch = className.match(/^(top|right|bottom|left|inset)(?:-(x|y))?-(\d+|auto)$/);
+    if (positionMatch) {
+        const [, prop, axis, value] = positionMatch;
+        const size = value === 'auto' ? 'auto' : (resolveSpacing(value, tailwindConfig) || SPACING_SCALE[value] || `${parseInt(value) * 0.25}rem`);
+        if (prop === 'inset') {
+            if (!axis) {
+                return { top: size, right: size, bottom: size, left: size };
+            }
+            else if (axis === 'x') {
+                return { left: size, right: size };
+            }
+            else if (axis === 'y') {
+                return { top: size, bottom: size };
+            }
+        }
+        return { [prop]: size };
+    }
+    // Parse rotate
+    const rotateMatch = className.match(/^-?rotate-(\d+)$/);
+    if (rotateMatch) {
+        const degrees = className.startsWith('-') ? `-${rotateMatch[1]}` : rotateMatch[1];
+        return { transform: `rotate(${degrees}deg)` };
+    }
+    // Parse scale
+    const scaleMatch = className.match(/^scale(?:-(x|y))?-(\d+)$/);
+    if (scaleMatch) {
+        const [, axis, value] = scaleMatch;
+        const scale = parseInt(value) / 100;
+        if (!axis) {
+            return { transform: `scale(${scale})` };
+        }
+        else if (axis === 'x') {
+            return { transform: `scaleX(${scale})` };
+        }
+        else if (axis === 'y') {
+            return { transform: `scaleY(${scale})` };
+        }
+    }
+    // Parse translate (including arbitrary values like translate-x-[896px])
+    const translateMatch = className.match(/^-?translate-(x|y)-(\d+|1\/2|1\/3|2\/3|1\/4|3\/4|full|\[.+\])$/);
+    if (translateMatch) {
+        const isNegative = className.startsWith('-');
+        const [, axis, value] = translateMatch;
+        let size;
+        if (value.startsWith('[') && value.endsWith(']')) {
+            // Arbitrary value like [896px] or [50%]
+            size = value.slice(1, -1);
+        }
+        else if (value === '1/2')
+            size = '50%';
+        else if (value === '1/3')
+            size = '33.333333%';
+        else if (value === '2/3')
+            size = '66.666667%';
+        else if (value === '1/4')
+            size = '25%';
+        else if (value === '3/4')
+            size = '75%';
+        else if (value === 'full')
+            size = '100%';
+        else
+            size = resolveSpacing(value, tailwindConfig) || SPACING_SCALE[value] || `${parseInt(value) * 0.25}rem`;
+        if (isNegative && !size.startsWith('-'))
+            size = `-${size}`;
+        if (axis === 'x') {
+            return { transform: `translateX(${size})` };
+        }
+        else if (axis === 'y') {
+            return { transform: `translateY(${size})` };
+        }
+    }
+    // Parse skew
+    const skewMatch = className.match(/^-?skew-(x|y)-(\d+)$/);
+    if (skewMatch) {
+        const isNegative = className.startsWith('-');
+        const [, axis, degrees] = skewMatch;
+        const deg = isNegative ? `-${degrees}deg` : `${degrees}deg`;
+        if (axis === 'x') {
+            return { transform: `skewX(${deg})` };
+        }
+        else if (axis === 'y') {
+            return { transform: `skewY(${deg})` };
+        }
+    }
+    // Parse font family
+    const fontFamilyMatch = className.match(/^font-(sans|serif|mono)$/);
+    if (fontFamilyMatch) {
+        const fontType = fontFamilyMatch[1];
+        // Try to get font from dsgnConfig
+        if (dsgnConfig?.fonts?.[fontType]) {
+            const fontDef = dsgnConfig.fonts[fontType];
+            // Handle both formats: string[] or { family: string[], files: [...] }
+            let fontFamily;
+            if (Array.isArray(fontDef)) {
+                fontFamily = fontDef.join(', ');
+            }
+            else if (typeof fontDef === 'object' && fontDef.family) {
+                fontFamily = fontDef.family.join(', ');
+            }
+            else {
+                fontFamily = String(fontDef);
+            }
+            return { fontFamily };
+        }
+        // Fallback to system defaults
+        const fallbacks = {
+            'sans': 'system-ui, -apple-system, sans-serif',
+            'serif': 'Georgia, serif',
+            'mono': 'monospace',
+        };
+        return { fontFamily: fallbacks[fontType] };
+    }
+    // Parse colors with optional opacity modifier (e.g., bg-primary/50, text-muted/80)
+    const bgMatch = className.match(/^bg-([\w-]+)(?:\/(\d+))?$/);
+    if (bgMatch) {
+        const colorName = bgMatch[1];
+        const opacityValue = bgMatch[2];
+        // Try Tailwind config
+        let color = resolveColor(colorName, tailwindConfig);
+        // Try dsgn.json
+        if (!color && dsgnConfig?.colors?.[colorName]) {
+            color = dsgnConfig.colors[colorName];
+        }
+        if (color) {
+            // Apply opacity modifier if present
+            if (opacityValue) {
+                const opacity = parseInt(opacityValue) / 100;
+                // Convert hex to rgba
+                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];
+        // Try Tailwind config
+        let color = resolveColor(colorName, tailwindConfig);
+        // Try dsgn.json
+        if (!color && dsgnConfig?.colors?.[colorName]) {
+            color = dsgnConfig.colors[colorName];
+        }
+        if (color) {
+            // Apply opacity modifier if present
+            if (opacityValue) {
+                const opacity = parseInt(opacityValue) / 100;
+                // Convert hex to rgba
+                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 border color with optional opacity
+    const borderMatch = className.match(/^border(?:-([\w-]+))?(?:\/(\d+))?$/);
+    if (borderMatch) {
+        const colorName = borderMatch[1];
+        const opacityValue = borderMatch[2];
+        // If no color specified, use default border
+        if (!colorName) {
+            let borderColor = dsgnConfig?.colors?.border || '#e5e7eb';
+            if (opacityValue) {
+                const opacity = parseInt(opacityValue) / 100;
+                const hex = borderColor.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 { borderWidth: '1px', borderStyle: 'solid', borderColor: `rgba(${r}, ${g}, ${b}, ${opacity})` };
+            }
+            return { borderWidth: '1px', borderStyle: 'solid', borderColor };
+        }
+        // Try Tailwind config
+        let color = resolveColor(colorName, tailwindConfig);
+        // Try dsgn.json
+        if (!color && dsgnConfig?.colors?.[colorName]) {
+            color = dsgnConfig.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 { borderWidth: '1px', borderStyle: 'solid', borderColor: `rgba(${r}, ${g}, ${b}, ${opacity})` };
+            }
+            return { borderWidth: '1px', borderStyle: 'solid', borderColor: color };
+        }
+    }
+    // Note: Gradient classes need to be processed together
+    // We'll mark them for batch processing in the tw() function
+    const gradientMatch = className.match(/^bg-gradient-to-(t|b|l|r|tr|tl|br|bl)$/);
+    if (gradientMatch) {
+        return { __gradientDirection: className };
+    }
+    const gradientStopMatch = className.match(/^(from|via|to)-([\w-]+)(?:\/(\d+))?$/);
+    if (gradientStopMatch) {
+        const [, position, colorName, opacityValue] = gradientStopMatch;
+        // Try Tailwind config
+        let color = resolveColor(colorName, tailwindConfig);
+        // Try dsgn.json
+        if (!color && dsgnConfig?.colors?.[colorName]) {
+            color = dsgnConfig.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 {};
+}
+/**
+ * Convert Tailwind classes to inline styles
+ * Usage: <div style={tw('flex items-center justify-between p-4')} />
+ */
+/**
+ * Convert hex color to rgba
+ */
+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})`;
+}
+// Easing functions for animations
+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,
+};
+/**
+ * Parse animation classes and return computed styles
+ * Supports:
+ * - Transition animations: animate-fade-in/0/1, animate-slide-left/0.2/0.8
+ * - Loop animations: animate-pulse/10, animate-bounce/20
+ */
+function parseAnimationClass(className, context, easing) {
+    const { progress = 0, frame = 0 } = context;
+    const easeFn = easingFunctions[easing] || easingFunctions['ease-out'];
+    // Match transition animations: animate-{type}/start/end
+    // e.g., animate-fade-in/0/1, animate-slide-left/0.2/0.8
+    const transitionMatch = className.match(/^animate-([\w-]+)\/(\d*\.?\d+)\/(\d*\.?\d+)$/);
+    if (transitionMatch) {
+        const [, type, startStr, endStr] = transitionMatch;
+        const start = parseFloat(startStr);
+        const end = parseFloat(endStr);
+        // Calculate local progress within this animation's window
+        let localProgress = 0;
+        if (progress <= start) {
+            localProgress = 0;
+        }
+        else if (progress >= end) {
+            localProgress = 1;
+        }
+        else {
+            localProgress = (progress - start) / (end - start);
+        }
+        // Apply easing
+        const easedProgress = easeFn(localProgress);
+        // Generate styles based on animation type
+        switch (type) {
+            case 'fade-in':
+                return { opacity: easedProgress };
+            case 'fade-out':
+                return { opacity: 1 - 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 'slide-up':
+                return { transform: `translateY(${(1 - easedProgress) * 100}px)`, opacity: easedProgress };
+            case 'slide-down':
+                return { transform: `translateY(${(1 - easedProgress) * -100}px)`, opacity: easedProgress };
+            case 'scale-in':
+                return { transform: `scale(${0.5 + easedProgress * 0.5})`, opacity: easedProgress };
+            case 'scale-out':
+                return { transform: `scale(${1 + easedProgress * 0.5})`, opacity: 1 - easedProgress };
+            case 'rotate-in':
+                return { transform: `rotate(${(1 - easedProgress) * -180}deg)`, opacity: easedProgress };
+            case 'rotate-out':
+                return { transform: `rotate(${easedProgress * 180}deg)`, opacity: 1 - easedProgress };
+            // Compound fade + direction animations (more intuitive naming)
+            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 '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 };
+            case 'fade-out-left':
+                return { transform: `translateX(${easedProgress * -30}px)`, opacity: 1 - easedProgress };
+            case 'fade-out-right':
+                return { transform: `translateX(${easedProgress * 30}px)`, opacity: 1 - easedProgress };
+            // Bounce entrance animations - using smooth sine-based bounce
+            case 'bounce-in': {
+                // Scale from 0 to 1 with overshoot
+                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': {
+                // Start from below (50px), overshoot above (-8px), settle at 0
+                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) };
+            }
+            case 'bounce-in-down': {
+                // Start from above (-50px), overshoot below (8px), settle at 0
+                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) };
+            }
+            case 'bounce-in-left': {
+                // Start from left (-50px), overshoot right (8px), settle at 0
+                const bounceX = easedProgress < 0.7
+                    ? (1 - easedProgress / 0.7) * -50 + (easedProgress / 0.7) * 8
+                    : 8 - (easedProgress - 0.7) / 0.3 * 8;
+                return { transform: `translateX(${bounceX}px)`, opacity: Math.min(1, easedProgress * 2) };
+            }
+            case 'bounce-in-right': {
+                // Start from right (50px), overshoot left (-8px), settle at 0
+                const bounceX = easedProgress < 0.7
+                    ? (1 - easedProgress / 0.7) * 50 - (easedProgress / 0.7) * 8
+                    : -8 + (easedProgress - 0.7) / 0.3 * 8;
+                return { transform: `translateX(${bounceX}px)`, opacity: Math.min(1, easedProgress * 2) };
+            }
+            // Zoom animations
+            case 'zoom-in':
+                return { transform: `scale(${easedProgress})`, opacity: easedProgress };
+            case 'zoom-out':
+                return { transform: `scale(${2 - easedProgress})`, opacity: 1 - easedProgress };
+            // Flip animations
+            case 'flip-in-x':
+                return { transform: `perspective(400px) rotateX(${(1 - easedProgress) * 90}deg)`, opacity: easedProgress };
+            case 'flip-in-y':
+                return { transform: `perspective(400px) rotateY(${(1 - easedProgress) * 90}deg)`, opacity: easedProgress };
+            default:
+                return null;
+        }
+    }
+    // Match loop animations: animate-{type}/{frameLength}
+    // e.g., animate-pulse/10, animate-bounce/20
+    const loopMatch = className.match(/^animate-([\w-]+)\/(\d+)$/);
+    if (loopMatch) {
+        const [, type, frameLengthStr] = loopMatch;
+        const frameLength = parseInt(frameLengthStr);
+        // Calculate position within loop (0-1)
+        const loopProgress = (frame % frameLength) / frameLength;
+        switch (type) {
+            case 'pulse':
+                // Sine wave for smooth pulsing (0.5 to 1 to 0.5)
+                const pulseValue = 0.5 + Math.sin(loopProgress * Math.PI * 2) * 0.5;
+                return { opacity: pulseValue };
+            case 'bounce':
+                // Bounce effect using absolute sine
+                const bounceY = Math.abs(Math.sin(loopProgress * Math.PI)) * -20;
+                return { transform: `translateY(${bounceY}px)` };
+            case 'spin':
+                // Full rotation
+                const spinAngle = loopProgress * 360;
+                return { transform: `rotate(${spinAngle}deg)` };
+            case 'ping':
+                // Scale up and fade out, then reset
+                const pingScale = 1 + loopProgress;
+                const pingOpacity = 1 - loopProgress;
+                return { transform: `scale(${pingScale})`, opacity: pingOpacity };
+            case 'wiggle':
+                // Side to side wiggle
+                const wiggleX = Math.sin(loopProgress * Math.PI * 4) * 5;
+                return { transform: `translateX(${wiggleX}px)` };
+            case 'float':
+                // Gentle up and down floating
+                const floatY = Math.sin(loopProgress * Math.PI * 2) * 10;
+                return { transform: `translateY(${floatY}px)` };
+            default:
+                return null;
+        }
+    }
+    return null;
+}
+export function tw(classes, tailwindConfig = null, dsgnConfig = null, animationContext = {}) {
+    const classArray = classes.split(' ').filter(Boolean);
+    let styles = {};
+    let gradientData = {};
+    let transforms = [];
+    let filters = [];
+    let opacityModifiers = {};
+    let animationEasing = 'ease-out'; // Default easing
+    for (const className of classArray) {
+        // Check for easing modifiers first
+        if (easingFunctions[className]) {
+            animationEasing = className;
+            continue;
+        }
+        // Check for animation classes
+        const animationResult = parseAnimationClass(className, animationContext, animationEasing);
+        if (animationResult) {
+            if (animationResult.opacity !== undefined) {
+                styles.opacity = animationResult.opacity;
+            }
+            if (animationResult.transform) {
+                transforms.push(animationResult.transform);
+            }
+            if (animationResult.transformOrigin) {
+                styles.transformOrigin = animationResult.transformOrigin;
+            }
+            continue;
+        }
+        const parsed = parseClass(className, tailwindConfig, dsgnConfig);
+        // 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) {
+            // Collect transforms to combine them later
+            transforms.push(parsed.transform);
+        }
+        else if (parsed.filter) {
+            // Collect filters to combine them later
+            filters.push(parsed.filter);
+        }
+        else if (parsed.__bgOpacity !== undefined) {
+            opacityModifiers.bg = parsed.__bgOpacity;
+        }
+        else if (parsed.__textOpacity !== undefined) {
+            opacityModifiers.text = parsed.__textOpacity;
+        }
+        else if (parsed.__borderOpacity !== undefined) {
+            opacityModifiers.border = parsed.__borderOpacity;
+        }
+        else {
+            styles = { ...styles, ...parsed };
+        }
+    }
+    // Convert gradient data to backgroundImage if we have enough info
+    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);
+        // Build the linear-gradient
+        const gradient = `linear-gradient(${direction}, ${stops.join(', ')})`;
+        styles.backgroundImage = gradient;
+    }
+    // Combine multiple transforms
+    if (transforms.length > 0) {
+        styles.transform = transforms.join(' ');
+    }
+    // Combine multiple filters
+    if (filters.length > 0) {
+        styles.filter = filters.join(' ');
+    }
+    // Apply opacity modifiers
+    if (opacityModifiers.bg !== undefined && styles.background && typeof styles.background === 'string') {
+        if (styles.background.startsWith('#')) {
+            styles.background = hexToRgba(styles.background, opacityModifiers.bg);
+        }
+    }
+    if (opacityModifiers.text !== undefined && styles.color && typeof styles.color === 'string') {
+        if (styles.color.startsWith('#')) {
+            styles.color = hexToRgba(styles.color, opacityModifiers.text);
+        }
+    }
+    if (opacityModifiers.border !== undefined && styles.borderColor && typeof styles.borderColor === 'string') {
+        if (styles.borderColor.startsWith('#')) {
+            styles.borderColor = hexToRgba(styles.borderColor, opacityModifiers.border);
+        }
+    }
+    return styles;
+}
+//# sourceMappingURL=tailwind.js.map