wimui 0.1.0

package/dist/components/form/Combobox/Combobox.js

@@ -0,0 +1,134 @@
+"use client";
+import { BaseListItem as e } from "../../_internal/BaseListItem/BaseListItem.js";
+import { InputBase as t } from "../InputBase/InputBase.js";
+import { FieldTemplate as n } from "../FieldTemplate/FieldTemplate.js";
+import r from "./combobox.module.js";
+import { useEffect as i, useId as a, useMemo as o, useRef as s, useState as c } from "react";
+import l from "classnames";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/form/Combobox/Combobox.tsx
+var f = ({ options: f = [], onChange: p, placeholder: m, showSearchIcon: h = !0, allowClear: g = !0, defaultValue: _ = "", className: v, disabled: y = !1, label: b, error: x, required: S, layout: C, fullWidth: w = !1, id: T, labels: E = {}, ...D }) => {
+	let { noResults: O = "No results found" } = E, [k, A] = c(!1), [j, M] = c(_), [N, P] = c(-1), [F, I] = c(!1), L = s(null), R = a(), z = T || `wim-combobox-${R}`, B = `${z}-list`, V = b ? `${z}-label` : void 0, H = x ? `${z}-error` : void 0, U = o(() => {
+		let e = (j || "").toLowerCase();
+		return f.filter((t) => t.label.toLowerCase().includes(e));
+	}, [f, j]);
+	i(() => {
+		let e = (e) => {
+			L.current && !L.current.contains(e.target) && A(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []);
+	let W = (e) => {
+		let t = e.target.value;
+		M(t), A(!0), P(-1);
+	}, G = (e) => {
+		M(e.label), A(!1), p && p(e);
+	};
+	return /* @__PURE__ */ u(n, {
+		label: b,
+		error: x,
+		required: S,
+		layout: C,
+		labelId: V,
+		htmlFor: z,
+		errorId: H,
+		className: v,
+		children: /* @__PURE__ */ d("div", {
+			className: l("wim-combobox", r.root, w && r.fullWidth),
+			ref: L,
+			onMouseMove: () => I(!1),
+			"data-keyboard-nav": F,
+			children: [
+				/* @__PURE__ */ u(t, {
+					disabled: y,
+					allowClear: g,
+					hasValue: !!j,
+					onClear: () => M(""),
+					intent: x ? "danger" : "default",
+					leftIcon: h ? "SearchIcon" : void 0,
+					fullWidth: w,
+					rightIcons: [{
+						name: "ChevronDownIcon",
+						rotated: k,
+						onClick: () => A(!k)
+					}],
+					children: /* @__PURE__ */ u("input", {
+						id: z,
+						className: l(r.input, y && r.disabled),
+						placeholder: m,
+						value: j,
+						onChange: W,
+						onKeyDown: (e) => {
+							if (I(!0), !k && e.key === "ArrowDown") {
+								A(!0);
+								return;
+							}
+							switch (e.key) {
+								case "ArrowDown":
+									P((e) => e < U.length - 1 ? e + 1 : 0);
+									break;
+								case "ArrowUp":
+									P((e) => e <= 0 ? U.length - 1 : e - 1);
+									break;
+								case "Enter":
+									N >= 0 && N < U.length && G(U[N]);
+									break;
+								case "Escape":
+									A(!1);
+									break;
+								case "Tab":
+									A(!1);
+									break;
+							}
+						},
+						onFocus: () => A(!0),
+						disabled: y,
+						autoComplete: "off",
+						role: "combobox",
+						"aria-autocomplete": "list",
+						"aria-expanded": k,
+						"aria-controls": k ? B : void 0,
+						"aria-labelledby": V,
+						"aria-describedby": H,
+						required: S,
+						"aria-invalid": !!x,
+						"aria-activedescendant": k && N >= 0 ? `${B}-option-${N}` : void 0,
+						...D
+					})
+				}),
+				k && U.length > 0 && /* @__PURE__ */ u("div", {
+					className: r.dropdown,
+					children: /* @__PURE__ */ u("ul", {
+						id: B,
+						className: r.list,
+						role: "listbox",
+						"aria-labelledby": V,
+						children: U.map((t, n) => /* @__PURE__ */ u(e, {
+							asChild: !0,
+							id: `${B}-option-${n}`,
+							className: l(r.option, n === N && r.selected),
+							active: n === N,
+							onClick: () => G(t),
+							onMouseEnter: () => P(n),
+							role: "option",
+							"aria-selected": n === N,
+							children: /* @__PURE__ */ u("li", { children: t.label })
+						}, t.value))
+					})
+				}),
+				k && U.length === 0 && /* @__PURE__ */ u("div", {
+					className: r.dropdown,
+					children: /* @__PURE__ */ u("div", {
+						className: r.empty,
+						role: "region",
+						"aria-live": "polite",
+						children: O
+					})
+				})
+			]
+		})
+	});
+};
+f.displayName = "Combobox";
+//#endregion
+export { f as Combobox };

package/dist/components/form/Combobox/combobox.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_fs1wh_3`,t=`_fullWidth_fs1wh_8`,n=`_input_fs1wh_11`,r=`_dropdown_fs1wh_32`,i=`_list_fs1wh_47`,a=`_option_fs1wh_52`,o=`_selected_fs1wh_56`,s=`_empty_fs1wh_61`,c={root:e,fullWidth:t,input:n,dropdown:r,list:i,option:a,selected:o,empty:s};exports.default=c,exports.dropdown=r,exports.empty=s,exports.fullWidth=t,exports.input=n,exports.list=i,exports.option=a,exports.root=e,exports.selected=o;

package/dist/components/form/Combobox/combobox.module.js

@@ -0,0 +1,14 @@
+"use client";
+//#region src/components/form/Combobox/combobox.module.scss
+var e = "_root_fs1wh_3", t = "_fullWidth_fs1wh_8", n = "_input_fs1wh_11", r = "_dropdown_fs1wh_32", i = "_list_fs1wh_47", a = "_option_fs1wh_52", o = "_selected_fs1wh_56", s = "_empty_fs1wh_61", c = {
+	root: e,
+	fullWidth: t,
+	input: n,
+	dropdown: r,
+	list: i,
+	option: a,
+	selected: o,
+	empty: s
+};
+//#endregion
+export { c as default, r as dropdown, s as empty, t as fullWidth, n as input, i as list, a as option, e as root, o as selected };

package/dist/components/form/CopyButton/CopyButton.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("../../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;

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

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { ComponentSizeBasic } from '../../../types/tokens';
+type CopyButtonProps = {
+    /** Text copied to the clipboard */
+    value: string;
+    /** Size of the button */
+    size?: ComponentSizeBasic;
+    /** Additional class names */
+    className?: string;
+    /** Accessible label for the button */
+    "aria-label"?: string;
+    /** Tooltip label before copying */
+    copyLabel?: string;
+    /** Tooltip label after copying */
+    copiedLabel?: string;
+    /** Whether to render as a child element. */
+    asChild?: boolean;
+    /** Trigger content when `asChild` is true */
+    children?: React.ReactNode;
+};
+export declare const CopyButton: ({ value, size, className, "aria-label": ariaLabel, copyLabel, copiedLabel, asChild, children, }: CopyButtonProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,40 @@
+"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";
+//#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) {
+			let e = setTimeout(() => {
+				b(!1);
+			}, 2e3);
+			return () => clearTimeout(e);
+		}
+	}, [y]);
+	let x = async () => {
+		try {
+			await navigator.clipboard.writeText(u), b(!0);
+		} catch {}
+	}, S = y ? h ?? v("copied") : m ?? v("copy.to_clipboard");
+	return /* @__PURE__ */ l(n, { children: [/* @__PURE__ */ c(i, {
+		asChild: !0,
+		children: /* @__PURE__ */ c(t, {
+			asChild: g,
+			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
+		})
+	}), /* @__PURE__ */ c(r, { children: S })] });
+};
+//#endregion
+export { u as CopyButton };

package/dist/components/form/CounterTextarea/CounterTextarea.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../FieldTemplate/FieldTemplate.cjs"),n=require("../Textarea/Textarea.cjs"),r=require("../../_internal/FieldCharacterCount/FieldCharacterCount.cjs"),i=require("./counter-textarea.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=a.default.forwardRef(({showCount:e=!0,counterPosition:c=`bottom`,maxLength:l,onChange:u,value:d,defaultValue:f,className:p,fullWidth:m=!1,children:h,...g},_)=>{let[v,y]=(0,a.useState)(f??``),b=String(d===void 0?v:d).length,x=(0,a.useCallback)(e=>{d===void 0&&y(e.target.value),u?.(e)},[d,u]),S=a.default.useId(),C=g.id||`wim-counter-textarea-${S}`,w=g.label?`${C}-label`:void 0,T=g.error?`${C}-error`:void 0;return(0,s.jsx)(t.FieldTemplate,{label:g.label,error:g.error,required:g.required,layout:g.layout,labelId:w,htmlFor:C,errorId:T,className:(0,o.default)(`wim-counter-textarea`,p),children:(0,s.jsxs)(`div`,{className:(0,o.default)(i.default.container,c===`overlay`&&i.default[`container--overlay`],m&&i.default.fullWidth),children:[(0,s.jsx)(n.Textarea,{...g,ref:_,id:C,value:d,defaultValue:f,onChange:x,maxLength:l,fullWidth:m,label:void 0,error:void 0,className:i.default.textarea,"aria-labelledby":w,"aria-describedby":T,children:h}),e&&(0,s.jsx)(r.FieldCharacterCount,{count:b,maxLength:l,className:i.default.counter})]})})});c.displayName=`CounterTextarea`,exports.CounterTextarea=c;

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

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+import { TextareaProps } from '../Textarea/Textarea';
+export type CounterTextareaProps = TextareaProps & {
+    /**
+     * Whether to show the character count.
+     * @default true
+     */
+    showCount?: boolean;
+    /**
+     * Position of the counter.
+     * "bottom" (default) shows it below the textarea.
+     * "overlay" shows it inside the textarea (bottom-right).
+     * @default "bottom"
+     */
+    counterPosition?: "bottom" | "overlay";
+};
+/**
+ * CounterTextarea component adds character counting to the standard Textarea.
+ */
+export declare const CounterTextarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
+    asChild?: boolean;
+    intent?: import('../../..').FieldIntent;
+    variant?: import('../../..').FieldVariant;
+    fullWidth?: boolean;
+    fieldSizing?: "fixed" | "content";
+    label?: string;
+    error?: string;
+    required?: boolean;
+    layout?: "vertical" | "horizontal";
+    width?: import('../../..').FieldWidth | string | number;
+} & {
+    /**
+     * Whether to show the character count.
+     * @default true
+     */
+    showCount?: boolean;
+    /**
+     * Position of the counter.
+     * "bottom" (default) shows it below the textarea.
+     * "overlay" shows it inside the textarea (bottom-right).
+     * @default "bottom"
+     */
+    counterPosition?: "bottom" | "overlay";
+} & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/form/CounterTextarea/CounterTextarea.js

@@ -0,0 +1,50 @@
+"use client";
+import { FieldTemplate as e } from "../FieldTemplate/FieldTemplate.js";
+import { Textarea as t } from "../Textarea/Textarea.js";
+import { FieldCharacterCount as n } from "../../_internal/FieldCharacterCount/FieldCharacterCount.js";
+import r from "./counter-textarea.module.js";
+import i, { useCallback as a, useState as o } from "react";
+import s from "classnames";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/form/CounterTextarea/CounterTextarea.tsx
+var u = i.forwardRef(({ showCount: u = !0, counterPosition: d = "bottom", maxLength: f, onChange: p, value: m, defaultValue: h, className: g, fullWidth: _ = !1, children: v, ...y }, b) => {
+	let [x, S] = o(h ?? ""), C = String(m === void 0 ? x : m).length, w = a((e) => {
+		m === void 0 && S(e.target.value), p?.(e);
+	}, [m, p]), T = i.useId(), E = y.id || `wim-counter-textarea-${T}`, D = y.label ? `${E}-label` : void 0, O = y.error ? `${E}-error` : void 0;
+	return /* @__PURE__ */ c(e, {
+		label: y.label,
+		error: y.error,
+		required: y.required,
+		layout: y.layout,
+		labelId: D,
+		htmlFor: E,
+		errorId: O,
+		className: s("wim-counter-textarea", g),
+		children: /* @__PURE__ */ l("div", {
+			className: s(r.container, d === "overlay" && r["container--overlay"], _ && r.fullWidth),
+			children: [/* @__PURE__ */ c(t, {
+				...y,
+				ref: b,
+				id: E,
+				value: m,
+				defaultValue: h,
+				onChange: w,
+				maxLength: f,
+				fullWidth: _,
+				label: void 0,
+				error: void 0,
+				className: r.textarea,
+				"aria-labelledby": D,
+				"aria-describedby": O,
+				children: v
+			}), u && /* @__PURE__ */ c(n, {
+				count: C,
+				maxLength: f,
+				className: r.counter
+			})]
+		})
+	});
+});
+u.displayName = "CounterTextarea";
+//#endregion
+export { u as CounterTextarea };

package/dist/components/form/CounterTextarea/counter-textarea.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_container_56fhb_2`,t=`_fullWidth_56fhb_9`,n=`_textarea_56fhb_13`,r=`_counter_56fhb_18`,i={container:e,fullWidth:t,textarea:n,counter:r,"container--overlay":`_container--overlay_56fhb_25`};exports.container=e,exports.counter=r,exports.default=i,exports.fullWidth=t,exports.textarea=n;

package/dist/components/form/CounterTextarea/counter-textarea.module.js

@@ -0,0 +1,11 @@
+"use client";
+//#region src/components/form/CounterTextarea/counter-textarea.module.scss
+var e = "_container_56fhb_2", t = "_fullWidth_56fhb_9", n = "_textarea_56fhb_13", r = "_counter_56fhb_18", i = {
+	container: e,
+	fullWidth: t,
+	textarea: n,
+	counter: r,
+	"container--overlay": "_container--overlay_56fhb_25"
+};
+//#endregion
+export { e as container, r as counter, i as default, t as fullWidth, n as textarea };

package/dist/components/form/CreditCardInput/CreditCardInput.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("../Input/Input.cjs"),r=require("./credit-card-input.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=e=>{let t=e.replace(/\D/g,``);return t.startsWith(`4`)?`visa`:/^5[1-5]/.test(t)?`mastercard`:/^3[47]/.test(t)?`amex`:/^6(?:011|5)/.test(t)?`discover`:/^(?:2131|1800|35)/.test(t)?`jcb`:/^3(?:0[0-5]|[68])/.test(t)?`diners`:`generic`},s=(e,t)=>{let n=e.replace(/\D/g,``);if(t===`amex`)return[n.slice(0,4),n.slice(4,10),n.slice(10,15)].filter(Boolean).join(` `);if(t===`diners`)return[n.slice(0,4),n.slice(4,10),n.slice(10,14)].filter(Boolean).join(` `);let r=n.match(/.{1,4}/g);return r?r.join(` `):n},c=e=>e===`amex`?17:e===`diners`?16:19,l=i.default.forwardRef(({onChange:e,onBrandChange:l,value:u,defaultValue:d,asChild:f=!1,children:p,...m},h)=>{let g=f?t.Root:n.Input,[_,v]=(0,i.useState)(()=>{let e=String(d||``);return s(e,o(e))}),y=u!==void 0,b=y?s(String(u),o(String(u))):_,x=(0,i.useMemo)(()=>o(b),[b]);(0,i.useEffect)(()=>{l?.(x)},[x,l]);let S=(0,i.useCallback)(t=>{let n=t.target.value.replace(/\D/g,``),r=s(n,o(n));y||v(r),e&&e({...t,target:{...t.target,value:r}})},[y,e]);return(0,a.jsx)(g,{...m,ref:h,type:`text`,inputMode:`numeric`,autoComplete:`cc-number`,value:b,onChange:S,maxLength:c(x),rightIcon:`CreditCardIcon`,className:`wim-credit-card-input ${r.default.root}`,children:p})});l.displayName=`CreditCardInput`,exports.CreditCardInput=l;

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

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { InputProps } from '../Input/Input';
+export type CreditCardBrand = "visa" | "mastercard" | "amex" | "discover" | "jcb" | "diners" | "generic";
+export type CreditCardInputProps = Omit<InputProps, "type" | "rightIcon"> & {
+    /**
+     * Callback when the card brand is detected.
+     */
+    onBrandChange?: (brand: CreditCardBrand) => void;
+    /**
+     * Whether to render as a child component.
+     */
+    asChild?: boolean;
+};
+/**
+ * Input component specialized for credit card numbers.
+ * Automatically detects card brand and formats input.
+ */
+export declare const CreditCardInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "rightIcon"> & {
+    /**
+     * Callback when the card brand is detected.
+     */
+    onBrandChange?: (brand: CreditCardBrand) => void;
+    /**
+     * Whether to render as a child component.
+     */
+    asChild?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/components/form/CreditCardInput/CreditCardInput.js

@@ -0,0 +1,59 @@
+"use client";
+import { Root as e } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { Input as t } from "../Input/Input.js";
+import n from "./credit-card-input.module.js";
+import r, { useCallback as i, useEffect as a, useMemo as o, useState as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/form/CreditCardInput/CreditCardInput.tsx
+var l = (e) => {
+	let t = e.replace(/\D/g, "");
+	return t.startsWith("4") ? "visa" : /^5[1-5]/.test(t) ? "mastercard" : /^3[47]/.test(t) ? "amex" : /^6(?:011|5)/.test(t) ? "discover" : /^(?:2131|1800|35)/.test(t) ? "jcb" : /^3(?:0[0-5]|[68])/.test(t) ? "diners" : "generic";
+}, u = (e, t) => {
+	let n = e.replace(/\D/g, "");
+	if (t === "amex") return [
+		n.slice(0, 4),
+		n.slice(4, 10),
+		n.slice(10, 15)
+	].filter(Boolean).join(" ");
+	if (t === "diners") return [
+		n.slice(0, 4),
+		n.slice(4, 10),
+		n.slice(10, 14)
+	].filter(Boolean).join(" ");
+	let r = n.match(/.{1,4}/g);
+	return r ? r.join(" ") : n;
+}, d = (e) => e === "amex" ? 17 : e === "diners" ? 16 : 19, f = r.forwardRef(({ onChange: r, onBrandChange: f, value: p, defaultValue: m, asChild: h = !1, children: g, ..._ }, v) => {
+	let y = h ? e : t, [b, x] = s(() => {
+		let e = String(m || "");
+		return u(e, l(e));
+	}), S = p !== void 0, C = S ? u(String(p), l(String(p))) : b, w = o(() => l(C), [C]);
+	a(() => {
+		f?.(w);
+	}, [w, f]);
+	let T = i((e) => {
+		let t = e.target.value.replace(/\D/g, ""), n = u(t, l(t));
+		S || x(n), r && r({
+			...e,
+			target: {
+				...e.target,
+				value: n
+			}
+		});
+	}, [S, r]);
+	return /* @__PURE__ */ c(y, {
+		..._,
+		ref: v,
+		type: "text",
+		inputMode: "numeric",
+		autoComplete: "cc-number",
+		value: C,
+		onChange: T,
+		maxLength: d(w),
+		rightIcon: "CreditCardIcon",
+		className: `wim-credit-card-input ${n.root}`,
+		children: g
+	});
+});
+f.displayName = "CreditCardInput";
+//#endregion
+export { f as CreditCardInput };

package/dist/components/form/CreditCardInput/credit-card-input.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e={};exports.default=e;

package/dist/components/form/CreditCardInput/credit-card-input.module.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/form/CreditCardInput/credit-card-input.module.scss
+var e = {};
+//#endregion
+export { e as default };

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

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

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+import { FieldIntent, FieldVariant, FieldWidth } from '../../../types/tokens';
+export type DatePickerLabels = {
+    placeholder?: string;
+};
+export interface DatePickerProps extends Omit<React.ComponentPropsWithoutRef<"input">, "value" | "defaultValue" | "onChange"> {
+    /** Semantic intent of the field (e.g. error state) */
+    intent?: FieldIntent;
+    /** Visual style variant of the field */
+    variant?: FieldVariant;
+    /** Whether to take full width of parent */
+    fullWidth?: boolean;
+    /** Selected date value (`null` = cleared; omit/`undefined` = uncontrolled) */
+    value?: Date | null;
+    /** Default date value (uncontrolled) */
+    defaultValue?: Date | null;
+    /** Callback when date changes (`null` when cleared) */
+    onChange?: (date: Date | null) => void;
+    /** Date format for display (default: 'YYYY-MM-DD') */
+    format?: string;
+    /** Show clear button */
+    clearable?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Disabled dates */
+    disabledDates?: Date[];
+    /** Field label */
+    label?: string;
+    /** Error message */
+    error?: string;
+    /** Whether to show the required indicator */
+    required?: boolean;
+    /** Layout direction of label and field */
+    layout?: "vertical" | "horizontal";
+    /** Labels for manual translation */
+    labels?: DatePickerLabels;
+    /** Fixed width of the field (width token, CSS value, or number in px) */
+    width?: FieldWidth | string | number;
+    /** Whether to render as a child element. */
+    asChild?: boolean;
+}
+/**
+ * Component for selecting a date.
+ */
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export default DatePicker;

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

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

package/dist/components/form/DatePicker/date-picker.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_9q9sz_4`,t=`_fullWidth_9q9sz_9`,n=`_input_9q9sz_13`,r=`_dropdown_9q9sz_17`,i={root:e,fullWidth:t,input:n,dropdown:r};exports.default=i,exports.dropdown=r,exports.fullWidth=t,exports.input=n,exports.root=e;

package/dist/components/form/DatePicker/date-picker.module.js

@@ -0,0 +1,10 @@
+"use client";
+//#region src/components/form/DatePicker/date-picker.module.scss
+var e = "_root_9q9sz_4", t = "_fullWidth_9q9sz_9", n = "_input_9q9sz_13", r = "_dropdown_9q9sz_17", i = {
+	root: e,
+	fullWidth: t,
+	input: n,
+	dropdown: r
+};
+//#endregion
+export { i as default, r as dropdown, t as fullWidth, n as input, e as root };

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

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