@trackunit/react-components 0.1.135 → 0.1.136

package/index.cjs

@@ -1168,7 +1168,10 @@ const cvaCollapse = cssClassVarianceUtilities.cvaMerge([
     "only:m-0",
 ]);
 const cvaCollapseLabel = cssClassVarianceUtilities.cvaMerge(["block", "w-full", "cursor-pointer"]);
-const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "justify-between"]);
+const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"], {
+    defaultVariants: { layout: "fullwidth" },
+    variants: { layout: { fullwidth: "justify-between", compact: "justify-start" } },
+});
 cssClassVarianceUtilities.cvaMerge(["block", "relative", "w-full", "mt-1", "p-1"]);
 const cvaCollapseAnimated = cssClassVarianceUtilities.cvaMerge(["overflow-y-hidden", "transition-all"]);
 const cvaCollapseIcon = cssClassVarianceUtilities.cvaMerge(["ease-in-out", "duration-200"], {
@@ -1189,7 +1192,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, className, dataTestId, }) => {
+const Collapse = ({ id, initialExpanded = false, onToggle, label, children, layout = "fullwidth", className, dataTestId, }) => {
     const [expanded, setExpanded] = React__namespace.useState(initialExpanded);
     const handleClick = React__namespace.useCallback((e) => {
         if (onToggle) {
@@ -1197,7 +1200,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.jsx("div", { className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: jsxRuntime.jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsxRuntime.jsx(Text, { weight: "bold", children: label }), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDownIcon", 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.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: "ChevronDownIcon", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] }) }), jsxRuntime.jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure$1();

package/index.js

@@ -1141,7 +1141,10 @@ const cvaCollapse = cvaMerge([
     "only:m-0",
 ]);
 const cvaCollapseLabel = cvaMerge(["block", "w-full", "cursor-pointer"]);
-const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center", "justify-between"]);
+const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center"], {
+    defaultVariants: { layout: "fullwidth" },
+    variants: { layout: { fullwidth: "justify-between", compact: "justify-start" } },
+});
 cvaMerge(["block", "relative", "w-full", "mt-1", "p-1"]);
 const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"]);
 const cvaCollapseIcon = cvaMerge(["ease-in-out", "duration-200"], {
@@ -1162,7 +1165,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, className, dataTestId, }) => {
+const Collapse = ({ id, initialExpanded = false, onToggle, label, children, layout = "fullwidth", className, dataTestId, }) => {
     const [expanded, setExpanded] = React.useState(initialExpanded);
     const handleClick = React.useCallback((e) => {
         if (onToggle) {
@@ -1170,7 +1173,7 @@ 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", { className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick, children: jsxs("div", { className: cvaCollapseLabelContainer(), children: [jsx(Text, { weight: "bold", children: label }), jsx(IconButton, { icon: jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDownIcon", 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: [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: "ChevronDownIcon", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] }) }), jsx(Collapsible, { expanded: expanded, id: id, children: children })] }));
 };
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure$1();

package/package.json

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

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

@@ -18,6 +18,10 @@ export interface CollapseProps extends CommonProps {
      * Label to be displayed.
      */
     label: React.ReactNode;
+    /**
+     *  layout - The layout of the Collapse component. (full width is default)
+     */
+    layout?: "fullwidth" | "compact";
 }
 /**
  * The Collapse component is used to condense non-important information.
@@ -25,4 +29,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, className, dataTestId, }: CollapseProps) => JSX.Element;
+export declare const Collapse: ({ id, initialExpanded, onToggle, label, children, layout, className, dataTestId, }: CollapseProps) => JSX.Element;

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

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