@titan-design/react-ui 0.2.5 → 0.2.7

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 (158) hide show
  1. package/dist/chunk-3VLOBS6O.mjs +846 -0
  2. package/dist/chunk-3VLOBS6O.mjs.map +1 -0
  3. package/dist/{chunk-UXVRPOME.mjs → chunk-5SSKGS6E.mjs} +3 -783
  4. package/dist/chunk-5SSKGS6E.mjs.map +1 -0
  5. package/dist/index.d.mts +1005 -4
  6. package/dist/index.d.ts +1005 -4
  7. package/dist/index.js +6043 -213
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +5901 -177
  10. package/dist/index.mjs.map +1 -1
  11. package/dist/theme/index.d.mts +57 -1
  12. package/dist/theme/index.d.ts +57 -1
  13. package/dist/theme/index.js +63 -0
  14. package/dist/theme/index.js.map +1 -1
  15. package/dist/theme/index.mjs +2 -1
  16. package/dist/theme/tokens-css.d.mts +18 -0
  17. package/dist/theme/tokens-css.d.ts +18 -0
  18. package/dist/theme/tokens-css.js +289 -0
  19. package/dist/theme/tokens-css.js.map +1 -0
  20. package/dist/theme/tokens-css.mjs +24 -0
  21. package/dist/theme/tokens-css.mjs.map +1 -0
  22. package/docs/WEB_SETUP.md +217 -0
  23. package/package.json +17 -5
  24. package/src/components/custom/DateTime/DateTime.stories.tsx +1 -1
  25. package/src/components/custom/Gauge/Gauge.stories.tsx +45 -0
  26. package/src/components/custom/Gauge/Gauge.test.tsx +71 -0
  27. package/src/components/custom/Gauge/Gauge.tsx +167 -0
  28. package/src/components/custom/Gauge/index.ts +2 -0
  29. package/src/components/custom/Scatter/Scatter.stories.tsx +85 -0
  30. package/src/components/custom/Scatter/Scatter.test.tsx +96 -0
  31. package/src/components/custom/Scatter/Scatter.tsx +260 -0
  32. package/src/components/custom/Scatter/index.ts +2 -0
  33. package/src/components/custom/Sidebar/Sidebar.tsx +1 -1
  34. package/src/components/custom/Treemap/Treemap.stories.tsx +60 -0
  35. package/src/components/custom/Treemap/Treemap.test.tsx +67 -0
  36. package/src/components/custom/Treemap/Treemap.tsx +192 -0
  37. package/src/components/custom/Treemap/index.ts +2 -0
  38. package/src/components/custom/Workout/BaseBadge.stories.tsx +75 -0
  39. package/src/components/custom/Workout/BaseBadge.test.tsx +102 -0
  40. package/src/components/custom/Workout/BaseBadge.tsx +113 -0
  41. package/src/components/custom/Workout/BodyMap.stories.tsx +121 -0
  42. package/src/components/custom/Workout/BodyMap.test.tsx +124 -0
  43. package/src/components/custom/Workout/BodyMap.tsx +348 -0
  44. package/src/components/custom/Workout/BodyMapDetailPanel.stories.tsx +171 -0
  45. package/src/components/custom/Workout/BodyMapDetailPanel.test.tsx +225 -0
  46. package/src/components/custom/Workout/BodyMapDetailPanel.tsx +478 -0
  47. package/src/components/custom/Workout/CapacityBandChart.stories.tsx +125 -0
  48. package/src/components/custom/Workout/CapacityBandChart.test.tsx +193 -0
  49. package/src/components/custom/Workout/CapacityBandChart.tsx +493 -0
  50. package/src/components/custom/Workout/DeviationBar.stories.tsx +58 -0
  51. package/src/components/custom/Workout/DeviationBar.test.tsx +86 -0
  52. package/src/components/custom/Workout/DeviationBar.tsx +78 -0
  53. package/src/components/custom/Workout/ExerciseCard.stories.tsx +186 -0
  54. package/src/components/custom/Workout/ExerciseCard.test.tsx +319 -0
  55. package/src/components/custom/Workout/ExerciseCard.tsx +429 -0
  56. package/src/components/custom/Workout/InputBar.stories.tsx +75 -0
  57. package/src/components/custom/Workout/InputBar.test.tsx +116 -0
  58. package/src/components/custom/Workout/InputBar.tsx +163 -0
  59. package/src/components/custom/Workout/IntensityBar.stories.tsx +60 -0
  60. package/src/components/custom/Workout/IntensityBar.test.tsx +113 -0
  61. package/src/components/custom/Workout/IntensityBar.tsx +166 -0
  62. package/src/components/custom/Workout/MesoCard.stories.tsx +152 -0
  63. package/src/components/custom/Workout/MesoCard.test.tsx +170 -0
  64. package/src/components/custom/Workout/MesoCard.tsx +235 -0
  65. package/src/components/custom/Workout/MesoProgressBar.stories.tsx +85 -0
  66. package/src/components/custom/Workout/MesoProgressBar.test.tsx +141 -0
  67. package/src/components/custom/Workout/MesoProgressBar.tsx +161 -0
  68. package/src/components/custom/Workout/MesoStatusCard.stories.tsx +126 -0
  69. package/src/components/custom/Workout/MesoStatusCard.test.tsx +209 -0
  70. package/src/components/custom/Workout/MesoStatusCard.tsx +456 -0
  71. package/src/components/custom/Workout/MuscleGroupChip.stories.tsx +118 -0
  72. package/src/components/custom/Workout/MuscleGroupChip.test.tsx +91 -0
  73. package/src/components/custom/Workout/MuscleGroupChip.tsx +92 -0
  74. package/src/components/custom/Workout/PlaceholderStrip.stories.tsx +94 -0
  75. package/src/components/custom/Workout/PlaceholderStrip.test.tsx +83 -0
  76. package/src/components/custom/Workout/PlaceholderStrip.tsx +91 -0
  77. package/src/components/custom/Workout/PrBadge.stories.tsx +105 -0
  78. package/src/components/custom/Workout/PrBadge.test.tsx +111 -0
  79. package/src/components/custom/Workout/PrBadge.tsx +103 -0
  80. package/src/components/custom/Workout/PrHistoryModal.stories.tsx +116 -0
  81. package/src/components/custom/Workout/PrHistoryModal.test.tsx +161 -0
  82. package/src/components/custom/Workout/PrHistoryModal.tsx +244 -0
  83. package/src/components/custom/Workout/ReadinessCheck.stories.tsx +126 -0
  84. package/src/components/custom/Workout/ReadinessCheck.test.tsx +181 -0
  85. package/src/components/custom/Workout/ReadinessCheck.tsx +266 -0
  86. package/src/components/custom/Workout/RestTimer.tsx +8 -6
  87. package/src/components/custom/Workout/SetRow.stories.tsx +165 -0
  88. package/src/components/custom/Workout/SetRow.test.tsx +222 -0
  89. package/src/components/custom/Workout/SetRow.tsx +253 -0
  90. package/src/components/custom/Workout/Sparkline.stories.tsx +125 -0
  91. package/src/components/custom/Workout/Sparkline.test.tsx +113 -0
  92. package/src/components/custom/Workout/Sparkline.tsx +188 -0
  93. package/src/components/custom/Workout/StatusDot.stories.tsx +150 -0
  94. package/src/components/custom/Workout/StatusDot.test.tsx +165 -0
  95. package/src/components/custom/Workout/StatusDot.tsx +159 -0
  96. package/src/components/custom/Workout/StrengthTrendChart.stories.tsx +130 -0
  97. package/src/components/custom/Workout/StrengthTrendChart.test.tsx +217 -0
  98. package/src/components/custom/Workout/StrengthTrendChart.tsx +628 -0
  99. package/src/components/custom/Workout/SupersetWrapper.tsx +1 -2
  100. package/src/components/custom/Workout/TempoDisplay.stories.tsx +66 -0
  101. package/src/components/custom/Workout/TempoDisplay.test.tsx +90 -0
  102. package/src/components/custom/Workout/TempoDisplay.tsx +207 -0
  103. package/src/components/custom/Workout/VelocityStrip.stories.tsx +125 -0
  104. package/src/components/custom/Workout/VelocityStrip.test.tsx +234 -0
  105. package/src/components/custom/Workout/VelocityStrip.tsx +287 -0
  106. package/src/components/custom/Workout/WeekRow.stories.tsx +121 -0
  107. package/src/components/custom/Workout/WeekRow.test.tsx +117 -0
  108. package/src/components/custom/Workout/WeekRow.tsx +140 -0
  109. package/src/components/custom/Workout/WeightBadge.stories.tsx +87 -0
  110. package/src/components/custom/Workout/WeightBadge.test.tsx +164 -0
  111. package/src/components/custom/Workout/WeightBadge.tsx +113 -0
  112. package/src/components/custom/Workout/WorkoutCard.stories.tsx +135 -0
  113. package/src/components/custom/Workout/WorkoutCard.test.tsx +172 -0
  114. package/src/components/custom/Workout/WorkoutCard.tsx +226 -0
  115. package/src/components/custom/Workout/WorkoutPill.stories.tsx +63 -0
  116. package/src/components/custom/Workout/WorkoutPill.test.tsx +153 -0
  117. package/src/components/custom/Workout/WorkoutPill.tsx +177 -0
  118. package/src/components/custom/Workout/index.ts +113 -0
  119. package/src/components/custom/Workout/muscleTaxonomy.ts +252 -0
  120. package/src/components/custom/index.ts +3 -0
  121. package/src/components/custom/stepper/Stepper.stories.tsx +1 -1
  122. package/src/components/custom/stepper/Stepper.tsx +2 -2
  123. package/src/components/ui/autocomplete/Autocomplete.stories.tsx +1 -1
  124. package/src/components/ui/autocomplete/Autocomplete.tsx +1 -1
  125. package/src/components/ui/card/Card.tsx +1 -1
  126. package/src/components/ui/checkbox/Checkbox.tsx +1 -1
  127. package/src/components/ui/collapse/Collapse.tsx +1 -1
  128. package/src/components/ui/data-row/DataRow.stories.tsx +1 -1
  129. package/src/components/ui/drawer/Drawer.tsx +3 -3
  130. package/src/components/ui/form-field/FormField.tsx +1 -1
  131. package/src/components/ui/help-tip/HelpTip.tsx +1 -1
  132. package/src/components/ui/menu/Menu.tsx +2 -2
  133. package/src/components/ui/pill/Pill.tsx +1 -1
  134. package/src/components/ui/popover/Popover.stories.tsx +2 -2
  135. package/src/components/ui/popover/Popover.tsx +1 -1
  136. package/src/components/ui/radio/Radio.stories.tsx +1 -1
  137. package/src/components/ui/section/Section.stories.tsx +4 -4
  138. package/src/components/ui/select/Select.tsx +1 -1
  139. package/src/components/ui/stack/Stack.stories.tsx +4 -4
  140. package/src/components/ui/tabs/Tabs.tsx +2 -2
  141. package/src/components/ui/toolbar-button/ToolbarButton.stories.tsx +1 -1
  142. package/src/components/ui/toolbar-button/ToolbarButton.tsx +1 -1
  143. package/src/examples/react-hook-form/ControlledFields.tsx +171 -0
  144. package/src/examples/react-hook-form/ReactHookForm.stories.tsx +51 -0
  145. package/src/examples/react-hook-form/ReactHookForm.test.tsx +61 -0
  146. package/src/examples/react-hook-form/RhfContactForm.tsx +99 -0
  147. package/src/stories/PresetShowcase.stories.tsx +15 -15
  148. package/src/theme/index.ts +2 -1
  149. package/src/theme/manifest/css-property-manifest.example.json +79 -0
  150. package/src/theme/manifest/css-property-manifest.schema.json +93 -0
  151. package/src/theme/manifest/css-property-manifest.test.ts +81 -0
  152. package/src/theme/manifest/css-property-manifest.types.ts +49 -0
  153. package/src/theme/manifest/css-property-manifest.validate.ts +84 -0
  154. package/src/theme/manifest/index.ts +11 -0
  155. package/src/theme/tokens-css.test.ts +28 -0
  156. package/src/theme/tokens-css.ts +34 -0
  157. package/src/theme/workout-tokens.ts +61 -0
  158. package/dist/chunk-UXVRPOME.mjs.map +0 -1
@@ -1,5 +1,3 @@
1
- import { Platform } from 'react-native';
2
-
3
1
  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
4
2
  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
5
3
  }) : x)(function(x) {
@@ -889,785 +887,7 @@ var gluestackConfig = {
889
887
  rounded: "borderRadius"
890
888
  }
891
889
  };
892
- function hexToRgb(hex) {
893
- const cleaned = hex.replace("#", "");
894
- let r, g, b;
895
- if (cleaned.length === 3) {
896
- r = parseInt(cleaned[0] + cleaned[0], 16);
897
- g = parseInt(cleaned[1] + cleaned[1], 16);
898
- b = parseInt(cleaned[2] + cleaned[2], 16);
899
- } else if (cleaned.length === 6) {
900
- r = parseInt(cleaned.slice(0, 2), 16);
901
- g = parseInt(cleaned.slice(2, 4), 16);
902
- b = parseInt(cleaned.slice(4, 6), 16);
903
- } else {
904
- return null;
905
- }
906
- return { r, g, b };
907
- }
908
- function rgbToHsv(r, g, b) {
909
- const rNorm = r / 255;
910
- const gNorm = g / 255;
911
- const bNorm = b / 255;
912
- const max = Math.max(rNorm, gNorm, bNorm);
913
- const min = Math.min(rNorm, gNorm, bNorm);
914
- const delta = max - min;
915
- const v = max;
916
- const s = max === 0 ? 0 : delta / max;
917
- let h = 0;
918
- if (delta !== 0) {
919
- if (max === rNorm) {
920
- h = 60 * ((gNorm - bNorm) / delta % 6);
921
- } else if (max === gNorm) {
922
- h = 60 * ((bNorm - rNorm) / delta + 2);
923
- } else {
924
- h = 60 * ((rNorm - gNorm) / delta + 4);
925
- }
926
- }
927
- if (h < 0) h += 360;
928
- return { h, s, v };
929
- }
930
- function hsvToRgb(h, s, v) {
931
- const c = v * s;
932
- const x = c * (1 - Math.abs(h / 60 % 2 - 1));
933
- const m = v - c;
934
- let rPrime, gPrime, bPrime;
935
- if (h >= 0 && h < 60) {
936
- rPrime = c;
937
- gPrime = x;
938
- bPrime = 0;
939
- } else if (h >= 60 && h < 120) {
940
- rPrime = x;
941
- gPrime = c;
942
- bPrime = 0;
943
- } else if (h >= 120 && h < 180) {
944
- rPrime = 0;
945
- gPrime = c;
946
- bPrime = x;
947
- } else if (h >= 180 && h < 240) {
948
- rPrime = 0;
949
- gPrime = x;
950
- bPrime = c;
951
- } else if (h >= 240 && h < 300) {
952
- rPrime = x;
953
- gPrime = 0;
954
- bPrime = c;
955
- } else {
956
- rPrime = c;
957
- gPrime = 0;
958
- bPrime = x;
959
- }
960
- return {
961
- r: Math.round((rPrime + m) * 255),
962
- g: Math.round((gPrime + m) * 255),
963
- b: Math.round((bPrime + m) * 255)
964
- };
965
- }
966
- function rgbToHex(r, g, b) {
967
- const toHex = (n) => {
968
- const clamped = Math.max(0, Math.min(255, Math.round(n)));
969
- return clamped.toString(16).padStart(2, "0");
970
- };
971
- return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
972
- }
973
- function lighten(hex, amount = 0.1) {
974
- const rgb = hexToRgb(hex);
975
- if (!rgb) return hex;
976
- const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
977
- const newV = Math.min(1, hsv.v + amount);
978
- const newRgb = hsvToRgb(hsv.h, hsv.s, newV);
979
- return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
980
- }
981
- function darken(hex, amount = 0.1) {
982
- const rgb = hexToRgb(hex);
983
- if (!rgb) return hex;
984
- const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
985
- const newV = Math.max(0, hsv.v - amount);
986
- const newRgb = hsvToRgb(hsv.h, hsv.s, newV);
987
- return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
988
- }
989
- function getHoverColors(bgColor, intensity = "medium") {
990
- const amounts = {
991
- subtle: 0.01,
992
- medium: 0.02,
993
- strong: 0.03
994
- };
995
- const amount = amounts[intensity];
996
- return {
997
- raised: lighten(bgColor, amount),
998
- // Raised hover: lighten (lifting up)
999
- pressed: darken(bgColor, amount)
1000
- // Pressed hover: darken (pressing down)
1001
- };
1002
- }
1003
- function isDark(hex) {
1004
- const rgb = hexToRgb(hex);
1005
- if (!rgb) return true;
1006
- const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
1007
- return hsv.v < 0.6;
1008
- }
1009
- var shadowColors = {
1010
- // For charcoal surfaces (~#2C2C2C to #3C3C3C)
1011
- charcoal: {
1012
- dark: "rgba(0, 0, 0, 0.5)",
1013
- light: "rgba(255, 255, 255, 0.12)",
1014
- // brighter for crisp rim light
1015
- darker: "rgba(0, 0, 0, 0.6)"
1016
- },
1017
- // For neutral dark surfaces (~#1F2937)
1018
- neutralDark: {
1019
- dark: "rgba(0, 0, 0, 0.4)",
1020
- light: "rgba(255, 255, 255, 0.08)",
1021
- darker: "rgba(0, 0, 0, 0.5)"
1022
- },
1023
- // For light surfaces (white/light gray backgrounds)
1024
- neutralLight: {
1025
- dark: "rgba(0, 0, 0, 0.15)",
1026
- // Visible dark shadow for depth on light backgrounds
1027
- light: "rgba(255, 255, 255, 1)",
1028
- // Bright highlight for raised effect (visible on light gray)
1029
- darker: "rgba(0, 0, 0, 0.2)"
1030
- // Deeper shadow for pressed states
1031
- }
1032
- };
1033
- var intensityConfig = {
1034
- subtle: { offset: 1, blur: 2 },
1035
- // very light, barely visible
1036
- medium: { offset: 2, blur: 4 },
1037
- // noticeable but restrained
1038
- strong: { offset: 2, blur: 5 }
1039
- // slightly deeper blur, same offset as medium
1040
- };
1041
- function createRaisedShadow(surface = "charcoal", intensity = "medium") {
1042
- const colors = shadowColors[surface];
1043
- const { offset, blur } = intensityConfig[intensity];
1044
- const rimBlur = 1;
1045
- return Platform.select({
1046
- web: {
1047
- boxShadow: `${offset}px ${offset}px ${blur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
1048
- },
1049
- default: {
1050
- // React Native shadow approximation (limited compared to web)
1051
- shadowColor: "#000",
1052
- shadowOffset: { width: offset, height: offset },
1053
- shadowOpacity: 0.3,
1054
- shadowRadius: blur / 2,
1055
- elevation: offset
1056
- }
1057
- });
1058
- }
1059
- function createPressedShadow(surface = "charcoal", intensity = "medium") {
1060
- const colors = shadowColors[surface];
1061
- const { offset, blur } = intensityConfig[intensity];
1062
- const rimOffset = 1;
1063
- const rimBlur = 1;
1064
- return Platform.select({
1065
- web: {
1066
- boxShadow: `inset ${offset}px ${offset}px ${blur}px ${colors.darker}, inset -${rimOffset}px -${rimOffset}px ${rimBlur}px ${colors.light}`
1067
- },
1068
- default: {
1069
- // React Native doesn't support inset shadows, approximate with darker bg
1070
- shadowOpacity: 0,
1071
- elevation: 0
1072
- }
1073
- });
1074
- }
1075
- function createFlatShadow() {
1076
- return Platform.select({
1077
- web: {
1078
- boxShadow: "none"
1079
- },
1080
- default: {
1081
- shadowOpacity: 0,
1082
- elevation: 0
1083
- }
1084
- });
1085
- }
1086
- function createRaisedHoverShadow(surface = "charcoal", intensity = "medium") {
1087
- const colors = shadowColors[surface];
1088
- const { offset, blur } = intensityConfig[intensity];
1089
- const hoverOffset = Math.max(1, Math.round(offset / 2));
1090
- const hoverBlur = Math.max(1, Math.round(blur / 2));
1091
- const rimBlur = 1;
1092
- return Platform.select({
1093
- web: {
1094
- // Keep same offsets as normal state for rim to prevent "shrinking" effect
1095
- boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
1096
- },
1097
- default: {
1098
- shadowColor: "#000",
1099
- shadowOffset: { width: hoverOffset, height: hoverOffset },
1100
- shadowOpacity: 0.2,
1101
- shadowRadius: hoverBlur / 2,
1102
- elevation: hoverOffset
1103
- }
1104
- });
1105
- }
1106
- function createPressedHoverShadow(surface = "charcoal", intensity = "medium") {
1107
- const colors = shadowColors[surface];
1108
- const { offset, blur } = intensityConfig[intensity];
1109
- const hoverOffset = Math.max(1, Math.round(offset / 2));
1110
- const hoverBlur = Math.max(1, Math.round(blur / 2));
1111
- const rimBlur = 1;
1112
- return Platform.select({
1113
- web: {
1114
- // Keep rim offset at 1px (same as pressed normal) to prevent "shrinking" effect
1115
- boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.darker}, inset -1px -1px ${rimBlur}px ${colors.light}`
1116
- },
1117
- default: {
1118
- shadowOpacity: 0,
1119
- elevation: 0
1120
- }
1121
- });
1122
- }
1123
- var neumorphicShadows = {
1124
- // Charcoal surface shadows (for dark toolbars, cards)
1125
- charcoal: {
1126
- raised: {
1127
- subtle: createRaisedShadow("charcoal", "subtle"),
1128
- medium: createRaisedShadow("charcoal", "medium"),
1129
- strong: createRaisedShadow("charcoal", "strong")
1130
- },
1131
- raisedHover: {
1132
- subtle: createRaisedHoverShadow("charcoal", "subtle"),
1133
- medium: createRaisedHoverShadow("charcoal", "medium"),
1134
- strong: createRaisedHoverShadow("charcoal", "strong")
1135
- },
1136
- pressed: {
1137
- subtle: createPressedShadow("charcoal", "subtle"),
1138
- medium: createPressedShadow("charcoal", "medium"),
1139
- strong: createPressedShadow("charcoal", "strong")
1140
- },
1141
- pressedHover: {
1142
- subtle: createPressedHoverShadow("charcoal", "subtle"),
1143
- medium: createPressedHoverShadow("charcoal", "medium"),
1144
- strong: createPressedHoverShadow("charcoal", "strong")
1145
- },
1146
- flat: createFlatShadow()
1147
- },
1148
- // Neutral dark surface shadows
1149
- neutralDark: {
1150
- raised: {
1151
- subtle: createRaisedShadow("neutralDark", "subtle"),
1152
- medium: createRaisedShadow("neutralDark", "medium"),
1153
- strong: createRaisedShadow("neutralDark", "strong")
1154
- },
1155
- raisedHover: {
1156
- subtle: createRaisedHoverShadow("neutralDark", "subtle"),
1157
- medium: createRaisedHoverShadow("neutralDark", "medium"),
1158
- strong: createRaisedHoverShadow("neutralDark", "strong")
1159
- },
1160
- pressed: {
1161
- subtle: createPressedShadow("neutralDark", "subtle"),
1162
- medium: createPressedShadow("neutralDark", "medium"),
1163
- strong: createPressedShadow("neutralDark", "strong")
1164
- },
1165
- pressedHover: {
1166
- subtle: createPressedHoverShadow("neutralDark", "subtle"),
1167
- medium: createPressedHoverShadow("neutralDark", "medium"),
1168
- strong: createPressedHoverShadow("neutralDark", "strong")
1169
- },
1170
- flat: createFlatShadow()
1171
- },
1172
- // Neutral light surface shadows
1173
- neutralLight: {
1174
- raised: {
1175
- subtle: createRaisedShadow("neutralLight", "subtle"),
1176
- medium: createRaisedShadow("neutralLight", "medium"),
1177
- strong: createRaisedShadow("neutralLight", "strong")
1178
- },
1179
- raisedHover: {
1180
- subtle: createRaisedHoverShadow("neutralLight", "subtle"),
1181
- medium: createRaisedHoverShadow("neutralLight", "medium"),
1182
- strong: createRaisedHoverShadow("neutralLight", "strong")
1183
- },
1184
- pressed: {
1185
- subtle: createPressedShadow("neutralLight", "subtle"),
1186
- medium: createPressedShadow("neutralLight", "medium"),
1187
- strong: createPressedShadow("neutralLight", "strong")
1188
- },
1189
- pressedHover: {
1190
- subtle: createPressedHoverShadow("neutralLight", "subtle"),
1191
- medium: createPressedHoverShadow("neutralLight", "medium"),
1192
- strong: createPressedHoverShadow("neutralLight", "strong")
1193
- },
1194
- flat: createFlatShadow()
1195
- }
1196
- };
1197
- var elevationSystem = {
1198
- // Deep inset (recessed input fields, deeply pressed buttons)
1199
- [-2]: {
1200
- name: "deep-inset",
1201
- colorAdjustment: 0,
1202
- shadowIntensity: "strong",
1203
- shadowStyle: "pressed",
1204
- description: "Deeply recessed elements (e.g., input fields, deeply pressed buttons)"
1205
- },
1206
- // Shallow inset (pressed buttons, sunken panels)
1207
- [-1]: {
1208
- name: "inset",
1209
- colorAdjustment: 0,
1210
- shadowIntensity: "medium",
1211
- shadowStyle: "pressed",
1212
- description: "Shallow inset elements (e.g., pressed buttons, sunken panels within cards)"
1213
- },
1214
- // Base level (page background, default surface)
1215
- [0]: {
1216
- name: "base",
1217
- colorAdjustment: 0,
1218
- shadowIntensity: "subtle",
1219
- shadowStyle: "raised",
1220
- description: "Base surface level (page background, default containers)"
1221
- },
1222
- // Level 1: Subtle elevation (outline cards, subtle containers)
1223
- [1]: {
1224
- name: "subtle",
1225
- colorAdjustment: 0.01,
1226
- shadowIntensity: "subtle",
1227
- shadowStyle: "raised",
1228
- description: "Subtle elevation (outline cards, subtle containers)"
1229
- },
1230
- // Level 2: Standard elevation (default cards, buttons)
1231
- [2]: {
1232
- name: "standard",
1233
- colorAdjustment: 0.02,
1234
- shadowIntensity: "medium",
1235
- shadowStyle: "raised",
1236
- description: "Standard elevation (default cards, raised buttons)"
1237
- },
1238
- // Level 3: Prominent elevation (important cards, modals)
1239
- [3]: {
1240
- name: "prominent",
1241
- colorAdjustment: 0.04,
1242
- shadowIntensity: "strong",
1243
- shadowStyle: "raised",
1244
- description: "Prominent elevation (important cards, modals, dropdowns)"
1245
- },
1246
- // Level 4: High elevation (overlays, popovers)
1247
- [4]: {
1248
- name: "high",
1249
- colorAdjustment: 0.06,
1250
- shadowIntensity: "strong",
1251
- shadowStyle: "raised",
1252
- description: "High elevation (overlays, popovers, tooltips)"
1253
- },
1254
- // Level 5: Floating (toasts, floating action buttons)
1255
- [5]: {
1256
- name: "floating",
1257
- colorAdjustment: 0.08,
1258
- shadowIntensity: "strong",
1259
- shadowStyle: "raised",
1260
- description: "Floating elevation (toasts, floating action buttons, highest z-index)"
1261
- }
1262
- };
1263
- function calculateRimLightColor(baseColor, level) {
1264
- const rgb = hexToRgb(baseColor);
1265
- if (!rgb) {
1266
- return "rgba(255, 255, 255, 0.5)";
1267
- }
1268
- const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
1269
- const isLight = hsv.v > 0.6;
1270
- const isSaturated = hsv.s > 0.3;
1271
- const absLevel = Math.abs(level);
1272
- const opacityBoost = Math.max(0, (absLevel - 1) * 0.05);
1273
- if (isSaturated) {
1274
- const rimLightValue = 0.95;
1275
- const rimLightRgb = hsvToRgb(hsv.h, hsv.s * 0.3, rimLightValue);
1276
- const baseOpacity = isLight ? 0.9 : 0.5;
1277
- const finalOpacity = Math.min(1, baseOpacity + opacityBoost);
1278
- return `rgba(${rimLightRgb.r}, ${rimLightRgb.g}, ${rimLightRgb.b}, ${finalOpacity.toFixed(2)})`;
1279
- } else {
1280
- const baseOpacity = isLight ? 0.9 : 0.12;
1281
- const finalOpacity = Math.min(1, baseOpacity + opacityBoost);
1282
- return `rgba(255, 255, 255, ${finalOpacity.toFixed(2)})`;
1283
- }
1284
- }
1285
- function calculateDarkShadowColors(surfaceColor) {
1286
- const rgb = hexToRgb(surfaceColor);
1287
- if (!rgb) {
1288
- return {
1289
- dark: "rgba(0, 0, 0, 0.3)",
1290
- darker: "rgba(0, 0, 0, 0.4)"
1291
- };
1292
- }
1293
- const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
1294
- const isLight = hsv.v > 0.6;
1295
- const isSaturated = hsv.s > 0.3;
1296
- if (isSaturated) {
1297
- const darkShadowValue = 0.15;
1298
- const darkShadowRgb = hsvToRgb(hsv.h, hsv.s, darkShadowValue);
1299
- if (isLight) {
1300
- return {
1301
- dark: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.3)`,
1302
- darker: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.4)`
1303
- };
1304
- } else {
1305
- return {
1306
- dark: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.5)`,
1307
- darker: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.6)`
1308
- };
1309
- }
1310
- } else {
1311
- if (isLight) {
1312
- return {
1313
- dark: "rgba(0, 0, 0, 0.2)",
1314
- darker: "rgba(0, 0, 0, 0.3)"
1315
- };
1316
- } else {
1317
- return {
1318
- dark: "rgba(0, 0, 0, 0.5)",
1319
- darker: "rgba(0, 0, 0, 0.6)"
1320
- };
1321
- }
1322
- }
1323
- }
1324
- function getRimLightConfig() {
1325
- return {
1326
- offset: 1,
1327
- // Fixed 1px for crisp rim
1328
- blur: 1
1329
- // Tight blur for crisp edge
1330
- };
1331
- }
1332
- function getElevationConfig(level) {
1333
- return elevationSystem[level];
1334
- }
1335
- var elevationSurfaceCache = /* @__PURE__ */ new Map();
1336
- var MAX_CACHE_SIZE = 100;
1337
- function getCacheKey(baseColor, level, theme) {
1338
- return `${baseColor}-${level}-${theme}`;
1339
- }
1340
- function calculateElevationSurface(baseColor, level, theme) {
1341
- const config = elevationSystem[level];
1342
- if (config.colorAdjustment === 0) {
1343
- return baseColor;
1344
- }
1345
- if (level < 0) {
1346
- return baseColor;
1347
- }
1348
- return lighten(baseColor, config.colorAdjustment);
1349
- }
1350
- function getElevationSurface(baseColor, level, theme) {
1351
- const cacheKey = getCacheKey(baseColor, level, theme);
1352
- if (elevationSurfaceCache.has(cacheKey)) {
1353
- return elevationSurfaceCache.get(cacheKey);
1354
- }
1355
- const result = calculateElevationSurface(baseColor, level);
1356
- if (elevationSurfaceCache.size >= MAX_CACHE_SIZE) {
1357
- const firstKey = elevationSurfaceCache.keys().next().value;
1358
- elevationSurfaceCache.delete(firstKey);
1359
- }
1360
- elevationSurfaceCache.set(cacheKey, result);
1361
- return result;
1362
- }
1363
- var elevationShadowCache = /* @__PURE__ */ new Map();
1364
- var MAX_SHADOW_CACHE_SIZE = 50;
1365
- function getShadowCacheKey(baseColor, level, theme, isHovered) {
1366
- return `${baseColor}-${level}-${theme}-${isHovered}`;
1367
- }
1368
- function calculateElevationShadow(baseColor, level, theme, isHovered = false) {
1369
- const config = elevationSystem[level];
1370
- if (level === 0) {
1371
- return {};
1372
- }
1373
- const elevatedSurfaceColor = calculateElevationSurface(baseColor, level);
1374
- const rimLightColor = calculateRimLightColor(baseColor, level);
1375
- const darkShadowColors = calculateDarkShadowColors(elevatedSurfaceColor);
1376
- const intensityConfig2 = {
1377
- subtle: { offset: 1, blur: 2 },
1378
- medium: { offset: 2, blur: 4 },
1379
- strong: { offset: 2, blur: 5 }
1380
- };
1381
- const { offset, blur } = intensityConfig2[config.shadowIntensity];
1382
- const rimConfig = getRimLightConfig();
1383
- if (config.shadowStyle === "pressed") {
1384
- if (isHovered) {
1385
- const hoverOffset = Math.max(1, Math.round(offset / 2));
1386
- const hoverBlur = Math.max(1, Math.round(blur / 2));
1387
- return Platform.select({
1388
- web: {
1389
- boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${darkShadowColors.darker}, inset -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
1390
- },
1391
- default: {
1392
- shadowOpacity: 0,
1393
- elevation: 0
1394
- }
1395
- });
1396
- }
1397
- return Platform.select({
1398
- web: {
1399
- boxShadow: `inset ${offset}px ${offset}px ${blur}px ${darkShadowColors.darker}, inset -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
1400
- },
1401
- default: {
1402
- shadowOpacity: 0,
1403
- elevation: 0
1404
- }
1405
- });
1406
- } else {
1407
- if (isHovered) {
1408
- const hoverOffset = Math.max(1, Math.round(offset / 2));
1409
- const hoverBlur = Math.max(1, Math.round(blur / 2));
1410
- return Platform.select({
1411
- web: {
1412
- boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${darkShadowColors.dark}, -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
1413
- },
1414
- default: {
1415
- shadowColor: "#000",
1416
- shadowOffset: { width: hoverOffset, height: hoverOffset },
1417
- shadowOpacity: 0.2,
1418
- shadowRadius: hoverBlur / 2,
1419
- elevation: hoverOffset
1420
- }
1421
- });
1422
- }
1423
- return Platform.select({
1424
- web: {
1425
- boxShadow: `${offset}px ${offset}px ${blur}px ${darkShadowColors.dark}, -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
1426
- },
1427
- default: {
1428
- shadowColor: "#000",
1429
- shadowOffset: { width: offset, height: offset },
1430
- shadowOpacity: 0.3,
1431
- shadowRadius: blur / 2,
1432
- elevation: offset
1433
- }
1434
- });
1435
- }
1436
- }
1437
- function getElevationShadow(baseColor, level, theme, isHovered = false) {
1438
- const cacheKey = getShadowCacheKey(baseColor, level, theme, isHovered);
1439
- if (elevationShadowCache.has(cacheKey)) {
1440
- return elevationShadowCache.get(cacheKey);
1441
- }
1442
- const result = calculateElevationShadow(baseColor, level, theme, isHovered);
1443
- if (elevationShadowCache.size >= MAX_SHADOW_CACHE_SIZE) {
1444
- const firstKey = elevationShadowCache.keys().next().value;
1445
- elevationShadowCache.delete(firstKey);
1446
- }
1447
- elevationShadowCache.set(cacheKey, result);
1448
- return result;
1449
- }
1450
- function getBaseSurfaceColor(theme) {
1451
- return theme === "light" ? semanticColorsLight["surface-raised"] : semanticColorsDark["surface-elevated"];
1452
- }
1453
- var componentElevationRanges = {
1454
- button: {
1455
- allowed: [2],
1456
- default: 2,
1457
- hover: 3
1458
- },
1459
- card: {
1460
- allowed: [1, 2, 3],
1461
- default: 2,
1462
- hover: 3
1463
- },
1464
- input: {
1465
- allowed: [-2, -1, 0],
1466
- default: -1
1467
- },
1468
- overlay: {
1469
- allowed: [4, 5],
1470
- default: 4
1471
- }
1472
- };
1473
- function getValidatedElevation(component, requested) {
1474
- const range = componentElevationRanges[component];
1475
- if (range.allowed.includes(requested)) {
1476
- return requested;
1477
- }
1478
- const sorted = [...range.allowed].sort((a, b) => a - b);
1479
- if (requested < sorted[0]) return sorted[0];
1480
- if (requested > sorted[sorted.length - 1]) return sorted[sorted.length - 1];
1481
- return sorted.reduce(
1482
- (prev, curr) => Math.abs(curr - requested) < Math.abs(prev - requested) ? curr : prev
1483
- );
1484
- }
1485
- var glowConfig = {
1486
- subtle: { blur: 12, spread: 0, opacity: 0.25 },
1487
- medium: { blur: 20, spread: 2, opacity: 0.4 },
1488
- strong: { blur: 30, spread: 4, opacity: 0.55 }
1489
- };
1490
- function getGlowShadow(color, intensity = "medium") {
1491
- const config = glowConfig[intensity];
1492
- const rgb = hexToRgb(color);
1493
- if (!rgb) return {};
1494
- return Platform.select({
1495
- web: {
1496
- boxShadow: `0 0 ${config.blur}px ${config.spread}px rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${config.opacity})`
1497
- },
1498
- default: {
1499
- shadowColor: color,
1500
- shadowOffset: { width: 0, height: 0 },
1501
- shadowOpacity: config.opacity,
1502
- shadowRadius: config.blur / 2,
1503
- elevation: 0
1504
- }
1505
- });
1506
- }
1507
-
1508
- // src/theme/presets/apply.ts
1509
- function colorKeyToVar(key) {
1510
- return `--color-${key}`;
1511
- }
1512
- function applyColorOverrides(colors, root) {
1513
- for (const [key, value] of Object.entries(colors)) {
1514
- if (value !== void 0) {
1515
- root.style.setProperty(colorKeyToVar(key), value);
1516
- }
1517
- }
1518
- }
1519
- function applyFontOverrides(fonts, root) {
1520
- const fontVarMap = {
1521
- sans: "--font-family-sans",
1522
- body: "--font-family-body",
1523
- heading: "--font-family-heading",
1524
- mono: "--font-family-mono"
1525
- };
1526
- for (const [key, value] of Object.entries(fonts)) {
1527
- if (value !== void 0 && fontVarMap[key]) {
1528
- root.style.setProperty(fontVarMap[key], value);
1529
- }
1530
- }
1531
- }
1532
- function injectFontImport(url) {
1533
- if (typeof document === "undefined") return;
1534
- const existing = document.querySelector(`link[href="${url}"]`);
1535
- if (existing) return;
1536
- const link = document.createElement("link");
1537
- link.rel = "stylesheet";
1538
- link.href = url;
1539
- document.head.appendChild(link);
1540
- }
1541
- function applyThemePreset(preset) {
1542
- if (typeof document === "undefined") {
1543
- return () => {
1544
- };
1545
- }
1546
- const root = document.documentElement;
1547
- const removals = [];
1548
- if (preset.fontImport) {
1549
- injectFontImport(preset.fontImport);
1550
- }
1551
- const isLight = root.classList.contains("light");
1552
- const modeColors = isLight ? preset.colors?.light : preset.colors?.dark;
1553
- if (modeColors) {
1554
- const previousValues = {};
1555
- for (const key of Object.keys(modeColors)) {
1556
- previousValues[colorKeyToVar(key)] = root.style.getPropertyValue(colorKeyToVar(key)) || null;
1557
- }
1558
- applyColorOverrides(modeColors, root);
1559
- removals.push(() => {
1560
- for (const [varName, prev] of Object.entries(previousValues)) {
1561
- if (prev === null) {
1562
- root.style.removeProperty(varName);
1563
- } else {
1564
- root.style.setProperty(varName, prev);
1565
- }
1566
- }
1567
- });
1568
- }
1569
- if (preset.fonts) {
1570
- applyFontOverrides(preset.fonts, root);
1571
- }
1572
- if (preset.rootClasses) {
1573
- for (const cls of preset.rootClasses) {
1574
- root.classList.add(cls);
1575
- }
1576
- removals.push(() => {
1577
- for (const cls of preset.rootClasses) {
1578
- root.classList.remove(cls);
1579
- }
1580
- });
1581
- }
1582
- return () => {
1583
- for (const remove of removals) {
1584
- remove();
1585
- }
1586
- };
1587
- }
1588
-
1589
- // src/theme/presets/default.ts
1590
- var defaultPreset = {
1591
- name: "default",
1592
- description: "Titan Design System default theme \u2014 orange accent, steel secondary"
1593
- };
1594
-
1595
- // src/theme/presets/audiobook.ts
1596
- var audiobookPreset = {
1597
- name: "audiobook",
1598
- description: "Warm copper/patina theme with editorial typography",
1599
- fontImport: "https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,600;0,700;1,400&family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap",
1600
- fonts: {
1601
- sans: "'Outfit', 'Avenir', 'Avenir Next', system-ui, sans-serif",
1602
- body: "'Outfit', 'Avenir', 'Avenir Next', system-ui, sans-serif",
1603
- heading: "'Newsreader', 'Libre Baskerville', Georgia, serif",
1604
- mono: "'JetBrains Mono', 'SF Mono', 'Fira Code', monospace"
1605
- },
1606
- colors: {
1607
- dark: {
1608
- // Brand: Copper accent
1609
- "brand-primary": "#d4782a",
1610
- "brand-primary-light": "#e8944a",
1611
- "brand-primary-dark": "#9a4a15",
1612
- "brand-primary-subtle": "rgba(212, 120, 42, 0.12)",
1613
- "brand-primary-hover": "#e8944a",
1614
- "brand-primary-active": "#f5b070",
1615
- // Brand secondary: Patina/verdigris
1616
- "brand-secondary": "#3a9b8a",
1617
- "brand-secondary-light": "#55baa7",
1618
- "brand-secondary-dark": "#1f5c52",
1619
- "brand-secondary-subtle": "rgba(58, 155, 138, 0.12)",
1620
- "brand-secondary-hover": "#55baa7",
1621
- "brand-secondary-active": "#7ed4c4",
1622
- "on-brand-primary": "#FFFFFF",
1623
- "on-brand-secondary": "#FFFFFF",
1624
- // Status colors (audiobook's warmer status palette)
1625
- "status-success": "#5fb870",
1626
- "status-error": "#d85c4a",
1627
- "status-warning": "#d4a43a",
1628
- "status-info": "#5a8fd4",
1629
- // Text: warm off-whites
1630
- "text-primary": "#f4f3f1",
1631
- "text-secondary": "#b5b3af",
1632
- "text-tertiary": "#7a7875",
1633
- // Surfaces: warm charcoals (not pure gray)
1634
- "surface-base": "#101114",
1635
- "surface-elevated": "#15171c",
1636
- "surface-raised": "#1a1d24",
1637
- "surface-overlay": "#15171c",
1638
- "surface-input": "#15171c",
1639
- // Backgrounds
1640
- "background-base": "#0a0b0d",
1641
- "background-default": "#101114",
1642
- "background-subtle": "#1a1d24",
1643
- // Borders
1644
- "border-default": "rgba(255, 255, 255, 0.06)",
1645
- "border-subtle": "rgba(255, 255, 255, 0.03)",
1646
- "border-strong": "#2d323d",
1647
- "border-focus": "#d4782a",
1648
- "border-input": "#2d323d",
1649
- "border-input-hover": "#454c5c",
1650
- "border-input-focus": "#d4782a",
1651
- "border-input-error": "#d85c4a",
1652
- // Interactive
1653
- "interactive-hover": "rgba(255, 255, 255, 0.04)",
1654
- "interactive-focus": "rgba(255, 255, 255, 0.12)",
1655
- "interactive-active": "rgba(255, 255, 255, 0.16)",
1656
- "interactive-selected": "rgba(255, 255, 255, 0.08)",
1657
- "divider": "rgba(255, 255, 255, 0.06)",
1658
- // Glow RGB values for shadow utilities
1659
- "brand-primary-rgb": "212, 120, 42",
1660
- "brand-secondary-rgb": "58, 155, 138",
1661
- "status-success-rgb": "95, 184, 112",
1662
- "status-error-rgb": "216, 92, 74",
1663
- "status-warning-rgb": "212, 164, 58",
1664
- "status-info-rgb": "90, 143, 212",
1665
- "background-base-rgb": "10, 11, 13"
1666
- }
1667
- },
1668
- rootClasses: ["atmosphere-warm", "grain"]
1669
- };
1670
890
 
1671
- export { __require, applyThemePreset, audiobookPreset, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors };
1672
- //# sourceMappingURL=chunk-UXVRPOME.mjs.map
1673
- //# sourceMappingURL=chunk-UXVRPOME.mjs.map
891
+ export { __require, buttonSizes, darkThemeCSSVars, discreteRainbow, getDiscreteRainbowColor, getSemanticColors, getThemeCSSVars, gluestackConfig, lightThemeCSSVars, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, semanticColorsDark, semanticColorsLight, semanticTypography };
892
+ //# sourceMappingURL=chunk-5SSKGS6E.mjs.map
893
+ //# sourceMappingURL=chunk-5SSKGS6E.mjs.map