@solostylist/ui-kit 1.0.230 → 2.0.1

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

@@ -1,12 +1,34 @@
-import { default as React } from 'react';
-import { SwitchProps } from '@mui/material';
-/**
- * Props interface for SSwitch component - extends Material-UI SwitchProps
- * but removes 'content' to avoid conflicts with our custom content prop
- */
-export interface SSwitchProps extends Omit<SwitchProps, 'content'> {
-    /** Content displayed as a clickable label next to the switch */
-    content?: string | React.ReactNode;
-}
-export declare const SSwitch: React.ForwardRefExoticComponent<Omit<SSwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+import { FormControlLabelProps } from '@mui/material/FormControlLabel';
+import { SwitchProps } from '@mui/material/Switch';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SSwitchOwnerState {
+    disabled: boolean;
+    labelPlacement: NonNullable<FormControlLabelProps['labelPlacement']>;
+    required: boolean;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SSwitchOwnerState>;
+type ManagedControlProps = 'checked' | 'disabled' | 'inputRef' | 'name' | 'onChange' | 'required' | 'value';
+export interface SSwitchSlots {
+    /** Component used for the switch control. */
+    control?: React.ElementType;
+    /** Component used for the label text. */
+    typography?: React.ElementType;
+}
+export interface SSwitchSlotProps {
+    /** Props for the switch control. State managed by FormControlLabel stays on the root. */
+    control?: OwnerStateSlotProps<Omit<SwitchProps, ManagedControlProps>>;
+    /** Props forwarded to FormControlLabel's typography slot. */
+    typography?: NonNullable<FormControlLabelProps['slotProps']>['typography'];
+}
+/** A labelled MUI Switch composition with FormControlLabel-compatible root props. */
+export interface SSwitchProps extends Omit<FormControlLabelProps, 'control' | 'label' | 'slots' | 'slotProps'> {
+    /** Visible, clickable label for the switch. */
+    label: React.ReactNode;
+    /** Components used for the control and typography slots. */
+    slots?: SSwitchSlots;
+    /** Props or owner-state callbacks for the component slots. */
+    slotProps?: SSwitchSlotProps;
+}
+export declare const SSwitch: React.ForwardRefExoticComponent<Omit<SSwitchProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
 export default SSwitch;

package/dist/s-switch/s-switch.js

@@ -1,38 +1,48 @@
-import { forwardRef as e, useId as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Box as i, Stack as a, Switch as o, Typography as s } from "@mui/material";
+import { styled as e, useThemeProps as t } from "@mui/material/styles";
+import n from "@mui/material/Switch";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import a from "@mui/utils/appendOwnerState";
+import o, { formControlLabelClasses as s } from "@mui/material/FormControlLabel";
 //#region lib/s-switch/s-switch.tsx
-var c = e(({ content: e, disabled: c, ...l }, u) => {
-	let d = t(), f = l.id ?? d, p = {
-		color: c ? "text.disabled" : "inherit",
-		cursor: c ? "not-allowed" : "pointer",
-		userSelect: "none"
-	};
-	return /* @__PURE__ */ r(a, {
-		direction: "row",
-		sx: {
-			alignItems: "center",
-			display: "flex",
-			justifyContent: "space-between"
-		},
-		children: [e && /* @__PURE__ */ n("label", {
-			htmlFor: f,
-			children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ n(s, {
-				sx: p,
-				children: e
-			}) : /* @__PURE__ */ n(i, {
-				component: "span",
-				sx: p,
-				children: e
-			})
-		}), /* @__PURE__ */ n(o, {
-			ref: u,
-			...l,
-			disabled: c,
-			id: f
-		})]
+var c = e(o, {
+	name: "SSwitch",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	display: "flex",
+	justifyContent: "space-between",
+	margin: 0,
+	userSelect: "none",
+	[`&&.${s.disabled}`]: { cursor: "not-allowed" },
+	[`&& .${s.label}.${s.disabled}`]: { color: (e.vars ?? e).palette.text.disabled }
+}));
+function l(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var u = r.forwardRef(function(e, r) {
+	let o = t({
+		props: e,
+		name: "SSwitch"
+	}), { disabled: s = !1, label: u, labelPlacement: d = "start", required: f = !1, slotProps: p, slots: m, ...h } = o, g = {
+		...o,
+		disabled: s,
+		labelPlacement: d,
+		required: f
+	}, _ = m?.control ?? n, v = l(p?.control, g), y = a(m?.control, v ?? {}, g);
+	return /* @__PURE__ */ i(c, {
+		...h,
+		control: /* @__PURE__ */ i(_, { ...y }),
+		disabled: s,
+		label: u,
+		labelPlacement: d,
+		ownerState: g,
+		ref: r,
+		required: f,
+		slots: m?.typography ? { typography: m.typography } : void 0,
+		slotProps: p?.typography ? { typography: p.typography } : void 0
 	});
 });
-c.displayName = "SSwitch";
+u.displayName = "SSwitch";
 //#endregion
-export { c as SSwitch, c as default };
+export { u as SSwitch, u as default };

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

@@ -1,6 +1,8 @@
-export { default as STabs } from './s-tabs';
-export type { STabsProps, STabItem } from './s-tabs';
+export { default, default as STabs } from './s-tabs';
+export type { STabItem, STabOwnerState, STabsOwnerState, STabsProps, STabsSlotProps, STabsSlots, STabValue, } from './s-tabs';
 export { default as STab } from './s-tab';
 export type { STabProps } from './s-tab';
 export { default as STabPanel } from './s-tab-panel';
-export type { STabPanelProps } from './s-tab-panel';
+export type { STabPanelOwnerState, STabPanelProps } from './s-tab-panel';
+export { getTabId, getTabPanelId } from './tab-ids';
+export type {} from '../theme/component-augmentation';

package/dist/s-tabs/index.js

@@ -1,4 +1,5 @@
-import { STabs as e } from "./s-tabs.js";
-import t from "./s-tab.js";
-import { STabPanel as n } from "./s-tab-panel.js";
-export { t as STab, n as STabPanel, e as STabs };
+import { getTabId as e, getTabPanelId as t } from "./tab-ids.js";
+import { STabs as n } from "./s-tabs.js";
+import { STab as r } from "./s-tab.js";
+import { STabPanel as i } from "./s-tab-panel.js";
+export { r as STab, i as STabPanel, n as STabs, n as default, e as getTabId, t as getTabPanelId };

package/dist/s-tabs/s-tab-panel.d.ts

@@ -1,17 +1,19 @@
-import { default as React } from 'react';
 import { BoxProps } from '@mui/material';
-/**
- * Props interface for STabPanel component
- */
-export interface STabPanelProps extends BoxProps {
-    /** Content to display in the tab panel */
+import * as React from 'react';
+export interface STabPanelProps extends Omit<BoxProps, 'component'> {
+    /** Content displayed by the panel. */
     children?: React.ReactNode;
-    /** Index (or value) of this specific tab panel */
+    /** Value represented by this panel. */
     index: number | string;
-    /** Current active tab index (or value) from the parent tabs component */
-    value: number | string;
-    /** Keep the panel mounted in the DOM when not active */
+    /** Shared ID prefix used by the related STabs instance. */
+    idPrefix: string;
+    /** Keep the panel content mounted while inactive. */
     keepMounted?: boolean;
+    /** Current selected value. */
+    value: number | string;
 }
+export type STabPanelOwnerState = STabPanelProps & {
+    active: boolean;
+};
 export declare const STabPanel: React.ForwardRefExoticComponent<Omit<STabPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default STabPanel;

package/dist/s-tabs/s-tab-panel.js

@@ -1,23 +1,30 @@
-import { forwardRef as e } from "react";
-import { jsx as t } from "react/jsx-runtime";
-import { Box as n } from "@mui/material";
+import { getTabId as e, getTabPanelId as t } from "./tab-ids.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { Box as i, styled as a, useThemeProps as o } from "@mui/material";
 //#region lib/s-tabs/s-tab-panel.tsx
-var r = e(({ children: e, value: r, index: i, keepMounted: a = !1, sx: o, ...s }, c) => {
-	let l = r === i;
-	return l || a ? /* @__PURE__ */ t(n, {
-		ref: c,
+var s = a(i, {
+	name: "STabPanel",
+	slot: "Root"
+})({}), c = n.forwardRef(function(n, i) {
+	let a = o({
+		props: n,
+		name: "STabPanel"
+	}), { children: c, value: l, index: u, idPrefix: d, keepMounted: f = !1, id: p = t(d, u), ...m } = a, h = l === u, g = {
+		...a,
+		active: h
+	};
+	return /* @__PURE__ */ r(s, {
+		...m,
+		ref: i,
 		role: "tabpanel",
-		hidden: !l,
-		id: `tabpanel-${i}`,
-		"aria-labelledby": `tab-${i}`,
-		sx: {
-			...o,
-			display: l ? "block" : "none"
-		},
-		...s,
-		children: e
-	}) : null;
+		hidden: !h,
+		id: p,
+		"aria-labelledby": e(d, u),
+		ownerState: g,
+		children: (f || h) && c
+	});
 });
-r.displayName = "STabPanel";
+c.displayName = "STabPanel";
 //#endregion
-export { r as STabPanel, r as default };
+export { c as STabPanel, c as default };

package/dist/s-tabs/s-tab.d.ts

@@ -1,5 +1,6 @@
-import { default as React } from 'react';
 import { TabProps } from '@mui/material';
+/** Exact MUI Tab props, including polymorphic `component` support. */
 export type STabProps = TabProps;
-declare const STab: React.ForwardRefExoticComponent<Omit<STabProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** SoloStylist export of the unmodified MUI Tab contract. */
+export declare const STab: import('@mui/material').ExtendButtonBase<import('@mui/material').TabTypeMap<{}, "div">>;
 export default STab;

package/dist/s-tabs/s-tab.js

@@ -1,11 +1,5 @@
-import { forwardRef as e } from "react";
-import { jsx as t } from "react/jsx-runtime";
-import { Tab as n } from "@mui/material";
+import { Tab as e } from "@mui/material";
 //#region lib/s-tabs/s-tab.tsx
-var r = e((e, r) => /* @__PURE__ */ t(n, {
-	ref: r,
-	...e
-}));
-r.displayName = "STab";
+var t = e;
 //#endregion
-export { r as default };
+export { t as STab, t as default };

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

@@ -1,38 +1,52 @@
-import { default as React } from 'react';
 import { BoxProps, TabProps, TabsProps } from '@mui/material';
-/**
- * Props interface for STabs component
- */
-export interface STabsProps extends Omit<TabsProps, 'children'> {
-    /** Array of tab configuration objects defining the tabs to display */
-    tabs: STabItem[];
-    /** Index of the currently active tab. Set to false for uncontrolled mode */
-    activeTab?: number | string | false;
-    /** Callback function called when a tab is selected */
-    onTabChange?: (event: React.SyntheticEvent, value: number | string) => void;
-    /** Tab panel content. Children are matched to tabs by index */
-    children?: React.ReactNode;
-    /** Additional props passed to the tab panel wrapper Box component */
-    tabPanelProps?: BoxProps;
-}
-/**
- * Configuration object interface for individual tabs in STabs
- */
-export interface STabItem {
-    /** The content displayed in the tab */
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export type STabValue = number | string | false;
+export interface STabItem extends Omit<TabProps, 'aria-controls' | 'id' | 'label' | 'value'> {
+    /** The content displayed in the tab. */
     label: React.ReactNode;
-    /** Custom value for the tab. If not provided, uses the tab index */
+    /** Stable value for controlled selection. Defaults to the item index. */
     value?: number | string;
-    /** Whether the tab is disabled and cannot be selected */
-    disabled?: boolean;
-    /** Icon element to display in the tab */
-    icon?: React.ReactElement;
-    /** Position of the icon relative to the label */
-    iconPosition?: 'start' | 'end' | 'top' | 'bottom';
-    /** Whether the tab label should wrap to multiple lines */
-    wrapped?: boolean;
-    /** Additional props passed to the underlying Material-UI Tab component */
-    tabProps?: Omit<TabProps, 'label' | 'value' | 'disabled' | 'icon' | 'iconPosition' | 'wrapped'>;
+}
+export type STabsOwnerState = STabsProps & {
+    activeIndex: number;
+    orientation: NonNullable<TabsProps['orientation']>;
+    value: STabValue;
+};
+export interface STabOwnerState extends STabsOwnerState {
+    index: number;
+    item: STabItem;
+}
+type SlotProps<Props, OwnerState> = MuiOwnerStateSlotProps<Props, OwnerState>;
+export interface STabsSlots {
+    list?: React.ElementType;
+    panel?: React.ElementType;
+    root?: React.ElementType;
+    tab?: React.ElementType;
+}
+export interface STabsSlotProps {
+    list?: SlotProps<Omit<TabsProps, 'children' | 'onChange' | 'orientation' | 'value'>, STabsOwnerState>;
+    panel?: SlotProps<Omit<BoxProps, 'aria-labelledby' | 'component' | 'id' | 'role'>, STabsOwnerState>;
+    root?: SlotProps<Omit<BoxProps, 'component'>, STabsOwnerState>;
+    tab?: SlotProps<Omit<TabProps, 'aria-controls' | 'id' | 'label' | 'value'>, STabOwnerState>;
+}
+export interface STabsProps extends Omit<BoxProps, 'children' | 'component' | 'defaultValue' | 'onChange' | 'value'> {
+    /** Tab panel content matched to tab items by index. */
+    children?: React.ReactNode;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: STabValue;
+    /** Tabs orientation. */
+    orientation?: TabsProps['orientation'];
+    /** Called when the selected tab changes. */
+    onChange?: (event: React.SyntheticEvent, value: STabValue) => void;
+    /** Components used for each structural slot. */
+    slots?: STabsSlots;
+    /** Props or owner-state callbacks for each structural slot. */
+    slotProps?: STabsSlotProps;
+    /** Tab definitions. Standard MUI Tab props are accepted directly on each item. */
+    tabs: STabItem[];
+    /** Current value for controlled usage. */
+    value?: STabValue;
 }
 export declare const STabs: React.ForwardRefExoticComponent<Omit<STabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default STabs;

package/dist/s-tabs/s-tabs.js

@@ -1,42 +1,81 @@
-import e, { forwardRef as t } from "react";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Box as a, Tab as o, Tabs as s } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import { getTabId as t, getTabPanelId as n } from "./tab-ids.js";
+import * as r from "react";
+import { createElement as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Box as s, Tab as c, Tabs as l, styled as u, useThemeProps as d } from "@mui/material";
+import { mergeSlotProps as f, useControlled as p, useForkRef as m } from "@mui/material/utils";
+import h from "@mui/utils/appendOwnerState";
 //#region lib/s-tabs/s-tabs.tsx
-function c(e, t) {
-	return typeof e.value == "string" || typeof e.value == "number" ? e.value : typeof e.label == "string" || typeof e.label == "number" ? e.label : `tab-${t}-${e.disabled ? "disabled" : "enabled"}-${e.iconPosition ?? "start"}`;
+var g = u(s, {
+	name: "STabs",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({});
+function _(e, t) {
+	return typeof e == "function" ? e(t) : e;
 }
-var l = t(({ tabs: t, activeTab: l = 0, onTabChange: u, children: d, tabPanelProps: f, ...p }, m) => {
-	let [h, g] = e.useState(l);
-	e.useEffect(() => {
-		l !== !1 && g(l);
-	}, [l]);
-	let _ = (e, t) => {
-		l === !1 && g(t), u?.(e, t);
-	}, v = p.orientation === "vertical", { sx: y, ...b } = f ?? {}, x = /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(s, {
-		ref: m,
-		value: h,
-		onChange: _,
-		...p,
-		children: t.map((e, t) => /* @__PURE__ */ r(o, {
-			label: e.label,
-			value: e.value ?? t,
-			disabled: e.disabled,
-			icon: e.icon,
-			iconPosition: e.iconPosition,
-			wrapped: e.wrapped,
-			...e.tabProps
-		}, c(e, t)))
-	}), d && /* @__PURE__ */ r(a, {
-		role: "tabpanel",
+function v(e, t) {
+	return e.value ?? t;
+}
+var y = r.forwardRef(function(u, y) {
+	let b = d({
+		props: u,
+		name: "STabs"
+	}), { children: x, defaultValue: ee, id: S, onChange: C, orientation: w = "horizontal", slotProps: T, slots: E, sx: D, tabs: O, value: k, ...A } = b, j = r.useId(), M = S ?? j, N = O[0]?.value ?? 0, [P, F] = p({
+		controlled: k,
+		default: ee ?? N,
+		name: "STabs",
+		state: "value"
+	}), I = O.findIndex((e, t) => (e.value ?? t) === P), L = I >= 0 ? O[I]?.value ?? I : !1, R = {
 		...b,
-		sx: [{ padding: 2 }, ...Array.isArray(y) ? y : [y]],
-		children: e.Children.toArray(d)[t.findIndex((e, t) => (e.value ?? t) === h)]
-	})] });
-	return v ? /* @__PURE__ */ r(a, {
-		sx: { display: "flex" },
-		children: x
-	}) : x;
+		activeIndex: I,
+		orientation: w,
+		value: P
+	}, z = E?.root ?? g, B = E?.list ?? l, V = E?.tab ?? c, H = E?.panel ?? s, U = _(T?.root, R), W = _(T?.list, R), G = _(T?.panel, R), { sx: K, ...q } = U ?? {}, { sx: J, ...Y } = G ?? {}, { ref: X, ...Z } = h(z, q, R), Q = m(X, y), $ = h(E?.list, W ?? {}, R), te = h(E?.panel, Y, R), ne = (e, t) => {
+		F(t), C?.(e, t);
+	};
+	return /* @__PURE__ */ o(z, {
+		...A,
+		...Z,
+		ref: Q,
+		id: M,
+		sx: [
+			{ display: w === "vertical" ? "flex" : "block" },
+			...e(D),
+			...e(K)
+		],
+		children: [/* @__PURE__ */ a(B, {
+			"aria-label": "Tabs",
+			...$,
+			value: P,
+			orientation: w,
+			onChange: ne,
+			children: O.map((e, r) => {
+				let a = e.value ?? r, o = {
+					...R,
+					index: r,
+					item: e
+				}, s = f(_(T?.tab, o), e);
+				return /* @__PURE__ */ i(V, {
+					...h(E?.tab, s, o),
+					key: v(e, r),
+					id: t(M, a),
+					"aria-controls": n(M, a),
+					label: e.label,
+					value: a
+				});
+			})
+		}), x && L !== !1 ? /* @__PURE__ */ a(H, {
+			...te,
+			role: "tabpanel",
+			id: n(M, L),
+			"aria-labelledby": t(M, L),
+			sx: [{ p: 2 }, ...e(J)],
+			children: r.Children.toArray(x)[I]
+		}) : null]
+	});
 });
-l.displayName = "STabs";
+y.displayName = "STabs";
 //#endregion
-export { l as STabs, l as default };
+export { y as STabs, y as default };

package/dist/s-tabs/tab-ids.d.ts

@@ -0,0 +1,3 @@
+import { STabValue } from './s-tabs';
+export declare function getTabId(idPrefix: string, value: Exclude<STabValue, false>): string;
+export declare function getTabPanelId(idPrefix: string, value: Exclude<STabValue, false>): string;

package/dist/s-tabs/tab-ids.js

@@ -0,0 +1,9 @@
+//#region lib/s-tabs/tab-ids.ts
+function e(e, t) {
+	return `${e}-tab-${String(t)}`;
+}
+function t(e, t) {
+	return `${e}-panel-${String(t)}`;
+}
+//#endregion
+export { e as getTabId, t as getTabPanelId };

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

@@ -1,4 +1,6 @@
 export { default, default as STextEditor } from './s-text-editor';
-export type { STextEditorProps } from './s-text-editor';
+export type { STextEditorOwnerState, STextEditorProps } from './s-text-editor';
 export { STextEditorToolbar } from './s-text-editor-toolbar';
-export type { STextEditorToolbarProps } from './s-text-editor-toolbar';
+export type { STextEditorToolbarOwnerState, STextEditorToolbarProps } from './s-text-editor-toolbar';
+export type {} from '../theme/component-augmentation';
+export type {} from '../theme/optional-component-augmentations/s-text-editor';

package/dist/s-text-editor/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../s-text-editor-toolbar-ChtNCg2A.js";
+import { STextEditorToolbar as e } from "./s-text-editor-toolbar.js";
 import { STextEditor as t } from "./s-text-editor.js";
 export { t as STextEditor, t as default, e as STextEditorToolbar };

package/dist/s-text-editor/s-text-editor-toolbar.d.ts

@@ -1,10 +1,17 @@
+import { StackProps } from '@mui/material/Stack';
 import { Editor } from '@tiptap/react';
 import * as React from 'react';
 /**
  * Props for the STextEditorToolbar component
  */
-export interface STextEditorToolbarProps {
+export interface STextEditorToolbarProps extends Omit<StackProps, 'children'> {
+    /** Whether toolbar controls are disabled. */
+    disabled?: boolean;
     /** The Tiptap editor instance - null when editor is not yet initialized */
     editor: Editor | null;
 }
-export declare const STextEditorToolbar: ({ editor }: STextEditorToolbarProps) => React.JSX.Element;
+export type STextEditorToolbarOwnerState = Omit<STextEditorToolbarProps, 'disabled'> & {
+    disabled: boolean;
+    editorReady: boolean;
+};
+export declare const STextEditorToolbar: React.ForwardRefExoticComponent<Omit<STextEditorToolbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;