@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/s-tool-item/s-tool-item.d.ts

@@ -1,34 +1,39 @@
-import { SxProps, Theme } from '@mui/material/styles';
+import { BoxProps, TypographyProps } from '@mui/material';
+import { SNavItemButtonProps } from '../s-nav-item';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
 import * as React from 'react';
-/**
- * Props interface for SToolItem component
- */
-export interface SToolItemProps {
-    /** Tool label */
-    title: React.ReactNode;
-    /** Icon shown above the label when collapsed, or before the label when expanded */
-    icon?: React.ReactNode;
-    /** Active state. If true, highlighting is applied */
-    active?: boolean;
-    /** Renders the item as a horizontal navigation row */
-    expanded?: boolean;
-    /** Used for click selection */
-    onClick?: () => void;
-    /** Disables the item */
+export interface SToolItemOwnerState extends SToolItemProps {
+    disabled: boolean;
+    expanded: boolean;
+    selected: boolean;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SToolItemOwnerState>;
+export interface SToolItemSlots {
+    button?: React.ElementType;
+    primary?: React.ElementType;
+}
+export interface SToolItemSlotProps {
+    button?: OwnerStateSlotProps<SNavItemButtonProps>;
+    primary?: OwnerStateSlotProps<TypographyProps>;
+}
+/** Props for a compact tool navigation item. */
+export interface SToolItemProps extends Omit<BoxProps<'li'>, 'children' | 'component' | 'onClick'> {
+    /** Disables the action. */
     disabled?: boolean;
-    /** Collapsed item width */
-    width?: number | string;
-    /** Collapsed item minimum height */
-    minHeight?: number | string;
-    /** Additional SX overrides for the root item */
-    sx?: SxProps<Theme>;
-    /** Additional SX overrides for the expanded inner item */
-    innerSx?: SxProps<Theme>;
-    /** Additional SX overrides for the title Typography */
-    titleSx?: SxProps<Theme>;
+    /** Renders the tool as an expanded navigation row. */
+    expanded?: boolean;
+    /** Tool icon. */
+    icon?: React.ReactNode;
+    /** Called when the tool is activated. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Visible tool label. */
+    primary: React.ReactNode;
+    /** Selected navigation state. */
+    selected?: boolean;
+    /** Components used for internal structural slots. */
+    slots?: SToolItemSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SToolItemSlotProps;
 }
-export declare const SToolItem: {
-    ({ active, disabled, expanded, icon, innerSx, minHeight, onClick, sx, title, titleSx, width, }: Readonly<SToolItemProps>): React.JSX.Element;
-    displayName: string;
-};
+export declare const SToolItem: React.ForwardRefExoticComponent<Omit<SToolItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
 export default SToolItem;

package/dist/s-tool-item/s-tool-item.js

@@ -1,61 +1,116 @@
-import { SNavItem as e } from "../s-nav-item/s-nav-item.js";
-import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { ButtonBase as r, Typography as i } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import { SNavItem as t } from "../s-nav-item/s-nav-item.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { ButtonBase as a, Typography as o, styled as s, useThemeProps as c } from "@mui/material";
+import l from "@mui/utils/appendOwnerState";
 //#region lib/s-tool-item/s-tool-item.tsx
-var a = (e) => Array.isArray(e) ? e : e ? [e] : [], o = ({ active: o = !1, disabled: s = !1, expanded: c = !1, icon: l, innerSx: u, minHeight: d = 68, onClick: f, sx: p, title: m, titleSx: h, width: g = 96 }) => {
-	let _ = typeof m == "string" ? m : void 0;
-	return c ? /* @__PURE__ */ t(e, {
-		active: o,
-		disabled: s,
-		icon: l,
-		innerSx: u,
-		onClick: f,
-		sx: p,
-		title: m,
-		titleSx: h
-	}) : /* @__PURE__ */ n(r, {
-		"aria-current": o ? "page" : void 0,
-		"aria-label": _,
-		disabled: s,
-		onClick: f,
-		title: _,
+var u = s("li", {
+	name: "SToolItem",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), d = s(t, {
+	name: "SToolItem",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({});
+function f(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var p = n.forwardRef(function(t, n) {
+	let s = c({
+		props: t,
+		name: "SToolItem"
+	}), { disabled: p = !1, expanded: m = !1, icon: h, onClick: g, primary: _, selected: v = !1, slotProps: y, slots: b, sx: x, ...S } = s, C = {
+		...s,
+		disabled: p,
+		expanded: m,
+		selected: v
+	}, w = f(y?.button, C), T = f(y?.primary, C), { onClick: E, ...D } = w ?? {}, O = E, k = (e) => {
+		O?.(e), e.defaultPrevented || g?.(e);
+	};
+	if (m) {
+		let t = l(b?.button, D, C), i = l(b?.primary, T ?? {}, C);
+		return /* @__PURE__ */ r(d, {
+			...S,
+			disabled: p,
+			icon: h,
+			onClick: k,
+			ownerState: C,
+			primary: _,
+			ref: n,
+			selected: v,
+			slots: {
+				button: b?.button,
+				primary: b?.primary
+			},
+			slotProps: {
+				button: t,
+				primary: i
+			},
+			sx: [{ cursor: p ? "not-allowed" : void 0 }, ...e(x)]
+		});
+	}
+	let A = b?.button ?? a, j = b?.primary ?? o, { sx: M, ...N } = D, { sx: P, ...F } = T ?? {}, I = l(b?.button, N, C), L = l(b?.primary, F, C), R = typeof _ == "string" ? _ : void 0;
+	return /* @__PURE__ */ r(u, {
+		...S,
+		ownerState: C,
+		ref: n,
 		sx: [{
-			alignItems: "center",
-			bgcolor: o ? "action.selected" : "transparent",
-			borderRadius: 1,
-			color: o ? "text.primary" : "text.secondary",
-			cursor: s ? "not-allowed" : "pointer",
-			display: "flex",
-			flexDirection: "column",
-			gap: .5,
-			justifyContent: "center",
-			minHeight: d,
-			mx: "auto",
-			px: .5,
-			py: .75,
-			textAlign: "center",
-			transition: "background-color 0.2s ease, color 0.2s ease",
-			width: g,
-			...s && { color: "text.disabled" },
-			"&:hover": { ...!o && !s && {
-				bgcolor: "action.hover",
-				color: "text.primary"
-			} },
-			"& svg": { flexShrink: 0 }
-		}, ...a(p)],
-		children: [l, /* @__PURE__ */ t(i, {
-			component: "span",
-			variant: "caption",
+			cursor: p ? "not-allowed" : void 0,
+			display: "block"
+		}, ...e(x)],
+		children: /* @__PURE__ */ i(A, {
+			...I,
+			"aria-current": v ? "page" : void 0,
+			"aria-label": R,
+			disabled: p,
+			onClick: (e) => {
+				O?.(e), e.defaultPrevented || g?.(e);
+			},
+			title: R,
 			sx: [{
-				color: "inherit",
-				maxWidth: "100%",
-				overflowWrap: "anywhere"
-			}, ...a(h)],
-			children: m
-		})]
+				alignItems: "center",
+				bgcolor: v ? "action.selected" : "transparent",
+				borderRadius: 1,
+				color: v ? "text.primary" : "text.secondary",
+				display: "flex",
+				flexDirection: "column",
+				gap: .5,
+				justifyContent: "center",
+				minHeight: 68,
+				mx: "auto",
+				px: .5,
+				py: .75,
+				textAlign: "center",
+				transition: (e) => e.transitions.create(["background-color", "color"], { duration: e.transitions.duration.shorter }),
+				width: 96,
+				"@media (hover: hover) and (pointer: fine)": { "&:hover": {
+					bgcolor: v ? void 0 : "action.hover",
+					color: "text.primary"
+				} },
+				"&.Mui-focusVisible": {
+					outline: "2px solid",
+					outlineColor: "primary.main",
+					outlineOffset: 2
+				},
+				"&.Mui-disabled": { color: "text.disabled" },
+				"& svg": { flexShrink: 0 }
+			}, ...e(M)],
+			children: [h, /* @__PURE__ */ r(j, {
+				component: "span",
+				variant: "caption",
+				...L,
+				sx: [{
+					color: "inherit",
+					maxWidth: "100%",
+					overflowWrap: "anywhere"
+				}, ...e(P)],
+				children: _
+			})]
+		})
 	});
-};
-o.displayName = "SToolItem";
+});
+p.displayName = "SToolItem";
 //#endregion
-export { o as SToolItem, o as default };
+export { p as SToolItem, p as default };

package/dist/s-two-pane-layout/index.d.ts

@@ -1,2 +1,4 @@
 export { default, default as STwoPaneLayout } from './s-two-pane-layout';
-export type { STwoPaneLayoutProps } from './s-two-pane-layout';
+export type { STwoPaneLayoutOwnerState, STwoPaneLayoutProps, STwoPaneLayoutSlotProps, STwoPaneLayoutSlots, } from './s-two-pane-layout';
+export type {} from '../theme/component-augmentation';
+export type {} from '../theme/optional-component-augmentations/s-two-pane-layout';

package/dist/s-two-pane-layout/s-two-pane-layout.d.ts

@@ -1,53 +1,59 @@
-import { FC, ReactNode } from 'react';
-import { SxProps, Theme } from '@mui/material';
-/**
- * Props for the STwoPaneLayout component
- */
-export interface STwoPaneLayoutProps {
-    /** Content to display in the sidebar pane */
-    sidebar: ReactNode;
-    /** Content to display in the main content pane */
-    content: ReactNode;
-    /** Width of the sidebar in pixels. Default: 280 */
+import { BoxProps } from '@mui/material';
+import { SOverlayScrollbarProps } from '../s-overlay-scrollbar';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface STwoPaneLayoutOwnerState {
+    disableDivider: boolean;
+    scrollContent: boolean;
+    scrollSidebar: boolean;
+    sidebarPosition: 'left' | 'right';
+    sidebarWidth: number | string;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, STwoPaneLayoutOwnerState>;
+export interface STwoPaneLayoutSlots {
+    content?: React.ElementType;
+    contentHeader?: React.ElementType;
+    contentScroller?: React.ElementType;
+    contentViewport?: React.ElementType;
+    sidebar?: React.ElementType;
+    sidebarHeader?: React.ElementType;
+    sidebarScroller?: React.ElementType;
+    sidebarViewport?: React.ElementType;
+}
+export interface STwoPaneLayoutSlotProps {
+    content?: OwnerStateSlotProps<BoxProps>;
+    contentHeader?: OwnerStateSlotProps<BoxProps>;
+    contentScroller?: OwnerStateSlotProps<SOverlayScrollbarProps>;
+    contentViewport?: OwnerStateSlotProps<BoxProps>;
+    sidebar?: OwnerStateSlotProps<BoxProps>;
+    sidebarHeader?: OwnerStateSlotProps<BoxProps>;
+    sidebarScroller?: OwnerStateSlotProps<SOverlayScrollbarProps>;
+    sidebarViewport?: OwnerStateSlotProps<BoxProps>;
+}
+/** Props for a two-pane MUI layout with independently customizable structural slots. */
+export interface STwoPaneLayoutProps extends Omit<BoxProps, 'children' | 'component'> {
+    /** Main-pane content. */
+    children: React.ReactNode;
+    /** Optional main-pane header. */
+    contentHeader?: React.ReactNode;
+    /** Removes the divider between panes. */
+    disableDivider?: boolean;
+    /** Enables an overlay scrollbar for the main pane. */
+    scrollContent?: boolean;
+    /** Enables an overlay scrollbar for the sidebar. */
+    scrollSidebar?: boolean;
+    /** Sidebar content. */
+    sidebar: React.ReactNode;
+    /** Optional sidebar header. */
+    sidebarHeader?: React.ReactNode;
+    /** Sidebar ordering. */
+    sidebarPosition?: STwoPaneLayoutOwnerState['sidebarPosition'];
+    /** Sidebar width. */
     sidebarWidth?: number | string;
-    /** Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)' */
-    height?: string | number;
-    /** Custom styles for the main container */
-    containerSx?: SxProps<Theme>;
-    /** Custom styles for the sidebar container */
-    sidebarSx?: SxProps<Theme>;
-    /** Custom styles for the content container */
-    contentSx?: SxProps<Theme>;
-    /** Custom styles for the sidebar header */
-    sidebarHeaderSx?: SxProps<Theme>;
-    /** Custom styles for the content header */
-    contentHeaderSx?: SxProps<Theme>;
-    /** Custom styles for the sidebar scrollable area */
-    sidebarScrollSx?: SxProps<Theme>;
-    /** Custom styles for the content scrollable area */
-    contentScrollSx?: SxProps<Theme>;
-    /** Hide border between sidebar and content. Default: false */
-    disableBorder?: boolean;
-    /** Optional header content for the sidebar */
-    sidebarHeader?: ReactNode;
-    /** Optional header content for the main content area */
-    contentHeader?: ReactNode;
-    /** Enable scrollbar for sidebar. Default: true */
-    enableSidebarScroll?: boolean;
-    /** Enable scrollbar for content. Default: false */
-    enableContentScroll?: boolean;
-    /** Sidebar position. Default: 'left' */
-    sidebarPosition?: 'left' | 'right';
-    /** Padding for sidebar content. Default: 1 */
-    sidebarPadding?: number | string;
-    /** Padding for main content. Default: 0 */
-    contentPadding?: number | string;
-    /** Padding for sidebar header. Default: 2 */
-    sidebarHeaderPadding?: number | string;
-    /** Padding for content header. Default: 2 */
-    contentHeaderPadding?: number | string;
-    /** Height of header sections to ensure consistent sizing between panes. Default: '40px' */
-    headerHeight?: number | string;
+    /** Components used for internal structural slots. */
+    slots?: STwoPaneLayoutSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: STwoPaneLayoutSlotProps;
 }
-export declare const STwoPaneLayout: FC<STwoPaneLayoutProps>;
+export declare const STwoPaneLayout: React.ForwardRefExoticComponent<Omit<STwoPaneLayoutProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default STwoPaneLayout;

package/dist/s-two-pane-layout/s-two-pane-layout.js

@@ -1,102 +1,171 @@
-import { SFlexBox as e } from "../s-flex-box/s-flex-box.js";
+import { toSxArray as e } from "../utils/sx.js";
 import { SOverlayScrollbar as t } from "../s-overlay-scrollbar/s-overlay-scrollbar.js";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Box as a } from "@mui/material";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Box as a, styled as o, useThemeProps as s } from "@mui/material";
+import c from "@mui/utils/appendOwnerState";
 //#region lib/s-two-pane-layout/s-two-pane-layout.tsx
-var o = ({ sidebar: o, content: s, sidebarWidth: c = 280, height: l = "calc(100vh - 65px)", containerSx: u, sidebarSx: d, contentSx: f, sidebarHeaderSx: p, contentHeaderSx: m, sidebarScrollSx: h, contentScrollSx: g, disableBorder: _ = !1, sidebarHeader: v, contentHeader: y, enableSidebarScroll: b = !0, enableContentScroll: x = !1, sidebarPosition: S = "left", sidebarPadding: C = 1, contentPadding: w = 1, sidebarHeaderPadding: T = 2, contentHeaderPadding: E = 2, headerHeight: D = "40px" }) => {
-	let O = /* @__PURE__ */ i(a, {
-		sx: {
-			width: c,
-			borderRight: +(!_ && S === "left"),
-			borderLeft: +(!_ && S === "right"),
-			borderColor: "divider",
-			display: "flex",
-			flexDirection: "column",
-			...d
-		},
-		children: [v && /* @__PURE__ */ r(a, {
-			sx: {
-				p: T,
-				height: D,
-				borderBottom: 1,
-				borderColor: "divider",
-				display: "flex",
-				alignItems: "center",
-				...p
-			},
-			children: v
+var l = () => ({
+	display: "flex",
+	height: "calc(100vh - 65px)",
+	overflow: "hidden",
+	width: "100%"
+}), u = ({ ownerState: e, theme: t }) => ({
+	borderLeft: !e.disableDivider && e.sidebarPosition === "right" ? `1px solid ${(t.vars ?? t).palette.divider}` : 0,
+	borderRight: !e.disableDivider && e.sidebarPosition === "left" ? `1px solid ${(t.vars ?? t).palette.divider}` : 0,
+	display: "flex",
+	flexDirection: "column",
+	flexShrink: 0,
+	width: e.sidebarWidth
+}), d = ({ theme: e }) => ({
+	alignItems: "center",
+	borderBottom: `1px solid ${(e.vars ?? e).palette.divider}`,
+	display: "flex",
+	flexShrink: 0,
+	height: 40,
+	padding: e.spacing(2)
+}), f = ({ ownerState: e, theme: t }) => ({
+	padding: t.spacing(2),
+	...!e.scrollSidebar && {
+		height: "100%",
+		overflow: "hidden"
+	}
+}), p = () => ({
+	display: "flex",
+	flex: 1,
+	flexDirection: "column",
+	height: "100%",
+	minWidth: 0
+}), m = ({ ownerState: e, theme: t }) => ({
+	padding: t.spacing(2),
+	...!e.scrollContent && { height: "100%" }
+}), h = o(a, {
+	name: "STwoPaneLayout",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(l), g = o(a, {
+	name: "STwoPaneLayout",
+	slot: "Sidebar"
+})(u), ee = o(a, {
+	name: "STwoPaneLayout",
+	slot: "SidebarHeader"
+})(d), _ = o(a, {
+	name: "STwoPaneLayout",
+	slot: "SidebarViewport"
+})(f), v = o(t, {
+	name: "STwoPaneLayout",
+	slot: "SidebarScroller"
+})({}), y = o(a, {
+	name: "STwoPaneLayout",
+	slot: "Content"
+})(p), te = o(a, {
+	name: "STwoPaneLayout",
+	slot: "ContentHeader"
+})(d), ne = o(a, {
+	name: "STwoPaneLayout",
+	slot: "ContentViewport"
+})(m), b = o(t, {
+	name: "STwoPaneLayout",
+	slot: "ContentScroller"
+})({});
+function x(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+function S(e) {
+	let { sx: t, ...n } = e ?? {};
+	return {
+		other: n,
+		sx: t
+	};
+}
+function C(e, t, n) {
+	return e ? (e) => t({
+		ownerState: n,
+		theme: e
+	}) : void 0;
+}
+var w = n.forwardRef(function(t, o) {
+	let l = s({
+		props: t,
+		name: "STwoPaneLayout"
+	}), { children: w, contentHeader: T, disableDivider: E = !1, scrollContent: D = !1, scrollSidebar: O = !0, sidebar: k, sidebarHeader: A, sidebarPosition: j = "left", sidebarWidth: M = 280, slotProps: N, slots: P, sx: F, ...I } = l, L = {
+		...l,
+		disableDivider: E,
+		scrollContent: D,
+		scrollSidebar: O,
+		sidebarPosition: j,
+		sidebarWidth: M
+	}, R = P?.sidebar ?? g, z = P?.sidebarHeader ?? ee, B = P?.sidebarViewport ?? _, V = P?.sidebarScroller ?? v, H = P?.content ?? y, U = P?.contentHeader ?? te, W = P?.contentViewport ?? ne, G = P?.contentScroller ?? b, K = S(c(P?.sidebar, x(N?.sidebar, L) ?? {}, L)), q = S(c(P?.sidebarHeader, x(N?.sidebarHeader, L) ?? {}, L)), J = S(c(P?.sidebarViewport, x(N?.sidebarViewport, L) ?? {}, L)), Y = S(c(P?.content, x(N?.content, L) ?? {}, L)), X = S(c(P?.contentHeader, x(N?.contentHeader, L) ?? {}, L)), Z = S(c(P?.contentViewport, x(N?.contentViewport, L) ?? {}, L)), re = c(P?.sidebarScroller, x(N?.sidebarScroller, L) ?? {}, L), ie = c(P?.contentScroller, x(N?.contentScroller, L) ?? {}, L), Q = /* @__PURE__ */ i(R, {
+		...K.other,
+		...!P?.sidebar && { ownerState: L },
+		sx: [...e(C(P?.sidebar, u, L)), ...e(K.sx)],
+		children: [A == null ? null : /* @__PURE__ */ r(z, {
+			...q.other,
+			...!P?.sidebarHeader && { ownerState: L },
+			sx: [...e(C(P?.sidebarHeader, d, L)), ...e(q.sx)],
+			children: A
 		}), /* @__PURE__ */ r(a, {
 			sx: {
 				flex: 1,
-				minHeight: 0
+				minHeight: 0,
+				overflow: "hidden"
 			},
-			children: b ? /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(a, {
-				sx: {
-					p: C,
-					...h
-				},
-				children: o
-			}) }) : /* @__PURE__ */ r(a, {
-				sx: {
-					p: C,
-					height: "100%",
-					overflow: "hidden",
-					...h
-				},
-				children: o
+			children: O ? /* @__PURE__ */ r(V, {
+				...re,
+				...!P?.sidebarScroller && { ownerState: L },
+				children: /* @__PURE__ */ r(B, {
+					...J.other,
+					...!P?.sidebarViewport && { ownerState: L },
+					sx: [...e(C(P?.sidebarViewport, f, L)), ...e(J.sx)],
+					children: k
+				})
+			}) : /* @__PURE__ */ r(B, {
+				...J.other,
+				...!P?.sidebarViewport && { ownerState: L },
+				sx: [...e(C(P?.sidebarViewport, f, L)), ...e(J.sx)],
+				children: k
 			})
 		})]
-	}), k = /* @__PURE__ */ i(a, {
-		sx: {
-			height: "100%",
-			flex: 1,
-			display: "flex",
-			flexDirection: "column",
-			...f
-		},
-		children: [y && /* @__PURE__ */ r(a, {
-			sx: {
-				p: E,
-				height: D,
-				borderBottom: 1,
-				borderColor: "divider",
-				display: "flex",
-				alignItems: "center",
-				...m
-			},
-			children: y
+	}), $ = /* @__PURE__ */ i(H, {
+		...Y.other,
+		...!P?.content && { ownerState: L },
+		sx: [...e(C(P?.content, p, L)), ...e(Y.sx)],
+		children: [T == null ? null : /* @__PURE__ */ r(U, {
+			...X.other,
+			...!P?.contentHeader && { ownerState: L },
+			sx: [...e(C(P?.contentHeader, d, L)), ...e(X.sx)],
+			children: T
 		}), /* @__PURE__ */ r(a, {
 			sx: {
 				flex: 1,
-				overflow: x ? "auto" : "hidden"
+				minHeight: 0,
+				overflow: "hidden"
 			},
-			children: x ? /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(a, {
-				sx: {
-					p: w,
-					...g
-				},
-				children: s
-			}) }) : /* @__PURE__ */ r(a, {
-				sx: {
-					p: w,
-					height: "100%",
-					...g
-				},
-				children: s
+			children: D ? /* @__PURE__ */ r(G, {
+				...ie,
+				...!P?.contentScroller && { ownerState: L },
+				children: /* @__PURE__ */ r(W, {
+					...Z.other,
+					...!P?.contentViewport && { ownerState: L },
+					sx: [...e(C(P?.contentViewport, m, L)), ...e(Z.sx)],
+					children: w
+				})
+			}) : /* @__PURE__ */ r(W, {
+				...Z.other,
+				...!P?.contentViewport && { ownerState: L },
+				sx: [...e(C(P?.contentViewport, m, L)), ...e(Z.sx)],
+				children: w
 			})
 		})]
 	});
-	return /* @__PURE__ */ r(e, {
-		sx: {
-			height: l,
-			flexDirection: "row",
-			width: "100%",
-			overflow: "hidden",
-			...u
-		},
-		children: S === "left" ? /* @__PURE__ */ i(n, { children: [O, k] }) : /* @__PURE__ */ i(n, { children: [k, O] })
+	return /* @__PURE__ */ r(h, {
+		...I,
+		ownerState: L,
+		ref: o,
+		sx: e(F),
+		children: j === "left" ? /* @__PURE__ */ i(n.Fragment, { children: [Q, $] }) : /* @__PURE__ */ i(n.Fragment, { children: [$, Q] })
 	});
-};
-o.displayName = "STwoPaneLayout";
+});
+w.displayName = "STwoPaneLayout";
 //#endregion
-export { o as STwoPaneLayout, o as default };
+export { w as STwoPaneLayout, w as default };

package/dist/s-typewriter-text/index.d.ts

@@ -1,2 +1,3 @@
-export type { STypewriterTextProps } from './s-typewriter-text';
+export type { STypewriterTextComponent, STypewriterTextOwnerState, STypewriterTextProps } from './s-typewriter-text';
 export { default, default as STypewriterText } from './s-typewriter-text';
+export type {} from '../theme/component-augmentation';

package/dist/s-typewriter-text/s-typewriter-text.d.ts

@@ -1,8 +1,9 @@
 import { TypographyProps } from '@mui/material';
+import * as React from 'react';
 /**
  * Props interface for STypewriterText component
  */
-export interface STypewriterTextProps extends Omit<TypographyProps, 'children'> {
+export type STypewriterTextProps<RootComponent extends React.ElementType = 'span'> = Omit<TypographyProps<RootComponent>, 'children'> & {
     /** The text to display with typewriter effect. Can be a single string or array of strings for sequential display. */
     text: string | string[];
     /** Speed of typing animation in milliseconds per character */
@@ -17,9 +18,19 @@ export interface STypewriterTextProps extends Omit<TypographyProps, 'children'>
     deleteSpeed?: number;
     /** Delay in milliseconds before deleting text (when looping) */
     delay?: number;
-}
-export declare const STypewriterText: {
-    ({ text, speed, cursor, cursorBlinking, loop, deleteSpeed, delay, ...typographyProps }: STypewriterTextProps): React.JSX.Element;
-    displayName: string;
+    /** Root element or component rendered by MUI Typography. */
+    component?: RootComponent;
 };
+export interface STypewriterTextOwnerState {
+    cursorBlinking: boolean;
+    deleting: boolean;
+    loop: boolean;
+}
+export interface STypewriterTextComponent {
+    <RootComponent extends React.ElementType = 'span'>(props: STypewriterTextProps<RootComponent> & {
+        ref?: React.ComponentPropsWithRef<RootComponent>['ref'];
+    }): React.JSX.Element;
+    displayName?: string;
+}
+export declare const STypewriterText: STypewriterTextComponent;
 export default STypewriterText;