@cronocode/react-box 1.5.5 → 1.5.8

package/README.md

@@ -0,0 +1,90 @@
+# React box
+
+This is a react base component which will reduce considerably necessity to write css code.
+
+## Getting Started
+
+1. Installation
+
+```
+npm install @cronocode/react-box
+```
+
+2. Import styles
+
+```
+import "@cronocode/react-box/styles.css";
+```
+
+OR
+
+```
+@import "@cronocode/react-box/styles.css";
+```
+
+3. Use component
+
+Sizes are divided to `4`
+`padding={3}` means `1rem/4 => 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";
+
+export default function Component(props: Props) {
+  return (
+    <Box className="custom-class" m={2} p={7}>
+      basic example
+    </Box>
+  );
+}
+```
+
+## Components
+
+- **Box** - base component with a tons of props
+
+```
+import Box from "@cronocode/react-box";
+```
+
+<br/>
+
+### Alias-shortcuts components
+
+- **Flex** - this is a `Box` component with `display: flex` style
+
+```
+import Flex from "@cronocode/react-box/components/flex";
+```
+
+- **Button** - this is a `Box` component with html tag `button` and `onClick` prop
+
+```
+import Button from "@cronocode/react-box/components/button";
+```
+
+- **Textbox**
+
+```
+import Textbox from "@cronocode/react-box/components/textbox";
+```
+
+- **Tooltip** - this is useful when you need a position absolute and the parent has overflow hidden.
+
+```
+import Tooltip from "@cronocode/react-box/components/tooltip";
+```
+
+## Theme variables
+
+```
+  --borderColor: black;
+  --outlineColor: black;
+  --lineHeight: 1.2;
+  --fontSize: 14px;
+  --transitionTime: 0.25s;
+```

package/baseSvg.module.css.cjs

@@ -1 +1 @@
-"use strict";const t={base:"b67",rotate0:"b68",rotateH0:"b69",hovertrue:"_h",rotate90:"b7a",rotateH90:"b7b",rotate180:"b7c",rotateH180:"b7d",rotate270:"b7e",rotateH270:"b7f",flipxAxis:"b7g",flipHxAxis:"b7h",flipyAxis:"b7i",flipHyAxis:"b7j",rotateF0:"b7k",focustrue:"_f",rotateF90:"b7l",rotateF180:"b7m",rotateF270:"b7n",flipFxAxis:"b7o",flipFyAxis:"b7p",rotateA0:"b7q",rotateA90:"b7r",rotateA180:"b7s",rotateA270:"b7t",flipAxAxis:"b7u",flipAyAxis:"b7v"};exports.classes=t;
+"use strict";const a={base:"cal",rotate0:"cam",rotateH0:"can",hovertrue:"_h",rotate90:"cao",rotateH90:"cap",rotate180:"caq",rotateH180:"car",rotate270:"cas",rotateH270:"cat",flipxAxis:"cau",flipHxAxis:"cav",flipyAxis:"caw",flipHyAxis:"cax",rotateF0:"cay",focustrue:"_f",rotateF90:"caz",rotateF180:"caA",rotateF270:"caB",flipFxAxis:"caC",flipFyAxis:"caD",rotateA0:"caE",rotateA90:"caF",rotateA180:"caG",rotateA270:"caH",flipAxAxis:"caI",flipAyAxis:"caJ"};exports.classes=a;

package/baseSvg.module.css.mjs

@@ -1,4 +1,4 @@
-const t = { base: "b67", rotate0: "b68", rotateH0: "b69", hovertrue: "_h", rotate90: "b7a", rotateH90: "b7b", rotate180: "b7c", rotateH180: "b7d", rotate270: "b7e", rotateH270: "b7f", flipxAxis: "b7g", flipHxAxis: "b7h", flipyAxis: "b7i", flipHyAxis: "b7j", rotateF0: "b7k", focustrue: "_f", rotateF90: "b7l", rotateF180: "b7m", rotateF270: "b7n", flipFxAxis: "b7o", flipFyAxis: "b7p", rotateA0: "b7q", rotateA90: "b7r", rotateA180: "b7s", rotateA270: "b7t", flipAxAxis: "b7u", flipAyAxis: "b7v" };
+const a = { base: "cal", rotate0: "cam", rotateH0: "can", hovertrue: "_h", rotate90: "cao", rotateH90: "cap", rotate180: "caq", rotateH180: "car", rotate270: "cas", rotateH270: "cat", flipxAxis: "cau", flipHxAxis: "cav", flipyAxis: "caw", flipHyAxis: "cax", rotateF0: "cay", focustrue: "_f", rotateF90: "caz", rotateF180: "caA", rotateF270: "caB", flipFxAxis: "caC", flipFyAxis: "caD", rotateA0: "caE", rotateA90: "caF", rotateA180: "caG", rotateA270: "caH", flipAxAxis: "caI", flipAyAxis: "caJ" };
 export {
-  t as c
+  a as c
 };

package/box.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),c=require("./box.module.css.cjs"),d=require("./utils/utils.cjs"),j=require("./theme.cjs");function y(s,e){const{tag:t,children:o,props:n,className:m,style:u}=s,x=j.useTheme(s),$=a.useMemo(()=>{const i=m?d.ClassNameUtils.classNames(c.classes.box,m):[c.classes.box],T={...h(x),...h(s)};return Object.entries(T).forEach(([l,g])=>{const p=c.classes[l+g];p?i.push(p):l in d.themeClasses&&i.push(`${d.themeClasses[l]}${g}`)}),i.join(" ")},[s]),r={...n,className:$};u&&(r.style=u),e&&(r.ref=e);const[H,b]=a.useState(!1),f=typeof o=="function";return f&&(r.onMouseEnter=()=>b(!0),r.onMouseLeave=()=>b(!1)),a.createElement(t||"div",r,f?o({isHover:H}):o)}const C=a.forwardRef(y),N={m:"margin",mx:"marginHorizontal",my:"marginVertical",mt:"marginTop",mr:"marginRight",mb:"marginBottom",ml:"marginLeft",p:"padding",px:"paddingHorizontal",py:"paddingVertical",pt:"paddingTop",pr:"paddingRight",pb:"paddingBottom",pl:"paddingLeft",b:"border",bx:"borderHorizontal",by:"borderVertical",bt:"borderTop",br:"borderRight",bb:"borderBottom",bl:"borderLeft",jc:"justifyContent",ai:"alignItems",ac:"alignContent",d:"flexDirection"},P=Object.entries(N).reduce((s,[e,t])=>(s[e]=t,s[`${e}H`]=`${t}H`,s[`${e}F`]=`${t}F`,s[`${e}A`]=`${t}A`,s),{});function h(s){const e={...s};return Object.keys(e).forEach(o=>{const n=P[o];n&&(n in e||(e[n]=e[o]),delete e[o])}),e}exports.default=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),c=require("./box.module.css.cjs"),d=require("./utils/utils.cjs"),j=require("./theme.cjs");function y(s,e){const{tag:t,children:o,props:n,className:u,style:b}=s,f=j.useTheme(s),$=a.useMemo(()=>{const i=u?d.ClassNameUtils.classNames(c.classes.box,u):[c.classes.box],T=f?{...m(f),...m(s)}:m(s);return Object.entries(T).forEach(([l,h])=>{const x=c.classes[l+h];x?i.push(x):l in d.themeClasses&&i.push(`${d.themeClasses[l]}${h}`)}),i.join(" ")},[s]),r={...n,className:$};b&&(r.style=b),e&&(r.ref=e);const[H,g]=a.useState(!1),p=typeof o=="function";return p&&(r.onMouseEnter=()=>g(!0),r.onMouseLeave=()=>g(!1)),a.createElement(t||"div",r,p?o({isHover:H}):o)}const C=a.forwardRef(y),N={m:"margin",mx:"marginHorizontal",my:"marginVertical",mt:"marginTop",mr:"marginRight",mb:"marginBottom",ml:"marginLeft",p:"padding",px:"paddingHorizontal",py:"paddingVertical",pt:"paddingTop",pr:"paddingRight",pb:"paddingBottom",pl:"paddingLeft",b:"border",bx:"borderHorizontal",by:"borderVertical",bt:"borderTop",br:"borderRight",bb:"borderBottom",bl:"borderLeft",jc:"justifyContent",ai:"alignItems",ac:"alignContent",d:"flexDirection"},P=Object.entries(N).reduce((s,[e,t])=>(s[e]=t,s[`${e}H`]=`${t}H`,s[`${e}F`]=`${t}F`,s[`${e}A`]=`${t}A`,s),{});function m(s){const e={...s};return Object.keys(e).forEach(o=>{const n=P[o];n&&(n in e||(e[n]=e[o]),delete e[o])}),e}exports.default=C;

package/box.mjs

@@ -1,18 +1,18 @@
 import T, { forwardRef as j, useMemo as C, useState as N } from "react";
 import { c as m } from "./box.module.css.mjs";
-import { C as y, a as p } from "./utils/utils.mjs";
+import { C as y, a as h } from "./utils/utils.mjs";
 import { useTheme as B } from "./theme.mjs";
 function P(t, e) {
-  const { tag: s, children: o, props: n, className: l, style: c } = t, h = B(t), x = C(() => {
-    const a = l ? y.classNames(m.box, l) : [m.box], H = { ...u(h), ...u(t) };
-    return Object.entries(H).forEach(([i, b]) => {
-      const g = m[i + b];
-      g ? a.push(g) : i in p && a.push(`${p[i]}${b}`);
+  const { tag: s, children: o, props: n, className: c, style: d } = t, f = B(t), x = C(() => {
+    const a = c ? y.classNames(m.box, c) : [m.box], H = f ? { ...l(f), ...l(t) } : l(t);
+    return Object.entries(H).forEach(([i, p]) => {
+      const u = m[i + p];
+      u ? a.push(u) : i in h && a.push(`${h[i]}${p}`);
     }), a.join(" ");
   }, [t]), r = { ...n, className: x };
-  c && (r.style = c), e && (r.ref = e);
-  const [$, d] = N(!1), f = typeof o == "function";
-  return f && (r.onMouseEnter = () => d(!0), r.onMouseLeave = () => d(!1)), T.createElement(s || "div", r, f ? o({ isHover: $ }) : o);
+  d && (r.style = d), e && (r.ref = e);
+  const [$, b] = N(!1), g = typeof o == "function";
+  return g && (r.onMouseEnter = () => b(!0), r.onMouseLeave = () => b(!1)), T.createElement(s || "div", r, g ? o({ isHover: $ }) : o);
 }
 const z = j(P), R = {
   m: "margin",
@@ -41,7 +41,7 @@ const z = j(P), R = {
   ac: "alignContent",
   d: "flexDirection"
 }, v = Object.entries(R).reduce((t, [e, s]) => (t[e] = s, t[`${e}H`] = `${s}H`, t[`${e}F`] = `${s}F`, t[`${e}A`] = `${s}A`, t), {});
-function u(t) {
+function l(t) {
   const e = { ...t };
   return Object.keys(e).forEach((o) => {
     const n = v[o];