@cronocode/react-box 3.0.12 → 3.0.13

package/README.md

@@ -114,13 +114,14 @@ export const { extendedProps, extendedPropTypes } = Box.extend(
 
 ```JS
 import '@cronocode/react-box';
-import { ExtractBoxStyles } from '@cronocode/react-box/types';
-import { extendedProps, extendedPropTypes } from './path-to-your-b0x-extends-declaration';
+import { ExtractBoxStyles, ExtractComponentsAndVariants } from '@cronocode/react-box/types';
+import { extendedProps, extendedPropTypes, components } from './path-to-your-b0x-extends-declaration';
 
 declare module '@cronocode/react-box/types' {
   namespace Augmented {
     interface BoxProps extends ExtractBoxStyles<typeof extendedProps> {}
     interface BoxPropTypes extends ExtractBoxStyles<typeof extendedPropTypes> {}
+    interface ComponentsTypes extends ExtractComponentsAndVariants<typeof components> {}
   }
 }
 ```
@@ -130,14 +131,14 @@ declare module '@cronocode/react-box/types' {
 In the project root file (main.tsx) use `Theme.setup`
 
 ```JS
-import Theme from '@cronocode/react-box/theme';
+import Box from '@cronocode/react-box';
 
-Theme.setup({
+Box.components({
   button: {
     styles: {
       px: 4
     },
-    themes: {
+    variants: {
       mytheme: {
         px: 8
       }
@@ -157,13 +158,13 @@ function MyComponent() {
 }
 ```
 
-or is possible to use Button with specific theme
+or is possible to use Button with specific variant
 
 ```JS
 import Button from '@cronocode/react-box/components/button';
 
 function MyComponent() {
-  return <Button theme="mytheme">Click me</Button>
+  return <Button variant="mytheme">Click me</Button>
 }
 ```
 

package/box.cjs

@@ -1 +1 @@
-"use strict";const t=require("react"),e=require("./core.cjs");function P(a,l){const{tag:c="div",children:n,props:m,className:p,style:i,disabled:x,required:B,checked:g,selected:h}=a,f=e.useStyles(a,c==="svg"),r=t.useMemo(()=>{const v=e.classNames(f,p).join(" "),s={...m,className:v};return e.BoxUtils.assignBooleanProp(x,"disabled",s),e.BoxUtils.assignBooleanProp(B,"required",s),e.BoxUtils.assignBooleanProp(g,"checked",s),e.BoxUtils.assignBooleanProp(h,"selected",s),i&&(s.style=i),l&&(s.ref=l),s},[a]),[T,u]=t.useState(!1),d=typeof n=="function";return d&&(r.onMouseEnter=()=>u(!0),r.onMouseLeave=()=>u(!1)),t.createElement(c,r,d?n({isHover:T}):n)}const o=t.memo(t.forwardRef(P));o.extend=e.BoxExtends.extend;o.themeSetup=e.Theme.setup;o.Theme=e.Theme;o.useTheme=e.Theme.useTheme;o.getVariableValue=e.Variables.getVariableValue;module.exports=o;
+"use strict";const t=require("react"),e=require("./core.cjs");function T(n,l){const{tag:c="div",children:a,props:m,className:x,style:i,disabled:B,required:p,checked:g,selected:f}=n,h=e.useStyles(n,c==="svg"),r=t.useMemo(()=>{const P=e.classNames(h,x).join(" "),s={...m,className:P};return e.BoxUtils.assignBooleanProp(B,"disabled",s),e.BoxUtils.assignBooleanProp(p,"required",s),e.BoxUtils.assignBooleanProp(g,"checked",s),e.BoxUtils.assignBooleanProp(f,"selected",s),i&&(s.style=i),l&&(s.ref=l),s},[n]),[v,u]=t.useState(!1),d=typeof a=="function";return d&&(r.onMouseEnter=()=>u(!0),r.onMouseLeave=()=>u(!1)),t.createElement(c,r,d?a({isHover:v}):a)}const o=t.memo(t.forwardRef(T));o.extend=e.BoxExtends.extend;o.components=e.BoxExtends.components;o.Theme=e.Theme;o.useTheme=e.Theme.useTheme;o.getVariableValue=e.Variables.getVariableValue;module.exports=o;

package/box.d.ts

@@ -1,13 +1,13 @@
-import { default as React, Ref, RefAttributes } from 'react';
+import { default as React, RefAttributes } from 'react';
 import { ClassNameType } from './core/classNames';
 import { ExtractElementFromTag } from './core/coreTypes';
-import { BoxStyleProps } from './types';
-import { default as BoxExtends } from './core/boxExtends';
+import { BoxStyleProps, ComponentsAndVariants } from './types';
+import { default as BoxExtends } from './core/extends/boxExtends';
 import { default as Theme } from './core/theme/theme';
 import { default as Variables } from './core/variables';
 type AllProps<TTag extends keyof React.JSX.IntrinsicElements> = React.ComponentProps<TTag>;
 type TagPropsType<TTag extends keyof React.JSX.IntrinsicElements> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref' | 'disabled' | 'required' | 'checked'>;
-interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends BoxStyleProps {
+interface Props<TTag extends keyof React.JSX.IntrinsicElements, TKey extends keyof ComponentsAndVariants> extends BoxStyleProps<TKey> {
     children?: React.ReactNode | ((props: {
         isHover: boolean;
     }) => React.ReactNode);
@@ -16,16 +16,15 @@ interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends BoxStyle
     className?: ClassNameType;
     style?: React.ComponentProps<TTag>['style'];
 }
-declare function BoxComponent<TTag extends keyof React.JSX.IntrinsicElements = 'div'>(props: Props<TTag>, ref: Ref<ExtractElementFromTag<TTag>>): React.ReactElement<React.ComponentProps<TTag>, string | React.JSXElementConstructor<any>>;
 interface BoxType {
-    <TTag extends keyof React.JSX.IntrinsicElements = 'div'>(props: Props<TTag> & RefAttributes<ExtractElementFromTag<TTag>>): React.ReactNode;
+    <TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never>(props: Props<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>>): React.ReactNode;
     extend: typeof BoxExtends.extend;
-    themeSetup: typeof Theme.setup;
+    components: typeof BoxExtends.components;
     Theme: typeof Theme;
     useTheme: typeof Theme.useTheme;
     getVariableValue: typeof Variables.getVariableValue;
 }
 declare const Box: BoxType;
 export default Box;
-export type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = React.ComponentProps<typeof BoxComponent<TTag>>;
-export type BoxTagProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = Required<BoxProps<TTag>>['props'];
+export type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never> = React.ComponentProps<typeof Box<TTag, TKey>>;
+export type BoxTagProps<TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never> = Required<BoxProps<TTag, TKey>>['props'];

package/box.mjs

@@ -1,21 +1,21 @@
-import T, { memo as V, forwardRef as b, useMemo as y, useState as N } from "react";
-import { B as S, T as r, V as C, u as E, c as H, a } from "./core.mjs";
-function M(o, l) {
-  const { tag: c = "div", children: t, props: m, className: p, style: i, disabled: f, required: g, checked: B, selected: h } = o, x = E(o, c === "svg"), n = y(() => {
-    const P = H(x, p).join(" "), e = {
-      ...m,
-      className: P
+import V, { memo as b, forwardRef as y, useMemo as N, useState as C } from "react";
+import { B as u, T as d, V as E, u as H, c as M, a as o } from "./core.mjs";
+function S(a, r) {
+  const { tag: l = "div", children: t, props: p, className: f, style: c, disabled: g, required: B, checked: x, selected: h } = a, v = H(a, l === "svg"), n = N(() => {
+    const T = M(v, f).join(" "), e = {
+      ...p,
+      className: T
     };
-    return a.assignBooleanProp(f, "disabled", e), a.assignBooleanProp(g, "required", e), a.assignBooleanProp(B, "checked", e), a.assignBooleanProp(h, "selected", e), i && (e.style = i), l && (e.ref = l), e;
-  }, [o]), [v, u] = N(!1), d = typeof t == "function";
-  return d && (n.onMouseEnter = () => u(!0), n.onMouseLeave = () => u(!1)), T.createElement(c, n, d ? t({ isHover: v }) : t);
+    return o.assignBooleanProp(g, "disabled", e), o.assignBooleanProp(B, "required", e), o.assignBooleanProp(x, "checked", e), o.assignBooleanProp(h, "selected", e), c && (e.style = c), r && (e.ref = r), e;
+  }, [a]), [P, i] = C(!1), m = typeof t == "function";
+  return m && (n.onMouseEnter = () => i(!0), n.onMouseLeave = () => i(!1)), V.createElement(l, n, m ? t({ isHover: P }) : t);
 }
-const s = V(b(M));
-s.extend = S.extend;
-s.themeSetup = r.setup;
-s.Theme = r;
-s.useTheme = r.useTheme;
-s.getVariableValue = C.getVariableValue;
+const s = b(y(S));
+s.extend = u.extend;
+s.components = u.components;
+s.Theme = d;
+s.useTheme = d.useTheme;
+s.getVariableValue = E.getVariableValue;
 export {
   s as default
 };

package/components/button.d.ts

@@ -1,14 +1,15 @@
-import { BoxProps } from '../box';
-type ButtonProps = Omit<BoxProps<'button'>, 'ref' | 'tag'>;
-type BoxTagProps = Required<ButtonProps>['props'];
+import { RefAttributes } from 'react';
+import { BoxProps, BoxTagProps } from '../box';
+import { ComponentsAndVariants } from '../types';
 declare const tagProps: readonly ["type", "onClick"];
 type TagPropsType = (typeof tagProps)[number];
-type ButtonTagProps = Omit<BoxTagProps, TagPropsType>;
+type ButtonProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'button', TKey>, 'tag' | 'props'>;
+type ButtonTagProps = Omit<BoxTagProps<'button'>, TagPropsType>;
 type ButtonType = Required<React.ComponentProps<'button'>>['type'];
-interface Props extends Omit<ButtonProps, 'props'> {
+interface Props<TKey extends keyof ComponentsAndVariants> extends ButtonProps<TKey> {
     props?: ButtonTagProps;
     type?: ButtonType;
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
-declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLButtonElement>>;
+declare const _default: <TKey extends keyof ComponentsAndVariants = "button">(props: Props<TKey> & RefAttributes<HTMLButtonElement>) => React.ReactNode;
 export default _default;

package/components/checkbox.d.ts

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

package/components/dataGrid.cjs

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime");require("react");const o=require("../box.cjs"),c=require("./grid.cjs");function g(u){const{data:e,def:d}=u,{rowKey:r,columns:i}=d;return i.length===0?(console.error("Cannot render grid without column definitions"),null):n.jsx(o,{component:"dataGrid",children:n.jsxs(c,{b:1,borderRadius:1,children:[i.map((t,s)=>n.jsx(o,{style:{gridColumn:s+1},children:t.key.toString()},s)),((e==null?void 0:e.length)??0)===0&&n.jsx(o,{children:"Empty table"}),((e==null?void 0:e.length)??0)>0&&n.jsx(n.Fragment,{children:e==null?void 0:e.map((t,s)=>{const m=r?typeof r=="function"?r(t):t[r]:s;return n.jsx(c,{style:{gridTemplateRows:"subgrid"},children:i.map((h,l)=>n.jsxs(o,{style:{gridColumn:l+1},children:["tes ",l]},l))},m)})})]})})}module.exports=g;
+"use strict";const n=require("react/jsx-runtime");require("react");const o=require("../box.cjs"),c=require("./grid.cjs");function g(u){const{data:e,def:d}=u,{rowKey:r,columns:i}=d;return i.length===0?(console.error("Cannot render grid without column definitions"),null):n.jsx(o,{component:"datagrid",children:n.jsxs(c,{b:1,borderRadius:1,children:[i.map((t,s)=>n.jsx(o,{style:{gridColumn:s+1},children:t.key.toString()},s)),((e==null?void 0:e.length)??0)===0&&n.jsx(o,{children:"Empty table"}),((e==null?void 0:e.length)??0)>0&&n.jsx(n.Fragment,{children:e==null?void 0:e.map((t,s)=>{const m=r?typeof r=="function"?r(t):t[r]:s;return n.jsx(c,{style:{gridTemplateRows:"subgrid"},children:i.map((h,l)=>n.jsxs(o,{style:{gridColumn:l+1},children:["tes ",l]},l))},m)})})]})})}module.exports=g;

package/components/dataGrid.mjs

@@ -1,15 +1,15 @@
-import { jsx as n, jsxs as c, Fragment as h } from "react/jsx-runtime";
+import { jsx as n, jsxs as c, Fragment as g } from "react/jsx-runtime";
 import "react";
 import i from "../box.mjs";
 import s from "./grid.mjs";
 function x(d) {
   const { data: r, def: u } = d, { rowKey: e, columns: l } = u;
-  return l.length === 0 ? (console.error("Cannot render grid without column definitions"), null) : /* @__PURE__ */ n(i, { component: "dataGrid", children: /* @__PURE__ */ c(s, { b: 1, borderRadius: 1, children: [
+  return l.length === 0 ? (console.error("Cannot render grid without column definitions"), null) : /* @__PURE__ */ n(i, { component: "datagrid", children: /* @__PURE__ */ c(s, { b: 1, borderRadius: 1, children: [
     l.map((o, t) => /* @__PURE__ */ n(i, { style: { gridColumn: t + 1 }, children: o.key.toString() }, t)),
     ((r == null ? void 0 : r.length) ?? 0) === 0 && /* @__PURE__ */ n(i, { children: "Empty table" }),
-    ((r == null ? void 0 : r.length) ?? 0) > 0 && /* @__PURE__ */ n(h, { children: r == null ? void 0 : r.map((o, t) => {
+    ((r == null ? void 0 : r.length) ?? 0) > 0 && /* @__PURE__ */ n(g, { children: r == null ? void 0 : r.map((o, t) => {
       const p = e ? typeof e == "function" ? e(o) : o[e] : t;
-      return /* @__PURE__ */ n(s, { style: { gridTemplateRows: "subgrid" }, children: l.map((f, m) => /* @__PURE__ */ c(i, { style: { gridColumn: m + 1 }, children: [
+      return /* @__PURE__ */ n(s, { style: { gridTemplateRows: "subgrid" }, children: l.map((h, m) => /* @__PURE__ */ c(i, { style: { gridColumn: m + 1 }, children: [
         "tes ",
         m
       ] }, m)) }, p);

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: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]),v=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:v==null?void 0:v.props.children)},[u,f,c,v,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=v&&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,...v.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",variant:u?"multiple":void 0,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 x=n.forwardRef(ee);x.Item=S("DropdownItem");x.Unselect=S("DropdownUnselect");x.SelectAll=S("DropdownSelectAll");x.EmptyItem=S("DropdownEmptyItem");x.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=x;

package/components/dropdown.mjs

@@ -129,7 +129,7 @@ function se(s, m) {
               h,
               {
                 component: "dropdown.item",
-                theme: a ? "multiple" : "single",
+                variant: a ? "multiple" : void 0,
                 selected: i.includes(t),
                 ...u,
                 props: {

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

@@ -3,11 +3,14 @@ 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 };
+  const { onSubmit: r, props: n } = o, t = a(null), e = i(
+    (m) => {
+      m.preventDefault();
+      const f = c.getFormEntries(t.current);
+      r(f, m);
+    },
+    [r]
+  ), s = { ...n, onSubmit: e, ref: t };
   return /* @__PURE__ */ u(p, { tag: "form", ...o, props: s });
 }
 export {

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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
+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">;
 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;

package/components/tooltip.d.ts

@@ -5,5 +5,5 @@ interface Props extends BoxProps {
         left: number;
     }): void;
 }
-declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLDivElement>>;
+declare const _default: import('react').ForwardRefExoticComponent<Omit<Props, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default _default;

package/core/boxStyles.d.ts

@@ -747,6 +747,7 @@ export declare const pseudo2: {
     selected: string;
 };
 export declare const pseudoClasses: {
+    theme: string;
     indeterminate: string;
     checked: string;
     required: string;
@@ -765,15 +766,16 @@ export declare const pseudoClasses: {
     hasRequired: string;
     hasDisabled: string;
 };
-export declare const pseudoClassesWeight: Record<"indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled", number>;
+export declare const pseudoClassesWeight: Record<"theme" | "indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled", number>;
 export declare const pseudoClassesByWeight: {
-    [key: number]: ("indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled")[];
+    [key: number]: ("theme" | "indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled")[];
 };
 export declare const pseudoGroupClasses: {
     hoverGroup: "hover";
     focusGroup: "focus";
     activeGroup: "active";
     disabledGroup: "disabled";
+    theme: "theme";
 };
 export declare const breakpoints: {
     /** Styles applied for small screens and larger. >= 640 */