@shohojdhara/atomix 0.2.8 → 0.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +56 -0
- package/README.md +40 -1
- package/dist/atomix.css +96 -39
- package/dist/atomix.min.css +2 -2
- package/dist/index.d.ts +627 -2
- package/dist/index.esm.js +1292 -89
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1316 -88
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/themes/applemix.css +96 -39
- package/dist/themes/applemix.min.css +2 -2
- package/dist/themes/boomdevs.css +96 -39
- package/dist/themes/boomdevs.min.css +2 -2
- package/dist/themes/esrar.css +96 -39
- package/dist/themes/esrar.min.css +2 -2
- package/dist/themes/flashtrade.css +97 -40
- package/dist/themes/flashtrade.min.css +2 -2
- package/dist/themes/mashroom.css +96 -39
- package/dist/themes/mashroom.min.css +3 -3
- package/dist/themes/shaj-default.css +96 -39
- package/dist/themes/shaj-default.min.css +2 -2
- package/package.json +13 -2
- package/src/components/Card/Card.tsx +9 -4
- package/src/components/Navigation/SideMenu/SideMenu.stories.tsx +301 -13
- package/src/components/Navigation/SideMenu/SideMenu.tsx +236 -9
- package/src/lib/composables/useSideMenu.ts +89 -30
- package/src/lib/index.ts +5 -0
- package/src/lib/theme/ThemeContext.tsx +17 -0
- package/src/lib/theme/ThemeManager.stories.tsx +472 -0
- package/src/lib/theme/ThemeManager.test.ts +186 -0
- package/src/lib/theme/ThemeManager.ts +501 -0
- package/src/lib/theme/ThemeProvider.tsx +227 -0
- package/src/lib/theme/index.ts +56 -0
- package/src/lib/theme/types.ts +247 -0
- package/src/lib/theme/useTheme.test.tsx +66 -0
- package/src/lib/theme/useTheme.ts +80 -0
- package/src/lib/theme/utils.test.ts +140 -0
- package/src/lib/theme/utils.ts +398 -0
- package/src/lib/types/components.ts +26 -0
- package/src/styles/06-components/_components.card.scss +39 -24
- package/src/styles/06-components/_components.side-menu.scss +79 -18
package/dist/index.d.ts
CHANGED
|
@@ -991,6 +991,21 @@ interface SideMenuProps extends BaseComponentProps {
|
|
|
991
991
|
* Menu content (typically SideMenuList components)
|
|
992
992
|
*/
|
|
993
993
|
children: ReactNode;
|
|
994
|
+
/**
|
|
995
|
+
* Menu items
|
|
996
|
+
*/
|
|
997
|
+
menuItems?: {
|
|
998
|
+
title?: ReactNode;
|
|
999
|
+
toggleIcon?: ReactNode;
|
|
1000
|
+
items?: {
|
|
1001
|
+
title?: ReactNode;
|
|
1002
|
+
icon?: ReactNode;
|
|
1003
|
+
href?: string;
|
|
1004
|
+
onClick?: (event: React.MouseEvent) => void;
|
|
1005
|
+
active?: boolean;
|
|
1006
|
+
disabled?: boolean;
|
|
1007
|
+
}[];
|
|
1008
|
+
}[];
|
|
994
1009
|
/**
|
|
995
1010
|
* Whether the menu is open (for controlled component)
|
|
996
1011
|
*/
|
|
@@ -1003,6 +1018,15 @@ interface SideMenuProps extends BaseComponentProps {
|
|
|
1003
1018
|
* Whether the menu is collapsible on mobile
|
|
1004
1019
|
*/
|
|
1005
1020
|
collapsible?: boolean;
|
|
1021
|
+
/**
|
|
1022
|
+
* Whether the menu can be collapsed on desktop (vertical collapse)
|
|
1023
|
+
* When true, adds a toggle button and supports collapsed/expanded states on desktop
|
|
1024
|
+
*/
|
|
1025
|
+
collapsibleDesktop?: boolean;
|
|
1026
|
+
/**
|
|
1027
|
+
* Whether the menu starts collapsed on desktop (only applies when collapsibleDesktop is true)
|
|
1028
|
+
*/
|
|
1029
|
+
defaultCollapsedDesktop?: boolean;
|
|
1006
1030
|
/**
|
|
1007
1031
|
* Custom toggle icon
|
|
1008
1032
|
*/
|
|
@@ -7811,11 +7835,13 @@ declare function useSideMenu(initialProps?: Partial<SideMenuProps>): {
|
|
|
7811
7835
|
isOpenState: boolean;
|
|
7812
7836
|
wrapperRef: react.MutableRefObject<HTMLDivElement>;
|
|
7813
7837
|
innerRef: react.MutableRefObject<HTMLDivElement>;
|
|
7838
|
+
sideMenuRef: react.MutableRefObject<HTMLDivElement>;
|
|
7814
7839
|
generateSideMenuClass: (props: Partial<SideMenuProps & {
|
|
7815
7840
|
isOpen?: boolean;
|
|
7816
7841
|
}>) => string;
|
|
7817
7842
|
generateWrapperClass: () => string;
|
|
7818
7843
|
handleToggle: () => void;
|
|
7844
|
+
handleDesktopCollapse: () => void;
|
|
7819
7845
|
getCurrentOpenState: () => boolean;
|
|
7820
7846
|
};
|
|
7821
7847
|
/**
|
|
@@ -10749,10 +10775,609 @@ declare const Upload: react__default.FC<UploadProps>;
|
|
|
10749
10775
|
*/
|
|
10750
10776
|
declare const VideoPlayer: react__default.ForwardRefExoticComponent<VideoPlayerProps & react__default.RefAttributes<HTMLVideoElement>>;
|
|
10751
10777
|
|
|
10778
|
+
/**
|
|
10779
|
+
* Theme Manager Type Definitions
|
|
10780
|
+
*
|
|
10781
|
+
* TypeScript types and interfaces for the Atomix Design System theme management system.
|
|
10782
|
+
*/
|
|
10783
|
+
|
|
10784
|
+
/**
|
|
10785
|
+
* Theme metadata interface matching themes.config.js structure
|
|
10786
|
+
*/
|
|
10787
|
+
interface ThemeMetadata {
|
|
10788
|
+
/** Display name of the theme */
|
|
10789
|
+
name: string;
|
|
10790
|
+
/** Unique identifier/class name for the theme */
|
|
10791
|
+
class?: string;
|
|
10792
|
+
/** Theme description */
|
|
10793
|
+
description?: string;
|
|
10794
|
+
/** Theme author */
|
|
10795
|
+
author?: string;
|
|
10796
|
+
/** Theme version (semver) */
|
|
10797
|
+
version?: string;
|
|
10798
|
+
/** Theme tags for categorization */
|
|
10799
|
+
tags?: string[];
|
|
10800
|
+
/** Whether the theme supports dark mode */
|
|
10801
|
+
supportsDarkMode?: boolean;
|
|
10802
|
+
/** Theme status: stable, beta, experimental, deprecated */
|
|
10803
|
+
status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
|
|
10804
|
+
/** Accessibility information */
|
|
10805
|
+
a11y?: {
|
|
10806
|
+
/** Target contrast ratio */
|
|
10807
|
+
contrastTarget?: number;
|
|
10808
|
+
/** Supported color modes */
|
|
10809
|
+
modes?: string[];
|
|
10810
|
+
};
|
|
10811
|
+
/** Primary theme color (for UI display) */
|
|
10812
|
+
color?: string;
|
|
10813
|
+
/** Theme features list */
|
|
10814
|
+
features?: string[];
|
|
10815
|
+
/** Theme dependencies (other themes required) */
|
|
10816
|
+
dependencies?: string[];
|
|
10817
|
+
}
|
|
10818
|
+
/**
|
|
10819
|
+
* Theme manager configuration options
|
|
10820
|
+
*/
|
|
10821
|
+
interface ThemeManagerConfig {
|
|
10822
|
+
/** Available themes metadata */
|
|
10823
|
+
themes: Record<string, ThemeMetadata>;
|
|
10824
|
+
/** Default theme to use */
|
|
10825
|
+
defaultTheme?: string;
|
|
10826
|
+
/** Base path for theme CSS files */
|
|
10827
|
+
basePath?: string;
|
|
10828
|
+
/** CDN path for theme CSS files (optional) */
|
|
10829
|
+
cdnPath?: string | null;
|
|
10830
|
+
/** Themes to preload on initialization */
|
|
10831
|
+
preload?: string[];
|
|
10832
|
+
/** Enable lazy loading of themes */
|
|
10833
|
+
lazy?: boolean;
|
|
10834
|
+
/** localStorage key for persistence */
|
|
10835
|
+
storageKey?: string;
|
|
10836
|
+
/** Data attribute name for theme */
|
|
10837
|
+
dataAttribute?: string;
|
|
10838
|
+
/** Enable persistence */
|
|
10839
|
+
enablePersistence?: boolean;
|
|
10840
|
+
/** Custom CSS file extension */
|
|
10841
|
+
cssExtension?: string;
|
|
10842
|
+
/** Use minified CSS files */
|
|
10843
|
+
useMinified?: boolean;
|
|
10844
|
+
/** Callback when theme changes */
|
|
10845
|
+
onThemeChange?: (theme: string) => void;
|
|
10846
|
+
/** Callback when theme load fails */
|
|
10847
|
+
onError?: (error: Error, themeName: string) => void;
|
|
10848
|
+
}
|
|
10849
|
+
/**
|
|
10850
|
+
* Theme change event payload
|
|
10851
|
+
*/
|
|
10852
|
+
interface ThemeChangeEvent {
|
|
10853
|
+
/** Previous theme name */
|
|
10854
|
+
previousTheme: string | null;
|
|
10855
|
+
/** New theme name */
|
|
10856
|
+
currentTheme: string;
|
|
10857
|
+
/** Timestamp of the change */
|
|
10858
|
+
timestamp: number;
|
|
10859
|
+
/** Whether the change was from user action or system */
|
|
10860
|
+
source: 'user' | 'system' | 'storage';
|
|
10861
|
+
}
|
|
10862
|
+
/**
|
|
10863
|
+
* Theme load options
|
|
10864
|
+
*/
|
|
10865
|
+
interface ThemeLoadOptions {
|
|
10866
|
+
/** Force reload even if already loaded */
|
|
10867
|
+
force?: boolean;
|
|
10868
|
+
/** Preload without applying */
|
|
10869
|
+
preload?: boolean;
|
|
10870
|
+
/** Remove previous theme CSS */
|
|
10871
|
+
removePrevious?: boolean;
|
|
10872
|
+
/** Custom CSS path override */
|
|
10873
|
+
customPath?: string;
|
|
10874
|
+
/** Fallback to default theme on error */
|
|
10875
|
+
fallbackOnError?: boolean;
|
|
10876
|
+
}
|
|
10877
|
+
/**
|
|
10878
|
+
* Theme validation result
|
|
10879
|
+
*/
|
|
10880
|
+
interface ThemeValidationResult {
|
|
10881
|
+
/** Whether the theme is valid */
|
|
10882
|
+
valid: boolean;
|
|
10883
|
+
/** Validation errors */
|
|
10884
|
+
errors: string[];
|
|
10885
|
+
/** Validation warnings */
|
|
10886
|
+
warnings: string[];
|
|
10887
|
+
}
|
|
10888
|
+
/**
|
|
10889
|
+
* Theme manager event types
|
|
10890
|
+
*/
|
|
10891
|
+
type ThemeManagerEvent = 'themeChange' | 'themeLoad' | 'themeError';
|
|
10892
|
+
/**
|
|
10893
|
+
* Theme change callback function
|
|
10894
|
+
*/
|
|
10895
|
+
type ThemeChangeCallback = (event: ThemeChangeEvent) => void;
|
|
10896
|
+
/**
|
|
10897
|
+
* Theme load callback function
|
|
10898
|
+
*/
|
|
10899
|
+
type ThemeLoadCallback = (themeName: string) => void;
|
|
10900
|
+
/**
|
|
10901
|
+
* Theme error callback function
|
|
10902
|
+
*/
|
|
10903
|
+
type ThemeErrorCallback = (error: Error, themeName: string) => void;
|
|
10904
|
+
/**
|
|
10905
|
+
* Event listener map
|
|
10906
|
+
*/
|
|
10907
|
+
interface ThemeEventListeners {
|
|
10908
|
+
themeChange: ThemeChangeCallback[];
|
|
10909
|
+
themeLoad: ThemeLoadCallback[];
|
|
10910
|
+
themeError: ThemeErrorCallback[];
|
|
10911
|
+
}
|
|
10912
|
+
/**
|
|
10913
|
+
* React hook options for useTheme
|
|
10914
|
+
*/
|
|
10915
|
+
interface UseThemeOptions {
|
|
10916
|
+
/** Default theme (overrides ThemeProvider default) */
|
|
10917
|
+
defaultTheme?: string;
|
|
10918
|
+
/** Enable persistence for this hook instance */
|
|
10919
|
+
enablePersistence?: boolean;
|
|
10920
|
+
/** Custom storage key */
|
|
10921
|
+
storageKey?: string;
|
|
10922
|
+
/** Callback when theme changes */
|
|
10923
|
+
onChange?: (theme: string) => void;
|
|
10924
|
+
}
|
|
10925
|
+
/**
|
|
10926
|
+
* React hook return type for useTheme
|
|
10927
|
+
*/
|
|
10928
|
+
interface UseThemeReturn {
|
|
10929
|
+
/** Current theme name */
|
|
10930
|
+
theme: string;
|
|
10931
|
+
/** Function to change theme */
|
|
10932
|
+
setTheme: (theme: string, options?: ThemeLoadOptions) => Promise<void>;
|
|
10933
|
+
/** Available themes */
|
|
10934
|
+
availableThemes: ThemeMetadata[];
|
|
10935
|
+
/** Whether a theme is currently loading */
|
|
10936
|
+
isLoading: boolean;
|
|
10937
|
+
/** Current error, if any */
|
|
10938
|
+
error: Error | null;
|
|
10939
|
+
/** Whether a specific theme is loaded */
|
|
10940
|
+
isThemeLoaded: (themeName: string) => boolean;
|
|
10941
|
+
/** Preload a theme */
|
|
10942
|
+
preloadTheme: (themeName: string) => Promise<void>;
|
|
10943
|
+
}
|
|
10944
|
+
/**
|
|
10945
|
+
* Theme provider props
|
|
10946
|
+
*/
|
|
10947
|
+
interface ThemeProviderProps {
|
|
10948
|
+
/** Child components */
|
|
10949
|
+
children: React.ReactNode;
|
|
10950
|
+
/** Default theme */
|
|
10951
|
+
defaultTheme?: string;
|
|
10952
|
+
/** Available themes */
|
|
10953
|
+
themes?: Record<string, ThemeMetadata>;
|
|
10954
|
+
/** Base path for theme CSS */
|
|
10955
|
+
basePath?: string;
|
|
10956
|
+
/** CDN path for theme CSS */
|
|
10957
|
+
cdnPath?: string | null;
|
|
10958
|
+
/** Themes to preload */
|
|
10959
|
+
preload?: string[];
|
|
10960
|
+
/** Enable lazy loading */
|
|
10961
|
+
lazy?: boolean;
|
|
10962
|
+
/** localStorage key */
|
|
10963
|
+
storageKey?: string;
|
|
10964
|
+
/** Data attribute name */
|
|
10965
|
+
dataAttribute?: string;
|
|
10966
|
+
/** Enable persistence */
|
|
10967
|
+
enablePersistence?: boolean;
|
|
10968
|
+
/** Use minified CSS */
|
|
10969
|
+
useMinified?: boolean;
|
|
10970
|
+
/** Callback when theme changes */
|
|
10971
|
+
onThemeChange?: (theme: string) => void;
|
|
10972
|
+
/** Callback on error */
|
|
10973
|
+
onError?: (error: Error, themeName: string) => void;
|
|
10974
|
+
}
|
|
10975
|
+
/**
|
|
10976
|
+
* Theme context value
|
|
10977
|
+
*/
|
|
10978
|
+
interface ThemeContextValue {
|
|
10979
|
+
/** Current theme */
|
|
10980
|
+
theme: string;
|
|
10981
|
+
/** Set theme function */
|
|
10982
|
+
setTheme: (theme: string, options?: ThemeLoadOptions) => Promise<void>;
|
|
10983
|
+
/** Available themes */
|
|
10984
|
+
availableThemes: ThemeMetadata[];
|
|
10985
|
+
/** Loading state */
|
|
10986
|
+
isLoading: boolean;
|
|
10987
|
+
/** Error state */
|
|
10988
|
+
error: Error | null;
|
|
10989
|
+
/** Check if theme is loaded */
|
|
10990
|
+
isThemeLoaded: (themeName: string) => boolean;
|
|
10991
|
+
/** Preload theme */
|
|
10992
|
+
preloadTheme: (themeName: string) => Promise<void>;
|
|
10993
|
+
/** Theme manager instance */
|
|
10994
|
+
themeManager: ThemeManager;
|
|
10995
|
+
}
|
|
10996
|
+
/**
|
|
10997
|
+
* Storage adapter interface for custom storage implementations
|
|
10998
|
+
*/
|
|
10999
|
+
interface StorageAdapter {
|
|
11000
|
+
/** Get item from storage */
|
|
11001
|
+
getItem(key: string): string | null;
|
|
11002
|
+
/** Set item in storage */
|
|
11003
|
+
setItem(key: string, value: string): void;
|
|
11004
|
+
/** Remove item from storage */
|
|
11005
|
+
removeItem(key: string): void;
|
|
11006
|
+
/** Check if storage is available */
|
|
11007
|
+
isAvailable(): boolean;
|
|
11008
|
+
}
|
|
11009
|
+
|
|
11010
|
+
/**
|
|
11011
|
+
* Theme Manager
|
|
11012
|
+
*
|
|
11013
|
+
* Core theme management class for the Atomix Design System.
|
|
11014
|
+
* Handles theme loading, switching, persistence, and events.
|
|
11015
|
+
*/
|
|
11016
|
+
|
|
11017
|
+
/**
|
|
11018
|
+
* ThemeManager class
|
|
11019
|
+
*
|
|
11020
|
+
* Manages theme loading, switching, and persistence for Atomix Design System.
|
|
11021
|
+
*
|
|
11022
|
+
* @example
|
|
11023
|
+
* ```typescript
|
|
11024
|
+
* const themeManager = new ThemeManager({
|
|
11025
|
+
* themes: themesConfig.metadata,
|
|
11026
|
+
* defaultTheme: 'shaj-default',
|
|
11027
|
+
* });
|
|
11028
|
+
*
|
|
11029
|
+
* await themeManager.setTheme('flashtrade');
|
|
11030
|
+
* ```
|
|
11031
|
+
*/
|
|
11032
|
+
declare class ThemeManager {
|
|
11033
|
+
private config;
|
|
11034
|
+
private currentTheme;
|
|
11035
|
+
private loadedThemes;
|
|
11036
|
+
private loadingThemes;
|
|
11037
|
+
private eventListeners;
|
|
11038
|
+
private storageAdapter;
|
|
11039
|
+
private initialized;
|
|
11040
|
+
/**
|
|
11041
|
+
* Create a new ThemeManager instance
|
|
11042
|
+
*
|
|
11043
|
+
* @param config - Theme manager configuration
|
|
11044
|
+
*/
|
|
11045
|
+
constructor(config: ThemeManagerConfig);
|
|
11046
|
+
/**
|
|
11047
|
+
* Initialize the theme manager
|
|
11048
|
+
*/
|
|
11049
|
+
private initialize;
|
|
11050
|
+
/**
|
|
11051
|
+
* Get the current theme name
|
|
11052
|
+
*
|
|
11053
|
+
* @returns Current theme name
|
|
11054
|
+
*/
|
|
11055
|
+
getTheme(): string;
|
|
11056
|
+
/**
|
|
11057
|
+
* Get all available themes
|
|
11058
|
+
*
|
|
11059
|
+
* @returns Array of theme metadata
|
|
11060
|
+
*/
|
|
11061
|
+
getAvailableThemes(): ThemeMetadata[];
|
|
11062
|
+
/**
|
|
11063
|
+
* Get metadata for a specific theme
|
|
11064
|
+
*
|
|
11065
|
+
* @param themeName - Name of the theme
|
|
11066
|
+
* @returns Theme metadata or null if not found
|
|
11067
|
+
*/
|
|
11068
|
+
getThemeMetadata(themeName: string): ThemeMetadata | null;
|
|
11069
|
+
/**
|
|
11070
|
+
* Check if a theme is currently loaded
|
|
11071
|
+
*
|
|
11072
|
+
* @param themeName - Name of the theme to check
|
|
11073
|
+
* @returns True if theme is loaded
|
|
11074
|
+
*/
|
|
11075
|
+
isThemeLoaded(themeName: string): boolean;
|
|
11076
|
+
/**
|
|
11077
|
+
* Validate a theme name
|
|
11078
|
+
*
|
|
11079
|
+
* @param themeName - Theme name to validate
|
|
11080
|
+
* @returns True if theme exists and is valid
|
|
11081
|
+
*/
|
|
11082
|
+
validateTheme(themeName: string): boolean;
|
|
11083
|
+
/**
|
|
11084
|
+
* Preload a theme without applying it
|
|
11085
|
+
*
|
|
11086
|
+
* @param themeName - Name of the theme to preload
|
|
11087
|
+
* @returns Promise that resolves when theme is loaded
|
|
11088
|
+
*/
|
|
11089
|
+
preloadTheme(themeName: string): Promise<void>;
|
|
11090
|
+
/**
|
|
11091
|
+
* Set the current theme
|
|
11092
|
+
*
|
|
11093
|
+
* @param themeName - Name of the theme to set
|
|
11094
|
+
* @param options - Load options
|
|
11095
|
+
* @returns Promise that resolves when theme is applied
|
|
11096
|
+
*/
|
|
11097
|
+
setTheme(themeName: string, options?: ThemeLoadOptions): Promise<void>;
|
|
11098
|
+
/**
|
|
11099
|
+
* Enable theme persistence
|
|
11100
|
+
*
|
|
11101
|
+
* @param storageKey - Optional custom storage key
|
|
11102
|
+
*/
|
|
11103
|
+
enablePersistence(storageKey?: string): void;
|
|
11104
|
+
/**
|
|
11105
|
+
* Disable theme persistence
|
|
11106
|
+
*/
|
|
11107
|
+
disablePersistence(): void;
|
|
11108
|
+
/**
|
|
11109
|
+
* Clear all loaded themes
|
|
11110
|
+
*/
|
|
11111
|
+
clearThemes(): void;
|
|
11112
|
+
/**
|
|
11113
|
+
* Add event listener
|
|
11114
|
+
*
|
|
11115
|
+
* @param event - Event name
|
|
11116
|
+
* @param callback - Callback function
|
|
11117
|
+
*/
|
|
11118
|
+
on(event: 'themeChange', callback: ThemeChangeCallback): void;
|
|
11119
|
+
on(event: 'themeLoad', callback: ThemeLoadCallback): void;
|
|
11120
|
+
on(event: 'themeError', callback: ThemeErrorCallback): void;
|
|
11121
|
+
/**
|
|
11122
|
+
* Remove event listener
|
|
11123
|
+
*
|
|
11124
|
+
* @param event - Event name
|
|
11125
|
+
* @param callback - Callback function to remove
|
|
11126
|
+
*/
|
|
11127
|
+
off(event: 'themeChange', callback: ThemeChangeCallback): void;
|
|
11128
|
+
off(event: 'themeLoad', callback: ThemeLoadCallback): void;
|
|
11129
|
+
off(event: 'themeError', callback: ThemeErrorCallback): void;
|
|
11130
|
+
/**
|
|
11131
|
+
* Emit theme change event
|
|
11132
|
+
*/
|
|
11133
|
+
private emitThemeChange;
|
|
11134
|
+
/**
|
|
11135
|
+
* Emit theme load event
|
|
11136
|
+
*/
|
|
11137
|
+
private emitLoad;
|
|
11138
|
+
/**
|
|
11139
|
+
* Emit theme error event
|
|
11140
|
+
*/
|
|
11141
|
+
private emitError;
|
|
11142
|
+
/**
|
|
11143
|
+
* Destroy the theme manager and clean up
|
|
11144
|
+
*/
|
|
11145
|
+
destroy(): void;
|
|
11146
|
+
}
|
|
11147
|
+
|
|
11148
|
+
/**
|
|
11149
|
+
* Theme Provider
|
|
11150
|
+
*
|
|
11151
|
+
* React context provider for theme management
|
|
11152
|
+
*/
|
|
11153
|
+
|
|
11154
|
+
/**
|
|
11155
|
+
* ThemeProvider component
|
|
11156
|
+
*
|
|
11157
|
+
* Provides theme context to child components and manages theme state.
|
|
11158
|
+
*
|
|
11159
|
+
* @example
|
|
11160
|
+
* ```tsx
|
|
11161
|
+
* import { ThemeProvider } from '@shohojdhara/atomix/theme';
|
|
11162
|
+
* import { themesConfig } from '@shohojdhara/atomix/themes/themes.config';
|
|
11163
|
+
*
|
|
11164
|
+
* function App() {
|
|
11165
|
+
* return (
|
|
11166
|
+
* <ThemeProvider
|
|
11167
|
+
* themes={themesConfig.metadata}
|
|
11168
|
+
* defaultTheme="shaj-default"
|
|
11169
|
+
* >
|
|
11170
|
+
* <YourApp />
|
|
11171
|
+
* </ThemeProvider>
|
|
11172
|
+
* );
|
|
11173
|
+
* }
|
|
11174
|
+
* ```
|
|
11175
|
+
*/
|
|
11176
|
+
declare const ThemeProvider: react__default.FC<ThemeProviderProps>;
|
|
11177
|
+
|
|
11178
|
+
/**
|
|
11179
|
+
* useTheme Hook
|
|
11180
|
+
*
|
|
11181
|
+
* React hook for accessing and managing theme state
|
|
11182
|
+
*/
|
|
11183
|
+
|
|
11184
|
+
/**
|
|
11185
|
+
* useTheme hook
|
|
11186
|
+
*
|
|
11187
|
+
* Access theme context and manage theme state in React components.
|
|
11188
|
+
* Must be used within a ThemeProvider.
|
|
11189
|
+
*
|
|
11190
|
+
* @param options - Hook options
|
|
11191
|
+
* @returns Theme state and methods
|
|
11192
|
+
*
|
|
11193
|
+
* @example
|
|
11194
|
+
* ```tsx
|
|
11195
|
+
* function ThemeSwitcher() {
|
|
11196
|
+
* const { theme, setTheme, availableThemes, isLoading } = useTheme();
|
|
11197
|
+
*
|
|
11198
|
+
* return (
|
|
11199
|
+
* <select value={theme} onChange={(e) => setTheme(e.target.value)}>
|
|
11200
|
+
* {availableThemes.map(t => (
|
|
11201
|
+
* <option key={t.class} value={t.class}>{t.name}</option>
|
|
11202
|
+
* ))}
|
|
11203
|
+
* </select>
|
|
11204
|
+
* );
|
|
11205
|
+
* }
|
|
11206
|
+
* ```
|
|
11207
|
+
*/
|
|
11208
|
+
declare const useTheme: (options?: UseThemeOptions) => UseThemeReturn;
|
|
11209
|
+
|
|
11210
|
+
/**
|
|
11211
|
+
* Theme context with default values
|
|
11212
|
+
*/
|
|
11213
|
+
declare const ThemeContext: react.Context<ThemeContextValue>;
|
|
11214
|
+
|
|
11215
|
+
/**
|
|
11216
|
+
* Theme Manager Utility Functions
|
|
11217
|
+
*
|
|
11218
|
+
* Helper functions for theme operations including CSS loading, DOM manipulation,
|
|
11219
|
+
* and theme validation.
|
|
11220
|
+
*/
|
|
11221
|
+
|
|
11222
|
+
/**
|
|
11223
|
+
* Check if code is running in a browser environment
|
|
11224
|
+
*/
|
|
11225
|
+
declare const isBrowser: () => boolean;
|
|
11226
|
+
/**
|
|
11227
|
+
* Check if code is running on the server (SSR)
|
|
11228
|
+
*/
|
|
11229
|
+
declare const isServer: () => boolean;
|
|
11230
|
+
/**
|
|
11231
|
+
* Generate a unique ID for theme link elements
|
|
11232
|
+
*/
|
|
11233
|
+
declare const getThemeLinkId: (themeName: string) => string;
|
|
11234
|
+
/**
|
|
11235
|
+
* Build the CSS file path for a theme
|
|
11236
|
+
*
|
|
11237
|
+
* @param themeName - Name of the theme
|
|
11238
|
+
* @param basePath - Base path for theme files
|
|
11239
|
+
* @param useMinified - Whether to use minified CSS
|
|
11240
|
+
* @param cdnPath - Optional CDN path
|
|
11241
|
+
* @returns Full path to the theme CSS file
|
|
11242
|
+
*/
|
|
11243
|
+
declare const buildThemePath: (themeName: string, basePath?: string, useMinified?: boolean, cdnPath?: string | null) => string;
|
|
11244
|
+
/**
|
|
11245
|
+
* Load theme CSS file dynamically
|
|
11246
|
+
*
|
|
11247
|
+
* @param themeName - Name of the theme to load
|
|
11248
|
+
* @param basePath - Base path for theme files
|
|
11249
|
+
* @param useMinified - Whether to use minified CSS
|
|
11250
|
+
* @param cdnPath - Optional CDN path
|
|
11251
|
+
* @returns Promise that resolves when CSS is loaded
|
|
11252
|
+
*/
|
|
11253
|
+
declare const loadThemeCSS: (themeName: string, basePath?: string, useMinified?: boolean, cdnPath?: string | null) => Promise<void>;
|
|
11254
|
+
/**
|
|
11255
|
+
* Remove theme CSS from the DOM
|
|
11256
|
+
*
|
|
11257
|
+
* @param themeName - Name of the theme to remove
|
|
11258
|
+
*/
|
|
11259
|
+
declare const removeThemeCSS: (themeName: string) => void;
|
|
11260
|
+
/**
|
|
11261
|
+
* Remove all theme CSS files from the DOM
|
|
11262
|
+
*/
|
|
11263
|
+
declare const removeAllThemeCSS: () => void;
|
|
11264
|
+
/**
|
|
11265
|
+
* Apply theme data attributes to the document
|
|
11266
|
+
*
|
|
11267
|
+
* @param themeName - Name of the theme
|
|
11268
|
+
* @param dataAttribute - Data attribute name (default: 'data-theme')
|
|
11269
|
+
*/
|
|
11270
|
+
declare const applyThemeAttributes: (themeName: string, dataAttribute?: string) => void;
|
|
11271
|
+
/**
|
|
11272
|
+
* Remove theme data attributes from the document
|
|
11273
|
+
*
|
|
11274
|
+
* @param dataAttribute - Data attribute name (default: 'data-theme')
|
|
11275
|
+
*/
|
|
11276
|
+
declare const removeThemeAttributes: (dataAttribute?: string) => void;
|
|
11277
|
+
/**
|
|
11278
|
+
* Get the current theme from data attributes
|
|
11279
|
+
*
|
|
11280
|
+
* @param dataAttribute - Data attribute name (default: 'data-theme')
|
|
11281
|
+
* @returns Current theme name or null
|
|
11282
|
+
*/
|
|
11283
|
+
declare const getCurrentThemeFromDOM: (dataAttribute?: string) => string | null;
|
|
11284
|
+
/**
|
|
11285
|
+
* Detect system theme preference
|
|
11286
|
+
*
|
|
11287
|
+
* @returns 'dark' if system prefers dark mode, 'light' otherwise
|
|
11288
|
+
*/
|
|
11289
|
+
declare const getSystemTheme: () => "light" | "dark";
|
|
11290
|
+
/**
|
|
11291
|
+
* Check if a theme is currently loaded in the DOM
|
|
11292
|
+
*
|
|
11293
|
+
* @param themeName - Name of the theme to check
|
|
11294
|
+
* @returns True if theme CSS is loaded
|
|
11295
|
+
*/
|
|
11296
|
+
declare const isThemeLoaded: (themeName: string) => boolean;
|
|
11297
|
+
/**
|
|
11298
|
+
* Validate theme metadata
|
|
11299
|
+
*
|
|
11300
|
+
* @param metadata - Theme metadata to validate
|
|
11301
|
+
* @returns Validation result with errors and warnings
|
|
11302
|
+
*/
|
|
11303
|
+
declare const validateThemeMetadata: (metadata: unknown) => ThemeValidationResult;
|
|
11304
|
+
/**
|
|
11305
|
+
* Validate theme name format
|
|
11306
|
+
*
|
|
11307
|
+
* @param themeName - Theme name to validate
|
|
11308
|
+
* @returns True if valid
|
|
11309
|
+
*/
|
|
11310
|
+
declare const isValidThemeName: (themeName: string) => boolean;
|
|
11311
|
+
/**
|
|
11312
|
+
* Create a storage adapter for localStorage
|
|
11313
|
+
*/
|
|
11314
|
+
declare const createLocalStorageAdapter: () => {
|
|
11315
|
+
getItem: (key: string) => string | null;
|
|
11316
|
+
setItem: (key: string, value: string) => void;
|
|
11317
|
+
removeItem: (key: string) => void;
|
|
11318
|
+
isAvailable: () => boolean;
|
|
11319
|
+
};
|
|
11320
|
+
/**
|
|
11321
|
+
* Debounce function for performance optimization
|
|
11322
|
+
*
|
|
11323
|
+
* @param func - Function to debounce
|
|
11324
|
+
* @param wait - Wait time in milliseconds
|
|
11325
|
+
* @returns Debounced function
|
|
11326
|
+
*/
|
|
11327
|
+
declare const debounce: <T extends (...args: any[]) => any>(func: T, wait: number) => ((...args: Parameters<T>) => void);
|
|
11328
|
+
|
|
11329
|
+
/**
|
|
11330
|
+
* Theme Module Entry Point
|
|
11331
|
+
*
|
|
11332
|
+
* Exports all theme management utilities for the Atomix Design System
|
|
11333
|
+
*/
|
|
11334
|
+
|
|
11335
|
+
type themeImport_StorageAdapter = StorageAdapter;
|
|
11336
|
+
type themeImport_ThemeChangeCallback = ThemeChangeCallback;
|
|
11337
|
+
type themeImport_ThemeChangeEvent = ThemeChangeEvent;
|
|
11338
|
+
declare const themeImport_ThemeContext: typeof ThemeContext;
|
|
11339
|
+
type themeImport_ThemeContextValue = ThemeContextValue;
|
|
11340
|
+
type themeImport_ThemeErrorCallback = ThemeErrorCallback;
|
|
11341
|
+
type themeImport_ThemeEventListeners = ThemeEventListeners;
|
|
11342
|
+
type themeImport_ThemeLoadCallback = ThemeLoadCallback;
|
|
11343
|
+
type themeImport_ThemeLoadOptions = ThemeLoadOptions;
|
|
11344
|
+
type themeImport_ThemeManager = ThemeManager;
|
|
11345
|
+
declare const themeImport_ThemeManager: typeof ThemeManager;
|
|
11346
|
+
type themeImport_ThemeManagerConfig = ThemeManagerConfig;
|
|
11347
|
+
type themeImport_ThemeManagerEvent = ThemeManagerEvent;
|
|
11348
|
+
type themeImport_ThemeMetadata = ThemeMetadata;
|
|
11349
|
+
declare const themeImport_ThemeProvider: typeof ThemeProvider;
|
|
11350
|
+
type themeImport_ThemeProviderProps = ThemeProviderProps;
|
|
11351
|
+
type themeImport_ThemeValidationResult = ThemeValidationResult;
|
|
11352
|
+
type themeImport_UseThemeOptions = UseThemeOptions;
|
|
11353
|
+
type themeImport_UseThemeReturn = UseThemeReturn;
|
|
11354
|
+
declare const themeImport_applyThemeAttributes: typeof applyThemeAttributes;
|
|
11355
|
+
declare const themeImport_buildThemePath: typeof buildThemePath;
|
|
11356
|
+
declare const themeImport_createLocalStorageAdapter: typeof createLocalStorageAdapter;
|
|
11357
|
+
declare const themeImport_debounce: typeof debounce;
|
|
11358
|
+
declare const themeImport_getCurrentThemeFromDOM: typeof getCurrentThemeFromDOM;
|
|
11359
|
+
declare const themeImport_getSystemTheme: typeof getSystemTheme;
|
|
11360
|
+
declare const themeImport_getThemeLinkId: typeof getThemeLinkId;
|
|
11361
|
+
declare const themeImport_isBrowser: typeof isBrowser;
|
|
11362
|
+
declare const themeImport_isServer: typeof isServer;
|
|
11363
|
+
declare const themeImport_isThemeLoaded: typeof isThemeLoaded;
|
|
11364
|
+
declare const themeImport_isValidThemeName: typeof isValidThemeName;
|
|
11365
|
+
declare const themeImport_loadThemeCSS: typeof loadThemeCSS;
|
|
11366
|
+
declare const themeImport_removeAllThemeCSS: typeof removeAllThemeCSS;
|
|
11367
|
+
declare const themeImport_removeThemeAttributes: typeof removeThemeAttributes;
|
|
11368
|
+
declare const themeImport_removeThemeCSS: typeof removeThemeCSS;
|
|
11369
|
+
declare const themeImport_useTheme: typeof useTheme;
|
|
11370
|
+
declare const themeImport_validateThemeMetadata: typeof validateThemeMetadata;
|
|
11371
|
+
declare namespace themeImport {
|
|
11372
|
+
export { themeImport_ThemeContext as ThemeContext, ThemeContext as ThemeContextDefault, themeImport_ThemeManager as ThemeManager, ThemeManager as ThemeManagerDefault, themeImport_ThemeProvider as ThemeProvider, ThemeProvider as ThemeProviderDefault, themeImport_applyThemeAttributes as applyThemeAttributes, themeImport_buildThemePath as buildThemePath, themeImport_createLocalStorageAdapter as createLocalStorageAdapter, themeImport_debounce as debounce, themeImport_getCurrentThemeFromDOM as getCurrentThemeFromDOM, themeImport_getSystemTheme as getSystemTheme, themeImport_getThemeLinkId as getThemeLinkId, themeImport_isBrowser as isBrowser, themeImport_isServer as isServer, themeImport_isThemeLoaded as isThemeLoaded, themeImport_isValidThemeName as isValidThemeName, themeImport_loadThemeCSS as loadThemeCSS, themeImport_removeAllThemeCSS as removeAllThemeCSS, themeImport_removeThemeAttributes as removeThemeAttributes, themeImport_removeThemeCSS as removeThemeCSS, themeImport_useTheme as useTheme, useTheme as useThemeDefault, themeImport_validateThemeMetadata as validateThemeMetadata };
|
|
11373
|
+
export type { themeImport_StorageAdapter as StorageAdapter, themeImport_ThemeChangeCallback as ThemeChangeCallback, themeImport_ThemeChangeEvent as ThemeChangeEvent, themeImport_ThemeContextValue as ThemeContextValue, themeImport_ThemeErrorCallback as ThemeErrorCallback, themeImport_ThemeEventListeners as ThemeEventListeners, themeImport_ThemeLoadCallback as ThemeLoadCallback, themeImport_ThemeLoadOptions as ThemeLoadOptions, themeImport_ThemeManagerConfig as ThemeManagerConfig, themeImport_ThemeManagerEvent as ThemeManagerEvent, themeImport_ThemeMetadata as ThemeMetadata, themeImport_ThemeProviderProps as ThemeProviderProps, themeImport_ThemeValidationResult as ThemeValidationResult, themeImport_UseThemeOptions as UseThemeOptions, themeImport_UseThemeReturn as UseThemeReturn };
|
|
11374
|
+
}
|
|
11375
|
+
|
|
10752
11376
|
declare const composables: typeof __lib_composables;
|
|
10753
11377
|
declare const utils: typeof __lib_utils;
|
|
10754
11378
|
declare const types: typeof __lib_types;
|
|
10755
11379
|
declare const constants: typeof __lib_constants;
|
|
11380
|
+
declare const theme: typeof themeImport;
|
|
10756
11381
|
|
|
10757
11382
|
interface GridProps extends HTMLAttributes<HTMLDivElement> {
|
|
10758
11383
|
/**
|
|
@@ -11134,5 +11759,5 @@ declare const atomix: {
|
|
|
11134
11759
|
VideoPlayer: react.ForwardRefExoticComponent<VideoPlayerProps & react.RefAttributes<HTMLVideoElement>>;
|
|
11135
11760
|
};
|
|
11136
11761
|
|
|
11137
|
-
export { Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DataTable, DatePicker, DonutChart, Dropdown, EdgePanel, ElevationCard, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GaugeChart, Grid, GridCol, HeatmapChart, Hero, Icon, Input, LineChart, List, ListGroup, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, Nav, NavDropdown, NavItem, Navbar, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RadarChart, Radio, Rating, River, Row, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, Tabs, Testimonial, Textarea, Todo, Toggle, Tooltip, TreemapChart, Upload, VideoPlayer, WaterfallChart, composables, constants, atomix as default, types, utils };
|
|
11138
|
-
export type { AccordionProps, AnimatedChartProps, AreaChartProps, AtomixGlassProps, AtomixLogoProps, AvatarGroupProps, AvatarProps, BadgeProps, BarChartProps, BlockProps, BreadcrumbProps, BubbleChartProps, BubbleDataPoint, ButtonProps, CalloutProps, CandlestickChartProps, CandlestickDataPoint, CardProps, ChartProps, CheckboxProps, ColorModeToggleProps, ContainerProps, CountdownProps, DataTableProps, DatePickerProps, DonutChartProps, DropdownProps, EdgePanelProps, ElevationCardProps, FooterLayout, FooterLinkProps, FooterProps, FooterSectionProps, FooterSocialLinkProps, FormGroupProps, FormProps, FunnelChartProps, FunnelDataPoint, GaugeChartProps, GridColProps, GridProps, HeatmapChartProps, HeatmapDataPoint, HeroProps, IconProps, InputProps, LineChartProps, ListGroupProps, ListProps, MasonryGridItemProps, MasonryGridProps, MegaMenuColumnProps, MegaMenuLinkProps, MegaMenuProps, MenuDividerProps, MenuItemProps, MenuProps, MessagesProps, ModalProps, MultiAxisChartProps, NavDropdownProps, NavItemProps, NavProps, NavbarProps, PaginationProps, PhotoViewerProps, PieChartProps, PopoverProps, ProductReviewProps, ProgressProps, RadarChartProps, RadioProps, RatingProps, RiverProps, RowProps, ScatterChartProps, ScatterDataPoint, SectionIntroProps, SelectProps, SideMenuItemProps, SideMenuListProps, SideMenuProps, SliderProps, SocialLink, SocialPlatform, SpinnerProps, StepsProps, TabsProps, TestimonialProps, TextareaProps, TodoProps, ToggleProps, TooltipProps, TreemapChartProps, TreemapDataPoint, TreemapNode, UploadProps, VideoPlayerProps, WaterfallChartProps, WaterfallDataPoint };
|
|
11762
|
+
export { Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DataTable, DatePicker, DonutChart, Dropdown, EdgePanel, ElevationCard, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GaugeChart, Grid, GridCol, HeatmapChart, Hero, Icon, Input, LineChart, List, ListGroup, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, Nav, NavDropdown, NavItem, Navbar, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RadarChart, Radio, Rating, River, Row, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, Tabs, Testimonial, Textarea, ThemeContext, ThemeContext as ThemeContextDefault, ThemeManager, ThemeManager as ThemeManagerDefault, ThemeProvider, ThemeProvider as ThemeProviderDefault, Todo, Toggle, Tooltip, TreemapChart, Upload, VideoPlayer, WaterfallChart, applyThemeAttributes, buildThemePath, composables, constants, createLocalStorageAdapter, debounce, atomix as default, getCurrentThemeFromDOM, getSystemTheme, getThemeLinkId, isBrowser, isServer, isThemeLoaded, isValidThemeName, loadThemeCSS, removeAllThemeCSS, removeThemeAttributes, removeThemeCSS, theme, types, useTheme, useTheme as useThemeDefault, utils, validateThemeMetadata };
|
|
11763
|
+
export type { AccordionProps, AnimatedChartProps, AreaChartProps, AtomixGlassProps, AtomixLogoProps, AvatarGroupProps, AvatarProps, BadgeProps, BarChartProps, BlockProps, BreadcrumbProps, BubbleChartProps, BubbleDataPoint, ButtonProps, CalloutProps, CandlestickChartProps, CandlestickDataPoint, CardProps, ChartProps, CheckboxProps, ColorModeToggleProps, ContainerProps, CountdownProps, DataTableProps, DatePickerProps, DonutChartProps, DropdownProps, EdgePanelProps, ElevationCardProps, FooterLayout, FooterLinkProps, FooterProps, FooterSectionProps, FooterSocialLinkProps, FormGroupProps, FormProps, FunnelChartProps, FunnelDataPoint, GaugeChartProps, GridColProps, GridProps, HeatmapChartProps, HeatmapDataPoint, HeroProps, IconProps, InputProps, LineChartProps, ListGroupProps, ListProps, MasonryGridItemProps, MasonryGridProps, MegaMenuColumnProps, MegaMenuLinkProps, MegaMenuProps, MenuDividerProps, MenuItemProps, MenuProps, MessagesProps, ModalProps, MultiAxisChartProps, NavDropdownProps, NavItemProps, NavProps, NavbarProps, PaginationProps, PhotoViewerProps, PieChartProps, PopoverProps, ProductReviewProps, ProgressProps, RadarChartProps, RadioProps, RatingProps, RiverProps, RowProps, ScatterChartProps, ScatterDataPoint, SectionIntroProps, SelectProps, SideMenuItemProps, SideMenuListProps, SideMenuProps, SliderProps, SocialLink, SocialPlatform, SpinnerProps, StepsProps, StorageAdapter, TabsProps, TestimonialProps, TextareaProps, ThemeChangeCallback, ThemeChangeEvent, ThemeContextValue, ThemeErrorCallback, ThemeEventListeners, ThemeLoadCallback, ThemeLoadOptions, ThemeManagerConfig, ThemeManagerEvent, ThemeMetadata, ThemeProviderProps, ThemeValidationResult, TodoProps, ToggleProps, TooltipProps, TreemapChartProps, TreemapDataPoint, TreemapNode, UploadProps, UseThemeOptions, UseThemeReturn, VideoPlayerProps, WaterfallChartProps, WaterfallDataPoint };
|