@cronocode/react-box 1.1.7 → 1.2.0

package/types.d.ts

@@ -1,14 +1,14 @@
-export declare type Hovered<T> = {
+export type Hovered<T> = {
     [K in keyof T as K extends string ? `${K}H` : never]: T[K];
 };
-export declare type Focused<T> = {
+export type Focused<T> = {
     [K in keyof T as K extends string ? `${K}F` : never]: T[K];
 };
-export declare type Activated<T> = {
+export type Activated<T> = {
     [K in keyof T as K extends string ? `${K}A` : never]: T[K];
 };
 export declare const styleVariables: {
-    display: readonly ["none", "block", "inline-block", "flex", "inline-flex", "grid", "contents"];
+    display: readonly ["none", "block", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "contents"];
     boxSizing: readonly ["border-box", "content-box"];
     position: readonly ["static", "relative", "absolute", "fixed", "sticky"];
     sizeSpecialValues: readonly ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"];
@@ -21,7 +21,6 @@ export declare const styleVariables: {
     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"];
     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;
-    baseColors: readonly ["none", "transparent", "black", "white", "blue", "red", "purple", "yellow", "pink", "green", "orange", "navy", "teal", "violet", "gray", "brown", "orange"];
     borderSizes: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
     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];
     fontWeight: readonly [100, 200, 300, 400, 500, 600, 700, 800, 900];
@@ -39,24 +38,26 @@ export declare const styleVariables: {
     outlineOffset: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
     transition: readonly ["none"];
     background: readonly ["none"];
+    userSelect: readonly ["none"];
 };
-declare type GapType = (typeof styleVariables.gap)[number];
-declare type BoxSizeValue = (typeof styleVariables.sizeSpecialValues)[number];
-declare type BorderSizeType = (typeof styleVariables.borderSizes)[number];
-declare type SizeType = (typeof styleVariables.sizes)[number];
-export declare type ColorType = (typeof styleVariables.baseColors)[number];
-declare type CursorType = (typeof styleVariables.cursors)[number];
-declare type OverflowType = (typeof styleVariables.overflows)[number];
-declare type FontSizeType = (typeof styleVariables.fontSizes)[number];
-declare type FontWeightType = (typeof styleVariables.fontWeight)[number];
-declare type ZIndexSizeType = (typeof styleVariables.zIndexSizes)[number];
-declare type OpacitySizeType = (typeof styleVariables.opacity)[number];
-declare type TextDecorationType = (typeof styleVariables.textDecoration)[number];
-declare type TextTransformType = (typeof styleVariables.textTransform)[number];
-declare type TextAlignType = (typeof styleVariables.textAlign)[number];
-declare type BorderAndOutlineStyleType = (typeof styleVariables.borderAndOutlineStyles)[number];
-declare type TransitionType = (typeof styleVariables.transition)[number];
-declare type BackgroundType = (typeof styleVariables.background)[number];
+type GapType = (typeof styleVariables.gap)[number];
+type BoxSizeValue = (typeof styleVariables.sizeSpecialValues)[number];
+type BorderSizeType = (typeof styleVariables.borderSizes)[number];
+type SizeType = (typeof styleVariables.sizes)[number];
+export type ColorType = string;
+type CursorType = (typeof styleVariables.cursors)[number];
+type OverflowType = (typeof styleVariables.overflows)[number];
+type FontSizeType = (typeof styleVariables.fontSizes)[number];
+type FontWeightType = (typeof styleVariables.fontWeight)[number];
+type ZIndexSizeType = (typeof styleVariables.zIndexSizes)[number];
+type OpacitySizeType = (typeof styleVariables.opacity)[number];
+type TextDecorationType = (typeof styleVariables.textDecoration)[number];
+type TextTransformType = (typeof styleVariables.textTransform)[number];
+type TextAlignType = (typeof styleVariables.textAlign)[number];
+type BorderAndOutlineStyleType = (typeof styleVariables.borderAndOutlineStyles)[number];
+type TransitionType = (typeof styleVariables.transition)[number];
+type BackgroundType = (typeof styleVariables.background)[number];
+type UserSelectType = (typeof styleVariables.userSelect)[number];
 interface BoxPseudoClasses {
     hover?: boolean;
     focus?: boolean;
@@ -205,7 +206,10 @@ interface BoxFlex {
 interface BoxTransition {
     transition?: TransitionType;
 }
-declare type BoxNormalStyles = BoxPseudoClasses & BoxDisplay & BoxSizing & BoxPosition & BoxSize & BoxMargin & BoxPadding & BoxBorder & BoxShadow & BoxBackground & BoxColors & BoxCursor & BoxZIndex & BoxOverflow & BoxOpacity & BoxFont & BoxText & BoxFlex & BoxOutline & BoxTransition;
-export declare type BoxStyles = BoxNormalStyles & Hovered<BoxNormalStyles> & Focused<BoxNormalStyles> & Activated<BoxNormalStyles>;
-export declare const themeClasses: Array<keyof BoxStyles>;
+interface BoxUserSelect {
+    userSelect?: UserSelectType;
+}
+type BoxNormalStyles = BoxPseudoClasses & BoxDisplay & BoxSizing & BoxPosition & BoxSize & BoxMargin & BoxPadding & BoxBorder & BoxShadow & BoxBackground & BoxColors & BoxCursor & BoxZIndex & BoxOverflow & BoxOpacity & BoxFont & BoxText & BoxFlex & BoxOutline & BoxTransition & BoxUserSelect;
+export type BoxStyles = BoxNormalStyles & Hovered<BoxNormalStyles> & Focused<BoxNormalStyles> & Activated<BoxNormalStyles>;
+export declare const themeClasses: Partial<Record<keyof BoxStyles, string>>;
 export {};

package/utils/form/formUtils.d.ts

@@ -1,4 +1,4 @@
-declare type FormValue = string | string[] | number | number[] | boolean;
+type FormValue = string | string[] | number | number[] | boolean;
 interface FormObject {
     [index: string]: FormValue | FormObject;
 }

package/utils/utils.mjs

@@ -1,92 +1,102 @@
-const p = [
-  "shadow",
-  "shadowH",
-  "shadowA",
-  "background",
-  "backgroundH",
-  "backgroundA",
-  "bg",
-  "bgH",
-  "bgA",
-  "color",
-  "colorH",
-  "colorA",
-  "backgroundColor",
-  "backgroundColorH",
-  "backgroundColorA",
-  "bgColor",
-  "bgColorH",
-  "bgColorA",
-  "borderColor",
-  "borderColorH",
-  "borderColorA",
-  "outlineColor",
-  "outlineColorH",
-  "outlineColorA"
-];
-var g;
-((l) => {
-  function i(...u) {
-    return u.reduce((s, o) => o ? typeof o == "string" ? (s.push(o), s) : Array.isArray(o) ? (s.push(...i(...o)), s) : (Object.entries(o).forEach(([t, e]) => {
-      e && s.push(t);
-    }), s) : s, []);
+const h = {
+  hover: "_h",
+  focus: "_f",
+  shadow: "shadow_",
+  shadowH: "shadow_h_",
+  shadowF: "shadow_f_",
+  shadowA: "shadow_a_",
+  background: "bg_",
+  backgroundH: "bg_h_",
+  backgroundF: "bg_f_",
+  backgroundA: "bg_a_",
+  bg: "bg_",
+  bgH: "bg_h_",
+  bgF: "bg_f_",
+  bgA: "bg_a_",
+  color: "color_",
+  colorH: "color_h_",
+  colorF: "color_f_",
+  colorA: "color_a_",
+  backgroundColor: "bgColor_",
+  backgroundColorH: "bgColor_h_",
+  backgroundColorF: "bgColor_f_",
+  backgroundColorA: "bgColor_a_",
+  bgColor: "bgColor_",
+  bgColorH: "bgColor_h_",
+  bgColorF: "bgColor_f_",
+  bgColorA: "bgColor_a_",
+  borderColor: "borderColor_",
+  borderColorH: "borderColor_h_",
+  borderColorF: "borderColor_f_",
+  borderColorA: "borderColor_a_",
+  outlineColor: "outlineColor_",
+  outlineColorH: "outlineColor_h_",
+  outlineColorF: "outlineColor_f_",
+  outlineColorA: "outlineColor_a_"
+};
+var a;
+((b) => {
+  function s(...n) {
+    return n.reduce((l, r) => r ? typeof r == "string" ? (l.push(r), l) : Array.isArray(r) ? (l.push(...s(...r)), l) : (Object.entries(r).forEach(([e, t]) => {
+      t && l.push(e);
+    }), l) : l, []);
   }
-  l.classNames = i;
-})(g || (g = {}));
-const C = g;
-var h;
-((l) => {
-  function i(u, ...s) {
-    const o = { ...u }, t = {};
-    return s.forEach((e) => {
-      e in o && (t[e] = o[e], delete o[e]);
-    }), [t, o];
+  b.classNames = s;
+})(a || (a = {}));
+const f = a;
+var d;
+((b) => {
+  function s(n, ...l) {
+    const r = { ...n }, e = {};
+    return l.forEach((t) => {
+      t in r && (e[t] = r[t], delete r[t]);
+    }), [e, r];
   }
-  l.moveToTagProps = i;
-})(h || (h = {}));
-const A = h;
-var b;
-((l) => {
-  function i(s) {
-    const o = Array.from(s.elements).reduce((t, e) => {
-      const r = e.name;
-      return r && (t[r] || (t[r] = []), t[r].push(e)), t;
+  b.moveToTagProps = s;
+})(d || (d = {}));
+const p = d;
+var C;
+((b) => {
+  function s(l) {
+    const r = Array.from(l.elements).reduce((e, t) => {
+      const o = t.name;
+      return o && (e[o] || (e[o] = []), e[o].push(t)), e;
     }, {});
-    return Object.entries(o).reduce((t, [e, r]) => {
-      if (r.length === 1) {
-        const c = r[0];
-        u(t, e, c.type === "checkbox" || c.type === "radio" ? c.checked : c.value);
+    return Object.entries(r).reduce((e, [t, o]) => {
+      if (o.length === 1) {
+        const _ = o[0];
+        n(e, t, _.type === "checkbox" || _.type === "radio" ? _.checked : _.value);
       } else {
-        const c = r.reduce((d, n) => (n.type === "checkbox" || n.type === "radio" ? n.checked && d.push(n.value) : d.push(n.value), d), []);
-        u(t, e, c);
+        const _ = o.reduce((i, c) => (c.type === "checkbox" || c.type === "radio" ? c.checked && i.push(c.value) : i.push(c.value), i), []);
+        n(e, t, _);
       }
-      return t;
+      return e;
     }, {});
   }
-  l.getFormEntries = i;
-  function u(s, o, t) {
-    if (o.includes(".")) {
-      const e = o.split(".");
-      let r = s;
-      e.forEach((c, d) => {
-        if (e.length > d + 1) {
-          const n = c.match(/^(.+)\[(\d)\]$/);
-          if (n) {
-            const [, a, f] = n;
-            r[a] = r[a] || [], r[a][f] = r[a][f] || {}, r = r[a][f];
+  b.getFormEntries = s;
+  function n(l, r, e) {
+    if (r.includes(".")) {
+      const t = r.split(".");
+      let o = l;
+      t.forEach((_, i) => {
+        if (t.length > i + 1) {
+          const c = _.match(/^(.+)\[(\d)\]$/);
+          if (c) {
+            const [, u, g] = c;
+            o[u] = o[u] || [], o[u][g] = o[u][g] || {}, o = o[u][g];
           } else
-            r[c] = r[c] || {}, r = r[c];
+            o[_] = o[_] || {}, o = o[_];
         } else
-          r[c] = t;
+          o[_] = e;
       });
     } else
-      s[o] = t;
+      l[r] = e;
   }
-})(b || (b = {}));
-const H = b;
+})(C || (C = {}));
+const F = C;
 export {
-  C,
-  H as F,
-  A as O,
-  p as t
+  f as C,
+  F,
+  p as O,
+  h as t
 };

package/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />