@trackunit/react-components 0.1.133 → 0.1.134

package/index.cjs

@@ -18868,8 +18868,20 @@ const SkeletonLines = React.memo(({ margin = "10px 0", lines = 1, height, width
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: skeletonLines });
 });
 
-const containerStyles = cssClassVarianceUtilities.cvaMerge(["flex flex-col items-center gap-5 p-12 text-center justify-center h-full"]);
-const textStyles = cssClassVarianceUtilities.cvaMerge(["flex flex-col items-center gap-2"]);
+const cvaContainerStyles = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "flex-col",
+    "items-center",
+    "gap-5",
+    "p-4",
+    "sm:p-6",
+    "md:p-12",
+    "text-center",
+    "justify-center",
+    "h-full",
+]);
+const cvaTextStyles = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-center", "gap-2"]);
+const cvaImgStyles = cssClassVarianceUtilities.cvaMerge(["w-2/3", "min-w-[60px]", "max-w-[200px]"]);
 
 var WorkerWithSign = "8df3d27593b5fba4.svg";
 
@@ -18915,7 +18927,7 @@ const EmptyState = ({ title, description, altText, image, customImageSrc, action
             lazyLoadImage();
         }
     }, [customImageSrc, image]);
-    return (jsxRuntime.jsx("div", { className: `${containerStyles()} ${className}`, "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { dataTestId: "spinner", size: "large", centering: "centered" }), jsxRuntime.jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { src: customImageSrc ? customImageSrc : imageSource, alt: altText }), jsxRuntime.jsxs("div", { className: textStyles(), children: [jsxRuntime.jsx(Heading, { variant: "secondary", children: title }), jsxRuntime.jsx(Text, { align: "center", children: description })] }), action] })) }));
+    return (jsxRuntime.jsx("div", { className: `${cvaContainerStyles()} ${className}`, "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { dataTestId: "spinner", size: "large", centering: "centered" }), jsxRuntime.jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("img", { className: cvaImgStyles(), width: 200, height: 200, src: customImageSrc ? customImageSrc : imageSource, alt: altText }), jsxRuntime.jsxs("div", { className: cvaTextStyles(), children: [jsxRuntime.jsx(Heading, { variant: "secondary", children: title }), jsxRuntime.jsx(Text, { align: "center", children: description })] }), action] })) }));
 };
 
 /**
@@ -36590,7 +36602,7 @@ function getDevicePixelRatio(options) {
  * The boolean will be true if the element is being hovered, and false if it is not.
  * Can be directionally debounced.
  *
- * @param {ConditionalUseHoverProps} param0 The options
+ * @param {UseHoverProps} param0 The options
  * @returns {object} The object containing the onMouseEnter, onMouseLeave and hovering props
  */
 const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {

package/index.js

@@ -18841,8 +18841,20 @@ const SkeletonLines = memo(({ margin = "10px 0", lines = 1, height, width = "100
     return jsx(Fragment, { children: skeletonLines });
 });
 
-const containerStyles = cvaMerge(["flex flex-col items-center gap-5 p-12 text-center justify-center h-full"]);
-const textStyles = cvaMerge(["flex flex-col items-center gap-2"]);
+const cvaContainerStyles = cvaMerge([
+    "flex",
+    "flex-col",
+    "items-center",
+    "gap-5",
+    "p-4",
+    "sm:p-6",
+    "md:p-12",
+    "text-center",
+    "justify-center",
+    "h-full",
+]);
+const cvaTextStyles = cvaMerge(["flex", "flex-col", "items-center", "gap-2"]);
+const cvaImgStyles = cvaMerge(["w-2/3", "min-w-[60px]", "max-w-[200px]"]);
 
 var WorkerWithSign = "8df3d27593b5fba4.svg";
 
@@ -18888,7 +18900,7 @@ const EmptyState = ({ title, description, altText, image, customImageSrc, action
             lazyLoadImage();
         }
     }, [customImageSrc, image]);
-    return (jsx("div", { className: `${containerStyles()} ${className}`, "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxs(Fragment, { children: [jsx(Spinner, { dataTestId: "spinner", size: "large", centering: "centered" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxs(Fragment, { children: [jsx("img", { src: customImageSrc ? customImageSrc : imageSource, alt: altText }), jsxs("div", { className: textStyles(), children: [jsx(Heading, { variant: "secondary", children: title }), jsx(Text, { align: "center", children: description })] }), action] })) }));
+    return (jsx("div", { className: `${cvaContainerStyles()} ${className}`, "data-testid": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "empty-state", children: loading ? (jsxs(Fragment, { children: [jsx(Spinner, { dataTestId: "spinner", size: "large", centering: "centered" }), jsx(SkeletonLines, { dataTestId: "skeleton-lines", width: 50 })] })) : (jsxs(Fragment, { children: [jsx("img", { className: cvaImgStyles(), width: 200, height: 200, src: customImageSrc ? customImageSrc : imageSource, alt: altText }), jsxs("div", { className: cvaTextStyles(), children: [jsx(Heading, { variant: "secondary", children: title }), jsx(Text, { align: "center", children: description })] }), action] })) }));
 };
 
 /**
@@ -36563,7 +36575,7 @@ function getDevicePixelRatio(options) {
  * The boolean will be true if the element is being hovered, and false if it is not.
  * Can be directionally debounced.
  *
- * @param {ConditionalUseHoverProps} param0 The options
+ * @param {UseHoverProps} param0 The options
  * @returns {object} The object containing the onMouseEnter, onMouseLeave and hovering props
  */
 const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {

package/package.json

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

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

@@ -25,7 +25,7 @@ export interface CardProps extends CommonProps, React.InputHTMLAttributes<HTMLDi
      */
     onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     /**
-     * A MouseLEave handler function
+     * A MouseLeave handler function
      */
     onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }

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

@@ -1,2 +1,3 @@
-export declare const containerStyles: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const textStyles: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaContainerStyles: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaTextStyles: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaImgStyles: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/buttons/shared/ButtonProps.d.ts

@@ -5,7 +5,18 @@ export type ButtonVariant = "filled" | "transparent";
 export type ButtonColor = Extract<GeneralColors, "primary" | "secondary"> | Extract<IntentColors, "warning" | "danger"> | "tertiary";
 export type ButtonType = "button" | "submit";
 export interface ButtonCommonProps extends CommonProps {
+    /**
+     * An onClick handler
+     */
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * A MouseEnter handler function
+     */
+    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * A MouseLeave handler function
+     */
+    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /**
      * Whether the button is loading.
      */

package/src/hooks/useHover.d.ts

@@ -1,5 +1,5 @@
 import { DebounceDirection } from "./useDebounce";
-type ConditionalUseHoverProps = {
+type UseHoverProps = {
     debounced: true;
     delay?: number;
     direction?: DebounceDirection;
@@ -13,10 +13,10 @@ type ConditionalUseHoverProps = {
  * The boolean will be true if the element is being hovered, and false if it is not.
  * Can be directionally debounced.
  *
- * @param {ConditionalUseHoverProps} param0 The options
+ * @param {UseHoverProps} param0 The options
  * @returns {object} The object containing the onMouseEnter, onMouseLeave and hovering props
  */
-export declare const useHover: ({ debounced, delay, direction }?: ConditionalUseHoverProps) => {
+export declare const useHover: ({ debounced, delay, direction }?: UseHoverProps) => {
     onMouseEnter: () => void;
     onMouseLeave: () => void;
     hovering: boolean;