@cronocode/react-box 3.0.19 → 3.0.20

package/components/flex.cjs

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

package/components/flex.mjs

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

package/components/form.cjs

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

package/components/form.mjs

@@ -1,18 +1,19 @@
-import { jsx as u } from "react/jsx-runtime";
-import { useRef as a, useCallback as i } from "react";
-import p from "../box.mjs";
-import { e as c } from "../core.mjs";
-function F(o) {
-  const { onSubmit: r, props: e } = o, t = a(null), n = i(
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as i, useCallback as p } from "react";
+import u from "../box.mjs";
+import { e as l } from "../core.mjs";
+function c(o) {
+  const { onSubmit: r, props: e } = o, t = i(null), n = p(
     (m) => {
       m.preventDefault();
-      const f = c.getFormEntries(t.current);
+      const f = l.getFormEntries(t.current);
       r(f, m);
     },
     [r]
   ), s = { ...e, onSubmit: n, ref: t };
-  return /* @__PURE__ */ u(p, { tag: "form", ...o, props: s });
+  return /* @__PURE__ */ a(u, { tag: "form", ...o, props: s });
 }
+c.displayName = "Form";
 export {
-  F as default
+  c as default
 };

package/components/grid.cjs

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

package/components/grid.mjs

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

package/components/radioButton.cjs

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

package/components/radioButton.mjs

@@ -1,13 +1,14 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
 import a from "../box.mjs";
 import { O as e } from "../core.mjs";
-const u = ["name", "onInput", "onChange", "value", "autoFocus", "readOnly", "defaultChecked"];
-function i(o, p) {
-  const t = e.buildProps(o, u, { type: "radio" });
-  return /* @__PURE__ */ r(a, { tag: "input", component: "radioButton", ...t });
+const i = ["name", "onInput", "onChange", "value", "autoFocus", "readOnly", "defaultChecked"];
+function p(o, d) {
+  const t = e.buildProps(o, i, { type: "radio" });
+  return /* @__PURE__ */ n(a, { tag: "input", component: "radioButton", ...t });
 }
-const c = n(i);
+const u = r(p);
+u.displayName = "RadioButton";
 export {
-  c as default
+  u as default
 };

package/components/semantics.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),i=require("../box.cjs");function t(n){return s.forwardRef((e,o)=>c.jsx(i,{tag:n,ref:o,component:n,...e}))}const a=t("label"),r=t("span"),m=t("article"),u=t("aside"),H=t("details"),l=t("figcaption"),g=t("figure"),d=t("footer"),p=t("header"),S=t("main"),f=t("mark"),h=t("nav"),M=t("menu"),b=t("section"),F=t("summary"),k=t("time"),y=t("p"),v=t("h1"),A=t("h2"),L=t("h3"),j=t("h4"),q=t("h5"),x=t("h6"),P=t("a"),R=t("img");exports.Article=m;exports.Aside=u;exports.Details=H;exports.Figcaption=l;exports.Figure=g;exports.Footer=d;exports.H1=v;exports.H2=A;exports.H3=L;exports.H4=j;exports.H5=q;exports.H6=x;exports.Header=p;exports.Img=R;exports.Label=a;exports.Link=P;exports.Main=S;exports.Mark=f;exports.Menu=M;exports.Nav=h;exports.P=y;exports.Section=b;exports.Span=r;exports.Summary=F;exports.Time=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),a=require("../box.cjs"),r=require("../core.cjs");function t(n){const e=i.forwardRef((o,c)=>s.jsx(a.default,{tag:n,ref:c,component:n,...o}));return e.displayName=r.StringUtils.capitalize(n),e}const u=t("label"),m=t("span"),l=t("article"),H=t("aside"),d=t("details"),p=t("figcaption"),g=t("figure"),S=t("footer"),f=t("header"),h=t("main"),M=t("mark"),b=t("nav"),y=t("menu"),F=t("section"),k=t("summary"),q=t("time"),v=t("p"),A=t("h1"),L=t("h2"),j=t("h3"),x=t("h4"),P=t("h5"),R=t("h6"),T=t("a"),D=t("img");exports.Article=l;exports.Aside=H;exports.Details=d;exports.Figcaption=p;exports.Figure=g;exports.Footer=S;exports.H1=A;exports.H2=L;exports.H3=j;exports.H4=x;exports.H5=P;exports.H6=R;exports.Header=f;exports.Img=D;exports.Label=u;exports.Link=T;exports.Main=h;exports.Mark=M;exports.Menu=y;exports.Nav=b;exports.P=v;exports.Section=F;exports.Span=m;exports.Summary=k;exports.Time=q;

package/components/semantics.mjs

@@ -1,34 +1,36 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as e } from "react";
-import i from "../box.mjs";
+import r from "../box.mjs";
+import { f as a } from "../core.mjs";
 function o(t) {
-  return e((n, c) => /* @__PURE__ */ s(i, { tag: t, ref: c, component: t, ...n }));
+  const n = e((s, c) => /* @__PURE__ */ i(r, { tag: t, ref: c, component: t, ...s }));
+  return n.displayName = a.capitalize(t), n;
 }
-const p = o("label"), f = o("span"), u = o("article"), h = o("aside"), l = o("details"), H = o("figcaption"), d = o("figure"), g = o("footer"), k = o("header"), x = o("main"), F = o("mark"), M = o("nav"), S = o("menu"), b = o("section"), v = o("summary"), y = o("time"), A = o("p"), L = o("h1"), j = o("h2"), w = o("h3"), B = o("h4"), D = o("h5"), I = o("h6"), P = o("a"), R = o("img");
+const u = o("label"), d = o("span"), h = o("article"), H = o("aside"), g = o("details"), S = o("figcaption"), k = o("figure"), x = o("footer"), y = o("header"), F = o("main"), M = o("mark"), b = o("nav"), v = o("menu"), A = o("section"), L = o("summary"), j = o("time"), w = o("p"), z = o("h1"), B = o("h2"), D = o("h3"), I = o("h4"), P = o("h5"), R = o("h6"), T = o("a"), U = o("img");
 export {
-  u as Article,
-  h as Aside,
-  l as Details,
-  H as Figcaption,
-  d as Figure,
-  g as Footer,
-  L as H1,
-  j as H2,
-  w as H3,
-  B as H4,
-  D as H5,
-  I as H6,
-  k as Header,
-  R as Img,
-  p as Label,
-  P as Link,
-  x as Main,
-  F as Mark,
-  S as Menu,
-  M as Nav,
-  A as P,
-  b as Section,
-  f as Span,
-  v as Summary,
-  y as Time
+  h as Article,
+  H as Aside,
+  g as Details,
+  S as Figcaption,
+  k as Figure,
+  x as Footer,
+  z as H1,
+  B as H2,
+  D as H3,
+  I as H4,
+  P as H5,
+  R as H6,
+  y as Header,
+  U as Img,
+  u as Label,
+  T as Link,
+  F as Main,
+  M as Mark,
+  v as Menu,
+  b as Nav,
+  w as P,
+  A as Section,
+  d as Span,
+  L as Summary,
+  j as Time
 };

package/components/textarea.cjs

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

package/components/textarea.mjs

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

package/components/textbox.cjs

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

package/components/textbox.mjs

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import a from "../box.mjs";
+import { forwardRef as a } from "react";
+import n from "../box.mjs";
 import { O as p } from "../core.mjs";
-const u = [
+const m = [
   "name",
   "onInput",
   "onChange",
@@ -16,10 +16,11 @@ const u = [
   "pattern"
 ];
 function s(o, t) {
-  const e = p.buildProps(o, u);
-  return /* @__PURE__ */ r(a, { ref: t, tag: "input", component: "textbox", ...e });
+  const e = p.buildProps(o, m);
+  return /* @__PURE__ */ r(n, { ref: t, tag: "input", component: "textbox", ...e });
 }
-const x = n(s);
+const u = a(s);
+u.displayName = "Textbox";
 export {
-  x as default
+  u as default
 };

package/components/tooltip.cjs

@@ -1 +1 @@
-"use strict";const i=require("react/jsx-runtime"),C=require("react-dom"),d=require("../box.cjs"),s=require("react"),R=require("../core.cjs"),l=2;function m(f,w){const{onPositionChange:a}=f,c=s.useRef(null),[t,b]=s.useState(),h=R.usePortalContainer(),x=s.useCallback((r,e)=>{const n=p=>{p.target.contains(r)&&e(r)},o=new AbortController;return document.addEventListener("scroll",n,{signal:o.signal,capture:!0}),()=>o.abort()},[t]),g=s.useCallback((r,e)=>{const n=p=>{e(r)},o=new AbortController;return window.addEventListener("resize",n,{signal:o.signal,capture:!0}),()=>o.abort()},[t]),u=s.useCallback(r=>{const e=r.getBoundingClientRect(),n=Math.round((e.top+window.scrollY)*l)/l,o=Math.round((e.left+window.scrollX)*l)/l;((t==null?void 0:t.top)!==n||(t==null?void 0:t.left)!==o)&&(a==null||a({top:n,left:o}),b({top:n,left:o,width:e.width>0?e.width:void 0}))},[t]);return s.useLayoutEffect(()=>{if(c.current){u(c.current);const r=x(c.current,u),e=g(c.current,u);return()=>{r(),e()}}},[t]),i.jsxs(i.Fragment,{children:[i.jsx(d,{ref:c}),t&&C.createPortal(i.jsx(d,{ref:w,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})}),h)]})}const j=s.forwardRef(m);module.exports=j;
+"use strict";const i=require("react/jsx-runtime"),C=require("react-dom"),d=require("../box.cjs"),s=require("react"),R=require("../core.cjs"),c=2;function j(f,b){const{onPositionChange:a}=f,l=s.useRef(null),[t,h]=s.useState(),x=R.usePortalContainer(),g=s.useCallback((r,e)=>{const n=p=>{p.target.contains(r)&&e(r)},o=new AbortController;return document.addEventListener("scroll",n,{signal:o.signal,capture:!0}),()=>o.abort()},[t]),m=s.useCallback((r,e)=>{const n=p=>{e(r)},o=new AbortController;return window.addEventListener("resize",n,{signal:o.signal,capture:!0}),()=>o.abort()},[t]),u=s.useCallback(r=>{const e=r.getBoundingClientRect(),n=Math.round((e.top+window.scrollY)*c)/c,o=Math.round((e.left+window.scrollX)*c)/c;((t==null?void 0:t.top)!==n||(t==null?void 0:t.left)!==o)&&(a==null||a({top:n,left:o}),h({top:n,left:o,width:e.width>0?e.width:void 0}))},[t]);return s.useLayoutEffect(()=>{if(l.current){u(l.current);const r=g(l.current,u),e=m(l.current,u);return()=>{r(),e()}}},[t]),i.jsxs(i.Fragment,{children:[i.jsx(d.default,{ref:l}),t&&C.createPortal(i.jsx(d.default,{ref:b,position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${t.left}px,${t.top}px)`,width:t.width},children:i.jsx(d.default,{position:"absolute",width:"fit",...f})}),x)]})}const w=s.forwardRef(j);w.displayName="Tooltip";module.exports=w;

package/components/tooltip.d.ts

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

package/components/tooltip.mjs

@@ -1,39 +1,39 @@
 import { jsxs as x, Fragment as C, jsx as a } from "react/jsx-runtime";
 import { createPortal as v } from "react-dom";
 import u from "../box.mjs";
-import { forwardRef as R, useRef as z, useState as A, useCallback as f, useLayoutEffect as D } from "react";
-import { f as E } from "../core.mjs";
+import { forwardRef as R, useRef as y, useState as z, useCallback as d, useLayoutEffect as A } from "react";
+import { g as D } from "../core.mjs";
 const i = 2;
-function H(d, w) {
-  const { onPositionChange: l } = d, s = z(null), [t, m] = A(), b = E(), h = f(
-    (e, o) => {
+function E(f, m) {
+  const { onPositionChange: l } = f, s = y(null), [t, w] = z(), b = D(), g = d(
+    (r, o) => {
       const n = (p) => {
-        p.target.contains(e) && o(e);
-      }, r = new AbortController();
-      return document.addEventListener("scroll", n, { signal: r.signal, capture: !0 }), () => r.abort();
+        p.target.contains(r) && o(r);
+      }, e = new AbortController();
+      return document.addEventListener("scroll", n, { signal: e.signal, capture: !0 }), () => e.abort();
     },
     [t]
-  ), g = f(
-    (e, o) => {
+  ), h = d(
+    (r, o) => {
       const n = (p) => {
-        o(e);
-      }, r = new AbortController();
-      return window.addEventListener("resize", n, { signal: r.signal, capture: !0 }), () => r.abort();
+        o(r);
+      }, e = new AbortController();
+      return window.addEventListener("resize", n, { signal: e.signal, capture: !0 }), () => e.abort();
     },
     [t]
-  ), c = f(
-    (e) => {
-      const o = e.getBoundingClientRect(), n = Math.round((o.top + window.scrollY) * i) / i, r = Math.round((o.left + window.scrollX) * i) / i;
-      ((t == null ? void 0 : t.top) !== n || (t == null ? void 0 : t.left) !== r) && (l == null || l({ top: n, left: r }), m({ top: n, left: r, width: o.width > 0 ? o.width : void 0 }));
+  ), c = d(
+    (r) => {
+      const o = r.getBoundingClientRect(), n = Math.round((o.top + window.scrollY) * i) / i, e = Math.round((o.left + window.scrollX) * i) / i;
+      ((t == null ? void 0 : t.top) !== n || (t == null ? void 0 : t.left) !== e) && (l == null || l({ top: n, left: e }), w({ top: n, left: e, width: o.width > 0 ? o.width : void 0 }));
     },
     [t]
   );
-  return D(() => {
+  return A(() => {
     if (s.current) {
       c(s.current);
-      const e = h(s.current, c), o = g(s.current, c);
+      const r = g(s.current, c), o = h(s.current, c);
       return () => {
-        e(), o();
+        r(), o();
       };
     }
   }, [t]), /* @__PURE__ */ x(C, { children: [
@@ -42,20 +42,21 @@ function H(d, w) {
       /* @__PURE__ */ a(
         u,
         {
-          ref: w,
+          ref: m,
           position: "absolute",
           top: 0,
           left: 0,
           transition: "none",
           style: { transform: `translate(${t.left}px,${t.top}px)`, width: t.width },
-          children: /* @__PURE__ */ a(u, { position: "absolute", width: "fit", ...d })
+          children: /* @__PURE__ */ a(u, { position: "absolute", width: "fit", ...f })
         }
       ),
       b
     )
   ] });
 }
-const M = R(H);
+const H = R(E);
+H.displayName = "Tooltip";
 export {
-  M as default
+  H as default
 };

package/core/boxStyles.d.ts

@@ -181,6 +181,10 @@ export declare const cssStyles: {
         styleName: string;
         values: readonly ["stretch", "flex-start", "flex-end", "center", "baseline", "start", "end", "self-start", "self-end"];
     }[];
+    placeContent: {
+        styleName: string;
+        values: readonly ["start", "end", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "stretch"];
+    }[];
     /** The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis. */
     alignContent: {
         styleName: string;