@trackunit/react-components 1.4.34 → 1.4.36

package/index.cjs.js

@@ -1839,10 +1839,10 @@ const cvaCollapseHeader = cssClassVarianceUtilities.cvaMerge([
     "transition-all",
 ], {
     variants: {
-        expanded: { true: ["border-secondary-200", "border-b", "border-solid", "bg-secondary-50"], false: "" },
+        expanded: { true: ["border-secondary-200", "border-b", "border-solid"], false: "" },
     },
 });
-const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-2"]);
+const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "w-full", "justify-between"]);
 const cvaCollapsible = cssClassVarianceUtilities.cvaMerge(["block", "relative"], {
     variants: {
         extraPadding: {
@@ -1865,7 +1865,7 @@ const cvaCollapseAnimated = cssClassVarianceUtilities.cvaMerge(["overflow-y-hidd
 const cvaChevronIcon = cssClassVarianceUtilities.cvaMerge(["transition-transform"], {
     variants: {
         expanded: {
-            true: "rotate-90",
+            true: "rotate-180",
             false: "",
         },
     },
@@ -1900,7 +1900,7 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsxRuntime.jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, children: expanded || animate ? children : null })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [headerAddon ? headerAddon : null, jsxRuntime.jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronUp", size: "medium" })] })] }) }), jsxRuntime.jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, children: expanded || animate ? children : null })] }));
 };
 const Collapsible = ({ children, expanded, id, extraPadding }) => {
     const ref = react.useRef(null);
@@ -3044,22 +3044,15 @@ const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
 const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
     variants: {
         color: {
-            primary: "text-primary-600",
-            secondary: "text-secondary-600",
             neutral: "text-neutral-400",
-            info: "text-info-600",
-            success: "text-success-600",
-            warning: "text-warning-600",
-            danger: "text-danger-600",
-            black: "text-black",
-            white: "text-white",
-            critical: "text-critical-500",
-            low: "text-low-500",
+            info: "text-info-700",
+            success: "text-success-700",
+            warning: "text-warning-700",
+            danger: "text-danger-700",
         },
         size: {
             small: "text-xs",
             medium: "text-sm",
-            large: "text-base",
         },
     },
     defaultVariants: {
@@ -3070,17 +3063,11 @@ const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["pl-1", "pr-1", "font
 const cvaNoticeIcon = cssClassVarianceUtilities.cvaMerge(["rounded-full", "items-center", "justify-center", "flex", "relative"], {
     variants: {
         color: {
-            primary: "text-primary-600",
-            secondary: "text-secondary-600",
-            neutral: "text-neutral-300",
+            neutral: "text-neutral-400",
             info: "text-info-600",
             success: "text-success-600",
-            warning: "text-warning-600",
+            warning: "text-warning-500",
             danger: "text-danger-600",
-            black: "text-black",
-            white: "text-white",
-            critical: "text-critical-500",
-            low: "text-low-500",
         },
     },
     defaultVariants: {

package/index.esm.js

@@ -1837,10 +1837,10 @@ const cvaCollapseHeader = cvaMerge([
     "transition-all",
 ], {
     variants: {
-        expanded: { true: ["border-secondary-200", "border-b", "border-solid", "bg-secondary-50"], false: "" },
+        expanded: { true: ["border-secondary-200", "border-b", "border-solid"], false: "" },
     },
 });
-const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center", "gap-2"]);
+const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center", "w-full", "justify-between"]);
 const cvaCollapsible = cvaMerge(["block", "relative"], {
     variants: {
         extraPadding: {
@@ -1863,7 +1863,7 @@ const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"], {
 const cvaChevronIcon = cvaMerge(["transition-transform"], {
     variants: {
         expanded: {
-            true: "rotate-90",
+            true: "rotate-180",
             false: "",
         },
     },
@@ -1898,7 +1898,7 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxs("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: [jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, children: expanded || animate ? children : null })] }));
+    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsx("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, className: headerClassName }), onClick: handleClick, role: "button", children: jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Text, { id: LABEL_ID, type: "span", weight: "bold", children: label }), jsxs("div", { className: "flex items-center gap-2", children: [headerAddon ? headerAddon : null, jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronUp", size: "medium" })] })] }) }), jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, children: expanded || animate ? children : null })] }));
 };
 const Collapsible = ({ children, expanded, id, extraPadding }) => {
     const ref = useRef(null);
@@ -3042,22 +3042,15 @@ const cvaNotice = cvaMerge(["flex", "items-center"]);
 const cvaNoticeLabel = cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
     variants: {
         color: {
-            primary: "text-primary-600",
-            secondary: "text-secondary-600",
             neutral: "text-neutral-400",
-            info: "text-info-600",
-            success: "text-success-600",
-            warning: "text-warning-600",
-            danger: "text-danger-600",
-            black: "text-black",
-            white: "text-white",
-            critical: "text-critical-500",
-            low: "text-low-500",
+            info: "text-info-700",
+            success: "text-success-700",
+            warning: "text-warning-700",
+            danger: "text-danger-700",
         },
         size: {
             small: "text-xs",
             medium: "text-sm",
-            large: "text-base",
         },
     },
     defaultVariants: {
@@ -3068,17 +3061,11 @@ const cvaNoticeLabel = cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
 const cvaNoticeIcon = cvaMerge(["rounded-full", "items-center", "justify-center", "flex", "relative"], {
     variants: {
         color: {
-            primary: "text-primary-600",
-            secondary: "text-secondary-600",
-            neutral: "text-neutral-300",
+            neutral: "text-neutral-400",
             info: "text-info-600",
             success: "text-success-600",
-            warning: "text-warning-600",
+            warning: "text-warning-500",
             danger: "text-danger-600",
-            black: "text-black",
-            white: "text-white",
-            critical: "text-critical-500",
-            low: "text-low-500",
         },
     },
     defaultVariants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.34",
+  "version": "1.4.36",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Notice/Notice.d.ts

@@ -1,4 +1,4 @@
-import { CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
+import { GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export interface NoticeProps extends CommonProps {
@@ -9,11 +9,11 @@ export interface NoticeProps extends CommonProps {
     /**
      * A color token used to style the icon and the icon background
      */
-    color?: Exclude<GeneralColors | IntentColors | CriticalityColors, "good">;
+    color?: Extract<GeneralColors, "neutral"> | IntentColors;
     /**
      * The size of the label's text
      */
-    size?: "small" | "medium" | "large";
+    size?: "small" | "medium";
     /**
      * A text label to be displayed next to the icon
      */

package/src/components/Notice/Notice.variants.d.ts

@@ -1,8 +1,8 @@
 export declare const cvaNotice: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaNoticeLabel: (props?: ({
-    color?: "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "black" | "white" | "critical" | "low" | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
+    color?: "neutral" | "info" | "success" | "warning" | "danger" | null | undefined;
+    size?: "small" | "medium" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaNoticeIcon: (props?: ({
-    color?: "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "black" | "white" | "critical" | "low" | null | undefined;
+    color?: "neutral" | "info" | "success" | "warning" | "danger" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;