@ornikar/kitt-universal 27.4.0 → 27.5.1-canary.3a59d4ae3422049417956fa37f27d2e8f5f84aba.0

package/dist/index-node-22.17.es.mjs

@@ -737,9 +737,19 @@ const card = {
 };
 
 const webAnimationContentDuration$2 = 400;
-const webAnimationContentEasing$2 = [0.77, 0, 0.175, 1];
+const webAnimationContentEasing$2 = {
+  x1: 0.77,
+  y1: 0,
+  x2: 0.175,
+  y2: 1
+};
 const webAnimationOverlayDuration$2 = 250;
-const webAnimationOverlayEasing$2 = [0.42, 0, 1, 1];
+const webAnimationOverlayEasing$2 = {
+  x1: 0.42,
+  y1: 0,
+  x2: 1,
+  y2: 1
+};
 const maxWidth = 540;
 const overlayHorizontalPadding = 24;
 const cardModal = {
@@ -831,9 +841,19 @@ const choices = {
 };
 
 const webAnimationContentDuration$1 = 400;
-const webAnimationContentEasing$1 = [0.77, 0, 0.175, 1];
+const webAnimationContentEasing$1 = {
+  x1: 0.77,
+  y1: 0,
+  x2: 0.175,
+  y2: 1
+};
 const webAnimationOverlayDuration$1 = 250;
-const webAnimationOverlayEasing$1 = [0.42, 0, 1, 1];
+const webAnimationOverlayEasing$1 = {
+  x1: 0.42,
+  y1: 0,
+  x2: 1,
+  y2: 1
+};
 const dialogModal = {
   borderRadius: spacing * 2,
   maxWidth: 540,
@@ -1765,9 +1785,19 @@ const forms = {
 };
 
 const webAnimationContentDuration = 600;
-const webAnimationContentEasing = [0.77, 0, 0.175, 1];
+const webAnimationContentEasing = {
+  x1: 0.77,
+  y1: 0,
+  x2: 0.175,
+  y2: 1
+};
 const webAnimationOverlayDuration = 250;
-const webAnimationOverlayEasing = [0.42, 0, 1, 1];
+const webAnimationOverlayEasing = {
+  x1: 0.42,
+  y1: 0,
+  x2: 1,
+  y2: 1
+};
 const fullscreenModal = {
   header: {
     height: 56
@@ -1860,43 +1890,8 @@ const highlight = {
   }
 };
 
-const getIconSizeFromFontSize = fontSize => {
-  if (fontSize <= 14) return 16;
-  if (fontSize <= 16) return 20;
-  return 24;
-};
-const createTypographyIconSizeConfig = (baseAndSmallFontSize, mediumAndWideFontSize) => {
-  const baseAndSmallIconSize = getIconSizeFromFontSize(baseAndSmallFontSize);
-  const mediumAndWideIconSize = getIconSizeFromFontSize(mediumAndWideFontSize);
-  return {
-    baseAndSmall: {
-      iconSize: baseAndSmallIconSize
-    },
-    mediumAndWide: {
-      iconSize: mediumAndWideIconSize
-    }
-  };
-};
 const icon = {
-  defaultSize: 20,
-  // Note: this is based on typography updated sizes, not current https://github.com/ornikar/kitt/pull/2130
-  typographySize: {
-    // also known as xxlarge
-    header1: createTypographyIconSizeConfig(40, 56),
-    // also known as xlarge
-    header2: createTypographyIconSizeConfig(32, 48),
-    // also known as medium
-    header3: createTypographyIconSizeConfig(24, 40),
-    // also known as xsmall
-    header4: createTypographyIconSizeConfig(18, 24),
-    // also known as xxsmall
-    header5: createTypographyIconSizeConfig(18, 18),
-    'body-large': createTypographyIconSizeConfig(18, 24),
-    'body-medium': createTypographyIconSizeConfig(18, 18),
-    body: createTypographyIconSizeConfig(16, 16),
-    'body-small': createTypographyIconSizeConfig(14, 14),
-    'body-xsmall': createTypographyIconSizeConfig(12, 12)
-  }
+  defaultSize: 20
 };
 
 const iconButton = {
@@ -1915,8 +1910,8 @@ const listItem = {
 
 const mapMarker = {
   home: {
-    default: colors.primaryLight,
-    selected: colors.primary,
+    default: deepPurpleColorPalette['grey.9'],
+    selected: deepPurpleColorPalette['grey.7'],
     svg: {
       height: 36
     },
@@ -1926,8 +1921,8 @@ const mapMarker = {
     }
   },
   meetingPoint: {
-    default: colors.black,
-    selected: colors.blackAnthracite,
+    default: deepPurpleColorPalette['deepPurple.8'],
+    selected: deepPurpleColorPalette['deepPurple.6'],
     svg: {
       width: 40,
       height: 43
@@ -2323,6 +2318,183 @@ const skeleton = {
   }
 };
 
+const tabBar = {
+  underline: {
+    default: {
+      active: {
+        color: {
+          default: deepPurpleColorPalette['deepPurple.8'],
+          focused: deepPurpleColorPalette['deepPurple.8'],
+          hovered: deepPurpleColorPalette['deepPurple.8'],
+          pressed: deepPurpleColorPalette['deepPurple.8']
+        },
+        indicator: {
+          backgroundColor: deepPurpleColorPalette['deepPurple.8']
+        }
+      },
+      inactive: {
+        color: {
+          default: deepPurpleColorPalette['grey.5'],
+          focused: deepPurpleColorPalette['grey.5'],
+          hovered: deepPurpleColorPalette['deepPurple.8'],
+          pressed: deepPurpleColorPalette['deepPurple.8']
+        },
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      disabled: {
+        color: {
+          default: deepPurpleColorPalette['grey.3'],
+          focused: deepPurpleColorPalette['grey.3'],
+          hovered: deepPurpleColorPalette['grey.3'],
+          pressed: deepPurpleColorPalette['grey.3']
+        },
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      borderBottomColor: deepPurpleColorPalette['beige.3']
+    },
+    revert: {
+      active: {
+        color: {
+          default: deepPurpleColorPalette['grey.0'],
+          focused: deepPurpleColorPalette['grey.0'],
+          hovered: deepPurpleColorPalette['grey.0'],
+          pressed: deepPurpleColorPalette['grey.0']
+        },
+        indicator: {
+          backgroundColor: deepPurpleColorPalette['grey.0']
+        }
+      },
+      inactive: {
+        color: {
+          default: deepPurpleColorPalette['white-alpha.80'],
+          focused: deepPurpleColorPalette['white-alpha.80'],
+          hovered: deepPurpleColorPalette['grey.0'],
+          pressed: deepPurpleColorPalette['grey.0']
+        },
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      disabled: {
+        color: {
+          default: deepPurpleColorPalette['white-alpha.20'],
+          focused: deepPurpleColorPalette['white-alpha.20'],
+          hovered: deepPurpleColorPalette['white-alpha.20'],
+          pressed: deepPurpleColorPalette['white-alpha.20']
+        },
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      borderBottomColor: deepPurpleColorPalette['white-alpha.20']
+    }
+  },
+  solid: {
+    default: {
+      active: {
+        color: {
+          default: deepPurpleColorPalette['grey.0'],
+          focused: deepPurpleColorPalette['grey.0'],
+          hovered: deepPurpleColorPalette['grey.0'],
+          pressed: deepPurpleColorPalette['grey.0']
+        },
+        backgroundColor: {
+          default: deepPurpleColorPalette['deepPurple.8'],
+          focused: deepPurpleColorPalette['deepPurple.8'],
+          hovered: deepPurpleColorPalette['deepPurple.8'],
+          pressed: deepPurpleColorPalette['deepPurple.8']
+        },
+        borderRadius: 4,
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      inactive: {
+        color: {
+          default: deepPurpleColorPalette['grey.5'],
+          focused: deepPurpleColorPalette['grey.5'],
+          hovered: deepPurpleColorPalette['grey.5'],
+          pressed: deepPurpleColorPalette['grey.5']
+        },
+        backgroundColor: {
+          default: undefined,
+          focused: undefined,
+          hovered: deepPurpleColorPalette['beige.1'],
+          pressed: deepPurpleColorPalette['beige.1']
+        },
+        borderRadius: 4,
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      disabled: {
+        color: {
+          default: deepPurpleColorPalette['grey.3'],
+          focused: deepPurpleColorPalette['grey.3'],
+          hovered: deepPurpleColorPalette['grey.3'],
+          pressed: deepPurpleColorPalette['grey.3']
+        },
+        indicator: {
+          backgroundColor: undefined
+        }
+      }
+    },
+    revert: {
+      active: {
+        color: {
+          default: deepPurpleColorPalette['deepPurple.8'],
+          focused: deepPurpleColorPalette['deepPurple.8'],
+          hovered: deepPurpleColorPalette['deepPurple.8'],
+          pressed: deepPurpleColorPalette['deepPurple.8']
+        },
+        backgroundColor: {
+          default: deepPurpleColorPalette['grey.0'],
+          focused: deepPurpleColorPalette['grey.0'],
+          hovered: deepPurpleColorPalette['grey.0'],
+          pressed: deepPurpleColorPalette['grey.0']
+        },
+        borderRadius: 4,
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      inactive: {
+        color: {
+          default: deepPurpleColorPalette['white-alpha.80'],
+          focused: deepPurpleColorPalette['white-alpha.80'],
+          hovered: deepPurpleColorPalette['white-alpha.80'],
+          pressed: deepPurpleColorPalette['white-alpha.80']
+        },
+        backgroundColor: {
+          default: undefined,
+          focused: undefined,
+          hovered: deepPurpleColorPalette['white-alpha.10'],
+          pressed: deepPurpleColorPalette['white-alpha.10']
+        },
+        borderRadius: 4,
+        indicator: {
+          backgroundColor: undefined
+        }
+      },
+      disabled: {
+        color: {
+          default: deepPurpleColorPalette['white-alpha.20'],
+          focused: deepPurpleColorPalette['white-alpha.20'],
+          hovered: deepPurpleColorPalette['white-alpha.20'],
+          pressed: deepPurpleColorPalette['white-alpha.20']
+        },
+        indicator: {
+          backgroundColor: undefined
+        }
+      }
+    }
+  }
+};
+
 const tag = {
   borderRadius: 16,
   icon: {
@@ -2462,6 +2634,7 @@ const theme = {
   picker,
   shadows,
   skeleton,
+  tabBar,
   tag,
   tooltip,
   typography,
@@ -2874,6 +3047,13 @@ const getTypographyFamilyWithAncestorValue = (type, typographyFamilyInContext) =
   if (typographyFamilyInContext != null) return typographyFamilyInContext;
   throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
 };
+const getTypographyTypeWithAncestorValue = (type, typographyTypeInContext) => {
+  // check if all values are not undefined
+  const isAllValuesUndefined = Object.values(type).every(value => value === undefined);
+
+  // if every values are undefined and we hgave a typographyTypeInContext, we use the parent typography type (typographyTypeInContext)
+  return !!isAllValuesUndefined && !!typographyTypeInContext ? typographyTypeInContext : type;
+};
 
 const TypographyFamilyContext = /*#__PURE__*/createContext(null);
 const TypographyTypeContext = /*#__PURE__*/createContext(null);
@@ -2881,9 +3061,6 @@ const TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
   return useContext(TypographyColorContext);
 }
-function useTypographyAncestorType() {
-  return useContext(TypographyTypeContext);
-}
 const TypographyDefaultColorContext = /*#__PURE__*/createContext(undefined);
 function useTypographyDefaultColor() {
   return useContext(TypographyDefaultColorContext);
@@ -3006,9 +3183,11 @@ function Typography({
 }) {
   const sx = useSx();
   const typographyFamilyInContext = useContext(TypographyFamilyContext);
+  const typographyTypeInContext = useContext(TypographyTypeContext);
   const defaultColor = useTypographyDefaultColor();
   const hasTypographyAncestor = typographyFamilyInContext !== null;
-  const baseOrDefaultToBody = hasTypographyAncestor ? type.base : type.base ?? 'body-m';
+  const typographyType = getTypographyTypeWithAncestorValue(type, typographyTypeInContext);
+  const baseOrDefaultToBody = typographyType.base ?? 'body-m';
   const typographyFamily = getTypographyFamilyWithAncestorValue(baseOrDefaultToBody, typographyFamilyInContext);
   const fontSizeForNativeBase = createNativeBaseFontSize({
     ...type,
@@ -3047,7 +3226,7 @@ function Typography({
   const content = baseOrDefaultToBody ? /*#__PURE__*/jsx(TypographyFamilyContext.Provider, {
     value: typographyFamily,
     children: /*#__PURE__*/jsx(TypographyTypeContext.Provider, {
-      value: type,
+      value: typographyType,
       children: text
     })
   }) : text;
@@ -3148,30 +3327,11 @@ function Icon({
   });
 }
 
-function getIconSizeConfigKeyFromTypeName(breakpointName) {
-  return breakpointName === KittBreakpointNameEnum.BASE || breakpointName === KittBreakpointNameEnum.SMALL ? 'baseAndSmall' : 'mediumAndWide';
-}
-function createNativeBaseIconSize(type) {
-  const typeWithMediumForced = {
-    ...type,
-    medium: type.medium || type.small || type.base
-  };
-  const iconSizeForNativeBase = {};
-  [KittBreakpointNameEnum.BASE, KittBreakpointNameEnum.SMALL, KittBreakpointNameEnum.MEDIUM, KittBreakpointNameEnum.LARGE, KittBreakpointNameEnum.WIDE].forEach(typeName => {
-    const value = typeWithMediumForced[typeName];
-    if (value) {
-      iconSizeForNativeBase[typeName] = `kitt.icon.typographySize.${value}.${getIconSizeConfigKeyFromTypeName(typeName)}.iconSize`;
-    }
-  });
-  return iconSizeForNativeBase;
-}
 function TypographyIconSpecifiedColor({
   color,
   size,
   ...props
 }) {
-  const ancestorType = useTypographyAncestorType();
-  const iconSize = size || (ancestorType ? createNativeBaseIconSize(ancestorType) : undefined);
   const colorValue = getTypographyColorValue(color);
   const sx = useSx();
   const {
@@ -3181,7 +3341,7 @@ function TypographyIconSpecifiedColor({
   });
   return /*#__PURE__*/jsx(Icon, {
     ...props,
-    size: iconSize,
+    size: size,
     color: colorStyleValue
   });
 }
@@ -4012,7 +4172,12 @@ function NativeOpacityAnimation$2({
       duration,
       easing
     } = theme.kitt.cardModal.animation.overlay;
-    const [x1, y1, x2, y2] = easing;
+    const {
+      x1,
+      y1,
+      x2,
+      y2
+    } = easing;
     return {
       opacity: withTiming(visible ? 1 : 0, {
         duration,
@@ -4050,7 +4215,12 @@ function NativeRotationAnimation$1({
       duration,
       easing
     } = theme.kitt.cardModal.animation.content;
-    const [x1, y1, x2, y2] = easing;
+    const {
+      x1,
+      y1,
+      x2,
+      y2
+    } = easing;
     rotation.value = withTiming(visible ? 0 : 5, {
       duration,
       easing: Easing$1.bezier(x1, y1, x2, y2)
@@ -4623,7 +4793,12 @@ function NativeOpacityAnimation$1({
       duration,
       easing
     } = theme.kitt.dialogModal.animation.overlay;
-    const [x1, y1, x2, y2] = easing;
+    const {
+      x1,
+      y1,
+      x2,
+      y2
+    } = easing;
     return {
       opacity: withTiming(visible ? 1 : 0, {
         duration,
@@ -4661,7 +4836,12 @@ function NativeRotationAnimation({
       duration,
       easing
     } = theme.kitt.dialogModal.animation.content;
-    const [x1, y1, x2, y2] = easing;
+    const {
+      x1,
+      y1,
+      x2,
+      y2
+    } = easing;
     rotation.value = withTiming(visible ? 0 : 5, {
       duration,
       easing: Easing$1.bezier(x1, y1, x2, y2)
@@ -6283,7 +6463,7 @@ function DocumentPicker({
         ...documentPickerOptions,
         multiple: false
       });
-      if (!result.canceled && result.assets[0].file) {
+      if (!result.canceled && result.assets[0]?.file) {
         onDocumentUpload(result.assets[0].file);
       }
     },
@@ -6310,7 +6490,7 @@ function ImagePicker({
           ...imagePickerOptions,
           allowsMultipleSelection: false
         });
-        if (!result.canceled) {
+        if (!result.canceled && result.assets[0]) {
           onImageSelected(result.assets[0]);
         }
       },
@@ -6759,17 +6939,17 @@ function GoogleMapsAutocompleteProvider({
         dispatch({
           type: 'search-error'
         });
-        return;
       }
-
-      // We cache the results to avoid calling the API again if the user types the same value
-      searchResultsCache.current[value] = results;
-      dispatch({
-        type: 'search-success',
-        payload: {
-          results
-        }
-      });
+      if (results) {
+        // We cache the results to avoid calling the API again if the user types the same value
+        searchResultsCache.current[value] = results;
+        dispatch({
+          type: 'search-success',
+          payload: {
+            results
+          }
+        });
+      }
     } catch (error) {
       dispatch({
         type: 'search-error'
@@ -7847,7 +8027,12 @@ function NativeOpacityAnimation({
       duration,
       easing
     } = theme.kitt.fullscreenModal.animation.overlay;
-    const [x1, y1, x2, y2] = easing;
+    const {
+      x1,
+      y1,
+      x2,
+      y2
+    } = easing;
     return {
       opacity: withTiming(visible ? 1 : 0, {
         duration,
@@ -7886,7 +8071,12 @@ function NativeSlideInAnimation({
       duration,
       easing
     } = theme.kitt.fullscreenModal.animation.content;
-    const [x1, y1, x2, y2] = easing;
+    const {
+      x1,
+      y1,
+      x2,
+      y2
+    } = easing;
     return {
       transform: [{
         translateY: withTiming(visible ? 0 : wHeight, {
@@ -8544,12 +8734,11 @@ const SvgPinMarkerinline = props => /*#__PURE__*/jsxs("svg", {
   width: 34,
   height: 36,
   viewBox: "0 0 34 36",
-  fill: "none",
+  fill: "currentColor",
   xmlns: "http://www.w3.org/2000/svg",
   ...props,
   children: [/*#__PURE__*/jsx("path", {
     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",
-    fill: "#7B66FF",
     stroke: "#fff"
   }), /*#__PURE__*/jsx("path", {
     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",
@@ -8574,6 +8763,13 @@ const SvgShadowinline = props => /*#__PURE__*/jsx("svg", {
   })
 });
 
+let MapMarkerVariantEnum = /*#__PURE__*/function (MapMarkerVariantEnum) {
+  MapMarkerVariantEnum["HOME"] = "home";
+  MapMarkerVariantEnum["MEETING_POINT"] = "meetingPoint";
+  MapMarkerVariantEnum["CLOSE_MEETING_POINT"] = "closeMeetingPoint";
+  return MapMarkerVariantEnum;
+}({});
+
 const SCALE_DURATION = 300;
 const TRANSLATE_Y_DURATION = 150;
 const useNativeAnimation = ({
@@ -8630,18 +8826,12 @@ const getBackgroundColor = ({
   isSelected,
   variant
 }) => {
-  if (variant === 'home') {
+  if (variant === MapMarkerVariantEnum.HOME || variant === MapMarkerVariantEnum.CLOSE_MEETING_POINT) {
     return isSelected || isHovered ? theme.mapMarker.home.selected : theme.mapMarker.home.default;
   }
   return isSelected || isHovered ? theme.mapMarker.meetingPoint.selected : theme.mapMarker.meetingPoint.default;
 };
 
-let MapMarkerVariantEnum = /*#__PURE__*/function (MapMarkerVariantEnum) {
-  MapMarkerVariantEnum["HOME"] = "home";
-  MapMarkerVariantEnum["MEETING_POINT"] = "meetingPoint";
-  MapMarkerVariantEnum["CLOSE_MEETING_POINT"] = "closeMeetingPoint";
-  return MapMarkerVariantEnum;
-}({});
 function StaticMapMarker$1({
   variant,
   isHovered,
@@ -9554,6 +9744,148 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
               backgroundColor: theme.picker.web.optionsContainer.backgroundColor
             }
           }
+        },
+        tabBar: {
+          underline: {
+            default: {
+              active: {
+                color: {
+                  default: theme.tabBar.underline.default.active.color.default,
+                  focused: theme.tabBar.underline.default.active.color.focused,
+                  hovered: theme.tabBar.underline.default.active.color.hovered,
+                  pressed: theme.tabBar.underline.default.active.color.pressed
+                },
+                indicator: {
+                  backgroundColor: theme.tabBar.underline.default.active.indicator.backgroundColor
+                }
+              },
+              inactive: {
+                color: {
+                  default: theme.tabBar.underline.default.inactive.color.default,
+                  focused: theme.tabBar.underline.default.inactive.color.focused,
+                  hovered: theme.tabBar.underline.default.inactive.color.hovered,
+                  pressed: theme.tabBar.underline.default.inactive.color.pressed
+                }
+              },
+              disabled: {
+                color: {
+                  default: theme.tabBar.underline.default.disabled.color.default,
+                  focused: theme.tabBar.underline.default.disabled.color.focused,
+                  hovered: theme.tabBar.underline.default.disabled.color.hovered,
+                  pressed: theme.tabBar.underline.default.disabled.color.pressed
+                }
+              },
+              borderBottomColor: theme.tabBar.underline.default.borderBottomColor
+            },
+            revert: {
+              active: {
+                color: {
+                  default: theme.tabBar.underline.revert.active.color.default,
+                  focused: theme.tabBar.underline.revert.active.color.focused,
+                  hovered: theme.tabBar.underline.revert.active.color.hovered,
+                  pressed: theme.tabBar.underline.revert.active.color.pressed
+                },
+                indicator: {
+                  backgroundColor: theme.tabBar.underline.revert.active.indicator.backgroundColor
+                }
+              },
+              inactive: {
+                color: {
+                  default: theme.tabBar.underline.revert.inactive.color.default,
+                  focused: theme.tabBar.underline.revert.inactive.color.focused,
+                  hovered: theme.tabBar.underline.revert.inactive.color.hovered,
+                  pressed: theme.tabBar.underline.revert.inactive.color.pressed
+                }
+              },
+              disabled: {
+                color: {
+                  default: theme.tabBar.underline.revert.disabled.color.default,
+                  focused: theme.tabBar.underline.revert.disabled.color.focused,
+                  hovered: theme.tabBar.underline.revert.disabled.color.hovered,
+                  pressed: theme.tabBar.underline.revert.disabled.color.pressed
+                }
+              },
+              borderBottomColor: theme.tabBar.underline.revert.borderBottomColor
+            }
+          },
+          solid: {
+            default: {
+              active: {
+                color: {
+                  default: theme.tabBar.solid.default.active.color.default,
+                  focused: theme.tabBar.solid.default.active.color.focused,
+                  hovered: theme.tabBar.solid.default.active.color.hovered,
+                  pressed: theme.tabBar.solid.default.active.color.pressed
+                },
+                backgroundColor: {
+                  default: theme.tabBar.solid.default.active.backgroundColor?.default,
+                  focused: theme.tabBar.solid.default.active.backgroundColor?.focused,
+                  hovered: theme.tabBar.solid.default.active.backgroundColor?.hovered,
+                  pressed: theme.tabBar.solid.default.active.backgroundColor?.pressed
+                }
+              },
+              inactive: {
+                color: {
+                  default: theme.tabBar.solid.default.inactive.color.default,
+                  focused: theme.tabBar.solid.default.inactive.color.focused,
+                  hovered: theme.tabBar.solid.default.inactive.color.hovered,
+                  pressed: theme.tabBar.solid.default.inactive.color.pressed
+                },
+                backgroundColor: {
+                  default: theme.tabBar.solid.default.inactive.backgroundColor?.default,
+                  focused: theme.tabBar.solid.default.inactive.backgroundColor?.focused,
+                  hovered: theme.tabBar.solid.default.inactive.backgroundColor?.hovered,
+                  pressed: theme.tabBar.solid.default.inactive.backgroundColor?.pressed
+                }
+              },
+              disabled: {
+                color: {
+                  default: theme.tabBar.solid.default.disabled.color.default,
+                  focused: theme.tabBar.solid.default.disabled.color.focused,
+                  hovered: theme.tabBar.solid.default.disabled.color.hovered,
+                  pressed: theme.tabBar.solid.default.disabled.color.pressed
+                }
+              }
+            },
+            revert: {
+              active: {
+                color: {
+                  default: theme.tabBar.solid.revert.active.color.default,
+                  focused: theme.tabBar.solid.revert.active.color.focused,
+                  hovered: theme.tabBar.solid.revert.active.color.hovered,
+                  pressed: theme.tabBar.solid.revert.active.color.pressed
+                },
+                backgroundColor: {
+                  default: theme.tabBar.solid.revert.active.backgroundColor?.default,
+                  focused: theme.tabBar.solid.revert.active.backgroundColor?.focused,
+                  hovered: theme.tabBar.solid.revert.active.backgroundColor?.hovered,
+                  pressed: theme.tabBar.solid.revert.active.backgroundColor?.pressed
+                }
+              },
+              inactive: {
+                color: {
+                  default: theme.tabBar.solid.revert.inactive.color.default,
+                  focused: theme.tabBar.solid.revert.inactive.color.focused,
+                  hovered: theme.tabBar.solid.revert.inactive.color.hovered,
+                  pressed: theme.tabBar.solid.revert.inactive.color.pressed
+                },
+                backgroundColor: {
+                  default: theme.tabBar.solid.revert.inactive.backgroundColor?.default,
+                  focused: theme.tabBar.solid.revert.inactive.backgroundColor?.focused,
+                  hovered: theme.tabBar.solid.revert.inactive.backgroundColor?.hovered,
+                  pressed: theme.tabBar.solid.revert.inactive.backgroundColor?.pressed
+                }
+              },
+              disabled: {
+                color: {
+                  default: theme.tabBar.solid.revert.disabled.color.default,
+                  focused: theme.tabBar.solid.revert.disabled.color.focused,
+                  hovered: theme.tabBar.solid.revert.disabled.color.hovered,
+                  pressed: theme.tabBar.solid.revert.disabled.color.pressed
+                }
+              }
+            }
+          }
         }
       },
       app: appTheme?.colors
@@ -9630,6 +9962,44 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         highlight: {
           borderRadius: theme.highlight.borderRadius
         },
+        tabBar: {
+          underline: {
+            default: {
+              active: {
+                borderRadius: theme.tabBar.underline.default.active.borderRadius
+              },
+              inactive: {
+                borderRadius: theme.tabBar.underline.default.inactive.borderRadius
+              }
+            },
+            revert: {
+              active: {
+                borderRadius: theme.tabBar.underline.revert.active.borderRadius
+              },
+              inactive: {
+                borderRadius: theme.tabBar.underline.revert.inactive.borderRadius
+              }
+            }
+          },
+          solid: {
+            default: {
+              active: {
+                borderRadius: theme.tabBar.solid.default.active.borderRadius
+              },
+              inactive: {
+                borderRadius: theme.tabBar.solid.default.inactive.borderRadius
+              }
+            },
+            revert: {
+              active: {
+                borderRadius: theme.tabBar.solid.revert.active.borderRadius
+              },
+              inactive: {
+                borderRadius: theme.tabBar.solid.revert.inactive.borderRadius
+              }
+            }
+          }
+        },
         tag: {
           borderRadius: theme.tag.borderRadius
         },
@@ -12465,125 +12835,132 @@ const StoryGrid = {
   Col: StoryGridCol
 };
 
-function useTabBarItemColor(color, isActive) {
-  const {
-    kitt: kittTheme
-  } = useKittTheme();
-  switch (color) {
-    case 'black':
-      {
-        return isActive ? kittTheme.colors.primary : kittTheme.colors.blackLight;
-      }
-    case 'white':
-      {
-        return isActive ? kittTheme.palettes.deepPurple.white : kittTheme.palettes.deepPurple['white-alpha.80'];
-      }
-    default:
-      {
-        return isActive ? kittTheme.colors.primary : kittTheme.colors.blackLight;
-      }
-  }
-}
-function useTabBarIndicatorColor(color, isActive) {
-  const {
-    kitt: kittTheme
-  } = useKittTheme();
-  switch (color) {
-    case 'black':
-      {
-        return isActive ? kittTheme.colors.primary : kittTheme.palettes.deepPurple.transparent;
-      }
-    case 'white':
-      {
-        return isActive ? kittTheme.palettes.deepPurple.white : kittTheme.palettes.deepPurple.transparent;
-      }
-    default:
-      {
-        return isActive ? kittTheme.colors.primary : kittTheme.palettes.deepPurple.transparent;
-      }
-  }
-}
+const getVariantFromColor = color => {
+  if (color === 'white') return 'revert';
+  return 'default';
+};
+const getTabBarItemActiveState = (isActive, disabled) => {
+  if (disabled) return 'disabled';
+  if (isActive) return 'active';
+  return 'inactive';
+};
+const getTabBarItemState = (isHovered, isPressed, isFocused) => {
+  if (isHovered) return 'hovered';
+  if (isPressed) return 'pressed';
+  if (isFocused) return 'focused';
+  return 'default';
+};
 function TabBarItem({
   name,
   icon,
-  color = 'black',
+  variant = 'default',
+  type = 'underline',
+  color,
   testID,
+  disabled,
   isActive = false,
+  isFocusedInternal = false,
+  isHoveredInternal = false,
+  isPressedInternal = false,
   onPress
 }) {
-  const typographyColor = useTabBarItemColor(color, isActive);
-  const indicatorColor = useTabBarIndicatorColor(color, isActive);
+  // Keep backward compatibility with color property
+  const definedVariant = color ? getVariantFromColor(color) : variant;
+  const activeState = getTabBarItemActiveState(isActive, disabled);
+  const baseTheme = `kitt.tabBar.${type}.${definedVariant}.${activeState}`;
   return /*#__PURE__*/jsx(Pressable, {
+    disabled: disabled,
     testID: testID,
     onPress: onPress,
-    children: /*#__PURE__*/jsxs(HStack, {
-      height: 56,
-      alignItems: "center",
-      position: "relative",
-      children: [icon ? /*#__PURE__*/jsx(View, {
-        marginRight: "kitt.1",
-        children: /*#__PURE__*/jsx(TypographyIcon, {
-          color: typographyColor,
-          icon: icon
-        })
-      }) : null, /*#__PURE__*/jsx(Typography.Text, {
-        numberOfLines: 1,
-        color: typographyColor,
-        variant: isActive ? 'bold' : undefined,
-        children: name
-      }), /*#__PURE__*/jsx(View, {
-        borderRadius: 100,
-        backgroundColor: indicatorColor,
-        position: "absolute",
-        bottom: -1 // in order to be over tab bar's border bottom
-        ,
-        width: "100%",
-        height: 4
-      })]
-    })
+    children: ({
+      isHovered,
+      isPressed,
+      isFocused
+    }) => {
+      const state = getTabBarItemState(isHovered || isHoveredInternal, isPressed || isPressedInternal, isFocused || isFocusedInternal);
+      return /*#__PURE__*/jsxs(HStack, {
+        alignItems: "center",
+        position: "relative",
+        paddingY: "kitt.2",
+        paddingRight: "kitt.2",
+        paddingLeft: icon ? undefined : 'kitt.2',
+        backgroundColor: `${baseTheme}.backgroundColor.${state}`,
+        borderRadius: `${baseTheme}.borderRadius`,
+        children: [icon ? /*#__PURE__*/jsx(View, {
+          marginRight: "kitt.2",
+          children: /*#__PURE__*/jsx(TypographyIcon, {
+            color: `${baseTheme}.color.${state}`,
+            icon: icon
+          })
+        }) : null, /*#__PURE__*/jsx(Typography.Text, {
+          base: "label-large",
+          numberOfLines: 1,
+          color: `${baseTheme}.color.${state}`,
+          children: name
+        }), type !== 'solid' ? /*#__PURE__*/jsx(View, {
+          backgroundColor: `${baseTheme}.indicator.backgroundColor`,
+          position: "absolute",
+          bottom: -1 // in order to be over tab bar's border bottom
+          ,
+          left: 0,
+          right: 0,
+          height: 2
+        }) : null]
+      });
+    }
   });
 }
 
 function TabBar({
   tabs,
-  color = 'black',
+  variant = 'default',
+  type = 'underline',
   align = 'left',
+  color,
   activeTabIndex = 0,
   renderTabItem,
-  onChangeTab,
-  ...props
+  onChangeTab
 }) {
   const sx = useSx();
-  const {
-    kitt: kittTheme
-  } = useKittTheme();
   const tabItems = tabs.map((tab, index) => renderTabItem({
     tab,
     index,
     isActive: activeTabIndex === index
   }));
-  const scrollViewStyles = sx({
+  let styles = {
     justifyContent: align,
     paddingRight: align === 'center' ? 'kitt.2' : 'kitt.12',
-    minWidth: '100%',
-    borderBottomWidth: 1,
-    borderBottomColor: kittTheme.palettes.deepPurple['beige.2']
-  });
+    minWidth: '100%'
+  };
+
+  // Keep backward compatibility with color property
+  const definedVariant = color ? getVariantFromColor(color) : variant;
+  if (type !== 'solid') {
+    styles = {
+      ...styles,
+      borderBottomWidth: 1,
+      borderBottomColor: `kitt.tabBar.${type}.${definedVariant}.borderBottomColor`
+    };
+  }
+  const scrollViewStyles = sx(styles);
+  const space = type === 'solid' ? 'kitt.2' : 'kitt.4';
   return /*#__PURE__*/jsx(ScrollView, {
     horizontal: true,
     showsHorizontalScrollIndicator: false,
     contentContainerStyle: scrollViewStyles,
     children: /*#__PURE__*/jsx(HStack, {
-      space: align === 'center' ? 'kitt.16' : 'kitt.4',
-      ...props,
+      space: align === 'center' ? 'kitt.16' : space,
       children: Children.map(tabItems, (child, index) => {
         const tab = tabs[index];
+        if (!tab) throw new Error(`TabBar: tab is undefined at index ${index}`);
         return /*#__PURE__*/jsx(View, {
           children: /*#__PURE__*/cloneElement(child, {
             color,
+            variant: definedVariant,
+            type,
             onPress: event => {
               onChangeTab({
-                tab: tabs[index],
+                tab,
                 index
               });
               child.props.onPress?.(event);