@basic-ui/material 1.0.0-alpha.24 → 1.0.0-alpha.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/index.js +31 -10
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Badge/Badge.js +2 -1
- package/build/esm/Badge/Badge.js.map +1 -1
- package/build/esm/Chip/ButtonChip.d.ts +1 -1
- package/build/esm/Tab/Tab.d.ts +1 -1
- package/build/esm/Tab/Tab.js +34 -9
- package/build/esm/Tab/Tab.js.map +1 -1
- package/build/esm/TabIndicator/TabIndicator.js +1 -1
- package/build/esm/TabIndicator/TabIndicator.js.map +1 -1
- package/build/esm/theme/theme.js +1 -1
- package/build/esm/theme/theme.js.map +1 -1
- package/build/tsconfig-build.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/Badge/Badge.tsx +1 -0
- package/src/Tab/Tab.tsx +32 -9
- package/src/TabIndicator/TabIndicator.tsx +1 -1
- package/src/theme/theme.ts +1 -1
package/build/cjs/index.js
CHANGED
|
@@ -192,7 +192,7 @@ const theme = {
|
|
|
192
192
|
'title-small': font('plain', 20, 14, 0.1, 500),
|
|
193
193
|
'label-large': font('plain', 20, 14, 0.1, 500),
|
|
194
194
|
'label-medium': font('plain', 16, 12, 0.5, 500),
|
|
195
|
-
'label-small': font('plain',
|
|
195
|
+
'label-small': font('plain', 15, 11, 0.5, 500),
|
|
196
196
|
'body-large': font('plain', 24, 16, 0.5, 400),
|
|
197
197
|
'body-medium': font('plain', 20, 14, 0.25, 400),
|
|
198
198
|
'body-small': font('plain', 16, 12, 0.4, 400),
|
|
@@ -1556,6 +1556,7 @@ const Badge = /*#__PURE__*/react$1.forwardRef(function Badge(props, forwardedRef
|
|
|
1556
1556
|
display: 'inline-flex',
|
|
1557
1557
|
alignItems: 'center',
|
|
1558
1558
|
justifyContent: 'center',
|
|
1559
|
+
fontVariantNumeric: 'tabular-nums',
|
|
1559
1560
|
...__css
|
|
1560
1561
|
},
|
|
1561
1562
|
...otherProps
|
|
@@ -5356,7 +5357,7 @@ const TabIndicator = /*#__PURE__*/react$1.forwardRef(function TabIndicator(props
|
|
|
5356
5357
|
currentIndicator.current = ref.current;
|
|
5357
5358
|
}
|
|
5358
5359
|
}, [selected, variant]);
|
|
5359
|
-
|
|
5360
|
+
useEnhancedEffect(() => {
|
|
5360
5361
|
if (variant === 'secondary') {
|
|
5361
5362
|
return;
|
|
5362
5363
|
}
|
|
@@ -5484,6 +5485,10 @@ const TabInner = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRe
|
|
|
5484
5485
|
variant
|
|
5485
5486
|
} = useTabListContext();
|
|
5486
5487
|
const labelRef = react$1.useRef(null);
|
|
5488
|
+
const [mounted, setMounted] = react$1.useState(false);
|
|
5489
|
+
react$1.useEffect(() => {
|
|
5490
|
+
setMounted(true);
|
|
5491
|
+
}, []);
|
|
5487
5492
|
return /*#__PURE__*/jsxRuntime.jsxs(Box, {
|
|
5488
5493
|
position: "relative",
|
|
5489
5494
|
display: "flex",
|
|
@@ -5497,6 +5502,7 @@ const TabInner = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRe
|
|
|
5497
5502
|
disabled: disabled,
|
|
5498
5503
|
__css: {
|
|
5499
5504
|
px: 3,
|
|
5505
|
+
py: 0,
|
|
5500
5506
|
color: selected ? selectedTextColor || indicatorColor : alpha(textColor, disabled ? 0.37 : 0.7),
|
|
5501
5507
|
minHeight: "3rem",
|
|
5502
5508
|
height: '100%',
|
|
@@ -5511,16 +5517,31 @@ const TabInner = /*#__PURE__*/react$1.forwardRef(function Tab(props, forwardedRe
|
|
|
5511
5517
|
...otherProps,
|
|
5512
5518
|
children: /*#__PURE__*/jsxRuntime.jsx(Text, {
|
|
5513
5519
|
as: "span",
|
|
5514
|
-
display: "inline-flex",
|
|
5515
|
-
justifyContent: "center",
|
|
5516
|
-
alignItems: "center",
|
|
5517
5520
|
variant: "title-small",
|
|
5518
|
-
color: "inherit",
|
|
5519
|
-
height: "100%",
|
|
5520
|
-
textAlign: "center",
|
|
5521
|
-
position: "relative",
|
|
5522
|
-
flexDirection: "column",
|
|
5523
5521
|
ref: labelRef,
|
|
5522
|
+
__css: {
|
|
5523
|
+
display: 'inline-flex',
|
|
5524
|
+
justifyContent: 'center',
|
|
5525
|
+
alignItems: 'center',
|
|
5526
|
+
color: 'inherit',
|
|
5527
|
+
height: '100%',
|
|
5528
|
+
textAlign: 'center',
|
|
5529
|
+
position: 'relative',
|
|
5530
|
+
flexDirection: 'column',
|
|
5531
|
+
...(variant === 'primary' && selected && !mounted && {
|
|
5532
|
+
'&::before': {
|
|
5533
|
+
content: '""',
|
|
5534
|
+
bg: indicatorColor,
|
|
5535
|
+
position: 'absolute',
|
|
5536
|
+
bottom: 0,
|
|
5537
|
+
zIndex: 1,
|
|
5538
|
+
width: '100%',
|
|
5539
|
+
height: "0.1875rem",
|
|
5540
|
+
borderTopLeftRadius: "0.1875rem",
|
|
5541
|
+
borderTopRightRadius: "0.1875rem"
|
|
5542
|
+
}
|
|
5543
|
+
})
|
|
5544
|
+
},
|
|
5524
5545
|
children: children
|
|
5525
5546
|
})
|
|
5526
5547
|
}), /*#__PURE__*/jsxRuntime.jsx(TabIndicator, {
|