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

package/src/core/types.ts

@@ -0,0 +1,836 @@
+import type * as CSS from 'csstype';
+
+/**
+ * TTDK Design System - Responsive Breakpoints Type System
+ * 
+ * Standard Breakpoint Scales:
+ * - `sm`: min-width 640px
+ * - `lt_sm`: max-width 639px (less than sm)
+ * - `md`: min-width 768px
+ * - `lt_md`: max-width 767px (less than md)
+ * - `lg`: min-width 1024px
+ * - `lt_lg`: max-width 1023px (less than lg)
+ * - `xl`: min-width 1280px
+ * - `lt_xl`: max-width 1279px (less than xl)
+ */
+export interface ResponsiveBreakpoints<T> {
+  sm?: Partial<T>;
+  lt_sm?: Partial<T>;
+  md?: Partial<T>;
+  lt_md?: Partial<T>;
+  lg?: Partial<T>;
+  lt_lg?: Partial<T>;
+  xl?: Partial<T>;
+  lt_xl?: Partial<T>;
+}
+export const ResponsiveBreakpoints = {};
+export const UiProps = {};
+
+/**
+ * Type helper to allow flat props (default) combined with nested responsive breakpoint overrides.
+ */
+export type ResponsiveUiProps<T> = T & ResponsiveBreakpoints<T>;
+
+/**
+ * Helper to build responsive CSS custom properties from a ResponsiveUiProps object.
+ */
+export function buildResponsiveVars(
+  ui: any,
+  keyMap: Record<string, string>
+): any {
+  if (!ui) return {};
+  const styles: Record<string, string> = {};
+  const breakpoints = ['sm', 'lt_sm', 'md', 'lt_md', 'lg', 'lt_lg', 'xl', 'lt_xl'] as const;
+
+  // 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;
+}
+
+// ============================================================
+// NEW: Generic UI Props — style-like object + pseudo support
+// ============================================================
+
+/** CSS properties yang bisa di-set via ui prop */
+export type CSSValue = string | number;
+
+/** Pseudo-class props yang support di ui{} */
+export type UiPseudoProps = CSS.Properties<string | number> & {
+  // Aliases & shortcuts
+  bg?: CSSValue;
+  size?: CSSValue;
+  weight?: CSSValue;
+
+  // Escape hatch — property CSS custom variable apapun
+  [cssProperty: string]: any;
+};
+
+/**
+ * Pseudo-class props yang juga mendukung nested responsive breakpoints:
+ * hover: { background: 'salmon', md: { background: 'teal' } }
+ */
+export type UiPseudoStateProps = UiPseudoProps & {
+  sm?: UiPseudoProps;
+  md?: UiPseudoProps;
+  lg?: UiPseudoProps;
+  xl?: UiPseudoProps;
+};
+
+/**
+ * Breakpoint props yang mendukung flat CSS properties plus nested pseudo-classes:
+ * md: { background: 'teal', hover: { background: '#fae8ff', borderColor: '#a21caf' }, focus: { borderColor: '#c026d3' } }
+ */
+export type UiBreakpointProps = UiPseudoProps & {
+  /** Style saat :hover pada breakpoint ini */
+  hover?: UiPseudoProps;
+  /** Style saat :active pada breakpoint ini */
+  active?: UiPseudoProps;
+  /** Style saat :focus / :focus-visible pada breakpoint ini */
+  focus?: UiPseudoProps;
+  /** Style saat disabled pada breakpoint ini */
+  disabled?: UiPseudoProps;
+  /** Style saat dark mode aktif (.dark ancestor class) pada breakpoint ini */
+  dark?: UiPseudoProps;
+};
+
+/**
+ * UiProps — seperti style object CSS biasa, tapi dengan support pseudo-class & responsive breakpoints.
+ *
+ * Mendukung SEMUA CSS property secara otomatis dengan autocomplete via csstype.
+ *
+ * @example
+ * ```tsx
+ * <Button
+ *   ui={{
+ *     background: 'purple',
+ *     color: 'white',
+ *     borderRadius: '99px',
+ *     backdropFilter: 'blur(8px)',
+ *     hover: {
+ *       background: 'darkpurple',
+ *       transform: 'scale(1.02)',
+ *     },
+ *     active: { opacity: '0.85' },
+ *     // Dark mode via .dark ancestor class (kompatibel Tailwind dark mode)
+ *     dark: {
+ *       background: '#1a1a2e',
+ *       color: '#e2e8f0',
+ *     },
+ *   }}
+ * />
+ * ```
+ */
+export type UiProps = UiPseudoProps & {
+  // Pseudo-class support
+  /** Style saat :hover */
+  hover?: UiPseudoStateProps;
+  /** Style saat :active */
+  active?: UiPseudoStateProps;
+  /** Style saat :focus / :focus-visible */
+  focus?: UiPseudoStateProps;
+  /** Style saat disabled */
+  disabled?: UiPseudoStateProps;
+  /**
+   * Style saat dark mode aktif — diterapkan lewat ancestor class `.dark`.
+   * Kompatibel dengan Tailwind CSS dark mode (class strategy).
+   *
+   * @example
+   * ```tsx
+   * ui={{ color: '#141313', dark: { color: '#e2e8f0', background: '#1a1a2e' } }}
+   * ```
+   * Menghasilkan: `.dark [style*="--ttdk-ui-dark-color:"] { color: var(...) !important; }`
+   */
+  dark?: UiPseudoStateProps;
+
+  // Responsive Breakpoint support (mobile-first min-width):
+  /** Overrides saat min-width: 640px */
+  sm?: UiBreakpointProps;
+  /** Overrides saat min-width: 768px */
+  md?: UiBreakpointProps;
+  /** Overrides saat min-width: 1024px */
+  lg?: UiBreakpointProps;
+  /** Overrides saat min-width: 1280px */
+  xl?: UiBreakpointProps;
+  /** Overrides saat min-width: 1536px */
+  '2xl'?: UiBreakpointProps;
+
+  // Escape hatch — property CSS atau custom variable apapun
+  [key: string]: any;
+};
+
+const PSEUDOS = ['hover', 'active', 'focus', 'disabled', 'dark'] as const;
+const BREAKPOINTS = ['sm', 'lt_sm', 'lt-sm', 'md', 'lt_md', 'lt-md', 'lg', 'lt_lg', 'lt-lg', 'xl', 'lt_xl', 'lt-xl', '2xl'] as const;
+
+const BREAKPOINT_QUERIES: Record<string, string> = {
+  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',
+] as const;
+
+/** Convert camelCase ke kebab-case: backgroundColor → background-color */
+function toKebab(str: string): string {
+  return str.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+}
+
+/** Membersihkan akhiran !important jika user tidak sengaja menyertakannya di string nilai */
+export function cleanUiValue(v: any): string {
+  if (typeof v === 'string') {
+    return v.replace(/\s*!important\s*$/i, '').trim();
+  }
+  return String(v);
+}
+
+function resolveCssProperty(key: string): string {
+  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<string>();
+const styleBuckets: Record<string, HTMLStyleElement> = {};
+
+function getBucketElement(bucket: string): HTMLStyleElement | null {
+  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) as HTMLStyleElement | null;
+  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 as any);
+    let nextSibling: HTMLElement | null = 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: string, ruleKey: string, cssRule: string) {
+  if (injectedRuleSet.has(ruleKey)) return;
+  injectedRuleSet.add(ruleKey);
+
+  const el = getBucketElement(bucket);
+  if (!el) return;
+
+  el.appendChild(document.createTextNode(cssRule + '\n'));
+}
+
+function getBaseVarRule(pseudo: string, varName: string, cssProp: string): string {
+  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: string, varName: string, cssProp: string) {
+  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: string, varName: string, cssProp: string) {
+  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: string, pseudo: string, varName: string, cssProp: string) {
+  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?: UiProps | null): Record<string, any> {
+  if (!ui || typeof ui !== 'object') return {};
+  const base: Record<string, any> = {};
+  for (const [key, value] of Object.entries(ui)) {
+    if (value === undefined || value === null) continue;
+    if (PSEUDOS.includes(key as any) || BREAKPOINTS.includes(key as any)) 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?: UiProps | null, prefix = '--ttdk-ui'): Record<string, any> {
+  if (!ui) return {};
+  const vars: Record<string, any> = { ...extractBaseStyles(ui) };
+
+  // 1. Base props
+  for (const [key, value] of Object.entries(ui)) {
+    if (value === undefined || value === null) continue;
+    if (PSEUDOS.includes(key as any) || BREAKPOINTS.includes(key as any)) 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 as any)[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 as any)) {
+        const bpObj = value as any;
+        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 as any)[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 as any)) {
+        const pseudoObj = value as any;
+        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?: UiProps | null, prefix = '--ttdk-ui'): Record<string, any> {
+  return buildUiVars(ui, prefix);
+}
+
+// ============================================================
+// Layout Helpers for Flex & Grid
+// ============================================================
+
+function mapFlexJustify(val?: string) {
+  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?: string) {
+  if (!val) return undefined;
+  if (val === 'start') return 'flex-start';
+  if (val === 'end') return 'flex-end';
+  return val;
+}
+
+function formatGap(val?: string | number) {
+  if (val === undefined || val === null || val === '') return undefined;
+  if (typeof val === 'number') return `${val}px`;
+  return String(val);
+}
+
+export function buildFlexVars(props: any): Record<string, string> {
+  if (!props) return {};
+  const vars: Record<string, string> = {};
+
+  // 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'] as const;
+  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?: string) {
+  if (!val) return undefined;
+  if (val === 'start') return 'flex-start';
+  if (val === 'end') return 'flex-end';
+  return val;
+}
+
+function formatFlexBasis(val?: string | number) {
+  if (val === undefined || val === null || val === '') return undefined;
+  if (typeof val === 'number') return `${val}px`;
+  return String(val);
+}
+
+function formatFlexGrowShrink(val?: number | boolean) {
+  if (val === undefined || val === null) return undefined;
+  if (typeof val === 'boolean') return val ? '1' : '0';
+  return String(val);
+}
+
+export function buildFlexItemVars(props: any): Record<string, string> {
+  if (!props) return {};
+  const vars: Record<string, string> = {};
+
+  // 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'] as const;
+  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?: string | number) {
+  if (val === undefined || val === null || val === '') return undefined;
+  if (typeof val === 'number') return `repeat(${val}, minmax(0, 1fr))`;
+  return String(val);
+}
+
+function mapGridJustifyContent(val?: string) {
+  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?: string) {
+  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: any): Record<string, string> {
+  if (!props) return {};
+  const vars: Record<string, string> = {};
+
+  // 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'] as const;
+  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?: number | string) {
+  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?: number | string,
+  start?: number | string,
+  end?: number | string
+): string | undefined {
+  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: any): Record<string, string> {
+  if (!props) return {};
+  const vars: Record<string, string> = {};
+
+  // 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'] as const;
+  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;
+}