@trackunit/react-components 0.1.110 → 0.1.111

package/index.cjs

@@ -688,6 +688,35 @@ const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose,
     return (jsxRuntime.jsx(DensityContainer, Object.assign({ dataTestId: dataTestId, className: cvaCardHeaderDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cvaCardHeader() }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: cvaCardHeaderHeadingContainer() }, { children: [jsxRuntime.jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] })), subHeading && (jsxRuntime.jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsxRuntime.jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsxRuntime.jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] })) })));
 };
 
+const cvaCollapse = cssClassVarianceUtilities.cvaMerge([
+    "block",
+    "w-full",
+    "border-b",
+    "border-solid",
+    "border-neutral-100",
+    "pb-3",
+    "mb-4",
+    "last:border-0",
+    "last:m-0",
+    "only:border-0",
+    "only:m-0",
+]);
+const cvaCollapseLabel = cssClassVarianceUtilities.cvaMerge(["block", "w-full", "cursor-pointer"]);
+const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "justify-between"]);
+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"], {
+    variants: {
+        expanded: {
+            false: "",
+            true: "rotate-180",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
+
 /**
  * The Collapse component is used to condense non-important information.
  *
@@ -702,31 +731,12 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxRuntime.jsxs(StyledCollapse, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsxRuntime.jsx(CollapseLabel, Object.assign({ role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxRuntime.jsxs(LabelContainer, { children: [jsxRuntime.jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Rotate, { name: "ChevronDownIcon", size: "small", "$expanded": expanded }), size: "medium", variant: "transparent", color: "secondary" })] }) })), jsxRuntime.jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: cvaCollapse({ className }), "data-testid": dataTestId }, { children: [jsxRuntime.jsx("div", Object.assign({ className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cvaCollapseLabelContainer() }, { children: [jsxRuntime.jsx(Text$1, Object.assign({ 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, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
 };
-const Rotate = tailwindStyledComponents.twx(Icon) `
-  ${p => (p.$expanded ? tailwindStyledComponents.tws `tu-icon--animated-rotate-expanded` : null)}
-  tu-icon--animated-rotate
-`;
-const StyledCollapse = tailwindStyledComponents.tw.div `
-  tu-collapse
-`;
-const CollapseLabel = tailwindStyledComponents.tw.div `
-  tu-collapse__label
-`;
-const LabelContainer = tailwindStyledComponents.tw.div `
-  tu-collapse__label__container
-`;
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = reactUse.useMeasure();
-    return (jsxRuntime.jsx(AnimatedCollapsible, Object.assign({ id: id, style: { height: expanded ? height : "0" } }, { children: jsxRuntime.jsx(StyledCollapsible, Object.assign({ ref: ref }, { children: children })) })));
-};
-const AnimatedCollapsible = tailwindStyledComponents.tw.div `
-  tu-collapsible--animated
-`;
-const StyledCollapsible = tailwindStyledComponents.tw.div `
-  tu-collapsible
-`;
+    return (jsxRuntime.jsx("div", Object.assign({ className: cvaCollapseAnimated(), id: id, style: { height: expanded ? height : "0" } }, { children: jsxRuntime.jsx("div", Object.assign({ className: cvaCollapse(), ref: ref }, { children: children })) })));
+};
 
 const cvaCopyableText = cssClassVarianceUtilities.cvaMerge([
     "py-1",

package/index.js

@@ -661,6 +661,35 @@ const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose,
     return (jsx(DensityContainer, Object.assign({ dataTestId: dataTestId, className: cvaCardHeaderDensityContainer({ border: hideSeparator ? "borderless" : "default", className }), density: density }, { children: jsxs("div", Object.assign({ className: cvaCardHeader() }, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs("div", Object.assign({ className: cvaCardHeaderHeadingContainer() }, { children: [jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] })), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XMarkIcon", size: "small" }), className: "!h-min" }))] })) })));
 };
 
+const cvaCollapse = cvaMerge([
+    "block",
+    "w-full",
+    "border-b",
+    "border-solid",
+    "border-neutral-100",
+    "pb-3",
+    "mb-4",
+    "last:border-0",
+    "last:m-0",
+    "only:border-0",
+    "only:m-0",
+]);
+const cvaCollapseLabel = cvaMerge(["block", "w-full", "cursor-pointer"]);
+const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center", "justify-between"]);
+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"], {
+    variants: {
+        expanded: {
+            false: "",
+            true: "rotate-180",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
+
 /**
  * The Collapse component is used to condense non-important information.
  *
@@ -675,31 +704,12 @@ const Collapse = ({ id, initialExpanded = false, onToggle, label, children, clas
         }
         setExpanded(!expanded);
     }, [expanded, onToggle]);
-    return (jsxs(StyledCollapse, Object.assign({ className: className, "data-testid": dataTestId }, { children: [jsx(CollapseLabel, Object.assign({ role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxs(LabelContainer, { children: [jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsx(IconButton, { icon: jsx(Rotate, { name: "ChevronDownIcon", size: "small", "$expanded": expanded }), size: "medium", variant: "transparent", color: "secondary" })] }) })), jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
+    return (jsxs("div", Object.assign({ className: cvaCollapse({ className }), "data-testid": dataTestId }, { children: [jsx("div", Object.assign({ className: cvaCollapseLabel(), role: "button", "aria-expanded": expanded, "aria-controls": id, onClick: handleClick }, { children: jsxs("div", Object.assign({ className: cvaCollapseLabelContainer() }, { children: [jsx(Text$1, Object.assign({ weight: "bold" }, { children: label })), jsx(IconButton, { icon: jsx(Icon, { className: cvaCollapseIcon({ expanded }), name: "ChevronDownIcon", size: "small" }), size: "medium", variant: "transparent", color: "secondary" })] })) })), jsx(Collapsible, Object.assign({ expanded: expanded, id: id }, { children: children }))] })));
 };
-const Rotate = twx(Icon) `
-  ${p => (p.$expanded ? tws `tu-icon--animated-rotate-expanded` : null)}
-  tu-icon--animated-rotate
-`;
-const StyledCollapse = tw.div `
-  tu-collapse
-`;
-const CollapseLabel = tw.div `
-  tu-collapse__label
-`;
-const LabelContainer = tw.div `
-  tu-collapse__label__container
-`;
 const Collapsible = ({ children, expanded, id }) => {
     const [ref, { height }] = useMeasure();
-    return (jsx(AnimatedCollapsible, Object.assign({ id: id, style: { height: expanded ? height : "0" } }, { children: jsx(StyledCollapsible, Object.assign({ ref: ref }, { children: children })) })));
-};
-const AnimatedCollapsible = tw.div `
-  tu-collapsible--animated
-`;
-const StyledCollapsible = tw.div `
-  tu-collapsible
-`;
+    return (jsx("div", Object.assign({ className: cvaCollapseAnimated(), id: id, style: { height: expanded ? height : "0" } }, { children: jsx("div", Object.assign({ className: cvaCollapse(), ref: ref }, { children: children })) })));
+};
 
 const cvaCopyableText = cvaMerge([
     "py-1",

package/package.json

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

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

@@ -0,0 +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 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;