indas-ui 0.0.1 → 0.1.0

package/dist/lib/theme/types.d.ts

@@ -0,0 +1,109 @@
+export type ColorMode = 'light' | 'dark';
+export type ThemeVariant = 'default' | 'red' | 'green' | 'purple' | 'orange' | 'black' | 'custom';
+export type FontFamily = 'system' | 'roboto' | 'openSans' | 'lato' | 'poppins' | 'montserrat' | 'nunito' | 'sourceSansPro' | 'workSans' | 'ubuntu';
+export type FontSize = 'small' | 'normal' | 'large' | 'extraLarge';
+export type Theme = {
+    variant: ThemeVariant;
+    mode: ColorMode;
+    fontFamily?: FontFamily;
+    fontSize?: FontSize;
+    fontScale?: number;
+};
+export interface CustomThemeColors {
+    accent: string;
+    accentHover: string;
+    accentSubtle: string;
+    accentMuted: string;
+}
+export interface CustomTheme extends CustomThemeColors {
+    name: string;
+    id: string;
+    createdAt: Date;
+    updatedAt: Date;
+}
+export interface ThemeContextValue {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    setVariant: (variant: ThemeVariant) => void;
+    setMode: (mode: ColorMode) => void;
+    toggleMode: () => void;
+    setFontFamily: (family: FontFamily) => void;
+    setFontSize: (size: FontSize) => void;
+    setFontScale: (scale: number) => void;
+    customTheme: CustomTheme | null;
+    setCustomTheme: (colors: CustomThemeColors, name?: string) => void;
+    removeCustomTheme: () => void;
+    isDark: boolean;
+    isSystemPreference: boolean;
+    availableThemes: ThemeVariant[];
+    currentThemeClass: string;
+}
+export interface ThemeProviderProps {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+    enableSystem?: boolean;
+    attribute?: 'class' | 'data-theme';
+    defaultMode?: ColorMode;
+}
+export declare const CONTRAST_RATIOS: {
+    readonly AA_NORMAL: 4.5;
+    readonly AA_LARGE: 3;
+    readonly AAA_NORMAL: 7;
+    readonly AAA_LARGE: 4.5;
+};
+export declare const THEME_CONFIG: {
+    readonly variants: readonly ["default", "red", "green", "purple", "orange", "black", "custom"];
+    readonly modes: readonly ["light", "dark"];
+    readonly storageKey: "erp-theme";
+    readonly attribute: "class";
+};
+export interface FontFamilyConfig {
+    name: string;
+    value: string;
+    description: string;
+    requiresImport?: boolean;
+}
+export interface FontScaleConfig {
+    name: string;
+    scale: number;
+    description: string;
+    minSize: string;
+}
+export declare const FONT_FAMILIES: Record<FontFamily, FontFamilyConfig>;
+export declare const FONT_SCALES: Record<FontSize, FontScaleConfig>;
+export declare const THEME_COLORS: Record<Exclude<ThemeVariant, 'custom'>, {
+    light: CustomThemeColors;
+    dark: CustomThemeColors;
+}>;
+export type ThemeClass = `theme-${ThemeVariant}` | `theme-${ThemeVariant}.${ColorMode}`;
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface HSL {
+    h: number;
+    s: number;
+    l: number;
+}
+export interface ThemeValidationResult {
+    isValid: boolean;
+    errors: string[];
+    warnings: string[];
+    contrastRatio?: number;
+}
+export interface ThemeStorage {
+    getTheme: (key: string) => Promise<Theme | null>;
+    setTheme: (key: string, theme: Theme) => Promise<void>;
+    getCustomTheme: (key: string) => Promise<CustomTheme | null>;
+    setCustomTheme: (key: string, theme: CustomTheme) => Promise<void>;
+    removeTheme: (key: string) => Promise<void>;
+}
+export declare class LocalThemeStorage implements ThemeStorage {
+    getTheme(key: string): Promise<Theme | null>;
+    setTheme(key: string, theme: Theme): Promise<void>;
+    getCustomTheme(key: string): Promise<CustomTheme | null>;
+    setCustomTheme(key: string, theme: CustomTheme): Promise<void>;
+    removeTheme(key: string): Promise<void>;
+}

package/dist/lib/theme/types.js

@@ -0,0 +1,231 @@
+'use client';
+// Theme system TypeScript definitions
+// WCAG AA Contrast ratios
+export const CONTRAST_RATIOS = {
+    AA_NORMAL: 4.5,
+    AA_LARGE: 3,
+    AAA_NORMAL: 7,
+    AAA_LARGE: 4.5,
+};
+// Theme configuration
+export const THEME_CONFIG = {
+    variants: ['default', 'red', 'green', 'purple', 'orange', 'black', 'custom'],
+    modes: ['light', 'dark'],
+    storageKey: 'erp-theme',
+    attribute: 'class',
+};
+// Font family configurations
+export const FONT_FAMILIES = {
+    system: {
+        name: 'System Default',
+        value: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        description: 'Inter font (default) - Modern and professional',
+        requiresImport: true
+    },
+    roboto: {
+        name: 'Roboto',
+        value: '"Roboto", -apple-system, sans-serif',
+        description: 'Clean and readable - Google design',
+        requiresImport: true
+    },
+    openSans: {
+        name: 'Open Sans',
+        value: '"Open Sans", -apple-system, sans-serif',
+        description: 'Friendly and approachable - Web standard',
+        requiresImport: true
+    },
+    lato: {
+        name: 'Lato',
+        value: '"Lato", -apple-system, sans-serif',
+        description: 'Elegant and versatile - Corporate',
+        requiresImport: true
+    },
+    poppins: {
+        name: 'Poppins',
+        value: '"Poppins", -apple-system, sans-serif',
+        description: 'Modern geometric - Startups',
+        requiresImport: true
+    },
+    montserrat: {
+        name: 'Montserrat',
+        value: '"Montserrat", -apple-system, sans-serif',
+        description: 'Bold and geometric - Headlines',
+        requiresImport: true
+    },
+    nunito: {
+        name: 'Nunito',
+        value: '"Nunito", -apple-system, sans-serif',
+        description: 'Rounded and friendly - Educational',
+        requiresImport: true
+    },
+    sourceSansPro: {
+        name: 'Source Sans Pro',
+        value: '"Source Sans Pro", -apple-system, sans-serif',
+        description: 'Professional and neutral - Adobe',
+        requiresImport: true
+    },
+    workSans: {
+        name: 'Work Sans',
+        value: '"Work Sans", -apple-system, sans-serif',
+        description: 'Modern and versatile - Digital products',
+        requiresImport: true
+    },
+    ubuntu: {
+        name: 'Ubuntu',
+        value: '"Ubuntu", -apple-system, sans-serif',
+        description: 'Humanist and technical - Linux inspired',
+        requiresImport: true
+    }
+};
+// Font scale configurations (WCAG 2.1 Level AA compliant)
+export const FONT_SCALES = {
+    small: {
+        name: 'Small',
+        scale: 0.875,
+        description: 'Compact - More content visible',
+        minSize: '12px'
+    },
+    normal: {
+        name: 'Normal',
+        scale: 1.0,
+        description: 'Default - Balanced readability',
+        minSize: '14px'
+    },
+    large: {
+        name: 'Large',
+        scale: 1.125,
+        description: 'Comfortable - Easy reading',
+        minSize: '16px'
+    },
+    extraLarge: {
+        name: 'Extra Large',
+        scale: 1.25,
+        description: 'Accessible - Vision assistance',
+        minSize: '18px'
+    }
+};
+// Pre-defined theme colors (WCAG AA compliant)
+export const THEME_COLORS = {
+    default: {
+        light: {
+            accent: '#003366', // Your preferred navy blue
+            accentHover: '#002244', // Darker navy blue
+            accentSubtle: '#E6F0FF', // Light blue tint
+            accentMuted: '#6699CC', // Medium blue
+        },
+        dark: {
+            accent: '#4D79A4', // Lighter navy for dark mode
+            accentHover: '#5D89B4', // Hover state for dark mode
+            accentSubtle: '#001122', // Very dark navy
+            accentMuted: '#336699', // Muted navy
+        }
+    },
+    red: {
+        light: {
+            accent: '#EF4444', // Red-500
+            accentHover: '#DC2626', // Red-600
+            accentSubtle: '#FEE2E2', // Red-100
+            accentMuted: '#FCA5A5', // Red-300
+        },
+        dark: {
+            accent: '#F87171', // Red-400
+            accentHover: '#EF4444', // Red-500
+            accentSubtle: '#7F1D1D', // Red-900
+            accentMuted: '#DC2626', // Red-600
+        }
+    },
+    green: {
+        light: {
+            accent: '#22C55E', // Green-500
+            accentHover: '#16A34A', // Green-600
+            accentSubtle: '#DCFCE7', // Green-100
+            accentMuted: '#86EFAC', // Green-300
+        },
+        dark: {
+            accent: '#4ADE80', // Green-400
+            accentHover: '#22C55E', // Green-500
+            accentSubtle: '#14532D', // Green-900
+            accentMuted: '#16A34A', // Green-600
+        }
+    },
+    purple: {
+        light: {
+            accent: '#A855F7', // Purple-500
+            accentHover: '#9333EA', // Purple-600
+            accentSubtle: '#F3E8FF', // Purple-100
+            accentMuted: '#C4B5FD', // Purple-300
+        },
+        dark: {
+            accent: '#C4B5FD', // Purple-400
+            accentHover: '#A855F7', // Purple-500
+            accentSubtle: '#581C87', // Purple-900
+            accentMuted: '#9333EA', // Purple-600
+        }
+    },
+    orange: {
+        light: {
+            accent: '#F97316', // Orange-500
+            accentHover: '#EA580C', // Orange-600
+            accentSubtle: '#FED7AA', // Orange-200
+            accentMuted: '#FB923C', // Orange-400
+        },
+        dark: {
+            accent: '#FB923C', // Orange-400
+            accentHover: '#F97316', // Orange-500
+            accentSubtle: '#7C2D12', // Orange-900
+            accentMuted: '#EA580C', // Orange-600
+        }
+    },
+    black: {
+        light: {
+            accent: '#000000', // Pure Black
+            accentHover: '#1F1F1F', // Gray-900
+            accentSubtle: '#F5F5F5', // Gray-100
+            accentMuted: '#737373', // Gray-500
+        },
+        dark: {
+            accent: '#404040', // Gray-700
+            accentHover: '#525252', // Gray-600
+            accentSubtle: '#0A0A0A', // Almost black
+            accentMuted: '#262626', // Gray-800
+        }
+    }
+};
+// Local storage implementation
+export class LocalThemeStorage {
+    async getTheme(key) {
+        try {
+            const stored = localStorage.getItem(key);
+            return stored ? JSON.parse(stored) : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    async setTheme(key, theme) {
+        localStorage.setItem(key, JSON.stringify(theme));
+    }
+    async getCustomTheme(key) {
+        try {
+            const stored = localStorage.getItem(`${key}-custom`);
+            if (!stored)
+                return null;
+            const parsed = JSON.parse(stored);
+            return {
+                ...parsed,
+                createdAt: new Date(parsed.createdAt),
+                updatedAt: new Date(parsed.updatedAt),
+            };
+        }
+        catch {
+            return null;
+        }
+    }
+    async setCustomTheme(key, theme) {
+        localStorage.setItem(`${key}-custom`, JSON.stringify(theme));
+    }
+    async removeTheme(key) {
+        localStorage.removeItem(key);
+        localStorage.removeItem(`${key}-custom`);
+    }
+}

package/dist/lib/theme/utils.d.ts

@@ -0,0 +1,73 @@
+import type { RGB, HSL, ThemeValidationResult, CustomThemeColors, Theme, ThemeVariant, ColorMode } from './types.js';
+/**
+ * Convert hex color to RGB
+ */
+export declare function hexToRgb(hex: string): RGB | null;
+/**
+ * Convert RGB to hex
+ */
+export declare function rgbToHex(r: number, g: number, b: number): string;
+/**
+ * Convert RGB to HSL
+ */
+export declare function rgbToHsl(r: number, g: number, b: number): HSL;
+/**
+ * Convert HSL to RGB
+ */
+export declare function hslToRgb(h: number, s: number, l: number): RGB;
+/**
+ * Calculate relative luminance of a color (WCAG formula)
+ */
+export declare function getLuminance(rgb: RGB): number;
+/**
+ * Calculate contrast ratio between two colors (WCAG formula)
+ */
+export declare function getContrastRatio(rgb1: RGB, rgb2: RGB): number;
+/**
+ * Check if a color combination meets WCAG AA standards
+ */
+export declare function meetsContrastRequirement(foreground: RGB, background: RGB, level?: 'AA' | 'AAA', isLargeText?: boolean): boolean;
+/**
+ * Generate a darker shade of a color
+ */
+export declare function darkenColor(hex: string, amount: number): string;
+/**
+ * Generate a lighter shade of a color
+ */
+export declare function lightenColor(hex: string, amount: number): string;
+/**
+ * Generate color variants from a base accent color
+ */
+export declare function generateColorVariants(baseHex: string): CustomThemeColors;
+/**
+ * Validate a custom theme for accessibility compliance
+ */
+export declare function validateTheme(colors: CustomThemeColors, mode?: ColorMode): ThemeValidationResult;
+/**
+ * Get system color scheme preference
+ */
+export declare function getSystemTheme(): ColorMode;
+/**
+ * Generate CSS custom properties string for a theme
+ */
+export declare function generateCustomPropertiesString(colors: CustomThemeColors, mode: ColorMode): string;
+/**
+ * Apply custom theme CSS variables to document
+ */
+export declare function applyCustomTheme(colors: CustomThemeColors): void;
+/**
+ * Remove custom theme CSS variables
+ */
+export declare function removeCustomTheme(): void;
+/**
+ * Generate theme class name
+ */
+export declare function getThemeClassName(theme: Theme): string;
+/**
+ * Get predefined theme colors
+ */
+export declare function getThemeColors(variant: ThemeVariant, mode: ColorMode): CustomThemeColors | null;
+/**
+ * Check if device prefers reduced motion
+ */
+export declare function prefersReducedMotion(): boolean;