@cronocode/react-box 3.0.7 → 3.0.9

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/dropdown.cjs

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

package/components/dropdown.d.ts

@@ -17,7 +17,8 @@ interface DropdownDisplayProps<TVal> extends Omit<BoxProps, 'children'> {
 interface DropdownType {
     <TVal>(props: Props<TVal>, ref: Ref<HTMLInputElement>): React.ReactNode;
     Item: <TVal>(props: DropdownItemProps<TVal>) => React.ReactNode;
-    UnselectItem: (props: BoxProps) => React.ReactNode;
+    Unselect: (props: BoxProps) => React.ReactNode;
+    SelectAll: (props: BoxProps) => React.ReactNode;
     EmptyItem: (props: BoxProps) => React.ReactNode;
     Display: <TVal>(props: DropdownDisplayProps<TVal>) => React.ReactNode;
 }

package/components/dropdown.mjs

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

package/core/boxStyles.d.ts

@@ -714,6 +714,16 @@ export declare const cssStyles: {
         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;
@@ -766,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;