@chekinapp/ui 0.0.48 → 0.0.49

package/dist/index.cjs

@@ -6269,8 +6269,26 @@ var import_react49 = require("react");
 // src/circular-loader/CircularLoader.tsx
 var import_react48 = __toESM(require("react"), 1);
 var import_jsx_runtime76 = require("react/jsx-runtime");
+var loaderSizePixels = {
+  sm: 16,
+  md: 32,
+  lg: 48
+};
+var labelSizeClassName = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
 var CircularLoader = import_react48.default.memo(
-  ({ visible = true, height, width, position, label, className }) => {
+  ({
+    visible = true,
+    size = "md",
+    height,
+    width,
+    position,
+    label,
+    className
+  }) => {
     if (!visible) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
       "div",
@@ -6288,8 +6306,8 @@ var CircularLoader = import_react48.default.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 ?? loaderSizePixels[size])
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
@@ -6355,7 +6373,7 @@ var CircularLoader = import_react48.default.memo(
               ]
             }
           ),
-          label && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "text-sm font-medium text-chekin-gray-1", children: label })
+          label && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: cn(labelSizeClassName[size], "font-medium text-chekin-gray-1"), children: label })
         ]
       }
     );
@@ -6373,14 +6391,7 @@ var ModalLoader = (0, import_react49.memo)(({ visible, className }) => /* @__PUR
       visible ? "flex" : "hidden",
       className
     ),
-    children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "mb-[60px]", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
-      CircularLoader,
-      {
-        width: 48,
-        height: 48,
-        className: "[--circular-loader-color:#475569]"
-      }
-    ) })
+    children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "mb-[60px]", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(CircularLoader, { size: "lg", className: "[--circular-loader-color:#475569]" }) })
   }
 ));
 ModalLoader.displayName = "ModalLoader";
@@ -6405,7 +6416,7 @@ function OverlayLoader({
           "absolute inset-0 flex items-center justify-center bg-[rgb(255_255_255_/_0.6)]",
           overlayClassName
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CircularLoader, { width: 48, height: 48, label: label || t("loading") })
+        children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CircularLoader, { size: "lg", label: label || t("loading") })
       }
     )
   ] });
@@ -6421,7 +6432,7 @@ function PageLoader({ className, description, label }) {
     {
       className: cn("flex min-h-[300px] flex-col items-center justify-center", className),
       children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("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__ */ (0, import_jsx_runtime79.jsx)(CircularLoader, { width: 48, height: 48, label: label || t("loading") }),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(CircularLoader, { size: "lg", label: label || t("loading") }),
         /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "mt-4 max-w-xs text-center text-sm text-[var(--chekin-color-gray-1)]", children: description || t("loading_data_description") })
       ] })
     }
@@ -7582,8 +7593,7 @@ var Section = (0, import_react55.forwardRef)(
           loading && showLoader ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
             CircularLoader,
             {
-              width: 32,
-              height: 32,
+              size: "md",
               label: t("loading"),
               className: "mx-auto mb-3 mt-2.5"
             }