@trackunit/react-components 1.8.0 → 1.8.2

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 (7) hide show
  1. package/index.cjs.js +40 -34
  2. package/index.esm.js +40 -34
  3. package/package.json +7 -7
  4. package/src/components/buttons/Button/Button.d.ts +5 -2
  5. package/src/components/buttons/shared/ButtonProps.d.ts +2 -2
  6. package/src/components/buttons/BackToTopButton/BackToTopButton.d.ts +0 -14
  7. package/src/components/buttons/BackToTopButton/BackToTopButton.variants.d.ts +0 -3
package/index.cjs.js CHANGED
@@ -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-secondary-400",
493
- "disabled:text-secondary-200",
492
+ "disabled:bg-neutral-400",
493
+ "disabled:text-neutral-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-secondary-400",
502
- "disabled:text-secondary-200",
501
+ "disabled:bg-neutral-400",
502
+ "disabled:text-neutral-200",
503
503
  ],
504
504
  secondary: [
505
505
  "group",
506
506
  "bg-white",
507
507
  "border",
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",
508
+ "border-neutral-300",
509
+ "text-neutral-600",
510
+ "hover:bg-neutral-100",
511
+ "hover:text-neutral-700",
512
+ "focus:bg-neutral-200",
513
+ "focus:text-neutral-800",
514
+ "active:bg-neutral-200",
515
+ "active:text-neutral-800",
516
+ "disabled:bg-neutral-200",
517
+ "disabled:text-neutral-400",
518
518
  ],
519
519
  "secondary-danger": [
520
520
  "bg-white",
521
521
  "border",
522
- "border-secondary-300",
522
+ "border-neutral-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-secondary-300",
534
- "disabled:text-secondary-400",
533
+ "disabled:bg-neutral-300",
534
+ "disabled:text-neutral-400",
535
535
  ],
536
536
  ghost: [
537
537
  "bg-transparent",
@@ -543,20 +543,20 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
543
543
  "focus:bg-black/10",
544
544
  "focus:text-primary-800",
545
545
  "disabled:bg-transparent",
546
- "disabled:text-secondary-400",
546
+ "disabled:text-neutral-400",
547
547
  ],
548
548
  "ghost-neutral": [
549
549
  "group",
550
550
  "bg-transparent",
551
- "text-secondary-600",
551
+ "text-neutral-600",
552
552
  "hover:bg-black/5",
553
- "hover:text-secondary-700",
553
+ "hover:text-neutral-700",
554
554
  "active:bg-black/10",
555
- "active:text-secondary-800",
555
+ "active:text-neutral-800",
556
556
  "focus:bg-black/10",
557
- "focus:text-secondary-800",
557
+ "focus:text-neutral-800",
558
558
  "disabled:bg-transparent",
559
- "disabled:text-secondary-400",
559
+ "disabled:text-neutral-400",
560
560
  ],
561
561
  filled: [
562
562
  "group",
@@ -569,7 +569,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
569
569
  "focus:bg-primary-100",
570
570
  "focus:text-primary-600",
571
571
  "disabled:bg-transparent",
572
- "disabled:text-secondary-300",
572
+ "disabled:text-neutral-300",
573
573
  ],
574
574
  },
575
575
  size: {
@@ -614,7 +614,13 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
614
614
  false: "",
615
615
  },
616
616
  disabled: {
617
- true: ["cursor-not-allowed", "pointer-events-none", "bg-secondary-200", "hover:bg-secondary-200", "text-secondary-400"],
617
+ true: [
618
+ "cursor-not-allowed",
619
+ "pointer-events-none",
620
+ "bg-neutral-200",
621
+ "hover:bg-neutral-200",
622
+ "text-neutral-400",
623
+ ],
618
624
  false: [],
619
625
  },
620
626
  loading: {
@@ -656,7 +662,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
656
662
  {
657
663
  loading: true,
658
664
  variant: "secondary-danger",
659
- className: ["disabled:bg-white", "disabled:border-secondary-300"],
665
+ className: ["disabled:bg-white", "disabled:border-neutral-300"],
660
666
  },
661
667
  ],
662
668
  defaultVariants: {
@@ -697,18 +703,18 @@ const cvaButtonPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "items
697
703
  primary: [],
698
704
  "primary-danger": [],
699
705
  secondary: [
700
- "text-secondary-400",
701
- "group-focus:text-secondary-400",
702
- "group-hover:text-secondary-500",
703
- "group-active:text-secondary-600",
706
+ "text-neutral-400",
707
+ "group-focus:text-neutral-400",
708
+ "group-hover:text-neutral-500",
709
+ "group-active:text-neutral-600",
704
710
  ],
705
711
  "secondary-danger": [],
706
712
  ghost: [],
707
713
  "ghost-neutral": [
708
- "text-secondary-400",
709
- "group-focus:text-secondary-400",
710
- "group-hover:text-secondary-500",
711
- "group-active:text-secondary-600",
714
+ "text-neutral-400",
715
+ "group-focus:text-neutral-400",
716
+ "group-hover:text-neutral-500",
717
+ "group-active:text-neutral-600",
712
718
  ],
713
719
  filled: [],
714
720
  },
package/index.esm.js CHANGED
@@ -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-secondary-400",
491
- "disabled:text-secondary-200",
490
+ "disabled:bg-neutral-400",
491
+ "disabled:text-neutral-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-secondary-400",
500
- "disabled:text-secondary-200",
499
+ "disabled:bg-neutral-400",
500
+ "disabled:text-neutral-200",
501
501
  ],
502
502
  secondary: [
503
503
  "group",
504
504
  "bg-white",
505
505
  "border",
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",
506
+ "border-neutral-300",
507
+ "text-neutral-600",
508
+ "hover:bg-neutral-100",
509
+ "hover:text-neutral-700",
510
+ "focus:bg-neutral-200",
511
+ "focus:text-neutral-800",
512
+ "active:bg-neutral-200",
513
+ "active:text-neutral-800",
514
+ "disabled:bg-neutral-200",
515
+ "disabled:text-neutral-400",
516
516
  ],
517
517
  "secondary-danger": [
518
518
  "bg-white",
519
519
  "border",
520
- "border-secondary-300",
520
+ "border-neutral-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-secondary-300",
532
- "disabled:text-secondary-400",
531
+ "disabled:bg-neutral-300",
532
+ "disabled:text-neutral-400",
533
533
  ],
534
534
  ghost: [
535
535
  "bg-transparent",
@@ -541,20 +541,20 @@ const cvaButton = cvaMerge([
541
541
  "focus:bg-black/10",
542
542
  "focus:text-primary-800",
543
543
  "disabled:bg-transparent",
544
- "disabled:text-secondary-400",
544
+ "disabled:text-neutral-400",
545
545
  ],
546
546
  "ghost-neutral": [
547
547
  "group",
548
548
  "bg-transparent",
549
- "text-secondary-600",
549
+ "text-neutral-600",
550
550
  "hover:bg-black/5",
551
- "hover:text-secondary-700",
551
+ "hover:text-neutral-700",
552
552
  "active:bg-black/10",
553
- "active:text-secondary-800",
553
+ "active:text-neutral-800",
554
554
  "focus:bg-black/10",
555
- "focus:text-secondary-800",
555
+ "focus:text-neutral-800",
556
556
  "disabled:bg-transparent",
557
- "disabled:text-secondary-400",
557
+ "disabled:text-neutral-400",
558
558
  ],
559
559
  filled: [
560
560
  "group",
@@ -567,7 +567,7 @@ const cvaButton = cvaMerge([
567
567
  "focus:bg-primary-100",
568
568
  "focus:text-primary-600",
569
569
  "disabled:bg-transparent",
570
- "disabled:text-secondary-300",
570
+ "disabled:text-neutral-300",
571
571
  ],
572
572
  },
573
573
  size: {
@@ -612,7 +612,13 @@ const cvaButton = cvaMerge([
612
612
  false: "",
613
613
  },
614
614
  disabled: {
615
- true: ["cursor-not-allowed", "pointer-events-none", "bg-secondary-200", "hover:bg-secondary-200", "text-secondary-400"],
615
+ true: [
616
+ "cursor-not-allowed",
617
+ "pointer-events-none",
618
+ "bg-neutral-200",
619
+ "hover:bg-neutral-200",
620
+ "text-neutral-400",
621
+ ],
616
622
  false: [],
617
623
  },
618
624
  loading: {
@@ -654,7 +660,7 @@ const cvaButton = cvaMerge([
654
660
  {
655
661
  loading: true,
656
662
  variant: "secondary-danger",
657
- className: ["disabled:bg-white", "disabled:border-secondary-300"],
663
+ className: ["disabled:bg-white", "disabled:border-neutral-300"],
658
664
  },
659
665
  ],
660
666
  defaultVariants: {
@@ -695,18 +701,18 @@ const cvaButtonPrefixSuffix = cvaMerge(["flex", "items-center"], {
695
701
  primary: [],
696
702
  "primary-danger": [],
697
703
  secondary: [
698
- "text-secondary-400",
699
- "group-focus:text-secondary-400",
700
- "group-hover:text-secondary-500",
701
- "group-active:text-secondary-600",
704
+ "text-neutral-400",
705
+ "group-focus:text-neutral-400",
706
+ "group-hover:text-neutral-500",
707
+ "group-active:text-neutral-600",
702
708
  ],
703
709
  "secondary-danger": [],
704
710
  ghost: [],
705
711
  "ghost-neutral": [
706
- "text-secondary-400",
707
- "group-focus:text-secondary-400",
708
- "group-hover:text-secondary-500",
709
- "group-active:text-secondary-600",
712
+ "text-neutral-400",
713
+ "group-focus:text-neutral-400",
714
+ "group-hover:text-neutral-500",
715
+ "group-active:text-neutral-600",
710
716
  ],
711
717
  filled: [],
712
718
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-components",
3
- "version": "1.8.0",
3
+ "version": "1.8.2",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -17,12 +17,12 @@
17
17
  "@floating-ui/react": "^0.26.25",
18
18
  "string-ts": "^2.0.0",
19
19
  "tailwind-merge": "^2.0.0",
20
- "@trackunit/ui-design-tokens": "1.6.34",
21
- "@trackunit/css-class-variance-utilities": "1.6.33",
22
- "@trackunit/shared-utils": "1.8.33",
23
- "@trackunit/ui-icons": "1.6.32",
24
- "@trackunit/react-table-pagination": "1.6.32",
25
- "@trackunit/react-test-setup": "1.3.33",
20
+ "@trackunit/ui-design-tokens": "1.6.35",
21
+ "@trackunit/css-class-variance-utilities": "1.6.34",
22
+ "@trackunit/shared-utils": "1.8.34",
23
+ "@trackunit/ui-icons": "1.6.33",
24
+ "@trackunit/react-table-pagination": "1.6.33",
25
+ "@trackunit/react-test-setup": "1.3.34",
26
26
  "@tanstack/react-router": "1.114.29"
27
27
  },
28
28
  "module": "./index.esm.js",
package/src/components/buttons/Button/Button.d.ts CHANGED
@@ -12,11 +12,11 @@ export interface ButtonProps extends Omit<ButtonCommonProps, "size"> {
12
12
  */
13
13
  fullWidth?: boolean;
14
14
  /**
15
- * The button prefix.
15
+ * Icon or element displayed before the button text. Commonly used for leading icons that represent the action.
16
16
  */
17
17
  prefix?: ReactNode;
18
18
  /**
19
- * The button suffix.
19
+ * Icon or element displayed after the button text. Commonly used for directional icons.
20
20
  */
21
21
  suffix?: ReactNode;
22
22
  /**
@@ -39,6 +39,9 @@ export interface ButtonProps extends Omit<ButtonCommonProps, "size"> {
39
39
  * A ref for the component
40
40
  */
41
41
  ref?: Ref<HTMLButtonElement>;
42
+ /**
43
+ * The size of the button. "ExtraSmall" is only used for IconButtons.
44
+ */
42
45
  size?: "extraSmall" | Size;
43
46
  }
44
47
  /**
package/src/components/buttons/shared/ButtonProps.d.ts CHANGED
@@ -27,11 +27,11 @@ export interface ButtonCommonProps extends CommonProps {
27
27
  */
28
28
  square?: boolean;
29
29
  /**
30
- * The button's variant. Values are primary, secondary, primary-danger, secondary-danger, ghost and ghost-neutral.
30
+ * The button's variant. "Filled" is only used for filters.
31
31
  */
32
32
  variant?: ButtonVariant;
33
33
  /**
34
- * The size of the button.
34
+ * The size of the button. "ExtraSmall" is only used for IconButtons.
35
35
  */
36
36
  size?: Size;
37
37
  /**
package/src/components/buttons/BackToTopButton/BackToTopButton.d.ts DELETED
@@ -1,14 +0,0 @@
1
- import { CommonProps, Size } from "../../../common";
2
- export type BackToTopColor = "primary" | "secondary";
3
- export interface StyledBackToTopProps {
4
- $color?: BackToTopColor;
5
- }
6
- export interface BackToTopProps extends CommonProps {
7
- color?: BackToTopColor;
8
- size?: Size;
9
- }
10
- /**
11
- * BackToTopButton appears at the bottom-right corner of the screen when the user scrolls down the page. When clicked, the page scrolls smoothly to the top.
12
-
13
- */
14
- export declare const BackToTopButton: ({ color, size, dataTestId, className }: BackToTopProps) => import("react/jsx-runtime").JSX.Element;
package/src/components/buttons/BackToTopButton/BackToTopButton.variants.d.ts DELETED
@@ -1,3 +0,0 @@
1
- export declare const cvaBackToTopButton: (props?: ({
2
- color?: "primary" | "secondary" | null | undefined;
3
- } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;