@ornikar/kitt-universal 27.5.1-canary.4d3ec9b2bbb3371c254ae88141f81bb445a59f73.0 → 27.6.0

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

@@ -1886,43 +1886,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 = {
@@ -2349,6 +2314,183 @@ const skeleton$1 = {
   }
 };
 
+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: {
@@ -2488,6 +2630,7 @@ const theme = {
   picker,
   shadows,
   skeleton: skeleton$1,
+  tabBar,
   tag,
   tooltip,
   typography,
@@ -2911,6 +3054,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);
@@ -2918,9 +3068,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);
@@ -3043,9 +3190,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,
@@ -3084,7 +3233,7 @@ function Typography({
   const content = baseOrDefaultToBody ? /*#__PURE__*/jsx(TypographyFamilyContext.Provider, {
     value: typographyFamily,
     children: /*#__PURE__*/jsx(TypographyTypeContext.Provider, {
-      value: type,
+      value: typographyType,
       children: text
     })
   }) : text;
@@ -3185,30 +3334,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 {
@@ -3218,7 +3348,7 @@ function TypographyIconSpecifiedColor({
   });
   return /*#__PURE__*/jsx(Icon, {
     ...props,
-    size: iconSize,
+    size: size,
     color: colorStyleValue
   });
 }
@@ -8799,6 +8929,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
@@ -8875,6 +9147,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
         },
@@ -10921,7 +11231,7 @@ function Picker({
             paddingY: "kitt.2",
             children: childrenArray.map((child, index) => {
               const currentValue = items[index];
-              if (!currentValue) throw new Error(`Picker: No value found for item at index ${index}`);
+              if (currentValue === undefined) throw new Error(`Picker: No value found for item at index ${index}`);
               const {
                 onClick,
                 'aria-selected': ariaSelected,
@@ -11618,123 +11928,129 @@ 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,