@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/s-theme-provider/s-theme-provider.js

@@ -1,42 +1,41 @@
-import { a as e, i as t, n, r, t as i } from "../theme-primitives-CiQYd9Cc.js";
-import { components as a } from "../theme/components/components.js";
-import * as o from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { CssBaseline as l, ThemeProvider as u, createTheme as d } from "@mui/material";
-import { deepmerge as f } from "@mui/utils";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../theme-primitives-CRfnMsNy.js";
+import { components as s } from "../theme/components/components.js";
+import * as c from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { CssBaseline as d, ThemeProvider as f, createTheme as p } from "@mui/material";
+import { deepmerge as m } from "@mui/utils";
 //#region lib/s-theme-provider/s-theme-provider.tsx
-var p = ({ children: p, disableCssBaseline: m = !1, disableCustomTheme: h, themeComponents: g, defaultMode: _ = "system", theme: v, ...y }) => {
-	let b = o.useMemo(() => {
-		if (h) return {};
-		let o = {
+var h = ({ children: h, disableCssBaseline: g = !1, disableCustomTheme: _, themeComponents: v, defaultMode: y = "system", theme: b, ...x }) => {
+	let S = c.useMemo(() => {
+		if (_) return {};
+		let c = {
 			cssVariables: {
 				colorSchemeSelector: "data-mui-color-scheme",
 				cssVarPrefix: "s"
 			},
-			colorSchemes: i,
-			typography: e,
-			shadows: r,
-			shape: t,
-			radius: n,
-			components: {
-				...a,
-				...g
-			}
-		};
-		return d(v ? f(o, v) : o);
+			unstable_sxConfig: r,
+			colorSchemes: o,
+			interaction: n,
+			typography: a,
+			shadows: t,
+			shape: e,
+			radius: i,
+			components: s
+		}, l = v ? m(c, { components: v }) : c;
+		return p(b ? m(l, b) : l);
 	}, [
-		h,
-		g,
-		v
+		_,
+		v,
+		b
 	]);
-	return h ? /* @__PURE__ */ s(o.Fragment, { children: p }) : /* @__PURE__ */ c(u, {
+	return _ ? /* @__PURE__ */ l(c.Fragment, { children: h }) : /* @__PURE__ */ u(f, {
 		disableTransitionOnChange: !0,
-		...y,
-		theme: b,
-		defaultMode: _,
-		children: [!m && /* @__PURE__ */ s(l, {}), p]
+		...x,
+		theme: S,
+		defaultMode: y,
+		children: [!g && /* @__PURE__ */ l(d, {}), h]
 	});
 };
-p.displayName = "SThemeProvider";
+h.displayName = "SThemeProvider";
 //#endregion
-export { p as SThemeProvider, p as default };
+export { h as SThemeProvider, h as default };

package/dist/s-theme-switch/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SThemeSwitch } from './s-theme-switch';
-export type { SThemeSwitchProps, SThemeMode } from './s-theme-switch';
+export type { SThemeMode, SThemeSwitchOwnerState, SThemeSwitchProps } from './s-theme-switch';
+export type {} from '../theme/component-augmentation';

package/dist/s-theme-switch/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-theme-switch-DzXoVmQH.js";
+import { SThemeSwitch as e } from "./s-theme-switch.js";
 export { e as SThemeSwitch, e as default };

package/dist/s-theme-switch/s-theme-switch.d.ts

@@ -1,9 +1,11 @@
-import { SxProps, Theme } from '@mui/material';
+import { IconButtonProps } from '@mui/material';
 export type SThemeMode = 'light' | 'dark' | 'system' | undefined;
-export interface SThemeSwitchProps {
+export interface SThemeSwitchProps extends Omit<IconButtonProps, 'children' | 'component'> {
     mode?: SThemeMode;
     setMode?: (mode: SThemeMode) => void;
-    sx?: SxProps<Theme>;
 }
-declare const SThemeSwitch: ({ mode, setMode, sx }: SThemeSwitchProps) => import("react/jsx-runtime").JSX.Element;
+export type SThemeSwitchOwnerState = SThemeSwitchProps & {
+    mode: SThemeMode;
+};
+export declare const SThemeSwitch: import('react').ForwardRefExoticComponent<Omit<SThemeSwitchProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export default SThemeSwitch;

package/dist/s-theme-switch/s-theme-switch.js

@@ -1,2 +1,60 @@
-import { t as e } from "../s-theme-switch-DzXoVmQH.js";
-export { e as default };
+import { forwardRef as e, useCallback as t, useRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { DarkMode as i, LightMode as a } from "@mui/icons-material";
+import { IconButton as o, styled as s, useColorScheme as c, useMediaQuery as l, useThemeProps as u } from "@mui/material";
+import { useForkRef as d } from "@mui/material/utils";
+import { flushSync as f } from "react-dom";
+//#region lib/s-theme-switch/s-theme-switch.tsx
+var p = s(o, {
+	name: "SThemeSwitch",
+	slot: "Root"
+})({}), m = e(function(e, o) {
+	let s = u({
+		props: e,
+		name: "SThemeSwitch"
+	}), { mode: m, onClick: h, setMode: g, "aria-label": _, ...v } = s, y = n(null), b = d(y, o), { mode: x, setMode: S, systemMode: C } = c(), w = l("(prefers-reduced-motion: reduce)"), T = m ?? x, E = (T === "system" ? C : T) === "dark", D = {
+		...s,
+		mode: T
+	}, O = t(() => {
+		let e = E ? "light" : "dark";
+		g ? g(e) : S(e);
+	}, [
+		E,
+		S,
+		g
+	]), k = t(async (e) => {
+		if (h?.(e), e.defaultPrevented) return;
+		if (w || !y.current || typeof document > "u" || !document.startViewTransition) {
+			O();
+			return;
+		}
+		await document.startViewTransition(() => {
+			f(() => {
+				O();
+			});
+		}).ready;
+		let t = y.current;
+		if (!t) return;
+		let { top: n, left: r, width: i, height: a } = t.getBoundingClientRect(), o = r + i / 2, s = n + a / 2, c = Math.hypot(Math.max(o, window.innerWidth - o), Math.max(s, window.innerHeight - s));
+		document.documentElement.animate({ clipPath: [`circle(0px at ${o}px ${s}px)`, `circle(${c}px at ${o}px ${s}px)`] }, {
+			duration: 700,
+			easing: "ease-in-out",
+			pseudoElement: "::view-transition-new(root)"
+		});
+	}, [
+		h,
+		w,
+		O
+	]);
+	return /* @__PURE__ */ r(p, {
+		...v,
+		ref: b,
+		"aria-label": _ ?? (E ? "Switch to light mode" : "Switch to dark mode"),
+		onClick: k,
+		ownerState: D,
+		children: r(E ? a : i, {})
+	});
+});
+m.displayName = "SThemeSwitch";
+//#endregion
+export { m as SThemeSwitch, m as default };

package/dist/s-tip/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as STip } from './s-tip';
-export type { STipProps } from './s-tip';
+export type { STipOwnerState, STipProps, STipSlotProps, STipSlots } from './s-tip';
+export type {} from '../theme/component-augmentation';

package/dist/s-tip/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-tip-BOGEH1v8.js";
+import { STip as e } from "./s-tip.js";
 export { e as STip, e as default };

package/dist/s-tip/s-tip.d.ts

@@ -1,13 +1,31 @@
+import { StackProps } from '@mui/material/Stack';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import { TypographyProps } from '@mui/material/Typography';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
 import * as React from 'react';
-/**
- * Props interface for STip component
- */
-export interface STipProps {
-    /** The tip message to display */
-    message: string;
-}
-export declare const STip: {
-    ({ message }: STipProps): React.JSX.Element;
-    displayName: string;
-};
+export interface STipSlots {
+    icon?: React.ElementType;
+    text?: React.ElementType;
+}
+export interface STipOwnerState {
+    direction: StackProps['direction'];
+    hasLabel: boolean;
+    spacing: StackProps['spacing'];
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, STipOwnerState>;
+export interface STipSlotProps {
+    icon?: OwnerStateSlotProps<SvgIconProps>;
+    text?: OwnerStateSlotProps<TypographyProps>;
+}
+export interface STipProps extends Omit<StackProps, 'children' | 'component'> {
+    /** Tip content. */
+    children: React.ReactNode;
+    /** Prefix displayed before the tip content. */
+    label?: React.ReactNode;
+    /** Components used for internal slots. */
+    slots?: STipSlots;
+    /** Props for internal slots. */
+    slotProps?: STipSlotProps;
+}
+export declare const STip: React.ForwardRefExoticComponent<Omit<STipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default STip;

package/dist/s-tip/s-tip.js

@@ -1,2 +1,61 @@
-import { t as e } from "../s-tip-BOGEH1v8.js";
-export { e as STip, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { styled as t, useThemeProps as n } from "@mui/material/styles";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@mui/material/Typography";
+import s from "@mui/utils/appendOwnerState";
+import c from "@mui/icons-material/LightbulbOutlined";
+import l from "@mui/material/Stack";
+//#region lib/s-tip/s-tip.tsx
+var u = t(l, {
+	name: "STip",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({});
+function d(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var f = r.forwardRef(function(t, r) {
+	let l = n({
+		props: t,
+		name: "STip"
+	}), { children: f, direction: p = "row", label: m = "Tip.", slotProps: h, slots: g, spacing: _ = 1, sx: v, ...y } = l, b = {
+		...l,
+		direction: p,
+		hasLabel: m != null,
+		spacing: _
+	}, x = g?.icon ?? c, S = g?.text ?? o, C = d(h?.icon, b), w = d(h?.text, b), T = s(g?.icon, C ?? {}, b), E = s(g?.text, w ?? {}, b);
+	return /* @__PURE__ */ a(u, {
+		...y,
+		ref: r,
+		direction: p,
+		ownerState: b,
+		spacing: _,
+		sx: [{
+			alignItems: "center",
+			bgcolor: "background.default",
+			borderRadius: 1,
+			color: "text.primary",
+			p: 1
+		}, ...e(v)],
+		children: [/* @__PURE__ */ i(x, {
+			...T,
+			sx: [{ fontSize: 16 }, ...e(C?.sx)]
+		}), /* @__PURE__ */ a(S, {
+			...E,
+			children: [
+				m != null && /* @__PURE__ */ i(o, {
+					component: "span",
+					sx: { fontWeight: "bold" },
+					variant: "inherit",
+					children: m
+				}),
+				" ",
+				f
+			]
+		})]
+	});
+});
+f.displayName = "STip";
+//#endregion
+export { f as STip, f as default };

package/dist/s-toggle-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as SToggleButton } from './s-toggle-button';
+export type { SToggleButtonProps } from './s-toggle-button';

package/dist/s-toggle-button/index.js

@@ -0,0 +1,2 @@
+import { SToggleButton as e } from "./s-toggle-button.js";
+export { e as SToggleButton, e as default };

package/dist/s-toggle-button/s-toggle-button.d.ts

@@ -0,0 +1,6 @@
+import { ToggleButtonProps } from '@mui/material';
+/** Exact MUI ToggleButton props, including polymorphic `component` support. */
+export type SToggleButtonProps = ToggleButtonProps;
+/** SoloStylist export of the MUI ToggleButton contract with shared theme styling. */
+export declare const SToggleButton: import('@mui/material').ExtendButtonBase<import('@mui/material').ToggleButtonTypeMap<{}, "button">>;
+export default SToggleButton;

package/dist/s-toggle-button/s-toggle-button.js

@@ -0,0 +1,5 @@
+import { ToggleButton as e } from "@mui/material";
+//#region lib/s-toggle-button/s-toggle-button.tsx
+var t = e;
+//#endregion
+export { t as SToggleButton, t as default };

package/dist/s-tool-bar/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SToolBar } from './s-tool-bar';
-export type { SToolBarProps, SToolBarInputType, SToolBarInput, SToolBarValue, SToolBarOption } from './types';
+export type { SToolBarInput, SToolBarChangeEvent, SToolBarInputSlotProps, SToolBarInputType, SToolBarOption, SToolBarOwnerState, SToolBarProps, SToolBarSlotProps, SToolBarSlots, SToolBarValue, } from './types';
+export type {} from '../theme/component-augmentation';

package/dist/s-tool-bar/s-tool-bar.d.ts

@@ -1,7 +1,4 @@
-import { default as React } from 'react';
 import { SToolBarProps } from './types';
-export declare const SToolBar: {
-    ({ inputs, onProcess, onReset, onDownload, processing, uploading, inputValues, onInputChange, customActionButtons, hideProcessButton, processButtonDisabled, getInputDisabled, processTooltip, downloadTooltip, resetTooltip, infoTooltip, infoTitle, infoContent, position, relative, containerSx, sx, }: SToolBarProps): React.JSX.Element;
-    displayName: string;
-};
+import * as React from 'react';
+export declare const SToolBar: React.ForwardRefExoticComponent<Omit<SToolBarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SToolBar;

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

@@ -1,46 +1,69 @@
-import { tint as e } from "../theme/utils.js";
-import { t } from "../tool-bar-action-buttons-CSXNDen6.js";
-import { groupInputsByType as n, hasVisibleInputSection as r, isProcessActionDisabled as i, isRequiredInputFilled as a } from "./utils.js";
-import { ToolbarInputItem as o } from "./tool-bar-inputs.js";
-import { useCallback as s, useMemo as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { createPortal as f } from "react-dom";
-import { Box as p, Dialog as m, DialogContent as h, DialogTitle as g } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import { tint as t } from "../theme/utils.js";
+import { getToolBarInputValue as n, groupInputsByType as r, hasVisibleInputSection as i, isProcessActionDisabled as a, isRequiredInputFilled as o } from "./utils.js";
+import { ToolbarInputItem as s } from "./tool-bar-inputs.js";
+import { ToolbarActionButtons as ee } from "./tool-bar-action-buttons.js";
+import * as c from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Box as d, Dialog as te, DialogContent as ne, DialogTitle as re, Portal as ie, styled as f, useThemeProps as p } from "@mui/material";
+import { mergeSlotProps as m } from "@mui/material/utils";
+import h from "@mui/utils/appendOwnerState";
 //#region lib/s-tool-bar/s-tool-bar.tsx
-var _ = ({ inputs: _ = [], onProcess: v, onReset: y, onDownload: b, processing: x = !1, uploading: S = !1, inputValues: C = {}, onInputChange: w, customActionButtons: T, hideProcessButton: E = !1, processButtonDisabled: D = !1, getInputDisabled: O, processTooltip: k = "Process", downloadTooltip: A = "Download", resetTooltip: j = "Reset", infoTooltip: M = "Information", infoTitle: N = "Tool Information", infoContent: P, position: F = "bottom", relative: I = !1, containerSx: L, sx: R }) => {
-	let [z, B] = l(!1), V = c(() => _.length === 0 ? !0 : _.every((e) => a(e, C[e.key])), [_, C]), { imageInputs: H, textareaInputs: U, paramInputs: W } = c(() => n(_), [_]), G = r(H, W), K = i(D, V, S, x), q = s(() => {}, []), J = s(() => {}, []), Y = s((e, t, n) => {
-		w?.(e, t, n);
-	}, [w]), X = s(() => B(!0), []), Z = s(() => B(!1), []), Q = s((e) => {
-		let t = C[e.key];
-		return /* @__PURE__ */ u(o, {
-			input: e,
-			value: t,
-			onChange: (t) => Y(e.key, t),
-			onFocus: q,
-			onBlur: J,
-			disabled: O?.(e.key) ?? !1
-		}, e.key);
-	}, [
-		C,
-		O,
+var g = f(d, {
+	name: "SToolBar",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), _ = f(d, {
+	name: "SToolBar",
+	slot: "Toolbar",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({});
+function v(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var y = c.forwardRef(function(f, y) {
+	let b = p({
+		props: f,
+		name: "SToolBar"
+	}), { actions: x, downloadTooltip: ae = "Download", getInputDisabled: S, hideProcessButton: oe = !1, infoContent: C, infoTitle: se = "Tool Information", infoTooltip: ce = "Information", inputValues: w = {}, inputs: T = [], onDownload: le, onInputChange: E, onProcess: D, onReset: O, position: k = "bottom", processButtonDisabled: A = !1, processTooltip: j = "Process", processing: M = !1, relative: N = !1, resetTooltip: P = "Reset", slotProps: F, slots: I, sx: L, uploading: R = !1, ...z } = b, [B, V] = c.useState(!1), H = {
+		...b,
+		position: k,
+		processing: M,
+		relative: N,
+		uploading: R
+	}, U = c.useCallback(() => V(!0), []), W = c.useCallback(() => V(!1), []), G = I?.toolbar ?? _, ue = I?.dialog ?? te, de = I?.dialogTitle ?? re, fe = I?.dialogContent ?? ne, pe = v(F?.toolbar, H), me = v(F?.dialog, H), he = v(F?.dialogTitle, H), ge = v(F?.dialogContent, H), { sx: _e, ...ve } = pe ?? {}, ye = h(G, ve, H), be = h(I?.dialog, m(me, { onClose: W }), H), xe = h(I?.dialogTitle, he ?? {}, H), Se = h(I?.dialogContent, ge ?? {}, H), Ce = c.useMemo(() => T.length === 0 ? !0 : T.every((e) => o(e, n(e, w))), [T, w]), { imageInputs: K, textareaInputs: q, paramInputs: J } = c.useMemo(() => r(T), [T]), we = i(K, J), Te = a(A, Ce, R, M), Y = c.useCallback(() => {}, []), X = c.useCallback(() => {}, []), Z = c.useCallback((e, t, n, r) => {
+		E?.(e, t, n, r);
+	}, [E]), Q = c.useCallback((e) => /* @__PURE__ */ l(s, {
+		input: e,
+		value: n(e, w),
+		onChange: (t, n, r) => Z(t, e.key, n, r),
+		onFocus: Y,
+		onBlur: X,
+		disabled: S?.(e.key) ?? !1
+	}, e.key), [
+		w,
+		S,
+		Z,
 		Y,
-		q,
-		J
-	]), $ = /* @__PURE__ */ d(p, {
-		sx: {
-			position: I ? "relative" : "fixed",
-			[F]: I ? "auto" : 20,
-			left: I ? "auto" : "50%",
-			transform: I ? "none" : "translateX(-50%)",
-			zIndex: I ? "auto" : 1300,
-			display: I ? "flex" : "block",
-			justifyContent: I ? "center" : "initial",
-			mt: I && F === "top" ? 2 : 0,
-			mb: I && F === "bottom" ? 2 : 0,
-			...L
-		},
-		children: [/* @__PURE__ */ d(p, {
-			sx: [(t) => ({
+		X
+	]), $ = /* @__PURE__ */ u(g, {
+		...z,
+		ownerState: H,
+		ref: y,
+		sx: [{
+			position: N ? "relative" : "fixed",
+			[k]: 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 && k === "top" ? 2 : 0,
+			mb: N && k === "bottom" ? 2 : 0
+		}, ...e(L)],
+		children: [/* @__PURE__ */ u(G, {
+			...ye,
+			sx: [(e) => ({
 				display: "flex",
 				flexDirection: "column",
 				gap: 2,
@@ -50,65 +73,71 @@ var _ = ({ inputs: _ = [], onProcess: v, onReset: y, onDownload: b, processing:
 				borderColor: "divider",
 				bgcolor: "background.default",
 				transition: "border 120ms ease-in",
-				"&:hover": { borderColor: (t.vars ?? t).palette.grey[500] },
+				"&:hover": { borderColor: (e.vars ?? e).palette.grey[500] },
 				"&:focus-within": {
-					outline: `3px solid ${e((t.vars ?? t).palette.primary[500], 50)}`,
-					borderColor: (t.vars ?? t).palette.primary[400]
+					outline: `3px solid ${t((e.vars ?? e).palette.primary[500], 50)}`,
+					borderColor: (e.vars ?? e).palette.primary[400]
 				}
-			}), ...Array.isArray(R) ? R : [R]],
-			children: [U.length > 0 && /* @__PURE__ */ u(p, {
+			}), ...e(_e)],
+			children: [q.length > 0 && /* @__PURE__ */ l(d, {
 				sx: {
 					display: "flex",
 					flexDirection: "column",
 					gap: 2
 				},
-				children: U.map(Q)
-			}), /* @__PURE__ */ d(p, {
+				children: q.map(Q)
+			}), /* @__PURE__ */ u(d, {
 				sx: {
 					display: "flex",
 					alignItems: "center",
 					gap: .5
 				},
-				children: [/* @__PURE__ */ u(p, {
+				children: [/* @__PURE__ */ l(d, {
 					sx: {
 						display: "flex",
 						alignItems: "center",
 						gap: 2,
 						flex: 1
 					},
-					children: G && /* @__PURE__ */ d(p, {
+					children: we && /* @__PURE__ */ u(d, {
 						sx: {
 							display: "flex",
 							alignItems: "center",
 							gap: 1.5
 						},
-						children: [H.map(Q), W.map(Q)]
+						children: [K.map(Q), J.map(Q)]
 					})
-				}), /* @__PURE__ */ u(t, {
-					customActionButtons: T,
-					infoContent: P,
-					infoTooltip: M,
-					downloadTooltip: A,
-					resetTooltip: j,
-					processTooltip: k,
-					hideProcessButton: E,
-					processActionDisabled: K,
-					onInfoOpen: X,
-					onDownload: b,
-					onReset: y,
-					onProcess: v
+				}), /* @__PURE__ */ l(ee, {
+					customActionButtons: x,
+					infoContent: C,
+					infoTooltip: ce,
+					downloadTooltip: ae,
+					resetTooltip: P,
+					processTooltip: j,
+					hideProcessButton: oe,
+					processActionDisabled: Te,
+					onInfoOpen: U,
+					onDownload: le,
+					onReset: O,
+					onProcess: D
 				})]
 			})]
-		}), P && /* @__PURE__ */ d(m, {
-			open: z,
-			onClose: Z,
+		}), C && /* @__PURE__ */ u(ue, {
 			maxWidth: "sm",
 			fullWidth: !0,
-			children: [/* @__PURE__ */ u(g, { children: N }), /* @__PURE__ */ u(h, { children: P })]
+			...be,
+			open: B,
+			children: [/* @__PURE__ */ l(de, {
+				...xe,
+				children: se
+			}), /* @__PURE__ */ l(fe, {
+				...Se,
+				children: C
+			})]
 		})]
 	});
-	return !I && typeof window < "u" ? f($, document.body) : $;
-};
-_.displayName = "SToolBar";
+	return N ? $ : /* @__PURE__ */ l(ie, { children: $ });
+});
+y.displayName = "SToolBar";
 //#endregion
-export { _ as SToolBar, _ as default };
+export { y as SToolBar, y as default };

package/dist/s-tool-bar/tool-bar-action-buttons.d.ts

@@ -9,7 +9,7 @@ export declare const ToolbarActionButtons: React.NamedExoticComponent<{
     hideProcessButton: boolean;
     processActionDisabled: boolean;
     onInfoOpen: () => void;
-    onDownload?: () => void;
-    onReset?: () => void;
-    onProcess?: () => void;
+    onDownload?: React.MouseEventHandler<HTMLButtonElement>;
+    onReset?: React.MouseEventHandler<HTMLButtonElement>;
+    onProcess?: React.MouseEventHandler<HTMLButtonElement>;
 }>;

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

@@ -1,2 +1,55 @@
-import { t as e } from "../tool-bar-action-buttons-CSXNDen6.js";
-export { e as ToolbarActionButtons };
+import e from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { AutoAwesome as r } from "@mui/icons-material";
+import { Box as i, IconButton as a, Tooltip as o } from "@mui/material";
+import s from "@mui/icons-material/Autorenew";
+import c from "@mui/icons-material/Download";
+import l from "@mui/icons-material/InfoOutlined";
+//#region lib/s-tool-bar/tool-bar-action-buttons.tsx
+var u = e.memo(({ customActionButtons: e, infoContent: u, infoTooltip: d, downloadTooltip: f, resetTooltip: p, processTooltip: m, hideProcessButton: h, processActionDisabled: g, onInfoOpen: _, onDownload: v, onReset: y, onProcess: b }) => /* @__PURE__ */ n(i, {
+	sx: {
+		display: "flex",
+		alignItems: "center",
+		gap: 1,
+		ml: "auto"
+	},
+	children: [
+		e,
+		u && /* @__PURE__ */ t(o, {
+			title: d,
+			children: /* @__PURE__ */ t(a, {
+				"aria-label": d,
+				onClick: _,
+				children: /* @__PURE__ */ t(l, {})
+			})
+		}),
+		/* @__PURE__ */ t(o, {
+			title: f,
+			children: /* @__PURE__ */ t(a, {
+				"aria-label": f,
+				onClick: v,
+				children: /* @__PURE__ */ t(c, {})
+			})
+		}),
+		/* @__PURE__ */ t(o, {
+			title: p,
+			children: /* @__PURE__ */ t(a, {
+				"aria-label": p,
+				onClick: y,
+				children: /* @__PURE__ */ t(s, {})
+			})
+		}),
+		!h && /* @__PURE__ */ t(o, {
+			title: m,
+			children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(a, {
+				"aria-label": m,
+				onClick: b,
+				disabled: g,
+				size: "large",
+				children: /* @__PURE__ */ t(r, { color: g ? "disabled" : "primary" })
+			}) })
+		})
+	]
+}));
+//#endregion
+export { u as ToolbarActionButtons };

package/dist/s-tool-bar/tool-bar-image-input.d.ts

@@ -1,8 +1,8 @@
 import { default as React } from 'react';
-import { SToolBarInput, SToolBarValue } from './types';
+import { SToolBarChangeEvent, SToolBarInput, SToolBarValue } from './types';
 export declare const ImageInput: React.NamedExoticComponent<{
     input: SToolBarInput;
     value: SToolBarValue;
-    onChange: (value: SToolBarValue) => void;
+    onChange: (event: SToolBarChangeEvent, value: SToolBarValue, file?: File) => void;
     disabled?: boolean;
 }>;