@cronocode/react-box 0.3.8 → 0.3.9

package/components/formAsync.d.ts

@@ -0,0 +1,6 @@
+interface Props<T> {
+    children: React.ReactNode;
+    onSubmit: (obj: T, e: React.FormEvent<HTMLFormElement>) => void;
+}
+export default function FormAsync<T>(props: Props<T>): JSX.Element;
+export {};

package/components/formAsync.js

@@ -0,0 +1,26 @@
+import { useRef as i, useCallback as a } from "react";
+import c from "../box.js";
+import { jsx as u } from "react/jsx-runtime";
+import "../box.module.css.js";
+import "../utils/utils.js";
+function x(t) {
+  const {
+    children: n,
+    onSubmit: e
+  } = t, o = i(null), m = a((r) => {
+    r.preventDefault();
+    const f = new FormData(o.current), s = Object.fromEntries(f.entries());
+    e(s, r);
+  }, []);
+  return /* @__PURE__ */ u(c, {
+    tag: "form",
+    props: {
+      ref: o,
+      onSubmit: m
+    },
+    children: n
+  });
+}
+export {
+  x as default
+};

package/components/uncontrolledTextboxCore.d.ts

@@ -1,9 +1,10 @@
 import Box from '../box';
 declare type BoxProps = React.ComponentProps<typeof Box>;
 declare type BoxTagProps = Required<BoxProps>['props'];
-declare type UncontrolledTextboxCoreTagProps = Omit<BoxTagProps, 'onInput' | 'onChange' | 'type' | 'placeholder' | 'disabled' | 'defaultValue'>;
+declare type UncontrolledTextboxCoreTagProps = Omit<BoxTagProps, 'name' | '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'> {
+    name: string;
     props?: UncontrolledTextboxCoreTagProps;
     onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
     onChange?: (e: React.FormEvent<HTMLInputElement>) => void;

package/components/uncontrolledTextboxCore.js

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

package/css.variables.d.ts

@@ -1,22 +1,26 @@
 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, 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 ["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"];
+    colors: readonly ["none", "transparent", "black", "white", "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];
+    outlineColors: 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];
+    borderAndOutlineStyles: readonly ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"];
 };
 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 BaseBorderColorType = typeof variables.borderColors[number];
+export declare type BaseOutlineColorType = typeof variables.outlineColors[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 declare type BorderAndOutlineStyleType = typeof variables.borderAndOutlineStyles[number];
 export default variables;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "main": "./box.js",
   "module": "./box.js",
   "types": "./box.d.ts",