wimui 0.51.2 → 0.52.0

package/dist/components/form/Button/Button.js

@@ -2,83 +2,84 @@
 import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
 import { getColorValue as n } from "../../../utilities/style-utils.js";
 import { useWimTranslation as r } from "../../../i18n/useWimTranslation.js";
-import i from "../../../icon/loading.js";
-import { Icon as a } from "../../media/Icon/Icon.js";
-import o from "./button.module.js";
-import { useMergedRef as s } from "../../../hooks/useMergedRef.js";
-import c from "react";
-import l from "classnames";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { commonNs as i } from "../../../i18n/generated/common.js";
+import { useMergedRef as a } from "../../../hooks/useMergedRef.js";
+import o from "../../../icon/loading.js";
+import { Icon as s } from "../../media/Icon/Icon.js";
+import c from "./button.module.js";
+import l from "react";
+import u from "classnames";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/form/Button/Button.tsx
-var f = c.forwardRef(({ asChild: f = !1, size: p = "md", variant: m = "outline", intent: h = "default", icon: g, iconPosition: _ = "left", loading: v = !1, backgroundColor: y, justify: b = "center", animateWidth: x = !1, fullWidth: S = !1, styles: C, "aria-label": w, className: T, disabled: E, children: D, ...O }, k) => {
-	let A = c.useRef(null), j = s(A, k), [M, N] = c.useState("auto"), P = c.useRef(!0);
-	c.useLayoutEffect(() => {
-		if (!x || !A.current) return;
-		if (P.current) {
-			P.current = !1;
+var p = l.forwardRef(({ asChild: p = !1, size: m = "md", variant: h = "outline", intent: g = "default", icon: _, iconPosition: v = "left", loading: y = !1, backgroundColor: b, justify: x = "center", animateWidth: S = !1, fullWidth: C = !1, styles: w, "aria-label": T, className: E, disabled: D, children: O, ...k }, A) => {
+	let j = l.useRef(null), M = a(j, A), [N, P] = l.useState("auto"), F = l.useRef(!0);
+	l.useLayoutEffect(() => {
+		if (!S || !j.current) return;
+		if (F.current) {
+			F.current = !1;
 			return;
 		}
-		let e = A.current, t = e.getBoundingClientRect().width;
-		N(t);
+		let e = j.current, t = e.getBoundingClientRect().width;
+		P(t);
 		let n = e.style.width, r = e.style.minWidth;
 		e.style.width = "auto", e.style.minWidth = "0";
 		let i = Math.ceil(e.getBoundingClientRect().width) + 2;
 		e.style.width = n, e.style.minWidth = r;
 		let a = requestAnimationFrame(() => {
-			N(i);
+			P(i);
 		});
 		return () => cancelAnimationFrame(a);
-	}, [D, x]);
-	let { t: F } = r("common"), I = E, L;
-	typeof w == "string" ? L = w : w !== !1 && (!D && typeof g == "string" ? L = g : v && (L = F("a11y.loading")));
-	let R = b === "start" ? "flex-start" : b === "end" ? "flex-end" : b === "between" ? "space-between" : b, z = v ? /* @__PURE__ */ u("span", {
-		className: l(o.loader, C?.loader),
-		children: /* @__PURE__ */ u(a, {
-			component: i,
+	}, [O, S]);
+	let { t: I } = r(i), L = D, R;
+	typeof T == "string" ? R = T : T !== !1 && (!O && typeof _ == "string" ? R = _ : y && (R = I("a11y.loading")));
+	let z = x === "start" ? "flex-start" : x === "end" ? "flex-end" : x === "between" ? "space-between" : x, B = y ? /* @__PURE__ */ d("span", {
+		className: u(c.loader, w?.loader),
+		children: /* @__PURE__ */ d(s, {
+			component: o,
 			spin: !0,
-			size: p
+			size: m
 		})
-	}) : g ? typeof g == "string" ? /* @__PURE__ */ u(a, {
-		name: g,
-		size: p,
-		className: C?.icon
-	}) : g : null;
-	return /* @__PURE__ */ d(f ? e : "button", {
-		ref: j,
-		type: f ? void 0 : "button",
+	}) : _ ? typeof _ == "string" ? /* @__PURE__ */ d(s, {
+		name: _,
+		size: m,
+		className: w?.icon
+	}) : _ : null;
+	return /* @__PURE__ */ f(p ? e : "button", {
+		ref: M,
+		type: p ? void 0 : "button",
 		style: {
-			...O.style,
-			justifyContent: R,
-			...y ? { backgroundColor: n(y) } : {},
-			...x && M !== "auto" ? {
-				width: `${M}px`,
-				transitionProperty: O.style?.transitionProperty || "width, background-color, border-color, box-shadow, transform",
-				transitionDuration: O.style?.transitionDuration || "var(--wim-duration-base)",
-				transitionTimingFunction: O.style?.transitionTimingFunction || "var(--wim-easing-standard)",
+			...k.style,
+			justifyContent: z,
+			...b ? { backgroundColor: n(b) } : {},
+			...S && N !== "auto" ? {
+				width: `${N}px`,
+				transitionProperty: k.style?.transitionProperty || "width, background-color, border-color, box-shadow, transform",
+				transitionDuration: k.style?.transitionDuration || "var(--wim-duration-base)",
+				transitionTimingFunction: k.style?.transitionTimingFunction || "var(--wim-easing-standard)",
 				overflow: "hidden",
 				whiteSpace: "nowrap",
 				textOverflow: "clip"
 			} : {}
 		},
-		className: l("wim-button", o.root, o[p], o[m], o[h], v && o.loading, x && o.animatedWidth, S && o.fullWidth, !D && !!g && o.iconOnly, T, C?.root),
-		disabled: (I || v) && !f ? !0 : void 0,
-		"aria-label": L,
-		"aria-busy": v || void 0,
-		...f ? O : { ...O },
+		className: u("wim-button", c.root, c[m], c[h], c[g], y && c.loading, S && c.animatedWidth, C && c.fullWidth, !O && !!_ && c.iconOnly, E, w?.root),
+		disabled: (L || y) && !p ? !0 : void 0,
+		"aria-label": R,
+		"aria-busy": y || void 0,
+		...p ? k : { ...k },
 		children: [
-			f && z && _ === "left" ? z : null,
-			f ? /* @__PURE__ */ u(t, { children: D }) : /* @__PURE__ */ d("span", {
-				className: o.content,
+			p && B && v === "left" ? B : null,
+			p ? /* @__PURE__ */ d(t, { children: O }) : /* @__PURE__ */ f("span", {
+				className: c.content,
 				children: [
-					z && _ === "left" && z,
-					D,
-					z && _ === "right" && z
+					B && v === "left" && B,
+					O,
+					B && v === "right" && B
 				]
 			}),
-			f && z && _ === "right" ? z : null
+			p && B && v === "right" ? B : null
 		]
 	});
 });
-f.displayName = "Button";
+p.displayName = "Button";
 //#endregion
-export { f as Button };
+export { p as Button };

package/dist/components/form/ColorInput/ColorInput.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../Input/Input.cjs"),r=require("./color-input.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=/^#([0-9a-f]{3}|[0-9a-f]{6})$/i,c=e=>e.length===4?`#${e.slice(1).split(``).map(e=>e+e).join(``)}`:e,l=({className:e,value:l,defaultValue:u,onChange:d,style:f,...p})=>{let{t:m}=t.useWimTranslation(`components`),[h,g]=(0,i.useState)(()=>u??`#000000`),_=l!==void 0,v=_?l:h,[y,b]=(0,i.useState)(v),[x,S]=(0,i.useState)(v);v!==x&&(S(v),b(v));let C=(0,i.useCallback)((e,t)=>{_||g(e),d?.(t)},[_,d]),w=(0,i.useCallback)(e=>{let t=e.target.value;b(t),s.test(t.trim())&&C(t.trim(),e)},[C]),T=(0,i.useCallback)(e=>{b(e.target.value),C(e.target.value,e)},[C]),E=s.test(v)?c(v).toLowerCase():`#000000`;return(0,o.jsx)(n.Input,{type:`text`,className:(0,a.default)(`wim-color-input`,r.default.root,e),value:y,onChange:w,style:f,spellCheck:!1,autoCapitalize:`none`,autoCorrect:`off`,inputClassName:r.default.input,suffix:(0,o.jsx)(`input`,{type:`color`,className:r.default.swatch,value:E,onChange:T,disabled:p.disabled,"aria-label":m(`colorinput.swatch`),tabIndex:-1}),...p})};exports.ColorInput=l;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/components.cjs"),r=require("../Input/Input.cjs"),i=require("./color-input.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-9a-f]{3}|[0-9a-f]{6})$/i,l=e=>e.length===4?`#${e.slice(1).split(``).map(e=>e+e).join(``)}`:e,u=({className:e,value:u,defaultValue:d,onChange:f,style:p,...m})=>{let{t:h}=t.useWimTranslation(n.componentsNs),[g,_]=(0,a.useState)(()=>d??`#000000`),v=u!==void 0,y=v?u:g,[b,x]=(0,a.useState)(y),[S,C]=(0,a.useState)(y);y!==S&&(C(y),x(y));let w=(0,a.useCallback)((e,t)=>{v||_(e),f?.(t)},[v,f]),T=(0,a.useCallback)(e=>{let t=e.target.value;x(t),c.test(t.trim())&&w(t.trim(),e)},[w]),E=(0,a.useCallback)(e=>{x(e.target.value),w(e.target.value,e)},[w]),D=c.test(y)?l(y).toLowerCase():`#000000`;return(0,s.jsx)(r.Input,{type:`text`,className:(0,o.default)(`wim-color-input`,i.default.root,e),value:b,onChange:T,style:p,spellCheck:!1,autoCapitalize:`none`,autoCorrect:`off`,inputClassName:i.default.input,suffix:(0,s.jsx)(`input`,{type:`color`,className:i.default.swatch,value:D,onChange:E,disabled:m.disabled,"aria-label":h(`colorinput.swatch`),tabIndex:-1}),...m})};exports.ColorInput=u;

package/dist/components/form/ColorInput/ColorInput.js

@@ -1,43 +1,44 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
-import { Input as t } from "../Input/Input.js";
-import n from "./color-input.module.js";
-import { useCallback as r, useState as i } from "react";
-import a from "classnames";
-import { jsx as o } from "react/jsx-runtime";
+import { componentsNs as t } from "../../../i18n/generated/components.js";
+import { Input as n } from "../Input/Input.js";
+import r from "./color-input.module.js";
+import { useCallback as i, useState as a } from "react";
+import o from "classnames";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/components/form/ColorInput/ColorInput.tsx
-var s = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i, c = (e) => e.length === 4 ? `#${e.slice(1).split("").map((e) => e + e).join("")}` : e, l = ({ className: l, value: u, defaultValue: d, onChange: f, style: p, ...m }) => {
-	let { t: h } = e("components"), [g, _] = i(() => d ?? "#000000"), v = u !== void 0, y = v ? u : g, [b, x] = i(y), [S, C] = i(y);
-	y !== S && (C(y), x(y));
-	let w = r((e, t) => {
-		v || _(e), f?.(t);
-	}, [v, f]), T = r((e) => {
+var c = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i, l = (e) => e.length === 4 ? `#${e.slice(1).split("").map((e) => e + e).join("")}` : e, u = ({ className: u, value: d, defaultValue: f, onChange: p, style: m, ...h }) => {
+	let { t: g } = e(t), [_, v] = a(() => f ?? "#000000"), y = d !== void 0, b = y ? d : _, [x, S] = a(b), [C, w] = a(b);
+	b !== C && (w(b), S(b));
+	let T = i((e, t) => {
+		y || v(e), p?.(t);
+	}, [y, p]), E = i((e) => {
 		let t = e.target.value;
-		x(t), s.test(t.trim()) && w(t.trim(), e);
-	}, [w]), E = r((e) => {
-		x(e.target.value), w(e.target.value, e);
-	}, [w]), D = s.test(y) ? c(y).toLowerCase() : "#000000";
-	return /* @__PURE__ */ o(t, {
+		S(t), c.test(t.trim()) && T(t.trim(), e);
+	}, [T]), D = i((e) => {
+		S(e.target.value), T(e.target.value, e);
+	}, [T]), O = c.test(b) ? l(b).toLowerCase() : "#000000";
+	return /* @__PURE__ */ s(n, {
 		type: "text",
-		className: a("wim-color-input", n.root, l),
-		value: b,
-		onChange: T,
-		style: p,
+		className: o("wim-color-input", r.root, u),
+		value: x,
+		onChange: E,
+		style: m,
 		spellCheck: !1,
 		autoCapitalize: "none",
 		autoCorrect: "off",
-		inputClassName: n.input,
-		suffix: /* @__PURE__ */ o("input", {
+		inputClassName: r.input,
+		suffix: /* @__PURE__ */ s("input", {
 			type: "color",
-			className: n.swatch,
-			value: D,
-			onChange: E,
-			disabled: m.disabled,
-			"aria-label": h("colorinput.swatch"),
+			className: r.swatch,
+			value: O,
+			onChange: D,
+			disabled: h.disabled,
+			"aria-label": g("colorinput.swatch"),
 			tabIndex: -1
 		}),
-		...m
+		...h
 	});
 };
 //#endregion
-export { l as ColorInput };
+export { u as ColorInput };

package/dist/components/form/ColorPicker/color-picker.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_input_141wr_2`,t={input:e};exports.default=t,exports.input=e;
+var e=`_input_l9j6d_3`,t={input:e};exports.default=t,exports.input=e;

package/dist/components/form/ColorPicker/color-picker.module.js

@@ -1,5 +1,5 @@
 "use client";
 //#region src/components/form/ColorPicker/color-picker.module.scss
-var e = "_input_141wr_2", t = { input: e };
+var e = "_input_l9j6d_3", t = { input: e };
 //#endregion
 export { t as default, e as input };

package/dist/components/form/CopyButton/CopyButton.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../Button/Button.cjs"),r=require("../../overlay/Tooltip/Tooltip.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=({value:e,size:s=`md`,className:c,"aria-label":l,copyLabel:u,copiedLabel:d,asChild:f=!1,children:p})=>{let{t:m}=t.useWimTranslation(`common`),[h,g]=(0,i.useState)(!1);(0,i.useEffect)(()=>{if(h){let e=setTimeout(()=>{g(!1)},2e3);return()=>clearTimeout(e)}},[h]);let _=async()=>{try{await navigator.clipboard.writeText(e),g(!0)}catch{}},v=h?d??m(`copied`):u??m(`copy.to_clipboard`);return(0,o.jsxs)(r.Tooltip,{children:[(0,o.jsx)(r.TooltipTrigger,{asChild:!0,children:(0,o.jsx)(n.Button,{asChild:f,variant:`ghost`,size:s,icon:f?void 0:h?`CheckIcon`:`CopyIcon`,intent:h?`success`:`default`,onClick:_,className:(0,a.default)(`wim-copy-button`,c),"aria-label":l||v,children:f?p:void 0})}),(0,o.jsx)(r.TooltipContent,{children:v})]})};exports.CopyButton=s;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../Button/Button.cjs"),i=require("../../overlay/Tooltip/Tooltip.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=({value:e,size:c=`md`,className:l,"aria-label":u,copyLabel:d,copiedLabel:f,asChild:p=!1,children:m})=>{let{t:h}=t.useWimTranslation(n.commonNs),[g,_]=(0,a.useState)(!1);(0,a.useEffect)(()=>{if(g){let e=setTimeout(()=>{_(!1)},2e3);return()=>clearTimeout(e)}},[g]);let v=async()=>{try{await navigator.clipboard.writeText(e),_(!0)}catch{}},y=g?f??h(`copied`):d??h(`copy.to_clipboard`);return(0,s.jsxs)(i.Tooltip,{children:[(0,s.jsx)(i.TooltipTrigger,{asChild:!0,children:(0,s.jsx)(r.Button,{asChild:p,variant:`ghost`,size:c,icon:p?void 0:g?`CheckIcon`:`CopyIcon`,intent:g?`success`:`default`,onClick:v,className:(0,o.default)(`wim-copy-button`,l),"aria-label":u||y,children:p?m:void 0})}),(0,s.jsx)(i.TooltipContent,{children:y})]})};exports.CopyButton=c;

package/dist/components/form/CopyButton/CopyButton.js

@@ -1,40 +1,41 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
-import { Button as t } from "../Button/Button.js";
-import { Tooltip as n, TooltipContent as r, TooltipTrigger as i } from "../../overlay/Tooltip/Tooltip.js";
-import { useEffect as a, useState as o } from "react";
-import s from "classnames";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { commonNs as t } from "../../../i18n/generated/common.js";
+import { Button as n } from "../Button/Button.js";
+import { Tooltip as r, TooltipContent as i, TooltipTrigger as a } from "../../overlay/Tooltip/Tooltip.js";
+import { useEffect as o, useState as s } from "react";
+import c from "classnames";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/form/CopyButton/CopyButton.tsx
-var u = ({ value: u, size: d = "md", className: f, "aria-label": p, copyLabel: m, copiedLabel: h, asChild: g = !1, children: _ }) => {
-	let { t: v } = e("common"), [y, b] = o(!1);
-	a(() => {
-		if (y) {
+var d = ({ value: d, size: f = "md", className: p, "aria-label": m, copyLabel: h, copiedLabel: g, asChild: _ = !1, children: v }) => {
+	let { t: y } = e(t), [b, x] = s(!1);
+	o(() => {
+		if (b) {
 			let e = setTimeout(() => {
-				b(!1);
+				x(!1);
 			}, 2e3);
 			return () => clearTimeout(e);
 		}
-	}, [y]);
-	let x = async () => {
+	}, [b]);
+	let S = async () => {
 		try {
-			await navigator.clipboard.writeText(u), b(!0);
+			await navigator.clipboard.writeText(d), x(!0);
 		} catch {}
-	}, S = y ? h ?? v("copied") : m ?? v("copy.to_clipboard");
-	return /* @__PURE__ */ l(n, { children: [/* @__PURE__ */ c(i, {
+	}, C = b ? g ?? y("copied") : h ?? y("copy.to_clipboard");
+	return /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(a, {
 		asChild: !0,
-		children: /* @__PURE__ */ c(t, {
-			asChild: g,
+		children: /* @__PURE__ */ l(n, {
+			asChild: _,
 			variant: "ghost",
-			size: d,
-			icon: g ? void 0 : y ? "CheckIcon" : "CopyIcon",
-			intent: y ? "success" : "default",
-			onClick: x,
-			className: s("wim-copy-button", f),
-			"aria-label": p || S,
-			children: g ? _ : void 0
+			size: f,
+			icon: _ ? void 0 : b ? "CheckIcon" : "CopyIcon",
+			intent: b ? "success" : "default",
+			onClick: S,
+			className: c("wim-copy-button", p),
+			"aria-label": m || C,
+			children: _ ? v : void 0
 		})
-	}), /* @__PURE__ */ c(r, { children: S })] });
+	}), /* @__PURE__ */ l(i, { children: C })] });
 };
 //#endregion
-export { u as CopyButton };
+export { d as CopyButton };

package/dist/components/form/DatePicker/DatePicker.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("../../layout/Transition/Transition.cjs"),i=require("../../overlay/FocusTrap/FocusTrap.cjs"),a=require("../InputBase/InputBase.cjs"),o=require("../FieldTemplate/FieldTemplate.cjs"),s=require("../Input/input.module.cjs"),c=require("../../data-display/Calendar/Calendar.cjs"),l=require("../../_internal/mergeRefs.cjs"),u=require("./date-picker.module.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("classnames");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=(0,d.forwardRef)(({intent:e=`default`,variant:m=`outline`,fullWidth:h=!1,className:g,disabled:_,value:v,defaultValue:y,onChange:b,format:x=`YYYY-MM-DD`,clearable:S=!0,placeholder:C,minDate:ee,maxDate:te,disabledDates:ne,label:w,error:T,required:E,layout:D,id:re,labels:O,width:k,asChild:A=!1,children:j,...M},N)=>{let[P,F]=(0,d.useState)(!1),[I,L]=(0,d.useState)(y||null),R=(0,d.useRef)(null),z=(0,d.useRef)(null),B=l.mergeRefs(R,N),{t:V}=n.useWimTranslation(`components`),H=(0,d.useId)(),U=re||`wim-datepicker-${H}`,W=`${U}-dropdown`,G=w?`${U}-label`:void 0,K=T?`${U}-error`:void 0,q=v!==void 0,J=q?v:I,Y=C??O?.placeholder,X=_,Z=T?`danger`:e;(0,d.useEffect)(()=>{let e=e=>{R.current&&!R.current.contains(e.target)&&F(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]),(0,d.useEffect)(()=>{let e=e=>{e.key===`Escape`&&P&&(F(!1),z.current?.focus())};return P&&document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[P]);let Q=e=>{if(!e)return``;let t=e.getFullYear(),n=String(e.getMonth()+1).padStart(2,`0`),r=String(e.getDate()).padStart(2,`0`);return x.replace(`YYYY`,String(t)).replace(`MM`,n).replace(`DD`,r)},ie=e=>{q||L(e),b?.(e),F(!1),z.current?.focus()},ae=e=>{e?.stopPropagation(),X||(q||L(null),b?.(null))},$=()=>{X||F(!P)};return(0,d.useEffect)(()=>{if(P){let e=setTimeout(()=>{let e=R.current?.querySelector(`[data-calendar-day][tabindex="0"]:not(:disabled), [data-calendar-day][data-selected]:not(:disabled), [data-calendar-day]:focus`);e?e.focus():R.current?.querySelector(`[data-calendar-day]:not([data-other-month]):not(:disabled)`)?.focus()},50);return()=>clearTimeout(e)}},[P]),(0,p.jsx)(o.FieldTemplate,{label:w,error:T,required:E,layout:D,labelId:G,htmlFor:U,errorId:K,className:g,children:(0,p.jsxs)(A?t.Root:`div`,{ref:B,className:(0,f.default)(`wim-date-picker`,u.default.root,h&&u.default.fullWidth),children:[(0,p.jsxs)(t.Slottable,{children:[(0,p.jsx)(a.InputBase,{intent:Z,variant:m,width:k,fullWidth:h,disabled:X,allowClear:S,hasValue:!!J,onClear:ae,rightIcons:[{name:`ChevronDownIcon`,rotated:P,onClick:$,decorative:!0}],children:(0,p.jsx)(`input`,{id:U,ref:z,type:`text`,readOnly:!0,role:`combobox`,className:(0,f.default)(s.default.root,u.default.input),value:Q(J),placeholder:Y,disabled:X,onClick:$,onKeyDown:e=>{X||(e.key===`Escape`?(F(!1),z.current?.focus()):(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`&&(e.altKey||!P))&&(e.preventDefault(),F(!P)))},"aria-haspopup":`dialog`,"aria-expanded":P,"aria-controls":P?W:void 0,"aria-invalid":Z===`danger`,"aria-describedby":K,"aria-labelledby":G,"aria-required":E,...M})}),(0,p.jsx)(r.Transition,{show:P&&!_,preset:`fade`,id:W,className:u.default.dropdown,children:(0,p.jsx)(i.FocusTrap,{active:P,initialFocus:!1,children:(0,p.jsx)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-labelledby":G,"aria-label":G?void 0:M[`aria-label`]??V(`datepicker.dialog`),children:(0,p.jsx)(c.Calendar,{value:J??void 0,onChange:ie})})})})]}),j]})})});m.displayName=`DatePicker`,exports.DatePicker=m,exports.default=m;
+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("../../layout/Transition/Transition.cjs"),i=require("../../overlay/FocusTrap/FocusTrap.cjs"),a=require("../../../i18n/generated/components.cjs"),o=require("../InputBase/InputBase.cjs"),s=require("../FieldTemplate/FieldTemplate.cjs"),c=require("../Input/input.module.cjs"),l=require("../../data-display/Calendar/Calendar.cjs"),u=require("../../_internal/mergeRefs.cjs"),d=require("./date-picker.module.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("classnames");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=(0,f.forwardRef)(({intent:e=`default`,variant:h=`outline`,fullWidth:g=!1,className:_,disabled:v,value:y,defaultValue:b,onChange:x,format:ee=`YYYY-MM-DD`,clearable:S=!0,placeholder:C,minDate:te,maxDate:ne,disabledDates:re,label:w,error:T,required:E,layout:D,id:O,labels:k,width:A,asChild:j=!1,children:M,...N},P)=>{let[F,I]=(0,f.useState)(!1),[L,R]=(0,f.useState)(b||null),z=(0,f.useRef)(null),B=(0,f.useRef)(null),V=u.mergeRefs(z,P),{t:H}=n.useWimTranslation(a.componentsNs),U=(0,f.useId)(),W=O||`wim-datepicker-${U}`,G=`${W}-dropdown`,K=w?`${W}-label`:void 0,q=T?`${W}-error`:void 0,J=y!==void 0,Y=J?y:L,X=C??k?.placeholder,Z=v,Q=T?`danger`:e;(0,f.useEffect)(()=>{let e=e=>{z.current&&!z.current.contains(e.target)&&I(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]),(0,f.useEffect)(()=>{let e=e=>{e.key===`Escape`&&F&&(I(!1),B.current?.focus())};return F&&document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[F]);let ie=e=>{if(!e)return``;let t=e.getFullYear(),n=String(e.getMonth()+1).padStart(2,`0`),r=String(e.getDate()).padStart(2,`0`);return ee.replace(`YYYY`,String(t)).replace(`MM`,n).replace(`DD`,r)},ae=e=>{J||R(e),x?.(e),I(!1),B.current?.focus()},oe=e=>{e?.stopPropagation(),Z||(J||R(null),x?.(null))},$=()=>{Z||I(!F)};return(0,f.useEffect)(()=>{if(F){let e=setTimeout(()=>{let e=z.current?.querySelector(`[data-calendar-day][tabindex="0"]:not(:disabled), [data-calendar-day][data-selected]:not(:disabled), [data-calendar-day]:focus`);e?e.focus():z.current?.querySelector(`[data-calendar-day]:not([data-other-month]):not(:disabled)`)?.focus()},50);return()=>clearTimeout(e)}},[F]),(0,m.jsx)(s.FieldTemplate,{label:w,error:T,required:E,layout:D,labelId:K,htmlFor:W,errorId:q,className:_,children:(0,m.jsxs)(j?t.Root:`div`,{ref:V,className:(0,p.default)(`wim-date-picker`,d.default.root,g&&d.default.fullWidth),children:[(0,m.jsxs)(t.Slottable,{children:[(0,m.jsx)(o.InputBase,{intent:Q,variant:h,width:A,fullWidth:g,disabled:Z,allowClear:S,hasValue:!!Y,onClear:oe,rightIcons:[{name:`ChevronDownIcon`,rotated:F,onClick:$,decorative:!0}],children:(0,m.jsx)(`input`,{id:W,ref:B,type:`text`,readOnly:!0,role:`combobox`,className:(0,p.default)(c.default.root,d.default.input),value:ie(Y),placeholder:X,disabled:Z,onClick:$,onKeyDown:e=>{Z||(e.key===`Escape`?(I(!1),B.current?.focus()):(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`&&(e.altKey||!F))&&(e.preventDefault(),I(!F)))},"aria-haspopup":`dialog`,"aria-expanded":F,"aria-controls":F?G:void 0,"aria-invalid":Q===`danger`,"aria-describedby":q,"aria-labelledby":K,"aria-required":E,...N})}),(0,m.jsx)(r.Transition,{show:F&&!v,preset:`fade`,id:G,className:d.default.dropdown,children:(0,m.jsx)(i.FocusTrap,{active:F,initialFocus:!1,children:(0,m.jsx)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-labelledby":K,"aria-label":K?void 0:N[`aria-label`]??H(`datepicker.dialog`),children:(0,m.jsx)(l.Calendar,{value:Y??void 0,onChange:ae})})})})]}),M]})})});h.displayName=`DatePicker`,exports.DatePicker=h,exports.default=h;

package/dist/components/form/DatePicker/DatePicker.js

@@ -3,41 +3,42 @@ import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react
 import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
 import { Transition as r } from "../../layout/Transition/Transition.js";
 import { FocusTrap as ee } from "../../overlay/FocusTrap/FocusTrap.js";
-import { InputBase as te } from "../InputBase/InputBase.js";
-import { FieldTemplate as ne } from "../FieldTemplate/FieldTemplate.js";
-import i from "../Input/input.module.js";
-import { Calendar as a } from "../../data-display/Calendar/Calendar.js";
-import { mergeRefs as o } from "../../_internal/mergeRefs.js";
-import s from "./date-picker.module.js";
-import { forwardRef as c, useEffect as l, useId as u, useRef as d, useState as f } from "react";
-import p from "classnames";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { componentsNs as i } from "../../../i18n/generated/components.js";
+import { InputBase as a } from "../InputBase/InputBase.js";
+import { FieldTemplate as o } from "../FieldTemplate/FieldTemplate.js";
+import s from "../Input/input.module.js";
+import { Calendar as te } from "../../data-display/Calendar/Calendar.js";
+import { mergeRefs as ne } from "../../_internal/mergeRefs.js";
+import c from "./date-picker.module.js";
+import { forwardRef as l, useEffect as u, useId as d, useRef as f, useState as p } from "react";
+import m from "classnames";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/form/DatePicker/DatePicker.tsx
-var g = c(({ intent: c = "default", variant: g = "outline", fullWidth: _ = !1, className: v, disabled: y, value: b, defaultValue: x, onChange: S, format: C = "YYYY-MM-DD", clearable: w = !0, placeholder: T, minDate: re, maxDate: ie, disabledDates: ae, label: E, error: D, required: O, layout: oe, id: k, labels: A, width: j, asChild: M = !1, children: N, ...P }, F) => {
-	let [I, L] = f(!1), [R, z] = f(x || null), B = d(null), V = d(null), H = o(B, F), { t: U } = n("components"), W = u(), G = k || `wim-datepicker-${W}`, K = `${G}-dropdown`, q = E ? `${G}-label` : void 0, J = D ? `${G}-error` : void 0, Y = b !== void 0, X = Y ? b : R, se = T ?? A?.placeholder, Z = y, Q = D ? "danger" : c;
-	l(() => {
+var _ = l(({ intent: l = "default", variant: _ = "outline", fullWidth: v = !1, className: y, disabled: b, value: x, defaultValue: S, onChange: C, format: w = "YYYY-MM-DD", clearable: re = !0, placeholder: ie, minDate: ae, maxDate: oe, disabledDates: se, label: T, error: E, required: D, layout: O, id: k, labels: A, width: j, asChild: M = !1, children: N, ...P }, F) => {
+	let [I, L] = p(!1), [R, z] = p(S || null), B = f(null), V = f(null), H = ne(B, F), { t: U } = n(i), W = d(), G = k || `wim-datepicker-${W}`, K = `${G}-dropdown`, q = T ? `${G}-label` : void 0, J = E ? `${G}-error` : void 0, Y = x !== void 0, X = Y ? x : R, ce = ie ?? A?.placeholder, Z = b, Q = E ? "danger" : l;
+	u(() => {
 		let e = (e) => {
 			B.current && !B.current.contains(e.target) && L(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, []), l(() => {
+	}, []), u(() => {
 		let e = (e) => {
 			e.key === "Escape" && I && (L(!1), V.current?.focus());
 		};
 		return I && document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
 	}, [I]);
-	let ce = (e) => {
+	let le = (e) => {
 		if (!e) return "";
 		let t = e.getFullYear(), n = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0");
-		return C.replace("YYYY", String(t)).replace("MM", n).replace("DD", r);
-	}, le = (e) => {
-		Y || z(e), S?.(e), L(!1), V.current?.focus();
+		return w.replace("YYYY", String(t)).replace("MM", n).replace("DD", r);
 	}, ue = (e) => {
-		e?.stopPropagation(), Z || (Y || z(null), S?.(null));
+		Y || z(e), C?.(e), L(!1), V.current?.focus();
+	}, de = (e) => {
+		e?.stopPropagation(), Z || (Y || z(null), C?.(null));
 	}, $ = () => {
 		Z || L(!I);
 	};
-	return l(() => {
+	return u(() => {
 		if (I) {
 			let e = setTimeout(() => {
 				let e = B.current?.querySelector("[data-calendar-day][tabindex=\"0\"]:not(:disabled), [data-calendar-day][data-selected]:not(:disabled), [data-calendar-day]:focus");
@@ -45,42 +46,42 @@ var g = c(({ intent: c = "default", variant: g = "outline", fullWidth: _ = !1, c
 			}, 50);
 			return () => clearTimeout(e);
 		}
-	}, [I]), /* @__PURE__ */ m(ne, {
-		label: E,
-		error: D,
-		required: O,
-		layout: oe,
+	}, [I]), /* @__PURE__ */ h(o, {
+		label: T,
+		error: E,
+		required: D,
+		layout: O,
 		labelId: q,
 		htmlFor: G,
 		errorId: J,
-		className: v,
-		children: /* @__PURE__ */ h(M ? e : "div", {
+		className: y,
+		children: /* @__PURE__ */ g(M ? e : "div", {
 			ref: H,
-			className: p("wim-date-picker", s.root, _ && s.fullWidth),
-			children: [/* @__PURE__ */ h(t, { children: [/* @__PURE__ */ m(te, {
+			className: m("wim-date-picker", c.root, v && c.fullWidth),
+			children: [/* @__PURE__ */ g(t, { children: [/* @__PURE__ */ h(a, {
 				intent: Q,
-				variant: g,
+				variant: _,
 				width: j,
-				fullWidth: _,
+				fullWidth: v,
 				disabled: Z,
-				allowClear: w,
+				allowClear: re,
 				hasValue: !!X,
-				onClear: ue,
+				onClear: de,
 				rightIcons: [{
 					name: "ChevronDownIcon",
 					rotated: I,
 					onClick: $,
 					decorative: !0
 				}],
-				children: /* @__PURE__ */ m("input", {
+				children: /* @__PURE__ */ h("input", {
 					id: G,
 					ref: V,
 					type: "text",
 					readOnly: !0,
 					role: "combobox",
-					className: p(i.root, s.input),
-					value: ce(X),
-					placeholder: se,
+					className: m(s.root, c.input),
+					value: le(X),
+					placeholder: ce,
 					disabled: Z,
 					onClick: $,
 					onKeyDown: (e) => {
@@ -92,25 +93,25 @@ var g = c(({ intent: c = "default", variant: g = "outline", fullWidth: _ = !1, c
 					"aria-invalid": Q === "danger",
 					"aria-describedby": J,
 					"aria-labelledby": q,
-					"aria-required": O,
+					"aria-required": D,
 					...P
 				})
-			}), /* @__PURE__ */ m(r, {
-				show: I && !y,
+			}), /* @__PURE__ */ h(r, {
+				show: I && !b,
 				preset: "fade",
 				id: K,
-				className: s.dropdown,
-				children: /* @__PURE__ */ m(ee, {
+				className: c.dropdown,
+				children: /* @__PURE__ */ h(ee, {
 					active: I,
 					initialFocus: !1,
-					children: /* @__PURE__ */ m("div", {
+					children: /* @__PURE__ */ h("div", {
 						role: "dialog",
 						"aria-modal": "true",
 						"aria-labelledby": q,
 						"aria-label": q ? void 0 : P["aria-label"] ?? U("datepicker.dialog"),
-						children: /* @__PURE__ */ m(a, {
+						children: /* @__PURE__ */ h(te, {
 							value: X ?? void 0,
-							onChange: le
+							onChange: ue
 						})
 					})
 				})
@@ -118,6 +119,6 @@ var g = c(({ intent: c = "default", variant: g = "outline", fullWidth: _ = !1, c
 		})
 	});
 });
-g.displayName = "DatePicker";
+_.displayName = "DatePicker";
 //#endregion
-export { g as DatePicker, g as default };
+export { _ as DatePicker, _ as default };

package/dist/components/form/DateRangePicker/DateRangePicker.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../FieldTemplate/FieldTemplate.cjs"),r=require("../DatePicker/DatePicker.cjs"),i=require("./date-range-picker.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=({startProps:e,endProps:c,className:l,label:u,error:d,required:f,layout:p=`vertical`})=>{let{t:m}=t.useWimTranslation(`components`),h=`wim-daterangepicker-${(0,a.useId)()}`,g=u?`${h}-label`:void 0,_=d?`${h}-error`:void 0,v=e?.label?void 0:m(`daterangepicker.start`),y=c?.label?void 0:m(`daterangepicker.end`);return(0,s.jsx)(n.FieldTemplate,{label:u,error:d,required:f,layout:p,labelId:g,errorId:_,className:(0,o.default)(`wim-date-range-picker`,i.default.container,l),children:(0,s.jsxs)(`div`,{className:i.default.root,role:`group`,"aria-labelledby":g,"aria-describedby":_,children:[(0,s.jsx)(`div`,{className:i.default.pickerWrapper,children:(0,s.jsx)(r.DatePicker,{"aria-label":v,...e,intent:d?`danger`:e?.intent,fullWidth:!0})}),(0,s.jsx)(`span`,{className:i.default.separator,children:`~`}),(0,s.jsx)(`div`,{className:i.default.pickerWrapper,children:(0,s.jsx)(r.DatePicker,{"aria-label":y,...c,intent:d?`danger`:c?.intent,fullWidth:!0})})]})})};exports.DateRangePicker=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/components.cjs"),r=require("../FieldTemplate/FieldTemplate.cjs"),i=require("../DatePicker/DatePicker.cjs"),a=require("./date-range-picker.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=({startProps:e,endProps:l,className:u,label:d,error:f,required:p,layout:m=`vertical`})=>{let{t:h}=t.useWimTranslation(n.componentsNs),g=`wim-daterangepicker-${(0,o.useId)()}`,_=d?`${g}-label`:void 0,v=f?`${g}-error`:void 0,y=e?.label?void 0:h(`daterangepicker.start`),b=l?.label?void 0:h(`daterangepicker.end`);return(0,c.jsx)(r.FieldTemplate,{label:d,error:f,required:p,layout:m,labelId:_,errorId:v,className:(0,s.default)(`wim-date-range-picker`,a.default.container,u),children:(0,c.jsxs)(`div`,{className:a.default.root,role:`group`,"aria-labelledby":_,"aria-describedby":v,children:[(0,c.jsx)(`div`,{className:a.default.pickerWrapper,children:(0,c.jsx)(i.DatePicker,{"aria-label":y,...e,intent:f?`danger`:e?.intent,fullWidth:!0})}),(0,c.jsx)(`span`,{className:a.default.separator,children:`~`}),(0,c.jsx)(`div`,{className:a.default.pickerWrapper,children:(0,c.jsx)(i.DatePicker,{"aria-label":b,...l,intent:f?`danger`:l?.intent,fullWidth:!0})})]})})};exports.DateRangePicker=l;