@zaide6137/m3-components-web 0.1.1 → 0.1.2

package/dist/index.d.mts

@@ -0,0 +1,62 @@
+import * as react from 'react';
+
+interface MaterialTheme {
+    primary: string;
+    onPrimary: string;
+    primaryContainer: string;
+    onPrimaryContainer: string;
+    secondary: string;
+    onSecondary: string;
+    secondaryContainer: string;
+    onSecondaryContainer: string;
+    tertiary: string;
+    onTertiary: string;
+    tertiaryContainer: string;
+    onTertiaryContainer: string;
+    error: string;
+    onError: string;
+    errorContainer: string;
+    onErrorContainer: string;
+    background: string;
+    onBackground: string;
+    surface: string;
+    onSurface: string;
+    surfaceVariant: string;
+    onSurfaceVariant: string;
+    outline: string;
+    outlineVariant: string;
+    shadow: string;
+    scrim: string;
+    inverseSurface: string;
+    inverseOnSurface: string;
+    inversePrimary: string;
+    surfaceDim: string;
+    surfaceBright: string;
+    surfaceContainerLowest: string;
+    surfaceContainerLow: string;
+    surfaceContainer: string;
+    surfaceContainerHigh: string;
+    surfaceContainerHighest: string;
+}
+type MaterialTokenKey = keyof MaterialTheme;
+type DefaultColorScheme = 'light' | 'dark' | 'auto';
+interface ThemeContextType {
+    themeColors: MaterialTheme;
+    setThemeColors: (seed: string) => void;
+    systemTheme: DefaultColorScheme;
+}
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    seedColor?: string;
+    defaultColorScheme?: DefaultColorScheme;
+}
+
+declare const ThemeContext: react.Context<ThemeContextType | null>;
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+declare const useGlobalTheme: () => ThemeContextType;
+
+declare function createModernTheme(seedHex: string, isDark: boolean): MaterialTheme;
+declare function hexToArgba(hex: string, alpha: number): string;
+declare function isDarkBackground(hex: string): boolean;
+
+export { type DefaultColorScheme, type MaterialTheme, type MaterialTokenKey, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, createModernTheme, hexToArgba, isDarkBackground, useGlobalTheme };

package/dist/index.d.ts

@@ -0,0 +1,62 @@
+import * as react from 'react';
+
+interface MaterialTheme {
+    primary: string;
+    onPrimary: string;
+    primaryContainer: string;
+    onPrimaryContainer: string;
+    secondary: string;
+    onSecondary: string;
+    secondaryContainer: string;
+    onSecondaryContainer: string;
+    tertiary: string;
+    onTertiary: string;
+    tertiaryContainer: string;
+    onTertiaryContainer: string;
+    error: string;
+    onError: string;
+    errorContainer: string;
+    onErrorContainer: string;
+    background: string;
+    onBackground: string;
+    surface: string;
+    onSurface: string;
+    surfaceVariant: string;
+    onSurfaceVariant: string;
+    outline: string;
+    outlineVariant: string;
+    shadow: string;
+    scrim: string;
+    inverseSurface: string;
+    inverseOnSurface: string;
+    inversePrimary: string;
+    surfaceDim: string;
+    surfaceBright: string;
+    surfaceContainerLowest: string;
+    surfaceContainerLow: string;
+    surfaceContainer: string;
+    surfaceContainerHigh: string;
+    surfaceContainerHighest: string;
+}
+type MaterialTokenKey = keyof MaterialTheme;
+type DefaultColorScheme = 'light' | 'dark' | 'auto';
+interface ThemeContextType {
+    themeColors: MaterialTheme;
+    setThemeColors: (seed: string) => void;
+    systemTheme: DefaultColorScheme;
+}
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    seedColor?: string;
+    defaultColorScheme?: DefaultColorScheme;
+}
+
+declare const ThemeContext: react.Context<ThemeContextType | null>;
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+declare const useGlobalTheme: () => ThemeContextType;
+
+declare function createModernTheme(seedHex: string, isDark: boolean): MaterialTheme;
+declare function hexToArgba(hex: string, alpha: number): string;
+declare function isDarkBackground(hex: string): boolean;
+
+export { type DefaultColorScheme, type MaterialTheme, type MaterialTokenKey, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, createModernTheme, hexToArgba, isDarkBackground, useGlobalTheme };

package/dist/index.js

@@ -0,0 +1 @@
+'use strict';var react=require('react'),materialColorUtilities=require('@material/material-color-utilities'),jsxRuntime=require('react/jsx-runtime');function c(o,r){let t=materialColorUtilities.Hct.fromInt(materialColorUtilities.argbFromHex(o)),a=new materialColorUtilities.SchemeVibrant(t,r,0),n={},e=["primary","onPrimary","primaryContainer","onPrimaryContainer","secondary","onSecondary","secondaryContainer","onSecondaryContainer","tertiary","onTertiary","tertiaryContainer","onTertiaryContainer","error","onError","errorContainer","onErrorContainer","background","onBackground","surface","onSurface","surfaceVariant","onSurfaceVariant","outline","outlineVariant","shadow","scrim","inverseSurface","inverseOnSurface","inversePrimary","surfaceDim","surfaceBright","surfaceContainerLowest","surfaceContainerLow","surfaceContainer","surfaceContainerHigh","surfaceContainerHighest"];for(let u of e){let m=MaterialDynamicColors[u];m&&(n[u]=materialColorUtilities.hexFromArgb(m.getArgb(a)));}return n}function v(o,r){let t=o.replace("#",""),a=parseInt(t.substring(0,2),16),n=parseInt(t.substring(2,4),16),e=parseInt(t.substring(4,6),16);return `rgba(${a}, ${n}, ${e}, ${r})`}function P(o){let r=o.replace("#",""),t=parseInt(r.substring(0,2),16),a=parseInt(r.substring(2,4),16),n=parseInt(r.substring(4,6),16);return .2126*t+.7152*a+.0722*n<128}var l=react.createContext(null),w=c("#6750A4",false),H=({children:o,seedColor:r="#6750A4",defaultColorScheme:t="auto"})=>{let[a,n]=react.useState(()=>{let s=t==="dark";return t==="auto"&&typeof window<"u"&&(s=window.matchMedia("(prefers-color-scheme: dark)").matches),c(r,s)}),[e,u]=react.useState(t);react.useEffect(()=>{if(e==="auto"&&typeof window<"u"){let s=window.matchMedia("(prefers-color-scheme: dark)"),i=f=>{n(c(r,f.matches));};return s.addEventListener("change",i),()=>s.removeEventListener("change",i)}},[e,r]);let m=react.useMemo(()=>({themeColors:a,systemTheme:e,setThemeColors:s=>{let i=e==="dark";e==="auto"?i=typeof window<"u"?window.matchMedia("(prefers-color-scheme: dark)").matches:false:e==="light"&&(i=false),n(c(s,i));}}),[a,e]);return jsxRuntime.jsx(l.Provider,{value:m,children:o})},I=()=>{let o=react.useContext(l);return o||{themeColors:w,systemTheme:"auto",setThemeColors:()=>{throw new Error("[@zaide6137/m3-components-web] Cannot call `setThemeColors` outside of a <ThemeProvider>. Wrap your app in the provider to enable dynamic theme switching.")}}};exports.ThemeContext=l;exports.ThemeProvider=H;exports.createModernTheme=c;exports.hexToArgba=v;exports.isDarkBackground=P;exports.useGlobalTheme=I;

package/dist/index.mjs

@@ -0,0 +1 @@
+import {createContext,useState,useEffect,useMemo,useContext}from'react';import {Hct,argbFromHex,SchemeVibrant,hexFromArgb}from'@material/material-color-utilities';import {jsx}from'react/jsx-runtime';function c(o,r){let t=Hct.fromInt(argbFromHex(o)),a=new SchemeVibrant(t,r,0),n={},e=["primary","onPrimary","primaryContainer","onPrimaryContainer","secondary","onSecondary","secondaryContainer","onSecondaryContainer","tertiary","onTertiary","tertiaryContainer","onTertiaryContainer","error","onError","errorContainer","onErrorContainer","background","onBackground","surface","onSurface","surfaceVariant","onSurfaceVariant","outline","outlineVariant","shadow","scrim","inverseSurface","inverseOnSurface","inversePrimary","surfaceDim","surfaceBright","surfaceContainerLowest","surfaceContainerLow","surfaceContainer","surfaceContainerHigh","surfaceContainerHighest"];for(let u of e){let m=MaterialDynamicColors[u];m&&(n[u]=hexFromArgb(m.getArgb(a)));}return n}function v(o,r){let t=o.replace("#",""),a=parseInt(t.substring(0,2),16),n=parseInt(t.substring(2,4),16),e=parseInt(t.substring(4,6),16);return `rgba(${a}, ${n}, ${e}, ${r})`}function P(o){let r=o.replace("#",""),t=parseInt(r.substring(0,2),16),a=parseInt(r.substring(2,4),16),n=parseInt(r.substring(4,6),16);return .2126*t+.7152*a+.0722*n<128}var l=createContext(null),w=c("#6750A4",false),H=({children:o,seedColor:r="#6750A4",defaultColorScheme:t="auto"})=>{let[a,n]=useState(()=>{let s=t==="dark";return t==="auto"&&typeof window<"u"&&(s=window.matchMedia("(prefers-color-scheme: dark)").matches),c(r,s)}),[e,u]=useState(t);useEffect(()=>{if(e==="auto"&&typeof window<"u"){let s=window.matchMedia("(prefers-color-scheme: dark)"),i=f=>{n(c(r,f.matches));};return s.addEventListener("change",i),()=>s.removeEventListener("change",i)}},[e,r]);let m=useMemo(()=>({themeColors:a,systemTheme:e,setThemeColors:s=>{let i=e==="dark";e==="auto"?i=typeof window<"u"?window.matchMedia("(prefers-color-scheme: dark)").matches:false:e==="light"&&(i=false),n(c(s,i));}}),[a,e]);return jsx(l.Provider,{value:m,children:o})},I=()=>{let o=useContext(l);return o||{themeColors:w,systemTheme:"auto",setThemeColors:()=>{throw new Error("[@zaide6137/m3-components-web] Cannot call `setThemeColors` outside of a <ThemeProvider>. Wrap your app in the provider to enable dynamic theme switching.")}}};export{l as ThemeContext,H as ThemeProvider,c as createModernTheme,v as hexToArgba,P as isDarkBackground,I as useGlobalTheme};

package/package.json

@@ -5,7 +5,7 @@
     "email": "lbd6137@gmail.com",
     "url": "https://jiandale.zaidellc.com"
   },
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Material 3 React Web Components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -18,11 +18,27 @@
   "publishConfig": {
     "access": "public"
   },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "dependencies": {
-    "m3-components-web": "^0.1.0"
+    "@material/material-color-utilities": "^0.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
   }
 }