@cronocode/react-box 1.2.5 → 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/box.mjs +6 -6
  2. package/components/baseSvg.mjs +22 -2
  3. package/{src/components → components}/buttonCore.d.ts +0 -1
  4. package/components/buttonCore.mjs +11 -8
  5. package/components/checkboxCore.mjs +10 -7
  6. package/{src/components → components}/flex.d.ts +1 -2
  7. package/components/flex.mjs +9 -2
  8. package/{src/components → components}/formAsync.d.ts +1 -2
  9. package/components/formAsync.mjs +15 -4
  10. package/components/radioButtonCore.mjs +9 -6
  11. package/components/textareaCore.mjs +10 -7
  12. package/components/textbox.mjs +9 -6
  13. package/components/textboxCore.mjs +10 -7
  14. package/package.json +13 -13
  15. package/style.css +1 -1
  16. package/{src/utils → utils}/object/objectUtils.d.ts +356 -356
  17. package/utils/utils.mjs +57 -45
  18. package/buildHelpers/mixins/boxStyles.d.ts +0 -4
  19. package/buildHelpers/mixins/svgStyles.d.ts +0 -4
  20. package/buildHelpers/plugins/moduleCssPlugin.d.ts +0 -2
  21. package/dev/main.d.ts +0 -0
  22. package/src/index.d.ts +0 -0
  23. /package/{src/box.d.ts → box.d.ts} +0 -0
  24. /package/{src/components → components}/baseSvg.d.ts +0 -0
  25. /package/{src/components → components}/checkboxCore.d.ts +0 -0
  26. /package/{src/components → components}/radioButtonCore.d.ts +0 -0
  27. /package/{src/components → components}/textareaCore.d.ts +0 -0
  28. /package/{src/components → components}/textbox.d.ts +0 -0
  29. /package/{src/components → components}/textboxCore.d.ts +0 -0
  30. /package/{src/theme.d.ts → theme.d.ts} +0 -0
  31. /package/{src/types.d.ts → types.d.ts} +0 -0
  32. /package/{src/utils → utils}/className/classNameUtils.d.ts +0 -0
  33. /package/{src/utils → utils}/form/formUtils.d.ts +0 -0
package/box.mjs CHANGED
@@ -1,13 +1,13 @@
1
1
  import N, { forwardRef as v, useState as b } from "react";
2
2
  import { c as a } from "./box.module.css.mjs";
3
- import { C as g, t as u } from "./utils/utils.mjs";
3
+ import { C as g, a as u } from "./utils/utils.mjs";
4
4
  function C(n, r) {
5
- const { tag: d, children: e, props: h, className: c, style: l } = n, t = c ? g.classNames(a.box, c) : [a.box];
6
- Object.entries(n).forEach(([o, m]) => {
7
- const p = a[o + m];
8
- p ? t.push(p) : o in u && t.push(`${u[o]}${m}`);
5
+ const { tag: d, children: e, props: h, className: c, style: l } = n, o = c ? g.classNames(a.box, c) : [a.box];
6
+ Object.entries(n).forEach(([t, m]) => {
7
+ const p = a[t + m];
8
+ p ? o.push(p) : t in u && o.push(`${u[t]}${m}`);
9
9
  });
10
- const s = { ...h, className: t.join(" ") };
10
+ const s = { ...h, className: o.join(" ") };
11
11
  l && (s.style = l), r && (s.ref = r);
12
12
  const [x, f] = b(!1), i = typeof e == "function";
13
13
  return i && (s.onMouseEnter = () => f(!0), s.onMouseLeave = () => f(!1)), N.createElement(d || "div", s, i ? e({ isHover: x }) : e);
@@ -1,2 +1,22 @@
1
- import "react";
2
- import "../utils/utils.mjs";
1
+ import v, { useState as H } from "react";
2
+ import { C as g, t as f } from "../utils/utils.mjs";
3
+ const a = { base: "cGH", rotate0: "cGI", rotateH0: "cGJ", hovertrue: "_h", rotate90: "cGK", rotateH90: "cGL", rotate180: "cGM", rotateH180: "cGN", rotate270: "cGO", rotateH270: "cGP", flipxAxis: "cGQ", flipHxAxis: "cGR", flipyAxis: "cGS", flipHyAxis: "cGT", rotateF0: "cGU", focustrue: "_f", rotateF90: "cGV", rotateF180: "cGW", rotateF270: "cGX", flipFxAxis: "cGY", flipFyAxis: "cGZ", rotateA0: "cG0", rotateA90: "cG1", rotateA180: "cG2", rotateA270: "cG3", flipAxAxis: "cG4", flipAyAxis: "cG5" };
4
+ function F(c) {
5
+ const { children: t, props: p, className: r, style: x, viewBox: A, width: m, height: u } = c, e = r ? g.classNames(r, a.base) : [a.base];
6
+ Object.entries(c).forEach(([o, n]) => {
7
+ const G = a[o + n];
8
+ G ? e.push(G) : o in f && e.push(`${f[o]}${n}`);
9
+ });
10
+ const s = {
11
+ ...p,
12
+ style: { ...x, width: m, height: u },
13
+ className: e.join(" "),
14
+ viewBox: A || "0 0 24 24",
15
+ xmlns: "http://www.w3.org/2000/svg",
16
+ fill: "none"
17
+ }, [h, i] = H(!1), l = typeof t == "function";
18
+ return l && (s.onMouseEnter = () => i(!0), s.onMouseLeave = () => i(!1)), v.createElement("svg", s, l ? t({ isHover: h }) : t);
19
+ }
20
+ export {
21
+ F as default
22
+ };
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import Box from '../box';
3
2
  type BoxProps = Omit<React.ComponentProps<typeof Box<'button'>>, 'ref' | 'tag'>;
4
3
  type BoxTagProps = Required<BoxProps>['props'];
@@ -1,10 +1,13 @@
1
- import { jsx as p } from "react/jsx-runtime";
2
- import { forwardRef as e } from "react";
3
- import n from "../box.mjs";
4
- import { O as m } from "../utils/utils.mjs";
1
+ import { jsx as n } from "react/jsx-runtime";
2
+ import { forwardRef as p } from "react";
3
+ import i from "../box.mjs";
4
+ import { O as s } from "../utils/utils.mjs";
5
5
  import "../box.module.css.mjs";
6
- function s(o, r) {
7
- const [t, i] = m.moveToTagProps(o, "type", "onClick", "disabled");
8
- return /* @__PURE__ */ p(n, { ref: r, tag: "button", cursor: "pointer", inline: !0, ...i, props: { ...o.props, ...t } });
6
+ function m(o, r) {
7
+ const [t, e] = s.moveToTagProps(o, "type", "onClick", "disabled");
8
+ return /* @__PURE__ */ n(i, { ref: r, tag: "button", cursor: "pointer", inline: !0, ...e, props: { ...o.props, ...t } });
9
9
  }
10
- e(s);
10
+ const b = p(m);
11
+ export {
12
+ b as default
13
+ };
@@ -1,10 +1,10 @@
1
1
  import { jsx as n } from "react/jsx-runtime";
2
- import { forwardRef as p } from "react";
3
- import a from "../box.mjs";
4
- import { O as i } from "../utils/utils.mjs";
2
+ import { forwardRef as a } from "react";
3
+ import p from "../box.mjs";
4
+ import { O as c } from "../utils/utils.mjs";
5
5
  import "../box.module.css.mjs";
6
- function m(o, e) {
7
- const [r, t] = i.moveToTagProps(
6
+ function i(o, e) {
7
+ const [r, t] = c.moveToTagProps(
8
8
  o,
9
9
  "name",
10
10
  "onInput",
@@ -17,6 +17,9 @@ function m(o, e) {
17
17
  "checked",
18
18
  "defaultChecked"
19
19
  );
20
- return /* @__PURE__ */ n(a, { ref: e, tag: "input", inline: !0, ...t, props: { ...o.props, ...r, type: "checkbox" } });
20
+ return /* @__PURE__ */ n(p, { ref: e, tag: "input", inline: !0, ...t, props: { ...o.props, ...r, type: "checkbox" } });
21
21
  }
22
- p(m);
22
+ const l = a(i);
23
+ export {
24
+ l as default
25
+ };
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import Box from '../box';
3
2
  import { Activated, Focused, Hovered } from '../types';
4
3
  type BoxProps = React.ComponentProps<typeof Box>;
@@ -14,5 +13,5 @@ interface FlexStylesShortCuts {
14
13
  js?: BoxProps['justifySelf'];
15
14
  }
16
15
  type Props = BoxProps & FlexStylesShortCuts & Hovered<FlexStylesShortCuts> & Focused<FlexStylesShortCuts> & Activated<FlexStylesShortCuts>;
17
- export default function Flex(props: Props): import("react/jsx-runtime").JSX.Element;
16
+ export default function Flex(props: Props): JSX.Element;
18
17
  export {};
@@ -1,5 +1,12 @@
1
- import "react/jsx-runtime";
2
- import "../box.mjs";
1
+ import { jsx as t } from "react/jsx-runtime";
2
+ import r from "../box.mjs";
3
3
  import "react";
4
4
  import "../box.module.css.mjs";
5
5
  import "../utils/utils.mjs";
6
+ function x(i) {
7
+ const { inline: o } = i;
8
+ return /* @__PURE__ */ t(r, { display: o ? "inline-flex" : "flex", ...i });
9
+ }
10
+ export {
11
+ x as default
12
+ };
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import Box from '../box';
3
2
  type BoxProps = React.ComponentProps<typeof Box<'form'>>;
4
3
  type BoxTagProps = Required<BoxProps>['props'];
@@ -7,5 +6,5 @@ interface Props<T> extends Omit<BoxProps, 'props' | 'tag'> {
7
6
  props?: FormAsyncTagProps;
8
7
  onSubmit: (obj: T, e: React.FormEvent<HTMLFormElement>) => void;
9
8
  }
10
- export default function FormAsync<T>(props: Props<T>): import("react/jsx-runtime").JSX.Element;
9
+ export default function FormAsync<T>(props: Props<T>): JSX.Element;
11
10
  export {};
@@ -1,5 +1,16 @@
1
- import "react/jsx-runtime";
2
- import "react";
3
- import "../box.mjs";
4
- import "../utils/utils.mjs";
1
+ import { jsx as i } from "react/jsx-runtime";
2
+ import { useRef as p, useCallback as u } from "react";
3
+ import a from "../box.mjs";
4
+ import { F as c } from "../utils/utils.mjs";
5
5
  import "../box.module.css.mjs";
6
+ function S(o) {
7
+ const { onSubmit: m, props: n } = o, r = p(null), s = u((t) => {
8
+ t.preventDefault();
9
+ const f = c.getFormEntries(r.current);
10
+ m(f, t);
11
+ }, []), e = { ...n, onSubmit: s, ref: r };
12
+ return /* @__PURE__ */ i(a, { tag: "form", ...o, props: e });
13
+ }
14
+ export {
15
+ S as default
16
+ };
@@ -1,10 +1,10 @@
1
- import { jsx as n } from "react/jsx-runtime";
2
- import { forwardRef as a } from "react";
1
+ import { jsx as a } from "react/jsx-runtime";
2
+ import { forwardRef as n } from "react";
3
3
  import i from "../box.mjs";
4
4
  import { O as p } from "../utils/utils.mjs";
5
5
  import "../box.module.css.mjs";
6
- function m(o, r) {
7
- const [e, t] = p.moveToTagProps(
6
+ function u(o, r) {
7
+ const [t, e] = p.moveToTagProps(
8
8
  o,
9
9
  "name",
10
10
  "onInput",
@@ -17,6 +17,9 @@ function m(o, r) {
17
17
  "checked",
18
18
  "defaultChecked"
19
19
  );
20
- return /* @__PURE__ */ n(i, { ref: r, tag: "input", inline: !0, ...t, props: { ...o.props, ...e, type: "radio" } });
20
+ return /* @__PURE__ */ a(i, { ref: r, tag: "input", inline: !0, ...e, props: { ...o.props, ...t, type: "radio" } });
21
21
  }
22
- a(m);
22
+ const l = n(u);
23
+ export {
24
+ l as default
25
+ };
@@ -1,11 +1,11 @@
1
1
  import { jsx as a } from "react/jsx-runtime";
2
2
  import { forwardRef as n } from "react";
3
- import m from "../box.mjs";
4
- import { O as i } from "../utils/utils.mjs";
3
+ import s from "../box.mjs";
4
+ import { O as m } from "../utils/utils.mjs";
5
5
  import "../box.module.css.mjs";
6
- function p(o, r) {
7
- const [e, t] = i.moveToTagProps(
8
- o,
6
+ function p(e, o) {
7
+ const [r, t] = m.moveToTagProps(
8
+ e,
9
9
  "name",
10
10
  "onInput",
11
11
  "onChange",
@@ -21,6 +21,9 @@ function p(o, r) {
21
21
  "readOnly",
22
22
  "required"
23
23
  );
24
- return /* @__PURE__ */ a(m, { ref: r, tag: "textarea", inline: !0, ...t, props: { ...o.props, ...e } });
24
+ return /* @__PURE__ */ a(s, { ref: o, tag: "textarea", inline: !0, ...t, props: { ...e.props, ...r } });
25
25
  }
26
- n(p);
26
+ const c = n(p);
27
+ export {
28
+ c as default
29
+ };
@@ -1,8 +1,8 @@
1
1
  import { jsx as n } from "react/jsx-runtime";
2
2
  import { forwardRef as a } from "react";
3
3
  import m from "../box.mjs";
4
- import { O as i } from "../utils/utils.mjs";
5
- import { T as s } from "../theme.mjs";
4
+ import { O as s } from "../utils/utils.mjs";
5
+ import { T as i } from "../theme.mjs";
6
6
  import "../box.module.css.mjs";
7
7
  const u = [
8
8
  "name",
@@ -18,8 +18,11 @@ const u = [
18
18
  "value",
19
19
  "pattern"
20
20
  ];
21
- function p(e, t) {
22
- const o = s.useTheme("textbox", e), r = i.buildProps(e, u, o);
23
- return /* @__PURE__ */ n(m, { ref: t, tag: "input", inline: !0, ...r });
21
+ function p(t, e) {
22
+ const o = i.useTheme("textbox", t), r = s.buildProps(t, u, o);
23
+ return /* @__PURE__ */ n(m, { ref: e, tag: "input", inline: !0, ...r });
24
24
  }
25
- a(p);
25
+ const h = a(p);
26
+ export {
27
+ h as default
28
+ };
@@ -1,10 +1,10 @@
1
- import { jsx as p } from "react/jsx-runtime";
2
- import { forwardRef as a } from "react";
1
+ import { jsx as a } from "react/jsx-runtime";
2
+ import { forwardRef as p } from "react";
3
3
  import n from "../box.mjs";
4
- import { O as i } from "../utils/utils.mjs";
4
+ import { O as s } from "../utils/utils.mjs";
5
5
  import "../box.module.css.mjs";
6
- function m(o, r) {
7
- const [e, t] = i.moveToTagProps(
6
+ function i(o, e) {
7
+ const [t, r] = s.moveToTagProps(
8
8
  o,
9
9
  "name",
10
10
  "onInput",
@@ -20,6 +20,9 @@ function m(o, r) {
20
20
  "required",
21
21
  "step"
22
22
  );
23
- return /* @__PURE__ */ p(n, { ref: r, tag: "input", inline: !0, ...t, props: { ...o.props, ...e } });
23
+ return /* @__PURE__ */ a(n, { ref: e, tag: "input", inline: !0, ...r, props: { ...o.props, ...t } });
24
24
  }
25
- a(m);
25
+ const x = p(i);
26
+ export {
27
+ x as default
28
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cronocode/react-box",
3
- "version": "1.2.5",
3
+ "version": "1.2.6",
4
4
  "main": "./box.mjs",
5
5
  "module": "./box.mjs",
6
6
  "types": "./box.d.ts",
@@ -47,23 +47,23 @@
47
47
  "description": "",
48
48
  "devDependencies": {
49
49
  "@cronocode/identity-factory": "^0.0.6",
50
- "@rollup/pluginutils": "^5.0.4",
51
- "@types/node": "^20.6.0",
50
+ "@rollup/pluginutils": "^5.0.2",
51
+ "@types/node": "^18.15.7",
52
52
  "@types/postcss-mixins": "^9.0.0",
53
- "@types/react": "^18.2.21",
54
- "@types/react-dom": "^18.2.7",
55
- "@vitejs/plugin-react": "^4.0.4",
56
- "autoprefixer": "^10.4.15",
57
- "postcss": "^8.4.29",
53
+ "@types/react": "^18.0.27",
54
+ "@types/react-dom": "^18.0.10",
55
+ "@vitejs/plugin-react": "^3.1.0",
56
+ "autoprefixer": "^10.4.14",
57
+ "postcss": "^8.4.21",
58
58
  "postcss-each": "^1.1.0",
59
59
  "postcss-mixins": "^9.0.4",
60
60
  "postcss-nested": "^6.0.1",
61
61
  "postcss-simple-vars": "^7.0.1",
62
- "prettier": "^3.0.3",
63
- "react": "^18.2.0",
62
+ "prettier": "^2.8.7",
63
+ "react": "^18.1.0",
64
64
  "react-dom": "^18.2.0",
65
- "typescript": "^5.2.2",
66
- "vite": "^4.4.9",
67
- "vite-plugin-dts": "^3.5.3"
65
+ "typescript": "^5.0.2",
66
+ "vite": "^4.2.1",
67
+ "vite-plugin-dts": "^2.1.0"
68
68
  }
69
69
  }