design-zystem 1.0.250 → 1.0.251
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/dist/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +17 -2
- package/dist/index.mjs +17 -2
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -742,6 +742,8 @@ interface TabItem {
|
|
|
742
742
|
id: string | number;
|
|
743
743
|
label: string;
|
|
744
744
|
disabled?: boolean;
|
|
745
|
+
dot?: boolean;
|
|
746
|
+
dotColor?: string;
|
|
745
747
|
}
|
|
746
748
|
type TabsVariant = 'line' | 'pills';
|
|
747
749
|
interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
package/dist/index.d.ts
CHANGED
|
@@ -742,6 +742,8 @@ interface TabItem {
|
|
|
742
742
|
id: string | number;
|
|
743
743
|
label: string;
|
|
744
744
|
disabled?: boolean;
|
|
745
|
+
dot?: boolean;
|
|
746
|
+
dotColor?: string;
|
|
745
747
|
}
|
|
746
748
|
type TabsVariant = 'line' | 'pills';
|
|
747
749
|
interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
package/dist/index.js
CHANGED
|
@@ -3890,6 +3890,10 @@ var TabButton = import_styled_components38.default.button.withConfig({
|
|
|
3890
3890
|
shouldForwardProp: shouldForwardTab
|
|
3891
3891
|
})`
|
|
3892
3892
|
appearance: none;
|
|
3893
|
+
display: inline-flex;
|
|
3894
|
+
align-items: center;
|
|
3895
|
+
justify-content: center;
|
|
3896
|
+
gap: 6px;
|
|
3893
3897
|
border: 0;
|
|
3894
3898
|
background: ${(p) => {
|
|
3895
3899
|
if (p.$variant !== "pills") return "transparent";
|
|
@@ -3931,6 +3935,14 @@ var TabButton = import_styled_components38.default.button.withConfig({
|
|
|
3931
3935
|
opacity: 0.6;
|
|
3932
3936
|
}
|
|
3933
3937
|
`;
|
|
3938
|
+
var TabDot = import_styled_components38.default.span`
|
|
3939
|
+
display: inline-block;
|
|
3940
|
+
width: 8px;
|
|
3941
|
+
height: 8px;
|
|
3942
|
+
border-radius: 50%;
|
|
3943
|
+
flex: none;
|
|
3944
|
+
background: ${(p) => p.$color || colors.red_950};
|
|
3945
|
+
`;
|
|
3934
3946
|
var Tab = (_a) => {
|
|
3935
3947
|
var _b = _a, {
|
|
3936
3948
|
id,
|
|
@@ -4021,7 +4033,7 @@ var Tabs = (_a) => {
|
|
|
4021
4033
|
const isPillsFullWidth = variant === "pills" && align === "start";
|
|
4022
4034
|
const rendered = (0, import_react20.useMemo)(() => {
|
|
4023
4035
|
if (items && items.length) {
|
|
4024
|
-
return items.map((it) => /* @__PURE__ */ (0, import_jsx_runtime45.
|
|
4036
|
+
return items.map((it) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
|
|
4025
4037
|
Tab,
|
|
4026
4038
|
{
|
|
4027
4039
|
id: it.id,
|
|
@@ -4031,7 +4043,10 @@ var Tabs = (_a) => {
|
|
|
4031
4043
|
fullWidth: isPillsFullWidth,
|
|
4032
4044
|
onClick: () => handleSelect(it.id),
|
|
4033
4045
|
innerRef: setTabRef(it.id),
|
|
4034
|
-
children:
|
|
4046
|
+
children: [
|
|
4047
|
+
it.label,
|
|
4048
|
+
it.dot && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabDot, { $color: it.dotColor })
|
|
4049
|
+
]
|
|
4035
4050
|
},
|
|
4036
4051
|
it.id
|
|
4037
4052
|
));
|
package/dist/index.mjs
CHANGED
|
@@ -3808,6 +3808,10 @@ var TabButton = styled38.button.withConfig({
|
|
|
3808
3808
|
shouldForwardProp: shouldForwardTab
|
|
3809
3809
|
})`
|
|
3810
3810
|
appearance: none;
|
|
3811
|
+
display: inline-flex;
|
|
3812
|
+
align-items: center;
|
|
3813
|
+
justify-content: center;
|
|
3814
|
+
gap: 6px;
|
|
3811
3815
|
border: 0;
|
|
3812
3816
|
background: ${(p) => {
|
|
3813
3817
|
if (p.$variant !== "pills") return "transparent";
|
|
@@ -3849,6 +3853,14 @@ var TabButton = styled38.button.withConfig({
|
|
|
3849
3853
|
opacity: 0.6;
|
|
3850
3854
|
}
|
|
3851
3855
|
`;
|
|
3856
|
+
var TabDot = styled38.span`
|
|
3857
|
+
display: inline-block;
|
|
3858
|
+
width: 8px;
|
|
3859
|
+
height: 8px;
|
|
3860
|
+
border-radius: 50%;
|
|
3861
|
+
flex: none;
|
|
3862
|
+
background: ${(p) => p.$color || colors.red_950};
|
|
3863
|
+
`;
|
|
3852
3864
|
var Tab = (_a) => {
|
|
3853
3865
|
var _b = _a, {
|
|
3854
3866
|
id,
|
|
@@ -3939,7 +3951,7 @@ var Tabs = (_a) => {
|
|
|
3939
3951
|
const isPillsFullWidth = variant === "pills" && align === "start";
|
|
3940
3952
|
const rendered = useMemo(() => {
|
|
3941
3953
|
if (items && items.length) {
|
|
3942
|
-
return items.map((it) => /* @__PURE__ */
|
|
3954
|
+
return items.map((it) => /* @__PURE__ */ jsxs20(
|
|
3943
3955
|
Tab,
|
|
3944
3956
|
{
|
|
3945
3957
|
id: it.id,
|
|
@@ -3949,7 +3961,10 @@ var Tabs = (_a) => {
|
|
|
3949
3961
|
fullWidth: isPillsFullWidth,
|
|
3950
3962
|
onClick: () => handleSelect(it.id),
|
|
3951
3963
|
innerRef: setTabRef(it.id),
|
|
3952
|
-
children:
|
|
3964
|
+
children: [
|
|
3965
|
+
it.label,
|
|
3966
|
+
it.dot && /* @__PURE__ */ jsx45(TabDot, { $color: it.dotColor })
|
|
3967
|
+
]
|
|
3953
3968
|
},
|
|
3954
3969
|
it.id
|
|
3955
3970
|
));
|