design-zystem 1.0.274 → 1.0.275
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 +20 -1
- package/dist/index.mjs +20 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -774,6 +774,8 @@ interface TabItem {
|
|
|
774
774
|
disabled?: boolean;
|
|
775
775
|
dot?: boolean;
|
|
776
776
|
dotColor?: string;
|
|
777
|
+
bubbleActive?: boolean;
|
|
778
|
+
bubbleNumber?: number | null;
|
|
777
779
|
}
|
|
778
780
|
type TabsVariant = 'line' | 'pills';
|
|
779
781
|
interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
package/dist/index.d.ts
CHANGED
|
@@ -774,6 +774,8 @@ interface TabItem {
|
|
|
774
774
|
disabled?: boolean;
|
|
775
775
|
dot?: boolean;
|
|
776
776
|
dotColor?: string;
|
|
777
|
+
bubbleActive?: boolean;
|
|
778
|
+
bubbleNumber?: number | null;
|
|
777
779
|
}
|
|
778
780
|
type TabsVariant = 'line' | 'pills';
|
|
779
781
|
interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
package/dist/index.js
CHANGED
|
@@ -4228,6 +4228,15 @@ var TabDot = import_styled_components40.default.span`
|
|
|
4228
4228
|
flex: none;
|
|
4229
4229
|
background: ${(p) => p.$color || colors.red_950};
|
|
4230
4230
|
`;
|
|
4231
|
+
var TabBubble = (0, import_styled_components40.default)(Bubble)`
|
|
4232
|
+
display: flex;
|
|
4233
|
+
align-items: center;
|
|
4234
|
+
justify-content: center;
|
|
4235
|
+
min-width: 20px;
|
|
4236
|
+
height: 18px;
|
|
4237
|
+
font-size: 10px;
|
|
4238
|
+
line-height: 1;
|
|
4239
|
+
`;
|
|
4231
4240
|
var Tab = (_a) => {
|
|
4232
4241
|
var _b = _a, {
|
|
4233
4242
|
id,
|
|
@@ -4330,7 +4339,17 @@ var Tabs = (_a) => {
|
|
|
4330
4339
|
innerRef: setTabRef(it.id),
|
|
4331
4340
|
children: [
|
|
4332
4341
|
it.label,
|
|
4333
|
-
it.dot && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabDot, { $color: it.dotColor })
|
|
4342
|
+
it.dot && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabDot, { $color: it.dotColor }),
|
|
4343
|
+
Boolean(it.bubbleActive || it.bubbleNumber) && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
4344
|
+
TabBubble,
|
|
4345
|
+
{
|
|
4346
|
+
size: "xs",
|
|
4347
|
+
color: colors.white,
|
|
4348
|
+
backgroundColor: colors.red_950,
|
|
4349
|
+
padding: "0 6px",
|
|
4350
|
+
children: it.bubbleNumber
|
|
4351
|
+
}
|
|
4352
|
+
)
|
|
4334
4353
|
]
|
|
4335
4354
|
},
|
|
4336
4355
|
it.id
|
package/dist/index.mjs
CHANGED
|
@@ -4104,6 +4104,15 @@ var TabDot = styled40.span`
|
|
|
4104
4104
|
flex: none;
|
|
4105
4105
|
background: ${(p) => p.$color || colors.red_950};
|
|
4106
4106
|
`;
|
|
4107
|
+
var TabBubble = styled40(Bubble)`
|
|
4108
|
+
display: flex;
|
|
4109
|
+
align-items: center;
|
|
4110
|
+
justify-content: center;
|
|
4111
|
+
min-width: 20px;
|
|
4112
|
+
height: 18px;
|
|
4113
|
+
font-size: 10px;
|
|
4114
|
+
line-height: 1;
|
|
4115
|
+
`;
|
|
4107
4116
|
var Tab = (_a) => {
|
|
4108
4117
|
var _b = _a, {
|
|
4109
4118
|
id,
|
|
@@ -4206,7 +4215,17 @@ var Tabs = (_a) => {
|
|
|
4206
4215
|
innerRef: setTabRef(it.id),
|
|
4207
4216
|
children: [
|
|
4208
4217
|
it.label,
|
|
4209
|
-
it.dot && /* @__PURE__ */ jsx47(TabDot, { $color: it.dotColor })
|
|
4218
|
+
it.dot && /* @__PURE__ */ jsx47(TabDot, { $color: it.dotColor }),
|
|
4219
|
+
Boolean(it.bubbleActive || it.bubbleNumber) && /* @__PURE__ */ jsx47(
|
|
4220
|
+
TabBubble,
|
|
4221
|
+
{
|
|
4222
|
+
size: "xs",
|
|
4223
|
+
color: colors.white,
|
|
4224
|
+
backgroundColor: colors.red_950,
|
|
4225
|
+
padding: "0 6px",
|
|
4226
|
+
children: it.bubbleNumber
|
|
4227
|
+
}
|
|
4228
|
+
)
|
|
4210
4229
|
]
|
|
4211
4230
|
},
|
|
4212
4231
|
it.id
|