@trackunit/react-components 1.4.35 → 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);

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);

package/package.json

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