@solostylist/ui-kit 1.0.219 → 1.0.221

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

@@ -0,0 +1,455 @@
+import { o as e, s as t } from "./theme-primitives-OrQ-xFJR.js";
+import { t as n } from "./createSvgIcon-BdNZIlKS.js";
+import { t as r } from "./Close-oXeOGTZb.js";
+import { t as i } from "./Download-DMm8oiCF.js";
+import { t as a } from "./InfoOutlined-CqXSSVWh.js";
+import { t as o } from "./s-select-ClL8bygg.js";
+import s, { useCallback as c, useEffect as l, useMemo as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { createPortal as m } from "react-dom";
+import { Box as h, Checkbox as g, Dialog as _, DialogContent as v, DialogTitle as y, Divider as b, IconButton as x, Slider as S, TextField as C, Tooltip as w, Typography as T, alpha as E } from "@mui/material";
+//#region ../../node_modules/@mui/icons-material/AddPhotoAlternate.mjs
+var D = n(/* @__PURE__ */ f("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"), O = n(/* @__PURE__ */ f("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"), k = n(/* @__PURE__ */ f("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"), A = s.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: a }) => /* @__PURE__ */ f(C, {
+	value: t,
+	onChange: (e) => n(e.target.value),
+	onFocus: r,
+	onBlur: i,
+	placeholder: e.placeholder ?? e.label,
+	disabled: a,
+	multiline: !0,
+	minRows: e.minRows ?? 2,
+	maxRows: e.maxRows ?? 5,
+	fullWidth: !0,
+	...e.componentProps?.textarea ?? {}
+})), j = s.memo((e) => /* @__PURE__ */ f(T, {
+	variant: "caption",
+	sx: {
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		width: "100% !important",
+		textAlign: "center"
+	},
+	children: e.label
+})), M = s.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: a }) => /* @__PURE__ */ p(h, {
+	sx: {
+		width: 120,
+		display: "flex",
+		flexDirection: "column"
+	},
+	children: [/* @__PURE__ */ f(j, { label: e.label }), /* @__PURE__ */ f(C, {
+		type: "number",
+		value: t ?? e.defaultValue ?? 0,
+		onChange: (e) => n(Number(e.target.value)),
+		onFocus: r,
+		onBlur: i,
+		disabled: a,
+		slotProps: { htmlInput: {
+			min: e.min,
+			max: e.max,
+			step: e.step
+		} },
+		sx: { "& input": { textAlign: "center" } },
+		...e.componentProps?.number ?? {}
+	})]
+})), N = s.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: a }) => /* @__PURE__ */ p(h, {
+	sx: {
+		width: 180,
+		display: "flex",
+		flexDirection: "column"
+	},
+	children: [/* @__PURE__ */ f(j, { label: e.label }), /* @__PURE__ */ f(o, {
+		value: t ?? e.defaultValue ?? "",
+		onChange: (e) => n(e.target.value),
+		onFocus: r,
+		onBlur: i,
+		disabled: a,
+		placeholder: e.placeholder,
+		options: e.options ?? [],
+		optionLabel: e.optionLabel,
+		optionValue: e.optionValue,
+		searchable: e.searchable,
+		searchPlaceholder: e.searchPlaceholder,
+		...e.componentProps?.select ?? {}
+	})]
+})), P = s.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: a }) => /* @__PURE__ */ p(h, {
+	sx: {
+		width: 160,
+		display: "flex",
+		flexDirection: "column"
+	},
+	children: [/* @__PURE__ */ f(j, { label: e.label }), /* @__PURE__ */ p(h, {
+		sx: {
+			display: "flex",
+			alignItems: "center",
+			height: 36
+		},
+		children: [/* @__PURE__ */ f(S, {
+			value: t ?? e.defaultValue ?? e.min ?? 0,
+			onChange: (e, t) => n(t),
+			onMouseDown: r,
+			onMouseUp: i,
+			disabled: a,
+			min: e.min ?? 0,
+			max: e.max ?? 100,
+			step: e.step ?? 1,
+			sx: { flex: 1 },
+			...e.componentProps?.slider ?? {}
+		}), /* @__PURE__ */ f(h, {
+			sx: {
+				minWidth: 60,
+				textAlign: "center",
+				fontWeight: 500,
+				fontSize: "0.875rem"
+			},
+			children: t ?? e.defaultValue ?? e.min ?? 0
+		})]
+	})]
+})), F = s.memo(({ input: e, value: t, onChange: n, disabled: i }) => {
+	let a = s.useRef(null), [o, c] = s.useState([]), [u, d] = s.useState(null), m = e.multiple ?? !1, g = e.maxImages ?? 5;
+	l(() => {
+		let e = [];
+		return c(((t) => {
+			if (!t) return [];
+			let n = Array.isArray(t) ? t : [t], r = [], i = /* @__PURE__ */ new Map();
+			return n.forEach((t) => {
+				if (t instanceof File) {
+					let n = URL.createObjectURL(t);
+					e.push(n);
+					let a = `file:${t.name}:${t.size}:${t.lastModified}`, o = i.get(a) ?? 0;
+					i.set(a, o + 1), r.push({
+						key: o > 0 ? `${a}:${o}` : a,
+						src: n
+					});
+				} else if (typeof t == "string") {
+					let e = `url:${t}`, n = i.get(e) ?? 0;
+					i.set(e, n + 1), r.push({
+						key: n > 0 ? `${e}:${n}` : e,
+						src: t
+					});
+				}
+			}), r;
+		})(t)), () => {
+			e.forEach((e) => URL.revokeObjectURL(e));
+		};
+	}, [t]);
+	let _ = (e) => {
+		let r = e.target.files;
+		if (!(!r || r.length === 0)) {
+			if (m) {
+				let e = R(t), i = Array.from(r).slice(0, g - e.length);
+				n([...e, ...i]);
+			} else n(r[0]);
+			e.target.value = "";
+		}
+	}, v = (e, r) => {
+		if (e.stopPropagation(), m && Array.isArray(t)) {
+			let e = t.filter((e, t) => t !== r);
+			n(e.length > 0 ? e : null);
+		} else n(null);
+	}, y = () => {
+		i || m && o.length >= g || a.current?.click();
+	}, b = m && o.length < g;
+	return /* @__PURE__ */ p(h, {
+		sx: {
+			display: "flex",
+			alignItems: "center",
+			gap: .75
+		},
+		children: [
+			/* @__PURE__ */ f("input", {
+				ref: a,
+				type: "file",
+				accept: "image/*",
+				multiple: m,
+				onChange: _,
+				disabled: i,
+				style: { display: "none" },
+				...e.componentProps?.image ?? {}
+			}),
+			o.map((e, t) => /* @__PURE__ */ p(h, {
+				onMouseEnter: () => d(t),
+				onMouseLeave: () => d(null),
+				sx: {
+					width: 50,
+					height: 50,
+					border: 1,
+					borderColor: i ? "action.disabled" : "divider",
+					borderRadius: 1,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					cursor: i ? "not-allowed" : "default",
+					position: "relative",
+					overflow: "hidden",
+					transition: "all 0.2s"
+				},
+				children: [/* @__PURE__ */ f(h, {
+					component: "img",
+					src: e.src,
+					alt: `Preview ${t + 1}`,
+					sx: {
+						width: "100%",
+						height: "100%",
+						objectFit: "cover"
+					}
+				}), !i && u === t && /* @__PURE__ */ f(h, {
+					onClick: (e) => v(e, t),
+					sx: {
+						position: "absolute",
+						top: 0,
+						left: 0,
+						right: 0,
+						bottom: 0,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center"
+					},
+					children: /* @__PURE__ */ f(x, {
+						onClick: (e) => v(e, t),
+						children: /* @__PURE__ */ f(r, {})
+					})
+				})]
+			}, e.key)),
+			(o.length === 0 || b) && /* @__PURE__ */ f(h, {
+				onClick: y,
+				sx: {
+					width: 50,
+					height: 50,
+					border: 1,
+					borderColor: i ? "action.disabled" : "divider",
+					borderRadius: 1,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					cursor: i ? "not-allowed" : "pointer",
+					transition: "all 0.2s",
+					"&:hover": { bgcolor: "action.hover" }
+				},
+				children: /* @__PURE__ */ f(D, { sx: {
+					fontSize: 20,
+					color: i ? "action.disabled" : "divider"
+				} })
+			})
+		]
+	});
+}), I = s.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: a }) => /* @__PURE__ */ p(h, {
+	sx: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		minWidth: 60
+	},
+	children: [/* @__PURE__ */ f(j, { label: e.label }), /* @__PURE__ */ f(g, {
+		checked: t ?? e.defaultValue ?? !1,
+		onChange: (e) => n(e.target.checked),
+		onFocus: r,
+		onBlur: i,
+		disabled: a,
+		...e.componentProps?.checkbox ?? {}
+	})]
+}));
+function L(e, t) {
+	return e.required ? e.type === "textarea" ? typeof t == "string" && t.trim() !== "" : e.type === "number" || e.type === "slider" ? t != null : e.type === "select" ? t != null && t !== "" : !0 : !0;
+}
+function R(e) {
+	return Array.isArray(e) ? e : e instanceof File || typeof e == "string" ? [e] : [];
+}
+function z(e) {
+	return e.reduce((e, t) => (t.type === "image" ? e.imageInputs.push(t) : t.type === "textarea" ? e.textareaInputs.push(t) : e.paramInputs.push(t), e), {
+		imageInputs: [],
+		textareaInputs: [],
+		paramInputs: []
+	});
+}
+function B(e, t) {
+	return e.length > 0 || t.length > 0;
+}
+function V(e, t, n, r) {
+	return e || !t || n || r;
+}
+var H = (e) => {
+	switch (e.input.type) {
+		case "textarea": return /* @__PURE__ */ f(A, { ...e });
+		case "number": return /* @__PURE__ */ f(M, { ...e });
+		case "slider": return /* @__PURE__ */ f(P, { ...e });
+		case "select": return /* @__PURE__ */ f(N, { ...e });
+		case "image": return /* @__PURE__ */ f(F, {
+			input: e.input,
+			value: e.value,
+			onChange: e.onChange,
+			disabled: e.disabled
+		});
+		case "checkbox": return /* @__PURE__ */ f(I, { ...e });
+		default: return null;
+	}
+}, U = s.memo(({ input: e, value: t, disabled: n, onChange: r, onFocus: i, onBlur: a }) => e.renderInput ? /* @__PURE__ */ f(h, { children: e.renderInput({
+	value: t,
+	onChange: r,
+	onFocus: i,
+	onBlur: a,
+	disabled: n
+}) }) : /* @__PURE__ */ f(H, {
+	input: e,
+	value: t,
+	onChange: r,
+	onFocus: i,
+	onBlur: a,
+	disabled: n
+})), W = s.memo(({ customActionButtons: e, infoContent: t, infoTooltip: n, downloadTooltip: r, resetTooltip: o, processTooltip: s, hideProcessButton: c, processActionDisabled: l, onInfoOpen: u, onDownload: d, onReset: m, onProcess: g }) => /* @__PURE__ */ p(h, {
+	sx: {
+		display: "flex",
+		alignItems: "center",
+		gap: 1,
+		ml: "auto"
+	},
+	children: [
+		e,
+		t && /* @__PURE__ */ f(w, {
+			title: n,
+			children: /* @__PURE__ */ f(x, {
+				onClick: u,
+				children: /* @__PURE__ */ f(a, {})
+			})
+		}),
+		/* @__PURE__ */ f(w, {
+			title: r,
+			children: /* @__PURE__ */ f(x, {
+				onClick: d,
+				children: /* @__PURE__ */ f(i, {})
+			})
+		}),
+		/* @__PURE__ */ f(w, {
+			title: o,
+			children: /* @__PURE__ */ f(x, {
+				onClick: m,
+				children: /* @__PURE__ */ f(k, {})
+			})
+		}),
+		!c && /* @__PURE__ */ f(w, {
+			title: s,
+			children: /* @__PURE__ */ f("span", { children: /* @__PURE__ */ f(x, {
+				onClick: g,
+				disabled: l,
+				size: "large",
+				children: /* @__PURE__ */ f(O, { color: l ? "disabled" : "primary" })
+			}) })
+		})
+	]
+})), G = ({ inputs: n = [], onProcess: r, onReset: i, onDownload: a, processing: o = !1, uploading: s = !1, inputValues: l = {}, onInputChange: g, customActionButtons: x, hideProcessButton: S = !1, processButtonDisabled: C = !1, getInputDisabled: w, processTooltip: T = "Process", downloadTooltip: D = "Download", resetTooltip: O = "Reset", infoTooltip: k = "Information", infoTitle: A = "Tool Information", infoContent: j, position: M = "bottom", relative: N = !1, containerSx: P, sx: F }) => {
+	let [I, R] = d(!1), H = u(() => n.length === 0 ? !0 : n.every((e) => L(e, l[e.key])), [n, l]), { imageInputs: G, textareaInputs: K, paramInputs: q } = u(() => z(n), [n]), J = B(G, q), ee = V(C, H, s, o), Y = c(() => {}, []), X = c(() => {}, []), Z = c((e, t, n) => {
+		g?.(e, t, n);
+	}, [g]), te = c(() => R(!0), []), ne = c(() => R(!1), []), Q = c((e) => {
+		let t = l[e.key];
+		return /* @__PURE__ */ f(U, {
+			input: e,
+			value: t,
+			onChange: (t) => Z(e.key, t),
+			onFocus: Y,
+			onBlur: X,
+			disabled: w?.(e.key) ?? !1
+		}, e.key);
+	}, [
+		l,
+		w,
+		Z,
+		Y,
+		X
+	]), $ = /* @__PURE__ */ p(h, {
+		sx: {
+			position: N ? "relative" : "fixed",
+			[M]: N ? "auto" : 20,
+			left: N ? "auto" : "50%",
+			transform: N ? "none" : "translateX(-50%)",
+			zIndex: N ? "auto" : 1300,
+			display: N ? "flex" : "block",
+			justifyContent: N ? "center" : "initial",
+			mt: N && M === "top" ? 2 : 0,
+			mb: N && M === "bottom" ? 2 : 0,
+			...P
+		},
+		children: [/* @__PURE__ */ p(h, {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 2,
+				p: 2,
+				borderRadius: 2,
+				border: 1,
+				borderColor: "divider",
+				bgcolor: "background.default",
+				transition: "border 120ms ease-in",
+				"&:hover": { borderColor: t[500] },
+				"&:focus-within": {
+					outline: `3px solid ${E(e[500], .5)}`,
+					borderColor: e[400]
+				},
+				...F
+			},
+			children: [K.length > 0 && /* @__PURE__ */ f(h, {
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 2
+				},
+				children: K.map(Q)
+			}), /* @__PURE__ */ p(h, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: .5
+				},
+				children: [
+					/* @__PURE__ */ f(h, {
+						sx: {
+							display: "flex",
+							alignItems: "center",
+							gap: 2,
+							flex: 1
+						},
+						children: J && /* @__PURE__ */ p(h, {
+							sx: {
+								display: "flex",
+								alignItems: "center",
+								gap: 1.5
+							},
+							children: [G.map(Q), q.map(Q)]
+						})
+					}),
+					J && /* @__PURE__ */ f(b, {
+						orientation: "vertical",
+						flexItem: !0,
+						sx: {
+							mx: .5,
+							flexShrink: 0
+						}
+					}),
+					/* @__PURE__ */ f(W, {
+						customActionButtons: x,
+						infoContent: j,
+						infoTooltip: k,
+						downloadTooltip: D,
+						resetTooltip: O,
+						processTooltip: T,
+						hideProcessButton: S,
+						processActionDisabled: ee,
+						onInfoOpen: te,
+						onDownload: a,
+						onReset: i,
+						onProcess: r
+					})
+				]
+			})]
+		}), j && /* @__PURE__ */ p(_, {
+			open: I,
+			onClose: ne,
+			maxWidth: "sm",
+			fullWidth: !0,
+			children: [/* @__PURE__ */ f(y, { children: A }), /* @__PURE__ */ f(v, { children: j })]
+		})]
+	});
+	return !N && typeof window < "u" ? m($, document.body) : $;
+};
+G.displayName = "SToolBar";
+//#endregion
+export { G as t };

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

@@ -3,7 +3,7 @@ import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { ButtonBase as r, Typography as i } from "@mui/material";
 //#region lib/s-tool-item/s-tool-item.tsx
-var a = (e) => Array.isArray(e) ? e : e ? [e] : [], o = ({ active: o = !1, disabled: s = !1, expanded: c = !1, icon: l, innerSx: u, minHeight: d = 68, onClick: f, sx: p, title: m, titleSx: h, width: g = 80 }) => {
+var a = (e) => Array.isArray(e) ? e : e ? [e] : [], o = ({ active: o = !1, disabled: s = !1, expanded: c = !1, icon: l, innerSx: u, minHeight: d = 68, onClick: f, sx: p, title: m, titleSx: h, width: g = 96 }) => {
 	let _ = typeof m == "string" ? m : void 0;
 	return c ? /* @__PURE__ */ t(e, {
 		active: o,
@@ -22,9 +22,9 @@ var a = (e) => Array.isArray(e) ? e : e ? [e] : [], o = ({ active: o = !1, disab
 		title: _,
 		sx: [{
 			alignItems: "center",
-			bgcolor: o ? "var(--s-palette-action-selected)" : "transparent",
+			bgcolor: o ? "action.selected" : "transparent",
 			borderRadius: 1,
-			color: o ? "var(--s-palette-text-primary)" : "var(--s-palette-text-secondary)",
+			color: o ? "text.primary" : "text.secondary",
 			cursor: s ? "not-allowed" : "pointer",
 			display: "flex",
 			flexDirection: "column",
@@ -37,8 +37,11 @@ var a = (e) => Array.isArray(e) ? e : e ? [e] : [], o = ({ active: o = !1, disab
 			textAlign: "center",
 			transition: "background-color 0.2s ease, color 0.2s ease",
 			width: g,
-			...s && { color: "var(--s-palette-text-disabled)" },
-			"&:hover": { bgcolor: o ? "var(--s-palette-action-selected)" : "var(--s-palette-action-hover)" },
+			...s && { color: "text.disabled" },
+			"&:hover": { ...!o && !s && {
+				bgcolor: "action.hover",
+				color: "text.primary"
+			} },
 			"& svg": { flexShrink: 0 }
 		}, ...a(p)],
 		children: [l, /* @__PURE__ */ t(i, {

package/dist/s-zoom-image/s-zoom-image.js

@@ -4,7 +4,7 @@ import { jsx as r } from "react/jsx-runtime";
 import { Box as i } from "@mui/material";
 import { motion as a, useMotionValue as o, useSpring as s, useTransform as c } from "framer-motion";
 //#region lib/s-zoom-image/s-zoom-image.tsx
-var l = t.forwardRef(({ src: t, alt: l, zoomScale: u = 1.2, transitionDuration: d = .3, borderRadius: f = 1.5, imgStyle: p, imgClassName: m, skeletonVariant: h = "rounded", height: g = "100%", width: _ = "100%", sx: v, ...y }, b) => {
+var l = t.forwardRef(({ src: t, alt: l, zoomScale: u = 1.2, transitionDuration: d = .3, borderRadius: f = 1, imgStyle: p, imgClassName: m, skeletonVariant: h = "rounded", height: g = "100%", width: _ = "100%", sx: v, ...y }, b) => {
 	let [x, S] = n(!1), C = o(50), w = o(50), T = {
 		damping: 20,
 		stiffness: 150,

package/dist/theme/components/chip.js

@@ -18,18 +18,18 @@ var _ = (e, t, n) => ({
 }), v = (e, t, n) => ({
 	backgroundColor: "transparent",
 	...e.applyStyles("light", {
-		borderColor: t[300],
-		color: t[700],
-		[`& .${g.label}`]: { color: t[700] },
-		[`& .${g.icon}`]: { color: t[700] },
-		[`& .${g.deleteIcon}`]: { color: t[700] }
+		borderColor: t[500],
+		color: t[500],
+		[`& .${g.label}`]: { color: t[500] },
+		[`& .${g.icon}`]: { color: t[500] },
+		[`& .${g.deleteIcon}`]: { color: t[500] }
 	}),
 	...e.applyStyles("dark", {
-		borderColor: n[700],
-		color: n[300],
-		[`& .${g.label}`]: { color: n[300] },
-		[`& .${g.icon}`]: { color: n[300] },
-		[`& .${g.deleteIcon}`]: { color: n[300] }
+		borderColor: n[500],
+		color: n[500],
+		[`& .${g.label}`]: { color: n[500] },
+		[`& .${g.icon}`]: { color: n[500] },
+		[`& .${g.deleteIcon}`]: { color: n[500] }
 	})
 }), y = {
 	defaultProps: {