elseware-ui 3.0.3 → 3.0.4

package/dist/index.mjs

@@ -7778,6 +7778,17 @@ var InputListGroup = ({
 function isMultiCheckbox(props) {
   return Array.isArray(props.options);
 }
+function resolveCheckboxColumns(columns) {
+  return columns ?? 1;
+}
+function chunkCheckboxOptions(options, columns) {
+  const resolvedColumns = resolveCheckboxColumns(columns);
+  const chunkSize = Math.ceil(options.length / resolvedColumns);
+  return Array.from(
+    { length: resolvedColumns },
+    (_2, columnIndex) => options.slice(columnIndex * chunkSize, (columnIndex + 1) * chunkSize)
+  ).filter((columnOptions) => columnOptions.length > 0);
+}
 function useResolvedCheckboxConfig({
   label,
   placeholder,
@@ -7936,6 +7947,7 @@ function Checkbox(checkboxProps) {
   const activeFieldName = isMulti ? multiField.name : singleField.name;
   const activeMeta = isMulti ? multiMeta : singleMeta;
   const multiProps = isMultiCheckbox(checkboxProps) ? checkboxProps : null;
+  const optionColumns = multiProps ? chunkCheckboxOptions(multiProps.options, multiProps.columns) : [];
   const singleChecked = singleField.value;
   return /* @__PURE__ */ jsxs("div", { className: cn(checkboxGroupClassName, groupClassName), children: [
     !isMulti && /* @__PURE__ */ jsxs("div", { className: cn(checkboxOptionRowClassName, optionClassName), children: [
@@ -7979,67 +7991,74 @@ function Checkbox(checkboxProps) {
         }
       ) : null
     ] }),
-    isMulti && multiProps?.options.map((option) => {
-      const values = multiField.value ?? [];
-      const checked = values.includes(option.value);
-      const optionDisabled = disabled || option.disabled === true;
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(checkboxOptionRowClassName, optionClassName),
-          children: [
-            /* @__PURE__ */ jsxs("span", { className: "relative inline-flex h-5 w-5 shrink-0 items-center justify-center", children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  id: option.value,
-                  name: multiField.name,
-                  type: "checkbox",
-                  checked,
-                  disabled: optionDisabled,
-                  onBlur: multiField.onBlur,
-                  onChange: () => {
-                    multiHelpers.setValue(
-                      checked ? values.filter((value) => value !== option.value) : [...values, option.value]
-                    );
-                  },
-                  className: getIndicatorClassName({
-                    checked,
-                    className,
-                    disabled: optionDisabled,
-                    indicatorClassName,
-                    checkedIndicatorClassName,
-                    resolvedShape,
-                    variantCheckedClassName: variantStyles.checkedClassName
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Tick,
-                {
-                  checked,
-                  checkedIconClassName,
-                  iconClassName: variantStyles.iconClassName
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              "label",
-              {
-                htmlFor: option.value,
-                className: cn(
-                  checkboxLabelClassName,
-                  optionDisabled && "cursor-not-allowed opacity-60",
-                  labelClassName
-                ),
-                children: option.label
-              }
-            )
-          ]
-        },
-        option.value
-      );
-    }),
+    isMulti && multiProps ? /* @__PURE__ */ jsx("div", { className: "flex w-full flex-row gap-6", children: optionColumns.map((columnOptions, columnIndex) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex min-w-0 flex-1 flex-col gap-2",
+        children: columnOptions.map((option) => {
+          const values = multiField.value ?? [];
+          const checked = values.includes(option.value);
+          const optionDisabled = disabled || option.disabled === true;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(checkboxOptionRowClassName, optionClassName),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "relative inline-flex h-5 w-5 shrink-0 items-center justify-center", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id: option.value,
+                      name: multiField.name,
+                      type: "checkbox",
+                      checked,
+                      disabled: optionDisabled,
+                      onBlur: multiField.onBlur,
+                      onChange: () => {
+                        multiHelpers.setValue(
+                          checked ? values.filter((value) => value !== option.value) : [...values, option.value]
+                        );
+                      },
+                      className: getIndicatorClassName({
+                        checked,
+                        className,
+                        disabled: optionDisabled,
+                        indicatorClassName,
+                        checkedIndicatorClassName,
+                        resolvedShape,
+                        variantCheckedClassName: variantStyles.checkedClassName
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Tick,
+                    {
+                      checked,
+                      checkedIconClassName,
+                      iconClassName: variantStyles.iconClassName
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "label",
+                  {
+                    htmlFor: option.value,
+                    className: cn(
+                      checkboxLabelClassName,
+                      optionDisabled && "cursor-not-allowed opacity-60",
+                      labelClassName
+                    ),
+                    children: option.label
+                  }
+                )
+              ]
+            },
+            option.value
+          );
+        })
+      },
+      `${multiField.name}-column-${columnIndex}`
+    )) }) : null,
     /* @__PURE__ */ jsx(
       InputResponse,
       {
@@ -8435,6 +8454,7 @@ function MultiImageInput({
   );
   const [imageUrls, setImageUrls] = useState(fieldImageUrls);
   const imageInputRef = useRef(null);
+  const replaceInputRefs = useRef({});
   const [draggedIndex, setDraggedIndex] = useState(null);
   const [replacingIndex, setReplacingIndex] = useState(null);
   const isOrganizerBusy = replacingIndex !== null;
@@ -8528,6 +8548,9 @@ function MultiImageInput({
     moveImage(draggedIndex, index3);
     setDraggedIndex(null);
   };
+  const openReplacePicker = (index3) => {
+    replaceInputRefs.current[index3]?.click();
+  };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row flex-wrap gap-5 w-full", children: [
       imageUrls.map((url, index3) => {
@@ -8554,65 +8577,74 @@ function MultiImageInput({
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-2 flex gap-1", children: [
                 /* @__PURE__ */ jsx(
-                  "button",
+                  Button_web_default,
                   {
-                    type: "button",
                     title: "Move image left",
-                    "aria-label": "Move image left",
+                    accessibilityLabel: "Move image left",
                     disabled: index3 === 0 || isOrganizerBusy,
-                    onClick: () => moveImage(index3, index3 - 1),
-                    className: "inline-flex h-8 w-8 items-center justify-center rounded bg-black/60 text-xl text-white transition-colors hover:bg-black/80 disabled:cursor-not-allowed disabled:opacity-40",
-                    children: /* @__PURE__ */ jsx(MdKeyboardArrowLeft, {})
+                    glow: false,
+                    icon: /* @__PURE__ */ jsx(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"
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  "button",
+                  Button_web_default,
                   {
-                    type: "button",
                     title: "Move image right",
-                    "aria-label": "Move image right",
+                    accessibilityLabel: "Move image right",
                     disabled: index3 === imageUrls.length - 1 || isOrganizerBusy,
-                    onClick: () => moveImage(index3, index3 + 1),
-                    className: "inline-flex h-8 w-8 items-center justify-center rounded bg-black/60 text-xl text-white transition-colors hover:bg-black/80 disabled:cursor-not-allowed disabled:opacity-40",
-                    children: /* @__PURE__ */ jsx(MdKeyboardArrowRight, {})
+                    glow: false,
+                    icon: /* @__PURE__ */ jsx(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"
                   }
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "absolute bottom-2 left-2 right-2 flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsxs(
-                  "label",
+                /* @__PURE__ */ jsx(
+                  "input",
                   {
+                    ref: (input) => {
+                      replaceInputRefs.current[index3] = input;
+                    },
+                    type: "file",
+                    className: "hidden",
+                    accept: "image/*",
+                    disabled: isOrganizerBusy,
+                    onChange: (event) => void handleReplaceImage(index3, event)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button_web_default,
+                  {
+                    block: true,
+                    appearance: "solid",
                     title: "Change image",
-                    className: classNames73(
-                      "inline-flex h-9 flex-1 items-center justify-center gap-2 rounded bg-green-600 px-3 text-sm font-semibold text-white transition-colors",
-                      isOrganizerBusy ? "pointer-events-none cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-green-700"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          type: "file",
-                          className: "hidden",
-                          accept: "image/*",
-                          disabled: isOrganizerBusy,
-                          onChange: (event) => void handleReplaceImage(index3, event)
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(MdUpload, {}),
-                      "Change"
-                    ]
+                    accessibilityLabel: "Change image",
+                    disabled: isOrganizerBusy,
+                    glow: false,
+                    icon: /* @__PURE__ */ jsx(MdUpload, {}),
+                    onPress: () => openReplacePicker(index3),
+                    size: "sm",
+                    text: "Change",
+                    variant: "success"
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  "button",
+                  Button_web_default,
                   {
-                    type: "button",
+                    appearance: "solid",
                     title: "Delete image",
-                    "aria-label": "Delete image",
+                    accessibilityLabel: "Delete image",
                     disabled: isOrganizerBusy,
-                    onClick: () => removeImage(index3),
-                    className: "inline-flex h-9 w-10 items-center justify-center rounded bg-red-600 text-xl text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50",
-                    children: /* @__PURE__ */ jsx(MdOutlineDelete, {})
+                    glow: false,
+                    icon: /* @__PURE__ */ jsx(MdOutlineDelete, {}),
+                    onPress: () => removeImage(index3),
+                    size: "sm",
+                    variant: "danger"
                   }
                 )
               ] }),