@trackunit/react-components 0.1.239 → 0.1.241

package/index.cjs.js

@@ -458,7 +458,7 @@ const cvaSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["box-border", "p
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {JSX.Element} Spinner component
  */
-const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId, }) => {
+const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId = "spinner", }) => {
     return (jsxRuntime.jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), children: jsxRuntime.jsx("div", { role: "spinbutton", className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId }) }));
 };
 
@@ -1008,34 +1008,29 @@ const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose,
 const cvaCollapse = cssClassVarianceUtilities.cvaMerge([
     "block",
     "w-full",
-    "border-b",
+    "border",
     "border-solid",
-    "border-neutral-100",
-    "pb-3",
-    "mb-4",
-    "last:border-0",
-    "last:m-0",
-    "only:border-0",
-    "only:m-0",
+    "border-secondary-200",
+    "rounded",
+    "overflow-hidden",
 ]);
-const cvaCollapseLabel = cssClassVarianceUtilities.cvaMerge(["block", "w-full", "cursor-pointer"]);
-const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"], {
-    defaultVariants: { layout: "fullwidth" },
-    variants: { layout: { fullwidth: "justify-between", compact: "justify-start" } },
+const cvaCollapseHeader = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "w-full",
+    "items-center",
+    "justify-between",
+    "cursor-pointer",
+    "bg-secondary-50",
+    "px-4",
+    "gap-4",
+    "py-2",
+    "transition-all",
+], {
+    variants: { expanded: { true: ["border-secondary-200", "border-b", "border-solid"], false: "" } },
 });
-cssClassVarianceUtilities.cvaMerge(["block", "relative", "w-full", "mt-1", "p-1"]);
+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 cvaCollapseIcon = cssClassVarianceUtilities.cvaMerge(["ease-in-out", "duration-200"], {
-    variants: {
-        expanded: {
-            false: "",
-            true: "rotate-180",
-        },
-    },
-    defaultVariants: {
-        expanded: false,
-    },
-});
 
 /**
  * The Collapse component is used to condense non-important information.
@@ -1043,7 +1038,7 @@ const cvaCollapseIcon = cssClassVarianceUtilities.cvaMerge(["ease-in-out", "dura
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */
-const Collapse = ({ id, initialExpanded = false, onToggle, label, children, layout = "fullwidth", className, dataTestId, }) => {
+const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerAddon, dataTestId, }) => {
     const [expanded, setExpanded] = React__namespace.useState(initialExpanded);
     const handleClick = React__namespace.useCallback((e) => {
         if (onToggle) {
@@ -1051,11 +1046,11 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, layo
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer({ layout }), children: [jsxRuntime.jsx(Text, { type: "span", weight: "bold", children: label }), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDown", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] }) }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaCollapseHeader({ expanded }), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, 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: "transparent", color: "secondary" })] }), 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", { className: cvaCollapse(), ref: ref, children: children }) }));
+    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 }) }) }));
 };
 
 const cvaCopyableText = cssClassVarianceUtilities.cvaMerge([

package/index.esm.js

@@ -428,7 +428,7 @@ const cvaSpinnerContainer = cvaMerge(["box-border", "p-0.5", "overflow-hidden"],
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {JSX.Element} Spinner component
  */
-const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId, }) => {
+const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId = "spinner", }) => {
     return (jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), children: jsx("div", { role: "spinbutton", className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId }) }));
 };
 
@@ -978,34 +978,29 @@ const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose,
 const cvaCollapse = cvaMerge([
     "block",
     "w-full",
-    "border-b",
+    "border",
     "border-solid",
-    "border-neutral-100",
-    "pb-3",
-    "mb-4",
-    "last:border-0",
-    "last:m-0",
-    "only:border-0",
-    "only:m-0",
+    "border-secondary-200",
+    "rounded",
+    "overflow-hidden",
 ]);
-const cvaCollapseLabel = cvaMerge(["block", "w-full", "cursor-pointer"]);
-const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center"], {
-    defaultVariants: { layout: "fullwidth" },
-    variants: { layout: { fullwidth: "justify-between", compact: "justify-start" } },
+const cvaCollapseHeader = cvaMerge([
+    "flex",
+    "w-full",
+    "items-center",
+    "justify-between",
+    "cursor-pointer",
+    "bg-secondary-50",
+    "px-4",
+    "gap-4",
+    "py-2",
+    "transition-all",
+], {
+    variants: { expanded: { true: ["border-secondary-200", "border-b", "border-solid"], false: "" } },
 });
-cvaMerge(["block", "relative", "w-full", "mt-1", "p-1"]);
+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 cvaCollapseIcon = cvaMerge(["ease-in-out", "duration-200"], {
-    variants: {
-        expanded: {
-            false: "",
-            true: "rotate-180",
-        },
-    },
-    defaultVariants: {
-        expanded: false,
-    },
-});
 
 /**
  * The Collapse component is used to condense non-important information.
@@ -1013,7 +1008,7 @@ const cvaCollapseIcon = cvaMerge(["ease-in-out", "duration-200"], {
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */
-const Collapse = ({ id, initialExpanded = false, onToggle, label, children, layout = "fullwidth", className, dataTestId, }) => {
+const Collapse = ({ id, initialExpanded = false, onToggle, label, children, className, headerAddon, dataTestId, }) => {
     const [expanded, setExpanded] = React.useState(initialExpanded);
     const handleClick = React.useCallback((e) => {
         if (onToggle) {
@@ -1021,11 +1016,11 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, layo
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsx("div", { className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: jsxs("div", { className: cvaCollapseLabelContainer({ layout }), children: [jsx(Text, { type: "span", weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDown", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] }) }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
+    return (jsxs("div", { className: cvaCollapse({ className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaCollapseHeader({ expanded }), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, 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: "transparent", color: "secondary" })] }), 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", { className: cvaCollapse(), ref: ref, children: children }) }));
+    return (jsx("div", { className: cvaCollapseAnimated(), 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.239",
+  "version": "0.1.241",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -19,9 +19,10 @@ export interface CollapseProps extends CommonProps {
      */
     label: React.ReactNode;
     /**
-     *  layout - The layout of the Collapse component. (full width is default)
+     * An addon to add to the header.
+     * This can be used for a status indicator or similar.
      */
-    layout?: "fullwidth" | "compact";
+    headerAddon?: React.ReactNode;
 }
 /**
  * The Collapse component is used to condense non-important information.
@@ -29,4 +30,4 @@ export interface CollapseProps extends CommonProps {
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
  */
-export declare const Collapse: ({ id, initialExpanded, onToggle, label, children, layout, className, dataTestId, }: CollapseProps) => JSX.Element;
+export declare const Collapse: ({ id, initialExpanded, onToggle, label, children, className, headerAddon, dataTestId, }: CollapseProps) => JSX.Element;

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

@@ -1,10 +1,7 @@
 export declare const cvaCollapse: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaCollapseLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaCollapseLabelContainer: (props?: ({
-    layout?: "fullwidth" | "compact" | null | undefined;
+export declare const cvaCollapseHeader: (props?: ({
+    expanded?: boolean | 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?: 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 cvaCollapseIcon: (props?: ({
-    expanded?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;