@cronocode/react-box 3.1.13 → 3.2.1

package/components/dropdown/dropdownContext.d.ts

@@ -0,0 +1,17 @@
+import { BoxProps } from '../../box';
+import { ClassNameType } from '../../core/classNames';
+export interface DropdownItemProps<TVal = unknown> extends BoxProps {
+    value: TVal;
+    onClick?(e: React.MouseEvent): void;
+}
+export interface DropdownContextValue<TVal = unknown> {
+    valueToUse: TVal[];
+    multiple: boolean;
+    variant: ClassNameType;
+    showCheckbox: boolean;
+    itemSelectHandler: (e: React.MouseEvent, ...items: React.ReactElement<DropdownItemProps<TVal>>[]) => void;
+    getItemText: (item: React.ReactElement) => string;
+}
+declare const DropdownContext: import('react').Context<DropdownContextValue<any> | null>;
+export declare function useDropdownContext<TVal>(): DropdownContextValue<TVal>;
+export default DropdownContext;

package/components/dropdown/dropdownItemRenderer.d.ts

@@ -0,0 +1,6 @@
+import { DropdownItemProps } from './dropdownContext';
+interface Props<TVal> {
+    item: React.ReactElement<DropdownItemProps<TVal>>;
+}
+declare const DropdownItemRenderer: <TVal>(props: Props<TVal>) => React.ReactNode;
+export default DropdownItemRenderer;

package/components/dropdown/dropdownItems.d.ts

@@ -0,0 +1,15 @@
+import { BoxStyleProps } from '../../types';
+import { DropdownItemProps } from './dropdownContext';
+interface Props<TVal> {
+    filteredItems: React.ReactElement<DropdownItemProps<TVal>>[];
+    items: React.ReactElement<DropdownItemProps<TVal>>[];
+    unselectItem?: React.ReactElement;
+    selectAllItem?: React.ReactElement;
+    emptyItem?: React.ReactElement;
+    showUnselect: boolean;
+    showSelectAll: boolean;
+    buttonRef: React.RefObject<HTMLButtonElement>;
+    itemsProps?: BoxStyleProps;
+}
+export default function DropdownItems<TVal>(props: Props<TVal>): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/dropdown/dropdownSearch.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    search: string;
+    onSearchChange: (value: string) => void;
+    searchPlaceholder?: string;
+    searchBoxRef: React.RefObject<HTMLInputElement>;
+}
+export default function DropdownSearch({ search, onSearchChange, searchPlaceholder, searchBoxRef }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/dropdown/utils.d.ts

@@ -0,0 +1 @@
+export declare function searchItemText(item: React.ReactElement): string;

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"),y=require("../box.cjs"),oe=require("../core.cjs"),ne=require("./baseSvg.cjs"),re=require("./button.cjs"),se=require("./checkbox.cjs"),J=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:h,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=>h&&C?O(e).toLowerCase().includes(C.toLowerCase()):!0),[h,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&&h)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 W=P&&c&&d.length>p.length,te=v&&d.length>0&&!W;return o.jsxs(re.default,{ref:I,onClick:()=>E(e=>!e),component:"dropdown",props:{tabIndex:0,...G},position:"relative",pr:T?void 0:6,minWidth:a&&h?36:void 0,width:"fit-content",...U,children:[p.map(e=>o.jsx(z.default,{ref:r,name:k,type:"hidden",value:JSON.stringify(e)??""},JSON.stringify(e))),h&&a&&o.jsx(J.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&&h&&e.stopPropagation()}}})}),ee??" ",!T&&o.jsx(J.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(y.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(y.default,{component:"dropdown.items",children:[te&&o.jsx(y.default,{component:"dropdown.unselect",variant:{compact:b},selected:p.length===0,...v.props,props:{...v.props.props,onClick:e=>R(e)}}),W&&o.jsx(y.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(y.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,mr:2}),u]}):u,props:{...M.props,"aria-selected":Y,onClick:H=>{n?.(H),R(H,e)}}},s)}),d.length===0&&_&&o.jsx(y.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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),t=require("react"),ne=require("../core.cjs"),se=require("./baseSvg.cjs"),re=require("./button.cjs"),S=require("../box.cjs"),le=require("./tooltip.cjs"),ce=require("./checkbox.cjs"),z=require("./flex.cjs"),F=require("./textbox.cjs"),J=t.createContext(null);function $(){const n=t.useContext(J);if(!n)throw new Error("Dropdown sub-components must be used within Dropdown");return n}function ie({item:n}){const{valueToUse:o,multiple:m,variant:c,showCheckbox:p,itemSelectHandler:r}=$(),{value:l,onClick:k,children:h,...v}=n.props,y=o.includes(l);return s.jsx(S.default,{component:"dropdown.item",variant:[c,{multiple:m}],selected:y,...v,children:p&&m?s.jsxs(s.Fragment,{children:[s.jsx(ce.default,{readOnly:!0,checked:y,mr:2}),h]}):h,props:{...v.props,"aria-selected":y,onClick:w=>{k?.(w),r(w,n)}}},l)}const pe=t.memo(ie,(n,o)=>n.item===o.item);function G(n){const{filteredItems:o,items:m,unselectItem:c,selectAllItem:p,emptyItem:r,showUnselect:l,showSelectAll:k,buttonRef:h,itemsProps:v}=n,{valueToUse:y,variant:w,itemSelectHandler:T}=$(),g=t.useRef(null),[q,A]=t.useState(!1),N=q?0:h.current?.getBoundingClientRect().height??0,C=t.useCallback(d=>{const a=d.top-d.windowScrollY>window.innerHeight/2;A(j=>j===a?j:a)},[]);return s.jsx(S.default,{position:"absolute",inset:0,children:s.jsx(le.default,{ref:g,minWidth:"fit-content",style:{transform:q?"translateY(calc(-100% - 2px))":`translateY(${N}px)`},onPositionChange:C,children:(o.length>0||r)&&s.jsxs(S.default,{component:"dropdown.items",variant:w,...v,children:[l&&c&&s.jsx(S.default,{component:"dropdown.unselect",variant:w,selected:y.length===0,...c.props,props:{...c.props.props,onClick:d=>T(d)}}),k&&p&&s.jsx(S.default,{component:"dropdown.selectAll",variant:w,...p.props,props:{...p.props.props,onClick:d=>T(d,...m)}}),o.map(d=>s.jsx(pe,{item:d},d.props.value)),o.length===0&&r&&s.jsx(S.default,{component:"dropdown.emptyItem",variant:w,...r.props})]})})})}G.displayName="DropdownItems";function ae({search:n,onSearchChange:o,searchPlaceholder:m,searchBoxRef:c}){const p=t.useCallback(l=>o(l.target.value),[o]),r=t.useCallback(l=>l.stopPropagation(),[]);return s.jsx(z.default,{ai:"center",position:"absolute",inset:0,p:3,children:s.jsx(F.default,{clean:!0,placeholder:m,value:n,onChange:p,ref:c,color:"currentColor",width:"fit",props:{onClick:r}})})}function B(n){if(n==null)return"";if(typeof n=="object"){const o=n.props?.children;return o==null?"":typeof o=="object"?(Array.isArray(o)?o:[o]).map(c=>B(c)).join(""):o.toString()}return n.toString()}function ue(n,o){const{name:m,defaultValue:c,value:p,multiple:r=!1,isSearchable:l,searchPlaceholder:k,children:h,hideIcon:v,showCheckbox:y=!1,itemsProps:w,iconProps:T,onChange:g,props:q,...A}=n,[N,C]=t.useState(Array.isArray(c)?c:c?[c]:[]),d="value"in n,a=t.useMemo(()=>d?Array.isArray(p)?p:p?[p]:[]:N,[d,p,N]),[j,H]=t.useState(""),[x,_,O]=ne.useVisibility(),E=t.useRef(null),f=t.useMemo(()=>(Array.isArray(h)?h:[h]).flatMap(e=>e).filter(Boolean),[h]),M=t.useMemo(()=>f.filter(e=>e.type?.displayName==="DropdownItem"),[f]),L=t.useMemo(()=>{const e=new Map;for(const i of M)e.set(i,B(i));return e},[M]),I=t.useCallback(e=>L.get(e)??B(e),[L]),P=t.useMemo(()=>M.filter(e=>l&&j?I(e).toLowerCase().includes(j.toLowerCase()):!0),[l,j,M,I]),V=t.useMemo(()=>f.find(e=>e.type?.displayName==="DropdownUnselect"),[f]),Y=t.useMemo(()=>f.find(e=>e.type?.displayName==="DropdownSelectAll"),[f]),Q=t.useMemo(()=>f.find(e=>e.type?.displayName==="DropdownEmptyItem"),[f]),R=t.useMemo(()=>f.find(e=>e.type?.displayName==="DropdownDisplay"),[f]),X=t.useMemo(()=>{if(x&&l)return null;if(R)return typeof R.props.children=="function"?R.props.children(a,x):R.props.children;const e=P.filter(u=>a.includes(u.props.value));if(r&&e.length>1)return e.map(u=>I(u)).join(", ");const i=e.at(0);return i?.props.children??i?.props.value??(r?null:V?.props.children)},[r,P,a,V,x,l,R,I]),K=t.useCallback((e,...i)=>{if(i.length===0)C([]),g?.(void 0,[]);else if(r&&i.length>1){const u=i.map(D=>D.props.value);C(u),g?.(void 0,u)}else if(i.length===1){const u=i[0];if(r){const D=a.filter(oe=>oe!==u.props.value);D.length===a.length&&D.push(u.props.value),C(D),g?.(u.props.value,D)}else C([u.props.value]),g?.(u.props.value,[u.props.value])}r?(e.stopPropagation(),setTimeout(()=>E.current?.focus(),0)):(_(!1),setTimeout(()=>O.current?.focus(),0))},[r,a,C,g,_,O]);t.useEffect(()=>{x?setTimeout(()=>{E.current?.focus()},0):H("")},[x]);const Z=t.useCallback(()=>_(e=>!e),[_]),W=!!(Y&&r&&P.length>a.length),ee=!!(V&&P.length>0&&!W),te=t.useMemo(()=>({valueToUse:a,multiple:r,variant:A.variant,showCheckbox:y,itemSelectHandler:K,getItemText:I}),[a,r,A.variant,y,K,I]);return s.jsx(J.Provider,{value:te,children:s.jsxs(re.default,{ref:O,onClick:Z,component:"dropdown",props:{tabIndex:0,...q},position:"relative",pr:v?void 0:6,minWidth:x&&l?36:void 0,width:"fit-content",...A,children:[a.map(e=>{const i=JSON.stringify(e);return s.jsx(F.default,{ref:o,name:m,type:"hidden",value:i??""},i)}),l&&x&&s.jsx(ae,{search:j,onSearchChange:H,searchPlaceholder:k,searchBoxRef:E}),X??" ",!v&&s.jsx(z.default,{component:"dropdown.icon",...T,children:s.jsx(se.default,{viewBox:"0 0 10 6",width:"0.6rem",rotate:x?180:0,children:s.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})}),x&&s.jsx(G,{filteredItems:P,items:M,unselectItem:V,selectAllItem:Y,emptyItem:Q,showUnselect:ee,showSelectAll:W,buttonRef:O,itemsProps:w})]})})}function U(n){const o=m=>null;return o.displayName=n,o}const b=t.forwardRef(ue);b.Item=U("DropdownItem");b.Unselect=U("DropdownUnselect");b.SelectAll=U("DropdownSelectAll");b.EmptyItem=U("DropdownEmptyItem");b.Display=U("DropdownDisplay");b.displayName="Dropdown";exports.default=b;

package/components/dropdown.d.ts

@@ -1,6 +1,7 @@
 import { RefAttributes } from 'react';
 import { BoxProps } from '../box';
-import { ComponentsAndVariants } from '../types';
+import { BoxStyleProps, ComponentsAndVariants } from '../types';
+import { DropdownItemProps } from './dropdown/dropdownContext';
 interface Props<TVal, TKey extends keyof ComponentsAndVariants = 'dropdown'> extends Omit<BoxProps<'button', TKey>, 'ref' | 'tag'> {
     name?: string;
     defaultValue?: TVal | TVal[];
@@ -11,12 +12,12 @@ interface Props<TVal, TKey extends keyof ComponentsAndVariants = 'dropdown'> ext
     hideIcon?: boolean;
     /** Show checkbox for each item in multiple selection mode */
     showCheckbox?: boolean;
+    /** BoxProps applied to the opened items container (dropdown.items) */
+    itemsProps?: BoxStyleProps;
+    /** BoxProps applied to the chevron icon container (dropdown.icon) */
+    iconProps?: BoxStyleProps;
     onChange?: (value: TVal | undefined, values: TVal[]) => void;
 }
-interface DropdownItemProps<TVal> extends BoxProps {
-    value: TVal;
-    onClick?(e: React.MouseEvent): void;
-}
 interface DropdownDisplayProps<TVal> extends Omit<BoxProps, 'children'> {
     children: ((selectedValues: TVal[], isOpen: boolean) => React.ReactNode) | React.ReactNode;
 }

package/components/dropdown.mjs

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

package/components/select.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),i=require("react"),s=require("./dropdown.cjs");function M(f,m){const{data:r,def:y,...x}=f,{valueKey:n,displayKey:j,display:a,selectedDisplay:o,placeholder:c,selectAllText:d,emptyText:u}=y,h=i.useMemo(()=>{const e=new Map;for(const t of r)e.set(t[n],t);return e},[r,n]);return l.jsxs(s.default,{ref:m,...x,children:[c&&l.jsx(s.default.Unselect,{children:c}),d&&l.jsx(s.default.SelectAll,{children:d}),u&&l.jsx(s.default.EmptyItem,{children:u}),o&&l.jsx(s.default.Display,{children:(e,t)=>{const S=e.map(v=>h.get(v)).filter(Boolean);return o(S,t)}}),r.map(e=>{const t=e[n];return l.jsx(s.default.Item,{value:t,children:a?a(e):String(e[j??n])},t)})]})}const p=i.forwardRef(M);p.displayName="Select";exports.default=p;

package/components/select.d.ts

@@ -0,0 +1,39 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { BoxStyleProps, ComponentsAndVariants } from '../types';
+interface SelectDef<TRow> {
+    /** Key of TRow to use as the option value */
+    valueKey: keyof TRow & (string | number);
+    /** Key of TRow to display as option text (defaults to valueKey) */
+    displayKey?: keyof TRow;
+    /** Custom render function for each option */
+    display?: (row: TRow) => React.ReactNode;
+    /** Custom render function for the selected value display */
+    selectedDisplay?: (selectedRows: TRow[], isOpen: boolean) => React.ReactNode;
+    /** Placeholder text when nothing is selected */
+    placeholder?: string;
+    /** Text for "Select all" option in multiple mode */
+    selectAllText?: string;
+    /** Text shown when search yields no results */
+    emptyText?: string;
+}
+interface Props<TRow, TVal extends TRow[keyof TRow], TKey extends keyof ComponentsAndVariants = 'dropdown'> extends Omit<BoxProps<'button', TKey>, 'ref' | 'tag'> {
+    data: TRow[];
+    def: SelectDef<TRow>;
+    name?: string;
+    defaultValue?: TVal | TVal[];
+    value?: TVal | TVal[];
+    multiple?: boolean;
+    isSearchable?: boolean;
+    searchPlaceholder?: string;
+    hideIcon?: boolean;
+    showCheckbox?: boolean;
+    itemsProps?: BoxStyleProps;
+    iconProps?: BoxStyleProps;
+    onChange?: (value: TVal | undefined, values: TVal[]) => void;
+}
+interface SelectType {
+    <TRow, TVal extends TRow[keyof TRow] = TRow[keyof TRow]>(props: Props<TRow, TVal> & RefAttributes<HTMLInputElement>): React.ReactNode;
+}
+declare const Select: SelectType;
+export default Select;

package/components/select.mjs

@@ -0,0 +1,29 @@
+import { jsxs as w, jsx as r } from "react/jsx-runtime";
+import { forwardRef as v, useMemo as D } from "react";
+import l from "./dropdown.mjs";
+function I(i, m) {
+  const { data: n, def: f, ...u } = i, { valueKey: o, displayKey: y, display: s, selectedDisplay: a, placeholder: c, selectAllText: p, emptyText: d } = f, h = D(() => {
+    const e = /* @__PURE__ */ new Map();
+    for (const t of n)
+      e.set(t[o], t);
+    return e;
+  }, [n, o]);
+  return /* @__PURE__ */ w(l, { ref: m, ...u, children: [
+    c && /* @__PURE__ */ r(l.Unselect, { children: c }),
+    p && /* @__PURE__ */ r(l.SelectAll, { children: p }),
+    d && /* @__PURE__ */ r(l.EmptyItem, { children: d }),
+    a && /* @__PURE__ */ r(l.Display, { children: (e, t) => {
+      const x = e.map((S) => h.get(S)).filter(Boolean);
+      return a(x, t);
+    } }),
+    n.map((e) => {
+      const t = e[o];
+      return /* @__PURE__ */ r(l.Item, { value: t, children: s ? s(e) : String(e[y ?? o]) }, t);
+    })
+  ] });
+}
+const M = v(I);
+M.displayName = "Select";
+export {
+  M as default
+};

package/core/theme/theme.d.ts

@@ -3,9 +3,11 @@ interface ThemeProps {
     children: React.ReactNode;
     theme?: string;
     use?: 'global' | 'local';
+    /** When provided, persists the user-selected theme to localStorage under this key. */
+    storageKey?: string;
 }
 declare function Theme(props: ThemeProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Theme {
-    function useTheme(): [string, (theme: string) => void];
+    function useTheme(): [string, (theme: string | null) => void];
 }
 export default Theme;

package/core/theme/themeContext.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 interface ThemeContextProps {
     theme: string;
-    setTheme(theme: string): void;
+    setTheme(theme: string | null): void;
 }
 declare const ThemeContext: React.Context<ThemeContextProps>;
 export default ThemeContext;