@abhir9/pd-design-system 0.1.14 → 0.1.16

package/dist/index.cjs

@@ -31,10 +31,10 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
 
 // src/theme/types.ts
-var THEME_MODES = ["light", "dark"];
+var THEME_MODES = ["light", "dark", "system"];
 var THEME_NAMES = ["base", "brand"];
 var ADAPTER_TYPES = ["shadcn", "material"];
-var DEFAULT_MODE = "light";
+var DEFAULT_MODE = "system";
 var [DEFAULT_THEME] = THEME_NAMES;
 var [DEFAULT_ADAPTER] = ADAPTER_TYPES;
 
@@ -296,11 +296,6 @@ var ShadcnButton = React.forwardRef(
     children,
     ...props
   }, ref) => {
-    if (process.env.NODE_ENV !== "production" && !children && (startIcon || endIcon) && !props["aria-label"]) {
-      console.warn(
-        "[pd-design] Icon-only buttons should have an aria-label for accessibility. Add aria-label prop to describe the button action."
-      );
-    }
     const buttonClasses = cn(
       buttonVariants({ variant, intent, size }),
       fullWidth && "w-full"
@@ -1023,9 +1018,19 @@ function createSemanticTokens(mode) {
 }
 
 // src/theme/theme.ts
+function resolveThemeMode(mode) {
+  if (mode !== "system") {
+    return mode;
+  }
+  if (typeof window !== "undefined" && window.matchMedia) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return "light";
+}
 function createTheme(name, mode) {
-  const semantic = createSemanticTokens(mode);
-  const isLight = mode === "light";
+  const resolvedMode = resolveThemeMode(mode);
+  const semantic = createSemanticTokens(resolvedMode);
+  const isLight = resolvedMode === "light";
   const border = isLight ? borderTokens.light : borderTokens.dark;
   const content = isLight ? contentTokens.light : contentTokens.dark;
   const background = isLight ? backgroundTokens.light : backgroundTokens.dark;
@@ -1193,7 +1198,8 @@ function createTheme(name, mode) {
   };
   return {
     name,
-    mode,
+    mode: resolvedMode,
+    // Store the resolved mode (light/dark) not 'system'
     cssVariables
   };
 }
@@ -1204,12 +1210,46 @@ function ThemeProvider({
   theme: themeName = DEFAULT_THEME,
   mode = DEFAULT_MODE
 }) {
-  const theme = React.useMemo(() => createTheme(themeName, mode), [themeName, mode]);
+  const [resolvedMode, setResolvedMode] = React.useState(
+    () => resolveThemeMode(mode)
+  );
+  React.useEffect(() => {
+    if (mode !== "system" || typeof window === "undefined" || !window.matchMedia) {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      setResolvedMode(e.matches ? "dark" : "light");
+    };
+    handleChange(mediaQuery);
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    } else {
+      mediaQuery.addListener(handleChange);
+      return () => mediaQuery.removeListener(handleChange);
+    }
+  }, [mode]);
+  React.useEffect(() => {
+    if (mode !== "system") {
+      setResolvedMode(mode === "dark" ? "dark" : "light");
+    }
+  }, [mode]);
+  const theme = React.useMemo(() => {
+    const effectiveMode = mode === "system" ? resolvedMode : mode;
+    return createTheme(themeName, effectiveMode);
+  }, [themeName, mode, resolvedMode]);
   React.useEffect(() => {
     setDesignSystemConfig({ adapter, theme: themeName, mode });
   }, [adapter, themeName, mode]);
   React.useEffect(() => {
     const root = document.documentElement;
+    const effectiveMode = mode === "system" ? resolvedMode : mode;
+    if (effectiveMode === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
     Object.entries(theme.cssVariables).forEach(([key, value]) => {
       root.style.setProperty(key, value);
     });
@@ -1218,7 +1258,7 @@ function ThemeProvider({
         root.style.removeProperty(key);
       });
     };
-  }, [theme]);
+  }, [theme, mode, resolvedMode]);
   const contextValue = React.useMemo(() => ({
     config: getDesignSystemConfig(),
     setConfig: setDesignSystemConfig
@@ -1344,6 +1384,7 @@ exports.orange = orange;
 exports.radius = radius;
 exports.red = red;
 exports.renderIcon = renderIcon;
+exports.resolveThemeMode = resolveThemeMode;
 exports.semanticTokens = semanticTokens;
 exports.setDesignSystemConfig = setDesignSystemConfig;
 exports.shadows = shadows;