@solostylist/ui-kit 1.0.225 → 1.0.227

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

@@ -0,0 +1,139 @@
+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";
+//#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, {
+	variant: "subtitle2",
+	sx: {
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		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, {
+		sx: {
+			display: "flex",
+			alignItems: "center",
+			height: 36
+		},
+		children: [/* @__PURE__ */ r(o, {
+			value: t ?? e.defaultValue ?? e.min ?? 0,
+			onChange: (e, t) => n(t),
+			onMouseDown: s,
+			onMouseUp: l,
+			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",
+			sx: {
+				minWidth: 60,
+				textAlign: "center"
+			},
+			children: t ?? e.defaultValue ?? e.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
+		});
+		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({
+	value: t,
+	onChange: i,
+	onFocus: o,
+	onBlur: s,
+	disabled: n
+}) }) : /* @__PURE__ */ r(h, {
+	input: e,
+	value: t,
+	onChange: i,
+	onFocus: o,
+	onBlur: s,
+	disabled: n
+}));
+//#endregion
+export { g as ToolbarInputItem };

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

@@ -0,0 +1,170 @@
+import { default as React } from 'react';
+import { SelectProps, SliderProps, TextFieldProps } from '@mui/material';
+import { SxProps, Theme } from '@mui/material/styles';
+/**
+ * Possible value types for SToolBar inputs
+ */
+export type SToolBarValue = string | number | File | (string | File)[] | null;
+/**
+ * Base type constraint for select options
+ */
+export type SToolBarOption = string | number | Record<string, unknown>;
+/**
+ * Supported input types for SToolBar
+ */
+export type SToolBarInputType = 'textarea' | 'slider' | 'image' | 'number' | 'select';
+/**
+ * Configuration for individual toolbar input fields
+ */
+export interface SToolBarInput {
+    /** Unique identifier for the input */
+    key: string;
+    /** Display label for the input */
+    label: string;
+    /** Input type */
+    type: SToolBarInputType;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Default value for the input */
+    defaultValue?: SToolBarValue;
+    /** Placeholder text (for textarea/number/select inputs) */
+    placeholder?: string;
+    /** Minimum value (for slider/number inputs) */
+    min?: number;
+    /** Maximum value (for slider/number inputs) */
+    max?: number;
+    /** Step value (for slider/number inputs) */
+    step?: number;
+    /** Minimum rows for textarea */
+    minRows?: number;
+    /** Maximum rows for textarea */
+    maxRows?: number;
+    /** Allow multiple images (for image inputs) */
+    multiple?: boolean;
+    /** Maximum number of images (for image inputs with multiple=true) */
+    maxImages?: number;
+    /** Select options (for select inputs) */
+    options?: SToolBarOption[];
+    /** Key to extract label from option objects (for select inputs) */
+    optionLabel?: string;
+    /** Key to extract value from option objects (for select inputs) */
+    optionValue?: string;
+    /** Enable search functionality in select dropdown */
+    searchable?: boolean;
+    /** Placeholder for search input in select dropdown */
+    searchPlaceholder?: string;
+    /**
+     * Extra props forwarded to the underlying child component.
+     * Each key targets the matching input type:
+     * - `textarea` / `number` → MUI `TextField`
+     * - `slider`              → MUI `Slider`
+     * - `select`              → `SSelect`
+     * - `image`               → native `<input type="file">`
+     *
+     * Only the props relevant to the current `type` are used.
+     */
+    componentProps?: SToolBarComponentProps;
+    /** Custom renderer for the input */
+    renderInput?: (props: {
+        value: SToolBarValue;
+        onChange: (value: SToolBarValue) => void;
+        onFocus: () => void;
+        onBlur: () => void;
+        disabled?: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * Per-type overrides forwarded to the underlying child components.
+ * Omit props that are already managed by SToolBar to avoid conflicts.
+ */
+export interface SToolBarComponentProps {
+    /** 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'>;
+    /** 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;
+    };
+    /** Extra props for the native `<input type="file">` element used in `image` inputs */
+    image?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'ref' | 'type' | 'multiple' | 'onChange' | 'disabled' | 'style'>;
+}
+/**
+ * Props shared by the built-in input controls rendered inside SToolBar
+ */
+export interface SToolBarInputControlProps {
+    /** Input configuration */
+    input: SToolBarInput;
+    /** Current value of the input */
+    value: SToolBarValue;
+    /** Callback when the value changes */
+    onChange: (value: SToolBarValue) => void;
+    /** Callback when the input gains focus */
+    onFocus: () => void;
+    /** Callback when the input loses focus */
+    onBlur: () => void;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+}
+/**
+ * Props interface for SToolBar component
+ */
+export interface SToolBarProps {
+    /** Configuration for input fields */
+    inputs?: SToolBarInput[];
+    /** Callback when process button is clicked */
+    onProcess?: () => void;
+    /** Callback when reset button is clicked */
+    onReset?: () => void;
+    /** Callback when download button is clicked */
+    onDownload?: () => void;
+    /** Whether the toolbar is in processing state */
+    processing?: boolean;
+    /** Whether the toolbar is in uploading state */
+    uploading?: boolean;
+    /** Input values controlled externally */
+    inputValues?: Record<string, SToolBarValue>;
+    /** Callback when input values change */
+    onInputChange?: (key: string, value: SToolBarValue, file?: File) => void;
+    /** Custom action buttons between inputs and standard actions */
+    customActionButtons?: React.ReactNode;
+    /** Hide the main process button */
+    hideProcessButton?: boolean;
+    /** Override to disable the process button */
+    processButtonDisabled?: boolean;
+    /** Function to check if an input should be disabled */
+    getInputDisabled?: (inputKey: string) => boolean;
+    /** Tooltip for process button */
+    processTooltip?: string;
+    /** Tooltip for download button */
+    downloadTooltip?: string;
+    /** Tooltip for reset button */
+    resetTooltip?: string;
+    /** Tooltip for info button */
+    infoTooltip?: string;
+    /** Info dialog title */
+    infoTitle?: string;
+    /** Info dialog content */
+    infoContent?: React.ReactNode;
+    /** Position of the toolbar */
+    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>;
+}

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

@@ -0,0 +1,10 @@
+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 groupInputsByType(inputs: SToolBarInput[]): {
+    imageInputs: SToolBarInput[];
+    textareaInputs: SToolBarInput[];
+    paramInputs: SToolBarInput[];
+};
+export declare function hasVisibleInputSection(imageInputs: SToolBarInput[], paramInputs: SToolBarInput[]): boolean;
+export declare function isProcessActionDisabled(processButtonDisabled: boolean, areRequiredInputsFilled: boolean, uploading: boolean, processing: boolean): boolean;

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

@@ -0,0 +1,22 @@
+//#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 t(e) {
+	return Array.isArray(e) ? e : e instanceof File || typeof e == "string" ? [e] : [];
+}
+function n(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) {
+	return e.length > 0 || t.length > 0;
+}
+function i(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 };

package/dist/switch-BSg1TGWH.js

@@ -0,0 +1,62 @@
+import { t as e } from "./generateUtilityClasses-XrPHiTcM.js";
+//#region ../../node_modules/@mui/material/Switch/switchClasses.mjs
+var t = e("MuiSwitch", [
+	"root",
+	"edgeStart",
+	"edgeEnd",
+	"switchBase",
+	"colorPrimary",
+	"colorSecondary",
+	"sizeSmall",
+	"sizeMedium",
+	"checked",
+	"disabled",
+	"input",
+	"thumb",
+	"track"
+]), n = {
+	defaultProps: { disableRipple: !0 },
+	styleOverrides: { root: ({ theme: e }) => {
+		let n = (e.vars ?? e).palette;
+		return {
+			[`& .${t.track}`]: {
+				backgroundColor: n.grey[400],
+				opacity: 1
+			},
+			[`& .${t.switchBase}`]: {
+				color: n.common.white,
+				[`&.${t.checked}`]: {
+					color: n.primary.main,
+					"&:hover": { color: n.primary.dark },
+					[`& + .${t.track}`]: {
+						backgroundColor: n.primary.main,
+						opacity: .5
+					}
+				},
+				[`&.Mui-focusVisible .${t.thumb}`]: {
+					outline: `3px solid rgba(${n.primary.mainChannel} / 0.5)`,
+					outlineOffset: "2px"
+				},
+				[`&.${t.disabled}, &.${t.checked}.${t.disabled}`]: {
+					color: n.grey[100],
+					[`& + .${t.track}`]: {
+						backgroundColor: n.grey[300],
+						opacity: 1
+					}
+				}
+			},
+			...e.applyStyles("dark", {
+				[`& .${t.track}`]: { backgroundColor: n.grey[600] },
+				[`& .${t.switchBase}`]: {
+					color: n.grey[300],
+					[`&.${t.disabled}, &.${t.checked}.${t.disabled}`]: {
+						color: n.grey[600],
+						[`& + .${t.track}`]: { backgroundColor: n.grey[700] }
+					}
+				}
+			})
+		};
+	} }
+};
+//#endregion
+export { n as t };

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

@@ -1,8 +1,8 @@
-import { s as e } from "../../theme-primitives-D2vHHGiX.js";
+import { c as e } from "../../theme-primitives-CiQYd9Cc.js";
 //#region lib/theme/components/accordion-summary.tsx
 var t = { styleOverrides: { root: ({ theme: t }) => ({
 	border: "none",
-	borderRadius: 8,
+	borderRadius: (t.vars ?? t).shape.borderRadius,
 	"&:hover": { backgroundColor: e[50] },
 	"&:focus-visible": { backgroundColor: "transparent" },
 	...t.applyStyles("dark", { "&:hover": { backgroundColor: e[800] } })

package/dist/theme/components/accordion.js

@@ -8,7 +8,7 @@ var e = { styleOverrides: { root: ({ theme: e, ownerState: t }) => ({
 	borderRadius: (e.vars ?? e).shape.borderRadius,
 	":before": { backgroundColor: "transparent" },
 	...t.disableGutters ? {
-		borderRadius: "none",
+		borderRadius: e.radius.none,
 		"&:not(:last-of-type)": { borderBottom: "none" },
 		"&:first-of-type": {
 			borderTopLeftRadius: (e.vars ?? e).shape.borderRadius,

package/dist/theme/components/alert.d.ts

@@ -6,7 +6,7 @@ export declare const MuiAlert: {
         } & {
             theme: Theme;
         }) => {
-            borderRadius: number;
+            borderRadius: string | number;
             '& .MuiAlert-action .MuiIconButton-root': {
                 fontSize: string;
                 '& svg': {

package/dist/theme/components/alert.js

@@ -13,7 +13,7 @@ var e = (e, t) => {
 		...e.applyStyles("dark", { backgroundColor: n[700] })
 	};
 }, t = { styleOverrides: { root: ({ theme: t }) => ({
-	borderRadius: 10,
+	borderRadius: (t.vars ?? t).shape.borderRadius,
 	"& .MuiAlert-action .MuiIconButton-root": {
 		fontSize: "1.25rem",
 		"& svg": { fontSize: "1.25rem" }

package/dist/theme/components/autocomplete.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../autocomplete-qLj7AqcP.js";
+import { t as e } from "../../autocomplete-Dd4zjpaF.js";
 export { e as MuiAutocomplete };

package/dist/theme/components/avatar.d.ts

@@ -1,9 +1,18 @@
+import { Theme } from '../types';
 export declare const MuiAvatar: {
     defaultProps: {
         children: import("react/jsx-runtime").JSX.Element;
     };
     styleOverrides: {
-        rounded: {
+        rounded: ({ theme }: import('@mui/material').AvatarOwnProps & import('@mui/material').AvatarSlotsAndSlotProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "style" | "classes" | "children" | "sx" | "variant" | "slots" | "slotProps" | "alt" | "src" | "sizes" | "srcSet"> & {
+            component?: React.ElementType | undefined;
+        } & Record<string, unknown> & {
+            ownerState: import('@mui/material').AvatarOwnProps & import('@mui/material').AvatarSlotsAndSlotProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "style" | "classes" | "children" | "sx" | "variant" | "slots" | "slotProps" | "alt" | "src" | "sizes" | "srcSet"> & {
+                component?: React.ElementType | undefined;
+            } & Record<string, unknown>;
+        } & {
+            theme: Theme;
+        }) => {
             borderRadius: number;
         };
     };

package/dist/theme/components/avatar.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../avatar-BuMhUthq.js";
+import { t as e } from "../../avatar-DFQ5F7pY.js";
 export { e as MuiAvatar };

package/dist/theme/components/card.js

@@ -1,21 +1,21 @@
 import { i as e } from "../../createTheme-Bnw5w28O.js";
-import { d as t, s as n } from "../../theme-primitives-D2vHHGiX.js";
+import { c as t, f as n } from "../../theme-primitives-CiQYd9Cc.js";
 //#region lib/theme/components/card.tsx
 var r = { styleOverrides: { root: ({ theme: r }) => ({
 	gap: 16,
 	transition: "all 100ms ease",
-	backgroundColor: t[100],
+	backgroundColor: n[100],
 	borderRadius: (r.vars ?? r).shape.borderRadius,
 	border: `1px solid ${(r.vars ?? r).palette.divider}`,
 	boxShadow: "none",
-	...r.applyStyles("dark", { backgroundColor: n[800] }),
+	...r.applyStyles("dark", { backgroundColor: t[800] }),
 	variants: [{
 		props: { variant: "outlined" },
 		style: {
 			border: `1px solid ${(r.vars ?? r).palette.divider}`,
 			boxShadow: "none",
 			background: "rgb(255, 255, 255)",
-			...r.applyStyles("dark", { background: e(n[900], .4) })
+			...r.applyStyles("dark", { background: e(t[900], .4) })
 		}
 	}]
 }) } };

package/dist/theme/components/checkbox.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../checkbox-B95Vlykq.js";
+import { t as e } from "../../checkbox-B5GlJYcB.js";
 export { e as MuiCheckbox };

package/dist/theme/components/chip.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../Close-Bj2HYB9Q.js";
+import { t as e } from "../../Close-CJu3iF1p.js";
 import { jsx as t } from "react/jsx-runtime";
 import { chipClasses as n } from "@mui/material";
 //#region lib/theme/components/chip.tsx
@@ -10,9 +10,13 @@ var r = (e, t) => {
 	return {
 		border: "none",
 		backgroundColor: i[800],
+		color: i[50],
 		[`& .${n.label}`]: { color: i[50] },
 		[`& .${n.icon}`]: { color: i[300] },
-		...e.applyStyles("dark", { [`& .${n.label}`]: { color: i[200] } })
+		...e.applyStyles("dark", {
+			color: i[200],
+			[`& .${n.label}`]: { color: i[200] }
+		})
 	};
 }, a = (e, t) => {
 	let i = r(e, t);
@@ -22,13 +26,13 @@ var r = (e, t) => {
 		color: i[800],
 		[`& .${n.label}`]: { color: i[800] },
 		[`& .${n.icon}`]: { color: i[800] },
-		[`& .${n.deleteIcon}`]: { color: i[800] },
+		[`& .${n.deleteIcon}`]: { color: "inherit" },
 		...e.applyStyles("dark", {
 			borderColor: i[400],
 			color: i[300],
 			[`& .${n.label}`]: { color: i[300] },
 			[`& .${n.icon}`]: { color: i[300] },
-			[`& .${n.deleteIcon}`]: { color: i[300] }
+			[`& .${n.deleteIcon}`]: { color: "inherit" }
 		})
 	};
 }, o = {
@@ -39,7 +43,7 @@ var r = (e, t) => {
 	},
 	styleOverrides: { root: ({ theme: e }) => ({
 		border: "1px solid",
-		borderRadius: "999px",
+		borderRadius: e.radius.full,
 		[`& .${n.label}`]: { fontWeight: 500 },
 		[`&.${n.sizeSmall}`]: { height: 28 },
 		[`&.${n.sizeSmall} .${n.label}`]: { paddingInline: 12 },
@@ -52,8 +56,15 @@ var r = (e, t) => {
 			marginLeft: 8
 		},
 		[`& .${n.deleteIcon}`]: {
+			color: "inherit",
+			display: "block",
+			flexShrink: 0,
+			fontSize: "0.875rem",
+			lineHeight: 0,
 			marginLeft: -8,
-			marginRight: 8
+			marginRight: 8,
+			transform: "translateY(1px)",
+			"&:hover, &:active": { color: "inherit" }
 		},
 		variants: [
 			{