@solostylist/ui-kit 1.0.230 → 2.0.0

package/dist/s-dialog-message/s-dialog-message.d.ts

@@ -1,59 +1,42 @@
-import { Breakpoint } from '@mui/material';
+import { ButtonProps } from '@mui/material/Button';
+import { SDialogProps, SDialogSlotProps, SDialogSlots } from '../s-dialog';
+import { OwnerStateSlotProps } from '../utils/slots';
 import * as React from 'react';
-/**
- * Props interface for SDialogMessage component
- */
-export interface SDialogMessageProps {
-    /** Dialog title - can be string or React element */
-    title?: string | React.ReactNode;
-    /** Dialog content - can be string (auto-wrapped in Typography) or React element */
-    content?: string | React.ReactNode;
-    /** Callback fired when dialog should close */
-    onClose?: () => void;
-    /** Callback fired when user clicks OK button */
-    onOk?: () => void;
-    /** Whether the dialog is open */
-    open?: boolean;
-    /** Maximum width constraint (Material-UI breakpoint) */
-    maxWidth?: Breakpoint;
-    /** Whether to show the close button in the title bar */
-    showClose?: boolean;
+export interface SDialogMessageSlots extends SDialogSlots {
+    okButton?: React.ElementType;
 }
-export declare const SDialogMessage: {
-    ({ title, content, onClose, onOk, open, maxWidth, showClose, }: SDialogMessageProps): React.JSX.Element;
-    displayName: string;
+export interface SDialogMessageOwnerState {
+    okText: React.ReactNode;
+    showCloseButton: boolean;
+}
+export type SDialogMessageSlotProps = SDialogSlotProps & {
+    okButton?: OwnerStateSlotProps<ButtonProps, SDialogMessageOwnerState>;
 };
-export default SDialogMessage;
-/**
- * Options for opening a message dialog
- */
-export interface DialogMessageOpenOptions {
-    /** Dialog title */
-    title?: string;
-    /** Dialog content/message */
-    content?: string;
-    /** Optional callback executed when user clicks OK */
-    onOk?: () => void;
+type DialogMessageActionHandler = NonNullable<ButtonProps['onClick']>;
+export interface SDialogMessageProps extends Omit<SDialogProps, 'actions' | 'children' | 'slotProps' | 'slots'> {
+    /** Message content rendered in DialogContent. */
+    children?: React.ReactNode;
+    /** Content of the acknowledgement button. */
+    okText?: React.ReactNode;
+    /** Handles acknowledgement-button activation. */
+    onOk: DialogMessageActionHandler;
+    /** Components used for MUI Dialog and acknowledgement slots. */
+    slots?: SDialogMessageSlots;
+    /** Props for MUI Dialog and acknowledgement slots. */
+    slotProps?: SDialogMessageSlotProps;
 }
-/**
- * Context value interface for DialogMessage system
- */
+export declare const SDialogMessage: React.ForwardRefExoticComponent<Omit<SDialogMessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SDialogMessage;
+export type DialogMessageOpenOptions = Omit<SDialogMessageProps, 'onOk' | 'open'> & {
+    onOk?: SDialogMessageProps['onOk'];
+};
 export interface DialogMessageContextProps {
-    /** Function to open a message dialog */
-    handleOpen: (dialogMessageOptions: DialogMessageOpenOptions) => void;
-    /** Function to close the dialog */
-    handleClose: () => void;
-    /** Current open state of the dialog */
+    closeMessage: () => void;
     open: boolean;
+    showMessage: (options: DialogMessageOpenOptions) => void;
 }
-export declare const DialogMessageProvider: ({ children }: {
+export interface DialogMessageProviderProps {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-/**
- * Hook to access the message dialog context.
- * Must be used within a DialogMessageProvider.
- *
- * @returns DialogMessageContextProps - Context with dialog management functions
- * @throws Error if used outside of DialogMessageProvider
- */
-export declare const useDialogMessage: () => DialogMessageContextProps;
+}
+export declare function DialogMessageProvider({ children }: DialogMessageProviderProps): React.JSX.Element;
+export declare function useDialogMessage(): DialogMessageContextProps;

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

@@ -1,78 +1,86 @@
-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 { t as e } from "../styled-Bog8QCl3.js";
+import { t } from "../useThemeProps-Cr28OQu3.js";
+import { resolveOwnerStateSlotProps as n } from "../utils/slots.js";
+import { t as r } from "../appendOwnerState-CELpvdMz.js";
+import { t as i } from "../Button-DgIFcM44.js";
+import { t as a } from "../s-dialog-BLiyjLkx.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#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 = e(a, {
+	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 = o.forwardRef(function(e, a) {
+	let o = t({
+		props: e,
+		name: "SDialogMessage"
+	}), { children: c, okText: d = "OK", onCloseButtonClick: f, onOk: p, showCloseButton: m, slotProps: h, slots: g, ..._ } = o, { okButton: v = i, ...y } = g ?? {}, { okButton: b, ...x } = h ?? {}, S = m ?? f != null, C = {
+		...o,
+		okText: d,
+		showCloseButton: S
+	}, w = n(b, C), T = {
+		...w,
+		onClick: u(w?.onClick, p)
+	}, E = r(g?.okButton, T, C);
+	return /* @__PURE__ */ s(l, {
+		..._,
+		ownerState: C,
+		ref: a,
+		actions: /* @__PURE__ */ s(v, {
+			...E,
+			children: d
+		}),
+		onCloseButtonClick: (e) => {
+			e.defaultPrevented || f?.(e);
+		},
+		showCloseButton: S,
+		slots: y,
+		slotProps: x,
+		children: c
+	});
 });
-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 = o.createContext(null);
+function m({ children: e }) {
+	let [t, n] = o.useState(null), r = t != null, i = o.useCallback(() => n(null), []), a = o.useCallback((e) => n(e), []), l = o.useMemo(() => ({
+		closeMessage: i,
+		open: r,
+		showMessage: a
 	}), [
-		t.handleClose,
-		t.open,
-		c
+		i,
+		r,
+		a
 	]);
-	return /* @__PURE__ */ a(m.Provider, {
+	return /* @__PURE__ */ c(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__ */ s(f, {
+			...t,
+			open: !0,
+			onClose: (e, n) => {
+				t.onClose?.(e, n), d(e) || i();
+			},
+			onCloseButtonClick: (e) => {
+				t.onCloseButtonClick?.(e), e.defaultPrevented || i();
+			},
+			onOk: (e) => {
+				t.onOk?.(e), e.defaultPrevented || i();
+			}
 		}), e]
 	});
-}, g = () => {
-	let e = r.useContext(m);
+}
+function h() {
+	let e = o.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,31 @@
-import "react";
-import { jsx as e } from "react/jsx-runtime";
-import { Typography as t } from "@mui/material";
+import { t as e } from "../styled-Bog8QCl3.js";
+import { t } from "../useThemeProps-Cr28OQu3.js";
+import { toSxArray as n } from "../utils/sx.js";
+import { t as r } from "../Typography-yXjc7kVP.js";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#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 = e(r, {
+	name: "SEmpty",
+	slot: "Root"
+})({}), s = i.forwardRef(function(e, r) {
+	let i = t({
+		props: e,
+		name: "SEmpty"
+	}), { children: s = "No data available.", sx: c, variant: l = "body1", ...u } = i, d = {
+		...i,
+		children: s,
+		variant: l
+	};
+	return /* @__PURE__ */ a(o, {
+		...u,
+		ownerState: d,
+		ref: r,
+		variant: l,
+		sx: [{ my: 3 }, ...n(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 { t as e } from "../s-file-dropzone-CVQpYRdY.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,2 @@
-import { t as e } from "../s-file-dropzone-C4_hCsN8.js";
+import { t as e } from "../s-file-dropzone-CVQpYRdY.js";
 export { e as SFileDropzone, e as default };