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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.24",
+  "version": "1.0.0-alpha.25",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.49",
+    "@basic-ui/core": "^0.0.50",
     "@basic-ui/dynamic-theme": "^0.0.8",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
@@ -52,5 +52,5 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "286cd71d6ab3e7041264d460acae3e03f0b951b8"
+  "gitHead": "0d58f1872e2d6e046d1f17296322c9a6588a8a57"
 }

package/src/Badge/Badge.tsx

@@ -38,6 +38,7 @@ export const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
         display: 'inline-flex',
         alignItems: 'center',
         justifyContent: 'center',
+        fontVariantNumeric: 'tabular-nums',
         ...__css,
       }}
       {...otherProps}

package/src/Tab/Tab.tsx

@@ -1,5 +1,5 @@
 import type { ButtonHTMLAttributes } from 'react';
-import { useRef, forwardRef } from 'react';
+import { useState, useEffect, useRef, forwardRef } from 'react';
 import type { TabProps as TabPropsCore } from '@basic-ui/core';
 import { Tab as TabCore } from '@basic-ui/core';
 import { rem } from 'polished';
@@ -24,6 +24,11 @@ const TabInner = forwardRef<
     useTabListContext();
   const labelRef = useRef<HTMLParagraphElement>(null);
 
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   return (
     <Box
       position="relative"
@@ -44,6 +49,7 @@ const TabInner = forwardRef<
         disabled={disabled}
         __css={{
           px: 3,
+          py: 0,
           color: selected
             ? selectedTextColor || indicatorColor
             : alpha(textColor, disabled ? 0.37 : 0.7),
@@ -61,16 +67,33 @@ const TabInner = forwardRef<
       >
         <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: rem(3),
+                  borderTopLeftRadius: rem(3),
+                  borderTopRightRadius: rem(3),
+                },
+              }),
+          }}
         >
           {children}
         </Text>

package/src/TabIndicator/TabIndicator.tsx

@@ -79,7 +79,7 @@ export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
       }
     }, [selected, variant]);
 
-    useEffect(() => {
+    useEnhancedEffect(() => {
       if (variant === 'secondary') {
         return;
       }

package/src/theme/theme.ts

@@ -176,7 +176,7 @@ export 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),