elseware-ui 3.0.12 → 3.0.13

package/dist/index.js

@@ -3,13 +3,13 @@
 var React26 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var tailwindMerge = require('tailwind-merge');
-var index_js$1 = require('react-icons/ai/index.js');
+var index_js = require('react-icons/ai/index.js');
 var formik = require('formik');
 var index_js$2 = require('react-icons/fa/index.js');
 var classNames69 = require('classnames');
 var reactBeautifulDnd = require('react-beautiful-dnd');
 var cloudinaryReact = require('cloudinary-react');
-var index_js = require('react-icons/md/index.js');
+var index_js$1 = require('react-icons/md/index.js');
 var index_js$3 = require('react-icons/bs/index.js');
 var framerMotion = require('framer-motion');
 var recharts = require('recharts');
@@ -5596,6 +5596,11 @@ var isMatch = (itemPath, currentPath) => {
 };
 
 // src/utils/styles.ts
+function extractTextColorClasses(className) {
+  return className.split(/\s+/).filter(
+    (token) => token.startsWith("text-") || token.startsWith("dark:text-") || token.startsWith("disabled:text-")
+  ).join(" ");
+}
 function resolveAppearanceStyles({
   appearance = "solid",
   variant = "default",
@@ -6249,14 +6254,6 @@ var toastShapeStyles = {
 };
 
 // src/components/data-entry/button/base/Button.styles.ts
-var buttonShapes = shapes;
-var buttonIconSizes = {
-  xs: 14,
-  sm: 16,
-  md: 18,
-  lg: 20,
-  xl: 22
-};
 function resolveButtonVariantStyles({
   appearance,
   variant
@@ -6270,108 +6267,171 @@ function resolveButtonVariantStyles({
   });
 }
 
-// src/components/data-entry/button/web/Button.web.styles.ts
-var webButtonSizes = {
-  xs: "px-2 py-1 text-xs",
-  sm: "px-3 py-1.5 text-sm",
-  md: "px-4 py-2 text-base",
-  lg: "px-5 py-3 text-lg",
-  xl: "px-6 py-4 text-xl"
+// src/components/data-entry/button/base/Button.tokens.ts
+var buttonSizeTokens = {
+  xs: {
+    padding: "px-2 py-1",
+    text: "text-xs",
+    icon: 14,
+    minHeight: "min-h-[30px]",
+    leading: "leading-[14px]",
+    slot: "h-[14px] w-[14px]"
+  },
+  sm: {
+    padding: "px-3 py-1.5",
+    text: "text-sm",
+    icon: 16,
+    minHeight: "min-h-9",
+    leading: "leading-4",
+    slot: "h-4 w-4"
+  },
+  md: {
+    padding: "px-4 py-2",
+    text: "text-base",
+    icon: 18,
+    minHeight: "min-h-11",
+    leading: "leading-[18px]",
+    slot: "h-[18px] w-[18px]"
+  },
+  lg: {
+    padding: "px-5 py-3",
+    text: "text-lg",
+    icon: 20,
+    minHeight: "min-h-[50px]",
+    leading: "leading-5",
+    slot: "h-5 w-5"
+  },
+  xl: {
+    padding: "px-6 py-4",
+    text: "text-xl",
+    icon: 22,
+    minHeight: "min-h-14",
+    leading: "leading-[22px]",
+    slot: "h-[22px] w-[22px]"
+  }
 };
-function Button({
-  type: type2 = "button",
-  icon,
-  text: text10,
-  children: children3,
-  loading = false,
-  disabled = false,
-  block = false,
-  compact = false,
-  glow = true,
-  mode,
-  contentClassName,
-  labelClassName,
-  variant,
-  appearance,
-  shape,
-  size,
-  accessibilityLabel,
-  accessibilityRole,
-  accessibilityState,
-  testID,
-  className,
-  onMouseMove,
-  onClick,
-  onPress,
-  ...rest
-}) {
-  const accessibility = accessibilityState;
+var buttonShapes = shapes;
+var buttonTextModeClassName = "border-transparent bg-transparent";
+
+// src/components/data-entry/button/base/useButton.ts
+function useButton(props) {
   const {
-    shape: resolvedShape,
-    size: resolvedSize,
-    variant: resolvedVariant,
-    appearance: resolvedAppearance
-  } = useResolvedButtonConfig({
-    compact,
+    // Consumed by the shared model
+    icon,
+    text: text10,
+    children: children3,
+    loading = false,
+    disabled = false,
+    block = false,
+    compact = false,
     mode,
     variant,
     appearance,
     shape,
-    size
-  });
-  const btnRef = React26.useRef(null);
-  const variantStyles = resolveButtonVariantStyles({
+    size,
+    accessibilityState,
+    onPress,
+    // Owned by the platform views — pulled out here only so `rootRest` is a
+    // clean pass-through (no library props leak onto the DOM / native root).
+    type: _type,
+    glow: _glow,
+    className: _className,
+    contentClassName: _contentClassName,
+    labelClassName: _labelClassName,
+    accessibilityLabel: _accessibilityLabel,
+    accessibilityRole: _accessibilityRole,
+    testID: _testID,
+    onClick: _onClick,
+    onMouseMove: _onMouseMove,
+    ...rootRest
+  } = props;
+  const { shape: resolvedShape, size: resolvedSize, variant: resolvedVariant, appearance: resolvedAppearance } = useResolvedButtonConfig({ compact, mode, variant, appearance, shape, size });
+  const tokens = buttonSizeTokens[resolvedSize];
+  const variantClassName = resolveButtonVariantStyles({
     appearance: resolvedAppearance,
     variant: resolvedVariant
   });
-  const iconSize = buttonIconSizes[resolvedSize];
-  const labelContent = text10 || children3;
-  const resolvedIcon = typeof icon === "function" ? icon({
-    color: "currentColor",
-    size: iconSize
-  }) : icon;
+  const label = text10 ?? children3;
+  const resolvedIcon = typeof icon === "function" ? icon({ color: "currentColor", size: tokens.icon }) : icon;
+  const isBusy = disabled || loading;
+  return {
+    size: resolvedSize,
+    shape: resolvedShape,
+    tokens,
+    isBusy,
+    isInteractive: !isBusy,
+    isTextMode: mode === "text",
+    block,
+    loading,
+    iconSize: tokens.icon,
+    icon: resolvedIcon,
+    label,
+    hasTextLabel: typeof label === "string" || typeof label === "number",
+    variantClassName,
+    shapeClassName: buttonShapes[resolvedShape],
+    labelColorClassName: extractTextColorClasses(variantClassName),
+    selected: accessibilityState?.selected,
+    onPress,
+    rootRest
+  };
+}
+var WEB_ROOT = "relative overflow-hidden group inline-flex items-center justify-center gap-2 transition-all duration-300";
+var Button = React26.forwardRef(function Button2(props, ref) {
+  const {
+    type: type2 = "button",
+    glow = true,
+    className,
+    contentClassName,
+    labelClassName,
+    accessibilityLabel,
+    accessibilityRole,
+    testID,
+    onClick,
+    onMouseMove
+  } = props;
+  const model = useButton(props);
+  const localRef = React26.useRef(null);
+  const setRef = (node2) => {
+    localRef.current = node2;
+    if (typeof ref === "function") ref(node2);
+    else if (ref) ref.current = node2;
+  };
   const handleMouseMove = (e) => {
-    const btn = btnRef.current;
-    if (!btn || !glow) {
-      onMouseMove?.(e);
-      return;
+    const btn = localRef.current;
+    if (btn && glow) {
+      const rect = btn.getBoundingClientRect();
+      btn.style.setProperty("--glow-x", `${e.clientX - rect.left}px`);
+      btn.style.setProperty("--glow-y", `${e.clientY - rect.top}px`);
     }
-    const rect = btn.getBoundingClientRect();
-    const x3 = e.clientX - rect.left;
-    const y3 = e.clientY - rect.top;
-    btn.style.setProperty("--glow-x", `${x3}px`);
-    btn.style.setProperty("--glow-y", `${y3}px`);
     onMouseMove?.(e);
   };
   const handleClick = (e) => {
     onClick?.(e);
-    if (!e.defaultPrevented) {
-      onPress?.();
-    }
+    if (!e.defaultPrevented) model.onPress?.();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
-      ...rest,
-      ref: btnRef,
+      ...model.rootRest,
+      ref: setRef,
       type: type2,
-      disabled: disabled || loading,
+      disabled: model.isBusy,
       onClick: handleClick,
       onMouseMove: handleMouseMove,
-      "aria-disabled": disabled || loading,
+      "aria-disabled": model.isBusy,
       "aria-label": accessibilityLabel,
-      "aria-pressed": accessibility?.selected === void 0 ? void 0 : Boolean(accessibility.selected),
+      "aria-pressed": model.selected,
       "data-testid": testID,
       role: accessibilityRole,
       className: cn(
-        "relative overflow-hidden group inline-flex items-center justify-center gap-2 transition-all duration-300",
-        variantStyles,
-        buttonShapes[resolvedShape],
-        webButtonSizes[resolvedSize],
-        block && "w-full",
-        mode === "text" && "border-transparent bg-transparent",
-        (loading || disabled) && "brightness-75 grayscale cursor-not-allowed",
-        !loading && !disabled && "hover:cursor-pointer",
+        WEB_ROOT,
+        model.variantClassName,
+        model.shapeClassName,
+        model.tokens.padding,
+        model.tokens.text,
+        model.block && "w-full",
+        model.isTextMode && buttonTextModeClassName,
+        model.isBusy ? "brightness-75 grayscale cursor-not-allowed" : "hover:cursor-pointer",
         className
       ),
       children: [
@@ -6380,49 +6440,37 @@ function Button({
           {
             className: "pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300",
             style: {
-              background: `
-              radial-gradient(
-                200px circle at var(--glow-x) var(--glow-y),
-                rgba(255,255,255,0.18),
-                transparent 50%
-              )
-            `
+              background: "radial-gradient(200px circle at var(--glow-x) var(--glow-y), rgba(255,255,255,0.18), transparent 50%)"
             }
           }
         ),
-        loading && /* @__PURE__ */ jsxRuntime.jsx(index_js$1.AiOutlineLoading, { className: "animate-spin z-10" }),
-        resolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(
+        model.loading && /* @__PURE__ */ jsxRuntime.jsx(index_js.AiOutlineLoading, { className: "animate-spin z-10" }),
+        model.icon && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             className: cn(
               "z-10 inline-flex shrink-0 items-center justify-center leading-none",
               contentClassName
             ),
-            style: {
-              height: iconSize,
-              lineHeight: 0,
-              width: iconSize
-            },
-            children: resolvedIcon
+            style: { height: model.iconSize, width: model.iconSize, lineHeight: 0 },
+            children: model.icon
           }
         ),
-        labelContent && /* @__PURE__ */ jsxRuntime.jsx(
+        model.label != null && model.label !== "" && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             className: cn(
               "z-10 inline-flex items-center justify-center leading-none",
               labelClassName
             ),
-            style: {
-              minHeight: iconSize
-            },
-            children: labelContent
+            style: { minHeight: model.iconSize },
+            children: model.label
           }
         )
       ]
     }
   );
-}
+});
 var Button_web_default = Button;
 
 // src/data/styles/shared.styles.tsx
@@ -8640,7 +8688,7 @@ var ImageInput = React26.forwardRef(
               }),
               htmlFor: `${field.name}`,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl text-gray-300 group-hover:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdUpload, {}) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl text-gray-300 group-hover:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdUpload, {}) }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xl font-bold text-gray-500 group-hover:text-gray-500", children: title })
               ]
             }
@@ -8656,7 +8704,7 @@ var ImageInput = React26.forwardRef(
         ) }),
         loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[200px] w-[300px] bg-black opacity-50" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.AiOutlineLoading, { className: "animate-spin" }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(index_js.AiOutlineLoading, { className: "animate-spin" }) })
         ] }),
         !loading && url && /* @__PURE__ */ jsxRuntime.jsx(ImageView, { imageUrl: url, alt: url ? url : "image" }),
         (preview || url) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 text-3xl", children: [
@@ -8666,7 +8714,7 @@ var ImageInput = React26.forwardRef(
               className: " text-green-600 hover:cursor-pointer",
               onClick: uploadImage,
               hidden: url ? true : false,
-              children: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdOutlineDone, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdOutlineDone, {})
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -8674,7 +8722,7 @@ var ImageInput = React26.forwardRef(
             {
               className: "text-red-500 hover:cursor-pointer",
               onClick: handleResetClick,
-              children: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdOutlineRemoveCircleOutline, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdOutlineRemoveCircleOutline, {})
             }
           )
         ] })
@@ -8830,7 +8878,7 @@ function MultiImageInput({
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(ImageView, { imageUrl: url }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-2 top-2 inline-flex items-center gap-1 rounded bg-black/60 px-2 py-1 text-xs text-white", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(index_js.MdDragIndicator, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdDragIndicator, {}),
                 index3 + 1
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-2 top-2 flex gap-1", children: [
@@ -8841,7 +8889,7 @@ function MultiImageInput({
                     accessibilityLabel: "Move image left",
                     disabled: index3 === 0 || isOrganizerBusy,
                     glow: false,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdKeyboardArrowLeft, {}),
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdKeyboardArrowLeft, {}),
                     onPress: () => moveImage(index3, index3 - 1),
                     size: "xs",
                     className: "h-8 w-8 bg-black/60 p-0 text-xl text-white hover:bg-black/80 disabled:opacity-40"
@@ -8854,7 +8902,7 @@ function MultiImageInput({
                     accessibilityLabel: "Move image right",
                     disabled: index3 === imageUrls.length - 1 || isOrganizerBusy,
                     glow: false,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdKeyboardArrowRight, {}),
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdKeyboardArrowRight, {}),
                     onPress: () => moveImage(index3, index3 + 1),
                     size: "xs",
                     className: "h-8 w-8 bg-black/60 p-0 text-xl text-white hover:bg-black/80 disabled:opacity-40"
@@ -8884,7 +8932,7 @@ function MultiImageInput({
                     accessibilityLabel: "Change image",
                     disabled: isOrganizerBusy,
                     glow: false,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdUpload, {}),
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdUpload, {}),
                     onPress: () => openReplacePicker(index3),
                     size: "sm",
                     text: "Change",
@@ -8899,14 +8947,14 @@ function MultiImageInput({
                     accessibilityLabel: "Delete image",
                     disabled: isOrganizerBusy,
                     glow: false,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdOutlineDelete, {}),
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdOutlineDelete, {}),
                     onPress: () => removeImage(index3),
                     size: "sm",
                     variant: "danger"
                   }
                 )
               ] }),
-              isReplacing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/60 text-2xl text-white", children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.AiOutlineLoading, { className: "animate-spin" }) })
+              isReplacing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/60 text-2xl text-white", children: /* @__PURE__ */ jsxRuntime.jsx(index_js.AiOutlineLoading, { className: "animate-spin" }) })
             ]
           },
           `${url}-${index3}`
@@ -59461,6 +59509,7 @@ exports.ensureAnonymousIdStorage = ensureAnonymousIdStorage;
 exports.enumValues = enumValues;
 exports.euiToast = euiToast;
 exports.extractHeadings = extractHeadings;
+exports.extractTextColorClasses = extractTextColorClasses;
 exports.findReview = findReview;
 exports.formatChartLabel = formatChartLabel;
 exports.formatChartValue = formatChartValue;