npm - @solostylist/ui-kit - Versions diffs - 1.0.191 → 1.0.192 - Mend

@solostylist/ui-kit 1.0.191 → 1.0.192

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/s-ai-tool-bar/s-ai-tool-bar.d.ts +6 -1
package/dist/s-ai-tool-bar/s-ai-tool-bar.js +74 -70
package/package.json +1 -1

package/dist/s-ai-tool-bar/s-ai-tool-bar.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
 /**
  * Possible value types for SAiToolBar inputs
  */
@@ -111,13 +112,17 @@ export interface SAiToolBarProps {
     position?: 'bottom' | 'top';
     /** Use relative positioning within container instead of fixed viewport positioning */
     relative?: boolean;
+    /** Custom styles for the outer container (wrapper) */
+    containerSx?: SxProps<Theme>;
+    /** Custom styles for the inner toolbar box */
+    sx?: SxProps<Theme>;
 }
 /**
  * A dynamic floating toolbar for AI tools with inputs and action buttons.
  * Features multiple input types, built-in validation, and portal rendering for proper z-index handling.
  */
 export declare const SAiToolBar: {
-    ({ inputs, onProcess, onReset, onDownload, processing, uploading, inputValues, onInputChange, customActionButtons, hideProcessButton, processButtonDisabled, getInputDisabled, processTooltip, downloadTooltip, resetTooltip, infoTooltip, infoTitle, infoContent, position, relative, }: SAiToolBarProps): React.JSX.Element;
+    ({ inputs, onProcess, onReset, onDownload, processing, uploading, inputValues, onInputChange, customActionButtons, hideProcessButton, processButtonDisabled, getInputDisabled, processTooltip, downloadTooltip, resetTooltip, infoTooltip, infoTitle, infoContent, position, relative, containerSx, sx, }: SAiToolBarProps): React.JSX.Element;
     displayName: string;
 };
 export default SAiToolBar;

package/dist/s-ai-tool-bar/s-ai-tool-bar.js CHANGED Viewed

@@ -1,23 +1,23 @@
 import { j as e } from "../jsx-runtime-tc70JA_2.js";
-import j, { useEffect as K, useState as T, useMemo as H, useCallback as L } from "react";
+import j, { useEffect as $, useState as J, useMemo as X, useCallback as A } from "react";
 import { c as S } from "../createSvgIcon-DTNHY3_v.js";
-import { C as $ } from "../Close-C-pCw-CD.js";
-import { D as J } from "../Download-D97XSAig.js";
-import { TextField as X, Typography as Q, Box as n, Slider as Y, IconButton as F, Checkbox as Z, Divider as ee, Tooltip as M, Dialog as le, DialogTitle as te, DialogContent as se } from "@mui/material";
-import { createPortal as re } from "react-dom";
-import { SSelect as ne } from "../s-select/s-select.js";
-const oe = S(/* @__PURE__ */ e.jsx("path", {
+import { C as Q } from "../Close-C-pCw-CD.js";
+import { D as Y } from "../Download-D97XSAig.js";
+import { TextField as q, Typography as Z, Box as n, Slider as ee, IconButton as L, Checkbox as le, Divider as te, Tooltip as M, Dialog as se, DialogTitle as re, DialogContent as ne } from "@mui/material";
+import { createPortal as oe } from "react-dom";
+import { SSelect as ae } from "../s-select/s-select.js";
+const ce = S(/* @__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"), ae = S(/* @__PURE__ */ e.jsx("path", {
+}), "AddPhotoAlternate"), ie = S(/* @__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"), ce = S(/* @__PURE__ */ e.jsx("path", {
+}), "AutoAwesome"), de = S(/* @__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"), ie = S(/* @__PURE__ */ e.jsx("path", {
+}), "Autorenew"), xe = S(/* @__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");
-var de = /* @__PURE__ */ ((l) => (l.TEXTAREA = "textarea", l.SLIDER = "slider", l.IMAGE = "image", l.NUMBER = "number", l.SELECT = "select", l.CHECKBOX = "checkbox", l))(de || {});
-const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsx(
-  X,
+var he = /* @__PURE__ */ ((l) => (l.TEXTAREA = "textarea", l.SLIDER = "slider", l.IMAGE = "image", l.NUMBER = "number", l.SELECT = "select", l.CHECKBOX = "checkbox", l))(he || {});
+const me = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsx(
+  q,
   {
     value: r,
     onChange: (x) => d(x.target.value),
@@ -31,7 +31,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     fullWidth: !0
   }
 )), z = j.memo((l) => /* @__PURE__ */ e.jsx(
-  Q,
+  Z,
   {
     variant: "caption",
     sx: {
@@ -43,7 +43,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     },
     children: l.label
   }
-)), he = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
+)), fe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
   n,
   {
     sx: {
@@ -54,7 +54,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     children: [
       /* @__PURE__ */ e.jsx(z, { label: l.label }),
       /* @__PURE__ */ e.jsx(
-        X,
+        q,
         {
           type: "number",
           value: r ?? l.defaultValue ?? 0,
@@ -78,7 +78,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
       )
     ]
   }
-)), me = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
+)), ue = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
   n,
   {
     sx: {
@@ -89,7 +89,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     children: [
       /* @__PURE__ */ e.jsx(z, { label: l.label }),
       /* @__PURE__ */ e.jsx(
-        ne,
+        ae,
         {
           value: r ?? l.defaultValue ?? "",
           onChange: (x) => d(x.target.value),
@@ -106,7 +106,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
       )
     ]
   }
-)), fe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
+)), ge = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
   n,
   {
     sx: {
@@ -118,7 +118,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
       /* @__PURE__ */ e.jsx(z, { label: l.label }),
       /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "center", height: 36 }, children: [
         /* @__PURE__ */ e.jsx(
-          Y,
+          ee,
           {
             value: r ?? l.defaultValue ?? l.min ?? 0,
             onChange: (x, b) => d(b),
@@ -146,17 +146,17 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
       ] })
     ]
   }
-)), ue = j.memo(({ input: l, value: r, onChange: d, disabled: o }) => {
-  const m = j.useRef(null), [i, x] = j.useState([]), [b, D] = j.useState(null), I = l.multiple ?? !1, p = l.maxImages ?? 5;
-  K(() => {
+)), je = j.memo(({ input: l, value: r, onChange: d, disabled: o }) => {
+  const m = j.useRef(null), [i, x] = j.useState([]), [b, F] = j.useState(null), I = l.multiple ?? !1, p = l.maxImages ?? 5;
+  $(() => {
     const f = [];
     return x(((a) => {
       if (!a) return [];
       const y = Array.isArray(a) ? a : [a], c = [];
       return y.forEach((k) => {
         if (k instanceof File) {
-          const A = URL.createObjectURL(k);
-          c.push(A), f.push(A);
+          const E = URL.createObjectURL(k);
+          c.push(E), f.push(E);
         } else typeof k == "string" && c.push(k);
       }), c;
     })(r)), () => {
@@ -173,7 +173,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
         d(h[0]);
       f.target.value = "";
     }
-  }, E = (f, h) => {
+  }, D = (f, h) => {
     if (f.stopPropagation(), I && Array.isArray(r)) {
       const a = r.filter((y, c) => c !== h);
       d(a.length > 0 ? a : null);
@@ -198,8 +198,8 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     i.map((f, h) => /* @__PURE__ */ e.jsxs(
       n,
       {
-        onMouseEnter: () => D(h),
-        onMouseLeave: () => D(null),
+        onMouseEnter: () => F(h),
+        onMouseLeave: () => F(null),
         sx: {
           width: 50,
           height: 50,
@@ -231,7 +231,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
           !o && b === h && /* @__PURE__ */ e.jsx(
             n,
             {
-              onClick: (a) => E(a, h),
+              onClick: (a) => D(a, h),
               sx: {
                 position: "absolute",
                 top: 0,
@@ -242,7 +242,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ e.jsx(F, { onClick: (a) => E(a, h), children: /* @__PURE__ */ e.jsx($, {}) })
+              children: /* @__PURE__ */ e.jsx(L, { onClick: (a) => D(a, h), children: /* @__PURE__ */ e.jsx(Q, {}) })
             }
           )
         ]
@@ -269,7 +269,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
           }
         },
         children: /* @__PURE__ */ e.jsx(
-          oe,
+          ce,
           {
             sx: {
               fontSize: 20,
@@ -280,7 +280,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
       }
     )
   ] });
-}), ge = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
+}), ye = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
   n,
   {
     sx: {
@@ -292,7 +292,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     children: [
       /* @__PURE__ */ e.jsx(z, { label: l.label }),
       /* @__PURE__ */ e.jsx(
-        Z,
+        le,
         {
           checked: r ?? l.defaultValue ?? !1,
           onChange: (x) => d(x.target.checked),
@@ -306,21 +306,21 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
 )), U = (l) => {
   switch (l.input.type) {
     case "textarea":
-      return /* @__PURE__ */ e.jsx(xe, { ...l });
+      return /* @__PURE__ */ e.jsx(me, { ...l });
     case "number":
-      return /* @__PURE__ */ e.jsx(he, { ...l });
-    case "slider":
       return /* @__PURE__ */ e.jsx(fe, { ...l });
+    case "slider":
+      return /* @__PURE__ */ e.jsx(ge, { ...l });
     case "select":
-      return /* @__PURE__ */ e.jsx(me, { ...l });
+      return /* @__PURE__ */ e.jsx(ue, { ...l });
     case "image":
-      return /* @__PURE__ */ e.jsx(ue, { input: l.input, value: l.value, onChange: l.onChange, disabled: l.disabled });
+      return /* @__PURE__ */ e.jsx(je, { input: l.input, value: l.value, onChange: l.onChange, disabled: l.disabled });
     case "checkbox":
-      return /* @__PURE__ */ e.jsx(ge, { ...l });
+      return /* @__PURE__ */ e.jsx(ye, { ...l });
     default:
       return null;
   }
-}, je = ({
+}, Ie = ({
   inputs: l = [],
   onProcess: r,
   onReset: d,
@@ -329,38 +329,40 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
   uploading: i = !1,
   inputValues: x = {},
   onInputChange: b,
-  customActionButtons: D,
+  customActionButtons: F,
   hideProcessButton: I = !1,
   processButtonDisabled: p = !1,
   getInputDisabled: R,
-  processTooltip: E = "Process",
+  processTooltip: D = "Process",
   downloadTooltip: P = "Download",
   resetTooltip: V = "Reset",
   infoTooltip: f = "Information",
   infoTitle: h = "Tool Information",
   infoContent: a,
   position: y = "bottom",
-  relative: c = !1
+  relative: c = !1,
+  containerSx: k,
+  sx: E
 }) => {
-  const [k, A] = T(!1), W = H(() => l.length === 0 ? !0 : l.every((t) => {
+  const [G, W] = J(!1), N = X(() => l.length === 0 ? !0 : l.every((t) => {
     if (!t.required) return !0;
     const s = x[t.key];
     return t.type === "textarea" ? s && typeof s == "string" && s.trim() !== "" : t.type === "number" || t.type === "slider" ? s != null : t.type === "select" ? s != null && s !== "" : !0;
-  }), [l, x]), { imageInputs: B, textareaInputs: N, paramInputs: O } = H(() => l.reduce(
+  }), [l, x]), { imageInputs: B, textareaInputs: _, paramInputs: O } = X(() => l.reduce(
     (t, s) => (s.type === "image" ? t.imageInputs.push(s) : s.type === "textarea" ? t.textareaInputs.push(s) : t.paramInputs.push(s), t),
     {
       imageInputs: [],
       textareaInputs: [],
       paramInputs: []
     }
-  ), [l]), C = L(() => {
-  }, []), w = L(() => {
-  }, []), v = L(
+  ), [l]), C = A(() => {
+  }, []), w = A(() => {
+  }, []), v = A(
     (t, s, g) => {
       b?.(t, s, g);
     },
     [b]
-  ), q = L(() => A(!0), []), G = L(() => A(!1), []), _ = /* @__PURE__ */ e.jsxs(
+  ), K = A(() => W(!0), []), T = A(() => W(!1), []), H = /* @__PURE__ */ e.jsxs(
     n,
     {
       sx: {
@@ -372,7 +374,8 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
         display: c ? "flex" : "block",
         justifyContent: c ? "center" : "initial",
         mt: c && y === "top" ? 2 : 0,
-        mb: c && y === "bottom" ? 2 : 0
+        mb: c && y === "bottom" ? 2 : 0,
+        ...k
       },
       children: [
         /* @__PURE__ */ e.jsxs(
@@ -386,10 +389,11 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
               borderRadius: 2,
               border: 1,
               borderColor: "divider",
-              bgcolor: "background.default"
+              bgcolor: "background.default",
+              ...E
             },
             children: [
-              N.length > 0 && /* @__PURE__ */ e.jsx(n, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: N.map((t) => {
+              _.length > 0 && /* @__PURE__ */ e.jsx(n, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: _.map((t) => {
                 const s = x[t.key], g = R?.(t.key) ?? !1;
                 return t.renderInput ? /* @__PURE__ */ e.jsx(n, { children: t.renderInput({
                   value: s,
@@ -466,22 +470,22 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
                     ] })
                   }
                 ),
-                (B.length > 0 || O.length > 0) && /* @__PURE__ */ e.jsx(ee, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5, flexShrink: 0 } }),
+                (B.length > 0 || O.length > 0) && /* @__PURE__ */ e.jsx(te, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5, flexShrink: 0 } }),
                 /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "center", gap: 0.75, ml: "auto" }, children: [
-                  D,
-                  a && /* @__PURE__ */ e.jsx(M, { title: f, children: /* @__PURE__ */ e.jsx(F, { onClick: q, children: /* @__PURE__ */ e.jsx(ie, {}) }) }),
-                  /* @__PURE__ */ e.jsx(M, { title: P, children: /* @__PURE__ */ e.jsx(F, { onClick: o, children: /* @__PURE__ */ e.jsx(J, {}) }) }),
-                  /* @__PURE__ */ e.jsx(M, { title: V, children: /* @__PURE__ */ e.jsx(F, { onClick: d, children: /* @__PURE__ */ e.jsx(ce, {}) }) }),
-                  !I && /* @__PURE__ */ e.jsx(M, { title: E, children: /* @__PURE__ */ e.jsx("span", { children: /* @__PURE__ */ e.jsx(
-                    F,
+                  F,
+                  a && /* @__PURE__ */ e.jsx(M, { title: f, children: /* @__PURE__ */ e.jsx(L, { onClick: K, children: /* @__PURE__ */ e.jsx(xe, {}) }) }),
+                  /* @__PURE__ */ e.jsx(M, { title: P, children: /* @__PURE__ */ e.jsx(L, { onClick: o, children: /* @__PURE__ */ e.jsx(Y, {}) }) }),
+                  /* @__PURE__ */ e.jsx(M, { title: V, children: /* @__PURE__ */ e.jsx(L, { onClick: d, children: /* @__PURE__ */ e.jsx(de, {}) }) }),
+                  !I && /* @__PURE__ */ e.jsx(M, { title: D, children: /* @__PURE__ */ e.jsx("span", { children: /* @__PURE__ */ e.jsx(
+                    L,
                     {
                       onClick: r,
-                      disabled: p || !W || i || m,
+                      disabled: p || !N || i || m,
                       size: "large",
                       children: /* @__PURE__ */ e.jsx(
-                        ae,
+                        ie,
                         {
-                          color: p || !W || i || m ? "disabled" : "primary"
+                          color: p || !N || i || m ? "disabled" : "primary"
                         }
                       )
                     }
@@ -491,18 +495,18 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
             ]
           }
         ),
-        a && /* @__PURE__ */ e.jsxs(le, { open: k, onClose: G, maxWidth: "sm", fullWidth: !0, children: [
-          /* @__PURE__ */ e.jsx(te, { children: h }),
-          /* @__PURE__ */ e.jsx(se, { children: a })
+        a && /* @__PURE__ */ e.jsxs(se, { open: G, onClose: T, maxWidth: "sm", fullWidth: !0, children: [
+          /* @__PURE__ */ e.jsx(re, { children: h }),
+          /* @__PURE__ */ e.jsx(ne, { children: a })
         ] })
       ]
     }
   );
-  return !c && typeof window < "u" ? re(_, document.body) : _;
+  return !c && typeof window < "u" ? oe(H, document.body) : H;
 };
-je.displayName = "SAiToolBar";
+Ie.displayName = "SAiToolBar";
 export {
-  je as SAiToolBar,
-  de as SAiToolBarInputType,
-  je as default
+  Ie as SAiToolBar,
+  he as SAiToolBarInputType,
+  Ie as default
 };

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.191",
+  "version": "1.0.192",
   "description": "advanced ui kit for solostylist",
   "type": "module",
   "main": "dist/main.js",