wimui 0.51.1 → 0.52.0

package/dist/components/form/SegmentedControl/SegmentedControl.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../media/Icon/Icon.cjs"),r=require("../../../hooks/useMergedRef.cjs"),i=require("../FieldTemplate/FieldTemplate.cjs"),a=require("../../_internal/useIndicator.cjs"),o=require("./segmented-control.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=(0,s.forwardRef)(({options:e,value:u,onChange:d,size:f=`md`,fullWidth:p=!1,className:m,label:h,error:g,required:_,layout:v=`vertical`,disabled:y=!1,asChild:b=!1,children:x,id:S,styles:C},w)=>{let T=(0,s.useRef)([]),E=(0,s.useId)(),D=S||`wim-segmented-${E}`,O=`${D}-label`,k=`${D}-error`,{containerRef:A,sliderStyle:j,isReady:M}=a.useIndicator({activeSelector:`.${o.default.active}`,dependence:e.length}),N=e.findIndex(e=>e.value===u),P=(t,n)=>{let r;switch(t.key){case`ArrowLeft`:case`ArrowUp`:r=n-1,r<0&&(r=e.length-1);break;case`ArrowRight`:case`ArrowDown`:r=n+1,r>=e.length&&(r=0);break;case`Home`:r=0;break;case`End`:r=e.length-1;break;default:return}t.preventDefault(),d(e[r].value),T.current[r]?.focus()},F=`${D}-item-0`;return(0,l.jsx)(i.FieldTemplate,{label:h,error:g,required:_,layout:v,labelId:O,htmlFor:F,errorId:k,className:m,children:(0,l.jsxs)(b?t.Root:`div`,{ref:r.useMergedRef(A,w),id:D,className:(0,c.default)(`wim-segmented-control`,o.default.root,o.default[f],p&&o.default.fullWidth,M&&o.default.ready,g&&o.default.danger,C?.root),role:`radiogroup`,"aria-labelledby":h?O:void 0,"aria-required":_,"aria-invalid":g?!0:void 0,"aria-describedby":g?k:void 0,children:[(0,l.jsx)(`div`,{className:(0,c.default)(o.default.slider,C?.slider),style:j,"aria-hidden":`true`}),e.map((e,t)=>{let r=e.value===u,i=r||N===-1&&t===0,a=`${D}-item-${t}`;return(0,l.jsxs)(`button`,{id:a,ref:e=>{T.current[t]=e},type:`button`,className:(0,c.default)(o.default.item,r&&o.default.active,!e.label&&e.iconName&&o.default.iconOnly,C?.item),onClick:()=>d(e.value),onKeyDown:e=>P(e,t),onFocus:()=>{},onBlur:()=>{},role:`radio`,"aria-checked":r,tabIndex:i?0:-1,"aria-label":e.label||e.value,disabled:y,children:[e.iconName&&(0,l.jsx)(n.Icon,{name:e.iconName,size:f,className:o.default.icon}),e.label&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,C?.label),children:e.label})]},e.value)}),(0,l.jsx)(t.Slottable,{children:x})]})})});u.displayName=`SegmentedControl`,exports.SegmentedControl=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../hooks/useMergedRef.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../FieldTemplate/FieldTemplate.cjs"),a=require("../../_internal/useIndicator.cjs"),o=require("./segmented-control.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=(0,s.forwardRef)(({options:e,value:u,onChange:d,size:f=`md`,fullWidth:p=!1,className:m,label:h,error:g,required:_,layout:v=`vertical`,disabled:y=!1,asChild:b=!1,children:x,id:S,styles:C},w)=>{let T=(0,s.useRef)([]),E=(0,s.useId)(),D=S||`wim-segmented-${E}`,O=`${D}-label`,k=`${D}-error`,{containerRef:A,sliderStyle:j,isReady:M}=a.useIndicator({activeSelector:`.${o.default.active}`,dependence:e.length}),N=e.findIndex(e=>e.value===u),P=(t,n)=>{let r;switch(t.key){case`ArrowLeft`:case`ArrowUp`:r=n-1,r<0&&(r=e.length-1);break;case`ArrowRight`:case`ArrowDown`:r=n+1,r>=e.length&&(r=0);break;case`Home`:r=0;break;case`End`:r=e.length-1;break;default:return}t.preventDefault(),d(e[r].value),T.current[r]?.focus()},F=`${D}-item-0`;return(0,l.jsx)(i.FieldTemplate,{label:h,error:g,required:_,layout:v,labelId:O,htmlFor:F,errorId:k,className:m,children:(0,l.jsxs)(b?t.Root:`div`,{ref:n.useMergedRef(A,w),id:D,className:(0,c.default)(`wim-segmented-control`,o.default.root,o.default[f],p&&o.default.fullWidth,M&&o.default.ready,g&&o.default.danger,C?.root),role:`radiogroup`,"aria-labelledby":h?O:void 0,"aria-required":_,"aria-invalid":g?!0:void 0,"aria-describedby":g?k:void 0,children:[(0,l.jsx)(`div`,{className:(0,c.default)(o.default.slider,C?.slider),style:j,"aria-hidden":`true`}),e.map((e,t)=>{let n=e.value===u,i=n||N===-1&&t===0,a=`${D}-item-${t}`;return(0,l.jsxs)(`button`,{id:a,ref:e=>{T.current[t]=e},type:`button`,className:(0,c.default)(o.default.item,n&&o.default.active,!e.label&&e.iconName&&o.default.iconOnly,C?.item),onClick:()=>d(e.value),onKeyDown:e=>P(e,t),onFocus:()=>{},onBlur:()=>{},role:`radio`,"aria-checked":n,tabIndex:i?0:-1,"aria-label":e.label||e.value,disabled:y,children:[e.iconName&&(0,l.jsx)(r.Icon,{name:e.iconName,size:f,className:o.default.icon}),e.label&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,C?.label),children:e.label})]},e.value)}),(0,l.jsx)(t.Slottable,{children:x})]})})});u.displayName=`SegmentedControl`,exports.SegmentedControl=u;

package/dist/components/form/SegmentedControl/SegmentedControl.js

@@ -1,7 +1,7 @@
 "use client";
 import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
-import { Icon as n } from "../../media/Icon/Icon.js";
-import { useMergedRef as r } from "../../../hooks/useMergedRef.js";
+import { useMergedRef as n } from "../../../hooks/useMergedRef.js";
+import { Icon as r } from "../../media/Icon/Icon.js";
 import { FieldTemplate as i } from "../FieldTemplate/FieldTemplate.js";
 import { useIndicator as a } from "../../_internal/useIndicator.js";
 import o from "./segmented-control.module.js";
@@ -44,7 +44,7 @@ var p = s(({ options: s, value: p, onChange: m, size: h = "md", fullWidth: g = !
 		errorId: M,
 		className: _,
 		children: /* @__PURE__ */ f(C ? e : "div", {
-			ref: r(N, D),
+			ref: n(N, D),
 			id: A,
 			className: u("wim-segmented-control", o.root, o[h], g && o.fullWidth, F && o.ready, y && o.danger, E?.root),
 			role: "radiogroup",
@@ -59,24 +59,24 @@ var p = s(({ options: s, value: p, onChange: m, size: h = "md", fullWidth: g = !
 					"aria-hidden": "true"
 				}),
 				s.map((e, t) => {
-					let r = e.value === p, i = r || I === -1 && t === 0, a = `${A}-item-${t}`;
+					let n = e.value === p, i = n || I === -1 && t === 0, a = `${A}-item-${t}`;
 					return /* @__PURE__ */ f("button", {
 						id: a,
 						ref: (e) => {
 							O.current[t] = e;
 						},
 						type: "button",
-						className: u(o.item, r && o.active, !e.label && e.iconName && o.iconOnly, E?.item),
+						className: u(o.item, n && o.active, !e.label && e.iconName && o.iconOnly, E?.item),
 						onClick: () => m(e.value),
 						onKeyDown: (e) => L(e, t),
 						onFocus: () => {},
 						onBlur: () => {},
 						role: "radio",
-						"aria-checked": r,
+						"aria-checked": n,
 						tabIndex: i ? 0 : -1,
 						"aria-label": e.label || e.value,
 						disabled: S,
-						children: [e.iconName && /* @__PURE__ */ d(n, {
+						children: [e.iconName && /* @__PURE__ */ d(r, {
 							name: e.iconName,
 							size: h,
 							className: o.icon

package/dist/components/form/Select/Select.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../layout/Transition/Transition.cjs"),i=require("../../_internal/BaseListItem/BaseListItem.cjs"),a=require("../InputBase/InputBase.cjs"),o=require("../FieldTemplate/FieldTemplate.cjs"),s=require("../../_internal/mergeRefs.cjs"),c=require("./select.module.cjs"),l=require("./useSelect.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=(0,u.forwardRef)(({options:e=[],value:p,onChange:m,placeholder:h,label:g,error:_,required:v,layout:y,className:ee,disabled:b=!1,defaultValue:x,searchable:S=!1,searchPlaceholder:C,filterOption:w,grouped:T=!1,allowClear:te=!1,fullWidth:E=!1,intent:ne=`default`,id:re,noOptionsFoundLabel:ie,width:ae,styles:D,asChild:O=!1,children:k,...oe},se)=>{let{t:ce}=n.useWimTranslation(`form`),le=(0,u.useId)(),A=re||`wim-select-${le}`,j=g?`${A}-label`:void 0,M=_?`${A}-error`:void 0,N=`${A}-list`,P=`${A}-trigger`,F=_?`danger`:ne,{isOpen:I,searchValue:L,setSearchValue:R,focusedIndex:z,setFocusedIndex:B,isKeyboardNavigating:V,setIsKeyboardNavigating:H,containerRef:U,triggerRef:ue,searchInputRef:de,listItemsRef:W,currentValue:G,filteredOptions:K,selectedOption:q,focusedOption:J,handleToggle:fe,handleSelect:Y,handleClear:pe,handleKeyDown:X}=l.useSelect({options:e,value:p,onChange:m,defaultValue:x,searchable:S,grouped:T,disabled:b,filterOption:w}),me=s.mergeRefs(U,se),he=()=>{let t=0;return T&&e.length>0&&`options`in e[0]?e.map((e,n)=>{let r=e.options.filter(e=>e.type===`separator`||!L||(w||((e,t)=>(typeof e.label==`string`?e.label:``).toLowerCase().includes(t.toLowerCase())))(e,L));return r.length===0?null:(0,f.jsxs)(u.default.Fragment,{children:[(0,f.jsx)(`li`,{className:(0,d.default)(c.default.groupLabel,D?.groupLabel),role:`presentation`,children:e.label}),r.map((e,r)=>{let a=t++;if(e.type===`separator`)return(0,f.jsx)(`li`,{className:(0,d.default)(c.default.separator,D?.separator),role:`presentation`},`sep-${n}-${r}`);let o=a===z,s=G===e.value,l=`wim-select-option-${A}-${e.value}`;return(0,f.jsx)(i.BaseListItem,{asChild:!0,id:l,ref:e=>{W.current[a]=e},active:o,disabled:e.disabled,className:(0,d.default)(c.default.option,s&&c.default.selected,D?.option),onClick:t=>{t.stopPropagation(),Y(e)},onMouseEnter:()=>B(a),role:`option`,"aria-selected":s,children:(0,f.jsx)(`li`,{children:e.label})},e.value)})]},n)}):K.map((e,n)=>{let r=t++;if(e.type===`separator`)return(0,f.jsx)(`li`,{className:(0,d.default)(c.default.separator,D?.separator),role:`presentation`},`sep-${n}`);let a=r===z,o=G===e.value,s=`wim-select-option-${A}-${e.value}`;return(0,f.jsx)(i.BaseListItem,{asChild:!0,id:s,ref:e=>{W.current[r]=e},active:a,disabled:e.disabled,className:(0,d.default)(c.default.option,o&&c.default.selected,D?.option),onClick:t=>{t.stopPropagation(),Y(e)},onMouseEnter:()=>B(r),role:`option`,"aria-selected":o,children:(0,f.jsx)(`li`,{children:e.label})},e.value)})},Z=J&&J.type!==`separator`?`wim-select-option-${A}-${J.value}`:void 0,{"aria-label":Q,"aria-labelledby":$,"aria-describedby":ge,..._e}=oe;return(0,f.jsx)(o.FieldTemplate,{label:g,error:_,required:v,layout:y,labelId:j,htmlFor:P,errorId:M,className:ee,children:(0,f.jsxs)(O?t.Root:`div`,{className:(0,d.default)(`wim-select`,c.default.root,E&&c.default.fullWidth,D?.root),ref:me,onMouseMove:()=>H(!1),"data-keyboard-nav":V,..._e,children:[(0,f.jsxs)(t.Slottable,{children:[(0,f.jsx)(a.InputBase,{disabled:b,allowClear:te,hasValue:!!G,onClear:pe,intent:F,rightIcons:[{name:`ChevronDownIcon`,rotated:I}],width:ae,fullWidth:E,styles:D?.inputBase,children:(0,f.jsx)(`div`,{id:P,className:(0,d.default)(c.default.trigger,I&&c.default.open,b&&c.default.disabled,D?.trigger),onClick:fe,onKeyDown:X,tabIndex:b?-1:0,role:`combobox`,"aria-expanded":I,"aria-haspopup":`listbox`,"aria-controls":I?N:void 0,"aria-disabled":b,"aria-labelledby":j||$,"aria-label":g?void 0:typeof Q==`string`?Q:typeof h==`string`?h:void 0,"aria-describedby":M||ge,"aria-required":v?`true`:void 0,"aria-invalid":F===`danger`?`true`:`false`,"aria-activedescendant":I?Z:void 0,ref:ue,children:(0,f.jsx)(`div`,{className:(0,d.default)(c.default.value,!q&&c.default.placeholder,D?.value),children:q?q.label:h})})}),(0,f.jsxs)(r.Transition,{show:I&&!b,preset:`fade`,className:(0,d.default)(c.default.dropdown,D?.dropdown),children:[S&&(0,f.jsx)(`div`,{className:(0,d.default)(c.default.search,D?.search),children:(0,f.jsx)(`input`,{ref:de,type:`text`,className:(0,d.default)(c.default.searchInput,D?.searchInput),placeholder:C,value:L,onChange:e=>{R(e.target.value),B(-1)},onClick:e=>e.stopPropagation(),onKeyDown:X,"aria-label":C,"aria-controls":N,"aria-activedescendant":Z})}),(0,f.jsx)(`ul`,{id:N,className:(0,d.default)(c.default.list,D?.list),role:`listbox`,"aria-labelledby":g?j:$||void 0,children:K.length===0?(0,f.jsx)(`li`,{className:(0,d.default)(c.default.empty,D?.empty),role:`option`,"aria-selected":`false`,children:ie??ce(`select.no_options`)}):he()})]})]}),k]})})});p.displayName=`Select`,exports.Select=p,exports.default=p;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../layout/Transition/Transition.cjs"),i=require("../../_internal/BaseListItem/BaseListItem.cjs"),a=require("../InputBase/InputBase.cjs"),o=require("../../../i18n/generated/form.cjs"),s=require("../FieldTemplate/FieldTemplate.cjs"),c=require("../../_internal/mergeRefs.cjs"),l=require("./select.module.cjs"),ee=require("./useSelect.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=(0,u.forwardRef)(({options:e=[],value:p,onChange:m,placeholder:h,label:g,error:_,required:v,layout:y,className:b,disabled:x=!1,defaultValue:te,searchable:S=!1,searchPlaceholder:C,filterOption:w,grouped:T=!1,allowClear:E=!1,fullWidth:D=!1,intent:ne=`default`,id:re,noOptionsFoundLabel:ie,width:ae,styles:O,asChild:oe=!1,children:k,...se},ce)=>{let{t:le}=n.useWimTranslation(o.formNs),ue=(0,u.useId)(),A=re||`wim-select-${ue}`,j=g?`${A}-label`:void 0,M=_?`${A}-error`:void 0,N=`${A}-list`,P=`${A}-trigger`,F=_?`danger`:ne,{isOpen:I,searchValue:L,setSearchValue:R,focusedIndex:z,setFocusedIndex:B,isKeyboardNavigating:V,setIsKeyboardNavigating:H,containerRef:de,triggerRef:fe,searchInputRef:pe,listItemsRef:U,currentValue:W,filteredOptions:G,selectedOption:K,focusedOption:q,handleToggle:J,handleSelect:Y,handleClear:me,handleKeyDown:X}=ee.useSelect({options:e,value:p,onChange:m,defaultValue:te,searchable:S,grouped:T,disabled:x,filterOption:w}),he=c.mergeRefs(de,ce),ge=()=>{let t=0;return T&&e.length>0&&`options`in e[0]?e.map((e,n)=>{let r=e.options.filter(e=>e.type===`separator`||!L||(w||((e,t)=>(typeof e.label==`string`?e.label:``).toLowerCase().includes(t.toLowerCase())))(e,L));return r.length===0?null:(0,f.jsxs)(u.default.Fragment,{children:[(0,f.jsx)(`li`,{className:(0,d.default)(l.default.groupLabel,O?.groupLabel),role:`presentation`,children:e.label}),r.map((e,r)=>{let a=t++;if(e.type===`separator`)return(0,f.jsx)(`li`,{className:(0,d.default)(l.default.separator,O?.separator),role:`presentation`},`sep-${n}-${r}`);let o=a===z,s=W===e.value,c=`wim-select-option-${A}-${e.value}`;return(0,f.jsx)(i.BaseListItem,{asChild:!0,id:c,ref:e=>{U.current[a]=e},active:o,disabled:e.disabled,className:(0,d.default)(l.default.option,s&&l.default.selected,O?.option),onClick:t=>{t.stopPropagation(),Y(e)},onMouseEnter:()=>B(a),role:`option`,"aria-selected":s,children:(0,f.jsx)(`li`,{children:e.label})},e.value)})]},n)}):G.map((e,n)=>{let r=t++;if(e.type===`separator`)return(0,f.jsx)(`li`,{className:(0,d.default)(l.default.separator,O?.separator),role:`presentation`},`sep-${n}`);let a=r===z,o=W===e.value,s=`wim-select-option-${A}-${e.value}`;return(0,f.jsx)(i.BaseListItem,{asChild:!0,id:s,ref:e=>{U.current[r]=e},active:a,disabled:e.disabled,className:(0,d.default)(l.default.option,o&&l.default.selected,O?.option),onClick:t=>{t.stopPropagation(),Y(e)},onMouseEnter:()=>B(r),role:`option`,"aria-selected":o,children:(0,f.jsx)(`li`,{children:e.label})},e.value)})},Z=q&&q.type!==`separator`?`wim-select-option-${A}-${q.value}`:void 0,{"aria-label":Q,"aria-labelledby":$,"aria-describedby":_e,...ve}=se;return(0,f.jsx)(s.FieldTemplate,{label:g,error:_,required:v,layout:y,labelId:j,htmlFor:P,errorId:M,className:b,children:(0,f.jsxs)(oe?t.Root:`div`,{className:(0,d.default)(`wim-select`,l.default.root,D&&l.default.fullWidth,O?.root),ref:he,onMouseMove:()=>H(!1),"data-keyboard-nav":V,...ve,children:[(0,f.jsxs)(t.Slottable,{children:[(0,f.jsx)(a.InputBase,{disabled:x,allowClear:E,hasValue:!!W,onClear:me,intent:F,rightIcons:[{name:`ChevronDownIcon`,rotated:I}],width:ae,fullWidth:D,styles:O?.inputBase,children:(0,f.jsx)(`div`,{id:P,className:(0,d.default)(l.default.trigger,I&&l.default.open,x&&l.default.disabled,O?.trigger),onClick:J,onKeyDown:X,tabIndex:x?-1:0,role:`combobox`,"aria-expanded":I,"aria-haspopup":`listbox`,"aria-controls":I?N:void 0,"aria-disabled":x,"aria-labelledby":j||$,"aria-label":g?void 0:typeof Q==`string`?Q:typeof h==`string`?h:void 0,"aria-describedby":M||_e,"aria-required":v?`true`:void 0,"aria-invalid":F===`danger`?`true`:`false`,"aria-activedescendant":I?Z:void 0,ref:fe,children:(0,f.jsx)(`div`,{className:(0,d.default)(l.default.value,!K&&l.default.placeholder,O?.value),children:K?K.label:h})})}),(0,f.jsxs)(r.Transition,{show:I&&!x,preset:`fade`,className:(0,d.default)(l.default.dropdown,O?.dropdown),children:[S&&(0,f.jsx)(`div`,{className:(0,d.default)(l.default.search,O?.search),children:(0,f.jsx)(`input`,{ref:pe,type:`text`,className:(0,d.default)(l.default.searchInput,O?.searchInput),placeholder:C,value:L,onChange:e=>{R(e.target.value),B(-1)},onClick:e=>e.stopPropagation(),onKeyDown:X,"aria-label":C,"aria-controls":N,"aria-activedescendant":Z})}),(0,f.jsx)(`ul`,{id:N,className:(0,d.default)(l.default.list,O?.list),role:`listbox`,"aria-labelledby":g?j:$||void 0,children:G.length===0?(0,f.jsx)(`li`,{className:(0,d.default)(l.default.empty,O?.empty),role:`option`,"aria-selected":`false`,children:ie??le(`select.no_options`)}):ge()})]})]}),k]})})});p.displayName=`Select`,exports.Select=p,exports.default=p;

package/dist/components/form/Select/Select.js

@@ -4,171 +4,172 @@ import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
 import { Transition as r } from "../../layout/Transition/Transition.js";
 import { BaseListItem as i } from "../../_internal/BaseListItem/BaseListItem.js";
 import { InputBase as a } from "../InputBase/InputBase.js";
-import { FieldTemplate as o } from "../FieldTemplate/FieldTemplate.js";
-import { mergeRefs as s } from "../../_internal/mergeRefs.js";
-import c from "./select.module.js";
-import { useSelect as l } from "./useSelect.js";
-import u, { forwardRef as d, useId as f } from "react";
-import p from "classnames";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { formNs as o } from "../../../i18n/generated/form.js";
+import { FieldTemplate as s } from "../FieldTemplate/FieldTemplate.js";
+import { mergeRefs as c } from "../../_internal/mergeRefs.js";
+import l from "./select.module.js";
+import { useSelect as ee } from "./useSelect.js";
+import te, { forwardRef as u, useId as ne } from "react";
+import d from "classnames";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/form/Select/Select.tsx
-var g = d(({ options: d = [], value: g, onChange: ee, placeholder: _, label: v, error: y, required: b, layout: x, className: S, disabled: C = !1, defaultValue: te, searchable: w = !1, searchPlaceholder: T, filterOption: E, grouped: D = !1, allowClear: ne = !1, fullWidth: O = !1, intent: re = "default", id: k, noOptionsFoundLabel: A, width: j, styles: M, asChild: ie = !1, children: ae, ...oe }, se) => {
-	let { t: ce } = n("form"), le = f(), N = k || `wim-select-${le}`, P = v ? `${N}-label` : void 0, F = y ? `${N}-error` : void 0, I = `${N}-list`, L = `${N}-trigger`, R = y ? "danger" : re, { isOpen: z, searchValue: B, setSearchValue: V, focusedIndex: H, setFocusedIndex: U, isKeyboardNavigating: ue, setIsKeyboardNavigating: de, containerRef: fe, triggerRef: pe, searchInputRef: me, listItemsRef: W, currentValue: G, filteredOptions: K, selectedOption: q, focusedOption: J, handleToggle: he, handleSelect: Y, handleClear: ge, handleKeyDown: X } = l({
-		options: d,
-		value: g,
-		onChange: ee,
-		defaultValue: te,
-		searchable: w,
-		grouped: D,
-		disabled: C,
-		filterOption: E
-	}), _e = s(fe, se), ve = () => {
+var m = u(({ options: u = [], value: m, onChange: h, placeholder: g, label: _, error: v, required: y, layout: b, className: x, disabled: S = !1, defaultValue: re, searchable: C = !1, searchPlaceholder: w, filterOption: T, grouped: E = !1, allowClear: D = !1, fullWidth: O = !1, intent: k = "default", id: A, noOptionsFoundLabel: ie, width: ae, styles: j, asChild: oe = !1, children: se, ...ce }, le) => {
+	let { t: ue } = n(o), de = ne(), M = A || `wim-select-${de}`, N = _ ? `${M}-label` : void 0, P = v ? `${M}-error` : void 0, F = `${M}-list`, I = `${M}-trigger`, L = v ? "danger" : k, { isOpen: R, searchValue: z, setSearchValue: B, focusedIndex: V, setFocusedIndex: H, isKeyboardNavigating: fe, setIsKeyboardNavigating: pe, containerRef: me, triggerRef: he, searchInputRef: ge, listItemsRef: U, currentValue: W, filteredOptions: G, selectedOption: K, focusedOption: q, handleToggle: _e, handleSelect: J, handleClear: ve, handleKeyDown: Y } = ee({
+		options: u,
+		value: m,
+		onChange: h,
+		defaultValue: re,
+		searchable: C,
+		grouped: E,
+		disabled: S,
+		filterOption: T
+	}), ye = c(me, le), X = () => {
 		let e = 0;
-		return D && d.length > 0 && "options" in d[0] ? d.map((t, n) => {
-			let r = t.options.filter((e) => e.type === "separator" || !B || (E || ((e, t) => (typeof e.label == "string" ? e.label : "").toLowerCase().includes(t.toLowerCase())))(e, B));
-			return r.length === 0 ? null : /* @__PURE__ */ h(u.Fragment, { children: [/* @__PURE__ */ m("li", {
-				className: p(c.groupLabel, M?.groupLabel),
+		return E && u.length > 0 && "options" in u[0] ? u.map((t, n) => {
+			let r = t.options.filter((e) => e.type === "separator" || !z || (T || ((e, t) => (typeof e.label == "string" ? e.label : "").toLowerCase().includes(t.toLowerCase())))(e, z));
+			return r.length === 0 ? null : /* @__PURE__ */ p(te.Fragment, { children: [/* @__PURE__ */ f("li", {
+				className: d(l.groupLabel, j?.groupLabel),
 				role: "presentation",
 				children: t.label
 			}), r.map((t, r) => {
 				let a = e++;
-				if (t.type === "separator") return /* @__PURE__ */ m("li", {
-					className: p(c.separator, M?.separator),
+				if (t.type === "separator") return /* @__PURE__ */ f("li", {
+					className: d(l.separator, j?.separator),
 					role: "presentation"
 				}, `sep-${n}-${r}`);
-				let o = a === H, s = G === t.value, l = `wim-select-option-${N}-${t.value}`;
-				return /* @__PURE__ */ m(i, {
+				let o = a === V, s = W === t.value, c = `wim-select-option-${M}-${t.value}`;
+				return /* @__PURE__ */ f(i, {
 					asChild: !0,
-					id: l,
+					id: c,
 					ref: (e) => {
-						W.current[a] = e;
+						U.current[a] = e;
 					},
 					active: o,
 					disabled: t.disabled,
-					className: p(c.option, s && c.selected, M?.option),
+					className: d(l.option, s && l.selected, j?.option),
 					onClick: (e) => {
-						e.stopPropagation(), Y(t);
+						e.stopPropagation(), J(t);
 					},
-					onMouseEnter: () => U(a),
+					onMouseEnter: () => H(a),
 					role: "option",
 					"aria-selected": s,
-					children: /* @__PURE__ */ m("li", { children: t.label })
+					children: /* @__PURE__ */ f("li", { children: t.label })
 				}, t.value);
 			})] }, n);
-		}) : K.map((t, n) => {
+		}) : G.map((t, n) => {
 			let r = e++;
-			if (t.type === "separator") return /* @__PURE__ */ m("li", {
-				className: p(c.separator, M?.separator),
+			if (t.type === "separator") return /* @__PURE__ */ f("li", {
+				className: d(l.separator, j?.separator),
 				role: "presentation"
 			}, `sep-${n}`);
-			let a = r === H, o = G === t.value, s = `wim-select-option-${N}-${t.value}`;
-			return /* @__PURE__ */ m(i, {
+			let a = r === V, o = W === t.value, s = `wim-select-option-${M}-${t.value}`;
+			return /* @__PURE__ */ f(i, {
 				asChild: !0,
 				id: s,
 				ref: (e) => {
-					W.current[r] = e;
+					U.current[r] = e;
 				},
 				active: a,
 				disabled: t.disabled,
-				className: p(c.option, o && c.selected, M?.option),
+				className: d(l.option, o && l.selected, j?.option),
 				onClick: (e) => {
-					e.stopPropagation(), Y(t);
+					e.stopPropagation(), J(t);
 				},
-				onMouseEnter: () => U(r),
+				onMouseEnter: () => H(r),
 				role: "option",
 				"aria-selected": o,
-				children: /* @__PURE__ */ m("li", { children: t.label })
+				children: /* @__PURE__ */ f("li", { children: t.label })
 			}, t.value);
 		});
-	}, Z = J && J.type !== "separator" ? `wim-select-option-${N}-${J.value}` : void 0, { "aria-label": Q, "aria-labelledby": $, "aria-describedby": ye, ...be } = oe;
-	return /* @__PURE__ */ m(o, {
-		label: v,
-		error: y,
-		required: b,
-		layout: x,
-		labelId: P,
-		htmlFor: L,
-		errorId: F,
-		className: S,
-		children: /* @__PURE__ */ h(ie ? e : "div", {
-			className: p("wim-select", c.root, O && c.fullWidth, M?.root),
-			ref: _e,
-			onMouseMove: () => de(!1),
-			"data-keyboard-nav": ue,
-			...be,
-			children: [/* @__PURE__ */ h(t, { children: [/* @__PURE__ */ m(a, {
-				disabled: C,
-				allowClear: ne,
-				hasValue: !!G,
-				onClear: ge,
-				intent: R,
+	}, Z = q && q.type !== "separator" ? `wim-select-option-${M}-${q.value}` : void 0, { "aria-label": Q, "aria-labelledby": $, "aria-describedby": be, ...xe } = ce;
+	return /* @__PURE__ */ f(s, {
+		label: _,
+		error: v,
+		required: y,
+		layout: b,
+		labelId: N,
+		htmlFor: I,
+		errorId: P,
+		className: x,
+		children: /* @__PURE__ */ p(oe ? e : "div", {
+			className: d("wim-select", l.root, O && l.fullWidth, j?.root),
+			ref: ye,
+			onMouseMove: () => pe(!1),
+			"data-keyboard-nav": fe,
+			...xe,
+			children: [/* @__PURE__ */ p(t, { children: [/* @__PURE__ */ f(a, {
+				disabled: S,
+				allowClear: D,
+				hasValue: !!W,
+				onClear: ve,
+				intent: L,
 				rightIcons: [{
 					name: "ChevronDownIcon",
-					rotated: z
+					rotated: R
 				}],
-				width: j,
+				width: ae,
 				fullWidth: O,
-				styles: M?.inputBase,
-				children: /* @__PURE__ */ m("div", {
-					id: L,
-					className: p(c.trigger, z && c.open, C && c.disabled, M?.trigger),
-					onClick: he,
-					onKeyDown: X,
-					tabIndex: C ? -1 : 0,
+				styles: j?.inputBase,
+				children: /* @__PURE__ */ f("div", {
+					id: I,
+					className: d(l.trigger, R && l.open, S && l.disabled, j?.trigger),
+					onClick: _e,
+					onKeyDown: Y,
+					tabIndex: S ? -1 : 0,
 					role: "combobox",
-					"aria-expanded": z,
+					"aria-expanded": R,
 					"aria-haspopup": "listbox",
-					"aria-controls": z ? I : void 0,
-					"aria-disabled": C,
-					"aria-labelledby": P || $,
-					"aria-label": v ? void 0 : typeof Q == "string" ? Q : typeof _ == "string" ? _ : void 0,
-					"aria-describedby": F || ye,
-					"aria-required": b ? "true" : void 0,
-					"aria-invalid": R === "danger" ? "true" : "false",
-					"aria-activedescendant": z ? Z : void 0,
-					ref: pe,
-					children: /* @__PURE__ */ m("div", {
-						className: p(c.value, !q && c.placeholder, M?.value),
-						children: q ? q.label : _
+					"aria-controls": R ? F : void 0,
+					"aria-disabled": S,
+					"aria-labelledby": N || $,
+					"aria-label": _ ? void 0 : typeof Q == "string" ? Q : typeof g == "string" ? g : void 0,
+					"aria-describedby": P || be,
+					"aria-required": y ? "true" : void 0,
+					"aria-invalid": L === "danger" ? "true" : "false",
+					"aria-activedescendant": R ? Z : void 0,
+					ref: he,
+					children: /* @__PURE__ */ f("div", {
+						className: d(l.value, !K && l.placeholder, j?.value),
+						children: K ? K.label : g
 					})
 				})
-			}), /* @__PURE__ */ h(r, {
-				show: z && !C,
+			}), /* @__PURE__ */ p(r, {
+				show: R && !S,
 				preset: "fade",
-				className: p(c.dropdown, M?.dropdown),
-				children: [w && /* @__PURE__ */ m("div", {
-					className: p(c.search, M?.search),
-					children: /* @__PURE__ */ m("input", {
-						ref: me,
+				className: d(l.dropdown, j?.dropdown),
+				children: [C && /* @__PURE__ */ f("div", {
+					className: d(l.search, j?.search),
+					children: /* @__PURE__ */ f("input", {
+						ref: ge,
 						type: "text",
-						className: p(c.searchInput, M?.searchInput),
-						placeholder: T,
-						value: B,
+						className: d(l.searchInput, j?.searchInput),
+						placeholder: w,
+						value: z,
 						onChange: (e) => {
-							V(e.target.value), U(-1);
+							B(e.target.value), H(-1);
 						},
 						onClick: (e) => e.stopPropagation(),
-						onKeyDown: X,
-						"aria-label": T,
-						"aria-controls": I,
+						onKeyDown: Y,
+						"aria-label": w,
+						"aria-controls": F,
 						"aria-activedescendant": Z
 					})
-				}), /* @__PURE__ */ m("ul", {
-					id: I,
-					className: p(c.list, M?.list),
+				}), /* @__PURE__ */ f("ul", {
+					id: F,
+					className: d(l.list, j?.list),
 					role: "listbox",
-					"aria-labelledby": v ? P : $ || void 0,
-					children: K.length === 0 ? /* @__PURE__ */ m("li", {
-						className: p(c.empty, M?.empty),
+					"aria-labelledby": _ ? N : $ || void 0,
+					children: G.length === 0 ? /* @__PURE__ */ f("li", {
+						className: d(l.empty, j?.empty),
 						role: "option",
 						"aria-selected": "false",
-						children: A ?? ce("select.no_options")
-					}) : ve()
+						children: ie ?? ue("select.no_options")
+					}) : X()
 				})]
-			})] }), ae]
+			})] }), se]
 		})
 	});
 });
-g.displayName = "Select";
+m.displayName = "Select";
 //#endregion
-export { g as Select, g as default };
+export { m as Select, m as default };

package/dist/components/form/SignaturePad/SignaturePad.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../Button/Button.cjs"),r=require("../FieldTemplate/FieldTemplate.cjs"),i=require("./signature-pad.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=({width:e=400,height:c=200,penColor:l=`var(--wim-color-text-primary)`,penWidth:u=2,onChange:d,clearLabel:f,disabled:p=!1,className:m,style:h,label:g,error:_,required:v,layout:y=`vertical`,canvasAriaLabel:b})=>{let{t:x}=t.useWimTranslation([`common`,`components`]),S=f??x(`signature.clear`,{ns:`components`,defaultValue:x(`button.clear`)}),C=b??x(`a11y.signature_canvas`),w=(0,a.useRef)(null),T=(0,a.useRef)(!1),[E,D]=(0,a.useState)(!0),O=`wim-signature-pad-${(0,a.useId)()}`,k=g?`${O}-label`:void 0,A=_?`${O}-error`:void 0,j=(0,a.useCallback)(e=>{if(e.startsWith(`var(`)&&w.current){let t=e.match(/var\((--[^)]+)\)/)?.[1];if(t)return getComputedStyle(w.current).getPropertyValue(t).trim()||`#000`}return e},[]);(0,a.useLayoutEffect)(()=>{if(!w.current)return;let t=w.current,n=t.getContext(`2d`);if(!n)return;let r=window.devicePixelRatio||1;t.width=e*r,t.height=c*r,n.scale(r,r),n.lineCap=`round`,n.lineJoin=`round`},[e,c]);let M=(0,a.useCallback)(t=>{if(!w.current)return null;let n=w.current.getBoundingClientRect(),r,i;if(`touches`in t){if(t.touches.length===0)return null;r=t.touches[0].clientX,i=t.touches[0].clientY}else r=t.clientX,i=t.clientY;let a=r-n.left,o=i-n.top,s=e/n.width,l=c/n.height;return{x:a*s,y:o*l}},[e,c]),N=e=>{if(p)return;let t=M(e);if(!t||!w.current)return;let n=w.current.getContext(`2d`);n&&(T.current=!0,n.beginPath(),n.moveTo(t.x,t.y),n.strokeStyle=j(l),n.lineWidth=u)},P=e=>{if(!T.current||p||!w.current)return;let t=M(e);if(!t)return;let n=w.current.getContext(`2d`);n&&(n.lineTo(t.x,t.y),n.stroke(),D(!1))},F=()=>{if(T.current&&(T.current=!1,d&&w.current)){let e=w.current,t=e.getContext(`2d`);d(!t||t.getImageData(0,0,e.width,e.height).data.every((e,t)=>t%4!=3||e===0)?null:e.toDataURL())}},I=(0,a.useRef)(F);(0,a.useLayoutEffect)(()=>{I.current=F}),(0,a.useEffect)(()=>{let e=()=>I.current();return window.addEventListener(`mouseup`,e),()=>window.removeEventListener(`mouseup`,e)},[]);let L=(0,a.useRef)(!1);return(0,s.jsx)(r.FieldTemplate,{label:g,error:_,required:v,layout:y,labelId:k,errorId:A,className:m,children:(0,s.jsxs)(`div`,{className:(0,o.default)(`wim-signature-pad`,i.default.root,p&&i.default.disabled,_&&i.default.danger),style:h,children:[(0,s.jsx)(`div`,{className:i.default.canvasContainer,style:{width:e,maxWidth:`100%`,aspectRatio:`${e} / ${c}`,height:`auto`},children:(0,s.jsx)(`canvas`,{ref:w,"data-testid":`signature-canvas`,className:i.default.canvas,style:{width:`100%`,height:`100%`,display:`block`},onMouseDown:N,onMouseMove:P,onMouseUp:F,onTouchStart:N,onTouchMove:P,onTouchEnd:F,"aria-labelledby":g?k:void 0,"aria-describedby":A,role:`img`,"aria-label":g?void 0:C})}),(0,s.jsx)(`div`,{className:i.default.footer,children:(0,s.jsx)(n.Button,{variant:`outline`,size:`sm`,"data-testid":`signature-clear`,onMouseDown:()=>{L.current=!0},onClick:()=>{if(!L.current||(L.current=!1,p||!w.current))return;let e=w.current,t=e.getContext(`2d`);t&&(t.clearRect(0,0,e.width,e.height),D(!0),d&&d(null))},disabled:p||E,children:S})})]})})};exports.SignaturePad=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../../i18n/generated/components.cjs"),i=require("../Button/Button.cjs"),a=require("../../../i18n/generated/form.cjs"),o=require("../FieldTemplate/FieldTemplate.cjs"),s=require("./signature-pad.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=({width:e=400,height:d=200,penColor:f=`var(--wim-color-text-primary)`,penWidth:p=2,onChange:m,clearLabel:h,disabled:g=!1,className:_,style:v,label:y,error:b,required:x,layout:S=`vertical`,canvasAriaLabel:C})=>{let{t:w}=t.useWimTranslation([n.commonNs,r.componentsNs,a.formNs]),T=h??w(`signature.clear`,{ns:`components`,defaultValue:w(`button.clear`)}),E=C??w(`a11y.signature_canvas`),D=(0,c.useRef)(null),O=(0,c.useRef)(!1),[k,A]=(0,c.useState)(!0),j=`wim-signature-pad-${(0,c.useId)()}`,M=y?`${j}-label`:void 0,N=b?`${j}-error`:void 0,P=(0,c.useCallback)(e=>{if(e.startsWith(`var(`)&&D.current){let t=e.match(/var\((--[^)]+)\)/)?.[1];if(t)return getComputedStyle(D.current).getPropertyValue(t).trim()||`#000`}return e},[]);(0,c.useLayoutEffect)(()=>{if(!D.current)return;let t=D.current,n=t.getContext(`2d`);if(!n)return;let r=window.devicePixelRatio||1;t.width=e*r,t.height=d*r,n.scale(r,r),n.lineCap=`round`,n.lineJoin=`round`},[e,d]);let F=(0,c.useCallback)(t=>{if(!D.current)return null;let n=D.current.getBoundingClientRect(),r,i;if(`touches`in t){if(t.touches.length===0)return null;r=t.touches[0].clientX,i=t.touches[0].clientY}else r=t.clientX,i=t.clientY;let a=r-n.left,o=i-n.top,s=e/n.width,c=d/n.height;return{x:a*s,y:o*c}},[e,d]),I=e=>{if(g)return;let t=F(e);if(!t||!D.current)return;let n=D.current.getContext(`2d`);n&&(O.current=!0,n.beginPath(),n.moveTo(t.x,t.y),n.strokeStyle=P(f),n.lineWidth=p)},L=e=>{if(!O.current||g||!D.current)return;let t=F(e);if(!t)return;let n=D.current.getContext(`2d`);n&&(n.lineTo(t.x,t.y),n.stroke(),A(!1))},R=()=>{if(O.current&&(O.current=!1,m&&D.current)){let e=D.current,t=e.getContext(`2d`);m(!t||t.getImageData(0,0,e.width,e.height).data.every((e,t)=>t%4!=3||e===0)?null:e.toDataURL())}},z=(0,c.useRef)(R);(0,c.useLayoutEffect)(()=>{z.current=R}),(0,c.useEffect)(()=>{let e=()=>z.current();return window.addEventListener(`mouseup`,e),()=>window.removeEventListener(`mouseup`,e)},[]);let B=(0,c.useRef)(!1);return(0,u.jsx)(o.FieldTemplate,{label:y,error:b,required:x,layout:S,labelId:M,errorId:N,className:_,children:(0,u.jsxs)(`div`,{className:(0,l.default)(`wim-signature-pad`,s.default.root,g&&s.default.disabled,b&&s.default.danger),style:v,children:[(0,u.jsx)(`div`,{className:s.default.canvasContainer,style:{width:e,maxWidth:`100%`,aspectRatio:`${e} / ${d}`,height:`auto`},children:(0,u.jsx)(`canvas`,{ref:D,"data-testid":`signature-canvas`,className:s.default.canvas,style:{width:`100%`,height:`100%`,display:`block`},onMouseDown:I,onMouseMove:L,onMouseUp:R,onTouchStart:I,onTouchMove:L,onTouchEnd:R,"aria-labelledby":y?M:void 0,"aria-describedby":N,role:`img`,"aria-label":y?void 0:E})}),(0,u.jsx)(`div`,{className:s.default.footer,children:(0,u.jsx)(i.Button,{variant:`outline`,size:`sm`,"data-testid":`signature-clear`,onMouseDown:()=>{B.current=!0},onClick:()=>{if(!B.current||(B.current=!1,g||!D.current))return;let e=D.current,t=e.getContext(`2d`);t&&(t.clearRect(0,0,e.width,e.height),A(!0),m&&m(null))},disabled:g||k,children:T})})]})})};exports.SignaturePad=d;