@trackunit/react-components 1.5.6 → 1.5.8
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/index.cjs.js
CHANGED
|
@@ -45,7 +45,7 @@ const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-gri
|
|
|
45
45
|
idle: "text-idle-600",
|
|
46
46
|
moving: "text-moving-600",
|
|
47
47
|
active: "text-active-600",
|
|
48
|
-
|
|
48
|
+
excessive_usage: "text-danger-600",
|
|
49
49
|
stopped: "text-stopped-700",
|
|
50
50
|
unknown: "text-unknown-400",
|
|
51
51
|
default: "text-current",
|
|
@@ -222,11 +222,11 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
|
|
|
222
222
|
unknown: ["bg-unknown-100", "text-unknown-700"],
|
|
223
223
|
moving: ["bg-neutral-100", "text-neutral-700"],
|
|
224
224
|
active: ["bg-neutral-100", "text-neutral-700"],
|
|
225
|
-
|
|
225
|
+
excessive_usage: ["bg-danger-100", "text-danger-700"],
|
|
226
226
|
},
|
|
227
227
|
border: {
|
|
228
228
|
none: "border-none",
|
|
229
|
-
default: "border border-
|
|
229
|
+
default: "border border-secondary-300",
|
|
230
230
|
},
|
|
231
231
|
},
|
|
232
232
|
defaultVariants: {
|
|
@@ -489,8 +489,8 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
|
|
|
489
489
|
"hover:bg-primary-700",
|
|
490
490
|
"active:bg-primary-800",
|
|
491
491
|
"focus:bg-primary-800",
|
|
492
|
-
"disabled:bg-
|
|
493
|
-
"disabled:text-
|
|
492
|
+
"disabled:bg-secondary-400",
|
|
493
|
+
"disabled:text-secondary-200",
|
|
494
494
|
],
|
|
495
495
|
"primary-danger": [
|
|
496
496
|
"text-white",
|
|
@@ -498,28 +498,28 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
|
|
|
498
498
|
"hover:bg-danger-700",
|
|
499
499
|
"active:bg-danger-800",
|
|
500
500
|
"focus:bg-danger-800",
|
|
501
|
-
"disabled:bg-
|
|
502
|
-
"disabled:text-
|
|
501
|
+
"disabled:bg-secondary-400",
|
|
502
|
+
"disabled:text-secondary-200",
|
|
503
503
|
],
|
|
504
504
|
secondary: [
|
|
505
505
|
"group",
|
|
506
506
|
"bg-white",
|
|
507
507
|
"border",
|
|
508
|
-
"border-
|
|
509
|
-
"text-
|
|
510
|
-
"hover:bg-
|
|
511
|
-
"hover:text-
|
|
512
|
-
"focus:bg-
|
|
513
|
-
"focus:text-
|
|
514
|
-
"active:bg-
|
|
515
|
-
"active:text-
|
|
516
|
-
"disabled:bg-
|
|
517
|
-
"disabled:text-
|
|
508
|
+
"border-secondary-300",
|
|
509
|
+
"text-secondary-600",
|
|
510
|
+
"hover:bg-secondary-100",
|
|
511
|
+
"hover:text-secondary-700",
|
|
512
|
+
"focus:bg-secondary-200",
|
|
513
|
+
"focus:text-secondary-800",
|
|
514
|
+
"active:bg-secondary-200",
|
|
515
|
+
"active:text-secondary-800",
|
|
516
|
+
"disabled:bg-secondary-200",
|
|
517
|
+
"disabled:text-secondary-400",
|
|
518
518
|
],
|
|
519
519
|
"secondary-danger": [
|
|
520
520
|
"bg-white",
|
|
521
521
|
"border",
|
|
522
|
-
"border-
|
|
522
|
+
"border-secondary-300",
|
|
523
523
|
"text-danger-600",
|
|
524
524
|
"hover:bg-danger-100",
|
|
525
525
|
"hover:text-danger-700",
|
|
@@ -530,8 +530,8 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
|
|
|
530
530
|
"focus:bg-danger-200",
|
|
531
531
|
"focus:text-danger-800",
|
|
532
532
|
"focus:border-danger-800",
|
|
533
|
-
"disabled:bg-
|
|
534
|
-
"disabled:text-
|
|
533
|
+
"disabled:bg-secondary-300",
|
|
534
|
+
"disabled:text-secondary-400",
|
|
535
535
|
],
|
|
536
536
|
ghost: [
|
|
537
537
|
"bg-transparent",
|
|
@@ -543,33 +543,33 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
|
|
|
543
543
|
"focus:bg-black/10",
|
|
544
544
|
"focus:text-primary-800",
|
|
545
545
|
"disabled:bg-transparent",
|
|
546
|
-
"disabled:text-
|
|
546
|
+
"disabled:text-secondary-400",
|
|
547
547
|
],
|
|
548
548
|
"ghost-neutral": [
|
|
549
549
|
"group",
|
|
550
550
|
"bg-transparent",
|
|
551
|
-
"text-
|
|
551
|
+
"text-secondary-600",
|
|
552
552
|
"hover:bg-black/5",
|
|
553
|
-
"hover:text-
|
|
553
|
+
"hover:text-secondary-700",
|
|
554
554
|
"active:bg-black/10",
|
|
555
|
-
"active:text-
|
|
555
|
+
"active:text-secondary-800",
|
|
556
556
|
"focus:bg-black/10",
|
|
557
|
-
"focus:text-
|
|
557
|
+
"focus:text-secondary-800",
|
|
558
558
|
"disabled:bg-transparent",
|
|
559
|
-
"disabled:text-
|
|
559
|
+
"disabled:text-secondary-400",
|
|
560
560
|
],
|
|
561
561
|
filled: [
|
|
562
562
|
"group",
|
|
563
|
-
"bg-
|
|
564
|
-
"text-
|
|
565
|
-
"hover:bg-
|
|
566
|
-
"hover:text-
|
|
567
|
-
"active:bg-
|
|
568
|
-
"active:text-
|
|
569
|
-
"focus:bg-
|
|
570
|
-
"focus:text-
|
|
563
|
+
"bg-primary-100",
|
|
564
|
+
"text-primary-600",
|
|
565
|
+
"hover:bg-primary-200",
|
|
566
|
+
"hover:text-primary-700",
|
|
567
|
+
"active:bg-primary-200",
|
|
568
|
+
"active:text-primary-700",
|
|
569
|
+
"focus:bg-primary-100",
|
|
570
|
+
"focus:text-primary-600",
|
|
571
571
|
"disabled:bg-transparent",
|
|
572
|
-
"disabled:text-
|
|
572
|
+
"disabled:text-secondary-300",
|
|
573
573
|
],
|
|
574
574
|
},
|
|
575
575
|
size: {
|
|
@@ -614,7 +614,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
|
|
|
614
614
|
false: "",
|
|
615
615
|
},
|
|
616
616
|
disabled: {
|
|
617
|
-
true: ["cursor-not-allowed", "pointer-events-none", "bg-
|
|
617
|
+
true: ["cursor-not-allowed", "pointer-events-none", "bg-secondary-200", "hover:bg-secondary-200", "text-secondary-400"],
|
|
618
618
|
false: [],
|
|
619
619
|
},
|
|
620
620
|
loading: {
|
|
@@ -656,7 +656,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
|
|
|
656
656
|
{
|
|
657
657
|
loading: true,
|
|
658
658
|
variant: "secondary-danger",
|
|
659
|
-
className: ["disabled:bg-white", "disabled:border-
|
|
659
|
+
className: ["disabled:bg-white", "disabled:border-secondary-300"],
|
|
660
660
|
},
|
|
661
661
|
],
|
|
662
662
|
defaultVariants: {
|
|
@@ -2193,7 +2193,7 @@ const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customIma
|
|
|
2193
2193
|
return (jsxRuntime.jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId ?? "empty-state", children: loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { centering: "centered", dataTestId: "spinner" }), jsxRuntime.jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customImageSrc ? (typeof customImageSrc === "string" ? (jsxRuntime.jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (customImageSrc)) : (typeof ImageSource !== "undefined" && (jsxRuntime.jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description ? (jsxRuntime.jsx(Text, { align: "center", size: "large", children: description })) : null, jsxRuntime.jsxs("div", { className: "mt-4 grid gap-3", children: [jsxRuntime.jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsxRuntime.jsx(Button, { dataTestId: "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsxRuntime.jsx(Button, { dataTestId: "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction?.to ? (jsxRuntime.jsx(Button, { asChild: true, dataTestId: "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsxRuntime.jsx(reactRouter.Link, { params: additionalHelpAction.to.parameters, target: additionalHelpAction.to.target, to: additionalHelpAction.to.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
|
|
2194
2194
|
};
|
|
2195
2195
|
|
|
2196
|
-
const cvaEmptyValue = cssClassVarianceUtilities.cvaMerge(["text-
|
|
2196
|
+
const cvaEmptyValue = cssClassVarianceUtilities.cvaMerge(["text-neutral-400"]);
|
|
2197
2197
|
|
|
2198
2198
|
/**
|
|
2199
2199
|
* Show intentionality in empty values in the UI
|
|
@@ -2725,7 +2725,7 @@ const cvaIndicatorPing = cssClassVarianceUtilities.cvaMerge(["animate-ping-sm",
|
|
|
2725
2725
|
stopped: "bg-stopped-700",
|
|
2726
2726
|
moving: "bg-moving-600",
|
|
2727
2727
|
active: "bg-active-600",
|
|
2728
|
-
|
|
2728
|
+
excessive_usage: "bg-danger-600",
|
|
2729
2729
|
unknown: "bg-unknown-400",
|
|
2730
2730
|
unused: "bg-unused-400",
|
|
2731
2731
|
utilized: "bg-utilized-600",
|
|
@@ -2768,7 +2768,7 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
|
|
|
2768
2768
|
stopped: "bg-stopped-100 text-stopped-700",
|
|
2769
2769
|
moving: "text-moving-600 bg-neutral-100",
|
|
2770
2770
|
active: "text-active-600 bg-neutral-100",
|
|
2771
|
-
|
|
2771
|
+
excessive_usage: "bg-danger-100 text-danger-600",
|
|
2772
2772
|
unknown: "bg-unknown-50 text-unknown-400",
|
|
2773
2773
|
unused: "bg-unused-300 text-unused-400",
|
|
2774
2774
|
utilized: "bg-utilized-400 text-utilized-600",
|
|
@@ -3715,7 +3715,7 @@ const cvaTabList = cssClassVarianceUtilities.cvaMerge([
|
|
|
3715
3715
|
"flex",
|
|
3716
3716
|
"flex-row",
|
|
3717
3717
|
"border-b",
|
|
3718
|
-
"border-b-
|
|
3718
|
+
"border-b-secondary-200",
|
|
3719
3719
|
"overflow-auto",
|
|
3720
3720
|
"no-scrollbar",
|
|
3721
3721
|
]);
|
|
@@ -3738,13 +3738,13 @@ const cvaTab = cssClassVarianceUtilities.cvaMerge([
|
|
|
3738
3738
|
"hover:border-b-transparent",
|
|
3739
3739
|
"data-[state=active]:border-b-primary-600",
|
|
3740
3740
|
"data-[state=active]:font-semibold",
|
|
3741
|
-
"data-[state=active]:text-
|
|
3741
|
+
"data-[state=active]:text-secondary-900",
|
|
3742
3742
|
"data-[state=inactive]:font-medium",
|
|
3743
|
-
"data-[state=inactive]:text-
|
|
3744
|
-
"data-[state=inactive]:hover:text-
|
|
3743
|
+
"data-[state=inactive]:text-secondary-700",
|
|
3744
|
+
"data-[state=inactive]:hover:text-secondary-900",
|
|
3745
3745
|
"disabled:cursor-not-allowed",
|
|
3746
|
-
"data-[state=active]disabled:text-
|
|
3747
|
-
"data-[state=inactive]:disabled:text-
|
|
3746
|
+
"data-[state=active]disabled:text-secondary-400",
|
|
3747
|
+
"data-[state=inactive]:disabled:text-secondary-400",
|
|
3748
3748
|
], {
|
|
3749
3749
|
variants: {
|
|
3750
3750
|
isFullWidth: {
|
package/index.esm.js
CHANGED
|
@@ -43,7 +43,7 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative"], {
|
|
|
43
43
|
idle: "text-idle-600",
|
|
44
44
|
moving: "text-moving-600",
|
|
45
45
|
active: "text-active-600",
|
|
46
|
-
|
|
46
|
+
excessive_usage: "text-danger-600",
|
|
47
47
|
stopped: "text-stopped-700",
|
|
48
48
|
unknown: "text-unknown-400",
|
|
49
49
|
default: "text-current",
|
|
@@ -220,11 +220,11 @@ const cvaTag = cvaMerge([
|
|
|
220
220
|
unknown: ["bg-unknown-100", "text-unknown-700"],
|
|
221
221
|
moving: ["bg-neutral-100", "text-neutral-700"],
|
|
222
222
|
active: ["bg-neutral-100", "text-neutral-700"],
|
|
223
|
-
|
|
223
|
+
excessive_usage: ["bg-danger-100", "text-danger-700"],
|
|
224
224
|
},
|
|
225
225
|
border: {
|
|
226
226
|
none: "border-none",
|
|
227
|
-
default: "border border-
|
|
227
|
+
default: "border border-secondary-300",
|
|
228
228
|
},
|
|
229
229
|
},
|
|
230
230
|
defaultVariants: {
|
|
@@ -487,8 +487,8 @@ const cvaButton = cvaMerge([
|
|
|
487
487
|
"hover:bg-primary-700",
|
|
488
488
|
"active:bg-primary-800",
|
|
489
489
|
"focus:bg-primary-800",
|
|
490
|
-
"disabled:bg-
|
|
491
|
-
"disabled:text-
|
|
490
|
+
"disabled:bg-secondary-400",
|
|
491
|
+
"disabled:text-secondary-200",
|
|
492
492
|
],
|
|
493
493
|
"primary-danger": [
|
|
494
494
|
"text-white",
|
|
@@ -496,28 +496,28 @@ const cvaButton = cvaMerge([
|
|
|
496
496
|
"hover:bg-danger-700",
|
|
497
497
|
"active:bg-danger-800",
|
|
498
498
|
"focus:bg-danger-800",
|
|
499
|
-
"disabled:bg-
|
|
500
|
-
"disabled:text-
|
|
499
|
+
"disabled:bg-secondary-400",
|
|
500
|
+
"disabled:text-secondary-200",
|
|
501
501
|
],
|
|
502
502
|
secondary: [
|
|
503
503
|
"group",
|
|
504
504
|
"bg-white",
|
|
505
505
|
"border",
|
|
506
|
-
"border-
|
|
507
|
-
"text-
|
|
508
|
-
"hover:bg-
|
|
509
|
-
"hover:text-
|
|
510
|
-
"focus:bg-
|
|
511
|
-
"focus:text-
|
|
512
|
-
"active:bg-
|
|
513
|
-
"active:text-
|
|
514
|
-
"disabled:bg-
|
|
515
|
-
"disabled:text-
|
|
506
|
+
"border-secondary-300",
|
|
507
|
+
"text-secondary-600",
|
|
508
|
+
"hover:bg-secondary-100",
|
|
509
|
+
"hover:text-secondary-700",
|
|
510
|
+
"focus:bg-secondary-200",
|
|
511
|
+
"focus:text-secondary-800",
|
|
512
|
+
"active:bg-secondary-200",
|
|
513
|
+
"active:text-secondary-800",
|
|
514
|
+
"disabled:bg-secondary-200",
|
|
515
|
+
"disabled:text-secondary-400",
|
|
516
516
|
],
|
|
517
517
|
"secondary-danger": [
|
|
518
518
|
"bg-white",
|
|
519
519
|
"border",
|
|
520
|
-
"border-
|
|
520
|
+
"border-secondary-300",
|
|
521
521
|
"text-danger-600",
|
|
522
522
|
"hover:bg-danger-100",
|
|
523
523
|
"hover:text-danger-700",
|
|
@@ -528,8 +528,8 @@ const cvaButton = cvaMerge([
|
|
|
528
528
|
"focus:bg-danger-200",
|
|
529
529
|
"focus:text-danger-800",
|
|
530
530
|
"focus:border-danger-800",
|
|
531
|
-
"disabled:bg-
|
|
532
|
-
"disabled:text-
|
|
531
|
+
"disabled:bg-secondary-300",
|
|
532
|
+
"disabled:text-secondary-400",
|
|
533
533
|
],
|
|
534
534
|
ghost: [
|
|
535
535
|
"bg-transparent",
|
|
@@ -541,33 +541,33 @@ const cvaButton = cvaMerge([
|
|
|
541
541
|
"focus:bg-black/10",
|
|
542
542
|
"focus:text-primary-800",
|
|
543
543
|
"disabled:bg-transparent",
|
|
544
|
-
"disabled:text-
|
|
544
|
+
"disabled:text-secondary-400",
|
|
545
545
|
],
|
|
546
546
|
"ghost-neutral": [
|
|
547
547
|
"group",
|
|
548
548
|
"bg-transparent",
|
|
549
|
-
"text-
|
|
549
|
+
"text-secondary-600",
|
|
550
550
|
"hover:bg-black/5",
|
|
551
|
-
"hover:text-
|
|
551
|
+
"hover:text-secondary-700",
|
|
552
552
|
"active:bg-black/10",
|
|
553
|
-
"active:text-
|
|
553
|
+
"active:text-secondary-800",
|
|
554
554
|
"focus:bg-black/10",
|
|
555
|
-
"focus:text-
|
|
555
|
+
"focus:text-secondary-800",
|
|
556
556
|
"disabled:bg-transparent",
|
|
557
|
-
"disabled:text-
|
|
557
|
+
"disabled:text-secondary-400",
|
|
558
558
|
],
|
|
559
559
|
filled: [
|
|
560
560
|
"group",
|
|
561
|
-
"bg-
|
|
562
|
-
"text-
|
|
563
|
-
"hover:bg-
|
|
564
|
-
"hover:text-
|
|
565
|
-
"active:bg-
|
|
566
|
-
"active:text-
|
|
567
|
-
"focus:bg-
|
|
568
|
-
"focus:text-
|
|
561
|
+
"bg-primary-100",
|
|
562
|
+
"text-primary-600",
|
|
563
|
+
"hover:bg-primary-200",
|
|
564
|
+
"hover:text-primary-700",
|
|
565
|
+
"active:bg-primary-200",
|
|
566
|
+
"active:text-primary-700",
|
|
567
|
+
"focus:bg-primary-100",
|
|
568
|
+
"focus:text-primary-600",
|
|
569
569
|
"disabled:bg-transparent",
|
|
570
|
-
"disabled:text-
|
|
570
|
+
"disabled:text-secondary-300",
|
|
571
571
|
],
|
|
572
572
|
},
|
|
573
573
|
size: {
|
|
@@ -612,7 +612,7 @@ const cvaButton = cvaMerge([
|
|
|
612
612
|
false: "",
|
|
613
613
|
},
|
|
614
614
|
disabled: {
|
|
615
|
-
true: ["cursor-not-allowed", "pointer-events-none", "bg-
|
|
615
|
+
true: ["cursor-not-allowed", "pointer-events-none", "bg-secondary-200", "hover:bg-secondary-200", "text-secondary-400"],
|
|
616
616
|
false: [],
|
|
617
617
|
},
|
|
618
618
|
loading: {
|
|
@@ -654,7 +654,7 @@ const cvaButton = cvaMerge([
|
|
|
654
654
|
{
|
|
655
655
|
loading: true,
|
|
656
656
|
variant: "secondary-danger",
|
|
657
|
-
className: ["disabled:bg-white", "disabled:border-
|
|
657
|
+
className: ["disabled:bg-white", "disabled:border-secondary-300"],
|
|
658
658
|
},
|
|
659
659
|
],
|
|
660
660
|
defaultVariants: {
|
|
@@ -2191,7 +2191,7 @@ const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customIma
|
|
|
2191
2191
|
return (jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId ?? "empty-state", children: loading ? (jsxs(Fragment, { children: [jsx(Spinner, { centering: "centered", dataTestId: "spinner" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxs(Fragment, { children: [customImageSrc ? (typeof customImageSrc === "string" ? (jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (customImageSrc)) : (typeof ImageSource !== "undefined" && (jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description ? (jsx(Text, { align: "center", size: "large", children: description })) : null, jsxs("div", { className: "mt-4 grid gap-3", children: [jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsx(Button, { dataTestId: "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsx(Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsx(Button, { dataTestId: "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsx(Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction?.to ? (jsx(Button, { asChild: true, dataTestId: "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsx(Link, { params: additionalHelpAction.to.parameters, target: additionalHelpAction.to.target, to: additionalHelpAction.to.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
|
|
2192
2192
|
};
|
|
2193
2193
|
|
|
2194
|
-
const cvaEmptyValue = cvaMerge(["text-
|
|
2194
|
+
const cvaEmptyValue = cvaMerge(["text-neutral-400"]);
|
|
2195
2195
|
|
|
2196
2196
|
/**
|
|
2197
2197
|
* Show intentionality in empty values in the UI
|
|
@@ -2723,7 +2723,7 @@ const cvaIndicatorPing = cvaMerge(["animate-ping-sm", "absolute", "inline-flex",
|
|
|
2723
2723
|
stopped: "bg-stopped-700",
|
|
2724
2724
|
moving: "bg-moving-600",
|
|
2725
2725
|
active: "bg-active-600",
|
|
2726
|
-
|
|
2726
|
+
excessive_usage: "bg-danger-600",
|
|
2727
2727
|
unknown: "bg-unknown-400",
|
|
2728
2728
|
unused: "bg-unused-400",
|
|
2729
2729
|
utilized: "bg-utilized-600",
|
|
@@ -2766,7 +2766,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
|
|
|
2766
2766
|
stopped: "bg-stopped-100 text-stopped-700",
|
|
2767
2767
|
moving: "text-moving-600 bg-neutral-100",
|
|
2768
2768
|
active: "text-active-600 bg-neutral-100",
|
|
2769
|
-
|
|
2769
|
+
excessive_usage: "bg-danger-100 text-danger-600",
|
|
2770
2770
|
unknown: "bg-unknown-50 text-unknown-400",
|
|
2771
2771
|
unused: "bg-unused-300 text-unused-400",
|
|
2772
2772
|
utilized: "bg-utilized-400 text-utilized-600",
|
|
@@ -3713,7 +3713,7 @@ const cvaTabList = cvaMerge([
|
|
|
3713
3713
|
"flex",
|
|
3714
3714
|
"flex-row",
|
|
3715
3715
|
"border-b",
|
|
3716
|
-
"border-b-
|
|
3716
|
+
"border-b-secondary-200",
|
|
3717
3717
|
"overflow-auto",
|
|
3718
3718
|
"no-scrollbar",
|
|
3719
3719
|
]);
|
|
@@ -3736,13 +3736,13 @@ const cvaTab = cvaMerge([
|
|
|
3736
3736
|
"hover:border-b-transparent",
|
|
3737
3737
|
"data-[state=active]:border-b-primary-600",
|
|
3738
3738
|
"data-[state=active]:font-semibold",
|
|
3739
|
-
"data-[state=active]:text-
|
|
3739
|
+
"data-[state=active]:text-secondary-900",
|
|
3740
3740
|
"data-[state=inactive]:font-medium",
|
|
3741
|
-
"data-[state=inactive]:text-
|
|
3742
|
-
"data-[state=inactive]:hover:text-
|
|
3741
|
+
"data-[state=inactive]:text-secondary-700",
|
|
3742
|
+
"data-[state=inactive]:hover:text-secondary-900",
|
|
3743
3743
|
"disabled:cursor-not-allowed",
|
|
3744
|
-
"data-[state=active]disabled:text-
|
|
3745
|
-
"data-[state=inactive]:disabled:text-
|
|
3744
|
+
"data-[state=active]disabled:text-secondary-400",
|
|
3745
|
+
"data-[state=inactive]:disabled:text-secondary-400",
|
|
3746
3746
|
], {
|
|
3747
3747
|
variants: {
|
|
3748
3748
|
isFullWidth: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-components",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.8",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"@tanstack/react-router": "1.114.29",
|
|
19
19
|
"string-ts": "^2.0.0",
|
|
20
20
|
"tailwind-merge": "^2.0.0",
|
|
21
|
-
"@trackunit/ui-design-tokens": "1.4.
|
|
21
|
+
"@trackunit/ui-design-tokens": "1.4.6",
|
|
22
22
|
"@trackunit/css-class-variance-utilities": "1.4.4",
|
|
23
23
|
"@trackunit/shared-utils": "1.6.4",
|
|
24
24
|
"@trackunit/ui-icons": "1.4.4",
|
|
@@ -293,17 +293,17 @@ export declare const iconPalette: {
|
|
|
293
293
|
readonly 800: "22 101 52";
|
|
294
294
|
readonly 900: "20 83 45";
|
|
295
295
|
};
|
|
296
|
-
|
|
297
|
-
readonly 50: "
|
|
298
|
-
readonly 100: "254
|
|
299
|
-
readonly 200: "
|
|
300
|
-
readonly 300: "252
|
|
301
|
-
readonly 400: "
|
|
302
|
-
readonly 500: "
|
|
303
|
-
readonly 600: "
|
|
304
|
-
readonly 700: "
|
|
305
|
-
readonly 800: "
|
|
306
|
-
readonly 900: "
|
|
296
|
+
EXCESSIVE_USAGE: {
|
|
297
|
+
readonly 50: "254 242 242";
|
|
298
|
+
readonly 100: "254 226 226";
|
|
299
|
+
readonly 200: "254 202 202";
|
|
300
|
+
readonly 300: "252 165 165";
|
|
301
|
+
readonly 400: "248 113 113";
|
|
302
|
+
readonly 500: "239 68 68";
|
|
303
|
+
readonly 600: "220 38 38";
|
|
304
|
+
readonly 700: "185 28 28";
|
|
305
|
+
readonly 800: "153 27 27";
|
|
306
|
+
readonly 900: "127 29 29";
|
|
307
307
|
};
|
|
308
308
|
GOOD: {
|
|
309
309
|
readonly 50: "240 253 244";
|
|
@@ -432,7 +432,7 @@ export declare const iconPalette: {
|
|
|
432
432
|
readonly 900: "127 29 29";
|
|
433
433
|
};
|
|
434
434
|
};
|
|
435
|
-
export declare const iconColorNames: ("info" | "success" | "warning" | "danger" | "primary" | "secondary" | "neutral" | "black" | "white" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown" | "moving" | "active" | "
|
|
435
|
+
export declare const iconColorNames: ("info" | "success" | "warning" | "danger" | "primary" | "secondary" | "neutral" | "black" | "white" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown" | "moving" | "active" | "excessive_usage" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status")[];
|
|
436
436
|
type IconPropsSmall = {
|
|
437
437
|
size?: "small";
|
|
438
438
|
type?: "solid";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const cvaIcon: (props?: ({
|
|
2
|
-
color?: "default" | "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "
|
|
2
|
+
color?: "default" | "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "excessive_usage" | "stopped" | "unknown" | "black" | "white" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | null | undefined;
|
|
3
3
|
size?: "small" | "medium" | "large" | null | undefined;
|
|
4
4
|
fontSize?: boolean | null | undefined;
|
|
5
5
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
@@ -6,9 +6,9 @@ export declare const cvaIndicatorLabel: (props?: ({
|
|
|
6
6
|
background?: "visible" | "hidden" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
8
8
|
export declare const cvaIndicatorPing: (props?: ({
|
|
9
|
-
color?: "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "
|
|
9
|
+
color?: "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "excessive_usage" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "white" | "black" | null | undefined;
|
|
10
10
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
11
11
|
export declare const cvaIndicatorIconBackground: (props?: ({
|
|
12
|
-
color?: "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "
|
|
12
|
+
color?: "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "excessive_usage" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "white" | "black" | null | undefined;
|
|
13
13
|
background?: "visible" | "hidden" | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export declare const cvaTag: (props?: ({
|
|
2
2
|
size?: "small" | "medium" | null | undefined;
|
|
3
3
|
layout?: "default" | "containsDismiss" | "containsIcon" | null | undefined;
|
|
4
|
-
color?: "primary" | "secondary" | "neutral" | "black" | "white" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "stopped" | "idle" | "unknown" | "moving" | "active" | "
|
|
4
|
+
color?: "primary" | "secondary" | "neutral" | "black" | "white" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "stopped" | "idle" | "unknown" | "moving" | "active" | "excessive_usage" | null | undefined;
|
|
5
5
|
border?: "default" | "none" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
7
7
|
export declare const cvaTagText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
|