wimui 0.1.0

package/dist/components/form/Mentions/mentions.module.js

@@ -0,0 +1,8 @@
+"use client";
+//#region src/components/form/Mentions/mentions.module.scss
+var e = "_container_1s6ya_3", t = "_list_1s6ya_7", n = {
+	container: e,
+	list: t
+};
+//#endregion
+export { e as container, n as default, t as list };

package/dist/components/form/MultiSelect/MultiSelect.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../icon/check.cjs"),n=require("../../media/Icon/Icon.cjs"),r=require("../../_internal/BaseListItem/BaseListItem.cjs"),i=require("../InputBase/InputBase.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("../../data-display/Chip/Chip.cjs"),s=require("./multiselect.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=({options:e=[],value:d,onChange:f,placeholder:p,label:m,error:h,required:g,layout:_,className:v,disabled:y=!1,defaultValue:b=[],allowClear:x=!1,id:S,width:C,fullWidth:w=!1,...T})=>{let[E,D]=(0,c.useState)(!1),[O,k]=(0,c.useState)(b),[A,j]=(0,c.useState)(-1),[M,N]=(0,c.useState)(!1),P=(0,c.useRef)(null),F=(0,c.useRef)(null),I=(0,c.useRef)(null),L=(0,c.useId)(),R=S||`wim-multiselect-${L}`,z=`${R}-list`,B=m?`${R}-label`:void 0,V=h?`${R}-error`:void 0,H=`${R}-trigger`,U=d!==void 0,W=U?d:O;(0,c.useEffect)(()=>{let e=e=>{P.current&&!P.current.contains(e.target)&&D(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]);let G=e=>{if(y||e&&e.target.closest(`[data-chip-delete]`))return;let t=!E;D(t),j(t?0:-1)},K=e=>{if(y)return;let t;t=W?.includes(e)?W.filter(t=>t!==e):[...W||[],e],U||k(t),f&&f(t)},q=(e,t)=>{if(e.stopPropagation(),y)return;let n=(W||[]).filter(e=>e!==t);U||k(n),f&&f(n)},J=e=>{e?.stopPropagation(),!y&&(U||k([]),f&&f([]))},Y=e.filter(e=>W?.includes(e.value)),X=t=>{if(N(!0),!y)switch(t.key){case`ArrowDown`:t.preventDefault(),E?j(t=>t<e.length-1?t+1:0):(D(!0),j(0));break;case`ArrowUp`:t.preventDefault(),E&&j(t=>t>0?t-1:e.length-1);break;case`Enter`:case` `:t.preventDefault(),E?A>=0&&K(e[A].value):(D(!0),j(0));break;case`Escape`:E&&(t.preventDefault(),D(!1),j(-1),I.current?.focus());break;case`Home`:E&&(t.preventDefault(),j(0));break;case`End`:E&&(t.preventDefault(),j(e.length-1));break;case`Tab`:E&&(D(!1),j(-1));break}};(0,c.useEffect)(()=>{E&&A>=0&&F.current&&F.current.children[A]?.scrollIntoView({block:`nearest`})},[A,E]);let{"aria-label":Z,"aria-labelledby":Q,"aria-describedby":$,...ee}=T;return(0,u.jsx)(a.FieldTemplate,{label:m,error:h,required:g,layout:_,labelId:B,htmlFor:H,errorId:V,className:v,children:(0,u.jsxs)(`div`,{className:(0,l.default)(`wim-multi-select`,s.default.root,w&&s.default.fullWidth),ref:P,onMouseMove:()=>N(!1),"data-keyboard-nav":M,...ee,children:[(0,u.jsx)(i.InputBase,{disabled:y,allowClear:x,hasValue:W&&W.length>0,onClear:J,intent:h?`danger`:`default`,width:C,fullWidth:w,rightIcons:[{name:`ChevronDownIcon`,rotated:E}],className:(0,l.default)(E&&s.default.open),children:(0,u.jsx)(`div`,{id:H,"data-testid":`multiselect-trigger`,className:(0,l.default)(s.default.trigger,y&&s.default.disabled),onClick:G,tabIndex:y?-1:0,role:`combobox`,"aria-expanded":E,"aria-haspopup":`listbox`,"aria-controls":E?z:void 0,"aria-disabled":y,"aria-labelledby":B||Q,"aria-describedby":V||$,"aria-required":g,"aria-invalid":!!h,"aria-label":m?void 0:Z||p,onKeyDown:X,ref:I,"aria-activedescendant":E&&A>=0?`${R}-option-${A}`:void 0,children:(0,u.jsx)(`div`,{className:(0,l.default)(s.default.value,Y.length===0&&s.default.placeholder),children:Y.length>0?Y.map(e=>(0,u.jsx)(o.Chip,{"data-testid":`multiselect-chip`,size:`sm`,color:`primary`,variant:`solid`,disabled:y,onDelete:y?void 0:t=>q(t,e.value),children:e.label},e.value)):p})})}),E&&!y&&(0,u.jsx)(`ul`,{id:z,ref:F,className:s.default.list,role:`listbox`,"aria-multiselectable":`true`,"aria-labelledby":B||Q||void 0,children:e.map((e,i)=>{let a=W?.includes(e.value),o=i===A;return(0,u.jsx)(r.BaseListItem,{asChild:!0,id:`${R}-option-${i}`,className:(0,l.default)(s.default.option,a&&s.default.selected),active:o,disabled:e.disabled,onClick:()=>!e.disabled&&K(e.value),onMouseEnter:()=>j(i),rightSection:a?(0,u.jsx)(n.Icon,{component:t.default,size:`sm`}):void 0,role:`option`,"aria-selected":a,tabIndex:-1,children:(0,u.jsx)(`li`,{children:e.label})},e.value)})})]})})};d.displayName=`MultiSelect`,exports.MultiSelect=d;

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

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+import { FieldWidth } from '../../../types/tokens';
+export type MultiSelectOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export type MultiSelectProps = {
+    /** List of options */
+    options: MultiSelectOption[];
+    /** Selected values (controlled) */
+    value?: string[];
+    /** Callback when the selection changes */
+    onChange?: (value: string[]) => void;
+    /** Placeholder shown when nothing is selected */
+    placeholder?: string;
+    /** 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";
+    /** Additional class names */
+    className?: string;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Initially selected values (uncontrolled) */
+    defaultValue?: string[];
+    /** Whether to show a clear button to remove all selections */
+    allowClear?: boolean;
+    /** Unique ID for the component */
+    id?: string;
+    /** Accessible label for the trigger when no visible label is provided */
+    "aria-label"?: string;
+    /** ID of the element that labels the field */
+    "aria-labelledby"?: string;
+    /** ID of the element that describes the field */
+    "aria-describedby"?: string;
+    /** Fixed width of the field (width token, CSS value, or number in px) */
+    width?: FieldWidth | string | number;
+    /** Whether to take full width of parent */
+    fullWidth?: boolean;
+};
+/**
+ * Dropdown menu for selecting multiple options from a predefined list.
+ */
+export declare const MultiSelect: {
+    ({ options, value, onChange, placeholder, label, error, required, layout, className, disabled, defaultValue, allowClear, id: customId, width, fullWidth, ...props }: MultiSelectProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/form/MultiSelect/MultiSelect.js

@@ -0,0 +1,158 @@
+"use client";
+import e from "../../../icon/check.js";
+import { Icon as t } from "../../media/Icon/Icon.js";
+import { BaseListItem as n } from "../../_internal/BaseListItem/BaseListItem.js";
+import { InputBase as r } from "../InputBase/InputBase.js";
+import { FieldTemplate as i } from "../FieldTemplate/FieldTemplate.js";
+import { Chip as a } from "../../data-display/Chip/Chip.js";
+import o from "./multiselect.module.js";
+import { useEffect as s, useId as c, useRef as l, useState as u } from "react";
+import d from "classnames";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/form/MultiSelect/MultiSelect.tsx
+var m = ({ options: m = [], value: h, onChange: g, placeholder: _, label: v, error: y, required: b, layout: x, className: S, disabled: C = !1, defaultValue: w = [], allowClear: T = !1, id: E, width: D, fullWidth: O = !1, ...ee }) => {
+	let [k, A] = u(!1), [j, M] = u(w), [N, P] = u(-1), [F, I] = u(!1), L = l(null), R = l(null), z = l(null), B = c(), V = E || `wim-multiselect-${B}`, H = `${V}-list`, U = v ? `${V}-label` : void 0, W = y ? `${V}-error` : void 0, G = `${V}-trigger`, K = h !== void 0, q = K ? h : j;
+	s(() => {
+		let e = (e) => {
+			L.current && !L.current.contains(e.target) && A(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []);
+	let J = (e) => {
+		if (C || e && e.target.closest("[data-chip-delete]")) return;
+		let t = !k;
+		A(t), P(t ? 0 : -1);
+	}, Y = (e) => {
+		if (C) return;
+		let t;
+		t = q?.includes(e) ? q.filter((t) => t !== e) : [...q || [], e], K || M(t), g && g(t);
+	}, X = (e, t) => {
+		if (e.stopPropagation(), C) return;
+		let n = (q || []).filter((e) => e !== t);
+		K || M(n), g && g(n);
+	}, Z = (e) => {
+		e?.stopPropagation(), !C && (K || M([]), g && g([]));
+	}, Q = m.filter((e) => q?.includes(e.value)), te = (e) => {
+		if (I(!0), !C) switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), k ? P((e) => e < m.length - 1 ? e + 1 : 0) : (A(!0), P(0));
+				break;
+			case "ArrowUp":
+				e.preventDefault(), k && P((e) => e > 0 ? e - 1 : m.length - 1);
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault(), k ? N >= 0 && Y(m[N].value) : (A(!0), P(0));
+				break;
+			case "Escape":
+				k && (e.preventDefault(), A(!1), P(-1), z.current?.focus());
+				break;
+			case "Home":
+				k && (e.preventDefault(), P(0));
+				break;
+			case "End":
+				k && (e.preventDefault(), P(m.length - 1));
+				break;
+			case "Tab":
+				k && (A(!1), P(-1));
+				break;
+		}
+	};
+	s(() => {
+		k && N >= 0 && R.current && R.current.children[N]?.scrollIntoView({ block: "nearest" });
+	}, [N, k]);
+	let { "aria-label": ne, "aria-labelledby": $, "aria-describedby": re, ...ie } = ee;
+	return /* @__PURE__ */ f(i, {
+		label: v,
+		error: y,
+		required: b,
+		layout: x,
+		labelId: U,
+		htmlFor: G,
+		errorId: W,
+		className: S,
+		children: /* @__PURE__ */ p("div", {
+			className: d("wim-multi-select", o.root, O && o.fullWidth),
+			ref: L,
+			onMouseMove: () => I(!1),
+			"data-keyboard-nav": F,
+			...ie,
+			children: [/* @__PURE__ */ f(r, {
+				disabled: C,
+				allowClear: T,
+				hasValue: q && q.length > 0,
+				onClear: Z,
+				intent: y ? "danger" : "default",
+				width: D,
+				fullWidth: O,
+				rightIcons: [{
+					name: "ChevronDownIcon",
+					rotated: k
+				}],
+				className: d(k && o.open),
+				children: /* @__PURE__ */ f("div", {
+					id: G,
+					"data-testid": "multiselect-trigger",
+					className: d(o.trigger, C && o.disabled),
+					onClick: J,
+					tabIndex: C ? -1 : 0,
+					role: "combobox",
+					"aria-expanded": k,
+					"aria-haspopup": "listbox",
+					"aria-controls": k ? H : void 0,
+					"aria-disabled": C,
+					"aria-labelledby": U || $,
+					"aria-describedby": W || re,
+					"aria-required": b,
+					"aria-invalid": !!y,
+					"aria-label": v ? void 0 : ne || _,
+					onKeyDown: te,
+					ref: z,
+					"aria-activedescendant": k && N >= 0 ? `${V}-option-${N}` : void 0,
+					children: /* @__PURE__ */ f("div", {
+						className: d(o.value, Q.length === 0 && o.placeholder),
+						children: Q.length > 0 ? Q.map((e) => /* @__PURE__ */ f(a, {
+							"data-testid": "multiselect-chip",
+							size: "sm",
+							color: "primary",
+							variant: "solid",
+							disabled: C,
+							onDelete: C ? void 0 : (t) => X(t, e.value),
+							children: e.label
+						}, e.value)) : _
+					})
+				})
+			}), k && !C && /* @__PURE__ */ f("ul", {
+				id: H,
+				ref: R,
+				className: o.list,
+				role: "listbox",
+				"aria-multiselectable": "true",
+				"aria-labelledby": U || $ || void 0,
+				children: m.map((r, i) => {
+					let a = q?.includes(r.value), s = i === N;
+					return /* @__PURE__ */ f(n, {
+						asChild: !0,
+						id: `${V}-option-${i}`,
+						className: d(o.option, a && o.selected),
+						active: s,
+						disabled: r.disabled,
+						onClick: () => !r.disabled && Y(r.value),
+						onMouseEnter: () => P(i),
+						rightSection: a ? /* @__PURE__ */ f(t, {
+							component: e,
+							size: "sm"
+						}) : void 0,
+						role: "option",
+						"aria-selected": a,
+						tabIndex: -1,
+						children: /* @__PURE__ */ f("li", { children: r.label })
+					}, r.value);
+				})
+			})]
+		})
+	});
+};
+m.displayName = "MultiSelect";
+//#endregion
+export { m as MultiSelect };

package/dist/components/form/MultiSelect/multiselect.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1vf4u_2`,t=`_fullWidth_1vf4u_9`,n=`_trigger_1vf4u_13`,r=`_disabled_1vf4u_30`,i=`_open_1vf4u_38`,a=`_value_1vf4u_46`,o=`_placeholder_1vf4u_47`,s=`_icon_1vf4u_50`,c=`_list_1vf4u_70`,l=`_option_1vf4u_84`,u=`_active_1vf4u_84`,d=`_selected_1vf4u_88`,f=`_clear_1vf4u_99`,p={root:e,fullWidth:t,trigger:n,disabled:r,open:i,value:a,placeholder:o,icon:s,list:c,option:l,active:u,selected:d,clear:f};exports.active=u,exports.clear=f,exports.default=p,exports.disabled=r,exports.fullWidth=t,exports.icon=s,exports.list=c,exports.open=i,exports.option=l,exports.placeholder=o,exports.root=e,exports.selected=d,exports.trigger=n,exports.value=a;

package/dist/components/form/MultiSelect/multiselect.module.js

@@ -0,0 +1,19 @@
+"use client";
+//#region src/components/form/MultiSelect/multiselect.module.scss
+var e = "_root_1vf4u_2", t = "_fullWidth_1vf4u_9", n = "_trigger_1vf4u_13", r = "_disabled_1vf4u_30", i = "_open_1vf4u_38", a = "_value_1vf4u_46", o = "_placeholder_1vf4u_47", s = "_icon_1vf4u_50", c = "_list_1vf4u_70", l = "_option_1vf4u_84", u = "_active_1vf4u_84", d = "_selected_1vf4u_88", f = "_clear_1vf4u_99", p = {
+	root: e,
+	fullWidth: t,
+	trigger: n,
+	disabled: r,
+	open: i,
+	value: a,
+	placeholder: o,
+	icon: s,
+	list: c,
+	option: l,
+	active: u,
+	selected: d,
+	clear: f
+};
+//#endregion
+export { u as active, f as clear, p as default, r as disabled, t as fullWidth, s as icon, c as list, i as open, l as option, o as placeholder, e as root, d as selected, n as trigger, a as value };

package/dist/components/form/NumberInput/NumberInput.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.module.cjs"),r=require("../Input/Input.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,i.forwardRef)(({mode:e=`number`,hideSpinButton:i=!0,allowDecimal:s=!1,allowNegative:c=!1,onKeyDown:l,className:u,asChild:d=!1,children:f,...p},m)=>{let h=e===`number`?`number`:`text`,g=e===`text`?`numeric`:p.inputMode,_=e===`text`?`[0-9]*`:p.pattern,v=t=>{if(e===`number`){let e=[`e`,`E`];c||e.push(`-`,`+`),s||e.push(`.`),e.includes(t.key)&&t.preventDefault()}l?.(t)};return(0,o.jsx)(d?t.Root:r.Input,{...p,ref:m,type:h,inputMode:g,pattern:_,onKeyDown:v,className:(0,a.default)(`wim-number-input`,u),inputClassName:(0,a.default)(i&&n.default.hideSpin),children:d?(0,o.jsx)(t.Slottable,{children:f}):null})});s.displayName=`NumberInput`,exports.NumberInput=s,exports.default=s;

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

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { Input } from '../../form/Input/Input';
+export interface NumberInputProps extends React.ComponentPropsWithoutRef<typeof Input> {
+    /**
+     * 'number': uses the native type="number" (e.g. quantity steppers)
+     * 'text': uses type="text" + inputmode (e.g. card numbers or IDs where leading zeros must be kept)
+     */
+    mode?: "number" | "text";
+    /** Whether to hide the spin buttons */
+    hideSpinButton?: boolean;
+    /** Whether to allow decimal points (effective only when mode="number") */
+    allowDecimal?: boolean;
+    /** Whether to allow negative numbers (effective only when mode="number") */
+    allowNegative?: boolean;
+    /** Whether to render as a child element. */
+    asChild?: boolean;
+}
+/**
+ * Component specialized for numeric input.
+ */
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+export default NumberInput;

package/dist/components/form/NumberInput/NumberInput.js

@@ -0,0 +1,31 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import n from "../Input/input.module.js";
+import { Input as r } from "../Input/Input.js";
+import { forwardRef as i } from "react";
+import a from "classnames";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/form/NumberInput/NumberInput.tsx
+var s = i(({ mode: i = "number", hideSpinButton: s = !0, allowDecimal: c = !1, allowNegative: l = !1, onKeyDown: u, className: d, asChild: f = !1, children: p, ...m }, h) => {
+	let g = i === "number" ? "number" : "text", _ = i === "text" ? "numeric" : m.inputMode, v = i === "text" ? "[0-9]*" : m.pattern, y = (e) => {
+		if (i === "number") {
+			let t = ["e", "E"];
+			l || t.push("-", "+"), c || t.push("."), t.includes(e.key) && e.preventDefault();
+		}
+		u?.(e);
+	};
+	return /* @__PURE__ */ o(f ? e : r, {
+		...m,
+		ref: h,
+		type: g,
+		inputMode: _,
+		pattern: v,
+		onKeyDown: y,
+		className: a("wim-number-input", d),
+		inputClassName: a(s && n.hideSpin),
+		children: f ? /* @__PURE__ */ o(t, { children: p }) : null
+	});
+});
+s.displayName = "NumberInput";
+//#endregion
+export { s as NumberInput, s as default };

package/dist/components/form/OtpInput/OtpInput.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../FieldTemplate/FieldTemplate.cjs"),r=require("./otp-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,i.forwardRef)(({length:e=6,value:s=``,onChange:c,disabled:l=!1,error:u,required:d,label:f,layout:p,className:m,labels:h={},asChild:g=!1,fullWidth:_=!1,children:v,...y},b)=>{let{digitAriaLabel:x=e=>`Digit ${e}`}=h,[S,C]=(0,i.useState)(Array(e).fill(``)),[w,T]=(0,i.useState)(s),E=(0,i.useRef)([]),D=`wim-otp-input-${(0,i.useId)()}`,O=f?`${D}-label`:void 0,k=u?`${D}-error`:void 0;if(s!==w){T(s);let t=s.split(``).slice(0,e);C(Array(e).fill(``).map((e,n)=>t[n]||``))}let A=e=>{let t=e.join(``);c&&c(t)},j=(t,n)=>{let r=t.target.value.slice(-1),i=[...S];i[n]=r,C(i),A(i),r&&n<e-1&&E.current[n+1]?.focus()},M=(t,n)=>{if(t.key===`Backspace`){if(!S[n]&&n>0){let e=[...S];e[n-1]=``,C(e),A(e),E.current[n-1]?.focus()}else if(S[n]){let e=[...S];e[n]=``,C(e),A(e)}}else t.key===`ArrowLeft`&&n>0?(t.preventDefault(),E.current[n-1]?.focus()):t.key===`ArrowRight`&&n<e-1&&(t.preventDefault(),E.current[n+1]?.focus())},N=t=>{t.preventDefault();let n=t.clipboardData.getData(`text`).slice(0,e).split(``),r=[...S];n.forEach((t,n)=>{n<e&&(r[n]=t)}),C(r),A(r);let i=Math.min(n.length,e-1);E.current[i]?.focus()},P=g?t.Root:`div`;return(0,o.jsx)(n.FieldTemplate,{label:f,error:u,required:d,layout:p,labelId:O,htmlFor:D,errorId:k,className:(0,a.default)(m,_&&r.default.fullWidth),children:(0,o.jsxs)(P,{className:(0,a.default)(`wim-otp-input`,r.default.root,_&&r.default.fullWidth),ref:b,...y,children:[(0,o.jsx)(t.Slottable,{children:(0,o.jsx)(`div`,{className:(0,a.default)(r.default.container,l&&r.default.disabled),role:`group`,"aria-labelledby":O,"data-testid":`otp-input-container`,"data-disabled":l,children:Array.from({length:e}).map((e,t)=>(0,o.jsx)(`input`,{id:t===0?D:void 0,ref:e=>{E.current[t]=e},"data-testid":`otp-input`,className:(0,a.default)(r.default.input,u&&r.default.danger,l&&r.default.disabled),type:`text`,maxLength:1,value:S[t],onChange:e=>j(e,t),onKeyDown:e=>M(e,t),onPaste:N,disabled:l,"aria-label":x(t+1),"aria-invalid":u?`true`:`false`,"aria-describedby":k,"aria-required":d?`true`:void 0},t))})}),v]})})});s.displayName=`OtpInput`,exports.OtpInput=s,exports.default=s;

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

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+export type OtpInputLabels = {
+    digitAriaLabel?: (index: number) => string;
+};
+export interface OtpInputProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "value" | "defaultValue"> {
+    /** Number of digits */
+    length?: number;
+    /** Current value (controlled) */
+    value?: string;
+    /** Callback when the value changes */
+    onChange?: (value: string) => void;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Error message */
+    error?: string;
+    /** Whether to show the required indicator */
+    required?: boolean;
+    /** Field label */
+    label?: React.ReactNode;
+    /** Layout direction of label and field */
+    layout?: "vertical" | "horizontal";
+    /** Labels for internationalization */
+    labels?: OtpInputLabels;
+    /** Whether to render as a child element. */
+    asChild?: boolean;
+    /** Whether to take full width of parent */
+    fullWidth?: boolean;
+}
+/**
+ * Component for entering an OTP (one-time password).
+ */
+export declare const OtpInput: React.ForwardRefExoticComponent<OtpInputProps & React.RefAttributes<HTMLDivElement>>;
+export default OtpInput;

package/dist/components/form/OtpInput/OtpInput.js

@@ -0,0 +1,85 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { FieldTemplate as n } from "../FieldTemplate/FieldTemplate.js";
+import r from "./otp-input.module.js";
+import { forwardRef as i, useId as a, useRef 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/OtpInput/OtpInput.tsx
+var d = i(({ length: i = 6, value: d = "", onChange: f, disabled: p = !1, error: m, required: h, label: g, layout: _, className: v, labels: y = {}, asChild: b = !1, fullWidth: x = !1, children: S, ...C }, w) => {
+	let { digitAriaLabel: T = (e) => `Digit ${e}` } = y, [E, D] = s(Array(i).fill("")), [O, k] = s(d), A = o([]), j = `wim-otp-input-${a()}`, M = g ? `${j}-label` : void 0, N = m ? `${j}-error` : void 0;
+	if (d !== O) {
+		k(d);
+		let e = d.split("").slice(0, i);
+		D(Array(i).fill("").map((t, n) => e[n] || ""));
+	}
+	let P = (e) => {
+		let t = e.join("");
+		f && f(t);
+	}, F = (e, t) => {
+		let n = e.target.value.slice(-1), r = [...E];
+		r[t] = n, D(r), P(r), n && t < i - 1 && A.current[t + 1]?.focus();
+	}, I = (e, t) => {
+		if (e.key === "Backspace") {
+			if (!E[t] && t > 0) {
+				let e = [...E];
+				e[t - 1] = "", D(e), P(e), A.current[t - 1]?.focus();
+			} else if (E[t]) {
+				let e = [...E];
+				e[t] = "", D(e), P(e);
+			}
+		} else e.key === "ArrowLeft" && t > 0 ? (e.preventDefault(), A.current[t - 1]?.focus()) : e.key === "ArrowRight" && t < i - 1 && (e.preventDefault(), A.current[t + 1]?.focus());
+	}, L = (e) => {
+		e.preventDefault();
+		let t = e.clipboardData.getData("text").slice(0, i).split(""), n = [...E];
+		t.forEach((e, t) => {
+			t < i && (n[t] = e);
+		}), D(n), P(n);
+		let r = Math.min(t.length, i - 1);
+		A.current[r]?.focus();
+	}, R = b ? e : "div";
+	return /* @__PURE__ */ l(n, {
+		label: g,
+		error: m,
+		required: h,
+		layout: _,
+		labelId: M,
+		htmlFor: j,
+		errorId: N,
+		className: c(v, x && r.fullWidth),
+		children: /* @__PURE__ */ u(R, {
+			className: c("wim-otp-input", r.root, x && r.fullWidth),
+			ref: w,
+			...C,
+			children: [/* @__PURE__ */ l(t, { children: /* @__PURE__ */ l("div", {
+				className: c(r.container, p && r.disabled),
+				role: "group",
+				"aria-labelledby": M,
+				"data-testid": "otp-input-container",
+				"data-disabled": p,
+				children: Array.from({ length: i }).map((e, t) => /* @__PURE__ */ l("input", {
+					id: t === 0 ? j : void 0,
+					ref: (e) => {
+						A.current[t] = e;
+					},
+					"data-testid": "otp-input",
+					className: c(r.input, m && r.danger, p && r.disabled),
+					type: "text",
+					maxLength: 1,
+					value: E[t],
+					onChange: (e) => F(e, t),
+					onKeyDown: (e) => I(e, t),
+					onPaste: L,
+					disabled: p,
+					"aria-label": T(t + 1),
+					"aria-invalid": m ? "true" : "false",
+					"aria-describedby": N,
+					"aria-required": h ? "true" : void 0
+				}, t))
+			}) }), S]
+		})
+	});
+});
+d.displayName = "OtpInput";
+//#endregion
+export { d as OtpInput, d as default };

package/dist/components/form/OtpInput/otp-input.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1hgo4_17`,t=`_fullWidth_1hgo4_24`,n=`_container_1hgo4_27`,r=`_disabled_1hgo4_37`,i=`_input_1hgo4_40`,a=`_danger_1hgo4_8`,o={root:e,fullWidth:t,container:n,disabled:r,input:i,danger:a};exports.container=n,exports.danger=a,exports.default=o,exports.disabled=r,exports.fullWidth=t,exports.input=i,exports.root=e;

package/dist/components/form/OtpInput/otp-input.module.js

@@ -0,0 +1,12 @@
+"use client";
+//#region src/components/form/OtpInput/otp-input.module.scss
+var e = "_root_1hgo4_17", t = "_fullWidth_1hgo4_24", n = "_container_1hgo4_27", r = "_disabled_1hgo4_37", i = "_input_1hgo4_40", a = "_danger_1hgo4_8", o = {
+	root: e,
+	fullWidth: t,
+	container: n,
+	disabled: r,
+	input: i,
+	danger: a
+};
+//#endregion
+export { n as container, a as danger, o as default, r as disabled, t as fullWidth, i as input, e as root };

package/dist/components/form/PasswordInput/PasswordInput.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../Input/Input.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=e=>(0,i.jsx)(t.Input,{...e,type:`password`,showPasswordToggle:!0,className:(0,r.default)(`wim-password-input`,e.className)});exports.PasswordInput=a;

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { Input } from '../../form/Input/Input';
+type PasswordInputProps = React.ComponentProps<typeof Input>;
+/**
+ * パスワード入力に特化したコンポーネント。
+ * 表示/非表示の切り替え機能を内蔵しています。
+ */
+export declare const PasswordInput: (props: Omit<PasswordInputProps, "type" | "rightIcon" | "onRightIconClick" | "showPasswordToggle" | "placeholder">) => React.JSX.Element;
+export {};

package/dist/components/form/PasswordInput/PasswordInput.js

@@ -0,0 +1,14 @@
+"use client";
+import { Input as e } from "../Input/Input.js";
+import "react";
+import t from "classnames";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/form/PasswordInput/PasswordInput.tsx
+var r = (r) => /* @__PURE__ */ n(e, {
+	...r,
+	type: "password",
+	showPasswordToggle: !0,
+	className: t("wim-password-input", r.className)
+});
+//#endregion
+export { r as PasswordInput };

package/dist/components/form/PasswordStrength/PasswordStrength.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("./password-strength.module.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("classnames");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=e=>{if(!e)return 0;let t=0;return e.length>=8&&t++,/[A-Z]/.test(e)&&t++,/[0-9]/.test(e)&&t++,/[^A-Za-z0-9]/.test(e)&&t++,t},s=r.default.forwardRef(({password:e=``,score:r,showLabel:s=!0,calculateLevel:c=o,className:l,...u},d)=>{let{t:f}=t.useWimTranslation(`form`),p=r===void 0?c(e):r,m=(e=>{switch(e){case 0:return{intent:`danger`,label:f(`password_strength.very_weak`)};case 1:return{intent:`danger`,label:f(`password_strength.weak`)};case 2:return{intent:`warning`,label:f(`password_strength.fair`)};case 3:return{intent:`info`,label:f(`password_strength.strong`)};case 4:return{intent:`success`,label:f(`password_strength.very_strong`)};default:return{intent:`danger`,label:``}}})(p);return(0,a.jsxs)(`div`,{ref:d,className:(0,i.default)(`wim-password-strength`,n.default.root,l),...u,children:[(0,a.jsx)(`div`,{className:n.default.meter,children:[1,2,3,4].map(e=>(0,a.jsx)(`div`,{className:(0,i.default)(n.default.segment,{[n.default.active]:e<=p,[n.default[m.intent]]:e<=p})},e))}),s&&(e||r!==void 0)&&(0,a.jsx)(`div`,{className:(0,i.default)(n.default.label,n.default[m.intent]),children:m.label})]})});s.displayName=`PasswordStrength`,exports.PasswordStrength=s;

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

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export type PasswordStrengthLevel = 0 | 1 | 2 | 3 | 4;
+export interface PasswordStrengthProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Password string to evaluate */
+    password?: string;
+    /**
+     * Strength score (the default calculation is used when omitted)
+     * 0: very weak, 1: weak, 2: fair, 3: strong, 4: very strong
+     */
+    score?: PasswordStrengthLevel;
+    /** Whether to show the strength label */
+    showLabel?: boolean;
+    /** Custom strength calculation function */
+    calculateLevel?: (password: string) => PasswordStrengthLevel;
+}
+/**
+ * Component that visually indicates password strength.
+ */
+export declare const PasswordStrength: React.ForwardRefExoticComponent<PasswordStrengthProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/form/PasswordStrength/PasswordStrength.js

@@ -0,0 +1,64 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import t from "./password-strength.module.js";
+import n from "react";
+import r from "classnames";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/form/PasswordStrength/PasswordStrength.tsx
+var o = (e) => {
+	if (!e) return 0;
+	let t = 0;
+	return e.length >= 8 && t++, /[A-Z]/.test(e) && t++, /[0-9]/.test(e) && t++, /[^A-Za-z0-9]/.test(e) && t++, t;
+}, s = n.forwardRef(({ password: n = "", score: s, showLabel: c = !0, calculateLevel: l = o, className: u, ...d }, f) => {
+	let { t: p } = e("form"), m = s === void 0 ? l(n) : s, h = ((e) => {
+		switch (e) {
+			case 0: return {
+				intent: "danger",
+				label: p("password_strength.very_weak")
+			};
+			case 1: return {
+				intent: "danger",
+				label: p("password_strength.weak")
+			};
+			case 2: return {
+				intent: "warning",
+				label: p("password_strength.fair")
+			};
+			case 3: return {
+				intent: "info",
+				label: p("password_strength.strong")
+			};
+			case 4: return {
+				intent: "success",
+				label: p("password_strength.very_strong")
+			};
+			default: return {
+				intent: "danger",
+				label: ""
+			};
+		}
+	})(m);
+	return /* @__PURE__ */ a("div", {
+		ref: f,
+		className: r("wim-password-strength", t.root, u),
+		...d,
+		children: [/* @__PURE__ */ i("div", {
+			className: t.meter,
+			children: [
+				1,
+				2,
+				3,
+				4
+			].map((e) => /* @__PURE__ */ i("div", { className: r(t.segment, {
+				[t.active]: e <= m,
+				[t[h.intent]]: e <= m
+			}) }, e))
+		}), c && (n || s !== void 0) && /* @__PURE__ */ i("div", {
+			className: r(t.label, t[h.intent]),
+			children: h.label
+		})]
+	});
+});
+s.displayName = "PasswordStrength";
+//#endregion
+export { s as PasswordStrength };

package/dist/components/form/PasswordStrength/password-strength.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1u9t3_3`,t=`_meter_1u9t3_9`,n=`_segment_1u9t3_15`,r=`_active_1u9t3_22`,i=`_danger_1u9t3_22`,a=`_warning_1u9t3_25`,o=`_info_1u9t3_28`,s=`_success_1u9t3_31`,c=`_label_1u9t3_34`,l={root:e,meter:t,segment:n,active:r,danger:i,warning:a,info:o,success:s,label:c};exports.active=r,exports.danger=i,exports.default=l,exports.info=o,exports.label=c,exports.meter=t,exports.root=e,exports.segment=n,exports.success=s,exports.warning=a;

package/dist/components/form/PasswordStrength/password-strength.module.js

@@ -0,0 +1,15 @@
+"use client";
+//#region src/components/form/PasswordStrength/password-strength.module.scss
+var e = "_root_1u9t3_3", t = "_meter_1u9t3_9", n = "_segment_1u9t3_15", r = "_active_1u9t3_22", i = "_danger_1u9t3_22", a = "_warning_1u9t3_25", o = "_info_1u9t3_28", s = "_success_1u9t3_31", c = "_label_1u9t3_34", l = {
+	root: e,
+	meter: t,
+	segment: n,
+	active: r,
+	danger: i,
+	warning: a,
+	info: o,
+	success: s,
+	label: c
+};
+//#endregion
+export { r as active, i as danger, l as default, o as info, c as label, t as meter, e as root, n as segment, s as success, a as warning };

package/dist/components/form/PhoneInput/PhoneInput.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/Transition/Transition.cjs"),n=require("../../../icon/chevron-down.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../FieldTemplate/FieldTemplate.cjs"),a=require("./phone-input.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=[{code:`US`,name:`United States`,dialCode:`1`,flag:`🇺🇸`},{code:`JP`,name:`Japan`,dialCode:`81`,flag:`🇯🇵`},{code:`GB`,name:`United Kingdom`,dialCode:`44`,flag:`🇬🇧`},{code:`AU`,name:`Australia`,dialCode:`61`,flag:`🇦🇺`},{code:`DE`,name:`Germany`,dialCode:`49`,flag:`🇩🇪`},{code:`FR`,name:`France`,dialCode:`33`,flag:`🇫🇷`},{code:`CN`,name:`China`,dialCode:`86`,flag:`🇨🇳`},{code:`KR`,name:`South Korea`,dialCode:`82`,flag:`🇰🇷`},{code:`IN`,name:`India`,dialCode:`91`,flag:`🇮🇳`},{code:`BR`,name:`Brazil`,dialCode:`55`,flag:`🇧🇷`}],u=(0,o.forwardRef)(({value:e=``,onChange:u,countryCode:d=`US`,onCountryChange:f,placeholder:p=`000-0000-0000`,disabled:m=!1,error:h,required:g=!1,label:_,layout:v=`vertical`,className:y,fullWidth:b=!1,...x},S)=>{let C=`wim-phone-input-${(0,o.useId)()}`,w=_?`${C}-label`:void 0,T=h?`${C}-error`:void 0,[E,D]=(0,o.useState)(!1),O=(0,o.useRef)(null);(0,o.useEffect)(()=>{let e=e=>{O.current&&!O.current.contains(e.target)&&D(!1)};return E&&document.addEventListener(`mousedown`,e),()=>{document.removeEventListener(`mousedown`,e)}},[E]);let k=l.find(e=>e.code===d)??l[0],A=e=>{u?.(e.target.value)};return(0,c.jsx)(i.FieldTemplate,{label:_,labelId:w,htmlFor:C,required:g,error:h,errorId:T,layout:v,className:y,children:(0,c.jsxs)(`div`,{ref:O,className:(0,s.default)(`wim-phone-input`,a.default.root,b&&a.default.fullWidth,m&&a.default.disabled,h&&a.default.danger),"data-testid":`phone-input-root`,...x,children:[(0,c.jsxs)(`div`,{className:a.default.countryWrapper,children:[(0,c.jsxs)(`button`,{type:`button`,className:a.default.countryTrigger,onClick:()=>!m&&D(!E),disabled:m,"aria-haspopup":`listbox`,"aria-expanded":E,"aria-labelledby":w,"aria-label":_?void 0:`Select country`,children:[(0,c.jsx)(`span`,{"aria-hidden":`true`,style:{fontSize:`1.2em`},children:k.flag}),(0,c.jsxs)(`span`,{className:a.default.dialCode,children:[`+`,k.dialCode]}),(0,c.jsx)(r.Icon,{component:n.default,size:`sm`,className:(0,s.default)(a.default.chevron,E&&a.default.chevronOpen)})]}),(0,c.jsx)(t.Transition,{show:E,preset:`fade`,className:a.default.dropdown,children:(0,c.jsx)(`ul`,{className:a.default.countryList,role:`listbox`,children:l.map(e=>(0,c.jsxs)(`li`,{className:(0,s.default)(a.default.countryOption,k.code===e.code&&a.default.selected),onClick:()=>{f?.(e.code),D(!1)},onKeyDown:t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),f?.(e.code),D(!1))},tabIndex:0,role:`option`,"aria-selected":k.code===e.code,children:[(0,c.jsx)(`span`,{"aria-hidden":`true`,children:e.flag}),(0,c.jsx)(`span`,{className:a.default.countryName,children:e.name}),(0,c.jsxs)(`span`,{className:a.default.countryCode,children:[`+`,e.dialCode]})]},e.code))})})]}),(0,c.jsx)(`div`,{className:a.default.divider,"aria-hidden":`true`}),(0,c.jsx)(`input`,{id:C,ref:S,type:`tel`,value:e,onChange:A,placeholder:p,disabled:m,className:a.default.number,"aria-invalid":!!h,"aria-describedby":T})]})})});u.displayName=`PhoneInput`,exports.PHONE_COUNTRIES=l,exports.PhoneInput=u;