@solostylist/ui-kit 2.0.1 → 2.0.2

package/dist/s-dialog/index.js

@@ -1,2 +1,2 @@
-import { SDialog as e } from "./s-dialog.js";
+import { t as e } from "../s-dialog-BNlXsVVP.js";
 export { e as SDialog, e as default };

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

@@ -1,80 +1,2 @@
-import { styled as e, useThemeProps as t } from "@mui/material/styles";
-import n from "@mui/material/IconButton";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import o from "@mui/material/Typography";
-import { mergeSlotProps as s } from "@mui/material/utils";
-import c from "@mui/utils/appendOwnerState";
-import l from "@mui/icons-material/Close";
-import u from "@mui/material/Stack";
-import d from "@mui/material/Dialog";
-import f from "@mui/material/DialogActions";
-import p from "@mui/material/DialogContent";
-import m from "@mui/material/DialogTitle";
-//#region lib/s-dialog/s-dialog.tsx
-var h = e(d, {
-	name: "SDialog",
-	slot: "Root"
-})({});
-function g(e, t) {
-	return typeof e == "function" ? e(t) : e;
-}
-var _ = r.forwardRef(function(e, d) {
-	let _ = t({
-		props: e,
-		name: "SDialog"
-	}), { actions: v, "aria-labelledby": y, children: b, closeText: x = "Close dialog", disableTypography: S = !1, fullWidth: C = !0, maxWidth: w = "sm", onCloseButtonClick: T, open: E, showCloseButton: D, slotProps: O, slots: k, title: A, ...j } = _, M = r.useId(), N = A != null, P = {
-		..._,
-		hasActions: v != null,
-		hasTitle: N
-	}, F = D ?? T != null, { actions: I = f, closeButton: ee = n, content: L = p, title: R = m, titleContent: z = o, ...B } = k ?? {}, { actions: V, closeButton: H, content: U, title: W, titleContent: G, ...K } = O ?? {}, q = c(k?.actions, g(V, P) ?? {}, P), J = c(k?.closeButton, g(H, P) ?? {}, P), Y = c(k?.content, g(U, P) ?? {}, P), X = c(k?.title, g(W, P) ?? {}, P), Z = c(k?.titleContent, g(G, P) ?? {}, P), Q = s(J, { onClick: T }), $ = X.id ?? (N ? M : void 0), te = y ?? $;
-	return /* @__PURE__ */ a(h, {
-		...j,
-		ref: d,
-		"aria-labelledby": te,
-		fullWidth: C,
-		maxWidth: w,
-		onClose: _.onClose,
-		open: E,
-		ownerState: P,
-		slots: B,
-		slotProps: K,
-		children: [
-			(N || F) && /* @__PURE__ */ i(R, {
-				...X,
-				id: $,
-				children: /* @__PURE__ */ a(u, {
-					direction: "row",
-					spacing: 3,
-					sx: {
-						alignItems: "center",
-						justifyContent: N ? "space-between" : "flex-end"
-					},
-					children: [N && typeof A == "string" && !S ? /* @__PURE__ */ i(z, {
-						variant: "h5",
-						...Z,
-						children: A
-					}) : N && /* @__PURE__ */ i("div", { children: A }), F && /* @__PURE__ */ i(ee, {
-						"aria-label": x,
-						...Q,
-						children: /* @__PURE__ */ i(l, {})
-					})]
-				})
-			}),
-			b != null && /* @__PURE__ */ i(L, {
-				...Y,
-				children: typeof b == "string" ? /* @__PURE__ */ i(o, {
-					variant: "body1",
-					children: b
-				}) : b
-			}),
-			v != null && /* @__PURE__ */ i(I, {
-				...q,
-				children: v
-			})
-		]
-	});
-});
-_.displayName = "SDialog";
-//#endregion
-export { _ as SDialog, _ as default };
+import { t as e } from "../s-dialog-BNlXsVVP.js";
+export { e as SDialog, e as default };

package/dist/s-dialog-BNlXsVVP.js

@@ -0,0 +1,123 @@
+import { n as e } from "./chunk-C_CI6nMA.js";
+import { t } from "./prop-types-BzYPyWN7.js";
+import { r as n, t as r } from "./DefaultPropsProvider-ebWx4_5E.js";
+import { t as i } from "./clsx-DGZSe4Nt.js";
+import { t as a } from "./styled-Bog8QCl3.js";
+import { t as o } from "./Stack-C0LGzM4c.js";
+import { t as s } from "./useThemeProps-Dw9dmKyT.js";
+import { t as c } from "./IconButton-CE-4GamO.js";
+import { t as l } from "./appendOwnerState-CFQTq3pb.js";
+import { t as u } from "./mergeSlotProps-DC8r4QzS.js";
+import { t as d } from "./Typography-_P0svrkO.js";
+import { t as f } from "./Close-CIYOM-Sc.js";
+import { a as p, i as m, n as h, r as g, t as _ } from "./DialogContent-b3xbJVC6.js";
+import * as v from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region ../../node_modules/@mui/material/DialogTitle/DialogTitle.mjs
+var x = /* @__PURE__ */ e(t(), 1), S = (e) => {
+	let { classes: t } = e;
+	return n({ root: ["root"] }, h, t);
+}, C = a(d, {
+	name: "MuiDialogTitle",
+	slot: "Root"
+})({
+	padding: "16px 24px",
+	flex: "0 0 auto"
+}), w = /* @__PURE__ */ v.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "MuiDialogTitle"
+	}), { className: a, id: o, ...s } = n, c = n, l = S(c), { titleId: u = o } = v.useContext(p);
+	return /* @__PURE__ */ y(C, {
+		component: "h2",
+		className: i(l.root, a),
+		ownerState: c,
+		ref: t,
+		variant: "h6",
+		id: o ?? u,
+		...s
+	});
+});
+process.env.NODE_ENV !== "production" && (w.propTypes = {
+	children: x.default.node,
+	classes: x.default.object,
+	className: x.default.string,
+	id: x.default.string,
+	sx: x.default.oneOfType([
+		x.default.arrayOf(x.default.oneOfType([
+			x.default.func,
+			x.default.object,
+			x.default.bool
+		])),
+		x.default.func,
+		x.default.object
+	])
+});
+//#endregion
+//#region lib/s-dialog/s-dialog.tsx
+var T = a(m, {
+	name: "SDialog",
+	slot: "Root"
+})({});
+function E(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var D = v.forwardRef(function(e, t) {
+	let n = s({
+		props: e,
+		name: "SDialog"
+	}), { actions: r, "aria-labelledby": i, children: a, closeText: p = "Close dialog", disableTypography: m = !1, fullWidth: h = !0, maxWidth: x = "sm", onCloseButtonClick: S, open: C, showCloseButton: D, slotProps: O, slots: k, title: A, ...ee } = n, j = v.useId(), M = A != null, N = {
+		...n,
+		hasActions: r != null,
+		hasTitle: M
+	}, P = D ?? S != null, { actions: F = g, closeButton: I = c, content: L = _, title: R = w, titleContent: z = d, ...B } = k ?? {}, { actions: V, closeButton: H, content: U, title: W, titleContent: G, ...K } = O ?? {}, q = l(k?.actions, E(V, N) ?? {}, N), J = l(k?.closeButton, E(H, N) ?? {}, N), Y = l(k?.content, E(U, N) ?? {}, N), X = l(k?.title, E(W, N) ?? {}, N), Z = l(k?.titleContent, E(G, N) ?? {}, N), Q = u(J, { onClick: S }), $ = X.id ?? (M ? j : void 0), te = i ?? $;
+	return /* @__PURE__ */ b(T, {
+		...ee,
+		ref: t,
+		"aria-labelledby": te,
+		fullWidth: h,
+		maxWidth: x,
+		onClose: n.onClose,
+		open: C,
+		ownerState: N,
+		slots: B,
+		slotProps: K,
+		children: [
+			(M || P) && /* @__PURE__ */ y(R, {
+				...X,
+				id: $,
+				children: /* @__PURE__ */ b(o, {
+					direction: "row",
+					spacing: 3,
+					sx: {
+						alignItems: "center",
+						justifyContent: M ? "space-between" : "flex-end"
+					},
+					children: [M && typeof A == "string" && !m ? /* @__PURE__ */ y(z, {
+						variant: "h5",
+						...Z,
+						children: A
+					}) : M && /* @__PURE__ */ y("div", { children: A }), P && /* @__PURE__ */ y(I, {
+						"aria-label": p,
+						...Q,
+						children: /* @__PURE__ */ y(f, {})
+					})]
+				})
+			}),
+			a != null && /* @__PURE__ */ y(L, {
+				...Y,
+				children: typeof a == "string" ? /* @__PURE__ */ y(d, {
+					variant: "body1",
+					children: a
+				}) : a
+			}),
+			r != null && /* @__PURE__ */ y(F, {
+				...q,
+				children: r
+			})
+		]
+	});
+});
+D.displayName = "SDialog";
+//#endregion
+export { D as t };

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

@@ -1,11 +1,12 @@
-import { SDialog as e } from "../s-dialog/s-dialog.js";
-import { styled as t, useThemeProps as n } from "@mui/material/styles";
-import * as r from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import s from "@mui/utils/appendOwnerState";
-import c from "@mui/material/Button";
+import { t as e } from "../styled-Bog8QCl3.js";
+import { t } from "../useThemeProps-Dw9dmKyT.js";
+import { t as n } from "../appendOwnerState-CFQTq3pb.js";
+import { t as r } from "../Button-DaLr1m20.js";
+import { t as i } from "../s-dialog-BNlXsVVP.js";
+import * as a from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region lib/s-dialog-confirm/s-dialog-confirm.tsx
-var l = t(e, {
+var l = e(i, {
 	name: "SDialogConfirm",
 	slot: "Root"
 })({});
@@ -23,29 +24,29 @@ function f(e) {
 function p(e) {
 	return "defaultPrevented" in e && e.defaultPrevented === !0;
 }
-var m = r.forwardRef(function(e, t) {
-	let r = n({
+var m = a.forwardRef(function(e, i) {
+	let a = t({
 		props: e,
 		name: "SDialogConfirm"
-	}), { cancelText: p = "Cancel", children: m, confirmText: h = "Confirm", loading: g = !1, onCancel: _, onCloseButtonClick: v, onConfirm: y, showCloseButton: b, slotProps: x, slots: S, title: C, ...w } = r, T = {
-		...r,
+	}), { cancelText: p = "Cancel", children: m, confirmText: h = "Confirm", loading: g = !1, onCancel: _, onCloseButtonClick: v, onConfirm: y, showCloseButton: b, slotProps: x, slots: S, title: C, ...w } = a, T = {
+		...a,
 		loading: g
-	}, { cancelButton: E = c, confirmButton: D = c, ...O } = S ?? {}, { cancelButton: k, confirmButton: A, ...j } = x ?? {}, M = u(k, T), N = u(A, T), P = {
+	}, { cancelButton: E = r, confirmButton: D = r, ...O } = S ?? {}, { cancelButton: k, confirmButton: A, ...j } = x ?? {}, M = u(k, T), N = u(A, T), P = {
 		...M,
 		onClick: d(M?.onClick, _)
 	}, F = {
 		...N,
 		onClick: d(N?.onClick, y)
-	}, I = s(S?.cancelButton, P, T), L = s(S?.confirmButton, F, T), R = g || !!I.disabled, z = g || !!L.disabled, B = g || !!L.loading, V = v ?? _, H = f(C), U = f(m);
-	return /* @__PURE__ */ a(l, {
+	}, I = n(S?.cancelButton, P, T), L = n(S?.confirmButton, F, T), R = g || !!I.disabled, z = g || !!L.disabled, B = g || !!L.loading, V = v ?? _, H = f(C), U = f(m);
+	return /* @__PURE__ */ s(l, {
 		...w,
-		ref: t,
-		actions: /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(E, {
+		ref: i,
+		actions: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(E, {
 			variant: "outlined",
 			...I,
 			disabled: R,
 			children: p
-		}), /* @__PURE__ */ a(D, {
+		}), /* @__PURE__ */ s(D, {
 			...L,
 			disabled: z,
 			loading: B,
@@ -63,29 +64,29 @@ var m = r.forwardRef(function(e, t) {
 	});
 });
 m.displayName = "SDialogConfirm";
-var h = r.createContext(null);
+var h = a.createContext(null);
 function g({ children: e }) {
-	let [t, n] = r.useState(null), [i, s] = r.useState(!1), c = t != null, l = r.useCallback(() => {
-		n(null), s(!1);
-	}, []), u = r.useCallback((e) => {
-		s(!1), n(e);
-	}, []), d = r.useMemo(() => ({
+	let [t, n] = a.useState(null), [r, i] = a.useState(!1), o = t != null, l = a.useCallback(() => {
+		n(null), i(!1);
+	}, []), u = a.useCallback((e) => {
+		i(!1), n(e);
+	}, []), d = a.useMemo(() => ({
 		closeConfirm: l,
-		loading: i,
-		open: c,
-		setLoading: s,
+		loading: r,
+		open: o,
+		setLoading: i,
 		showConfirm: u
 	}), [
 		l,
-		i,
-		c,
+		r,
+		o,
 		u
 	]);
-	return /* @__PURE__ */ o(h.Provider, {
+	return /* @__PURE__ */ c(h.Provider, {
 		value: d,
-		children: [t && /* @__PURE__ */ a(m, {
+		children: [t && /* @__PURE__ */ s(m, {
 			...t,
-			loading: i || t.loading,
+			loading: r || t.loading,
 			open: !0,
 			onCancel: (e) => {
 				t.onCancel?.(e), e.defaultPrevented || l();
@@ -100,7 +101,7 @@ function g({ children: e }) {
 	});
 }
 function _() {
-	let e = r.useContext(h);
+	let e = a.useContext(h);
 	if (!e) throw Error("useDialogConfirm must be used within a DialogConfirmProvider");
 	return e;
 }

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

@@ -1,12 +1,13 @@
-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";
+import { t as e } from "../styled-Bog8QCl3.js";
+import { t } from "../useThemeProps-Dw9dmKyT.js";
+import { resolveOwnerStateSlotProps as n } from "../utils/slots.js";
+import { t as r } from "../appendOwnerState-CFQTq3pb.js";
+import { t as i } from "../Button-DaLr1m20.js";
+import { t as a } from "../s-dialog-BNlXsVVP.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 l = n(t, {
+var l = e(a, {
 	name: "SDialogMessage",
 	slot: "Root"
 })({});
@@ -18,23 +19,23 @@ function u(e, t) {
 function d(e) {
 	return "defaultPrevented" in e && e.defaultPrevented === !0;
 }
-var f = i.forwardRef(function(t, n) {
-	let i = r({
-		props: t,
+var f = o.forwardRef(function(e, a) {
+	let o = t({
+		props: e,
 		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,
+	}), { 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 = e(b, C), T = {
+	}, w = n(b, C), T = {
 		...w,
 		onClick: u(w?.onClick, p)
-	}, E = s(g?.okButton, T, C);
-	return /* @__PURE__ */ a(l, {
+	}, E = r(g?.okButton, T, C);
+	return /* @__PURE__ */ s(l, {
 		..._,
 		ownerState: C,
-		ref: n,
-		actions: /* @__PURE__ */ a(v, {
+		ref: a,
+		actions: /* @__PURE__ */ s(v, {
 			...E,
 			children: d
 		}),
@@ -44,40 +45,40 @@ var f = i.forwardRef(function(t, n) {
 		showCloseButton: S,
 		slots: y,
 		slotProps: x,
-		children: o
+		children: c
 	});
 });
 f.displayName = "SDialogMessage";
-var p = i.createContext(null);
+var p = o.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,
+	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: c
+		showMessage: a
 	}), [
-		s,
+		i,
 		r,
-		c
+		a
 	]);
-	return /* @__PURE__ */ o(p.Provider, {
+	return /* @__PURE__ */ c(p.Provider, {
 		value: l,
-		children: [t && /* @__PURE__ */ a(f, {
+		children: [t && /* @__PURE__ */ s(f, {
 			...t,
 			open: !0,
 			onClose: (e, n) => {
-				t.onClose?.(e, n), d(e) || s();
+				t.onClose?.(e, n), d(e) || i();
 			},
 			onCloseButtonClick: (e) => {
-				t.onCloseButtonClick?.(e), e.defaultPrevented || s();
+				t.onCloseButtonClick?.(e), e.defaultPrevented || i();
 			},
 			onOk: (e) => {
-				t.onOk?.(e), e.defaultPrevented || s();
+				t.onOk?.(e), e.defaultPrevented || i();
 			}
 		}), e]
 	});
 }
 function h() {
-	let e = i.useContext(p);
+	let e = o.useContext(p);
 	if (!e) throw Error("useDialogMessage must be used within a DialogMessageProvider");
 	return e;
 }

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

@@ -0,0 +1,3 @@
+export { default, default as SDrawer } from './s-drawer';
+export type { SDrawerCloseReason, SDrawerOwnerState, SDrawerProps, SDrawerSlotProps, SDrawerSlots, SDrawerWidth, } from './s-drawer';
+export type {} from '../theme/component-augmentation';

package/dist/s-drawer/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../s-drawer-4h5ZyoM8.js";
+export { e as SDrawer, e as default };

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

@@ -0,0 +1,70 @@
+import { BoxProps } from '@mui/material/Box';
+import { DrawerProps, DrawerSlots } from '@mui/material/Drawer';
+import { ModalProps } from '@mui/material/Modal';
+import { PaperProps } from '@mui/material/Paper';
+import { TypographyProps } from '@mui/material/Typography';
+import { ResponsiveStyleValue } from '@mui/system';
+import { SIconButtonProps } from '../s-icon-button/s-icon-button';
+import { SOverlayScrollbarProps } from '../s-overlay-scrollbar/s-overlay-scrollbar';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+/** Responsive width value, mirroring what `sx` accepts. */
+export type SDrawerWidth = ResponsiveStyleValue<number | string>;
+type ModalCloseEvent = Parameters<NonNullable<ModalProps['onClose']>>[0];
+/** Why the drawer asked to close. Extends MUI's Modal reasons with the header close button. */
+export type SDrawerCloseReason = 'backdropClick' | 'closeButtonClick' | 'escapeKeyDown';
+/** Props for a MUI Drawer with a fixed header and an independently scrolling body. */
+export interface SDrawerProps extends Omit<DrawerProps, 'children' | 'onClose' | 'slotProps' | 'slots' | 'title'> {
+    /** Body content; scrolls independently from the header. */
+    children?: React.ReactNode;
+    /** Accessible label for the close button — the injection point for translated copy. */
+    closeLabel?: string;
+    /** Content rendered beside the title, before the close button. */
+    headerActions?: React.ReactNode;
+    /** Called when the drawer requests to be closed, including from the header close button. */
+    onClose?: {
+        bivarianceHack(event: ModalCloseEvent, reason: SDrawerCloseReason): void;
+    }['bivarianceHack'];
+    /** Shows the header close button. Defaults to whether `onClose` is provided. */
+    showCloseButton?: boolean;
+    /** Components used for internal structural slots and for the MUI Drawer slots. */
+    slots?: SDrawerSlots;
+    /** Props or owner-state callbacks for internal structural slots and for the MUI Drawer slots. */
+    slotProps?: SDrawerSlotProps;
+    /** Header title content. */
+    title?: React.ReactNode;
+    /** Paper width; accepts responsive values. Defaults to `{ xs: '100vw', sm: 360 }` for side anchors and `'100%'` for top/bottom. */
+    width?: SDrawerWidth;
+}
+export interface SDrawerOwnerState extends Omit<SDrawerProps, 'slotProps' | 'slots'> {
+    anchor: NonNullable<DrawerProps['anchor']>;
+    closeLabel: string;
+    hasHeader: boolean;
+    hasHeaderActions: boolean;
+    hasTitle: boolean;
+    open: boolean;
+    showCloseButton: boolean;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SDrawerOwnerState>;
+type SDrawerRootSlotProps = Omit<DrawerProps, 'anchor' | 'children' | 'onClose' | 'open' | 'slotProps' | 'slots' | 'title' | 'variant'>;
+export interface SDrawerSlots extends Partial<Pick<DrawerSlots, 'backdrop' | 'docked' | 'paper' | 'transition'>> {
+    /** Scrolling body wrapper. Custom component slots must consume or filter `ownerState`. */
+    body?: React.ElementType;
+    closeButton?: React.ElementType;
+    header?: React.ElementType;
+    headerActions?: React.ElementType;
+    /** Drawer wrapper, defaults to the themed MUI Drawer. */
+    root?: React.ElementType;
+    title?: React.ElementType;
+}
+export type SDrawerSlotProps = Omit<NonNullable<DrawerProps['slotProps']>, 'paper' | 'root'> & {
+    body?: OwnerStateSlotProps<Omit<SOverlayScrollbarProps, 'children'>>;
+    closeButton?: OwnerStateSlotProps<Omit<SIconButtonProps, 'children'>>;
+    header?: OwnerStateSlotProps<Omit<BoxProps, 'children'>>;
+    headerActions?: OwnerStateSlotProps<Omit<BoxProps, 'children'>>;
+    paper?: OwnerStateSlotProps<Omit<PaperProps, 'children'>>;
+    root?: OwnerStateSlotProps<SDrawerRootSlotProps>;
+    title?: OwnerStateSlotProps<Omit<TypographyProps, 'children'>>;
+};
+export declare const SDrawer: React.ForwardRefExoticComponent<Omit<SDrawerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SDrawer;

package/dist/s-drawer/s-drawer.js

@@ -0,0 +1,2 @@
+import { t as e } from "../s-drawer-4h5ZyoM8.js";
+export { e as SDrawer, e as default };