@solostylist/ui-kit 1.0.230 → 2.0.0

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

@@ -1,42 +1,83 @@
-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 { t } from "../useForkRef-CKneCEtr.js";
+import { t as n } from "../appendOwnerState-CELpvdMz.js";
+import { t as r } from "../useControlled-BeB0W_Ui.js";
+import { t as i } from "../mergeSlotProps-xl1-PgWL.js";
+import { getTabId as a, getTabPanelId as o } from "./tab-ids.js";
+import * as s from "react";
+import { createElement as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Box as d, Tab as f, Tabs as p, styled as m, useThemeProps as h } from "@mui/material";
 //#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 = m(d, {
+	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 = s.forwardRef(function(m, y) {
+	let b = h({
+		props: m,
+		name: "STabs"
+	}), { children: x, defaultValue: S, id: C, onChange: w, orientation: T = "horizontal", slotProps: E, slots: D, sx: O, tabs: k, value: A, ...j } = b, M = s.useId(), N = C ?? M, P = k[0]?.value ?? 0, [F, I] = r({
+		controlled: A,
+		default: S ?? P,
+		name: "STabs",
+		state: "value"
+	}), L = k.findIndex((e, t) => (e.value ?? t) === F), R = L >= 0 ? k[L]?.value ?? L : !1, z = {
 		...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: L,
+		orientation: T,
+		value: F
+	}, B = D?.root ?? g, V = D?.list ?? p, H = D?.tab ?? f, U = D?.panel ?? d, W = _(E?.root, z), G = _(E?.list, z), K = _(E?.panel, z), { sx: q, ...J } = W ?? {}, { sx: Y, ...X } = K ?? {}, { ref: Z, ...Q } = n(B, J, z), $ = t(Z, y), ee = n(D?.list, G ?? {}, z), te = n(D?.panel, X, z), ne = (e, t) => {
+		I(t), w?.(e, t);
+	};
+	return /* @__PURE__ */ u(B, {
+		...j,
+		...Q,
+		ref: $,
+		id: N,
+		sx: [
+			{ display: T === "vertical" ? "flex" : "block" },
+			...e(O),
+			...e(q)
+		],
+		children: [/* @__PURE__ */ l(V, {
+			"aria-label": "Tabs",
+			...ee,
+			value: F,
+			orientation: T,
+			onChange: ne,
+			children: k.map((e, t) => {
+				let r = e.value ?? t, s = {
+					...z,
+					index: t,
+					item: e
+				}, l = i(_(E?.tab, s), e);
+				return /* @__PURE__ */ c(H, {
+					...n(D?.tab, l, s),
+					key: v(e, t),
+					id: a(N, r),
+					"aria-controls": o(N, r),
+					label: e.label,
+					value: r
+				});
+			})
+		}), x && R !== !1 ? /* @__PURE__ */ l(U, {
+			...te,
+			role: "tabpanel",
+			id: o(N, R),
+			"aria-labelledby": a(N, R),
+			sx: [{ p: 2 }, ...e(Y)],
+			children: s.Children.toArray(x)[L]
+		}) : 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 { t as e } from "../s-text-editor-toolbar-D-XgFQix.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>>;

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

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

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

@@ -1,9 +1,10 @@
+import { BoxProps } from '@mui/material/Box';
 import { EditorOptions } from '@tiptap/react';
 import * as React from 'react';
 /**
  * Props interface for STextEditor component
  */
-export interface STextEditorProps {
+export interface STextEditorProps extends Omit<BoxProps, 'children' | 'component' | 'content' | 'onUpdate'> {
     /** Initial content for the editor (HTML string or Tiptap JSON) */
     content: EditorOptions['content'];
     /** Whether the editor content can be modified */
@@ -15,5 +16,9 @@ export interface STextEditorProps {
     /** Placeholder text shown when editor is empty */
     placeholder?: string;
 }
-export declare const STextEditor: React.ForwardRefExoticComponent<STextEditorProps & React.RefAttributes<HTMLDivElement>>;
+export interface STextEditorOwnerState {
+    editable: boolean;
+    hideToolbar: boolean;
+}
+export declare const STextEditor: React.ForwardRefExoticComponent<Omit<STextEditorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default STextEditor;

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

@@ -1,46 +1,67 @@
-import { tint as e } from "../theme/utils.js";
-import { t } from "../Box-BlmynALm.js";
-import { t as n } from "../s-text-editor-toolbar-ChtNCg2A.js";
-import * as r from "react";
-import { forwardRef as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Placeholder as s } from "@tiptap/extension-placeholder";
-import { EditorContent as c, useEditor as l } from "@tiptap/react";
-import { StarterKit as u } from "@tiptap/starter-kit";
+import { t as e } from "../Box-9oeZgA1U.js";
+import { t } from "../styled-Bog8QCl3.js";
+import { t as n } from "../useThemeProps-Cr28OQu3.js";
+import { toSxArray as r } from "../utils/sx.js";
+import { tint as i } from "../theme/utils.js";
+import { t as a } from "../s-text-editor-toolbar-D-XgFQix.js";
+import * as o from "react";
+import { forwardRef as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Placeholder as u } from "@tiptap/extension-placeholder";
+import { EditorContent as d, useEditor as f } from "@tiptap/react";
+import { StarterKit as p } from "@tiptap/starter-kit";
 //#region lib/s-text-editor/s-text-editor.tsx
-var d = i(({ content: i, editable: d = !0, hideToolbar: f, onUpdate: p = () => {}, placeholder: m }, h) => {
-	let g = l({
-		extensions: [u.configure({ link: {
+var m = t(e, {
+	name: "STextEditor",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), h = s((e, t) => {
+	let s = n({
+		props: e,
+		name: "STextEditor"
+	}), { content: h, editable: g = !0, hideToolbar: _ = !1, onUpdate: v = () => {}, placeholder: y, sx: b, ...x } = s, S = {
+		...s,
+		editable: g,
+		hideToolbar: _
+	}, C = o.useRef(y);
+	C.current = y;
+	let w = f({
+		extensions: o.useMemo(() => [p.configure({ link: {
 			openOnClick: !1,
 			autolink: !0
-		} }), s.configure({
+		} }), u.configure({
 			emptyEditorClass: "is-editor-empty",
-			placeholder: m
-		})],
-		content: i,
-		editable: d,
-		onUpdate: p,
+			placeholder: () => C.current ?? ""
+		})], []),
+		content: h,
+		editable: g,
+		onUpdate: v,
 		parseOptions: { preserveWhitespace: "full" }
 	});
-	return r.useEffect(() => {
-		!g || g.isDestroyed || g.getHTML() !== i && g.commands.setContent(i);
-	}, [i, g]), /* @__PURE__ */ o(t, {
-		ref: h,
-		className: "tiptap-root",
-		sx: (t) => ({
+	return o.useEffect(() => {
+		!w || w.isDestroyed || w.setEditable(g);
+	}, [g, w]), o.useEffect(() => {
+		!w || w.isDestroyed || w.view.dispatch(w.state.tr);
+	}, [w, y]), o.useEffect(() => {
+		!w || w.isDestroyed || w.getHTML() !== h && w.commands.setContent(h);
+	}, [h, w]), /* @__PURE__ */ l(m, {
+		...x,
+		ref: t,
+		ownerState: S,
+		sx: [(e) => ({
 			display: "flex",
 			flexDirection: "column",
-			...d && {
-				border: "1px solid",
-				borderColor: "divider",
-				borderRadius: 1,
-				transition: "border 120ms ease-in",
-				"&:hover": { borderColor: (t.vars ?? t).palette.grey[500] },
+			border: "1px solid",
+			borderColor: "divider",
+			borderRadius: 1,
+			transition: "border 120ms ease-in",
+			...g ? {
+				"&:hover": { borderColor: (e.vars ?? e).palette.grey[500] },
 				"&:focus-within": {
-					outline: `3px solid ${e((t.vars ?? t).palette.primary[500], 50)}`,
-					borderColor: (t.vars ?? t).palette.primary[400]
+					outline: `3px solid ${i((e.vars ?? e).palette.primary[500], 50)}`,
+					borderColor: (e.vars ?? e).palette.primary[400]
 				}
-			},
+			} : {},
 			"& .tiptap-container": {
 				display: "flex",
 				flex: "1 1 auto",
@@ -52,7 +73,7 @@ var d = i(({ content: i, editable: d = !0, hideToolbar: f, onUpdate: p = () => {
 				color: "text.primary",
 				flex: "1 1 auto",
 				overflow: "auto",
-				fontSize: t.typography.body1.fontSize,
+				fontSize: e.typography.body1.fontSize,
 				p: "8px 16px",
 				"&:focus-visible": { outline: "none" },
 				"&.resize-cursor": {
@@ -67,13 +88,16 @@ var d = i(({ content: i, editable: d = !0, hideToolbar: f, onUpdate: p = () => {
 					pointerEvents: "none"
 				}
 			}
-		}),
-		children: [f ? /* @__PURE__ */ a("div", {}) : /* @__PURE__ */ a(n, { editor: g }), /* @__PURE__ */ a(c, {
+		}), ...r(b)],
+		children: [_ ? null : /* @__PURE__ */ c(a, {
+			disabled: !g,
+			editor: w
+		}), /* @__PURE__ */ c(d, {
 			className: "tiptap-container",
-			editor: g
+			editor: w
 		})]
 	});
 });
-d.displayName = "STextEditor";
+h.displayName = "STextEditor";
 //#endregion
-export { d as STextEditor, d as default };
+export { h as STextEditor, h as default };