@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/s-data-table/s-data-table.d.ts

@@ -27,10 +27,12 @@ export interface ColumnDef<TRowModel> {
 }
 /** Type for row identification - can be number or string */
 type RowId = number | string;
+/** Keyboard event delivered before the table's built-in row activation behavior. */
+export type SDataTableRowKeyDownEvent = React.KeyboardEvent<HTMLTableRowElement>;
 /**
  * Props interface for SDataTable component
  */
-export interface SDataTableProps<TRowModel> extends Omit<TableProps, 'onClick'> {
+export interface SDataTableProps<TRowModel> extends Omit<TableProps, 'component'> {
     /** Array of column definitions specifying how to display data */
     columns: ColumnDef<TRowModel>[];
     /** Whether to hide the table header */
@@ -38,7 +40,9 @@ export interface SDataTableProps<TRowModel> extends Omit<TableProps, 'onClick'>
     /** Whether rows should show hover effects */
     hover?: boolean;
     /** Click handler for row interactions */
-    onClick?: (event: React.MouseEvent, row: TRowModel) => void;
+    onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>, row: TRowModel) => void;
+    /** Called first for row key events. Prevent the event to cancel built-in Enter/Space activation. */
+    onRowKeyDown?: (event: SDataTableRowKeyDownEvent, row: TRowModel) => void;
     /** Handler for deselecting all rows */
     onDeselectAll?: (event: React.ChangeEvent) => void;
     /** Handler for deselecting individual rows */
@@ -48,7 +52,7 @@ export interface SDataTableProps<TRowModel> extends Omit<TableProps, 'onClick'>
     /** Handler for selecting individual rows */
     onSelectOne?: (event: React.ChangeEvent, row: TRowModel) => void;
     /** Fired when a sortable header is clicked with the sort key and next direction; parent reorders `rows` */
-    onSort?: (sortKey: SortKey, direction: SortDirection) => void;
+    onSort?: (event: React.SyntheticEvent, sortKey: SortKey, direction: SortDirection) => void;
     /** Array of data objects to display in table rows */
     rows: TRowModel[];
     /** Whether rows can be selected with checkboxes */
@@ -62,10 +66,14 @@ export interface SDataTableProps<TRowModel> extends Omit<TableProps, 'onClick'>
     /** Function to extract unique ID from row data */
     uniqueRowId?: (row: TRowModel) => RowId;
 }
-export declare const SDataTable: {
-    <TRowModel extends object & {
-        id?: RowId | null;
-    }>({ columns, hideHead, hover, onClick, onDeselectAll, onDeselectOne, onSelectOne, onSelectAll, onSort, rows, selectable, selected, sortBy, sortDirection, uniqueRowId, ...props }: SDataTableProps<TRowModel>): React.JSX.Element;
+export interface SDataTableOwnerState {
+    hideHead?: boolean;
+    hover?: boolean;
+    selectable?: boolean;
+}
+export declare const SDataTable: (<TRowModel extends object & {
+    id?: RowId | null;
+}>(props: SDataTableProps<TRowModel> & React.RefAttributes<HTMLTableElement>) => React.JSX.Element) & {
     displayName: string;
 };
 export default SDataTable;

package/dist/s-data-table/s-data-table.js

@@ -1,2 +1,213 @@
-import { t as e } from "../s-data-table-DfGYIIvn.js";
-export { e as SDataTable, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { SEmpty as t } from "../s-empty/s-empty.js";
+import { styled as n, useThemeProps as r } from "@mui/material/styles";
+import { buttonBaseClasses as i } from "@mui/material/ButtonBase";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "@mui/material/Checkbox";
+import l from "@mui/material/Box";
+import u from "@mui/icons-material/ArrowDownward";
+import d from "@mui/icons-material/SwapVert";
+import f from "@mui/material/Table";
+import p, { tableBodyClasses as m } from "@mui/material/TableBody";
+import h, { tableCellClasses as g } from "@mui/material/TableCell";
+import _ from "@mui/material/TableHead";
+import v, { tableRowClasses as y } from "@mui/material/TableRow";
+import b, { tableSortLabelClasses as x } from "@mui/material/TableSortLabel";
+//#region lib/s-data-table/s-data-table.tsx
+var S = {
+	width: "40px",
+	minWidth: "40px",
+	maxWidth: "40px",
+	boxSizing: "content-box",
+	p: 2
+}, C = {
+	width: "40px",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+}, w = {
+	width: "20px",
+	height: "20px",
+	m: 0,
+	p: 0
+}, T = { height: "48px" };
+function E(e) {
+	return e.sortKey ?? e.field ?? e.name;
+}
+function D(e, t, n) {
+	return e.formatter ? e.formatter(t, n) : e.field ? t[e.field] : null;
+}
+var O = n(f, {
+	name: "SDataTable",
+	slot: "Root"
+})(({ theme: e }) => ({
+	border: "1px solid",
+	borderCollapse: "separate",
+	borderColor: (e.vars ?? e).palette.divider,
+	borderRadius: e.shape.borderRadius,
+	borderSpacing: 0,
+	boxSizing: "border-box",
+	overflow: "hidden",
+	[`& .${m.root} > .${y.root}:last-child > .${g.root}`]: { borderBottom: 0 }
+})), k = Object.assign(a.forwardRef((n, a) => {
+	let f = r({
+		props: n,
+		name: "SDataTable"
+	}), { columns: m, hideHead: g, hover: y, onRowClick: k, onRowKeyDown: A, onDeselectAll: j, onDeselectOne: M, onSelectOne: N, onSelectAll: P, onSort: F, rows: I, selectable: L, selected: R, sortBy: z, sortDirection: B, sx: V, uniqueRowId: H, ...U } = f, W = {
+		...f,
+		hideHead: g,
+		hover: y,
+		selectable: L
+	}, G = /* @__PURE__ */ new Set();
+	I.forEach((e) => {
+		let t = e.id ?? H?.(e);
+		t != null && G.add(t);
+	});
+	let K = Array.from(G).filter((e) => R?.has(e)).length, q = K > 0 && K < G.size, J = G.size > 0 && K === G.size, Y = (e, t) => `${String(e.field ?? e.name ?? "column")}-${t}`, X = (e, t) => {
+		let n = E(t);
+		F?.(e, n, z === n && B === "asc" ? "desc" : "asc");
+	};
+	return /* @__PURE__ */ s(O, {
+		...U,
+		ownerState: W,
+		ref: a,
+		sx: [{ mt: 1 }, ...e(V)],
+		children: [/* @__PURE__ */ o(_, {
+			sx: { ...g && {
+				visibility: "collapse",
+				"--TableCell-borderWidth": 0
+			} },
+			children: /* @__PURE__ */ s(v, {
+				sx: T,
+				children: [L ? /* @__PURE__ */ o(h, {
+					padding: "checkbox",
+					sx: {
+						...S,
+						bgcolor: "action.hover",
+						backgroundClip: "padding-box"
+					},
+					children: /* @__PURE__ */ o(l, {
+						sx: C,
+						children: /* @__PURE__ */ o(c, {
+							checked: J,
+							indeterminate: q,
+							slotProps: { input: { "aria-label": "Select all rows" } },
+							sx: w,
+							onChange: (e) => {
+								J ? j?.(e) : P?.(e);
+							}
+						})
+					})
+				}) : null, m.map((e, t) => {
+					let n = e.sortable && z === E(e), r = n ? B === "asc" ? "ascending" : "descending" : void 0, a = e.hideName ? null : e.name;
+					return /* @__PURE__ */ o(h, {
+						"aria-sort": r,
+						sortDirection: n ? B : !1,
+						sx: {
+							width: e.width,
+							minWidth: e.width,
+							maxWidth: e.width,
+							...e.align && { textAlign: e.align },
+							bgcolor: "action.hover",
+							backgroundClip: "padding-box"
+						},
+						children: e.sortable ? /* @__PURE__ */ o(b, {
+							active: !!n,
+							direction: n ? B : "asc",
+							IconComponent: n ? u : d,
+							"aria-label": e.hideName ? `Sort by ${e.name}` : void 0,
+							onClick: (t) => X(t, e),
+							sx: {
+								display: "flex",
+								justifyContent: "space-between",
+								gap: 1,
+								width: "100%",
+								color: n ? "primary.main" : "inherit",
+								"&.Mui-active": { color: "primary.main" },
+								[`&.${i.focusVisible}`]: {
+									borderRadius: .5,
+									outline: "2px solid",
+									outlineColor: "primary.main",
+									outlineOffset: 2
+								},
+								[`& .${x.icon}`]: {
+									color: "text.disabled",
+									fontSize: "1.25rem",
+									marginLeft: "auto",
+									marginRight: 0,
+									opacity: 1
+								},
+								[`&:hover .${x.icon}`]: {
+									color: "text.secondary",
+									opacity: 1
+								},
+								[`&.${x.active} .${x.icon}`]: {
+									color: "primary.main",
+									opacity: 1
+								},
+								"@media (prefers-reduced-motion: reduce)": { [`& .${x.icon}`]: { transition: "none" } }
+							},
+							children: a
+						}) : a
+					}, Y(e, t));
+				})]
+			})
+		}), /* @__PURE__ */ o(p, { children: I.length ? I.map((e, t) => {
+			let n = e.id ?? H?.(e), r = n != null, i = r ? R?.has(n) : !1;
+			return /* @__PURE__ */ s(v, {
+				hover: y,
+				selected: i,
+				onClick: k ? (t) => {
+					k(t, e);
+				} : void 0,
+				onKeyDown: A || k ? (t) => {
+					A?.(t, e), !(!k || t.defaultPrevented || t.target !== t.currentTarget) && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.currentTarget.click());
+				} : void 0,
+				...k && {
+					"aria-keyshortcuts": "Enter Space",
+					tabIndex: 0
+				},
+				sx: {
+					...T,
+					...k && {
+						cursor: "pointer",
+						"&:focus-visible": {
+							outline: "2px solid",
+							outlineColor: "primary.main",
+							outlineOffset: -2
+						}
+					}
+				},
+				children: [L ? /* @__PURE__ */ o(h, {
+					padding: "checkbox",
+					sx: S,
+					children: /* @__PURE__ */ o(l, {
+						sx: C,
+						children: /* @__PURE__ */ o(c, {
+							checked: r ? i : !1,
+							slotProps: { input: { "aria-label": r ? `Select row ${String(n)}` : "Select row" } },
+							sx: w,
+							onChange: (t) => {
+								i ? M?.(t, e) : N?.(t, e);
+							},
+							onClick: (e) => {
+								k && e.stopPropagation();
+							}
+						})
+					})
+				}) : null, m.map((n, r) => /* @__PURE__ */ o(h, {
+					sx: { ...n.align && { textAlign: n.align } },
+					children: D(n, e, t)
+				}, Y(n, r)))]
+			}, n ?? t);
+		}) : /* @__PURE__ */ o(v, { children: /* @__PURE__ */ o(h, {
+			align: "center",
+			colSpan: m.length + +!!L,
+			children: /* @__PURE__ */ o(t, {})
+		}) }) })]
+	});
+}), { displayName: "SDataTable" });
+k.displayName = "SDataTable";
+//#endregion
+export { k as SDataTable, k as default };

package/dist/s-date-picker/index.d.ts

@@ -1,2 +1,4 @@
 export { default, default as SDatePicker } from './s-date-picker';
-export type { SDatePickerProps } from './s-date-picker';
+export type { SDatePickerOwnerState, SDatePickerProps } from './s-date-picker';
+export type {} from '../theme/component-augmentation';
+export type {} from '../theme/optional-component-augmentations/s-date-picker';

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

@@ -1,2 +1,2 @@
-import { t as e } from "../s-date-picker-C06rlE6_.js";
+import { SDatePicker as e } from "./s-date-picker.js";
 export { e as SDatePicker, e as default };

package/dist/s-date-picker/picker-action-bar.js

@@ -1,66 +1,67 @@
+import { toSxArray as e } from "../utils/sx.js";
 import "react";
-import { jsx as e } from "react/jsx-runtime";
-import { Button as t, DialogActions as n } from "@mui/material";
-import { usePickerContext as r, usePickerTranslations as i } from "@mui/x-date-pickers";
+import { jsx as t } from "react/jsx-runtime";
+import { Button as n, DialogActions as r } from "@mui/material";
+import { usePickerContext as i, usePickerTranslations as a } from "@mui/x-date-pickers";
 //#region lib/s-date-picker/picker-action-bar.tsx
-var a = ({ actions: a, disableSpacing: o, sx: s, ...c }) => {
-	let l = i(), { clearValue: u, setValueToToday: d, acceptValueChanges: f, cancelValueChanges: p, goToNextStep: m, hasNextStep: h } = r();
-	if (!a || a.length === 0) return null;
-	let g = o ?? !0;
-	return /* @__PURE__ */ e(n, {
-		...c,
-		disableSpacing: g,
+var o = ({ actions: o, disableSpacing: s, sx: c, ...l }) => {
+	let u = a(), { clearValue: d, setValueToToday: f, acceptValueChanges: p, cancelValueChanges: m, goToNextStep: h, hasNextStep: g } = i();
+	if (!o || o.length === 0) return null;
+	let _ = s ?? !0;
+	return /* @__PURE__ */ t(r, {
+		...l,
+		disableSpacing: _,
 		sx: [{
 			p: 1.5,
-			gap: g ? 1 : void 0
-		}, ...Array.isArray(s) ? s : s ? [s] : []],
-		children: a.map((n) => {
-			switch (n) {
-				case "clear": return /* @__PURE__ */ e(t, {
+			gap: _ ? 1 : void 0
+		}, ...e(c)],
+		children: o.map((e) => {
+			switch (e) {
+				case "clear": return /* @__PURE__ */ t(n, {
 					variant: "text",
 					size: "small",
-					onClick: u,
-					children: l.clearButtonLabel
-				}, n);
-				case "today": return /* @__PURE__ */ e(t, {
+					onClick: d,
+					children: u.clearButtonLabel
+				}, e);
+				case "today": return /* @__PURE__ */ t(n, {
 					variant: "text",
 					size: "small",
-					onClick: d,
-					children: l.todayButtonLabel
-				}, n);
-				case "cancel": return /* @__PURE__ */ e(t, {
+					onClick: f,
+					children: u.todayButtonLabel
+				}, e);
+				case "cancel": return /* @__PURE__ */ t(n, {
 					variant: "outlined",
 					size: "small",
-					onClick: p,
-					children: l.cancelButtonLabel
-				}, n);
-				case "next": return /* @__PURE__ */ e(t, {
+					onClick: m,
+					children: u.cancelButtonLabel
+				}, e);
+				case "next": return /* @__PURE__ */ t(n, {
 					variant: "contained",
 					size: "small",
-					onClick: m,
-					children: l.nextStepButtonLabel
-				}, n);
-				case "nextOrAccept": return h ? /* @__PURE__ */ e(t, {
+					onClick: h,
+					children: u.nextStepButtonLabel
+				}, e);
+				case "nextOrAccept": return g ? /* @__PURE__ */ t(n, {
 					variant: "contained",
 					size: "small",
-					onClick: m,
-					children: l.nextStepButtonLabel
-				}, n) : /* @__PURE__ */ e(t, {
+					onClick: h,
+					children: u.nextStepButtonLabel
+				}, e) : /* @__PURE__ */ t(n, {
 					variant: "contained",
 					size: "small",
-					onClick: f,
-					children: l.okButtonLabel
-				}, n);
-				case "accept": return /* @__PURE__ */ e(t, {
+					onClick: p,
+					children: u.okButtonLabel
+				}, e);
+				case "accept": return /* @__PURE__ */ t(n, {
 					variant: "contained",
 					size: "small",
-					onClick: f,
-					children: l.okButtonLabel
-				}, n);
+					onClick: p,
+					children: u.okButtonLabel
+				}, e);
 				default: return null;
 			}
 		})
 	});
 };
 //#endregion
-export { a as PickerActionBar, a as default };
+export { o as PickerActionBar, o as default };

package/dist/s-date-picker/s-date-picker.d.ts

@@ -8,12 +8,16 @@ export interface SDatePickerProps extends DatePickerProps {
     label?: string | React.ReactNode;
     /** Whether the field is required (shows asterisk in label) */
     required?: boolean;
-    /** Error message to display below the field */
-    error?: string;
+    /** Whether the field has an error */
+    error?: boolean;
+    /** Supporting or validation content shown below the field */
+    helperText?: React.ReactNode;
     /** HTML id attribute for the input element */
-    htmlFor?: string;
-    /** Help text shown in tooltip next to the label */
-    hint?: string;
+    id?: string;
 }
+export type SDatePickerOwnerState = SDatePickerProps & {
+    error: boolean;
+    required: boolean;
+};
 export declare const SDatePicker: React.ForwardRefExoticComponent<SDatePickerProps & React.RefAttributes<HTMLDivElement>>;
 export default SDatePicker;

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

@@ -1,2 +1,106 @@
-import { t as e } from "../s-date-picker-C06rlE6_.js";
-export { e as SDatePicker, 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 "./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 { DatePicker as u } from "@mui/x-date-pickers/DatePicker";
+//#region lib/s-date-picker/s-date-picker.tsx
+var d = [
+	"year",
+	"month",
+	"day"
+], f = a(u, {
+	name: "SDatePicker",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), p = r((r, a) => {
+	let u = s({
+		props: r,
+		name: "SDatePicker"
+	}), { 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 = "SDatePicker";
+//#endregion
+export { p as SDatePicker, p as default };

package/dist/s-datetime-picker/index.d.ts

@@ -1,2 +1,4 @@
 export { default, default as SDateTimePicker } from './s-datetime-picker';
-export type { SDateTimePickerProps } from './s-datetime-picker';
+export type { SDateTimePickerOwnerState, SDateTimePickerProps } from './s-datetime-picker';
+export type {} from '../theme/component-augmentation';
+export type {} from '../theme/optional-component-augmentations/s-datetime-picker';

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

@@ -1,2 +1,2 @@
-import { t as e } from "../s-datetime-picker-DnIK-QnQ.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.d.ts

@@ -9,12 +9,16 @@ export interface SDateTimePickerProps extends DateTimePickerProps {
     label?: string | React.ReactNode;
     /** Whether the field is required (shows asterisk in label) */
     required?: boolean;
-    /** Error message to display below the field */
-    error?: string;
+    /** Whether the field has an error */
+    error?: boolean;
+    /** Supporting or validation content shown below the field */
+    helperText?: React.ReactNode;
     /** HTML id attribute for the input element */
-    htmlFor?: string;
-    /** Help text shown in tooltip next to the label */
-    hint?: string;
+    id?: string;
 }
+export type SDateTimePickerOwnerState = SDateTimePickerProps & {
+    error: boolean;
+    required: boolean;
+};
 export declare const SDateTimePicker: React.ForwardRefExoticComponent<SDateTimePickerProps & React.RefAttributes<HTMLDivElement>>;
 export default SDateTimePicker;

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

@@ -1,2 +1,108 @@
-import { t as e } from "../s-datetime-picker-DnIK-QnQ.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.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SDialog } from './s-dialog';
-export type { SDialogProps } from './s-dialog';
+export type { SDialogOwnerState, SDialogProps, SDialogSlotProps, SDialogSlots } from './s-dialog';
+export type {} from '../theme/component-augmentation';