wimui 0.1.0

package/dist/components/form/Input/Input.js

@@ -0,0 +1,82 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { useWimTranslation as ee } from "../../../i18n/useWimTranslation.js";
+import { useMergedRef as n } from "../../../hooks/useMergedRef.js";
+import { InputBase as r } from "../InputBase/InputBase.js";
+import { FieldTemplate as i } from "../FieldTemplate/FieldTemplate.js";
+import a from "./input.module.js";
+import { forwardRef as o, useId as s, useRef as c, useState as l } from "react";
+import u from "classnames";
+import { jsx as d } from "react/jsx-runtime";
+//#region src/components/form/Input/Input.tsx
+var f = o(({ intent: o = "default", variant: f = "outline", fullWidth: te = !1, className: ne, disabled: re, leftIcon: ie, rightIcon: p, leftIconColor: m, rightIconColor: h, onLeftIconClick: ae, onRightIconClick: g, allowClear: _ = !1, showPasswordToggle: v = !0, rightIconClassName: y, rightIconRotated: oe, width: se, value: b, defaultValue: x, onChange: S, type: C, label: w, error: T, required: E, layout: D, id: O, inputClassName: k, showPasswordAriaLabel: A, hidePasswordAriaLabel: j, rightIconAriaLabel: M, styles: N, asChild: P = !1, children: F, ...I }, L) => {
+	let { t: R } = ee("common"), z = A ?? R("a11y.show_password"), ce = j ?? R("a11y.hide_password"), B = M ?? R("a11y.right_icon_action"), [V, H] = l(x ?? ""), [U, W] = l(!1), G = c(null), le = n(L, G), K = b !== void 0, q = K ? b : V, J = re, ue = (e) => {
+		K || H(e.target.value), S?.(e);
+	}, de = () => {
+		let e = G.current;
+		if (!e) return;
+		let t = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+		t ? (t.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 }))) : (K || H(""), S && (e.value = "", S({
+			target: e,
+			currentTarget: e
+		}))), K || H("");
+	}, fe = () => {
+		W((e) => !e);
+	}, pe = C === "password" && v, Y = [];
+	pe && Y.push({
+		name: U ? "EyeOffIcon" : "EyeIcon",
+		onClick: (e) => fe(),
+		ariaLabel: U ? ce : z
+	}), p && (Y.some((e) => e.name === p) || Y.push({
+		name: p,
+		onClick: g,
+		color: h,
+		ariaLabel: B,
+		className: y,
+		rotated: oe
+	}));
+	let me = C === "password" && U ? "text" : C, X = T ? "danger" : o, he = s(), Z = O || `wim-input-${he}`, Q = T ? `${Z}-error` : void 0, $ = w ? `${Z}-label` : void 0;
+	return /* @__PURE__ */ d(i, {
+		label: w,
+		error: T,
+		required: E,
+		layout: D,
+		labelId: $,
+		htmlFor: Z,
+		errorId: Q,
+		className: ne,
+		children: /* @__PURE__ */ d(r, {
+			intent: X,
+			variant: f,
+			fullWidth: te,
+			width: se,
+			disabled: J,
+			leftIcon: ie,
+			leftIconColor: m,
+			onLeftIconClick: ae,
+			rightIcons: Y,
+			allowClear: _,
+			hasValue: !!q,
+			onClear: de,
+			styles: N,
+			children: /* @__PURE__ */ d(P ? e : "input", {
+				id: Z,
+				ref: le,
+				className: u("wim-input", a.root, a[X], J && a.disabled, a[f], k),
+				disabled: J,
+				value: q,
+				onChange: ue,
+				type: me,
+				"aria-invalid": X === "danger",
+				"aria-describedby": Q,
+				"aria-labelledby": w ? $ : void 0,
+				"aria-required": E,
+				...I,
+				children: P ? /* @__PURE__ */ d(t, { children: F }) : null
+			})
+		})
+	});
+});
+f.displayName = "Input";
+//#endregion
+export { f as Input, f as default };

package/dist/components/form/Input/input.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1tq2p_15`,t=`_outline_1tq2p_42`,n=`_ghost_1tq2p_45`,r=`_danger_1tq2p_6`,i=`_disabled_1tq2p_58`,a=`_hideSpin_1tq2p_71`,o={root:e,outline:t,ghost:n,danger:r,disabled:i,hideSpin:a};exports.danger=r,exports.default=o,exports.disabled=i,exports.ghost=n,exports.hideSpin=a,exports.outline=t,exports.root=e;

package/dist/components/form/Input/input.module.js

@@ -0,0 +1,12 @@
+"use client";
+//#region src/components/form/Input/input.module.scss
+var e = "_root_1tq2p_15", t = "_outline_1tq2p_42", n = "_ghost_1tq2p_45", r = "_danger_1tq2p_6", i = "_disabled_1tq2p_58", a = "_hideSpin_1tq2p_71", o = {
+	root: e,
+	outline: t,
+	ghost: n,
+	danger: r,
+	disabled: i,
+	hideSpin: a
+};
+//#endregion
+export { r as danger, o as default, i as disabled, n as ghost, a as hideSpin, t as outline, e as root };

package/dist/components/form/InputBase/InputBase.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../media/Icon/Icon.cjs"),r=require("./input-base.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=({children:e,intent:s=`default`,variant:c=`outline`,fullWidth:l=!1,width:u,className:d,disabled:f,leftIcon:p,leftIconColor:m,onLeftIconClick:h,leftIconAriaLabel:g,rightIcons:_=[],allowClear:v,hasValue:y,onClear:b,clearAriaLabel:x,styles:S})=>{let{t:C}=t.useWimTranslation(`common`),w=g??C(`a11y.left_icon_action`),T=x??C(`a11y.clear_input`),E=typeof u==`string`&&[`xs`,`sm`,`md`,`lg`,`xl`].includes(u),D=i.default.Children.map(e,e=>i.default.isValidElement(e)?i.default.cloneElement(e,{disabled:f?!0:e.props.disabled,className:(0,a.default)(e.props.className,r.default.inner,S?.inner)}):e),O=u!==void 0&&!E&&!l,k=E&&!l?u:void 0,A=e=>f?`disabled`:e||(s===`danger`?`danger`:s===`warning`?`warning`:s===`success`?`success`:`secondary`),j=[..._];v&&y&&!f&&j.push({name:`CloseIcon`,onClick:e=>{e.stopPropagation(),b?.()},ariaLabel:T});let M=k?r.default[`width${k.charAt(0).toUpperCase()}${k.slice(1)}`]:void 0;return(0,o.jsxs)(`div`,{className:(0,a.default)(`wim-input-base`,r.default.root,s&&r.default[s],f&&r.default.disabled,r.default[c],l&&r.default.fullWidth,O&&r.default.hasCustomWidth,M,p&&r.default.hasLeftIcon,(j.length>0||v)&&r.default.hasRightIcon,(j.length>=2||_.length>=1&&v)&&r.default.hasMultipleRightIcons,d,S?.root),style:O?{"--wim-input-width":typeof u==`number`?`${u}px`:u}:void 0,children:[p&&(0,o.jsx)(`div`,{className:(0,a.default)(r.default.icon,r.default.left,h&&r.default.clickable,S?.icon),children:h?(0,o.jsx)(`button`,{type:`button`,onClick:h,className:(0,a.default)(r.default.iconButton,S?.iconButton),"aria-label":w,children:(0,o.jsx)(n.Icon,{name:p,size:`md`,color:A(m)})}):(0,o.jsx)(n.Icon,{name:p,size:`md`,color:A(m)})}),D,j.length>0&&(0,o.jsx)(`div`,{className:(0,a.default)(r.default.icons,r.default.right,S?.icons),children:j.map((e,t)=>(0,o.jsx)(`div`,{className:(0,a.default)(r.default.iconItem,e.onClick&&r.default.clickable,e.rotated&&r.default.rotated,e.className,S?.iconItem),children:e.onClick?(0,o.jsx)(`button`,{type:`button`,onClick:e.onClick,className:(0,a.default)(r.default.iconButton,S?.iconButton),"aria-label":e.ariaLabel??C(`a11y.right_icon_action`),children:(0,o.jsx)(n.Icon,{name:e.name,size:`md`,color:A(e.color)})}):(0,o.jsx)(n.Icon,{name:e.name,size:`md`,color:A(e.color)})},`${e.name}-${t}`))})]})};exports.InputBase=s;

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

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+import { Icon } from '../../media/Icon/Icon';
+import { WimIntent, FieldIntent, FieldWidth, FieldVariant } from '../../../types/tokens';
+export type InputBaseIcon = {
+    name: React.ComponentProps<typeof Icon>["name"];
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    color?: React.ComponentProps<typeof Icon>["color"];
+    ariaLabel?: string;
+    className?: string;
+    /** Whether the icon should be rotated 180deg */
+    rotated?: boolean;
+};
+export type InputBaseProps = {
+    /** Inner form control element(s) wrapped by the shell */
+    children: React.ReactNode;
+    /** Semantic intent of the field (e.g. error state) */
+    intent?: FieldIntent | WimIntent;
+    /** Visual style variant of the field */
+    variant?: FieldVariant;
+    /** Whether to take full width of parent */
+    fullWidth?: boolean;
+    /** Fixed width of the field (width token, CSS value, or number in px) */
+    width?: FieldWidth | string | number;
+    /** Additional class names */
+    className?: string;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Icon name to display on the left side */
+    leftIcon?: React.ComponentProps<typeof Icon>["name"];
+    /** Color of the left icon */
+    leftIconColor?: React.ComponentProps<typeof Icon>["color"];
+    /** Callback when the left icon is clicked (renders the icon as a button) */
+    onLeftIconClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Aria label for the left icon button */
+    leftIconAriaLabel?: string;
+    /** Icons to display on the right side */
+    rightIcons?: InputBaseIcon[];
+    /** Whether to show a clear button when value is present */
+    allowClear?: boolean;
+    /** Whether the field currently has a value (controls clear button visibility) */
+    hasValue?: boolean;
+    /** Callback when the clear button is clicked */
+    onClear?: () => void;
+    /** Aria label for the clear button */
+    clearAriaLabel?: string;
+    /** Custom styles for internal parts */
+    styles?: {
+        root?: string;
+        inner?: string;
+        icon?: string;
+        icons?: string;
+        iconItem?: string;
+        iconButton?: string;
+    };
+};
+/**
+ * フォーム入力コンポーネント（Input, SearchInput, Select等）の外殻となる共用語コンポーネント。
+ * prefix/suffix（アイコン）や clearable（クリアボタン）の配置とレイアウトを統一します。
+ */
+export declare const InputBase: ({ children, intent, variant, fullWidth, width, className, disabled: isDisabled, leftIcon, leftIconColor, onLeftIconClick, leftIconAriaLabel, rightIcons, allowClear, hasValue, onClear, clearAriaLabel, styles: stylesProp, }: InputBaseProps) => React.JSX.Element;

package/dist/components/form/InputBase/InputBase.js

@@ -0,0 +1,76 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import { Icon as t } from "../../media/Icon/Icon.js";
+import n from "./input-base.module.js";
+import r from "react";
+import i from "classnames";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/form/InputBase/InputBase.tsx
+var s = ({ children: s, intent: c = "default", variant: l = "outline", fullWidth: u = !1, width: d, className: f, disabled: p, leftIcon: m, leftIconColor: h, onLeftIconClick: g, leftIconAriaLabel: _, rightIcons: v = [], allowClear: y, hasValue: b, onClear: x, clearAriaLabel: S, styles: C }) => {
+	let { t: w } = e("common"), T = _ ?? w("a11y.left_icon_action"), E = S ?? w("a11y.clear_input"), D = typeof d == "string" && [
+		"xs",
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	].includes(d), O = r.Children.map(s, (e) => r.isValidElement(e) ? r.cloneElement(e, {
+		disabled: p ? !0 : e.props.disabled,
+		className: i(e.props.className, n.inner, C?.inner)
+	}) : e), k = d !== void 0 && !D && !u, A = D && !u ? d : void 0, j = (e) => p ? "disabled" : e || (c === "danger" ? "danger" : c === "warning" ? "warning" : c === "success" ? "success" : "secondary"), M = [...v];
+	y && b && !p && M.push({
+		name: "CloseIcon",
+		onClick: (e) => {
+			e.stopPropagation(), x?.();
+		},
+		ariaLabel: E
+	});
+	let N = A ? n[`width${A.charAt(0).toUpperCase()}${A.slice(1)}`] : void 0;
+	return /* @__PURE__ */ o("div", {
+		className: i("wim-input-base", n.root, c && n[c], p && n.disabled, n[l], u && n.fullWidth, k && n.hasCustomWidth, N, m && n.hasLeftIcon, (M.length > 0 || y) && n.hasRightIcon, (M.length >= 2 || v.length >= 1 && y) && n.hasMultipleRightIcons, f, C?.root),
+		style: k ? { "--wim-input-width": typeof d == "number" ? `${d}px` : d } : void 0,
+		children: [
+			m && /* @__PURE__ */ a("div", {
+				className: i(n.icon, n.left, g && n.clickable, C?.icon),
+				children: g ? /* @__PURE__ */ a("button", {
+					type: "button",
+					onClick: g,
+					className: i(n.iconButton, C?.iconButton),
+					"aria-label": T,
+					children: /* @__PURE__ */ a(t, {
+						name: m,
+						size: "md",
+						color: j(h)
+					})
+				}) : /* @__PURE__ */ a(t, {
+					name: m,
+					size: "md",
+					color: j(h)
+				})
+			}),
+			O,
+			M.length > 0 && /* @__PURE__ */ a("div", {
+				className: i(n.icons, n.right, C?.icons),
+				children: M.map((e, r) => /* @__PURE__ */ a("div", {
+					className: i(n.iconItem, e.onClick && n.clickable, e.rotated && n.rotated, e.className, C?.iconItem),
+					children: e.onClick ? /* @__PURE__ */ a("button", {
+						type: "button",
+						onClick: e.onClick,
+						className: i(n.iconButton, C?.iconButton),
+						"aria-label": e.ariaLabel ?? w("a11y.right_icon_action"),
+						children: /* @__PURE__ */ a(t, {
+							name: e.name,
+							size: "md",
+							color: j(e.color)
+						})
+					}) : /* @__PURE__ */ a(t, {
+						name: e.name,
+						size: "md",
+						color: j(e.color)
+					})
+				}, `${e.name}-${r}`))
+			})
+		]
+	});
+};
+//#endregion
+export { s as InputBase };

package/dist/components/form/InputBase/index.d.ts

@@ -0,0 +1 @@
+export * from './InputBase';

package/dist/components/form/InputBase/input-base.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_m3clw_16`,t=`_ghost_m3clw_32`,n=`_disabled_m3clw_36`,r=`_icon_m3clw_45`,i=`_iconItem_m3clw_45`,a=`_danger_m3clw_7`,o=`_warning_m3clw_61`,s=`_success_m3clw_64`,c=`_hasLeftIcon_m3clw_83`,l=`_hasRightIcon_m3clw_86`,u=`_hasMultipleRightIcons_m3clw_89`,d=`_widthXs_m3clw_92`,f=`_widthSm_m3clw_95`,p=`_widthMd_m3clw_98`,m=`_widthLg_m3clw_101`,h=`_widthXl_m3clw_104`,g=`_hasCustomWidth_m3clw_107`,_=`_fullWidth_m3clw_112`,v=`_clickable_m3clw_128`,y=`_left_m3clw_131`,b=`_icons_m3clw_134`,x=`_right_m3clw_145`,S=`_rotated_m3clw_157`,C=`_iconButton_m3clw_160`,w=`_inner_m3clw_178`,T={root:e,ghost:t,disabled:n,icon:r,iconItem:i,danger:a,warning:o,success:s,hasLeftIcon:c,hasRightIcon:l,hasMultipleRightIcons:u,widthXs:d,widthSm:f,widthMd:p,widthLg:m,widthXl:h,hasCustomWidth:g,fullWidth:_,clickable:v,left:y,icons:b,right:x,rotated:S,iconButton:C,inner:w};exports.clickable=v,exports.danger=a,exports.default=T,exports.disabled=n,exports.fullWidth=_,exports.ghost=t,exports.hasCustomWidth=g,exports.hasLeftIcon=c,exports.hasMultipleRightIcons=u,exports.hasRightIcon=l,exports.icon=r,exports.iconButton=C,exports.iconItem=i,exports.icons=b,exports.inner=w,exports.left=y,exports.right=x,exports.root=e,exports.rotated=S,exports.success=s,exports.warning=o,exports.widthLg=m,exports.widthMd=p,exports.widthSm=f,exports.widthXl=h,exports.widthXs=d;

package/dist/components/form/InputBase/input-base.module.js

@@ -0,0 +1,31 @@
+"use client";
+//#region src/components/form/InputBase/input-base.module.scss
+var e = "_root_m3clw_16", t = "_ghost_m3clw_32", n = "_disabled_m3clw_36", r = "_icon_m3clw_45", i = "_iconItem_m3clw_45", a = "_danger_m3clw_7", o = "_warning_m3clw_61", s = "_success_m3clw_64", c = "_hasLeftIcon_m3clw_83", l = "_hasRightIcon_m3clw_86", u = "_hasMultipleRightIcons_m3clw_89", d = "_widthXs_m3clw_92", f = "_widthSm_m3clw_95", p = "_widthMd_m3clw_98", m = "_widthLg_m3clw_101", h = "_widthXl_m3clw_104", g = "_hasCustomWidth_m3clw_107", _ = "_fullWidth_m3clw_112", v = "_clickable_m3clw_128", y = "_left_m3clw_131", b = "_icons_m3clw_134", x = "_right_m3clw_145", S = "_rotated_m3clw_157", C = "_iconButton_m3clw_160", w = "_inner_m3clw_178", T = {
+	root: e,
+	ghost: t,
+	disabled: n,
+	icon: r,
+	iconItem: i,
+	danger: a,
+	warning: o,
+	success: s,
+	hasLeftIcon: c,
+	hasRightIcon: l,
+	hasMultipleRightIcons: u,
+	widthXs: d,
+	widthSm: f,
+	widthMd: p,
+	widthLg: m,
+	widthXl: h,
+	hasCustomWidth: g,
+	fullWidth: _,
+	clickable: v,
+	left: y,
+	icons: b,
+	right: x,
+	rotated: S,
+	iconButton: C,
+	inner: w
+};
+//#endregion
+export { v as clickable, a as danger, T as default, n as disabled, _ as fullWidth, t as ghost, g as hasCustomWidth, c as hasLeftIcon, u as hasMultipleRightIcons, l as hasRightIcon, r as icon, C as iconButton, i as iconItem, b as icons, w as inner, y as left, x as right, e as root, S as rotated, s as success, o as warning, m as widthLg, p as widthMd, f as widthSm, h as widthXl, d as widthXs };

package/dist/components/form/InputGroup/InputGroup.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./input-group.module.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=({children:e,fullWidth:n=!1,className:a})=>(0,i.jsx)(`div`,{className:(0,r.default)(`wim-input-group`,t.default.root,n&&t.default.fullWidth,a),children:e}),o=({children:e,className:n})=>(0,i.jsx)(`span`,{className:(0,r.default)(t.default.text,n),children:e});exports.InputGroup=a,exports.InputGroupText=o;

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

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+type InputGroupProps = {
+    /** Inputs, buttons, and add-ons to combine into one unit */
+    children: React.ReactNode;
+    /** Whether to take full width of parent */
+    fullWidth?: boolean;
+    /** Additional class names */
+    className?: string;
+};
+/**
+ * Component that combines multiple inputs, buttons, and text into a single unit.
+ */
+export declare const InputGroup: ({ children, fullWidth, className, }: InputGroupProps) => React.JSX.Element;
+type InputGroupTextProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+/**
+ * InputGroup内でテキストやアイコンを表示するためのアドオンコンポーネント。
+ */
+export declare const InputGroupText: ({ children, className, }: InputGroupTextProps) => React.JSX.Element;
+export {};

package/dist/components/form/InputGroup/InputGroup.js

@@ -0,0 +1,15 @@
+"use client";
+import e from "./input-group.module.js";
+import "react";
+import t from "classnames";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/form/InputGroup/InputGroup.tsx
+var r = ({ children: r, fullWidth: i = !1, className: a }) => /* @__PURE__ */ n("div", {
+	className: t("wim-input-group", e.root, i && e.fullWidth, a),
+	children: r
+}), i = ({ children: r, className: i }) => /* @__PURE__ */ n("span", {
+	className: t(e.text, i),
+	children: r
+});
+//#endregion
+export { r as InputGroup, i as InputGroupText };

package/dist/components/form/InputGroup/input-group.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1rz05_2`,t=`_fullWidth_1rz05_8`,n=`_text_1rz05_40`,r={root:e,fullWidth:t,text:n};exports.default=r,exports.fullWidth=t,exports.root=e,exports.text=n;

package/dist/components/form/InputGroup/input-group.module.js

@@ -0,0 +1,9 @@
+"use client";
+//#region src/components/form/InputGroup/input-group.module.scss
+var e = "_root_1rz05_2", t = "_fullWidth_1rz05_8", n = "_text_1rz05_40", r = {
+	root: e,
+	fullWidth: t,
+	text: n
+};
+//#endregion
+export { r as default, t as fullWidth, e as root, n as text };

package/dist/components/form/InputMask/InputMask.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../Input/Input.cjs"),n=require("./input-mask.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=({mask:e,maskChar:o=`_`,value:s,defaultValue:c,onChange:l,...u})=>{let[d,f]=(0,r.useState)(c||``),p=s!==void 0,m=p?s:d,h=(0,r.useCallback)(t=>{let n=``,r=0,i=t.replace(/[^a-zA-Z0-9]/g,``),a=0;for(;r<e.length;){let t=e[r];if(t===`9`||t===`a`||t===`*`)if(a<i.length){let e=i[a];if(t===`9`&&/[0-9]/.test(e)||t===`a`&&/[a-zA-Z]/.test(e)||t===`*`)n+=e,a++;else break}else break;else n+=t;r++}return n},[e]),g=e=>{let t=h(e.target.value);p||f(t),l&&l({...e,target:{...e.target,value:t},currentTarget:{...e.currentTarget,value:t}})};return(0,a.jsx)(t.Input,{...u,className:(0,i.default)(`wim-input-mask`,n.default.root,u.className),value:m,onChange:g,placeholder:u.placeholder||e.replace(/[9a*]/g,o)})};exports.InputMask=o;

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

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { Input } from '../../form/Input/Input';
+type InputMaskProps = React.ComponentProps<typeof Input> & {
+    /** Mask pattern ('9': digit, 'a': letter, '*': alphanumeric; other characters are shown as-is) */
+    mask: string;
+    /** Placeholder character for unfilled mask positions */
+    maskChar?: string;
+};
+/**
+ * Masked input component that enforces a specific input format.
+ * '9': digit (0-9)
+ * 'a': letter (a-z, A-Z)
+ * '*': alphanumeric
+ * Other characters are shown as-is.
+ */
+export declare const InputMask: ({ mask, maskChar, value, defaultValue, onChange, ...props }: InputMaskProps) => React.JSX.Element;
+export {};

package/dist/components/form/InputMask/InputMask.js

@@ -0,0 +1,45 @@
+"use client";
+import { Input as e } from "../Input/Input.js";
+import t from "./input-mask.module.js";
+import { useCallback as n, useState as r } from "react";
+import i from "classnames";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/form/InputMask/InputMask.tsx
+var o = ({ mask: o, maskChar: s = "_", value: c, defaultValue: l, onChange: u, ...d }) => {
+	let [f, p] = r(l || ""), m = c !== void 0, h = m ? c : f, g = n((e) => {
+		let t = "", n = 0, r = e.replace(/[^a-zA-Z0-9]/g, ""), i = 0;
+		for (; n < o.length;) {
+			let e = o[n];
+			if (e === "9" || e === "a" || e === "*") if (i < r.length) {
+				let n = r[i];
+				if (e === "9" && /[0-9]/.test(n) || e === "a" && /[a-zA-Z]/.test(n) || e === "*") t += n, i++;
+				else break;
+			} else break;
+			else t += e;
+			n++;
+		}
+		return t;
+	}, [o]), _ = (e) => {
+		let t = g(e.target.value);
+		m || p(t), u && u({
+			...e,
+			target: {
+				...e.target,
+				value: t
+			},
+			currentTarget: {
+				...e.currentTarget,
+				value: t
+			}
+		});
+	};
+	return /* @__PURE__ */ a(e, {
+		...d,
+		className: i("wim-input-mask", t.root, d.className),
+		value: h,
+		onChange: _,
+		placeholder: d.placeholder || o.replace(/[9a*]/g, s)
+	});
+};
+//#endregion
+export { o as InputMask };

package/dist/components/form/InputMask/input-mask.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1vwch_2`,t={root:e};exports.default=t,exports.root=e;

package/dist/components/form/InputMask/input-mask.module.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/form/InputMask/input-mask.module.scss
+var e = "_root_1vwch_2", t = { root: e };
+//#endregion
+export { t as default, e as root };

package/dist/components/form/LinkButton/LinkButton.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("../../../utilities/style-utils.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../Button/button.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(({asChild:e=!1,children:a,icon:c,iconPosition:l=`left`,size:u=`md`,variant:d=`outline`,intent:f=`default`,backgroundColor:p,justify:m=`center`,fullWidth:h=!1,className:g,style:_,"aria-label":v,...y},b)=>{let x=m===`start`?`flex-start`:m===`end`?`flex-end`:m===`between`?`space-between`:m,S=c?typeof c==`string`?(0,s.jsx)(r.Icon,{name:c,size:u}):c:null,C=p?{backgroundColor:n.getColorValue(p)}:{};return(0,s.jsxs)(e?t.Root:`a`,{ref:b,className:(0,o.default)(`wim-link-button`,i.default.root,i.default[u],i.default[d],i.default[f],!a&&!!c&&i.default.iconOnly,h&&i.default.fullWidth,g),style:{justifyContent:x,...C,..._},"aria-label":v,...y,children:[e&&S&&l===`left`?S:null,e?(0,s.jsx)(t.Slottable,{children:a}):(0,s.jsxs)(`span`,{className:i.default.content,children:[S&&l===`left`&&S,a,S&&l===`right`&&S]}),e&&S&&l===`right`?S:null]})});c.displayName=`LinkButton`,exports.LinkButton=c;

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

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { ButtonProps } from '../../form/Button/Button';
+import { ComponentSizeBasic, ButtonVariant, ButtonIntent } from '../../../types/tokens';
+export type LinkButtonProps = React.ComponentPropsWithoutRef<"a"> & Omit<ButtonProps, "onClick" | "type"> & {
+    /** Position of the icon relative to the label */
+    iconPosition?: "left" | "right";
+    /** Size of the button */
+    size?: ComponentSizeBasic;
+    /** Visual style variant of the button */
+    variant?: ButtonVariant;
+    /** Design intent of the button (visual / semantic state). Unrelated to the ARIA role attribute. */
+    intent?: ButtonIntent;
+    /** Horizontal alignment of the button content */
+    justify?: "start" | "center" | "end" | "between";
+    /** Whether the button should take up the full width of its container */
+    fullWidth?: boolean;
+};
+/**
+ * Anchor (link) component that looks like a button.
+ */
+export declare const LinkButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & Omit<ButtonProps, "onClick" | "type"> & {
+    /** Position of the icon relative to the label */
+    iconPosition?: "left" | "right";
+    /** Size of the button */
+    size?: ComponentSizeBasic;
+    /** Visual style variant of the button */
+    variant?: ButtonVariant;
+    /** Design intent of the button (visual / semantic state). Unrelated to the ARIA role attribute. */
+    intent?: ButtonIntent;
+    /** Horizontal alignment of the button content */
+    justify?: "start" | "center" | "end" | "between";
+    /** Whether the button should take up the full width of its container */
+    fullWidth?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/form/LinkButton/LinkButton.js

@@ -0,0 +1,41 @@
+"use client";
+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 { Icon as r } from "../../media/Icon/Icon.js";
+import i from "../Button/button.module.js";
+import a from "react";
+import o from "classnames";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/form/LinkButton/LinkButton.tsx
+var l = a.forwardRef(({ asChild: a = !1, children: l, icon: u, iconPosition: d = "left", size: f = "md", variant: p = "outline", intent: m = "default", backgroundColor: h, justify: g = "center", fullWidth: _ = !1, className: v, style: y, "aria-label": b, ...x }, S) => {
+	let C = g === "start" ? "flex-start" : g === "end" ? "flex-end" : g === "between" ? "space-between" : g, w = u ? typeof u == "string" ? /* @__PURE__ */ s(r, {
+		name: u,
+		size: f
+	}) : u : null, T = h ? { backgroundColor: n(h) } : {};
+	return /* @__PURE__ */ c(a ? e : "a", {
+		ref: S,
+		className: o("wim-link-button", i.root, i[f], i[p], i[m], !l && !!u && i.iconOnly, _ && i.fullWidth, v),
+		style: {
+			justifyContent: C,
+			...T,
+			...y
+		},
+		"aria-label": b,
+		...x,
+		children: [
+			a && w && d === "left" ? w : null,
+			a ? /* @__PURE__ */ s(t, { children: l }) : /* @__PURE__ */ c("span", {
+				className: i.content,
+				children: [
+					w && d === "left" && w,
+					l,
+					w && d === "right" && w
+				]
+			}),
+			a && w && d === "right" ? w : null
+		]
+	});
+});
+l.displayName = "LinkButton";
+//#endregion
+export { l as LinkButton };

package/dist/components/form/Mentions/Mentions.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("../../_internal/BaseListItem/BaseListItem.cjs"),r=require("../../_internal/mergeRefs.cjs"),i=require("../Textarea/Textarea.cjs"),a=require("./mentions.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=(0,o.forwardRef)(({options:e,trigger:c=`@`,value:l,defaultValue:u,onChange:d,onSelect:f,asChild:p=!1,children:m,intent:h,variant:g,fullWidth:_,fieldSizing:v,label:y,error:b,required:x,layout:S,width:C,placeholder:w,rows:T,cols:E,onCopy:D,onCut:O,onPaste:ee,...k},A)=>{let j=(0,o.useId)(),M=k.id||`wim-mentions-${j}`,[N,P]=(0,o.useState)(u||``),F=l!==void 0,I=F?l:N,[L,R]=(0,o.useState)(!1),[z,B]=(0,o.useState)(``),[V,H]=(0,o.useState)(0),[U,W]=(0,o.useState)(-1),[G,K]=(0,o.useState)(0),q=(0,o.useRef)(null),J=(0,o.useRef)(null),Y=r.mergeRefs(J,A),X=e.filter(e=>e.display.toLowerCase().includes(z.toLowerCase())),Z=e=>{let t=e.target.value,n=e.target.selectionStart;H(n),F||P(t),d&&d(e);let r=t.slice(0,n),i=r.lastIndexOf(c);if(i!==-1){let e=r.slice(i+c.length);if(!e.includes(` `)){W(i),B(e),R(!0),K(0);return}}R(!1),W(-1)},Q=e=>{let t=I.slice(0,U),n=I.slice(V),r=`${t}${c}${e.display} ${n}`;F||P(r),d&&d({target:{value:r}}),f&&f(e),R(!1),W(-1),setTimeout(()=>{if(q.current){q.current.focus();let n=t.length+c.length+e.display.length+1;q.current.setSelectionRange(n,n)}},0)},te=e=>{L&&X.length>0&&(e.key===`ArrowDown`?(e.preventDefault(),K(e=>e>=X.length-1?0:e+1)):e.key===`ArrowUp`?(e.preventDefault(),K(e=>e<=0?X.length-1:e-1)):e.key===`Enter`||e.key===`Tab`?G>=0&&X[G]&&(e.preventDefault(),Q(X[G])):e.key===`Escape`&&R(!1))},ne=p?t.Root:`div`,$={intent:h,variant:g,fullWidth:_,fieldSizing:v,label:y,error:b,required:x,layout:S,width:C,placeholder:w,rows:T,cols:E,onCopy:D,onCut:O,onPaste:ee},re=p?{...$,...k}:k;return(0,s.jsxs)(ne,{className:`wim-mentions ${a.default.container}`,ref:Y,...re,children:[(0,s.jsxs)(t.Slottable,{children:[(0,s.jsx)(i.Textarea,{...k,...$,ref:q,value:I,onChange:Z,onKeyDown:te,"aria-autocomplete":`list`,"aria-controls":L?`${M}-list`:void 0,onBlur:e=>{J.current?.contains(e.relatedTarget)||R(!1)}}),L&&X.length>0&&(0,s.jsx)(`div`,{id:`${M}-list`,className:a.default.list,role:`listbox`,children:X.map((e,t)=>(0,s.jsx)(n.BaseListItem,{className:a.default.item,active:t===G,onMouseDown:e=>e.preventDefault(),onClick:()=>Q(e),onMouseEnter:()=>K(t),role:`option`,"aria-selected":t===G,tabIndex:-1,children:e.display},e.id))})]}),p?m:null]})});c.displayName=`Mentions`,exports.Mentions=c,exports.default=c;

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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { Textarea } from '../../form/Textarea/Textarea';
+type MentionOption = {
+    id: string | number;
+    display: string;
+};
+export interface MentionsProps extends Omit<React.ComponentPropsWithoutRef<typeof Textarea>, "onSelect"> {
+    /** Mention candidates to suggest */
+    options: MentionOption[];
+    /** Character that triggers the suggestion list */
+    trigger?: string;
+    /** Callback when a suggestion is selected */
+    onSelect?: (option: MentionOption) => void;
+    /** Whether to render as a child element. */
+    asChild?: boolean;
+}
+/**
+ * Component that shows selectable suggestions while typing, triggered by a specific character (e.g. @).
+ */
+export declare const Mentions: React.ForwardRefExoticComponent<MentionsProps & React.RefAttributes<HTMLDivElement>>;
+export default Mentions;

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

@@ -0,0 +1,90 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { BaseListItem as n } from "../../_internal/BaseListItem/BaseListItem.js";
+import { mergeRefs as r } from "../../_internal/mergeRefs.js";
+import { Textarea as i } from "../Textarea/Textarea.js";
+import a from "./mentions.module.js";
+import { forwardRef as o, useId as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/form/Mentions/Mentions.tsx
+var f = o(({ options: o, trigger: f = "@", value: p, defaultValue: ee, onChange: m, onSelect: h, asChild: g = !1, children: _, intent: v, variant: y, fullWidth: b, fieldSizing: x, label: S, error: C, required: w, layout: T, width: E, placeholder: D, rows: O, cols: te, onCopy: ne, onCut: k, onPaste: A, ...j }, M) => {
+	let N = s(), P = j.id || `wim-mentions-${N}`, [F, I] = l(ee || ""), L = p !== void 0, R = L ? p : F, [z, B] = l(!1), [V, H] = l(""), [U, W] = l(0), [G, K] = l(-1), [q, J] = l(0), Y = c(null), X = c(null), re = r(X, M), Z = o.filter((e) => e.display.toLowerCase().includes(V.toLowerCase())), ie = (e) => {
+		let t = e.target.value, n = e.target.selectionStart;
+		W(n), L || I(t), m && m(e);
+		let r = t.slice(0, n), i = r.lastIndexOf(f);
+		if (i !== -1) {
+			let e = r.slice(i + f.length);
+			if (!e.includes(" ")) {
+				K(i), H(e), B(!0), J(0);
+				return;
+			}
+		}
+		B(!1), K(-1);
+	}, Q = (e) => {
+		let t = R.slice(0, G), n = R.slice(U), r = `${t}${f}${e.display} ${n}`;
+		L || I(r), m && m({ target: { value: r } }), h && h(e), B(!1), K(-1), setTimeout(() => {
+			if (Y.current) {
+				Y.current.focus();
+				let n = t.length + f.length + e.display.length + 1;
+				Y.current.setSelectionRange(n, n);
+			}
+		}, 0);
+	}, ae = (e) => {
+		z && Z.length > 0 && (e.key === "ArrowDown" ? (e.preventDefault(), J((e) => e >= Z.length - 1 ? 0 : e + 1)) : e.key === "ArrowUp" ? (e.preventDefault(), J((e) => e <= 0 ? Z.length - 1 : e - 1)) : e.key === "Enter" || e.key === "Tab" ? q >= 0 && Z[q] && (e.preventDefault(), Q(Z[q])) : e.key === "Escape" && B(!1));
+	}, oe = g ? e : "div", $ = {
+		intent: v,
+		variant: y,
+		fullWidth: b,
+		fieldSizing: x,
+		label: S,
+		error: C,
+		required: w,
+		layout: T,
+		width: E,
+		placeholder: D,
+		rows: O,
+		cols: te,
+		onCopy: ne,
+		onCut: k,
+		onPaste: A
+	}, se = g ? {
+		...$,
+		...j
+	} : j;
+	return /* @__PURE__ */ d(oe, {
+		className: `wim-mentions ${a.container}`,
+		ref: re,
+		...se,
+		children: [/* @__PURE__ */ d(t, { children: [/* @__PURE__ */ u(i, {
+			...j,
+			...$,
+			ref: Y,
+			value: R,
+			onChange: ie,
+			onKeyDown: ae,
+			"aria-autocomplete": "list",
+			"aria-controls": z ? `${P}-list` : void 0,
+			onBlur: (e) => {
+				X.current?.contains(e.relatedTarget) || B(!1);
+			}
+		}), z && Z.length > 0 && /* @__PURE__ */ u("div", {
+			id: `${P}-list`,
+			className: a.list,
+			role: "listbox",
+			children: Z.map((e, t) => /* @__PURE__ */ u(n, {
+				className: a.item,
+				active: t === q,
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: () => Q(e),
+				onMouseEnter: () => J(t),
+				role: "option",
+				"aria-selected": t === q,
+				tabIndex: -1,
+				children: e.display
+			}, e.id))
+		})] }), g ? _ : null]
+	});
+});
+f.displayName = "Mentions";
+//#endregion
+export { f as Mentions, f as default };

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

@@ -0,0 +1,2 @@
+"use client";
+var e=`_container_1s6ya_3`,t=`_list_1s6ya_7`,n={container:e,list:t};exports.container=e,exports.default=n,exports.list=t;