@inventreedb/ui 0.2.0 → 0.2.1

package/dist/components/StylishText.d.ts

@@ -1,6 +1,7 @@
-import { MantineSize } from '@mantine/core';
+import { MantineSize, MantineTheme } from '@mantine/core';
 import { JSX } from 'react';
-export declare function StylishText({ children, size }: Readonly<{
+export declare function StylishText({ children, theme, size }: Readonly<{
     children: JSX.Element | string;
+    theme?: MantineTheme;
     size?: MantineSize;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/components/StylishText.js

@@ -4,12 +4,19 @@ import { Text } from "../node_modules/@mantine/core/esm/components/Text/Text.js"
 import { useMantineTheme } from "../node_modules/@mantine/core/esm/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.js";
 import { getThemeColor } from "../node_modules/@mantine/core/esm/core/MantineProvider/color-functions/get-theme-color/get-theme-color.js";
 import { darken } from "../node_modules/@mantine/core/esm/core/MantineProvider/color-functions/darken/darken.js";
-const useThematicGradient = () => {
-  const theme = useMantineTheme();
+const useThematicGradient = ({
+  suppliedTheme
+}) => {
+  const theme = useMemo(() => {
+    if (suppliedTheme && suppliedTheme != void 0) {
+      return suppliedTheme;
+    }
+    return useMantineTheme();
+  }, [suppliedTheme, useMantineTheme]);
   const primary = useMemo(() => {
     return getThemeColor(theme.primaryColor, theme);
   }, [theme]);
-  const secondary = useMemo(() => darken(primary, 0.9), [primary]);
+  const secondary = useMemo(() => darken(primary, 0.25), [primary]);
   return useMemo(() => {
     return {
       primary,
@@ -19,12 +26,15 @@ const useThematicGradient = () => {
 };
 function StylishText({
   children,
+  theme,
   size
 }) {
   const {
     primary,
     secondary
-  } = useThematicGradient();
+  } = useThematicGradient({
+    suppliedTheme: theme
+  });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fw: 700, size: size ?? "xl", variant: "gradient", gradient: {
     from: primary.toString(),
     to: secondary.toString()

package/dist/components/StylishText.js.map

@@ -1 +1 @@
-{"version":3,"file":"StylishText.js","sources":["../../lib/components/StylishText.tsx"],"sourcesContent":["import {\n  type MantineSize,\n  Text,\n  darken,\n  getThemeColor,\n  useMantineTheme\n} from '@mantine/core';\nimport { useMemo } from 'react';\nimport type { JSX } from 'react';\n\n// Hook that memoizes the gradient color based on the primary color of the theme\nconst useThematicGradient = () => {\n  const theme = useMantineTheme();\n\n  const primary = useMemo(() => {\n    return getThemeColor(theme.primaryColor, theme);\n  }, [theme]);\n\n  const secondary = useMemo(() => darken(primary, 0.9), [primary]);\n\n  return useMemo(() => {\n    return { primary, secondary };\n  }, [primary, secondary]);\n};\n\n// A stylish text component that uses the primary color of the theme\nexport function StylishText({\n  children,\n  size\n}: Readonly<{\n  children: JSX.Element | string;\n  size?: MantineSize;\n}>) {\n  const { primary, secondary } = useThematicGradient();\n\n  return (\n    <Text\n      fw={700}\n      size={size ?? 'xl'}\n      variant='gradient'\n      gradient={{ from: primary.toString(), to: secondary.toString() }}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["useThematicGradient","theme","useMantineTheme","primary","useMemo","getThemeColor","primaryColor","secondary","darken","StylishText","children","size","jsx","from","toString","to"],"mappings":";;;;;;AAWA,MAAMA,sBAAsBA,MAAM;AAChC,QAAMC,QAAQC,gBAAgB;AAExBC,QAAAA,UAAUC,QAAQ,MAAM;AACrBC,WAAAA,cAAcJ,MAAMK,cAAcL,KAAK;AAAA,EAAA,GAC7C,CAACA,KAAK,CAAC;AAEJM,QAAAA,YAAYH,QAAQ,MAAMI,OAAOL,SAAS,GAAG,GAAG,CAACA,OAAO,CAAC;AAE/D,SAAOC,QAAQ,MAAM;AACZ,WAAA;AAAA,MAAED;AAAAA,MAASI;AAAAA,IAAU;AAAA,EAAA,GAC3B,CAACJ,SAASI,SAAS,CAAC;AACzB;AAGO,SAASE,YAAY;AAAA,EAC1BC;AAAAA,EACAC;AAID,GAAG;AACI,QAAA;AAAA,IAAER;AAAAA,IAASI;AAAAA,MAAcP,oBAAoB;AAGjD,SAAAY,sCAAC,QACC,IAAI,KACJ,MAAMD,QAAQ,MACd,SAAQ,YACR,UAAU;AAAA,IAAEE,MAAMV,QAAQW,SAAS;AAAA,IAAGC,IAAIR,UAAUO,SAAS;AAAA,KAE5DJ,SACH,CAAA;AAEJ;"}
+{"version":3,"file":"StylishText.js","sources":["../../lib/components/StylishText.tsx"],"sourcesContent":["import {\n  type MantineSize,\n  MantineTheme,\n  Text,\n  darken,\n  getThemeColor,\n  useMantineTheme\n} from '@mantine/core';\nimport { useMemo } from 'react';\nimport type { JSX } from 'react';\n\n// Hook that memoizes the gradient color based on the primary color of the theme\nconst useThematicGradient = ({\n  suppliedTheme,\n}: {\n  suppliedTheme?: MantineTheme;\n}) => {\n\n  const theme = useMemo(() => {\n    if (suppliedTheme && suppliedTheme != undefined) {\n      return suppliedTheme;\n    }\n\n    return useMantineTheme();\n  }, [suppliedTheme, useMantineTheme]);\n\n  const primary = useMemo(() => {\n    return getThemeColor(theme.primaryColor, theme);\n  }, [theme]);\n\n  const secondary = useMemo(() => darken(primary, 0.25), [primary]);\n\n  return useMemo(() => {\n    return { primary, secondary };\n  }, [primary, secondary]);\n};\n\n// A stylish text component that uses the primary color of the theme\nexport function StylishText({\n  children,\n  theme,\n  size\n}: Readonly<{\n  children: JSX.Element | string;\n  theme?: MantineTheme;\n  size?: MantineSize;\n}>) {\n  const { primary, secondary } = useThematicGradient({ suppliedTheme: theme });\n\n  return (\n    <Text\n      fw={700}\n      size={size ?? 'xl'}\n      variant='gradient'\n      gradient={{ from: primary.toString(), to: secondary.toString() }}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["useThematicGradient","suppliedTheme","theme","useMemo","undefined","useMantineTheme","primary","getThemeColor","primaryColor","secondary","darken","StylishText","children","size","jsx","from","toString","to"],"mappings":";;;;;;AAYA,MAAMA,sBAAsBA,CAAC;AAAA,EAC3BC;AAGF,MAAM;AAEEC,QAAAA,QAAQC,QAAQ,MAAM;AACtBF,QAAAA,iBAAiBA,iBAAiBG,QAAW;AACxCH,aAAAA;AAAAA,IAAAA;AAGT,WAAOI,gBAAgB;AAAA,EAAA,GACtB,CAACJ,eAAeI,eAAe,CAAC;AAE7BC,QAAAA,UAAUH,QAAQ,MAAM;AACrBI,WAAAA,cAAcL,MAAMM,cAAcN,KAAK;AAAA,EAAA,GAC7C,CAACA,KAAK,CAAC;AAEJO,QAAAA,YAAYN,QAAQ,MAAMO,OAAOJ,SAAS,IAAI,GAAG,CAACA,OAAO,CAAC;AAEhE,SAAOH,QAAQ,MAAM;AACZ,WAAA;AAAA,MAAEG;AAAAA,MAASG;AAAAA,IAAU;AAAA,EAAA,GAC3B,CAACH,SAASG,SAAS,CAAC;AACzB;AAGO,SAASE,YAAY;AAAA,EAC1BC;AAAAA,EACAV;AAAAA,EACAW;AAKD,GAAG;AACI,QAAA;AAAA,IAAEP;AAAAA,IAASG;AAAAA,MAAcT,oBAAoB;AAAA,IAAEC,eAAeC;AAAAA,EAAAA,CAAO;AAGzE,SAAAY,sCAAC,QACC,IAAI,KACJ,MAAMD,QAAQ,MACd,SAAQ,YACR,UAAU;AAAA,IAAEE,MAAMT,QAAQU,SAAS;AAAA,IAAGC,IAAIR,UAAUO,SAAS;AAAA,KAE5DJ,SACH,CAAA;AAEJ;"}

package/dist/types/Plugins.js

@@ -1,4 +1,4 @@
-const INVENTREE_PLUGIN_VERSION = "0.1.0";
+const INVENTREE_PLUGIN_VERSION = "0.2.1";
 const INVENTREE_REACT_VERSION = "18.3.1";
 const INVENTREE_REACT_DOM_VERSION = (
   // @ts-ignore

package/lib/components/StylishText.tsx

@@ -1,5 +1,6 @@
 import {
   type MantineSize,
+  type MantineTheme,
   Text,
   darken,
   getThemeColor,
@@ -9,14 +10,24 @@ import { useMemo } from 'react';
 import type { JSX } from 'react';
 
 // Hook that memoizes the gradient color based on the primary color of the theme
-const useThematicGradient = () => {
-  const theme = useMantineTheme();
+const useThematicGradient = ({
+  suppliedTheme
+}: {
+  suppliedTheme?: MantineTheme;
+}) => {
+  const theme = useMemo(() => {
+    if (suppliedTheme && suppliedTheme != undefined) {
+      return suppliedTheme;
+    }
+
+    return useMantineTheme();
+  }, [suppliedTheme, useMantineTheme]);
 
   const primary = useMemo(() => {
     return getThemeColor(theme.primaryColor, theme);
   }, [theme]);
 
-  const secondary = useMemo(() => darken(primary, 0.9), [primary]);
+  const secondary = useMemo(() => darken(primary, 0.25), [primary]);
 
   return useMemo(() => {
     return { primary, secondary };
@@ -26,12 +37,14 @@ const useThematicGradient = () => {
 // A stylish text component that uses the primary color of the theme
 export function StylishText({
   children,
+  theme,
   size
 }: Readonly<{
   children: JSX.Element | string;
+  theme?: MantineTheme;
   size?: MantineSize;
 }>) {
-  const { primary, secondary } = useThematicGradient();
+  const { primary, secondary } = useThematicGradient({ suppliedTheme: theme });
 
   return (
     <Text

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@inventreedb/ui",
     "description": "UI components for the InvenTree project",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "private": false,
     "type": "module",
     "license": "MIT",