@cronocode/react-box 0.3.4 → 0.3.6

package/components/buttonCore.d.ts

@@ -1,9 +1,13 @@
 import Box from '../box';
 declare type BoxProps = React.ComponentProps<typeof Box>;
-interface Props extends BoxProps {
+declare type BoxTagProps = Required<BoxProps>['props'];
+declare type ButtonTagProps = Omit<BoxTagProps, 'type' | 'onClick' | 'disabled'>;
+declare type ButtonType = Required<React.ComponentProps<'button'>>['type'];
+interface Props extends Omit<BoxProps, 'props'> {
+    props?: ButtonTagProps;
+    type?: ButtonType;
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    type?: React.ComponentProps<'button'>['type'];
     disabled?: boolean;
 }
-export default function Button(props: Props): JSX.Element;
+export default function ButtonCore(props: Props): JSX.Element;
 export {};

package/components/buttonCore.js

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

package/components/flex.js

@@ -1,32 +1,17 @@
-import m from "../box.js";
-import { jsx as s } from "react/jsx-runtime";
+import t from "../box.js";
+import { jsx as r } from "react/jsx-runtime";
 import "react";
+import "../box.module.css.js";
 import "../utils/utils.js";
-function u(i) {
+function x(i) {
   const {
-    wrap: n,
-    jc: e,
-    ai: t,
-    ac: r,
-    d: l,
-    grow: o,
-    shrink: a,
-    as: f,
-    inline: x
+    inline: o
   } = i;
-  return /* @__PURE__ */ s(m, {
-    display: x ? "inline-flex" : "flex",
-    flexWrap: n,
-    justifyContent: e,
-    alignItems: t,
-    alignContent: r,
-    direction: l,
-    flexGrow: o,
-    flexShrink: a,
-    alignSelf: f,
+  return /* @__PURE__ */ r(t, {
+    display: o ? "inline-flex" : "flex",
     ...i
   });
 }
 export {
-  u as default
+  x as default
 };

package/components/uncontrolledTextboxCore.d.ts

@@ -1,10 +1,13 @@
 import Box from '../box';
 declare type BoxProps = React.ComponentProps<typeof Box>;
-declare type UncontrolledTextboxCoreTypeAttribute = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
-interface Props extends BoxProps {
+declare type BoxTagProps = Required<BoxProps>['props'];
+declare type UncontrolledTextboxCoreTagProps = Omit<BoxTagProps, 'onInput' | 'onChange' | 'type' | 'placeholder' | 'disabled' | 'defaultValue'>;
+declare type UncontrolledTextboxCoreType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+interface Props extends Omit<BoxProps, 'props'> {
+    props?: UncontrolledTextboxCoreTagProps;
     onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
     onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
-    type?: UncontrolledTextboxCoreTypeAttribute;
+    type?: UncontrolledTextboxCoreType;
     placeholder?: string;
     disabled?: boolean;
     defaultValue?: string | number;

package/components/uncontrolledTextboxCore.js

@@ -1,32 +1,31 @@
-import u from "../box.js";
-import { jsx as c } from "react/jsx-runtime";
+import s from "../box.js";
+import { jsx as u } from "react/jsx-runtime";
 import "react";
+import "../box.module.css.js";
 import "../utils/utils.js";
-function g(o) {
+function g(t) {
   const {
-    props: t,
+    props: o,
     type: e,
-    disabled: n,
-    placeholder: r,
+    disabled: r,
+    placeholder: n,
     defaultValue: p,
     onInput: a,
-    onChange: s
-  } = o, i = {
+    onChange: i
+  } = t, l = {
+    ...o,
     type: e || "text",
-    disabled: n,
-    placeholder: r,
+    disabled: r,
+    placeholder: n,
     onInput: a,
-    onChange: s,
-    defaultValue: p,
-    ...t
-  }, l = {
-    ...o,
-    props: i
+    onChange: i,
+    defaultValue: p
   };
-  return /* @__PURE__ */ c(u, {
+  return /* @__PURE__ */ u(s, {
     tag: "input",
     inline: !0,
-    ...l
+    ...t,
+    props: l
   });
 }
 export {

package/css.variables.d.ts

@@ -1,12 +1,22 @@
 declare const variables: {
-    sizes: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100];
+    sizes: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68, 70, 72, 74, 76, 78, 80, 82, 84, 86, 88, 90, 92, 94, 96, 98, 100];
     sizeMultiplier: number;
-    colors: readonly ["primary", "primaryLight", "primaryDark", "secondary", "secondaryLight", "secondaryDark", "tertiary", "tertiaryLight", "tertiaryDark", "blue", "blueLight", "blueDark", "red", "redLight", "redDark", "purple", "purpleLight", "purpleDark", "yellow", "yellowLight", "yellowDark", "pink", "pinkLight", "pinkDark", "green", "greenLight", "greenDark", "orange", "orangeLight", "orangeDark", "navy", "navyLight", "navyDark", "teal", "tealLight", "tealDark", "violet", "violetLight", "violetDark", "black", "white", "gray", "grayLight", "grayDark", "brown", "brownLight", "brownDark", "orange", "orangeLight", "orangeDark"];
+    colors: readonly ["black", "white", "transparent", "primary", "primaryLight", "primaryDark", "secondary", "secondaryLight", "secondaryDark", "tertiary", "tertiaryLight", "tertiaryDark", "blue", "blueLight", "blueDark", "red", "redLight", "redDark", "purple", "purpleLight", "purpleDark", "yellow", "yellowLight", "yellowDark", "pink", "pinkLight", "pinkDark", "green", "greenLight", "greenDark", "orange", "orangeLight", "orangeDark", "navy", "navyLight", "navyDark", "teal", "tealLight", "tealDark", "violet", "violetLight", "violetDark", "gray", "grayLight", "grayDark", "brown", "brownLight", "brownDark", "orange", "orangeLight", "orangeDark"];
+    fontColors: readonly ["color1", "color2", "color3", "color4", "color5", "color6", "color7", "color8", "color9", "color10"];
+    bgColors: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    borderColors: readonly [1, 2, 3, 4, 5];
+    backgrounds: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    shadows: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
     cursors: readonly ["auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "e-resize", "n-resize", "ne-resize", "nw-resize", "s-resize", "se-resize", "sw-resize", "w-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "col-resize", "row-resize", "all-scroll", "zoom-in", "zoom-out", "grab", "grabbing"];
     fontSizes: readonly [6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 54, 58, 64, 70, 78, 86, 96];
 };
 export declare type SizeType = typeof variables.sizes[number];
 export declare type ColorType = typeof variables.colors[number];
+export declare type BaseFontColorType = typeof variables.fontColors[number];
+export declare type BaseBgColorType = typeof variables.bgColors[number];
+export declare type BaseBorderColorType = typeof variables.bgColors[number];
+export declare type BackgroundType = typeof variables.backgrounds[number];
+export declare type ShadowType = typeof variables.shadows[number];
 export declare type CursorType = typeof variables.cursors[number];
 export declare type FontSizeType = typeof variables.fontSizes[number];
 export default variables;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "main": "./box.js",
   "module": "./box.js",
   "types": "./box.d.ts",
@@ -43,6 +43,7 @@
     "@cronocode/identity-factory": "^0.0.6",
     "@types/node": "^18.7.14",
     "@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",