@solostylist/ui-kit 1.0.198 → 1.0.201

package/dist/s-tool-bar/s-tool-bar.js

@@ -0,0 +1,478 @@
+import { j as e } from "../jsx-runtime-tc70JA_2.js";
+import u, { useEffect as J, useState as K, useMemo as q, useCallback as b } from "react";
+import { c as P } from "../createSvgIcon-BkbeLOhM.js";
+import { C as Q } from "../Close-lHCUMitI.js";
+import { D as Y } from "../Download-BoRQUwCf.js";
+import { TextField as H, Typography as Z, Box as r, Slider as ee, IconButton as w, Checkbox as te, Divider as le, Tooltip as R, Dialog as se, DialogTitle as ne, DialogContent as oe } from "@mui/material";
+import { createPortal as re } from "react-dom";
+import { SSelect as ae } from "../s-select/s-select.js";
+const ce = P(/* @__PURE__ */ e.jsx("path", {
+  d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8zM5 19l3-4 2 3 3-4 4 5z"
+}), "AddPhotoAlternate"), ie = P(/* @__PURE__ */ e.jsx("path", {
+  d: "m19 9 1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25z"
+}), "AutoAwesome"), de = P(/* @__PURE__ */ e.jsx("path", {
+  d: "M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6m6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26"
+}), "Autorenew"), xe = P(/* @__PURE__ */ e.jsx("path", {
+  d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
+}), "InfoOutlined"), he = u.memo(({ input: t, value: s, onChange: i, onFocus: n, onBlur: h, disabled: c }) => /* @__PURE__ */ e.jsx(
+  H,
+  {
+    value: s,
+    onChange: (m) => i(m.target.value),
+    onFocus: n,
+    onBlur: h,
+    placeholder: t.placeholder ?? t.label,
+    disabled: c,
+    multiline: !0,
+    minRows: t.minRows ?? 2,
+    maxRows: t.maxRows ?? 5,
+    fullWidth: !0,
+    ...t.componentProps?.textarea ?? {}
+  }
+)), S = u.memo((t) => /* @__PURE__ */ e.jsx(
+  Z,
+  {
+    variant: "caption",
+    sx: {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      width: "100% !important",
+      textAlign: "center"
+    },
+    children: t.label
+  }
+)), me = u.memo(({ input: t, value: s, onChange: i, onFocus: n, onBlur: h, disabled: c }) => /* @__PURE__ */ e.jsxs(
+  r,
+  {
+    sx: {
+      width: 120,
+      display: "flex",
+      flexDirection: "column"
+    },
+    children: [
+      /* @__PURE__ */ e.jsx(S, { label: t.label }),
+      /* @__PURE__ */ e.jsx(
+        H,
+        {
+          type: "number",
+          value: s ?? t.defaultValue ?? 0,
+          onChange: (m) => i(Number(m.target.value)),
+          onFocus: n,
+          onBlur: h,
+          disabled: c,
+          slotProps: {
+            htmlInput: {
+              min: t.min,
+              max: t.max,
+              step: t.step
+            }
+          },
+          sx: {
+            "& input": {
+              textAlign: "center"
+            }
+          },
+          ...t.componentProps?.number ?? {}
+        }
+      )
+    ]
+  }
+)), fe = u.memo(({ input: t, value: s, onChange: i, onFocus: n, onBlur: h, disabled: c }) => /* @__PURE__ */ e.jsxs(
+  r,
+  {
+    sx: {
+      width: 180,
+      display: "flex",
+      flexDirection: "column"
+    },
+    children: [
+      /* @__PURE__ */ e.jsx(S, { label: t.label }),
+      /* @__PURE__ */ e.jsx(
+        ae,
+        {
+          value: s ?? t.defaultValue ?? "",
+          onChange: (m) => i(m.target.value),
+          onFocus: n,
+          onBlur: h,
+          disabled: c,
+          placeholder: t.placeholder,
+          options: t.options ?? [],
+          optionLabel: t.optionLabel,
+          optionValue: t.optionValue,
+          searchable: t.searchable,
+          searchPlaceholder: t.searchPlaceholder,
+          ...t.componentProps?.select ?? {}
+        }
+      )
+    ]
+  }
+)), ue = u.memo(({ input: t, value: s, onChange: i, onFocus: n, onBlur: h, disabled: c }) => /* @__PURE__ */ e.jsxs(
+  r,
+  {
+    sx: {
+      width: 160,
+      display: "flex",
+      flexDirection: "column"
+    },
+    children: [
+      /* @__PURE__ */ e.jsx(S, { label: t.label }),
+      /* @__PURE__ */ e.jsxs(r, { sx: { display: "flex", alignItems: "center", height: 36 }, children: [
+        /* @__PURE__ */ e.jsx(
+          ee,
+          {
+            value: s ?? t.defaultValue ?? t.min ?? 0,
+            onChange: (m, j) => i(j),
+            onMouseDown: n,
+            onMouseUp: h,
+            disabled: c,
+            min: t.min ?? 0,
+            max: t.max ?? 100,
+            step: t.step ?? 1,
+            sx: { flex: 1 },
+            ...t.componentProps?.slider ?? {}
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          r,
+          {
+            sx: {
+              minWidth: 60,
+              textAlign: "center",
+              fontWeight: 500,
+              fontSize: "0.875rem"
+            },
+            children: s ?? t.defaultValue ?? t.min ?? 0
+          }
+        )
+      ] })
+    ]
+  }
+)), pe = u.memo(({ input: t, value: s, onChange: i, disabled: n }) => {
+  const h = u.useRef(null), [c, m] = u.useState([]), [j, C] = u.useState(null), g = t.multiple ?? !1, y = t.maxImages ?? 5;
+  J(() => {
+    const f = [];
+    return m(((o) => {
+      if (!o) return [];
+      const p = Array.isArray(o) ? o : [o], a = [];
+      return p.forEach((I) => {
+        if (I instanceof File) {
+          const A = URL.createObjectURL(I);
+          a.push(A), f.push(A);
+        } else typeof I == "string" && a.push(I);
+      }), a;
+    })(s)), () => {
+      f.forEach((o) => URL.revokeObjectURL(o));
+    };
+  }, [s]);
+  const k = (f) => {
+    const d = f.target.files;
+    if (!(!d || d.length === 0)) {
+      if (g) {
+        const o = Array.isArray(s) ? s : s instanceof File || typeof s == "string" ? [s] : [], p = Array.from(d).slice(0, y - o.length), a = [...o, ...p];
+        i(a);
+      } else
+        i(d[0]);
+      f.target.value = "";
+    }
+  }, v = (f, d) => {
+    if (f.stopPropagation(), g && Array.isArray(s)) {
+      const o = s.filter((p, a) => a !== d);
+      i(o.length > 0 ? o : null);
+    } else
+      i(null);
+  }, D = () => {
+    n || g && c.length >= y || h.current?.click();
+  }, z = g && c.length < y;
+  return /* @__PURE__ */ e.jsxs(r, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+    /* @__PURE__ */ e.jsx(
+      "input",
+      {
+        ref: h,
+        type: "file",
+        accept: "image/*",
+        multiple: g,
+        onChange: k,
+        disabled: n,
+        style: { display: "none" },
+        ...t.componentProps?.image ?? {}
+      }
+    ),
+    c.map((f, d) => /* @__PURE__ */ e.jsxs(
+      r,
+      {
+        onMouseEnter: () => C(d),
+        onMouseLeave: () => C(null),
+        sx: {
+          width: 50,
+          height: 50,
+          border: 1,
+          borderColor: n ? "action.disabled" : "divider",
+          borderRadius: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: n ? "not-allowed" : "default",
+          position: "relative",
+          overflow: "hidden",
+          transition: "all 0.2s"
+        },
+        children: [
+          /* @__PURE__ */ e.jsx(
+            r,
+            {
+              component: "img",
+              src: f,
+              alt: `Preview ${d + 1}`,
+              sx: {
+                width: "100%",
+                height: "100%",
+                objectFit: "cover"
+              }
+            }
+          ),
+          !n && j === d && /* @__PURE__ */ e.jsx(
+            r,
+            {
+              onClick: (o) => v(o, d),
+              sx: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ e.jsx(w, { onClick: (o) => v(o, d), children: /* @__PURE__ */ e.jsx(Q, {}) })
+            }
+          )
+        ]
+      },
+      d
+    )),
+    (c.length === 0 || z) && /* @__PURE__ */ e.jsx(
+      r,
+      {
+        onClick: D,
+        sx: {
+          width: 50,
+          height: 50,
+          border: 1,
+          borderColor: n ? "action.disabled" : "divider",
+          borderRadius: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: n ? "not-allowed" : "pointer",
+          transition: "all 0.2s",
+          "&:hover": {
+            bgcolor: "action.hover"
+          }
+        },
+        children: /* @__PURE__ */ e.jsx(
+          ce,
+          {
+            sx: {
+              fontSize: 20,
+              color: n ? "action.disabled" : "divider"
+            }
+          }
+        )
+      }
+    )
+  ] });
+}), ge = u.memo(({ input: t, value: s, onChange: i, onFocus: n, onBlur: h, disabled: c }) => /* @__PURE__ */ e.jsxs(
+  r,
+  {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      minWidth: 60
+    },
+    children: [
+      /* @__PURE__ */ e.jsx(S, { label: t.label }),
+      /* @__PURE__ */ e.jsx(
+        te,
+        {
+          checked: s ?? t.defaultValue ?? !1,
+          onChange: (m) => i(m.target.checked),
+          onFocus: n,
+          onBlur: h,
+          disabled: c,
+          ...t.componentProps?.checkbox ?? {}
+        }
+      )
+    ]
+  }
+)), je = (t) => {
+  switch (t.input.type) {
+    case "textarea":
+      return /* @__PURE__ */ e.jsx(he, { ...t });
+    case "number":
+      return /* @__PURE__ */ e.jsx(me, { ...t });
+    case "slider":
+      return /* @__PURE__ */ e.jsx(ue, { ...t });
+    case "select":
+      return /* @__PURE__ */ e.jsx(fe, { ...t });
+    case "image":
+      return /* @__PURE__ */ e.jsx(pe, { input: t.input, value: t.value, onChange: t.onChange, disabled: t.disabled });
+    case "checkbox":
+      return /* @__PURE__ */ e.jsx(ge, { ...t });
+    default:
+      return null;
+  }
+}, ye = ({
+  inputs: t = [],
+  onProcess: s,
+  onReset: i,
+  onDownload: n,
+  processing: h = !1,
+  uploading: c = !1,
+  inputValues: m = {},
+  onInputChange: j,
+  customActionButtons: C,
+  hideProcessButton: g = !1,
+  processButtonDisabled: y = !1,
+  getInputDisabled: k,
+  processTooltip: v = "Process",
+  downloadTooltip: D = "Download",
+  resetTooltip: z = "Reset",
+  infoTooltip: f = "Information",
+  infoTitle: d = "Tool Information",
+  infoContent: o,
+  position: p = "bottom",
+  relative: a = !1,
+  containerSx: I,
+  sx: A
+}) => {
+  const [X, U] = K(!1), W = q(() => t.length === 0 ? !0 : t.every((l) => {
+    if (!l.required) return !0;
+    const x = m[l.key];
+    return l.type === "textarea" ? typeof x == "string" && x.trim() !== "" : l.type === "number" || l.type === "slider" ? x != null : l.type === "select" ? x != null && x !== "" : !0;
+  }), [t, m]), { imageInputs: F, textareaInputs: _, paramInputs: M } = q(() => t.reduce(
+    (l, x) => (x.type === "image" ? l.imageInputs.push(x) : x.type === "textarea" ? l.textareaInputs.push(x) : l.paramInputs.push(x), l),
+    {
+      imageInputs: [],
+      textareaInputs: [],
+      paramInputs: []
+    }
+  ), [t]), V = b(() => {
+  }, []), B = b(() => {
+  }, []), O = b(
+    (l, x, L) => {
+      j?.(l, x, L);
+    },
+    [j]
+  ), $ = b(() => U(!0), []), G = b(() => U(!1), []), T = b(
+    (l) => {
+      const x = m[l.key], L = k?.(l.key) ?? !1;
+      return l.renderInput ? /* @__PURE__ */ e.jsx(r, { children: l.renderInput({
+        value: x,
+        onChange: (E) => O(l.key, E),
+        onFocus: V,
+        onBlur: B,
+        disabled: L
+      }) }, l.key) : /* @__PURE__ */ e.jsx(
+        je,
+        {
+          input: l,
+          value: x,
+          onChange: (E) => O(l.key, E),
+          onFocus: V,
+          onBlur: B,
+          disabled: L
+        },
+        l.key
+      );
+    },
+    [m, k, O, V, B]
+  ), N = /* @__PURE__ */ e.jsxs(
+    r,
+    {
+      sx: {
+        position: a ? "relative" : "fixed",
+        [p]: a ? "auto" : 20,
+        left: a ? "auto" : "50%",
+        transform: a ? "none" : "translateX(-50%)",
+        zIndex: a ? "auto" : 1300,
+        display: a ? "flex" : "block",
+        justifyContent: a ? "center" : "initial",
+        mt: a && p === "top" ? 2 : 0,
+        mb: a && p === "bottom" ? 2 : 0,
+        ...I
+      },
+      children: [
+        /* @__PURE__ */ e.jsxs(
+          r,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 2,
+              p: 2,
+              borderRadius: 2,
+              border: 1,
+              borderColor: "divider",
+              bgcolor: "background.default",
+              ...A
+            },
+            children: [
+              _.length > 0 && /* @__PURE__ */ e.jsx(r, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: _.map(T) }),
+              /* @__PURE__ */ e.jsxs(r, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                /* @__PURE__ */ e.jsx(
+                  r,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 2,
+                      flex: 1
+                    },
+                    children: (F.length > 0 || M.length > 0) && /* @__PURE__ */ e.jsxs(r, { sx: { display: "flex", alignItems: "flex-end", gap: 1.5 }, children: [
+                      F.map(T),
+                      M.map(T)
+                    ] })
+                  }
+                ),
+                (F.length > 0 || M.length > 0) && /* @__PURE__ */ e.jsx(le, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5, flexShrink: 0 } }),
+                /* @__PURE__ */ e.jsxs(r, { sx: { display: "flex", alignItems: "center", gap: 0.75, ml: "auto" }, children: [
+                  C,
+                  o && /* @__PURE__ */ e.jsx(R, { title: f, children: /* @__PURE__ */ e.jsx(w, { onClick: $, children: /* @__PURE__ */ e.jsx(xe, {}) }) }),
+                  /* @__PURE__ */ e.jsx(R, { title: D, children: /* @__PURE__ */ e.jsx(w, { onClick: n, children: /* @__PURE__ */ e.jsx(Y, {}) }) }),
+                  /* @__PURE__ */ e.jsx(R, { title: z, children: /* @__PURE__ */ e.jsx(w, { onClick: i, children: /* @__PURE__ */ e.jsx(de, {}) }) }),
+                  !g && /* @__PURE__ */ e.jsx(R, { title: v, children: /* @__PURE__ */ e.jsx("span", { children: /* @__PURE__ */ e.jsx(
+                    w,
+                    {
+                      onClick: s,
+                      disabled: y || !W || c || h,
+                      size: "large",
+                      children: /* @__PURE__ */ e.jsx(
+                        ie,
+                        {
+                          color: y || !W || c || h ? "disabled" : "primary"
+                        }
+                      )
+                    }
+                  ) }) })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        o && /* @__PURE__ */ e.jsxs(se, { open: X, onClose: G, maxWidth: "sm", fullWidth: !0, children: [
+          /* @__PURE__ */ e.jsx(ne, { children: d }),
+          /* @__PURE__ */ e.jsx(oe, { children: o })
+        ] })
+      ]
+    }
+  );
+  return !a && typeof window < "u" ? re(N, document.body) : N;
+};
+ye.displayName = "SToolBar";
+export {
+  ye as SToolBar,
+  ye as default
+};

package/dist/theme/components/accordion-details.d.ts

@@ -0,0 +1,8 @@
+export declare const MuiAccordionDetails: {
+    styleOverrides: {
+        root: {
+            mb: number;
+            border: string;
+        };
+    };
+};

package/dist/theme/components/accordion-details.js

@@ -0,0 +1,8 @@
+const o = {
+  styleOverrides: {
+    root: { mb: 20, border: "none" }
+  }
+};
+export {
+  o as MuiAccordionDetails
+};