@trackunit/react-components 0.1.402 → 0.1.404

package/index.cjs.js

@@ -377,16 +377,7 @@ const Text = ({ children, type = "p", size = "medium", align = "left", weight =
     }, children);
 };
 
-const cvaSpinner = cssClassVarianceUtilities.cvaMerge([
-    "bg-transparent",
-    "rounded-full",
-    "border-2",
-    "border-solid",
-    "inline-block",
-    "animate-spin",
-    "cursor-wait",
-    "text-current",
-], {
+const cvaSpinner = cssClassVarianceUtilities.cvaMerge(["bg-transparent", "rounded-full", "border-2", "border-solid", "inline-block", "animate-spin", "cursor-wait"], {
     variants: {
         size: {
             small: ["w-4", "h-4"],
@@ -403,6 +394,7 @@ const cvaSpinner = cssClassVarianceUtilities.cvaMerge([
         mode: "light",
     },
 });
+const cvaSpinnerContainerInner = cssClassVarianceUtilities.cvaMerge(["gap-responsive-space-sm", "grid", "place-items-center"]);
 const cvaSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["box-border", "p-0.5", "overflow-hidden"], {
     variants: {
         centering: {
@@ -410,11 +402,17 @@ const cvaSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["box-border", "p
             vertically: ["grid", "h-full", "items-center"],
             horizontally: ["grid", "w-full", "justify-items-center"],
         },
+        mode: {
+            dark: ["text-white/75"],
+            light: ["text-slate-900/50"],
+        },
     },
     defaultVariants: {
         centering: "centered",
+        mode: "light",
     },
 });
+const cvaSpinnerLabel = cssClassVarianceUtilities.cvaMerge(["self-center", "text-center", "text-current"]);
 
 /**
  * The spinner component provides visual feedback that data is being processed.
@@ -430,8 +428,8 @@ 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 = "spinner", }) => {
-    return (jsxRuntime.jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), children: jsxRuntime.jsx("div", { className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId, role: "spinbutton" }) }));
+const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId = "spinner", label, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), children: jsxRuntime.jsxs("div", { className: cvaSpinnerContainerInner(), children: [jsxRuntime.jsx("div", { className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId, role: "spinbutton" }), label ? jsxRuntime.jsx("span", { className: cvaSpinnerLabel(), children: label }) : null] }) }));
 };
 
 const cvaButton = cssClassVarianceUtilities.cvaMerge([
@@ -4626,7 +4624,7 @@ const cvaToggleGroup = cssClassVarianceUtilities.cvaMerge(["inline-flex", "divid
 const cvaToggleItem = cssClassVarianceUtilities.cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0"], {
     variants: {
         selected: {
-            true: ["bg-slate-300", "hover:bg-slate-300", "text-slate-700"],
+            true: ["bg-slate-200", "hover:bg-slate-200", "text-slate-800"],
             false: [],
         },
     },
@@ -4657,7 +4655,7 @@ const ToggleGroup = ({ list, selected, setSelected, onClick, disabled = false, s
             }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
 };
 const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }) => {
-    return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? jsxRuntime.jsx(Icon, { name: iconName, size: "small" }) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? jsxRuntime.jsx(Icon, { name: iconName, size: "small" }) : null, size: size, variant: "secondary", children: jsxRuntime.jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
+    return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsxRuntime.jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsxRuntime.jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
 };
 
 const cvaValueBar = cssClassVarianceUtilities.cvaMerge(["w-full"], {

package/index.esm.js

@@ -357,16 +357,7 @@ const Text = ({ children, type = "p", size = "medium", align = "left", weight =
     }, children);
 };
 
-const cvaSpinner = cvaMerge([
-    "bg-transparent",
-    "rounded-full",
-    "border-2",
-    "border-solid",
-    "inline-block",
-    "animate-spin",
-    "cursor-wait",
-    "text-current",
-], {
+const cvaSpinner = cvaMerge(["bg-transparent", "rounded-full", "border-2", "border-solid", "inline-block", "animate-spin", "cursor-wait"], {
     variants: {
         size: {
             small: ["w-4", "h-4"],
@@ -383,6 +374,7 @@ const cvaSpinner = cvaMerge([
         mode: "light",
     },
 });
+const cvaSpinnerContainerInner = cvaMerge(["gap-responsive-space-sm", "grid", "place-items-center"]);
 const cvaSpinnerContainer = cvaMerge(["box-border", "p-0.5", "overflow-hidden"], {
     variants: {
         centering: {
@@ -390,11 +382,17 @@ const cvaSpinnerContainer = cvaMerge(["box-border", "p-0.5", "overflow-hidden"],
             vertically: ["grid", "h-full", "items-center"],
             horizontally: ["grid", "w-full", "justify-items-center"],
         },
+        mode: {
+            dark: ["text-white/75"],
+            light: ["text-slate-900/50"],
+        },
     },
     defaultVariants: {
         centering: "centered",
+        mode: "light",
     },
 });
+const cvaSpinnerLabel = cvaMerge(["self-center", "text-center", "text-current"]);
 
 /**
  * The spinner component provides visual feedback that data is being processed.
@@ -410,8 +408,8 @@ 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 = "spinner", }) => {
-    return (jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), children: jsx("div", { className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId, role: "spinbutton" }) }));
+const Spinner = ({ mode = "light", size = "medium", centering = "centered", className, containerClassName, dataTestId = "spinner", label, }) => {
+    return (jsx("div", { className: cvaSpinnerContainer({ centering, className: containerClassName }), children: jsxs("div", { className: cvaSpinnerContainerInner(), children: [jsx("div", { className: cvaSpinner({ size, mode, className }), "data-testid": dataTestId, role: "spinbutton" }), label ? jsx("span", { className: cvaSpinnerLabel(), children: label }) : null] }) }));
 };
 
 const cvaButton = cvaMerge([
@@ -4606,7 +4604,7 @@ const cvaToggleGroup = cvaMerge(["inline-flex", "divide-x", "divide-slate-300"])
 const cvaToggleItem = cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0"], {
     variants: {
         selected: {
-            true: ["bg-slate-300", "hover:bg-slate-300", "text-slate-700"],
+            true: ["bg-slate-200", "hover:bg-slate-200", "text-slate-800"],
             false: [],
         },
     },
@@ -4637,7 +4635,7 @@ const ToggleGroup = ({ list, selected, setSelected, onClick, disabled = false, s
             }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
 };
 const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }) => {
-    return isIconOnly ? (jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? jsx(Icon, { name: iconName, size: "small" }) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? jsx(Icon, { name: iconName, size: "small" }) : null, size: size, variant: "secondary", children: jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
+    return isIconOnly ? (jsx(Tooltip, { label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsx(Tooltip, { disabled: !(text === null || text === void 0 ? void 0 : text.truncate) && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) === undefined, label: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) || title, placement: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.placement) || "top", children: jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text === null || text === void 0 ? void 0 : text.maxWidth }), children: title }) }) }));
 };
 
 const cvaValueBar = cvaMerge(["w-full"], {

package/package.json

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

package/src/components/Spinner/Spinner.d.ts

@@ -1,4 +1,5 @@
-import { CommonProps, Size } from "../../common";
+import { CommonProps } from "../../common/CommonProps";
+import { Size } from "../../common/Size";
 type Centering = "horizontally" | "vertically" | "centered";
 export interface SpinnerProps extends CommonProps {
     /**
@@ -19,6 +20,10 @@ export interface SpinnerProps extends CommonProps {
      * Useful for sizing to minimize jumping on load.
      */
     containerClassName?: string;
+    /**
+     * A Label to be displayed under the spinner.
+     */
+    label?: string;
 }
 /**
  * The spinner component provides visual feedback that data is being processed.
@@ -34,5 +39,5 @@ export interface SpinnerProps extends CommonProps {
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {JSX.Element} Spinner component
  */
-export declare const Spinner: ({ mode, size, centering, className, containerClassName, dataTestId, }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Spinner: ({ mode, size, centering, className, containerClassName, dataTestId, label, }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,6 +2,9 @@ export declare const cvaSpinner: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
     mode?: "dark" | "light" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaSpinnerContainerInner: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaSpinnerContainer: (props?: ({
     centering?: "centered" | "vertically" | "horizontally" | null | undefined;
+    mode?: "dark" | "light" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaSpinnerLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;