@ttdk-design-system/library-svelte 0.0.0-stage → 1.0.0

package/dist/core/types.js

@@ -0,0 +1,735 @@
+export const ResponsiveBreakpoints = {};
+export const UiProps = {};
+/**
+ * Helper to build responsive CSS custom properties from a ResponsiveUiProps object.
+ */
+export function buildResponsiveVars(ui, keyMap) {
+    if (!ui)
+        return {};
+    const styles = {};
+    const breakpoints = ['sm', 'lt_sm', 'md', 'lt_md', 'lg', 'lt_lg', 'xl', 'lt_xl'];
+    // Process default / base level
+    for (const [uiKey, cssVar] of Object.entries(keyMap)) {
+        if (ui[uiKey] !== undefined) {
+            styles[cssVar] = String(ui[uiKey]);
+        }
+    }
+    // Process each breakpoint
+    for (const bp of breakpoints) {
+        const bpObj = ui[bp];
+        if (bpObj && typeof bpObj === 'object') {
+            for (const [uiKey, cssVar] of Object.entries(keyMap)) {
+                if (bpObj[uiKey] !== undefined) {
+                    const bpSuffix = bp.replace('_', '-');
+                    styles[`${cssVar}-${bpSuffix}`] = String(bpObj[uiKey]);
+                }
+            }
+        }
+    }
+    return styles;
+}
+const PSEUDOS = ['hover', 'active', 'focus', 'disabled', 'dark'];
+const BREAKPOINTS = ['sm', 'lt_sm', 'lt-sm', 'md', 'lt_md', 'lt-md', 'lg', 'lt_lg', 'lt-lg', 'xl', 'lt_xl', 'lt-xl', '2xl'];
+const BREAKPOINT_QUERIES = {
+    sm: '(min-width: 640px)',
+    lt_sm: '(max-width: 639px)',
+    'lt-sm': '(max-width: 639px)',
+    md: '(min-width: 768px)',
+    lt_md: '(max-width: 767px)',
+    'lt-md': '(max-width: 767px)',
+    lg: '(min-width: 1024px)',
+    lt_lg: '(max-width: 1023px)',
+    'lt-lg': '(max-width: 1023px)',
+    xl: '(min-width: 1280px)',
+    lt_xl: '(max-width: 1279px)',
+    'lt-xl': '(max-width: 1279px)',
+    '2xl': '(min-width: 1536px)',
+};
+const BUCKET_ORDER = [
+    'pseudos',
+    'lt_xl',
+    'lt-xl',
+    'lt_lg',
+    'lt-lg',
+    'lt_md',
+    'lt-md',
+    'lt_sm',
+    'lt-sm',
+    'sm',
+    'md',
+    'lg',
+    'xl',
+    '2xl',
+];
+/** Convert camelCase ke kebab-case: backgroundColor → background-color */
+function toKebab(str) {
+    return str.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+}
+/** Membersihkan akhiran !important jika user tidak sengaja menyertakannya di string nilai */
+export function cleanUiValue(v) {
+    if (typeof v === 'string') {
+        return v.replace(/\s*!important\s*$/i, '').trim();
+    }
+    return String(v);
+}
+function resolveCssProperty(key) {
+    if (key === 'bg')
+        return 'background-color';
+    if (key === 'size')
+        return 'font-size';
+    if (key === 'weight')
+        return 'font-weight';
+    return toKebab(key);
+}
+// ============================================================
+// Dynamic Runtime CSS Injection Engine
+// ============================================================
+const injectedRuleSet = new Set();
+const styleBuckets = {};
+function getBucketElement(bucket) {
+    if (typeof document === 'undefined')
+        return null;
+    if (styleBuckets[bucket] && document.head.contains(styleBuckets[bucket])) {
+        return styleBuckets[bucket];
+    }
+    const safeId = `ttdk-dyn-${bucket.replace('_', '-')}`;
+    let el = document.getElementById(safeId);
+    if (!el) {
+        el = document.createElement('style');
+        el.id = safeId;
+        el.setAttribute('data-ttdk-dynamic', 'true');
+        // Pastikan urutan tag style di <head> sesuai cascade specificity
+        const bucketIndex = BUCKET_ORDER.indexOf(bucket);
+        let nextSibling = null;
+        if (bucketIndex !== -1) {
+            for (let i = bucketIndex + 1; i < BUCKET_ORDER.length; i++) {
+                const nextId = `ttdk-dyn-${BUCKET_ORDER[i].replace('_', '-')}`;
+                const nextEl = document.getElementById(nextId);
+                if (nextEl) {
+                    nextSibling = nextEl;
+                    break;
+                }
+            }
+        }
+        if (nextSibling) {
+            document.head.insertBefore(el, nextSibling);
+        }
+        else {
+            document.head.appendChild(el);
+        }
+    }
+    styleBuckets[bucket] = el;
+    return el;
+}
+export function injectDynamicCss(bucket, ruleKey, cssRule) {
+    if (injectedRuleSet.has(ruleKey))
+        return;
+    injectedRuleSet.add(ruleKey);
+    const el = getBucketElement(bucket);
+    if (!el)
+        return;
+    el.appendChild(document.createTextNode(cssRule + '\n'));
+}
+function getBaseVarRule(pseudo, varName, cssProp) {
+    const baseVar = varName.replace(`-${pseudo}-`, '-');
+    if (baseVar === varName)
+        return '';
+    let extra = `${baseVar}: var(${varName}) !important;`;
+    // Extra aliases for background
+    if (baseVar.endsWith('-background') || baseVar.endsWith('-bg')) {
+        extra += ` ${baseVar.replace(/-(background|bg)$/, '-bg')}: var(${varName}) !important;`;
+        extra += ` ${baseVar.replace(/-(background|bg)$/, '-background')}: var(${varName}) !important;`;
+        extra += ` ${baseVar.replace(/-(background|bg)$/, '-background-color')}: var(${varName}) !important;`;
+    }
+    return extra;
+}
+function injectPseudoRule(pseudo, varName, cssProp) {
+    const baseVarRule = getBaseVarRule(pseudo, varName, cssProp);
+    // Dark mode menggunakan ancestor class selector, bukan CSS pseudo-class
+    if (pseudo === 'dark') {
+        const selector = `.dark [style*="${varName}:"], .dark[style*="${varName}:"], [data-theme="dark"] [style*="${varName}:"], [data-theme="dark"][style*="${varName}:"]`;
+        const rule = `${selector} { ${cssProp}: var(${varName}) !important; ${baseVarRule} }`;
+        injectDynamicCss('pseudos', `pseudo:${varName}:${cssProp}`, rule);
+        return;
+    }
+    let pseudoSelector = `:hover`;
+    if (pseudo === 'active')
+        pseudoSelector = `:active`;
+    else if (pseudo === 'focus')
+        pseudoSelector = `:focus, [style*="${varName}:"]:focus-visible`;
+    else if (pseudo === 'disabled')
+        pseudoSelector = `:disabled, [style*="${varName}:"][aria-disabled="true"]`;
+    const rule = `[style*="${varName}:"]${pseudoSelector} { ${cssProp}: var(${varName}) !important; ${baseVarRule} }`;
+    injectDynamicCss('pseudos', `pseudo:${varName}:${cssProp}`, rule);
+}
+function injectBreakpointRule(bp, varName, cssProp) {
+    const query = BREAKPOINT_QUERIES[bp];
+    if (!query)
+        return;
+    const rule = `@media ${query} { [style*="${varName}:"] { ${cssProp}: var(${varName}) !important; } }`;
+    injectDynamicCss(bp, `bp:${bp}:${varName}:${cssProp}`, rule);
+}
+function injectNestedPseudoBreakpointRule(bp, pseudo, varName, cssProp) {
+    const query = BREAKPOINT_QUERIES[bp];
+    if (!query)
+        return;
+    const baseVarRule = getBaseVarRule(pseudo, varName, cssProp);
+    // Dark mode menggunakan ancestor class selector dalam media query
+    if (pseudo === 'dark') {
+        const selector = `.dark [style*="${varName}:"], .dark[style*="${varName}:"], [data-theme="dark"] [style*="${varName}:"], [data-theme="dark"][style*="${varName}:"]`;
+        const rule = `@media ${query} { ${selector} { ${cssProp}: var(${varName}) !important; ${baseVarRule} } }`;
+        injectDynamicCss(bp, `nested:${bp}:${pseudo}:${varName}:${cssProp}`, rule);
+        return;
+    }
+    let pseudoSelector = `:hover`;
+    if (pseudo === 'active')
+        pseudoSelector = `:active`;
+    else if (pseudo === 'focus')
+        pseudoSelector = `:focus, [style*="${varName}:"]:focus-visible`;
+    else if (pseudo === 'disabled')
+        pseudoSelector = `:disabled, [style*="${varName}:"][aria-disabled="true"]`;
+    const rule = `@media ${query} { [style*="${varName}:"]${pseudoSelector} { ${cssProp}: var(${varName}) !important; ${baseVarRule} } }`;
+    injectDynamicCss(bp, `nested:${bp}:${pseudo}:${varName}:${cssProp}`, rule);
+}
+/**
+ * Mengambil properti CSS native biasa (seperti color, fontSize, letterSpacing, transform, dll.)
+ * untuk langsung diterapkan sebagai inline style native browser.
+ * Mengabaikan pseudo-classes ('hover', 'focus') dan responsive breakpoints ('sm', 'md', dll.).
+ */
+export function extractBaseStyles(ui) {
+    if (!ui || typeof ui !== 'object')
+        return {};
+    const base = {};
+    for (const [key, value] of Object.entries(ui)) {
+        if (value === undefined || value === null)
+            continue;
+        if (PSEUDOS.includes(key) || BREAKPOINTS.includes(key))
+            continue;
+        if (typeof value === 'object')
+            continue;
+        const cleaned = typeof value === 'string' ? cleanUiValue(value) : value;
+        // Support alias
+        if (key === 'bg') {
+            base['backgroundColor'] = cleaned;
+        }
+        else if (key === 'size') {
+            base['fontSize'] = cleaned;
+        }
+        else if (key === 'weight') {
+            base['fontWeight'] = cleaned;
+        }
+        else {
+            base[key] = cleaned;
+        }
+    }
+    return base;
+}
+/**
+ * buildUiVars — konversi UiProps ke CSS custom properties untuk dipakai di style attribute
+ * sekaligus mendaftarkan aturan dinamis (pseudo & responsive media queries) secara otomatis.
+ */
+export function buildUiVars(ui, prefix = '--ttdk-ui') {
+    if (!ui)
+        return {};
+    const vars = { ...extractBaseStyles(ui) };
+    // 1. Base props
+    for (const [key, value] of Object.entries(ui)) {
+        if (value === undefined || value === null)
+            continue;
+        if (PSEUDOS.includes(key) || BREAKPOINTS.includes(key))
+            continue;
+        if (typeof value === 'object')
+            continue;
+        const strVal = cleanUiValue(value);
+        vars[`${prefix}-${toKebab(key)}`] = strVal;
+        if (key === 'bg') {
+            vars[`${prefix}-background`] = strVal;
+            vars[`${prefix}-background-color`] = strVal;
+        }
+        else if (key === 'background' || key === 'backgroundColor') {
+            vars[`${prefix}-background`] = strVal;
+            vars[`${prefix}-bg`] = strVal;
+        }
+        else if (key === 'size') {
+            vars[`${prefix}-font-size`] = strVal;
+        }
+        else if (key === 'weight') {
+            vars[`${prefix}-font-weight`] = strVal;
+        }
+    }
+    // 2. Pseudo-classes at root: hover: { color: 'red', md: { color: 'blue' } }
+    for (const pseudo of PSEUDOS) {
+        const pseudoObj = ui[pseudo];
+        if (!pseudoObj || typeof pseudoObj !== 'object')
+            continue;
+        for (const [key, value] of Object.entries(pseudoObj)) {
+            if (value === undefined || value === null)
+                continue;
+            // Nested breakpoint inside pseudo: hover: { md: { background: 'blue' } }
+            if (BREAKPOINTS.includes(key)) {
+                const bpObj = value;
+                if (bpObj && typeof bpObj === 'object') {
+                    for (const [subKey, subVal] of Object.entries(bpObj)) {
+                        if (subVal === undefined || subVal === null || typeof subVal === 'object')
+                            continue;
+                        const kebab = toKebab(subKey);
+                        const varName = `${prefix}-${pseudo}-${kebab}-${key}`;
+                        vars[varName] = String(subVal);
+                        injectNestedPseudoBreakpointRule(key, pseudo, varName, resolveCssProperty(subKey));
+                        if (subKey === 'bg') {
+                            const bgVar = `${prefix}-${pseudo}-background-${key}`;
+                            vars[bgVar] = String(subVal);
+                            injectNestedPseudoBreakpointRule(key, pseudo, bgVar, 'background');
+                            const bgColVar = `${prefix}-${pseudo}-background-color-${key}`;
+                            vars[bgColVar] = String(subVal);
+                            injectNestedPseudoBreakpointRule(key, pseudo, bgColVar, 'background-color');
+                        }
+                        else if (subKey === 'background' || subKey === 'backgroundColor') {
+                            const bgVar = `${prefix}-${pseudo}-background-${key}`;
+                            vars[bgVar] = String(subVal);
+                            injectNestedPseudoBreakpointRule(key, pseudo, bgVar, 'background');
+                            const bgShortVar = `${prefix}-${pseudo}-bg-${key}`;
+                            vars[bgShortVar] = String(subVal);
+                            injectNestedPseudoBreakpointRule(key, pseudo, bgShortVar, 'background');
+                        }
+                    }
+                }
+                continue;
+            }
+            if (typeof value === 'object')
+                continue;
+            const kebab = toKebab(key);
+            const varName = `${prefix}-${pseudo}-${kebab}`;
+            vars[varName] = String(value);
+            injectPseudoRule(pseudo, varName, resolveCssProperty(key));
+            // alias: backgroundColor / bg
+            if (key === 'backgroundColor' || key === 'bg') {
+                const bgVar = `${prefix}-${pseudo}-background`;
+                vars[bgVar] = String(value);
+                injectPseudoRule(pseudo, bgVar, 'background');
+                const bgShortVar = `${prefix}-${pseudo}-bg`;
+                vars[bgShortVar] = String(value);
+                injectPseudoRule(pseudo, bgShortVar, 'background');
+            }
+            else if (key === 'background') {
+                const bgShortVar = `${prefix}-${pseudo}-bg`;
+                vars[bgShortVar] = String(value);
+                injectPseudoRule(pseudo, bgShortVar, 'background');
+            }
+        }
+    }
+    // 3. Breakpoints at root: md: { background: 'teal', hover: { background: '#fae8ff' } }
+    for (const bp of BREAKPOINTS) {
+        const bpObj = ui[bp];
+        if (!bpObj || typeof bpObj !== 'object')
+            continue;
+        for (const [key, value] of Object.entries(bpObj)) {
+            if (value === undefined || value === null)
+                continue;
+            // Nested pseudo inside breakpoint: md: { hover: { background: '#fae8ff' } }
+            if (PSEUDOS.includes(key)) {
+                const pseudoObj = value;
+                if (pseudoObj && typeof pseudoObj === 'object') {
+                    for (const [pseudoKey, pseudoVal] of Object.entries(pseudoObj)) {
+                        if (pseudoVal === undefined || pseudoVal === null || typeof pseudoVal === 'object')
+                            continue;
+                        const kebab = toKebab(pseudoKey);
+                        const varName = `${prefix}-${key}-${kebab}-${bp}`;
+                        vars[varName] = String(pseudoVal);
+                        injectNestedPseudoBreakpointRule(bp, key, varName, resolveCssProperty(pseudoKey));
+                        if (pseudoKey === 'bg') {
+                            const bgVar = `${prefix}-${key}-background-${bp}`;
+                            vars[bgVar] = String(pseudoVal);
+                            injectNestedPseudoBreakpointRule(bp, key, bgVar, 'background');
+                            const bgColVar = `${prefix}-${key}-background-color-${bp}`;
+                            vars[bgColVar] = String(pseudoVal);
+                            injectNestedPseudoBreakpointRule(bp, key, bgColVar, 'background-color');
+                        }
+                        else if (pseudoKey === 'background' || pseudoKey === 'backgroundColor') {
+                            const bgVar = `${prefix}-${key}-background-${bp}`;
+                            vars[bgVar] = String(pseudoVal);
+                            injectNestedPseudoBreakpointRule(bp, key, bgVar, 'background');
+                            const bgShortVar = `${prefix}-${key}-bg-${bp}`;
+                            vars[bgShortVar] = String(pseudoVal);
+                            injectNestedPseudoBreakpointRule(bp, key, bgShortVar, 'background');
+                        }
+                    }
+                }
+                continue;
+            }
+            if (typeof value === 'object')
+                continue;
+            const kebab = toKebab(key);
+            const varName = `${prefix}-${kebab}-${bp}`;
+            vars[varName] = String(value);
+            injectBreakpointRule(bp, varName, resolveCssProperty(key));
+            if (key === 'bg') {
+                const bgVar = `${prefix}-background-${bp}`;
+                vars[bgVar] = String(value);
+                injectBreakpointRule(bp, bgVar, 'background');
+                const bgColVar = `${prefix}-background-color-${bp}`;
+                vars[bgColVar] = String(value);
+                injectBreakpointRule(bp, bgColVar, 'background-color');
+            }
+            else if (key === 'background' || key === 'backgroundColor') {
+                const bgVar = `${prefix}-background-${bp}`;
+                vars[bgVar] = String(value);
+                injectBreakpointRule(bp, bgVar, 'background');
+                const bgShortVar = `${prefix}-bg-${bp}`;
+                vars[bgShortVar] = String(value);
+                injectBreakpointRule(bp, bgShortVar, 'background');
+            }
+            else if (key === 'size') {
+                const sizeVar = `${prefix}-font-size-${bp}`;
+                vars[sizeVar] = String(value);
+                injectBreakpointRule(bp, sizeVar, 'font-size');
+            }
+            else if (key === 'weight') {
+                const weightVar = `${prefix}-font-weight-${bp}`;
+                vars[weightVar] = String(value);
+                injectBreakpointRule(bp, weightVar, 'font-weight');
+            }
+        }
+    }
+    return vars;
+}
+/**
+ * buildUiStyle — Solusi HYBRID:
+ * Menggabungkan native inline style (agar ratusan CSS properties native langsung jalan 100%)
+ * dengan CSS custom properties (agar :hover dan responsive media query tetap bekerja sempurna).
+ */
+export function buildUiStyle(ui, prefix = '--ttdk-ui') {
+    return buildUiVars(ui, prefix);
+}
+// ============================================================
+// Layout Helpers for Flex & Grid
+// ============================================================
+function mapFlexJustify(val) {
+    if (!val)
+        return undefined;
+    if (val === 'start')
+        return 'flex-start';
+    if (val === 'end')
+        return 'flex-end';
+    if (val === 'around')
+        return 'space-around';
+    if (val === 'between')
+        return 'space-between';
+    if (val === 'evenly')
+        return 'space-evenly';
+    return val;
+}
+function mapFlexAlign(val) {
+    if (!val)
+        return undefined;
+    if (val === 'start')
+        return 'flex-start';
+    if (val === 'end')
+        return 'flex-end';
+    return val;
+}
+function formatGap(val) {
+    if (val === undefined || val === null || val === '')
+        return undefined;
+    if (typeof val === 'number')
+        return `${val}px`;
+    return String(val);
+}
+export function buildFlexVars(props) {
+    if (!props)
+        return {};
+    const vars = {};
+    // Base
+    if (props.direction)
+        vars['--ttdk-flex-direction'] = props.direction;
+    if (props.justifyContent)
+        vars['--ttdk-flex-justify-content'] = mapFlexJustify(props.justifyContent) || props.justifyContent;
+    if (props.alignItems)
+        vars['--ttdk-flex-align-items'] = mapFlexAlign(props.alignItems) || props.alignItems;
+    if (props.gap !== undefined) {
+        const g = formatGap(props.gap);
+        if (g)
+            vars['--ttdk-flex-gap'] = g;
+    }
+    if (props.wrap)
+        vars['--ttdk-flex-wrap'] = props.wrap;
+    // Breakpoints
+    const bps = ['sm', 'md', 'lg', 'xl', '2xl'];
+    for (const bp of bps) {
+        const override = props[bp] || (bp === '2xl' ? (props['xxl'] || props['2xl']) : undefined);
+        if (override && typeof override === 'object') {
+            if (override.direction)
+                vars[`--ttdk-flex-direction-${bp}`] = override.direction;
+            if (override.justifyContent)
+                vars[`--ttdk-flex-justify-content-${bp}`] = mapFlexJustify(override.justifyContent) || override.justifyContent;
+            if (override.alignItems)
+                vars[`--ttdk-flex-align-items-${bp}`] = mapFlexAlign(override.alignItems) || override.alignItems;
+            if (override.gap !== undefined) {
+                const g = formatGap(override.gap);
+                if (g)
+                    vars[`--ttdk-flex-gap-${bp}`] = g;
+            }
+            if (override.wrap)
+                vars[`--ttdk-flex-wrap-${bp}`] = override.wrap;
+        }
+    }
+    return vars;
+}
+function mapFlexAlignSelf(val) {
+    if (!val)
+        return undefined;
+    if (val === 'start')
+        return 'flex-start';
+    if (val === 'end')
+        return 'flex-end';
+    return val;
+}
+function formatFlexBasis(val) {
+    if (val === undefined || val === null || val === '')
+        return undefined;
+    if (typeof val === 'number')
+        return `${val}px`;
+    return String(val);
+}
+function formatFlexGrowShrink(val) {
+    if (val === undefined || val === null)
+        return undefined;
+    if (typeof val === 'boolean')
+        return val ? '1' : '0';
+    return String(val);
+}
+export function buildFlexItemVars(props) {
+    if (!props)
+        return {};
+    const vars = {};
+    // Base
+    if (props.order !== undefined)
+        vars['--ttdk-flex-item-order'] = String(props.order);
+    if (props.grow !== undefined) {
+        const g = formatFlexGrowShrink(props.grow);
+        if (g)
+            vars['--ttdk-flex-item-grow'] = g;
+    }
+    if (props.shrink !== undefined) {
+        const s = formatFlexGrowShrink(props.shrink);
+        if (s)
+            vars['--ttdk-flex-item-shrink'] = s;
+    }
+    if (props.basis !== undefined) {
+        const b = formatFlexBasis(props.basis);
+        if (b)
+            vars['--ttdk-flex-item-basis'] = b;
+    }
+    if (props.alignSelf)
+        vars['--ttdk-flex-item-align-self'] = mapFlexAlignSelf(props.alignSelf) || props.alignSelf;
+    // Breakpoints
+    const bps = ['sm', 'md', 'lg', 'xl', '2xl'];
+    for (const bp of bps) {
+        const override = props[bp] || (bp === '2xl' ? (props['xxl'] || props['2xl']) : undefined);
+        if (override && typeof override === 'object') {
+            if (override.order !== undefined)
+                vars[`--ttdk-flex-item-order-${bp}`] = String(override.order);
+            if (override.grow !== undefined) {
+                const g = formatFlexGrowShrink(override.grow);
+                if (g)
+                    vars[`--ttdk-flex-item-grow-${bp}`] = g;
+            }
+            if (override.shrink !== undefined) {
+                const s = formatFlexGrowShrink(override.shrink);
+                if (s)
+                    vars[`--ttdk-flex-item-shrink-${bp}`] = s;
+            }
+            if (override.basis !== undefined) {
+                const b = formatFlexBasis(override.basis);
+                if (b)
+                    vars[`--ttdk-flex-item-basis-${bp}`] = b;
+            }
+            if (override.alignSelf)
+                vars[`--ttdk-flex-item-align-self-${bp}`] = mapFlexAlignSelf(override.alignSelf) || override.alignSelf;
+        }
+    }
+    return vars;
+}
+function formatGridTemplate(val) {
+    if (val === undefined || val === null || val === '')
+        return undefined;
+    if (typeof val === 'number')
+        return `repeat(${val}, minmax(0, 1fr))`;
+    return String(val);
+}
+function mapGridJustifyContent(val) {
+    if (!val)
+        return undefined;
+    if (val === 'start')
+        return 'start';
+    if (val === 'center')
+        return 'center';
+    if (val === 'end')
+        return 'end';
+    if (val === 'around')
+        return 'space-around';
+    if (val === 'between')
+        return 'space-between';
+    if (val === 'evenly')
+        return 'space-evenly';
+    return val;
+}
+function mapGridAlignContent(val) {
+    if (!val)
+        return undefined;
+    if (val === 'start')
+        return 'start';
+    if (val === 'center')
+        return 'center';
+    if (val === 'end')
+        return 'end';
+    if (val === 'around')
+        return 'space-around';
+    if (val === 'between')
+        return 'space-between';
+    if (val === 'evenly')
+        return 'space-evenly';
+    return val;
+}
+export function buildGridVars(props) {
+    if (!props)
+        return {};
+    const vars = {};
+    // Base
+    if (props.templateColumns !== undefined) {
+        const tc = formatGridTemplate(props.templateColumns);
+        if (tc)
+            vars['--ttdk-grid-template-columns'] = tc;
+    }
+    if (props.templateRows !== undefined) {
+        const tr = formatGridTemplate(props.templateRows);
+        if (tr)
+            vars['--ttdk-grid-template-rows'] = tr;
+    }
+    if (props.gap !== undefined) {
+        const g = formatGap(props.gap);
+        if (g)
+            vars['--ttdk-grid-gap'] = g;
+    }
+    if (props.justifyContent) {
+        vars['--ttdk-grid-justify-content'] = mapGridJustifyContent(props.justifyContent) || props.justifyContent;
+    }
+    if (props.alignContent) {
+        vars['--ttdk-grid-align-content'] = mapGridAlignContent(props.alignContent) || props.alignContent;
+    }
+    // Breakpoints
+    const bps = ['sm', 'md', 'lg', 'xl', '2xl'];
+    for (const bp of bps) {
+        const override = props[bp] || (bp === '2xl' ? (props['xxl'] || props['2xl']) : undefined);
+        if (override && typeof override === 'object') {
+            if (override.templateColumns !== undefined) {
+                const tc = formatGridTemplate(override.templateColumns);
+                if (tc)
+                    vars[`--ttdk-grid-template-columns-${bp}`] = tc;
+            }
+            if (override.templateRows !== undefined) {
+                const tr = formatGridTemplate(override.templateRows);
+                if (tr)
+                    vars[`--ttdk-grid-template-rows-${bp}`] = tr;
+            }
+            if (override.gap !== undefined) {
+                const g = formatGap(override.gap);
+                if (g)
+                    vars[`--ttdk-grid-gap-${bp}`] = g;
+            }
+            if (override.justifyContent) {
+                vars[`--ttdk-grid-justify-content-${bp}`] = mapGridJustifyContent(override.justifyContent) || override.justifyContent;
+            }
+            if (override.alignContent) {
+                vars[`--ttdk-grid-align-content-${bp}`] = mapGridAlignContent(override.alignContent) || override.alignContent;
+            }
+        }
+    }
+    return vars;
+}
+function formatGridColRow(val) {
+    if (val === undefined || val === null || val === '')
+        return undefined;
+    if (typeof val === 'number')
+        return `span ${val} / span ${val}`;
+    if (val === 'auto')
+        return 'auto';
+    if (val === 'full')
+        return '1 / -1';
+    return String(val);
+}
+function resolveGridTrack(span, start, end) {
+    const hasSpan = span !== undefined && span !== null && span !== '';
+    const hasStart = start !== undefined && start !== null && start !== '';
+    const hasEnd = end !== undefined && end !== null && end !== '';
+    if (!hasSpan && !hasStart && !hasEnd)
+        return undefined;
+    if (hasStart && hasEnd) {
+        return `${start} / ${end}`;
+    }
+    if (hasStart && hasSpan) {
+        const spanStr = typeof span === 'number' ? `span ${span}` : String(span);
+        return `${start} / ${spanStr}`;
+    }
+    if (hasEnd && hasSpan) {
+        const spanStr = typeof span === 'number' ? `span ${span}` : String(span);
+        return `${spanStr} / ${end}`;
+    }
+    if (hasStart) {
+        return `${start} / auto`;
+    }
+    if (hasEnd) {
+        return `auto / ${end}`;
+    }
+    return formatGridColRow(span);
+}
+export function buildGridItemVars(props) {
+    if (!props)
+        return {};
+    const vars = {};
+    // Base
+    const colVal = resolveGridTrack(props.col, props.colStart, props.colEnd);
+    if (colVal)
+        vars['--ttdk-grid-item-col'] = colVal;
+    if (props.colStart !== undefined)
+        vars['--ttdk-grid-item-col-start'] = String(props.colStart);
+    if (props.colEnd !== undefined)
+        vars['--ttdk-grid-item-col-end'] = String(props.colEnd);
+    const rowVal = resolveGridTrack(props.row, props.rowStart, props.rowEnd);
+    if (rowVal)
+        vars['--ttdk-grid-item-row'] = rowVal;
+    if (props.rowStart !== undefined)
+        vars['--ttdk-grid-item-row-start'] = String(props.rowStart);
+    if (props.rowEnd !== undefined)
+        vars['--ttdk-grid-item-row-end'] = String(props.rowEnd);
+    if (props.justifySelf)
+        vars['--ttdk-grid-item-justify-self'] = props.justifySelf;
+    if (props.order !== undefined)
+        vars['--ttdk-grid-item-order'] = String(props.order);
+    // Breakpoints
+    const bps = ['sm', 'md', 'lg', 'xl', '2xl'];
+    for (const bp of bps) {
+        const override = props[bp] || (bp === '2xl' ? (props['xxl'] || props['2xl']) : undefined);
+        if (override && typeof override === 'object') {
+            const bpColVal = resolveGridTrack(override.col, override.colStart, override.colEnd);
+            if (bpColVal)
+                vars[`--ttdk-grid-item-col-${bp}`] = bpColVal;
+            if (override.colStart !== undefined)
+                vars[`--ttdk-grid-item-col-start-${bp}`] = String(override.colStart);
+            if (override.colEnd !== undefined)
+                vars[`--ttdk-grid-item-col-end-${bp}`] = String(override.colEnd);
+            const bpRowVal = resolveGridTrack(override.row, override.rowStart, override.rowEnd);
+            if (bpRowVal)
+                vars[`--ttdk-grid-item-row-${bp}`] = bpRowVal;
+            if (override.rowStart !== undefined)
+                vars[`--ttdk-grid-item-row-start-${bp}`] = String(override.rowStart);
+            if (override.rowEnd !== undefined)
+                vars[`--ttdk-grid-item-row-end-${bp}`] = String(override.rowEnd);
+            if (override.justifySelf)
+                vars[`--ttdk-grid-item-justify-self-${bp}`] = override.justifySelf;
+            if (override.order !== undefined)
+                vars[`--ttdk-grid-item-order-${bp}`] = String(override.order);
+        }
+    }
+    return vars;
+}