@solostylist/ui-kit 1.0.229 → 2.0.0

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

@@ -1,32 +1,41 @@
-import { t as e } from "../tool-bar-image-input-IdA6l71Y.js";
-import { t } from "../s-select-HMWY7frm.js";
-import n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Box as a, Slider as o, TextField as s, Typography as c, outlinedInputClasses as l } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import { t } from "../mergeSlotProps-xl1-PgWL.js";
+import { t as n } from "../tool-bar-image-input-BXlll_hV.js";
+import { t as r } from "../s-select-dwY2DYa9.js";
+import i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Box as s, Slider as c, TextField as l, Typography as u, outlinedInputClasses as d } from "@mui/material";
 //#region lib/s-tool-bar/tool-bar-inputs.tsx
-var u = n.memo(({ input: e, value: t, onChange: n, onFocus: i, onBlur: a, disabled: o }) => /* @__PURE__ */ r(s, {
-	value: t,
-	onChange: (e) => n(e.target.value),
-	onFocus: i,
-	onBlur: a,
-	placeholder: e.placeholder ?? e.label,
-	disabled: o,
-	multiline: !0,
-	minRows: e.minRows ?? 2,
-	maxRows: e.maxRows ?? 5,
-	fullWidth: !0,
-	variant: "outlined",
-	slotProps: { input: { sx: {
-		backgroundColor: "transparent",
-		border: "none",
-		padding: 0,
-		[`&.${l.focused}`]: { outline: "none" },
-		"& fieldset": { border: "none" },
-		"&:hover fieldset": { border: "none" },
-		"&.Mui-focused fieldset": { border: "none" }
-	} } },
-	...e.componentProps?.textarea ?? {}
-})), d = n.memo((e) => /* @__PURE__ */ r(c, {
+var f = i.memo(({ input: e, value: n, onChange: r, onFocus: i, onBlur: o, disabled: s }) => {
+	let { slotProps: c, ...u } = e.slotProps?.textarea ?? {};
+	return /* @__PURE__ */ a(l, {
+		value: n ?? "",
+		onChange: (e) => r(e, e.target.value),
+		onFocus: i,
+		onBlur: o,
+		placeholder: e.placeholder ?? e.label,
+		disabled: s,
+		multiline: !0,
+		minRows: e.minRows ?? 2,
+		maxRows: e.maxRows ?? 5,
+		fullWidth: !0,
+		variant: "outlined",
+		...u,
+		slotProps: {
+			...c,
+			htmlInput: t(c?.htmlInput, { "aria-label": e.label }),
+			input: t(c?.input, { sx: {
+				backgroundColor: "transparent",
+				border: "none",
+				padding: 0,
+				[`&.${d.focused}`]: { outline: "none" },
+				"& fieldset": { border: "none" },
+				"&:hover fieldset": { border: "none" },
+				"&.Mui-focused fieldset": { border: "none" }
+			} })
+		}
+	});
+}), p = i.memo((e) => /* @__PURE__ */ a(u, {
 	variant: "subtitle2",
 	sx: {
 		whiteSpace: "nowrap",
@@ -35,105 +44,123 @@ var u = n.memo(({ input: e, value: t, onChange: n, onFocus: i, onBlur: a, disabl
 		width: "100% !important"
 	},
 	children: e.label
-})), f = n.memo(({ input: e, value: t, onChange: n, onFocus: o, onBlur: c, disabled: l }) => /* @__PURE__ */ i(a, {
-	sx: {
-		width: 80,
-		display: "flex",
-		flexDirection: "column"
-	},
-	children: [/* @__PURE__ */ r(d, { label: e.label }), /* @__PURE__ */ r(s, {
-		type: "number",
-		value: t ?? e.defaultValue ?? 0,
-		onChange: (e) => n(Number(e.target.value)),
-		onFocus: o,
-		onBlur: c,
-		disabled: l,
-		slotProps: { htmlInput: {
-			min: e.min,
-			max: e.max,
-			step: e.step
-		} },
-		...e.componentProps?.number ?? {}
-	})]
-})), p = n.memo(({ input: e, value: n, onChange: o, onFocus: s, onBlur: c, disabled: l }) => /* @__PURE__ */ i(a, {
-	sx: {
-		width: 180,
-		display: "flex",
-		flexDirection: "column"
-	},
-	children: [/* @__PURE__ */ r(d, { label: e.label }), /* @__PURE__ */ r(t, {
-		value: n ?? e.defaultValue ?? "",
-		onChange: (e) => o(e.target.value),
-		onFocus: s,
-		onBlur: c,
-		disabled: l,
-		placeholder: e.placeholder,
-		options: e.options ?? [],
-		optionLabel: e.optionLabel,
-		optionValue: e.optionValue,
-		searchable: e.searchable,
-		searchPlaceholder: e.searchPlaceholder,
-		...e.componentProps?.select ?? {}
-	})]
-})), m = n.memo(({ input: e, value: t, onChange: n, onFocus: s, onBlur: l, disabled: u }) => /* @__PURE__ */ i(a, {
-	sx: {
-		width: 160,
-		display: "flex",
-		flexDirection: "column"
-	},
-	children: [/* @__PURE__ */ r(d, { label: e.label }), /* @__PURE__ */ i(a, {
+})), m = i.memo(({ input: e, value: n, onChange: r, onFocus: i, onBlur: c, disabled: u }) => {
+	let { slotProps: d, ...f } = e.slotProps?.number ?? {};
+	return /* @__PURE__ */ o(s, {
 		sx: {
+			width: 80,
 			display: "flex",
-			alignItems: "center",
-			height: 36
+			flexDirection: "column"
 		},
-		children: [/* @__PURE__ */ r(o, {
-			value: t ?? e.defaultValue ?? e.min ?? 0,
-			onChange: (e, t) => n(t),
-			onMouseDown: s,
-			onMouseUp: l,
+		children: [/* @__PURE__ */ a(p, { label: e.label }), /* @__PURE__ */ a(l, {
+			type: "number",
+			value: typeof n == "number" ? n : "",
+			onChange: (e) => r(e, Number(e.target.value)),
+			onFocus: i,
+			onBlur: c,
 			disabled: u,
-			min: e.min ?? 0,
-			max: e.max ?? 100,
-			step: e.step ?? 1,
-			sx: { flex: 1 },
-			...e.componentProps?.slider ?? {}
-		}), /* @__PURE__ */ r(c, {
-			variant: "body2",
+			...f,
+			slotProps: {
+				...d,
+				htmlInput: t(d?.htmlInput, {
+					"aria-label": e.label,
+					min: e.min,
+					max: e.max,
+					step: e.step
+				})
+			}
+		})]
+	});
+}), h = i.memo(({ input: e, value: t, onChange: n, onFocus: i, onBlur: c, disabled: l }) => {
+	let { inputProps: u, ...d } = e.slotProps?.select ?? {};
+	return /* @__PURE__ */ o(s, {
+		sx: {
+			width: 180,
+			display: "flex",
+			flexDirection: "column"
+		},
+		children: [/* @__PURE__ */ a(p, { label: e.label }), /* @__PURE__ */ a(r, {
+			value: t ?? "",
+			onChange: (e) => n(e, e.target.value),
+			onFocus: i,
+			onBlur: c,
+			disabled: l,
+			placeholder: e.placeholder,
+			options: e.options ?? [],
+			optionLabel: e.optionLabel,
+			optionValue: e.optionValue,
+			searchable: e.searchable,
+			searchPlaceholder: e.searchPlaceholder,
+			...d,
+			inputProps: {
+				"aria-label": e.label,
+				...u
+			}
+		})]
+	});
+}), g = i.memo(({ input: t, value: n, onChange: r, onFocus: i, onBlur: l, disabled: d }) => {
+	let { sx: f, ...m } = t.slotProps?.slider ?? {};
+	return /* @__PURE__ */ o(s, {
+		sx: {
+			width: 160,
+			display: "flex",
+			flexDirection: "column"
+		},
+		children: [/* @__PURE__ */ a(p, { label: t.label }), /* @__PURE__ */ o(s, {
 			sx: {
-				minWidth: 60,
-				textAlign: "center"
+				display: "flex",
+				alignItems: "center",
+				height: 36
 			},
-			children: t ?? e.defaultValue ?? e.min ?? 0
+			children: [/* @__PURE__ */ a(c, {
+				"aria-label": t.label,
+				value: typeof n == "number" ? n : t.min ?? 0,
+				onChange: (e, t) => r(e, t),
+				onMouseDown: i,
+				onMouseUp: l,
+				disabled: d,
+				min: t.min ?? 0,
+				max: t.max ?? 100,
+				step: t.step ?? 1,
+				...m,
+				sx: [{ flex: 1 }, ...e(f)]
+			}), /* @__PURE__ */ a(u, {
+				variant: "body2",
+				sx: {
+					minWidth: 60,
+					textAlign: "center"
+				},
+				children: typeof n == "number" ? n : t.min ?? 0
+			})]
 		})]
-	})]
-})), h = (t) => {
-	switch (t.input.type) {
-		case "textarea": return /* @__PURE__ */ r(u, { ...t });
-		case "number": return /* @__PURE__ */ r(f, { ...t });
-		case "slider": return /* @__PURE__ */ r(m, { ...t });
-		case "select": return /* @__PURE__ */ r(p, { ...t });
-		case "image": return /* @__PURE__ */ r(e, {
-			input: t.input,
-			value: t.value,
-			onChange: t.onChange,
-			disabled: t.disabled
+	});
+}), _ = (e) => {
+	switch (e.input.type) {
+		case "textarea": return /* @__PURE__ */ a(f, { ...e });
+		case "number": return /* @__PURE__ */ a(m, { ...e });
+		case "slider": return /* @__PURE__ */ a(g, { ...e });
+		case "select": return /* @__PURE__ */ a(h, { ...e });
+		case "image": return /* @__PURE__ */ a(n, {
+			input: e.input,
+			value: e.value,
+			onChange: e.onChange,
+			disabled: e.disabled
 		});
 		default: return null;
 	}
-}, g = n.memo(({ input: e, value: t, disabled: n, onChange: i, onFocus: o, onBlur: s }) => e.renderInput ? /* @__PURE__ */ r(a, { children: e.renderInput({
+}, v = i.memo(({ input: e, value: t, disabled: n, onChange: r, onFocus: i, onBlur: o }) => e.renderInput ? /* @__PURE__ */ a(s, { children: e.renderInput({
 	value: t,
-	onChange: i,
-	onFocus: o,
-	onBlur: s,
+	onChange: r,
+	onFocus: i,
+	onBlur: o,
 	disabled: n
-}) }) : /* @__PURE__ */ r(h, {
+}) }) : /* @__PURE__ */ a(_, {
 	input: e,
 	value: t,
-	onChange: i,
-	onFocus: o,
-	onBlur: s,
+	onChange: r,
+	onFocus: i,
+	onBlur: o,
 	disabled: n
 }));
 //#endregion
-export { g as ToolbarInputItem };
+export { v as ToolbarInputItem };

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

@@ -1,10 +1,13 @@
 import { default as React } from 'react';
-import { SelectProps, SliderProps, TextFieldProps } from '@mui/material';
-import { SxProps, Theme } from '@mui/material/styles';
+import { BoxProps, DialogContentProps, DialogProps, DialogTitleProps, SliderProps, TextFieldProps } from '@mui/material';
+import { SSelectProps } from '../s-select';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
 /**
  * Possible value types for SToolBar inputs
  */
 export type SToolBarValue = string | number | File | (string | File)[] | null;
+/** Source event emitted by native, React, or MUI input controls. */
+export type SToolBarChangeEvent = Event | React.SyntheticEvent;
 /**
  * Base type constraint for select options
  */
@@ -63,13 +66,13 @@ export interface SToolBarInput {
      *
      * Only the props relevant to the current `type` are used.
      */
-    componentProps?: SToolBarComponentProps;
+    slotProps?: SToolBarInputSlotProps;
     /** Custom renderer for the input */
     renderInput?: (props: {
         value: SToolBarValue;
-        onChange: (value: SToolBarValue) => void;
-        onFocus: () => void;
-        onBlur: () => void;
+        onChange: (event: SToolBarChangeEvent, value: SToolBarValue, file?: File) => void;
+        onFocus: (event: SToolBarChangeEvent) => void;
+        onBlur: (event: SToolBarChangeEvent) => void;
         disabled?: boolean;
     }) => React.ReactNode;
 }
@@ -77,28 +80,15 @@ export interface SToolBarInput {
  * Per-type overrides forwarded to the underlying child components.
  * Omit props that are already managed by SToolBar to avoid conflicts.
  */
-export interface SToolBarComponentProps {
+export interface SToolBarInputSlotProps {
     /** Extra props for the MUI TextField used in `textarea` inputs */
     textarea?: Omit<TextFieldProps, 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'multiline' | 'minRows' | 'maxRows' | 'fullWidth' | 'placeholder'>;
     /** Extra props for the MUI TextField used in `number` inputs */
-    number?: Omit<TextFieldProps, 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'type' | 'slotProps'>;
+    number?: Omit<TextFieldProps, 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'type'>;
     /** Extra props for the MUI Slider used in `slider` inputs */
     slider?: Omit<SliderProps, 'value' | 'onChange' | 'onMouseDown' | 'onMouseUp' | 'disabled' | 'min' | 'max' | 'step'>;
     /** Extra props for SSelect used in `select` inputs */
-    select?: Omit<SelectProps, 'ref' | 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'error' | 'variant'> & {
-        /** Field label displayed above the select */
-        label?: string | React.ReactNode;
-        /** Error message to display below the field */
-        error?: string;
-        /** Whether the field is required */
-        required?: boolean;
-        /** Whether to use simple value rendering */
-        simple?: boolean;
-        /** HTML id attribute for the select element */
-        htmlFor?: string;
-        /** Custom render function for dropdown options */
-        renderOption?: (option: SToolBarOption) => React.ReactNode;
-    };
+    select?: Omit<SSelectProps<SToolBarOption>, 'disabled' | 'onBlur' | 'onChange' | 'onFocus' | 'optionLabel' | 'options' | 'optionValue' | 'placeholder' | 'ref' | 'searchable' | 'searchPlaceholder' | 'value'>;
     /** Extra props for the native `<input type="file">` element used in `image` inputs */
     image?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'ref' | 'type' | 'multiple' | 'onChange' | 'disabled' | 'style'>;
 }
@@ -111,26 +101,45 @@ export interface SToolBarInputControlProps {
     /** Current value of the input */
     value: SToolBarValue;
     /** Callback when the value changes */
-    onChange: (value: SToolBarValue) => void;
+    onChange: (event: SToolBarChangeEvent, value: SToolBarValue, file?: File) => void;
     /** Callback when the input gains focus */
-    onFocus: () => void;
+    onFocus: (event: SToolBarChangeEvent) => void;
     /** Callback when the input loses focus */
-    onBlur: () => void;
+    onBlur: (event: SToolBarChangeEvent) => void;
     /** Whether the input is disabled */
     disabled?: boolean;
 }
 /**
  * Props interface for SToolBar component
  */
-export interface SToolBarProps {
+export type SToolBarOwnerState = SToolBarProps & {
+    position: 'bottom' | 'top';
+    processing: boolean;
+    relative: boolean;
+    uploading: boolean;
+};
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SToolBarOwnerState>;
+export interface SToolBarSlots {
+    dialog?: React.ElementType;
+    dialogContent?: React.ElementType;
+    dialogTitle?: React.ElementType;
+    toolbar?: React.ElementType;
+}
+export interface SToolBarSlotProps {
+    dialog?: OwnerStateSlotProps<Omit<DialogProps, 'children' | 'open'>>;
+    dialogContent?: OwnerStateSlotProps<DialogContentProps>;
+    dialogTitle?: OwnerStateSlotProps<DialogTitleProps>;
+    toolbar?: OwnerStateSlotProps<BoxProps>;
+}
+export interface SToolBarProps extends Omit<BoxProps, 'children' | 'component' | 'onReset'> {
     /** Configuration for input fields */
     inputs?: SToolBarInput[];
     /** Callback when process button is clicked */
-    onProcess?: () => void;
+    onProcess?: React.MouseEventHandler<HTMLButtonElement>;
     /** Callback when reset button is clicked */
-    onReset?: () => void;
+    onReset?: React.MouseEventHandler<HTMLButtonElement>;
     /** Callback when download button is clicked */
-    onDownload?: () => void;
+    onDownload?: React.MouseEventHandler<HTMLButtonElement>;
     /** Whether the toolbar is in processing state */
     processing?: boolean;
     /** Whether the toolbar is in uploading state */
@@ -138,9 +147,9 @@ export interface SToolBarProps {
     /** Input values controlled externally */
     inputValues?: Record<string, SToolBarValue>;
     /** Callback when input values change */
-    onInputChange?: (key: string, value: SToolBarValue, file?: File) => void;
+    onInputChange?: (event: SToolBarChangeEvent, key: string, value: SToolBarValue, file?: File) => void;
     /** Custom action buttons between inputs and standard actions */
-    customActionButtons?: React.ReactNode;
+    actions?: React.ReactNode;
     /** Hide the main process button */
     hideProcessButton?: boolean;
     /** Override to disable the process button */
@@ -163,8 +172,9 @@ export interface SToolBarProps {
     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>;
+    /** Components used for the toolbar and info-dialog slots. */
+    slots?: SToolBarSlots;
+    /** Props or owner-state callbacks for component slots. */
+    slotProps?: SToolBarSlotProps;
 }
+export {};

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

@@ -1,6 +1,7 @@
 import { SToolBarInput, SToolBarValue } from './types';
 export declare function isRequiredInputFilled(input: SToolBarInput, value: SToolBarValue): boolean;
 export declare function getImageInputFiles(value: SToolBarValue): Array<string | File>;
+export declare function getToolBarInputValue(input: SToolBarInput, inputValues: Record<string, SToolBarValue>): SToolBarValue;
 export declare function groupInputsByType(inputs: SToolBarInput[]): {
     imageInputs: SToolBarInput[];
     textareaInputs: SToolBarInput[];

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

@@ -1,22 +1,25 @@
 //#region lib/s-tool-bar/utils.ts
-function e(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 e(e, n) {
+	return e.required ? e.type === "textarea" ? typeof n == "string" && n.trim() !== "" : e.type === "number" || e.type === "slider" ? n != null : e.type === "select" ? n != null && n !== "" : e.type === "image" ? t(n).length > 0 : !0 : !0;
 }
 function t(e) {
-	return Array.isArray(e) ? e : e instanceof File || typeof e == "string" ? [e] : [];
+	return Array.isArray(e) ? e.filter((e) => e instanceof File || typeof e == "string" && e.trim() !== "") : e instanceof File || typeof e == "string" && e.trim() !== "" ? [e] : [];
 }
-function n(e) {
+function n(e, t) {
+	return Object.prototype.hasOwnProperty.call(t, e.key) ? t[e.key] : e.defaultValue ?? null;
+}
+function r(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 r(e, t) {
+function i(e, t) {
 	return e.length > 0 || t.length > 0;
 }
-function i(e, t, n, r) {
+function a(e, t, n, r) {
 	return e || !t || n || r;
 }
 //#endregion
-export { t as getImageInputFiles, n as groupInputsByType, r as hasVisibleInputSection, i as isProcessActionDisabled, e as isRequiredInputFilled };
+export { t as getImageInputFiles, n as getToolBarInputValue, r as groupInputsByType, i as hasVisibleInputSection, a as isProcessActionDisabled, e as isRequiredInputFilled };

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

@@ -1,2 +1,3 @@
 export { default, default as SToolItem } from './s-tool-item';
-export type { SToolItemProps } from './s-tool-item';
+export type { SToolItemOwnerState, SToolItemProps, SToolItemSlotProps, SToolItemSlots } from './s-tool-item';
+export type {} from '../theme/component-augmentation';

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

@@ -1,34 +1,39 @@
-import { SxProps, Theme } from '@mui/material/styles';
+import { BoxProps, TypographyProps } from '@mui/material';
+import { SNavItemButtonProps } from '../s-nav-item';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
 import * as React from 'react';
-/**
- * Props interface for SToolItem component
- */
-export interface SToolItemProps {
-    /** Tool label */
-    title: React.ReactNode;
-    /** Icon shown above the label when collapsed, or before the label when expanded */
-    icon?: React.ReactNode;
-    /** Active state. If true, highlighting is applied */
-    active?: boolean;
-    /** Renders the item as a horizontal navigation row */
-    expanded?: boolean;
-    /** Used for click selection */
-    onClick?: () => void;
-    /** Disables the item */
+export interface SToolItemOwnerState extends SToolItemProps {
+    disabled: boolean;
+    expanded: boolean;
+    selected: boolean;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SToolItemOwnerState>;
+export interface SToolItemSlots {
+    button?: React.ElementType;
+    primary?: React.ElementType;
+}
+export interface SToolItemSlotProps {
+    button?: OwnerStateSlotProps<SNavItemButtonProps>;
+    primary?: OwnerStateSlotProps<TypographyProps>;
+}
+/** Props for a compact tool navigation item. */
+export interface SToolItemProps extends Omit<BoxProps<'li'>, 'children' | 'component' | 'onClick'> {
+    /** Disables the action. */
     disabled?: boolean;
-    /** Collapsed item width */
-    width?: number | string;
-    /** Collapsed item minimum height */
-    minHeight?: number | string;
-    /** Additional SX overrides for the root item */
-    sx?: SxProps<Theme>;
-    /** Additional SX overrides for the expanded inner item */
-    innerSx?: SxProps<Theme>;
-    /** Additional SX overrides for the title Typography */
-    titleSx?: SxProps<Theme>;
+    /** Renders the tool as an expanded navigation row. */
+    expanded?: boolean;
+    /** Tool icon. */
+    icon?: React.ReactNode;
+    /** Called when the tool is activated. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Visible tool label. */
+    primary: React.ReactNode;
+    /** Selected navigation state. */
+    selected?: boolean;
+    /** Components used for internal structural slots. */
+    slots?: SToolItemSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SToolItemSlotProps;
 }
-export declare const SToolItem: {
-    ({ active, disabled, expanded, icon, innerSx, minHeight, onClick, sx, title, titleSx, width, }: Readonly<SToolItemProps>): React.JSX.Element;
-    displayName: string;
-};
+export declare const SToolItem: React.ForwardRefExoticComponent<Omit<SToolItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
 export default SToolItem;