@okam/stack-ui 2.0.1 → 2.1.0

package/index32.mjs

@@ -1,114 +1,134 @@
 "use client";
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { isEmpty as se } from "radashi";
-import { useRef as s, useMemo as v, useCallback as le } from "react";
-import { useFilter as ie, useComboBox as me } from "react-aria";
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
+import { isEmpty as ce } from "radashi";
+import { useRef as s, useEffect as pe, useCallback as me, useMemo as fe } from "react";
+import { useFilter as he, useComboBox as de } from "react-aria";
 import "react-hook-form";
-import { useComboBoxState as ce } from "react-stately";
-import { useDebounce as ue } from "./index78.mjs";
-import ae from "./index88.mjs";
-import { Box as F, BoxWithForwardRef as pe } from "./index7.mjs";
-import fe from "./index48.mjs";
-import de from "./index93.mjs";
-import he from "./index99.mjs";
-import { Popover as Re } from "./index56.mjs";
-import { Typography as $ } from "./index74.mjs";
-import { ControlledListBox as be } from "./index38.mjs";
-import xe from "./index127.mjs";
-function We(m) {
+import { useComboBoxState as Re } from "react-stately";
+import { useDebounce as be } from "./index78.mjs";
+import Pe from "./index88.mjs";
+import { Box as y, BoxWithForwardRef as xe } from "./index7.mjs";
+import Be from "./index48.mjs";
+import Ce from "./index93.mjs";
+import ge from "./index99.mjs";
+import { Popover as Ie } from "./index56.mjs";
+import { Typography as S } from "./index74.mjs";
+import { ControlledListBox as ke } from "./index38.mjs";
+import ve from "./index127.mjs";
+function Ke(l) {
   const {
-    children: y,
-    hookFormRef: p,
-    errorMessage: f,
-    themeName: e = "comboBox",
-    tokens: d,
-    customTheme: C,
-    label: h,
-    icon: I = /* @__PURE__ */ t(de, {}),
-    closeIcon: g = /* @__PURE__ */ t(he, {}),
-    isDisabled: S = !1,
-    isRequired: D = !1,
-    isReadOnly: M = !1,
-    defaultFilter: T,
-    inputRef: V,
-    buttonRef: w,
-    popoverRef: O,
-    listBoxRef: E,
-    debounceDelay: W = 200
-  } = m, j = s(null), c = V ?? j, z = s(null), R = w ?? z, A = s(null), b = O ?? A, L = s(null), x = E ?? L, l = s(null), { contains: q } = ie({ sensitivity: "base" }), o = ce({ ...m, defaultFilter: T ?? q }), { inputProps: G, listBoxProps: H, labelProps: J, buttonProps: K, errorMessageProps: Q, isInvalid: B } = me(
-    { ...m, inputRef: c, buttonRef: R, popoverRef: b, listBoxRef: x },
-    o
-  ), P = ue(o.collection, W), k = v(
-    () => ({
-      ...o,
-      collection: P
-    }),
-    [o, P]
-  ), { onPress: U, onPressStart: X, preventFocusOnPress: Pe, ...Y } = K, { isOpen: i, selectedItem: u, selectionManager: Z } = o, { isFocused: _, isSelectAll: ee, isEmpty: oe } = Z, N = !se(o.inputValue), n = {
-    ...d,
-    isInvalid: B,
-    isOpen: i,
-    isFocused: _,
-    hasValue: N,
-    hasSelectedItem: !oe,
-    isSelectAll: ee,
-    isReadOnly: M,
-    isDisabled: S,
-    isRequired: D
-  }, te = le(
+    children: V,
+    hookFormRef: d,
+    errorMessage: R,
+    themeName: o = "comboBox",
+    tokens: b,
+    customTheme: $,
+    label: P,
+    icon: F = /* @__PURE__ */ t(Ce, {}),
+    closeIcon: M = /* @__PURE__ */ t(ge, {}),
+    isDisabled: D = !1,
+    isRequired: E = !1,
+    isReadOnly: T = !1,
+    defaultFilter: w,
+    onInputChange: a,
+    onSelectionChange: O,
+    inputRef: W,
+    buttonRef: j,
+    popoverRef: z,
+    listBoxRef: A,
+    debounceDelay: L = 200,
+    isNonModal: x = !0
+  } = l, q = s(null), c = W ?? q, K = s(null), B = j ?? K, G = s(null), C = z ?? G, H = s(null), g = A ?? H, i = s(null), { contains: J } = he({ sensitivity: "base" }), Q = w ?? J, p = l.inputValue !== void 0, e = Re({
+    ...l,
+    defaultFilter: Q,
+    onInputChange: p ? a : void 0,
+    onSelectionChange: O
+  }), I = be(e.inputValue, L);
+  pe(() => {
+    p || a?.(I);
+  }, [I, p, a]);
+  const { inputProps: U, listBoxProps: X, labelProps: Y, buttonProps: Z, errorMessageProps: _, isInvalid: k } = de(
+    { ...l, inputRef: c, buttonRef: B, popoverRef: C, listBoxRef: g },
+    e
+  ), {
+    onPress: ee,
+    onPressStart: v,
+    onPressEnd: Ne,
+    onPressChange: ye,
+    preventFocusOnPress: oe,
+    ...te
+  } = Z, { isOpen: u, selectedItem: m, selectionManager: ne } = e, { isFocused: re, isSelectAll: se, isEmpty: le } = ne, f = !ce(e.inputValue), N = !le, n = {
+    ...b,
+    isInvalid: k,
+    isOpen: u,
+    isFocused: re,
+    hasValue: f,
+    hasSelectedItem: N,
+    isSelectAll: se,
+    isReadOnly: T,
+    isDisabled: D,
+    isRequired: E
+  }, ie = me(
     (r) => {
-      r != null && (p?.(r), c.current = r);
+      r != null && (d?.(r), c.current = r);
     },
-    [p, c]
-  ), ne = v(() => u != null && !i ? u.rendered : o.inputValue, [u, o.inputValue, i]), re = ae(`${e}.input`, d);
-  return /* @__PURE__ */ a(F, { themeName: `${e}.wrapper`, tokens: n, customTheme: C, children: [
-    h != null && /* @__PURE__ */ t($, { ...J, as: "label", themeName: `${e}.label`, tokens: n, children: h }),
-    /* @__PURE__ */ a(F, { themeName: `${e}.container`, children: [
-      /* @__PURE__ */ a(pe, { ref: l, themeName: `${e}.inputWrapper`, tokens: n, children: [
-        /* @__PURE__ */ t("input", { ...G, ref: te, value: ne, className: re }),
+    [d, c]
+  ), ue = fe(() => m != null && !u ? m.rendered : e.inputValue, [m, e.inputValue, u]), ae = Pe(`${o}.input`, b);
+  return /* @__PURE__ */ h(y, { themeName: `${o}.wrapper`, tokens: n, customTheme: $, children: [
+    P != null && /* @__PURE__ */ t(S, { ...Y, as: "label", themeName: `${o}.label`, tokens: n, children: P }),
+    /* @__PURE__ */ h(y, { themeName: `${o}.container`, children: [
+      /* @__PURE__ */ h(xe, { ref: i, themeName: `${o}.inputWrapper`, tokens: n, children: [
+        /* @__PURE__ */ t("input", { ...U, ref: ie, value: ue, className: ae }),
         /* @__PURE__ */ t(
-          xe,
+          ve,
           {
-            state: o,
-            themeName: `${e}.button`,
+            state: e,
+            themeName: `${o}.button`,
             tokens: n,
-            ...Y,
-            ref: R,
+            ...te,
+            preventFocusOnPress: oe,
+            ref: B,
             handlePress: (r) => {
-              U?.(r), X?.(r);
+              if (f || N) {
+                e.setSelectedKey(null), e.selectionManager.clearSelection(), e.setInputValue("");
+                return;
+              }
+              v != null ? v(r) : ee?.(r);
             },
-            children: /* @__PURE__ */ t(fe, { themeName: `${e}.icon`, tokens: n, icon: N ? g : I })
+            children: /* @__PURE__ */ t(Be, { themeName: `${o}.icon`, tokens: n, icon: f ? M : F })
           }
         )
       ] }),
-      i && l.current != null && k.collection.size > 0 && /* @__PURE__ */ t(
-        Re,
+      u && i.current != null && e.collection.size > 0 && /* @__PURE__ */ t(
+        Ie,
         {
-          themeName: `${e}.popover`,
+          themeName: `${o}.popover`,
           tokens: n,
-          state: o,
-          triggerRef: l,
+          state: e,
+          triggerRef: i,
           placement: "bottom",
-          sizeRef: l,
-          popoverRef: b,
+          sizeRef: i,
+          popoverRef: C,
+          isNonModal: x,
           autoFocus: !1,
+          contain: !x,
           children: /* @__PURE__ */ t(
-            be,
+            ke,
             {
-              ...H,
-              themeName: `${e}.list`,
+              ...X,
+              themeName: `${o}.list`,
               tokens: n,
-              state: k,
-              ref: x,
-              children: y
+              state: e,
+              ref: g,
+              children: V
             }
           )
         }
       ),
-      B && f != null && /* @__PURE__ */ t($, { tokens: n, themeName: `${e}.errorMessage`, ...Q, children: f })
+      k && R != null && /* @__PURE__ */ t(S, { tokens: n, themeName: `${o}.errorMessage`, ..._, children: R })
     ] })
   ] });
 }
 export {
-  We as default
+  Ke as default
 };

package/index35.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),r=require("react-aria"),a=require("./index7.js");function p({themeName:s="datePicker",tokens:n,...t}){const i=d.useRef(null),{state:o,children:c}={...t},{popoverProps:l,underlayProps:u}=r.usePopover({...t,popoverRef:i},o);return e.jsxs(r.Overlay,{children:[e.jsx(a.Box,{themeName:`${s}.calendarUnderlay`,tokens:n,...u}),e.jsxs(a.BoxWithForwardRef,{themeName:`${s}.calendarPopover`,tokens:n,...l,ref:i,children:[e.jsx(r.DismissButton,{onDismiss:o.close}),c,e.jsx(r.DismissButton,{onDismiss:o.close})]})]})}exports.CalendarPopover=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),r=require("react-aria"),i=require("./index7.js");function p({themeName:o="datePicker",tokens:s,...t}){const a=u.useRef(null),{state:n,children:c}={...t},{popoverProps:l,underlayProps:d}=r.usePopover({...t,popoverRef:a},n);return e.jsx(r.Overlay,{children:e.jsxs(i.Box,{themeName:`${o}.calendarPopoverWrapper`,tokens:s,children:[e.jsx(i.Box,{themeName:`${o}.calendarUnderlay`,tokens:s,...d}),e.jsxs(i.BoxWithForwardRef,{themeName:`${o}.calendarPopover`,tokens:s,...l,ref:a,children:[e.jsx(r.DismissButton,{onDismiss:n.close}),c,e.jsx(r.DismissButton,{onDismiss:n.close})]})]})})}exports.CalendarPopover=p;

package/index35.mjs

@@ -1,24 +1,24 @@
 "use client";
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { useRef as c } from "react";
-import { usePopover as d, Overlay as f, DismissButton as p } from "react-aria";
-import { Box as u, BoxWithForwardRef as v } from "./index7.mjs";
-function B({ themeName: e = "datePicker", tokens: s, ...n }) {
-  const i = c(null), { state: o, children: a } = { ...n }, { popoverProps: l, underlayProps: m } = d(
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { useRef as d } from "react";
+import { usePopover as f, Overlay as u, DismissButton as a } from "react-aria";
+import { Box as l, BoxWithForwardRef as v } from "./index7.mjs";
+function B({ themeName: o = "datePicker", tokens: e, ...n }) {
+  const i = d(null), { state: s, children: c } = { ...n }, { popoverProps: t, underlayProps: m } = f(
     {
       ...n,
       popoverRef: i
     },
-    o
+    s
   );
-  return /* @__PURE__ */ t(f, { children: [
-    /* @__PURE__ */ r(u, { themeName: `${e}.calendarUnderlay`, tokens: s, ...m }),
-    /* @__PURE__ */ t(v, { themeName: `${e}.calendarPopover`, tokens: s, ...l, ref: i, children: [
-      /* @__PURE__ */ r(p, { onDismiss: o.close }),
-      a,
-      /* @__PURE__ */ r(p, { onDismiss: o.close })
+  return /* @__PURE__ */ r(u, { children: /* @__PURE__ */ p(l, { themeName: `${o}.calendarPopoverWrapper`, tokens: e, children: [
+    /* @__PURE__ */ r(l, { themeName: `${o}.calendarUnderlay`, tokens: e, ...m }),
+    /* @__PURE__ */ p(v, { themeName: `${o}.calendarPopover`, tokens: e, ...t, ref: i, children: [
+      /* @__PURE__ */ r(a, { onDismiss: s.close }),
+      c,
+      /* @__PURE__ */ r(a, { onDismiss: s.close })
     ] })
-  ] });
+  ] }) });
 }
 export {
   B as CalendarPopover

package/index38.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),K=require("radashi"),E=require("react"),M=require("react-aria"),S=require("react-hook-form"),F=require("react-stately"),P=require("./index89.js"),T=require("./index7.js"),D=require("./index8.js"),v=require("./index74.js"),H=require("./index40.js"),I=require("./index39.js"),O={item:H,section:I};function p({ref:e,...r}){const{themeName:s="listBox",tokens:m,customTheme:g,label:c,escapeKeyBehavior:b="clearSelection",linkElementType:L=D.Anchor,isDisabled:x=!1,isRequired:u=!1,isInvalid:B=!1,isError:y=!1,errorMessage:f,disabledKeys:R,fieldRef:j,...q}=r,n=F.useListState(r),i=n.collection.getKeys(),h=t=>{if(t!=null){if(j?.(t),e==null)return;typeof e=="function"?e(t):typeof e=="object"&&(e.current=t)}},{listBoxProps:d,labelProps:N}=M.useListBox({...q,escapeKeyBehavior:b,label:c,disabledKeys:x?i:R},n,h),l={...m,isDisabled:x,isRequired:u,isInvalid:B,isError:y};return o.jsxs(T.Box,{themeName:`${s}.wrapper`,tokens:l,customTheme:g,children:[c!=null&&o.jsx(v.Typography,{...N,themeName:`${s}.label`,tokens:l,children:c}),o.jsx(T.BoxWithForwardRef,{ref:e,as:"ul",...d,themeName:`${s}.list`,tokens:l,children:[...n.collection].map(t=>{const{key:k}=t,a=t.type??"item",C=O[a]??H;return o.jsx(C,{[a]:t,state:n,tokens:{...m,type:a},themeName:`${s}.${a}`,linkElementType:L},k)})}),y&&f!=null&&o.jsx(v.Typography,{themeName:`${s}.errorMessage`,tokens:l,children:f})]})}p.displayName="ControlledListBox";function V(e){const r=F.useListState(e),s=E.useRef(null);return o.jsx(p,{...e,state:r,ref:s})}function $({ref:e,...r}){const{name:s,rules:m,isRequired:g,isDisabled:c,tokens:b,selectionMode:L="single",errorMessage:x,...u}=r,{control:B,setValue:y,watch:f,getValues:R}=S.useFormContext(),{selectedKeys:j=f(s),defaultSelectedKeys:q=R(s)}=u,{t:n}=P.useTranslation(),i={required:g?n("FORM.ERROR.REQUIRED")??"required":!1,disabled:c,...m};return o.jsx(S.Controller,{...u,defaultValue:q,name:s,control:B,rules:i,disabled:i?.disabled,render:({field:h,fieldState:d})=>{const{ref:N,...l}=h,t=!K.isEmpty(d.error),k={isDisabled:h.disabled??!1,isRequired:i?.required===!0||i?.required==="required",isInvalid:d.invalid,isError:t},a={...b,...k};return o.jsx(p,{...M.mergeProps(u,l,k,{onSelectionChange:C=>{y(s,C)}}),tokens:a,selectionMode:L,selectedKeys:j,defaultSelectedKeys:q,errorMessage:x??d.error?.message,ref:e})}})}$.displayName="ControlledReactHookFormListBox";function A(e){const r=F.useListState(e),s=E.useRef(null);return o.jsx($,{...e,state:r,ref:s})}exports.ControlledListBox=p;exports.ControlledReactHookFormListBox=$;exports.ListBox=V;exports.ReactHookFormListBox=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),O=require("radashi"),E=require("react"),M=require("react-aria"),v=require("react-hook-form"),H=require("react-stately"),A=require("./index89.js"),N=require("./index7.js"),I=require("./index8.js"),S=require("./index74.js"),K=require("./index40.js"),V=require("./index39.js"),W={item:K,section:V};function k({ref:e,...o}){const{state:r,themeName:c="listBox",tokens:m,customTheme:b,label:d,escapeKeyBehavior:h="clearSelection",linkElementType:R=I.Anchor,isDisabled:n=!1,isRequired:C=!1,isInvalid:L=!1,isError:x=!1,errorMessage:f,disabledKeys:y,fieldRef:q,...B}=o,g=r.collection.getKeys(),a=t=>{if(t!=null){if(q?.(t),e==null)return;typeof e=="function"?e(t):typeof e=="object"&&(e.current=t)}},{listBoxProps:j,labelProps:i}=M.useListBox({...B,escapeKeyBehavior:h,label:d,disabledKeys:n?g:y},r,a),l={...m,isDisabled:n,isRequired:C,isInvalid:L};return s.jsxs(N.Box,{themeName:`${c}.wrapper`,tokens:l,customTheme:b,children:[d!=null&&s.jsx(S.Typography,{...i,themeName:`${c}.label`,tokens:l,children:d}),s.jsx(N.BoxWithForwardRef,{ref:e,as:"ul",...j,themeName:`${c}.list`,tokens:l,children:Array.from(r.collection,t=>{const{key:F}=t,u=t.type??"item",p=W[u]??K;return s.jsx(p,{[u]:t,state:r,tokens:{...m,type:u},themeName:`${c}.${u}`,linkElementType:R},F)})}),x&&f!=null&&s.jsx(S.Typography,{themeName:`${c}.errorMessage`,tokens:{...l,isError:x},children:f})]})}k.displayName="ControlledListBox";function Q(e){const o=H.useListState(e),r=E.useRef(null);return s.jsx(k,{...e,state:o,ref:r})}function $({ref:e,...o}){const{name:r,rules:c,isRequired:m,isDisabled:b,tokens:d,selectionMode:h="single",errorMessage:R,...n}=o,{control:C,setValue:L,watch:x,getValues:f}=v.useFormContext(),{selectedKeys:y=x(r),defaultSelectedKeys:q=f(r)}=n,{t:B}=A.useTranslation(),g=E.useRef(null),a={required:m?B("FORM.ERROR.REQUIRED")??"required":!1,disabled:b,...c},j=H.useListState({...n,selectionMode:h,selectedKeys:y,children:o.children,onSelectionChange:i=>{n.onSelectionChange?.(i),L(r,i,{shouldDirty:!0,shouldTouch:!0}),g.current?.(i)}});return s.jsx(v.Controller,{...n,defaultValue:q,name:r,control:C,rules:a,disabled:a?.disabled,render:({field:i,fieldState:l})=>{const{ref:t,onChange:F,...u}=i;g.current=F;const p=!O.isEmpty(l.error),T={isDisabled:i.disabled??!1,isRequired:a?.required===!0||a?.required==="required",isInvalid:l.invalid,isError:p},{isError:_,...D}=T,P={...d,...D};return s.jsx(k,{...M.mergeProps(n,u,T),state:j,tokens:P,isError:p,selectionMode:h,selectedKeys:y,defaultSelectedKeys:q,errorMessage:R??l.error?.message,ref:e})}})}$.displayName="ControlledReactHookFormListBox";function U(e){const o=E.useRef(null);return s.jsx($,{...e,ref:o})}exports.ControlledListBox=k;exports.ControlledReactHookFormListBox=$;exports.ListBox=Q;exports.ReactHookFormListBox=U;

package/index38.mjs

@@ -1,130 +1,138 @@
 "use client";
-import { jsxs as $, jsx as s } from "react/jsx-runtime";
-import { isEmpty as D } from "radashi";
-import { useRef as K } from "react";
-import { useListBox as P, mergeProps as j } from "react-aria";
-import { useFormContext as H, Controller as I } from "react-hook-form";
-import { useListState as N } from "react-stately";
-import { useTranslation as O } from "./index89.mjs";
-import { Box as S, BoxWithForwardRef as V } from "./index7.mjs";
-import { Anchor as A } from "./index8.mjs";
-import { Typography as v } from "./index74.mjs";
+import { jsxs as P, jsx as l } from "react/jsx-runtime";
+import { isEmpty as S } from "radashi";
+import { useRef as F } from "react";
+import { useListBox as j, mergeProps as H } from "react-aria";
+import { useFormContext as I, Controller as V } from "react-hook-form";
+import { useListState as K } from "react-stately";
+import { useTranslation as A } from "./index89.mjs";
+import { Box as W, BoxWithForwardRef as Q } from "./index7.mjs";
+import { Anchor as U } from "./index8.mjs";
+import { Typography as T } from "./index74.mjs";
 import M from "./index40.mjs";
-import Q from "./index39.mjs";
-const U = {
+import _ from "./index39.mjs";
+const w = {
   item: M,
-  section: Q
+  section: _
 };
-function E({ ref: e, ...r }) {
+function N({ ref: e, ...t }) {
   const {
-    themeName: o = "listBox",
+    state: r,
+    themeName: a = "listBox",
     tokens: u,
-    customTheme: g,
-    label: m,
-    escapeKeyBehavior: x = "clearSelection",
-    linkElementType: B = A,
-    isDisabled: f = !1,
-    isRequired: c = !1,
-    isInvalid: C = !1,
+    customTheme: x,
+    label: d,
+    escapeKeyBehavior: f = "clearSelection",
+    linkElementType: C = U,
+    isDisabled: s = !1,
+    isRequired: E = !1,
+    isInvalid: R = !1,
     isError: p = !1,
-    errorMessage: y,
-    disabledKeys: L,
-    fieldRef: R,
-    ...h
-  } = r, n = N(r), i = n.collection.getKeys(), k = (t) => {
-    if (t != null) {
-      if (R?.(t), e == null)
+    errorMessage: h,
+    disabledKeys: y,
+    fieldRef: g,
+    ...B
+  } = t, k = r.collection.getKeys(), c = (o) => {
+    if (o != null) {
+      if (g?.(o), e == null)
         return;
-      typeof e == "function" ? e(t) : typeof e == "object" && (e.current = t);
+      typeof e == "function" ? e(o) : typeof e == "object" && (e.current = o);
     }
-  }, { listBoxProps: d, labelProps: F } = P(
+  }, { listBoxProps: L, labelProps: n } = j(
     {
-      ...h,
-      escapeKeyBehavior: x,
-      label: m,
-      disabledKeys: f ? i : L
+      ...B,
+      escapeKeyBehavior: f,
+      label: d,
+      disabledKeys: s ? k : y
     },
-    n,
-    k
-  ), l = {
+    r,
+    c
+  ), i = {
     ...u,
-    isDisabled: f,
-    isRequired: c,
-    isInvalid: C,
-    isError: p
+    isDisabled: s,
+    isRequired: E,
+    isInvalid: R
   };
-  return /* @__PURE__ */ $(S, { themeName: `${o}.wrapper`, tokens: l, customTheme: g, children: [
-    m != null && /* @__PURE__ */ s(v, { ...F, themeName: `${o}.label`, tokens: l, children: m }),
-    /* @__PURE__ */ s(
-      V,
+  return /* @__PURE__ */ P(W, { themeName: `${a}.wrapper`, tokens: i, customTheme: x, children: [
+    d != null && /* @__PURE__ */ l(T, { ...n, themeName: `${a}.label`, tokens: i, children: d }),
+    /* @__PURE__ */ l(
+      Q,
       {
         ref: e,
         as: "ul",
-        ...d,
-        themeName: `${o}.list`,
-        tokens: l,
-        children: [...n.collection].map((t) => {
-          const { key: b } = t, a = t.type ?? "item", q = U[a] ?? M;
-          return /* @__PURE__ */ s(
-            q,
+        ...L,
+        themeName: `${a}.list`,
+        tokens: i,
+        children: Array.from(r.collection, (o) => {
+          const { key: q } = o, m = o.type ?? "item", b = w[m] ?? M;
+          return /* @__PURE__ */ l(
+            b,
             {
-              [a]: t,
-              state: n,
-              tokens: { ...u, type: a },
-              themeName: `${o}.${a}`,
-              linkElementType: B
+              [m]: o,
+              state: r,
+              tokens: { ...u, type: m },
+              themeName: `${a}.${m}`,
+              linkElementType: C
             },
-            b
+            q
           );
         })
       }
     ),
-    p && y != null && /* @__PURE__ */ s(v, { themeName: `${o}.errorMessage`, tokens: l, children: y })
+    p && h != null && /* @__PURE__ */ l(T, { themeName: `${a}.errorMessage`, tokens: { ...i, isError: p }, children: h })
   ] });
 }
-E.displayName = "ControlledListBox";
-function re(e) {
-  const r = N(e), o = K(null);
-  return /* @__PURE__ */ s(E, { ...e, state: r, ref: o });
+N.displayName = "ControlledListBox";
+function le(e) {
+  const t = K(e), r = F(null);
+  return /* @__PURE__ */ l(N, { ...e, state: t, ref: r });
 }
-function T({ ref: e, ...r }) {
-  const { name: o, rules: u, isRequired: g, isDisabled: m, tokens: x, selectionMode: B = "single", errorMessage: f, ...c } = r, { control: C, setValue: p, watch: y, getValues: L } = H(), { selectedKeys: R = y(o), defaultSelectedKeys: h = L(o) } = c, { t: n } = O(), i = {
-    required: g ? n("FORM.ERROR.REQUIRED") ?? "required" : !1,
-    disabled: m,
-    ...u
-  };
-  return /* @__PURE__ */ s(
-    I,
+function $({ ref: e, ...t }) {
+  const { name: r, rules: a, isRequired: u, isDisabled: x, tokens: d, selectionMode: f = "single", errorMessage: C, ...s } = t, { control: E, setValue: R, watch: p, getValues: h } = I(), { selectedKeys: y = p(r), defaultSelectedKeys: g = h(r) } = s, { t: B } = A(), k = F(null), c = {
+    required: u ? B("FORM.ERROR.REQUIRED") ?? "required" : !1,
+    disabled: x,
+    ...a
+  }, L = K({
+    ...s,
+    selectionMode: f,
+    selectedKeys: y,
+    children: t.children,
+    onSelectionChange: (n) => {
+      s.onSelectionChange?.(n), R(r, n, { shouldDirty: !0, shouldTouch: !0 }), k.current?.(n);
+    }
+  });
+  return /* @__PURE__ */ l(
+    V,
     {
-      ...c,
-      defaultValue: h,
-      name: o,
-      control: C,
-      rules: i,
-      disabled: i?.disabled,
-      render: ({ field: k, fieldState: d }) => {
-        const { ref: F, ...l } = k, t = !D(d.error), b = {
-          isDisabled: k.disabled ?? !1,
-          isRequired: i?.required === !0 || i?.required === "required",
-          isInvalid: d.invalid,
-          isError: t
-        }, a = {
-          ...x,
-          ...b
+      ...s,
+      defaultValue: g,
+      name: r,
+      control: E,
+      rules: c,
+      disabled: c?.disabled,
+      render: ({ field: n, fieldState: i }) => {
+        const { ref: o, onChange: q, ...m } = n;
+        k.current = q;
+        const b = !S(i.error), v = {
+          isDisabled: n.disabled ?? !1,
+          isRequired: c?.required === !0 || c?.required === "required",
+          isInvalid: i.invalid,
+          isError: b
+        }, { isError: z, ...D } = v, O = {
+          ...d,
+          ...D
         };
-        return /* @__PURE__ */ s(
-          E,
+        return /* @__PURE__ */ l(
+          N,
           {
-            ...j(c, l, b, {
-              onSelectionChange: (q) => {
-                p(o, q);
-              }
-            }),
-            tokens: a,
-            selectionMode: B,
-            selectedKeys: R,
-            defaultSelectedKeys: h,
-            errorMessage: f ?? d.error?.message,
+            ...H(s, m, v),
+            state: L,
+            tokens: O,
+            isError: b,
+            selectionMode: f,
+            selectedKeys: y,
+            defaultSelectedKeys: g,
+            errorMessage: C ?? i.error?.message,
             ref: e
           }
         );
@@ -132,14 +140,14 @@ function T({ ref: e, ...r }) {
     }
   );
 }
-T.displayName = "ControlledReactHookFormListBox";
-function se(e) {
-  const r = N(e), o = K(null);
-  return /* @__PURE__ */ s(T, { ...e, state: r, ref: o });
+$.displayName = "ControlledReactHookFormListBox";
+function ae(e) {
+  const t = F(null);
+  return /* @__PURE__ */ l($, { ...e, ref: t });
 }
 export {
-  E as ControlledListBox,
-  T as ControlledReactHookFormListBox,
-  re as ListBox,
-  se as ReactHookFormListBox
+  N as ControlledListBox,
+  $ as ControlledReactHookFormListBox,
+  le as ListBox,
+  ae as ReactHookFormListBox
 };

package/index39.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";const o=require("react/jsx-runtime"),j=require("@react-aria/utils"),m=require("react-aria"),y=require("./index77.js"),p=require("./index7.js"),B=require("./index74.js"),f=require("./index40.js");function C({section:u,state:r,...s}){const{key:l,rendered:n,props:a,level:h,hasChildNodes:x,type:d}=u,{themeName:e="listBox.section",tokens:t,as:g="li",customTheme:P,...q}=y.mergeDefaultComponentProps(s,a),i={...t,type:d,level:h.toString(),hasChildNodes:x},{itemProps:k,headingProps:N,groupProps:$}=m.useListBoxSection(s);return o.jsxs(p.Box,{as:g,themeName:`${e}.wrapper`,tokens:i,...m.mergeProps(j.filterDOMProps(q),k),customTheme:P,children:[!!n&&o.jsx(B.Typography,{themeName:`${e}.heading`,tokens:t,...N,children:n}),o.jsx(p.Box,{as:"ul",themeName:`${e}.group`,tokens:i,...$,children:[...r.collection.getChildren?.(l)??[]].map(c=>o.jsx(f,{item:c,state:r,tokens:t,themeName:`${e}.item`},c.key))})]})}module.exports=C;
+"use strict";const o=require("react/jsx-runtime"),$=require("@react-aria/utils"),m=require("react-aria"),f=require("./index77.js"),u=require("./index7.js"),j=require("./index74.js"),B=require("./index40.js");function C({section:l,state:t,...s}){const{key:p,rendered:n,props:a,level:h,hasChildNodes:x,type:d}=l,{themeName:e="listBox.section",tokens:r,as:g="li",customTheme:P,...q}=f.mergeDefaultComponentProps(s,a),i={...r,type:d,level:h.toString(),hasChildNodes:x},{itemProps:k,headingProps:y,groupProps:N}=m.useListBoxSection(s);return o.jsxs(u.Box,{as:g,themeName:`${e}.wrapper`,tokens:i,...m.mergeProps($.filterDOMProps(q),k),customTheme:P,children:[!!n&&o.jsx(j.Typography,{themeName:`${e}.heading`,tokens:r,...y,children:n}),o.jsx(u.Box,{as:"ul",themeName:`${e}.group`,tokens:i,...N,children:Array.from(t.collection.getChildren?.(p)??[],c=>o.jsx(B,{item:c,state:t,tokens:r,themeName:`${e}.item`},c.key))})]})}module.exports=C;

package/index39.mjs

@@ -1,17 +1,17 @@
 "use client";
-import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import { jsxs as N, jsx as r } from "react/jsx-runtime";
 import { filterDOMProps as B } from "@react-aria/utils";
 import { useListBoxSection as $, mergeProps as C } from "react-aria";
 import { mergeDefaultComponentProps as S } from "./index77.mjs";
 import { Box as p } from "./index7.mjs";
 import { Typography as T } from "./index74.mjs";
 import j from "./index40.mjs";
-function q({
+function b({
   section: l,
-  state: r,
+  state: t,
   ...m
 }) {
-  const { key: c, rendered: s, props: a, level: h, hasChildNodes: d, type: f } = l, {
+  const { key: c, rendered: s, props: a, level: h, hasChildNodes: f, type: d } = l, {
     themeName: e = "listBox.section",
     tokens: o,
     as: g = "li",
@@ -19,11 +19,11 @@ function q({
     ...x
   } = S(m, a), i = {
     ...o,
-    type: f,
+    type: d,
     level: h.toString(),
-    hasChildNodes: d
-  }, { itemProps: P, headingProps: k, groupProps: N } = $(m);
-  return /* @__PURE__ */ y(
+    hasChildNodes: f
+  }, { itemProps: P, headingProps: k, groupProps: y } = $(m);
+  return /* @__PURE__ */ N(
     p,
     {
       as: g,
@@ -32,12 +32,12 @@ function q({
       ...C(B(x), P),
       customTheme: u,
       children: [
-        !!s && /* @__PURE__ */ t(T, { themeName: `${e}.heading`, tokens: o, ...k, children: s }),
-        /* @__PURE__ */ t(p, { as: "ul", themeName: `${e}.group`, tokens: i, ...N, children: [...r.collection.getChildren?.(c) ?? []].map((n) => /* @__PURE__ */ t(j, { item: n, state: r, tokens: o, themeName: `${e}.item` }, n.key)) })
+        !!s && /* @__PURE__ */ r(T, { themeName: `${e}.heading`, tokens: o, ...k, children: s }),
+        /* @__PURE__ */ r(p, { as: "ul", themeName: `${e}.group`, tokens: i, ...y, children: Array.from(t.collection.getChildren?.(c) ?? [], (n) => /* @__PURE__ */ r(j, { item: n, state: t, tokens: o, themeName: `${e}.item` }, n.key)) })
       ]
     }
   );
 }
 export {
-  q as default
+  b as default
 };

package/index43.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";const e=require("react/jsx-runtime"),m=require("react"),b=require("react-aria"),C=require("react-stately"),D=require("./index88.js"),v=require("./index90.js"),c=require("./index7.js"),w=require("./index8.js"),F=require("./index99.js"),R=require("./index130.js"),T=require("./index74.js");function I({value:t}){return t===""?e.jsx(R,{width:"16",height:"16"}):e.jsx(F,{width:"16",height:"16"})}function M(t){const{setUserSearchQuery:u}=v.useUserQueryValHook(),{label:h,themeName:s="search",tokens:p,customTheme:g,disabled:j,errorMessage:l,placeholder:q,icon:o,isDisabled:f}=t,n=f||j,d={...t,isDisabled:n},a=C.useSearchFieldState(d),x=m.useRef(null),{labelProps:k,inputProps:i,errorMessageProps:$,clearButtonProps:S}=b.useSearchField(d,a,x),y=m.useCallback(P=>{u(a.value),i.onChange?.(P)},[u,a.value,i]),B=l!=null,r={...p,isError:B,isDisabled:n??!1},N=D(`${s}.input`,r,g);return e.jsxs(c.Box,{themeName:`${s}.wrapper`,tokens:r,"aria-disabled":n??!1,children:[h!=null&&e.jsx(c.Box,{...k,as:"label",themeName:`${s}.label`,tokens:r,children:h}),e.jsxs(c.Box,{themeName:`${s}.container`,tokens:r,children:[e.jsx("input",{ref:x,...i,onChange:y,placeholder:q,className:N,disabled:n}),e.jsx(b.FocusRing,{focusRingClass:"has-focus-ring",children:e.jsxs(w.Button,{isDisabled:n,handlePress:S.onPress,tokens:{isIconOnly:!0,buttonStyle:"hollow",isDisabled:n??!1},themeName:`${s}.icon`,"aria-label":"clear",children:[o==null&&e.jsx(I,{value:a.value}),o!=null&&o]})})]}),l!=null&&e.jsx(T.Typography,{themeName:`${s}.errorMessage`,tokens:r,...$,children:l})]})}module.exports=M;
+"use strict";const e=require("react/jsx-runtime"),m=require("react"),C=require("react-aria"),v=require("react-stately"),w=require("./index88.js"),A=require("./index90.js"),c=require("./index7.js"),T=require("./index8.js"),F=require("./index99.js"),M=require("./index130.js"),I=require("./index74.js");function Q({value:a,clearButtonProps:r,isDisabled:o,tokens:s,themeName:i}){return a===""?e.jsx(c.Box,{as:"span",themeName:`${i}.icon`,tokens:s,"aria-hidden":"true",children:e.jsx(M,{width:"16",height:"16"})}):e.jsx(T.Button,{...r,isDisabled:o,handlePress:r.onPress,tokens:{...s,isIconOnly:!0,buttonStyle:"hollow"},themeName:`${i}.button`,children:e.jsx(F,{width:"16",height:"16"})})}function R(a){const{setUserSearchQuery:r}=A.useUserQueryValHook(),{label:o,themeName:s="search",tokens:i,customTheme:b,disabled:p,errorMessage:u,placeholder:j,renderAction:q,isDisabled:k}=a,t=k||p,d={...a,isDisabled:t},l=v.useSearchFieldState(d),x=m.useRef(null),{labelProps:$,inputProps:h,errorMessageProps:f,clearButtonProps:g}=C.useSearchField(d,l,x),N=m.useCallback(D=>{r(l.value),h.onChange?.(D)},[r,l.value,h]),S=u!=null,n={...i,isError:S,isDisabled:t??!1},y=w(`${s}.input`,n,b),P=q??Q,B={value:l.value,clearButtonProps:g,isDisabled:t??!1,tokens:n,themeName:s??"search"};return e.jsxs(c.Box,{themeName:`${s}.wrapper`,tokens:n,"aria-disabled":t??!1,children:[o!=null&&e.jsx(c.Box,{...$,as:"label",themeName:`${s}.label`,tokens:n,children:o}),e.jsxs(c.Box,{themeName:`${s}.container`,tokens:n,children:[e.jsx("input",{ref:x,...h,onChange:N,placeholder:j,className:y,disabled:t}),e.jsx(P,{...B})]}),u!=null&&e.jsx(I.Typography,{themeName:`${s}.errorMessage`,tokens:n,...f,children:u})]})}module.exports=R;