@almadar/ui 6.28.0 → 6.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/dist/{EntityBindingContext-C6FgxdfG.d.cts → EntityBindingContext-ChCONv2W.d.cts} +3 -39
  2. package/dist/{EntityBindingContext-C6FgxdfG.d.ts → EntityBindingContext-ChCONv2W.d.ts} +3 -39
  3. package/dist/avl/index.cjs +74 -48
  4. package/dist/avl/index.js +74 -48
  5. package/dist/components/index.cjs +54 -45
  6. package/dist/components/index.d.cts +1 -1
  7. package/dist/components/index.d.ts +1 -1
  8. package/dist/components/index.js +54 -45
  9. package/dist/context/index.cjs +135 -105
  10. package/dist/context/index.d.cts +2 -60
  11. package/dist/context/index.d.ts +2 -60
  12. package/dist/context/index.js +135 -105
  13. package/dist/lib/index.cjs +455 -0
  14. package/dist/lib/index.d.cts +42 -1
  15. package/dist/lib/index.d.ts +42 -1
  16. package/dist/lib/index.js +438 -1
  17. package/dist/marketing/index.cjs +4 -5
  18. package/dist/marketing/index.js +4 -5
  19. package/dist/providers/index.cjs +194 -156
  20. package/dist/providers/index.d.cts +1 -1
  21. package/dist/providers/index.d.ts +1 -1
  22. package/dist/providers/index.js +194 -156
  23. package/dist/runtime/index.cjs +74 -48
  24. package/dist/runtime/index.d.cts +16 -2
  25. package/dist/runtime/index.d.ts +16 -2
  26. package/dist/runtime/index.js +74 -48
  27. package/dist/themeTokens-DVRwufw8.d.cts +112 -0
  28. package/dist/themeTokens-DVRwufw8.d.ts +112 -0
  29. package/package.json +7 -6
  30. package/scripts/audit-tailwind-safelist.ts +4 -0
  31. package/tailwind-preset.cjs +155 -28
  32. package/themes/almadar-website.css +37 -107
  33. package/themes/almadar.css +37 -108
  34. package/themes/atelier.css +145 -240
  35. package/themes/bloomberg-dense.css +145 -252
  36. package/themes/clay.css +39 -137
  37. package/themes/comic.css +39 -145
  38. package/themes/corporate.css +39 -131
  39. package/themes/game-adventure.css +22 -87
  40. package/themes/game-rpg.css +22 -84
  41. package/themes/game-sci-fi.css +22 -88
  42. package/themes/game-ui-pack.css +22 -85
  43. package/themes/gazette.css +43 -135
  44. package/themes/glass.css +39 -148
  45. package/themes/kiosk.css +51 -146
  46. package/themes/linear-clean.css +145 -215
  47. package/themes/minimalist.css +39 -125
  48. package/themes/neon.css +39 -132
  49. package/themes/notion-editorial.css +145 -215
  50. package/themes/prism.css +37 -100
  51. package/themes/retro.css +39 -130
  52. package/themes/terminal.css +61 -152
  53. package/themes/trait-wars.css +121 -285
  54. package/themes/wireframe.css +41 -128
@@ -753,17 +753,127 @@ function useTheme() {
753
753
  var ThemeContext_default = ThemeContext;
754
754
 
755
755
  // lib/themeTokens.ts
756
+ function applyFlat(obj, table, vars) {
757
+ if (!obj) return;
758
+ for (const { cssVar, key } of table) {
759
+ const value = obj[key];
760
+ if (value !== void 0) vars[cssVar] = value;
761
+ }
762
+ }
763
+ var DENSITY_SPACING_VARS = [
764
+ { cssVar: "--space-0", key: "space0" },
765
+ { cssVar: "--space-1", key: "space1" },
766
+ { cssVar: "--space-2", key: "space2" },
767
+ { cssVar: "--space-3", key: "space3" },
768
+ { cssVar: "--space-4", key: "space4" },
769
+ { cssVar: "--space-5", key: "space5" },
770
+ { cssVar: "--space-6", key: "space6" },
771
+ { cssVar: "--space-7", key: "space7" },
772
+ { cssVar: "--space-8", key: "space8" },
773
+ { cssVar: "--space-9", key: "space9" },
774
+ { cssVar: "--space-10", key: "space10" },
775
+ { cssVar: "--space-11", key: "space11" },
776
+ { cssVar: "--space-12", key: "space12" }
777
+ ];
778
+ var DENSITY_ELEMENT_VARS = [
779
+ { cssVar: "--button-height-sm", key: "buttonHeightSm" },
780
+ { cssVar: "--button-height-md", key: "buttonHeightMd" },
781
+ { cssVar: "--button-height-lg", key: "buttonHeightLg" },
782
+ { cssVar: "--input-height-sm", key: "inputHeightSm" },
783
+ { cssVar: "--input-height-md", key: "inputHeightMd" },
784
+ { cssVar: "--input-height-lg", key: "inputHeightLg" },
785
+ { cssVar: "--row-height-compact", key: "rowHeightCompact" },
786
+ { cssVar: "--row-height-normal", key: "rowHeightNormal" },
787
+ { cssVar: "--row-height-spacious", key: "rowHeightSpacious" },
788
+ { cssVar: "--card-padding-sm", key: "cardPaddingSm" },
789
+ { cssVar: "--card-padding-md", key: "cardPaddingMd" },
790
+ { cssVar: "--card-padding-lg", key: "cardPaddingLg" },
791
+ { cssVar: "--dialog-padding", key: "dialogPadding" },
792
+ { cssVar: "--section-gap", key: "sectionGap" }
793
+ ];
794
+ var TYPE_FAMILY_VARS = [
795
+ { cssVar: "--font-family-display", key: "displayFamily" },
796
+ { cssVar: "--font-family-body", key: "bodyFamily" },
797
+ { cssVar: "--font-family-mono", key: "monoFamily" }
798
+ ];
799
+ var TYPE_SIZE_KEYS = [
800
+ "xs",
801
+ "sm",
802
+ "base",
803
+ "lg",
804
+ "xl",
805
+ "2xl",
806
+ "3xl",
807
+ "4xl",
808
+ "display-1",
809
+ "display-2"
810
+ ];
811
+ var TYPE_INTENT_VARS = [
812
+ { key: "headingMajor", cssName: "heading-major" },
813
+ { key: "headingMinor", cssName: "heading-minor" },
814
+ { key: "bodyEmphasis", cssName: "body-emphasis" },
815
+ { key: "bodyDefault", cssName: "body-default" },
816
+ { key: "bodyQuiet", cssName: "body-quiet" },
817
+ { key: "caption", cssName: "caption" },
818
+ { key: "numeric", cssName: "numeric" }
819
+ ];
820
+ var MOTION_DURATION_KEYS = [
821
+ "instant",
822
+ "fast",
823
+ "normal",
824
+ "slow",
825
+ "dramatic"
826
+ ];
827
+ var MOTION_EASING_KEYS = [
828
+ "linear",
829
+ "standard",
830
+ "emphasized",
831
+ "spring"
832
+ ];
833
+ var MOTION_INTENT_VARS = [
834
+ { key: "enter", cssName: "enter" },
835
+ { key: "exit", cssName: "exit" },
836
+ { key: "hover", cssName: "hover" },
837
+ { key: "press", cssName: "press" },
838
+ { key: "expand", cssName: "expand" },
839
+ { key: "transition", cssName: "transition" }
840
+ ];
841
+ var ICONOGRAPHY_VARS = [
842
+ { cssVar: "--icon-family", key: "family" },
843
+ { cssVar: "--icon-stroke-width", key: "strokeWidth" },
844
+ { cssVar: "--icon-default-size", key: "defaultSize" }
845
+ ];
846
+ var ELEVATION_VARS = [
847
+ { cssVar: "--elevation-card", key: "cardElevation" },
848
+ { cssVar: "--elevation-popover", key: "popoverElevation" },
849
+ { cssVar: "--elevation-dialog", key: "dialogElevation" },
850
+ { cssVar: "--elevation-toast", key: "toastElevation" }
851
+ ];
852
+ var GEOMETRY_VARS = [
853
+ { cssVar: "--radius-container", key: "radiusContainer" },
854
+ { cssVar: "--radius-interactive", key: "radiusInteractive" },
855
+ { cssVar: "--radius-pill", key: "radiusPill" },
856
+ { cssVar: "--border-hairline", key: "borderHairline" },
857
+ { cssVar: "--border-standard", key: "borderStandard" },
858
+ { cssVar: "--border-heavy", key: "borderHeavy" }
859
+ ];
860
+ var LEGACY_PREFIXES = {
861
+ colors: "--color-",
862
+ radii: "--radius-",
863
+ spacing: "--space-",
864
+ shadows: "--shadow-"
865
+ };
756
866
  function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
757
867
  const vars = {};
758
868
  const isDark = mode === "dark";
759
869
  const pickColors = isDark && darkVariant?.colors ? darkVariant.colors : tokens.colors;
760
870
  if (pickColors) {
761
871
  for (const [key, value] of Object.entries(pickColors)) {
762
- vars[`--color-${key}`] = value;
872
+ vars[`${LEGACY_PREFIXES.colors}${key}`] = value;
763
873
  }
764
874
  if (isDark && darkVariant?.colors && tokens.colors) {
765
875
  for (const [key, value] of Object.entries(tokens.colors)) {
766
- const varName = `--color-${key}`;
876
+ const varName = `${LEGACY_PREFIXES.colors}${key}`;
767
877
  if (!(varName in vars)) vars[varName] = value;
768
878
  }
769
879
  }
@@ -771,13 +881,13 @@ function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
771
881
  const pickRadii = isDark && darkVariant?.radii ? darkVariant.radii : tokens.radii;
772
882
  if (pickRadii) {
773
883
  for (const [key, value] of Object.entries(pickRadii)) {
774
- vars[`--radius-${key}`] = value;
884
+ vars[`${LEGACY_PREFIXES.radii}${key}`] = value;
775
885
  }
776
886
  }
777
887
  const pickSpacing = isDark && darkVariant?.spacing ? darkVariant.spacing : tokens.spacing;
778
888
  if (pickSpacing) {
779
889
  for (const [key, value] of Object.entries(pickSpacing)) {
780
- vars[`--space-${key}`] = value;
890
+ vars[`${LEGACY_PREFIXES.spacing}${key}`] = value;
781
891
  }
782
892
  }
783
893
  const pickTypography = isDark && darkVariant?.typography ? darkVariant.typography : tokens.typography;
@@ -789,7 +899,7 @@ function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
789
899
  const pickShadows = isDark && darkVariant?.shadows ? darkVariant.shadows : tokens.shadows;
790
900
  if (pickShadows) {
791
901
  for (const [key, value] of Object.entries(pickShadows)) {
792
- vars[`--shadow-${key}`] = value;
902
+ vars[`${LEGACY_PREFIXES.shadows}${key}`] = value;
793
903
  }
794
904
  }
795
905
  const pickDensity = isDark && darkVariant?.density ? darkVariant.density : tokens.density;
@@ -808,46 +918,8 @@ function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
808
918
  }
809
919
  function emitDensity(density, vars) {
810
920
  if (!density) return;
811
- if (density.spacing) {
812
- const s = density.spacing;
813
- const pairs2 = [
814
- ["0", s.space0],
815
- ["1", s.space1],
816
- ["2", s.space2],
817
- ["3", s.space3],
818
- ["4", s.space4],
819
- ["5", s.space5],
820
- ["6", s.space6],
821
- ["7", s.space7],
822
- ["8", s.space8],
823
- ["9", s.space9],
824
- ["10", s.space10],
825
- ["11", s.space11],
826
- ["12", s.space12]
827
- ];
828
- for (const [k, v] of pairs2) {
829
- if (v !== void 0) vars[`--space-${k}`] = v;
830
- }
831
- }
832
- const pairs = [
833
- ["button-height-sm", density.buttonHeightSm],
834
- ["button-height-md", density.buttonHeightMd],
835
- ["button-height-lg", density.buttonHeightLg],
836
- ["input-height-sm", density.inputHeightSm],
837
- ["input-height-md", density.inputHeightMd],
838
- ["input-height-lg", density.inputHeightLg],
839
- ["row-height-compact", density.rowHeightCompact],
840
- ["row-height-normal", density.rowHeightNormal],
841
- ["row-height-spacious", density.rowHeightSpacious],
842
- ["card-padding-sm", density.cardPaddingSm],
843
- ["card-padding-md", density.cardPaddingMd],
844
- ["card-padding-lg", density.cardPaddingLg],
845
- ["dialog-padding", density.dialogPadding],
846
- ["section-gap", density.sectionGap]
847
- ];
848
- for (const [k, v] of pairs) {
849
- if (v !== void 0) vars[`--${k}`] = v;
850
- }
921
+ applyFlat(density.spacing, DENSITY_SPACING_VARS, vars);
922
+ applyFlat(density, DENSITY_ELEMENT_VARS, vars);
851
923
  }
852
924
  function typeSizeKeyStr(k) {
853
925
  return k;
@@ -864,24 +936,11 @@ function emitTypeIntent(name, intent, vars) {
864
936
  }
865
937
  function emitTypeScale(ts, vars) {
866
938
  if (!ts) return;
867
- if (ts.displayFamily !== void 0) vars["--font-family-display"] = ts.displayFamily;
868
- if (ts.bodyFamily !== void 0) vars["--font-family-body"] = ts.bodyFamily;
869
- if (ts.monoFamily !== void 0) vars["--font-family-mono"] = ts.monoFamily;
939
+ applyFlat(ts, TYPE_FAMILY_VARS, vars);
870
940
  if (ts.scale) {
871
941
  const s = ts.scale;
872
- const pairs = [
873
- ["xs", s.xs],
874
- ["sm", s.sm],
875
- ["base", s.base],
876
- ["lg", s.lg],
877
- ["xl", s.xl],
878
- ["2xl", s["2xl"]],
879
- ["3xl", s["3xl"]],
880
- ["4xl", s["4xl"]],
881
- ["display-1", s["display-1"]],
882
- ["display-2", s["display-2"]]
883
- ];
884
- for (const [k, entry] of pairs) {
942
+ for (const k of TYPE_SIZE_KEYS) {
943
+ const entry = s[k];
885
944
  if (entry !== void 0) {
886
945
  vars[`--text-${k}`] = entry.size;
887
946
  vars[`--leading-${k}`] = entry.lineHeight;
@@ -890,13 +949,10 @@ function emitTypeScale(ts, vars) {
890
949
  }
891
950
  if (ts.intents) {
892
951
  const i = ts.intents;
893
- if (i.headingMajor) emitTypeIntent("heading-major", i.headingMajor, vars);
894
- if (i.headingMinor) emitTypeIntent("heading-minor", i.headingMinor, vars);
895
- if (i.bodyEmphasis) emitTypeIntent("body-emphasis", i.bodyEmphasis, vars);
896
- if (i.bodyDefault) emitTypeIntent("body-default", i.bodyDefault, vars);
897
- if (i.bodyQuiet) emitTypeIntent("body-quiet", i.bodyQuiet, vars);
898
- if (i.caption) emitTypeIntent("caption", i.caption, vars);
899
- if (i.numeric) emitTypeIntent("numeric", i.numeric, vars);
952
+ for (const { key, cssName } of TYPE_INTENT_VARS) {
953
+ const intent = i[key];
954
+ if (intent) emitTypeIntent(cssName, intent, vars);
955
+ }
900
956
  }
901
957
  }
902
958
  function emitMotionIntent(name, intent, vars) {
@@ -907,60 +963,34 @@ function emitMotion(m, vars) {
907
963
  if (!m) return;
908
964
  if (m.durations) {
909
965
  const d = m.durations;
910
- const pairs = [
911
- ["instant", d.instant],
912
- ["fast", d.fast],
913
- ["normal", d.normal],
914
- ["slow", d.slow],
915
- ["dramatic", d.dramatic]
916
- ];
917
- for (const [k, v] of pairs) {
966
+ for (const k of MOTION_DURATION_KEYS) {
967
+ const v = d[k];
918
968
  if (v !== void 0) vars[`--duration-${k}`] = v;
919
969
  }
920
970
  }
921
971
  if (m.easings) {
922
972
  const e = m.easings;
923
- const pairs = [
924
- ["linear", e.linear],
925
- ["standard", e.standard],
926
- ["emphasized", e.emphasized],
927
- ["spring", e.spring]
928
- ];
929
- for (const [k, v] of pairs) {
973
+ for (const k of MOTION_EASING_KEYS) {
974
+ const v = e[k];
930
975
  if (v !== void 0) vars[`--easing-${k}`] = v;
931
976
  }
932
977
  }
933
978
  if (m.intents) {
934
979
  const i = m.intents;
935
- if (i.enter) emitMotionIntent("enter", i.enter, vars);
936
- if (i.exit) emitMotionIntent("exit", i.exit, vars);
937
- if (i.hover) emitMotionIntent("hover", i.hover, vars);
938
- if (i.press) emitMotionIntent("press", i.press, vars);
939
- if (i.expand) emitMotionIntent("expand", i.expand, vars);
940
- if (i.transition) emitMotionIntent("transition", i.transition, vars);
980
+ for (const { key, cssName } of MOTION_INTENT_VARS) {
981
+ const intent = i[key];
982
+ if (intent) emitMotionIntent(cssName, intent, vars);
983
+ }
941
984
  }
942
985
  }
943
986
  function emitIconography(i, vars) {
944
- if (!i) return;
945
- if (i.family !== void 0) vars["--icon-family"] = i.family;
946
- if (i.strokeWidth !== void 0) vars["--icon-stroke-width"] = i.strokeWidth;
947
- if (i.defaultSize !== void 0) vars["--icon-default-size"] = i.defaultSize;
987
+ applyFlat(i, ICONOGRAPHY_VARS, vars);
948
988
  }
949
989
  function emitElevation(e, vars) {
950
- if (!e) return;
951
- if (e.cardElevation !== void 0) vars["--elevation-card"] = e.cardElevation;
952
- if (e.popoverElevation !== void 0) vars["--elevation-popover"] = e.popoverElevation;
953
- if (e.dialogElevation !== void 0) vars["--elevation-dialog"] = e.dialogElevation;
954
- if (e.toastElevation !== void 0) vars["--elevation-toast"] = e.toastElevation;
990
+ applyFlat(e, ELEVATION_VARS, vars);
955
991
  }
956
992
  function emitGeometry(g, vars) {
957
- if (!g) return;
958
- if (g.radiusContainer !== void 0) vars["--radius-container"] = g.radiusContainer;
959
- if (g.radiusInteractive !== void 0) vars["--radius-interactive"] = g.radiusInteractive;
960
- if (g.radiusPill !== void 0) vars["--radius-pill"] = g.radiusPill;
961
- if (g.borderHairline !== void 0) vars["--border-hairline"] = g.borderHairline;
962
- if (g.borderStandard !== void 0) vars["--border-standard"] = g.borderStandard;
963
- if (g.borderHeavy !== void 0) vars["--border-heavy"] = g.borderHeavy;
993
+ applyFlat(g, GEOMETRY_VARS, vars);
964
994
  }
965
995
  function resolveThemeForRuntime(theme) {
966
996
  if (theme === void 0) return void 0;