themelia-ui 1.0.0

package/dist/rich-text-editor-DTe5uxVK.js

@@ -0,0 +1,524 @@
+import "./css/rich-text-editor.css";
+import { t as e } from "./cx--CBrhWH0.js";
+import { o as t } from "./typography-vC_wwEBm.js";
+import { w as n } from "./primitives-D-cyAv5O.js";
+import { c as r } from "./text-inputs-BMW3hP0R.js";
+import { n as i, o as a, t as o } from "./toolbar-C9GRWaUJ.js";
+import { BoldIcon as s, Code2Icon as c, ItalicIcon as l, ListIcon as u, ListOrderedIcon as d, QuoteIcon as f, Redo2Icon as p, StrikethroughIcon as ee, Undo2Icon as te } from "lucide-react";
+import { useCallback as m, useEffect as h, useImperativeHandle as ne, useMemo as re, useRef as g, useState as _, useSyncExternalStore as ie } from "react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/features/rich-text-editor/editor-dom.ts
+var x = "p, li, h1, h2, h3, h4, h5, h6, blockquote", S = /* @__PURE__ */ new Set([
+	"",
+	"<p></p>",
+	"<p><br></p>",
+	"<br>",
+	"<div><br></div>"
+]);
+function C(e) {
+	let t = e.trim();
+	return S.has(t) ? "" : t;
+}
+function w(e) {
+	let t = C(e);
+	return t === "" ? "<p></p>" : t;
+}
+function ae(e) {
+	return e.replace(/<\/(?:p|div|li|h[1-6]|blockquote|pre)>/gi, " ").replace(/<br\s*\/?>/gi, " ").replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ");
+}
+function oe() {
+	if (typeof window > "u") return null;
+	let e = window.getSelection();
+	if (!e || e.rangeCount === 0) return null;
+	let t = e.getRangeAt(0);
+	if (!t.collapsed) return null;
+	let n = t.startContainer;
+	for (; n && n.nodeType !== Node.ELEMENT_NODE;) n = n.parentNode;
+	if (!n || !n.closest("[contenteditable=\"true\"]")) return null;
+	let r = t.startContainer.nodeType === Node.TEXT_NODE ? (t.startContainer.textContent ?? "").slice(0, t.startOffset) : "", i = t.startContainer;
+	for (; i && i !== n;) {
+		for (let e = i.previousSibling; e; e = e.previousSibling) r = (e.textContent ?? "") + r;
+		if (i = i.parentNode, i && i.matches?.(x)) break;
+	}
+	let a = t.getBoundingClientRect();
+	return {
+		textBefore: r,
+		rect: a && (a.top || a.left || a.right || a.bottom) ? {
+			top: a.top,
+			left: a.left,
+			bottom: a.bottom,
+			right: a.right
+		} : void 0
+	};
+}
+function se(e) {
+	let t = e;
+	for (; t;) {
+		if (t.previousSibling) {
+			for (t = t.previousSibling; t?.lastChild;) t = t.lastChild;
+			if (t?.nodeType === Node.TEXT_NODE) return t;
+			continue;
+		}
+		if (t = t.parentNode, !t || t.matches?.(`${x}, [contenteditable="true"]`)) return null;
+	}
+	return null;
+}
+function T(e, t, n) {
+	if (typeof window > "u") return;
+	let r = window.getSelection();
+	if (!r || r.rangeCount === 0) return;
+	let i = r.getRangeAt(0);
+	if (!i.collapsed) return;
+	let a = e, o = i.startContainer, s = i.startOffset;
+	for (; a > 0;) {
+		if (o.nodeType === Node.TEXT_NODE) {
+			let e = Math.min(s, a);
+			if (s -= e, a -= e, a === 0) break;
+		}
+		let e = se(o);
+		if (!e) break;
+		o = e, s = e.textContent?.length ?? 0;
+	}
+	let c = document.createRange();
+	c.setStart(o, s), c.setEnd(i.endContainer, i.endOffset);
+	let l = (o.parentElement ?? null)?.closest("[contenteditable=\"true\"]");
+	c.deleteContents(), c.insertNode(document.createRange().createContextualFragment(t)), r.removeAllRanges(), c.collapse(!1), r.addRange(c), l && n();
+}
+function E(e, t) {
+	if (typeof window > "u" || !e) return;
+	e.focus();
+	let n = window.getSelection(), r = n && n.rangeCount > 0 ? n.getRangeAt(0) : null;
+	if (!r || !e.contains(r.commonAncestorContainer)) {
+		e.insertAdjacentHTML("beforeend", t);
+		return;
+	}
+	r.deleteContents(), r.insertNode(document.createRange().createContextualFragment(t)), r.collapse(!1), n.removeAllRanges(), n.addRange(r);
+}
+//#endregion
+//#region src/components/features/rich-text-editor/rich-text-editor.strings.ts
+var D = {
+	editorLabel: "Rich text editor",
+	sourceLabel: "HTML source",
+	toolbarLabel: "Formatting",
+	toolbar: {
+		bold: "Bold",
+		italic: "Italic",
+		strike: "Strike",
+		bulletList: "Bullet list",
+		orderedList: "Ordered list",
+		blockquote: "Quote",
+		undo: "Undo",
+		redo: "Redo",
+		sourceCode: "Source code"
+	},
+	counts: {
+		characters: "characters",
+		words: "words"
+	}
+}, O = {
+	light: "rich-text-editor-module__light___hEyTm",
+	dark: "rich-text-editor-module__dark___eFnTO",
+	root: "rich-text-editor-module__root___jPTOg",
+	toolbar: "rich-text-editor-module__toolbar___nSnXN",
+	toolbarButton: "rich-text-editor-module__toolbarButton___Xh0vu",
+	toolbarRule: "rich-text-editor-module__toolbarRule___EnynD",
+	toolbarTrailing: "rich-text-editor-module__toolbarTrailing___pEGzg",
+	bodyWrap: "rich-text-editor-module__bodyWrap___1OUsm",
+	body: "rich-text-editor-module__body___7SnuI",
+	placeholder: "rich-text-editor-module__placeholder___iAXFh",
+	source: "rich-text-editor-module__source___bAMOW",
+	footerSlot: "rich-text-editor-module__footerSlot___RlVKf",
+	counts: "rich-text-editor-module__counts___D3boT"
+};
+//#endregion
+//#region src/components/features/rich-text-editor/rich-text-editor-toolbar.tsx
+function k({ config: e, disabled: t }) {
+	let n = e.icon, r = e.isActive();
+	return /* @__PURE__ */ y(i, {
+		type: "button",
+		tone: r ? "primary" : "neutral",
+		buttonStyle: r ? "solid" : "ghost",
+		iconOnly: !0,
+		onMouseDown: (e) => e.preventDefault(),
+		onClick: e.run,
+		disabled: t || e.disabled,
+		"aria-pressed": r,
+		"aria-label": e.label,
+		title: e.label,
+		className: O.toolbarButton,
+		children: /* @__PURE__ */ y(n, {})
+	});
+}
+function ce({ buttons: t, extraToolbarItems: n, hideSourceToggle: r = !1, sourceMode: i, toggleSourceMode: s, disabled: l = !1, toolbarTrailing: u, strings: d, className: f }) {
+	let p = l || i;
+	return /* @__PURE__ */ b(o, {
+		"aria-label": d.toolbarLabel ?? "Formatting",
+		className: e("rich-text-editor-toolbar--component", O.toolbar, f),
+		children: [
+			t.map((e) => /* @__PURE__ */ y(k, {
+				config: e,
+				disabled: p
+			}, e.id)),
+			!r && /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(a, {
+				orientation: "vertical",
+				className: O.toolbarRule
+			}), /* @__PURE__ */ y(k, {
+				config: {
+					id: "source",
+					icon: c,
+					label: d.toolbar.sourceCode,
+					isActive: () => i,
+					run: s
+				},
+				disabled: l
+			})] }),
+			!!n?.length && /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(a, {
+				orientation: "vertical",
+				className: O.toolbarRule
+			}), n.map((e) => /* @__PURE__ */ y(k, {
+				config: {
+					id: e.id,
+					icon: e.icon,
+					label: e.label,
+					isActive: e.isActive ?? (() => !1),
+					run: e.onClick,
+					disabled: e.disabled
+				},
+				disabled: p
+			}, e.id))] }),
+			!!u && /* @__PURE__ */ y("div", {
+				className: O.toolbarTrailing,
+				children: u
+			})
+		]
+	});
+}
+function le({ text: r, maxLength: i, strings: a, className: o }) {
+	let s = r.length, c = r.trim().length > 0 ? r.trim().split(/\s+/).length : 0, l = typeof i == "number" && s > i;
+	return /* @__PURE__ */ b("div", {
+		className: e("editor-counts--component", O.counts, o),
+		children: [/* @__PURE__ */ b(t, {
+			tag: "span",
+			size: "xs",
+			type: l ? "error" : "secondary",
+			weight: l ? "medium" : "regular",
+			children: [
+				/* @__PURE__ */ y(n, {
+					value: s,
+					size: "xs",
+					type: "inherit"
+				}),
+				typeof i == "number" && /* @__PURE__ */ b(v, { children: [" / ", /* @__PURE__ */ y(n, {
+					value: i,
+					size: "xs",
+					type: "inherit"
+				})] }),
+				" ",
+				a.counts.characters
+			]
+		}), /* @__PURE__ */ b(t, {
+			tag: "span",
+			size: "xs",
+			type: "secondary",
+			children: [
+				/* @__PURE__ */ y(n, {
+					value: c,
+					size: "xs",
+					type: "inherit"
+				}),
+				" ",
+				a.counts.words
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/features/rich-text-editor/exec-command-engine.ts
+var A = {
+	bold: "bold",
+	italic: "italic",
+	underline: "underline",
+	strike: "strikeThrough",
+	bulletList: "insertUnorderedList",
+	orderedList: "insertOrderedList",
+	blockquote: "formatBlock",
+	undo: "undo",
+	redo: "redo"
+}, j = [
+	"bold",
+	"italic",
+	"underline",
+	"strike",
+	"bulletList",
+	"orderedList"
+], M = () => typeof document < "u", N = () => M() && typeof document.execCommand == "function", P = () => M() && typeof document.queryCommandState == "function";
+function ue(e) {
+	if (!P()) return !1;
+	try {
+		return document.queryCommandState(A[e]);
+	} catch {
+		return !1;
+	}
+}
+function F(e) {
+	if (!M()) return !1;
+	let t = document.getSelection()?.anchorNode ?? null;
+	for (; t && t !== e;) {
+		if (t instanceof HTMLElement && t.tagName === "BLOCKQUOTE") return !0;
+		t = t.parentNode;
+	}
+	return !1;
+}
+function I(e) {
+	let t = /* @__PURE__ */ new Set(), n = !1, r = null, i = () => {
+		r = null;
+		for (let e of [...t]) e();
+	}, a = () => i(), o = () => {
+		M() && e.contains(document.getSelection()?.anchorNode ?? null) && i();
+	};
+	return e.addEventListener("input", a), M() && document.addEventListener("selectionchange", o), {
+		getState() {
+			if (r) return r;
+			let t = /* @__PURE__ */ new Set();
+			for (let e of j) ue(e) && t.add(e);
+			return F(e) && t.add("blockquote"), r = {
+				html: e.innerHTML,
+				canUndo: !0,
+				canRedo: !0,
+				active: t
+			}, r;
+		},
+		setHtml(t) {
+			e.innerHTML !== t && (e.innerHTML = t, i());
+		},
+		focus() {
+			e.focus();
+		},
+		execute(t) {
+			N() && (e.focus(), t === "blockquote" ? document.execCommand("formatBlock", !1, F(e) ? "<p>" : "<blockquote>") : document.execCommand(A[t], !1, void 0), i());
+		},
+		subscribe(e) {
+			return t.add(e), () => t.delete(e);
+		},
+		destroy() {
+			n || (n = !0, r = null, e.removeEventListener("input", a), M() && document.removeEventListener("selectionchange", o), t.clear());
+		}
+	};
+}
+//#endregion
+//#region src/components/features/rich-text-editor/rich-text-editor.tsx
+function L({ engine: n, value: i, onValueChange: a, placeholder: o, compact: c = !1, minHeight: v, maxHeight: x, disabled: S = !1, showCounts: se = !1, maxLength: k, extraToolbarItems: A, toolbarTrailing: j, footerSlot: M, hideSourceToggle: N = !1, autoFocus: P = !1, className: ue, onCaretChange: F, strings: L, ref: de }) {
+	let R = {
+		...D,
+		...L,
+		toolbar: {
+			...D.toolbar,
+			...L?.toolbar
+		},
+		counts: {
+			...D.counts,
+			...L?.counts
+		}
+	}, z = g(null), [B, V] = _(!1), [H, U] = _(!1), [W, G] = _(""), K = g(C(i)), [, fe] = _(0), q = g(F);
+	h(() => {
+		q.current = F;
+	});
+	let pe = m((e) => {
+		z.current = e, e && e.innerHTML === "" && (e.innerHTML = w(K.current));
+	}, []);
+	h(() => {
+		let e = z.current;
+		if (!e || B) return;
+		let t = w(i);
+		C(e.innerHTML) !== C(t) && (e.innerHTML = t), K.current = C(i);
+	}, [B, i]), h(() => {
+		P && z.current?.focus();
+	}, [P]);
+	let J = m(() => {
+		let e = C(z.current?.innerHTML ?? "");
+		K.current = e, a(e), q.current?.(), fe((e) => e + 1);
+	}, [a]), Y = m(() => {
+		q.current?.(), fe((e) => e + 1);
+	}, []);
+	h(() => {
+		if (!B || typeof document > "u") return;
+		let e = () => Y();
+		return document.addEventListener("selectionchange", e), () => document.removeEventListener("selectionchange", e);
+	}, [B, Y]), ne(de, () => ({
+		focus: () => z.current?.focus(),
+		getHTML: () => C(z.current?.innerHTML ?? ""),
+		setHTML: (e) => {
+			let t = C(e);
+			K.current = t, z.current && (z.current.innerHTML = w(t)), a(t);
+		},
+		insertHTML: (e) => {
+			E(z.current, e), J();
+		},
+		isEmpty: () => C(z.current?.innerHTML ?? "") === "",
+		clear: () => {
+			K.current = "", z.current && (z.current.innerHTML = "<p></p>"), a("");
+		},
+		getCaretContext: () => oe(),
+		replaceBeforeCaret: (e, t) => T(e, t, J)
+	}), [J, a]);
+	let [me, he] = _(null);
+	h(() => {
+		if (n || !z.current) return;
+		let e = I(z.current);
+		return he(e), () => e.destroy();
+	}, [n]);
+	let X = n ?? me, Z = ie(m((e) => X?.subscribe(e) ?? (() => {}), [X]), () => X?.getState() ?? null, () => null), Q = m((e) => {
+		X?.execute(e), J();
+	}, [X, J]), $ = m((e) => Z?.active.has(e) ?? !1, [Z]), ge = re(() => [
+		{
+			id: "bold",
+			icon: s,
+			label: R.toolbar.bold,
+			isActive: () => $("bold"),
+			run: () => Q("bold")
+		},
+		{
+			id: "italic",
+			icon: l,
+			label: R.toolbar.italic,
+			isActive: () => $("italic"),
+			run: () => Q("italic")
+		},
+		{
+			id: "strike",
+			icon: ee,
+			label: R.toolbar.strike,
+			isActive: () => $("strike"),
+			run: () => Q("strike")
+		},
+		{
+			id: "bullet-list",
+			icon: u,
+			label: R.toolbar.bulletList,
+			isActive: () => $("bulletList"),
+			run: () => Q("bulletList")
+		},
+		{
+			id: "ordered-list",
+			icon: d,
+			label: R.toolbar.orderedList,
+			isActive: () => $("orderedList"),
+			run: () => Q("orderedList")
+		},
+		{
+			id: "blockquote",
+			icon: f,
+			label: R.toolbar.blockquote,
+			isActive: () => $("blockquote"),
+			run: () => Q("blockquote")
+		},
+		{
+			id: "undo",
+			icon: te,
+			label: R.toolbar.undo,
+			isActive: () => !1,
+			run: () => Q("undo"),
+			disabled: Z ? !Z.canUndo : void 0
+		},
+		{
+			id: "redo",
+			icon: p,
+			label: R.toolbar.redo,
+			isActive: () => !1,
+			run: () => Q("redo"),
+			disabled: Z ? !Z.canRedo : void 0
+		}
+	], [
+		R.toolbar,
+		Q,
+		$,
+		Z
+	]), _e = m(() => {
+		if (H) {
+			let e = C(W);
+			K.current = e, z.current && (z.current.innerHTML = w(e)), a(e), U(!1);
+			return;
+		}
+		G(z.current?.innerHTML ?? w(i)), U(!0);
+	}, [
+		a,
+		H,
+		W,
+		i
+	]), ve = m((e) => {
+		let t = e.target.value;
+		G(t);
+		let n = C(t);
+		K.current = n, a(n);
+	}, [a]), ye = re(() => ({
+		minHeight: v ?? (c ? "var(--editor-min-h-compact)" : "var(--editor-min-h)"),
+		...x ? {
+			maxHeight: x,
+			overflowY: "auto"
+		} : {}
+	}), [
+		c,
+		x,
+		v
+	]), be = C(i) === "", xe = ae(H ? W : C(i));
+	return /* @__PURE__ */ b("div", {
+		"data-slot": "rich-text-editor",
+		"data-compact": c || void 0,
+		"data-disabled": S || void 0,
+		className: e("rich-text-editor--component", O.root, ue),
+		children: [
+			/* @__PURE__ */ y(ce, {
+				buttons: ge,
+				extraToolbarItems: A,
+				hideSourceToggle: N,
+				sourceMode: H,
+				toggleSourceMode: _e,
+				disabled: S,
+				toolbarTrailing: j,
+				strings: R
+			}),
+			H ? /* @__PURE__ */ y(r, {
+				"aria-label": R.sourceLabel,
+				value: W,
+				onChange: ve,
+				disabled: S,
+				spellCheck: !1,
+				className: O.source,
+				style: ye
+			}) : /* @__PURE__ */ b("div", {
+				className: O.bodyWrap,
+				style: ye,
+				children: [!!o && be && !B && /* @__PURE__ */ y(t, {
+					size: "sm",
+					type: "secondary",
+					className: O.placeholder,
+					children: o
+				}), /* @__PURE__ */ y("div", {
+					ref: pe,
+					role: "textbox",
+					"aria-label": R.editorLabel,
+					"aria-multiline": "true",
+					contentEditable: !S,
+					suppressContentEditableWarning: !0,
+					onInput: J,
+					onKeyUp: Y,
+					onMouseUp: Y,
+					onFocus: () => V(!0),
+					onBlur: () => V(!1),
+					className: O.body
+				})]
+			}),
+			!!M && /* @__PURE__ */ y("div", {
+				className: O.footerSlot,
+				children: M
+			}),
+			se && /* @__PURE__ */ y(le, {
+				text: xe,
+				maxLength: k,
+				strings: R
+			})
+		]
+	});
+}
+//#endregion
+export { D as a, C as c, w as d, ce as i, oe as l, I as n, ae as o, le as r, E as s, L as t, T as u };

package/dist/rolldown-runtime-BocRIvOZ.cjs

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});

package/dist/sheet-CEc-CIEZ.js

@@ -0,0 +1,37 @@
+import { t as e } from "./cx--CBrhWH0.js";
+import { n as t } from "./ui-provider-DvO3G7xp.js";
+import { a as n, c as r, l as i, n as a, o, r as s, s as c, t as l, u } from "./overlay-Coj3d-6S.js";
+import "react";
+import { jsx as d } from "react/jsx-runtime";
+//#region src/components/base/sheet/sheet.tsx
+var f = {
+	side: "inline-end",
+	size: "md",
+	length: "full",
+	inset: !1
+}, p = l, m = n, h = a, g = i, _ = c, v = o;
+function y({ side: n, size: r, length: i, inset: a, className: o, ...c }) {
+	let l = t("sheet", f);
+	return /* @__PURE__ */ d(s, {
+		placement: n ?? l.side,
+		size: r ?? l.size,
+		length: i ?? l.length,
+		inset: a ?? l.inset,
+		className: e("sheet--component", o),
+		...c
+	});
+}
+function b({ className: t, ...n }) {
+	return /* @__PURE__ */ d(u, {
+		className: e("sheet--header", t),
+		...n
+	});
+}
+function x({ className: t, ...n }) {
+	return /* @__PURE__ */ d(r, {
+		className: e("sheet--footer", t),
+		...n
+	});
+}
+//#endregion
+export { v as a, _ as c, y as i, m as l, g as n, x as o, h as r, b as s, p as t };

package/dist/sheet-CRw6LDWn.cjs

@@ -0,0 +1 @@
+const e=require("./rolldown-runtime-BocRIvOZ.cjs"),t=require("./ui-provider-BS7QPJVb.cjs"),n=require("./overlay-BNubOCUj.cjs");let r=require("react");r=e.t(r,1);let i=require("react/jsx-runtime"),a=require("clsx");var o={side:`inline-end`,size:`md`,length:`full`,inset:!1},s=n.t,c=n.a,l=n.n,u=n.l,d=n.s,f=n.o;function p({side:e,size:r,length:s,inset:c,className:l,...u}){let d=t.n(`sheet`,o);return(0,i.jsx)(n.r,{placement:e??d.side,size:r??d.size,length:s??d.length,inset:c??d.inset,className:(0,a.clsx)(`sheet--component`,l),...u})}function m({className:e,...t}){return(0,i.jsx)(n.u,{className:(0,a.clsx)(`sheet--header`,e),...t})}function h({className:e,...t}){return(0,i.jsx)(n.c,{className:(0,a.clsx)(`sheet--footer`,e),...t})}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});