@solostylist/ui-kit 2.0.1 → 2.0.3

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

@@ -1,49 +1,50 @@
 import { toSxArray as e } from "../utils/sx.js";
 import { STextField as t } from "../s-text-field/s-text-field.js";
-import n from "@mui/material/IconButton";
-import * as r from "react";
-import i from "@mui/material/Select";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { MenuItem as s, styled as c, useThemeProps as l } from "@mui/material";
-import u from "@mui/material/Stack";
-import d from "@mui/icons-material/Code";
-import f from "@mui/icons-material/FormatBold";
-import p from "@mui/icons-material/FormatItalic";
-import m from "@mui/icons-material/FormatListBulleted";
-import h from "@mui/icons-material/FormatListNumbered";
-import g from "@mui/icons-material/Link";
-import _ from "@mui/icons-material/StrikethroughS";
-import v from "@mui/material/FormControl";
-import y from "@mui/material/Popover";
+import { SPopover as n } from "../s-popover/s-popover.js";
+import { SPopoverContent as r } from "../s-popover/s-popover-content.js";
+import i from "@mui/material/IconButton";
+import * as a from "react";
+import o from "@mui/material/Select";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { MenuItem as l, styled as u, useThemeProps as d } from "@mui/material";
+import f from "@mui/material/Stack";
+import p from "@mui/icons-material/Code";
+import m from "@mui/icons-material/FormatBold";
+import h from "@mui/icons-material/FormatItalic";
+import g from "@mui/icons-material/FormatListBulleted";
+import _ from "@mui/icons-material/FormatListNumbered";
+import v from "@mui/icons-material/Link";
+import y from "@mui/icons-material/StrikethroughS";
+import b from "@mui/material/FormControl";
 //#region lib/s-text-editor/s-text-editor-toolbar.tsx
-var b = c(u, {
+var x = u(f, {
 	name: "STextEditorToolbar",
 	slot: "Root"
-})({}), x = r.forwardRef(function(n, c) {
-	let x = l({
-		props: n,
+})({}), S = a.forwardRef(function(i, u) {
+	let S = d({
+		props: i,
 		name: "STextEditorToolbar"
-	}), { className: w, disabled: T = !1, editor: E, spacing: D = 1, sx: O, ...k } = x, A = {
-		...x,
-		disabled: T,
-		editorReady: E != null
-	}, [j, M] = r.useState(!1), [N, P] = r.useState(null), [F, I] = r.useState("");
-	return r.useEffect(() => {
-		T && (M(!1), P(null), I(""));
-	}, [T]), /* @__PURE__ */ o(r.Fragment, { children: [/* @__PURE__ */ a(b, {
-		...k,
-		className: ["tiptap-toolbar", w].filter(Boolean).join(" "),
-		ownerState: A,
-		ref: c,
-		spacing: D,
-		"aria-disabled": T || void 0,
+	}), { className: T, disabled: E = !1, editor: D, spacing: O = 1, sx: k, ...A } = S, j = {
+		...S,
+		disabled: E,
+		editorReady: D != null
+	}, [M, N] = a.useState(!1), [P, F] = a.useState(null), [I, L] = a.useState("");
+	return a.useEffect(() => {
+		E && (N(!1), F(null), L(""));
+	}, [E]), /* @__PURE__ */ c(a.Fragment, { children: [/* @__PURE__ */ s(x, {
+		...A,
+		className: ["tiptap-toolbar", T].filter(Boolean).join(" "),
+		ownerState: j,
+		ref: u,
+		spacing: O,
+		"aria-disabled": E || void 0,
 		sx: [{
 			borderBottom: "1px solid",
 			borderColor: "divider",
 			p: "8px",
 			minHeight: "57px"
-		}, ...e(O)],
-		children: E ? /* @__PURE__ */ o(u, {
+		}, ...e(k)],
+		children: D ? /* @__PURE__ */ c(f, {
 			direction: "row",
 			spacing: .5,
 			sx: {
@@ -51,25 +52,25 @@ var b = c(u, {
 				flexWrap: "wrap"
 			},
 			children: [
-				/* @__PURE__ */ o(i, {
-					disabled: T,
+				/* @__PURE__ */ c(o, {
+					disabled: E,
 					inputProps: { "aria-label": "Text format" },
 					onChange: (e) => {
 						let t = e.target.value;
 						if (t) {
 							if (t === "p") {
-								E.chain().focus().setParagraph().run();
+								D.chain().focus().setParagraph().run();
 								return;
 							}
 							if (t.startsWith("h")) {
 								let e = parseInt(t.replace("h", ""));
-								!isNaN(e) && e >= 1 && e <= 6 && E.chain().focus().setHeading({ level: e }).run();
+								!isNaN(e) && e >= 1 && e <= 6 && D.chain().focus().setHeading({ level: e }).run();
 							}
 						}
 					},
-					value: S(E),
-					children: [/* @__PURE__ */ a(s, {
-						disabled: T || !E.can().chain().focus().setParagraph().run(),
+					value: C(D),
+					children: [/* @__PURE__ */ s(l, {
+						disabled: E || !D.can().chain().focus().setParagraph().run(),
 						value: "p",
 						children: "Paragraph"
 					}), [
@@ -79,117 +80,113 @@ var b = c(u, {
 						4,
 						5,
 						6
-					].map((e) => /* @__PURE__ */ o(s, {
-						disabled: T || !E.can().chain().focus().setHeading({ level: e }).run(),
+					].map((e) => /* @__PURE__ */ c(l, {
+						disabled: E || !D.can().chain().focus().setHeading({ level: e }).run(),
 						value: `h${e}`,
 						children: ["Heading ", e]
 					}, e))]
 				}),
-				/* @__PURE__ */ a(C, {
-					active: E.isActive("bold"),
-					disabled: T || !E.can().chain().focus().toggleBold().run(),
+				/* @__PURE__ */ s(w, {
+					active: D.isActive("bold"),
+					disabled: E || !D.can().chain().focus().toggleBold().run(),
 					label: "Bold",
 					onClick: () => {
-						E.chain().focus().toggleBold().run();
+						D.chain().focus().toggleBold().run();
 					},
-					children: /* @__PURE__ */ a(f, {})
+					children: /* @__PURE__ */ s(m, {})
 				}),
-				/* @__PURE__ */ a(C, {
-					active: E.isActive("italic"),
-					disabled: T || !E.can().chain().focus().toggleItalic().run(),
+				/* @__PURE__ */ s(w, {
+					active: D.isActive("italic"),
+					disabled: E || !D.can().chain().focus().toggleItalic().run(),
 					label: "Italic",
 					onClick: () => {
-						E.chain().focus().toggleItalic().run();
+						D.chain().focus().toggleItalic().run();
 					},
-					children: /* @__PURE__ */ a(p, {})
+					children: /* @__PURE__ */ s(h, {})
 				}),
-				/* @__PURE__ */ a(C, {
-					active: E.isActive("strike"),
-					disabled: T || !E.can().chain().focus().toggleStrike().run(),
+				/* @__PURE__ */ s(w, {
+					active: D.isActive("strike"),
+					disabled: E || !D.can().chain().focus().toggleStrike().run(),
 					label: "Strikethrough",
 					onClick: () => {
-						E.chain().focus().toggleStrike().run();
+						D.chain().focus().toggleStrike().run();
 					},
-					children: /* @__PURE__ */ a(_, {})
+					children: /* @__PURE__ */ s(y, {})
 				}),
-				/* @__PURE__ */ a(C, {
-					active: E.isActive("codeBlock"),
-					disabled: T || !E.can().chain().focus().toggleCodeBlock().run(),
+				/* @__PURE__ */ s(w, {
+					active: D.isActive("codeBlock"),
+					disabled: E || !D.can().chain().focus().toggleCodeBlock().run(),
 					label: "Code block",
 					onClick: () => {
-						E.chain().focus().toggleCodeBlock().run();
+						D.chain().focus().toggleCodeBlock().run();
 					},
-					children: /* @__PURE__ */ a(d, {})
+					children: /* @__PURE__ */ s(p, {})
 				}),
-				/* @__PURE__ */ a(C, {
-					active: E.isActive("bulletList"),
-					disabled: T || !E.can().chain().focus().toggleBulletList().run(),
+				/* @__PURE__ */ s(w, {
+					active: D.isActive("bulletList"),
+					disabled: E || !D.can().chain().focus().toggleBulletList().run(),
 					label: "Bulleted list",
 					onClick: () => {
-						E.chain().focus().toggleBulletList().run();
+						D.chain().focus().toggleBulletList().run();
 					},
-					children: /* @__PURE__ */ a(m, {})
+					children: /* @__PURE__ */ s(g, {})
 				}),
-				/* @__PURE__ */ a(C, {
-					active: E.isActive("orderedList"),
-					disabled: T || !E.can().chain().focus().toggleOrderedList().run(),
+				/* @__PURE__ */ s(w, {
+					active: D.isActive("orderedList"),
+					disabled: E || !D.can().chain().focus().toggleOrderedList().run(),
 					label: "Numbered list",
 					onClick: () => {
-						E.chain().focus().toggleOrderedList().run();
+						D.chain().focus().toggleOrderedList().run();
 					},
-					children: /* @__PURE__ */ a(h, {})
+					children: /* @__PURE__ */ s(_, {})
 				}),
-				/* @__PURE__ */ a(C, {
-					disabled: T,
+				/* @__PURE__ */ s(w, {
+					disabled: E,
 					label: "Set link",
 					onClick: (e) => {
-						I(E.getAttributes("link").href ?? ""), P(e.currentTarget), M(!0);
+						L(D.getAttributes("link").href ?? ""), F(e.currentTarget), N(!0);
 					},
-					children: /* @__PURE__ */ a(g, {})
+					children: /* @__PURE__ */ s(v, {})
 				}),
-				/* @__PURE__ */ a(C, {
-					active: E.isActive("link"),
-					disabled: T || !E.can().chain().focus().unsetLink().run(),
+				/* @__PURE__ */ s(w, {
+					active: D.isActive("link"),
+					disabled: E || !D.can().chain().focus().unsetLink().run(),
 					label: "Remove link",
 					onClick: () => {
-						E.chain().focus().unsetLink().run();
+						D.chain().focus().unsetLink().run();
 					},
-					children: /* @__PURE__ */ a(g, {})
+					children: /* @__PURE__ */ s(v, {})
 				})
 			]
 		}) : null
-	}), /* @__PURE__ */ a(y, {
-		anchorEl: N,
-		anchorOrigin: {
-			horizontal: "left",
-			vertical: "bottom"
-		},
+	}), /* @__PURE__ */ s(n, {
+		anchorEl: P,
+		placement: "bottom-start",
 		onClose: () => {
-			M(!1), P(null), I("");
+			N(!1), F(null), L("");
 		},
-		open: !T && j,
-		slotProps: { paper: { sx: { p: 2 } } },
-		children: /* @__PURE__ */ a(v, { children: /* @__PURE__ */ a(t, {
+		open: !E && M,
+		children: /* @__PURE__ */ s(r, { children: /* @__PURE__ */ s(b, { children: /* @__PURE__ */ s(t, {
 			name: "url",
 			label: "URL",
 			onChange: (e) => {
-				I(e.target.value);
+				L(e.target.value);
 			},
 			onKeyUp: (e) => {
 				if (e.key === "Enter") {
-					if (F === "") {
-						E?.chain().focus().extendMarkRange("link").unsetLink().run();
+					if (I === "") {
+						D?.chain().focus().extendMarkRange("link").unsetLink().run();
 						return;
 					}
-					E?.chain().focus().setLink({ href: F }).run(), M(!1), P(null), I("");
+					D?.chain().focus().setLink({ href: I }).run(), N(!1), F(null), L("");
 				}
 			},
-			value: F
-		}) })
+			value: I
+		}) }) })
 	})] });
 });
-x.displayName = "STextEditorToolbar";
-function S(e) {
+S.displayName = "STextEditorToolbar";
+function C(e) {
 	if (e.isActive("paragraph")) return "p";
 	for (let t of [
 		1,
@@ -201,16 +198,16 @@ function S(e) {
 	]) if (e.isActive("heading", { level: t })) return `h${t}`;
 	return "p";
 }
-var C = r.forwardRef(function({ active: e, children: t, disabled: r, label: i, onClick: o }, s) {
-	return /* @__PURE__ */ a(n, {
-		"aria-label": i,
+var w = a.forwardRef(function({ active: e, children: t, disabled: n, label: r, onClick: a }, o) {
+	return /* @__PURE__ */ s(i, {
+		"aria-label": r,
 		"aria-pressed": e,
 		color: e ? "primary" : "inherit",
-		disabled: r,
-		onClick: o,
-		ref: s,
+		disabled: n,
+		onClick: a,
+		ref: o,
 		children: t
 	});
 });
 //#endregion
-export { x as STextEditorToolbar };
+export { S as STextEditorToolbar };

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

@@ -1,5 +1,5 @@
 import { BoxProps, TypographyProps } from '@mui/material';
-import { SNavItemButtonProps } from '../s-nav-item';
+import { SNavItemRowProps } from '../s-nav-item';
 import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
 import * as React from 'react';
 export interface SToolItemOwnerState extends SToolItemProps {
@@ -9,12 +9,16 @@ export interface SToolItemOwnerState extends SToolItemProps {
 }
 type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SToolItemOwnerState>;
 export interface SToolItemSlots {
+    /** Interactive tile element, or the row element when `expanded`. */
     button?: React.ElementType;
-    primary?: React.ElementType;
+    /** Visible label element. */
+    label?: React.ElementType;
 }
 export interface SToolItemSlotProps {
-    button?: OwnerStateSlotProps<SNavItemButtonProps>;
-    primary?: OwnerStateSlotProps<TypographyProps>;
+    /** Props or owner-state callback for the tile/row slot. */
+    button?: OwnerStateSlotProps<SNavItemRowProps>;
+    /** Props or owner-state callback for the label slot. */
+    label?: OwnerStateSlotProps<TypographyProps>;
 }
 /** Props for a compact tool navigation item. */
 export interface SToolItemProps extends Omit<BoxProps<'li'>, 'children' | 'component' | 'onClick'> {
@@ -24,10 +28,10 @@ export interface SToolItemProps extends Omit<BoxProps<'li'>, 'children' | 'compo
     expanded?: boolean;
     /** Tool icon. */
     icon?: React.ReactNode;
+    /** Visible tool label. */
+    label: 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. */

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

@@ -21,37 +21,37 @@ 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 = {
+	}), { disabled: p = !1, expanded: m = !1, icon: h, label: g, onClick: _, 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);
+	}, w = f(y?.button, C), T = f(y?.label, C), { onClick: E, ...D } = w ?? {}, O = E, k = (e) => {
+		O?.(e), e.defaultPrevented || _?.(e);
 	};
 	if (m) {
-		let t = l(b?.button, D, C), i = l(b?.primary, T ?? {}, C);
+		let t = l(b?.button, D, C), i = l(b?.label, T ?? {}, C);
 		return /* @__PURE__ */ r(d, {
 			...S,
 			disabled: p,
 			icon: h,
+			label: g,
 			onClick: k,
 			ownerState: C,
-			primary: _,
 			ref: n,
 			selected: v,
 			slots: {
-				button: b?.button,
-				primary: b?.primary
+				item: b?.button,
+				label: b?.label
 			},
 			slotProps: {
-				button: t,
-				primary: i
+				item: t,
+				label: 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;
+	let A = b?.button ?? a, j = b?.label ?? o, { sx: M, ...N } = D, { sx: P, ...F } = T ?? {}, I = l(b?.button, N, C), L = l(b?.label, F, C), R = typeof g == "string" ? g : void 0;
 	return /* @__PURE__ */ r(u, {
 		...S,
 		ownerState: C,
@@ -66,7 +66,7 @@ var p = n.forwardRef(function(t, n) {
 			"aria-label": R,
 			disabled: p,
 			onClick: (e) => {
-				O?.(e), e.defaultPrevented || g?.(e);
+				O?.(e), e.defaultPrevented || _?.(e);
 			},
 			title: R,
 			sx: [{
@@ -106,7 +106,7 @@ var p = n.forwardRef(function(t, n) {
 					maxWidth: "100%",
 					overflowWrap: "anywhere"
 				}, ...e(P)],
-				children: _
+				children: g
 			})]
 		})
 	});