wimui 0.47.9 → 0.48.0

package/dist/components/ai/ModelSelector/ModelSelector.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/Transition/Transition.cjs"),n=require("../../../icon/check.cjs"),r=require("../../../icon/chevron-down.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("./model-selector.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=e=>e>=1e6?`${(e/1e6).toFixed(e%1e6==0?0:1)}M`:e>=1e3?`${(e/1e3).toFixed(e%1e3==0?0:1)}K`:String(e),u=(e,t=`$`)=>`${t}${e}`,d=o.default.forwardRef(({models:e,value:d,defaultValue:f,onChange:p,size:m=`md`,disabled:h=!1,fullWidth:g=!1,showPricing:_=!0,showContext:v=!0,labels:y,className:b,...x},S)=>{let{placeholder:C=`Select a model`,contextLabel:w=`Context`,inputLabel:T=`In`,outputLabel:E=`Out`,perTokensLabel:D=`/1M`,triggerAriaLabel:O=`Select a model`}=y??{},k=d!==void 0,[A,j]=(0,o.useState)(f),M=k?d:A,N=e.find(e=>e.id===M),[P,F]=(0,o.useState)(!1),[I,L]=(0,o.useState)(-1),R=(0,o.useRef)(null),z=(0,o.useRef)(null),B=(0,o.useId)(),V=`${B}-listbox`,H=(0,o.useCallback)(e=>{R.current=e,typeof S==`function`?S(e):S&&(S.current=e)},[S]);(0,o.useEffect)(()=>{if(!P)return;let e=e=>{R.current&&!R.current.contains(e.target)&&F(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[P]);let U=e=>{e.disabled||(k||j(e.id),p?.(e.id,e),F(!1))},W=t=>{if(!h){if(t.key===`ArrowDown`||t.key===`Enter`||t.key===` `){if(t.preventDefault(),!P){F(!0);let t=e.findIndex(e=>e.id===M);L(t>=0?t:0)}}else t.key===`Escape`&&F(!1)}},G=t=>{L(n=>{let r=n;for(let n=0;n<e.length&&(r=(r+t+e.length)%e.length,e[r]?.disabled);n++);return r})},K=t=>{if(t.key===`ArrowDown`)t.preventDefault(),G(1);else if(t.key===`ArrowUp`)t.preventDefault(),G(-1);else if(t.key===`Enter`||t.key===` `){t.preventDefault();let n=e[I];n&&U(n)}else t.key===`Escape`&&(t.preventDefault(),F(!1),R.current?.querySelector(`button`)?.focus())};(0,o.useEffect)(()=>{P&&I>=0&&(z.current?.querySelectorAll(`[role="option"]`)?.[I])?.scrollIntoView({block:`nearest`})},[I,P]);let q=e=>{let t=[];if(v&&e.contextLength&&t.push((0,c.jsxs)(`span`,{className:a.default.meta,children:[w,` `,l(e.contextLength)]},`ctx`)),_&&e.pricing){let{input:n,output:r,currency:i}=e.pricing;n!==void 0&&t.push((0,c.jsxs)(`span`,{className:a.default.meta,children:[T,` `,u(n,i),D]},`in`)),r!==void 0&&t.push((0,c.jsxs)(`span`,{className:a.default.meta,children:[E,` `,u(r,i),D]},`out`))}return t.length===0?null:(0,c.jsx)(`span`,{className:a.default.metaRow,children:t})};return(0,c.jsxs)(`div`,{ref:H,className:(0,s.default)(`wim-model-selector`,a.default.root,a.default[m],g&&a.default.fullWidth,h&&a.default.disabled,b),...x,children:[(0,c.jsxs)(`button`,{type:`button`,className:a.default.trigger,"aria-haspopup":`listbox`,"aria-expanded":P,"aria-controls":P?V:void 0,"aria-label":O,disabled:h,onClick:()=>{if(h)return;F(e=>!e);let t=e.findIndex(e=>e.id===M);L(t>=0?t:0)},onKeyDown:W,children:[(0,c.jsx)(`span`,{className:a.default.triggerLabel,children:N?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`span`,{className:a.default.triggerName,children:N.name}),N.badge&&(0,c.jsx)(`span`,{className:a.default.badge,children:N.badge})]}):(0,c.jsx)(`span`,{className:a.default.placeholder,children:C})}),(0,c.jsx)(i.Icon,{component:r.default,size:`sm`,className:(0,s.default)(a.default.chevron,P&&a.default.chevronOpen)})]}),(0,c.jsx)(t.Transition,{show:P,preset:`scale`,unmount:!0,className:a.default.dropdownWrapper,children:(0,c.jsx)(`ul`,{ref:z,id:V,role:`listbox`,"aria-label":O,tabIndex:0,className:a.default.dropdown,onKeyDown:K,"aria-activedescendant":I>=0?`${B}-opt-${I}`:void 0,children:e.map((e,t)=>{let r=e.id===M;return(0,c.jsxs)(`li`,{id:`${B}-opt-${t}`,role:`option`,"aria-selected":r,"aria-disabled":e.disabled||void 0,className:(0,s.default)(a.default.option,t===I&&a.default.active,e.disabled&&a.default.optionDisabled),onMouseEnter:()=>L(t),onClick:()=>U(e),children:[(0,c.jsx)(`span`,{className:a.default.check,"aria-hidden":`true`,children:r&&(0,c.jsx)(i.Icon,{component:n.default,size:`sm`})}),(0,c.jsxs)(`span`,{className:a.default.optionBody,children:[(0,c.jsxs)(`span`,{className:a.default.optionHeader,children:[(0,c.jsx)(`span`,{className:a.default.optionName,children:e.name}),e.badge&&(0,c.jsx)(`span`,{className:a.default.badge,children:e.badge})]}),e.description&&(0,c.jsx)(`span`,{className:a.default.description,children:e.description}),q(e)]})]},e.id)})})})]})});d.displayName=`ModelSelector`,exports.ModelSelector=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/Transition/Transition.cjs"),n=require("../../../icon/check.cjs"),r=require("../../../icon/chevron-down.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("./model-selector.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=e=>e>=1e6?`${(e/1e6).toFixed(e%1e6==0?0:1)}M`:e>=1e3?`${(e/1e3).toFixed(e%1e3==0?0:1)}K`:String(e),u=(e,t=`$`)=>`${t}${e}`,d=o.default.forwardRef(({models:e,value:d,defaultValue:f,onChange:p,size:m=`md`,disabled:h=!1,fullWidth:g=!1,showPricing:_=!0,showContext:v=!0,labels:y,className:b,...x},S)=>{let{placeholder:C=`Select a model`,contextLabel:w=`Context`,inputLabel:T=`In`,outputLabel:E=`Out`,perTokensLabel:D=`/1M`,triggerAriaLabel:O=`Select a model`}=y??{},k=d!==void 0,[A,j]=(0,o.useState)(f),M=k?d:A,N=e.find(e=>e.id===M),[P,F]=(0,o.useState)(!1),[I,L]=(0,o.useState)(-1),R=(0,o.useRef)(null),z=(0,o.useRef)(null),B=(0,o.useId)(),V=`${B}-listbox`,H=(0,o.useCallback)(e=>{R.current=e,typeof S==`function`?S(e):S&&(S.current=e)},[S]);(0,o.useEffect)(()=>{if(!P)return;let e=e=>{R.current&&!R.current.contains(e.target)&&F(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[P]);let U=e=>{e.disabled||(k||j(e.id),p?.(e.id,e),F(!1))},W=(t,n)=>{let r=t;for(let t=0;t<e.length;t++){if(!e[r]?.disabled)return r;r=(r+n+e.length)%e.length}return-1},G=t=>{let n=e.findIndex(e=>e.id===M);L(t??(n>=0?n:W(0,1))),F(!0)},K=t=>{L(n=>{let r=n;for(let n=0;n<e.length&&(r=(r+t+e.length)%e.length,e[r]?.disabled);n++);return r})},q=t=>{if(!h)switch(t.key){case`ArrowDown`:case`ArrowUp`:t.preventDefault(),P?K(t.key===`ArrowDown`?1:-1):G();break;case`Home`:case`End`:t.preventDefault(),t.key===`Home`?P?L(W(0,1)):G(W(0,1)):P?L(W(e.length-1,-1)):G(W(e.length-1,-1));break;case`Enter`:case` `:if(t.preventDefault(),!P)G();else{let t=e[I];t&&U(t)}break;case`Escape`:P&&(t.preventDefault(),F(!1));break;case`Tab`:F(!1)}};(0,o.useEffect)(()=>{P&&I>=0&&(z.current?.querySelectorAll(`[role="option"]`)?.[I])?.scrollIntoView({block:`nearest`})},[I,P]);let J=e=>{let t=[];if(v&&e.contextLength&&t.push((0,c.jsxs)(`span`,{className:a.default.meta,children:[w,` `,l(e.contextLength)]},`ctx`)),_&&e.pricing){let{input:n,output:r,currency:i}=e.pricing;n!==void 0&&t.push((0,c.jsxs)(`span`,{className:a.default.meta,children:[T,` `,u(n,i),D]},`in`)),r!==void 0&&t.push((0,c.jsxs)(`span`,{className:a.default.meta,children:[E,` `,u(r,i),D]},`out`))}return t.length===0?null:(0,c.jsx)(`span`,{className:a.default.metaRow,children:t})};return(0,c.jsxs)(`div`,{ref:H,className:(0,s.default)(`wim-model-selector`,a.default.root,a.default[m],g&&a.default.fullWidth,h&&a.default.disabled,b),...x,children:[(0,c.jsxs)(`button`,{type:`button`,role:`combobox`,className:a.default.trigger,"aria-haspopup":`listbox`,"aria-expanded":P,"aria-controls":P?V:void 0,"aria-activedescendant":P&&I>=0?`${B}-opt-${I}`:void 0,"aria-label":O,disabled:h,onClick:()=>{h||(P?F(!1):G())},onKeyDown:q,onKeyUp:e=>{e.key===` `&&e.preventDefault()},children:[(0,c.jsx)(`span`,{className:a.default.triggerLabel,children:N?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`span`,{className:a.default.triggerName,children:N.name}),N.badge&&(0,c.jsx)(`span`,{className:a.default.badge,children:N.badge})]}):(0,c.jsx)(`span`,{className:a.default.placeholder,children:C})}),(0,c.jsx)(i.Icon,{component:r.default,size:`sm`,className:(0,s.default)(a.default.chevron,P&&a.default.chevronOpen)})]}),(0,c.jsx)(t.Transition,{show:P,preset:`scale`,unmount:!0,className:a.default.dropdownWrapper,children:(0,c.jsx)(`ul`,{ref:z,id:V,role:`listbox`,"aria-label":O,className:a.default.dropdown,onMouseDown:e=>e.preventDefault(),children:e.map((e,t)=>{let r=e.id===M;return(0,c.jsxs)(`li`,{id:`${B}-opt-${t}`,role:`option`,"aria-selected":r,"aria-disabled":e.disabled||void 0,className:(0,s.default)(a.default.option,t===I&&a.default.active,e.disabled&&a.default.optionDisabled),onMouseEnter:()=>L(t),onClick:()=>U(e),children:[(0,c.jsx)(`span`,{className:a.default.check,"aria-hidden":`true`,children:r&&(0,c.jsx)(i.Icon,{component:n.default,size:`sm`})}),(0,c.jsxs)(`span`,{className:a.default.optionBody,children:[(0,c.jsxs)(`span`,{className:a.default.optionHeader,children:[(0,c.jsx)(`span`,{className:a.default.optionName,children:e.name}),e.badge&&(0,c.jsx)(`span`,{className:a.default.badge,children:e.badge})]}),e.description&&(0,c.jsx)(`span`,{className:a.default.description,children:e.description}),J(e)]})]},e.id)})})})]})});d.displayName=`ModelSelector`,exports.ModelSelector=d;

package/dist/components/ai/ModelSelector/ModelSelector.js

@@ -21,35 +21,50 @@ var h = (e) => e >= 1e6 ? `${(e / 1e6).toFixed(e % 1e6 == 0 ? 0 : 1)}M` : e >= 1
 	}, [B]);
 	let Y = (e) => {
 		e.disabled || (F || L(e.id), y?.(e.id, e), V(!1));
-	}, X = (e) => {
-		if (!x) {
-			if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
-				if (e.preventDefault(), !B) {
-					V(!0);
-					let e = a.findIndex((e) => e.id === R);
-					U(e >= 0 ? e : 0);
-				}
-			} else e.key === "Escape" && V(!1);
+	}, X = (e, t) => {
+		let n = e;
+		for (let e = 0; e < a.length; e++) {
+			if (!a[n]?.disabled) return n;
+			n = (n + t + a.length) % a.length;
 		}
+		return -1;
 	}, Z = (e) => {
+		let t = a.findIndex((e) => e.id === R);
+		U(e ?? (t >= 0 ? t : X(0, 1))), V(!0);
+	}, Q = (e) => {
 		U((t) => {
 			let n = t;
 			for (let t = 0; t < a.length && (n = (n + e + a.length) % a.length, a[n]?.disabled); t++);
 			return n;
 		});
-	}, Q = (e) => {
-		if (e.key === "ArrowDown") e.preventDefault(), Z(1);
-		else if (e.key === "ArrowUp") e.preventDefault(), Z(-1);
-		else if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			let t = a[H];
-			t && Y(t);
-		} else e.key === "Escape" && (e.preventDefault(), V(!1), W.current?.querySelector("button")?.focus());
+	}, $ = (e) => {
+		if (!x) switch (e.key) {
+			case "ArrowDown":
+			case "ArrowUp":
+				e.preventDefault(), B ? Q(e.key === "ArrowDown" ? 1 : -1) : Z();
+				break;
+			case "Home":
+			case "End":
+				e.preventDefault(), e.key === "Home" ? B ? U(X(0, 1)) : Z(X(0, 1)) : B ? U(X(a.length - 1, -1)) : Z(X(a.length - 1, -1));
+				break;
+			case "Enter":
+			case " ":
+				if (e.preventDefault(), !B) Z();
+				else {
+					let e = a[H];
+					e && Y(e);
+				}
+				break;
+			case "Escape":
+				B && (e.preventDefault(), V(!1));
+				break;
+			case "Tab": V(!1);
+		}
 	};
 	s(() => {
 		B && H >= 0 && (G.current?.querySelectorAll("[role=\"option\"]")?.[H])?.scrollIntoView({ block: "nearest" });
 	}, [H, B]);
-	let $ = (e) => {
+	let ee = (e) => {
 		let t = [];
 		if (w && e.contextLength && t.push(/* @__PURE__ */ m("span", {
 			className: i.meta,
@@ -89,19 +104,21 @@ var h = (e) => e >= 1e6 ? `${(e / 1e6).toFixed(e % 1e6 == 0 ? 0 : 1)}M` : e >= 1
 		...D,
 		children: [/* @__PURE__ */ m("button", {
 			type: "button",
+			role: "combobox",
 			className: i.trigger,
 			"aria-haspopup": "listbox",
 			"aria-expanded": B,
 			"aria-controls": B ? q : void 0,
+			"aria-activedescendant": B && H >= 0 ? `${K}-opt-${H}` : void 0,
 			"aria-label": P,
 			disabled: x,
 			onClick: () => {
-				if (x) return;
-				V((e) => !e);
-				let e = a.findIndex((e) => e.id === R);
-				U(e >= 0 ? e : 0);
+				x || (B ? V(!1) : Z());
+			},
+			onKeyDown: $,
+			onKeyUp: (e) => {
+				e.key === " " && e.preventDefault();
 			},
-			onKeyDown: X,
 			children: [/* @__PURE__ */ p("span", {
 				className: i.triggerLabel,
 				children: z ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("span", {
@@ -129,10 +146,8 @@ var h = (e) => e >= 1e6 ? `${(e / 1e6).toFixed(e % 1e6 == 0 ? 0 : 1)}M` : e >= 1
 				id: q,
 				role: "listbox",
 				"aria-label": P,
-				tabIndex: 0,
 				className: i.dropdown,
-				onKeyDown: Q,
-				"aria-activedescendant": H >= 0 ? `${K}-opt-${H}` : void 0,
+				onMouseDown: (e) => e.preventDefault(),
 				children: a.map((e, n) => {
 					let a = e.id === R;
 					return /* @__PURE__ */ m("li", {
@@ -167,7 +182,7 @@ var h = (e) => e >= 1e6 ? `${(e / 1e6).toFixed(e % 1e6 == 0 ? 0 : 1)}M` : e >= 1
 									className: i.description,
 									children: e.description
 								}),
-								$(e)
+								ee(e)
 							]
 						})]
 					}, e.id);

package/dist/components/feedback/Snackbar/snackbar.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_wrapper_jrjaq_3`,t=`_root_jrjaq_41`,n=`_hasCloseButton_jrjaq_58`,r=`_visible_jrjaq_73`,i=`_content_jrjaq_77`,a=`_icon_jrjaq_83`,o=`_message_jrjaq_91`,s=`_actions_jrjaq_96`,c=`_actionButton_jrjaq_102`,l=`_closeButton_jrjaq_106`,u=`_success_jrjaq_134`,d=`_danger_jrjaq_139`,f=`_warning_jrjaq_144`,p=`_info_jrjaq_150`,m={wrapper:e,"top-left":`_top-left_jrjaq_11`,"top-center":`_top-center_jrjaq_16`,"top-right":`_top-right_jrjaq_21`,"bottom-left":`_bottom-left_jrjaq_26`,"bottom-center":`_bottom-center_jrjaq_31`,"bottom-right":`_bottom-right_jrjaq_36`,root:t,hasCloseButton:n,visible:r,content:i,icon:a,message:o,actions:s,actionButton:c,closeButton:l,success:u,danger:d,warning:f,info:p};exports.actionButton=c,exports.actions=s,exports.closeButton=l,exports.content=i,exports.danger=d,exports.default=m,exports.hasCloseButton=n,exports.icon=a,exports.info=p,exports.message=o,exports.root=t,exports.success=u,exports.visible=r,exports.warning=f,exports.wrapper=e;
+var e=`_wrapper_1n28t_3`,t=`_root_1n28t_41`,n=`_hasCloseButton_1n28t_64`,r=`_visible_1n28t_79`,i=`_content_1n28t_83`,a=`_icon_1n28t_89`,o=`_message_1n28t_97`,s=`_actions_1n28t_102`,c=`_actionButton_1n28t_108`,l=`_closeButton_1n28t_112`,u=`_success_1n28t_140`,d=`_danger_1n28t_144`,f=`_warning_1n28t_148`,p=`_info_1n28t_153`,m={wrapper:e,"top-left":`_top-left_1n28t_11`,"top-center":`_top-center_1n28t_16`,"top-right":`_top-right_1n28t_21`,"bottom-left":`_bottom-left_1n28t_26`,"bottom-center":`_bottom-center_1n28t_31`,"bottom-right":`_bottom-right_1n28t_36`,root:t,hasCloseButton:n,visible:r,content:i,icon:a,message:o,actions:s,actionButton:c,closeButton:l,success:u,danger:d,warning:f,info:p};exports.actionButton=c,exports.actions=s,exports.closeButton=l,exports.content=i,exports.danger=d,exports.default=m,exports.hasCloseButton=n,exports.icon=a,exports.info=p,exports.message=o,exports.root=t,exports.success=u,exports.visible=r,exports.warning=f,exports.wrapper=e;

package/dist/components/feedback/Snackbar/snackbar.module.js

@@ -1,13 +1,13 @@
 "use client";
 //#region src/components/feedback/Snackbar/snackbar.module.scss
-var e = "_wrapper_jrjaq_3", t = "_root_jrjaq_41", n = "_hasCloseButton_jrjaq_58", r = "_visible_jrjaq_73", i = "_content_jrjaq_77", a = "_icon_jrjaq_83", o = "_message_jrjaq_91", s = "_actions_jrjaq_96", c = "_actionButton_jrjaq_102", l = "_closeButton_jrjaq_106", u = "_success_jrjaq_134", d = "_danger_jrjaq_139", f = "_warning_jrjaq_144", p = "_info_jrjaq_150", m = {
+var e = "_wrapper_1n28t_3", t = "_root_1n28t_41", n = "_hasCloseButton_1n28t_64", r = "_visible_1n28t_79", i = "_content_1n28t_83", a = "_icon_1n28t_89", o = "_message_1n28t_97", s = "_actions_1n28t_102", c = "_actionButton_1n28t_108", l = "_closeButton_1n28t_112", u = "_success_1n28t_140", d = "_danger_1n28t_144", f = "_warning_1n28t_148", p = "_info_1n28t_153", m = {
 	wrapper: e,
-	"top-left": "_top-left_jrjaq_11",
-	"top-center": "_top-center_jrjaq_16",
-	"top-right": "_top-right_jrjaq_21",
-	"bottom-left": "_bottom-left_jrjaq_26",
-	"bottom-center": "_bottom-center_jrjaq_31",
-	"bottom-right": "_bottom-right_jrjaq_36",
+	"top-left": "_top-left_1n28t_11",
+	"top-center": "_top-center_1n28t_16",
+	"top-right": "_top-right_1n28t_21",
+	"bottom-left": "_bottom-left_1n28t_26",
+	"bottom-center": "_bottom-center_1n28t_31",
+	"bottom-right": "_bottom-right_1n28t_36",
 	root: t,
 	hasCloseButton: n,
 	visible: r,

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

@@ -1,2 +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=_?void 0:`Select country`,E=h?`${C}-error`:void 0,[D,O]=(0,o.useState)(!1),k=(0,o.useRef)(null);(0,o.useEffect)(()=>{let e=e=>{k.current&&!k.current.contains(e.target)&&O(!1)};return D&&document.addEventListener(`mousedown`,e),()=>{document.removeEventListener(`mousedown`,e)}},[D]);let A=l.find(e=>e.code===d)??l[0],j=e=>{u?.(e.target.value)};return(0,c.jsx)(i.FieldTemplate,{label:_,labelId:w,htmlFor:C,required:g,error:h,errorId:E,layout:v,className:y,children:(0,c.jsxs)(`div`,{ref:k,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&&O(!D),disabled:m,"aria-haspopup":`listbox`,"aria-expanded":D,"aria-labelledby":w,"aria-label":T,children:[(0,c.jsx)(`span`,{"aria-hidden":`true`,style:{fontSize:`1.2em`},children:A.flag}),(0,c.jsxs)(`span`,{children:[`+`,A.dialCode]}),(0,c.jsx)(r.Icon,{component:n.default,size:`sm`,className:(0,s.default)(a.default.chevron,D&&a.default.chevronOpen)})]}),(0,c.jsx)(t.Transition,{show:D,preset:`fade`,className:a.default.dropdown,children:(0,c.jsx)(`ul`,{className:a.default.countryList,role:`listbox`,"aria-labelledby":_?w:void 0,"aria-label":T,children:l.map(e=>(0,c.jsxs)(`li`,{className:(0,s.default)(a.default.countryOption,A.code===e.code&&a.default.selected),onClick:()=>{f?.(e.code),O(!1)},onKeyDown:t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),f?.(e.code),O(!1))},tabIndex:0,role:`option`,"aria-selected":A.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:j,placeholder:p,disabled:m,className:a.default.number,"aria-invalid":!!h,"aria-describedby":E})]})})});u.displayName=`PhoneInput`,exports.PHONE_COUNTRIES=l,exports.PhoneInput=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../layout/Transition/Transition.cjs"),r=require("../../../icon/chevron-down.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./phone-input.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=[{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:`🇧🇷`}],d=(0,s.forwardRef)(({value:e=``,onChange:d,countryCode:f=`US`,onCountryChange:p,placeholder:m=`000-0000-0000`,disabled:h=!1,error:g,required:_=!1,label:v,layout:y=`vertical`,className:b,fullWidth:x=!1,...S},C)=>{let w=`wim-phone-input-${(0,s.useId)()}`,T=v?`${w}-label`:void 0,{t:E}=t.useWimTranslation(`form`),D=v?void 0:E(`phone.select_country`),O=g?`${w}-error`:void 0,[k,A]=(0,s.useState)(!1),j=(0,s.useRef)(null);(0,s.useEffect)(()=>{let e=e=>{j.current&&!j.current.contains(e.target)&&A(!1)};return k&&document.addEventListener(`mousedown`,e),()=>{document.removeEventListener(`mousedown`,e)}},[k]);let M=u.find(e=>e.code===f)??u[0],N=e=>{d?.(e.target.value)};return(0,l.jsx)(a.FieldTemplate,{label:v,labelId:T,htmlFor:w,required:_,error:g,errorId:O,layout:y,className:b,children:(0,l.jsxs)(`div`,{ref:j,className:(0,c.default)(`wim-phone-input`,o.default.root,x&&o.default.fullWidth,h&&o.default.disabled,g&&o.default.danger),"data-testid":`phone-input-root`,...S,children:[(0,l.jsxs)(`div`,{className:o.default.countryWrapper,children:[(0,l.jsxs)(`button`,{type:`button`,className:o.default.countryTrigger,onClick:()=>!h&&A(!k),disabled:h,"aria-haspopup":`listbox`,"aria-expanded":k,"aria-labelledby":T,"aria-label":D,children:[(0,l.jsx)(`span`,{"aria-hidden":`true`,style:{fontSize:`1.2em`},children:M.flag}),(0,l.jsxs)(`span`,{children:[`+`,M.dialCode]}),(0,l.jsx)(i.Icon,{component:r.default,size:`sm`,className:(0,c.default)(o.default.chevron,k&&o.default.chevronOpen)})]}),(0,l.jsx)(n.Transition,{show:k,preset:`fade`,className:o.default.dropdown,children:(0,l.jsx)(`ul`,{className:o.default.countryList,role:`listbox`,"aria-labelledby":v?T:void 0,"aria-label":D,children:u.map(e=>(0,l.jsxs)(`li`,{className:(0,c.default)(o.default.countryOption,M.code===e.code&&o.default.selected),onClick:()=>{p?.(e.code),A(!1)},onKeyDown:t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),p?.(e.code),A(!1))},tabIndex:0,role:`option`,"aria-selected":M.code===e.code,children:[(0,l.jsx)(`span`,{"aria-hidden":`true`,children:e.flag}),(0,l.jsx)(`span`,{className:o.default.countryName,children:e.name}),(0,l.jsxs)(`span`,{className:o.default.countryCode,children:[`+`,e.dialCode]})]},e.code))})})]}),(0,l.jsx)(`div`,{className:o.default.divider,"aria-hidden":`true`}),(0,l.jsx)(`input`,{id:w,ref:C,type:`tel`,value:e,onChange:N,placeholder:m,disabled:h,className:o.default.number,"aria-invalid":!!g,"aria-describedby":O})]})})});d.displayName=`PhoneInput`,exports.PHONE_COUNTRIES=u,exports.PhoneInput=d;

package/dist/components/form/PhoneInput/PhoneInput.js

@@ -1,14 +1,15 @@
 "use client";
-import { Transition as e } from "../../layout/Transition/Transition.js";
-import t from "../../../icon/chevron-down.js";
-import { Icon as n } from "../../media/Icon/Icon.js";
-import { FieldTemplate as r } from "../FieldTemplate/FieldTemplate.js";
-import i from "./phone-input.module.js";
-import { forwardRef as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
-import u from "classnames";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import { Transition as t } from "../../layout/Transition/Transition.js";
+import n from "../../../icon/chevron-down.js";
+import { Icon as r } from "../../media/Icon/Icon.js";
+import { FieldTemplate as i } from "../FieldTemplate/FieldTemplate.js";
+import a from "./phone-input.module.js";
+import { forwardRef as o, 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/PhoneInput/PhoneInput.tsx
-var p = [
+var m = [
 	{
 		code: "US",
 		name: "United States",
@@ -69,89 +70,89 @@ var p = [
 		dialCode: "55",
 		flag: "🇧🇷"
 	}
-], m = a(({ value: a = "", onChange: m, countryCode: h = "US", onCountryChange: g, placeholder: _ = "000-0000-0000", disabled: v = !1, error: y, required: b = !1, label: x, layout: S = "vertical", className: C, fullWidth: w = !1, ...T }, E) => {
-	let D = `wim-phone-input-${s()}`, O = x ? `${D}-label` : void 0, k = x ? void 0 : "Select country", A = y ? `${D}-error` : void 0, [j, M] = l(!1), N = c(null);
-	o(() => {
+], h = o(({ value: o = "", onChange: h, countryCode: g = "US", onCountryChange: _, placeholder: v = "000-0000-0000", disabled: y = !1, error: b, required: x = !1, label: S, layout: C = "vertical", className: w, fullWidth: T = !1, ...E }, D) => {
+	let O = `wim-phone-input-${c()}`, k = S ? `${O}-label` : void 0, { t: A } = e("form"), j = S ? void 0 : A("phone.select_country"), M = b ? `${O}-error` : void 0, [N, P] = u(!1), F = l(null);
+	s(() => {
 		let e = (e) => {
-			N.current && !N.current.contains(e.target) && M(!1);
+			F.current && !F.current.contains(e.target) && P(!1);
 		};
-		return j && document.addEventListener("mousedown", e), () => {
+		return N && document.addEventListener("mousedown", e), () => {
 			document.removeEventListener("mousedown", e);
 		};
-	}, [j]);
-	let P = p.find((e) => e.code === h) ?? p[0], F = (e) => {
-		m?.(e.target.value);
+	}, [N]);
+	let I = m.find((e) => e.code === g) ?? m[0], L = (e) => {
+		h?.(e.target.value);
 	};
-	return /* @__PURE__ */ d(r, {
-		label: x,
-		labelId: O,
-		htmlFor: D,
-		required: b,
-		error: y,
-		errorId: A,
-		layout: S,
-		className: C,
-		children: /* @__PURE__ */ f("div", {
-			ref: N,
-			className: u("wim-phone-input", i.root, w && i.fullWidth, v && i.disabled, y && i.danger),
+	return /* @__PURE__ */ f(i, {
+		label: S,
+		labelId: k,
+		htmlFor: O,
+		required: x,
+		error: b,
+		errorId: M,
+		layout: C,
+		className: w,
+		children: /* @__PURE__ */ p("div", {
+			ref: F,
+			className: d("wim-phone-input", a.root, T && a.fullWidth, y && a.disabled, b && a.danger),
 			"data-testid": "phone-input-root",
-			...T,
+			...E,
 			children: [
-				/* @__PURE__ */ f("div", {
-					className: i.countryWrapper,
-					children: [/* @__PURE__ */ f("button", {
+				/* @__PURE__ */ p("div", {
+					className: a.countryWrapper,
+					children: [/* @__PURE__ */ p("button", {
 						type: "button",
-						className: i.countryTrigger,
-						onClick: () => !v && M(!j),
-						disabled: v,
+						className: a.countryTrigger,
+						onClick: () => !y && P(!N),
+						disabled: y,
 						"aria-haspopup": "listbox",
-						"aria-expanded": j,
-						"aria-labelledby": O,
-						"aria-label": k,
+						"aria-expanded": N,
+						"aria-labelledby": k,
+						"aria-label": j,
 						children: [
-							/* @__PURE__ */ d("span", {
+							/* @__PURE__ */ f("span", {
 								"aria-hidden": "true",
 								style: { fontSize: "1.2em" },
-								children: P.flag
+								children: I.flag
 							}),
-							/* @__PURE__ */ f("span", { children: ["+", P.dialCode] }),
-							/* @__PURE__ */ d(n, {
-								component: t,
+							/* @__PURE__ */ p("span", { children: ["+", I.dialCode] }),
+							/* @__PURE__ */ f(r, {
+								component: n,
 								size: "sm",
-								className: u(i.chevron, j && i.chevronOpen)
+								className: d(a.chevron, N && a.chevronOpen)
 							})
 						]
-					}), /* @__PURE__ */ d(e, {
-						show: j,
+					}), /* @__PURE__ */ f(t, {
+						show: N,
 						preset: "fade",
-						className: i.dropdown,
-						children: /* @__PURE__ */ d("ul", {
-							className: i.countryList,
+						className: a.dropdown,
+						children: /* @__PURE__ */ f("ul", {
+							className: a.countryList,
 							role: "listbox",
-							"aria-labelledby": x ? O : void 0,
-							"aria-label": k,
-							children: p.map((e) => /* @__PURE__ */ f("li", {
-								className: u(i.countryOption, P.code === e.code && i.selected),
+							"aria-labelledby": S ? k : void 0,
+							"aria-label": j,
+							children: m.map((e) => /* @__PURE__ */ p("li", {
+								className: d(a.countryOption, I.code === e.code && a.selected),
 								onClick: () => {
-									g?.(e.code), M(!1);
+									_?.(e.code), P(!1);
 								},
 								onKeyDown: (t) => {
-									(t.key === "Enter" || t.key === " ") && (t.preventDefault(), g?.(e.code), M(!1));
+									(t.key === "Enter" || t.key === " ") && (t.preventDefault(), _?.(e.code), P(!1));
 								},
 								tabIndex: 0,
 								role: "option",
-								"aria-selected": P.code === e.code,
+								"aria-selected": I.code === e.code,
 								children: [
-									/* @__PURE__ */ d("span", {
+									/* @__PURE__ */ f("span", {
 										"aria-hidden": "true",
 										children: e.flag
 									}),
-									/* @__PURE__ */ d("span", {
-										className: i.countryName,
+									/* @__PURE__ */ f("span", {
+										className: a.countryName,
 										children: e.name
 									}),
-									/* @__PURE__ */ f("span", {
-										className: i.countryCode,
+									/* @__PURE__ */ p("span", {
+										className: a.countryCode,
 										children: ["+", e.dialCode]
 									})
 								]
@@ -159,26 +160,26 @@ var p = [
 						})
 					})]
 				}),
-				/* @__PURE__ */ d("div", {
-					className: i.divider,
+				/* @__PURE__ */ f("div", {
+					className: a.divider,
 					"aria-hidden": "true"
 				}),
-				/* @__PURE__ */ d("input", {
-					id: D,
-					ref: E,
+				/* @__PURE__ */ f("input", {
+					id: O,
+					ref: D,
 					type: "tel",
-					value: a,
-					onChange: F,
-					placeholder: _,
-					disabled: v,
-					className: i.number,
-					"aria-invalid": !!y,
-					"aria-describedby": A
+					value: o,
+					onChange: L,
+					placeholder: v,
+					disabled: y,
+					className: a.number,
+					"aria-invalid": !!b,
+					"aria-describedby": M
 				})
 			]
 		})
 	});
 });
-m.displayName = "PhoneInput";
+h.displayName = "PhoneInput";
 //#endregion
-export { p as PHONE_COUNTRIES, m as PhoneInput };
+export { m as PHONE_COUNTRIES, h as PhoneInput };