@trackunit/react-components 1.5.3 → 1.5.7

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.
Files changed (3) hide show
  1. package/index.cjs.js +42 -42
  2. package/index.esm.js +42 -42
  3. package/package.json +7 -7
package/index.cjs.js CHANGED
@@ -226,7 +226,7 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
226
226
  },
227
227
  border: {
228
228
  none: "border-none",
229
- default: "border border-slate-300",
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-slate-400",
493
- "disabled:text-slate-200",
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-slate-400",
502
- "disabled:text-slate-200",
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-slate-300",
509
- "text-slate-600",
510
- "hover:bg-slate-100",
511
- "hover:text-slate-700",
512
- "focus:bg-slate-200",
513
- "focus:text-slate-800",
514
- "active:bg-slate-200",
515
- "active:text-slate-800",
516
- "disabled:bg-slate-200",
517
- "disabled:text-slate-400",
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-slate-300",
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-slate-300",
534
- "disabled:text-slate-400",
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-slate-400",
546
+ "disabled:text-secondary-400",
547
547
  ],
548
548
  "ghost-neutral": [
549
549
  "group",
550
550
  "bg-transparent",
551
- "text-slate-600",
551
+ "text-secondary-600",
552
552
  "hover:bg-black/5",
553
- "hover:text-slate-700",
553
+ "hover:text-secondary-700",
554
554
  "active:bg-black/10",
555
- "active:text-slate-800",
555
+ "active:text-secondary-800",
556
556
  "focus:bg-black/10",
557
- "focus:text-slate-800",
557
+ "focus:text-secondary-800",
558
558
  "disabled:bg-transparent",
559
- "disabled:text-slate-400",
559
+ "disabled:text-secondary-400",
560
560
  ],
561
561
  filled: [
562
562
  "group",
563
- "bg-blue-100",
564
- "text-blue-600",
565
- "hover:bg-blue-200",
566
- "hover:text-blue-700",
567
- "active:bg-blue-200",
568
- "active:text-blue-700",
569
- "focus:bg-blue-100",
570
- "focus:text-blue-600",
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-slate-300",
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-slate-200", "hover:bg-slate-200", "text-slate-400"],
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-slate-300"],
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-gray-400"]);
2196
+ const cvaEmptyValue = cssClassVarianceUtilities.cvaMerge(["text-neutral-400"]);
2197
2197
 
2198
2198
  /**
2199
2199
  * Show intentionality in empty values in the UI
@@ -3715,7 +3715,7 @@ const cvaTabList = cssClassVarianceUtilities.cvaMerge([
3715
3715
  "flex",
3716
3716
  "flex-row",
3717
3717
  "border-b",
3718
- "border-b-slate-200",
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-slate-900",
3741
+ "data-[state=active]:text-secondary-900",
3742
3742
  "data-[state=inactive]:font-medium",
3743
- "data-[state=inactive]:text-slate-700",
3744
- "data-[state=inactive]:hover:text-slate-900",
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-slate-400",
3747
- "data-[state=inactive]:disabled:text-slate-400",
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
@@ -224,7 +224,7 @@ const cvaTag = cvaMerge([
224
224
  },
225
225
  border: {
226
226
  none: "border-none",
227
- default: "border border-slate-300",
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-slate-400",
491
- "disabled:text-slate-200",
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-slate-400",
500
- "disabled:text-slate-200",
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-slate-300",
507
- "text-slate-600",
508
- "hover:bg-slate-100",
509
- "hover:text-slate-700",
510
- "focus:bg-slate-200",
511
- "focus:text-slate-800",
512
- "active:bg-slate-200",
513
- "active:text-slate-800",
514
- "disabled:bg-slate-200",
515
- "disabled:text-slate-400",
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-slate-300",
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-slate-300",
532
- "disabled:text-slate-400",
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-slate-400",
544
+ "disabled:text-secondary-400",
545
545
  ],
546
546
  "ghost-neutral": [
547
547
  "group",
548
548
  "bg-transparent",
549
- "text-slate-600",
549
+ "text-secondary-600",
550
550
  "hover:bg-black/5",
551
- "hover:text-slate-700",
551
+ "hover:text-secondary-700",
552
552
  "active:bg-black/10",
553
- "active:text-slate-800",
553
+ "active:text-secondary-800",
554
554
  "focus:bg-black/10",
555
- "focus:text-slate-800",
555
+ "focus:text-secondary-800",
556
556
  "disabled:bg-transparent",
557
- "disabled:text-slate-400",
557
+ "disabled:text-secondary-400",
558
558
  ],
559
559
  filled: [
560
560
  "group",
561
- "bg-blue-100",
562
- "text-blue-600",
563
- "hover:bg-blue-200",
564
- "hover:text-blue-700",
565
- "active:bg-blue-200",
566
- "active:text-blue-700",
567
- "focus:bg-blue-100",
568
- "focus:text-blue-600",
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-slate-300",
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-slate-200", "hover:bg-slate-200", "text-slate-400"],
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-slate-300"],
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-gray-400"]);
2194
+ const cvaEmptyValue = cvaMerge(["text-neutral-400"]);
2195
2195
 
2196
2196
  /**
2197
2197
  * Show intentionality in empty values in the UI
@@ -3713,7 +3713,7 @@ const cvaTabList = cvaMerge([
3713
3713
  "flex",
3714
3714
  "flex-row",
3715
3715
  "border-b",
3716
- "border-b-slate-200",
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-slate-900",
3739
+ "data-[state=active]:text-secondary-900",
3740
3740
  "data-[state=inactive]:font-medium",
3741
- "data-[state=inactive]:text-slate-700",
3742
- "data-[state=inactive]:hover:text-slate-900",
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-slate-400",
3745
- "data-[state=inactive]:disabled:text-slate-400",
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",
3
+ "version": "1.5.7",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -18,12 +18,12 @@
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.2",
22
- "@trackunit/css-class-variance-utilities": "1.4.1",
23
- "@trackunit/shared-utils": "1.6.1",
24
- "@trackunit/ui-icons": "1.4.1",
25
- "@trackunit/react-table-pagination": "1.4.1",
26
- "@trackunit/react-test-setup": "1.1.1"
21
+ "@trackunit/ui-design-tokens": "1.4.5",
22
+ "@trackunit/css-class-variance-utilities": "1.4.4",
23
+ "@trackunit/shared-utils": "1.6.4",
24
+ "@trackunit/ui-icons": "1.4.4",
25
+ "@trackunit/react-table-pagination": "1.4.4",
26
+ "@trackunit/react-test-setup": "1.1.4"
27
27
  },
28
28
  "module": "./index.esm.js",
29
29
  "main": "./index.cjs.js",