@cronocode/react-box 3.0.5 → 3.0.7

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 t=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:f,checked:g}=a,B=e.useStyles(a,c==="svg"),r=t.useMemo(()=>{const b=e.classNames(B,p).join(" "),s={...m,className:b};return e.BoxUtils.assignBooleanProp(x,"disabled",s),e.BoxUtils.assignBooleanProp(f,"required",s),e.BoxUtils.assignBooleanProp(g,"checked",s),i&&(s.style=i),l&&(s.ref=l),s},[a]),[v,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:v}):n)}const o=t.memo(t.forwardRef(h));o.extend=e.BoxExtends.extend;o.themeSetup=e.Theme.setup;o.getVariableValue=e.Variables.getVariableValue;module.exports=o;
+"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;

package/box.mjs

@@ -1,19 +1,19 @@
-import V, { memo as b, forwardRef as h, useMemo as y, useState as P } from "react";
-import { B as N, T as S, V as C, u as E, c as H, a as t } from "./core.mjs";
-function M(s, r) {
-  const { tag: l = "div", children: a, props: d, className: m, style: c, disabled: f, required: p, checked: g } = s, x = E(s, l === "svg"), o = y(() => {
-    const v = H(x, m).join(" "), e = {
+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,
-      className: v
+      className: P
     };
-    return t.assignBooleanProp(f, "disabled", e), t.assignBooleanProp(p, "required", e), t.assignBooleanProp(g, "checked", e), c && (e.style = c), r && (e.ref = r), e;
-  }, [s]), [B, i] = P(!1), u = typeof a == "function";
-  return u && (o.onMouseEnter = () => i(!0), o.onMouseLeave = () => i(!1)), V.createElement(l, o, u ? a({ isHover: B }) : a);
+    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);
 }
-const n = b(h(M));
-n.extend = N.extend;
-n.themeSetup = S.setup;
-n.getVariableValue = C.getVariableValue;
+const n = b(h(T));
+n.extend = S.extend;
+n.themeSetup = C.setup;
+n.getVariableValue = E.getVariableValue;
 export {
   n 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 r=require("react/jsx-runtime"),c=require("react"),w=require("../box.cjs"),A=require("./tooltip.cjs"),L=require("./baseSvg.cjs"),T=require("../core.cjs"),g=require("./textbox.cjs"),N=require("./flex.cjs"),y=require("./button.cjs");function P(n,d){var v;const{children:o,name:S,isSearchable:u,searchPlaceholder:C,onChange:f,selectedValue:I}=n,[l,b]=c.useState(""),i=c.useMemo(()=>(Array.isArray(o)?o:[o]).filter(a=>{var s;return((s=a.type)==null?void 0:s.componentName)!=="DropdownItem"?!1:u&&l?q(a).toLowerCase().includes(l.toLowerCase()):!0}),[u,l,o]),[t,k]=c.useState(i.find(e=>e.props.value===I)??(i==null?void 0:i[0])),[p,h,M]=T.useVisibility(),m=c.useRef(null),R=c.useCallback(()=>{h(e=>!e)},[h]),_=c.useCallback(e=>{var a,s;k(e),h(!1),(s=(a=e.props).onClick)==null||s.call(a),f==null||f(e.props.value),setTimeout(()=>{var x;return(x=m.current)==null?void 0:x.focus()},10)},[]);return c.useEffect(()=>{p?setTimeout(()=>{var e;return(e=m.current)==null?void 0:e.focus()},0):b("")},[p]),r.jsxs(w,{ref:M,width:"fit-content",userSelect:"none",children:[r.jsx(g,{name:S,type:"hidden",value:(v=t==null?void 0:t.props)==null?void 0:v.toString()}),r.jsxs(y,{component:"dropdown",...n,props:{onMouseDown:R,tabIndex:0},children:[p&&u?r.jsx(g,{clean:!0,flex1:!0,width:1,placeholder:C,value:l,onChange:e=>b(e.target.value),ref:m,props:{onMouseDown:e=>{p&&u&&e.stopPropagation()}}}):r.jsx(N,{children:(t==null?void 0:t.props.children)??(t==null?void 0:t.props.value)}),r.jsx(L,{viewBox:"0 0 10 6",width:"0.6rem",rotate:p?180:0,children:r.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4"})})]}),p&&r.jsx(A,{children:r.jsxs(w,{component:"dropdown.items",children:[i.map((e,a)=>{var s;return r.jsx(j,{...e.props,onClick:()=>_(e)},(s=e.props.value)==null?void 0:s.toString())}),i.length===0&&r.jsx(w,{p:2,color:"gray-500",userSelect:"none",props:{onMouseDown:e=>e.stopPropagation()},children:"No options"})]})})]})}function j(n){return r.jsx(y,{component:"dropdown.item",...n,props:{onMouseDown:n.onClick}})}j.componentName="DropdownItem";const D=c.forwardRef(P);D.Item=j;function q(n){var d;if(n==null)return"";if(typeof n=="object"){const o=(d=n.props)==null?void 0:d.children;return o==null?"":typeof o=="object"?(Array.isArray(o)?o:[o]).map(u=>q(u)).join(""):o.toString()}return n.toString()}module.exports=D;
+"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;

package/components/dropdown.d.ts

@@ -1,21 +1,25 @@
 import { Ref } from 'react';
 import { BoxProps } from '../box';
-interface DropdownItemProps<TVal> extends BoxProps {
-    value: TVal;
-    onClick?: () => 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<HTMLDivElement>): React.ReactNode;
-declare function DropdownItem<TVal>(props: DropdownItemProps<TVal>): import("react/jsx-runtime").JSX.Element;
-type DropdownType = typeof DropdownImpl & {
-    Item: typeof DropdownItem;
-};
 declare const Dropdown: DropdownType;
 export default Dropdown;

package/components/dropdown.mjs

@@ -1,79 +1,140 @@
-import { jsxs as w, jsx as n } from "react/jsx-runtime";
-import { forwardRef as N, useState as D, useMemo as P, useRef as R, useCallback as b, useEffect as H } from "react";
-import x from "../box.mjs";
-import O from "./tooltip.mjs";
-import V from "./baseSvg.mjs";
-import { b as E } from "../core.mjs";
-import C from "./textbox.mjs";
-import F from "./flex.mjs";
-import I from "./button.mjs";
-function U(e, u) {
-  var y;
-  const { children: r, name: S, isSearchable: p, searchPlaceholder: T, onChange: f, selectedValue: k } = e, [l, g] = D(""), i = P(() => (Array.isArray(r) ? r : [r]).filter((a) => {
-    var s;
-    return ((s = a.type) == null ? void 0 : s.componentName) !== "DropdownItem" ? !1 : p && l ? j(a).toLowerCase().includes(l.toLowerCase()) : !0;
-  }), [p, l, r]), [t, B] = D(
-    i.find((o) => o.props.value === k) ?? (i == null ? void 0 : i[0])
-  ), [c, m, M] = E(), d = R(null), A = b(() => {
-    m((o) => !o);
-  }, [m]), L = b((o) => {
-    var a, s;
-    B(o), m(!1), (s = (a = o.props).onClick) == null || s.call(a), f == null || f(o.props.value), setTimeout(() => {
-      var h;
-      return (h = d.current) == null ? void 0 : h.focus();
-    }, 10);
-  }, []);
-  return H(() => {
-    c ? setTimeout(() => {
-      var o;
-      return (o = d.current) == null ? void 0 : o.focus();
-    }, 0) : g("");
-  }, [c]), /* @__PURE__ */ w(x, { ref: M, width: "fit-content", userSelect: "none", children: [
-    /* @__PURE__ */ n(C, { name: S, type: "hidden", value: (y = t == null ? void 0 : t.props) == null ? void 0 : y.toString() }),
-    /* @__PURE__ */ w(I, { component: "dropdown", ...e, props: { onMouseDown: A, tabIndex: 0 }, children: [
-      c && p ? /* @__PURE__ */ n(
-        C,
+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: m && d ? "block" : "none",
           clean: !0,
           flex1: !0,
           width: 1,
-          placeholder: T,
-          value: l,
-          onChange: (o) => g(o.target.value),
-          ref: d,
+          minHeight: 5,
+          placeholder: C,
+          value: D,
+          onChange: (e) => M(e.target.value),
+          ref: N,
           props: {
-            onMouseDown: (o) => {
-              c && p && o.stopPropagation();
+            onMouseDown: (e) => {
+              m && d && e.stopPropagation();
             }
           }
         }
-      ) : /* @__PURE__ */ n(F, { children: (t == null ? void 0 : t.props.children) ?? (t == null ? void 0 : t.props.value) }),
-      /* @__PURE__ */ n(V, { viewBox: "0 0 10 6", width: "0.6rem", rotate: c ? 180 : 0, children: /* @__PURE__ */ n("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) })
+      ),
+      /* @__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" }) }) })
     ] }),
-    c && /* @__PURE__ */ n(O, { children: /* @__PURE__ */ w(x, { component: "dropdown.items", children: [
-      i.map((o, a) => {
-        var s;
-        return /* @__PURE__ */ n(v, { ...o.props, onClick: () => L(o) }, (s = o.props.value) == null ? void 0 : s.toString());
-      }),
-      i.length === 0 && /* @__PURE__ */ n(x, { p: 2, color: "gray-500", userSelect: "none", props: { onMouseDown: (o) => o.stopPropagation() }, children: "No options" })
-    ] }) })
+    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 v(e) {
-  return /* @__PURE__ */ n(I, { component: "dropdown.item", ...e, props: { onMouseDown: e.onClick } });
+function b(s) {
+  const u = (r) => null;
+  return u.componentName = s, u;
 }
-v.componentName = "DropdownItem";
-const W = N(U);
-W.Item = v;
-function j(e) {
+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 (e == null) return "";
-  if (typeof e == "object") {
-    const r = (u = e.props) == null ? void 0 : u.children;
-    return r == null ? "" : typeof r == "object" ? (Array.isArray(r) ? r : [r]).map((p) => j(p)).join("") : r.toString();
+  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 e.toString();
+  return s.toString();
 }
 export {
-  W as default
+  S as default
 };

package/components/tooltip.cjs

@@ -1 +1 @@
-"use strict";const i=require("react/jsx-runtime"),v=require("react-dom"),d=require("../box.cjs"),s=require("react"),x=require("../core.cjs"),l=2;function b(f){const{onPositionChange:u}=f,c=s.useRef(null),[t,p]=s.useState(),w=x.usePortalContainer(),h=s.useCallback((n,e)=>{const r=o=>{o.target.contains(n)&&e(n)};return document.addEventListener("scroll",r,{capture:!0}),()=>{document.removeEventListener("scroll",r,{capture:!0})}},[t]),m=s.useCallback((n,e)=>{const r=o=>{e(n)};return window.addEventListener("resize",r,{capture:!0}),()=>{window.removeEventListener("resize",r,{capture:!0})}},[t]),a=s.useCallback(n=>{const e=n.getBoundingClientRect(),r=Math.round((e.top+window.scrollY)*l)/l,o=Math.round((e.left+window.scrollX)*l)/l;((t==null?void 0:t.top)!==r||(t==null?void 0:t.left)!==o)&&(u==null||u({top:r,left:o}),p({top:r,left:o,width:e.width>0?e.width:void 0}))},[t]);return s.useLayoutEffect(()=>{if(c.current){a(c.current);const n=h(c.current,a),e=m(c.current,a);return()=>{n(),e()}}},[t]),i.jsxs(i.Fragment,{children:[i.jsx(d,{ref:c}),t&&v.createPortal(i.jsx(d,{position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${t.left}px,${t.top}px)`,width:t.width},children:i.jsx(d,{position:"absolute",width:"fit",...f})}),w)]})}module.exports=b;
+"use strict";const i=require("react/jsx-runtime"),x=require("react-dom"),d=require("../box.cjs"),n=require("react"),b=require("../core.cjs"),l=2;function R(f,p){const{onPositionChange:u}=f,c=n.useRef(null),[t,w]=n.useState(),h=b.usePortalContainer(),m=n.useCallback((o,e)=>{const r=s=>{s.target.contains(o)&&e(o)};return document.addEventListener("scroll",r,{capture:!0}),()=>{document.removeEventListener("scroll",r,{capture:!0})}},[t]),v=n.useCallback((o,e)=>{const r=s=>{e(o)};return window.addEventListener("resize",r,{capture:!0}),()=>{window.removeEventListener("resize",r,{capture:!0})}},[t]),a=n.useCallback(o=>{const e=o.getBoundingClientRect(),r=Math.round((e.top+window.scrollY)*l)/l,s=Math.round((e.left+window.scrollX)*l)/l;((t==null?void 0:t.top)!==r||(t==null?void 0:t.left)!==s)&&(u==null||u({top:r,left:s}),w({top:r,left:s,width:e.width>0?e.width:void 0}))},[t]);return n.useLayoutEffect(()=>{if(c.current){a(c.current);const o=m(c.current,a),e=v(c.current,a);return()=>{o(),e()}}},[t]),i.jsxs(i.Fragment,{children:[i.jsx(d,{ref:c}),t&&x.createPortal(i.jsx(d,{ref:p,position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${t.left}px,${t.top}px)`,width:t.width},children:i.jsx(d,{position:"absolute",width:"fit",...f})}),h)]})}const C=n.forwardRef(R);module.exports=C;

package/components/tooltip.d.ts

@@ -5,5 +5,5 @@ interface Props extends BoxProps {
         left: number;
     }): void;
 }
-export default function Tooltip(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLDivElement>>;
+export default _default;

package/components/tooltip.mjs

@@ -1,11 +1,11 @@
-import { jsxs as v, Fragment as x, jsx as a } from "react/jsx-runtime";
-import { createPortal as b } from "react-dom";
+import { jsxs as x, Fragment as b, jsx as a } from "react/jsx-runtime";
+import { createPortal as E } from "react-dom";
 import u from "../box.mjs";
-import { useRef as E, useState as L, useCallback as d, useLayoutEffect as g } from "react";
-import { d as z } from "../core.mjs";
+import { forwardRef as L, useRef as R, useState as g, useCallback as d, useLayoutEffect as z } from "react";
+import { d as C } from "../core.mjs";
 const i = 2;
-function y(f) {
-  const { onPositionChange: c } = f, s = E(null), [t, p] = L(), m = z(), w = d(
+function D(f, p) {
+  const { onPositionChange: c } = f, s = R(null), [t, m] = g(), w = C(), h = d(
     (o, e) => {
       const r = (n) => {
         n.target.contains(o) && e(o);
@@ -15,7 +15,7 @@ function y(f) {
       };
     },
     [t]
-  ), h = d(
+  ), v = d(
     (o, e) => {
       const r = (n) => {
         e(o);
@@ -28,24 +28,25 @@ function y(f) {
   ), l = d(
     (o) => {
       const e = o.getBoundingClientRect(), r = Math.round((e.top + window.scrollY) * i) / i, n = Math.round((e.left + window.scrollX) * i) / i;
-      ((t == null ? void 0 : t.top) !== r || (t == null ? void 0 : t.left) !== n) && (c == null || c({ top: r, left: n }), p({ top: r, left: n, width: e.width > 0 ? e.width : void 0 }));
+      ((t == null ? void 0 : t.top) !== r || (t == null ? void 0 : t.left) !== n) && (c == null || c({ top: r, left: n }), m({ top: r, left: n, width: e.width > 0 ? e.width : void 0 }));
     },
     [t]
   );
-  return g(() => {
+  return z(() => {
     if (s.current) {
       l(s.current);
-      const o = w(s.current, l), e = h(s.current, l);
+      const o = h(s.current, l), e = v(s.current, l);
       return () => {
         o(), e();
       };
     }
-  }, [t]), /* @__PURE__ */ v(x, { children: [
+  }, [t]), /* @__PURE__ */ x(b, { children: [
     /* @__PURE__ */ a(u, { ref: s }),
-    t && b(
+    t && E(
       /* @__PURE__ */ a(
         u,
         {
+          ref: p,
           position: "absolute",
           top: 0,
           left: 0,
@@ -54,10 +55,11 @@ function y(f) {
           children: /* @__PURE__ */ a(u, { position: "absolute", width: "fit", ...f })
         }
       ),
-      m
+      w
     )
   ] });
 }
+const M = L(D);
 export {
-  y as default
+  M as default
 };

package/core/boxStyles.d.ts

@@ -701,6 +701,14 @@ 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;
@@ -726,12 +734,14 @@ export declare const pseudo2: {
     checked: string;
     required: string;
     disabled: string;
+    selected: string;
 };
 export declare const pseudoClasses: {
     indeterminate: string;
     checked: string;
     required: string;
     disabled: string;
+    selected: string;
     hover: string;
     focus: string;
     hasFocus: string;
@@ -745,9 +755,9 @@ export declare const pseudoClasses: {
     hasRequired: string;
     hasDisabled: string;
 };
-export declare const pseudoClassesWeight: Record<"indeterminate" | "checked" | "required" | "disabled" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled", number>;
+export declare const pseudoClassesWeight: Record<"indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled", number>;
 export declare const pseudoClassesByWeight: {
-    [key: number]: ("indeterminate" | "checked" | "required" | "disabled" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled")[];
+    [key: number]: ("indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled")[];
 };
 export declare const pseudoGroupClasses: {
     hoverGroup: "hover";

package/core/variables.d.ts

@@ -196,7 +196,6 @@ declare namespace Variables {
         'indigo-900': string;
         'indigo-950': string;
         'violet-50': string;
-        'violet-XX': string;
         'violet-100': string;
         'violet-200': string;
         'violet-300': string;
@@ -253,7 +252,7 @@ declare namespace Variables {
         'rose-900': string;
         'rose-950': string;
     };
-    type ColorType = keyof typeof colors;
+    type ColorType = keyof typeof colors | 'none';
     function getVariableValue(name: string): string;
     function generateVariables(): string;
     function setUserVariables(variables: Record<string, string>): void;