@aloudata/aloudata-design 3.1.7 → 3.2.0-beta.0

package/dist/theme/runtime/themeToCssVars.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeToCssVars.js","names":[],"sources":["../../../src/theme/runtime/themeToCssVars.ts"],"sourcesContent":["import { assignVars, radiusVarNames } from './tokenMap';\nimport type { AldThemeCssVars, ResolvedAldTheme } from './types';\n\ntype Rgb = [number, number, number];\n\nconst tonalStops = {\n  950: 0.68,\n  900: 0.52,\n  800: 0.36,\n  700: 0.18,\n  600: 0,\n  500: 0.2,\n  400: 0.38,\n  300: 0.56,\n  200: 0.72,\n  100: 0.84,\n  50: 0.92,\n  25: 0.96,\n  0: 0.98,\n} as const;\n\nfunction clampChannel(value: number) {\n  return Math.max(0, Math.min(255, Math.round(value)));\n}\n\nfunction parseHexColor(color: string): Rgb | null {\n  const normalized = color.trim();\n  const match = normalized.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);\n  if (!match) return null;\n  const hex =\n    match[1].length === 3\n      ? match[1]\n          .split('')\n          .map((char) => char + char)\n          .join('')\n      : match[1];\n  return [\n    Number.parseInt(hex.slice(0, 2), 16),\n    Number.parseInt(hex.slice(2, 4), 16),\n    Number.parseInt(hex.slice(4, 6), 16),\n  ];\n}\n\nfunction rgbToHex(rgb: Rgb) {\n  return `#${rgb\n    .map((channel) => clampChannel(channel).toString(16).padStart(2, '0'))\n    .join('')}`;\n}\n\nfunction normalizeColor(color: string) {\n  const rgb = parseHexColor(color);\n  return rgb ? rgbToHex(rgb) : color.trim();\n}\n\nfunction mix(from: Rgb, to: Rgb, amount: number): Rgb {\n  return [\n    from[0] + (to[0] - from[0]) * amount,\n    from[1] + (to[1] - from[1]) * amount,\n    from[2] + (to[2] - from[2]) * amount,\n  ];\n}\n\nfunction createPaletteVars(\n  prefix: string,\n  baseColor: string,\n  globalPrefix?: string,\n  globalZeroName?: `--${string}`,\n): AldThemeCssVars {\n  const baseRgb = parseHexColor(baseColor);\n  const base = normalizeColor(baseColor);\n\n  if (!baseRgb) {\n    return {\n      [`--semantic-${prefix}-600`]: base,\n    };\n  }\n\n  const vars: AldThemeCssVars = {};\n  for (const [stop, amount] of Object.entries(tonalStops)) {\n    const target: Rgb = Number(stop) > 600 ? [0, 0, 0] : [255, 255, 255];\n    const value =\n      stop === '600' ? base : rgbToHex(mix(baseRgb, target, amount));\n    vars[`--semantic-${prefix}-${stop}`] = value;\n    if (globalPrefix) {\n      vars[`--${globalPrefix}-${stop}`] = value;\n    }\n  }\n  if (globalZeroName && vars[`--semantic-${prefix}-0`]) {\n    vars[globalZeroName] = vars[`--semantic-${prefix}-0`];\n  }\n  return vars;\n}\n\nfunction radiusToCssValue(value: number | string) {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nexport function themeToCssVars(theme: ResolvedAldTheme): AldThemeCssVars {\n  const { token } = theme;\n  const vars: AldThemeCssVars = {};\n\n  assignVars(\n    vars,\n    createPaletteVars(\n      'brand',\n      token.colorPrimary,\n      'global-blue',\n      '--global-blue-blue-0',\n    ),\n  );\n  assignVars(vars, createPaletteVars('informative', token.colorInfo));\n  assignVars(\n    vars,\n    createPaletteVars(\n      'positive',\n      token.colorSuccess,\n      'global-green',\n      '--global-green-green-0',\n    ),\n  );\n  assignVars(\n    vars,\n    createPaletteVars(\n      'warning',\n      token.colorWarning,\n      'global-orange',\n      '--global-orange-orange-0',\n    ),\n  );\n  assignVars(\n    vars,\n    createPaletteVars('negative', token.colorError, 'global-red'),\n  );\n\n  const textBase = normalizeColor(token.colorTextBase);\n  const bgBase = normalizeColor(token.colorBgBase);\n  const borderBase = normalizeColor(token.colorBorderBase);\n  const radius = radiusToCssValue(token.borderRadius);\n\n  assignVars(vars, {\n    '--content-primary': textBase,\n    '--alias-colors-text-strong': textBase,\n    '--alias-colors-text-default': textBase,\n    '--background-default': bgBase,\n    '--background-neutral-surface': bgBase,\n    '--border-default': borderBase,\n    '--border-default-alpha': borderBase,\n    '--action-primary-normal': 'var(--semantic-brand-600)',\n    '--action-primary-hover': 'var(--semantic-brand-800)',\n    '--action-primary-active': 'var(--semantic-brand-900)',\n    '--action-primary-selected': 'var(--semantic-brand-800)',\n    '--action-primary-subtle-normal': 'var(--semantic-brand-50)',\n    '--action-primary-subtle-hover': 'var(--semantic-brand-100)',\n    '--action-primary-subtle-active': 'var(--semantic-brand-300)',\n    '--action-primary-subtle-selected': 'var(--semantic-brand-100)',\n    '--control-state-selected': 'var(--semantic-brand-600)',\n    '--control-state-unselected': 'var(--semantic-neutral-500)',\n    '--focus-ring': 'var(--semantic-brand-600)',\n    '--content-brand-primary': 'var(--semantic-brand-900)',\n    '--content-brand-secondary': 'var(--semantic-brand-600)',\n    '--alias-colors-text-selected': 'var(--semantic-brand-900)',\n    '--alias-colors-text-brand': 'var(--semantic-brand-600)',\n    '--alias-colors-text-danger': 'var(--semantic-negative-600)',\n    '--alias-colors-text-warning': 'var(--semantic-warning-600)',\n    '--alias-colors-text-success': 'var(--semantic-positive-600)',\n    '--alias-colors-text-information': 'var(--semantic-informative-600)',\n    '--alias-colors-icon-selected': 'var(--semantic-brand-600)',\n    '--alias-colors-icon-brand': 'var(--semantic-brand-600)',\n    '--alias-colors-icon-danger': 'var(--semantic-negative-600)',\n    '--alias-colors-icon-warning': 'var(--semantic-warning-600)',\n    '--alias-colors-icon-success': 'var(--semantic-positive-600)',\n    '--alias-colors-icon-information': 'var(--semantic-informative-600)',\n    '--border-brand-strong': 'var(--semantic-brand-600)',\n    '--border-brand-subtle': 'var(--semantic-brand-300)',\n    '--alias-colors-border-selected': 'var(--semantic-brand-600)',\n    '--alias-colors-border-brand': 'var(--semantic-brand-600)',\n    '--alias-colors-border-danger': 'var(--semantic-negative-600)',\n    '--alias-colors-border-warning': 'var(--semantic-warning-600)',\n    '--alias-colors-border-success': 'var(--semantic-positive-600)',\n    '--alias-colors-border-information': 'var(--semantic-informative-600)',\n    '--alias-colors-bg-selected-default': 'var(--semantic-brand-100)',\n    '--alias-colors-bg-selected-hover': 'var(--semantic-brand-100)',\n    '--alias-colors-bg-selected-press': 'var(--semantic-brand-300)',\n    '--alias-colors-bg-selected-strong-default': 'var(--semantic-brand-600)',\n    '--alias-colors-bg-selected-strong-hover': 'var(--semantic-brand-600)',\n    '--alias-colors-bg-selected-strong-press': 'var(--semantic-brand-900)',\n    '--background-brand-strong': 'var(--semantic-brand-600)',\n    '--background-brand-muted': 'var(--semantic-brand-200)',\n    '--background-brand-subtle': 'var(--semantic-brand-25)',\n    '--semantic-informative-informative-0': 'var(--semantic-informative-0)',\n    '--interaction-default-normal': 'var(--semantic-brand-600)',\n    '--interaction-default-hover': 'var(--semantic-brand-800)',\n    '--interaction-default-active': 'var(--semantic-brand-900)',\n    '--interaction-border-normal': 'var(--semantic-brand-400)',\n    '--interaction-border-hover': 'var(--semantic-brand-500)',\n    '--interaction-border-active': 'var(--semantic-brand-700)',\n    '--interaction-border-selected': 'var(--semantic-brand-600)',\n  });\n\n  for (const varName of radiusVarNames) {\n    vars[varName] = radius;\n  }\n\n  return vars;\n}\n"],"mappings":";;AAKA,IAAM,aAAa;CACjB,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,GAAG;CACJ;AAED,SAAS,aAAa,OAAe;AACnC,QAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,MAAM,MAAM,CAAC,CAAC;;AAGtD,SAAS,cAAc,OAA2B;CAEhD,MAAM,QADa,MAAM,MAAM,CACN,MAAM,gCAAgC;AAC/D,KAAI,CAAC,MAAO,QAAO;CACnB,MAAM,MACJ,MAAM,GAAG,WAAW,IAChB,MAAM,GACH,MAAM,GAAG,CACT,KAAK,SAAS,OAAO,KAAK,CAC1B,KAAK,GAAG,GACX,MAAM;AACZ,QAAO;EACL,OAAO,SAAS,IAAI,MAAM,GAAG,EAAE,EAAE,GAAG;EACpC,OAAO,SAAS,IAAI,MAAM,GAAG,EAAE,EAAE,GAAG;EACpC,OAAO,SAAS,IAAI,MAAM,GAAG,EAAE,EAAE,GAAG;EACrC;;AAGH,SAAS,SAAS,KAAU;AAC1B,QAAO,IAAI,IACR,KAAK,YAAY,aAAa,QAAQ,CAAC,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,CACrE,KAAK,GAAG;;AAGb,SAAS,eAAe,OAAe;CACrC,MAAM,MAAM,cAAc,MAAM;AAChC,QAAO,MAAM,SAAS,IAAI,GAAG,MAAM,MAAM;;AAG3C,SAAS,IAAI,MAAW,IAAS,QAAqB;AACpD,QAAO;EACL,KAAK,MAAM,GAAG,KAAK,KAAK,MAAM;EAC9B,KAAK,MAAM,GAAG,KAAK,KAAK,MAAM;EAC9B,KAAK,MAAM,GAAG,KAAK,KAAK,MAAM;EAC/B;;AAGH,SAAS,kBACP,QACA,WACA,cACA,gBACiB;CACjB,MAAM,UAAU,cAAc,UAAU;CACxC,MAAM,OAAO,eAAe,UAAU;AAEtC,KAAI,CAAC,QACH,QAAO,GACJ,cAAc,OAAO,QAAQ,MAC/B;CAGH,MAAM,OAAwB,EAAE;AAChC,MAAK,MAAM,CAAC,MAAM,WAAW,OAAO,QAAQ,WAAW,EAAE;EACvD,MAAM,SAAc,OAAO,KAAK,GAAG,MAAM;GAAC;GAAG;GAAG;GAAE,GAAG;GAAC;GAAK;GAAK;GAAI;EACpE,MAAM,QACJ,SAAS,QAAQ,OAAO,SAAS,IAAI,SAAS,QAAQ,OAAO,CAAC;AAChE,OAAK,cAAc,OAAO,GAAG,UAAU;AACvC,MAAI,aACF,MAAK,KAAK,aAAa,GAAG,UAAU;;AAGxC,KAAI,kBAAkB,KAAK,cAAc,OAAO,KAC9C,MAAK,kBAAkB,KAAK,cAAc,OAAO;AAEnD,QAAO;;AAGT,SAAS,iBAAiB,OAAwB;AAChD,QAAO,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;;AAGpD,SAAgB,eAAe,OAA0C;CACvE,MAAM,EAAE,UAAU;CAClB,MAAM,OAAwB,EAAE;AAEhC,YACE,MACA,kBACE,SACA,MAAM,cACN,eACA,uBACD,CACF;AACD,YAAW,MAAM,kBAAkB,eAAe,MAAM,UAAU,CAAC;AACnE,YACE,MACA,kBACE,YACA,MAAM,cACN,gBACA,yBACD,CACF;AACD,YACE,MACA,kBACE,WACA,MAAM,cACN,iBACA,2BACD,CACF;AACD,YACE,MACA,kBAAkB,YAAY,MAAM,YAAY,aAAa,CAC9D;CAED,MAAM,WAAW,eAAe,MAAM,cAAc;CACpD,MAAM,SAAS,eAAe,MAAM,YAAY;CAChD,MAAM,aAAa,eAAe,MAAM,gBAAgB;CACxD,MAAM,SAAS,iBAAiB,MAAM,aAAa;AAEnD,YAAW,MAAM;EACf,qBAAqB;EACrB,8BAA8B;EAC9B,+BAA+B;EAC/B,wBAAwB;EACxB,gCAAgC;EAChC,oBAAoB;EACpB,0BAA0B;EAC1B,2BAA2B;EAC3B,0BAA0B;EAC1B,2BAA2B;EAC3B,6BAA6B;EAC7B,kCAAkC;EAClC,iCAAiC;EACjC,kCAAkC;EAClC,oCAAoC;EACpC,4BAA4B;EAC5B,8BAA8B;EAC9B,gBAAgB;EAChB,2BAA2B;EAC3B,6BAA6B;EAC7B,gCAAgC;EAChC,6BAA6B;EAC7B,8BAA8B;EAC9B,+BAA+B;EAC/B,+BAA+B;EAC/B,mCAAmC;EACnC,gCAAgC;EAChC,6BAA6B;EAC7B,8BAA8B;EAC9B,+BAA+B;EAC/B,+BAA+B;EAC/B,mCAAmC;EACnC,yBAAyB;EACzB,yBAAyB;EACzB,kCAAkC;EAClC,+BAA+B;EAC/B,gCAAgC;EAChC,iCAAiC;EACjC,iCAAiC;EACjC,qCAAqC;EACrC,sCAAsC;EACtC,oCAAoC;EACpC,oCAAoC;EACpC,6CAA6C;EAC7C,2CAA2C;EAC3C,2CAA2C;EAC3C,6BAA6B;EAC7B,4BAA4B;EAC5B,6BAA6B;EAC7B,wCAAwC;EACxC,gCAAgC;EAChC,+BAA+B;EAC/B,gCAAgC;EAChC,+BAA+B;EAC/B,8BAA8B;EAC9B,+BAA+B;EAC/B,iCAAiC;EAClC,CAAC;AAEF,MAAK,MAAM,WAAW,eACpB,MAAK,WAAW;AAGlB,QAAO"}
+{"version":3,"file":"themeToCssVars.js","names":["assignVars","radiusVarNames","AldThemeCssVars","ResolvedAldTheme","Rgb","tonalStops","const","clampChannel","value","Math","max","min","round","parseHexColor","color","normalized","trim","match","hex","length","split","map","char","join","Number","parseInt","slice","rgbToHex","rgb","channel","toString","padStart","normalizeColor","mix","from","to","amount","createPaletteVars","prefix","baseColor","globalPrefix","globalZeroName","baseRgb","base","vars","stop","Object","entries","target","radiusToCssValue","themeToCssVars","theme","token","colorPrimary","colorInfo","colorSuccess","colorWarning","colorError","textBase","colorTextBase","bgBase","colorBgBase","borderBase","colorBorderBase","radius","borderRadius","varName"],"sources":["../../../src/theme/runtime/themeToCssVars.ts"],"sourcesContent":["import { assignVars, radiusVarNames } from './tokenMap';\nimport type { AldThemeCssVars, ResolvedAldTheme } from './types';\n\ntype Rgb = [number, number, number];\n\nconst tonalStops = {\n  950: 0.68,\n  900: 0.52,\n  800: 0.36,\n  700: 0.18,\n  600: 0,\n  500: 0.2,\n  400: 0.38,\n  300: 0.56,\n  200: 0.72,\n  100: 0.84,\n  50: 0.92,\n  25: 0.96,\n  0: 0.98,\n} as const;\n\nfunction clampChannel(value: number) {\n  return Math.max(0, Math.min(255, Math.round(value)));\n}\n\nfunction parseHexColor(color: string): Rgb | null {\n  const normalized = color.trim();\n  const match = normalized.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);\n  if (!match) return null;\n  const hex =\n    match[1].length === 3\n      ? match[1]\n          .split('')\n          .map((char) => char + char)\n          .join('')\n      : match[1];\n  return [\n    Number.parseInt(hex.slice(0, 2), 16),\n    Number.parseInt(hex.slice(2, 4), 16),\n    Number.parseInt(hex.slice(4, 6), 16),\n  ];\n}\n\nfunction rgbToHex(rgb: Rgb) {\n  return `#${rgb\n    .map((channel) => clampChannel(channel).toString(16).padStart(2, '0'))\n    .join('')}`;\n}\n\nfunction normalizeColor(color: string) {\n  const rgb = parseHexColor(color);\n  return rgb ? rgbToHex(rgb) : color.trim();\n}\n\nfunction mix(from: Rgb, to: Rgb, amount: number): Rgb {\n  return [\n    from[0] + (to[0] - from[0]) * amount,\n    from[1] + (to[1] - from[1]) * amount,\n    from[2] + (to[2] - from[2]) * amount,\n  ];\n}\n\nfunction createPaletteVars(\n  prefix: string,\n  baseColor: string,\n  globalPrefix?: string,\n  globalZeroName?: `--${string}`,\n): AldThemeCssVars {\n  const baseRgb = parseHexColor(baseColor);\n  const base = normalizeColor(baseColor);\n\n  if (!baseRgb) {\n    return {\n      [`--semantic-${prefix}-600`]: base,\n    };\n  }\n\n  const vars: AldThemeCssVars = {};\n  for (const [stop, amount] of Object.entries(tonalStops)) {\n    const target: Rgb = Number(stop) > 600 ? [0, 0, 0] : [255, 255, 255];\n    const value =\n      stop === '600' ? base : rgbToHex(mix(baseRgb, target, amount));\n    vars[`--semantic-${prefix}-${stop}`] = value;\n    if (globalPrefix) {\n      vars[`--${globalPrefix}-${stop}`] = value;\n    }\n  }\n  if (globalZeroName && vars[`--semantic-${prefix}-0`]) {\n    vars[globalZeroName] = vars[`--semantic-${prefix}-0`];\n  }\n  return vars;\n}\n\nfunction radiusToCssValue(value: number | string) {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nexport function themeToCssVars(theme: ResolvedAldTheme): AldThemeCssVars {\n  const { token } = theme;\n  const vars: AldThemeCssVars = {};\n\n  assignVars(\n    vars,\n    createPaletteVars(\n      'brand',\n      token.colorPrimary,\n      'global-blue',\n      '--global-blue-blue-0',\n    ),\n  );\n  assignVars(vars, createPaletteVars('informative', token.colorInfo));\n  assignVars(\n    vars,\n    createPaletteVars(\n      'positive',\n      token.colorSuccess,\n      'global-green',\n      '--global-green-green-0',\n    ),\n  );\n  assignVars(\n    vars,\n    createPaletteVars(\n      'warning',\n      token.colorWarning,\n      'global-orange',\n      '--global-orange-orange-0',\n    ),\n  );\n  assignVars(\n    vars,\n    createPaletteVars('negative', token.colorError, 'global-red'),\n  );\n\n  const textBase = normalizeColor(token.colorTextBase);\n  const bgBase = normalizeColor(token.colorBgBase);\n  const borderBase = normalizeColor(token.colorBorderBase);\n  const radius = radiusToCssValue(token.borderRadius);\n\n  assignVars(vars, {\n    '--content-primary': textBase,\n    '--alias-colors-text-strong': textBase,\n    '--alias-colors-text-default': textBase,\n    '--background-default': bgBase,\n    '--background-neutral-surface': bgBase,\n    '--border-default': borderBase,\n    '--border-default-alpha': borderBase,\n    '--action-primary-normal': 'var(--semantic-brand-600)',\n    '--action-primary-hover': 'var(--semantic-brand-800)',\n    '--action-primary-active': 'var(--semantic-brand-900)',\n    '--action-primary-selected': 'var(--semantic-brand-800)',\n    '--action-primary-subtle-normal': 'var(--semantic-brand-50)',\n    '--action-primary-subtle-hover': 'var(--semantic-brand-100)',\n    '--action-primary-subtle-active': 'var(--semantic-brand-300)',\n    '--action-primary-subtle-selected': 'var(--semantic-brand-100)',\n    '--control-state-selected': 'var(--semantic-brand-600)',\n    '--control-state-unselected': 'var(--semantic-neutral-500)',\n    '--focus-ring': 'var(--semantic-brand-600)',\n    '--content-brand-primary': 'var(--semantic-brand-900)',\n    '--content-brand-secondary': 'var(--semantic-brand-600)',\n    '--alias-colors-text-selected': 'var(--semantic-brand-900)',\n    '--alias-colors-text-brand': 'var(--semantic-brand-600)',\n    '--alias-colors-text-danger': 'var(--semantic-negative-600)',\n    '--alias-colors-text-warning': 'var(--semantic-warning-600)',\n    '--alias-colors-text-success': 'var(--semantic-positive-600)',\n    '--alias-colors-text-information': 'var(--semantic-informative-600)',\n    '--alias-colors-icon-selected': 'var(--semantic-brand-600)',\n    '--alias-colors-icon-brand': 'var(--semantic-brand-600)',\n    '--alias-colors-icon-danger': 'var(--semantic-negative-600)',\n    '--alias-colors-icon-warning': 'var(--semantic-warning-600)',\n    '--alias-colors-icon-success': 'var(--semantic-positive-600)',\n    '--alias-colors-icon-information': 'var(--semantic-informative-600)',\n    '--border-brand-strong': 'var(--semantic-brand-600)',\n    '--border-brand-subtle': 'var(--semantic-brand-300)',\n    '--alias-colors-border-selected': 'var(--semantic-brand-600)',\n    '--alias-colors-border-brand': 'var(--semantic-brand-600)',\n    '--alias-colors-border-danger': 'var(--semantic-negative-600)',\n    '--alias-colors-border-warning': 'var(--semantic-warning-600)',\n    '--alias-colors-border-success': 'var(--semantic-positive-600)',\n    '--alias-colors-border-information': 'var(--semantic-informative-600)',\n    '--alias-colors-bg-selected-default': 'var(--semantic-brand-100)',\n    '--alias-colors-bg-selected-hover': 'var(--semantic-brand-100)',\n    '--alias-colors-bg-selected-press': 'var(--semantic-brand-300)',\n    '--alias-colors-bg-selected-strong-default': 'var(--semantic-brand-600)',\n    '--alias-colors-bg-selected-strong-hover': 'var(--semantic-brand-600)',\n    '--alias-colors-bg-selected-strong-press': 'var(--semantic-brand-900)',\n    '--background-brand-strong': 'var(--semantic-brand-600)',\n    '--background-brand-muted': 'var(--semantic-brand-200)',\n    '--background-brand-subtle': 'var(--semantic-brand-25)',\n    '--semantic-informative-informative-0': 'var(--semantic-informative-0)',\n    '--interaction-default-normal': 'var(--semantic-brand-600)',\n    '--interaction-default-hover': 'var(--semantic-brand-800)',\n    '--interaction-default-active': 'var(--semantic-brand-900)',\n    '--interaction-border-normal': 'var(--semantic-brand-400)',\n    '--interaction-border-hover': 'var(--semantic-brand-500)',\n    '--interaction-border-active': 'var(--semantic-brand-700)',\n    '--interaction-border-selected': 'var(--semantic-brand-600)',\n  });\n\n  for (const varName of radiusVarNames) {\n    vars[varName] = radius;\n  }\n\n  return vars;\n}\n"],"mappings":"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"}

package/dist/theme/runtime/tokenMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokenMap.js","names":[],"sources":["../../../src/theme/runtime/tokenMap.ts"],"sourcesContent":["import type { AldThemeCssVars } from './types';\n\nexport const themeStyleElementId = 'ald-theme-runtime';\nexport const themeDataAttribute = 'data-ald-theme';\n\nexport const radiusVarNames = [\n  '--alias-radius-75',\n  '--alias-radius-100',\n] as const;\n\nexport function assignVars(\n  target: AldThemeCssVars,\n  vars: AldThemeCssVars,\n): AldThemeCssVars {\n  Object.assign(target, vars);\n  return target;\n}\n"],"mappings":";AAEA,IAAa,sBAAsB;AACnC,IAAa,qBAAqB;AAElC,IAAa,iBAAiB,CAC5B,qBACA,qBACD;AAED,SAAgB,WACd,QACA,MACiB;AACjB,QAAO,OAAO,QAAQ,KAAK;AAC3B,QAAO"}
+{"version":3,"file":"tokenMap.js","names":["AldThemeCssVars","themeStyleElementId","themeDataAttribute","radiusVarNames","const","assignVars","target","vars","Object","assign"],"sources":["../../../src/theme/runtime/tokenMap.ts"],"sourcesContent":["import type { AldThemeCssVars } from './types';\n\nexport const themeStyleElementId = 'ald-theme-runtime';\nexport const themeDataAttribute = 'data-ald-theme';\n\nexport const radiusVarNames = [\n  '--alias-radius-75',\n  '--alias-radius-100',\n] as const;\n\nexport function assignVars(\n  target: AldThemeCssVars,\n  vars: AldThemeCssVars,\n): AldThemeCssVars {\n  Object.assign(target, vars);\n  return target;\n}\n"],"mappings":";AAEA,IAAaC,sBAAsB;AACnC,IAAaC,qBAAqB;AAElC,IAAaC,iBAAiB,CAC5B,qBACA,qBACD;AAED,SAAgBE,WACdC,QACAC,MACiB;AACjBC,QAAOC,OAAOH,QAAQC,KAAK;AAC3B,QAAOD"}

package/dist/theme/typography.d.ts

@@ -1,2 +1 @@
 export * from './typography/index.js';
-export { default } from './typography/index.js';

package/dist/theme/typography.js

@@ -0,0 +1 @@
+export * from './typography/index.js';

package/dist/theme.d.ts

@@ -1,2 +1 @@
 export * from './theme/index.js';
-export { default } from './theme/index.js';

package/dist/theme.js

@@ -0,0 +1 @@
+export * from './theme/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "3.1.7",
+  "version": "3.2.0-beta.0",
   "description": "",
   "license": "MIT",
   "sideEffects": [
@@ -34,12 +34,12 @@
     "dist"
   ],
   "scripts": {
-    "build": "npm run tokens:check && npm run governance:check && vite build && npm run governance:publish && npm run tokens:validate-dist && npm run governance:validate-dist",
-    "build:watch": "vite build --watch",
+    "build": "npm run tokens:check && npm run governance:check && node ./node_modules/vite/bin/vite.js build && npm run governance:publish && npm run tokens:validate-dist && npm run governance:validate-dist",
+    "build:watch": "node ./node_modules/vite/bin/vite.js build --watch",
     "cmt": "npx zx ./scripts/createComponentTemplate.mjs",
     "coverage": "vitest run --coverage.enabled",
-    "dev": "storybook dev -p 6006",
-    "docs:build": "storybook build",
+    "dev": "node ./scripts/runStorybook.mjs dev -p 6006",
+    "docs:build": "node ./scripts/runStorybook.mjs build",
     "gen:icon": "node ./scripts/genIcon.mjs",
     "governance:check": "vite-node scripts/checkSemanticGovernanceContract.ts",
     "governance:publish": "vite-node scripts/publishSemanticGovernanceContract.ts",
@@ -47,23 +47,32 @@
     "governance:validate-package": "vite-node scripts/validateSemanticGovernancePackage.ts",
     "link-to-local": "node scripts/link-to-local.mjs",
     "lint": "npm run lint:ts && npm run lint:es",
+    "lint:compiler": "node ./scripts/checkReactCompilerLint.mjs",
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
     "lint:ts": "tsc --noEmit",
     "prepare": "husky install",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "npm run verify:release",
     "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,md,json}\"",
-    "postpublish": "git push --tags",
     "release:beta": "npm version prerelease --preid=beta -m \"chore: bump version to %s\" && npm publish --access public --tag beta",
     "release:major": "npm version major -m \"chore: bump version to %s\" && npm publish --access public",
     "release:minor": "npm version minor -m \"chore: bump version to %s\" && npm publish --access public",
+    "release:minor:beta": "npm version preminor --preid=beta -m \"chore: bump version to %s\" && npm publish --access public --tag beta",
     "release:patch": "npm version patch -m \"chore: bump version to %s\" && npm publish --access public",
     "release:stable": "npm version $(node -p \"require('./package.json').version.split('-')[0]\") -m \"chore: bump version to %s\" && npm publish --access public",
     "start": "npm run dev",
     "test": "vitest",
+    "test:matrix": "node ./scripts/runReactTestMatrix.mjs",
+    "test:run": "node ./scripts/runVitest.mjs",
     "test:storybook": "test-storybook",
+    "test:storybook:ci": "node ./scripts/testStorybookCi.mjs",
     "tokens:check": "vite-node scripts/checkBaselineTokenValues.ts",
     "tokens:generate": "vite-node scripts/generateBaselineTokenValues.ts",
-    "tokens:validate-dist": "vite-node scripts/validateBaselineTokenValuesDist.ts"
+    "tokens:validate-dist": "vite-node scripts/validateBaselineTokenValuesDist.ts",
+    "verify:compiler": "node ./scripts/verifyReactSourceBoundary.mjs && node ./scripts/verifyReactCompilerDist.mjs",
+    "verify:compiler-toggle": "node ./scripts/verifyReactCompilerToggle.mjs",
+    "verify:consumer": "node ./scripts/verifyReactConsumers.mjs",
+    "verify:release": "npm run lint && npm run lint:compiler && npm run test:matrix && npm run test:storybook:ci && npm run build && npm run verify:compiler && npm run verify:compiler-toggle && npm run governance:validate-package && npm run verify:consumer",
+    "preversion": "npm run verify:release"
   },
   "lint-staged": {
     "*.{md,json}": [
@@ -89,94 +98,113 @@
     "firefox >= 75"
   ],
   "dependencies": {
+    "@aloudata/icons-react": "^0.2.4",
     "@floating-ui/react": "^0.27.19",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-scroll-area": "^1.0.4",
+    "@radix-ui/react-scroll-area": "^1.2.18",
     "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@rc-component/color-picker": "^2.0.1",
     "@szhsin/react-menu": "^4.1.0",
     "@tanstack/react-table": "^8.10.0",
-    "@tanstack/react-virtual": "^3.5.0",
+    "@tanstack/react-virtual": "^3.14.10",
     "@xobotyi/scrollbar-width": "^1.9.5",
-    "ahooks": "^3.7.8",
+    "ahooks": "^3.9.7",
+    "aria-hidden": "^1.2.6",
+    "class-variance-authority": "^0.7.1",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "compare-func": "^2.0.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "immer": "^10.0.3",
+    "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
+    "nanoid": "^3.3.11",
     "rc-field-form": "^2.7.1",
     "rc-overflow": "^1.3.2",
     "rc-picker": "^4.11.3",
+    "rc-resize-observer": "^1.4.3",
     "rc-tree": "^5.13.1",
     "rc-upload": "^4.8.1",
     "rc-util": "^5.44.4",
+    "react-compiler-runtime": "^1.0.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-toastify": "^10.0.5"
+    "react-toastify": "^10.0.5",
+    "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
-    "@aloudata/icons-react": "^0.2.4",
     "@aloudata/icons-svg": "^0.2.4",
+    "@babel/core": "^7.29.0",
+    "@babel/plugin-transform-runtime": "^7.29.0",
+    "@babel/runtime": "^7.29.0",
     "@chromatic-com/storybook": "1",
     "@commitlint/cli": "^17.5.1",
     "@commitlint/config-conventional": "^17.4.4",
     "@esbuild/darwin-arm64": "^0.28.0",
+    "@rolldown/plugin-babel": "0.2.3",
     "@storybook/addon-a11y": "8",
     "@storybook/addon-essentials": "8",
     "@storybook/addon-storysource": "^8.6.14",
     "@storybook/react-vite": "8",
+    "@storybook/test": "8.6.18",
     "@storybook/test-runner": "0.19",
     "@svgr/core": "^8.0.0",
     "@svgr/plugin-jsx": "^8.0.1",
     "@svgr/plugin-prettier": "^8.0.1",
     "@svgr/plugin-svgo": "^8.0.1",
+    "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "16.3.3",
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash": "^4.14.191",
-    "@types/react": "18.3.23",
-    "@types/react-dom": "18.3.7",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.5",
     "@typescript-eslint/eslint-plugin": "^8.58.0",
     "@typescript-eslint/parser": "^8.58.0",
     "@vitejs/plugin-react": "^6.0.1",
+    "@vitejs/plugin-react-storybook": "npm:@vitejs/plugin-react@4.7.0",
     "@vitest/coverage-istanbul": "^0.31.1",
     "@vitest/coverage-v8": "^1.0.4",
     "autoprefixer": "^10.4.16",
+    "babel-plugin-react-compiler": "1.0.0",
     "browserslist": "^4.21.9",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
     "dayjs": "^1.11.20",
     "eslint": "^8.45.0",
     "eslint-plugin-compat": "^4.1.4",
     "eslint-plugin-i18n": "^2.3.1",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-tailwindcss": "^3.18.2",
     "husky": "^8.0.3",
     "inquirer": "^9.2.11",
     "jsdom": "^29.0.1",
     "lint-staged": "^13.0.3",
-    "lodash": "^4.17.21",
+    "playwright": "1.58.2",
     "postcss": "^8.4.31",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.0.0",
     "prettier-plugin-packagejson": "^2.2.18",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-dom18": "npm:react-dom@18.3.1",
+    "react18": "npm:react@18.3.1",
+    "rolldown": "1.0.0-rc.13",
     "storybook": "8",
-    "tailwind-merge": "^3.5.0",
     "tailwindcss": "3",
+    "typescript": "5.9.3",
     "vite": "8.0.7",
     "vite-plugin-dts": "^4.5.4",
+    "vite6": "npm:vite@6.4.3",
     "vitest": "^1.6.0",
     "zx": "^7.1.1"
   },
   "peerDependencies": {
     "dayjs": ">=1.11.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"