@cronocode/react-box 2.0.6 → 3.0.0

package/box.cjs

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

package/box.d.ts

@@ -1,9 +1,11 @@
+import { default as React, RefAttributes } from 'react';
 import { ClassNameType } from './core/classNames';
-import { BoxStyleProps, ExtractElementFromTag } from './core/types';
-import { default as React, Ref, RefAttributes } from 'react';
-
+import { ExtractElementFromTag } from './core/coreTypes';
+import { BoxStyleProps } from './types';
+import { default as BoxExtends } from './core/boxExtends';
+import { default as Theme } from './core/theme';
 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'>;
+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 {
     children?: React.ReactNode | ((props: {
         isHover: boolean;
@@ -13,8 +15,12 @@ interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends BoxStyle
     className?: ClassNameType;
     style?: React.ComponentProps<TTag>['style'];
 }
-declare function Box<TTag extends keyof React.JSX.IntrinsicElements = 'div'>(props: Props<TTag>, ref: Ref<ExtractElementFromTag<TTag>>): React.ReactElement<React.ComponentProps<TTag>, string | React.JSXElementConstructor<any>>;
-declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: Props<TTag> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
-export default _default;
+interface BoxType {
+    <TTag extends keyof React.JSX.IntrinsicElements = 'div'>(props: Props<TTag> & RefAttributes<ExtractElementFromTag<TTag>>): React.ReactNode;
+    extend: typeof BoxExtends.extend;
+    themeSetup: typeof Theme.setup;
+}
+declare const Box: BoxType;
+export default Box;
 export type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = React.ComponentProps<typeof Box<TTag>>;
 export type BoxTagProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = Required<BoxProps<TTag>>['props'];

package/box.mjs

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

package/components/baseSvg.d.ts

@@ -1,9 +1,8 @@
-import { ClassNameType } from '../core/classNames';
-import { BoxSvgStyles } from '../core/types';
 import { BoxTagProps } from '../box';
-
+import { BoxStyleProps } from '../types';
+import { ClassNameType } from '../core/classNames';
 type BoxSvgTagProps = Omit<BoxTagProps<'svg'>, 'viewBox' | 'width' | 'height'>;
-interface Props extends Omit<BoxSvgStyles, 'width' | 'height'> {
+interface Props extends Omit<BoxStyleProps, 'width' | 'height'> {
     children?: React.ReactNode | ((props: {
         isHover: boolean;
     }) => React.ReactNode);

package/components/button.cjs

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

package/components/button.d.ts

@@ -1,5 +1,4 @@
 import { default as Box } from '../box';
-
 type BoxProps = Omit<React.ComponentProps<typeof Box<'button'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];
 declare const tagProps: readonly ["type", "onClick"];

package/components/button.mjs

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
 import s from "../box.mjs";
-import { O as m } from "../utils.mjs";
+import { O as m } from "../core.mjs";
 const e = ["type", "onClick"];
 function f(o, t) {
   const r = m.buildProps(o, e);

package/components/checkbox.cjs

@@ -1 +1 @@
-"use strict";const u=require("react/jsx-runtime"),t=require("react"),s=require("../box.cjs"),i=require("../utils.cjs"),a=["name","onInput","onChange","autoFocus","readOnly","required","value","checked","defaultChecked"];function d(n,r){const{indeterminate:c}=n,o=i.ObjectUtils.buildProps(n,a,{type:"checkbox"}),e=t.useRef(null);return t.useImperativeHandle(r,()=>e.current),t.useEffect(()=>{e.current&&(e.current.indeterminate=!!c)},[e,c]),u.jsx(s,{tag:"input",ref:e,component:"checkbox",...o})}const f=t.forwardRef(d);module.exports=f;
+"use strict";const i=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs"),a=require("../core.cjs"),s=["name","onInput","onChange","autoFocus","readOnly","value","defaultChecked"];function d(t,c){const o=a.ObjectUtils.buildProps(t,s,{type:"checkbox"}),r=Array.isArray(t.indeterminate)?t.indeterminate[0]:t.indeterminate,e=n.useRef(null);return n.useImperativeHandle(c,()=>e.current),n.useEffect(()=>{e.current&&(e.current.indeterminate=!!r)},[e,r]),i.jsx(u,{tag:"input",ref:e,component:"checkbox",...o})}const f=n.forwardRef(d);module.exports=f;

package/components/checkbox.d.ts

@@ -1,6 +1,5 @@
 import { BoxTagProps, BoxProps } from '../box';
-
-declare const tagProps: readonly ["name", "onInput", "onChange", "autoFocus", "readOnly", "required", "value", "checked", "defaultChecked"];
+declare const tagProps: readonly ["name", "onInput", "onChange", "autoFocus", "readOnly", "value", "defaultChecked"];
 type TagPropsType = (typeof tagProps)[number];
 type CheckboxProps = Omit<BoxProps<'input'>, 'tag' | 'props'>;
 type CheckboxTagProps = Omit<BoxTagProps<'input'>, TagPropsType | 'type'>;
@@ -12,9 +11,7 @@ interface Props extends CheckboxProps {
     value?: string | number;
     autoFocus?: boolean;
     readOnly?: boolean;
-    required?: boolean;
     defaultChecked?: boolean;
-    indeterminate?: boolean;
 }
-declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
+declare const _default: import('react').ForwardRefExoticComponent<Omit<Props, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
 export default _default;

package/components/checkbox.mjs

@@ -1,15 +1,15 @@
 import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as u, useRef as a, useImperativeHandle as f, useEffect as i } from "react";
-import s from "../box.mjs";
-import { O as m } from "../utils.mjs";
-const d = ["name", "onInput", "onChange", "autoFocus", "readOnly", "required", "value", "checked", "defaultChecked"];
-function p(o, n) {
-  const { indeterminate: t } = o, r = m.buildProps(o, d, { type: "checkbox" }), e = a(null);
-  return f(n, () => e.current), i(() => {
-    e.current && (e.current.indeterminate = !!t);
-  }, [e, t]), /* @__PURE__ */ c(s, { tag: "input", ref: e, component: "checkbox", ...r });
+import { forwardRef as a, useRef as i, useImperativeHandle as u, useEffect as m } from "react";
+import f from "../box.mjs";
+import { O as s } from "../core.mjs";
+const d = ["name", "onInput", "onChange", "autoFocus", "readOnly", "value", "defaultChecked"];
+function l(t, r) {
+  const o = s.buildProps(t, d, { type: "checkbox" }), n = Array.isArray(t.indeterminate) ? t.indeterminate[0] : t.indeterminate, e = i(null);
+  return u(r, () => e.current), m(() => {
+    e.current && (e.current.indeterminate = !!n);
+  }, [e, n]), /* @__PURE__ */ c(f, { tag: "input", ref: e, component: "checkbox", ...o });
 }
-const k = u(p);
+const k = a(l);
 export {
   k as default
 };

package/components/dataGrid/dataGridContract.d.ts

@@ -1,16 +1,24 @@
-/// <reference types="react" />
-export interface GridCell<T> {
-    key: keyof T;
+import { Key } from 'react';
+type KeysMatching<T, V> = {
+    [K in keyof T]-?: T[K] extends V ? K : never;
+}[keyof T];
+export interface GridDef<TRow> {
+    rowKey?: KeysMatching<TRow, Key> | ((rowData: TRow) => Key);
+    columns: GridColumn<TRow>[];
+}
+export interface GridCell<TRow> {
+    key: keyof TRow;
     value: React.ReactNode;
 }
-export interface GridColumn<T extends {}> {
-    key: keyof T;
+export interface GridColumn<TRow> {
+    key: keyof TRow;
 }
-export interface GridRow<T extends {}> {
-    dataRow: T;
-    cells: GridCell<T>[];
+export interface GridRow<TRow> {
+    dataRow: TRow;
+    cells: GridCell<TRow>[];
 }
-export interface Grid<T extends {}> {
-    columns: GridColumn<T>[];
-    rows: GridRow<T>[];
+export interface GridData<TRow> {
+    columns: GridColumn<TRow>[];
+    rows: GridRow<TRow>[];
 }
+export {};

package/components/dataGrid/useGridData.d.ts

@@ -0,0 +1,7 @@
+import { GridColumn, GridData } from './dataGridContract';
+interface Props<TRow> {
+    data?: TRow[];
+    columns: GridColumn<TRow>[];
+}
+export default function useGridData<TRow>(props: Props<TRow>): GridData<TRow>;
+export {};

package/components/dataGrid.cjs

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

package/components/dataGrid.d.ts

@@ -1,5 +1,7 @@
-interface Props<T extends {}> {
-    data?: T[];
+import { GridDef } from './dataGrid/dataGridContract';
+interface Props<TRow> {
+    data?: TRow[];
+    def: GridDef<TRow>;
 }
-export default function DataGrid<T extends {}>(props: Props<T>): import("react/jsx-runtime").JSX.Element;
+export default function DataGrid<TRow extends {}>(props: Props<TRow>): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/components/dataGrid.mjs

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

package/components/flex.d.ts

@@ -1,8 +1,6 @@
-import { default as Box } from '../box';
 import { RefAttributes } from 'react';
-
-type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
-type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
+import { default as Box } from '../box';
+import { ExtractElementFromTag } from '../core/coreTypes';
 type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = Omit<React.ComponentProps<typeof Box<TTag>>, 'ref'>;
-declare const _default: <TTag extends keyof import("react").JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & 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("../utils.cjs");function l(t){const{onSubmit:s,props:n}=t,r=o.useRef(null),u=o.useCallback(e=>{e.preventDefault();const i=f.FormUtils.getFormEntries(r.current);s(i,e)},[]),c={...n,onSubmit:u,ref:r};return m.jsx(a,{tag:"form",...t,props:c})}module.exports=l;
+"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;

package/components/form.d.ts

@@ -1,5 +1,4 @@
 import { default as Box } from '../box';
-
 type BoxProps = React.ComponentProps<typeof Box<'form'>>;
 type BoxTagProps = Required<BoxProps>['props'];
 type FormTagProps = Omit<BoxTagProps, 'onSubmit' | 'ref'>;

package/components/form.mjs

@@ -1,7 +1,7 @@
 import { jsx as u } from "react/jsx-runtime";
 import { useRef as a, useCallback as i } from "react";
 import p from "../box.mjs";
-import { F as c } from "../utils.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();

package/components/grid.d.ts

@@ -1,8 +1,6 @@
-import { default as Box } from '../box';
 import { RefAttributes } from 'react';
-
-type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
-type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
+import { default as Box } from '../box';
+import { ExtractElementFromTag } from '../core/coreTypes';
 type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = Omit<React.ComponentProps<typeof Box<TTag>>, 'ref'>;
-declare const _default: <TTag extends keyof import("react").JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
 export default _default;

package/components/label.d.ts

@@ -1,5 +1,4 @@
 import { BoxProps } from '../box';
-
 interface Props extends Omit<BoxProps<'label'>, 'ref' | 'tag'> {
 }
 declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLLabelElement>>;

package/components/radioButton.cjs

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

package/components/radioButton.d.ts

@@ -1,8 +1,7 @@
 import { default as Box } from '../box';
-
 type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];
-declare const tagProps: readonly ["name", "onInput", "onChange", "value", "autoFocus", "readOnly", "required", "checked", "defaultChecked"];
+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<BoxProps, 'props'> {
@@ -13,7 +12,6 @@ interface Props extends Omit<BoxProps, 'props'> {
     value?: string | number;
     autoFocus?: boolean;
     readOnly?: boolean;
-    required?: boolean;
     defaultChecked?: boolean;
 }
 declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;

package/components/radioButton.mjs

@@ -1,13 +1,13 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import a from "../box.mjs";
-import { O as u } from "../utils.mjs";
-const i = ["name", "onInput", "onChange", "value", "autoFocus", "readOnly", "required", "checked", "defaultChecked"];
-function d(o, t) {
+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__ */ e(a, { ref: t, tag: "input", component: "radioButton", ...r });
+  return /* @__PURE__ */ n(e, { ref: t, tag: "input", component: "radioButton", ...r });
 }
-const f = n(d);
+const c = a(p);
 export {
-  f as default
+  c as default
 };

package/components/textarea.cjs

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),o=require("react"),a=require("../box.cjs"),s=require("../utils.cjs"),u=["name","onInput","onChange","placeholder","value","defaultValue","rows","cols","autoFocus","maxLength","minLength","readOnly","required"];function c(e,t){const r=s.ObjectUtils.buildProps(e,u);return n.jsx(a,{ref:t,tag:"textarea",component:"textarea",...r})}const i=o.forwardRef(c);module.exports=i;
+"use strict";const o=require("react/jsx-runtime"),n=require("react"),a=require("../box.cjs"),s=require("../core.cjs"),c=["name","onInput","onChange","placeholder","value","defaultValue","rows","cols","autoFocus","maxLength","minLength","readOnly"];function u(e,t){const r=s.ObjectUtils.buildProps(e,c);return o.jsx(a,{ref:t,tag:"textarea",component:"textarea",...r})}const i=n.forwardRef(u);module.exports=i;

package/components/textarea.d.ts

@@ -1,8 +1,7 @@
 import { default as Box } from '../box';
-
 type BoxProps = Omit<React.ComponentProps<typeof Box<'textarea'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];
-declare const tagProps: readonly ["name", "onInput", "onChange", "placeholder", "value", "defaultValue", "rows", "cols", "autoFocus", "maxLength", "minLength", "readOnly", "required"];
+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<BoxProps, 'props'> {

package/components/textarea.mjs

@@ -1,7 +1,7 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as a } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
 import n from "../box.mjs";
-import { O as s } from "../utils.mjs";
+import { O as s } from "../core.mjs";
 const m = [
   "name",
   "onInput",
@@ -14,14 +14,13 @@ const m = [
   "autoFocus",
   "maxLength",
   "minLength",
-  "readOnly",
-  "required"
+  "readOnly"
 ];
-function p(t, e) {
-  const o = s.buildProps(t, m);
-  return /* @__PURE__ */ r(n, { ref: e, tag: "textarea", component: "textarea", ...o });
+function p(t, o) {
+  const e = s.buildProps(t, m);
+  return /* @__PURE__ */ a(n, { ref: o, tag: "textarea", component: "textarea", ...e });
 }
-const i = a(p);
+const i = r(p);
 export {
   i as default
 };

package/components/textbox.cjs

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

package/components/textbox.d.ts

@@ -1,5 +1,4 @@
 import { default as Box } from '../box';
-
 type BoxProps = Omit<React.ComponentProps<typeof Box<'input'>>, 'ref' | 'tag'>;
 type BoxTagProps = Required<BoxProps>['props'];
 declare const tagProps: readonly ["name", "onInput", "onChange", "type", "placeholder", "defaultValue", "autoFocus", "readOnly", "required", "value", "pattern"];
@@ -18,7 +17,6 @@ interface Props extends Omit<BoxProps, 'props'> {
     pattern?: string;
     autoFocus?: boolean;
     readOnly?: boolean;
-    required?: boolean;
     step?: number | string;
 }
 declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;

package/components/textbox.mjs

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
 import a from "../box.mjs";
-import { O as p } from "../utils.mjs";
+import { O as p } from "../core.mjs";
 const u = [
   "name",
   "onInput",

package/components/tooltip.cjs

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

package/components/tooltip.d.ts

@@ -1,6 +1,5 @@
-import { default as React } from 'react';
 import { default as Box } from '../box';
-
+import { default as React } from 'react';
 interface Props extends React.ComponentProps<typeof Box> {
     onPositionChange?(position: {
         top: number;

package/components/tooltip.mjs

@@ -1,63 +1,57 @@
-import { jsxs as v, Fragment as b, jsx as a } from "react/jsx-runtime";
-import { createPortal as x } from "react-dom";
-import d from "../box.mjs";
-import { useMemo as E, useRef as C, useState as g, useCallback as f, useLayoutEffect as L } from "react";
-function y() {
-  return E(() => {
-    const i = "crono-box";
-    let r = document.getElementById(i);
-    return r || (r = document.createElement("div"), r.id = i, document.body.appendChild(r)), r;
-  }, []);
-}
-const l = 2;
-function M(i) {
-  const { onPositionChange: r } = i, c = C(null), [t, p] = g(), m = y(), w = f(
-    (n, e) => {
-      const o = (s) => {
-        s.target.contains(n) && e(n);
+import { jsxs as v, Fragment as x, jsx as a } from "react/jsx-runtime";
+import { createPortal as b } from "react-dom";
+import u from "../box.mjs";
+import { useRef as E, useState as L, useCallback as d, useLayoutEffect as g } from "react";
+import { a as z } from "../core.mjs";
+const i = 2;
+function y(f) {
+  const { onPositionChange: c } = f, s = E(null), [t, p] = L(), m = z(), w = d(
+    (o, e) => {
+      const r = (n) => {
+        n.target.contains(o) && e(o);
       };
-      return document.addEventListener("scroll", o, { capture: !0 }), () => {
-        document.removeEventListener("scroll", o, { capture: !0 });
+      return document.addEventListener("scroll", r, { capture: !0 }), () => {
+        document.removeEventListener("scroll", r, { capture: !0 });
       };
     },
     [t]
-  ), h = f(
-    (n, e) => {
-      const o = (s) => {
-        e(n);
+  ), h = d(
+    (o, e) => {
+      const r = (n) => {
+        e(o);
       };
-      return window.addEventListener("resize", o, { capture: !0 }), () => {
-        window.removeEventListener("resize", o, { capture: !0 });
+      return window.addEventListener("resize", r, { capture: !0 }), () => {
+        window.removeEventListener("resize", r, { capture: !0 });
       };
     },
     [t]
-  ), u = f(
-    (n) => {
-      const e = n.getBoundingClientRect(), o = Math.round((e.top + window.scrollY) * l) / l, s = Math.round((e.left + window.scrollX) * l) / l;
-      ((t == null ? void 0 : t.top) !== o || (t == null ? void 0 : t.left) !== s) && (r == null || r({ top: o, left: s }), p({ top: o, left: s, width: e.width > 0 ? e.width : void 0 }));
+  ), l = d(
+    (o) => {
+      const e = o.getBoundingClientRect(), r = Math.round((e.top + window.scrollY) * i) / i, n = Math.round((e.left + window.scrollX) * i) / i;
+      ((t == null ? void 0 : t.top) !== r || (t == null ? void 0 : t.left) !== n) && (c == null || c({ top: r, left: n }), p({ top: r, left: n, width: e.width > 0 ? e.width : void 0 }));
     },
     [t]
   );
-  return L(() => {
-    if (c.current) {
-      u(c.current);
-      const n = w(c.current, u), e = h(c.current, u);
+  return g(() => {
+    if (s.current) {
+      l(s.current);
+      const o = w(s.current, l), e = h(s.current, l);
       return () => {
-        n(), e();
+        o(), e();
       };
     }
-  }, [t]), /* @__PURE__ */ v(b, { children: [
-    /* @__PURE__ */ a(d, { ref: c }),
-    t && x(
+  }, [t]), /* @__PURE__ */ v(x, { children: [
+    /* @__PURE__ */ a(u, { ref: s }),
+    t && b(
       /* @__PURE__ */ a(
-        d,
+        u,
         {
           position: "absolute",
           top: 0,
           left: 0,
           transition: "none",
           style: { transform: `translate(${t.left}px,${t.top}px)`, width: t.width },
-          children: /* @__PURE__ */ a(d, { position: "absolute", width: "fit", ...i })
+          children: /* @__PURE__ */ a(u, { position: "absolute", width: "fit", ...f })
         }
       ),
       m
@@ -65,5 +59,5 @@ function M(i) {
   ] });
 }
 export {
-  M as default
+  y as default
 };

package/core/boxExtends.d.ts

@@ -0,0 +1,6 @@
+import { BoxStyle } from './coreTypes';
+declare namespace BoxExtends {
+    function extend<TProps extends Record<string, BoxStyle[]>>(variables: Record<string, string>, props: TProps): TProps;
+    function getVariables(): string;
+}
+export default BoxExtends;