@cronocode/react-box 0.4.8 → 1.0.0

package/box.d.ts

@@ -8,7 +8,7 @@ interface Props<TTag extends keyof React.ReactHTML> extends BoxStyles {
     }) => React.ReactNode);
     tag?: TTag;
     props?: TagPropsType<TTag>;
-    styles?: React.ComponentProps<TTag>['style'];
+    style?: React.ComponentProps<TTag>['style'];
     className?: ClassNameUtils.ClassNameType;
 }
 export default function Box<TTag extends keyof React.ReactHTML = 'div'>(props: Props<TTag>): React.DetailedReactHTMLElement<{
@@ -32,6 +32,7 @@ export default function Box<TTag extends keyof React.ReactHTML = 'div'>(props: P
     hidden?: React.ComponentProps<TTag>["hidden"] | undefined;
     id?: React.ComponentProps<TTag>["id"] | undefined;
     lang?: React.ComponentProps<TTag>["lang"] | undefined;
+    nonce?: React.ComponentProps<TTag>["nonce"] | undefined;
     placeholder?: React.ComponentProps<TTag>["placeholder"] | undefined;
     spellCheck?: React.ComponentProps<TTag>["spellCheck"] | undefined;
     tabIndex?: React.ComponentProps<TTag>["tabIndex"] | undefined;
@@ -176,6 +177,8 @@ export default function Box<TTag extends keyof React.ReactHTML = 'div'>(props: P
     onProgressCapture?: React.ComponentProps<TTag>["onProgressCapture"] | undefined;
     onRateChange?: React.ComponentProps<TTag>["onRateChange"] | undefined;
     onRateChangeCapture?: React.ComponentProps<TTag>["onRateChangeCapture"] | undefined;
+    onResize?: React.ComponentProps<TTag>["onResize"] | undefined;
+    onResizeCapture?: React.ComponentProps<TTag>["onResizeCapture"] | undefined;
     onSeeked?: React.ComponentProps<TTag>["onSeeked"] | undefined;
     onSeekedCapture?: React.ComponentProps<TTag>["onSeekedCapture"] | undefined;
     onSeeking?: React.ComponentProps<TTag>["onSeeking"] | undefined;

package/box.js

@@ -1,27 +1,15 @@
 import x, { useState as N } from "react";
 import { c as o } from "./box.module.css.js";
 import { C as b } from "./utils/utils.js";
-function E(t) {
-  const {
-    tag: i,
-    children: s,
-    props: f,
-    className: a,
-    styles: m
-  } = t, c = a ? b.classNames(a, o.box) : [o.box];
+function H(t) {
+  const { tag: i, children: s, props: f, className: a, style: m } = t, c = a ? b.classNames(a, o.box) : [o.box];
   Object.entries(t).forEach(([d, v]) => {
     const l = o[d + v];
     l && c.push(l);
   });
-  const u = i || "div", e = {
-    ...f,
-    style: m,
-    className: c.join(" ")
-  }, [p, n] = N(!1), r = typeof s == "function";
-  return r && (e.onMouseEnter = () => n(!0), e.onMouseLeave = () => n(!1)), x.createElement(u, e, r ? s({
-    isHover: p
-  }) : s);
+  const u = i || "div", e = { ...f, style: m, className: c.join(" ") }, [p, n] = N(!1), r = typeof s == "function";
+  return r && (e.onMouseEnter = () => n(!0), e.onMouseLeave = () => n(!1)), x.createElement(u, e, r ? s({ isHover: p }) : s);
 }
 export {
-  E as default
+  H as default
 };

package/components/buttonCore.js

@@ -1,28 +1,11 @@
-import s from "../box.js";
-import { jsx as u } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
+import u from "../box.js";
 import "react";
 import "../box.module.css.js";
 import "../utils/utils.js";
 function l(t) {
-  const {
-    tag: o,
-    type: r,
-    onClick: n,
-    disabled: p,
-    props: e
-  } = t, i = {
-    ...e,
-    type: r || "button",
-    onClick: n,
-    disabled: p
-  };
-  return /* @__PURE__ */ u(s, {
-    tag: o || "button",
-    cursor: "pointer",
-    inline: !0,
-    ...t,
-    props: i
-  });
+  const { tag: o, type: r, onClick: n, disabled: p, props: e } = t, i = { ...e, type: r || "button", onClick: n, disabled: p };
+  return /* @__PURE__ */ s(u, { tag: o || "button", cursor: "pointer", inline: !0, ...t, props: i });
 }
 export {
   l as default

package/components/flex.js

@@ -1,16 +1,11 @@
-import t from "../box.js";
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
+import r from "../box.js";
 import "react";
 import "../box.module.css.js";
 import "../utils/utils.js";
 function x(i) {
-  const {
-    inline: o
-  } = i;
-  return /* @__PURE__ */ r(t, {
-    display: o ? "inline-flex" : "flex",
-    ...i
-  });
+  const { inline: o } = i;
+  return /* @__PURE__ */ t(r, { display: o ? "inline-flex" : "flex", ...i });
 }
 export {
   x as default

package/components/formAsync.js

@@ -1,42 +1,32 @@
-import { useRef as i, useCallback as p } from "react";
-import s from "../box.js";
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
+import { useRef as p, useCallback as s } from "react";
+import m from "../box.js";
 import "../box.module.css.js";
 import "../utils/utils.js";
-function a(u) {
+function d(u) {
   const n = Array.from(u.elements).reduce((r, o) => {
-    const t = o.name;
-    return r[t] || (r[t] = []), r[t].push(o), r;
+    const c = o.name;
+    return c && (r[c] || (r[c] = []), r[c].push(o)), r;
   }, {});
-  return Object.entries(n).reduce((r, [o, t]) => {
-    if (t.length === 1) {
-      const e = t[0];
+  return Object.entries(n).reduce((r, [o, c]) => {
+    if (c.length === 1) {
+      const e = c[0];
       r[o] = e.type === "checkbox" || e.type === "radio" ? e.checked : e.value;
     } else
-      r[o] = [], t.forEach((e) => {
-        var c;
-        e.type === "checkbox" ? e.checked && r[o].push(e.value) : e.type === "radio" ? r[o] = (c = t.find((f) => f.checked)) == null ? void 0 : c.value : r[o].push(e.value);
+      r[o] = [], c.forEach((e) => {
+        var t;
+        e.type === "checkbox" ? e.checked && r[o].push(e.value) : e.type === "radio" ? r[o] = (t = c.find((f) => f.checked)) == null ? void 0 : t.value : r[o].push(e.value);
       });
     return r;
   }, {});
 }
 function v(u) {
-  const {
-    children: n,
-    onSubmit: r
-  } = u, o = i(null), t = p((e) => {
+  const { children: n, onSubmit: r } = u, o = p(null), c = s((e) => {
     e.preventDefault();
-    const c = a(o.current);
-    r(c, e);
+    const t = d(o.current);
+    r(t, e);
   }, []);
-  return /* @__PURE__ */ m(s, {
-    tag: "form",
-    props: {
-      ref: o,
-      onSubmit: t
-    },
-    children: n
-  });
+  return /* @__PURE__ */ i(m, { tag: "form", props: { ref: o, onSubmit: c }, children: n });
 }
 export {
   v as default

package/components/uncontrolledCheckboxCore.d.ts

@@ -1,5 +1,5 @@
 import Box from '../box';
-declare type BoxProps = React.ComponentProps<typeof Box>;
+declare type BoxProps = React.ComponentProps<typeof Box<'input'>>;
 declare type BoxTagProps = Required<BoxProps>['props'];
 declare type UncontrolledCheckboxCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'type' | 'placeholder' | 'disabled' | 'value' | 'autoFocus' | 'readOnly' | 'required' | 'defaultChecked'>;
 interface Props extends Omit<BoxProps, 'props'> {

package/components/uncontrolledCheckboxCore.js

@@ -1,22 +1,10 @@
-import m from "../box.js";
-import { jsx as f } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
+import f from "../box.js";
 import "react";
 import "../box.module.css.js";
 import "../utils/utils.js";
 function k(o) {
-  const {
-    props: e,
-    name: r,
-    disabled: t,
-    placeholder: n,
-    value: p,
-    onInput: a,
-    onChange: i,
-    autoFocus: u,
-    readOnly: c,
-    required: l,
-    defaultChecked: d
-  } = o, s = {
+  const { props: e, name: r, disabled: t, placeholder: n, value: p, onInput: a, onChange: i, autoFocus: u, readOnly: c, required: l, defaultChecked: d } = o, s = {
     ...e,
     type: "checkbox",
     name: r,
@@ -30,12 +18,7 @@ function k(o) {
     required: l,
     defaultChecked: d
   };
-  return /* @__PURE__ */ f(m, {
-    tag: "input",
-    inline: !0,
-    ...o,
-    props: s
-  });
+  return /* @__PURE__ */ m(f, { tag: "input", inline: !0, ...o, props: s });
 }
 export {
   k as default

package/components/uncontrolledRadioButtonCore.d.ts

@@ -1,5 +1,5 @@
 import Box from '../box';
-declare type BoxProps = React.ComponentProps<typeof Box>;
+declare type BoxProps = React.ComponentProps<typeof Box<'input'>>;
 declare type BoxTagProps = Required<BoxProps>['props'];
 declare type UncontrolledRadioButtonCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'type' | 'placeholder' | 'disabled' | 'value' | 'autoFocus' | 'readOnly' | 'required' | 'defaultChecked'>;
 interface Props extends Omit<BoxProps, 'props'> {

package/components/uncontrolledRadioButtonCore.js

@@ -1,22 +1,10 @@
-import c from "../box.js";
-import { jsx as f } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
+import f from "../box.js";
 import "react";
 import "../box.module.css.js";
 import "../utils/utils.js";
 function B(o) {
-  const {
-    props: t,
-    name: e,
-    disabled: r,
-    placeholder: n,
-    value: a,
-    onInput: p,
-    onChange: i,
-    autoFocus: u,
-    readOnly: d,
-    required: l,
-    defaultChecked: s
-  } = o, m = {
+  const { props: t, name: e, disabled: r, placeholder: n, value: a, onInput: p, onChange: i, autoFocus: u, readOnly: d, required: l, defaultChecked: s } = o, m = {
     ...t,
     type: "radio",
     name: e,
@@ -30,12 +18,7 @@ function B(o) {
     required: l,
     defaultChecked: s
   };
-  return /* @__PURE__ */ f(c, {
-    tag: "input",
-    inline: !0,
-    ...o,
-    props: m
-  });
+  return /* @__PURE__ */ c(f, { tag: "input", inline: !0, ...o, props: m });
 }
 export {
   B as default

package/components/uncontrolledTextareaCore.d.ts

@@ -1,5 +1,5 @@
 import Box from '../box';
-declare type BoxProps = React.ComponentProps<typeof Box>;
+declare type BoxProps = React.ComponentProps<typeof Box<'textarea'>>;
 declare type BoxTagProps = Required<BoxProps>['props'];
 declare type UncontrolledTextareaCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'placeholder' | 'disabled' | 'defaultValue' | 'rows' | 'cols' | 'autoFocus' | 'maxLength' | 'minLength' | 'readOnly' | 'required'>;
 interface Props extends Omit<BoxProps, 'props'> {

package/components/uncontrolledTextareaCore.js

@@ -1,5 +1,5 @@
-import f from "../box.js";
-import { jsx as h } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
+import h from "../box.js";
 import "react";
 import "../box.module.css.js";
 import "../utils/utils.js";
@@ -35,12 +35,7 @@ function b(o) {
     readOnly: c,
     required: g
   };
-  return /* @__PURE__ */ h(f, {
-    tag: "textarea",
-    inline: !0,
-    ...o,
-    props: x
-  });
+  return /* @__PURE__ */ f(h, { tag: "textarea", inline: !0, ...o, props: x });
 }
 export {
   b as default

package/components/uncontrolledTextboxCore.d.ts

@@ -1,5 +1,5 @@
 import Box from '../box';
-declare type BoxProps = React.ComponentProps<typeof Box>;
+declare type BoxProps = React.ComponentProps<typeof Box<'input'>>;
 declare type BoxTagProps = Required<BoxProps>['props'];
 declare type UncontrolledTextboxCoreTagProps = Omit<BoxTagProps, 'name' | 'onInput' | 'onChange' | 'type' | 'placeholder' | 'disabled' | 'defaultValue' | 'autoFocus' | 'readOnly' | 'required'>;
 declare type UncontrolledTextboxCoreType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';

package/components/uncontrolledTextboxCore.js

@@ -1,5 +1,5 @@
-import x from "../box.js";
-import { jsx as f } from "react/jsx-runtime";
+import { jsx as x } from "react/jsx-runtime";
+import f from "../box.js";
 import "react";
 import "../box.module.css.js";
 import "../utils/utils.js";
@@ -31,12 +31,7 @@ function P(t) {
     required: d,
     step: m
   };
-  return /* @__PURE__ */ f(x, {
-    tag: "input",
-    inline: !0,
-    ...t,
-    props: c
-  });
+  return /* @__PURE__ */ x(f, { tag: "input", inline: !0, ...t, props: c });
 }
 export {
   P as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "0.4.8",
+  "version": "1.0.0",
   "main": "./box.js",
   "module": "./box.js",
   "types": "./box.d.ts",
@@ -43,19 +43,19 @@
   "devDependencies": {
     "@cronocode/identity-factory": "^0.0.6",
     "@rollup/pluginutils": "^5.0.2",
-    "@types/node": "^18.7.14",
+    "@types/node": "^18.11.18",
     "@types/postcss-mixins": "^9.0.0",
-    "@types/react": "^18.0.18",
-    "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^2.0.1",
-    "autoprefixer": "^10.4.8",
-    "postcss": "^8.4.16",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.0.1",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.21",
     "postcss-mixins": "^9.0.4",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.3",
     "react": "^18.1.0",
     "react-dom": "^18.2.0",
-    "typescript": "^4.8.2",
-    "vite": "^3.0.9",
-    "vite-plugin-dts": "^1.4.1"
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4",
+    "vite-plugin-dts": "^1.7.1"
   }
 }