@trackunit/react-components 0.1.298 → 0.1.300

package/index.cjs.js

@@ -1667,30 +1667,52 @@ const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose,
 
 const cvaCollapse = cssClassVarianceUtilities.cvaMerge([
     "block",
-    "w-full",
     "border",
     "border-solid",
     "border-secondary-200",
-    "rounded",
+    "rounded-md",
     "overflow-hidden",
 ]);
 const cvaCollapseHeader = cssClassVarianceUtilities.cvaMerge([
     "flex",
-    "w-full",
     "items-center",
     "justify-between",
     "cursor-pointer",
     "bg-secondary-50",
-    "px-4",
+    "hover:bg-secondary-200",
+    "px-3",
     "gap-4",
-    "py-2",
+    "py-1.5",
     "transition-all",
 ], {
     variants: { expanded: { true: ["border-secondary-200", "border-b", "border-solid"], false: "" } },
 });
 const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-2"]);
-const cvaCollapsible = cssClassVarianceUtilities.cvaMerge(["block", "relative", "w-full", "p-4"]);
-const cvaCollapseAnimated = cssClassVarianceUtilities.cvaMerge(["overflow-y-hidden", "transition-all"]);
+const cvaCollapsible = cssClassVarianceUtilities.cvaMerge(["block", "relative", "p-4"]);
+const cvaCollapseAnimated = cssClassVarianceUtilities.cvaMerge(["overflow-y-hidden", "transition-all"], {
+    variants: {
+        expanded: {
+            true: "block",
+            false: "hidden",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
+const cvaChevronIcon = cssClassVarianceUtilities.cvaMerge([
+    "transition-transform"
+], {
+    variants: {
+        expanded: {
+            true: "rotate-90",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
 
 /**
  * The Collapse component is used to condense non-important information.
@@ -1706,11 +1728,11 @@ 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(Text, { type: "span", weight: "bold", children: label }), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "ghost-neutral" })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    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, { className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsxRuntime.jsx(Text, { type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = reactUse.useMeasure();
-    return (jsxRuntime.jsx("div", { className: cvaCollapseAnimated(), id: id, style: { height: expanded ? height : "0" }, children: jsxRuntime.jsx("div", { ref: ref, children: jsxRuntime.jsx("div", { className: cvaCollapsible(), children: children }) }) }));
+    return (jsxRuntime.jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsxRuntime.jsx("div", { ref: ref, children: jsxRuntime.jsx("div", { className: cvaCollapsible(), children: children }) }) }));
 };
 
 const cvaCopyableText = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -1636,30 +1636,52 @@ const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose,
 
 const cvaCollapse = cvaMerge([
     "block",
-    "w-full",
     "border",
     "border-solid",
     "border-secondary-200",
-    "rounded",
+    "rounded-md",
     "overflow-hidden",
 ]);
 const cvaCollapseHeader = cvaMerge([
     "flex",
-    "w-full",
     "items-center",
     "justify-between",
     "cursor-pointer",
     "bg-secondary-50",
-    "px-4",
+    "hover:bg-secondary-200",
+    "px-3",
     "gap-4",
-    "py-2",
+    "py-1.5",
     "transition-all",
 ], {
     variants: { expanded: { true: ["border-secondary-200", "border-b", "border-solid"], false: "" } },
 });
 const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center", "gap-2"]);
-const cvaCollapsible = cvaMerge(["block", "relative", "w-full", "p-4"]);
-const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"]);
+const cvaCollapsible = cvaMerge(["block", "relative", "p-4"]);
+const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"], {
+    variants: {
+        expanded: {
+            true: "block",
+            false: "hidden",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
+const cvaChevronIcon = cvaMerge([
+    "transition-transform"
+], {
+    variants: {
+        expanded: {
+            true: "rotate-90",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
 
 /**
  * The Collapse component is used to condense non-important information.
@@ -1675,11 +1697,11 @@ 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(Text, { type: "span", weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { name: "ChevronUpDown", size: "small" }), size: "medium", variant: "ghost-neutral" })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    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, { className: cvaChevronIcon({ expanded }), name: "ChevronRight", size: "small" }), jsx(Text, { type: "span", weight: "bold", children: label })] }), headerAddon ? headerAddon : null] }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure();
-    return (jsx("div", { className: cvaCollapseAnimated(), id: id, style: { height: expanded ? height : "0" }, children: jsx("div", { ref: ref, children: jsx("div", { className: cvaCollapsible(), children: children }) }) }));
+    return (jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsx("div", { ref: ref, children: jsx("div", { className: cvaCollapsible(), children: children }) }) }));
 };
 
 const cvaCopyableText = cvaMerge([

package/package.json

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

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

@@ -4,4 +4,9 @@ export declare const cvaCollapseHeader: (props?: ({
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaCollapseLabelContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaCollapsible: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaCollapseAnimated: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCollapseAnimated: (props?: ({
+    expanded?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaChevronIcon: (props?: ({
+    expanded?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;