elseware-ui 2.34.1 → 2.35.0

package/dist/index.js

@@ -811,6 +811,77 @@ var checkboxVariants = {
   light: "checked:bg-eui-light-400 checked:border-eui-light-400 dark:checked:bg-gray-200 dark:checked:border-gray-200",
   dark: "checked:bg-eui-dark-500 checked:border-eui-dark-500 dark:checked:bg-eui-dark-300 dark:checked:border-eui-dark-300"
 };
+var spinnerSizes = {
+  xs: "w-4 h-4",
+  sm: "w-5 h-5",
+  md: "w-8 h-8",
+  lg: "w-12 h-12",
+  xl: "w-16 h-16"
+};
+var spinnerDotSizes = {
+  xs: "w-1 h-1",
+  sm: "w-1.5 h-1.5",
+  md: "w-2 h-2",
+  lg: "w-3 h-3",
+  xl: "w-4 h-4"
+};
+var spinnerBarSizes = {
+  xs: "w-0.5 h-3",
+  sm: "w-1 h-4",
+  md: "w-1.5 h-6",
+  lg: "w-2 h-8",
+  xl: "w-2.5 h-10"
+};
+var spinnerTextSizes = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-lg"
+};
+var spinnerStrokeSizes = {
+  xs: "border-2",
+  sm: "border-2",
+  md: "border-4",
+  lg: "border-4",
+  xl: "border-[5px]"
+};
+var spinnerVariants = {
+  default: "text-gray-500 dark:text-gray-300",
+  primary: "text-eui-primary-500 dark:text-eui-primary-400",
+  secondary: "text-eui-secondary-500 dark:text-eui-secondary-400",
+  success: "text-eui-success-500 dark:text-eui-success-400",
+  danger: "text-eui-danger-500 dark:text-eui-danger-400",
+  warning: "text-eui-warning-500 dark:text-eui-warning-400",
+  info: "text-eui-info-500 dark:text-eui-info-400",
+  light: "text-eui-light-500 dark:text-eui-light-300",
+  dark: "text-eui-dark-500 dark:text-eui-dark-300"
+};
+var spinnerTrackVariants = {
+  default: "border-gray-200 dark:border-gray-700",
+  primary: "border-eui-primary-500/20",
+  secondary: "border-eui-secondary-500/20",
+  success: "border-eui-success-500/20",
+  danger: "border-eui-danger-500/20",
+  warning: "border-eui-warning-500/20",
+  info: "border-eui-info-500/20",
+  light: "border-eui-light-500/20",
+  dark: "border-eui-dark-500/20"
+};
+var gridDotSizes = {
+  xs: "h-1 w-1",
+  sm: "h-1.5 w-1.5",
+  md: "h-2 w-2",
+  lg: "h-2.5 w-2.5",
+  xl: "h-3 w-3"
+};
+var waveItemSizes = {
+  xs: "h-3 w-0.5",
+  sm: "h-4 w-1",
+  md: "h-6 w-1.5",
+  lg: "h-8 w-2",
+  xl: "h-10 w-2.5"
+};
 var Avatar = ({
   alt,
   icon,
@@ -5140,6 +5211,227 @@ function ProgressBarRating({
   ] });
 }
 var ProgressBarRating_default = ProgressBarRating;
+var Backdrop = ({ children, styles }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classNames16__default.default({
+        "bg-black/75 top-0 bottom-0 left-0 right-0 z-50 fixed inset-0 flex items-center justify-center overflow-hidden": true,
+        [`${styles}`]: styles
+      }),
+      children
+    }
+  );
+};
+var Backdrop_default = Backdrop;
+var DEFAULT_SPINNER_TYPE = "border";
+var DEFAULT_SPINNER_SIZE = "md";
+var DEFAULT_SPINNER_VARIANT = "primary";
+var DEFAULT_SPINNER_ARIA_LABEL = "Loading";
+var SPINNER_DOT_COUNT = 3;
+var SPINNER_BAR_COUNT = 5;
+var SPINNER_GRID_COUNT = 9;
+var SPINNER_WAVE_COUNT = 5;
+function Spinner({
+  type = DEFAULT_SPINNER_TYPE,
+  variant = DEFAULT_SPINNER_VARIANT,
+  size = DEFAULT_SPINNER_SIZE,
+  label,
+  showLabel = true,
+  centered = false,
+  fullscreen = false,
+  overlay = false,
+  backdrop = true,
+  direction = "vertical",
+  className,
+  spinnerClassName,
+  labelClassName,
+  ariaLabel = DEFAULT_SPINNER_ARIA_LABEL,
+  ...rest
+}) {
+  const hasVisibleLabel = Boolean(label) && showLabel;
+  const spinnerColorClass = spinnerVariants[variant];
+  const baseSpinnerClasses = cn(
+    "eui-spinner",
+    "inline-flex shrink-0 items-center justify-center",
+    spinnerSizes[size],
+    spinnerColorClass,
+    spinnerClassName
+  );
+  const labelClasses = cn(
+    "eui-spinner-label",
+    "font-medium",
+    spinnerTextSizes[size],
+    spinnerColorClass,
+    labelClassName
+  );
+  const contentLayoutClasses = cn(
+    "eui-spinner-wrapper",
+    "inline-flex items-center justify-center",
+    direction === "vertical" ? "flex-col gap-3" : "flex-row gap-3",
+    spinnerColorClass
+  );
+  const wrapperClasses = cn(
+    contentLayoutClasses,
+    centered && !fullscreen && !overlay && "w-full py-6",
+    fullscreen && !backdrop && "fixed inset-0 z-50",
+    overlay && "absolute inset-0 z-40",
+    overlay && (backdrop ? "bg-white/70 backdrop-blur-sm dark:bg-black/60" : "bg-transparent"),
+    className
+  );
+  const renderSpinner = () => {
+    switch (type) {
+      case "ring":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              baseSpinnerClasses,
+              "eui-spinner-ring rounded-full",
+              spinnerStrokeSizes[size]
+            )
+          }
+        );
+      case "dots":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              baseSpinnerClasses,
+              "gap-1",
+              size === "xl" && "gap-2"
+            ),
+            children: Array.from({ length: SPINNER_DOT_COUNT }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "eui-spinner-dot rounded-full bg-current",
+                  spinnerDotSizes[size]
+                )
+              },
+              index
+            ))
+          }
+        );
+      case "bars":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              baseSpinnerClasses,
+              "gap-1",
+              size === "xl" && "gap-1.5"
+            ),
+            children: Array.from({ length: SPINNER_BAR_COUNT }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "eui-spinner-bar rounded-full bg-current",
+                  spinnerBarSizes[size]
+                )
+              },
+              index
+            ))
+          }
+        );
+      case "pulse":
+        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(baseSpinnerClasses, "eui-spinner-pulse") });
+      case "orbit":
+        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(baseSpinnerClasses, "eui-spinner-orbit") });
+      case "dualRing":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              baseSpinnerClasses,
+              "eui-spinner-dual-ring rounded-full"
+            )
+          }
+        );
+      case "ripple":
+        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(baseSpinnerClasses, "eui-spinner-ripple") });
+      case "grid":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              baseSpinnerClasses,
+              "grid grid-cols-3",
+              size === "xs" || size === "sm" ? "gap-0.5" : "gap-1"
+            ),
+            children: Array.from({ length: SPINNER_GRID_COUNT }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn("eui-spinner-grid-dot", gridDotSizes[size])
+              },
+              index
+            ))
+          }
+        );
+      case "wave":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              baseSpinnerClasses,
+              "gap-1",
+              size === "xl" && "gap-1.5"
+            ),
+            children: Array.from({ length: SPINNER_WAVE_COUNT }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn("eui-spinner-wave-item", waveItemSizes[size])
+              },
+              index
+            ))
+          }
+        );
+      case "border":
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              baseSpinnerClasses,
+              "eui-spinner-border rounded-full",
+              spinnerStrokeSizes[size],
+              spinnerTrackVariants[variant]
+            )
+          }
+        );
+    }
+  };
+  const spinnerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    renderSpinner(),
+    hasVisibleLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClasses, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: ariaLabel })
+  ] });
+  if (fullscreen && backdrop) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Backdrop_default, { styles: cn("text-white", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...rest,
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": ariaLabel,
+        className: contentLayoutClasses,
+        children: spinnerContent
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": ariaLabel,
+      className: wrapperClasses,
+      children: spinnerContent
+    }
+  );
+}
+var Spinner_default = Spinner;
 function Table({
   title,
   columns,
@@ -5452,19 +5744,6 @@ var Form = ({
     }
   );
 };
-var Backdrop = ({ children, styles }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: classNames16__default.default({
-        "bg-black/75 top-0 bottom-0 left-0 right-0 z-50 fixed inset-0 flex items-center justify-center overflow-hidden": true,
-        [`${styles}`]: styles
-      }),
-      children
-    }
-  );
-};
-var Backdrop_default = Backdrop;
 var Skeleton = ({ children, className, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -5721,7 +6000,7 @@ var ShapeSwitch = () => {
     {
       value: currentShape,
       onChange: handleChange,
-      className: "\r\n          px-3 py-2 rounded-md border border-gray-300\r\n          bg-white dark:bg-gray-800\r\n          text-sm shadow-sm\r\n          focus:outline-none\r\n        ",
+      className: "\n          px-3 py-2 rounded-md border border-gray-300\n          bg-white dark:bg-gray-800\n          text-sm shadow-sm\n          focus:outline-none\n        ",
       children: Object.keys(Shape).map((shape) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: shape, children: shape }, shape))
     }
   ) });
@@ -18715,7 +18994,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
       {
-        className: "\r\n            text-sm\r\n            font-semibold\r\n            uppercase\r\n            tracking-wide\r\n            text-gray-900\r\n            dark:text-gray-100\r\n          ",
+        className: "\n            text-sm\n            font-semibold\n            uppercase\n            tracking-wide\n            text-gray-900\n            dark:text-gray-100\n          ",
         children: title
       }
     ) }),
@@ -20045,7 +20324,7 @@ var GlowWrapper = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "\r\n          pointer-events-none absolute inset-0 opacity-0 \r\n          group-hover:opacity-100 transition-opacity duration-300\r\n        ",
+            className: "\n          pointer-events-none absolute inset-0 opacity-0 \n          group-hover:opacity-100 transition-opacity duration-300\n        ",
             style: { background: "var(--glow-bg)" }
           }
         ),
@@ -21872,6 +22151,7 @@ exports.SidebarLayout = SidebarLayout_default;
 exports.SidemenuLayout = SidemenuLayout_default;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider_default;
+exports.Spinner = Spinner_default;
 exports.StarRating = StarRating_default;
 exports.StarRatingDistribution = StarRatingDistribution_default;
 exports.StarRatingInput = StarRatingInput_default;