wimui 0.1.0

package/dist/components/form/Select/Select.js

@@ -0,0 +1,174 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
+import { Transition as r } from "../../layout/Transition/Transition.js";
+import { BaseListItem as i } from "../../_internal/BaseListItem/BaseListItem.js";
+import { InputBase as a } from "../InputBase/InputBase.js";
+import { FieldTemplate as o } from "../FieldTemplate/FieldTemplate.js";
+import { mergeRefs as s } from "../../_internal/mergeRefs.js";
+import c from "./select.module.js";
+import { useSelect as l } from "./useSelect.js";
+import u, { forwardRef as d, useId as ee } from "react";
+import f from "classnames";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/form/Select/Select.tsx
+var h = d(({ options: d = [], value: h, onChange: g, placeholder: _, label: v, error: y, required: b, layout: x, className: S, disabled: C = !1, defaultValue: te, searchable: w = !1, searchPlaceholder: T, filterOption: E, grouped: D = !1, allowClear: O = !1, fullWidth: k = !1, intent: ne = "default", id: re, noOptionsFoundLabel: A, width: j, styles: M, asChild: ie = !1, children: ae, ...oe }, se) => {
+	let { t: ce } = n("form"), le = ee(), N = re || `wim-select-${le}`, P = v ? `${N}-label` : void 0, F = y ? `${N}-error` : void 0, I = `${N}-list`, L = `${N}-trigger`, R = y ? "danger" : ne, { isOpen: z, searchValue: B, setSearchValue: V, focusedIndex: H, setFocusedIndex: U, isKeyboardNavigating: ue, setIsKeyboardNavigating: de, containerRef: fe, triggerRef: pe, searchInputRef: me, listItemsRef: W, currentValue: G, filteredOptions: K, selectedOption: q, focusedOption: J, handleToggle: he, handleSelect: Y, handleClear: ge, handleKeyDown: X } = l({
+		options: d,
+		value: h,
+		onChange: g,
+		defaultValue: te,
+		searchable: w,
+		grouped: D,
+		disabled: C,
+		filterOption: E
+	}), _e = s(fe, se), ve = () => {
+		let e = 0;
+		return D && d.length > 0 && "options" in d[0] ? d.map((t, n) => {
+			let r = t.options.filter((e) => e.type === "separator" || !B || (E || ((e, t) => (typeof e.label == "string" ? e.label : "").toLowerCase().includes(t.toLowerCase())))(e, B));
+			return r.length === 0 ? null : /* @__PURE__ */ m(u.Fragment, { children: [/* @__PURE__ */ p("li", {
+				className: f(c.groupLabel, M?.groupLabel),
+				role: "presentation",
+				children: t.label
+			}), r.map((t, r) => {
+				let a = e++;
+				if (t.type === "separator") return /* @__PURE__ */ p("li", {
+					className: f(c.separator, M?.separator),
+					role: "presentation"
+				}, `sep-${n}-${r}`);
+				let o = a === H, s = G === t.value;
+				return /* @__PURE__ */ p(i, {
+					asChild: !0,
+					id: `wim-select-option-${N}-${t.value}`,
+					ref: (e) => {
+						W.current[a] = e;
+					},
+					active: o,
+					disabled: t.disabled,
+					className: f(c.option, s && c.selected, M?.option),
+					onClick: (e) => {
+						e.stopPropagation(), Y(t);
+					},
+					onMouseEnter: () => U(a),
+					role: "option",
+					"aria-selected": s,
+					children: /* @__PURE__ */ p("li", { children: t.label })
+				}, t.value);
+			})] }, n);
+		}) : K.map((t, n) => {
+			let r = e++;
+			if (t.type === "separator") return /* @__PURE__ */ p("li", {
+				className: f(c.separator, M?.separator),
+				role: "presentation"
+			}, `sep-${n}`);
+			let a = r === H, o = G === t.value;
+			return /* @__PURE__ */ p(i, {
+				asChild: !0,
+				id: `wim-select-option-${N}-${t.value}`,
+				ref: (e) => {
+					W.current[r] = e;
+				},
+				active: a,
+				disabled: t.disabled,
+				className: f(c.option, o && c.selected, M?.option),
+				onClick: (e) => {
+					e.stopPropagation(), Y(t);
+				},
+				onMouseEnter: () => U(r),
+				role: "option",
+				"aria-selected": o,
+				children: /* @__PURE__ */ p("li", { children: t.label })
+			}, t.value);
+		});
+	}, Z = J && J.type !== "separator" ? `wim-select-option-${N}-${J.value}` : void 0, { "aria-label": Q, "aria-labelledby": $, "aria-describedby": ye, ...be } = oe;
+	return /* @__PURE__ */ p(o, {
+		label: v,
+		error: y,
+		required: b,
+		layout: x,
+		labelId: P,
+		htmlFor: L,
+		errorId: F,
+		className: S,
+		children: /* @__PURE__ */ m(ie ? e : "div", {
+			className: f("wim-select", c.root, k && c.fullWidth, M?.root),
+			ref: _e,
+			onMouseMove: () => de(!1),
+			"data-keyboard-nav": ue,
+			...be,
+			children: [/* @__PURE__ */ m(t, { children: [/* @__PURE__ */ p(a, {
+				disabled: C,
+				allowClear: O,
+				hasValue: !!G,
+				onClear: ge,
+				intent: R,
+				rightIcons: [{
+					name: "ChevronDownIcon",
+					rotated: z
+				}],
+				width: j,
+				fullWidth: k,
+				styles: M?.inputBase,
+				children: /* @__PURE__ */ p("div", {
+					id: L,
+					className: f(c.trigger, z && c.open, C && c.disabled, M?.trigger),
+					onClick: he,
+					onKeyDown: X,
+					tabIndex: C ? -1 : 0,
+					role: "combobox",
+					"aria-expanded": z,
+					"aria-haspopup": "listbox",
+					"aria-controls": z ? I : void 0,
+					"aria-disabled": C,
+					"aria-labelledby": P || $,
+					"aria-label": v ? void 0 : typeof Q == "string" ? Q : typeof _ == "string" ? _ : void 0,
+					"aria-describedby": F || ye,
+					"aria-required": b ? "true" : void 0,
+					"aria-invalid": R === "danger" ? "true" : "false",
+					"aria-activedescendant": z ? Z : void 0,
+					ref: pe,
+					children: /* @__PURE__ */ p("div", {
+						className: f(c.value, !q && c.placeholder, M?.value),
+						children: q ? q.label : _
+					})
+				})
+			}), /* @__PURE__ */ m(r, {
+				show: z && !C,
+				preset: "fade",
+				className: f(c.dropdown, M?.dropdown),
+				children: [w && /* @__PURE__ */ p("div", {
+					className: f(c.search, M?.search),
+					children: /* @__PURE__ */ p("input", {
+						ref: me,
+						type: "text",
+						className: f(c.searchInput, M?.searchInput),
+						placeholder: T,
+						value: B,
+						onChange: (e) => {
+							V(e.target.value), U(-1);
+						},
+						onClick: (e) => e.stopPropagation(),
+						onKeyDown: X,
+						"aria-label": T,
+						"aria-controls": I,
+						"aria-activedescendant": Z
+					})
+				}), /* @__PURE__ */ p("ul", {
+					id: I,
+					className: f(c.list, M?.list),
+					role: "listbox",
+					"aria-labelledby": v ? P : $ || void 0,
+					children: K.length === 0 ? /* @__PURE__ */ p("li", {
+						className: f(c.empty, M?.empty),
+						role: "option",
+						"aria-selected": "false",
+						children: A ?? ce("select.no_options")
+					}) : ve()
+				})]
+			})] }), ae]
+		})
+	});
+});
+h.displayName = "Select";
+//#endregion
+export { h as Select, h as default };

package/dist/components/form/Select/select.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_k0ww0_2`,t=`_fullWidth_k0ww0_9`,n=`_trigger_k0ww0_13`,r=`_disabled_k0ww0_31`,i=`_open_k0ww0_40`,a=`_value_k0ww0_48`,o=`_placeholder_k0ww0_49`,s=`_icon_k0ww0_52`,c=`_icons_k0ww0_65`,l=`_clear_k0ww0_77`,u=`_dropdown_k0ww0_93`,d=`_search_k0ww0_104`,f=`_searchInput_k0ww0_108`,p=`_list_k0ww0_123`,m=`_groupLabel_k0ww0_130`,h=`_option_k0ww0_148`,g=`_selected_k0ww0_148`,_=`_empty_k0ww0_157`,v=`_separator_k0ww0_164`,y=`_native_k0ww0_172`,b=`_nativeWrapper_k0ww0_172`,x=`_select_k0ww0_148`,S={root:e,fullWidth:t,trigger:n,disabled:r,open:i,value:a,placeholder:o,icon:s,icons:c,clear:l,dropdown:u,search:d,searchInput:f,list:p,groupLabel:m,option:h,selected:g,empty:_,separator:v,native:y,nativeWrapper:b,select:x};exports.clear=l,exports.default=S,exports.disabled=r,exports.dropdown=u,exports.empty=_,exports.fullWidth=t,exports.groupLabel=m,exports.icon=s,exports.icons=c,exports.list=p,exports.native=y,exports.nativeWrapper=b,exports.open=i,exports.option=h,exports.placeholder=o,exports.root=e,exports.search=d,exports.searchInput=f,exports.select=x,exports.selected=g,exports.separator=v,exports.trigger=n,exports.value=a;

package/dist/components/form/Select/select.module.js

@@ -0,0 +1,28 @@
+"use client";
+//#region src/components/form/Select/select.module.scss
+var e = "_root_k0ww0_2", t = "_fullWidth_k0ww0_9", n = "_trigger_k0ww0_13", r = "_disabled_k0ww0_31", i = "_open_k0ww0_40", a = "_value_k0ww0_48", o = "_placeholder_k0ww0_49", s = "_icon_k0ww0_52", c = "_icons_k0ww0_65", l = "_clear_k0ww0_77", u = "_dropdown_k0ww0_93", d = "_search_k0ww0_104", f = "_searchInput_k0ww0_108", p = "_list_k0ww0_123", m = "_groupLabel_k0ww0_130", h = "_option_k0ww0_148", g = "_selected_k0ww0_148", _ = "_empty_k0ww0_157", v = "_separator_k0ww0_164", y = "_native_k0ww0_172", b = "_nativeWrapper_k0ww0_172", x = "_select_k0ww0_148", S = {
+	root: e,
+	fullWidth: t,
+	trigger: n,
+	disabled: r,
+	open: i,
+	value: a,
+	placeholder: o,
+	icon: s,
+	icons: c,
+	clear: l,
+	dropdown: u,
+	search: d,
+	searchInput: f,
+	list: p,
+	groupLabel: m,
+	option: h,
+	selected: g,
+	empty: _,
+	separator: v,
+	native: y,
+	nativeWrapper: b,
+	select: x
+};
+//#endregion
+export { l as clear, S as default, r as disabled, u as dropdown, _ as empty, t as fullWidth, m as groupLabel, s as icon, c as icons, p as list, y as native, b as nativeWrapper, i as open, h as option, o as placeholder, e as root, d as search, f as searchInput, x as select, g as selected, v as separator, n as trigger, a as value };

package/dist/components/form/Select/useSelect.cjs

@@ -0,0 +1,2 @@
+"use client";
+let e=require("react");function t({options:t,value:n,onChange:r,defaultValue:i,searchable:a,grouped:o,disabled:s,filterOption:c}){let[l,u]=(0,e.useState)(!1),[d,f]=(0,e.useState)(i||``),[p,m]=(0,e.useState)(``),[h,g]=(0,e.useState)(-1),[_,v]=(0,e.useState)(!1),y=(0,e.useRef)(null),b=(0,e.useRef)(null),x=(0,e.useRef)(null),S=(0,e.useRef)([]),C=n!==void 0,w=C?n:d,T=(0,e.useMemo)(()=>o&&t.length>0&&`options`in t[0]?t.flatMap(e=>e.options):t,[t,o]),E=(0,e.useMemo)(()=>{if(!p)return T;let e=c||((e,t)=>{if(e.type===`separator`)return!1;let n=typeof e.label==`string`?e.label:``,r=typeof e.value==`string`?e.value:``,i=t.toLowerCase();return n.toLowerCase().includes(i)||r.toLowerCase().includes(i)});return T.filter(t=>e(t,p))},[T,p,c]),D=T.find(e=>e.value===w);(0,e.useEffect)(()=>{let e=e=>{y.current&&!y.current.contains(e.target)&&(u(!1),m(``),g(-1))};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]),(0,e.useEffect)(()=>{l&&a&&x.current&&x.current.focus()},[l,a]),(0,e.useEffect)(()=>{h>=0&&S.current[h]&&S.current[h]?.scrollIntoView({block:`nearest`,behavior:`smooth`})},[h]);let O=()=>{s||(u(!l),l||(m(``),g(-1)))},k=e=>{e.type===`separator`||e.disabled||(!C&&e.value!==void 0&&f(e.value),r&&e.value!==void 0&&r(e.value),u(!1),m(``),g(-1),b.current?.focus())};return{isOpen:l,searchValue:p,setSearchValue:m,focusedIndex:h,setFocusedIndex:g,isKeyboardNavigating:_,setIsKeyboardNavigating:v,containerRef:y,triggerRef:b,searchInputRef:x,listItemsRef:S,currentValue:w,flatOptions:T,filteredOptions:E,selectedOption:D,focusedOption:h>=0?E[h]:null,handleToggle:O,handleSelect:k,handleClear:()=>{s||(C||f(``),r?.(``))},handleKeyDown:e=>{if(v(!0),!s)switch(e.key){case`Enter`:case` `:l?h>=0&&E[h]&&k(E[h]):u(!0),e.preventDefault();break;case`Escape`:u(!1),m(``),g(-1),b.current?.focus(),e.preventDefault();break;case`ArrowDown`:e.preventDefault(),l?g(e=>{let t=e+1;for(t>=E.length&&(t=0);t<E.length&&(E[t]?.disabled||E[t]?.type===`separator`);)t++;if(t>=E.length)for(t=0;t<e&&(E[t]?.disabled||E[t]?.type===`separator`);)t++;return t<E.length?t:e}):u(!0);break;case`ArrowUp`:e.preventDefault(),l&&g(e=>{let t=e-1;for(t<0&&(t=E.length-1);t>=0&&(E[t]?.disabled||E[t]?.type===`separator`);)t--;if(t<0)for(t=E.length-1;t>e&&(E[t]?.disabled||E[t]?.type===`separator`);)t--;return t>=0?t:e});break;case`Home`:l&&(e.preventDefault(),g(0));break;case`End`:l&&(e.preventDefault(),g(E.length-1));break}}}}exports.useSelect=t;

package/dist/components/form/Select/useSelect.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { SelectOption, SelectProps } from './Select';
+type UseSelectParams = Pick<SelectProps, "options" | "value" | "onChange" | "defaultValue" | "searchable" | "grouped" | "disabled" | "filterOption">;
+export declare function useSelect({ options, value, onChange, defaultValue, searchable, grouped, disabled, filterOption, }: UseSelectParams): {
+    isOpen: boolean;
+    searchValue: string;
+    setSearchValue: React.Dispatch<React.SetStateAction<string>>;
+    focusedIndex: number;
+    setFocusedIndex: React.Dispatch<React.SetStateAction<number>>;
+    isKeyboardNavigating: boolean;
+    setIsKeyboardNavigating: React.Dispatch<React.SetStateAction<boolean>>;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    triggerRef: React.RefObject<HTMLDivElement | null>;
+    searchInputRef: React.RefObject<HTMLInputElement | null>;
+    listItemsRef: React.RefObject<(HTMLElement | null)[]>;
+    currentValue: string;
+    flatOptions: SelectOption[];
+    filteredOptions: SelectOption[];
+    selectedOption: SelectOption | undefined;
+    focusedOption: SelectOption | null;
+    handleToggle: () => void;
+    handleSelect: (option: SelectOption) => void;
+    handleClear: () => void;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+};
+export {};

package/dist/components/form/Select/useSelect.js

@@ -0,0 +1,94 @@
+"use client";
+import { useEffect as e, useMemo as t, useRef as n, useState as r } from "react";
+//#region src/components/form/Select/useSelect.ts
+function i({ options: i, value: a, onChange: o, defaultValue: s, searchable: c, grouped: l, disabled: u, filterOption: d }) {
+	let [f, p] = r(!1), [m, h] = r(s || ""), [g, _] = r(""), [v, y] = r(-1), [b, x] = r(!1), S = n(null), C = n(null), w = n(null), T = n([]), E = a !== void 0, D = E ? a : m, O = t(() => l && i.length > 0 && "options" in i[0] ? i.flatMap((e) => e.options) : i, [i, l]), k = t(() => {
+		if (!g) return O;
+		let e = d || ((e, t) => {
+			if (e.type === "separator") return !1;
+			let n = typeof e.label == "string" ? e.label : "", r = typeof e.value == "string" ? e.value : "", i = t.toLowerCase();
+			return n.toLowerCase().includes(i) || r.toLowerCase().includes(i);
+		});
+		return O.filter((t) => e(t, g));
+	}, [
+		O,
+		g,
+		d
+	]), A = O.find((e) => e.value === D);
+	e(() => {
+		let e = (e) => {
+			S.current && !S.current.contains(e.target) && (p(!1), _(""), y(-1));
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []), e(() => {
+		f && c && w.current && w.current.focus();
+	}, [f, c]), e(() => {
+		v >= 0 && T.current[v] && T.current[v]?.scrollIntoView({
+			block: "nearest",
+			behavior: "smooth"
+		});
+	}, [v]);
+	let j = () => {
+		u || (p(!f), f || (_(""), y(-1)));
+	}, M = (e) => {
+		e.type === "separator" || e.disabled || (!E && e.value !== void 0 && h(e.value), o && e.value !== void 0 && o(e.value), p(!1), _(""), y(-1), C.current?.focus());
+	};
+	return {
+		isOpen: f,
+		searchValue: g,
+		setSearchValue: _,
+		focusedIndex: v,
+		setFocusedIndex: y,
+		isKeyboardNavigating: b,
+		setIsKeyboardNavigating: x,
+		containerRef: S,
+		triggerRef: C,
+		searchInputRef: w,
+		listItemsRef: T,
+		currentValue: D,
+		flatOptions: O,
+		filteredOptions: k,
+		selectedOption: A,
+		focusedOption: v >= 0 ? k[v] : null,
+		handleToggle: j,
+		handleSelect: M,
+		handleClear: () => {
+			u || (E || h(""), o?.(""));
+		},
+		handleKeyDown: (e) => {
+			if (x(!0), !u) switch (e.key) {
+				case "Enter":
+				case " ":
+					f ? v >= 0 && k[v] && M(k[v]) : p(!0), e.preventDefault();
+					break;
+				case "Escape":
+					p(!1), _(""), y(-1), C.current?.focus(), e.preventDefault();
+					break;
+				case "ArrowDown":
+					e.preventDefault(), f ? y((e) => {
+						let t = e + 1;
+						for (t >= k.length && (t = 0); t < k.length && (k[t]?.disabled || k[t]?.type === "separator");) t++;
+						if (t >= k.length) for (t = 0; t < e && (k[t]?.disabled || k[t]?.type === "separator");) t++;
+						return t < k.length ? t : e;
+					}) : p(!0);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), f && y((e) => {
+						let t = e - 1;
+						for (t < 0 && (t = k.length - 1); t >= 0 && (k[t]?.disabled || k[t]?.type === "separator");) t--;
+						if (t < 0) for (t = k.length - 1; t > e && (k[t]?.disabled || k[t]?.type === "separator");) t--;
+						return t >= 0 ? t : e;
+					});
+					break;
+				case "Home":
+					f && (e.preventDefault(), y(0));
+					break;
+				case "End":
+					f && (e.preventDefault(), y(k.length - 1));
+					break;
+			}
+		}
+	};
+}
+//#endregion
+export { i as useSelect };

package/dist/components/form/SignaturePad/SignaturePad.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("./signature-pad.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=({width:e=400,height:c=200,penColor:l=`var(--wim-color-text-primary)`,penWidth:u=2,onChange:d,clearLabel:f,disabled:p=!1,className:m,style:h,label:g,error:_,required:v,layout:y=`vertical`,canvasAriaLabel:b})=>{let{t:x}=t.useWimTranslation([`common`,`components`]),S=f??x(`signature.clear`,{ns:`components`,defaultValue:x(`button.clear`)}),C=b??x(`a11y.signature_canvas`),w=(0,a.useRef)(null),T=(0,a.useRef)(!1),[E,D]=(0,a.useState)(!0),O=`wim-signature-pad-${(0,a.useId)()}`,k=g?`${O}-label`:void 0,A=_?`${O}-error`:void 0,j=(0,a.useCallback)(e=>{if(e.startsWith(`var(`)&&w.current){let t=e.match(/var\((--[^)]+)\)/)?.[1];if(t)return getComputedStyle(w.current).getPropertyValue(t).trim()||`#000`}return e},[]);(0,a.useLayoutEffect)(()=>{if(!w.current)return;let t=w.current,n=t.getContext(`2d`);if(!n)return;let r=window.devicePixelRatio||1;t.width=e*r,t.height=c*r,n.scale(r,r),n.lineCap=`round`,n.lineJoin=`round`},[e,c]);let M=(0,a.useCallback)(t=>{if(!w.current)return null;let n=w.current.getBoundingClientRect(),r,i;if(`touches`in t){if(t.touches.length===0)return null;r=t.touches[0].clientX,i=t.touches[0].clientY}else r=t.clientX,i=t.clientY;let a=r-n.left,o=i-n.top,s=e/n.width,l=c/n.height;return{x:a*s,y:o*l}},[e,c]),N=e=>{if(p)return;let t=M(e);if(!t||!w.current)return;let n=w.current.getContext(`2d`);n&&(T.current=!0,n.beginPath(),n.moveTo(t.x,t.y),n.strokeStyle=j(l),n.lineWidth=u)},P=e=>{if(!T.current||p||!w.current)return;let t=M(e);if(!t)return;let n=w.current.getContext(`2d`);n&&(n.lineTo(t.x,t.y),n.stroke(),D(!1))},F=()=>{if(T.current&&(T.current=!1,d&&w.current)){let e=w.current,t=e.getContext(`2d`);d(!t||t.getImageData(0,0,e.width,e.height).data.every((e,t)=>t%4!=3||e===0)?null:e.toDataURL())}},I=(0,a.useRef)(F);(0,a.useLayoutEffect)(()=>{I.current=F}),(0,a.useEffect)(()=>{let e=()=>I.current();return window.addEventListener(`mouseup`,e),()=>window.removeEventListener(`mouseup`,e)},[]);let L=(0,a.useRef)(!1);return(0,s.jsx)(r.FieldTemplate,{label:g,error:_,required:v,layout:y,labelId:k,errorId:A,className:m,children:(0,s.jsxs)(`div`,{className:(0,o.default)(`wim-signature-pad`,i.default.root,p&&i.default.disabled,_&&i.default.danger),style:h,children:[(0,s.jsx)(`div`,{className:i.default.canvasContainer,style:{width:e,maxWidth:`100%`,aspectRatio:`${e} / ${c}`,height:`auto`},children:(0,s.jsx)(`canvas`,{ref:w,"data-testid":`signature-canvas`,className:i.default.canvas,style:{width:`100%`,height:`100%`,display:`block`},onMouseDown:N,onMouseMove:P,onMouseUp:F,onTouchStart:N,onTouchMove:P,onTouchEnd:F,"aria-labelledby":g?k:void 0,"aria-describedby":A,role:`img`,"aria-label":g?void 0:C})}),(0,s.jsx)(`div`,{className:i.default.footer,children:(0,s.jsx)(n.Button,{variant:`outline`,size:`sm`,"data-testid":`signature-clear`,onMouseDown:()=>{L.current=!0},onClick:()=>{if(!L.current||(L.current=!1,p||!w.current))return;let e=w.current,t=e.getContext(`2d`);t&&(t.clearRect(0,0,e.width,e.height),D(!0),d&&d(null))},disabled:p||E,children:S})})]})})};exports.SignaturePad=c;

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

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+export type SignaturePadProps = {
+    /** Width of the canvas */
+    width?: number;
+    /** Height of the canvas */
+    height?: number;
+    /** Color of the pen */
+    penColor?: string;
+    /** Width of the pen stroke */
+    penWidth?: number;
+    /** Callback when signature changes or is cleared */
+    onChange?: (dataUrl: string | null) => void;
+    /** Custom label for the clear button */
+    clearLabel?: React.ReactNode;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** 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";
+    /** Aria label for the canvas */
+    canvasAriaLabel?: string;
+};
+/**
+ * Component for entering a handwritten signature with mouse or touch.
+ */
+export declare const SignaturePad: ({ width, height, penColor, penWidth, onChange, clearLabel, disabled, className, style, label, error, required, layout, canvasAriaLabel, }: SignaturePadProps) => React.JSX.Element;

package/dist/components/form/SignaturePad/SignaturePad.js

@@ -0,0 +1,126 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import { Button as t } from "../Button/Button.js";
+import { FieldTemplate as n } from "../FieldTemplate/FieldTemplate.js";
+import r from "./signature-pad.module.js";
+import { useCallback as i, useEffect as a, useId as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
+import u from "classnames";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/form/SignaturePad/SignaturePad.tsx
+var p = ({ width: p = 400, height: m = 200, penColor: h = "var(--wim-color-text-primary)", penWidth: g = 2, onChange: _, clearLabel: v, disabled: y = !1, className: b, style: x, label: S, error: C, required: w, layout: T = "vertical", canvasAriaLabel: E }) => {
+	let { t: D } = e(["common", "components"]), O = v ?? D("signature.clear", {
+		ns: "components",
+		defaultValue: D("button.clear")
+	}), k = E ?? D("a11y.signature_canvas"), A = c(null), j = c(!1), [M, N] = l(!0), P = `wim-signature-pad-${o()}`, F = S ? `${P}-label` : void 0, I = C ? `${P}-error` : void 0, L = i((e) => {
+		if (e.startsWith("var(") && A.current) {
+			let t = e.match(/var\((--[^)]+)\)/)?.[1];
+			if (t) return getComputedStyle(A.current).getPropertyValue(t).trim() || "#000";
+		}
+		return e;
+	}, []);
+	s(() => {
+		if (!A.current) return;
+		let e = A.current, t = e.getContext("2d");
+		if (!t) return;
+		let n = window.devicePixelRatio || 1;
+		e.width = p * n, e.height = m * n, t.scale(n, n), t.lineCap = "round", t.lineJoin = "round";
+	}, [p, m]);
+	let R = i((e) => {
+		if (!A.current) return null;
+		let t = A.current.getBoundingClientRect(), n, r;
+		if ("touches" in e) {
+			if (e.touches.length === 0) return null;
+			n = e.touches[0].clientX, r = e.touches[0].clientY;
+		} else n = e.clientX, r = e.clientY;
+		let i = n - t.left, a = r - t.top, o = p / t.width, s = m / t.height;
+		return {
+			x: i * o,
+			y: a * s
+		};
+	}, [p, m]), z = (e) => {
+		if (y) return;
+		let t = R(e);
+		if (!t || !A.current) return;
+		let n = A.current.getContext("2d");
+		n && (j.current = !0, n.beginPath(), n.moveTo(t.x, t.y), n.strokeStyle = L(h), n.lineWidth = g);
+	}, B = (e) => {
+		if (!j.current || y || !A.current) return;
+		let t = R(e);
+		if (!t) return;
+		let n = A.current.getContext("2d");
+		n && (n.lineTo(t.x, t.y), n.stroke(), N(!1));
+	}, V = () => {
+		if (j.current && (j.current = !1, _ && A.current)) {
+			let e = A.current, t = e.getContext("2d");
+			_(!t || t.getImageData(0, 0, e.width, e.height).data.every((e, t) => t % 4 != 3 || e === 0) ? null : e.toDataURL());
+		}
+	}, H = c(V);
+	s(() => {
+		H.current = V;
+	}), a(() => {
+		let e = () => H.current();
+		return window.addEventListener("mouseup", e), () => window.removeEventListener("mouseup", e);
+	}, []);
+	let U = c(!1);
+	return /* @__PURE__ */ d(n, {
+		label: S,
+		error: C,
+		required: w,
+		layout: T,
+		labelId: F,
+		errorId: I,
+		className: b,
+		children: /* @__PURE__ */ f("div", {
+			className: u("wim-signature-pad", r.root, y && r.disabled, C && r.danger),
+			style: x,
+			children: [/* @__PURE__ */ d("div", {
+				className: r.canvasContainer,
+				style: {
+					width: p,
+					maxWidth: "100%",
+					aspectRatio: `${p} / ${m}`,
+					height: "auto"
+				},
+				children: /* @__PURE__ */ d("canvas", {
+					ref: A,
+					"data-testid": "signature-canvas",
+					className: r.canvas,
+					style: {
+						width: "100%",
+						height: "100%",
+						display: "block"
+					},
+					onMouseDown: z,
+					onMouseMove: B,
+					onMouseUp: V,
+					onTouchStart: z,
+					onTouchMove: B,
+					onTouchEnd: V,
+					"aria-labelledby": S ? F : void 0,
+					"aria-describedby": I,
+					role: "img",
+					"aria-label": S ? void 0 : k
+				})
+			}), /* @__PURE__ */ d("div", {
+				className: r.footer,
+				children: /* @__PURE__ */ d(t, {
+					variant: "outline",
+					size: "sm",
+					"data-testid": "signature-clear",
+					onMouseDown: () => {
+						U.current = !0;
+					},
+					onClick: () => {
+						if (!U.current || (U.current = !1, y || !A.current)) return;
+						let e = A.current, t = e.getContext("2d");
+						t && (t.clearRect(0, 0, e.width, e.height), N(!0), _ && _(null));
+					},
+					disabled: y || M,
+					children: O
+				})
+			})]
+		})
+	});
+};
+//#endregion
+export { p as SignaturePad };

package/dist/components/form/SignaturePad/signature-pad.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_bos4e_224`,t=`_disabled_bos4e_232`,n=`_canvasContainer_bos4e_236`,r=`_danger_bos4e_215`,i=`_canvas_bos4e_236`,a=`_footer_bos4e_260`,o={"wim-docs-container":`_wim-docs-container_bos4e_103`,"wim-t":`_wim-t_bos4e_184`,"react-flow":`_react-flow_bos4e_202`,"react-flow__edges":`_react-flow__edges_bos4e_203`,"react-flow__connectionline":`_react-flow__connectionline_bos4e_204`,root:e,disabled:t,canvasContainer:n,danger:r,canvas:i,footer:a};exports.canvas=i,exports.canvasContainer=n,exports.danger=r,exports.default=o,exports.disabled=t,exports.footer=a,exports.root=e;

package/dist/components/form/SignaturePad/signature-pad.module.js

@@ -0,0 +1,17 @@
+"use client";
+//#region src/components/form/SignaturePad/signature-pad.module.scss
+var e = "_root_bos4e_224", t = "_disabled_bos4e_232", n = "_canvasContainer_bos4e_236", r = "_danger_bos4e_215", i = "_canvas_bos4e_236", a = "_footer_bos4e_260", o = {
+	"wim-docs-container": "_wim-docs-container_bos4e_103",
+	"wim-t": "_wim-t_bos4e_184",
+	"react-flow": "_react-flow_bos4e_202",
+	"react-flow__edges": "_react-flow__edges_bos4e_203",
+	"react-flow__connectionline": "_react-flow__connectionline_bos4e_204",
+	root: e,
+	disabled: t,
+	canvasContainer: n,
+	danger: r,
+	canvas: i,
+	footer: a
+};
+//#endregion
+export { i as canvas, n as canvasContainer, r as danger, o as default, t as disabled, a as footer, e as root };

package/dist/components/form/Slider/Slider.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("../FieldTemplate/FieldTemplate.cjs"),r=require("../../../utilities/slider-utils.cjs"),i=require("./slider.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=(0,a.forwardRef)(({value:e,defaultValue:c=0,min:l=0,max:u=100,step:d=1,disabled:f=!1,onChange:p,onAfterChange:m,className:h,name:g,label:_,error:v,required:y,layout:b=`vertical`,id:x,"aria-label":S,"aria-labelledby":C,asChild:w=!1,styles:T,children:E,...D},O)=>{let k=e!==void 0,[A,j]=(0,a.useState)(c),M=k?e:A,N=(0,a.useRef)(null),P=(0,a.useRef)(null),F=(0,a.useRef)(null),I=(0,a.useRef)(null),L=(0,a.useRef)(!1),R=(0,a.useRef)(M),z=(0,a.useId)(),B=x||z,V=`wim-slider-label-${B}`,H=`wim-slider-error-${B}`,{calculateValue:U}=r.useSliderCommon(l,u,d),W=(0,a.useCallback)(e=>(e-l)/(u-l)*100,[l,u]),G=(0,a.useCallback)(e=>{let t=W(e);F.current&&(F.current.style.width=`${t}%`),P.current&&(P.current.style.left=`${t}%`,P.current.setAttribute(`aria-valuenow`,String(e))),I.current&&(I.current.value=String(e))},[W]);(0,a.useEffect)(()=>{L.current||G(M)},[M,G]);let K=e=>{if(f)return;L.current=!0;let t=`touches`in e?e.touches[0].clientX:e.clientX,n=U(t,N.current);R.current=n,G(n),p?.(n),e.preventDefault()},q=(0,a.useCallback)(e=>{if(!L.current||f)return;let t=`touches`in e?e.touches[0].clientX:e.clientX,n=U(t,N.current);R.current=n,G(n),p?.(n)},[f,U,p,G]),J=(0,a.useCallback)(()=>{if(L.current){L.current=!1;let e=R.current;k||j(e),m?.(e)}},[k,m]);(0,a.useEffect)(()=>(document.addEventListener(`mousemove`,q),document.addEventListener(`mouseup`,J),document.addEventListener(`touchmove`,q,{passive:!1}),document.addEventListener(`touchend`,J),()=>{document.removeEventListener(`mousemove`,q),document.removeEventListener(`mouseup`,J),document.removeEventListener(`touchmove`,q),document.removeEventListener(`touchend`,J)}),[q,J]);let Y=e=>{if(f)return;let t;if(e.key===`ArrowLeft`||e.key===`ArrowDown`)t=Math.max(l,M-d);else if(e.key===`ArrowRight`||e.key===`ArrowUp`)t=Math.min(u,M+d);else if(e.key===`Home`)t=l;else if(e.key===`End`)t=u;else return;k||j(t),p?.(t),e.preventDefault()},X=W(M);return(0,s.jsx)(n.FieldTemplate,{label:_,error:v,required:y,layout:b,labelId:V,errorId:H,className:h,styles:T,children:(0,s.jsxs)(w?t.Root:`div`,{role:`presentation`,className:(0,o.default)(`wim-slider`,i.default.root,f&&i.default.disabled,v&&i.default.danger),onMouseDown:K,onTouchStart:K,ref:O,...D,children:[(0,s.jsxs)(t.Slottable,{children:[(0,s.jsxs)(`div`,{className:i.default.trackContainer,ref:N,children:[(0,s.jsx)(`div`,{ref:F,className:i.default.track,style:{width:`${X}%`}}),(0,s.jsx)(`div`,{ref:P,className:i.default.thumb,style:{left:`${X}%`},role:`slider`,"aria-valuemin":l,"aria-valuemax":u,"aria-valuenow":M,"aria-disabled":f,"aria-labelledby":_?V:C,"aria-label":_?void 0:S,"aria-describedby":v?H:void 0,"aria-invalid":v?!0:void 0,tabIndex:f?-1:0,onKeyDown:Y})]}),(0,s.jsx)(`input`,{ref:I,type:`hidden`,name:g,value:M})]}),w?E:null]})})});c.displayName=`Slider`,exports.Slider=c,exports.default=c;

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

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+import { FieldTemplate } from '../FieldTemplate';
+export interface SliderProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> {
+    /** Current value (controlled) */
+    value?: number;
+    /** Default value (uncontrolled) */
+    defaultValue?: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step value */
+    step?: number;
+    /** Whether the slider is disabled */
+    disabled?: boolean;
+    /** Callback when the value changes */
+    onChange?: (value: number) => void;
+    /** Callback when dragging ends */
+    onAfterChange?: (value: number) => void;
+    /** Name attribute */
+    name?: 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";
+    /** Custom ID */
+    id?: string;
+    /** Whether to render as a child element. */
+    asChild?: boolean;
+    /** Custom styles for internal parts */
+    styles?: React.ComponentPropsWithoutRef<typeof FieldTemplate>["styles"];
+}
+/**
+ * Slider component for selecting a single value from a range.
+ */
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
+export default Slider;