@cronocode/react-box 1.1.9 → 1.2.1

package/types.d.ts

@@ -1,3 +1,4 @@
+import { SvgStyles } from './components/baseSvg/baseSvg';
 export type Hovered<T> = {
     [K in keyof T as K extends string ? `${K}H` : never]: T[K];
 };
@@ -21,7 +22,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];
@@ -45,7 +45,7 @@ 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 = (typeof styleVariables.baseColors)[number];
+export type ColorType = string;
 type CursorType = (typeof styleVariables.cursors)[number];
 type OverflowType = (typeof styleVariables.overflows)[number];
 type FontSizeType = (typeof styleVariables.fontSizes)[number];
@@ -212,5 +212,6 @@ interface BoxUserSelect {
 }
 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: Array<keyof BoxStyles>;
+export declare const themeClasses: Partial<Record<keyof BoxStyles, string>>;
+export declare const themeSvgClasses: Partial<Record<keyof SvgStyles, string>>;
 export {};

package/utils/utils.mjs

@@ -1,92 +1,112 @@
-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"
-];
+const C = {
+  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_"
+}, d = {
+  fill: "fill_",
+  fillH: "fill_h_",
+  fillF: "fill_f_",
+  fillA: "fill_a_",
+  stroke: "stroke_",
+  strokeH: "stroke_h_",
+  strokeF: "stroke_f_",
+  strokeA: "stroke_a_"
+};
 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, []);
+((n) => {
+  function c(...i) {
+    return i.reduce((t, r) => r ? typeof r == "string" ? (t.push(r), t) : Array.isArray(r) ? (t.push(...c(...r)), t) : (Object.entries(r).forEach(([e, l]) => {
+      l && t.push(e);
+    }), t) : t, []);
   }
-  l.classNames = i;
+  n.classNames = c;
 })(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];
+const p = g;
+var u;
+((n) => {
+  function c(i, ...t) {
+    const r = { ...i }, e = {};
+    return t.forEach((l) => {
+      l in r && (e[l] = r[l], delete r[l]);
+    }), [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;
+  n.moveToTagProps = c;
+})(u || (u = {}));
+const k = u;
+var h;
+((n) => {
+  function c(t) {
+    const r = Array.from(t.elements).reduce((e, l) => {
+      const o = l.name;
+      return o && (e[o] || (e[o] = []), e[o].push(l)), 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, [l, o]) => {
+      if (o.length === 1) {
+        const _ = o[0];
+        i(e, l, _.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((b, s) => (s.type === "checkbox" || s.type === "radio" ? s.checked && b.push(s.value) : b.push(s.value), b), []);
+        i(e, l, _);
       }
-      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];
+  n.getFormEntries = c;
+  function i(t, r, e) {
+    if (r.includes(".")) {
+      const l = r.split(".");
+      let o = t;
+      l.forEach((_, b) => {
+        if (l.length > b + 1) {
+          const s = _.match(/^(.+)\[(\d)\]$/);
+          if (s) {
+            const [, a, f] = s;
+            o[a] = o[a] || [], o[a][f] = o[a][f] || {}, o = o[a][f];
           } else
-            r[c] = r[c] || {}, r = r[c];
+            o[_] = o[_] || {}, o = o[_];
         } else
-          r[c] = t;
+          o[_] = e;
       });
     } else
-      s[o] = t;
+      t[r] = e;
   }
-})(b || (b = {}));
-const H = b;
+})(h || (h = {}));
+const F = h;
 export {
-  C,
-  H as F,
-  A as O,
-  p as t
+  p as C,
+  F,
+  k as O,
+  C as a,
+  d as t
 };