@basic-ui/material 1.0.0-alpha.24 → 1.0.0-alpha.26

package/build/cjs/index.js

@@ -192,7 +192,7 @@ const theme = {
     'title-small': font('plain', 20, 14, 0.1, 500),
     'label-large': font('plain', 20, 14, 0.1, 500),
     'label-medium': font('plain', 16, 12, 0.5, 500),
-    'label-small': font('plain', 16, 11, 0.5, 500),
+    'label-small': font('plain', 15, 11, 0.5, 500),
     'body-large': font('plain', 24, 16, 0.5, 400),
     'body-medium': font('plain', 20, 14, 0.25, 400),
     'body-small': font('plain', 16, 12, 0.4, 400),
@@ -1556,6 +1556,7 @@ const Badge = /*#__PURE__*/react$1.forwardRef(function Badge(props, forwardedRef
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
+      fontVariantNumeric: 'tabular-nums',
       ...__css
     },
     ...otherProps
@@ -5356,7 +5357,7 @@ const TabIndicator = /*#__PURE__*/react$1.forwardRef(function TabIndicator(props
       currentIndicator.current = ref.current;
     }
   }, [selected, variant]);
-  react$1.useEffect(() => {
+  useEnhancedEffect(() => {
     if (variant === 'secondary') {
       return;
     }
@@ -5484,6 +5485,10 @@ const TabInner = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRe
     variant
   } = useTabListContext();
   const labelRef = react$1.useRef(null);
+  const [mounted, setMounted] = react$1.useState(false);
+  react$1.useEffect(() => {
+    setMounted(true);
+  }, []);
   return /*#__PURE__*/jsxRuntime.jsxs(Box, {
     position: "relative",
     display: "flex",
@@ -5497,6 +5502,7 @@ const TabInner = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRe
       disabled: disabled,
       __css: {
         px: 3,
+        py: 0,
         color: selected ? selectedTextColor || indicatorColor : alpha(textColor, disabled ? 0.37 : 0.7),
         minHeight: "3rem",
         height: '100%',
@@ -5511,16 +5517,31 @@ const TabInner = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRe
       ...otherProps,
       children: /*#__PURE__*/jsxRuntime.jsx(Text, {
         as: "span",
-        display: "inline-flex",
-        justifyContent: "center",
-        alignItems: "center",
         variant: "title-small",
-        color: "inherit",
-        height: "100%",
-        textAlign: "center",
-        position: "relative",
-        flexDirection: "column",
         ref: labelRef,
+        __css: {
+          display: 'inline-flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          color: 'inherit',
+          height: '100%',
+          textAlign: 'center',
+          position: 'relative',
+          flexDirection: 'column',
+          ...(variant === 'primary' && selected && !mounted && {
+            '&::before': {
+              content: '""',
+              bg: indicatorColor,
+              position: 'absolute',
+              bottom: 0,
+              zIndex: 1,
+              width: '100%',
+              height: "0.1875rem",
+              borderTopLeftRadius: "0.1875rem",
+              borderTopRightRadius: "0.1875rem"
+            }
+          })
+        },
         children: children
       })
     }), /*#__PURE__*/jsxRuntime.jsx(TabIndicator, {
@@ -5819,6 +5840,7 @@ exports.useAppBarContext = useAppBarContext;
 exports.useRipple = useRipple;
 exports.useRippleHandlers = useRippleHandlers;
 exports.useRippleSurface = useRippleSurface;
+exports.useSnackbarAnimation = useSnackbarAnimation;
 exports.useStack = useStack;
 exports.useStackItem = useStackItem;
 exports.useTabIndicatorContext = useTabIndicatorContext;