@trackunit/react-components 1.10.1 → 1.10.3

package/index.cjs.js

@@ -2177,39 +2177,108 @@ const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClose
         }), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxRuntime.jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClose ? (jsxRuntime.jsx(IconButton, { className: "!h-min", dataTestId: "card-header-close-button", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
 };
 
-const cvaCollapse = cssClassVarianceUtilities.cvaMerge([
-    "block",
-    "border",
-    "border-solid",
-    "border-neutral-300",
-    "rounded-md",
-    "overflow-hidden",
-    "bg-white",
-]);
-const cvaCollapseHeader = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "items-center",
-    "justify-between",
-    "cursor-pointer",
-    "bg-white",
-    "hover:bg-neutral-100",
-    "px-3",
-    "gap-4",
-    "py-1.5",
-    "transition-all",
-], {
+const cvaCollapse = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "overflow-hidden"], {
+    variants: {
+        variant: {
+            primary: ["border", "border-solid", "border-neutral-300", "rounded-md", "bg-white"],
+            secondary: "gap-3",
+        },
+    },
+});
+const cvaCollapseHeader = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "cursor-pointer", "transition-all", "group"], {
+    variants: {
+        expanded: { true: [], false: [] },
+        variant: {
+            primary: ["gap-4", "justify-between", "bg-white", "hover:bg-neutral-100"],
+            secondary: ["w-fit"],
+        },
+        extraPadding: {
+            true: [],
+            false: [],
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "primary",
+            expanded: true,
+            class: ["border-neutral-200", "border-b", "border-solid"],
+        },
+        {
+            variant: "primary",
+            expanded: false,
+            class: [],
+        },
+        {
+            variant: "primary",
+            extraPadding: true,
+            class: ["px-4", "py-1.5"],
+        },
+        {
+            variant: "primary",
+            extraPadding: false,
+            class: ["px-3", "py-1.5"],
+        },
+        {
+            variant: "secondary",
+            extraPadding: true,
+            class: ["px-4", "py-1.5"],
+        },
+        {
+            variant: "secondary",
+            extraPadding: false,
+            class: [],
+        },
+    ],
+});
+const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"], {
     variants: {
-        expanded: { true: ["border-neutral-200", "border-b", "border-solid"], false: "" },
+        variant: {
+            primary: ["w-full", "justify-between"],
+            secondary: ["gap-1", "text-primary-600"],
+        },
+    },
+});
+const cvaCollapseLabel = cssClassVarianceUtilities.cvaMerge([""], {
+    variants: {
+        variant: {
+            primary: [""],
+            secondary: ["group-hover:underline", "text-primary-600"],
+        },
     },
 });
-const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "w-full", "justify-between"]);
 const cvaCollapsible = cssClassVarianceUtilities.cvaMerge(["block", "relative"], {
     variants: {
+        variant: {
+            primary: [],
+            secondary: [],
+        },
         extraPadding: {
-            true: "p-4",
-            false: "",
+            true: [],
+            false: [],
         },
     },
+    compoundVariants: [
+        {
+            variant: "primary",
+            extraPadding: true,
+            class: ["p-4"],
+        },
+        {
+            variant: "primary",
+            extraPadding: false,
+            class: ["px-3", "py-1.5"],
+        },
+        {
+            variant: "secondary",
+            extraPadding: true,
+            class: ["px-4", "py-1.5"],
+        },
+        {
+            variant: "secondary",
+            extraPadding: false,
+            class: [],
+        },
+    ],
 });
 const cvaCollapseAnimated = cssClassVarianceUtilities.cvaMerge(["overflow-y-hidden", "transition-all"], {
     variants: {
@@ -2251,7 +2320,7 @@ const cvaChevronIcon = cssClassVarianceUtilities.cvaMerge(["transition-transform
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {ReactElement} Collapse component
  */
-const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate = true, extraPadding = true, }) => {
+const Collapse = ({ id, variant = "primary", initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate = true, extraPadding = true, }) => {
     const LABEL_ID = sharedUtils.uuidv4();
     const [expanded, setExpanded] = react.useState(initialExpanded);
     const handleClick = react.useCallback((e) => {
@@ -2260,12 +2329,12 @@ 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.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 !== null && headerAddon !== undefined ? 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 })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ variant: variant, className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, variant, extraPadding, className: headerClassName }), onClick: handleClick, role: "button", children: jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer({ variant }), children: [jsxRuntime.jsx(Text, { className: cvaCollapseLabel({ variant }), id: LABEL_ID, size: variant === "secondary" ? "small" : "medium", type: "span", weight: "bold", children: label }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [headerAddon !== null && headerAddon !== undefined && variant !== "secondary" ? headerAddon : null, jsxRuntime.jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronUp", size: variant === "secondary" ? "small" : "medium" })] })] }) }), jsxRuntime.jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, variant: variant, children: expanded || animate ? children : null })] }));
 };
-const Collapsible = ({ children, expanded, id, extraPadding = true }) => {
+const Collapsible = ({ children, expanded, id, variant, extraPadding }) => {
     const ref = react.useRef(null);
     const { height } = useGeometry(ref);
-    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({ extraPadding }), children: children }) }) }));
+    return (jsxRuntime.jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height || "auto" : "0" }, children: jsxRuntime.jsx("div", { ref: ref, children: jsxRuntime.jsx("div", { className: cvaCollapsible({ variant, extraPadding }), children: children }) }) }));
 };
 
 /**

package/index.esm.js

@@ -2175,39 +2175,108 @@ const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClose
         }), "data-testid": dataTestId, children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClose ? (jsx(IconButton, { className: "!h-min", dataTestId: "card-header-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
 };
 
-const cvaCollapse = cvaMerge([
-    "block",
-    "border",
-    "border-solid",
-    "border-neutral-300",
-    "rounded-md",
-    "overflow-hidden",
-    "bg-white",
-]);
-const cvaCollapseHeader = cvaMerge([
-    "flex",
-    "items-center",
-    "justify-between",
-    "cursor-pointer",
-    "bg-white",
-    "hover:bg-neutral-100",
-    "px-3",
-    "gap-4",
-    "py-1.5",
-    "transition-all",
-], {
+const cvaCollapse = cvaMerge(["flex", "flex-col", "overflow-hidden"], {
+    variants: {
+        variant: {
+            primary: ["border", "border-solid", "border-neutral-300", "rounded-md", "bg-white"],
+            secondary: "gap-3",
+        },
+    },
+});
+const cvaCollapseHeader = cvaMerge(["flex", "items-center", "cursor-pointer", "transition-all", "group"], {
+    variants: {
+        expanded: { true: [], false: [] },
+        variant: {
+            primary: ["gap-4", "justify-between", "bg-white", "hover:bg-neutral-100"],
+            secondary: ["w-fit"],
+        },
+        extraPadding: {
+            true: [],
+            false: [],
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "primary",
+            expanded: true,
+            class: ["border-neutral-200", "border-b", "border-solid"],
+        },
+        {
+            variant: "primary",
+            expanded: false,
+            class: [],
+        },
+        {
+            variant: "primary",
+            extraPadding: true,
+            class: ["px-4", "py-1.5"],
+        },
+        {
+            variant: "primary",
+            extraPadding: false,
+            class: ["px-3", "py-1.5"],
+        },
+        {
+            variant: "secondary",
+            extraPadding: true,
+            class: ["px-4", "py-1.5"],
+        },
+        {
+            variant: "secondary",
+            extraPadding: false,
+            class: [],
+        },
+    ],
+});
+const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center"], {
     variants: {
-        expanded: { true: ["border-neutral-200", "border-b", "border-solid"], false: "" },
+        variant: {
+            primary: ["w-full", "justify-between"],
+            secondary: ["gap-1", "text-primary-600"],
+        },
+    },
+});
+const cvaCollapseLabel = cvaMerge([""], {
+    variants: {
+        variant: {
+            primary: [""],
+            secondary: ["group-hover:underline", "text-primary-600"],
+        },
     },
 });
-const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center", "w-full", "justify-between"]);
 const cvaCollapsible = cvaMerge(["block", "relative"], {
     variants: {
+        variant: {
+            primary: [],
+            secondary: [],
+        },
         extraPadding: {
-            true: "p-4",
-            false: "",
+            true: [],
+            false: [],
         },
     },
+    compoundVariants: [
+        {
+            variant: "primary",
+            extraPadding: true,
+            class: ["p-4"],
+        },
+        {
+            variant: "primary",
+            extraPadding: false,
+            class: ["px-3", "py-1.5"],
+        },
+        {
+            variant: "secondary",
+            extraPadding: true,
+            class: ["px-4", "py-1.5"],
+        },
+        {
+            variant: "secondary",
+            extraPadding: false,
+            class: [],
+        },
+    ],
 });
 const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"], {
     variants: {
@@ -2249,7 +2318,7 @@ const cvaChevronIcon = cvaMerge(["transition-transform"], {
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {ReactElement} Collapse component
  */
-const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate = true, extraPadding = true, }) => {
+const Collapse = ({ id, variant = "primary", initialExpanded = false, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate = true, extraPadding = true, }) => {
     const LABEL_ID = uuidv4();
     const [expanded, setExpanded] = useState(initialExpanded);
     const handleClick = useCallback((e) => {
@@ -2258,12 +2327,12 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    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 !== null && headerAddon !== undefined ? 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 })] }));
+    return (jsxs("div", { className: cvaCollapse({ variant: variant, className }), "data-testid": dataTestId, children: [jsx("div", { "aria-controls": id, "aria-expanded": expanded, className: cvaCollapseHeader({ expanded, variant, extraPadding, className: headerClassName }), onClick: handleClick, role: "button", children: jsxs("div", { className: cvaCollapseLabelContainer({ variant }), children: [jsx(Text, { className: cvaCollapseLabel({ variant }), id: LABEL_ID, size: variant === "secondary" ? "small" : "medium", type: "span", weight: "bold", children: label }), jsxs("div", { className: "flex items-center gap-2", children: [headerAddon !== null && headerAddon !== undefined && variant !== "secondary" ? headerAddon : null, jsx(Icon, { ariaLabelledBy: LABEL_ID, className: cvaChevronIcon({ expanded }), name: "ChevronUp", size: variant === "secondary" ? "small" : "medium" })] })] }) }), jsx(Collapsible, { expanded: expanded, extraPadding: extraPadding, id: id, variant: variant, children: expanded || animate ? children : null })] }));
 };
-const Collapsible = ({ children, expanded, id, extraPadding = true }) => {
+const Collapsible = ({ children, expanded, id, variant, extraPadding }) => {
     const ref = useRef(null);
     const { height } = useGeometry(ref);
-    return (jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height : "0" }, children: jsx("div", { ref: ref, children: jsx("div", { className: cvaCollapsible({ extraPadding }), children: children }) }) }));
+    return (jsx("div", { className: cvaCollapseAnimated({ expanded }), id: id, style: { height: expanded ? height || "auto" : "0" }, children: jsx("div", { ref: ref, children: jsx("div", { className: cvaCollapsible({ variant, extraPadding }), children: children }) }) }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.10.1",
+  "version": "1.10.3",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,11 +16,11 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.42",
-    "@trackunit/css-class-variance-utilities": "1.7.42",
-    "@trackunit/shared-utils": "1.9.42",
-    "@trackunit/ui-icons": "1.7.43",
-    "@trackunit/react-test-setup": "1.4.42",
+    "@trackunit/ui-design-tokens": "1.7.43",
+    "@trackunit/css-class-variance-utilities": "1.7.43",
+    "@trackunit/shared-utils": "1.9.43",
+    "@trackunit/ui-icons": "1.7.44",
+    "@trackunit/react-test-setup": "1.4.43",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12"

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

@@ -2,6 +2,10 @@ import { MouseEvent, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 export interface CollapseProps extends CommonProps {
     id: string;
+    /**
+     * Visual variant of the collapse component.
+     */
+    variant?: "primary" | "secondary";
     /**
      * Expands the collapse component during initialization.
      */
@@ -50,4 +54,4 @@ export interface CollapseProps extends CommonProps {
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {ReactElement} Collapse component
  */
-export declare const Collapse: ({ id, initialExpanded, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate, extraPadding, }: CollapseProps) => ReactElement;
+export declare const Collapse: ({ id, variant, initialExpanded, onToggle, label, children, className, headerClassName, headerAddon, dataTestId, animate, extraPadding, }: CollapseProps) => ReactElement;

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

@@ -1,9 +1,19 @@
-export declare const cvaCollapse: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCollapse: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaCollapseHeader: (props?: ({
     expanded?: boolean | null | undefined;
+    variant?: "primary" | "secondary" | null | undefined;
+    extraPadding?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaCollapseLabelContainer: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaCollapseLabel: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
 } & 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?: ({
+    variant?: "primary" | "secondary" | null | undefined;
     extraPadding?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaCollapseAnimated: (props?: ({