@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.10 → 0.2.16

package/dist/themes/types.js

@@ -1,460 +1,3 @@
 // Multi-Theme System Type Definitions
 // This file defines the core interfaces for theme configuration
-
-export interface MultiThemeConfig {
-  fonts: FontThemeConfig;
-  colors: ColorThemeConfig;
-  navigation: NavigationThemeConfig;
-  spacing: SpacingThemeConfig;
-  shadows: ShadowThemeConfig;
-  transitions: TransitionThemeConfig;
-  borderRadius: BorderRadiusThemeConfig;
-  borderWidth: BorderWidthThemeConfig;
-  animation: AnimationThemeConfig;
-  accessibility: AccessibilityThemeConfig;
-  print: PrintThemeConfig;
-  containerQuery: ContainerQueryThemeConfig;
-  container: ContainerThemeConfig;
-  shimmer: ShimmerThemeConfig;
-  meta: ThemeMetadata;
-  extends?: string; // Optional property for theme inheritance
-  
-  // NEW: Add light/dark mode configuration (colors only)
-  modes?: {
-    light?: {
-      colors?: Partial<ColorThemeConfig>;
-    };
-    dark?: {
-      colors?: Partial<ColorThemeConfig>;
-    };
-  };
-}
-
-export interface FontThemeConfig {
-  primary: FontConfig;
-  secondary: FontConfig;
-  display: FontConfig;
-  body: FontConfig;
-  mono: FontConfig;
-}
-
-export interface FontConfig {
-  family: string;
-  weights: number[];
-  sizes: FontSizeScale;
-  lineHeights: LineHeightScale;
-  letterSpacing: LetterSpacingScale;
-  fallbacks?: string[]; // Font fallback stack
-  display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional'; // Font loading strategy
-  source?: FontSource; // Font source configuration
-  features?: FontFeatures; // Advanced font features
-}
-
-export interface FontSource {
-  type: 'google' | 'custom' | 'system';
-  url?: string; // For custom fonts
-  files?: FontFiles; // For custom font files
-}
-
-export interface FontFiles {
-  woff2?: string;
-  woff?: string;
-  ttf?: string;
-  eot?: string;
-  svg?: string;
-}
-
-export interface FontFeatures {
-  ligatures?: boolean;
-  kerning?: boolean;
-  variant?: 'normal' | 'small-caps' | 'all-small-caps';
-  stretch?: 'normal' | 'condensed' | 'expanded';
-  styleSet?: number;
-}
-
-export interface FontSizeScale {
-  xs: string;
-  sm: string;
-  md: string;
-  lg: string;
-  xl: string;
-  '2xl': string;
-  '3xl': string;
-  '4xl': string;
-  '5xl': string;
-  '6xl': string;
-}
-
-export interface LineHeightScale {
-  tight: string;
-  normal: string;
-  relaxed: string;
-  loose: string;
-}
-
-export interface LetterSpacingScale {
-  tight: string;
-  normal: string;
-  wide: string;
-  wider: string;
-  widest: string;
-}
-
-export interface ColorThemeConfig {
-  primary: ColorScale;
-  secondary: ColorScale;
-  semantic: SemanticColors;
-  neutral: ColorScale;
-  surface: SurfaceColors;
-  text: TextColors;
-  interactive: InteractiveColors;
-  // Additional color properties referenced in CSS
-  accent?: string;
-  'bg-primary'?: string;
-  'bg-secondary'?: string;
-  'surface-bg'?: string;
-  'primary-hover'?: string;
-  'primary-active'?: string;
-  'accent-rgb'?: string;
-  border?: string;
-  'border-transparent'?: string;
-  'text-primary'?: string;
-  'text-secondary'?: string;
-}
-
-export interface ColorScale {
-  50: string;
-  100: string;
-  200: string;
-  300: string;
-  400: string;
-  500: string;
-  600: string;
-  700: string;
-  800: string;
-  900: string;
-  // Additional color variations
-  light?: string;    // Lighter than 50
-  dark?: string;     // Darker than 900
-  contrast?: string; // High contrast version
-  // RGB versions for rgba() usage
-  '500-rgb'?: string;
-  '600-rgb'?: string;
-  '700-rgb'?: string;
-}
-
-export interface ColorAccessibility {
-  aa: boolean;       // WCAG AA compliance
-  aaa: boolean;      // WCAG AAA compliance
-  contrastRatio: number; // Actual contrast ratio
-  recommended: string[]; // Recommended improvements
-}
-
-export interface SemanticColors {
-  success: string;
-  warning: string;
-  error: string;
-  info: string;
-  // Enhanced semantic colors with accessibility
-  successLight?: string;
-  successDark?: string;
-  warningLight?: string;
-  warningDark?: string;
-  errorLight?: string;
-  errorDark?: string;
-  infoLight?: string;
-  infoDark?: string;
-  // RGB versions for rgba() usage
-  successRgb?: string;
-  warningRgb?: string;
-  errorRgb?: string;
-  errorDarkRgb?: string;
-  infoRgb?: string;
-  // Additional RGB versions referenced in CSS
-  'success-rgb'?: string;
-  'warning-rgb'?: string;
-  'error-rgb'?: string;
-  'error-dark-rgb'?: string;
-  'info-rgb'?: string;
-}
-
-export interface NeutralColors {
-  50: string;
-  100: string;
-  200: string;
-  300: string;
-  400: string;
-  500: string;
-  600: string;
-  700: string;
-  800: string;
-  900: string;
-}
-
-export interface SurfaceColors {
-  background: string;
-  surface: string;
-  border: string;
-  divider: string;
-}
-
-export interface TextColors {
-  primary: string;
-  secondary: string;
-  muted: string;
-  inverse: string;
-  onPrimary: string;
-  onSecondary: string;
-  onSurface: string;
-}
-
-export interface InteractiveColors {
-  hover: string;
-  active: string;
-  focus: string;
-  disabled: string;
-  // Enhanced interactive states
-  hoverLight?: string;
-  hoverDark?: string;
-  activeLight?: string;
-  activeDark?: string;
-  focusRing?: string;
-  focusRingOffset?: string;
-}
-
-// Color generation and utility interfaces
-export interface ColorGenerationConfig {
-  baseColor: string;
-  hueShift?: number;
-  saturationAdjust?: number;
-  lightnessAdjust?: number;
-  generateShades?: boolean;
-  generateTints?: boolean;
-  generateContrast?: boolean;
-}
-
-export interface ColorPalette {
-  name: string;
-  description: string;
-  colors: ColorScale;
-  accessibility: ColorAccessibility;
-  usage: string[];
-  tags: string[];
-}
-
-import type { NavigationThemeConfig } from './navigation';
-
-
-
-
-
-export interface SpacingThemeConfig {
-  scale: SpacingScale;
-  component: ComponentSpacing;
-  layout: LayoutSpacing;
-}
-
-export interface SpacingScale {
-  xs: string;
-  sm: string;
-  md: string;
-  lg: string;
-  xl: string;
-  '2xl': string;
-  '3xl': string;
-  '4xl': string;
-  '5xl': string;
-  '6xl': string;
-}
-
-export interface ComponentSpacing {
-  button: {
-    padding: string;
-    margin: string;
-    gap: string;
-  };
-  input: {
-    padding: string;
-    margin: string;
-    gap: string;
-  };
-  card: {
-    padding: string;
-    margin: string;
-    gap: string;
-  };
-}
-
-export interface LayoutSpacing {
-  page: string;
-  section: string;
-  container: string;
-  grid: string;
-}
-
-export interface ShadowThemeConfig {
-  sm: string;
-  md: string;
-  lg: string;
-  xl: string;
-  '2xl': string;
-  inner: string;
-  none: string;
-}
-
-export interface TransitionThemeConfig {
-  duration: TransitionDuration;
-  easing: TransitionEasing;
-  properties: TransitionProperties;
-}
-
-export interface BorderRadiusThemeConfig {
-  none: string;
-  sm: string;
-  md: string;
-  lg: string;
-  xl: string;
-  '2xl': string;
-  full: string;
-}
-
-export interface BorderWidthThemeConfig {
-  none: string;
-  thin: string;
-  normal: string;
-  focus: string;
-  thick: string;
-  extraThick: string;
-}
-
-export interface AnimationThemeConfig {
-  duration: {
-    fast: string;
-    normal: string;
-    slow: string;
-  };
-  easing: {
-    linear: string;
-    ease: string;
-    easeIn: string;
-    easeOut: string;
-    easeInOut: string;
-  };
-  transforms: {
-    hoverY: string;
-    offsetY: string;
-    scale: string;
-  };
-}
-
-export interface AccessibilityThemeConfig {
-  focusRing: {
-    width: string;
-    offset: string;
-    color: string;
-  };
-  outline: {
-    offset: string;
-  };
-  highContrast: {
-    borderWidth: string;
-    outlineWidth: string;
-  };
-  disabled: {
-    cursor: string;
-    opacity: string;
-  };
-}
-
-export interface PrintThemeConfig {
-  borderColor: string;
-  textColor: string;
-  textSecondaryColor: string;
-  backgroundColor: string;
-}
-
-export interface ContainerQueryThemeConfig {
-  small: string;
-  medium: string;
-  large: string;
-}
-
-export interface ContainerThemeConfig {
-  width: {
-    small: string;
-    medium: string;
-    large: string;
-    xl: string;
-    full: string;
-  };
-}
-
-export interface ShimmerThemeConfig {
-  alpha: string;
-  color: string;
-}
-
-export interface TransitionDuration {
-  fast: string;
-  normal: string;
-  slow: string;
-}
-
-export interface TransitionEasing {
-  linear: string;
-  ease: string;
-  easeIn: string;
-  easeOut: string;
-  easeInOut: string;
-}
-
-export interface TransitionProperties {
-  colors: string;
-  transform: string;
-  opacity: string;
-  shadow: string;
-}
-
-export interface ThemeMetadata {
-  name: string;
-  description: string;
-  author: string;
-  version: string;
-  category: 'brand' | 'enterprise' | 'creative' | 'custom' | 'accessibility';
-  tags: string[];
-  preview: string; // URL to preview image
-  createdAt: string;
-  updatedAt: string;
-}
-
-// Theme validation types
-export interface ThemeValidationResult {
-  isValid: boolean;
-  errors: ThemeValidationError[];
-  warnings: ThemeValidationWarning[];
-}
-
-export interface ThemeValidationError {
-  path: string;
-  message: string;
-  severity: 'error' | 'critical';
-}
-
-export interface ThemeValidationWarning {
-  path: string;
-  message: string;
-  severity: 'warning' | 'info';
-}
-
-// Theme inheritance types
-export interface ThemeInheritance {
-  extends?: string; // Theme name to extend
-  overrides: Partial<MultiThemeConfig>; // Properties to override
-  additions: Partial<MultiThemeConfig>; // Properties to add
-}
-
-// Complete theme with inheritance
-export interface CompleteThemeConfig extends MultiThemeConfig {
-  inheritance?: ThemeInheritance;
-  validation: ThemeValidationResult;
-}
+export {};

package/dist/themes/useSystemTheme.esm.js

@@ -1,48 +1,40 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { SystemThemeDetector, SystemTheme, SystemThemeOptions } from './systemThemeDetector';
-
+import { SystemThemeDetector } from './systemThemeDetector';
 /**
  * React hook for using system theme detection
  */
-export const useSystemTheme = (options: SystemThemeOptions = {}) => {
-  const [systemTheme, setSystemTheme] = useState<SystemTheme>('light');
-  const detectorRef = useRef<SystemThemeDetector | null>(null);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    detectorRef.current = new SystemThemeDetector(options);
-    
-    // Set initial theme
-    const initialTheme = detectorRef.current.getSystemTheme();
-    setSystemTheme(initialTheme);
-    
-    // Subscribe to changes
-    const unsubscribe = detectorRef.current.subscribe(setSystemTheme);
-    
-    return () => {
-      unsubscribe();
-      detectorRef.current?.destroy();
+export const useSystemTheme = (options = {}) => {
+    const [systemTheme, setSystemTheme] = useState('light');
+    const detectorRef = useRef(null);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        detectorRef.current = new SystemThemeDetector(options);
+        // Set initial theme
+        const initialTheme = detectorRef.current.getSystemTheme();
+        setSystemTheme(initialTheme);
+        // Subscribe to changes
+        const unsubscribe = detectorRef.current.subscribe(setSystemTheme);
+        return () => {
+            unsubscribe();
+            detectorRef.current?.destroy();
+        };
+    }, [options.storageKey, options.enablePersistence]);
+    const setSystemThemePreference = useCallback((theme) => {
+        if (detectorRef.current) {
+            detectorRef.current.setStoredPreference(theme);
+            setSystemTheme(theme);
+        }
+    }, []);
+    const applySystemThemeCSS = useCallback((theme) => {
+        if (detectorRef.current) {
+            detectorRef.current.applySystemThemeCSS(theme);
+        }
+    }, []);
+    return {
+        systemTheme,
+        setSystemThemePreference,
+        applySystemThemeCSS,
+        isSupported: detectorRef.current?.isSupported() ?? false,
     };
-  }, [options.storageKey, options.enablePersistence]);
-
-  const setSystemThemePreference = useCallback((theme: SystemTheme) => {
-    if (detectorRef.current) {
-      detectorRef.current.setStoredPreference(theme);
-      setSystemTheme(theme);
-    }
-  }, []);
-
-  const applySystemThemeCSS = useCallback((theme: SystemTheme) => {
-    if (detectorRef.current) {
-      detectorRef.current.applySystemThemeCSS(theme);
-    }
-  }, []);
-
-  return {
-    systemTheme,
-    setSystemThemePreference,
-    applySystemThemeCSS,
-    isSupported: detectorRef.current?.isSupported() ?? false,
-  };
 };

package/dist/themes/useSystemTheme.js

@@ -1,48 +1,40 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { SystemThemeDetector, SystemTheme, SystemThemeOptions } from './systemThemeDetector';
-
+import { SystemThemeDetector } from './systemThemeDetector';
 /**
  * React hook for using system theme detection
  */
-export const useSystemTheme = (options: SystemThemeOptions = {}) => {
-  const [systemTheme, setSystemTheme] = useState<SystemTheme>('light');
-  const detectorRef = useRef<SystemThemeDetector | null>(null);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    detectorRef.current = new SystemThemeDetector(options);
-    
-    // Set initial theme
-    const initialTheme = detectorRef.current.getSystemTheme();
-    setSystemTheme(initialTheme);
-    
-    // Subscribe to changes
-    const unsubscribe = detectorRef.current.subscribe(setSystemTheme);
-    
-    return () => {
-      unsubscribe();
-      detectorRef.current?.destroy();
+export const useSystemTheme = (options = {}) => {
+    const [systemTheme, setSystemTheme] = useState('light');
+    const detectorRef = useRef(null);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        detectorRef.current = new SystemThemeDetector(options);
+        // Set initial theme
+        const initialTheme = detectorRef.current.getSystemTheme();
+        setSystemTheme(initialTheme);
+        // Subscribe to changes
+        const unsubscribe = detectorRef.current.subscribe(setSystemTheme);
+        return () => {
+            unsubscribe();
+            detectorRef.current?.destroy();
+        };
+    }, [options.storageKey, options.enablePersistence]);
+    const setSystemThemePreference = useCallback((theme) => {
+        if (detectorRef.current) {
+            detectorRef.current.setStoredPreference(theme);
+            setSystemTheme(theme);
+        }
+    }, []);
+    const applySystemThemeCSS = useCallback((theme) => {
+        if (detectorRef.current) {
+            detectorRef.current.applySystemThemeCSS(theme);
+        }
+    }, []);
+    return {
+        systemTheme,
+        setSystemThemePreference,
+        applySystemThemeCSS,
+        isSupported: detectorRef.current?.isSupported() ?? false,
     };
-  }, [options.storageKey, options.enablePersistence]);
-
-  const setSystemThemePreference = useCallback((theme: SystemTheme) => {
-    if (detectorRef.current) {
-      detectorRef.current.setStoredPreference(theme);
-      setSystemTheme(theme);
-    }
-  }, []);
-
-  const applySystemThemeCSS = useCallback((theme: SystemTheme) => {
-    if (detectorRef.current) {
-      detectorRef.current.applySystemThemeCSS(theme);
-    }
-  }, []);
-
-  return {
-    systemTheme,
-    setSystemThemePreference,
-    applySystemThemeCSS,
-    isSupported: detectorRef.current?.isSupported() ?? false,
-  };
 };