@solostylist/ui-kit 2.0.0 → 2.0.1

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

@@ -1,3 +1,3 @@
-import { t as e } from "../s-text-editor-toolbar-D-XgFQix.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.js

@@ -1,2 +1,216 @@
-import { t as e } from "../s-text-editor-toolbar-D-XgFQix.js";
-export { e as STextEditorToolbar };
+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";
+//#region lib/s-text-editor/s-text-editor-toolbar.tsx
+var b = c(u, {
+	name: "STextEditorToolbar",
+	slot: "Root"
+})({}), x = r.forwardRef(function(n, c) {
+	let x = l({
+		props: n,
+		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,
+		sx: [{
+			borderBottom: "1px solid",
+			borderColor: "divider",
+			p: "8px",
+			minHeight: "57px"
+		}, ...e(O)],
+		children: E ? /* @__PURE__ */ o(u, {
+			direction: "row",
+			spacing: .5,
+			sx: {
+				alignItems: "center",
+				flexWrap: "wrap"
+			},
+			children: [
+				/* @__PURE__ */ o(i, {
+					disabled: T,
+					inputProps: { "aria-label": "Text format" },
+					onChange: (e) => {
+						let t = e.target.value;
+						if (t) {
+							if (t === "p") {
+								E.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();
+							}
+						}
+					},
+					value: S(E),
+					children: [/* @__PURE__ */ a(s, {
+						disabled: T || !E.can().chain().focus().setParagraph().run(),
+						value: "p",
+						children: "Paragraph"
+					}), [
+						1,
+						2,
+						3,
+						4,
+						5,
+						6
+					].map((e) => /* @__PURE__ */ o(s, {
+						disabled: T || !E.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(),
+					label: "Bold",
+					onClick: () => {
+						E.chain().focus().toggleBold().run();
+					},
+					children: /* @__PURE__ */ a(f, {})
+				}),
+				/* @__PURE__ */ a(C, {
+					active: E.isActive("italic"),
+					disabled: T || !E.can().chain().focus().toggleItalic().run(),
+					label: "Italic",
+					onClick: () => {
+						E.chain().focus().toggleItalic().run();
+					},
+					children: /* @__PURE__ */ a(p, {})
+				}),
+				/* @__PURE__ */ a(C, {
+					active: E.isActive("strike"),
+					disabled: T || !E.can().chain().focus().toggleStrike().run(),
+					label: "Strikethrough",
+					onClick: () => {
+						E.chain().focus().toggleStrike().run();
+					},
+					children: /* @__PURE__ */ a(_, {})
+				}),
+				/* @__PURE__ */ a(C, {
+					active: E.isActive("codeBlock"),
+					disabled: T || !E.can().chain().focus().toggleCodeBlock().run(),
+					label: "Code block",
+					onClick: () => {
+						E.chain().focus().toggleCodeBlock().run();
+					},
+					children: /* @__PURE__ */ a(d, {})
+				}),
+				/* @__PURE__ */ a(C, {
+					active: E.isActive("bulletList"),
+					disabled: T || !E.can().chain().focus().toggleBulletList().run(),
+					label: "Bulleted list",
+					onClick: () => {
+						E.chain().focus().toggleBulletList().run();
+					},
+					children: /* @__PURE__ */ a(m, {})
+				}),
+				/* @__PURE__ */ a(C, {
+					active: E.isActive("orderedList"),
+					disabled: T || !E.can().chain().focus().toggleOrderedList().run(),
+					label: "Numbered list",
+					onClick: () => {
+						E.chain().focus().toggleOrderedList().run();
+					},
+					children: /* @__PURE__ */ a(h, {})
+				}),
+				/* @__PURE__ */ a(C, {
+					disabled: T,
+					label: "Set link",
+					onClick: (e) => {
+						I(E.getAttributes("link").href ?? ""), P(e.currentTarget), M(!0);
+					},
+					children: /* @__PURE__ */ a(g, {})
+				}),
+				/* @__PURE__ */ a(C, {
+					active: E.isActive("link"),
+					disabled: T || !E.can().chain().focus().unsetLink().run(),
+					label: "Remove link",
+					onClick: () => {
+						E.chain().focus().unsetLink().run();
+					},
+					children: /* @__PURE__ */ a(g, {})
+				})
+			]
+		}) : null
+	}), /* @__PURE__ */ a(y, {
+		anchorEl: N,
+		anchorOrigin: {
+			horizontal: "left",
+			vertical: "bottom"
+		},
+		onClose: () => {
+			M(!1), P(null), I("");
+		},
+		open: !T && j,
+		slotProps: { paper: { sx: { p: 2 } } },
+		children: /* @__PURE__ */ a(v, { children: /* @__PURE__ */ a(t, {
+			name: "url",
+			label: "URL",
+			onChange: (e) => {
+				I(e.target.value);
+			},
+			onKeyUp: (e) => {
+				if (e.key === "Enter") {
+					if (F === "") {
+						E?.chain().focus().extendMarkRange("link").unsetLink().run();
+						return;
+					}
+					E?.chain().focus().setLink({ href: F }).run(), M(!1), P(null), I("");
+				}
+			},
+			value: F
+		}) })
+	})] });
+});
+x.displayName = "STextEditorToolbar";
+function S(e) {
+	if (e.isActive("paragraph")) return "p";
+	for (let t of [
+		1,
+		2,
+		3,
+		4,
+		5,
+		6
+	]) 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,
+		"aria-pressed": e,
+		color: e ? "primary" : "inherit",
+		disabled: r,
+		onClick: o,
+		ref: s,
+		children: t
+	});
+});
+//#endregion
+export { x as STextEditorToolbar };

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

@@ -1,32 +1,31 @@
-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 { toSxArray as e } from "../utils/sx.js";
+import { tint as t } from "../theme/utils.js";
+import { STextEditorToolbar as n } from "./s-text-editor-toolbar.js";
+import { styled as r, useThemeProps as i } from "@mui/material/styles";
+import * as a from "react";
+import { forwardRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "@mui/material/Box";
 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 m = t(e, {
+var m = r(l, {
 	name: "STextEditor",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
-})({}), h = s((e, t) => {
-	let s = n({
-		props: e,
+})({}), h = o((r, o) => {
+	let l = i({
+		props: r,
 		name: "STextEditor"
-	}), { content: h, editable: g = !0, hideToolbar: _ = !1, onUpdate: v = () => {}, placeholder: y, sx: b, ...x } = s, S = {
-		...s,
+	}), { content: h, editable: g = !0, hideToolbar: _ = !1, onUpdate: v = () => {}, placeholder: y, sx: b, ...x } = l, S = {
+		...l,
 		editable: g,
 		hideToolbar: _
-	}, C = o.useRef(y);
+	}, C = a.useRef(y);
 	C.current = y;
 	let w = f({
-		extensions: o.useMemo(() => [p.configure({ link: {
+		extensions: a.useMemo(() => [p.configure({ link: {
 			openOnClick: !1,
 			autolink: !0
 		} }), u.configure({
@@ -38,15 +37,15 @@ var m = t(e, {
 		onUpdate: v,
 		parseOptions: { preserveWhitespace: "full" }
 	});
-	return o.useEffect(() => {
+	return a.useEffect(() => {
 		!w || w.isDestroyed || w.setEditable(g);
-	}, [g, w]), o.useEffect(() => {
+	}, [g, w]), a.useEffect(() => {
 		!w || w.isDestroyed || w.view.dispatch(w.state.tr);
-	}, [w, y]), o.useEffect(() => {
+	}, [w, y]), a.useEffect(() => {
 		!w || w.isDestroyed || w.getHTML() !== h && w.commands.setContent(h);
-	}, [h, w]), /* @__PURE__ */ l(m, {
+	}, [h, w]), /* @__PURE__ */ c(m, {
 		...x,
-		ref: t,
+		ref: o,
 		ownerState: S,
 		sx: [(e) => ({
 			display: "flex",
@@ -58,7 +57,7 @@ var m = t(e, {
 			...g ? {
 				"&:hover": { borderColor: (e.vars ?? e).palette.grey[500] },
 				"&:focus-within": {
-					outline: `3px solid ${i((e.vars ?? e).palette.primary[500], 50)}`,
+					outline: `3px solid ${t((e.vars ?? e).palette.primary[500], 50)}`,
 					borderColor: (e.vars ?? e).palette.primary[400]
 				}
 			} : {},
@@ -88,11 +87,11 @@ var m = t(e, {
 					pointerEvents: "none"
 				}
 			}
-		}), ...r(b)],
-		children: [_ ? null : /* @__PURE__ */ c(a, {
+		}), ...e(b)],
+		children: [_ ? null : /* @__PURE__ */ s(n, {
 			disabled: !g,
 			editor: w
-		}), /* @__PURE__ */ c(d, {
+		}), /* @__PURE__ */ s(d, {
 			className: "tiptap-container",
 			editor: w
 		})]

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

@@ -1,2 +1,2 @@
-import { t as e } from "../s-text-field-BM4qk0mf.js";
+import { STextField as e } from "./s-text-field.js";
 export { e as STextField, e as default };

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

@@ -1,2 +1,52 @@
-import { t as e } from "../s-text-field-BM4qk0mf.js";
-export { e as STextField, e as default };
+import { staticFieldLabelStyles as e } from "../theme/components/field-label-styles.js";
+import { forwardRef as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { inputLabelClasses as i } from "@mui/material/InputLabel";
+import { Visibility as a, VisibilityOff as o } from "@mui/icons-material";
+import { IconButton as s, InputAdornment as c, TextField as l, styled as u, useThemeProps as d } from "@mui/material";
+import { mergeSlotProps as f } from "@mui/material/utils";
+import { inputBaseClasses as p } from "@mui/material/InputBase";
+//#region lib/s-text-field/s-text-field.tsx
+var m = u(l, {
+	name: "STextField",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	...e,
+	[`& .${i.root}[data-shrink='false'] + .${p.formControl} .${p.input}`]: { "&::placeholder": { opacity: "1 !important" } }
+}), h = t((e, t) => {
+	let i = d({
+		props: e,
+		name: "STextField"
+	}), { fullWidth: l = !0, type: u = "text", slotProps: p, togglePasswordText: h = "toggle password visibility", ...g } = i, [_, v] = n(!1), y = u === "password", b = {
+		...i,
+		fullWidth: l,
+		password: y,
+		passwordVisible: _
+	}, x = () => {
+		v((e) => !e);
+	}, S = y && _ ? "text" : u, C = y ? /* @__PURE__ */ r(c, {
+		position: "end",
+		children: /* @__PURE__ */ r(s, {
+			"aria-label": h,
+			onClick: x,
+			edge: "end",
+			size: "small",
+			children: r(_ ? o : a, {})
+		})
+	}) : void 0;
+	return /* @__PURE__ */ r(m, {
+		...g,
+		fullWidth: l,
+		ownerState: b,
+		ref: t,
+		type: S,
+		slotProps: {
+			...p,
+			input: y ? f(p?.input, { endAdornment: C }) : p?.input
+		}
+	});
+});
+h.displayName = "STextField";
+//#endregion
+export { h as STextField, h as default };

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

@@ -1,6 +1,4 @@
-import { s as e } from "../defaultTheme-BaGcIzCh.js";
-import { t } from "../styled-Bog8QCl3.js";
-import { t as n } from "../useThemeProps-Cr28OQu3.js";
+import { keyframes as e, styled as t, useThemeProps as n } from "@mui/material/styles";
 import * as r from "react";
 import { jsx as i } from "react/jsx-runtime";
 import { Typography as a } from "@mui/material";

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

@@ -1,11 +1,11 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../appendOwnerState-CELpvdMz.js";
-import * as n from "react";
-import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Box as u, Link as d, Tooltip as f, Typography as p, styled as m, useThemeProps as h } from "@mui/material";
+import * as t from "react";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Box as l, Link as u, Tooltip as d, Typography as f, styled as p, useThemeProps as m } from "@mui/material";
+import h from "@mui/utils/appendOwnerState";
 //#region lib/s-text-truncation/s-text-truncation.tsx
-var g = m(u, {
+var g = p(l, {
 	name: "STextTruncation",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -16,13 +16,13 @@ function _(e, t) {
 function v(e) {
 	return e ? Object.fromEntries(Object.entries(e).filter(([e]) => e === "children" || e === "component" || e === "id" || e === "ref" || e === "role" || e === "tabIndex" || e === "title" || e.startsWith("aria-") || e.startsWith("data-") ? !1 : !/^on[A-Z]/.test(e))) : {};
 }
-var y = n.forwardRef(function(u, m) {
-	let y = h({
-		props: u,
+var y = t.forwardRef(function(l, p) {
+	let y = m({
+		props: l,
 		name: "STextTruncation"
-	}), { children: b, collapseText: x = "See less", expandText: S = "See more", lines: C = 3, slotProps: w, slots: T, sx: E, variant: D = "expandable", ...O } = y, [k, A] = o(!1), [j, M] = o(!1), [N, P] = o(b), F = a(null), I = a(null), L = n.useCallback((e) => {
-		I.current = e, typeof m == "function" ? m(e) : m && (m.current = e);
-	}, [m]), R = r(() => {
+	}), { children: b, collapseText: x = "See less", expandText: S = "See more", lines: C = 3, slotProps: w, slots: T, sx: E, variant: D = "expandable", ...O } = y, [k, A] = a(!1), [j, M] = a(!1), [N, P] = a(b), F = i(null), I = i(null), L = t.useCallback((e) => {
+		I.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
+	}, [p]), R = n(() => {
 		let e = F.current;
 		if (!e || !b) {
 			M(!1), P(b);
@@ -46,7 +46,7 @@ var y = n.forwardRef(function(u, m) {
 		C,
 		b
 	]);
-	i(() => {
+	r(() => {
 		R();
 		let e = new ResizeObserver(R);
 		return I.current && e.observe(I.current), () => e.disconnect();
@@ -56,17 +56,17 @@ var y = n.forwardRef(function(u, m) {
 		expanded: k,
 		truncated: j,
 		variant: D
-	}, B = T?.text ?? p, V = T?.toggle ?? d, H = T?.tooltip ?? f, U = _(w?.text, z), W = _(w?.toggle, z), G = _(w?.tooltip, z), { onClick: K, sx: q, ...J } = W ?? {}, Y = t(T?.text, U ?? {}, z), X = t(T?.text, v(U), z), Z = t(T?.toggle, J, z), Q = t(T?.tooltip, G ?? {}, z);
-	return /* @__PURE__ */ c(g, {
+	}, B = T?.text ?? f, V = T?.toggle ?? u, H = T?.tooltip ?? d, U = _(w?.text, z), W = _(w?.toggle, z), G = _(w?.tooltip, z), { onClick: K, sx: q, ...J } = W ?? {}, Y = h(T?.text, U ?? {}, z), X = h(T?.text, v(U), z), Z = h(T?.toggle, J, z), Q = h(T?.tooltip, G ?? {}, z);
+	return /* @__PURE__ */ s(g, {
 		...O,
 		ownerState: z,
 		ref: L,
 		sx: [{ position: "relative" }, ...e(E)],
-		children: D === "tooltip" ? /* @__PURE__ */ c(H, {
+		children: D === "tooltip" ? /* @__PURE__ */ s(H, {
 			arrow: !0,
 			title: b,
 			...Q,
-			children: /* @__PURE__ */ c(B, {
+			children: /* @__PURE__ */ s(B, {
 				...Y,
 				sx: [{
 					display: "-webkit-box",
@@ -78,7 +78,7 @@ var y = n.forwardRef(function(u, m) {
 				}, ...e(U?.sx)],
 				children: b
 			})
-		}) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(B, {
+		}) : /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(B, {
 			ref: F,
 			"aria-hidden": !0,
 			component: "span",
@@ -92,9 +92,9 @@ var y = n.forwardRef(function(u, m) {
 				visibility: "hidden",
 				pointerEvents: "none"
 			}, ...e(U?.sx)]
-		}), /* @__PURE__ */ l(B, {
+		}), /* @__PURE__ */ c(B, {
 			...Y,
-			children: [k ? b : N, j && /* @__PURE__ */ l(s, { children: [k ? " " : "… ", /* @__PURE__ */ c(V, {
+			children: [k ? b : N, j && /* @__PURE__ */ c(o, { children: [k ? " " : "… ", /* @__PURE__ */ s(V, {
 				component: "button",
 				type: "button",
 				...Z,

package/dist/s-theme-demo/s-theme-demo.js

@@ -1,8 +1,8 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../theme-demo-components-section-gtIYRngY.js";
-import { TypographySection as n } from "./theme-demo-typography-section.js";
-import { ShadowSection as r } from "./theme-demo-shadow-section.js";
-import { InteractiveSection as i } from "./theme-demo-interactive-section.js";
+import { TypographySection as t } from "./theme-demo-typography-section.js";
+import { ShadowSection as n } from "./theme-demo-shadow-section.js";
+import { InteractiveSection as r } from "./theme-demo-interactive-section.js";
+import { SoloStylistSection as i } from "./theme-demo-components-section.js";
 import { ColorRampsSection as a } from "./theme-demo-color-ramps-section.js";
 import { ColorPaletteSection as o } from "./theme-demo-color-palette-section.js";
 import * as s from "react";
@@ -64,10 +64,10 @@ var h = [
 			children: [
 				T.colors && /* @__PURE__ */ c(o, {}),
 				T.ramps && /* @__PURE__ */ c(a, {}),
-				T.typography && /* @__PURE__ */ c(n, {}),
-				(T.components || T.forms) && /* @__PURE__ */ c(t, {}),
-				T.interactive && /* @__PURE__ */ c(i, {}),
-				T.shadows && /* @__PURE__ */ c(r, {})
+				T.typography && /* @__PURE__ */ c(t, {}),
+				(T.components || T.forms) && /* @__PURE__ */ c(i, {}),
+				T.interactive && /* @__PURE__ */ c(r, {}),
+				T.shadows && /* @__PURE__ */ c(n, {})
 			]
 		})]
 	});

package/dist/s-theme-demo/theme-demo-color-palette-section.js

@@ -1,4 +1,4 @@
-import { t as e } from "../useTheme-BIWMbX3i.js";
+import { useTheme as e } from "@mui/material/styles";
 import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { Box as r, Card as i, CardContent as a, Stack as o, Typography as s } from "@mui/material";

package/dist/s-theme-demo/theme-demo-color-ramps-section.js

@@ -1,4 +1,4 @@
-import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "../colors-DKqWMRgW.js";
+import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "../colors-CNjL5fhq.js";
 import "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 import { Box as g, Card as _, CardContent as v, Stack as y, Typography as b } from "@mui/material";