wimui 0.1.0

package/dist/components/form/RangeSlider/RangeSlider.js

@@ -0,0 +1,156 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { FieldTemplate as n } from "../FieldTemplate/FieldTemplate.js";
+import { useSliderCommon as r } from "../../../utilities/slider-utils.js";
+import i from "./range-slider.module.js";
+import { useCallback as a, useEffect as o, useId as ee, useRef as s, useState as c } from "react";
+import l from "classnames";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/form/RangeSlider/RangeSlider.tsx
+var f = ({ value: f, defaultValue: p = [20, 80], min: m = 0, max: h = 100, step: g = 1, allowCross: _ = !1, disabled: v = !1, onChange: y, onAfterChange: b, className: te, name: x, label: S, error: C, required: ne, layout: re = "vertical", id: ie, "aria-label": w, "aria-labelledby": T, asChild: ae = !1, children: oe, ...se }) => {
+	let E = f !== void 0, ce = ee(), D = ie || ce, O = `wim-range-slider-label-${D}`, k = `wim-range-slider-error-${D}`, { clamp: A, calculateValue: j } = r(m, h, g), M = [A(p[0], m, h), A(p[1], m, h)];
+	M[0] > M[1] && M.sort((e, t) => e - t);
+	let [le, N] = c(M), P = E ? f : le, F = s(null), I = s(null), L = s(null), R = s(null), z = s(null), B = s(null), [V, H] = c(null), U = s(null), W = s([...P]), G = a((e) => (e - m) / (h - m) * 100, [m, h]), K = a((e) => {
+		let t = G(e[0]), n = G(e[1]);
+		I.current && (I.current.style.left = `${t}%`, I.current.setAttribute("aria-valuenow", String(e[0])), I.current.setAttribute("aria-valuemax", String(e[1]))), L.current && (L.current.style.left = `${n}%`, L.current.setAttribute("aria-valuenow", String(e[1])), L.current.setAttribute("aria-valuemin", String(e[0]))), R.current && (R.current.style.left = `${t}%`, R.current.style.width = `${n - t}%`), z.current && (z.current.value = String(e[0])), B.current && (B.current.value = String(e[1]));
+	}, [G]);
+	o(() => {
+		V || K(P);
+	}, [
+		P,
+		V,
+		K
+	]);
+	let q = (e, t) => {
+		v || (W.current = [...P], U.current = t, H(t), e.stopPropagation(), e.preventDefault());
+	}, J = (e) => {
+		if (v) return;
+		let t = "touches" in e ? e.touches[0].clientX : e.clientX, n = j(t, F.current), r = Math.abs(P[0] - n), i = Math.abs(P[1] - n), a;
+		a = r < i ? "min" : i < r ? "max" : n < P[0] ? "min" : "max", U.current = a, H(a);
+		let o = [...W.current];
+		a === "min" ? o[0] = Math.min(n, _ ? h : o[1]) : o[1] = Math.max(n, _ ? m : o[0]), W.current = o, K(o), y?.(o);
+	}, Y = a((e) => {
+		if (!U.current || v) return;
+		let t = "touches" in e ? e.touches[0].clientX : e.clientX, n = j(t, F.current), r = [...W.current];
+		U.current === "min" ? r[0] = Math.min(n, _ ? h : r[1]) : r[1] = Math.max(n, _ ? m : r[0]), W.current = r, K(r), y?.(r);
+	}, [
+		v,
+		y,
+		_,
+		j,
+		m,
+		h,
+		K
+	]), X = a(() => {
+		if (U.current) {
+			U.current = null, H(null);
+			let e = W.current;
+			E || N([...e]), b?.(e);
+		}
+	}, [E, b]);
+	o(() => (document.addEventListener("mousemove", Y), document.addEventListener("mouseup", X), document.addEventListener("touchmove", Y, { passive: !1 }), document.addEventListener("touchend", X), () => {
+		document.removeEventListener("mousemove", Y), document.removeEventListener("mouseup", X), document.removeEventListener("touchmove", Y), document.removeEventListener("touchend", X);
+	}), [Y, X]);
+	let Z = (e, t) => {
+		if (v) return;
+		let n = [...P], r = t === "min" ? n[0] : n[1], i;
+		if (e.key === "ArrowLeft" || e.key === "ArrowDown") i = Math.max(m, r - g);
+		else if (e.key === "ArrowRight" || e.key === "ArrowUp") i = Math.min(h, r + g);
+		else if (e.key === "Home") i = m;
+		else if (e.key === "End") i = h;
+		else return;
+		if (t === "min") {
+			let e = _ ? h : n[1];
+			n[0] = Math.min(i, e);
+		} else {
+			let e = _ ? m : n[0];
+			n[1] = Math.max(i, e);
+		}
+		E || N(n), y?.(n), e.preventDefault();
+	}, Q = G(P[0]), $ = G(P[1]);
+	return /* @__PURE__ */ u(n, {
+		label: S,
+		error: C,
+		required: ne,
+		layout: re,
+		labelId: O,
+		errorId: k,
+		className: te,
+		children: /* @__PURE__ */ d(ae ? e : "div", {
+			role: "presentation",
+			"data-testid": "range-slider-root",
+			className: l("wim-range-slider", i.root, v && i.disabled, C && i.danger),
+			onMouseDown: J,
+			onTouchStart: J,
+			...se,
+			children: [
+				/* @__PURE__ */ d("div", {
+					className: i.trackContainer,
+					ref: F,
+					children: [
+						/* @__PURE__ */ u("div", {
+							ref: R,
+							className: i.track,
+							style: {
+								left: `${Q}%`,
+								width: `${$ - Q}%`
+							}
+						}),
+						/* @__PURE__ */ u("div", {
+							ref: I,
+							className: l(i.thumb, V === "min" && i.active),
+							style: { left: `${Q}%` },
+							role: "slider",
+							"aria-valuemin": m,
+							"aria-valuemax": P[1],
+							"aria-valuenow": P[0],
+							"aria-disabled": v,
+							"aria-labelledby": S ? O : T,
+							"aria-label": S ? `Start ${S}` : w || "Start",
+							"aria-describedby": C ? k : void 0,
+							"aria-invalid": C ? !0 : void 0,
+							tabIndex: v ? -1 : 0,
+							onMouseDown: (e) => q(e, "min"),
+							onTouchStart: (e) => q(e, "min"),
+							onKeyDown: (e) => Z(e, "min")
+						}),
+						/* @__PURE__ */ u("div", {
+							ref: L,
+							className: l(i.thumb, V === "max" && i.active),
+							style: { left: `${$}%` },
+							role: "slider",
+							"aria-valuemin": P[0],
+							"aria-valuemax": h,
+							"aria-valuenow": P[1],
+							"aria-disabled": v,
+							"aria-labelledby": S ? O : T,
+							"aria-label": S ? `End ${S}` : w || "End",
+							"aria-describedby": C ? k : void 0,
+							"aria-invalid": C ? !0 : void 0,
+							tabIndex: v ? -1 : 0,
+							onMouseDown: (e) => q(e, "max"),
+							onTouchStart: (e) => q(e, "max"),
+							onKeyDown: (e) => Z(e, "max")
+						})
+					]
+				}),
+				/* @__PURE__ */ u("input", {
+					ref: z,
+					type: "hidden",
+					name: x ? `${x}-min` : "",
+					value: P[0]
+				}),
+				/* @__PURE__ */ u("input", {
+					ref: B,
+					type: "hidden",
+					name: x ? `${x}-max` : "",
+					value: P[1]
+				}),
+				/* @__PURE__ */ u(t, { children: oe })
+			]
+		})
+	});
+};
+f.displayName = "RangeSlider";
+//#endregion
+export { f as RangeSlider };

package/dist/components/form/RangeSlider/range-slider.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_19n6h_3`,t=`_disabled_19n6h_12`,n=`_thumb_19n6h_16`,r=`_danger_19n6h_19`,i=`_track_19n6h_19`,a=`_trackContainer_19n6h_31`,o=`_active_19n6h_60`,s={root:e,disabled:t,thumb:n,danger:r,track:i,trackContainer:a,active:o};exports.active=o,exports.danger=r,exports.default=s,exports.disabled=t,exports.root=e,exports.thumb=n,exports.track=i,exports.trackContainer=a;

package/dist/components/form/RangeSlider/range-slider.module.js

@@ -0,0 +1,13 @@
+"use client";
+//#region src/components/form/RangeSlider/range-slider.module.scss
+var e = "_root_19n6h_3", t = "_disabled_19n6h_12", n = "_thumb_19n6h_16", r = "_danger_19n6h_19", i = "_track_19n6h_19", a = "_trackContainer_19n6h_31", o = "_active_19n6h_60", s = {
+	root: e,
+	disabled: t,
+	thumb: n,
+	danger: r,
+	track: i,
+	trackContainer: a,
+	active: o
+};
+//#endregion
+export { o as active, r as danger, s as default, t as disabled, e as root, n as thumb, i as track, a as trackContainer };

package/dist/components/form/Rating/Rating.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../icon/star.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../FieldTemplate/FieldTemplate.cjs"),a=require("./rating.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=({value:e,defaultValue:l=0,count:u=5,allowHalf:d=!1,disabled:f=!1,readOnly:p=!1,size:m=`md`,onChange:h,className:g,label:_,error:v,required:y,layout:b=`vertical`,labels:x={},asChild:S=!1,children:C,...w})=>{let{star:T=e=>`${e} star${e===1?``:`s`}`,readonly:E=(e,t)=>`Rating: ${e} out of ${t}`}=x,D=e!==void 0,[O,k]=(0,o.useState)(l),[A,j]=(0,o.useState)(null),M=(0,o.useId)(),N=`wim-rating-label-${M}`,P=`wim-rating-error-${M}`,F=(0,o.useRef)([]),I=D?e:O,L=A===null?I:A,R=(e,t)=>{if(f||p)return;let n=e+1;if(d){let e=t.currentTarget.getBoundingClientRect();t.clientX-e.left<=e.width/2&&(n-=.5)}j(n)},z=()=>{f||p||j(null)},B=e=>{f||p||(D||k(e),h?.(e))},V=(()=>{if(I===0)return 0;for(let e=0;e<u;e++){let t=e+1;if(I===t||d&&I===t-.5)return e}return 0})(),H=(e,t)=>{if(f||p)return;let n=d?.5:1;if(t.key===`ArrowRight`||t.key===`ArrowUp`){t.preventDefault();let e=Math.min(u,I+n),r=Math.min(Math.ceil(e)-1,u-1);B(e),F.current[r]?.focus()}else if(t.key===`ArrowLeft`||t.key===`ArrowDown`){t.preventDefault();let e=Math.max(0,I-n),r=e===0?0:Math.ceil(e)-1;B(e),F.current[r]?.focus()}else t.key===`Home`?(t.preventDefault(),B(0),F.current[0]?.focus()):t.key===`End`&&(t.preventDefault(),B(u),F.current[u-1]?.focus())},U=e=>{let t=e+1,i=L>=t,o=!i&&L>=t-.5,l=I===t||d&&I===t-.5;return(0,c.jsxs)(`div`,{ref:t=>{F.current[e]=t},className:(0,s.default)(a.default.star,i&&a.default.full,o&&a.default.half),onMouseMove:t=>R(e,t),onClick:e=>{let n=e.currentTarget.getBoundingClientRect(),r=e.clientX-n.left,i=t;d&&r<=n.width/2&&(i-=.5),B(i)},onKeyDown:n=>{n.key===`Enter`||n.key===` `?(n.preventDefault(),B(t)):H(e,n)},role:p?`presentation`:`radio`,tabIndex:f||p?-1:e===V?0:-1,"aria-checked":p?void 0:l,"aria-label":p?void 0:T(e+1),children:[(0,c.jsx)(`div`,{className:a.default.background,children:(0,c.jsx)(r.Icon,{component:n.default,size:m,className:a.default.icon})}),(0,c.jsx)(`div`,{className:a.default.foreground,children:(0,c.jsx)(r.Icon,{component:n.default,size:m,className:a.default.icon})})]},e)},W=Array.from({length:u},(e,t)=>U(t));return(0,c.jsx)(i.FieldTemplate,{label:_,error:v,required:y,layout:b,labelId:N,errorId:P,className:g,children:(0,c.jsxs)(S?t.Root:`div`,{className:(0,s.default)(`wim-rating`,a.default.root,a.default[m],f&&a.default.disabled),onMouseLeave:p?void 0:z,role:p?`img`:`radiogroup`,"aria-label":p?E(I,u):void 0,"aria-labelledby":!p&&_?N:void 0,"aria-disabled":!p&&f?!0:void 0,"aria-required":p?void 0:y,"aria-describedby":!p&&v?P:void 0,"aria-invalid":!p&&v?!0:void 0,...w,children:[W,(0,c.jsx)(t.Slottable,{children:C})]})})};exports.Rating=l;

package/dist/components/form/Rating/Rating.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+import { ComponentSizeBasic } from '../../../types/tokens';
+export type RatingLabels = {
+    star?: (count: number) => string;
+    readonly?: (value: number, max: number) => string;
+};
+type RatingProps = Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> & {
+    /** Current value (controlled) */
+    value?: number;
+    /** Default value (uncontrolled) */
+    defaultValue?: number;
+    /** Total number of stars */
+    count?: number;
+    /** Whether to allow half stars */
+    allowHalf?: boolean;
+    /** Whether the rating is disabled */
+    disabled?: boolean;
+    /** Read-only flag (display only; unlike disabled it is not grayed out) */
+    readOnly?: boolean;
+    /** Size of the stars */
+    size?: ComponentSizeBasic;
+    /** Callback when the value changes */
+    onChange?: (value: number) => void;
+    /** Additional class names */
+    className?: string;
+    /** Accessible label */
+    label?: React.ReactNode;
+    /** Error message */
+    error?: string;
+    /** Whether to show the required indicator */
+    required?: boolean;
+    /** Layout direction of label and field */
+    layout?: "vertical" | "horizontal";
+    /** Labels for internationalization */
+    labels?: RatingLabels;
+    /** Whether to render as a child element. */
+    asChild?: boolean;
+};
+/**
+ * Rating component for users to give a score.
+ */
+export declare const Rating: ({ value, defaultValue, count, allowHalf, disabled, readOnly, size, onChange, className, label, error, required, layout, labels, asChild, children, ...props }: RatingProps) => React.JSX.Element;
+export {};

package/dist/components/form/Rating/Rating.js

@@ -0,0 +1,103 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import n from "../../../icon/star.js";
+import { Icon as r } from "../../media/Icon/Icon.js";
+import { FieldTemplate as i } from "../FieldTemplate/FieldTemplate.js";
+import a from "./rating.module.js";
+import { useId as o, useRef as s, useState as c } from "react";
+import l from "classnames";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/form/Rating/Rating.tsx
+var f = ({ value: f, defaultValue: p = 0, count: m = 5, allowHalf: h = !1, disabled: g = !1, readOnly: _ = !1, size: v = "md", onChange: y, className: b, label: x, error: S, required: C, layout: w = "vertical", labels: T = {}, asChild: E = !1, children: D, ...O }) => {
+	let { star: k = (e) => `${e} star${e === 1 ? "" : "s"}`, readonly: A = (e, t) => `Rating: ${e} out of ${t}` } = T, j = f !== void 0, [M, N] = c(p), [P, F] = c(null), I = o(), L = `wim-rating-label-${I}`, R = `wim-rating-error-${I}`, z = s([]), B = j ? f : M, V = P === null ? B : P, H = (e, t) => {
+		if (g || _) return;
+		let n = e + 1;
+		if (h) {
+			let e = t.currentTarget.getBoundingClientRect();
+			t.clientX - e.left <= e.width / 2 && (n -= .5);
+		}
+		F(n);
+	}, U = () => {
+		g || _ || F(null);
+	}, W = (e) => {
+		g || _ || (j || N(e), y?.(e));
+	}, G = (() => {
+		if (B === 0) return 0;
+		for (let e = 0; e < m; e++) {
+			let t = e + 1;
+			if (B === t || h && B === t - .5) return e;
+		}
+		return 0;
+	})(), K = (e, t) => {
+		if (g || _) return;
+		let n = h ? .5 : 1;
+		if (t.key === "ArrowRight" || t.key === "ArrowUp") {
+			t.preventDefault();
+			let e = Math.min(m, B + n), r = Math.min(Math.ceil(e) - 1, m - 1);
+			W(e), z.current[r]?.focus();
+		} else if (t.key === "ArrowLeft" || t.key === "ArrowDown") {
+			t.preventDefault();
+			let e = Math.max(0, B - n), r = e === 0 ? 0 : Math.ceil(e) - 1;
+			W(e), z.current[r]?.focus();
+		} else t.key === "Home" ? (t.preventDefault(), W(0), z.current[0]?.focus()) : t.key === "End" && (t.preventDefault(), W(m), z.current[m - 1]?.focus());
+	}, q = (e) => {
+		let t = e + 1, i = V >= t, o = !i && V >= t - .5, s = B === t || h && B === t - .5;
+		return /* @__PURE__ */ d("div", {
+			ref: (t) => {
+				z.current[e] = t;
+			},
+			className: l(a.star, i && a.full, o && a.half),
+			onMouseMove: (t) => H(e, t),
+			onClick: (e) => {
+				let n = e.currentTarget.getBoundingClientRect(), r = e.clientX - n.left, i = t;
+				h && r <= n.width / 2 && (i -= .5), W(i);
+			},
+			onKeyDown: (n) => {
+				n.key === "Enter" || n.key === " " ? (n.preventDefault(), W(t)) : K(e, n);
+			},
+			role: _ ? "presentation" : "radio",
+			tabIndex: g || _ ? -1 : e === G ? 0 : -1,
+			"aria-checked": _ ? void 0 : s,
+			"aria-label": _ ? void 0 : k(e + 1),
+			children: [/* @__PURE__ */ u("div", {
+				className: a.background,
+				children: /* @__PURE__ */ u(r, {
+					component: n,
+					size: v,
+					className: a.icon
+				})
+			}), /* @__PURE__ */ u("div", {
+				className: a.foreground,
+				children: /* @__PURE__ */ u(r, {
+					component: n,
+					size: v,
+					className: a.icon
+				})
+			})]
+		}, e);
+	}, J = Array.from({ length: m }, (e, t) => q(t));
+	return /* @__PURE__ */ u(i, {
+		label: x,
+		error: S,
+		required: C,
+		layout: w,
+		labelId: L,
+		errorId: R,
+		className: b,
+		children: /* @__PURE__ */ d(E ? e : "div", {
+			className: l("wim-rating", a.root, a[v], g && a.disabled),
+			onMouseLeave: _ ? void 0 : U,
+			role: _ ? "img" : "radiogroup",
+			"aria-label": _ ? A(B, m) : void 0,
+			"aria-labelledby": !_ && x ? L : void 0,
+			"aria-disabled": !_ && g ? !0 : void 0,
+			"aria-required": _ ? void 0 : C,
+			"aria-describedby": !_ && S ? R : void 0,
+			"aria-invalid": !_ && S ? !0 : void 0,
+			...O,
+			children: [J, /* @__PURE__ */ u(t, { children: D })]
+		})
+	});
+};
+//#endregion
+export { f as Rating };

package/dist/components/form/Rating/rating.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_b8px8_2`,t=`_sm_b8px8_6`,n=`_md_b8px8_10`,r=`_lg_b8px8_14`,i=`_disabled_b8px8_18`,a=`_star_b8px8_21`,o=`_foreground_b8px8_24`,s=`_full_b8px8_38`,c=`_half_b8px8_41`,l=`_background_b8px8_44`,u=`_icon_b8px8_47`,d={root:e,sm:t,md:n,lg:r,disabled:i,star:a,foreground:o,full:s,half:c,background:l,icon:u};exports.background=l,exports.default=d,exports.disabled=i,exports.foreground=o,exports.full=s,exports.half=c,exports.icon=u,exports.lg=r,exports.md=n,exports.root=e,exports.sm=t,exports.star=a;

package/dist/components/form/Rating/rating.module.js

@@ -0,0 +1,17 @@
+"use client";
+//#region src/components/form/Rating/rating.module.scss
+var e = "_root_b8px8_2", t = "_sm_b8px8_6", n = "_md_b8px8_10", r = "_lg_b8px8_14", i = "_disabled_b8px8_18", a = "_star_b8px8_21", o = "_foreground_b8px8_24", s = "_full_b8px8_38", c = "_half_b8px8_41", l = "_background_b8px8_44", u = "_icon_b8px8_47", d = {
+	root: e,
+	sm: t,
+	md: n,
+	lg: r,
+	disabled: i,
+	star: a,
+	foreground: o,
+	full: s,
+	half: c,
+	background: l,
+	icon: u
+};
+//#endregion
+export { l as background, d as default, i as disabled, o as foreground, s as full, c as half, u as icon, r as lg, n as md, e as root, t as sm, a as star };

package/dist/components/form/RichTextEditor/RichTextEditor.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../Button/Button.cjs"),r=require("../FieldTemplate/FieldTemplate.cjs"),i=require("../Input/Input.cjs"),a=require("../../overlay/Dialog/Dialog.cjs"),o=require("./commands.cjs"),s=require("./rich-text-editor.module.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var ee=()=>(0,u.jsxs)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2.5`,"aria-hidden":`true`,children:[(0,u.jsx)(`path`,{d:`M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z`}),(0,u.jsx)(`path`,{d:`M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z`})]}),te=()=>(0,u.jsxs)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2.5`,"aria-hidden":`true`,children:[(0,u.jsx)(`line`,{x1:`19`,y1:`4`,x2:`10`,y2:`4`}),(0,u.jsx)(`line`,{x1:`14`,y1:`20`,x2:`5`,y2:`20`}),(0,u.jsx)(`line`,{x1:`15`,y1:`4`,x2:`9`,y2:`20`})]}),ne=()=>(0,u.jsxs)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2.5`,"aria-hidden":`true`,children:[(0,u.jsx)(`path`,{d:`M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3`}),(0,u.jsx)(`line`,{x1:`4`,y1:`21`,x2:`20`,y2:`21`})]}),re=()=>(0,u.jsxs)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2.5`,"aria-hidden":`true`,children:[(0,u.jsx)(`path`,{d:`M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6`}),(0,u.jsx)(`line`,{x1:`4`,y1:`12`,x2:`20`,y2:`12`})]}),ie=()=>(0,u.jsxs)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,"aria-hidden":`true`,children:[(0,u.jsx)(`line`,{x1:`9`,y1:`6`,x2:`20`,y2:`6`}),(0,u.jsx)(`line`,{x1:`9`,y1:`12`,x2:`20`,y2:`12`}),(0,u.jsx)(`line`,{x1:`9`,y1:`18`,x2:`20`,y2:`18`}),(0,u.jsx)(`circle`,{cx:`4`,cy:`6`,r:`1.5`,fill:`currentColor`,stroke:`none`}),(0,u.jsx)(`circle`,{cx:`4`,cy:`12`,r:`1.5`,fill:`currentColor`,stroke:`none`}),(0,u.jsx)(`circle`,{cx:`4`,cy:`18`,r:`1.5`,fill:`currentColor`,stroke:`none`})]}),ae=()=>(0,u.jsxs)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,"aria-hidden":`true`,children:[(0,u.jsx)(`line`,{x1:`10`,y1:`6`,x2:`21`,y2:`6`}),(0,u.jsx)(`line`,{x1:`10`,y1:`12`,x2:`21`,y2:`12`}),(0,u.jsx)(`line`,{x1:`10`,y1:`18`,x2:`21`,y2:`18`}),(0,u.jsx)(`text`,{x:`1`,y:`8`,fontSize:`7`,fill:`currentColor`,stroke:`none`,fontWeight:`bold`,children:`1.`}),(0,u.jsx)(`text`,{x:`1`,y:`14`,fontSize:`7`,fill:`currentColor`,stroke:`none`,fontWeight:`bold`,children:`2.`}),(0,u.jsx)(`text`,{x:`1`,y:`20`,fontSize:`7`,fill:`currentColor`,stroke:`none`,fontWeight:`bold`,children:`3.`})]}),oe=()=>(0,u.jsxs)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,"aria-hidden":`true`,children:[(0,u.jsx)(`path`,{d:`M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71`}),(0,u.jsx)(`path`,{d:`M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71`})]}),se=()=>(0,u.jsxs)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,"aria-hidden":`true`,children:[(0,u.jsx)(`path`,{d:`M18.84 12.25l1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.72`}),(0,u.jsx)(`path`,{d:`M5.17 11.75l-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71`}),(0,u.jsx)(`line`,{x1:`8`,y1:`2`,x2:`8`,y2:`5`}),(0,u.jsx)(`line`,{x1:`2`,y1:`8`,x2:`5`,y2:`8`}),(0,u.jsx)(`line`,{x1:`16`,y1:`19`,x2:`16`,y2:`22`}),(0,u.jsx)(`line`,{x1:`19`,y1:`16`,x2:`22`,y2:`16`})]}),ce=()=>(0,u.jsxs)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,"aria-hidden":`true`,children:[(0,u.jsx)(`path`,{d:`M20 20H7L3 16l10-10 7 7-3.5 3.5`}),(0,u.jsx)(`line`,{x1:`6`,y1:`7`,x2:`17`,y2:`18`})]}),le=[`bold`,`italic`,`underline`,`strikethrough`,`separator`,`h1`,`h2`,`h3`,`separator`,`ul`,`ol`,`separator`,`link`,`unlink`,`separator`,`removeFormat`],d=c.default.memo(({onClick:e,active:t,disabled:n,title:r,children:i})=>(0,u.jsx)(`button`,{type:`button`,className:(0,l.default)(s.default.toolbarBtn,t&&s.default.active),onClick:e,disabled:n,title:r,"aria-label":r,"aria-pressed":t,tabIndex:-1,children:i}));d.displayName=`ToolbarButton`;var f=({value:e,defaultValue:f=``,onChange:p,placeholder:m,disabled:ue,intent:de=`default`,variant:fe=`outline`,fullWidth:h=!1,width:g,minHeight:_=200,label:v,error:y,required:pe,layout:me,className:he,id:ge,toolbar:_e=le,labels:ve={},"aria-label":ye,"aria-labelledby":be})=>{let{t:b}=t.useWimTranslation(`components`),{bold:xe=b(`a11y.rte_bold`),italic:x=b(`a11y.rte_italic`),underline:S=b(`a11y.rte_underline`),strikethrough:C=b(`a11y.rte_strikethrough`),h1:w=b(`a11y.rte_h1`),h2:T=b(`a11y.rte_h2`),h3:E=b(`a11y.rte_h3`),ul:D=b(`a11y.rte_ul`),ol:O=b(`a11y.rte_ol`),link:k=b(`a11y.rte_link`),unlink:A=b(`a11y.rte_unlink`),removeFormat:j=b(`a11y.rte_remove_format`),toolbar:Se=b(`a11y.rte_toolbar`),linkPrompt:Ce=b(`a11y.rte_link_prompt`),linkApply:we=b(`a11y.rte_link_apply`),linkCancel:Te=b(`a11y.rte_link_cancel`)}=ve,M=c.default.useRef(null),N=c.default.useRef(!1),P=c.default.useRef(e??f),[F,Ee]=c.default.useState(new Set),De=c.default.useId(),I=ge||`wim-rte-${De}`,L=y?`${I}-error`:void 0,Oe=v?`${I}-label`:void 0,R=ue,ke=y?`danger`:de,Ae=typeof g==`string`&&[`xs`,`sm`,`md`,`lg`,`xl`].includes(g),je=g!==void 0&&!Ae&&!h,z=Ae&&!h?g:void 0,Me=z?s.default[`width${z.charAt(0).toUpperCase()}${z.slice(1)}`]:void 0,B=c.default.useRef(e===void 0?f:e),V=c.default.useCallback(()=>{M.current&&Ee(o.getActiveFormats(M.current))},[]),H=c.default.useRef([]),U=c.default.useRef(-1),W=c.default.useRef(void 0),G=c.default.useCallback(e=>{let t=H.current,n=U.current;if(t[n]===e)return;let r=[...t.slice(0,n+1),e];r.length>100&&(r=r.slice(1)),H.current=r,U.current=r.length-1},[]),K=c.default.useCallback(()=>{W.current!==void 0&&(clearTimeout(W.current),W.current=void 0,G(P.current))},[G]),q=c.default.useCallback(e=>{K();let t=H.current,n=U.current+e;if(n<0||n>=t.length||!M.current)return;U.current=n;let r=t[n];M.current.innerHTML=r,P.current=r,p?.(r);let i=document.createRange();i.selectNodeContents(M.current),i.collapse(!1);let a=window.getSelection();a?.removeAllRanges(),a?.addRange(i),V()},[K,p,V]),J=c.default.useCallback(e=>{if(R||!M.current)return;let t=M.current,n=o.getEditorRange(t)?.cloneRange()??null;if(t.focus(),n){let e=window.getSelection();e?.removeAllRanges(),e?.addRange(n)}K(),G(t.innerHTML),e(t),V();let r=t.innerHTML;P.current=r,G(r),p?.(r)},[R,K,G,p,V]),Ne=c.default.useCallback(()=>{J(e=>o.removeAllFormatting(e))},[J]),[Pe,Y]=c.default.useState(!1),[X,Fe]=c.default.useState(`https://`),Z=c.default.useRef(null),Q=c.default.useCallback(()=>{if(R||!M.current)return;M.current.focus();let e=o.getEditorRange(M.current);Z.current=e?e.cloneRange():null;let t=e?.toString()??``;Fe(t.startsWith(`http`)?t:`https://`),Y(!0)},[R]),Ie=c.default.useCallback(()=>{let e=X.trim();if(Y(!1),!e||!M.current)return;let t=window.getSelection();if(t?.removeAllRanges(),Z.current)t?.addRange(Z.current);else{let e=document.createRange();e.selectNodeContents(M.current),e.collapse(!1),t?.addRange(e)}J(t=>o.createLink(t,e))},[X,J]),$=c.default.useCallback(()=>{if(N.current)return;let e=M.current?.innerHTML??``;e!==P.current&&(P.current=e,p?.(e),W.current!==void 0&&clearTimeout(W.current),W.current=setTimeout(()=>{W.current=void 0,G(P.current)},400)),V()},[p,G,V]),Le=c.default.useCallback(e=>{let t=e.nativeEvent.inputType;t===`historyUndo`?(e.preventDefault(),q(-1)):t===`historyRedo`&&(e.preventDefault(),q(1))},[q]),Re=c.default.useCallback(e=>{if(!(e.ctrlKey||e.metaKey))return;let t=e.key.toLowerCase();t===`z`?(e.preventDefault(),q(e.shiftKey?1:-1)):t===`y`&&(e.preventDefault(),q(1))},[q]),ze=c.default.useCallback(()=>{V()},[V]),Be=c.default.useCallback(()=>{V()},[V]),Ve=c.default.useCallback(()=>{N.current=!0},[]),He=c.default.useCallback(()=>{N.current=!1,$()},[$]),Ue=c.default.useCallback(e=>{e.preventDefault()},[]);c.default.useEffect(()=>{M.current&&(M.current.innerHTML=B.current,P.current=B.current,H.current=[B.current],U.current=0)},[]),c.default.useEffect(()=>{e!==void 0&&M.current&&M.current.innerHTML!==e&&(M.current.innerHTML=e,P.current=e)},[e]);let We=c.default.useCallback((e,t)=>{if(e===`separator`)return(0,u.jsx)(`span`,{className:s.default.toolbarSep,"aria-hidden":`true`},`sep-${t}`);let n={disabled:R,active:F.has(e)};switch(e){case`bold`:return(0,u.jsx)(d,{...n,title:xe,onClick:()=>J(e=>o.toggleInline(e,`bold`)),children:(0,u.jsx)(ee,{})},`bold`);case`italic`:return(0,u.jsx)(d,{...n,title:x,onClick:()=>J(e=>o.toggleInline(e,`italic`)),children:(0,u.jsx)(te,{})},`italic`);case`underline`:return(0,u.jsx)(d,{...n,title:S,onClick:()=>J(e=>o.toggleInline(e,`underline`)),children:(0,u.jsx)(ne,{})},`underline`);case`strikethrough`:return(0,u.jsx)(d,{...n,title:C,onClick:()=>J(e=>o.toggleInline(e,`strikethrough`)),children:(0,u.jsx)(re,{})},`strikethrough`);case`h1`:return(0,u.jsx)(d,{...n,active:F.has(`h1`),title:w,onClick:()=>J(e=>o.setBlock(e,`h1`)),children:(0,u.jsx)(`span`,{"aria-hidden":`true`,children:`H1`})},`h1`);case`h2`:return(0,u.jsx)(d,{...n,active:F.has(`h2`),title:T,onClick:()=>J(e=>o.setBlock(e,`h2`)),children:(0,u.jsx)(`span`,{"aria-hidden":`true`,children:`H2`})},`h2`);case`h3`:return(0,u.jsx)(d,{...n,active:F.has(`h3`),title:E,onClick:()=>J(e=>o.setBlock(e,`h3`)),children:(0,u.jsx)(`span`,{"aria-hidden":`true`,children:`H3`})},`h3`);case`ul`:return(0,u.jsx)(d,{...n,title:D,onClick:()=>J(e=>o.toggleList(e,`ul`)),children:(0,u.jsx)(ie,{})},`ul`);case`ol`:return(0,u.jsx)(d,{...n,title:O,onClick:()=>J(e=>o.toggleList(e,`ol`)),children:(0,u.jsx)(ae,{})},`ol`);case`link`:return(0,u.jsx)(d,{...n,title:k,onClick:Q,children:(0,u.jsx)(oe,{})},`link`);case`unlink`:return(0,u.jsx)(d,{...n,title:A,onClick:()=>J(e=>o.removeLink(e)),children:(0,u.jsx)(se,{})},`unlink`);case`removeFormat`:return(0,u.jsx)(d,{...n,title:j,onClick:Ne,children:(0,u.jsx)(ce,{})},`removeFormat`);default:return null}},[F,R,xe,x,S,C,w,T,E,D,O,k,A,j,J,Q,Ne]);return(0,u.jsx)(r.FieldTemplate,{label:v,error:y,required:pe,layout:me,labelId:Oe,errorId:L,className:he,children:(0,u.jsxs)(`div`,{className:(0,l.default)(`wim-rich-text-editor`,s.default.root,s.default[ke],R&&s.default.disabled,s.default[fe],h&&s.default.fullWidth,je&&s.default.hasCustomWidth,Me),style:je?{"--wim-input-width":typeof g==`number`?`${g}px`:g}:void 0,children:[(0,u.jsx)(`div`,{className:s.default.toolbar,role:`toolbar`,"aria-label":Se,"aria-controls":I,onMouseDown:Ue,children:_e.map((e,t)=>We(e,t))}),(0,u.jsx)(`div`,{ref:M,id:I,className:s.default.content,contentEditable:!R,suppressContentEditableWarning:!0,role:`textbox`,"aria-multiline":!0,"aria-label":ye??(v||be?void 0:b(`a11y.rte_editor`)),"aria-labelledby":be??(v?Oe:void 0),"aria-invalid":ke===`danger`,"aria-describedby":L,"aria-required":pe,"aria-disabled":R,"aria-placeholder":m,"data-placeholder":m,tabIndex:R?-1:0,style:{minHeight:typeof _==`number`?`${_}px`:_,outline:`none`},onInput:$,onBeforeInput:Le,onKeyDown:Re,onKeyUp:ze,onMouseUp:Be,onCompositionStart:Ve,onCompositionEnd:He}),(0,u.jsx)(a.Dialog,{open:Pe,onOpenChange:Y,children:(0,u.jsxs)(a.DialogContent,{children:[(0,u.jsx)(a.DialogHeader,{children:(0,u.jsx)(a.DialogTitle,{children:k})}),(0,u.jsxs)(`form`,{onSubmit:e=>{e.preventDefault(),Ie()},children:[(0,u.jsx)(i.Input,{label:Ce,type:`url`,value:X,onChange:e=>Fe(e.target.value),fullWidth:!0}),(0,u.jsxs)(a.DialogFooter,{children:[(0,u.jsx)(a.DialogClose,{asChild:!0,children:(0,u.jsx)(n.Button,{variant:`ghost`,type:`button`,children:Te})}),(0,u.jsx)(n.Button,{variant:`solid`,type:`submit`,children:we})]})]})]})})]})})};f.displayName=`RichTextEditor`,exports.RichTextEditor=f;

package/dist/components/form/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,70 @@
+import { default as React } from 'react';
+import { FieldIntent, FieldVariant, FieldWidth } from '../../../types/tokens';
+export type RichTextEditorToolbarItem = "bold" | "italic" | "underline" | "strikethrough" | "h1" | "h2" | "h3" | "ul" | "ol" | "link" | "unlink" | "removeFormat" | "separator";
+export type RichTextEditorLabels = {
+    bold?: string;
+    italic?: string;
+    underline?: string;
+    strikethrough?: string;
+    h1?: string;
+    h2?: string;
+    h3?: string;
+    ul?: string;
+    ol?: string;
+    link?: string;
+    unlink?: string;
+    removeFormat?: string;
+    toolbar?: string;
+    linkPrompt?: string;
+    linkApply?: string;
+    linkCancel?: string;
+};
+export type RichTextEditorProps = {
+    /** HTML content (controlled) */
+    value?: string;
+    /** Initial HTML content (uncontrolled) */
+    defaultValue?: string;
+    /** Callback when the content changes */
+    onChange?: (value: string) => void;
+    /** Placeholder shown when the editor is empty */
+    placeholder?: string;
+    /** Whether the editor is disabled */
+    disabled?: boolean;
+    /** Semantic intent of the field (e.g. error state) */
+    intent?: FieldIntent;
+    /** Visual style variant of the field */
+    variant?: FieldVariant;
+    /** Whether to take full width of parent */
+    fullWidth?: boolean;
+    /** Fixed width of the field (width token, CSS value, or number in px) */
+    width?: FieldWidth | string | number;
+    /** Minimum height of the editing area */
+    minHeight?: number | string;
+    /** Field label */
+    label?: React.ReactNode;
+    /** Error message */
+    error?: string;
+    /** Whether to show the required indicator */
+    required?: boolean;
+    /** Layout direction of label and field */
+    layout?: "vertical" | "horizontal";
+    /** Additional class names */
+    className?: string;
+    /** Unique ID for the component */
+    id?: string;
+    /** Toolbar items to display, in order */
+    toolbar?: RichTextEditorToolbarItem[];
+    /** Labels for internationalization */
+    labels?: RichTextEditorLabels;
+    /** Accessible label when no visible label is provided */
+    "aria-label"?: string;
+    /** ID of the element that labels the editor */
+    "aria-labelledby"?: string;
+};
+/**
+ * WYSIWYG editor component for rich text input.
+ */
+export declare const RichTextEditor: {
+    ({ value, defaultValue, onChange, placeholder, disabled, intent, variant, fullWidth, width, minHeight, label, error, required, layout, className, id: customId, toolbar, labels, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: RichTextEditorProps): React.JSX.Element;
+    displayName: string;
+};