@m4l/graphics 0.0.39 → 0.1.3

package/{dist/hooks → hooks}/index.d.ts

@@ -3,4 +3,3 @@ export { useIsMountedRef } from './useIsMountedRef';
 export { useLocales } from './useLocales';
 export { useOffSetTop } from './useOffSetTop';
 export { useHostTheme } from './useHostTheme';
-export { useFormContext, Controller, useWatch } from 'react-hook-form';

package/{dist/hooks → hooks}/index.js

@@ -3,7 +3,6 @@ import "@mui/material/styles";
 import "@mui/material/useMediaQuery";
 import "../contexts/LocalesContext/index.js";
 import "../contexts/HostThemeContext/index.js";
-import "react-hook-form";
 function useIsMountedRef() {
   const isMounted = useRef(true);
   useEffect(

package/{dist/index.d.ts → index.d.ts}

@@ -6,5 +6,9 @@ export type { GradientsPaletteOptions } from './theme/palette';
 export type { ChartPaletteOptions } from './theme/palette';
 export type { GridPaletteOptions } from './theme/palette';
 export { defaultThemeOptions } from './theme/defaultThemeOptions';
+export { shadows, customShadows } from './theme/shadows';
+export { palette, type ColorSchema } from './theme/palette';
+export { getColorPresets, colorPresets, defaultPreset } from './utils/getColorPresets';
+export { getFontValue as GetFontValue } from './utils/getFontValue';
 export { default as fnComponentsOverrides } from './theme/overrides';
 export type { HostThemeType } from './types';

package/{dist/index.js → index.js}

@@ -5,8 +5,10 @@ export { u as useResponsive, a as useResponsiveDesktop } from "./hooks/useRespon
 export { u as useIsMountedRef, a as useOffSetTop } from "./hooks/index.js";
 export { u as useLocales } from "./hooks/useLocales/index.js";
 export { u as useHostTheme } from "./hooks/useHostTheme/index.js";
-export { Controller, useFormContext, useWatch } from "react-hook-form";
 export { d as defaultThemeOptions } from "./theme/defaultThemeOptions.js";
+export { c as customShadows, s as shadows } from "./theme/shadows.js";
+export { p as palette } from "./theme/palette.js";
+export { a as GetFontValue, c as colorPresets, d as defaultPreset, g as getColorPresets } from "./utils/index.js";
 export { f as fnComponentsOverrides } from "./theme/overrides.js";
 import "@mui/material/styles";
 import "@mui/material";
@@ -20,6 +22,3 @@ import "date-fns/locale/en-US";
 import "@m4l/core";
 import "@mui/material/useMediaQuery";
 import "./theme/typography.js";
-import "./utils/index.js";
-import "./theme/palette.js";
-import "./theme/shadows.js";

package/package.json

@@ -1,86 +1,34 @@
 {
   "name": "@m4l/graphics",
-  "private": false,
-  "version": "0.0.39",
+  "version": "0.1.3",
   "license": "UNLICENSED",
   "author": "M4L Team",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "lint": "npx eslint src",
-    "lint:fix": "npm run lint -- --fix",
-    "prettier": "npx prettier src --check",
-    "prettier:fix": "npm run prettier -- --write",
-    "format": "npm run prettier:fix && npm run lint:fix"
-  },
   "dependencies": {
-    "@m4l/core": "^0.0.42",
-    "@mui/material": "^5.8.6",
+    "@m4l/core": "*",
     "@mui/x-date-pickers": "^5.0.0-beta.3",
-    "date-fns": "^2.29.1",
-    "framer-motion": "^6.3.11",
-    "react": ">=18",
-    "react-dom": "^18.0.0",
-    "react-dropzone": "^14.2.1",
-    "react-hook-form": "^7.31.3",
-    "react-intersection-observer": "^9.2.2",
-    "react-router-dom": "^6.3.0",
-    "vite-tsconfig-paths": "^3.5.0"
+    "date-fns": "^2.29.2"
   },
   "peerDependencies": {
-    "date-fns": "^2.29.1",
-    "react": ">=18",
-    "react-dom": "^18.0.0"
-  },
-  "devDependencies": {
-    "@emotion/styled": "^11.9.3",
-    "@hookform/resolvers": "^2.9.3",
-    "@mui/icons-material": "^5.8.4",
-    "@types/mkcert": "^1.2.0",
-    "@types/node": "^17.0.40",
-    "@types/nprogress": "^0.2.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "@typescript-eslint/parser": "^5.27.1",
-    "@vitejs/plugin-react": "^1.3.0",
-    "eslint": "^8.17.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
-    "prettier": "^2.6.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-toastify": "^9.0.5",
-    "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.9",
-    "vite-plugin-dts": "^1.2.0",
-    "vite-plugin-mkcert": "^1.6.4"
+    "@mui/material": "^5.10.4",
+    "@mui/system": "^5.10.4",
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "files": [
-    "dist"
+    "*"
   ],
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "source": "src/index.ts",
+  "main": "./index.js",
+  "module": "./index.js",
   "type": "module",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js"
-    }
-  },
+  "types": "./index.d.ts",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
   "engines": {
     "node": ">=12.0.0"
-  }
-}
+  },
+  "private": false
+}

package/{dist/theme → theme}/palette.d.ts

@@ -320,3 +320,4 @@ export declare const palette: {
         readonly divider: string;
     };
 };
+export default palette;

package/{dist/theme → theme}/shadows.d.ts

@@ -60,7 +60,7 @@ export declare const customShadows: {
         dropdown: string;
     };
 };
-declare const shadows: {
+export declare const shadows: {
     light: Shadows;
     dark: Shadows;
 };

package/{dist/utils → utils}/getColorPresets.d.ts

@@ -146,7 +146,7 @@ export declare const redPreset: {
     darker: string;
     contrastText: string;
 };
-export default function getColorPresets(presetsKey: ThemeColorPresets): {
+export declare function getColorPresets(presetsKey: ThemeColorPresets): {
     LightSelected: string;
     LightSelectedHover: string;
     DarkSelected: string;
@@ -167,3 +167,4 @@ export default function getColorPresets(presetsKey: ThemeColorPresets): {
     darker: string;
     contrastText: string;
 };
+export default getColorPresets;

package/{dist/utils → utils}/getFontValue.d.ts

@@ -16,7 +16,7 @@ export declare function responsiveFontSizes({ sm, md, lg }: {
         fontSize: string;
     };
 };
-export declare function GetFontValue(variant: Variant): {
+export declare function getFontValue(variant: Variant): {
     fontSize: number;
     lineHeight: number;
     fontWeight: import("csstype").Property.FontWeight | undefined;

package/{dist/utils → utils}/index.js

@@ -1,6 +1,9 @@
-import "@mui/material/styles";
-import "@mui/material/useMediaQuery";
+import { useTheme } from "@mui/material/styles";
+import { u as useResponsive } from "../hooks/useResponsive/index.js";
 import { p as palette } from "../theme/palette.js";
+function remToPx(value) {
+  return Math.round(parseFloat(value) * 16);
+}
 function pxToRem(value) {
   return `${value / 16}rem`;
 }
@@ -17,6 +20,25 @@ function responsiveFontSizes({ sm, md, lg }) {
     }
   };
 }
+function useWidth() {
+  const theme = useTheme();
+  const keys = [...theme.breakpoints.keys].reverse();
+  return keys.reduce((output, key) => {
+    const matches = useResponsive("up", key);
+    return !output && matches ? key : output;
+  }, null) || "xs";
+}
+function getFontValue(variant) {
+  const theme = useTheme();
+  const breakpoints = useWidth();
+  const key = theme.breakpoints.up(breakpoints === "xl" ? "lg" : breakpoints);
+  const hasResponsive = variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "h5" || variant === "h6";
+  const getFont = hasResponsive && theme.typography[variant][key] ? theme.typography[variant][key] : theme.typography[variant];
+  const fontSize = remToPx(getFont.fontSize);
+  const lineHeight = Number(theme.typography[variant].lineHeight) * fontSize;
+  const { fontWeight, letterSpacing } = theme.typography[variant];
+  return { fontSize, lineHeight, fontWeight, letterSpacing };
+}
 const colorPresets = [
   {
     name: "default",
@@ -88,4 +110,4 @@ function getColorPresets(presetsKey) {
     default: defaultPreset
   }[presetsKey];
 }
-export { getColorPresets as g, pxToRem as p, responsiveFontSizes as r };
+export { getFontValue as a, colorPresets as c, defaultPreset as d, getColorPresets as g, pxToRem as p, responsiveFontSizes as r };