@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

package/dist/themes/types.js

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

package/dist/themes/useSystemTheme.d.ts

@@ -0,0 +1,43 @@
+
+export declare 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();
+    };
+  }, [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.esm.js

@@ -0,0 +1,48 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { SystemThemeDetector, SystemTheme, SystemThemeOptions } from './systemThemeDetector';
+
+/**
+ * React hook for using system theme detection
+ */
+export const useSystemTheme = (options= {}) => {
+  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();
+    };
+  }, [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) ?? false,
+  };
+};

package/dist/themes/useSystemTheme.js

@@ -0,0 +1,48 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { SystemThemeDetector, SystemTheme, SystemThemeOptions } from './systemThemeDetector';
+
+/**
+ * React hook for using system theme detection
+ */
+export const useSystemTheme = (options= {}) => {
+  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();
+    };
+  }, [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) ?? false,
+  };
+};

package/dist/themes/useTheme.d.ts

@@ -0,0 +1,20 @@
+
+export declare const useTheme: (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+
+  return context;
+};
+
+export declare const useThemeByName: (themeName: string) => {
+  const { getTheme } = useTheme();
+  return getTheme(themeName);
+};
+
+export declare const useThemeAvailable: (themeName: string): boolean => {
+  const { availableThemes } = useTheme();
+  return availableThemes.includes(themeName);
+};

package/dist/themes/useTheme.esm.js

@@ -0,0 +1,87 @@
+import { useContext } from 'react';
+import { ThemeContext, ThemeContextType } from './ThemeContext';
+
+/**
+ * Hook to access theme context
+ * Must be used within a ThemeProvider
+ * 
+ * @returns ThemeContextType - The current theme context
+ * @throws Error if used outside of ThemeProvider
+ * 
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { currentTheme, setTheme, currentThemeConfig } = useTheme();
+ *   
+ *   return (
+ *     <button onClick={() => setTheme('harvey')}>
+ *       Switch to Harvey Theme
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export const useTheme = ()=> {
+  const context = useContext(ThemeContext);
+  
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+  
+  return context;
+};
+
+/**
+ * Hook to get a specific theme by name
+ * Useful for accessing theme data without switching
+ * 
+ * @param themeName - Name of the theme to retrieve
+ * @returns CompleteThemeConfig | null - The requested theme or null if not found
+ * 
+ * @example
+ * ```tsx
+ * function ThemePreview() {
+ *   const harveyTheme = useThemeByName('harvey');
+ *   
+ *   if (!harveyTheme) return <div>Theme not found</div>;
+ *   
+ *   return (
+ *     <div style={{ color] }}>
+ *       Harvey Theme Preview
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const useThemeByName = (themeName) => {
+  const { getTheme } = useTheme();
+  return getTheme(themeName);
+};
+
+/**
+ * Hook to check if a specific theme is available
+ * 
+ * @param themeName - Name of the theme to check
+ * @returns boolean - True if theme is available
+ * 
+ * @example
+ * ```tsx
+ * function ThemeSwitcher() {
+ *   const hasHarveyTheme = useThemeAvailable('harvey');
+ *   
+ *   return (
+ *     <div>
+ *       {hasHarveyTheme && (
+ *         <button onClick={() => setTheme('harvey')}>
+ *           Harvey Theme
+ *         </button>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export const useThemeAvailable = (themeName)=> {
+  const { availableThemes } = useTheme();
+  return availableThemes.includes(themeName);
+};