@cronocode/react-box 1.7.1 → 1.7.3

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.7.1",
+  "version": "1.7.3",
+  "type": "module",
   "main": "./box.js",
   "module": "./box.js",
   "types": "./box.d.ts",
@@ -10,14 +11,18 @@
       "require": "./box.js",
       "types": "./box.d.ts"
     },
-    "./style.css": "./style.css",
     "./theme": {
       "import": "./theme.js",
       "require": "./theme.js",
       "types": "./theme.d.ts"
     },
-    "./types": {
-      "types": "./types.d.ts"
+    "./core/types": {
+      "types": "./core/types.d.ts"
+    },
+    "./ssg": {
+      "import": "./ssg.js",
+      "require": "./ssg.js",
+      "types": "./ssg.d.ts"
     },
     "./components/*": {
       "import": "./components/*.js",
@@ -30,7 +35,7 @@
     "build:pages": "vite build ./pages --config ./pages.vite.config.ts --outDir ../dist --mode production",
     "preview": "vite preview",
     "build": "vite build",
-    "postbuild": "cp package.json dist & cp LICENSE dist & cp README.md dist & rm ./dist/index.d.ts & rm ./dist/index.js",
+    "postbuild": "cp package.json dist & cp LICENSE dist & cp README.md dist",
     "build:dev": "vite build --mode dev",
     "compile": "tsc --noEmit --skipLibCheck",
     "test": "echo \"Error: no test specified\" && exit 1"

package/ssg.d.ts

@@ -0,0 +1,3 @@
+import StylesContext from './core/stylesContext';
+declare const flushStyles: typeof StylesContext.flush;
+export { flushStyles };

package/ssg.js

@@ -0,0 +1,6 @@
+import { S as t } from "./core.js";
+import "react";
+const { flush: e } = t;
+export {
+  e as flushStyles
+};

package/theme.d.ts

@@ -1,46 +1,2 @@
-import { BoxStyles } from './types';
-export interface ThemeStyles {
-    styles: BoxStyles;
-    disabled?: BoxStyles;
-}
-export interface ThemeComponentStyles {
-    styles: BoxStyles;
-    disabled?: BoxStyles;
-    themes?: {
-        [name: string]: ThemeStyles;
-    };
-}
-export interface ThemeSetup {
-    components?: {
-        [name: string]: ThemeComponentStyles;
-    };
-    button?: ThemeComponentStyles;
-    textbox?: ThemeComponentStyles;
-    textarea?: ThemeComponentStyles;
-    checkbox?: ThemeComponentStyles;
-    radioButton?: ThemeComponentStyles;
-}
-interface BoxAugmentedProps {
-    colors: Record<string, string>;
-    shadows: Record<string, string>;
-    backgrounds: Record<string, string>;
-}
-declare namespace Theme {
-    function setup(styles: ThemeSetup): void;
-    function setupAugmentedProps(props: BoxAugmentedProps, options?: {
-        namespacePath?: string;
-    }): {
-        variables: string;
-        themeCss: string;
-        boxDts: string;
-    };
-}
+import Theme from './core/theme';
 export default Theme;
-type ReservedComponentName = Exclude<string, keyof Omit<ThemeSetup, 'components'>>;
-export interface ThemeComponentProps {
-    clean?: boolean;
-    disabled?: boolean;
-    component?: ReservedComponentName;
-    theme?: string;
-}
-export declare function useTheme(props: ThemeComponentProps): BoxStyles | undefined;

package/theme.js

@@ -1,287 +1,5 @@
-import { useMemo as g } from "react";
-const b = {
-  button: {
-    styles: {
-      display: "inline-block",
-      p: 3,
-      cursor: "pointer",
-      b: 1,
-      borderRadius: 1
-    },
-    disabled: {
-      cursor: "default"
-    }
-  },
-  checkbox: {
-    styles: {
-      display: "inline-block",
-      b: 1,
-      p: 2
-    }
-  },
-  radioButton: {
-    styles: {
-      display: "inline-block",
-      b: 1,
-      p: 2
-    }
-  },
-  textbox: {
-    styles: {
-      display: "inline-block",
-      b: 1,
-      borderRadius: 1,
-      p: 3
-    }
-  },
-  textarea: {
-    styles: {
-      display: "inline-block",
-      b: 1,
-      borderRadius: 1
-    }
-  }
-};
-let _ = b;
-var u;
-((h) => {
-  function d(r) {
-    _ = r, i();
-  }
-  h.setup = d;
-  function $(r, e) {
-    const t = Object.entries(r.colors).map(([o, c]) => `--color${o}: ${c};`).join(`
-  `), l = Object.entries(r.shadows).map(([o, c]) => `--shadow${o}: ${c};`).join(`
-  `), n = Object.entries(r.backgrounds).map(([o, c]) => `--background${o}: ${c};`).join(`
-  `), s = [":root {"];
-    t && s.push(`  ${t}`), l && s.push(`  ${l}`), n && s.push(`  ${n}`), s.push("}");
-    const a = Object.keys(r.colors).map((o) => `
-  .color_${o},
-  .color_h_${o}:hover,
-  ._h:hover>.color_h_${o} {
-    color: var(--color${o});
-  }
-  
-  .color_f_${o}:focus-within,
-  ._f:focus-within>.color_f_${o} {
-    color: var(--color${o});
-  }
-  
-  .color_a_${o}:active {
-    color: var(--color${o});
-  }
-  
-  .bgColor_${o},
-  .bgColor_h_${o}:hover,
-  ._h:hover>.bgColor_h_${o} {
-    background-color: var(--color${o});
-  }
-  
-  .bgColor_f_${o}:focus-within,
-  ._f:focus-within>.bgColor_f_${o} {
-    background-color: var(--color${o});
-  }
-  
-  .bgColor_a_${o}:active {
-    background-color: var(--color${o});
-  }
-  
-  .borderColor_${o},
-  .borderColor_h_${o}:hover,
-  ._h:hover>.borderColor_h_${o} {
-    border-color: var(--color${o});
-  }
-  
-  .borderColor_f_${o}:focus-within,
-  ._f:focus-within>.borderColor_f_${o} {
-    border-color: var(--color${o});
-  }
-  
-  .borderColor_a_${o}:active {
-    border-color: var(--color${o});
-  }
-  
-  .outlineColor_${o},
-  .outlineColor_h_${o}:hover,
-  ._h:hover>.outlineColor_h_${o} {
-    outline-color: var(--color${o});
-  }
-  
-  .outlineColor_f_${o}:focus-within,
-  ._f:focus-within>.outlineColor_f_${o} {
-    outline-color: var(--color${o});
-  }
-  
-  .outlineColor_a_${o}:active {
-    outline-color: var(--color${o});
-  }
-  
-  .fill_${o},
-  .fill_h_${o}:hover,
-  ._h:hover>.fill_h_${o} {
-    path,
-    circle,
-    rect,
-    line {
-      fill: var(--color${o});
-    }
-  }
-  
-  .fill_f_${o}:focus-within,
-  ._f:focus-within>.fill_f_${o} {
-    path,
-    circle,
-    rect,
-    line {
-      fill: var(--color${o});
-    }
-  }
-  
-  .fill_a_${o}:active {
-    path,
-    circle,
-    rect,
-    line {
-      fill: var(--color${o});
-    }
-  }
-  
-  .stroke_${o},
-  .stroke_h_${o}:hover,
-  ._h:hover>.stroke_h_${o} {
-    path,
-    circle,
-    rect,
-    line {
-      stroke: var(--color${o});
-    }
-  }
-  
-  .stroke_f_${o}:focus-within,
-  ._f:focus-within>.stroke_f_${o} {
-    path,
-    circle,
-    rect,
-    line {
-      stroke: var(--color${o});
-    }
-  }
-  
-  .stroke_a_${o}:active {
-    path,
-    circle,
-    rect,
-    line {
-      stroke: var(--color${o});
-    }
-  }`), y = Object.keys(r.shadows).map((o) => `
-  .shadow_${o},
-  .shadow_h_${o}:hover,
-  ._h:hover>.shadow_h_${o} {
-    box-shadow: var(--shadow${o});
-  }
-  
-  .shadow_f_${o}:focus-within,
-  ._f:focus-within>.shadow_f_${o} {
-    box-shadow: var(--shadow${o});
-  }
-  
-  .shadow_a_${o}:active {
-    box-shadow: var(--shadow${o});
-  }`), f = Object.keys(r.backgrounds).map((o) => `
-  .bg_${o},
-  .bg_h_${o}:hover,
-  ._h:hover>.bg_h_${o} {
-    background: var(--background${o});
-  }
-  
-  .bg_f_${o}:focus-within,
-  ._f:focus-within>.bg_f_${o} {
-    background: var(--background${o});
-  }
-  
-  .bg_a_${o}:active {
-    background: var(--background${o});
-  }`), p = [...a, ...y, ...f].join(`
-`) + `
-`, C = Object.keys(r.colors).map((o) => `'${o}'`).join(" | "), v = Object.keys(r.backgrounds).map((o) => `'${o}'`).join(" | "), k = Object.keys(r.shadows).map((o) => `'${o}'`).join(" | "), T = `import '@cronocode/react-box';
-  
-  declare module '${(e == null ? void 0 : e.namespacePath) ?? "@cronocode/react-box/types"}' {
-    type ColorType = ${C};
-    type BackgroundType = ${v};
-    type ShadowType = ${k};
-  
-    namespace Augmented {
-      interface BoxProps {
-        color?: ColorType;
-        colorH?: ColorType;
-        colorF?: ColorType;
-        colorA?: ColorType;
-        bgColor?: ColorType;
-        bgColorH?: ColorType;
-        bgColorF?: ColorType;
-        bgColorA?: ColorType;
-        borderColor?: ColorType;
-        borderColorH?: ColorType;
-        borderColorF?: ColorType;
-        borderColorA?: ColorType;
-        outlineColor?: ColorType;
-        outlineColorH?: ColorType;
-        outlineColorF?: ColorType;
-        outlineColorA?: ColorType;
-        background?: BackgroundType;
-        backgroundH?: BackgroundType;
-        backgroundF?: BackgroundType;
-        backgroundA?: BackgroundType;
-        shadow?: ShadowType;
-        shadowH?: ShadowType;
-        shadowF?: ShadowType;
-        shadowA?: ShadowType;
-      }
-  
-      interface SvgProps {
-        fill?: ColorType;
-        fillH?: ColorType;
-        fillF?: ColorType;
-        fillA?: ColorType;
-        stroke?: ColorType;
-        strokeH?: ColorType;
-        strokeF?: ColorType;
-        strokeA?: ColorType;
-      }
-    }
-  }
-  `;
-    return {
-      variables: s.join(`
-`),
-      themeCss: p,
-      boxDts: T
-    };
-  }
-  h.setupAugmentedProps = $;
-  function i() {
-    Object.keys(b).forEach((e) => {
-      const t = _[e], l = b[e];
-      t ? (t.styles = { ...l.styles, ...t.styles }, t.disabled && l.disabled && (t.disabled = { ...l.disabled, ...t.disabled })) : _[e] = b[e];
-    });
-  }
-})(u || (u = {}));
-const j = u;
-function x(h) {
-  const { clean: d, disabled: $, theme: i, component: r } = h;
-  return g(() => {
-    var l, n, s;
-    if (d)
-      return;
-    let e = _[r] ?? ((l = _.components) == null ? void 0 : l[r]);
-    if (!e)
-      return;
-    let t = i ? { ...e.styles, ...(n = e.themes) == null ? void 0 : n[i].styles } : e.styles;
-    return $ ? i ? { ...t, ...e.disabled, ...(s = e.themes) == null ? void 0 : s[i].disabled } : { ...t, ...e.disabled } : t;
-  }, [r, d, $, i]);
-}
+import { T as m } from "./core.js";
+import "react";
 export {
-  j as T,
-  x as u
+  m as default
 };

package/utils.js

@@ -1,107 +1,70 @@
-import { useMemo as x } from "react";
-var p;
-((c) => {
-  function i(...u) {
-    return u.reduce((n, o) => o ? typeof o == "string" ? (n.push(o), n) : Array.isArray(o) ? (n.push(...i(...o)), n) : (Object.entries(o).forEach(([r, e]) => {
-      e && n.push(r);
-    }), n) : n, []);
-  }
-  c.classNames = i;
-})(p || (p = {}));
-const y = p;
-class I {
-  constructor() {
-    this._index = 0, this._cache = {};
-  }
-  getIdentity(i) {
-    return this._cache[i] || (this._cache[i] = this.getByIndex(this._index++)), this._cache[i];
-  }
-  getByIndex(i) {
-    const { first: u, next: n } = m, o = i - u.length;
-    if (o < 0)
-      return u[i];
-    const r = Math.floor(o / n.length), e = o - r * n.length;
-    return this.getByIndex(r) + n[e];
-  }
-}
-const m = {
-  first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
-  next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
-};
 var l;
-((c) => {
-  function i(n, ...o) {
-    const r = { ...n }, e = {};
-    return o.forEach((t) => {
-      t in r && (e[t] = r[t], delete r[t]);
-    }), [e, r];
+((f) => {
+  function a(c, ...s) {
+    const e = { ...c }, t = {};
+    return s.forEach((r) => {
+      r in e && (t[r] = e[r], delete e[r]);
+    }), [t, e];
   }
-  c.moveToTagProps = i;
-  function u(n, o, r) {
-    const e = { ...n }, t = e.props || {};
-    return o.forEach((s) => {
-      if (s in e) {
-        if (t[s] = e[s], s === "disabled")
+  f.moveToTagProps = a;
+  function p(c, s, e) {
+    const t = { ...c }, r = t.props || {};
+    return s.forEach((o) => {
+      if (o in t) {
+        if (r[o] = t[o], o === "disabled")
           return;
-        delete e[s];
+        delete t[o];
       }
-    }), r && Object.entries(r).forEach(([s, f]) => {
-      t[s] = f;
-    }), e.props = t, e;
+    }), e && Object.entries(e).forEach(([o, i]) => {
+      r[o] = i;
+    }), t.props = r, t;
   }
-  c.buildProps = u;
+  f.buildProps = p;
 })(l || (l = {}));
-const E = l;
-var g;
-((c) => {
-  function i(n) {
-    const o = Array.from(n.elements).reduce((r, e) => {
-      const t = e.name;
-      return t && (r[t] || (r[t] = []), r[t].push(e)), r;
-    }, {});
-    return Object.entries(o).reduce((r, [e, t]) => {
-      if (t.length === 1) {
-        const s = t[0];
-        u(r, e, s.type === "checkbox" || s.type === "radio" ? s.checked : s.value);
+const m = l;
+var h;
+((f) => {
+  function a(c) {
+    const s = Array.from(c.elements).reduce(
+      (e, t) => {
+        const r = t.name;
+        return r && (e[r] || (e[r] = []), e[r].push(t)), e;
+      },
+      {}
+    );
+    return Object.entries(s).reduce((e, [t, r]) => {
+      if (r.length === 1) {
+        const o = r[0];
+        p(e, t, o.type === "checkbox" || o.type === "radio" ? o.checked : o.value);
       } else {
-        const s = t.reduce((f, d) => (d.type === "checkbox" || d.type === "radio" ? d.checked && f.push(d.value) : f.push(d.value), f), []);
-        u(r, e, s);
+        const o = r.reduce((i, n) => (n.type === "checkbox" || n.type === "radio" ? n.checked && i.push(n.value) : i.push(n.value), i), []);
+        p(e, t, o);
       }
-      return r;
+      return e;
     }, {});
   }
-  c.getFormEntries = i;
-  function u(n, o, r) {
-    if (o.includes(".")) {
-      const e = o.split(".");
-      let t = n;
-      e.forEach((s, f) => {
-        if (e.length > f + 1) {
-          const d = s.match(/^(.+)\[(\d)\]$/);
-          if (d) {
-            const [, h, a] = d;
-            t[h] = t[h] || [], t[h][a] = t[h][a] || {}, t = t[h][a];
+  f.getFormEntries = a;
+  function p(c, s, e) {
+    if (s.includes(".")) {
+      const t = s.split(".");
+      let r = c;
+      t.forEach((o, i) => {
+        if (t.length > i + 1) {
+          const n = o.match(/^(.+)\[(\d)\]$/);
+          if (n) {
+            const [, u, d] = n;
+            r[u] = r[u] || [], r[u][d] = r[u][d] || {}, r = r[u][d];
           } else
-            t[s] = t[s] || {}, t = t[s];
+            r[o] = r[o] || {}, r = r[o];
         } else
-          t[s] = r;
+          r[o] = e;
       });
     } else
-      n[o] = r;
+      c[s] = e;
   }
-})(g || (g = {}));
-const P = g;
-function v() {
-  return x(() => {
-    const c = "crono-box";
-    let i = document.getElementById(c);
-    return i || (i = document.createElement("div"), i.id = c, document.body.appendChild(i)), i;
-  }, []);
-}
+})(h || (h = {}));
+const P = h;
 export {
-  y as C,
   P as F,
-  I,
-  E as O,
-  v as u
+  m as O
 };