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

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),
@@ -1530,10 +1530,35 @@ const Alert = /*#__PURE__*/react$1.forwardRef(function Alert(props, forwardedRef
 });
 
 const Badge = /*#__PURE__*/react$1.forwardRef(function Badge(props, forwardedRef) {
-  const { ...otherProps
+  const {
+    size = 'large',
+    __css,
+    ...otherProps
   } = props;
   return /*#__PURE__*/jsxRuntime.jsx(Box, {
     ref: forwardedRef,
+    __css: {
+      variant: 'text.label-small',
+      bg: 'error',
+      color: 'on.error',
+      borderRadius: 'full',
+      ...(size === 'small' ? {
+        maxWidth: "0.375rem",
+        maxHeight: "0.375rem",
+        minWidth: "0.375rem",
+        minHeight: "0.375rem"
+      } : {
+        px: 1,
+        maxHeight: "1rem",
+        minWidth: "1rem",
+        minHeight: "1rem"
+      }),
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontVariantNumeric: 'tabular-nums',
+      ...__css
+    },
     ...otherProps
   });
 });
@@ -3853,7 +3878,6 @@ const NavRailItem = /*#__PURE__*/react$1.forwardRef(function NavRailItem(props,
       backgroundColor: 'transparent',
       margin: 0,
       padding: 0,
-      px: "0.75rem",
       minHeight: "3.75rem",
       height: "3.75rem",
       cursor: 'pointer',
@@ -5280,54 +5304,110 @@ const {
 } = TabIndicatorContext;
 const useTabIndicatorContext = () => react$1.useContext(TabIndicatorContext);
 
+const WIDTH_PROPERTY_NAME = '--indicator-width';
+const SCALE_PROPERTY_NAME = '--indicator-scale';
 const useEnhancedEffect = typeof window !== 'undefined' ? react$1.useLayoutEffect : react$1.useEffect;
 const TabIndicator = /*#__PURE__*/react$1.forwardRef(function TabIndicator(props, forwardedRef) {
   const {
     as = 'span',
     selected,
     color = 'primary',
+    variant,
+    labelRef,
     ...otherProps
   } = props;
   const ref = react$1.useRef(null);
   const {
     currentIndicator
   } = useTabIndicatorContext();
+  const resizeObserverRef = react$1.useRef();
   useEnhancedEffect(() => {
     if (selected && ref.current) {
       if (currentIndicator.current !== null) {
         // We are switching indicator, let's slide!
         const previousClientRect = currentIndicator.current.getBoundingClientRect();
         const currentClientRect = ref.current.getBoundingClientRect();
-        const widthDelta = previousClientRect.width / currentClientRect.width;
         const xPosition = previousClientRect.left - currentClientRect.left;
         const prevTransition = ref.current.style.transition;
         const prevTransform = ref.current.style.transform;
         ref.current.style.transition = 'none';
-        ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`; // Force repaint before updating classes and transform to ensure the transform properly takes effect
+
+        if (variant === 'primary') {
+          const prevWidth = currentIndicator.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);
+          const currentWidth = ref.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);
+          const widthDelta = String(parseFloat(prevWidth) / parseFloat(currentWidth));
+          ref.current.style.setProperty(SCALE_PROPERTY_NAME, widthDelta);
+          ref.current.style.transform = `translateX(${xPosition}px)`;
+        } else {
+          const widthDelta = previousClientRect.width / currentClientRect.width;
+          ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;
+        } // Force repaint before updating classes and transform to ensure the transform properly takes effect
+
 
         ref.current.getBoundingClientRect(); // Restore and let transition do it's magic
 
         ref.current.style.transition = prevTransition;
         ref.current.style.transform = prevTransform;
+
+        if (variant === 'primary') {
+          ref.current.style.setProperty(SCALE_PROPERTY_NAME, '1');
+        }
       }
 
       currentIndicator.current = ref.current;
     }
-  }, [selected]);
+  }, [selected, variant]);
+  useEnhancedEffect(() => {
+    if (variant === 'secondary') {
+      return;
+    }
+
+    if (labelRef.current && ref.current) {
+      const width = labelRef.current.getBoundingClientRect().width;
+      ref.current.style.setProperty(WIDTH_PROPERTY_NAME, `${width}px`);
+
+      if (typeof ResizeObserver === 'function') {
+        resizeObserverRef.current ??= new ResizeObserver(([entry]) => {
+          if (ref.current) {
+            ref.current.style.setProperty(WIDTH_PROPERTY_NAME, `${entry.contentRect.width}px`);
+          }
+        });
+        resizeObserverRef.current?.observe(labelRef.current);
+        return () => resizeObserverRef.current?.disconnect();
+      }
+    }
+  }, [labelRef, variant]);
   return /*#__PURE__*/jsxRuntime.jsx(Box, {
     as: as,
     ref: core.assignMultipleRefs(ref, forwardedRef),
-    width: "100%",
-    height: "0.125rem",
     __css: {
       bg: color,
       position: 'absolute',
       bottom: 0,
       transform: `scale(1)`,
       opacity: selected ? 1 : 0,
-      transformOrigin: 'left',
       transition: `transform .25s ${EASING_STANDARD}`,
-      zIndex: 1
+      zIndex: 1,
+      ...(variant === 'secondary' ? {
+        width: '100%',
+        height: "0.125rem"
+      } : {
+        width: '100%',
+        '&::before': {
+          content: '""',
+          width: `var(${WIDTH_PROPERTY_NAME}, 0px)`,
+          height: "0.1875rem",
+          borderTopLeftRadius: "0.1875rem",
+          borderTopRightRadius: "0.1875rem",
+          bg: color,
+          position: 'absolute',
+          transformOrigin: 'center',
+          bottom: 0,
+          left: '50%',
+          transition: `inherit`,
+          transform: `translateX(-50%) scaleX(var(${SCALE_PROPERTY_NAME}, 1))}`
+        }
+      })
     },
     ...otherProps
   });
@@ -5335,7 +5415,8 @@ const TabIndicator = /*#__PURE__*/react$1.forwardRef(function TabIndicator(props
 
 const TabListContext = /*#__PURE__*/react$1.createContext({
   indicatorColor: 'primary',
-  textColor: 'on.surface'
+  textColor: 'on.surface',
+  variant: 'secondary'
 });
 const {
   Provider: TabListProvider
@@ -5364,6 +5445,7 @@ const TabList = /*#__PURE__*/react$1.forwardRef(function TabList(props, forwarde
     indicatorColor = 'primary',
     textColor = 'on.surface',
     selectedTextColor,
+    variant = 'secondary',
     ...otherProps
   } = props;
   const currentIndicator = react$1.useRef(null);
@@ -5371,7 +5453,8 @@ const TabList = /*#__PURE__*/react$1.forwardRef(function TabList(props, forwarde
     value: {
       indicatorColor,
       textColor,
-      selectedTextColor
+      selectedTextColor,
+      variant
     },
     children: /*#__PURE__*/jsxRuntime.jsx(TabIndicatorProvider, {
       value: {
@@ -5398,13 +5481,20 @@ const TabInner = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRe
   const {
     textColor,
     indicatorColor,
-    selectedTextColor
+    selectedTextColor,
+    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",
     flex: 1,
     flexDirection: "column",
+    height: "100%",
     children: [/*#__PURE__*/jsxRuntime.jsx(RippleBox, {
       as: innerAs,
       ref: forwardedRef,
@@ -5412,9 +5502,10 @@ const TabInner = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRe
       disabled: disabled,
       __css: {
         px: 3,
-        position: 'relative',
+        py: 0,
         color: selected ? selectedTextColor || indicatorColor : alpha(textColor, disabled ? 0.37 : 0.7),
-        height: "3rem",
+        minHeight: "3rem",
+        height: '100%',
         backgroundColor: 'transparent',
         border: 'none',
         ':focus': {
@@ -5426,15 +5517,38 @@ const TabInner = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRe
       ...otherProps,
       children: /*#__PURE__*/jsxRuntime.jsx(Text, {
         as: "span",
-        variant: "label-large",
-        color: "inherit",
-        height: "100%",
-        textAlign: "center",
+        variant: "title-small",
+        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, {
       selected: selected,
-      color: indicatorColor
+      color: indicatorColor,
+      variant: variant,
+      labelRef: labelRef
     })]
   });
 });