@cronocode/react-box 1.3.9 → 1.4.0

package/components/baseSvg.d.ts

@@ -1,17 +1,14 @@
 import React from 'react';
-import { Activated, ColorType, Focused, Hovered } from '../types';
+import { SvgStyles } from '../types';
 import ClassNameUtils from '../utils/className/classNameUtils';
-interface SvgNormalStyles {
-    fill?: ColorType | string;
-    stroke?: ColorType | string;
-    rotate?: 0 | 90 | 180 | 270;
-    flip?: 'xAxis' | 'yAxis';
-}
-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'>;
-interface Props extends SvgStyles {
+export declare namespace Augmented {
+    interface Props {
+    }
+}
+interface Props extends SvgStyles, Augmented.Props {
     children?: React.ReactNode | ((props: {
         isHover: boolean;
     }) => React.ReactNode);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.3.9",
+  "version": "1.4.0",
   "main": "./box.mjs",
   "module": "./box.mjs",
   "types": "./box.d.ts",
@@ -20,6 +20,11 @@
       "import": "./components/*.mjs",
       "require": "./components/*.mjs",
       "types": "./components/*.d.ts"
+    },
+    "./plugins": {
+      "import": "./plugins.mjs",
+      "require": "./plugins.mjs",
+      "types": "./plugins.d.ts"
     }
   },
   "scripts": {
@@ -28,7 +33,7 @@
     "preview": "vite preview",
     "build": "vite build",
     "build:dev": "vite build --mode dev",
-    "postbuild": "cp package.json dist & cp LICENSE dist & cp -r plugins dist & rm ./dist/index.d.ts & rm ./dist/index.js",
+    "postbuild": "cp package.json dist & cp LICENSE dist & rm ./dist/index.d.ts & rm ./dist/index.js",
     "compile": "tsc --noEmit --skipLibCheck",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

package/plugins.d.ts

@@ -0,0 +1,11 @@
+import { PluginOption } from 'vite';
+interface BoxThemeOptions {
+    cssPath: string;
+    boxDtsPath: string;
+    baseSvgDtsPath: string;
+    colors: Record<string, string>;
+    shadows: Record<string, string>;
+    backgrounds: Record<string, string>;
+}
+export declare function boxTheme(options: BoxThemeOptions): PluginOption;
+export {};

package/plugins.mjs

@@ -0,0 +1,231 @@
+function C(r) {
+  return {
+    name: "boxTheme",
+    configResolved(u) {
+      const t = Object.entries(r.colors).map(([o, e]) => `--color${o}: ${e};`).join(`
+`), _ = Object.entries(r.shadows).map(([o, e]) => `--shadow${o}: ${e};`).join(`
+`), i = Object.entries(r.backgrounds).map(([o, e]) => `--background${o}: ${e};`).join(`
+`), $ = `:root {
+  ${t}
+  ${_}
+  ${i}
+}`, h = 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});
+  }
+}`), s = 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});
+}`), b = 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});
+}`), l = Object.keys(r.colors).map((o) => `'${o}'`).join(" | "), c = Object.keys(r.backgrounds).map((o) => `'${o}'`).join(" | "), n = Object.keys(r.shadows).map((o) => `'${o}'`).join(" | "), d = `import '@cronocode/react-box';
+
+declare module '@cronocode/react-box' {
+  type ColorType = ${l};
+  type BackgroundType = ${c};
+  type ShadowType = ${n};
+
+  namespace Augmented {
+    interface Props {
+      color?: ColorType;
+      colorH?: ColorType;
+      colorF?: ColorType;
+      colorA?: ColorType;
+      bgColor?: ColorType;
+      bgColorH?: ColorType;
+      bgColorF?: ColorType;
+      bgColorA?: ColorType;
+      backgroundColor?: ColorType;
+      backgroundColorH?: ColorType;
+      backgroundColorF?: ColorType;
+      backgroundColorA?: ColorType;
+      borderColor?: ColorType;
+      borderColorH?: ColorType;
+      borderColorF?: ColorType;
+      borderColorA?: ColorType;
+      outlineColor?: ColorType;
+      outlineColorH?: ColorType;
+      outlineColorF?: ColorType;
+      outlineColorA?: ColorType;
+      bg?: BackgroundType;
+      bgH?: BackgroundType;
+      bgF?: BackgroundType;
+      bgA?: BackgroundType;
+      background?: BackgroundType;
+      backgroundH?: BackgroundType;
+      backgroundF?: BackgroundType;
+      backgroundA?: BackgroundType;
+      shadow?: ShadowType;
+      shadowH?: ShadowType;
+      shadowF?: ShadowType;
+      shadowA?: ShadowType;
+    }
+  }
+}
+`, p = `import '@cronocode/react-box/components/baseSvg';
+
+declare module '@cronocode/react-box/components/baseSvg' {
+  type ColorType = ${l};
+  type BackgroundType = ${c};
+  type ShadowType = ${n};
+
+  namespace Augmented {
+    interface Props {
+      fill?: ColorType;
+      fillH?: ColorType;
+      fillF?: ColorType;
+      fillA?: ColorType;
+      stroke?: ColorType;
+      strokeH?: ColorType;
+      strokeF?: ColorType;
+      strokeA?: ColorType;
+    }
+  }
+}
+`;
+      (void 0)(r.cssPath, [$, ...h, ...s, ...b].join(`
+`)), (void 0)(r.boxDtsPath, d), (void 0)(r.baseSvgDtsPath, p);
+    }
+  };
+}
+export {
+  C as boxTheme
+};