@cronocode/react-box 3.0.12 → 3.0.14

package/components/dropdown.cjs

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

package/components/dropdown.d.ts

@@ -7,7 +7,7 @@ interface Props<TVal> extends BoxProps<'button'> {
     multiple?: boolean;
     isSearchable?: boolean;
     searchPlaceholder?: string;
-    hideArrow?: boolean;
+    hideIcon?: boolean;
     onChange?: (value: Maybe<TVal>, values: TVal[]) => void;
 }
 interface DropdownItemProps<TVal> extends BoxProps {
@@ -15,7 +15,7 @@ interface DropdownItemProps<TVal> extends BoxProps {
     onClick?(e: React.MouseEvent): void;
 }
 interface DropdownDisplayProps<TVal> extends Omit<BoxProps, 'children'> {
-    children: (selectedValues: TVal[], isOpen: boolean) => React.ReactNode;
+    children: ((selectedValues: TVal[], isOpen: boolean) => React.ReactNode) | React.ReactNode;
 }
 interface DropdownType {
     <TVal>(props: Props<TVal>, ref: Ref<HTMLInputElement>): React.ReactNode;

package/components/dropdown.mjs

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

package/components/flex.d.ts

@@ -1,5 +1,6 @@
 import { RefAttributes } from 'react';
 import { BoxProps } from '../box';
 import { ExtractElementFromTag } from '../core/coreTypes';
-declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+import { ComponentsAndVariants } from '../types';
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div", TKey extends keyof ComponentsAndVariants = never>(props: BoxProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
 export default _default;

package/components/form.cjs

@@ -1 +1 @@
-"use strict";const m=require("react/jsx-runtime"),o=require("react"),a=require("../box.cjs"),f=require("../core.cjs");function l(r){const{onSubmit:n,props:s}=r,t=o.useRef(null),u=o.useCallback(e=>{e.preventDefault();const i=f.FormUtils.getFormEntries(t.current);n(i,e)},[]),c={...s,onSubmit:u,ref:t};return m.jsx(a,{tag:"form",...r,props:c})}module.exports=l;
+"use strict";const m=require("react/jsx-runtime"),n=require("react"),a=require("../box.cjs"),f=require("../core.cjs");function l(r){const{onSubmit:t,props:s}=r,e=n.useRef(null),u=n.useCallback(o=>{o.preventDefault();const i=f.FormUtils.getFormEntries(e.current);t(i,o)},[t]),c={...s,onSubmit:u,ref:e};return m.jsx(a,{tag:"form",...r,props:c})}module.exports=l;

package/components/form.mjs

@@ -1,15 +1,18 @@
 import { jsx as u } from "react/jsx-runtime";
 import { useRef as a, useCallback as i } from "react";
 import p from "../box.mjs";
-import { F as c } from "../core.mjs";
-function x(o) {
-  const { onSubmit: m, props: n } = o, r = a(null), e = i((t) => {
-    t.preventDefault();
-    const f = c.getFormEntries(r.current);
-    m(f, t);
-  }, []), s = { ...n, onSubmit: e, ref: r };
+import { e as c } from "../core.mjs";
+function F(o) {
+  const { onSubmit: r, props: e } = o, t = a(null), n = i(
+    (m) => {
+      m.preventDefault();
+      const f = c.getFormEntries(t.current);
+      r(f, m);
+    },
+    [r]
+  ), s = { ...e, onSubmit: n, ref: t };
   return /* @__PURE__ */ u(p, { tag: "form", ...o, props: s });
 }
 export {
-  x as default
+  F as default
 };

package/components/grid.d.ts

@@ -1,5 +1,6 @@
 import { RefAttributes } from 'react';
 import { BoxProps } from '../box';
 import { ExtractElementFromTag } from '../core/coreTypes';
-declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+import { ComponentsAndVariants } from '../types';
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div", TKey extends keyof ComponentsAndVariants = never>(props: BoxProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
 export default _default;

package/components/radioButton.cjs

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),r=require("react"),u=require("../box.cjs"),s=require("../core.cjs"),c=["name","onInput","onChange","value","autoFocus","readOnly","defaultChecked"];function a(t,o){const e=s.ObjectUtils.buildProps(t,c,{type:"radio"});return n.jsx(u,{ref:o,tag:"input",component:"radioButton",...e})}const i=r.forwardRef(a);module.exports=i;
+"use strict";const e=require("react/jsx-runtime"),n=require("react"),r=require("../box.cjs"),u=require("../core.cjs"),s=["name","onInput","onChange","value","autoFocus","readOnly","defaultChecked"];function c(t,i){const o=u.ObjectUtils.buildProps(t,s,{type:"radio"});return e.jsx(r,{tag:"input",component:"radioButton",...o})}const a=n.forwardRef(c);module.exports=a;

package/components/radioButton.d.ts

@@ -1,10 +1,11 @@
-import { BoxProps } from '../box';
-type RadioButtonProps = Omit<BoxProps<'input'>, 'ref' | 'tag'>;
-type BoxTagProps = Required<RadioButtonProps>['props'];
+import { RefAttributes } from 'react';
+import { BoxProps, BoxTagProps } from '../box';
+import { ComponentsAndVariants } from '../types';
 declare const tagProps: readonly ["name", "onInput", "onChange", "value", "autoFocus", "readOnly", "defaultChecked"];
 type TagPropsType = (typeof tagProps)[number];
-type RadioButtonTagProps = Omit<BoxTagProps, TagPropsType | 'type'>;
-interface Props extends Omit<RadioButtonProps, 'props'> {
+type RadioButtonProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'input', TKey>, 'tag' | 'props'>;
+type RadioButtonTagProps = Omit<BoxTagProps<'input'>, TagPropsType | 'type'>;
+interface Props<TKey extends keyof ComponentsAndVariants> extends RadioButtonProps<TKey> {
     name?: string;
     props?: RadioButtonTagProps;
     onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -14,5 +15,5 @@ interface Props extends Omit<RadioButtonProps, 'props'> {
     readOnly?: boolean;
     defaultChecked?: boolean;
 }
-declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
+declare const _default: <TKey extends keyof ComponentsAndVariants = "radioButton">(props: Props<TKey> & RefAttributes<HTMLInputElement>) => React.ReactNode;
 export default _default;

package/components/radioButton.mjs

@@ -1,13 +1,13 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as a } from "react";
-import e from "../box.mjs";
-import { O as u } from "../core.mjs";
-const i = ["name", "onInput", "onChange", "value", "autoFocus", "readOnly", "defaultChecked"];
-function p(o, t) {
-  const r = u.buildProps(o, i, { type: "radio" });
-  return /* @__PURE__ */ n(e, { ref: t, tag: "input", component: "radioButton", ...r });
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import a from "../box.mjs";
+import { O as e } from "../core.mjs";
+const u = ["name", "onInput", "onChange", "value", "autoFocus", "readOnly", "defaultChecked"];
+function i(o, p) {
+  const t = e.buildProps(o, u, { type: "radio" });
+  return /* @__PURE__ */ r(a, { tag: "input", component: "radioButton", ...t });
 }
-const c = a(p);
+const c = n(i);
 export {
   c as default
 };

package/components/semantics.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),r=require("../box.cjs");function t(e,n){return s.forwardRef((o,i)=>c.jsx(r,{tag:e,ref:i,component:e,...n,...o}))}const a=t("label"),m=t("article"),u=t("aside"),H=t("details"),f=t("figcaption"),l=t("figure"),S=t("footer"),g=t("header"),d=t("main"),h=t("mark"),M=t("nav"),b=t("menu"),p=t("section"),z=t("summary"),F=t("time"),k=t("p"),y=t("h1",{fontSize:14*2.5}),v=t("h2",{fontSize:14*2}),A=t("h3",{fontSize:14*1.75}),L=t("h4",{fontSize:14*1.5}),j=t("h5",{fontSize:14*1.25}),q=t("h6",{fontSize:14*1}),x=t("a"),P=t("img");exports.Article=m;exports.Aside=u;exports.Details=H;exports.Figcaption=f;exports.Figure=l;exports.Footer=S;exports.H1=y;exports.H2=v;exports.H3=A;exports.H4=L;exports.H5=j;exports.H6=q;exports.Header=g;exports.Img=P;exports.Label=a;exports.Link=x;exports.Main=d;exports.Mark=h;exports.Menu=b;exports.Nav=M;exports.P=k;exports.Section=p;exports.Summary=z;exports.Time=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),a=require("../box.cjs");function n(t,e){return s.forwardRef((o,i)=>c.jsx(a,{tag:t,ref:i,component:t,...e,...o}))}const r=n("label"),u=n("span",{inline:!0}),m=n("article"),l=n("aside"),H=n("details"),S=n("figcaption"),f=n("figure"),g=n("footer"),d=n("header"),p=n("main"),h=n("mark"),M=n("nav"),b=n("menu"),z=n("section"),F=n("summary"),k=n("time"),y=n("p"),v=n("h1",{fontSize:14*2.5}),A=n("h2",{fontSize:14*2}),L=n("h3",{fontSize:14*1.75}),j=n("h4",{fontSize:14*1.5}),q=n("h5",{fontSize:14*1.25}),x=n("h6",{fontSize:14*1}),P=n("a"),R=n("img");exports.Article=m;exports.Aside=l;exports.Details=H;exports.Figcaption=S;exports.Figure=f;exports.Footer=g;exports.H1=v;exports.H2=A;exports.H3=L;exports.H4=j;exports.H5=q;exports.H6=x;exports.Header=d;exports.Img=R;exports.Label=r;exports.Link=P;exports.Main=p;exports.Mark=h;exports.Menu=b;exports.Nav=M;exports.P=y;exports.Section=z;exports.Span=u;exports.Summary=F;exports.Time=k;

package/components/semantics.d.ts

@@ -1,29 +1,31 @@
 import { RefAttributes } from 'react';
 import { BoxProps } from '../box';
 import { ExtractElementFromTag } from '../core/coreTypes';
-type SemanticComponentType<TTag extends keyof React.JSX.IntrinsicElements> = (props: Omit<BoxProps<TTag>, 'ref' | 'tag'> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
-export declare const Label: SemanticComponentType<"label">;
-export declare const Article: SemanticComponentType<"article">;
-export declare const Aside: SemanticComponentType<"aside">;
-export declare const Details: SemanticComponentType<"details">;
-export declare const Figcaption: SemanticComponentType<"figcaption">;
-export declare const Figure: SemanticComponentType<"figure">;
-export declare const Footer: SemanticComponentType<"footer">;
-export declare const Header: SemanticComponentType<"header">;
-export declare const Main: SemanticComponentType<"main">;
-export declare const Mark: SemanticComponentType<"mark">;
-export declare const Nav: SemanticComponentType<"nav">;
-export declare const Menu: SemanticComponentType<"menu">;
-export declare const Section: SemanticComponentType<"section">;
-export declare const Summary: SemanticComponentType<"summary">;
-export declare const Time: SemanticComponentType<"time">;
-export declare const P: SemanticComponentType<"p">;
-export declare const H1: SemanticComponentType<"h1">;
-export declare const H2: SemanticComponentType<"h2">;
-export declare const H3: SemanticComponentType<"h3">;
-export declare const H4: SemanticComponentType<"h4">;
-export declare const H5: SemanticComponentType<"h5">;
-export declare const H6: SemanticComponentType<"h6">;
-export declare const Link: SemanticComponentType<"a">;
-export declare const Img: SemanticComponentType<"img">;
+import { ComponentsAndVariants } from '../types';
+type SemanticComponentType<TTag extends keyof React.JSX.IntrinsicElements, TKey extends keyof ComponentsAndVariants = never> = (props: Omit<BoxProps<TTag, TKey>, 'tag'> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+export declare const Label: SemanticComponentType<"label", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Span: SemanticComponentType<"span", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Article: SemanticComponentType<"article", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Aside: SemanticComponentType<"aside", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Details: SemanticComponentType<"details", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Figcaption: SemanticComponentType<"figcaption", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Figure: SemanticComponentType<"figure", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Footer: SemanticComponentType<"footer", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Header: SemanticComponentType<"header", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Main: SemanticComponentType<"main", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Mark: SemanticComponentType<"mark", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Nav: SemanticComponentType<"nav", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Menu: SemanticComponentType<"menu", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Section: SemanticComponentType<"section", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Summary: SemanticComponentType<"summary", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Time: SemanticComponentType<"time", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const P: SemanticComponentType<"p", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const H1: SemanticComponentType<"h1", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const H2: SemanticComponentType<"h2", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const H3: SemanticComponentType<"h3", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const H4: SemanticComponentType<"h4", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const H5: SemanticComponentType<"h5", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const H6: SemanticComponentType<"h6", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Link: SemanticComponentType<"a", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
+export declare const Img: SemanticComponentType<"img", "button" | "label" | "textarea" | "checkbox" | "textbox" | "radioButton" | "dropdown" | "datagrid" | "dropdown.display" | "dropdown.items" | "dropdown.item" | "dropdown.unselect" | "dropdown.selectAll" | "dropdown.emptyItem" | "datagrid.header" | "datagrid.header.cell" | "datagrid.cell">;
 export {};

package/components/semantics.mjs

@@ -1,33 +1,34 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
 import r from "../box.mjs";
-function o(t, n) {
-  return i((c, e) => /* @__PURE__ */ s(r, { tag: t, ref: e, component: t, ...n, ...c }));
+function n(o, t) {
+  return i((c, e) => /* @__PURE__ */ s(r, { tag: o, ref: e, component: o, ...t, ...c }));
 }
-const p = o("label"), u = o("article"), S = o("aside"), h = o("details"), l = o("figcaption"), H = o("figure"), d = o("footer"), g = o("header"), z = o("main"), k = o("mark"), x = o("nav"), F = o("menu"), M = o("section"), b = o("summary"), v = o("time"), y = o("p"), A = o("h1", { fontSize: 14 * 2.5 }), L = o("h2", { fontSize: 14 * 2 }), j = o("h3", { fontSize: 14 * 1.75 }), w = o("h4", { fontSize: 14 * 1.5 }), B = o("h5", { fontSize: 14 * 1.25 }), D = o("h6", { fontSize: 14 * 1 }), I = o("a"), P = o("img");
+const p = n("label"), u = n("span", { inline: !0 }), S = n("article"), l = n("aside"), h = n("details"), H = n("figcaption"), d = n("figure"), g = n("footer"), z = n("header"), k = n("main"), x = n("mark"), F = n("nav"), M = n("menu"), b = n("section"), v = n("summary"), y = n("time"), A = n("p"), L = n("h1", { fontSize: 14 * 2.5 }), j = n("h2", { fontSize: 14 * 2 }), w = n("h3", { fontSize: 14 * 1.75 }), B = n("h4", { fontSize: 14 * 1.5 }), D = n("h5", { fontSize: 14 * 1.25 }), I = n("h6", { fontSize: 14 * 1 }), P = n("a"), R = n("img");
 export {
-  u as Article,
-  S as Aside,
+  S as Article,
+  l as Aside,
   h as Details,
-  l as Figcaption,
-  H as Figure,
-  d as Footer,
-  A as H1,
-  L as H2,
-  j as H3,
-  w as H4,
-  B as H5,
-  D as H6,
-  g as Header,
-  P as Img,
+  H as Figcaption,
+  d as Figure,
+  g as Footer,
+  L as H1,
+  j as H2,
+  w as H3,
+  B as H4,
+  D as H5,
+  I as H6,
+  z as Header,
+  R as Img,
   p as Label,
-  I as Link,
-  z as Main,
-  k as Mark,
-  F as Menu,
-  x as Nav,
-  y as P,
-  M as Section,
-  b as Summary,
-  v as Time
+  P as Link,
+  k as Main,
+  x as Mark,
+  M as Menu,
+  F as Nav,
+  A as P,
+  b as Section,
+  u as Span,
+  v as Summary,
+  y as Time
 };

package/components/textarea.d.ts

@@ -1,10 +1,11 @@
-import { BoxProps } from '../box';
-type TextareaProps = Omit<BoxProps<'textarea'>, 'ref' | 'tag'>;
-type BoxTagProps = Required<TextareaProps>['props'];
+import { RefAttributes } from 'react';
+import { BoxProps, BoxTagProps } from '../box';
+import { ComponentsAndVariants } from '../types';
 declare const tagProps: readonly ["name", "onInput", "onChange", "placeholder", "value", "defaultValue", "rows", "cols", "autoFocus", "maxLength", "minLength", "readOnly"];
 type TagPropsType = (typeof tagProps)[number];
-type TextareaTagProps = Omit<BoxTagProps, TagPropsType>;
-interface Props extends Omit<TextareaProps, 'props'> {
+type TextareaProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'textarea', TKey>, 'tag' | 'props'>;
+type TextareaTagProps = Omit<BoxTagProps<'textarea'>, TagPropsType | 'type'>;
+interface Props<TKey extends keyof ComponentsAndVariants> extends TextareaProps<TKey> {
     name?: string;
     props?: TextareaTagProps;
     onInput?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
@@ -20,5 +21,5 @@ interface Props extends Omit<TextareaProps, 'props'> {
     readOnly?: boolean;
     required?: boolean;
 }
-declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLTextAreaElement>>;
+declare const _default: <TKey extends keyof ComponentsAndVariants = "textarea">(props: Props<TKey> & RefAttributes<HTMLTextAreaElement>) => React.ReactNode;
 export default _default;

package/components/textbox.d.ts

@@ -1,11 +1,12 @@
-import { BoxProps } from '../box';
-type TextareaProps = Omit<BoxProps<'input'>, 'ref' | 'tag'>;
-type BoxTagProps = Required<TextareaProps>['props'];
+import { RefAttributes } from 'react';
+import { BoxProps, BoxTagProps } from '../box';
+import { ComponentsAndVariants } from '../types';
 declare const tagProps: readonly ["name", "onInput", "onChange", "type", "placeholder", "defaultValue", "autoFocus", "readOnly", "required", "value", "pattern"];
 type TagPropsType = (typeof tagProps)[number];
-type TextboxTagProps = Omit<BoxTagProps, TagPropsType>;
+type TextareaProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'input', TKey>, 'tag' | 'props'>;
+type TextboxTagProps = Omit<BoxTagProps<'input'>, TagPropsType | 'type'>;
 type TextboxType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
-interface Props extends Omit<TextareaProps, 'props'> {
+interface Props<TKey extends keyof ComponentsAndVariants> extends TextareaProps<TKey> {
     name?: string;
     props?: TextboxTagProps;
     onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -19,5 +20,5 @@ interface Props extends Omit<TextareaProps, 'props'> {
     readOnly?: boolean;
     step?: number | string;
 }
-declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
+declare const _default: <TKey extends keyof ComponentsAndVariants = "textbox">(props: Props<TKey> & RefAttributes<HTMLInputElement>) => React.ReactNode;
 export default _default;