@trackunit/react-components 0.1.172 → 0.1.174

package/index.cjs.js

@@ -456,7 +456,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
             false: [],
         },
         variant: {
-            transparent: "bg-transparent disabled:hover:bg-transparent border-none",
+            transparent: "border-none bg-transparent disabled:hover:bg-transparent",
             filled: "",
         },
     },
@@ -600,7 +600,7 @@ const cvaAlertContent = cssClassVarianceUtilities.cvaMerge(["grow"], {
     variants: {
         layout: {
             default: "",
-            inline: "flex items-center w-full",
+            inline: "flex w-full items-center",
         },
     },
     defaultVariants: {
@@ -743,7 +743,7 @@ const cvaCard = cssClassVarianceUtilities.cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["border-t-2", "border-neutral-200", "justify-end", "flex-row"], {
+const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex border-t-2", "border-neutral-200", "justify-end", "flex-row"], {
     variants: {
         border: {
             default: "",
@@ -764,7 +764,7 @@ const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["borde
 });
 const cvaCardHeader = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between"]);
 const cvaCardHeaderHeadingContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-4", "items-center"]);
-const cvaCardHeaderDensityContainer = cssClassVarianceUtilities.cvaMerge(["border-b-2", "border-neutral-200"], {
+const cvaCardHeaderDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex border-b-2", "border-neutral-200"], {
     variants: {
         border: {
             default: "",
@@ -18915,10 +18915,10 @@ const cvaDrawerOverlay = cssClassVarianceUtilities.cvaMerge([
 const cvaDrawerCard = cssClassVarianceUtilities.cvaMerge(["fixed", "z-toast"], {
     variants: {
         position: {
-            left: "top-0 left-0 animate-slide-in-left h-full rounded-l-none",
-            right: "top-0 right-0 animate-slide-in-right h-full rounded-r-none",
-            bottom: "right-0 left-0 bottom-0 animate-slide-in-bottom w-full rounded-b-none",
-            top: "top-0 left-0 animate-slide-in-top w-full rounded-t-none",
+            left: "animate-slide-in-left top-0 left-0 h-full rounded-l-none",
+            right: "animate-slide-in-right top-0 right-0 h-full rounded-r-none",
+            bottom: "animate-slide-in-bottom right-0 left-0 bottom-0 w-full rounded-b-none",
+            top: "animate-slide-in-top top-0 left-0 w-full rounded-t-none",
         },
     },
     defaultVariants: {
@@ -19067,11 +19067,11 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
 const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge("inline-flex");
 const cvaTooltipPopover = cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
 cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
-const cvaTooltipContent = cssClassVarianceUtilities.cvaMerge("p-2 rounded max-w-sm", {
+const cvaTooltipContent = cssClassVarianceUtilities.cvaMerge("max-w-sm rounded p-2", {
     variants: {
         color: {
-            light: "shadow-md bg-white",
-            dark: "text-white bg-neutral-800",
+            light: "bg-white shadow-md",
+            dark: "bg-neutral-800 text-white",
         },
     },
     defaultVariants: {
@@ -19152,8 +19152,8 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
             working: "bg-working-100 text-working-600",
             idle: "bg-idle-100 text-idle-600",
             stopped: "bg-stopped-100 text-stopped-600",
-            moving: "bg-neutral-100 text-moving",
-            active: "bg-neutral-100 text-active",
+            moving: "text-moving bg-neutral-100",
+            active: "text-active bg-neutral-100",
             unknown: "bg-unknown-100 text-unknown-600",
             unused: "bg-unused-300 text-unused-400",
             utilized: "bg-utilized-400 text-utilized-600",
@@ -19219,7 +19219,7 @@ const cvaMenuItem = cssClassVarianceUtilities.cvaMerge([
             false: "",
         },
         disabled: {
-            true: "!bg-slate-100 pointer-events-none",
+            true: "pointer-events-none !bg-slate-100",
             false: "",
         },
         focused: {
@@ -19288,7 +19288,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, focu
 const cvaMenuList = cssClassVarianceUtilities.cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
     variants: {
         stickyHeader: {
-            true: "grid grid-rows-min-fr !p-0 overflow-y-hidden",
+            true: "grid-rows-min-fr grid overflow-y-hidden !p-0",
             false: "",
         },
     },
@@ -19691,7 +19691,7 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
             medium: "",
         },
         layout: {
-            withIcon: "pr-1 gap-2",
+            withIcon: "gap-2 pr-1",
             default: "",
         },
         color: {
@@ -19744,12 +19744,12 @@ const Tag = React__namespace.forwardRef((_a, ref) => {
             jsxRuntime.jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsxRuntime.jsx(Icon, { name: "XCircle", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) }))] }));
 });
 
-const cvaTip = cssClassVarianceUtilities.cvaMerge("flex transition text-slate-300 hover:text-slate-500");
-const cvaTipContent = cssClassVarianceUtilities.cvaMerge("p-2 rounded max-w-sm flex gap-2 items-center text-sm", {
+const cvaTip = cssClassVarianceUtilities.cvaMerge("flex text-slate-300 transition hover:text-slate-500");
+const cvaTipContent = cssClassVarianceUtilities.cvaMerge("flex max-w-sm items-center gap-2 rounded p-2 text-sm", {
     variants: {
         color: {
-            light: "shadow-md bg-white",
-            dark: "text-white bg-neutral-800",
+            light: "bg-white shadow-md",
+            dark: "bg-neutral-800 text-white",
         },
     },
     defaultVariants: {
@@ -21288,7 +21288,7 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
  * @returns {JSX.Element} SectionHeader component
  */
 const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(q, { children: jsxRuntime.jsx(W, { title: title }) }), jsxRuntime.jsxs("div", { className: "flex gap-2 flex-row mb-2", children: [jsxRuntime.jsxs("div", { className: "flex gap-2 flex-col grow", children: [jsxRuntime.jsx(Heading, { variant: "secondary", dataTestId: dataTestId, children: title }), subtitle && (jsxRuntime.jsx(Heading, { variant: "subtitle", subtle: true, children: subtitle }))] }), addons && jsxRuntime.jsx("div", { className: "flex gap-2", children: addons })] }), jsxRuntime.jsx(Spacer, { size: "small" })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(q, { children: jsxRuntime.jsx(W, { title: title }) }), jsxRuntime.jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxRuntime.jsxs("div", { className: "flex grow flex-col gap-2", children: [jsxRuntime.jsx(Heading, { variant: "secondary", dataTestId: dataTestId, children: title }), subtitle && (jsxRuntime.jsx(Heading, { variant: "subtitle", subtle: true, children: subtitle }))] }), addons && jsxRuntime.jsx("div", { className: "flex gap-2", children: addons })] }), jsxRuntime.jsx(Spacer, { size: "small" })] }));
 };
 
 const cvaSidebar = cssClassVarianceUtilities.cvaMerge(["apply grid", "grid-cols-fr-min", "items-center"]);
@@ -21470,7 +21470,7 @@ const cvaValueBarProgress = cssClassVarianceUtilities.cvaMerge(["h-full", "round
 const cvaValueBarText = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
         size: {
-            small: "font-bold text-sm",
+            small: "text-sm font-bold",
             large: "drop-shadow-lg",
         },
     },

package/index.esm.js

@@ -427,7 +427,7 @@ const cvaButton = cvaMerge([
             false: [],
         },
         variant: {
-            transparent: "bg-transparent disabled:hover:bg-transparent border-none",
+            transparent: "border-none bg-transparent disabled:hover:bg-transparent",
             filled: "",
         },
     },
@@ -571,7 +571,7 @@ const cvaAlertContent = cvaMerge(["grow"], {
     variants: {
         layout: {
             default: "",
-            inline: "flex items-center w-full",
+            inline: "flex w-full items-center",
         },
     },
     defaultVariants: {
@@ -714,7 +714,7 @@ const cvaCard = cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardFooterDensityContainer = cvaMerge(["border-t-2", "border-neutral-200", "justify-end", "flex-row"], {
+const cvaCardFooterDensityContainer = cvaMerge(["flex border-t-2", "border-neutral-200", "justify-end", "flex-row"], {
     variants: {
         border: {
             default: "",
@@ -735,7 +735,7 @@ const cvaCardFooterDensityContainer = cvaMerge(["border-t-2", "border-neutral-20
 });
 const cvaCardHeader = cvaMerge(["flex", "justify-between"]);
 const cvaCardHeaderHeadingContainer = cvaMerge(["flex", "gap-4", "items-center"]);
-const cvaCardHeaderDensityContainer = cvaMerge(["border-b-2", "border-neutral-200"], {
+const cvaCardHeaderDensityContainer = cvaMerge(["flex border-b-2", "border-neutral-200"], {
     variants: {
         border: {
             default: "",
@@ -18886,10 +18886,10 @@ const cvaDrawerOverlay = cvaMerge([
 const cvaDrawerCard = cvaMerge(["fixed", "z-toast"], {
     variants: {
         position: {
-            left: "top-0 left-0 animate-slide-in-left h-full rounded-l-none",
-            right: "top-0 right-0 animate-slide-in-right h-full rounded-r-none",
-            bottom: "right-0 left-0 bottom-0 animate-slide-in-bottom w-full rounded-b-none",
-            top: "top-0 left-0 animate-slide-in-top w-full rounded-t-none",
+            left: "animate-slide-in-left top-0 left-0 h-full rounded-l-none",
+            right: "animate-slide-in-right top-0 right-0 h-full rounded-r-none",
+            bottom: "animate-slide-in-bottom right-0 left-0 bottom-0 w-full rounded-b-none",
+            top: "animate-slide-in-top top-0 left-0 w-full rounded-t-none",
         },
     },
     defaultVariants: {
@@ -19038,11 +19038,11 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
 const cvaTooltipFlexContainer = cvaMerge("inline-flex");
 const cvaTooltipPopover = cvaMerge("pointer-events-none origin-center");
 cvaMerge("pointer-events-none origin-center");
-const cvaTooltipContent = cvaMerge("p-2 rounded max-w-sm", {
+const cvaTooltipContent = cvaMerge("max-w-sm rounded p-2", {
     variants: {
         color: {
-            light: "shadow-md bg-white",
-            dark: "text-white bg-neutral-800",
+            light: "bg-white shadow-md",
+            dark: "bg-neutral-800 text-white",
         },
     },
     defaultVariants: {
@@ -19123,8 +19123,8 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
             working: "bg-working-100 text-working-600",
             idle: "bg-idle-100 text-idle-600",
             stopped: "bg-stopped-100 text-stopped-600",
-            moving: "bg-neutral-100 text-moving",
-            active: "bg-neutral-100 text-active",
+            moving: "text-moving bg-neutral-100",
+            active: "text-active bg-neutral-100",
             unknown: "bg-unknown-100 text-unknown-600",
             unused: "bg-unused-300 text-unused-400",
             utilized: "bg-utilized-400 text-utilized-600",
@@ -19190,7 +19190,7 @@ const cvaMenuItem = cvaMerge([
             false: "",
         },
         disabled: {
-            true: "!bg-slate-100 pointer-events-none",
+            true: "pointer-events-none !bg-slate-100",
             false: "",
         },
         focused: {
@@ -19259,7 +19259,7 @@ const MenuItem = ({ className, dataTestId, label, size, children, selected, focu
 const cvaMenuList = cvaMerge(["shadow-md", "rounded-lg", "z-20", "bg-white", "p-1", "border", "border-slate-300", "gap-1", "grid"], {
     variants: {
         stickyHeader: {
-            true: "grid grid-rows-min-fr !p-0 overflow-y-hidden",
+            true: "grid-rows-min-fr grid overflow-y-hidden !p-0",
             false: "",
         },
     },
@@ -19662,7 +19662,7 @@ const cvaTag = cvaMerge([
             medium: "",
         },
         layout: {
-            withIcon: "pr-1 gap-2",
+            withIcon: "gap-2 pr-1",
             default: "",
         },
         color: {
@@ -19715,12 +19715,12 @@ const Tag = React.forwardRef((_a, ref) => {
             jsx("div", { className: cvaTagIconContainer(), onMouseDown: onClose, children: jsx(Icon, { name: "XCircle", dataTestId: dataTestId + "Icon", type: "solid", size: size, style: { WebkitTransition: "-webkit-transform 0.150s" }, className: cvaTagIcon() }) }))] }));
 });
 
-const cvaTip = cvaMerge("flex transition text-slate-300 hover:text-slate-500");
-const cvaTipContent = cvaMerge("p-2 rounded max-w-sm flex gap-2 items-center text-sm", {
+const cvaTip = cvaMerge("flex text-slate-300 transition hover:text-slate-500");
+const cvaTipContent = cvaMerge("flex max-w-sm items-center gap-2 rounded p-2 text-sm", {
     variants: {
         color: {
-            light: "shadow-md bg-white",
-            dark: "text-white bg-neutral-800",
+            light: "bg-white shadow-md",
+            dark: "bg-neutral-800 text-white",
         },
     },
     defaultVariants: {
@@ -21259,7 +21259,7 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
  * @returns {JSX.Element} SectionHeader component
  */
 const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
-    return (jsxs("div", { className: "flex flex-col", children: [jsx(q, { children: jsx(W, { title: title }) }), jsxs("div", { className: "flex gap-2 flex-row mb-2", children: [jsxs("div", { className: "flex gap-2 flex-col grow", children: [jsx(Heading, { variant: "secondary", dataTestId: dataTestId, children: title }), subtitle && (jsx(Heading, { variant: "subtitle", subtle: true, children: subtitle }))] }), addons && jsx("div", { className: "flex gap-2", children: addons })] }), jsx(Spacer, { size: "small" })] }));
+    return (jsxs("div", { className: "flex flex-col", children: [jsx(q, { children: jsx(W, { title: title }) }), jsxs("div", { className: "mb-2 flex flex-row gap-2", children: [jsxs("div", { className: "flex grow flex-col gap-2", children: [jsx(Heading, { variant: "secondary", dataTestId: dataTestId, children: title }), subtitle && (jsx(Heading, { variant: "subtitle", subtle: true, children: subtitle }))] }), addons && jsx("div", { className: "flex gap-2", children: addons })] }), jsx(Spacer, { size: "small" })] }));
 };
 
 const cvaSidebar = cvaMerge(["apply grid", "grid-cols-fr-min", "items-center"]);
@@ -21441,7 +21441,7 @@ const cvaValueBarProgress = cvaMerge(["h-full", "rounded"], {
 const cvaValueBarText = cvaMerge([], {
     variants: {
         size: {
-            small: "font-bold text-sm",
+            small: "text-sm font-bold",
             large: "drop-shadow-lg",
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.172",
+  "version": "0.1.174",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -21,7 +21,7 @@
     "react-router-dom": "6.11.2",
     "react-use": "17.4.0",
     "react-useportal": "1.0.18",
-    "zod": "3.14.1"
+    "zod": "3.22.3"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",