@ornikar/kitt-universal 32.3.1-canary.282229fbcb79b0e70662d8927eccac40f40e40d3.0 → 32.3.1-canary.ddff29bdf3ffa500cf7658e5206d5069b23f4b45.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 (55) hide show
  1. package/CHANGELOG.md +12 -4
  2. package/dist/definitions/Button/AnimatedContainer.d.ts.map +1 -1
  3. package/dist/definitions/Button/AnimatedContainer.web.d.ts.map +1 -1
  4. package/dist/definitions/Button/Button.d.ts.map +1 -1
  5. package/dist/definitions/forms/InputText/InputText.d.ts.map +1 -1
  6. package/dist/definitions/forms/InputText/InputTextContainer.d.ts +1 -2
  7. package/dist/definitions/forms/InputText/InputTextContainer.d.ts.map +1 -1
  8. package/dist/definitions/forms/InputText/InputTextContainer.web.d.ts +4 -0
  9. package/dist/definitions/forms/InputText/InputTextContainer.web.d.ts.map +1 -0
  10. package/dist/definitions/native-base/KittNativeBaseProvider.d.ts +9 -3
  11. package/dist/definitions/native-base/KittNativeBaseProvider.d.ts.map +1 -1
  12. package/dist/definitions/themes/default.d.ts +5 -0
  13. package/dist/definitions/themes/default.d.ts.map +1 -1
  14. package/dist/definitions/themes/late-ocean/button.d.ts +3 -0
  15. package/dist/definitions/themes/late-ocean/button.d.ts.map +1 -1
  16. package/dist/definitions/themes/late-ocean/input.d.ts.map +1 -1
  17. package/dist/definitions/themes/late-ocean/typography.d.ts +5 -0
  18. package/dist/definitions/themes/late-ocean/typography.d.ts.map +1 -1
  19. package/dist/index-metro.es.android.js +69 -74
  20. package/dist/index-metro.es.android.js.map +1 -1
  21. package/dist/index-metro.es.ios.js +69 -74
  22. package/dist/index-metro.es.ios.js.map +1 -1
  23. package/dist/index-node-22.17.cjs.js +69 -74
  24. package/dist/index-node-22.17.cjs.js.map +1 -1
  25. package/dist/index-node-22.17.cjs.web.css +1 -0
  26. package/dist/index-node-22.17.cjs.web.js +70 -75
  27. package/dist/index-node-22.17.cjs.web.js.map +1 -1
  28. package/dist/index-node-22.17.es.mjs +69 -74
  29. package/dist/index-node-22.17.es.mjs.map +1 -1
  30. package/dist/index-node-22.17.es.web.css +1 -0
  31. package/dist/index-node-22.17.es.web.mjs +70 -75
  32. package/dist/index-node-22.17.es.web.mjs.map +1 -1
  33. package/dist/index.es.js +71 -77
  34. package/dist/index.es.js.map +1 -1
  35. package/dist/index.es.web.js +72 -78
  36. package/dist/index.es.web.js.map +1 -1
  37. package/dist/linaria-themes-metro.es.android.js +20 -10
  38. package/dist/linaria-themes-metro.es.android.js.map +1 -1
  39. package/dist/linaria-themes-metro.es.ios.js +20 -10
  40. package/dist/linaria-themes-metro.es.ios.js.map +1 -1
  41. package/dist/linaria-themes-node-22.17.cjs.js +20 -10
  42. package/dist/linaria-themes-node-22.17.cjs.js.map +1 -1
  43. package/dist/linaria-themes-node-22.17.cjs.web.js +20 -10
  44. package/dist/linaria-themes-node-22.17.cjs.web.js.map +1 -1
  45. package/dist/linaria-themes-node-22.17.es.mjs +20 -10
  46. package/dist/linaria-themes-node-22.17.es.mjs.map +1 -1
  47. package/dist/linaria-themes-node-22.17.es.web.mjs +20 -10
  48. package/dist/linaria-themes-node-22.17.es.web.mjs.map +1 -1
  49. package/dist/linaria-themes.es.js +20 -10
  50. package/dist/linaria-themes.es.js.map +1 -1
  51. package/dist/linaria-themes.es.web.js +20 -10
  52. package/dist/linaria-themes.es.web.js.map +1 -1
  53. package/dist/styles.css +1 -0
  54. package/dist/tsbuildinfo +1 -1
  55. package/package.json +1 -1
@@ -697,6 +697,10 @@ const button = {
697
697
  default: 40,
698
698
  medium: 48
699
699
  },
700
+ minHeight: {
701
+ default: 40,
702
+ medium: 48
703
+ },
700
704
  maxHeight: 48,
701
705
  icon: {
702
706
  medium: {
@@ -1144,6 +1148,7 @@ const inputStatesStyle = {
1144
1148
  color: deepPurpleColorPalette.black
1145
1149
  },
1146
1150
  hover: {
1151
+ backgroundColor: deepPurpleColorPalette['beige.1'],
1147
1152
  borderColor: deepPurpleColorPalette['beige.4'],
1148
1153
  color: deepPurpleColorPalette.black
1149
1154
  },
@@ -2149,8 +2154,8 @@ const typography = {
2149
2154
  allowedFontWeights: ['semibold']
2150
2155
  },
2151
2156
  'heading-l': {
2152
- fontSize: 40,
2153
- lineHeight: 48,
2157
+ fontSize: 38,
2158
+ lineHeight: 44,
2154
2159
  allowedFontWeights: ['semibold']
2155
2160
  },
2156
2161
  'heading-m': {
@@ -2159,14 +2164,19 @@ const typography = {
2159
2164
  allowedFontWeights: ['semibold']
2160
2165
  },
2161
2166
  'heading-s': {
2162
- fontSize: 18,
2163
- lineHeight: 20,
2164
- allowedFontWeights: ['regular', 'bold']
2167
+ fontSize: 24,
2168
+ lineHeight: 28,
2169
+ allowedFontWeights: ['semibold']
2165
2170
  },
2166
2171
  'heading-xs': {
2172
+ fontSize: 20,
2173
+ lineHeight: 24,
2174
+ allowedFontWeights: ['semibold']
2175
+ },
2176
+ 'heading-xxs': {
2167
2177
  fontSize: 16,
2168
- lineHeight: 18,
2169
- allowedFontWeights: ['regular', 'bold']
2178
+ lineHeight: 20,
2179
+ allowedFontWeights: ['semibold']
2170
2180
  }
2171
2181
  }
2172
2182
  },
@@ -2233,17 +2243,17 @@ const typography = {
2233
2243
  configs: {
2234
2244
  'label-large': {
2235
2245
  fontSize: 16,
2236
- lineHeight: 24,
2246
+ lineHeight: 20,
2237
2247
  allowedFontWeights: ['semibold']
2238
2248
  },
2239
2249
  'label-medium': {
2240
2250
  fontSize: 14,
2241
- lineHeight: 20,
2251
+ lineHeight: 18,
2242
2252
  allowedFontWeights: ['semibold']
2243
2253
  },
2244
2254
  'label-small': {
2245
2255
  fontSize: 12,
2246
- lineHeight: 16,
2256
+ lineHeight: 14,
2247
2257
  allowedFontWeights: ['semibold']
2248
2258
  }
2249
2259
  }
@@ -3149,7 +3159,8 @@ function AnimatedContainer$2({
3149
3159
  borderRadius: 'kitt.button.borderRadius',
3150
3160
  backgroundColor: currentBackgroundColor,
3151
3161
  width,
3152
- height
3162
+ height,
3163
+ minHeight: size === 'default' ? 'kitt.button.minHeight.default' : 'kitt.button.minHeight.medium'
3153
3164
  });
3154
3165
  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
3155
3166
  style: disabled ? [styles] : [styles, animatedStyles],
@@ -3867,6 +3878,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
3867
3878
  alignSelf: createResponsiveStyleFromProp(stretch, undefined, 'flex-start'),
3868
3879
  minWidth: "kitt.button.minWidth",
3869
3880
  maxWidth: createResponsiveStyleFromProp(stretch, '100%', 'kitt.button.maxWidth'),
3881
+ minHeight: size === 'default' ? 'kitt.button.minHeight.default' : 'kitt.button.minHeight.medium',
3870
3882
  maxHeight: "kitt.button.maxHeight",
3871
3883
  width: createResponsiveStyleFromProp(stretch, '100%', 'auto'),
3872
3884
  onPress: onPress,
@@ -5549,29 +5561,11 @@ function InputPressable({
5549
5561
  }
5550
5562
 
5551
5563
  function InputTextContainer({
5552
- children,
5553
- isHovered
5564
+ children
5554
5565
  }) {
5555
- const theme = useTheme();
5556
- const sx = nativeBase.useSx();
5557
- const styles = sx({
5558
- borderRadius: input.borderRadius
5559
- });
5560
- const animatedBackground = Animated.useAnimatedStyle(() => {
5561
- const baseBackgroundColor = theme.kitt.palettes.deepPurple.white;
5562
- const hoverBackgroundColor = theme.kitt.palettes.deepPurple['beige.1'];
5563
- return {
5564
- backgroundColor: Animated.withTiming(isHovered ? hoverBackgroundColor : baseBackgroundColor, {
5565
- duration: 200
5566
- })
5567
- };
5568
- }, [isHovered, theme]);
5569
- return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
5570
- style: [styles, animatedBackground],
5571
- children: /*#__PURE__*/jsxRuntime.jsx(View, {
5572
- position: "relative",
5573
- children: children
5574
- })
5566
+ return /*#__PURE__*/jsxRuntime.jsx(View, {
5567
+ position: "relative",
5568
+ children: children
5575
5569
  });
5576
5570
  }
5577
5571
 
@@ -5596,44 +5590,39 @@ const InputText = /*#__PURE__*/React.forwardRef(({
5596
5590
  base: 'body-m'
5597
5591
  });
5598
5592
  const shouldHandleSingleLineOnIOS = reactNative.Platform.OS === 'ios' && !multiline;
5599
- return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
5600
- children: ({
5601
- isHovered
5602
- }) => /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
5603
- isHovered: internalForceState ? internalForceState === 'hover' : isHovered,
5604
- children: [/*#__PURE__*/jsxRuntime.jsx(nativeBase.Input, {
5605
- ref: ref,
5606
- multiline: multiline,
5607
- id: id,
5608
- isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
5609
- isHovered: internalForceState ? internalForceState === 'hover' : undefined,
5610
- isFocused: internalForceState ? internalForceState === 'focus' : undefined,
5611
- inputMode: inputMode,
5612
- autoComplete: autoComplete,
5613
- autoCorrect: autoCorrect,
5614
- textContentType: textContentType,
5615
- fontSize: fontSizeForNativeBase,
5616
- lineHeight:
5617
- // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
5618
- // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
5619
- shouldHandleSingleLineOnIOS ? 0 : fontSizeForNativeBase,
5620
- fontWeight: "bodies.regular",
5621
- fontFamily: "bodies.regular",
5622
- py: !multiline && reactNative.Platform.OS !== 'web' ? 0 : undefined,
5623
- variant: variant,
5624
- ...props,
5625
- height: multiline ? height : 'kitt.forms.input.minHeight',
5626
- onSubmitEditing: multiline ? () => null : onSubmitEditing
5627
- }), right ? /*#__PURE__*/jsxRuntime.jsx(View, {
5628
- position: "absolute",
5629
- right: 0,
5630
- top: 0,
5631
- bottom: 0,
5632
- justifyContent: "center",
5633
- padding: theme.kitt.forms.input.rightContainer.padding,
5634
- children: right
5635
- }) : null]
5636
- })
5593
+ return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
5594
+ children: [/*#__PURE__*/jsxRuntime.jsx(nativeBase.Input, {
5595
+ ref: ref,
5596
+ multiline: multiline,
5597
+ id: id,
5598
+ isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
5599
+ isHovered: internalForceState ? internalForceState === 'hover' : undefined,
5600
+ isFocused: internalForceState ? internalForceState === 'focus' : undefined,
5601
+ inputMode: inputMode,
5602
+ autoComplete: autoComplete,
5603
+ autoCorrect: autoCorrect,
5604
+ textContentType: textContentType,
5605
+ fontSize: fontSizeForNativeBase,
5606
+ lineHeight:
5607
+ // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
5608
+ // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
5609
+ shouldHandleSingleLineOnIOS ? 0 : fontSizeForNativeBase,
5610
+ fontWeight: "bodies.regular",
5611
+ fontFamily: "bodies.regular",
5612
+ py: !multiline && reactNative.Platform.OS !== 'web' ? 0 : undefined,
5613
+ variant: variant,
5614
+ ...props,
5615
+ height: multiline ? height : 'kitt.forms.input.minHeight',
5616
+ onSubmitEditing: multiline ? () => null : onSubmitEditing
5617
+ }), right ? /*#__PURE__*/jsxRuntime.jsx(View, {
5618
+ position: "absolute",
5619
+ right: 0,
5620
+ top: 0,
5621
+ bottom: 0,
5622
+ justifyContent: "center",
5623
+ padding: theme.kitt.forms.input.rightContainer.padding,
5624
+ children: right
5625
+ }) : null]
5637
5626
  });
5638
5627
  });
5639
5628
 
@@ -10645,6 +10634,10 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
10645
10634
  button: {
10646
10635
  minWidth: theme.button.minWidth,
10647
10636
  maxWidth: theme.button.maxWidth,
10637
+ minHeight: {
10638
+ default: theme.button.minHeight.default,
10639
+ medium: theme.button.minHeight.medium
10640
+ },
10648
10641
  maxHeight: theme.button.maxHeight,
10649
10642
  height: {
10650
10643
  default: theme.button.height.default,
@@ -11266,6 +11259,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
11266
11259
  'heading-m': `${theme.typography.types.headings.configs['heading-m'].fontSize}px`,
11267
11260
  'heading-s': `${theme.typography.types.headings.configs['heading-s'].fontSize}px`,
11268
11261
  'heading-xs': `${theme.typography.types.headings.configs['heading-xs'].fontSize}px`,
11262
+ 'heading-xxs': `${theme.typography.types.headings.configs['heading-xxs'].fontSize}px`,
11269
11263
  'body-xl': `${theme.typography.types.bodies.configs['body-xl'].fontSize}px`,
11270
11264
  'body-l': `${theme.typography.types.bodies.configs['body-l'].fontSize}px`,
11271
11265
  'body-m': `${theme.typography.types.bodies.configs['body-m'].fontSize}px`,
@@ -11289,6 +11283,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
11289
11283
  'heading-m': `${theme.typography.types.headings.configs['heading-m'].lineHeight}px`,
11290
11284
  'heading-s': `${theme.typography.types.headings.configs['heading-s'].lineHeight}px`,
11291
11285
  'heading-xs': `${theme.typography.types.headings.configs['heading-xs'].lineHeight}px`,
11286
+ 'heading-xxs': `${theme.typography.types.headings.configs['heading-xxs'].lineHeight}px`,
11292
11287
  'body-xl': `${theme.typography.types.bodies.configs['body-xl'].lineHeight}px`,
11293
11288
  'body-l': `${theme.typography.types.bodies.configs['body-l'].lineHeight}px`,
11294
11289
  'body-m': `${theme.typography.types.bodies.configs['body-m'].lineHeight}px`,
@@ -13060,7 +13055,7 @@ function StoryTitleLevel4({
13060
13055
  return /*#__PURE__*/jsxRuntime.jsx(View, {
13061
13056
  marginBottom: 10,
13062
13057
  children: /*#__PURE__*/jsxRuntime.jsx(Typography.Header4, {
13063
- base: "heading-s",
13058
+ base: "body-l",
13064
13059
  color: useStoryBlockColor(color),
13065
13060
  numberOfLines: numberOfLines,
13066
13061
  children: children
@@ -13668,7 +13663,7 @@ function ToastContent({
13668
13663
  flexGrow: 1,
13669
13664
  flexShrink: 1,
13670
13665
  children: [title ? /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
13671
- base: "heading-xs",
13666
+ base: "body-m",
13672
13667
  color: "white",
13673
13668
  children: title
13674
13669
  }) : null, description ? /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
@@ -13684,7 +13679,7 @@ function ToastContent({
13684
13679
  borderColor: "white",
13685
13680
  onPress: onPress,
13686
13681
  children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
13687
- base: "heading-xs",
13682
+ base: "body-m",
13688
13683
  color: "white",
13689
13684
  children: actionLabel
13690
13685
  })