@cronocode/react-box 1.0.1 → 1.0.3

package/types.d.ts

@@ -21,14 +21,8 @@ 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", "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"];
+    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];
-    fontColors: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-    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];
     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];
     zIndexSizes: readonly [1, 2, 3, 4, 5, 10, 11, 12, 13, 14, 15, 100, 101, 102, 103, 104, 105, 1000, 1001, 1002, 1003, 1004, 1005];
@@ -49,12 +43,6 @@ declare type BoxSizeValue = (typeof styleVariables.sizeSpecialValues)[number];
 declare type BorderSizeType = (typeof styleVariables.borderSizes)[number];
 declare type SizeType = (typeof styleVariables.sizes)[number];
 declare type ColorType = (typeof styleVariables.baseColors)[number];
-declare type BaseFontColorType = (typeof styleVariables.fontColors)[number];
-declare type BaseBgColorType = (typeof styleVariables.bgColors)[number];
-declare type BaseBorderColorType = (typeof styleVariables.borderColors)[number];
-declare type BaseOutlineColorType = (typeof styleVariables.outlineColors)[number];
-declare type BackgroundType = (typeof styleVariables.backgrounds)[number];
-declare type ShadowType = (typeof styleVariables.shadows)[number];
 declare type CursorType = (typeof styleVariables.cursors)[number];
 declare type OverflowType = (typeof styleVariables.overflows)[number];
 declare type FontSizeType = (typeof styleVariables.fontSizes)[number];
@@ -156,18 +144,18 @@ interface BoxBorder {
     borderRadiusBottomRight?: SizeType;
 }
 interface BoxShadow {
-    shadow?: ShadowType;
+    shadow?: string;
 }
 interface BoxBackground {
-    background?: BackgroundType;
-    bg?: BackgroundType;
+    background?: string;
+    bg?: string;
 }
 interface BoxColors {
-    color?: ColorType | BaseFontColorType;
-    backgroundColor?: ColorType | BaseBgColorType;
-    bgColor?: ColorType | BaseBgColorType;
-    borderColor?: ColorType | BaseBorderColorType;
-    outlineColor?: ColorType | BaseOutlineColorType;
+    color?: ColorType | string;
+    backgroundColor?: ColorType | string;
+    bgColor?: ColorType | string;
+    borderColor?: ColorType | string;
+    outlineColor?: ColorType | string;
 }
 interface BoxCursor {
     cursor?: CursorType;
@@ -212,4 +200,5 @@ interface BoxFlex {
 }
 declare type BoxNormalStyles = BoxPseudoClasses & BoxDisplay & BoxSizing & BoxPosition & BoxSize & BoxMargin & BoxPadding & BoxBorder & BoxShadow & BoxBackground & BoxColors & BoxCursor & BoxZIndex & BoxOverflow & BoxOpacity & BoxFont & BoxText & BoxFlex & BoxOutline;
 export declare type BoxStyles = BoxNormalStyles & Hovered<BoxNormalStyles> & Focused<BoxNormalStyles> & Activated<BoxNormalStyles>;
+export declare const themeClasses: Array<keyof BoxStyles>;
 export {};

package/utils/utils.js

@@ -1,36 +1,63 @@
-var f;
-((s) => {
-  function u(...o) {
-    return o.reduce((c, r) => typeof r == "string" ? (c.push(r), c) : Array.isArray(r) ? (c.push(...u(...r)), c) : (Object.entries(r).forEach(([t, e]) => {
-      e && c.push(t);
-    }), c), []);
-  }
-  s.classNames = u;
-})(f || (f = {}));
-const d = f;
+const a = [
+  "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 n;
-((s) => {
-  function u(o) {
-    const c = Array.from(o.elements).reduce((r, t) => {
-      const e = t.name;
-      return e && (r[e] || (r[e] = []), r[e].push(t)), r;
+((i) => {
+  function u(...s) {
+    return s.reduce((t, r) => typeof r == "string" ? (t.push(r), t) : Array.isArray(r) ? (t.push(...u(...r)), t) : (Object.entries(r).forEach(([e, o]) => {
+      o && t.push(e);
+    }), t), []);
+  }
+  i.classNames = u;
+})(n || (n = {}));
+const g = n;
+var l;
+((i) => {
+  function u(s) {
+    const t = Array.from(s.elements).reduce((r, e) => {
+      const o = e.name;
+      return o && (r[o] || (r[o] = []), r[o].push(e)), r;
     }, {});
-    return Object.entries(c).reduce((r, [t, e]) => {
-      if (e.length === 1) {
-        const i = e[0];
-        r[t] = i.type === "checkbox" || i.type === "radio" ? i.checked : i.value;
+    return Object.entries(t).reduce((r, [e, o]) => {
+      if (o.length === 1) {
+        const c = o[0];
+        r[e] = c.type === "checkbox" || c.type === "radio" ? c.checked : c.value;
       } else
-        r[t] = [], e.forEach((i) => {
-          var h;
-          i.type === "checkbox" ? i.checked && r[t].push(i.value) : i.type === "radio" ? r[t] = (h = e.find((p) => p.checked)) == null ? void 0 : h.value : r[t].push(i.value);
+        r[e] = [], o.forEach((c) => {
+          var d;
+          c.type === "checkbox" ? c.checked && r[e].push(c.value) : c.type === "radio" ? r[e] = (d = o.find((h) => h.checked)) == null ? void 0 : d.value : r[e].push(c.value);
         });
       return r;
     }, {});
   }
-  s.getFormEntries = u;
-})(n || (n = {}));
-const y = n;
+  i.getFormEntries = u;
+})(l || (l = {}));
+const C = l;
 export {
-  d as C,
-  y as F
+  g as C,
+  C as F,
+  a as t
 };