@chekinapp/ui 0.0.48 → 0.0.50

package/dist/index.d.cts

@@ -2105,13 +2105,14 @@ declare function Skeleton({ className, ...props }: SkeletonProps): react_jsx_run
 type MainLoaderProps = {
     visible?: boolean;
     label?: string | ReactNode;
-    height?: number;
+    size?: 'sm' | 'md' | 'lg';
+    height?: number | string;
     width?: number | string;
     position?: 'center';
     className?: string;
 };
 
-declare const CircularLoader: React__default.MemoExoticComponent<({ visible, height, width, position, label, className }: MainLoaderProps) => react_jsx_runtime.JSX.Element | null>;
+declare const CircularLoader: React__default.MemoExoticComponent<({ visible, size, height, width, position, label, className, }: MainLoaderProps) => react_jsx_runtime.JSX.Element | null>;
 
 type SmallGridSingleItemProps = {
     title?: string;

package/dist/index.d.ts

@@ -2105,13 +2105,14 @@ declare function Skeleton({ className, ...props }: SkeletonProps): react_jsx_run
 type MainLoaderProps = {
     visible?: boolean;
     label?: string | ReactNode;
-    height?: number;
+    size?: 'sm' | 'md' | 'lg';
+    height?: number | string;
     width?: number | string;
     position?: 'center';
     className?: string;
 };
 
-declare const CircularLoader: React__default.MemoExoticComponent<({ visible, height, width, position, label, className }: MainLoaderProps) => react_jsx_runtime.JSX.Element | null>;
+declare const CircularLoader: React__default.MemoExoticComponent<({ visible, size, height, width, position, label, className, }: MainLoaderProps) => react_jsx_runtime.JSX.Element | null>;
 
 type SmallGridSingleItemProps = {
     title?: string;

package/dist/index.js

@@ -5956,8 +5956,26 @@ import { memo as memo4 } from "react";
 // src/circular-loader/CircularLoader.tsx
 import React21 from "react";
 import { jsx as jsx74, jsxs as jsxs47 } from "react/jsx-runtime";
+var loaderSizePixels = {
+  sm: 16,
+  md: 32,
+  lg: 48
+};
+var labelSizeClassName = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
 var CircularLoader = React21.memo(
-  ({ visible = true, height, width, position, label, className }) => {
+  ({
+    visible = true,
+    size = "md",
+    height,
+    width,
+    position,
+    label,
+    className
+  }) => {
     if (!visible) return null;
     return /* @__PURE__ */ jsxs47(
       "div",
@@ -5975,8 +5993,8 @@ var CircularLoader = React21.memo(
               viewBox: "25 25 50 50",
               className: "main-loader__svg text-[var(--circular-loader-color)]",
               style: {
-                width: toCssSize(width),
-                height: toCssSize(height)
+                width: toCssSize(width ?? loaderSizePixels[size]),
+                height: toCssSize(height ?? width ?? loaderSizePixels[size])
               },
               children: [
                 /* @__PURE__ */ jsx74(
@@ -6042,7 +6060,7 @@ var CircularLoader = React21.memo(
               ]
             }
           ),
-          label && /* @__PURE__ */ jsx74("div", { className: "text-sm font-medium text-chekin-gray-1", children: label })
+          label && /* @__PURE__ */ jsx74("div", { className: cn(labelSizeClassName[size], "font-medium text-chekin-gray-1"), children: label })
         ]
       }
     );
@@ -6060,14 +6078,7 @@ var ModalLoader = memo4(({ visible, className }) => /* @__PURE__ */ jsx75(
       visible ? "flex" : "hidden",
       className
     ),
-    children: /* @__PURE__ */ jsx75("div", { className: "mb-[60px]", children: /* @__PURE__ */ jsx75(
-      CircularLoader,
-      {
-        width: 48,
-        height: 48,
-        className: "[--circular-loader-color:#475569]"
-      }
-    ) })
+    children: /* @__PURE__ */ jsx75("div", { className: "mb-[60px]", children: /* @__PURE__ */ jsx75(CircularLoader, { size: "lg", className: "[--circular-loader-color:#475569]" }) })
   }
 ));
 ModalLoader.displayName = "ModalLoader";
@@ -6092,7 +6103,7 @@ function OverlayLoader({
           "absolute inset-0 flex items-center justify-center bg-[rgb(255_255_255_/_0.6)]",
           overlayClassName
         ),
-        children: /* @__PURE__ */ jsx76(CircularLoader, { width: 48, height: 48, label: label || t("loading") })
+        children: /* @__PURE__ */ jsx76(CircularLoader, { size: "lg", label: label || t("loading") })
       }
     )
   ] });
@@ -6108,7 +6119,7 @@ function PageLoader({ className, description, label }) {
     {
       className: cn("flex min-h-[300px] flex-col items-center justify-center", className),
       children: /* @__PURE__ */ jsxs49("div", { className: "flex flex-col items-center rounded-lg border border-[var(--chekin-color-gray-3)] bg-[rgb(255_255_255_/_0.8)] p-8 shadow-sm backdrop-blur-sm", children: [
-        /* @__PURE__ */ jsx77(CircularLoader, { width: 48, height: 48, label: label || t("loading") }),
+        /* @__PURE__ */ jsx77(CircularLoader, { size: "lg", label: label || t("loading") }),
         /* @__PURE__ */ jsx77("p", { className: "mt-4 max-w-xs text-center text-sm text-[var(--chekin-color-gray-1)]", children: description || t("loading_data_description") })
       ] })
     }
@@ -7269,8 +7280,7 @@ var Section = forwardRef38(
           loading && showLoader ? /* @__PURE__ */ jsx95(
             CircularLoader,
             {
-              width: 32,
-              height: 32,
+              size: "md",
               label: t("loading"),
               className: "mx-auto mb-3 mt-2.5"
             }