@trackunit/react-components 0.1.401 → 0.1.403

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([

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([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.401",
+  "version": "0.1.403",
   "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;