@cronocode/react-box 1.2.0 → 1.2.1

package/box.mjs

@@ -1,13 +1,13 @@
 import N, { forwardRef as v, useState as b } from "react";
 import { c as a } from "./box.module.css.mjs";
-import { C as g, t as u } from "./utils/utils.mjs";
+import { C as g, a as u } from "./utils/utils.mjs";
 function C(n, r) {
-  const { tag: d, children: e, props: h, className: c, style: l } = n, t = c ? g.classNames(a.box, c) : [a.box];
-  Object.entries(n).forEach(([o, m]) => {
-    const p = a[o + m];
-    p ? t.push(p) : o in u && t.push(`${u[o]}${m}`);
+  const { tag: d, children: e, props: h, className: c, style: l } = n, o = c ? g.classNames(a.box, c) : [a.box];
+  Object.entries(n).forEach(([t, m]) => {
+    const p = a[t + m];
+    p ? o.push(p) : t in u && o.push(`${u[t]}${m}`);
   });
-  const s = { ...h, className: t.join(" ") };
+  const s = { ...h, className: o.join(" ") };
   l && (s.style = l), r && (s.ref = r);
   const [x, f] = b(!1), i = typeof e == "function";
   return i && (s.onMouseEnter = () => f(!0), s.onMouseLeave = () => f(!1)), N.createElement(d || "div", s, i ? e({ isHover: x }) : e);

package/components/baseSvg.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColorType, Hovered } from '../types';
+import { Activated, ColorType, Focused, Hovered } from '../types';
 import ClassNameUtils from '../utils/className/classNameUtils';
 interface SvgNormalStyles {
     fill?: ColorType | string;
@@ -7,7 +7,7 @@ interface SvgNormalStyles {
     rotate?: 0 | 90 | 180 | 270;
     flip?: 'xAxis' | 'yAxis';
 }
-export type SvgStyles = SvgNormalStyles & Hovered<SvgNormalStyles>;
+export type SvgStyles = SvgNormalStyles & Hovered<SvgNormalStyles> & Focused<SvgNormalStyles> & Activated<SvgNormalStyles>;
 type AllSvgProps = React.SVGProps<SVGElement>;
 type SvgPropsType = Omit<AllSvgProps, 'className' | 'style' | 'width' | 'height'>;
 type SvgStyleType = Omit<React.CSSProperties, 'width' | 'height'>;

package/components/baseSvg.mjs

@@ -1,21 +1,21 @@
-import x, { useState as v } from "react";
-import { C as d } from "../utils/utils.mjs";
-const a = { base: "cGH", rotate0: "cGI", rotateH0: "cGJ", hovertrue: "_h", rotate90: "cGK", rotateH90: "cGL", rotate180: "cGM", rotateH180: "cGN", rotate270: "cGO", rotateH270: "cGP", flipxAxis: "cGQ", flipHxAxis: "cGR", flipyAxis: "cGS", flipHyAxis: "cGT" }, g = ["fill", "fillH", "stroke", "strokeH"];
+import H, { useState as g } from "react";
+import { C as w, t as p } from "../utils/utils.mjs";
+const a = { base: "cGH", rotate0: "cGI", rotateH0: "cGJ", hovertrue: "_h", rotate90: "cGK", rotateH90: "cGL", rotate180: "cGM", rotateH180: "cGN", rotate270: "cGO", rotateH270: "cGP", flipxAxis: "cGQ", flipHxAxis: "cGR", flipyAxis: "cGS", flipHyAxis: "cGT" };
 function A(c) {
-  const { children: s, props: m, className: r, style: p, viewBox: G, width: u, height: H } = c, e = r ? d.classNames(r, a.base) : [a.base];
-  Object.entries(c).forEach(([o, n]) => {
-    const f = a[o + n];
-    f ? e.push(f) : g.includes(o) && e.push(`${o}${n}`);
+  const { children: s, props: G, className: r, style: m, viewBox: h, width: u, height: v } = c, e = r ? w.classNames(r, a.base) : [a.base];
+  Object.entries(c).forEach(([o, l]) => {
+    const f = a[o + l];
+    f ? e.push(f) : o in p && e.push(`${p[o]}${l}`);
   });
   const t = {
-    ...m,
-    style: { ...p, width: u, height: H },
+    ...G,
+    style: { ...m, width: u, height: v },
     className: e.join(" "),
-    viewBox: G || "0 0 24 24",
+    viewBox: h || "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none"
-  }, [h, i] = v(!1), l = typeof s == "function";
-  return l && (t.onMouseEnter = () => i(!0), t.onMouseLeave = () => i(!1)), x.createElement("svg", t, l ? s({ isHover: h }) : s);
+  }, [x, i] = g(!1), n = typeof s == "function";
+  return n && (t.onMouseEnter = () => i(!0), t.onMouseLeave = () => i(!1)), H.createElement("svg", t, n ? s({ isHover: x }) : s);
 }
 export {
   A as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "./box.mjs",
   "module": "./box.mjs",
   "types": "./box.d.ts",

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];
 };
@@ -212,4 +213,5 @@ 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: Partial<Record<keyof BoxStyles, string>>;
+export declare const themeSvgClasses: Partial<Record<keyof SvgStyles, string>>;
 export {};

package/utils/utils.mjs

@@ -1,4 +1,4 @@
-const h = {
+const C = {
   hover: "_h",
   focus: "_f",
   shadow: "shadow_",
@@ -33,70 +33,80 @@ const h = {
   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 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, []);
+var g;
+((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, []);
   }
-  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]);
+  n.classNames = c;
+})(g || (g = {}));
+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];
   }
-  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;
+  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(r).reduce((e, [t, o]) => {
+    return Object.entries(r).reduce((e, [l, o]) => {
       if (o.length === 1) {
         const _ = o[0];
-        n(e, t, _.type === "checkbox" || _.type === "radio" ? _.checked : _.value);
+        i(e, l, _.type === "checkbox" || _.type === "radio" ? _.checked : _.value);
       } else {
-        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, _);
+        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 e;
     }, {});
   }
-  b.getFormEntries = s;
-  function n(l, r, e) {
+  n.getFormEntries = c;
+  function i(t, 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];
+      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
             o[_] = o[_] || {}, o = o[_];
         } else
           o[_] = e;
       });
     } else
-      l[r] = e;
+      t[r] = e;
   }
-})(C || (C = {}));
-const F = C;
+})(h || (h = {}));
+const F = h;
 export {
-  f as C,
+  p as C,
   F,
-  p as O,
-  h as t
+  k as O,
+  C as a,
+  d as t
 };