@trackunit/react-components 0.1.140 → 0.1.144

package/index.cjs.js

@@ -720,6 +720,32 @@ const cvaCardHeaderDensityContainer = cssClassVarianceUtilities.cvaMerge(["borde
         border: "default",
     },
 });
+const cvaCardDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex"], {
+    variants: {
+        disableGap: {
+            true: "gap-0",
+            false: "",
+        },
+        direction: {
+            row: "flex-row",
+            "row-reverse": "flex-row-reverse",
+            column: "flex-col",
+            "column-reverse": "flex-col-reverse",
+        },
+        density: {
+            none: "",
+            compact: "gap-3 p-3",
+            comfortable: "gap-4 p-4",
+            spacious: "gap-4 p-6",
+            auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
+        },
+    },
+    defaultVariants: {
+        disableGap: false,
+        direction: "column",
+        density: "auto",
+    },
+});
 
 const ROLE_CARD = "region";
 /**
@@ -743,44 +769,8 @@ const Card = (_a) => {
  * @returns {JSX.Element} DensityContainer component
  */
 const DensityContainer = ({ children, className, dataTestId, density, disableGap, direction, }) => {
-    return (jsxRuntime.jsx(StyledDensityContainer, { "$disableGap": disableGap, "$density": density, "$direction": direction, "data-testid": dataTestId, className: className, children: children }));
-};
-const getDirection = () => ({ $direction }) => {
-    $direction = $direction !== null && $direction !== void 0 ? $direction : "column";
-    const directions = {
-        row: tailwindStyledComponents.tws `flex-row`,
-        "row-reverse": tailwindStyledComponents.tws `flex-row-reverse`,
-        column: tailwindStyledComponents.tws `flex-col`,
-        "column-reverse": tailwindStyledComponents.tws `flex-col-reverse`,
-    };
-    return directions[$direction];
-};
-const densityAuto = tailwindStyledComponents.tws `
-  component-card-spacing
-  sm:component-card-spacing-sm
-  md:component-card-spacing-md
-`;
-const DensityFinder = ({ $density }) => {
-    switch ($density) {
-        case "none":
-            return;
-        case "compact":
-            return tailwindStyledComponents.tws `gap-3 p-3`;
-        case "comfortable":
-            return tailwindStyledComponents.tws `gap-4 p-4`;
-        case "spacious":
-            return tailwindStyledComponents.tws `gap-4 p-6`;
-        case "auto":
-        default:
-            return densityAuto;
-    }
-};
-const StyledDensityContainer = tailwindStyledComponents.tw.div `
-flex
-${getDirection()}
-${p => (p.$disableGap ? tailwindStyledComponents.tws `gap-0` : null)}
-${DensityFinder}
-`;
+    return (jsxRuntime.jsx("div", { className: cvaCardDensityContainer({ className, disableGap, density, direction }), "data-testid": dataTestId, children: children }));
+};
 
 /**
  * The CardBody component should be used to inform the user of important information.
@@ -18969,6 +18959,7 @@ const cvaIndicatorPing = cssClassVarianceUtilities.cvaMerge(["animate-ping-sm",
             unused: "bg-unused-400",
             utilized: "bg-utilized-600",
             heavily_utilized: "bg-heavily_utilized-500",
+            unknown_utilization: "bg-unknown_utilization-600",
             available: "bg-available-600",
             on_rent: "bg-on_rent-600",
             pickup_ready: "bg-pickup_ready-600",
@@ -19005,6 +18996,7 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
             unused: "bg-unused-300 text-unused-400",
             utilized: "bg-utilized-400 text-utilized-600",
             heavily_utilized: "bg-heavily_utilized-300 text-heavily_utilized-500",
+            unknown_utilization: "bg-unknown_utilization-300 text-unknown_utilization-600",
             available: "bg-available-100 text-available-600",
             on_rent: "bg-on_rent-100 text-on_rent-600",
             pickup_ready: "bg-pickup_ready-100 text-pickup_ready-600",
@@ -38683,16 +38675,8 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
  * @returns {JSX.Element} SectionHeader component
  */
 const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
-    return (jsxRuntime.jsxs(SectionHeaderContainer, { children: [jsxRuntime.jsx(q, { children: jsxRuntime.jsx(W, { title: title }) }), jsxRuntime.jsxs(StyledFlex, { className: "flex-row mb-2", children: [jsxRuntime.jsxs(StyledFlex, { className: "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(StyledFlex, { 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: "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" })] }));
 };
-const SectionHeaderContainer = tailwindStyledComponents.tw.div `
-  flex
-  flex-col
-`;
-const StyledFlex = tailwindStyledComponents.tw.div `
-  flex
-  gap-2
-`;
 
 const cvaSidebar = cssClassVarianceUtilities.cvaMerge(["apply grid", "grid-cols-fr-min", "items-center"]);
 const cvaSidebarChildContainer = cssClassVarianceUtilities.cvaMerge(["apply flex", "overflow-hidden", "gap-2", "p-1", "max-w-full"], {
@@ -38782,9 +38766,9 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
     const overflowItemCount = Object.values(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
     const itemVisibilityClassName = (id) => {
         if (itemOverflowMap[id]) {
-            return tailwindStyledComponents.tws `invisible`;
+            return "invisible";
         }
-        return tailwindStyledComponents.tws `visible`;
+        return "visible";
     };
     return (jsxRuntime.jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { ref: overflowContainerRef, className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId && `${dataTestId}-child-container`, children: React__default["default"].Children.map(children, child => {
                     return React__default["default"].cloneElement(child, {
@@ -38839,7 +38823,7 @@ const Timeline = ({ className, dataTestId, children }) => {
  * @param {TimeLineElementProps} props the props
  * @returns {JSX.Element} component
  */
-const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", headerClassName, dot = jsxRuntime.jsx(Indicator, { className: tailwindStyledComponents.tws `mt-[-1px]`, color: "neutral", icon: jsxRuntime.jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
+const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", headerClassName, dot = jsxRuntime.jsx(Indicator, { className: "mt-[-1px]", color: "neutral", icon: jsxRuntime.jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
     return (jsxRuntime.jsxs("li", { className: cvaTimelineElement({ className }), "data-date": `${date}`, "data-testid": dataTestId && `${dataTestId}`, onClick: () => onClick && onClick(), children: [jsxRuntime.jsx("div", { className: cvaTimelineDot(), children: dot }), jsxRuntime.jsx("div", { children: header }), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { children: children }) })] }));
 };
 function defaultHeader(date, showTime) {

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useCallback, useEffect, useState, useLayoutEffect, useMemo, createContext, forwardRef, useContext, isValidElement, cloneElement, memo, Children, useReducer, Component } from 'react';
-import { tw, tws } from '@trackunit/tailwind-styled-components';
+import { tw } from '@trackunit/tailwind-styled-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import * as ReactDOM from 'react-dom';
@@ -693,6 +693,32 @@ const cvaCardHeaderDensityContainer = cvaMerge(["border-b-2", "border-neutral-20
         border: "default",
     },
 });
+const cvaCardDensityContainer = cvaMerge(["flex"], {
+    variants: {
+        disableGap: {
+            true: "gap-0",
+            false: "",
+        },
+        direction: {
+            row: "flex-row",
+            "row-reverse": "flex-row-reverse",
+            column: "flex-col",
+            "column-reverse": "flex-col-reverse",
+        },
+        density: {
+            none: "",
+            compact: "gap-3 p-3",
+            comfortable: "gap-4 p-4",
+            spacious: "gap-4 p-6",
+            auto: " component-card-spacing sm:component-card-spacing-sm md:component-card-spacing-md",
+        },
+    },
+    defaultVariants: {
+        disableGap: false,
+        direction: "column",
+        density: "auto",
+    },
+});
 
 const ROLE_CARD = "region";
 /**
@@ -716,44 +742,8 @@ const Card = (_a) => {
  * @returns {JSX.Element} DensityContainer component
  */
 const DensityContainer = ({ children, className, dataTestId, density, disableGap, direction, }) => {
-    return (jsx(StyledDensityContainer, { "$disableGap": disableGap, "$density": density, "$direction": direction, "data-testid": dataTestId, className: className, children: children }));
-};
-const getDirection = () => ({ $direction }) => {
-    $direction = $direction !== null && $direction !== void 0 ? $direction : "column";
-    const directions = {
-        row: tws `flex-row`,
-        "row-reverse": tws `flex-row-reverse`,
-        column: tws `flex-col`,
-        "column-reverse": tws `flex-col-reverse`,
-    };
-    return directions[$direction];
-};
-const densityAuto = tws `
-  component-card-spacing
-  sm:component-card-spacing-sm
-  md:component-card-spacing-md
-`;
-const DensityFinder = ({ $density }) => {
-    switch ($density) {
-        case "none":
-            return;
-        case "compact":
-            return tws `gap-3 p-3`;
-        case "comfortable":
-            return tws `gap-4 p-4`;
-        case "spacious":
-            return tws `gap-4 p-6`;
-        case "auto":
-        default:
-            return densityAuto;
-    }
-};
-const StyledDensityContainer = tw.div `
-flex
-${getDirection()}
-${p => (p.$disableGap ? tws `gap-0` : null)}
-${DensityFinder}
-`;
+    return (jsx("div", { className: cvaCardDensityContainer({ className, disableGap, density, direction }), "data-testid": dataTestId, children: children }));
+};
 
 /**
  * The CardBody component should be used to inform the user of important information.
@@ -18942,6 +18932,7 @@ const cvaIndicatorPing = cvaMerge(["animate-ping-sm", "absolute", "inline-flex",
             unused: "bg-unused-400",
             utilized: "bg-utilized-600",
             heavily_utilized: "bg-heavily_utilized-500",
+            unknown_utilization: "bg-unknown_utilization-600",
             available: "bg-available-600",
             on_rent: "bg-on_rent-600",
             pickup_ready: "bg-pickup_ready-600",
@@ -18978,6 +18969,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
             unused: "bg-unused-300 text-unused-400",
             utilized: "bg-utilized-400 text-utilized-600",
             heavily_utilized: "bg-heavily_utilized-300 text-heavily_utilized-500",
+            unknown_utilization: "bg-unknown_utilization-300 text-unknown_utilization-600",
             available: "bg-available-100 text-available-600",
             on_rent: "bg-on_rent-100 text-on_rent-600",
             pickup_ready: "bg-pickup_ready-100 text-pickup_ready-600",
@@ -38656,16 +38648,8 @@ const Spacer = ({ size = "medium", border = false, dataTestId, className }) => {
  * @returns {JSX.Element} SectionHeader component
  */
 const SectionHeader = ({ title, subtitle, dataTestId, addons }) => {
-    return (jsxs(SectionHeaderContainer, { children: [jsx(q, { children: jsx(W, { title: title }) }), jsxs(StyledFlex, { className: "flex-row mb-2", children: [jsxs(StyledFlex, { className: "flex-col grow", children: [jsx(Heading, { variant: "secondary", dataTestId: dataTestId, children: title }), subtitle && (jsx(Heading, { variant: "subtitle", subtle: true, children: subtitle }))] }), addons && jsx(StyledFlex, { children: addons })] }), jsx(Spacer, { size: "small" })] }));
+    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" })] }));
 };
-const SectionHeaderContainer = tw.div `
-  flex
-  flex-col
-`;
-const StyledFlex = tw.div `
-  flex
-  gap-2
-`;
 
 const cvaSidebar = cvaMerge(["apply grid", "grid-cols-fr-min", "items-center"]);
 const cvaSidebarChildContainer = cvaMerge(["apply flex", "overflow-hidden", "gap-2", "p-1", "max-w-full"], {
@@ -38755,9 +38739,9 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
     const overflowItemCount = Object.values(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
     const itemVisibilityClassName = (id) => {
         if (itemOverflowMap[id]) {
-            return tws `invisible`;
+            return "invisible";
         }
-        return tws `visible`;
+        return "visible";
     };
     return (jsxs("div", { className: cvaSidebar({ className }), "data-testid": dataTestId, children: [jsx("div", { ref: overflowContainerRef, className: cvaSidebarChildContainer({ breakpoint, className: childContainerClassName }), "data-testid": dataTestId && `${dataTestId}-child-container`, children: React__default.Children.map(children, child => {
                     return React__default.cloneElement(child, {
@@ -38812,7 +38796,7 @@ const Timeline = ({ className, dataTestId, children }) => {
  * @param {TimeLineElementProps} props the props
  * @returns {JSX.Element} component
  */
-const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", headerClassName, dot = jsx(Indicator, { className: tws `mt-[-1px]`, color: "neutral", icon: jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
+const TimelineElement = ({ date, showTime, children, className, dataTestId = "timeline-date", headerClassName, dot = jsx(Indicator, { className: "mt-[-1px]", color: "neutral", icon: jsx(Icon, { name: "CalendarIcon", size: "large" }) }), header = defaultHeader(date, showTime), onClick, }) => {
     return (jsxs("li", { className: cvaTimelineElement({ className }), "data-date": `${date}`, "data-testid": dataTestId && `${dataTestId}`, onClick: () => onClick && onClick(), children: [jsx("div", { className: cvaTimelineDot(), children: dot }), jsx("div", { children: header }), jsx("div", {}), jsx("div", { children: jsx("div", { children: children }) })] }));
 };
 function defaultHeader(date, showTime) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.140",
+  "version": "0.1.144",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,10 +9,10 @@
   "dependencies": {
     "@floating-ui/react": "0.22.2",
     "@trackunit/css-class-variance-utilities": "0.0.11",
-    "@trackunit/css-core": "0.0.91",
+    "@trackunit/css-core": "0.0.92",
     "@trackunit/tailwind-styled-components": "0.0.60",
-    "@trackunit/ui-design-tokens": "0.0.74",
-    "@trackunit/ui-icons": "0.0.71",
+    "@trackunit/ui-design-tokens": "0.0.75",
+    "@trackunit/ui-icons": "0.0.72",
     "date-fns": "2.29.3",
     "lodash": "4.17.21",
     "react": "18.2.0",
@@ -20,7 +20,7 @@
     "react-helmet-async": "1.3.0",
     "react-router-dom": "6.11.2",
     "react-use": "17.4.0",
-    "react-useportal": "1.0.17",
+    "react-useportal": "1.0.18",
     "zod": "3.14.1"
   },
   "module": "./index.esm.js",

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

@@ -11,3 +11,8 @@ export declare const cvaCardHeaderHeadingContainer: (props?: import("class-varia
 export declare const cvaCardHeaderDensityContainer: (props?: ({
     border?: "default" | "borderless" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaCardDensityContainer: (props?: ({
+    disableGap?: boolean | null | undefined;
+    direction?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
+    density?: "none" | "compact" | "comfortable" | "spacious" | "auto" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -2,9 +2,9 @@ export declare const cvaIndicator: (props?: import("class-variance-authority/dis
 export declare const cvaIndicatorIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaIndicatorLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaIndicatorPing: (props?: ({
-    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site" | "white" | "black" | null | undefined;
+    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site" | "white" | "black" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaIndicatorIconBackground: (props?: ({
-    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site" | "white" | "black" | null | undefined;
+    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site" | "white" | "black" | null | undefined;
     background?: "visible" | "hidden" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;