@titan-design/react-ui 0.3.0 → 0.4.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 (52) hide show
  1. package/dist/bodymap.js +441 -97
  2. package/dist/bodymap.js.map +1 -1
  3. package/dist/bodymap.mjs +49 -62
  4. package/dist/bodymap.mjs.map +1 -1
  5. package/dist/{chunk-TOD2WQBG.mjs → chunk-2SISKTWM.mjs} +22 -43
  6. package/dist/chunk-2SISKTWM.mjs.map +1 -0
  7. package/dist/{chunk-P7TSQUN6.mjs → chunk-SNVKL5WZ.mjs} +42 -5
  8. package/dist/chunk-SNVKL5WZ.mjs.map +1 -0
  9. package/dist/index.d.mts +42 -2
  10. package/dist/index.d.ts +42 -2
  11. package/dist/index.js +431 -328
  12. package/dist/index.js.map +1 -1
  13. package/dist/index.mjs +397 -314
  14. package/dist/index.mjs.map +1 -1
  15. package/dist/theme/index.d.mts +28 -2
  16. package/dist/theme/index.d.ts +28 -2
  17. package/dist/theme/index.js +37 -0
  18. package/dist/theme/index.js.map +1 -1
  19. package/dist/theme/index.mjs +1 -1
  20. package/package.json +1 -1
  21. package/src/components/custom/Workout/ActiveWorkoutPage.tsx +10 -15
  22. package/src/components/custom/Workout/BodyMap.tsx +7 -8
  23. package/src/components/custom/Workout/BodyMapDetailPanel.tsx +25 -28
  24. package/src/components/custom/Workout/CapacityBandChart.tsx +2 -3
  25. package/src/components/custom/Workout/ExerciseCard.tsx +12 -27
  26. package/src/components/custom/Workout/ExerciseDetailPage.tsx +21 -27
  27. package/src/components/custom/Workout/InputBar.tsx +10 -11
  28. package/src/components/custom/Workout/MesoCard.tsx +2 -6
  29. package/src/components/custom/Workout/MesoStatusCard.tsx +17 -15
  30. package/src/components/custom/Workout/MuscleGroupChip.tsx +2 -4
  31. package/src/components/custom/Workout/PlaceholderStrip.tsx +2 -3
  32. package/src/components/custom/Workout/PrHistoryModal.tsx +12 -14
  33. package/src/components/custom/Workout/ProgramPlanningPage.tsx +8 -12
  34. package/src/components/custom/Workout/ReadinessCheck.tsx +13 -11
  35. package/src/components/custom/Workout/RestTimer.tsx +8 -7
  36. package/src/components/custom/Workout/SetRow.tsx +10 -7
  37. package/src/components/custom/Workout/StrengthTrendChart.tsx +15 -17
  38. package/src/components/custom/Workout/TempoBar.stories.tsx +95 -0
  39. package/src/components/custom/Workout/TempoBar.test.tsx +103 -0
  40. package/src/components/custom/Workout/TempoBar.tsx +215 -0
  41. package/src/components/custom/Workout/TrainingStatusPage.tsx +8 -17
  42. package/src/components/custom/Workout/VelocityStrip.tsx +7 -5
  43. package/src/components/custom/Workout/WeekRow.tsx +2 -1
  44. package/src/components/custom/Workout/WorkoutCard.tsx +3 -8
  45. package/src/components/custom/Workout/index.ts +9 -0
  46. package/src/test/nativewind-stub.ts +13 -0
  47. package/src/theme/ThemeProvider.test.tsx +24 -0
  48. package/src/theme/ThemeProvider.tsx +50 -0
  49. package/src/theme/index.ts +2 -0
  50. package/src/theme/resolve-color.ts +19 -0
  51. package/dist/chunk-P7TSQUN6.mjs.map +0 -1
  52. package/dist/chunk-TOD2WQBG.mjs.map +0 -1
package/dist/bodymap.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import { WORKOUT_TOKENS, jsxs, jsx, cn, Badge, Sparkline, MesoStatusCard } from './chunk-TOD2WQBG.mjs';
2
- import './chunk-P7TSQUN6.mjs';
1
+ import { WORKOUT_TOKENS, cn, Badge, Sparkline, MesoStatusCard } from './chunk-2SISKTWM.mjs';
2
+ import { jsxs, jsx, resolveColor } from './chunk-SNVKL5WZ.mjs';
3
3
  import './chunk-7XPB4NAO.mjs';
4
4
  import { useMemo, useState, useEffect } from 'react';
5
5
  import { Animated, Easing, View, Text, Pressable, ScrollView } from 'react-native';
@@ -194,8 +194,6 @@ var Body = BodyHighlighter.default ?? BodyHighlighter;
194
194
  var OUTLINE_FILL = "rgba(255,255,255,0.08)";
195
195
  var OUTLINE_BORDER = "rgba(255,255,255,0.12)";
196
196
  var BODY_SCALE = 0.8;
197
- var TEXT_PRIMARY = "var(--color-text-primary)";
198
- var TEXT_SECONDARY = "var(--color-text-secondary)";
199
197
  function buildSlugParts(data) {
200
198
  const bySlug = /* @__PURE__ */ new Map();
201
199
  for (const d of data) {
@@ -319,10 +317,10 @@ function BodyMap({
319
317
  legend.length === 0 ? /* @__PURE__ */ jsx(
320
318
  Text,
321
319
  {
320
+ className: "text-text-secondary",
322
321
  style: {
323
322
  marginTop: 8,
324
323
  fontSize: 12,
325
- color: TEXT_SECONDARY,
326
324
  textAlign: "center",
327
325
  fontFamily: "Inter, sans-serif"
328
326
  },
@@ -371,7 +369,7 @@ function ViewToggle({ view, onViewChange }) {
371
369
  borderRadius: 9999,
372
370
  backgroundColor: active ? "rgba(255,121,0,0.16)" : "transparent",
373
371
  borderWidth: 1,
374
- borderColor: active ? "#FF7900" : "var(--color-border-strong)"
372
+ borderColor: active ? "#FF7900" : resolveColor("border-strong")
375
373
  },
376
374
  testID: `body-map-toggle-${side}`,
377
375
  children: /* @__PURE__ */ jsx(
@@ -381,7 +379,7 @@ function ViewToggle({ view, onViewChange }) {
381
379
  fontSize: 12,
382
380
  fontFamily: "Inter, sans-serif",
383
381
  fontWeight: active ? "700" : "500",
384
- color: active ? "#FF7900" : TEXT_SECONDARY,
382
+ color: active ? "#FF7900" : resolveColor("text-secondary"),
385
383
  textTransform: "capitalize"
386
384
  },
387
385
  children: side
@@ -404,6 +402,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }) {
404
402
  accessibilityRole: "button",
405
403
  accessibilityLabel: label,
406
404
  "aria-pressed": highlighted,
405
+ className: "bg-surface-raised",
407
406
  style: {
408
407
  flexDirection: "row",
409
408
  alignItems: "center",
@@ -412,8 +411,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }) {
412
411
  paddingVertical: 3,
413
412
  borderRadius: 9999,
414
413
  borderWidth: 1,
415
- borderColor: highlighted ? "#FF7900" : "var(--color-border-default)",
416
- backgroundColor: "var(--color-surface-raised)"
414
+ borderColor: highlighted ? "#FF7900" : resolveColor("border-default")
417
415
  },
418
416
  testID: `body-map-muscle-${entry.key}`,
419
417
  children: [
@@ -428,11 +426,11 @@ function MuscleButton({ entry, highlighted, onMusclePress }) {
428
426
  /* @__PURE__ */ jsx(
429
427
  Text,
430
428
  {
429
+ className: "text-text-primary",
431
430
  style: {
432
431
  fontSize: 11,
433
432
  fontFamily: "Inter, sans-serif",
434
- fontWeight: "500",
435
- color: TEXT_PRIMARY
433
+ fontWeight: "500"
436
434
  },
437
435
  accessibilityElementsHidden: true,
438
436
  children: entry.name
@@ -442,14 +440,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }) {
442
440
  }
443
441
  );
444
442
  }
445
- var SURFACE_ELEVATED = "var(--color-surface-elevated)";
446
- var SURFACE_RAISED = "var(--color-surface-raised)";
447
- var BORDER_STRONG = "var(--color-border-strong)";
448
- var BORDER_DEFAULT = "var(--color-border-default)";
449
443
  var BRAND_PRIMARY = "#FF7900";
450
- var TEXT_PRIMARY2 = "var(--color-text-primary)";
451
- var TEXT_SECONDARY2 = "var(--color-text-secondary)";
452
- var TEXT_TERTIARY = "var(--color-text-tertiary)";
453
444
  var VOLUME_GRADIENT = "linear-gradient(90deg, #2196F3 0%, #14B8A6 50%, #D14343 100%)";
454
445
  var SLIDE_OFFSET = 400;
455
446
  var BACKDROP_OPACITY = 0.4;
@@ -549,8 +540,8 @@ function BodyMapDetailPanel({
549
540
  accessibilityRole: "dialog",
550
541
  accessibilityLabel: dialogLabel,
551
542
  "aria-label": dialogLabel,
543
+ className: "bg-surface-elevated",
552
544
  style: {
553
- backgroundColor: SURFACE_ELEVATED,
554
545
  borderTopLeftRadius: 16,
555
546
  borderTopRightRadius: 16,
556
547
  maxHeight: "88%",
@@ -571,7 +562,8 @@ function BodyMapDetailPanel({
571
562
  children: /* @__PURE__ */ jsx(
572
563
  View,
573
564
  {
574
- style: { width: 40, height: 4, borderRadius: 2, backgroundColor: BORDER_STRONG },
565
+ className: "bg-border-strong",
566
+ style: { width: 40, height: 4, borderRadius: 2 },
575
567
  accessibilityElementsHidden: true
576
568
  }
577
569
  )
@@ -596,11 +588,11 @@ function BodyMapDetailPanel({
596
588
  Text,
597
589
  {
598
590
  accessibilityRole: "header",
591
+ className: "text-text-primary",
599
592
  style: {
600
593
  fontSize: 16,
601
594
  fontFamily: '"Space Grotesk", sans-serif',
602
- fontWeight: "700",
603
- color: TEXT_PRIMARY2
595
+ fontWeight: "700"
604
596
  },
605
597
  testID: "body-map-detail-panel-title",
606
598
  children: displayName
@@ -626,7 +618,7 @@ function BodyMapDetailPanel({
626
618
  hitSlop: 8,
627
619
  style: { padding: 4, margin: -4 },
628
620
  testID: "body-map-detail-panel-close",
629
- children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 22, lineHeight: 22, color: TEXT_SECONDARY2 }, children: "\xD7" })
621
+ children: /* @__PURE__ */ jsx(Text, { className: "text-text-secondary", style: { fontSize: 22, lineHeight: 22 }, children: "\xD7" })
630
622
  }
631
623
  )
632
624
  ]
@@ -635,7 +627,8 @@ function BodyMapDetailPanel({
635
627
  lastTrained != null && /* @__PURE__ */ jsx(
636
628
  Text,
637
629
  {
638
- style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY2 },
630
+ className: "text-text-secondary",
631
+ style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
639
632
  testID: "body-map-detail-panel-last-trained",
640
633
  children: `Last trained ${lastTrained}`
641
634
  }
@@ -648,8 +641,8 @@ function BodyMapDetailPanel({
648
641
  style: { marginBottom: 6 },
649
642
  accessibilityElementsHidden: true,
650
643
  children: [
651
- /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_TERTIARY }, children: `MEV ${landmarks.mev}` }),
652
- /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_TERTIARY }, children: `MRV ${landmarks.mrv}` })
644
+ /* @__PURE__ */ jsx(Text, { className: "text-text-tertiary", style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600" }, children: `MEV ${landmarks.mev}` }),
645
+ /* @__PURE__ */ jsx(Text, { className: "text-text-tertiary", style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600" }, children: `MRV ${landmarks.mrv}` })
653
646
  ]
654
647
  }
655
648
  ),
@@ -675,6 +668,7 @@ function BodyMapDetailPanel({
675
668
  /* @__PURE__ */ jsx(
676
669
  View,
677
670
  {
671
+ className: "border-text-primary bg-surface-elevated",
678
672
  style: {
679
673
  position: "absolute",
680
674
  left: `${markerLeft}%`,
@@ -683,8 +677,6 @@ function BodyMapDetailPanel({
683
677
  height: 14,
684
678
  borderRadius: 7,
685
679
  borderWidth: 2,
686
- borderColor: TEXT_PRIMARY2,
687
- backgroundColor: SURFACE_ELEVATED,
688
680
  boxShadow: "0 0 4px rgba(0,0,0,0.5)"
689
681
  },
690
682
  accessibilityElementsHidden: true,
@@ -699,11 +691,11 @@ function BodyMapDetailPanel({
699
691
  /* @__PURE__ */ jsx(
700
692
  Text,
701
693
  {
694
+ className: "text-text-primary",
702
695
  style: {
703
696
  fontSize: 24,
704
697
  fontFamily: '"Space Grotesk", sans-serif',
705
- fontWeight: "700",
706
- color: TEXT_PRIMARY2
698
+ fontWeight: "700"
707
699
  },
708
700
  testID: "body-map-detail-panel-set-count",
709
701
  children: weeklySets
@@ -712,7 +704,8 @@ function BodyMapDetailPanel({
712
704
  /* @__PURE__ */ jsx(
713
705
  Text,
714
706
  {
715
- style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY2 },
707
+ className: "text-text-secondary",
708
+ style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
716
709
  testID: "body-map-detail-panel-mrv-suffix",
717
710
  children: `/ ${landmarks.mrv} MRV`
718
711
  }
@@ -722,11 +715,11 @@ function BodyMapDetailPanel({
722
715
  /* @__PURE__ */ jsx(
723
716
  Text,
724
717
  {
718
+ className: "text-text-tertiary",
725
719
  style: {
726
720
  fontSize: 10,
727
721
  fontFamily: "Inter, sans-serif",
728
722
  fontWeight: "600",
729
- color: TEXT_TERTIARY,
730
723
  marginBottom: 6
731
724
  },
732
725
  accessibilityElementsHidden: true,
@@ -739,11 +732,11 @@ function BodyMapDetailPanel({
739
732
  /* @__PURE__ */ jsx(
740
733
  Text,
741
734
  {
735
+ className: "text-text-tertiary",
742
736
  style: {
743
737
  fontSize: 10,
744
738
  fontFamily: "Inter, sans-serif",
745
739
  fontWeight: "600",
746
- color: TEXT_TERTIARY,
747
740
  marginBottom: 8
748
741
  },
749
742
  children: "CONTRIBUTING EXERCISES"
@@ -752,23 +745,22 @@ function BodyMapDetailPanel({
752
745
  contributingExercises.map((exercise, index) => /* @__PURE__ */ jsxs(
753
746
  View,
754
747
  {
755
- className: "flex-row items-center justify-between",
748
+ className: "flex-row items-center justify-between bg-surface-raised border-border",
756
749
  style: {
757
750
  gap: 10,
758
751
  paddingVertical: 8,
759
752
  paddingHorizontal: 12,
760
753
  marginBottom: 6,
761
754
  borderRadius: 8,
762
- backgroundColor: SURFACE_RAISED,
763
- borderWidth: 1,
764
- borderColor: BORDER_DEFAULT
755
+ borderWidth: 1
765
756
  },
766
757
  testID: `body-map-detail-panel-contributing-${index}`,
767
758
  children: [
768
759
  /* @__PURE__ */ jsx(
769
760
  Text,
770
761
  {
771
- style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_PRIMARY2 },
762
+ className: "text-text-primary",
763
+ style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600" },
772
764
  testID: `body-map-detail-panel-contributing-${index}-name`,
773
765
  children: exercise.name
774
766
  }
@@ -776,7 +768,8 @@ function BodyMapDetailPanel({
776
768
  /* @__PURE__ */ jsx(
777
769
  Text,
778
770
  {
779
- style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY2 },
771
+ className: "text-text-secondary",
772
+ style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
780
773
  testID: `body-map-detail-panel-contributing-${index}-detail`,
781
774
  children: `${exercise.sets} sets \xB7 ${Math.round(exercise.contributionWeight * 100)}%`
782
775
  }
@@ -790,11 +783,11 @@ function BodyMapDetailPanel({
790
783
  /* @__PURE__ */ jsx(
791
784
  Text,
792
785
  {
786
+ className: "text-text-tertiary",
793
787
  style: {
794
788
  fontSize: 10,
795
789
  fontFamily: "Inter, sans-serif",
796
790
  fontWeight: "600",
797
- color: TEXT_TERTIARY,
798
791
  marginBottom: 8
799
792
  },
800
793
  children: "UPCOMING"
@@ -810,7 +803,8 @@ function BodyMapDetailPanel({
810
803
  /* @__PURE__ */ jsx(
811
804
  Text,
812
805
  {
813
- style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_PRIMARY2 },
806
+ className: "text-text-primary",
807
+ style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600" },
814
808
  testID: `body-map-detail-panel-upcoming-${index}-name`,
815
809
  children: exercise.name
816
810
  }
@@ -818,7 +812,8 @@ function BodyMapDetailPanel({
818
812
  /* @__PURE__ */ jsx(
819
813
  Text,
820
814
  {
821
- style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_TERTIARY },
815
+ className: "text-text-tertiary",
816
+ style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
822
817
  testID: `body-map-detail-panel-upcoming-${index}-detail`,
823
818
  children: `${exercise.workoutName} \xB7 ${exercise.sets} sets`
824
819
  }
@@ -857,12 +852,6 @@ function BodyMapDetailPanel({
857
852
  }
858
853
  );
859
854
  }
860
- var SURFACE_ELEVATED2 = "var(--color-surface-elevated)";
861
- var BORDER_DEFAULT2 = "var(--color-border-default)";
862
- var TEXT_PRIMARY3 = "var(--color-text-primary)";
863
- var TEXT_SECONDARY3 = "var(--color-text-secondary)";
864
- var TEXT_TERTIARY2 = "var(--color-text-tertiary)";
865
- var PAGE_BG = "var(--color-background-base)";
866
855
  var STATUS_ORDER = ["under", "maintenance", "productive", "over"];
867
856
  function deriveTrainingSummary(muscles) {
868
857
  const statusCounts = {
@@ -898,25 +887,24 @@ function SummaryCards({ summary }) {
898
887
  return /* @__PURE__ */ jsxs(
899
888
  View,
900
889
  {
890
+ className: "bg-surface-elevated border-border",
901
891
  style: {
902
892
  flexGrow: 1,
903
893
  flexBasis: "46%",
904
894
  padding: 12,
905
895
  borderRadius: 10,
906
- backgroundColor: SURFACE_ELEVATED2,
907
- borderWidth: 1,
908
- borderColor: BORDER_DEFAULT2
896
+ borderWidth: 1
909
897
  },
910
898
  testID: `training-status-page-summary-${key}`,
911
899
  children: [
912
900
  /* @__PURE__ */ jsx(
913
901
  Text,
914
902
  {
903
+ className: "text-text-primary",
915
904
  style: {
916
905
  fontSize: 22,
917
906
  fontFamily: '"Space Grotesk", sans-serif',
918
- fontWeight: "700",
919
- color: TEXT_PRIMARY3
907
+ fontWeight: "700"
920
908
  },
921
909
  children: value
922
910
  }
@@ -924,14 +912,14 @@ function SummaryCards({ summary }) {
924
912
  /* @__PURE__ */ jsx(
925
913
  Text,
926
914
  {
915
+ className: "text-text-tertiary",
927
916
  style: {
928
917
  marginTop: 2,
929
918
  fontSize: 11,
930
919
  fontFamily: "Inter, sans-serif",
931
920
  fontWeight: "600",
932
921
  letterSpacing: 0.4,
933
- textTransform: "uppercase",
934
- color: TEXT_TERTIARY2
922
+ textTransform: "uppercase"
935
923
  },
936
924
  children: label
937
925
  }
@@ -971,10 +959,10 @@ function StatusLegend() {
971
959
  /* @__PURE__ */ jsx(
972
960
  Text,
973
961
  {
962
+ className: "text-text-secondary",
974
963
  style: {
975
964
  fontSize: 11,
976
965
  fontFamily: "Inter, sans-serif",
977
- color: TEXT_SECONDARY3,
978
966
  textTransform: "capitalize"
979
967
  },
980
968
  children: VOLUME_STATUS_LABELS[status]
@@ -1013,8 +1001,8 @@ function TrainingStatusPage({
1013
1001
  return /* @__PURE__ */ jsxs(
1014
1002
  View,
1015
1003
  {
1016
- className,
1017
- style: { position: "relative", width: 390, backgroundColor: PAGE_BG },
1004
+ className: ["bg-background-base", className].filter(Boolean).join(" "),
1005
+ style: { position: "relative", width: 390 },
1018
1006
  accessibilityRole: "main",
1019
1007
  "aria-label": title,
1020
1008
  testID: "training-status-page",
@@ -1025,11 +1013,11 @@ function TrainingStatusPage({
1025
1013
  Text,
1026
1014
  {
1027
1015
  accessibilityRole: "header",
1016
+ className: "text-text-primary",
1028
1017
  style: {
1029
1018
  fontSize: 20,
1030
1019
  fontFamily: '"Space Grotesk", sans-serif',
1031
- fontWeight: "700",
1032
- color: TEXT_PRIMARY3
1020
+ fontWeight: "700"
1033
1021
  },
1034
1022
  testID: "training-status-page-title",
1035
1023
  children: title
@@ -1040,10 +1028,9 @@ function TrainingStatusPage({
1040
1028
  /* @__PURE__ */ jsxs(
1041
1029
  View,
1042
1030
  {
1031
+ className: "bg-surface-elevated border-border",
1043
1032
  style: {
1044
- backgroundColor: SURFACE_ELEVATED2,
1045
1033
  borderWidth: 1,
1046
- borderColor: BORDER_DEFAULT2,
1047
1034
  borderRadius: 12,
1048
1035
  padding: 12,
1049
1036
  gap: 12