@cronocode/react-box 1.8.7 → 1.8.9

package/README.md

@@ -10,27 +10,14 @@ This is a react base component which will reduce considerably necessity to write
 npm install @cronocode/react-box
 ```
 
-2. Import styles
+2. Use component
 
-```
-import "@cronocode/react-box/styles.css";
-```
-
-OR
+Sizes is equal to `1/4rem`
 
-```
-@import "@cronocode/react-box/styles.css";
-```
-
-3. Use component
-
-Sizes are divided to `4`
-`padding={3}` means `1rem/4 => 0.75rem`
+`padding={3}` means `1/4 * 3 => 0.75rem`
 
 In the example below is creating a box with `maring: 0.5rem` and `padding: 1.75rem`
 
-Root `font-size` is set to `16px`
-
 ```
 import Box from "@cronocode/react-box";
 
@@ -43,6 +30,8 @@ export default function Component(props: Props) {
 }
 ```
 
+**NOTE**: Root `font-size` is set to `16px`
+
 ## Components
 
 - **Box** - base component with a tons of props
@@ -67,7 +56,7 @@ import Flex from "@cronocode/react-box/components/flex";
 import Button from "@cronocode/react-box/components/button";
 ```
 
-- **Textbox**
+- **Textbox** - this is a `Box` component with html tag `input`
 
 ```
 import Textbox from "@cronocode/react-box/components/textbox";

package/box.cjs

@@ -1 +1 @@
-"use strict";const s=require("react"),u=require("./core.cjs");require("./utils.cjs");function g(t,a){const{tag:n="div",children:r,props:f,className:d,style:c,disabled:o}=t,y=u.useStyles(t,n==="svg"),m=s.useMemo(()=>u.classNames(y,d).join(" "),[t]),e={...f,className:m,disabled:Array.isArray(o)?o[0]:o};c&&(e.style=c),a&&(e.ref=a);const[v,i]=s.useState(!1),l=typeof r=="function";return l&&(e.onMouseEnter=()=>i(!0),e.onMouseLeave=()=>i(!1)),s.createElement(n,e,l?r({isHover:v}):r)}const q=s.forwardRef(g);module.exports=q;
+"use strict";const s=require("react"),u=require("./core.cjs");function g(t,a){const{tag:n="div",children:o,props:f,className:d,style:c,disabled:r}=t,y=u.useStyles(t,n==="svg"),m=s.useMemo(()=>u.classNames(y,d).join(" "),[t]),e={...f,className:m,disabled:Array.isArray(r)?r[0]:r};c&&(e.style=c),a&&(e.ref=a);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;

package/box.d.ts

@@ -1,6 +1,7 @@
-import React, { Ref, RefAttributes } from 'react';
-import { BoxStyleProps, ExtractElementFromTag } from './core/types';
 import { ClassNameType } from './core/classNames';
+import { BoxStyleProps, ExtractElementFromTag } from './core/types';
+import { default as React, Ref, RefAttributes } from 'react';
+
 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'>;
 interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends BoxStyleProps {
@@ -13,7 +14,7 @@ interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends BoxStyle
     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> & React.RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: Props<TTag> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
 export default _default;
 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,13 +1,12 @@
-import y, { forwardRef as v, useMemo as p, useState as g } from "react";
+import y, { forwardRef as v, useMemo as g, useState as p } from "react";
 import { u as N, c as x } from "./core.mjs";
-import "./utils.mjs";
-function H(s, a) {
-  const { tag: r = "div", children: t, props: i, className: u, style: n, disabled: o } = s, f = N(s, r === "svg"), m = p(() => x(f, u).join(" "), [s]), e = { ...i, className: m, disabled: Array.isArray(o) ? o[0] : o };
-  n && (e.style = n), a && (e.ref = a);
-  const [d, l] = g(!1), c = typeof t == "function";
+function H(s, o) {
+  const { tag: r = "div", children: t, props: i, className: u, style: n, disabled: a } = s, f = N(s, r === "svg"), m = g(() => x(f, u).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);
 }
-const b = v(H);
+const $ = v(H);
 export {
-  b as default
+  $ as default
 };

package/components/baseSvg.cjs

@@ -1 +1 @@
-"use strict";const u=require("react/jsx-runtime"),g=require("react"),p=require("../box.cjs");require("../core.cjs");require("../utils.cjs");function c(r,e){const{viewBox:s="0 0 24 24",width:t="1.5rem",height:o,props:i,...n}=r;return u.jsx(p,{tag:"svg",ref:e,props:{...i,viewBox:s,width:t,height:o,xmlns:"http://www.w3.org/2000/svg",fill:"none"},...n})}const w=g.forwardRef(c);module.exports=w;
+"use strict";const g=require("react/jsx-runtime"),p=require("react"),u=require("../box.cjs");function c(r,e){const{viewBox:s="0 0 24 24",width:t="1.5rem",height:o,props:n,...i}=r;return g.jsx(u,{tag:"svg",ref:e,props:{...n,viewBox:s,width:t,height:o,xmlns:"http://www.w3.org/2000/svg",fill:"none"},...i})}const w=p.forwardRef(c);module.exports=w;

package/components/baseSvg.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { BoxTagProps } from '../box';
-import { BoxSvgStyles } from '../core/types';
 import { ClassNameType } from '../core/classNames';
+import { BoxSvgStyles } from '../core/types';
+import { BoxTagProps } from '../box';
+
 type BoxSvgTagProps = Omit<BoxTagProps<'svg'>, 'viewBox' | 'width' | 'height'>;
 interface Props extends BoxSvgStyles {
     children?: React.ReactNode | ((props: {
@@ -14,5 +14,5 @@ interface Props extends BoxSvgStyles {
     width?: string;
     height?: string;
 }
-declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<SVGSVGElement>>;
+declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<SVGSVGElement>>;
 export default _default;

package/components/baseSvg.mjs

@@ -1,21 +1,19 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import g from "../box.mjs";
-import "../core.mjs";
-import "../utils.mjs";
+import { jsx as g } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import m from "../box.mjs";
 function n(o, r) {
-  const { viewBox: t = "0 0 24 24", width: s = "1.5rem", height: p, props: e, ...i } = o;
-  return /* @__PURE__ */ m(
-    g,
+  const { viewBox: t = "0 0 24 24", width: s = "1.5rem", height: e, props: p, ...f } = o;
+  return /* @__PURE__ */ g(
+    m,
     {
       tag: "svg",
       ref: r,
-      props: { ...e, viewBox: t, width: s, height: p, xmlns: "http://www.w3.org/2000/svg", fill: "none" },
-      ...i
+      props: { ...p, viewBox: t, width: s, height: e, xmlns: "http://www.w3.org/2000/svg", fill: "none" },
+      ...f
     }
   );
 }
-const l = f(n);
+const x = i(n);
 export {
-  l as default
+  x as default
 };

package/components/button.cjs

@@ -1 +1 @@
-"use strict";const r=require("react/jsx-runtime"),n=require("react"),s=require("../box.cjs"),u=require("../utils.cjs");require("../core.cjs");const i=["type","onClick"];function c(t,e){const o=u.ObjectUtils.buildProps(t,i);return r.jsx(s,{ref:e,tag:"button",component:"button",...o})}const b=n.forwardRef(c);module.exports=b;
+"use strict";const n=require("react/jsx-runtime"),r=require("react"),s=require("../box.cjs"),u=require("../utils.cjs"),c=["type","onClick"];function i(t,o){const e=u.ObjectUtils.buildProps(t,c);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,5 @@
-/// <reference types="react" />
-import Box from '../box';
+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"];
@@ -11,5 +11,5 @@ interface Props extends Omit<BoxProps, 'props'> {
     type?: ButtonType;
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
-declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>;
+declare const _default: import('react').ForwardRefExoticComponent<Omit<Props, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export default _default;

package/components/button.mjs

@@ -1,14 +1,13 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-import m from "../box.mjs";
-import { O as s } from "../utils.mjs";
-import "../core.mjs";
-const i = ["type", "onClick"];
-function e(o, t) {
-  const r = s.buildProps(o, i);
-  return /* @__PURE__ */ n(m, { ref: t, tag: "button", component: "button", ...r });
+import s from "../box.mjs";
+import { O as m } from "../utils.mjs";
+const e = ["type", "onClick"];
+function f(o, t) {
+  const r = m.buildProps(o, e);
+  return /* @__PURE__ */ n(s, { ref: t, tag: "button", component: "button", ...r });
 }
-const l = p(e);
+const b = p(f);
 export {
-  l as default
+  b as default
 };

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");require("../core.cjs");const a=["name","onInput","onChange","autoFocus","readOnly","required","value","checked","defaultChecked"];function d(n,c){const{indeterminate:r}=n,o=i.ObjectUtils.buildProps(n,a,{type:"checkbox"}),e=t.useRef(null);return t.useImperativeHandle(c,()=>e.current),t.useEffect(()=>{e.current&&(e.current.indeterminate=!!r)},[e,r]),u.jsx(s,{tag:"input",ref:e,component:"checkbox",...o})}const f=t.forwardRef(d);module.exports=f;
+"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,c){const{indeterminate:r}=n,o=i.ObjectUtils.buildProps(n,a,{type:"checkbox"}),e=t.useRef(null);return t.useImperativeHandle(c,()=>e.current),t.useEffect(()=>{e.current&&(e.current.indeterminate=!!r)},[e,r]),u.jsx(s,{tag:"input",ref:e,component:"checkbox",...o})}const f=t.forwardRef(d);module.exports=f;

package/components/checkbox.d.ts

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

package/components/checkbox.mjs

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

package/components/dataGrid/useGrid.d.ts

@@ -1,2 +1,3 @@
 import { Grid } from './dataGridContract';
+
 export default function useGrid<T extends {}>(data?: T[]): Grid<T>;

package/components/dataGrid.cjs

@@ -1 +1 @@
-"use strict";const s=require("react/jsx-runtime"),u=require("../box.cjs");require("react");require("../core.cjs");require("../utils.cjs");function c(e){if(!(e!=null&&e.length))return{rows:[],columns:[]};const i=Object.keys(e[0]);return{rows:e.map(r=>({dataRow:r,cells:i.map(n=>({key:n,value:r[n]}))})),columns:i.map(r=>({key:r}))}}function l(e){const{data:i}=e,r=c(i);return s.jsx(u,{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,t)=>s.jsx(u,{style:{gridColumn:t+1},children:n.key.toString()},n.key.toString())),r.rows.map((n,t)=>n.cells.map(o=>s.jsx(u,{children:o.value},o.key.toString()+t)))]})})}module.exports=l;
+"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;

package/components/dataGrid.mjs

@@ -1,35 +1,32 @@
-import { jsx as o, Fragment as l, jsxs as u } from "react/jsx-runtime";
-import s from "../box.mjs";
-import "react";
-import "../core.mjs";
-import "../utils.mjs";
+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 i = Object.keys(e[0]);
+  const s = Object.keys(e[0]);
   return {
     rows: e.map((r) => ({
       dataRow: r,
-      cells: i.map((n) => ({
+      cells: s.map((n) => ({
         key: n,
         value: r[n]
       }))
     })),
-    columns: i.map((r) => ({
+    columns: s.map((r) => ({
       key: r
     }))
   };
 }
-function f(e) {
-  const { data: i } = e, r = c(i);
-  return /* @__PURE__ */ o(s, { display: "grid", b: 1, borderRadius: 1, children: r.columns.length === 0 ? /* @__PURE__ */ o(l, { children: "empty grid" }) : /* @__PURE__ */ u(l, { children: [
-    r.columns.map((n, t) => /* @__PURE__ */ o(s, { style: { gridColumn: t + 1 }, children: n.key.toString() }, n.key.toString())),
-    r.rows.map((n, t) => n.cells.map((m) => /* @__PURE__ */ o(s, { children: m.value }, m.key.toString() + t)))
+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)))
   ] }) });
 }
 export {
-  f as default
+  d as default
 };

package/components/flex.cjs

@@ -1 +1 @@
-"use strict";const s=require("react/jsx-runtime"),t=require("react"),o=require("../box.cjs");require("../core.cjs");require("../utils.cjs");function u(e,r){const{inline:i,...n}=e;return s.jsx(o,{ref:r,display:i?"inline-flex":"flex",...n})}const x=t.forwardRef(u);module.exports=x;
+"use strict";const i=require("react/jsx-runtime"),t=require("react"),o=require("../box.cjs");function u(e,r){const{inline:n,...s}=e;return i.jsx(o,{ref:r,display:n?"inline-flex":"flex",...s})}const x=t.forwardRef(u);module.exports=x;

package/components/flex.d.ts

@@ -1,7 +1,8 @@
+import { default as Box } from '../box';
 import { RefAttributes } from 'react';
-import Box from '../box';
+
 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]>;
 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<ExtractElementType<import("react").JSX.IntrinsicElements[TTag]>>) => React.ReactNode;
+declare const _default: <TTag extends keyof import("react").JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
 export default _default;

package/components/flex.mjs

@@ -1,13 +1,11 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
 import n from "../box.mjs";
-import "../core.mjs";
-import "../utils.mjs";
 function l(o, r) {
-  const { inline: t, ...e } = o;
-  return /* @__PURE__ */ i(n, { ref: r, display: t ? "inline-flex" : "flex", ...e });
+  const { inline: e, ...f } = o;
+  return /* @__PURE__ */ t(n, { ref: r, display: e ? "inline-flex" : "flex", ...f });
 }
-const c = f(l);
+const p = i(l);
 export {
-  c as default
+  p as default
 };

package/components/form.cjs

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

package/components/form.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import Box from '../box';
+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,16 +1,15 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useRef as p, useCallback as u } from "react";
-import a from "../box.mjs";
+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 "../core.mjs";
-function S(o) {
-  const { onSubmit: m, props: n } = o, r = p(null), e = u((t) => {
+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 };
-  return /* @__PURE__ */ i(a, { tag: "form", ...o, props: s });
+  return /* @__PURE__ */ u(p, { tag: "form", ...o, props: s });
 }
 export {
-  S as default
+  x as default
 };

package/components/grid.cjs

@@ -1 +1 @@
-"use strict";const s=require("react/jsx-runtime"),t=require("react"),o=require("../box.cjs");require("../core.cjs");require("../utils.cjs");function u(r,e){const{inline:i,...n}=r;return s.jsx(o,{ref:e,display:i?"inline-grid":"grid",...n})}const c=t.forwardRef(u);module.exports=c;
+"use strict";const s=require("react/jsx-runtime"),t=require("react"),o=require("../box.cjs");function u(r,e){const{inline:i,...n}=r;return s.jsx(o,{ref:e,display:i?"inline-grid":"grid",...n})}const c=t.forwardRef(u);module.exports=c;

package/components/grid.d.ts

@@ -1,7 +1,8 @@
+import { default as Box } from '../box';
 import { RefAttributes } from 'react';
-import Box from '../box';
+
 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]>;
 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<ExtractElementType<import("react").JSX.IntrinsicElements[TTag]>>) => React.ReactNode;
+declare const _default: <TTag extends keyof import("react").JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
 export default _default;

package/components/grid.mjs

@@ -1,13 +1,11 @@
 import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import p from "../box.mjs";
-import "../core.mjs";
-import "../utils.mjs";
-function d(r, i) {
+import { forwardRef as d } from "react";
+import e from "../box.mjs";
+function f(r, i) {
   const { inline: o, ...t } = r;
-  return /* @__PURE__ */ n(p, { ref: i, display: o ? "inline-grid" : "grid", ...t });
+  return /* @__PURE__ */ n(e, { ref: i, display: o ? "inline-grid" : "grid", ...t });
 }
-const c = m(d);
+const a = d(f);
 export {
-  c as default
+  a as default
 };

package/components/radioButton.cjs

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

package/components/radioButton.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
-import Box from '../box';
+import { default as Box } from '../box';
+import { default as React } from 'react';
+
 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"];
@@ -17,5 +18,5 @@ interface Props extends Omit<BoxProps, 'props'> {
     checked?: boolean;
     defaultChecked?: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/components/radioButton.mjs

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

package/components/textarea.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
-import Box from '../box';
+import { default as Box } from '../box';
+import { default as React } from 'react';
+
 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"];
@@ -21,5 +22,5 @@ interface Props extends Omit<BoxProps, 'props'> {
     readOnly?: boolean;
     required?: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLTextAreaElement>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export default _default;

package/components/textarea.mjs

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

package/components/textbox.cjs

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

package/components/textbox.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
-import Box from '../box';
+import { default as Box } from '../box';
+import { default as React } from 'react';
+
 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"];
@@ -21,5 +22,5 @@ interface Props extends Omit<BoxProps, 'props'> {
     required?: boolean;
     step?: number | string;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/components/textbox.mjs

@@ -2,7 +2,6 @@ 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 "../core.mjs";
 const u = [
   "name",
   "onInput",
@@ -16,11 +15,11 @@ const u = [
   "value",
   "pattern"
 ];
-function m(o, t) {
+function s(o, t) {
   const e = p.buildProps(o, u);
   return /* @__PURE__ */ r(a, { ref: t, tag: "input", component: "textbox", ...e });
 }
-const c = n(m);
+const x = n(s);
 export {
-  c as default
+  x as default
 };

package/components/tooltip.cjs

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

package/components/tooltip.d.ts

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