wimui 0.58.1 → 0.60.0

package/dist/components/form/QueryBuilder/QueryBuilder.js

@@ -4,18 +4,18 @@ import { componentsNs as t } from "../../../i18n/generated/components.js";
 import { Button as n } from "../Button/Button.js";
 import { Input as r } from "../Input/Input.js";
 import { DatePicker as i } from "../DatePicker/DatePicker.js";
-import { NumberInput as a } from "../NumberInput/NumberInput.js";
-import { SegmentedControl as o } from "../SegmentedControl/SegmentedControl.js";
-import { Select as s } from "../Select/Select.js";
-import { Switch as c } from "../Switch/Switch.js";
-import { IconButton as l } from "../IconButton/IconButton.js";
-import u from "./querybuilder.module.js";
-import { warnUnknownOperator as d } from "./warn-unknown-operator.js";
-import { useCallback as f, useId as p, useRef as m, useState as h } from "react";
-import g from "classnames";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { NumberInput as ee } from "../NumberInput/NumberInput.js";
+import { SegmentedControl as a } from "../SegmentedControl/SegmentedControl.js";
+import { Select as o } from "../Select/Select.js";
+import { Switch as s } from "../Switch/Switch.js";
+import { IconButton as c } from "../IconButton/IconButton.js";
+import l from "./querybuilder.module.js";
+import { warnUnknownOperator as u } from "./warn-unknown-operator.js";
+import { useCallback as d, useId as f, useRef as p, useState as m } from "react";
+import h from "classnames";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/form/QueryBuilder/QueryBuilder.tsx
-var y = 0, b = () => typeof window < "u" && window.__VRT__ ? (y += 1, `vrt-id-${y}`) : Math.random().toString(36).substring(2, 11), x = {
+var v = 0, y = () => typeof window < "u" && window.__VRT__ ? (v += 1, `vrt-id-${v}`) : Math.random().toString(36).substring(2, 11), b = {
 	string: [
 		{
 			value: "=",
@@ -132,19 +132,19 @@ var y = 0, b = () => typeof window < "u" && window.__VRT__ ? (y += 1, `vrt-id-${
 			key: "is_not_null"
 		}
 	]
-}, S = ({ fields: y, query: S, defaultQuery: C, onChange: w, maxDepth: ee = 3, className: te, id: ne, labels: T = {} }) => {
-	let { t: E } = e(t), { ruleAdded: D = E("query.builder.rule_added"), groupAdded: O = E("query.builder.group_added"), removed: k = E("query.builder.removed"), ruleAriaLabel: A = E("query.builder.rule"), fieldAriaLabel: j = E("query.builder.field"), operatorAriaLabel: M = E("query.builder.operator"), valueAriaLabel: N = E("query.builder.value"), trueLabel: P = E("query.builder.true"), falseLabel: F = E("query.builder.false"), removeRuleAriaLabel: I = E("query.builder.remove_rule"), removeGroupAriaLabel: L = E("query.builder.remove_group"), addRuleLabel: R = E("query.builder.add_rule"), addGroupLabel: z = E("query.builder.add_group"), regionAriaLabel: B = E("query.builder.region_label"), combinatorAriaLabel: V = E("query.builder.combinator"), operators: H = {} } = T, U = p(), W = ne || `wim-qb-${U}`, G = m(null), [K, q] = h(C || {
-		id: b(),
+}, x = ({ fields: v, query: x, defaultQuery: S, onChange: C, maxDepth: te = 3, className: ne, id: re, labels: ie = {}, "aria-label": w, "aria-labelledby": T, "aria-describedby": E }) => {
+	let { t: D } = e(t), { ruleAdded: O = D("query.builder.rule_added"), groupAdded: k = D("query.builder.group_added"), removed: A = D("query.builder.removed"), ruleAriaLabel: j = D("query.builder.rule"), fieldAriaLabel: M = D("query.builder.field"), operatorAriaLabel: N = D("query.builder.operator"), valueAriaLabel: P = D("query.builder.value"), trueLabel: F = D("query.builder.true"), falseLabel: I = D("query.builder.false"), removeRuleAriaLabel: L = D("query.builder.remove_rule"), removeGroupAriaLabel: R = D("query.builder.remove_group"), addRuleLabel: z = D("query.builder.add_rule"), addGroupLabel: ae = D("query.builder.add_group"), regionAriaLabel: B = D("query.builder.region_label"), combinatorAriaLabel: V = D("query.builder.combinator"), operators: H = {} } = ie, U = f(), W = re || `wim-qb-${U}`, G = p(null), [K, q] = m(S || {
+		id: y(),
 		combinator: "and",
 		not: !1,
 		rules: []
-	}), J = S === void 0 ? K : S, Y = f((e) => {
+	}), J = x === void 0 ? K : x, Y = d((e) => {
 		G.current && (G.current.textContent = "", setTimeout(() => {
 			G.current && (G.current.textContent = e);
 		}, 50));
-	}, []), X = f((e) => {
-		S === void 0 && q(e), w?.(e);
-	}, [S, w]), Z = (e, t) => {
+	}, []), X = d((e) => {
+		x === void 0 && q(e), C?.(e);
+	}, [x, C]), Z = (e, t) => {
 		let n = (r) => r.id === e ? {
 			...r,
 			...t
@@ -156,9 +156,9 @@ var y = 0, b = () => typeof window < "u" && window.__VRT__ ? (y += 1, `vrt-id-${
 			} : "rules" in r ? n(r) : r)
 		};
 		X(n(J));
-	}, re = (e) => {
-		let t = y[0], n = {
-			id: b(),
+	}, oe = (e) => {
+		let t = v[0], n = {
+			id: y(),
 			field: t?.name || "",
 			operator: "=",
 			value: t?.type !== "boolean" && ""
@@ -169,10 +169,10 @@ var y = 0, b = () => typeof window < "u" && window.__VRT__ ? (y += 1, `vrt-id-${
 			...t,
 			rules: t.rules.map((e) => "rules" in e ? r(e) : e)
 		};
-		X(r(J)), Y(D);
-	}, ie = (e) => {
+		X(r(J)), Y(O);
+	}, se = (e) => {
 		let t = {
-			id: b(),
+			id: y(),
 			combinator: "and",
 			not: !1,
 			rules: []
@@ -183,25 +183,25 @@ var y = 0, b = () => typeof window < "u" && window.__VRT__ ? (y += 1, `vrt-id-${
 			...r,
 			rules: r.rules.map((e) => "rules" in e ? n(e) : e)
 		};
-		X(n(J)), Y(O);
+		X(n(J)), Y(k);
 	}, Q = (e) => {
 		let t = (n) => ({
 			...n,
 			rules: n.rules.filter((t) => t.id !== e).map((e) => "rules" in e ? t(e) : e)
 		});
-		X(t(J)), Y(k);
+		X(t(J)), Y(A);
 	}, $ = (e, t, r) => {
 		let i = `${e.combinator.toUpperCase()} group`;
-		return /* @__PURE__ */ v("div", {
+		return /* @__PURE__ */ _("div", {
 			role: "group",
 			"aria-label": i,
-			className: g(u.group, t > 0 && u.nested, r && u.excluded),
+			className: h(l.group, t > 0 && l.nested, r && l.excluded),
 			children: [
-				/* @__PURE__ */ v("div", {
-					className: u.groupHeader,
-					children: [/* @__PURE__ */ v("div", {
-						className: u.groupHeaderLeft,
-						children: [/* @__PURE__ */ _(o, {
+				/* @__PURE__ */ _("div", {
+					className: l.groupHeader,
+					children: [/* @__PURE__ */ _("div", {
+						className: l.groupHeaderLeft,
+						children: [/* @__PURE__ */ g(a, {
 							size: "md",
 							options: [{
 								label: "AND",
@@ -214,160 +214,162 @@ var y = 0, b = () => typeof window < "u" && window.__VRT__ ? (y += 1, `vrt-id-${
 							onChange: (t) => Z(e.id, { combinator: t }),
 							"aria-label": V,
 							styles: {
-								root: u.segmentedControl,
-								item: u.segmentedControlItem,
-								slider: u.segmentedControlSlider
+								root: l.segmentedControl,
+								item: l.segmentedControlItem,
+								slider: l.segmentedControlSlider
 							}
-						}), /* @__PURE__ */ _(c, {
+						}), /* @__PURE__ */ g(s, {
 							size: "md",
 							checked: e.not,
 							onChange: (t) => Z(e.id, { not: t.target.checked }),
 							children: "NOT"
 						})]
-					}), t > 0 && /* @__PURE__ */ _(l, {
+					}), t > 0 && /* @__PURE__ */ g(c, {
 						iconName: "TrashIcon",
-						"aria-label": L,
+						"aria-label": R,
 						variant: "ghost",
 						size: "md",
 						intent: "danger",
 						onClick: () => Q(e.id),
-						className: u.removeGroup
+						className: l.removeGroup
 					})]
 				}),
-				/* @__PURE__ */ _("div", {
-					className: u.ruleList,
-					children: e.rules.map((e) => "rules" in e ? $(e, t + 1, r) : ae(e))
+				/* @__PURE__ */ g("div", {
+					className: l.ruleList,
+					children: e.rules.map((e) => "rules" in e ? $(e, t + 1, r) : ce(e))
 				}),
-				/* @__PURE__ */ v("div", {
-					className: u.groupActions,
-					children: [/* @__PURE__ */ _(n, {
+				/* @__PURE__ */ _("div", {
+					className: l.groupActions,
+					children: [/* @__PURE__ */ g(n, {
 						size: "md",
 						variant: "ghost",
 						icon: "PlusIcon",
-						onClick: () => re(e.id),
-						children: R
-					}), t < ee && /* @__PURE__ */ _(n, {
+						onClick: () => oe(e.id),
+						children: z
+					}), t < te && /* @__PURE__ */ g(n, {
 						size: "md",
 						variant: "ghost",
 						icon: "PlusIcon",
-						onClick: () => ie(e.id),
-						children: z
+						onClick: () => se(e.id),
+						children: ae
 					})]
 				})
 			]
 		}, e.id);
-	}, ae = (e) => {
-		let t = y.find((t) => t.name === e.field)?.type || "string", n = x[t].map((e) => ({
+	}, ce = (e) => {
+		let t = v.find((t) => t.name === e.field)?.type || "string", n = b[t].map((e) => ({
 			...e,
-			label: H[e.key] || E(`query.builder.operators.${e.key}`)
-		})), o = (t) => {
-			let n = y.find((e) => e.name === t);
+			label: H[e.key] || D(`query.builder.operators.${e.key}`)
+		})), a = (t) => {
+			let n = v.find((e) => e.name === t);
 			Z(e.id, {
 				field: t,
 				operator: "=",
 				value: n?.type !== "boolean" && ""
 			});
 		};
-		n.some((t) => t.value === e.operator) || d(e.operator, t, n.map((e) => e.value));
-		let c = e.operator === "is_null" || e.operator === "is_not_null";
-		return /* @__PURE__ */ _("div", {
-			className: u.rule,
+		n.some((t) => t.value === e.operator) || u(e.operator, t, n.map((e) => e.value));
+		let s = e.operator === "is_null" || e.operator === "is_not_null";
+		return /* @__PURE__ */ g("div", {
+			className: l.rule,
 			role: "group",
-			"aria-label": A,
-			children: /* @__PURE__ */ v("div", {
-				className: u.ruleFields,
+			"aria-label": j,
+			children: /* @__PURE__ */ _("div", {
+				className: l.ruleFields,
 				children: [
-					/* @__PURE__ */ _(s, {
-						className: u.field,
-						options: y.map((e) => ({
+					/* @__PURE__ */ g(o, {
+						className: l.field,
+						options: v.map((e) => ({
 							label: e.label,
 							value: e.name
 						})),
 						value: e.field,
-						onChange: o,
-						"aria-label": j,
+						onChange: a,
+						"aria-label": M,
 						fullWidth: !0,
 						styles: {
-							root: u.select,
-							trigger: u.selectTrigger,
-							inputBase: { root: u.inputBase }
+							root: l.select,
+							trigger: l.selectTrigger,
+							inputBase: { root: l.inputBase }
 						}
 					}),
-					/* @__PURE__ */ _(s, {
-						className: u.operator,
+					/* @__PURE__ */ g(o, {
+						className: l.operator,
 						options: n.map((e) => ({
 							label: e.label,
 							value: e.value
 						})),
 						value: e.operator,
 						onChange: (t) => Z(e.id, { operator: t }),
-						"aria-label": M,
+						"aria-label": N,
 						fullWidth: !0,
 						styles: {
-							root: u.select,
-							trigger: u.selectTrigger,
-							inputBase: { root: u.inputBase }
+							root: l.select,
+							trigger: l.selectTrigger,
+							inputBase: { root: l.inputBase }
 						}
 					}),
-					!c && /* @__PURE__ */ _("div", {
-						className: u.value,
-						children: t === "number" ? /* @__PURE__ */ _(a, {
+					!s && /* @__PURE__ */ g("div", {
+						className: l.value,
+						children: t === "number" ? /* @__PURE__ */ g(ee, {
 							value: typeof e.value == "boolean" ? void 0 : e.value ?? void 0,
 							onChange: (t) => Z(e.id, { value: t.target.value }),
-							"aria-label": N
-						}) : t === "date" ? /* @__PURE__ */ _(i, {
+							"aria-label": P
+						}) : t === "date" ? /* @__PURE__ */ g(i, {
 							value: typeof e.value == "string" || typeof e.value == "number" ? new Date(e.value) : void 0,
 							onChange: (t) => Z(e.id, { value: t ? t.toISOString() : "" }),
-							"aria-label": N
-						}) : t === "boolean" ? /* @__PURE__ */ _(s, {
+							"aria-label": P
+						}) : t === "boolean" ? /* @__PURE__ */ g(o, {
 							options: [{
-								label: P,
+								label: F,
 								value: "true"
 							}, {
-								label: F,
+								label: I,
 								value: "false"
 							}],
 							value: String(e.value),
 							onChange: (t) => Z(e.id, { value: t === "true" }),
-							"aria-label": N,
+							"aria-label": P,
 							fullWidth: !0,
 							styles: {
-								root: u.select,
-								trigger: u.selectTrigger,
-								inputBase: { root: u.inputBase }
+								root: l.select,
+								trigger: l.selectTrigger,
+								inputBase: { root: l.inputBase }
 							}
-						}) : /* @__PURE__ */ _(r, {
+						}) : /* @__PURE__ */ g(r, {
 							value: typeof e.value == "boolean" ? void 0 : e.value ?? void 0,
 							onChange: (t) => Z(e.id, { value: t.target.value }),
-							"aria-label": N,
-							styles: { root: u.inputBase }
+							"aria-label": P,
+							styles: { root: l.inputBase }
 						})
 					}),
-					/* @__PURE__ */ _(l, {
+					/* @__PURE__ */ g(c, {
 						iconName: "TrashIcon",
-						"aria-label": I,
+						"aria-label": L,
 						variant: "ghost",
 						size: "md",
 						intent: "danger",
 						onClick: () => Q(e.id),
-						className: u.removeRule
+						className: l.removeRule
 					})
 				]
 			})
 		}, e.id);
 	};
-	return /* @__PURE__ */ v("div", {
+	return /* @__PURE__ */ _("div", {
 		id: W,
 		role: "region",
-		"aria-label": B,
-		className: g("wim-query-builder", u.root, te),
-		children: [/* @__PURE__ */ _("div", {
+		"aria-label": T ? void 0 : w ?? B,
+		"aria-labelledby": T,
+		"aria-describedby": E,
+		className: h("wim-query-builder", l.root, ne),
+		children: [/* @__PURE__ */ g("div", {
 			ref: G,
 			"aria-live": "polite",
 			"aria-atomic": "true",
-			className: u.srOnly
+			className: l.srOnly
 		}), $(J, 0, !1)]
 	});
 };
 //#endregion
-export { S as QueryBuilder };
+export { x as QueryBuilder };

package/dist/components/form/SignaturePad/SignaturePad.cjs

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

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

@@ -28,8 +28,12 @@ export type SignaturePadProps = {
     layout?: "vertical" | "horizontal";
     /** Aria label for the canvas */
     canvasAriaLabel?: string;
+    /** Accessible name for the canvas when no visible `label` is provided. Takes precedence over `canvasAriaLabel`. */
+    "aria-label"?: string;
+    /** ID of the element that labels the canvas when no visible `label` is provided. */
+    "aria-labelledby"?: 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;
+export declare const SignaturePad: ({ width, height, penColor, penWidth, onChange, clearLabel, disabled, className, style, label, error, required, layout, canvasAriaLabel, "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledBy, }: SignaturePadProps) => React.JSX.Element;

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

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

package/dist/components/form/ThemeToggle/ThemeToggle.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../../i18n/generated/common.cjs"),i=require("../../../icon/monitor.cjs"),a=require("../../../icon/moon.cjs"),o=require("../../../icon/sun.cjs"),s=require("../../media/Icon/Icon.cjs"),c=require("../../../theme.cjs"),l=require("./theme-toggle.module.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p={light:o.default,dark:a.default,system:i.default},m=`wim-theme`,h=e=>e===`light`||e===`dark`||e===`system`,g=u.default.forwardRef(({value:e,defaultValue:i=`system`,onChange:a,modes:o=[`light`,`dark`],variant:g=`icon`,size:_=`md`,storageKey:v=m,applyToDocument:y=!0,labels:b,className:x,asChild:S=!1,children:C,...w},T)=>{let{t:E}=n.useWimTranslation(r.commonNs),{light:D=E(`common.light`),dark:O=E(`common.dark`),system:k=E(`theme.system`),toggle:A=E(`theme.toggle`)}=b??{},j={light:D,dark:O,system:k},M=e!==void 0,[N,P]=(0,u.useState)(()=>{if(typeof window<`u`&&v){let e=window.localStorage.getItem(v);if(h(e)&&o.includes(e))return e}return o.includes(i)?i:o[0]}),F=M?e:N;(0,u.useEffect)(()=>{y&&c.setWimTheme(F)},[F,y]);let I=(0,u.useCallback)(e=>{M||P(e),typeof window<`u`&&v&&window.localStorage.setItem(v,e),a?.(e)},[M,v,a]),L=()=>{let e=o[(o.indexOf(F)+1)%o.length];I(e)},R=S?t.Root:`div`;return g===`segmented`?(0,f.jsxs)(R,{ref:T,role:`group`,"aria-label":A,className:(0,d.default)(`wim-theme-toggle`,l.default.segmented,l.default[_],x),...w,children:[o.map(e=>{let t=e===F;return(0,f.jsx)(`button`,{type:`button`,className:(0,d.default)(l.default.segment,t&&l.default.active),"aria-pressed":t,"aria-label":j[e],title:j[e],onClick:()=>I(e),children:(0,f.jsx)(s.Icon,{component:p[e],size:_})},e)}),(0,f.jsx)(t.Slottable,{children:C})]}):(0,f.jsxs)(R,{ref:T,className:(0,d.default)(`wim-theme-toggle`,l.default.root,x),...w,children:[(0,f.jsx)(`button`,{type:`button`,className:(0,d.default)(l.default.iconButton,l.default[_]),"aria-label":`${A} (${j[F]})`,title:j[F],onClick:L,children:(0,f.jsx)(s.Icon,{component:p[F],size:_})}),(0,f.jsx)(t.Slottable,{children:C})]})});g.displayName=`ThemeToggle`,exports.ThemeToggle=g;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../../i18n/generated/common.cjs"),i=require("../../../icon/monitor.cjs"),a=require("../../../icon/moon.cjs"),o=require("../../../icon/sun.cjs"),s=require("../../media/Icon/Icon.cjs"),c=require("../../../theme.cjs"),l=require("./theme-toggle.module.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p={light:o.default,dark:a.default,system:i.default},m=`wim-theme`,h=e=>e===`light`||e===`dark`||e===`system`,g=u.default.forwardRef(({value:e,defaultValue:i=`system`,onChange:a,modes:o=[`light`,`dark`],variant:g=`icon`,size:_=`md`,storageKey:v=m,applyToDocument:y=!0,labels:b,className:x,asChild:S=!1,children:C,"aria-label":w,"aria-labelledby":T,"aria-describedby":E,...D},O)=>{let{t:k}=n.useWimTranslation(r.commonNs),{light:A=k(`common.light`),dark:j=k(`common.dark`),system:M=k(`theme.system`),toggle:N=k(`theme.toggle`)}=b??{},P={light:A,dark:j,system:M},F=e!==void 0,[I,L]=(0,u.useState)(()=>{if(typeof window<`u`&&v){let e=window.localStorage.getItem(v);if(h(e)&&o.includes(e))return e}return o.includes(i)?i:o[0]}),R=F?e:I;(0,u.useEffect)(()=>{y&&c.setWimTheme(R)},[R,y]);let z=(0,u.useCallback)(e=>{F||L(e),typeof window<`u`&&v&&window.localStorage.setItem(v,e),a?.(e)},[F,v,a]),B=()=>{let e=o[(o.indexOf(R)+1)%o.length];z(e)},V=(0,u.useId)(),H=S?t.Root:`div`,U=`wim-theme-toggle-${V}`;return g===`segmented`?(0,f.jsxs)(H,{ref:O,role:`group`,"aria-label":T?void 0:w??N,"aria-labelledby":T,"aria-describedby":E,className:(0,d.default)(`wim-theme-toggle`,l.default.segmented,l.default[_],x),...D,children:[o.map(e=>{let t=e===R;return(0,f.jsx)(`button`,{type:`button`,className:(0,d.default)(l.default.segment,t&&l.default.active),"aria-pressed":t,"aria-label":P[e],title:P[e],onClick:()=>z(e),children:(0,f.jsx)(s.Icon,{component:p[e],size:_})},e)}),(0,f.jsx)(t.Slottable,{children:C})]}):(0,f.jsxs)(H,{ref:O,className:(0,d.default)(`wim-theme-toggle`,l.default.root,x),...D,children:[(0,f.jsx)(`button`,{type:`button`,className:(0,d.default)(l.default.iconButton,l.default[_]),id:U,"aria-label":T?P[R]:`${w??N} (${P[R]})`,"aria-labelledby":T?`${T} ${U}`:void 0,"aria-describedby":E,title:P[R],onClick:B,children:(0,f.jsx)(s.Icon,{component:p[R],size:_})}),(0,f.jsx)(t.Slottable,{children:C})]})});g.displayName=`ThemeToggle`,exports.ThemeToggle=g;