@cronocode/react-box 3.0.6 → 3.0.8

package/array.d.ts

@@ -0,0 +1,6 @@
+export {};
+declare global {
+    interface Array<T> {
+        removeBy(predicate: (value: T) => boolean): Array<T>;
+    }
+}

package/box.cjs

@@ -1 +1 @@
-"use strict";const o=require("react"),e=require("./core.cjs");function h(a,l){const{tag:c="div",children:n,props:m,className:p,style:i,disabled:x,required:B,checked:g,selected:f}=a,v=e.useStyles(a,c==="svg"),r=o.useMemo(()=>{const b=e.classNames(v,p).join(" "),s={...m,className:b};return e.BoxUtils.assignBooleanProp(x,"disabled",s),e.BoxUtils.assignBooleanProp(B,"required",s),e.BoxUtils.assignBooleanProp(g,"checked",s),e.BoxUtils.assignBooleanProp(f,"selected",s),i&&(s.style=i),l&&(s.ref=l),s},[a]),[P,u]=o.useState(!1),d=typeof n=="function";return d&&(r.onMouseEnter=()=>u(!0),r.onMouseLeave=()=>u(!1)),o.createElement(c,r,d?n({isHover:P}):n)}const t=o.memo(o.forwardRef(h));t.extend=e.BoxExtends.extend;t.themeSetup=e.Theme.setup;t.getVariableValue=e.Variables.getVariableValue;module.exports=t;
+"use strict";const t=require("react"),e=require("./core.cjs");function P(a,l){const{tag:c="div",children:n,props:m,className:p,style:i,disabled:x,required:B,checked:g,selected:h}=a,f=e.useStyles(a,c==="svg"),r=t.useMemo(()=>{const v=e.classNames(f,p).join(" "),s={...m,className:v};return e.BoxUtils.assignBooleanProp(x,"disabled",s),e.BoxUtils.assignBooleanProp(B,"required",s),e.BoxUtils.assignBooleanProp(g,"checked",s),e.BoxUtils.assignBooleanProp(h,"selected",s),i&&(s.style=i),l&&(s.ref=l),s},[a]),[T,u]=t.useState(!1),d=typeof n=="function";return d&&(r.onMouseEnter=()=>u(!0),r.onMouseLeave=()=>u(!1)),t.createElement(c,r,d?n({isHover:T}):n)}const o=t.memo(t.forwardRef(P));o.extend=e.BoxExtends.extend;o.themeSetup=e.Theme.setup;o.Theme=e.Theme;o.useTheme=e.Theme.useTheme;o.getVariableValue=e.Variables.getVariableValue;module.exports=o;

package/box.d.ts

@@ -3,7 +3,7 @@ import { ClassNameType } from './core/classNames';
 import { ExtractElementFromTag } from './core/coreTypes';
 import { BoxStyleProps } from './types';
 import { default as BoxExtends } from './core/boxExtends';
-import { default as Theme } from './core/theme';
+import { default as Theme } from './core/theme/theme';
 import { default as Variables } from './core/variables';
 type AllProps<TTag extends keyof React.JSX.IntrinsicElements> = React.ComponentProps<TTag>;
 type TagPropsType<TTag extends keyof React.JSX.IntrinsicElements> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref' | 'disabled' | 'required' | 'checked'>;
@@ -21,6 +21,8 @@ interface BoxType {
     <TTag extends keyof React.JSX.IntrinsicElements = 'div'>(props: Props<TTag> & RefAttributes<ExtractElementFromTag<TTag>>): React.ReactNode;
     extend: typeof BoxExtends.extend;
     themeSetup: typeof Theme.setup;
+    Theme: typeof Theme;
+    useTheme: typeof Theme.useTheme;
     getVariableValue: typeof Variables.getVariableValue;
 }
 declare const Box: BoxType;

package/box.mjs

@@ -1,19 +1,21 @@
-import V, { memo as b, forwardRef as h, useMemo as y, useState as N } from "react";
-import { B as S, T as C, V as E, u as H, c as M, a as s } from "./core.mjs";
-function T(a, r) {
-  const { tag: l = "div", children: o, props: d, className: m, style: c, disabled: p, required: f, checked: g, selected: B } = a, x = H(a, l === "svg"), t = y(() => {
-    const P = M(x, m).join(" "), e = {
-      ...d,
+import T, { memo as V, forwardRef as b, useMemo as y, useState as N } from "react";
+import { B as S, T as r, V as C, u as E, c as H, a } from "./core.mjs";
+function M(o, l) {
+  const { tag: c = "div", children: t, props: m, className: p, style: i, disabled: f, required: g, checked: B, selected: h } = o, x = E(o, c === "svg"), n = y(() => {
+    const P = H(x, p).join(" "), e = {
+      ...m,
       className: P
     };
-    return s.assignBooleanProp(p, "disabled", e), s.assignBooleanProp(f, "required", e), s.assignBooleanProp(g, "checked", e), s.assignBooleanProp(B, "selected", e), c && (e.style = c), r && (e.ref = r), e;
-  }, [a]), [v, i] = N(!1), u = typeof o == "function";
-  return u && (t.onMouseEnter = () => i(!0), t.onMouseLeave = () => i(!1)), V.createElement(l, t, u ? o({ isHover: v }) : o);
+    return a.assignBooleanProp(f, "disabled", e), a.assignBooleanProp(g, "required", e), a.assignBooleanProp(B, "checked", e), a.assignBooleanProp(h, "selected", e), i && (e.style = i), l && (e.ref = l), e;
+  }, [o]), [v, u] = N(!1), d = typeof t == "function";
+  return d && (n.onMouseEnter = () => u(!0), n.onMouseLeave = () => u(!1)), T.createElement(c, n, d ? t({ isHover: v }) : t);
 }
-const n = b(h(T));
-n.extend = S.extend;
-n.themeSetup = C.setup;
-n.getVariableValue = E.getVariableValue;
+const s = V(b(M));
+s.extend = S.extend;
+s.themeSetup = r.setup;
+s.Theme = r;
+s.useTheme = r.useTheme;
+s.getVariableValue = C.getVariableValue;
 export {
-  n as default
+  s as default
 };

package/components/dataGrid.cjs

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime");require("react");const i=require("../box.cjs"),c=require("./grid.cjs");function g(u){const{data:e,def:d}=u,{rowKey:t,columns:s}=d;return s.length===0?(console.error("Cannot render grid without column definitions"),null):n.jsx(i,{component:"dataGrid",children:n.jsxs(c,{b:1,borderRadius:1,children:[s.map((r,o)=>n.jsx(i,{style:{gridColumn:o+1},children:r.key.toString()},r.key.toString())),((e==null?void 0:e.length)??0)===0&&n.jsx(i,{children:"Empty table"}),((e==null?void 0:e.length)??0)>0&&n.jsx(n.Fragment,{children:e==null?void 0:e.map((r,o)=>{const m=t?typeof t=="function"?t(r):r[t]:o;return n.jsx(c,{style:{gridTemplateRows:"subgrid"},children:s.map((h,l)=>n.jsxs(i,{style:{gridColumn:l+1},children:["tes ",l]}))},m)})})]})})}module.exports=g;
+"use strict";const n=require("react/jsx-runtime");require("react");const o=require("../box.cjs"),c=require("./grid.cjs");function g(u){const{data:e,def:d}=u,{rowKey:r,columns:i}=d;return i.length===0?(console.error("Cannot render grid without column definitions"),null):n.jsx(o,{component:"dataGrid",children:n.jsxs(c,{b:1,borderRadius:1,children:[i.map((t,s)=>n.jsx(o,{style:{gridColumn:s+1},children:t.key.toString()},s)),((e==null?void 0:e.length)??0)===0&&n.jsx(o,{children:"Empty table"}),((e==null?void 0:e.length)??0)>0&&n.jsx(n.Fragment,{children:e==null?void 0:e.map((t,s)=>{const m=r?typeof r=="function"?r(t):t[r]:s;return n.jsx(c,{style:{gridTemplateRows:"subgrid"},children:i.map((h,l)=>n.jsxs(o,{style:{gridColumn:l+1},children:["tes ",l]},l))},m)})})]})})}module.exports=g;

package/components/dataGrid.mjs

@@ -1,18 +1,18 @@
-import { jsx as n, jsxs as d, Fragment as g } from "react/jsx-runtime";
+import { jsx as n, jsxs as c, Fragment as h } from "react/jsx-runtime";
 import "react";
-import o from "../box.mjs";
+import i from "../box.mjs";
 import s from "./grid.mjs";
-function x(c) {
-  const { data: r, def: u } = c, { rowKey: t, columns: i } = u;
-  return i.length === 0 ? (console.error("Cannot render grid without column definitions"), null) : /* @__PURE__ */ n(o, { component: "dataGrid", children: /* @__PURE__ */ d(s, { b: 1, borderRadius: 1, children: [
-    i.map((e, l) => /* @__PURE__ */ n(o, { style: { gridColumn: l + 1 }, children: e.key.toString() }, e.key.toString())),
-    ((r == null ? void 0 : r.length) ?? 0) === 0 && /* @__PURE__ */ n(o, { children: "Empty table" }),
-    ((r == null ? void 0 : r.length) ?? 0) > 0 && /* @__PURE__ */ n(g, { children: r == null ? void 0 : r.map((e, l) => {
-      const p = t ? typeof t == "function" ? t(e) : e[t] : l;
-      return /* @__PURE__ */ n(s, { style: { gridTemplateRows: "subgrid" }, children: i.map((h, m) => /* @__PURE__ */ d(o, { style: { gridColumn: m + 1 }, children: [
+function x(d) {
+  const { data: r, def: u } = d, { rowKey: e, columns: l } = u;
+  return l.length === 0 ? (console.error("Cannot render grid without column definitions"), null) : /* @__PURE__ */ n(i, { component: "dataGrid", children: /* @__PURE__ */ c(s, { b: 1, borderRadius: 1, children: [
+    l.map((o, t) => /* @__PURE__ */ n(i, { style: { gridColumn: t + 1 }, children: o.key.toString() }, t)),
+    ((r == null ? void 0 : r.length) ?? 0) === 0 && /* @__PURE__ */ n(i, { children: "Empty table" }),
+    ((r == null ? void 0 : r.length) ?? 0) > 0 && /* @__PURE__ */ n(h, { children: r == null ? void 0 : r.map((o, t) => {
+      const p = e ? typeof e == "function" ? e(o) : o[e] : t;
+      return /* @__PURE__ */ n(s, { style: { gridTemplateRows: "subgrid" }, children: l.map((f, m) => /* @__PURE__ */ c(i, { style: { gridColumn: m + 1 }, children: [
         "tes ",
         m
-      ] })) }, p);
+      ] }, m)) }, p);
     }) })
   ] }) });
 }

package/components/dropdown.cjs

@@ -1 +1 @@
-"use strict";const t=require("react/jsx-runtime"),c=require("react"),h=require("../box.cjs"),O=require("./tooltip.cjs"),P=require("./baseSvg.cjs"),E=require("../core.cjs"),A=require("./textbox.cjs"),U=require("./flex.cjs"),y=require("./button.cjs");function W(n,m){var g;const{children:o,name:N,isSearchable:p,searchPlaceholder:L,onChange:x,selectedValue:T}=n,[a,b]=c.useState(""),f=c.useMemo(()=>(Array.isArray(o)?o:[o]).filter(s=>{var r;return((r=s.type)==null?void 0:r.componentName)!=="DropdownItem"?!1:p&&a?_(s).toLowerCase().includes(a.toLowerCase()):!0}),[p,a,o]),l=c.useMemo(()=>(Array.isArray(o)?o:[o]).find(s=>{var r;return((r=s.type)==null?void 0:r.componentName)==="DropdownNullItem"}),[p,a,o]),v=c.useMemo(()=>(Array.isArray(o)?o:[o]).find(s=>{var r;return((r=s.type)==null?void 0:r.componentName)==="DropdownNoItems"}),[p,a,o]),[u,B]=c.useState(f.find(e=>e.props.value===T)),[i,j,V]=E.useVisibility(),k=c.useRef(null),C=c.useRef(null),q=c.useRef(null),H=c.useCallback(()=>{j(e=>!e)},[j]),S=c.useCallback((e,s)=>{var r,d;B(s),j(!1),(d=(r=s.props).onClick)==null||d.call(r,e),x==null||x(s.props.value),setTimeout(()=>{var R;return(R=C.current)==null?void 0:R.focus()},0)},[]);return c.useEffect(()=>{i?setTimeout(()=>{var e,s,r;(e=k.current)==null||e.focus(),(r=(s=q.current)==null?void 0:s.querySelector('[aria-selected="true"]'))==null||r.scrollIntoView({block:"nearest"})},0):b("")},[i]),t.jsxs(h,{ref:V,width:"fit-content",children:[t.jsx(A,{ref:m,name:N,type:"hidden",value:((g=u==null?void 0:u.props)==null?void 0:g.value)??""}),t.jsxs(y,{ref:C,component:"dropdown",...n,props:{onMouseDown:H},children:[p&&t.jsx(A,{display:i&&p?"block":"none",clean:!0,flex1:!0,width:1,placeholder:L,value:a,onChange:e=>b(e.target.value),ref:k,props:{onMouseDown:e=>{i&&p&&e.stopPropagation()}}}),t.jsx(U,{display:i&&p?"none":"flex",children:(u==null?void 0:u.props.children)??(u==null?void 0:u.props.value)??(l==null?void 0:l.props.children)??t.jsx(h,{height:5})}),t.jsx(P,{viewBox:"0 0 10 6",width:"0.6rem",rotate:i?180:0,children:t.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})]}),i&&t.jsx(O,{ref:q,children:(f.length>0||l||v)&&t.jsxs(h,{component:"dropdown.items",children:[l&&t.jsx(D,{...l.props,selected:!u,onClick:e=>S(e,l)}),f.map((e,s)=>{var r;return t.jsx(I,{...e.props,selected:e===u,onClick:d=>S(d,e)},(r=e.props.value)==null?void 0:r.toString())}),f.length===0&&!l&&v]})})]})}function I(n){return t.jsx(y,{component:"dropdown.item",...n,props:{onMouseDown:n.onClick}})}I.componentName="DropdownItem";function D(n){return t.jsx(y,{component:"dropdown.nullItem",...n,props:{onMouseDown:n.onClick}})}D.componentName="DropdownNullItem";function M(n){return t.jsx(h,{component:"dropdown.noItems",...n})}M.componentName="DropdownNoItems";const w=c.forwardRef(W);w.Item=I;w.NullItem=D;w.NoItems=M;function _(n){var m;if(n==null)return"";if(typeof n=="object"){const o=(m=n.props)==null?void 0:m.children;return o==null?"":typeof o=="object"?(Array.isArray(o)?o:[o]).map(p=>_(p)).join(""):o.toString()}return n.toString()}module.exports=w;
+"use strict";const r=require("react/jsx-runtime"),n=require("react"),w=require("../box.cjs"),U=require("./textbox.cjs"),C=require("./flex.cjs"),J=require("../core.cjs"),Y=require("./baseSvg.cjs"),k=require("./tooltip.cjs"),W=require("./button.cjs");function $(p,a){const{name:s,defaultValue:y,multiple:l,isSearchable:d,searchPlaceholder:V,children:v,onChange:i,...E}=p,[c,g]=n.useState(Array.isArray(y)?y:y?[y]:[]),[j,P]=n.useState(""),[m,R,D]=J.useVisibility(),M=n.useRef(null),A=n.useRef(null),[_,H]=n.useState(0),I=n.useMemo(()=>_>window.innerHeight/2,[_]),L=n.useMemo(()=>{var e;return I?((e=D.current)==null?void 0:e.getBoundingClientRect().height)??0:0},[I,D]),u=n.useMemo(()=>Array.isArray(v)?v:[v],[v]),f=n.useMemo(()=>u.filter(e=>{var t;return((t=e.type)==null?void 0:t.componentName)!=="DropdownItem"?!1:d&&j?N(e).toLowerCase().includes(j.toLowerCase()):!0}),[d,j,u]),h=n.useMemo(()=>u.find(e=>{var t;return((t=e.type)==null?void 0:t.componentName)==="DropdownUnselectItem"}),[u]),S=n.useMemo(()=>u.find(e=>{var t;return((t=e.type)==null?void 0:t.componentName)==="DropdownEmptyItem"}),[u]),O=n.useMemo(()=>u.find(e=>{var t;return((t=e.type)==null?void 0:t.componentName)==="DropdownDisplay"}),[u]),B=n.useMemo(()=>{if(O)return O.props.children(c);const e=f.filter(o=>c.includes(o.props.value));if(l&&e.length>1)return e.map(o=>N(o)).join(", ");const t=e.at(0);return(t==null?void 0:t.props.children)??(t==null?void 0:t.props.value)??(h==null?void 0:h.props.children)},[l,f,h,c]),T=n.useCallback((e,t)=>{if(!t)g([]),i==null||i(void 0,[]);else if(l){const o=c.filter(q=>q!==t.props.value);o.length===c.length&&o.push(t.props.value),g(o),i==null||i(t.props.value,o)}else g([t.props.value]),i==null||i(t.props.value,[t.props.value]);l?(e.stopPropagation(),setTimeout(()=>{var o;return(o=M.current)==null?void 0:o.focus()},0)):(R(!1),setTimeout(()=>{var o;return(o=D.current)==null?void 0:o.focus()},0))},[l,c,g]);return n.useEffect(()=>{m?setTimeout(()=>{var e,t,o;(e=M.current)==null||e.focus(),(o=(t=A.current)==null?void 0:t.querySelector('[aria-selected="true"]'))==null||o.scrollIntoView({block:"nearest"})},0):P("")},[m]),r.jsxs(w,{width:"fit-content",children:[c.map(e=>r.jsx(U,{ref:a,name:s,type:"hidden",value:JSON.stringify(e)??""},JSON.stringify(e))),r.jsxs(W,{ref:D,component:"dropdown",...E,props:{onMouseDown:()=>R(e=>!e),tabIndex:0},children:[d&&r.jsx(U,{display:m&&d?"block":"none",clean:!0,flex1:!0,width:1,minHeight:5,placeholder:V,value:j,onChange:e=>P(e.target.value),ref:M,props:{onMouseDown:e=>{m&&d&&e.stopPropagation()}}}),r.jsx(C,{component:"dropdown.display",display:m&&d?"none":"flex",flex1:!0,minHeight:5,children:B}),r.jsx(w,{children:r.jsx(Y,{viewBox:"0 0 10 6",width:"0.6rem",rotate:m?180:0,children:r.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})})]}),m&&r.jsx(k,{ref:A,top:I?void 0:0,bottom:I?2:void 0,style:{transform:`translateY(-${L}px)`},onPositionChange:e=>H(e.top),children:(f.length>0||S)&&r.jsxs(w,{component:"dropdown.items",children:[h&&f.length>0&&r.jsx(w,{component:"dropdown.unselectItem",selected:c.length===0,...h.props,props:{onMouseDown:e=>T(e)}}),f.map(e=>{const{value:t,...o}=e.props;return r.jsx(w,{component:"dropdown.item",theme:l?"multiple":"single",selected:c.includes(t),...o,props:{onMouseDown:q=>T(q,e)}},t)}),f.length===0&&S&&r.jsx(w,{component:"dropdown.emptyItem",...S.props})]})})]})}function b(p){const a=s=>null;return a.componentName=p,a}const x=n.forwardRef($);x.Item=b("DropdownItem");x.UnselectItem=b("DropdownUnselectItem");x.EmptyItem=b("DropdownEmptyItem");x.Display=b("DropdownDisplay");function N(p){var a;if(p==null)return"";if(typeof p=="object"){const s=(a=p.props)==null?void 0:a.children;return s==null?"":typeof s=="object"?(Array.isArray(s)?s:[s]).map(l=>N(l)).join(""):s.toString()}return p.toString()}module.exports=x;

package/components/dropdown.d.ts

@@ -1,25 +1,25 @@
 import { Ref } from 'react';
 import { BoxProps } from '../box';
-interface DropdownItemProps<TVal> extends BoxProps {
-    value: TVal;
-    onClick?: (e: React.MouseEvent) => void;
-}
 interface Props<TVal> extends BoxProps {
     name?: string;
-    children: React.ReactElement<DropdownItemProps<TVal>> | Array<React.ReactElement<DropdownItemProps<TVal>>>;
+    defaultValue?: TVal | TVal[];
+    multiple?: boolean;
     isSearchable?: boolean;
     searchPlaceholder?: string;
-    onChange?: (value: TVal) => void;
-    selectedValue?: TVal;
+    onChange?: (value: Maybe<TVal>, values: TVal[]) => void;
+}
+interface DropdownItemProps<TVal> extends BoxProps {
+    value: TVal;
+}
+interface DropdownDisplayProps<TVal> extends Omit<BoxProps, 'children'> {
+    children: (selectedValues: TVal[]) => React.ReactNode;
+}
+interface DropdownType {
+    <TVal>(props: Props<TVal>, ref: Ref<HTMLInputElement>): React.ReactNode;
+    Item: <TVal>(props: DropdownItemProps<TVal>) => React.ReactNode;
+    UnselectItem: (props: BoxProps) => React.ReactNode;
+    EmptyItem: (props: BoxProps) => React.ReactNode;
+    Display: <TVal>(props: DropdownDisplayProps<TVal>) => React.ReactNode;
 }
-declare function DropdownImpl<TVal>(props: Props<TVal>, ref: Ref<HTMLInputElement>): React.ReactNode;
-declare function DropdownItem<TVal>(props: DropdownItemProps<TVal>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownNullItem<TVal>(props: Omit<DropdownItemProps<TVal>, 'value'>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownNoItems<TVal>(props: Omit<DropdownItemProps<TVal>, 'value'>): import("react/jsx-runtime").JSX.Element;
-type DropdownType = typeof DropdownImpl & {
-    Item: typeof DropdownItem;
-    NullItem: typeof DropdownNullItem;
-    NoItems: typeof DropdownNoItems;
-};
 declare const Dropdown: DropdownType;
 export default Dropdown;

package/components/dropdown.mjs

@@ -1,106 +1,140 @@
-import { jsxs as y, jsx as s } from "react/jsx-runtime";
-import { forwardRef as W, useState as R, useMemo as I, useRef as D, useCallback as L, useEffect as z } from "react";
-import f from "../box.mjs";
-import G from "./tooltip.mjs";
-import J from "./baseSvg.mjs";
-import { b as Q } from "../core.mjs";
-import V from "./textbox.mjs";
-import X from "./flex.mjs";
-import x from "./button.mjs";
-function Y(n, m) {
-  var T;
-  const { children: e, name: C, isSearchable: c, searchPlaceholder: P, onChange: h, selectedValue: q } = n, [a, b] = R(""), d = I(() => (Array.isArray(e) ? e : [e]).filter((t) => {
-    var r;
-    return ((r = t.type) == null ? void 0 : r.componentName) !== "DropdownItem" ? !1 : c && a ? O(t).toLowerCase().includes(a.toLowerCase()) : !0;
-  }), [c, a, e]), l = I(() => (Array.isArray(e) ? e : [e]).find((t) => {
-    var r;
-    return ((r = t.type) == null ? void 0 : r.componentName) === "DropdownNullItem";
-  }), [c, a, e]), g = I(() => (Array.isArray(e) ? e : [e]).find((t) => {
-    var r;
-    return ((r = t.type) == null ? void 0 : r.componentName) === "DropdownNoItems";
-  }), [c, a, e]), [p, E] = R(
-    d.find((o) => o.props.value === q)
-  ), [i, w, F] = Q(), S = D(null), A = D(null), j = D(null), U = L(() => {
-    w((o) => !o);
-  }, [w]), B = L((o, t) => {
-    var r, u;
-    E(t), w(!1), (u = (r = t.props).onClick) == null || u.call(r, o), h == null || h(t.props.value), setTimeout(() => {
-      var M;
-      return (M = A.current) == null ? void 0 : M.focus();
-    }, 0);
-  }, []);
-  return z(() => {
-    i ? setTimeout(() => {
-      var o, t, r;
-      (o = S.current) == null || o.focus(), (r = (t = j.current) == null ? void 0 : t.querySelector('[aria-selected="true"]')) == null || r.scrollIntoView({ block: "nearest" });
-    }, 0) : b("");
-  }, [i]), /* @__PURE__ */ y(f, { ref: F, width: "fit-content", children: [
-    /* @__PURE__ */ s(V, { ref: m, name: C, type: "hidden", value: ((T = p == null ? void 0 : p.props) == null ? void 0 : T.value) ?? "" }),
-    /* @__PURE__ */ y(x, { ref: A, component: "dropdown", ...n, props: { onMouseDown: U }, children: [
-      c && /* @__PURE__ */ s(
-        V,
+import { jsxs as T, jsx as n } from "react/jsx-runtime";
+import { forwardRef as F, useState as A, useRef as H, useMemo as a, useCallback as W, useEffect as _ } from "react";
+import w from "../box.mjs";
+import L from "./textbox.mjs";
+import $ from "./flex.mjs";
+import { b as z } from "../core.mjs";
+import G from "./baseSvg.mjs";
+import Q from "./tooltip.mjs";
+import X from "./button.mjs";
+function Z(s, u) {
+  const { name: r, defaultValue: y, multiple: l, isSearchable: d, searchPlaceholder: C, children: v, onChange: p, ...J } = s, [i, g] = A(Array.isArray(y) ? y : y ? [y] : []), [D, M] = A(""), [m, O, I] = z(), N = H(null), R = H(null), [U, Y] = A(0), x = a(() => U > window.innerHeight / 2, [U]), k = a(() => {
+    var e;
+    return x ? ((e = I.current) == null ? void 0 : e.getBoundingClientRect().height) ?? 0 : 0;
+  }, [x, I]), c = a(() => Array.isArray(v) ? v : [v], [v]), f = a(() => c.filter((e) => {
+    var o;
+    return ((o = e.type) == null ? void 0 : o.componentName) !== "DropdownItem" ? !1 : d && D ? B(e).toLowerCase().includes(D.toLowerCase()) : !0;
+  }), [d, D, c]), h = a(() => c.find((e) => {
+    var o;
+    return ((o = e.type) == null ? void 0 : o.componentName) === "DropdownUnselectItem";
+  }), [c]), P = a(() => c.find((e) => {
+    var o;
+    return ((o = e.type) == null ? void 0 : o.componentName) === "DropdownEmptyItem";
+  }), [c]), V = a(() => c.find((e) => {
+    var o;
+    return ((o = e.type) == null ? void 0 : o.componentName) === "DropdownDisplay";
+  }), [c]), q = a(() => {
+    if (V) return V.props.children(i);
+    const e = f.filter((t) => i.includes(t.props.value));
+    if (l && e.length > 1)
+      return e.map((t) => B(t)).join(", ");
+    const o = e.at(0);
+    return (o == null ? void 0 : o.props.children) ?? (o == null ? void 0 : o.props.value) ?? (h == null ? void 0 : h.props.children);
+  }, [l, f, h, i]), E = W(
+    (e, o) => {
+      if (!o)
+        g([]), p == null || p(void 0, []);
+      else if (l) {
+        const t = i.filter((j) => j !== o.props.value);
+        t.length === i.length && t.push(o.props.value), g(t), p == null || p(o.props.value, t);
+      } else
+        g([o.props.value]), p == null || p(o.props.value, [o.props.value]);
+      l ? (e.stopPropagation(), setTimeout(() => {
+        var t;
+        return (t = N.current) == null ? void 0 : t.focus();
+      }, 0)) : (O(!1), setTimeout(() => {
+        var t;
+        return (t = I.current) == null ? void 0 : t.focus();
+      }, 0));
+    },
+    [l, i, g]
+  );
+  return _(() => {
+    m ? setTimeout(() => {
+      var e, o, t;
+      (e = N.current) == null || e.focus(), (t = (o = R.current) == null ? void 0 : o.querySelector('[aria-selected="true"]')) == null || t.scrollIntoView({ block: "nearest" });
+    }, 0) : M("");
+  }, [m]), /* @__PURE__ */ T(w, { width: "fit-content", children: [
+    i.map((e) => /* @__PURE__ */ n(L, { ref: u, name: r, type: "hidden", value: JSON.stringify(e) ?? "" }, JSON.stringify(e))),
+    /* @__PURE__ */ T(X, { ref: I, component: "dropdown", ...J, props: { onMouseDown: () => O((e) => !e), tabIndex: 0 }, children: [
+      d && /* @__PURE__ */ n(
+        L,
         {
-          display: i && c ? "block" : "none",
+          display: m && d ? "block" : "none",
           clean: !0,
           flex1: !0,
           width: 1,
-          placeholder: P,
-          value: a,
-          onChange: (o) => b(o.target.value),
-          ref: S,
+          minHeight: 5,
+          placeholder: C,
+          value: D,
+          onChange: (e) => M(e.target.value),
+          ref: N,
           props: {
-            onMouseDown: (o) => {
-              i && c && o.stopPropagation();
+            onMouseDown: (e) => {
+              m && d && e.stopPropagation();
             }
           }
         }
       ),
-      /* @__PURE__ */ s(X, { display: i && c ? "none" : "flex", children: (p == null ? void 0 : p.props.children) ?? (p == null ? void 0 : p.props.value) ?? (l == null ? void 0 : l.props.children) ?? /* @__PURE__ */ s(f, { height: 5 }) }),
-      /* @__PURE__ */ s(J, { viewBox: "0 0 10 6", width: "0.6rem", rotate: i ? 180 : 0, children: /* @__PURE__ */ s("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) })
+      /* @__PURE__ */ n($, { component: "dropdown.display", display: m && d ? "none" : "flex", flex1: !0, minHeight: 5, children: q }),
+      /* @__PURE__ */ n(w, { children: /* @__PURE__ */ n(G, { viewBox: "0 0 10 6", width: "0.6rem", rotate: m ? 180 : 0, children: /* @__PURE__ */ n("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) }) })
     ] }),
-    i && /* @__PURE__ */ s(G, { ref: j, children: (d.length > 0 || l || g) && /* @__PURE__ */ y(f, { component: "dropdown.items", children: [
-      l && /* @__PURE__ */ s(v, { ...l.props, selected: !p, onClick: (o) => B(o, l) }),
-      d.map((o, t) => {
-        var r;
-        return /* @__PURE__ */ s(
-          N,
-          {
-            ...o.props,
-            selected: o === p,
-            onClick: (u) => B(u, o)
-          },
-          (r = o.props.value) == null ? void 0 : r.toString()
-        );
-      }),
-      d.length === 0 && !l && g
-    ] }) })
+    m && /* @__PURE__ */ n(
+      Q,
+      {
+        ref: R,
+        top: x ? void 0 : 0,
+        bottom: x ? 2 : void 0,
+        style: { transform: `translateY(-${k}px)` },
+        onPositionChange: (e) => Y(e.top),
+        children: (f.length > 0 || P) && /* @__PURE__ */ T(w, { component: "dropdown.items", children: [
+          h && f.length > 0 && /* @__PURE__ */ n(
+            w,
+            {
+              component: "dropdown.unselectItem",
+              selected: i.length === 0,
+              ...h.props,
+              props: { onMouseDown: (e) => E(e) }
+            }
+          ),
+          f.map((e) => {
+            const { value: o, ...t } = e.props;
+            return /* @__PURE__ */ n(
+              w,
+              {
+                component: "dropdown.item",
+                theme: l ? "multiple" : "single",
+                selected: i.includes(o),
+                ...t,
+                props: { onMouseDown: (j) => E(j, e) }
+              },
+              o
+            );
+          }),
+          f.length === 0 && P && /* @__PURE__ */ n(w, { component: "dropdown.emptyItem", ...P.props })
+        ] })
+      }
+    )
   ] });
 }
-function N(n) {
-  return /* @__PURE__ */ s(x, { component: "dropdown.item", ...n, props: { onMouseDown: n.onClick } });
-}
-N.componentName = "DropdownItem";
-function v(n) {
-  return /* @__PURE__ */ s(x, { component: "dropdown.nullItem", ...n, props: { onMouseDown: n.onClick } });
-}
-v.componentName = "DropdownNullItem";
-function H(n) {
-  return /* @__PURE__ */ s(f, { component: "dropdown.noItems", ...n });
+function b(s) {
+  const u = (r) => null;
+  return u.componentName = s, u;
 }
-H.componentName = "DropdownNoItems";
-const k = W(Y);
-k.Item = N;
-k.NullItem = v;
-k.NoItems = H;
-function O(n) {
-  var m;
-  if (n == null) return "";
-  if (typeof n == "object") {
-    const e = (m = n.props) == null ? void 0 : m.children;
-    return e == null ? "" : typeof e == "object" ? (Array.isArray(e) ? e : [e]).map((c) => O(c)).join("") : e.toString();
+const S = F(Z);
+S.Item = b("DropdownItem");
+S.UnselectItem = b("DropdownUnselectItem");
+S.EmptyItem = b("DropdownEmptyItem");
+S.Display = b("DropdownDisplay");
+function B(s) {
+  var u;
+  if (s == null) return "";
+  if (typeof s == "object") {
+    const r = (u = s.props) == null ? void 0 : u.children;
+    return r == null ? "" : typeof r == "object" ? (Array.isArray(r) ? r : [r]).map((l) => B(l)).join("") : r.toString();
   }
-  return n.toString();
+  return s.toString();
 }
 export {
-  k as default
+  S as default
 };

package/core/boxStyles.d.ts

@@ -701,11 +701,29 @@ export declare const cssStyles: {
         valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
         styleName: string;
     }[];
+    fill: {
+        values: Variables.ColorType[];
+        valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
+    }[];
+    stroke: {
+        values: Variables.ColorType[];
+        valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
+    }[];
     bgImage: {
         values: readonly ["none", "bg-img-checked", "bg-img-indeterminate", "bg-img-radio"];
         valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
         styleName: string;
     }[];
+    shadow: {
+        values: readonly ["small-shadow", "medium-shadow", "large-shadow"];
+        valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
+        styleName: string;
+    }[];
+    translateX: {
+        values: number;
+        valueFormat: (value: number) => string;
+        styleName: string;
+    }[];
 };
 export declare const pseudo1: {
     hover: string;
@@ -758,9 +776,14 @@ export declare const pseudoGroupClasses: {
     disabledGroup: "disabled";
 };
 export declare const breakpoints: {
+    /** Styles applied for small screens and larger. >= 640 */
     sm: number;
+    /** Styles applied for medium screens and larger. >= 768 */
     md: number;
+    /** Styles applied for large screens and larger. >= 1024 */
     lg: number;
+    /** Styles applied for extra-large screens and larger. >= 1280 */
     xl: number;
+    /** Styles applied for 2x extra-large screens and larger. >= 1536 */
     xxl: number;
 };

package/core/theme/defaultTheme.d.ts

@@ -0,0 +1,3 @@
+import { ThemeSetup } from './themeContract';
+declare const defaultTheme: ThemeSetup;
+export default defaultTheme;

package/core/theme/theme.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { Themes } from './themeContract';
+interface ThemeProps {
+    children: React.ReactNode;
+    theme: string;
+}
+declare function Theme(props: ThemeProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Theme {
+    let userThemes: Maybe<Themes>;
+    function setup(themes: Themes): void;
+    function useTheme(): [string, (theme: string) => void];
+}
+export default Theme;

package/core/theme/themeContext.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ThemeType } from './themeContract';
+interface IThemeContext {
+    themeStyles: ThemeType;
+    theme: string;
+    setTheme(theme: string): void;
+}
+declare const ThemeContext: React.Context<IThemeContext>;
+export default ThemeContext;

package/core/{theme.d.ts → theme/themeContract.d.ts}

@@ -1,17 +1,17 @@
-import { BoxThemeStyles } from '../types';
+import { BoxThemeStyles } from '../../types';
 export interface ThemeComponentStyles {
+    clean?: boolean;
     styles: BoxThemeStyles;
     themes?: {
         [name: string]: BoxThemeStyles;
     };
-    children?: {
-        [name: string]: ThemeComponentStyles;
-    };
+    children?: ThemeType;
 }
+export type ThemeType = {
+    [componentName: string]: ThemeComponentStyles;
+};
 export interface ThemeSetup {
-    components?: {
-        [name: string]: ThemeComponentStyles;
-    };
+    components?: ThemeType;
     button?: ThemeComponentStyles;
     textbox?: ThemeComponentStyles;
     textarea?: ThemeComponentStyles;
@@ -20,7 +20,6 @@ export interface ThemeSetup {
     label?: ThemeComponentStyles;
     dropdown?: ThemeComponentStyles;
 }
-declare namespace Theme {
-    function setup(styles: ThemeSetup): void;
+export interface Themes {
+    [name: string]: ThemeSetup;
 }
-export default Theme;

package/core/theme/useTheme.d.ts

@@ -0,0 +1,2 @@
+import { BoxThemeStyles, ThemeProps } from '../../types';
+export default function useTheme(props: ThemeProps): BoxThemeStyles | undefined;