@cronocode/react-box 1.5.5 → 1.5.6

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 t={base:"a",rotate0:"b",rotateH0:"c",hovertrue:"_h",rotate90:"d",rotateH90:"e",rotate180:"f",rotateH180:"g",rotate270:"h",rotateH270:"i",flipxAxis:"j",flipHxAxis:"k",flipyAxis:"l",flipHyAxis:"m",rotateF0:"n",focustrue:"_f",rotateF90:"o",rotateF180:"p",rotateF270:"q",flipFxAxis:"r",flipFyAxis:"s",rotateA0:"t",rotateA90:"u",rotateA180:"v",rotateA270:"w",flipAxAxis:"x",flipAyAxis:"y"};exports.classes=t;

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 t = { base: "a", rotate0: "b", rotateH0: "c", hovertrue: "_h", rotate90: "d", rotateH90: "e", rotate180: "f", rotateH180: "g", rotate270: "h", rotateH270: "i", flipxAxis: "j", flipHxAxis: "k", flipyAxis: "l", flipHyAxis: "m", rotateF0: "n", focustrue: "_f", rotateF90: "o", rotateF180: "p", rotateF270: "q", flipFxAxis: "r", flipFyAxis: "s", rotateA0: "t", rotateA90: "u", rotateA180: "v", rotateA270: "w", flipAxAxis: "x", flipAyAxis: "y" };
 export {
   t as c
 };