@ornikar/kitt-universal 27.3.1-canary.2a1e1042a7d526c8c6b6197a77f84626e0e5d206.0 → 27.5.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 (70) hide show
  1. package/CHANGELOG.md +11 -14
  2. package/dist/definitions/BaseMessage/helper.d.ts.map +1 -1
  3. package/dist/definitions/CardModal/CardModalAnimation/CardModalAnimation.web.d.ts.map +1 -1
  4. package/dist/definitions/DialogModal/DialogModalAnimation/DialogModalAnimation.web.d.ts.map +1 -1
  5. package/dist/definitions/FullscreenModal/FullscreenModalAnimation.web.d.ts.map +1 -1
  6. package/dist/definitions/GoogleMapsAutocompleteProvider/GoogleMapsAutocompleteProvider.d.ts.map +1 -1
  7. package/dist/definitions/Highlight/AnimatedContainer/AnimatedContainer.d.ts +1 -1
  8. package/dist/definitions/Highlight/AnimatedContainer/AnimatedContainer.d.ts.map +1 -1
  9. package/dist/definitions/Highlight/AnimatedContainer/AnimatedContainer.web.d.ts.map +1 -1
  10. package/dist/definitions/Highlight/Highlight.d.ts.map +1 -1
  11. package/dist/definitions/MapMarker/MapMarker.d.ts +2 -5
  12. package/dist/definitions/MapMarker/MapMarker.d.ts.map +1 -1
  13. package/dist/definitions/MapMarker/constants.d.ts +6 -0
  14. package/dist/definitions/MapMarker/constants.d.ts.map +1 -0
  15. package/dist/definitions/MapMarker/utils/getBackgroundColor.d.ts +2 -1
  16. package/dist/definitions/MapMarker/utils/getBackgroundColor.d.ts.map +1 -1
  17. package/dist/definitions/Picker/Picker.web.d.ts.map +1 -1
  18. package/dist/definitions/TabBar/TabBar.d.ts.map +1 -1
  19. package/dist/definitions/TimePicker/TimePicker.web.d.ts.map +1 -1
  20. package/dist/definitions/themes/late-ocean/cardModal.d.ts +21 -4
  21. package/dist/definitions/themes/late-ocean/cardModal.d.ts.map +1 -1
  22. package/dist/definitions/themes/late-ocean/dialogModal.d.ts +21 -4
  23. package/dist/definitions/themes/late-ocean/dialogModal.d.ts.map +1 -1
  24. package/dist/definitions/themes/late-ocean/fullscreenModal.d.ts +21 -4
  25. package/dist/definitions/themes/late-ocean/fullscreenModal.d.ts.map +1 -1
  26. package/dist/definitions/themes/late-ocean/highlight.d.ts +4 -0
  27. package/dist/definitions/themes/late-ocean/highlight.d.ts.map +1 -1
  28. package/dist/definitions/themes/late-ocean/shadows.d.ts +4 -2
  29. package/dist/definitions/themes/late-ocean/shadows.d.ts.map +1 -1
  30. package/dist/definitions/themes/late-ocean/skeleton.d.ts +2 -1
  31. package/dist/definitions/themes/late-ocean/skeleton.d.ts.map +1 -1
  32. package/dist/definitions/typography/Typography.d.ts +6 -18
  33. package/dist/definitions/typography/Typography.d.ts.map +1 -1
  34. package/dist/index-metro.es.android.js +124 -50
  35. package/dist/index-metro.es.android.js.map +1 -1
  36. package/dist/index-metro.es.ios.js +124 -50
  37. package/dist/index-metro.es.ios.js.map +1 -1
  38. package/dist/index-node-22.17.cjs.js +123 -49
  39. package/dist/index-node-22.17.cjs.js.map +1 -1
  40. package/dist/index-node-22.17.cjs.web.css +2 -2
  41. package/dist/index-node-22.17.cjs.web.js +87 -41
  42. package/dist/index-node-22.17.cjs.web.js.map +1 -1
  43. package/dist/index-node-22.17.es.mjs +123 -49
  44. package/dist/index-node-22.17.es.mjs.map +1 -1
  45. package/dist/index-node-22.17.es.web.css +2 -2
  46. package/dist/index-node-22.17.es.web.mjs +87 -41
  47. package/dist/index-node-22.17.es.web.mjs.map +1 -1
  48. package/dist/index.es.js +210 -174
  49. package/dist/index.es.js.map +1 -1
  50. package/dist/index.es.web.js +157 -113
  51. package/dist/index.es.web.js.map +1 -1
  52. package/dist/linaria-themes-metro.es.android.js +50 -16
  53. package/dist/linaria-themes-metro.es.android.js.map +1 -1
  54. package/dist/linaria-themes-metro.es.ios.js +50 -16
  55. package/dist/linaria-themes-metro.es.ios.js.map +1 -1
  56. package/dist/linaria-themes-node-22.17.cjs.js +50 -16
  57. package/dist/linaria-themes-node-22.17.cjs.js.map +1 -1
  58. package/dist/linaria-themes-node-22.17.cjs.web.js +50 -16
  59. package/dist/linaria-themes-node-22.17.cjs.web.js.map +1 -1
  60. package/dist/linaria-themes-node-22.17.es.mjs +50 -16
  61. package/dist/linaria-themes-node-22.17.es.mjs.map +1 -1
  62. package/dist/linaria-themes-node-22.17.es.web.mjs +50 -16
  63. package/dist/linaria-themes-node-22.17.es.web.mjs.map +1 -1
  64. package/dist/linaria-themes.es.js +51 -17
  65. package/dist/linaria-themes.es.js.map +1 -1
  66. package/dist/linaria-themes.es.web.js +51 -17
  67. package/dist/linaria-themes.es.web.js.map +1 -1
  68. package/dist/styles.css +2 -2
  69. package/dist/tsbuildinfo +1 -1
  70. package/package.json +28 -28
@@ -737,13 +737,23 @@ const card = {
737
737
  };
738
738
 
739
739
  const webAnimationContentDuration$2 = 400;
740
- const webAnimationContentEasing$2 = [0.77, 0, 0.175, 1];
740
+ const webAnimationContentEasing$2 = {
741
+ x1: 0.77,
742
+ y1: 0,
743
+ x2: 0.175,
744
+ y2: 1
745
+ };
741
746
  const webAnimationOverlayDuration$2 = 250;
742
- const webAnimationOverlayEasing$2 = [0.42, 0, 1, 1];
747
+ const webAnimationOverlayEasing$2 = {
748
+ x1: 0.42,
749
+ y1: 0,
750
+ x2: 1,
751
+ y2: 1
752
+ };
743
753
  const maxWidth = 540;
744
754
  const overlayHorizontalPadding = 24;
745
755
  const cardModal = {
746
- borderRadius: 20,
756
+ borderRadius: spacing * 2,
747
757
  maxWidth,
748
758
  maxWidthWithPadding: maxWidth + overlayHorizontalPadding * 2,
749
759
  minHeight: 280,
@@ -831,11 +841,21 @@ const choices = {
831
841
  };
832
842
 
833
843
  const webAnimationContentDuration$1 = 400;
834
- const webAnimationContentEasing$1 = [0.77, 0, 0.175, 1];
844
+ const webAnimationContentEasing$1 = {
845
+ x1: 0.77,
846
+ y1: 0,
847
+ x2: 0.175,
848
+ y2: 1
849
+ };
835
850
  const webAnimationOverlayDuration$1 = 250;
836
- const webAnimationOverlayEasing$1 = [0.42, 0, 1, 1];
851
+ const webAnimationOverlayEasing$1 = {
852
+ x1: 0.42,
853
+ y1: 0,
854
+ x2: 1,
855
+ y2: 1
856
+ };
837
857
  const dialogModal = {
838
- borderRadius: 20,
858
+ borderRadius: spacing * 2,
839
859
  maxWidth: 540,
840
860
  overlayPadding: {
841
861
  horizontal: 24,
@@ -1765,9 +1785,19 @@ const forms = {
1765
1785
  };
1766
1786
 
1767
1787
  const webAnimationContentDuration = 600;
1768
- const webAnimationContentEasing = [0.77, 0, 0.175, 1];
1788
+ const webAnimationContentEasing = {
1789
+ x1: 0.77,
1790
+ y1: 0,
1791
+ x2: 0.175,
1792
+ y2: 1
1793
+ };
1769
1794
  const webAnimationOverlayDuration = 250;
1770
- const webAnimationOverlayEasing = [0.42, 0, 1, 1];
1795
+ const webAnimationOverlayEasing = {
1796
+ x1: 0.42,
1797
+ y1: 0,
1798
+ x2: 1,
1799
+ y2: 1
1800
+ };
1771
1801
  const fullscreenModal = {
1772
1802
  header: {
1773
1803
  height: 56
@@ -1804,10 +1834,10 @@ const highlight = {
1804
1834
  },
1805
1835
  primary: {
1806
1836
  default: {
1807
- backgroundColor: deepPurpleColorPalette['beige.2']
1837
+ backgroundColor: deepPurpleColorPalette['blue.1']
1808
1838
  },
1809
1839
  hover: {
1810
- backgroundColor: deepPurpleColorPalette['beige.4']
1840
+ backgroundColor: deepPurpleColorPalette['blue.2']
1811
1841
  }
1812
1842
  },
1813
1843
  secondary: {
@@ -1828,10 +1858,14 @@ const highlight = {
1828
1858
  },
1829
1859
  dark: {
1830
1860
  default: {
1831
- backgroundColor: deepPurpleColorPalette['beige.2']
1861
+ backgroundColor: deepPurpleColorPalette['grey.0'],
1862
+ borderWidth: 1,
1863
+ borderColor: deepPurpleColorPalette['beige.3']
1832
1864
  },
1833
1865
  hover: {
1834
- backgroundColor: deepPurpleColorPalette['beige.1']
1866
+ backgroundColor: deepPurpleColorPalette['beige.1'],
1867
+ borderWidth: 1,
1868
+ borderColor: deepPurpleColorPalette['beige.3']
1835
1869
  }
1836
1870
  },
1837
1871
  success: {
@@ -1911,8 +1945,8 @@ const listItem = {
1911
1945
 
1912
1946
  const mapMarker = {
1913
1947
  home: {
1914
- default: colors.primaryLight,
1915
- selected: colors.primary,
1948
+ default: deepPurpleColorPalette['grey.9'],
1949
+ selected: deepPurpleColorPalette['grey.7'],
1916
1950
  svg: {
1917
1951
  height: 36
1918
1952
  },
@@ -1922,8 +1956,8 @@ const mapMarker = {
1922
1956
  }
1923
1957
  },
1924
1958
  meetingPoint: {
1925
- default: colors.black,
1926
- selected: colors.blackAnthracite,
1959
+ default: deepPurpleColorPalette['deepPurple.8'],
1960
+ selected: deepPurpleColorPalette['deepPurple.6'],
1927
1961
  svg: {
1928
1962
  width: 40,
1929
1963
  height: 43
@@ -4008,7 +4042,12 @@ function NativeOpacityAnimation$2({
4008
4042
  duration,
4009
4043
  easing
4010
4044
  } = theme.kitt.cardModal.animation.overlay;
4011
- const [x1, y1, x2, y2] = easing;
4045
+ const {
4046
+ x1,
4047
+ y1,
4048
+ x2,
4049
+ y2
4050
+ } = easing;
4012
4051
  return {
4013
4052
  opacity: withTiming(visible ? 1 : 0, {
4014
4053
  duration,
@@ -4046,7 +4085,12 @@ function NativeRotationAnimation$1({
4046
4085
  duration,
4047
4086
  easing
4048
4087
  } = theme.kitt.cardModal.animation.content;
4049
- const [x1, y1, x2, y2] = easing;
4088
+ const {
4089
+ x1,
4090
+ y1,
4091
+ x2,
4092
+ y2
4093
+ } = easing;
4050
4094
  rotation.value = withTiming(visible ? 0 : 5, {
4051
4095
  duration,
4052
4096
  easing: Easing$1.bezier(x1, y1, x2, y2)
@@ -4619,7 +4663,12 @@ function NativeOpacityAnimation$1({
4619
4663
  duration,
4620
4664
  easing
4621
4665
  } = theme.kitt.dialogModal.animation.overlay;
4622
- const [x1, y1, x2, y2] = easing;
4666
+ const {
4667
+ x1,
4668
+ y1,
4669
+ x2,
4670
+ y2
4671
+ } = easing;
4623
4672
  return {
4624
4673
  opacity: withTiming(visible ? 1 : 0, {
4625
4674
  duration,
@@ -4657,7 +4706,12 @@ function NativeRotationAnimation({
4657
4706
  duration,
4658
4707
  easing
4659
4708
  } = theme.kitt.dialogModal.animation.content;
4660
- const [x1, y1, x2, y2] = easing;
4709
+ const {
4710
+ x1,
4711
+ y1,
4712
+ x2,
4713
+ y2
4714
+ } = easing;
4661
4715
  rotation.value = withTiming(visible ? 0 : 5, {
4662
4716
  duration,
4663
4717
  easing: Easing$1.bezier(x1, y1, x2, y2)
@@ -6279,7 +6333,7 @@ function DocumentPicker({
6279
6333
  ...documentPickerOptions,
6280
6334
  multiple: false
6281
6335
  });
6282
- if (!result.canceled && result.assets[0].file) {
6336
+ if (!result.canceled && result.assets[0]?.file) {
6283
6337
  onDocumentUpload(result.assets[0].file);
6284
6338
  }
6285
6339
  },
@@ -6306,7 +6360,7 @@ function ImagePicker({
6306
6360
  ...imagePickerOptions,
6307
6361
  allowsMultipleSelection: false
6308
6362
  });
6309
- if (!result.canceled) {
6363
+ if (!result.canceled && result.assets[0]) {
6310
6364
  onImageSelected(result.assets[0]);
6311
6365
  }
6312
6366
  },
@@ -6755,17 +6809,17 @@ function GoogleMapsAutocompleteProvider({
6755
6809
  dispatch({
6756
6810
  type: 'search-error'
6757
6811
  });
6758
- return;
6759
6812
  }
6760
-
6761
- // We cache the results to avoid calling the API again if the user types the same value
6762
- searchResultsCache.current[value] = results;
6763
- dispatch({
6764
- type: 'search-success',
6765
- payload: {
6766
- results
6767
- }
6768
- });
6813
+ if (results) {
6814
+ // We cache the results to avoid calling the API again if the user types the same value
6815
+ searchResultsCache.current[value] = results;
6816
+ dispatch({
6817
+ type: 'search-success',
6818
+ payload: {
6819
+ results
6820
+ }
6821
+ });
6822
+ }
6769
6823
  } catch (error) {
6770
6824
  dispatch({
6771
6825
  type: 'search-error'
@@ -7843,7 +7897,12 @@ function NativeOpacityAnimation({
7843
7897
  duration,
7844
7898
  easing
7845
7899
  } = theme.kitt.fullscreenModal.animation.overlay;
7846
- const [x1, y1, x2, y2] = easing;
7900
+ const {
7901
+ x1,
7902
+ y1,
7903
+ x2,
7904
+ y2
7905
+ } = easing;
7847
7906
  return {
7848
7907
  opacity: withTiming(visible ? 1 : 0, {
7849
7908
  duration,
@@ -7882,7 +7941,12 @@ function NativeSlideInAnimation({
7882
7941
  duration,
7883
7942
  easing
7884
7943
  } = theme.kitt.fullscreenModal.animation.content;
7885
- const [x1, y1, x2, y2] = easing;
7944
+ const {
7945
+ x1,
7946
+ y1,
7947
+ x2,
7948
+ y2
7949
+ } = easing;
7886
7950
  return {
7887
7951
  transform: [{
7888
7952
  translateY: withTiming(visible ? 0 : wHeight, {
@@ -8151,13 +8215,16 @@ function AnimatedCaret({
8151
8215
  function AnimatedContainer({
8152
8216
  children,
8153
8217
  size,
8154
- animatedStyles
8218
+ animatedStyles,
8219
+ variant
8155
8220
  }) {
8156
8221
  const sx = useSx();
8157
8222
  const theme = useTheme();
8158
8223
  const styles = sx({
8159
8224
  borderRadius: theme.kitt.highlight.borderRadius,
8160
- padding: theme.kitt.highlight.padding[size]
8225
+ padding: theme.kitt.highlight.padding[size],
8226
+ borderWidth: theme.kitt.highlight[variant].default.borderWidth,
8227
+ borderColor: theme.kitt.highlight[variant].default.borderColor
8161
8228
  });
8162
8229
  return /*#__PURE__*/jsx(Animated.View, {
8163
8230
  style: [styles, animatedStyles],
@@ -8281,6 +8348,8 @@ function Highlight({
8281
8348
  borderRadius: "kitt.highlight.borderRadius",
8282
8349
  padding: theme.kitt.highlight.padding[size],
8283
8350
  backgroundColor: `kitt.highlight.${variant}.default.backgroundColor`,
8351
+ borderWidth: theme.kitt.highlight[variant].default.borderWidth,
8352
+ borderColor: theme.kitt.highlight[variant].default.borderColor,
8284
8353
  children: /*#__PURE__*/jsxs(HStack, {
8285
8354
  space: highlightStyle[size].spaceBetween,
8286
8355
  children: [icon && /*#__PURE__*/jsx(View, {
@@ -8535,12 +8604,11 @@ const SvgPinMarkerinline = props => /*#__PURE__*/jsxs("svg", {
8535
8604
  width: 34,
8536
8605
  height: 36,
8537
8606
  viewBox: "0 0 34 36",
8538
- fill: "none",
8607
+ fill: "currentColor",
8539
8608
  xmlns: "http://www.w3.org/2000/svg",
8540
8609
  ...props,
8541
8610
  children: [/*#__PURE__*/jsx("path", {
8542
8611
  d: "M17 .5C26.113.5 33.5 7.887 33.5 17c0 8.272-6.087 15.121-14.025 16.315-.05.008-.157.054-.337.211-.173.151-.351.345-.56.57a5.972 5.972 0 0 1-.662.637c-.232.181-.545.367-.916.367-.37 0-.684-.186-.916-.367a5.972 5.972 0 0 1-.662-.637c-.209-.224-.387-.419-.56-.57-.18-.157-.287-.203-.337-.21C6.586 32.12.5 25.271.5 17 .5 7.887 7.887.5 17 .5Z",
8543
- fill: "#7B66FF",
8544
8612
  stroke: "#fff"
8545
8613
  }), /*#__PURE__*/jsx("path", {
8546
8614
  d: "M17 10a5.506 5.506 0 0 0-5.5 5.5c0 4.706 5 8.26 5.213 8.41a.5.5 0 0 0 .574 0c.213-.15 5.213-3.704 5.213-8.41A5.506 5.506 0 0 0 17 10Zm0 3.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z",
@@ -8565,6 +8633,13 @@ const SvgShadowinline = props => /*#__PURE__*/jsx("svg", {
8565
8633
  })
8566
8634
  });
8567
8635
 
8636
+ let MapMarkerVariantEnum = /*#__PURE__*/function (MapMarkerVariantEnum) {
8637
+ MapMarkerVariantEnum["HOME"] = "home";
8638
+ MapMarkerVariantEnum["MEETING_POINT"] = "meetingPoint";
8639
+ MapMarkerVariantEnum["CLOSE_MEETING_POINT"] = "closeMeetingPoint";
8640
+ return MapMarkerVariantEnum;
8641
+ }({});
8642
+
8568
8643
  const SCALE_DURATION = 300;
8569
8644
  const TRANSLATE_Y_DURATION = 150;
8570
8645
  const useNativeAnimation = ({
@@ -8621,18 +8696,12 @@ const getBackgroundColor = ({
8621
8696
  isSelected,
8622
8697
  variant
8623
8698
  }) => {
8624
- if (variant === 'home') {
8699
+ if (variant === MapMarkerVariantEnum.HOME || variant === MapMarkerVariantEnum.CLOSE_MEETING_POINT) {
8625
8700
  return isSelected || isHovered ? theme.mapMarker.home.selected : theme.mapMarker.home.default;
8626
8701
  }
8627
8702
  return isSelected || isHovered ? theme.mapMarker.meetingPoint.selected : theme.mapMarker.meetingPoint.default;
8628
8703
  };
8629
8704
 
8630
- let MapMarkerVariantEnum = /*#__PURE__*/function (MapMarkerVariantEnum) {
8631
- MapMarkerVariantEnum["HOME"] = "home";
8632
- MapMarkerVariantEnum["MEETING_POINT"] = "meetingPoint";
8633
- MapMarkerVariantEnum["CLOSE_MEETING_POINT"] = "closeMeetingPoint";
8634
- return MapMarkerVariantEnum;
8635
- }({});
8636
8705
  function StaticMapMarker$1({
8637
8706
  variant,
8638
8707
  isHovered,
@@ -8735,6 +8804,8 @@ const getColorByType = type => {
8735
8804
  switch (type) {
8736
8805
  case 'success':
8737
8806
  case 'danger':
8807
+ case 'info':
8808
+ return 'white';
8738
8809
  case 'warning':
8739
8810
  default:
8740
8811
  return 'black';
@@ -8744,6 +8815,8 @@ const getIconButtonColor = messageType => {
8744
8815
  switch (messageType) {
8745
8816
  case 'success':
8746
8817
  case 'danger':
8818
+ case 'info':
8819
+ return 'ghost';
8747
8820
  case 'warning':
8748
8821
  default:
8749
8822
  return 'black';
@@ -8764,7 +8837,7 @@ function BaseMessage({
8764
8837
  justifyContent: "space-between",
8765
8838
  minHeight: "kitt.feedbackMessage.minHeight",
8766
8839
  paddingTop: insets?.top,
8767
- borderRadius: hasNoRadius ? undefined : 'kitt.5',
8840
+ borderRadius: hasNoRadius ? undefined : 'kitt.2',
8768
8841
  backgroundColor: `kitt.feedbackMessage.${type}.backgroundColor`,
8769
8842
  children: [/*#__PURE__*/jsxs(HStack, {
8770
8843
  flexGrow: 1,
@@ -8772,9 +8845,9 @@ function BaseMessage({
8772
8845
  alignSelf: "center",
8773
8846
  alignItems: "flex-start",
8774
8847
  paddingY: "kitt.4",
8775
- paddingX: "kitt.5",
8848
+ paddingX: "kitt.4",
8776
8849
  children: [centeredText ? null : /*#__PURE__*/jsx(View, {
8777
- marginRight: "kitt.5",
8850
+ marginRight: "kitt.2",
8778
8851
  children: /*#__PURE__*/jsx(Icon, {
8779
8852
  color: color,
8780
8853
  icon: /*#__PURE__*/jsx(IconContent, {
@@ -12565,12 +12638,13 @@ function TabBar({
12565
12638
  ...props,
12566
12639
  children: Children.map(tabItems, (child, index) => {
12567
12640
  const tab = tabs[index];
12641
+ if (!tab) throw new Error(`TabBar: tab is undefined at index ${index}`);
12568
12642
  return /*#__PURE__*/jsx(View, {
12569
12643
  children: /*#__PURE__*/cloneElement(child, {
12570
12644
  color,
12571
12645
  onPress: event => {
12572
12646
  onChangeTab({
12573
- tab: tabs[index],
12647
+ tab,
12574
12648
  index
12575
12649
  });
12576
12650
  child.props.onPress?.(event);