@abhir9/pd-design-system 0.1.15 → 0.1.16

package/dist/index.css

@@ -691,6 +691,23 @@ video {
     --z-sticky: 1020;
     --z-tooltip: 1070;
     
+    /* Reset CSS Variables - can be overridden by consumers */
+    --pd-reset-html-font-size: 10px;
+    --pd-reset-html-height: 100vh;
+    --pd-reset-html-width: 100vw;
+    --pd-reset-html-min-height: 100vh;
+    --pd-reset-html-min-width: 100vw;
+    --pd-reset-body-margin: 0;
+    --pd-reset-body-padding: 0;
+    --pd-reset-body-height: 100vh;
+    --pd-reset-body-min-height: 100vh;
+    --pd-reset-body-width: 100vw;
+    --pd-reset-body-min-width: 100vw;
+    --pd-reset-box-sizing: border-box;
+    --pd-reset-border-width: 0;
+    --pd-reset-focus-outline: 0;
+    --pd-reset-focus-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+    
     font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
     color: var(--text-body);
     background-color: var(--surface-base);
@@ -909,28 +926,34 @@ video {
     color: var(--content-primary);
   }
   html {
-    font-size: 10px;
-  }
-  html, body {
-    height: 100vh;
-    min-height: 100vh;
-    width: 100vw;
-    min-width: 100vw;
+    font-size: var(--pd-reset-html-font-size, 10px);
+    height: var(--pd-reset-html-height, 100vh);
+    min-height: var(--pd-reset-html-min-height, 100vh);
+    width: var(--pd-reset-html-width, 100vw);
+    min-width: var(--pd-reset-html-min-width, 100vw);
     margin: 0;
     padding: 0;
   }
+  html, body {
+    height: var(--pd-reset-html-height, 100vh);
+    min-height: var(--pd-reset-html-min-height, 100vh);
+    width: var(--pd-reset-html-width, 100vw);
+    min-width: var(--pd-reset-html-min-width, 100vw);
+    margin: var(--pd-reset-body-margin, 0);
+    padding: var(--pd-reset-body-padding, 0);
+  }
   body {
     font-family: var(--font-sans);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   *, ::before, ::after {
-    box-sizing: border-box;
-    border-width: 0;
+    box-sizing: var(--pd-reset-box-sizing, border-box);
+    border-width: var(--pd-reset-border-width, 0);
   }
   :focus {
-    outline: 0 !important;
-    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
+    outline: var(--pd-reset-focus-outline, 0);
+    box-shadow: var(--pd-reset-focus-box-shadow, 0 0 0 0 rgba(0, 0, 0, 0));
   }
   /* Autofill behavior */
   input:-webkit-autofill,
@@ -1505,7 +1528,8 @@ button { font-family: inherit; font-size: inherit; }
 .transition-colors { transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; }
 /* Opacity helpers */
 
-/* Non-color global defaults derived from consumer app (safe subset) */
+/* Non-color global defaults - now using CSS variables for easy override */
+
 
 /* Utilities */
 

package/dist/index.d.cts

@@ -2,7 +2,7 @@ import React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
 
-declare const THEME_MODES: readonly ["light", "dark"];
+declare const THEME_MODES: readonly ["light", "dark", "system"];
 declare const THEME_NAMES: readonly ["base", "brand"];
 declare const ADAPTER_TYPES: readonly ["shadcn", "material"];
 type ThemeMode = typeof THEME_MODES[number];
@@ -393,6 +393,11 @@ interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'c
 }
 declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Resolves 'system' mode to either 'light' or 'dark' based on OS preference
+ * Falls back to 'light' if matchMedia is not available (SSR)
+ */
+declare function resolveThemeMode(mode: ThemeMode): 'light' | 'dark';
 declare function createTheme(name: ThemeName, mode: ThemeMode): Theme;
 
 declare function setDesignSystemConfig(config: Partial<DesignSystemConfig>): void;
@@ -1477,4 +1482,4 @@ declare function validateAccessibilityProps(props: AccessibilityProps, component
     iconOnly?: boolean;
 }): void;
 
-export { ADAPTER_TYPES, type AccessibilityProps, type AdapterType, BUTTON_TYPES, type BackgroundToken, type BorderToken, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonType, COLOR_SCALES, type ColorName, type ColorPrimitives, type ColorScale, type Colors, type ContentToken, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, type DesignSystemConfig, INPUT_TYPES, INTENTS, type InputType, type Intent, type LucideIconName, ORIENTATIONS, type Orientation, type Radius, SIZES, SURFACE_LEVELS, type SemanticToken, type SemanticTokens, type Shadows, type Size, type Spacing, type SurfaceLevel, THEME_MODES, THEME_NAMES, type Theme, type ThemeMode, type ThemeName, ThemeProvider, type ThemeProviderProps, type Tokens, type Typography, VARIANTS, type Variant, type ZIndex, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
+export { ADAPTER_TYPES, type AccessibilityProps, type AdapterType, BUTTON_TYPES, type BackgroundToken, type BorderToken, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonType, COLOR_SCALES, type ColorName, type ColorPrimitives, type ColorScale, type Colors, type ContentToken, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, type DesignSystemConfig, INPUT_TYPES, INTENTS, type InputType, type Intent, type LucideIconName, ORIENTATIONS, type Orientation, type Radius, SIZES, SURFACE_LEVELS, type SemanticToken, type SemanticTokens, type Shadows, type Size, type Spacing, type SurfaceLevel, THEME_MODES, THEME_NAMES, type Theme, type ThemeMode, type ThemeName, ThemeProvider, type ThemeProviderProps, type Tokens, type Typography, VARIANTS, type Variant, type ZIndex, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, resolveThemeMode, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
 
-declare const THEME_MODES: readonly ["light", "dark"];
+declare const THEME_MODES: readonly ["light", "dark", "system"];
 declare const THEME_NAMES: readonly ["base", "brand"];
 declare const ADAPTER_TYPES: readonly ["shadcn", "material"];
 type ThemeMode = typeof THEME_MODES[number];
@@ -393,6 +393,11 @@ interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'c
 }
 declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Resolves 'system' mode to either 'light' or 'dark' based on OS preference
+ * Falls back to 'light' if matchMedia is not available (SSR)
+ */
+declare function resolveThemeMode(mode: ThemeMode): 'light' | 'dark';
 declare function createTheme(name: ThemeName, mode: ThemeMode): Theme;
 
 declare function setDesignSystemConfig(config: Partial<DesignSystemConfig>): void;
@@ -1477,4 +1482,4 @@ declare function validateAccessibilityProps(props: AccessibilityProps, component
     iconOnly?: boolean;
 }): void;
 
-export { ADAPTER_TYPES, type AccessibilityProps, type AdapterType, BUTTON_TYPES, type BackgroundToken, type BorderToken, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonType, COLOR_SCALES, type ColorName, type ColorPrimitives, type ColorScale, type Colors, type ContentToken, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, type DesignSystemConfig, INPUT_TYPES, INTENTS, type InputType, type Intent, type LucideIconName, ORIENTATIONS, type Orientation, type Radius, SIZES, SURFACE_LEVELS, type SemanticToken, type SemanticTokens, type Shadows, type Size, type Spacing, type SurfaceLevel, THEME_MODES, THEME_NAMES, type Theme, type ThemeMode, type ThemeName, ThemeProvider, type ThemeProviderProps, type Tokens, type Typography, VARIANTS, type Variant, type ZIndex, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
+export { ADAPTER_TYPES, type AccessibilityProps, type AdapterType, BUTTON_TYPES, type BackgroundToken, type BorderToken, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonType, COLOR_SCALES, type ColorName, type ColorPrimitives, type ColorScale, type Colors, type ContentToken, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, type DesignSystemConfig, INPUT_TYPES, INTENTS, type InputType, type Intent, type LucideIconName, ORIENTATIONS, type Orientation, type Radius, SIZES, SURFACE_LEVELS, type SemanticToken, type SemanticTokens, type Shadows, type Size, type Spacing, type SurfaceLevel, THEME_MODES, THEME_NAMES, type Theme, type ThemeMode, type ThemeName, ThemeProvider, type ThemeProviderProps, type Tokens, type Typography, VARIANTS, type Variant, type ZIndex, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, resolveThemeMode, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useMemo, createContext, useEffect, useContext } from 'react';
+import React, { forwardRef, useMemo, createContext, useState, useEffect, useContext } from 'react';
 import { cva } from 'class-variance-authority';
 import * as LucideIcons from 'lucide-react';
 import { Loader2 } from 'lucide-react';
@@ -7,10 +7,10 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // 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;
 
@@ -272,11 +272,6 @@ var ShadcnButton = 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"
@@ -999,9 +994,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;
@@ -1169,7 +1174,8 @@ function createTheme(name, mode) {
   };
   return {
     name,
-    mode,
+    mode: resolvedMode,
+    // Store the resolved mode (light/dark) not 'system'
     cssVariables
   };
 }
@@ -1180,12 +1186,46 @@ function ThemeProvider({
   theme: themeName = DEFAULT_THEME,
   mode = DEFAULT_MODE
 }) {
-  const theme = useMemo(() => createTheme(themeName, mode), [themeName, mode]);
+  const [resolvedMode, setResolvedMode] = useState(
+    () => resolveThemeMode(mode)
+  );
+  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]);
+  useEffect(() => {
+    if (mode !== "system") {
+      setResolvedMode(mode === "dark" ? "dark" : "light");
+    }
+  }, [mode]);
+  const theme = useMemo(() => {
+    const effectiveMode = mode === "system" ? resolvedMode : mode;
+    return createTheme(themeName, effectiveMode);
+  }, [themeName, mode, resolvedMode]);
   useEffect(() => {
     setDesignSystemConfig({ adapter, theme: themeName, mode });
   }, [adapter, themeName, mode]);
   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);
     });
@@ -1194,7 +1234,7 @@ function ThemeProvider({
         root.style.removeProperty(key);
       });
     };
-  }, [theme]);
+  }, [theme, mode, resolvedMode]);
   const contextValue = useMemo(() => ({
     config: getDesignSystemConfig(),
     setConfig: setDesignSystemConfig
@@ -1282,6 +1322,6 @@ function validateAccessibilityProps(props, componentType, options = {}) {
   warnings.forEach((warning) => console.warn(warning));
 }
 
-export { ADAPTER_TYPES, BUTTON_TYPES, Button, ButtonGroup, COLOR_SCALES, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, INPUT_TYPES, INTENTS, ORIENTATIONS, SIZES, SURFACE_LEVELS, THEME_MODES, THEME_NAMES, ThemeProvider, VARIANTS, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
+export { ADAPTER_TYPES, BUTTON_TYPES, Button, ButtonGroup, COLOR_SCALES, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, INPUT_TYPES, INTENTS, ORIENTATIONS, SIZES, SURFACE_LEVELS, THEME_MODES, THEME_NAMES, ThemeProvider, VARIANTS, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, resolveThemeMode, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map