@solostylist/ui-kit 2.0.0 → 2.0.1

package/dist/s-datetime-picker/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-datetime-picker-ByzW44E0.js";
+import { SDateTimePicker as e } from "./s-datetime-picker.js";
 export { e as SDateTimePicker, e as default };

package/dist/s-datetime-picker/s-datetime-picker.js

@@ -1,2 +1,108 @@
-import { t as e } from "../s-datetime-picker-ByzW44E0.js";
-export { e as SDateTimePicker, e as default };
+import { tint as e } from "../theme/utils.js";
+import { staticFieldLabelStyles as t } from "../theme/components/field-label-styles.js";
+import { PickerActionBar as n } from "../s-date-picker/picker-action-bar.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { styled as a, useTheme as o, useThemeProps as s } from "@mui/material";
+import { mergeSlotProps as c } from "@mui/material/utils";
+import { inputBaseClasses as l } from "@mui/material/InputBase";
+import { DateTimePicker as u } from "@mui/x-date-pickers/DateTimePicker";
+//#region lib/s-datetime-picker/s-datetime-picker.tsx
+var d = [
+	"year",
+	"month",
+	"day",
+	"hours",
+	"minutes"
+], f = a(u, {
+	name: "SDateTimePicker",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), p = r((r, a) => {
+	let u = s({
+		props: r,
+		name: "SDateTimePicker"
+	}), { label: p, required: m = !1, error: h = !1, helperText: g, id: _, slots: v, slotProps: y, views: b = d, ...x } = u, S = o(), C = {
+		...u,
+		error: h,
+		required: m
+	};
+	return /* @__PURE__ */ i(f, {
+		...x,
+		ref: a,
+		label: p,
+		ownerState: C,
+		views: b,
+		slots: {
+			actionBar: n,
+			...v
+		},
+		slotProps: {
+			...y,
+			openPickerButton: c(y?.openPickerButton, {
+				edge: "end",
+				size: "small"
+			}),
+			popper: c(y?.popper, { sx: { "& .MuiPaper-root": {
+				border: "1px solid",
+				borderColor: (S.vars ?? S).palette.divider,
+				borderRadius: (S.vars ?? S).shape.borderRadius,
+				boxShadow: "none",
+				backgroundImage: "none"
+			} } }),
+			textField: c(y?.textField, {
+				fullWidth: !0,
+				id: _,
+				error: h,
+				helperText: g,
+				required: m,
+				sx: {
+					...t,
+					"& .MuiPickersOutlinedInput-root": {
+						height: S.spacing(5),
+						minHeight: S.spacing(5),
+						px: 1.5,
+						py: 1,
+						color: (S.vars ?? S).palette.text.primary,
+						borderRadius: (S.vars ?? S).shape.borderRadius,
+						border: `1px solid ${(S.vars ?? S).palette.divider}`,
+						backgroundColor: (S.vars ?? S).palette.background.default,
+						transition: "border 120ms ease-in",
+						"&:hover": { borderColor: (S.vars ?? S).palette.grey[500] },
+						[`&:focus-within:not(.${l.error}):not(.${l.disabled}), &.${l.focused}:not(.${l.error}):not(.${l.disabled})`]: {
+							outline: `3px solid ${e((S.vars ?? S).palette.primary[500], 50)}`,
+							borderColor: (S.vars ?? S).palette.primary[400]
+						},
+						[`&.${l.error}:not(.${l.disabled})`]: {
+							borderColor: (S.vars ?? S).palette.error.main,
+							"&:hover": { borderColor: (S.vars ?? S).palette.error.main }
+						},
+						[`&.${l.error}:focus-within:not(.${l.disabled}), &.${l.error}.${l.focused}:not(.${l.disabled})`]: {
+							outline: `3px solid rgba(${(S.vars ?? S).palette.error.mainChannel} / 0.5)`,
+							borderColor: (S.vars ?? S).palette.error.main
+						},
+						[`&.${l.disabled}, &.${l.disabled} *`]: { color: (S.vars ?? S).palette.text.disabled },
+						[`&.${l.disabled}`]: { outline: "none" },
+						"&.MuiPickersInputBase-inputSizeSmall": {
+							height: S.spacing(4.5),
+							minHeight: S.spacing(4.5)
+						}
+					},
+					"& .MuiPickersInputBase-sectionsContainer": {
+						alignItems: "center",
+						height: "100%",
+						p: "0 !important"
+					},
+					"& .MuiPickersOutlinedInput-notchedOutline": { border: "none !important" },
+					"& .MuiPickersInputBase-input::placeholder": {
+						opacity: 1,
+						color: (S.vars ?? S).palette.text.secondary
+					}
+				}
+			})
+		}
+	});
+});
+p.displayName = "SDateTimePicker";
+//#endregion
+export { p as SDateTimePicker, p as default };

package/dist/s-dialog/index.js

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

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

@@ -1,2 +1,80 @@
-import { t as e } from "../s-dialog-BLiyjLkx.js";
-export { e as SDialog, e as default };
+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 };

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

@@ -1,12 +1,11 @@
-import { t as e } from "../styled-Bog8QCl3.js";
-import { t } from "../useThemeProps-Cr28OQu3.js";
-import { t as n } from "../appendOwnerState-CELpvdMz.js";
-import { t as r } from "../Button-DgIFcM44.js";
-import { t as i } from "../s-dialog-BLiyjLkx.js";
-import * as a from "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+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";
 //#region lib/s-dialog-confirm/s-dialog-confirm.tsx
-var l = e(i, {
+var l = t(e, {
 	name: "SDialogConfirm",
 	slot: "Root"
 })({});
@@ -24,29 +23,29 @@ function f(e) {
 function p(e) {
 	return "defaultPrevented" in e && e.defaultPrevented === !0;
 }
-var m = a.forwardRef(function(e, i) {
-	let a = t({
+var m = r.forwardRef(function(e, t) {
+	let r = n({
 		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 } = a, T = {
-		...a,
+	}), { 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,
 		loading: g
-	}, { cancelButton: E = r, confirmButton: D = r, ...O } = S ?? {}, { cancelButton: k, confirmButton: A, ...j } = x ?? {}, M = u(k, T), N = u(A, T), P = {
+	}, { cancelButton: E = c, confirmButton: D = c, ...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 = 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, {
+	}, 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, {
 		...w,
-		ref: i,
-		actions: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(E, {
+		ref: t,
+		actions: /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(E, {
 			variant: "outlined",
 			...I,
 			disabled: R,
 			children: p
-		}), /* @__PURE__ */ s(D, {
+		}), /* @__PURE__ */ a(D, {
 			...L,
 			disabled: z,
 			loading: B,
@@ -64,29 +63,29 @@ var m = a.forwardRef(function(e, i) {
 	});
 });
 m.displayName = "SDialogConfirm";
-var h = a.createContext(null);
+var h = r.createContext(null);
 function g({ children: e }) {
-	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(() => ({
+	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(() => ({
 		closeConfirm: l,
-		loading: r,
-		open: o,
-		setLoading: i,
+		loading: i,
+		open: c,
+		setLoading: s,
 		showConfirm: u
 	}), [
 		l,
-		r,
-		o,
+		i,
+		c,
 		u
 	]);
-	return /* @__PURE__ */ c(h.Provider, {
+	return /* @__PURE__ */ o(h.Provider, {
 		value: d,
-		children: [t && /* @__PURE__ */ s(m, {
+		children: [t && /* @__PURE__ */ a(m, {
 			...t,
-			loading: r || t.loading,
+			loading: i || t.loading,
 			open: !0,
 			onCancel: (e) => {
 				t.onCancel?.(e), e.defaultPrevented || l();
@@ -101,7 +100,7 @@ function g({ children: e }) {
 	});
 }
 function _() {
-	let e = a.useContext(h);
+	let e = r.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,13 +1,12 @@
-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";
+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 l = e(a, {
+var l = n(t, {
 	name: "SDialogMessage",
 	slot: "Root"
 })({});
@@ -19,23 +18,23 @@ function u(e, t) {
 function d(e) {
 	return "defaultPrevented" in e && e.defaultPrevented === !0;
 }
-var f = o.forwardRef(function(e, a) {
-	let o = t({
-		props: e,
+var f = i.forwardRef(function(t, n) {
+	let i = r({
+		props: t,
 		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,
+	}), { 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 = n(b, C), T = {
+	}, w = e(b, C), T = {
 		...w,
 		onClick: u(w?.onClick, p)
-	}, E = r(g?.okButton, T, C);
-	return /* @__PURE__ */ s(l, {
+	}, E = s(g?.okButton, T, C);
+	return /* @__PURE__ */ a(l, {
 		..._,
 		ownerState: C,
-		ref: a,
-		actions: /* @__PURE__ */ s(v, {
+		ref: n,
+		actions: /* @__PURE__ */ a(v, {
 			...E,
 			children: d
 		}),
@@ -45,40 +44,40 @@ var f = o.forwardRef(function(e, a) {
 		showCloseButton: S,
 		slots: y,
 		slotProps: x,
-		children: c
+		children: o
 	});
 });
 f.displayName = "SDialogMessage";
-var p = o.createContext(null);
+var p = i.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,
+	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: a
+		showMessage: c
 	}), [
-		i,
+		s,
 		r,
-		a
+		c
 	]);
-	return /* @__PURE__ */ c(p.Provider, {
+	return /* @__PURE__ */ o(p.Provider, {
 		value: l,
-		children: [t && /* @__PURE__ */ s(f, {
+		children: [t && /* @__PURE__ */ a(f, {
 			...t,
 			open: !0,
 			onClose: (e, n) => {
-				t.onClose?.(e, n), d(e) || i();
+				t.onClose?.(e, n), d(e) || s();
 			},
 			onCloseButtonClick: (e) => {
-				t.onCloseButtonClick?.(e), e.defaultPrevented || i();
+				t.onCloseButtonClick?.(e), e.defaultPrevented || s();
 			},
 			onOk: (e) => {
-				t.onOk?.(e), e.defaultPrevented || i();
+				t.onOk?.(e), e.defaultPrevented || s();
 			}
 		}), e]
 	});
 }
 function h() {
-	let e = o.useContext(p);
+	let e = i.useContext(p);
 	if (!e) throw Error("useDialogMessage must be used within a DialogMessageProvider");
 	return e;
 }

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

@@ -1,28 +1,27 @@
-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";
+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 o = e(r, {
+var o = t(a, {
 	name: "SEmpty",
 	slot: "Root"
-})({}), s = i.forwardRef(function(e, r) {
-	let i = t({
-		props: e,
+})({}), s = r.forwardRef(function(t, r) {
+	let a = n({
+		props: t,
 		name: "SEmpty"
-	}), { children: s = "No data available.", sx: c, variant: l = "body1", ...u } = i, d = {
-		...i,
+	}), { children: s = "No data available.", sx: c, variant: l = "body1", ...u } = a, d = {
+		...a,
 		children: s,
 		variant: l
 	};
-	return /* @__PURE__ */ a(o, {
+	return /* @__PURE__ */ i(o, {
 		...u,
 		ownerState: d,
 		ref: r,
 		variant: l,
-		sx: [{ my: 3 }, ...n(c)],
+		sx: [{ my: 3 }, ...e(c)],
 		children: s
 	});
 });

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

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