@cronocode/react-box 3.0.4 → 3.0.6

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/baseSvg.d.ts

@@ -1,3 +1,4 @@
+import { Ref } from 'react';
 import { BoxTagProps } from '../box';
 import { BoxStyleProps } from '../types';
 import { ClassNameType } from '../core/classNames';
@@ -13,5 +14,7 @@ interface Props extends Omit<BoxStyleProps, 'width' | 'height'> {
     width?: string;
     height?: string;
 }
+declare function BaseSvg(props: Props, ref: Ref<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<SVGSVGElement>>;
 export default _default;
+export type BaseSvgProps = React.ComponentProps<typeof BaseSvg>;

package/components/button.cjs

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),r=require("react"),s=require("../box.cjs"),c=require("../core.cjs"),u=["type","onClick"];function i(t,o){const e=c.ObjectUtils.buildProps(t,u);return n.jsx(s,{ref:o,tag:"button",component:"button",...e})}const b=r.forwardRef(i);module.exports=b;
+"use strict";const n=require("react/jsx-runtime"),r=require("react"),s=require("../box.cjs"),c=require("../core.cjs"),u=["type","onClick"];function i(t,o){const e=c.ObjectUtils.buildProps(t,u);return n.jsx(s,{ref:o,tag:"button",component:"button",...e})}const p=r.forwardRef(i);module.exports=p;

package/components/dropdown.cjs

@@ -1 +1 @@
-"use strict";const e=require("react/jsx-runtime"),p=require("react"),a=require("../box.cjs"),b=require("./tooltip.cjs"),k=require("./baseSvg.cjs"),q=require("./flex.cjs"),C=require("../core.cjs"),I=require("./textbox.cjs");function v(r,y){const{children:i,name:d}=r,s=(Array.isArray(i)?i:[i]).filter(n=>{var t;return((t=n.type)==null?void 0:t.componentName)==="DropdownItem"}),[o,w]=p.useState(s==null?void 0:s[0]),[u,c,f]=C.useVisibility(),h=p.useCallback(()=>{c(n=>!n)},[c]),j=p.useCallback(n=>{var t,m;w(n),c(!1),(m=(t=n.props).onClick)==null||m.call(t)},[]);return e.jsxs(a,{ref:f,width:"fit-content",userSelect:"none",props:{tabIndex:0},children:[e.jsx(I,{name:d,type:"hidden",value:o==null?void 0:o.props.value}),e.jsxs(q,{component:"dropdown",gap:2,jc:"space-between",...r,props:{onMouseDown:h,onBlur:()=>c(!1)},children:[(o==null?void 0:o.props.label)??(o==null?void 0:o.props.children)??(o==null?void 0:o.props.value),e.jsx(k,{viewBox:"0 0 10 6",width:"0.6rem",rotate:u?180:0,children:e.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m1 1 4 4 4-4",style:{transition:"none"}})})]}),u&&e.jsx(b,{children:e.jsx(a,{component:"dropdown.items",children:s.map(n=>e.jsx(l,{...n.props,onClick:()=>j(n)},n.props.value))})})]})}function l(r){return e.jsx(a,{component:"dropdown.item",...r,props:{onClick:r.onClick,tabIndex:0}})}l.componentName="DropdownItem";const x=p.forwardRef(v);x.Item=l;module.exports=x;
+"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;

package/components/dropdown.d.ts

@@ -1,18 +1,25 @@
 import { Ref } from 'react';
 import { BoxProps } from '../box';
-interface DropdownItemProps extends BoxProps {
-    value: string | number;
-    label?: string;
-    onClick?: () => void;
+interface DropdownItemProps<TVal> extends BoxProps {
+    value: TVal;
+    onClick?: (e: React.MouseEvent) => void;
 }
-interface Props extends BoxProps {
+interface Props<TVal> extends BoxProps {
     name?: string;
-    children: React.ReactElement<DropdownItemProps> | Array<React.ReactElement<DropdownItemProps>>;
+    children: React.ReactElement<DropdownItemProps<TVal>> | Array<React.ReactElement<DropdownItemProps<TVal>>>;
+    isSearchable?: boolean;
+    searchPlaceholder?: string;
+    onChange?: (value: TVal) => void;
+    selectedValue?: TVal;
 }
-declare function DropdownImpl(props: Props, ref: Ref<HTMLSelectElement>): React.ReactNode;
-declare function DropdownItem(props: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+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,46 +1,106 @@
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
-import { forwardRef as k, useState as C, useCallback as u } from "react";
-import s from "../box.mjs";
-import I from "./tooltip.mjs";
-import v from "./baseSvg.mjs";
-import y from "./flex.mjs";
-import { b as D } from "../core.mjs";
-import j from "./textbox.mjs";
-function B(e, T) {
-  const { children: m, name: d } = e, p = (Array.isArray(m) ? m : [m]).filter((r) => {
-    var t;
-    return ((t = r.type) == null ? void 0 : t.componentName) === "DropdownItem";
-  }), [o, w] = C(p == null ? void 0 : p[0]), [c, i, h] = D(), x = u(() => {
-    i((r) => !r);
-  }, [i]), b = u((r) => {
-    var t, l;
-    w(r), i(!1), (l = (t = r.props).onClick) == null || l.call(t);
+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 /* @__PURE__ */ f(s, { ref: h, width: "fit-content", userSelect: "none", props: { tabIndex: 0 }, children: [
-    /* @__PURE__ */ n(j, { name: d, type: "hidden", value: o == null ? void 0 : o.props.value }),
-    /* @__PURE__ */ f(y, { component: "dropdown", gap: 2, jc: "space-between", ...e, props: { onMouseDown: x, onBlur: () => i(!1) }, children: [
-      (o == null ? void 0 : o.props.label) ?? (o == null ? void 0 : o.props.children) ?? (o == null ? void 0 : o.props.value),
-      /* @__PURE__ */ n(v, { viewBox: "0 0 10 6", width: "0.6rem", rotate: c ? 180 : 0, children: /* @__PURE__ */ n(
-        "path",
+  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,
         {
-          stroke: "currentColor",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: "2",
-          d: "m1 1 4 4 4-4",
-          style: { transition: "none" }
+          display: i && c ? "block" : "none",
+          clean: !0,
+          flex1: !0,
+          width: 1,
+          placeholder: P,
+          value: a,
+          onChange: (o) => b(o.target.value),
+          ref: S,
+          props: {
+            onMouseDown: (o) => {
+              i && c && o.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" }) })
     ] }),
-    c && /* @__PURE__ */ n(I, { children: /* @__PURE__ */ n(s, { component: "dropdown.items", children: p.map((r) => /* @__PURE__ */ n(a, { ...r.props, onClick: () => b(r) }, r.props.value)) }) })
+    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
+    ] }) })
   ] });
 }
-function a(e) {
-  return /* @__PURE__ */ n(s, { component: "dropdown.item", ...e, props: { onClick: e.onClick, tabIndex: 0 } });
+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 });
+}
+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();
+  }
+  return n.toString();
 }
-a.componentName = "DropdownItem";
-const S = k(B);
-S.Item = a;
 export {
-  S as default
+  k 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,11 @@ export declare const cssStyles: {
         valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
         styleName: string;
     }[];
+    bgImage: {
+        values: readonly ["none", "bg-img-checked", "bg-img-indeterminate", "bg-img-radio"];
+        valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
+        styleName: string;
+    }[];
 };
 export declare const pseudo1: {
     hover: string;
@@ -721,12 +726,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;
@@ -740,9 +747,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

@@ -1,8 +1,11 @@
 declare namespace Variables {
     const colors: {
-        inherit: string;
-        current: string;
+        currentColor: string;
         transparent: string;
+        green: string;
+        red: string;
+        blue: string;
+        gray: string;
         black: string;
         white: string;
         'slate-50': string;
@@ -203,6 +206,7 @@ declare namespace Variables {
         'violet-800': string;
         'violet-900': string;
         'violet-950': string;
+        vi: string;
         'purple-50': string;
         'purple-100': string;
         'purple-200': string;
@@ -248,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;