@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/s-dialog-message/s-dialog-message.js

@@ -1,78 +1,85 @@
-import { t as e } from "../Typography-CZ_MYa-E.js";
-import { t } from "../Close-CJu3iF1p.js";
-import { useDialog as n } from "../hooks/use-dialog.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Button as o, Dialog as s, DialogActions as c, DialogContent as l, DialogTitle as u, IconButton as d, Stack as f } from "@mui/material";
+import { resolveOwnerStateSlotProps as e } from "../utils/slots.js";
+import { SDialog as t } from "../s-dialog/s-dialog.js";
+import { styled as n, useThemeProps as r } from "@mui/material/styles";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "@mui/utils/appendOwnerState";
+import c from "@mui/material/Button";
 //#region lib/s-dialog-message/s-dialog-message.tsx
-var p = ({ title: n, content: r, onClose: p = () => {}, onOk: m = () => {}, open: h = !1, maxWidth: g = "sm", showClose: _ = !0 }) => /* @__PURE__ */ a(s, {
-	fullWidth: !0,
-	maxWidth: g,
-	onClose: p,
-	open: h,
-	children: [
-		n && /* @__PURE__ */ i(u, { children: /* @__PURE__ */ a(f, {
-			direction: "row",
-			spacing: 3,
-			sx: {
-				alignItems: "center",
-				justifyContent: "space-between"
-			},
-			children: [typeof n == "string" ? /* @__PURE__ */ i(e, {
-				variant: "h5",
-				sx: { textTransform: "capitalize" },
-				children: n
-			}) : /* @__PURE__ */ i("div", { children: n }), _ && /* @__PURE__ */ i(d, {
-				onClick: p,
-				children: /* @__PURE__ */ i(t, {})
-			})]
-		}) }),
-		r && /* @__PURE__ */ i(l, { children: typeof r == "string" ? /* @__PURE__ */ i(e, {
-			variant: "body1",
-			children: r
-		}) : r }),
-		/* @__PURE__ */ i(c, { children: /* @__PURE__ */ i(o, {
-			onClick: m,
-			children: "Ok"
-		}) })
-	]
+var l = n(t, {
+	name: "SDialogMessage",
+	slot: "Root"
+})({});
+function u(e, t) {
+	return (n) => {
+		e?.(n), n.defaultPrevented || t(n);
+	};
+}
+function d(e) {
+	return "defaultPrevented" in e && e.defaultPrevented === !0;
+}
+var f = i.forwardRef(function(t, n) {
+	let i = r({
+		props: t,
+		name: "SDialogMessage"
+	}), { children: o, okText: d = "OK", onCloseButtonClick: f, onOk: p, showCloseButton: m, slotProps: h, slots: g, ..._ } = i, { okButton: v = c, ...y } = g ?? {}, { okButton: b, ...x } = h ?? {}, S = m ?? f != null, C = {
+		...i,
+		okText: d,
+		showCloseButton: S
+	}, w = e(b, C), T = {
+		...w,
+		onClick: u(w?.onClick, p)
+	}, E = s(g?.okButton, T, C);
+	return /* @__PURE__ */ a(l, {
+		..._,
+		ownerState: C,
+		ref: n,
+		actions: /* @__PURE__ */ a(v, {
+			...E,
+			children: d
+		}),
+		onCloseButtonClick: (e) => {
+			e.defaultPrevented || f?.(e);
+		},
+		showCloseButton: S,
+		slots: y,
+		slotProps: x,
+		children: o
+	});
 });
-p.displayName = "SDialogMessage";
-var m = r.createContext(null), h = ({ children: e }) => {
-	let t = n(), [o, s] = r.useState({
-		title: "",
-		content: "",
-		onOk: t.handleClose
-	}), c = r.useCallback((e) => {
-		let { title: n, content: r, onOk: i = t.handleClose } = e;
-		s({
-			title: n,
-			content: r,
-			onOk: i
-		}), t.handleOpen();
-	}, [t]), l = r.useMemo(() => ({
-		handleOpen: c,
-		handleClose: t.handleClose,
-		open: t.open
+f.displayName = "SDialogMessage";
+var p = i.createContext(null);
+function m({ children: e }) {
+	let [t, n] = i.useState(null), r = t != null, s = i.useCallback(() => n(null), []), c = i.useCallback((e) => n(e), []), l = i.useMemo(() => ({
+		closeMessage: s,
+		open: r,
+		showMessage: c
 	}), [
-		t.handleClose,
-		t.open,
+		s,
+		r,
 		c
 	]);
-	return /* @__PURE__ */ a(m.Provider, {
+	return /* @__PURE__ */ o(p.Provider, {
 		value: l,
-		children: [/* @__PURE__ */ i(p, {
-			open: t.open,
-			title: o.title,
-			content: o.content,
-			onClose: t.handleClose,
-			onOk: o.onOk
+		children: [t && /* @__PURE__ */ a(f, {
+			...t,
+			open: !0,
+			onClose: (e, n) => {
+				t.onClose?.(e, n), d(e) || s();
+			},
+			onCloseButtonClick: (e) => {
+				t.onCloseButtonClick?.(e), e.defaultPrevented || s();
+			},
+			onOk: (e) => {
+				t.onOk?.(e), e.defaultPrevented || s();
+			}
 		}), e]
 	});
-}, g = () => {
-	let e = r.useContext(m);
+}
+function h() {
+	let e = i.useContext(p);
 	if (!e) throw Error("useDialogMessage must be used within a DialogMessageProvider");
 	return e;
-};
+}
 //#endregion
-export { h as DialogMessageProvider, p as SDialogMessage, p as default, g as useDialogMessage };
+export { m as DialogMessageProvider, f as SDialogMessage, f as default, h as useDialogMessage };

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

@@ -1,2 +1,3 @@
 export { default, default as SEmpty } from './s-empty';
 export type { SEmptyProps } from './s-empty';
+export type {} from '../theme/component-augmentation';

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

@@ -1,13 +1,8 @@
+import { TypographyProps } from '@mui/material/Typography';
 import * as React from 'react';
-/**
- * Props interface for SEmpty component
- */
-export interface SEmptyProps {
-    /** Custom text to display (defaults to 'No data available.') */
-    title?: string;
+export interface SEmptyProps extends Omit<TypographyProps, 'component'> {
+    /** Empty-state content. */
+    children?: React.ReactNode;
 }
-export declare const SEmpty: {
-    ({ title }: SEmptyProps): React.JSX.Element;
-    displayName: string;
-};
+export declare const SEmpty: React.ForwardRefExoticComponent<Omit<SEmptyProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SEmpty;

package/dist/s-empty/s-empty.js

@@ -1,12 +1,30 @@
-import "react";
-import { jsx as e } from "react/jsx-runtime";
-import { Typography as t } from "@mui/material";
+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 } from "react/jsx-runtime";
+import a from "@mui/material/Typography";
 //#region lib/s-empty/s-empty.tsx
-var n = ({ title: n }) => /* @__PURE__ */ e(t, {
-	variant: "body1",
-	sx: { my: 3 },
-	children: n ?? "No data available."
+var o = t(a, {
+	name: "SEmpty",
+	slot: "Root"
+})({}), s = r.forwardRef(function(t, r) {
+	let a = n({
+		props: t,
+		name: "SEmpty"
+	}), { children: s = "No data available.", sx: c, variant: l = "body1", ...u } = a, d = {
+		...a,
+		children: s,
+		variant: l
+	};
+	return /* @__PURE__ */ i(o, {
+		...u,
+		ownerState: d,
+		ref: r,
+		variant: l,
+		sx: [{ my: 3 }, ...e(c)],
+		children: s
+	});
 });
-n.displayName = "SEmpty";
+s.displayName = "SEmpty";
 //#endregion
-export { n as SEmpty, n as default };
+export { s as SEmpty, s as default };

package/dist/s-file-dropzone/index.d.ts

@@ -1,2 +1,4 @@
 export { default, default as SFileDropzone } from './s-file-dropzone';
-export type { CustomFile, SFileDropzoneProps } from './s-file-dropzone';
+export type { CustomFile, SFileDropzoneOwnerState, SFileDropzoneProps, SFileDropzoneSlotProps, SFileDropzoneSlots, } from './s-file-dropzone';
+export type {} from '../theme/component-augmentation';
+export type {} from '../theme/optional-component-augmentations/s-file-dropzone';

package/dist/s-file-dropzone/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-file-dropzone-C4_hCsN8.js";
+import { SFileDropzone as e } from "./s-file-dropzone.js";
 export { e as SFileDropzone, e as default };

package/dist/s-file-dropzone/s-file-dropzone.d.ts

@@ -1,34 +1,57 @@
-import { DropzoneOptions, FileWithPath } from 'react-dropzone';
+import { BoxProps } from '@mui/material/Box';
+import { ButtonProps } from '@mui/material/Button';
+import { StackProps } from '@mui/material/Stack';
+import { DropEvent, DropzoneOptions, FileWithPath } from 'react-dropzone';
+import { SFormProps, SFormSlotProps, SFormSlots } from '../s-form';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
 import * as React from 'react';
-/**
- * Custom file type that extends standard File objects with additional flexibility
- * Supports regular File objects, files with path information, or minimal file objects
- * with just name and size for display purposes.
- */
 export type CustomFile = File | FileWithPath | {
-    /** File name with extension */
     name: string;
-    /** File size in bytes */
     size: number;
 };
-/** Props interface for SFileDropzone component */
-export interface SFileDropzoneProps extends DropzoneOptions {
-    /** Additional hint text displayed below the main upload message */
-    hint?: string;
-    /** Array of files currently selected/uploaded */
+export interface SFileDropzoneOwnerState {
+    disabled: boolean;
+    dragActive: boolean;
+    error: boolean;
+    hasFiles: boolean;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SFileDropzoneOwnerState>;
+export interface SFileDropzoneSlots extends SFormSlots {
+    dropzone?: React.ElementType;
+    fileList?: React.ElementType;
+}
+export interface SFileDropzoneSlotProps extends SFormSlotProps {
+    dropzone?: OwnerStateSlotProps<BoxProps>;
+    fileList?: OwnerStateSlotProps<StackProps>;
+    input?: React.InputHTMLAttributes<HTMLInputElement>;
+    removeAllButton?: ButtonProps;
+}
+type SFileDropzoneBaseProps = Omit<SFormProps, 'children' | 'ref' | 'slotProps' | 'slots' | keyof DropzoneOptions> & DropzoneOptions;
+export interface SFileDropzoneProps extends SFileDropzoneBaseProps {
+    /** Initial files displayed when the file list is uncontrolled. */
+    defaultFiles?: CustomFile[];
+    /** Files currently displayed by the controlled file list. */
     files?: CustomFile[];
-    /** Callback when a single file is removed */
-    onRemove?: (file: CustomFile) => void;
-    /** Callback when all files are removed */
-    onRemoveAll?: () => void;
-    /** Label for the form field */
-    label?: string | React.ReactNode;
-    /** Error message to display */
-    error?: string;
-    /** Whether the field is required */
-    required?: boolean;
-    /** Whether to show the 'Remove all' button */
-    isShowBtnRemoveAll?: boolean;
+    /** Ref forwarded to the native file input. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** Called whenever the displayed files change. */
+    onFilesChange?: (event: DropEvent | React.MouseEvent<HTMLButtonElement>, files: CustomFile[]) => void;
+    /** Called when a file remove button is activated. */
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>, file: CustomFile) => void;
+    /** Called when the remove-all button is activated. */
+    onRemoveAll?: ButtonProps['onClick'];
+    /** Accessible prefix used by individual remove buttons. */
+    removeText?: string;
+    /** Content of the remove-all button. */
+    removeAllText?: React.ReactNode;
+    /** Whether to show the remove-all action. */
+    showRemoveAll?: boolean;
+    /** Components used for form and file-list slots. */
+    slots?: SFileDropzoneSlots;
+    /** Props or owner-state callbacks for form and file-list slots. */
+    slotProps?: SFileDropzoneSlotProps;
+    /** Upload instruction rendered in the dropzone. */
+    uploadText?: React.ReactNode;
 }
-export declare const SFileDropzone: React.ForwardRefExoticComponent<SFileDropzoneProps & React.RefAttributes<HTMLInputElement>>;
+export declare const SFileDropzone: React.ForwardRefExoticComponent<SFileDropzoneProps & React.RefAttributes<HTMLDivElement>>;
 export default SFileDropzone;

package/dist/s-file-dropzone/s-file-dropzone.js

@@ -1,2 +1,219 @@
-import { t as e } from "../s-file-dropzone-C4_hCsN8.js";
-export { e as SFileDropzone, e as default };
+import { t as e } from "../utils-CMeAWSRO.js";
+import { toSxArray as t } from "../utils/sx.js";
+import { SForm as n } from "../s-form/s-form.js";
+import { SFileIcon as ee } from "../s-file-icon/s-file-icon.js";
+import { styled as r, useThemeProps as te } from "@mui/material/styles";
+import i from "@mui/material/IconButton";
+import * as a from "react";
+import { Fragment as ne, jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "@mui/material/Typography";
+import { useForkRef as re } from "@mui/material/utils";
+import l from "@mui/utils/appendOwnerState";
+import ie from "@mui/material/Tooltip";
+import u from "@mui/material/Stack";
+import d from "@mui/material/Box";
+import f from "@mui/icons-material/CloseOutlined";
+import p from "@mui/icons-material/CloudUploadOutlined";
+import m from "@mui/material/Avatar";
+import ae from "@mui/material/Button";
+import { useDropzone as oe } from "react-dropzone";
+//#region lib/s-file-dropzone/s-file-dropzone.tsx
+var se = r(n, {
+	name: "SFileDropzone",
+	slot: "Root"
+})({}), ce = "Click to upload or drag and drop your files here";
+function le(e) {
+	return Object.fromEntries(Object.entries(e).filter(([, e]) => e !== void 0));
+}
+function h(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var g = a.forwardRef(function(n, r) {
+	let { accept: g, autoFocus: ue, defaultFiles: de = [], disabled: _ = !1, error: v = !1, files: y, getFilesFromEvent: b, inputRef: x, maxFiles: S, maxSize: C, minSize: w, multiple: T, noClick: E, noDrag: D, noDragEventsBubbling: O, noKeyboard: k, onDragEnter: A, onDragLeave: j, onDragOver: M, onDrop: N, onDropAccepted: P, onDropRejected: F, onError: I, onFileDialogCancel: L, onFileDialogOpen: R, onFilesChange: z, onRemove: B, onRemoveAll: V, preventDropOnDocument: H, removeAllText: fe = "Remove all", removeText: U = "Remove", showRemoveAll: pe = !1, slotProps: me, slots: W, uploadText: he = ce, useFsAccessApi: ge, validator: _e, ...ve } = te({
+		props: n,
+		name: "SFileDropzone"
+	}), [ye, be] = a.useState(de), G = y !== void 0, K = y ?? ye, q = a.useCallback((e, t) => {
+		G || be(t), z?.(e, t);
+	}, [G, z]), { getInputProps: xe, getRootProps: Se, inputRef: Ce, isDragActive: J } = oe(le({
+		accept: g,
+		autoFocus: ue,
+		disabled: _,
+		getFilesFromEvent: b,
+		maxFiles: S,
+		maxSize: C,
+		minSize: w,
+		multiple: T,
+		noClick: E,
+		noDrag: D,
+		noDragEventsBubbling: O,
+		noKeyboard: k,
+		onDragEnter: A,
+		onDragLeave: j,
+		onDragOver: M,
+		onDrop: a.useCallback((e, t, n) => {
+			e.length > 0 && q(n, T === !1 || S === 1 ? e : [...K, ...e].slice(0, S && S > 0 ? S : void 0)), N?.(e, t, n);
+		}, [
+			K,
+			S,
+			T,
+			N,
+			q
+		]),
+		onDropAccepted: P,
+		onDropRejected: F,
+		onError: I,
+		onFileDialogCancel: L,
+		onFileDialogOpen: R,
+		preventDropOnDocument: H,
+		useFsAccessApi: ge,
+		validator: _e
+	})), we = re(x, Ce), Y = {
+		disabled: _,
+		dragActive: J,
+		error: v,
+		hasFiles: K.length > 0
+	}, Te = W?.dropzone ?? d, Ee = W?.fileList ?? u, { dropzone: De, fileList: Oe, input: X, removeAllButton: ke, ...Z } = me ?? {}, { onClick: Ae, ...Q } = ke ?? {}, je = h(De, Y), Me = h(Oe, Y), Ne = l(W?.dropzone, je ?? {}, Y), Pe = l(W?.fileList, Me ?? {}, Y), { sx: Fe, ...$ } = Ne, { sx: Ie, ...Le } = Pe;
+	return /* @__PURE__ */ s(ne, { children: [/* @__PURE__ */ o(se, {
+		...ve,
+		ref: r,
+		disabled: _,
+		error: v,
+		ownerState: Y,
+		slots: W,
+		slotProps: Z,
+		children: /* @__PURE__ */ s(Te, {
+			...Se({
+				...$,
+				"aria-disabled": _ || void 0,
+				"aria-invalid": v || void 0,
+				role: $.role ?? "button"
+			}),
+			sx: [(e) => {
+				let t = (e.vars ?? e).palette, n = v ? t.error : t.primary;
+				return {
+					alignItems: "center",
+					backgroundColor: _ ? t.background.default : void 0,
+					border: "1px dashed",
+					borderColor: _ ? t.divider : v ? t.error.main : t.divider,
+					borderRadius: 1,
+					cursor: _ ? "default" : "pointer",
+					display: "flex",
+					flexWrap: "wrap",
+					justifyContent: "center",
+					outline: "none",
+					p: 4,
+					transition: "border 120ms ease-in, background-color 120ms ease-in, outline 120ms ease-in",
+					...J ? {
+						backgroundColor: t.action.selected,
+						opacity: .5
+					} : {},
+					"&:hover": !_ && !J ? {
+						backgroundColor: t.action.hover,
+						borderColor: v ? t.error.main : t.grey[500]
+					} : void 0,
+					"&:focus-within": _ ? void 0 : {
+						borderColor: v ? t.error.main : t.primary[400],
+						outline: `3px solid rgba(${n.mainChannel} / 0.5)`
+					}
+				};
+			}, ...t(Fe)],
+			children: [/* @__PURE__ */ o("input", {
+				...xe(X),
+				ref: we,
+				disabled: _ || !!X?.disabled
+			}), /* @__PURE__ */ s(u, {
+				direction: "row",
+				spacing: 1,
+				sx: { alignItems: "center" },
+				children: [/* @__PURE__ */ o(m, {
+					sx: {
+						backgroundColor: "transparent",
+						border: "1px dashed",
+						borderColor: "divider",
+						color: _ ? "text.disabled" : "text.secondary"
+					},
+					children: /* @__PURE__ */ o(p, { fontSize: "small" })
+				}), /* @__PURE__ */ o(c, {
+					variant: "body2",
+					sx: { color: _ ? "text.disabled" : "text.secondary" },
+					children: he
+				})]
+			})]
+		})
+	}), K.length > 0 && /* @__PURE__ */ s(Ee, {
+		spacing: 1,
+		...Le,
+		sx: [{
+			color: _ ? "text.disabled" : void 0,
+			mt: 1
+		}, ...t(Ie)],
+		children: [/* @__PURE__ */ o(u, {
+			component: "ul",
+			spacing: 1,
+			sx: {
+				listStyle: "none",
+				m: 0,
+				p: 0
+			},
+			children: K.map((t, n) => /* @__PURE__ */ s(u, {
+				component: "li",
+				direction: "row",
+				spacing: 1,
+				sx: {
+					alignItems: "center",
+					border: "1px solid",
+					borderColor: "divider",
+					borderRadius: 1,
+					flex: "1 1 auto",
+					p: 1
+				},
+				children: [
+					/* @__PURE__ */ o(ee, {
+						extension: t.name.split(".").pop(),
+						sx: (e) => ({ opacity: _ ? (e.vars ?? e).palette.action.disabledOpacity : 1 })
+					}),
+					/* @__PURE__ */ s(d, {
+						sx: { flex: "1 1 auto" },
+						children: [/* @__PURE__ */ o(c, {
+							variant: "body2",
+							children: t.name
+						}), /* @__PURE__ */ o(c, {
+							variant: "caption",
+							children: e(t.size)
+						})]
+					}),
+					/* @__PURE__ */ o(ie, {
+						title: U,
+						children: /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(i, {
+							"aria-label": `${U} ${t.name}`,
+							disabled: _,
+							onClick: (e) => {
+								_ || (B?.(e, t), e.defaultPrevented || q(e, K.filter((e, t) => t !== n)));
+							},
+							children: /* @__PURE__ */ o(f, {})
+						}) })
+					})
+				]
+			}, `${t.name}-${t.size}-${n}`))
+		}), pe && /* @__PURE__ */ o(u, {
+			direction: "row",
+			sx: {
+				alignItems: "center",
+				justifyContent: "flex-end"
+			},
+			children: /* @__PURE__ */ o(ae, {
+				type: "button",
+				variant: "text",
+				...Q,
+				disabled: _ || !!Q.disabled,
+				onClick: (e) => {
+					_ || (Ae?.(e), !e.defaultPrevented && (V?.(e), e.defaultPrevented || q(e, [])));
+				},
+				children: fe
+			})
+		})]
+	})] });
+});
+g.displayName = "SFileDropzone";
+//#endregion
+export { g as SFileDropzone, g as default };

package/dist/s-file-icon/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SFileIcon } from './s-file-icon';
 export type { SFileIconProps } from './s-file-icon';
+export type {} from '../theme/component-augmentation';

package/dist/s-file-icon/s-file-icon.d.ts

@@ -1,13 +1,11 @@
+import { BoxProps } from '@mui/material/Box';
 import * as React from 'react';
 /**
  * Props for the SFileIcon component
  */
-export interface SFileIconProps {
+export interface SFileIconProps extends Omit<BoxProps, 'children' | 'component'> {
     /** File extension (without dot) to determine which icon to display */
     extension?: string;
 }
-export declare const SFileIcon: {
-    ({ extension }: SFileIconProps): React.JSX.Element;
-    displayName: string;
-};
+export declare const SFileIcon: React.ForwardRefExoticComponent<Omit<SFileIconProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SFileIcon;