@cronocode/react-box 3.0.15 → 3.0.17

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

package/components/dropdown.d.ts

@@ -1,6 +1,6 @@
-import { Ref } from 'react';
+import { RefAttributes } from 'react';
 import { BoxProps } from '../box';
-interface Props<TVal> extends BoxProps<'button'> {
+interface Props<TVal> extends Omit<BoxProps<'button'>, 'ref'> {
     name?: string;
     defaultValue?: TVal | TVal[];
     value?: TVal | TVal[];
@@ -18,7 +18,7 @@ interface DropdownDisplayProps<TVal> extends Omit<BoxProps, 'children'> {
     children: ((selectedValues: TVal[], isOpen: boolean) => React.ReactNode) | React.ReactNode;
 }
 interface DropdownType {
-    <TVal>(props: Props<TVal>, ref: Ref<HTMLInputElement>): React.ReactNode;
+    <TVal>(props: Props<TVal> & RefAttributes<HTMLInputElement>): React.ReactNode;
     Item: <TVal>(props: DropdownItemProps<TVal>) => React.ReactNode;
     Unselect: (props: BoxProps) => React.ReactNode;
     SelectAll: (props: BoxProps) => React.ReactNode;

package/components/dropdown.mjs

@@ -1,43 +1,55 @@
-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 { jsxs as V, jsx as n, Fragment as K } from "react/jsx-runtime";
+import { forwardRef as ee, useState as O, useRef as J, useMemo as c, useCallback as te, useEffect as oe } from "react";
+import y from "../box.mjs";
 import M from "./textbox.mjs";
-import oe from "./flex.mjs";
-import { b as re } from "../core.mjs";
-import ne from "./baseSvg.mjs";
+import re from "./flex.mjs";
+import { b as ne } from "../core.mjs";
+import se 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(() => {
+import pe from "./button.mjs";
+function ie(l, m) {
+  const {
+    name: p,
+    defaultValue: g,
+    value: w,
+    multiple: a,
+    isSearchable: v,
+    searchPlaceholder: q,
+    children: S,
+    hideIcon: W,
+    onChange: r,
+    props: _,
+    ...$
+  } = l, [z, x] = O(Array.isArray(g) ? g : g ? [g] : []), i = "value" in l ? Array.isArray(w) ? w : w ? [w] : [] : z, [A, C] = O(""), [d, E, b] = ne(), T = J(null), L = J(null), [H, G] = O(0), N = c(() => H > window.innerHeight / 2, [H]), Q = c(() => {
     var e;
     return N ? ((e = b.current) == null ? void 0 : e.getBoundingClientRect().height) ?? 0 : 0;
-  }, [N, b]), l = c(
+  }, [N, b]), s = c(
     () => (Array.isArray(S) ? S : [S]).flatMap((e) => e),
     [S]
-  ), H = c(() => l.filter((e) => {
+  ), Y = c(() => s.filter((e) => {
     var t;
     return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownItem";
-  }), [l]), f = c(() => H.filter((e) => w && A ? O(e).toLowerCase().includes(A.toLowerCase()) : !0), [w, A, l]), v = c(() => l.find((e) => {
+  }), [s]), f = c(() => Y.filter((e) => v && A ? R(e).toLowerCase().includes(A.toLowerCase()) : !0), [v, A, s]), h = c(() => s.find((e) => {
     var t;
     return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownUnselect";
-  }), [l]), Y = c(() => l.find((e) => {
+  }), [s]), j = c(() => s.find((e) => {
     var t;
     return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownSelectAll";
-  }), [l]), j = c(() => l.find((e) => {
+  }), [s]), U = c(() => s.find((e) => {
     var t;
     return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownEmptyItem";
-  }), [l]), k = c(() => l.find((e) => {
+  }), [s]), P = c(() => s.find((e) => {
     var t;
     return ((t = e.type) == null ? void 0 : t.displayName) === "DropdownDisplay";
-  }), [l]), Q = c(() => {
-    if (k)
-      return typeof k.props.children == "function" ? k.props.children(i, d) : k.props.children;
+  }), [s]), X = c(() => {
+    if (P)
+      return typeof P.props.children == "function" ? P.props.children(i, d) : P.props.children;
     const e = f.filter((o) => i.includes(o.props.value));
     if (a && e.length > 1)
-      return e.map((o) => O(o)).join(", ");
+      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) ?? (a ? null : v == null ? void 0 : v.props.children);
-  }, [a, f, i, v, d]), U = ee(
+    return (t == null ? void 0 : t.props.children) ?? (t == null ? void 0 : t.props.value) ?? (a ? null : h == null ? void 0 : h.props.children);
+  }, [a, f, i, h, d]), B = te(
     (e, ...t) => {
       if (t.length === 0)
         x([]), r == null || r(void 0, []);
@@ -47,7 +59,7 @@ function pe(s, m) {
       } else if (t.length === 1) {
         const o = t[0];
         if (a) {
-          const u = i.filter((P) => P !== o.props.value);
+          const u = i.filter((k) => k !== 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]);
@@ -55,117 +67,125 @@ function pe(s, m) {
       a ? (e.stopPropagation(), setTimeout(() => {
         var o;
         return (o = T.current) == null ? void 0 : o.focus();
-      }, 0)) : (C(!1), setTimeout(() => {
+      }, 0)) : (E(!1), setTimeout(() => {
         var o;
         return (o = b.current) == null ? void 0 : o.focus();
       }, 0));
     },
     [a, i, x]
   );
-  te(() => {
+  oe(() => {
     d ? setTimeout(() => {
       var e, t, 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("");
+      (e = T.current) == null || e.focus(), (o = (t = L.current) == null ? void 0 : t.querySelector('[aria-selected="true"]')) == null || o.scrollIntoView({ block: "nearest" });
+    }, 0) : C("");
   }, [d]);
-  const F = Y && a && f.length > i.length, X = v && f.length > 0 && !F;
-  return /* @__PURE__ */ B(h, { width: "fit-content", children: [
+  const F = j && a && f.length > i.length, Z = h && f.length > 0 && !F;
+  return /* @__PURE__ */ V(y, { 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,
+    /* @__PURE__ */ V(
+      pe,
       {
         ref: b,
         type: "button",
         component: "dropdown",
-        onClick: () => C((e) => !e),
-        props: { tabIndex: 0 },
-        ..._,
+        onClick: () => E((e) => !e),
+        props: { tabIndex: 0, ..._ },
+        ...$,
         children: [
-          w && /* @__PURE__ */ n(
+          v && /* @__PURE__ */ n(
             M,
             {
-              display: d && w ? "block" : "none",
+              display: d && v ? "block" : "none",
               clean: !0,
               flex1: !0,
               width: 1,
               minHeight: 5,
               placeholder: q,
               value: A,
-              onChange: (e) => R(e.target.value),
+              onChange: (e) => C(e.target.value),
               ref: T,
               props: {
                 onClick: (e) => {
-                  d && w && e.stopPropagation();
+                  d && v && e.stopPropagation();
                 }
               }
             }
           ),
-          /* @__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" }) }) })
+          /* @__PURE__ */ n(re, { component: "dropdown.display", display: d && v ? "none" : "flex", children: X ?? /* @__PURE__ */ n(K, { children: " " }) }),
+          !W && /* @__PURE__ */ n(y, { children: /* @__PURE__ */ n(se, { 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__ */ n(
       le,
       {
-        ref: E,
+        ref: L,
         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 || j) && /* @__PURE__ */ B(h, { component: "dropdown.items", children: [
-          X && /* @__PURE__ */ n(
-            h,
+        style: { transform: `translateY(-${Q}px)` },
+        onPositionChange: (e) => G(e.top - window.scrollY),
+        children: (f.length > 0 || U) && /* @__PURE__ */ V(y, { component: "dropdown.items", children: [
+          Z && /* @__PURE__ */ n(
+            y,
             {
               component: "dropdown.unselect",
               selected: i.length === 0,
-              ...v.props,
-              props: { onClick: (e) => U(e) }
+              ...h.props,
+              props: { ...h.props.props, onClick: (e) => B(e) }
+            }
+          ),
+          F && /* @__PURE__ */ n(
+            y,
+            {
+              component: "dropdown.selectAll",
+              ...j.props,
+              props: { ...j.props.props, onClick: (e) => B(e, ...Y) }
             }
           ),
-          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__ */ n(
-              h,
+              y,
               {
                 component: "dropdown.item",
                 variant: a ? "multiple" : void 0,
                 selected: i.includes(t),
                 ...u,
                 props: {
-                  onClick: (P) => {
-                    o == null || o(P), U(P, e);
+                  ...u.props,
+                  onClick: (k) => {
+                    o == null || o(k), B(k, e);
                   }
                 }
               },
               t
             );
           }),
-          f.length === 0 && j && /* @__PURE__ */ n(h, { component: "dropdown.emptyItem", ...j.props })
+          f.length === 0 && U && /* @__PURE__ */ n(y, { component: "dropdown.emptyItem", ...U.props })
         ] })
       }
     )
   ] });
 }
-function D(s) {
+function D(l) {
   const m = (p) => null;
-  return m.displayName = s, m;
+  return m.displayName = l, m;
 }
-const I = K(pe);
+const I = ee(ie);
 I.Item = D("DropdownItem");
 I.Unselect = D("DropdownUnselect");
 I.SelectAll = D("DropdownSelectAll");
 I.EmptyItem = D("DropdownEmptyItem");
 I.Display = D("DropdownDisplay");
-function O(s) {
+function R(l) {
   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) => O(y)).join("") : p.toString();
+  if (l == null) return "";
+  if (typeof l == "object") {
+    const p = (m = l.props) == null ? void 0 : m.children;
+    return p == null ? "" : typeof p == "object" ? (Array.isArray(p) ? p : [p]).map((w) => R(w)).join("") : p.toString();
   }
-  return s.toString();
+  return l.toString();
 }
 export {
   I 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"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),i=require("../box.cjs");function t(n){return s.forwardRef((e,o)=>c.jsx(i,{tag:n,ref:o,component:n,...e}))}const a=t("label"),r=t("span"),m=t("article"),u=t("aside"),H=t("details"),l=t("figcaption"),g=t("figure"),d=t("footer"),p=t("header"),S=t("main"),f=t("mark"),h=t("nav"),M=t("menu"),b=t("section"),F=t("summary"),k=t("time"),y=t("p"),v=t("h1"),A=t("h2"),L=t("h3"),j=t("h4"),q=t("h5"),x=t("h6"),P=t("a"),R=t("img");exports.Article=m;exports.Aside=u;exports.Details=H;exports.Figcaption=l;exports.Figure=g;exports.Footer=d;exports.H1=v;exports.H2=A;exports.H3=L;exports.H4=j;exports.H5=q;exports.H6=x;exports.Header=p;exports.Img=R;exports.Label=a;exports.Link=P;exports.Main=S;exports.Mark=f;exports.Menu=M;exports.Nav=h;exports.P=y;exports.Section=b;exports.Span=r;exports.Summary=F;exports.Time=k;

package/components/semantics.d.ts

@@ -3,29 +3,29 @@ import { BoxProps } from '../box';
 import { ExtractElementFromTag } from '../core/coreTypes';
 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 declare const Label: SemanticComponentType<"label", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Span: SemanticComponentType<"span", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Article: SemanticComponentType<"article", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Aside: SemanticComponentType<"aside", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Details: SemanticComponentType<"details", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Figcaption: SemanticComponentType<"figcaption", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Figure: SemanticComponentType<"figure", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Footer: SemanticComponentType<"footer", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Header: SemanticComponentType<"header", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Main: SemanticComponentType<"main", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Mark: SemanticComponentType<"mark", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Nav: SemanticComponentType<"nav", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Menu: SemanticComponentType<"menu", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Section: SemanticComponentType<"section", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Summary: SemanticComponentType<"summary", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Time: SemanticComponentType<"time", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const P: SemanticComponentType<"p", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const H1: SemanticComponentType<"h1", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const H2: SemanticComponentType<"h2", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const H3: SemanticComponentType<"h3", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const H4: SemanticComponentType<"h4", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const H5: SemanticComponentType<"h5", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const H6: SemanticComponentType<"h6", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Link: SemanticComponentType<"a", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
+export declare const Img: SemanticComponentType<"img", "button" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "span" | "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" | "datagrid.columnGroups" | "datagrid.columnGroups.item" | "datagrid.columnGroups.item.icon">;
 export {};

package/components/semantics.mjs

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

package/core/extends/boxComponents.d.ts

@@ -7,6 +7,41 @@ export interface BoxComponent {
 }
 export type Components = Record<string, BoxComponent>;
 declare const boxComponents: {
+    h1: {
+        styles: {
+            fontSize: number;
+        };
+    };
+    h2: {
+        styles: {
+            fontSize: number;
+        };
+    };
+    h3: {
+        styles: {
+            fontSize: number;
+        };
+    };
+    h4: {
+        styles: {
+            fontSize: number;
+        };
+    };
+    h5: {
+        styles: {
+            fontSize: number;
+        };
+    };
+    h6: {
+        styles: {
+            fontSize: number;
+        };
+    };
+    span: {
+        styles: {
+            inline: true;
+        };
+    };
     button: {
         styles: {
             display: "inline-flex";
@@ -30,10 +65,6 @@ declare const boxComponents: {
                 borderColor: "gray-300";
             };
         };
-        variants: {
-            test: {};
-            test2: {};
-        };
     };
     textbox: {
         styles: {
@@ -307,6 +338,42 @@ declare const boxComponents: {
             borderRadius: number;
         };
         children: {
+            columnGroups: {
+                styles: {
+                    p: number;
+                    bb: number;
+                    borderColor: "gray-400";
+                    color: "gray-400";
+                    gap: number;
+                    ai: "center";
+                    height: number;
+                };
+                children: {
+                    item: {
+                        styles: {
+                            gap: number;
+                            ai: "center";
+                            b: number;
+                            borderColor: "gray-400";
+                            bgColor: "gray-100";
+                            borderRadius: number;
+                            py: number;
+                            pl: number;
+                            pr: number;
+                            color: "violet-950";
+                        };
+                        children: {
+                            icon: {
+                                styles: {
+                                    width: number;
+                                    color: "gray-400";
+                                    cursor: "pointer";
+                                };
+                            };
+                        };
+                    };
+                };
+            };
             header: {
                 styles: {
                     position: "sticky";