@m4l/graphics 0.1.2 → 0.1.3

package/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/index.js

@@ -6,6 +6,9 @@ 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 { 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";
@@ -19,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,6 +1,6 @@
 {
   "name": "@m4l/graphics",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "UNLICENSED",
   "author": "M4L Team",
   "dependencies": {

package/theme/palette.d.ts

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

package/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/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/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/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 };