@cronocode/react-box 3.1.2 → 3.1.6

package/components/dropdown.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),t=require("react"),f=require("../box.cjs"),G=require("../core.cjs"),Q=require("./baseSvg.cjs"),X=require("./button.cjs"),Z=require("./flex.cjs"),L=require("./textbox.cjs"),ee=require("./tooltip.cjs");function te(p,s){const{name:M,defaultValue:h,value:x,multiple:c,isSearchable:y,searchPlaceholder:B,children:j,hideIcon:H,onChange:S,props:K,...Y}=p,[J,w]=t.useState(Array.isArray(h)?h:h?[h]:[]),i="value"in p?Array.isArray(x)?x:x?[x]:[]:J,[b,_]=t.useState(""),[a,T,I]=G.useVisibility(),k=t.useRef(null),U=t.useRef(null),[O,F]=t.useState(0),D=t.useMemo(()=>O>window.innerHeight/2,[O]),W=t.useMemo(()=>D?I.current?.getBoundingClientRect().height??0:0,[D,I]),l=t.useMemo(()=>(Array.isArray(j)?j:[j]).flatMap(e=>e),[j]),V=t.useMemo(()=>l.filter(e=>e.type?.displayName==="DropdownItem"),[l]),d=t.useMemo(()=>V.filter(e=>y&&b?R(e).toLowerCase().includes(b.toLowerCase()):!0),[y,b,l]),g=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownUnselect"),[l]),q=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownSelectAll"),[l]),N=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownEmptyItem"),[l]),A=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownDisplay"),[l]),$=t.useMemo(()=>{if(A)return typeof A.props.children=="function"?A.props.children(i,a):A.props.children;const e=d.filter(n=>i.includes(n.props.value));if(c&&e.length>1)return e.map(n=>R(n)).join(", ");const r=e.at(0);return r?.props.children??r?.props.value??(c?null:g?.props.children)},[c,d,i,g,a]),P=t.useCallback((e,...r)=>{if(r.length===0)w([]),S?.(void 0,[]);else if(c&&r.length>1){const n=r.map(u=>u.props.value);w(n),S?.(void 0,n)}else if(r.length===1){const n=r[0];if(c){const u=i.filter(C=>C!==n.props.value);u.length===i.length&&u.push(n.props.value),w(u),S?.(n.props.value,u)}else w([n.props.value]),S?.(n.props.value,[n.props.value])}c?(e.stopPropagation(),setTimeout(()=>k.current?.focus(),0)):(T(!1),setTimeout(()=>I.current?.focus(),0))},[c,i,w]);t.useEffect(()=>{a?setTimeout(()=>{k.current?.focus(),U.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({block:"nearest"})},0):_("")},[a]);const E=q&&c&&d.length>i.length,z=g&&d.length>0&&!E;return o.jsxs(f.default,{width:"fit-content",children:[i.map(e=>o.jsx(L.default,{ref:s,name:M,type:"hidden",value:JSON.stringify(e)??""},JSON.stringify(e))),o.jsxs(X.default,{ref:I,type:"button",component:"dropdown",onClick:()=>T(e=>!e),props:{tabIndex:0,...K},...Y,children:[y&&o.jsx(L.default,{display:a&&y?"block":"none",clean:!0,flex1:!0,width:1,minHeight:5,placeholder:B,value:b,onChange:e=>_(e.target.value),ref:k,props:{onClick:e=>{a&&y&&e.stopPropagation()}}}),o.jsx(Z.default,{component:"dropdown.display",display:a&&y?"none":"flex",children:$??o.jsx(o.Fragment,{children:" "})}),!H&&o.jsx(f.default,{children:o.jsx(Q.default,{viewBox:"0 0 10 6",width:"0.6rem",rotate:a?180:0,children:o.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})})]}),a&&o.jsx(ee.default,{ref:U,position:"absolute",width:"fit",top:D?void 0:0,bottom:D?2:void 0,style:{transform:`translateY(-${W}px)`},onPositionChange:e=>F(e.top-window.scrollY),children:(d.length>0||N)&&o.jsxs(f.default,{component:"dropdown.items",children:[z&&o.jsx(f.default,{component:"dropdown.unselect",selected:i.length===0,...g.props,props:{...g.props.props,onClick:e=>P(e)}}),E&&o.jsx(f.default,{component:"dropdown.selectAll",...q.props,props:{...q.props.props,onClick:e=>P(e,...V)}}),d.map(e=>{const{value:r,onClick:n,...u}=e.props;return o.jsx(f.default,{component:"dropdown.item",variant:c?"multiple":void 0,selected:i.includes(r),...u,props:{...u.props,onClick:C=>{n?.(C),P(C,e)}}},r)}),d.length===0&&N&&o.jsx(f.default,{component:"dropdown.emptyItem",...N.props})]})})]})}function v(p){const s=M=>null;return s.displayName=p,s}const m=t.forwardRef(te);m.Item=v("DropdownItem");m.Unselect=v("DropdownUnselect");m.SelectAll=v("DropdownSelectAll");m.EmptyItem=v("DropdownEmptyItem");m.Display=v("DropdownDisplay");m.displayName="Dropdown";function R(p){if(p==null)return"";if(typeof p=="object"){const s=p.props?.children;return s==null?"":typeof s=="object"?(Array.isArray(s)?s:[s]).map(h=>R(h)).join(""):s.toString()}return p.toString()}exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),t=require("react"),h=require("../box.cjs"),oe=require("../core.cjs"),ne=require("./baseSvg.cjs"),re=require("./button.cjs"),se=require("./checkbox.cjs"),W=require("./flex.cjs"),z=require("./textbox.cjs"),le=require("./tooltip.cjs");function ie(i,r){const{name:k,defaultValue:m,value:x,multiple:c=!1,isSearchable:y,searchPlaceholder:F,children:j,hideIcon:T,showCheckbox:$,onChange:S,props:G,...U}=i,b=U.variant==="compact",[Q,w]=t.useState(Array.isArray(m)?m:m?[m]:[]),p="value"in i?Array.isArray(x)?x:x?[x]:[]:Q,[C,V]=t.useState(""),[a,E,I]=oe.useVisibility(),q=t.useRef(null),L=t.useRef(null),[D,X]=t.useState({top:0,scrollY:0}),N=t.useMemo(()=>D.top-D.scrollY>window.innerHeight/2,[D.top,D.scrollY]),B=t.useMemo(()=>I.current?.getBoundingClientRect(),[I.current]),Z=t.useMemo(()=>N?0:B?.height??0,[N,B]),l=t.useMemo(()=>(Array.isArray(j)?j:[j]).flatMap(e=>e),[j]),K=t.useMemo(()=>l.filter(e=>e.type?.displayName==="DropdownItem"),[l]),d=t.useMemo(()=>K.filter(e=>y&&C?O(e).toLowerCase().includes(C.toLowerCase()):!0),[y,C,l]),v=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownUnselect"),[l]),P=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownSelectAll"),[l]),_=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownEmptyItem"),[l]),A=t.useMemo(()=>l.find(e=>e.type?.displayName==="DropdownDisplay"),[l]),ee=t.useMemo(()=>{if(a&&y)return null;if(A)return typeof A.props.children=="function"?A.props.children(p,a):A.props.children;const e=d.filter(n=>p.includes(n.props.value));if(c&&e.length>1)return e.map(n=>O(n)).join(", ");const s=e.at(0);return s?.props.children??s?.props.value??(c?null:v?.props.children)},[c,d,p,v,a]),R=t.useCallback((e,...s)=>{if(s.length===0)w([]),S?.(void 0,[]);else if(c&&s.length>1){const n=s.map(u=>u.props.value);w(n),S?.(void 0,n)}else if(s.length===1){const n=s[0];if(c){const u=p.filter(M=>M!==n.props.value);u.length===p.length&&u.push(n.props.value),w(u),S?.(n.props.value,u)}else w([n.props.value]),S?.(n.props.value,[n.props.value])}c?(e.stopPropagation(),setTimeout(()=>q.current?.focus(),0)):(E(!1),setTimeout(()=>I.current?.focus(),0))},[c,p,w]);t.useEffect(()=>{a?setTimeout(()=>{q.current?.focus(),L.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({block:"nearest"})},0):V("")},[a]);const H=P&&c&&d.length>p.length,te=v&&d.length>0&&!H;return o.jsxs(re.default,{ref:I,onClick:()=>E(e=>!e),component:"dropdown",props:{tabIndex:0,...G},position:"relative",pr:T?void 0:4,...U,children:[p.map(e=>o.jsx(z.default,{ref:r,name:k,type:"hidden",value:JSON.stringify(e)??""},JSON.stringify(e))),y&&a&&o.jsx(W.default,{ai:"center",position:"absolute",inset:0,p:3,children:o.jsx(z.default,{clean:!0,placeholder:F,value:C,onChange:e=>V(e.target.value),ref:q,color:"currentColor",width:"fit",props:{onClick:e=>{a&&y&&e.stopPropagation()}}})})," ",ee," ",!T&&o.jsx(W.default,{component:"dropdown.icon",children:o.jsx(ne.default,{viewBox:"0 0 10 6",width:"0.6rem",rotate:a?180:0,children:o.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})}),o.jsx(h.default,{position:"absolute",inset:0,children:a&&o.jsx(le.default,{ref:L,minWidth:"fit-content",style:{transform:N?"translateY(calc(-100% - 2px))":`translateY(${Z}px)`},onPositionChange:e=>X({top:e.top,scrollY:e.windowScrollY}),children:(d.length>0||_)&&o.jsxs(h.default,{component:"dropdown.items",children:[te&&o.jsx(h.default,{component:"dropdown.unselect",variant:{compact:b},selected:p.length===0,...v.props,props:{...v.props.props,onClick:e=>R(e)}}),H&&o.jsx(h.default,{component:"dropdown.selectAll",variant:{compact:b},...P.props,props:{...P.props.props,onClick:e=>R(e,...K)}}),d.map(e=>{const{value:s,onClick:n,children:u,...M}=e.props,Y=p.includes(s);return o.jsx(h.default,{component:"dropdown.item",variant:{multiple:c,compact:b},selected:Y,...M,children:$&&c?o.jsxs(o.Fragment,{children:[o.jsx(se.default,{readOnly:!0,checked:Y}),u]}):u,props:{...M.props,"aria-selected":Y,onClick:J=>{n?.(J),R(J,e)}}},s)}),d.length===0&&_&&o.jsx(h.default,{component:"dropdown.emptyItem",variant:{compact:b},..._.props})]})})})]})}function g(i){const r=k=>null;return r.displayName=i,r}const f=t.forwardRef(ie);f.Item=g("DropdownItem");f.Unselect=g("DropdownUnselect");f.SelectAll=g("DropdownSelectAll");f.EmptyItem=g("DropdownEmptyItem");f.Display=g("DropdownDisplay");f.displayName="Dropdown";function O(i){if(i==null)return"";if(typeof i=="object"){const r=i.props?.children;return r==null?"":typeof r=="object"?(Array.isArray(r)?r:[r]).map(m=>O(m)).join(""):r.toString()}return i.toString()}exports.default=f;

package/components/dropdown.d.ts

@@ -1,6 +1,7 @@
 import { RefAttributes } from 'react';
 import { BoxProps } from '../box';
-interface Props<TVal> extends Omit<BoxProps<'button'>, 'ref'> {
+import { ComponentsAndVariants } from '../types';
+interface Props<TVal, TKey extends keyof ComponentsAndVariants = 'dropdown'> extends Omit<BoxProps<'button', TKey>, 'ref' | 'tag'> {
     name?: string;
     defaultValue?: TVal | TVal[];
     value?: TVal | TVal[];
@@ -8,6 +9,8 @@ interface Props<TVal> extends Omit<BoxProps<'button'>, 'ref'> {
     isSearchable?: boolean;
     searchPlaceholder?: string;
     hideIcon?: boolean;
+    /** Show checkbox for each item in multiple selection mode */
+    showCheckbox?: boolean;
     onChange?: (value: TVal | undefined, values: TVal[]) => void;
 }
 interface DropdownItemProps<TVal> extends BoxProps {

package/components/dropdown.mjs

@@ -1,169 +1,178 @@
-import { jsxs as B, jsx as r, Fragment as Z } from "react/jsx-runtime";
-import { forwardRef as ee, useState as V, useRef as F, useMemo as i, useCallback as oe, useEffect as te } from "react";
-import m from "../box.mjs";
-import { b as ne } from "../core.mjs";
-import re from "./baseSvg.mjs";
-import se from "./button.mjs";
-import le from "./flex.mjs";
-import J from "./textbox.mjs";
-import pe from "./tooltip.mjs";
-function ie(l, t) {
+import { jsxs as V, jsx as o, Fragment as se } from "react/jsx-runtime";
+import { forwardRef as le, useState as R, useRef as _, useMemo as l, useCallback as pe, useEffect as ie } from "react";
+import f from "../box.mjs";
+import { b as ce } from "../core.mjs";
+import ae from "./baseSvg.mjs";
+import de from "./button.mjs";
+import ue from "./checkbox.mjs";
+import $ from "./flex.mjs";
+import G from "./textbox.mjs";
+import me from "./tooltip.mjs";
+function fe(p, r) {
   const {
-    name: N,
-    defaultValue: f,
-    value: I,
-    multiple: c,
-    isSearchable: h,
-    searchPlaceholder: M,
-    children: D,
-    hideIcon: q,
-    onChange: x,
-    props: W,
-    ..._
-  } = l, [$, w] = V(Array.isArray(f) ? f : f ? [f] : []), p = "value" in l ? Array.isArray(I) ? I : I ? [I] : [] : $, [S, R] = V(""), [a, E, A] = ne(), P = F(null), L = F(null), [H, z] = V(0), C = i(() => H > window.innerHeight / 2, [H]), G = i(() => C ? A.current?.getBoundingClientRect().height ?? 0 : 0, [C, A]), s = i(
-    () => (Array.isArray(D) ? D : [D]).flatMap((e) => e),
-    [D]
-  ), K = i(() => s.filter((e) => e.type?.displayName === "DropdownItem"), [s]), u = i(() => K.filter((e) => h && S ? O(e).toLowerCase().includes(S.toLowerCase()) : !0), [h, S, s]), g = i(() => s.find((e) => e.type?.displayName === "DropdownUnselect"), [s]), T = i(() => s.find((e) => e.type?.displayName === "DropdownSelectAll"), [s]), j = i(() => s.find((e) => e.type?.displayName === "DropdownEmptyItem"), [s]), b = i(() => s.find((e) => e.type?.displayName === "DropdownDisplay"), [s]), Q = i(() => {
-    if (b)
-      return typeof b.props.children == "function" ? b.props.children(p, a) : b.props.children;
-    const e = u.filter((o) => p.includes(o.props.value));
-    if (c && e.length > 1)
-      return e.map((o) => O(o)).join(", ");
+    name: P,
+    defaultValue: m,
+    value: C,
+    multiple: i = !1,
+    isSearchable: y,
+    searchPlaceholder: Q,
+    children: S,
+    hideIcon: L,
+    showCheckbox: X,
+    onChange: I,
+    props: Z,
+    ...K
+  } = p, x = K.variant === "compact", [ee, w] = R(Array.isArray(m) ? m : m ? [m] : []), c = "value" in p ? Array.isArray(C) ? C : C ? [C] : [] : ee, [D, F] = R(""), [a, H, b] = ce(), T = _(null), J = _(null), [A, te] = R({ top: 0, scrollY: 0 }), Y = l(
+    () => A.top - A.scrollY > window.innerHeight / 2,
+    [A.top, A.scrollY]
+  ), M = l(() => b.current?.getBoundingClientRect(), [b.current]), oe = l(() => Y ? 0 : M?.height ?? 0, [Y, M]), s = l(
+    () => (Array.isArray(S) ? S : [S]).flatMap((e) => e),
+    [S]
+  ), W = l(() => s.filter((e) => e.type?.displayName === "DropdownItem"), [s]), u = l(() => W.filter((e) => y && D ? E(e).toLowerCase().includes(D.toLowerCase()) : !0), [y, D, s]), v = l(() => s.find((e) => e.type?.displayName === "DropdownUnselect"), [s]), j = l(() => s.find((e) => e.type?.displayName === "DropdownSelectAll"), [s]), U = l(() => s.find((e) => e.type?.displayName === "DropdownEmptyItem"), [s]), k = l(() => s.find((e) => e.type?.displayName === "DropdownDisplay"), [s]), re = l(() => {
+    if (a && y) return null;
+    if (k)
+      return typeof k.props.children == "function" ? k.props.children(c, a) : k.props.children;
+    const e = u.filter((t) => c.includes(t.props.value));
+    if (i && e.length > 1)
+      return e.map((t) => E(t)).join(", ");
     const n = e.at(0);
-    return n?.props.children ?? n?.props.value ?? (c ? null : g?.props.children);
-  }, [c, u, p, g, a]), U = oe(
+    return n?.props.children ?? n?.props.value ?? (i ? null : v?.props.children);
+  }, [i, u, c, v, a]), B = pe(
     (e, ...n) => {
       if (n.length === 0)
-        w([]), x?.(void 0, []);
-      else if (c && n.length > 1) {
-        const o = n.map((d) => d.props.value);
-        w(o), x?.(void 0, o);
+        w([]), I?.(void 0, []);
+      else if (i && n.length > 1) {
+        const t = n.map((d) => d.props.value);
+        w(t), I?.(void 0, t);
       } else if (n.length === 1) {
-        const o = n[0];
-        if (c) {
-          const d = p.filter((k) => k !== o.props.value);
-          d.length === p.length && d.push(o.props.value), w(d), x?.(o.props.value, d);
+        const t = n[0];
+        if (i) {
+          const d = c.filter((N) => N !== t.props.value);
+          d.length === c.length && d.push(t.props.value), w(d), I?.(t.props.value, d);
         } else
-          w([o.props.value]), x?.(o.props.value, [o.props.value]);
+          w([t.props.value]), I?.(t.props.value, [t.props.value]);
       }
-      c ? (e.stopPropagation(), setTimeout(() => P.current?.focus(), 0)) : (E(!1), setTimeout(() => A.current?.focus(), 0));
+      i ? (e.stopPropagation(), setTimeout(() => T.current?.focus(), 0)) : (H(!1), setTimeout(() => b.current?.focus(), 0));
     },
-    [c, p, w]
+    [i, c, w]
   );
-  te(() => {
+  ie(() => {
     a ? setTimeout(() => {
-      P.current?.focus(), L.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
-    }, 0) : R("");
+      T.current?.focus(), J.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
+    }, 0) : F("");
   }, [a]);
-  const Y = T && c && u.length > p.length, X = g && u.length > 0 && !Y;
-  return /* @__PURE__ */ B(m, { width: "fit-content", children: [
-    p.map((e) => /* @__PURE__ */ r(J, { ref: t, name: N, type: "hidden", value: JSON.stringify(e) ?? "" }, JSON.stringify(e))),
-    /* @__PURE__ */ B(
-      se,
-      {
-        ref: A,
-        type: "button",
-        component: "dropdown",
-        onClick: () => E((e) => !e),
-        props: { tabIndex: 0, ...W },
-        ..._,
-        children: [
-          h && /* @__PURE__ */ r(
-            J,
-            {
-              display: a && h ? "block" : "none",
-              clean: !0,
-              flex1: !0,
-              width: 1,
-              minHeight: 5,
-              placeholder: M,
-              value: S,
-              onChange: (e) => R(e.target.value),
-              ref: P,
-              props: {
-                onClick: (e) => {
-                  a && h && e.stopPropagation();
-                }
+  const q = j && i && u.length > c.length, ne = v && u.length > 0 && !q;
+  return /* @__PURE__ */ V(
+    de,
+    {
+      ref: b,
+      onClick: () => H((e) => !e),
+      component: "dropdown",
+      props: { tabIndex: 0, ...Z },
+      position: "relative",
+      pr: L ? void 0 : 4,
+      ...K,
+      children: [
+        c.map((e) => /* @__PURE__ */ o(G, { ref: r, name: P, type: "hidden", value: JSON.stringify(e) ?? "" }, JSON.stringify(e))),
+        y && a && /* @__PURE__ */ o($, { ai: "center", position: "absolute", inset: 0, p: 3, children: /* @__PURE__ */ o(
+          G,
+          {
+            clean: !0,
+            placeholder: Q,
+            value: D,
+            onChange: (e) => F(e.target.value),
+            ref: T,
+            color: "currentColor",
+            width: "fit",
+            props: {
+              onClick: (e) => {
+                a && y && e.stopPropagation();
               }
             }
-          ),
-          /* @__PURE__ */ r(le, { component: "dropdown.display", display: a && h ? "none" : "flex", children: Q ?? /* @__PURE__ */ r(Z, { children: " " }) }),
-          !q && /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(re, { viewBox: "0 0 10 6", width: "0.6rem", rotate: a ? 180 : 0, children: /* @__PURE__ */ r("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) }) })
-        ]
-      }
-    ),
-    a && /* @__PURE__ */ r(
-      pe,
-      {
-        ref: L,
-        position: "absolute",
-        width: "fit",
-        top: C ? void 0 : 0,
-        bottom: C ? 2 : void 0,
-        style: { transform: `translateY(-${G}px)` },
-        onPositionChange: (e) => z(e.top - window.scrollY),
-        children: (u.length > 0 || j) && /* @__PURE__ */ B(m, { component: "dropdown.items", children: [
-          X && /* @__PURE__ */ r(
-            m,
-            {
-              component: "dropdown.unselect",
-              selected: p.length === 0,
-              ...g.props,
-              props: { ...g.props.props, onClick: (e) => U(e) }
-            }
-          ),
-          Y && /* @__PURE__ */ r(
-            m,
-            {
-              component: "dropdown.selectAll",
-              ...T.props,
-              props: { ...T.props.props, onClick: (e) => U(e, ...K) }
-            }
-          ),
-          u.map((e) => {
-            const { value: n, onClick: o, ...d } = e.props;
-            return /* @__PURE__ */ r(
-              m,
-              {
-                component: "dropdown.item",
-                variant: c ? "multiple" : void 0,
-                selected: p.includes(n),
-                ...d,
-                props: {
-                  ...d.props,
-                  onClick: (k) => {
-                    o?.(k), U(k, e);
-                  }
+          }
+        ) }),
+        " ",
+        re,
+        " ",
+        !L && /* @__PURE__ */ o($, { component: "dropdown.icon", children: /* @__PURE__ */ o(ae, { viewBox: "0 0 10 6", width: "0.6rem", rotate: a ? 180 : 0, children: /* @__PURE__ */ o("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) }) }),
+        /* @__PURE__ */ o(f, { position: "absolute", inset: 0, children: a && /* @__PURE__ */ o(
+          me,
+          {
+            ref: J,
+            minWidth: "fit-content",
+            style: { transform: Y ? "translateY(calc(-100% - 2px))" : `translateY(${oe}px)` },
+            onPositionChange: (e) => te({ top: e.top, scrollY: e.windowScrollY }),
+            children: (u.length > 0 || U) && /* @__PURE__ */ V(f, { component: "dropdown.items", children: [
+              ne && /* @__PURE__ */ o(
+                f,
+                {
+                  component: "dropdown.unselect",
+                  variant: { compact: x },
+                  selected: c.length === 0,
+                  ...v.props,
+                  props: { ...v.props.props, onClick: (e) => B(e) }
                 }
-              },
-              n
-            );
-          }),
-          u.length === 0 && j && /* @__PURE__ */ r(m, { component: "dropdown.emptyItem", ...j.props })
-        ] })
-      }
-    )
-  ] });
+              ),
+              q && /* @__PURE__ */ o(
+                f,
+                {
+                  component: "dropdown.selectAll",
+                  variant: { compact: x },
+                  ...j.props,
+                  props: { ...j.props.props, onClick: (e) => B(e, ...W) }
+                }
+              ),
+              u.map((e) => {
+                const { value: n, onClick: t, children: d, ...N } = e.props, O = c.includes(n);
+                return /* @__PURE__ */ o(
+                  f,
+                  {
+                    component: "dropdown.item",
+                    variant: { multiple: i, compact: x },
+                    selected: O,
+                    ...N,
+                    children: X && i ? /* @__PURE__ */ V(se, { children: [
+                      /* @__PURE__ */ o(ue, { readOnly: !0, checked: O }),
+                      d
+                    ] }) : d,
+                    props: {
+                      ...N.props,
+                      "aria-selected": O,
+                      onClick: (z) => {
+                        t?.(z), B(z, e);
+                      }
+                    }
+                  },
+                  n
+                );
+              }),
+              u.length === 0 && U && /* @__PURE__ */ o(f, { component: "dropdown.emptyItem", variant: { compact: x }, ...U.props })
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
 }
-function v(l) {
-  const t = (N) => null;
-  return t.displayName = l, t;
+function g(p) {
+  const r = (P) => null;
+  return r.displayName = p, r;
 }
-const y = ee(ie);
-y.Item = v("DropdownItem");
-y.Unselect = v("DropdownUnselect");
-y.SelectAll = v("DropdownSelectAll");
-y.EmptyItem = v("DropdownEmptyItem");
-y.Display = v("DropdownDisplay");
-y.displayName = "Dropdown";
-function O(l) {
-  if (l == null) return "";
-  if (typeof l == "object") {
-    const t = l.props?.children;
-    return t == null ? "" : typeof t == "object" ? (Array.isArray(t) ? t : [t]).map((f) => O(f)).join("") : t.toString();
+const h = le(fe);
+h.Item = g("DropdownItem");
+h.Unselect = g("DropdownUnselect");
+h.SelectAll = g("DropdownSelectAll");
+h.EmptyItem = g("DropdownEmptyItem");
+h.Display = g("DropdownDisplay");
+h.displayName = "Dropdown";
+function E(p) {
+  if (p == null) return "";
+  if (typeof p == "object") {
+    const r = p.props?.children;
+    return r == null ? "" : typeof r == "object" ? (Array.isArray(r) ? r : [r]).map((m) => E(m)).join("") : r.toString();
   }
-  return l.toString();
+  return p.toString();
 }
 export {
-  y as default
+  h as default
 };

package/components/form.mjs

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import { useRef as i, useCallback as p } from "react";
 import u from "../box.mjs";
-import { d as l } from "../core.mjs";
+import { e as l } from "../core.mjs";
 function c(o) {
   const { onSubmit: r, props: e } = o, t = i(null), n = p(
     (m) => {