@shohojdhara/atomix 0.2.9 → 0.3.1

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.
Files changed (102) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/atomix.css +309 -105
  3. package/dist/atomix.min.css +3 -5
  4. package/dist/index.d.ts +807 -51
  5. package/dist/index.esm.js +16367 -16405
  6. package/dist/index.esm.js.map +1 -1
  7. package/dist/index.js +16277 -16330
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.min.js +1 -1
  10. package/dist/index.min.js.map +1 -1
  11. package/dist/themes/applemix.css +309 -105
  12. package/dist/themes/applemix.min.css +5 -7
  13. package/dist/themes/boomdevs.css +202 -10
  14. package/dist/themes/boomdevs.min.css +3 -5
  15. package/dist/themes/esrar.css +309 -105
  16. package/dist/themes/esrar.min.css +4 -6
  17. package/dist/themes/flashtrade.css +310 -105
  18. package/dist/themes/flashtrade.min.css +5 -7
  19. package/dist/themes/mashroom.css +300 -96
  20. package/dist/themes/mashroom.min.css +4 -6
  21. package/dist/themes/shaj-default.css +300 -96
  22. package/dist/themes/shaj-default.min.css +4 -6
  23. package/package.json +1 -1
  24. package/src/components/AtomixGlass/AtomixGlass.test.tsx +21 -32
  25. package/src/components/AtomixGlass/AtomixGlass.tsx +55 -42
  26. package/src/components/AtomixGlass/AtomixGlassContainer.tsx +205 -57
  27. package/src/components/AtomixGlass/GlassFilter.tsx +22 -8
  28. package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap +221 -0
  29. package/src/components/AtomixGlass/atomixGLass.old.tsx +0 -3
  30. package/src/components/AtomixGlass/shader-utils.ts +8 -0
  31. package/src/components/AtomixGlass/stories/AtomixGlass.stories.tsx +319 -100
  32. package/src/components/AtomixGlass/stories/Examples.stories.tsx +601 -105
  33. package/src/components/AtomixGlass/stories/Modes.stories.tsx +30 -12
  34. package/src/components/AtomixGlass/stories/Playground.stories.tsx +173 -38
  35. package/src/components/AtomixGlass/stories/ShaderVariants.stories.tsx +18 -18
  36. package/src/components/AtomixGlass/stories/shared-components.tsx +27 -5
  37. package/src/components/Breadcrumb/Breadcrumb.tsx +8 -3
  38. package/src/components/Button/Button.tsx +62 -17
  39. package/src/components/Callout/Callout.test.tsx +8 -14
  40. package/src/components/Card/Card.tsx +103 -1
  41. package/src/components/Card/index.ts +3 -2
  42. package/src/components/Footer/Footer.stories.tsx +1 -2
  43. package/src/components/Footer/Footer.tsx +0 -5
  44. package/src/components/Footer/FooterLink.tsx +3 -2
  45. package/src/components/Footer/FooterSection.tsx +0 -7
  46. package/src/components/Icon/index.ts +1 -1
  47. package/src/components/Modal/Modal.stories.tsx +29 -38
  48. package/src/components/Modal/Modal.tsx +4 -4
  49. package/src/components/Navigation/Nav/NavItem.tsx +8 -3
  50. package/src/components/Navigation/SideMenu/SideMenu.tsx +49 -41
  51. package/src/components/Navigation/SideMenu/SideMenuItem.tsx +63 -19
  52. package/src/components/Popover/Popover.tsx +1 -1
  53. package/src/components/VideoPlayer/VideoPlayer.stories.tsx +977 -400
  54. package/src/components/VideoPlayer/VideoPlayer.tsx +1 -6
  55. package/src/lib/composables/shared-mouse-tracker.ts +133 -0
  56. package/src/lib/composables/useAtomixGlass.ts +303 -115
  57. package/src/lib/theme/ThemeManager.integration.test.ts +124 -0
  58. package/src/lib/theme/ThemeManager.stories.tsx +13 -13
  59. package/src/lib/theme/ThemeManager.test.ts +4 -0
  60. package/src/lib/theme/ThemeManager.ts +203 -59
  61. package/src/lib/theme/ThemeProvider.tsx +183 -33
  62. package/src/lib/theme/composeTheme.ts +375 -0
  63. package/src/lib/theme/createTheme.test.ts +475 -0
  64. package/src/lib/theme/createTheme.ts +510 -0
  65. package/src/lib/theme/generateCSSVariables.ts +713 -0
  66. package/src/lib/theme/index.ts +67 -0
  67. package/src/lib/theme/themeUtils.ts +333 -0
  68. package/src/lib/theme/types.ts +337 -8
  69. package/src/lib/theme/useTheme.test.tsx +2 -1
  70. package/src/lib/theme/useTheme.ts +6 -22
  71. package/src/lib/types/components.ts +152 -57
  72. package/src/styles/01-settings/_index.scss +2 -2
  73. package/src/styles/01-settings/_settings.badge.scss +2 -2
  74. package/src/styles/01-settings/_settings.border-radius.scss +1 -1
  75. package/src/styles/01-settings/{_settings.maps.scss → _settings.design-tokens.scss} +163 -49
  76. package/src/styles/01-settings/_settings.modal.scss +1 -1
  77. package/src/styles/01-settings/_settings.spacing.scss +14 -13
  78. package/src/styles/03-generic/_generic.root.scss +131 -50
  79. package/src/styles/05-objects/_objects.block.scss +1 -1
  80. package/src/styles/06-components/_components.atomix-glass.scss +20 -22
  81. package/src/styles/06-components/_components.badge.scss +2 -2
  82. package/src/styles/06-components/_components.button.scss +1 -1
  83. package/src/styles/06-components/_components.callout.scss +1 -1
  84. package/src/styles/06-components/_components.card.scss +74 -2
  85. package/src/styles/06-components/_components.chart.scss +1 -1
  86. package/src/styles/06-components/_components.dropdown.scss +6 -0
  87. package/src/styles/06-components/_components.footer.scss +1 -1
  88. package/src/styles/06-components/_components.list-group.scss +1 -1
  89. package/src/styles/06-components/_components.list.scss +1 -1
  90. package/src/styles/06-components/_components.menu.scss +1 -1
  91. package/src/styles/06-components/_components.messages.scss +1 -1
  92. package/src/styles/06-components/_components.modal.scss +7 -2
  93. package/src/styles/06-components/_components.navbar.scss +1 -1
  94. package/src/styles/06-components/_components.popover.scss +10 -0
  95. package/src/styles/06-components/_components.product-review.scss +1 -1
  96. package/src/styles/06-components/_components.progress.scss +1 -1
  97. package/src/styles/06-components/_components.rating.scss +1 -1
  98. package/src/styles/06-components/_components.spinner.scss +1 -1
  99. package/src/styles/99-utilities/_utilities.background.scss +1 -1
  100. package/src/styles/99-utilities/_utilities.border.scss +1 -1
  101. package/src/styles/99-utilities/_utilities.link.scss +1 -1
  102. package/src/styles/99-utilities/_utilities.text.scss +1 -1
package/dist/index.d.ts CHANGED
@@ -325,9 +325,19 @@ interface ButtonProps extends BaseComponentProps {
325
325
  */
326
326
  size?: Size;
327
327
  /**
328
- * Optional icon
328
+ * Optional icon (ReactNode)
329
329
  */
330
330
  icon?: ReactNode;
331
+ /**
332
+ * Icon name from Phosphor Icons (simplified icon prop)
333
+ * When provided, automatically creates an Icon component
334
+ * @example iconName="Rocket" iconSize="sm"
335
+ */
336
+ iconName?: string;
337
+ /**
338
+ * Icon size (used with iconName prop)
339
+ */
340
+ iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
331
341
  /**
332
342
  * Icon position (start or end)
333
343
  */
@@ -405,6 +415,15 @@ interface ButtonProps extends BaseComponentProps {
405
415
  * Tab index for keyboard navigation
406
416
  */
407
417
  tabIndex?: number;
418
+ /**
419
+ * Link URL - when provided, button renders as Next.js Link or anchor element
420
+ * Automatically wraps with Next.js Link if available, otherwise uses anchor
421
+ */
422
+ href?: string;
423
+ /**
424
+ * Link target attribute (used with href)
425
+ */
426
+ target?: '_blank' | '_self' | '_parent' | '_top';
408
427
  /**
409
428
  * Custom style for the button
410
429
  */
@@ -991,21 +1010,6 @@ interface SideMenuProps extends BaseComponentProps {
991
1010
  * Menu content (typically SideMenuList components)
992
1011
  */
993
1012
  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
- }[];
1009
1013
  /**
1010
1014
  * Whether the menu is open (for controlled component)
1011
1015
  */
@@ -1040,6 +1044,58 @@ interface SideMenuProps extends BaseComponentProps {
1040
1044
  * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
1041
1045
  */
1042
1046
  glass?: boolean | Omit<AtomixGlassProps, 'children'>;
1047
+ /**
1048
+ * Optional custom link component (e.g., Next.js Link, React Router Link)
1049
+ * Will be passed to all SideMenuItem components
1050
+ *
1051
+ * @example
1052
+ * ```tsx
1053
+ * // Next.js
1054
+ * import Link from 'next/link';
1055
+ * <SideMenu LinkComponent={Link} />
1056
+ *
1057
+ * // React Router
1058
+ * import { Link } from 'react-router-dom';
1059
+ * <SideMenu LinkComponent={Link} />
1060
+ * ```
1061
+ */
1062
+ LinkComponent?: React.ComponentType<{
1063
+ href?: string;
1064
+ to?: string;
1065
+ children: React.ReactNode;
1066
+ className?: string;
1067
+ onClick?: (event: React.MouseEvent) => void;
1068
+ target?: string;
1069
+ rel?: string;
1070
+ 'aria-disabled'?: boolean;
1071
+ 'aria-current'?: string;
1072
+ tabIndex?: number;
1073
+ ref?: React.Ref<HTMLAnchorElement>;
1074
+ }>;
1075
+ /**
1076
+ * Menu items
1077
+ */
1078
+ menuItems?: Array<{
1079
+ title?: ReactNode;
1080
+ toggleIcon?: ReactNode;
1081
+ items?: Array<{
1082
+ title?: ReactNode;
1083
+ icon?: ReactNode | undefined;
1084
+ href?: string | undefined;
1085
+ onClick?: (event: React.MouseEvent) => void | undefined;
1086
+ active?: boolean | undefined;
1087
+ disabled?: boolean | undefined;
1088
+ as?: React.ComponentType<{
1089
+ href?: string;
1090
+ to?: string;
1091
+ children: React.ReactNode;
1092
+ className?: string;
1093
+ onClick?: (event: React.MouseEvent) => void;
1094
+ target?: string;
1095
+ rel?: string;
1096
+ }> | undefined;
1097
+ }>;
1098
+ }>;
1043
1099
  }
1044
1100
  /**
1045
1101
  * SideMenuList component properties
@@ -1083,9 +1139,33 @@ interface SideMenuItemProps extends BaseComponentProps {
1083
1139
  */
1084
1140
  rel?: string;
1085
1141
  /**
1086
- * Optional custom link component
1087
- */
1088
- LinkComponent?: React.ElementType;
1142
+ * Optional custom link component (e.g., Next.js Link, React Router Link)
1143
+ * If not provided, will use LinkComponent from parent SideMenu context
1144
+ *
1145
+ * @example
1146
+ * ```tsx
1147
+ * // Next.js
1148
+ * import Link from 'next/link';
1149
+ * <SideMenuItem href="/about" LinkComponent={Link}>About</SideMenuItem>
1150
+ *
1151
+ * // React Router
1152
+ * import { Link } from 'react-router-dom';
1153
+ * <SideMenuItem href="/about" LinkComponent={Link}>About</SideMenuItem>
1154
+ * ```
1155
+ */
1156
+ LinkComponent?: React.ComponentType<{
1157
+ href?: string;
1158
+ to?: string;
1159
+ children: React.ReactNode;
1160
+ className?: string;
1161
+ onClick?: (event: React.MouseEvent) => void;
1162
+ target?: string;
1163
+ rel?: string;
1164
+ 'aria-disabled'?: boolean;
1165
+ 'aria-current'?: string;
1166
+ tabIndex?: number;
1167
+ ref?: React.Ref<HTMLAnchorElement>;
1168
+ }>;
1089
1169
  }
1090
1170
  /**
1091
1171
  * EdgePanel position options
@@ -2752,6 +2832,14 @@ interface CardProps extends BaseComponentProps {
2752
2832
  * Elevation level (shadow depth)
2753
2833
  */
2754
2834
  elevation?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
2835
+ /**
2836
+ * Enable hover effects (adds hover elevation and transition)
2837
+ */
2838
+ hoverable?: boolean;
2839
+ /**
2840
+ * Elevation level on hover (only applies when hoverable is true)
2841
+ */
2842
+ hoverElevation?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
2755
2843
  /**
2756
2844
  * Row layout (horizontal card)
2757
2845
  */
@@ -5433,7 +5521,7 @@ type ButtonAsProp = {
5433
5521
  href?: string;
5434
5522
  [key: string]: any;
5435
5523
  };
5436
- declare const Button: react__default.MemoExoticComponent<react__default.ForwardRefExoticComponent<Omit<ButtonProps & ButtonAsProp, "ref"> & react__default.RefAttributes<HTMLButtonElement>>>;
5524
+ declare const Button: react__default.MemoExoticComponent<react__default.ForwardRefExoticComponent<Omit<ButtonProps & ButtonAsProp, "ref"> & react__default.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>>;
5437
5525
 
5438
5526
  type __lib_types_AccordionState = AccordionState;
5439
5527
  type __lib_types_AtomixGlassProps = AtomixGlassProps;
@@ -10822,7 +10910,7 @@ interface ThemeManagerConfig {
10822
10910
  /** Available themes metadata */
10823
10911
  themes: Record<string, ThemeMetadata>;
10824
10912
  /** Default theme to use */
10825
- defaultTheme?: string;
10913
+ defaultTheme?: string | Theme;
10826
10914
  /** Base path for theme CSS files */
10827
10915
  basePath?: string;
10828
10916
  /** CDN path for theme CSS files (optional) */
@@ -10842,7 +10930,7 @@ interface ThemeManagerConfig {
10842
10930
  /** Use minified CSS files */
10843
10931
  useMinified?: boolean;
10844
10932
  /** Callback when theme changes */
10845
- onThemeChange?: (theme: string) => void;
10933
+ onThemeChange?: (theme: string | Theme) => void;
10846
10934
  /** Callback when theme load fails */
10847
10935
  onError?: (error: Error, themeName: string) => void;
10848
10936
  }
@@ -10854,6 +10942,8 @@ interface ThemeChangeEvent {
10854
10942
  previousTheme: string | null;
10855
10943
  /** New theme name */
10856
10944
  currentTheme: string;
10945
+ /** Theme object (for JS themes) */
10946
+ themeObject?: Theme | null;
10857
10947
  /** Timestamp of the change */
10858
10948
  timestamp: number;
10859
10949
  /** Whether the change was from user action or system */
@@ -10920,7 +11010,7 @@ interface UseThemeOptions {
10920
11010
  /** Custom storage key */
10921
11011
  storageKey?: string;
10922
11012
  /** Callback when theme changes */
10923
- onChange?: (theme: string) => void;
11013
+ onChange?: (theme: string | Theme) => void;
10924
11014
  }
10925
11015
  /**
10926
11016
  * React hook return type for useTheme
@@ -10928,8 +11018,10 @@ interface UseThemeOptions {
10928
11018
  interface UseThemeReturn {
10929
11019
  /** Current theme name */
10930
11020
  theme: string;
11021
+ /** Current active theme object (for JS themes) */
11022
+ activeTheme: Theme | null;
10931
11023
  /** Function to change theme */
10932
- setTheme: (theme: string, options?: ThemeLoadOptions) => Promise<void>;
11024
+ setTheme: (theme: string | Theme, options?: ThemeLoadOptions) => Promise<void>;
10933
11025
  /** Available themes */
10934
11026
  availableThemes: ThemeMetadata[];
10935
11027
  /** Whether a theme is currently loading */
@@ -10948,7 +11040,7 @@ interface ThemeProviderProps {
10948
11040
  /** Child components */
10949
11041
  children: React.ReactNode;
10950
11042
  /** Default theme */
10951
- defaultTheme?: string;
11043
+ defaultTheme?: string | Theme;
10952
11044
  /** Available themes */
10953
11045
  themes?: Record<string, ThemeMetadata>;
10954
11046
  /** Base path for theme CSS */
@@ -10968,7 +11060,7 @@ interface ThemeProviderProps {
10968
11060
  /** Use minified CSS */
10969
11061
  useMinified?: boolean;
10970
11062
  /** Callback when theme changes */
10971
- onThemeChange?: (theme: string) => void;
11063
+ onThemeChange?: (theme: string | Theme) => void;
10972
11064
  /** Callback on error */
10973
11065
  onError?: (error: Error, themeName: string) => void;
10974
11066
  }
@@ -10976,10 +11068,12 @@ interface ThemeProviderProps {
10976
11068
  * Theme context value
10977
11069
  */
10978
11070
  interface ThemeContextValue {
10979
- /** Current theme */
11071
+ /** Current theme name */
10980
11072
  theme: string;
11073
+ /** Current active theme object (for JS themes) */
11074
+ activeTheme: Theme | null;
10981
11075
  /** Set theme function */
10982
- setTheme: (theme: string, options?: ThemeLoadOptions) => Promise<void>;
11076
+ setTheme: (theme: string | Theme, options?: ThemeLoadOptions) => Promise<void>;
10983
11077
  /** Available themes */
10984
11078
  availableThemes: ThemeMetadata[];
10985
11079
  /** Loading state */
@@ -10993,6 +11087,311 @@ interface ThemeContextValue {
10993
11087
  /** Theme manager instance */
10994
11088
  themeManager: ThemeManager;
10995
11089
  }
11090
+ /**
11091
+ * Color palette configuration for a single color
11092
+ */
11093
+ interface PaletteColor {
11094
+ /** Main color value */
11095
+ main: string;
11096
+ /** Light variant (auto-generated if not provided) */
11097
+ light?: string;
11098
+ /** Dark variant (auto-generated if not provided) */
11099
+ dark?: string;
11100
+ /** Contrast text color (auto-generated if not provided) */
11101
+ contrastText?: string;
11102
+ }
11103
+ /**
11104
+ * Palette configuration options for createTheme
11105
+ */
11106
+ interface PaletteOptions {
11107
+ /** Primary color configuration */
11108
+ primary?: Partial<PaletteColor> | string;
11109
+ /** Secondary color configuration */
11110
+ secondary?: Partial<PaletteColor> | string;
11111
+ /** Error color configuration */
11112
+ error?: Partial<PaletteColor> | string;
11113
+ /** Warning color configuration */
11114
+ warning?: Partial<PaletteColor> | string;
11115
+ /** Info color configuration */
11116
+ info?: Partial<PaletteColor> | string;
11117
+ /** Success color configuration */
11118
+ success?: Partial<PaletteColor> | string;
11119
+ /** Background colors */
11120
+ background?: {
11121
+ default?: string;
11122
+ paper?: string;
11123
+ subtle?: string;
11124
+ };
11125
+ /** Text colors */
11126
+ text?: {
11127
+ primary?: string;
11128
+ secondary?: string;
11129
+ disabled?: string;
11130
+ };
11131
+ /** Additional custom colors */
11132
+ [key: string]: any;
11133
+ }
11134
+ /**
11135
+ * Typography configuration options for createTheme
11136
+ */
11137
+ interface TypographyOptions {
11138
+ /** Font family */
11139
+ fontFamily?: string;
11140
+ /** Base font size in pixels */
11141
+ fontSize?: number;
11142
+ /** Font weight scale */
11143
+ fontWeightLight?: number;
11144
+ fontWeightRegular?: number;
11145
+ fontWeightMedium?: number;
11146
+ fontWeightSemiBold?: number;
11147
+ fontWeightBold?: number;
11148
+ /** Heading configurations */
11149
+ h1?: {
11150
+ fontSize?: string | number;
11151
+ fontWeight?: number;
11152
+ lineHeight?: number | string;
11153
+ letterSpacing?: string;
11154
+ };
11155
+ h2?: {
11156
+ fontSize?: string | number;
11157
+ fontWeight?: number;
11158
+ lineHeight?: number | string;
11159
+ letterSpacing?: string;
11160
+ };
11161
+ h3?: {
11162
+ fontSize?: string | number;
11163
+ fontWeight?: number;
11164
+ lineHeight?: number | string;
11165
+ letterSpacing?: string;
11166
+ };
11167
+ h4?: {
11168
+ fontSize?: string | number;
11169
+ fontWeight?: number;
11170
+ lineHeight?: number | string;
11171
+ letterSpacing?: string;
11172
+ };
11173
+ h5?: {
11174
+ fontSize?: string | number;
11175
+ fontWeight?: number;
11176
+ lineHeight?: number | string;
11177
+ letterSpacing?: string;
11178
+ };
11179
+ h6?: {
11180
+ fontSize?: string | number;
11181
+ fontWeight?: number;
11182
+ lineHeight?: number | string;
11183
+ letterSpacing?: string;
11184
+ };
11185
+ /** Body text configurations */
11186
+ body1?: {
11187
+ fontSize?: string | number;
11188
+ fontWeight?: number;
11189
+ lineHeight?: number | string;
11190
+ };
11191
+ body2?: {
11192
+ fontSize?: string | number;
11193
+ fontWeight?: number;
11194
+ lineHeight?: number | string;
11195
+ };
11196
+ /** Additional custom typography */
11197
+ [key: string]: any;
11198
+ }
11199
+ /**
11200
+ * Spacing function type
11201
+ */
11202
+ type SpacingFunction = (...values: number[]) => string;
11203
+ /**
11204
+ * Spacing configuration options for createTheme
11205
+ */
11206
+ type SpacingOptions = number | number[] | SpacingFunction;
11207
+ /**
11208
+ * Breakpoint values configuration
11209
+ */
11210
+ interface BreakpointValues {
11211
+ xs?: number;
11212
+ sm?: number;
11213
+ md?: number;
11214
+ lg?: number;
11215
+ xl?: number;
11216
+ [key: string]: number | undefined;
11217
+ }
11218
+ /**
11219
+ * Breakpoints configuration options for createTheme
11220
+ */
11221
+ interface BreakpointsOptions {
11222
+ /** Breakpoint values in pixels */
11223
+ values?: BreakpointValues;
11224
+ /** Unit for breakpoints (default: 'px') */
11225
+ unit?: string;
11226
+ }
11227
+ /**
11228
+ * Shadow configuration
11229
+ */
11230
+ interface ShadowOptions {
11231
+ xs?: string;
11232
+ sm?: string;
11233
+ md?: string;
11234
+ lg?: string;
11235
+ xl?: string;
11236
+ [key: string]: string | undefined;
11237
+ }
11238
+ /**
11239
+ * Transition configuration
11240
+ */
11241
+ interface TransitionOptions {
11242
+ /** Transition duration values */
11243
+ duration?: {
11244
+ shortest?: number;
11245
+ shorter?: number;
11246
+ short?: number;
11247
+ standard?: number;
11248
+ complex?: number;
11249
+ enteringScreen?: number;
11250
+ leavingScreen?: number;
11251
+ };
11252
+ /** Easing functions */
11253
+ easing?: {
11254
+ easeInOut?: string;
11255
+ easeOut?: string;
11256
+ easeIn?: string;
11257
+ sharp?: string;
11258
+ };
11259
+ }
11260
+ /**
11261
+ * Z-index configuration
11262
+ */
11263
+ interface ZIndexOptions {
11264
+ mobileStepper?: number;
11265
+ speedDial?: number;
11266
+ appBar?: number;
11267
+ drawer?: number;
11268
+ modal?: number;
11269
+ snackbar?: number;
11270
+ tooltip?: number;
11271
+ [key: string]: number | undefined;
11272
+ }
11273
+ /**
11274
+ * Border radius configuration
11275
+ */
11276
+ interface BorderRadiusOptions {
11277
+ /** Base border radius */
11278
+ base?: string | number;
11279
+ /** Small border radius */
11280
+ sm?: string | number;
11281
+ /** Medium border radius */
11282
+ md?: string | number;
11283
+ /** Large border radius */
11284
+ lg?: string | number;
11285
+ /** Extra large border radius */
11286
+ xl?: string | number;
11287
+ /** 2X large border radius */
11288
+ xxl?: string | number;
11289
+ /** 3X large border radius */
11290
+ '3xl'?: string | number;
11291
+ /** 4X large border radius */
11292
+ '4xl'?: string | number;
11293
+ /** Pill shape (fully rounded) */
11294
+ pill?: string | number;
11295
+ [key: string]: string | number | undefined;
11296
+ }
11297
+ /**
11298
+ * Custom theme properties for extension
11299
+ * Users can augment this interface via module augmentation
11300
+ */
11301
+ interface ThemeCustomProperties {
11302
+ [key: string]: any;
11303
+ }
11304
+ /**
11305
+ * Theme configuration options for createTheme
11306
+ * Extends ThemeMetadata to support both CSS and JS theme properties
11307
+ */
11308
+ interface ThemeOptions extends Partial<ThemeMetadata> {
11309
+ /** Color palette configuration */
11310
+ palette?: PaletteOptions;
11311
+ /** Typography configuration */
11312
+ typography?: TypographyOptions;
11313
+ /** Spacing configuration */
11314
+ spacing?: SpacingOptions;
11315
+ /** Breakpoints configuration */
11316
+ breakpoints?: BreakpointsOptions;
11317
+ /** Shadow configuration */
11318
+ shadows?: ShadowOptions;
11319
+ /** Transition configuration */
11320
+ transitions?: TransitionOptions;
11321
+ /** Z-index configuration */
11322
+ zIndex?: ZIndexOptions;
11323
+ /** Border radius configuration */
11324
+ borderRadius?: BorderRadiusOptions;
11325
+ /** Custom properties */
11326
+ custom?: ThemeCustomProperties;
11327
+ }
11328
+ /**
11329
+ * Complete theme object with computed values
11330
+ * Generated by createTheme function
11331
+ */
11332
+ interface Theme extends ThemeMetadata {
11333
+ /** Color palette with computed values */
11334
+ palette: {
11335
+ primary: PaletteColor;
11336
+ secondary: PaletteColor;
11337
+ error: PaletteColor;
11338
+ warning: PaletteColor;
11339
+ info: PaletteColor;
11340
+ success: PaletteColor;
11341
+ background: {
11342
+ default: string;
11343
+ paper: string;
11344
+ subtle: string;
11345
+ };
11346
+ text: {
11347
+ primary: string;
11348
+ secondary: string;
11349
+ disabled: string;
11350
+ };
11351
+ [key: string]: any;
11352
+ };
11353
+ /** Typography with computed values */
11354
+ typography: {
11355
+ fontFamily: string;
11356
+ fontSize: number;
11357
+ fontWeightLight: number;
11358
+ fontWeightRegular: number;
11359
+ fontWeightMedium: number;
11360
+ fontWeightSemiBold: number;
11361
+ fontWeightBold: number;
11362
+ h1: Required<NonNullable<TypographyOptions['h1']>>;
11363
+ h2: Required<NonNullable<TypographyOptions['h2']>>;
11364
+ h3: Required<NonNullable<TypographyOptions['h3']>>;
11365
+ h4: Required<NonNullable<TypographyOptions['h4']>>;
11366
+ h5: Required<NonNullable<TypographyOptions['h5']>>;
11367
+ h6: Required<NonNullable<TypographyOptions['h6']>>;
11368
+ body1: Required<NonNullable<TypographyOptions['body1']>>;
11369
+ body2: Required<NonNullable<TypographyOptions['body2']>>;
11370
+ [key: string]: any;
11371
+ };
11372
+ /** Spacing function */
11373
+ spacing: SpacingFunction;
11374
+ /** Breakpoints with computed values */
11375
+ breakpoints: {
11376
+ values: Required<BreakpointValues>;
11377
+ unit: string;
11378
+ up: (key: keyof BreakpointValues | number) => string;
11379
+ down: (key: keyof BreakpointValues | number) => string;
11380
+ between: (start: keyof BreakpointValues | number, end: keyof BreakpointValues | number) => string;
11381
+ };
11382
+ /** Shadows */
11383
+ shadows: Required<ShadowOptions>;
11384
+ /** Transitions */
11385
+ transitions: Required<TransitionOptions>;
11386
+ /** Z-index values */
11387
+ zIndex: Required<ZIndexOptions>;
11388
+ /** Border radius values */
11389
+ borderRadius: Required<BorderRadiusOptions>;
11390
+ /** Custom properties */
11391
+ custom: ThemeCustomProperties;
11392
+ /** Indicates this is a JS theme (not CSS-only) */
11393
+ __isJSTheme: true;
11394
+ }
10996
11395
  /**
10997
11396
  * Storage adapter interface for custom storage implementations
10998
11397
  */
@@ -11012,6 +11411,7 @@ interface StorageAdapter {
11012
11411
  *
11013
11412
  * Core theme management class for the Atomix Design System.
11014
11413
  * Handles theme loading, switching, persistence, and events.
11414
+ * Supports both CSS-based themes and JavaScript-based themes.
11015
11415
  */
11016
11416
 
11017
11417
  /**
@@ -11032,6 +11432,7 @@ interface StorageAdapter {
11032
11432
  declare class ThemeManager {
11033
11433
  private config;
11034
11434
  private currentTheme;
11435
+ private activeTheme;
11035
11436
  private loadedThemes;
11036
11437
  private loadingThemes;
11037
11438
  private eventListeners;
@@ -11053,6 +11454,10 @@ declare class ThemeManager {
11053
11454
  * @returns Current theme name
11054
11455
  */
11055
11456
  getTheme(): string;
11457
+ /**
11458
+ * Get the current active theme object (for JS themes)
11459
+ */
11460
+ getActiveTheme(): Theme | null;
11056
11461
  /**
11057
11462
  * Get all available themes
11058
11463
  *
@@ -11090,11 +11495,11 @@ declare class ThemeManager {
11090
11495
  /**
11091
11496
  * Set the current theme
11092
11497
  *
11093
- * @param themeName - Name of the theme to set
11498
+ * @param themeOrName - Name of the theme or Theme object to set
11094
11499
  * @param options - Load options
11095
11500
  * @returns Promise that resolves when theme is applied
11096
11501
  */
11097
- setTheme(themeName: string, options?: ThemeLoadOptions): Promise<void>;
11502
+ setTheme(themeOrName: string | Theme, options?: ThemeLoadOptions): Promise<void>;
11098
11503
  /**
11099
11504
  * Enable theme persistence
11100
11505
  *
@@ -11186,31 +11591,332 @@ declare const ThemeProvider: react__default.FC<ThemeProviderProps>;
11186
11591
  *
11187
11592
  * Access theme context and manage theme state in React components.
11188
11593
  * Must be used within a ThemeProvider.
11594
+ */
11595
+ declare const useTheme: (options?: UseThemeOptions) => UseThemeReturn;
11596
+
11597
+ /**
11598
+ * Theme context with default values
11599
+ */
11600
+ declare const ThemeContext: react.Context<ThemeContextValue>;
11601
+
11602
+ /**
11603
+ * createTheme - Create a theme object with computed values
11189
11604
  *
11190
- * @param options - Hook options
11191
- * @returns Theme state and methods
11605
+ * Similar to Material-UI's createTheme, this function accepts theme configuration
11606
+ * options and returns a complete theme object with computed values.
11192
11607
  *
11193
11608
  * @example
11194
- * ```tsx
11195
- * function ThemeSwitcher() {
11196
- * const { theme, setTheme, availableThemes, isLoading } = useTheme();
11609
+ * ```typescript
11610
+ * const theme = createTheme({
11611
+ * palette: {
11612
+ * primary: { main: '#7AFFD7' },
11613
+ * secondary: { main: '#FF5733' },
11614
+ * },
11615
+ * typography: {
11616
+ * fontFamily: 'Inter, sans-serif',
11617
+ * },
11618
+ * });
11619
+ * ```
11620
+ */
11621
+
11622
+ /**
11623
+ * Create a theme object with computed values
11197
11624
  *
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
- * }
11625
+ * @param options - Theme configuration options
11626
+ * @returns Complete theme object
11627
+ */
11628
+ declare function createTheme(...options: ThemeOptions[]): Theme;
11629
+
11630
+ /**
11631
+ * CSS Variable Generator
11632
+ *
11633
+ * Generates CSS custom properties from theme objects and injects them into the DOM.
11634
+ * Follows the existing --atomix- prefix convention.
11635
+ */
11636
+
11637
+ /**
11638
+ * Options for CSS variable generation
11639
+ */
11640
+ interface GenerateCSSVariablesOptions {
11641
+ /** CSS selector for the variables (default: ':root') */
11642
+ selector?: string;
11643
+ /** Whether to inject the CSS into the DOM */
11644
+ inject?: boolean;
11645
+ /** ID for the injected style element */
11646
+ styleId?: string;
11647
+ /** Prefix for CSS variables (default: 'atomix') */
11648
+ prefix?: string;
11649
+ }
11650
+ /**
11651
+ * Generate CSS custom properties from a theme object
11652
+ *
11653
+ * @param theme - Theme object created with createTheme
11654
+ * @param options - Generation options
11655
+ * @returns CSS string with custom properties
11656
+ */
11657
+ declare function generateCSSVariables(theme: Theme, options?: GenerateCSSVariablesOptions): string;
11658
+ /**
11659
+ * Inject CSS into the DOM
11660
+ *
11661
+ * @param css - CSS string to inject
11662
+ * @param styleId - ID for the style element
11663
+ */
11664
+ declare function injectCSS(css: string, styleId?: string): void;
11665
+ /**
11666
+ * Remove injected CSS from the DOM
11667
+ *
11668
+ * @param styleId - ID of the style element to remove
11669
+ */
11670
+ declare function removeInjectedCSS(styleId?: string): void;
11671
+ /**
11672
+ * Generate CSS variables for a specific theme section
11673
+ *
11674
+ * @param theme - Theme object
11675
+ * @param section - Theme section to generate variables for
11676
+ * @param options - Generation options
11677
+ * @returns CSS string with custom properties for the section
11678
+ */
11679
+ declare function generateSectionVariables(theme: Theme, section: 'palette' | 'typography' | 'shadows' | 'transitions' | 'zIndex' | 'breakpoints' | 'spacing' | 'borders' | 'borderRadius' | 'focusRing', options?: GenerateCSSVariablesOptions): string;
11680
+
11681
+ /**
11682
+ * Theme Composition Utilities
11683
+ *
11684
+ * Utilities for composing, merging, and extending themes.
11685
+ */
11686
+
11687
+ /**
11688
+ * Deep merge multiple objects
11689
+ * Later objects override earlier ones
11690
+ */
11691
+ declare function deepMerge<T extends Record<string, any>>(...objects: Partial<T>[]): T;
11692
+ /**
11693
+ * Merge multiple theme options into a single theme options object
11694
+ *
11695
+ * @param themes - Theme options to merge
11696
+ * @returns Merged theme options
11697
+ *
11698
+ * @example
11699
+ * ```typescript
11700
+ * const baseTheme = { palette: { primary: { main: '#000' } } };
11701
+ * const customTheme = { palette: { secondary: { main: '#fff' } } };
11702
+ * const merged = mergeTheme(baseTheme, customTheme);
11206
11703
  * ```
11207
11704
  */
11208
- declare const useTheme: (options?: UseThemeOptions) => UseThemeReturn;
11705
+ declare function mergeTheme(...themes: ThemeOptions[]): ThemeOptions;
11706
+ /**
11707
+ * Extend an existing theme with new options
11708
+ *
11709
+ * @param baseTheme - Base theme to extend (can be Theme or ThemeOptions)
11710
+ * @param extension - Theme options to extend with
11711
+ * @returns New theme with extended options
11712
+ *
11713
+ * @example
11714
+ * ```typescript
11715
+ * const base = createTheme({ palette: { primary: { main: '#000' } } });
11716
+ * const extended = extendTheme(base, {
11717
+ * palette: { secondary: { main: '#fff' } }
11718
+ * });
11719
+ * ```
11720
+ */
11721
+ declare function extendTheme(baseTheme: Theme | ThemeOptions, extension: ThemeOptions): Theme;
11722
+ /**
11723
+ * Create light and dark variants from a base theme
11724
+ *
11725
+ * @param baseTheme - Base theme options
11726
+ * @returns Object with light and dark theme variants
11727
+ *
11728
+ * @example
11729
+ * ```typescript
11730
+ * const { light, dark } = createThemeVariants({
11731
+ * palette: { primary: { main: '#7AFFD7' } }
11732
+ * });
11733
+ * ```
11734
+ */
11735
+ declare function createThemeVariants(baseTheme: ThemeOptions): {
11736
+ light: Theme;
11737
+ dark: Theme;
11738
+ };
11739
+ /**
11740
+ * Create a theme with specific overrides
11741
+ *
11742
+ * @param baseTheme - Base theme
11743
+ * @param overrides - Specific overrides to apply
11744
+ * @returns New theme with overrides
11745
+ *
11746
+ * @example
11747
+ * ```typescript
11748
+ * const theme = overrideTheme(baseTheme, {
11749
+ * 'palette.primary.main': '#FF0000',
11750
+ * 'typography.fontSize': 16,
11751
+ * });
11752
+ * ```
11753
+ */
11754
+ declare function overrideTheme(baseTheme: Theme | ThemeOptions, overrides: Record<string, any>): Theme;
11755
+ /**
11756
+ * Compose multiple themes by merging them in order
11757
+ *
11758
+ * @param themes - Themes to compose (later themes override earlier ones)
11759
+ * @returns Composed theme
11760
+ *
11761
+ * @example
11762
+ * ```typescript
11763
+ * const theme = composeThemes(
11764
+ * baseTheme,
11765
+ * brandTheme,
11766
+ * customizationTheme
11767
+ * );
11768
+ * ```
11769
+ */
11770
+ declare function composeThemes(...themes: (Theme | ThemeOptions)[]): Theme;
11771
+ /**
11772
+ * Create a theme preset with common configurations
11773
+ *
11774
+ * @param preset - Preset name
11775
+ * @param customizations - Additional customizations
11776
+ * @returns Theme with preset applied
11777
+ */
11778
+ declare function createThemePreset(preset: 'minimal' | 'modern' | 'classic' | 'vibrant', customizations?: ThemeOptions): Theme;
11209
11779
 
11210
11780
  /**
11211
- * Theme context with default values
11781
+ * Theme Utilities
11782
+ *
11783
+ * Helper utilities for working with themes, including color manipulation,
11784
+ * spacing helpers, and theme value accessors.
11212
11785
  */
11213
- declare const ThemeContext: react.Context<ThemeContextValue>;
11786
+
11787
+ /**
11788
+ * Convert hex color to RGB object
11789
+ */
11790
+ declare function hexToRgb(hex: string): {
11791
+ r: number;
11792
+ g: number;
11793
+ b: number;
11794
+ } | null;
11795
+ /**
11796
+ * Convert RGB to hex color
11797
+ */
11798
+ declare function rgbToHex(r: number, g: number, b: number): string;
11799
+ /**
11800
+ * Calculate relative luminance of a color
11801
+ * Used for determining contrast ratios
11802
+ */
11803
+ declare function getLuminance(color: string): number;
11804
+ /**
11805
+ * Calculate contrast ratio between two colors
11806
+ */
11807
+ declare function getContrastRatio(foreground: string, background: string): number;
11808
+ /**
11809
+ * Get appropriate contrast text color (black or white) for a background color
11810
+ */
11811
+ declare function getContrastText(background: string, threshold?: number): string;
11812
+ /**
11813
+ * Lighten a color by a given amount
11814
+ *
11815
+ * @param color - Hex color string
11816
+ * @param amount - Amount to lighten (0-1), default 0.2
11817
+ * @returns Lightened hex color
11818
+ */
11819
+ declare function lighten(color: string, amount?: number): string;
11820
+ /**
11821
+ * Darken a color by a given amount
11822
+ *
11823
+ * @param color - Hex color string
11824
+ * @param amount - Amount to darken (0-1), default 0.2
11825
+ * @returns Darkened hex color
11826
+ */
11827
+ declare function darken(color: string, amount?: number): string;
11828
+ /**
11829
+ * Add alpha (opacity) to a color
11830
+ *
11831
+ * @param color - Hex color string
11832
+ * @param opacity - Opacity value (0-1)
11833
+ * @returns RGBA color string
11834
+ */
11835
+ declare function alpha(color: string, opacity: number): string;
11836
+ /**
11837
+ * Emphasize a color (lighten if dark, darken if light)
11838
+ *
11839
+ * @param color - Hex color string
11840
+ * @param coefficient - Amount to emphasize (0-1), default 0.15
11841
+ * @returns Emphasized hex color
11842
+ */
11843
+ declare function emphasize(color: string, coefficient?: number): string;
11844
+ /**
11845
+ * Create a spacing function with a given base unit
11846
+ *
11847
+ * @param base - Base spacing unit in pixels, default 4
11848
+ * @returns Spacing function
11849
+ */
11850
+ declare function createSpacing(base?: number): SpacingFunction;
11851
+ /**
11852
+ * Get spacing value from theme
11853
+ *
11854
+ * @param theme - Theme object
11855
+ * @param values - Spacing multipliers
11856
+ * @returns Spacing string
11857
+ */
11858
+ declare function spacing(theme: Theme, ...values: number[]): string;
11859
+ /**
11860
+ * Safely get a nested value from theme using dot notation
11861
+ *
11862
+ * @param theme - Theme object
11863
+ * @param path - Dot-notation path (e.g., 'palette.primary.main')
11864
+ * @param fallback - Fallback value if path not found
11865
+ * @returns Theme value or fallback
11866
+ */
11867
+ declare function getThemeValue<T = any>(theme: Theme, path: string, fallback?: T): T;
11868
+ /**
11869
+ * Check if a theme is a JS theme (created with createTheme)
11870
+ */
11871
+ declare function isJSTheme(theme: any): theme is Theme;
11872
+ /**
11873
+ * Get media query for breakpoint up
11874
+ */
11875
+ declare function breakpointUp(theme: Theme, key: keyof Theme['breakpoints']['values'] | number): string;
11876
+ /**
11877
+ * Get media query for breakpoint down
11878
+ */
11879
+ declare function breakpointDown(theme: Theme, key: keyof Theme['breakpoints']['values'] | number): string;
11880
+ /**
11881
+ * Get media query for breakpoint between
11882
+ */
11883
+ declare function breakpointBetween(theme: Theme, start: keyof Theme['breakpoints']['values'] | number, end: keyof Theme['breakpoints']['values'] | number): string;
11884
+ /**
11885
+ * Get typography variant styles
11886
+ */
11887
+ declare function getTypography(theme: Theme, variant: keyof Theme['typography']): any;
11888
+ /**
11889
+ * Convert rem to px based on theme font size
11890
+ */
11891
+ declare function remToPx(theme: Theme, rem: number): number;
11892
+ /**
11893
+ * Convert px to rem based on theme font size
11894
+ */
11895
+ declare function pxToRem(theme: Theme, px: number): string;
11896
+ /**
11897
+ * Get shadow value from theme
11898
+ */
11899
+ declare function getShadow(theme: Theme, level: keyof Theme['shadows']): string;
11900
+ /**
11901
+ * Create a transition string
11902
+ */
11903
+ declare function createTransition(theme: Theme, props: string | string[], options?: {
11904
+ duration?: keyof Theme['transitions']['duration'] | number;
11905
+ easing?: keyof Theme['transitions']['easing'] | string;
11906
+ delay?: number;
11907
+ }): string;
11908
+ /**
11909
+ * Get transition duration
11910
+ */
11911
+ declare function getTransitionDuration(theme: Theme, key: keyof Theme['transitions']['duration']): number;
11912
+ /**
11913
+ * Get transition easing
11914
+ */
11915
+ declare function getTransitionEasing(theme: Theme, key: keyof Theme['transitions']['easing']): string;
11916
+ /**
11917
+ * Get z-index value from theme
11918
+ */
11919
+ declare function getZIndex(theme: Theme, key: keyof Theme['zIndex']): number;
11214
11920
 
11215
11921
  /**
11216
11922
  * Theme Manager Utility Functions
@@ -11332,11 +12038,21 @@ declare const debounce: <T extends (...args: any[]) => any>(func: T, wait: numbe
11332
12038
  * Exports all theme management utilities for the Atomix Design System
11333
12039
  */
11334
12040
 
12041
+ type themeImport_BreakpointValues = BreakpointValues;
12042
+ type themeImport_BreakpointsOptions = BreakpointsOptions;
12043
+ type themeImport_GenerateCSSVariablesOptions = GenerateCSSVariablesOptions;
12044
+ type themeImport_PaletteColor = PaletteColor;
12045
+ type themeImport_PaletteOptions = PaletteOptions;
12046
+ type themeImport_ShadowOptions = ShadowOptions;
12047
+ type themeImport_SpacingFunction = SpacingFunction;
12048
+ type themeImport_SpacingOptions = SpacingOptions;
11335
12049
  type themeImport_StorageAdapter = StorageAdapter;
12050
+ type themeImport_Theme = Theme;
11336
12051
  type themeImport_ThemeChangeCallback = ThemeChangeCallback;
11337
12052
  type themeImport_ThemeChangeEvent = ThemeChangeEvent;
11338
12053
  declare const themeImport_ThemeContext: typeof ThemeContext;
11339
12054
  type themeImport_ThemeContextValue = ThemeContextValue;
12055
+ type themeImport_ThemeCustomProperties = ThemeCustomProperties;
11340
12056
  type themeImport_ThemeErrorCallback = ThemeErrorCallback;
11341
12057
  type themeImport_ThemeEventListeners = ThemeEventListeners;
11342
12058
  type themeImport_ThemeLoadCallback = ThemeLoadCallback;
@@ -11346,31 +12062,71 @@ declare const themeImport_ThemeManager: typeof ThemeManager;
11346
12062
  type themeImport_ThemeManagerConfig = ThemeManagerConfig;
11347
12063
  type themeImport_ThemeManagerEvent = ThemeManagerEvent;
11348
12064
  type themeImport_ThemeMetadata = ThemeMetadata;
12065
+ type themeImport_ThemeOptions = ThemeOptions;
11349
12066
  declare const themeImport_ThemeProvider: typeof ThemeProvider;
11350
12067
  type themeImport_ThemeProviderProps = ThemeProviderProps;
11351
12068
  type themeImport_ThemeValidationResult = ThemeValidationResult;
12069
+ type themeImport_TransitionOptions = TransitionOptions;
12070
+ type themeImport_TypographyOptions = TypographyOptions;
11352
12071
  type themeImport_UseThemeOptions = UseThemeOptions;
11353
12072
  type themeImport_UseThemeReturn = UseThemeReturn;
12073
+ type themeImport_ZIndexOptions = ZIndexOptions;
12074
+ declare const themeImport_alpha: typeof alpha;
11354
12075
  declare const themeImport_applyThemeAttributes: typeof applyThemeAttributes;
12076
+ declare const themeImport_breakpointBetween: typeof breakpointBetween;
12077
+ declare const themeImport_breakpointDown: typeof breakpointDown;
12078
+ declare const themeImport_breakpointUp: typeof breakpointUp;
11355
12079
  declare const themeImport_buildThemePath: typeof buildThemePath;
12080
+ declare const themeImport_composeThemes: typeof composeThemes;
11356
12081
  declare const themeImport_createLocalStorageAdapter: typeof createLocalStorageAdapter;
12082
+ declare const themeImport_createSpacing: typeof createSpacing;
12083
+ declare const themeImport_createTheme: typeof createTheme;
12084
+ declare const themeImport_createThemePreset: typeof createThemePreset;
12085
+ declare const themeImport_createThemeVariants: typeof createThemeVariants;
12086
+ declare const themeImport_createTransition: typeof createTransition;
12087
+ declare const themeImport_darken: typeof darken;
11357
12088
  declare const themeImport_debounce: typeof debounce;
12089
+ declare const themeImport_deepMerge: typeof deepMerge;
12090
+ declare const themeImport_emphasize: typeof emphasize;
12091
+ declare const themeImport_extendTheme: typeof extendTheme;
12092
+ declare const themeImport_generateCSSVariables: typeof generateCSSVariables;
12093
+ declare const themeImport_generateSectionVariables: typeof generateSectionVariables;
12094
+ declare const themeImport_getContrastRatio: typeof getContrastRatio;
12095
+ declare const themeImport_getContrastText: typeof getContrastText;
11358
12096
  declare const themeImport_getCurrentThemeFromDOM: typeof getCurrentThemeFromDOM;
12097
+ declare const themeImport_getLuminance: typeof getLuminance;
12098
+ declare const themeImport_getShadow: typeof getShadow;
11359
12099
  declare const themeImport_getSystemTheme: typeof getSystemTheme;
11360
12100
  declare const themeImport_getThemeLinkId: typeof getThemeLinkId;
12101
+ declare const themeImport_getThemeValue: typeof getThemeValue;
12102
+ declare const themeImport_getTransitionDuration: typeof getTransitionDuration;
12103
+ declare const themeImport_getTransitionEasing: typeof getTransitionEasing;
12104
+ declare const themeImport_getTypography: typeof getTypography;
12105
+ declare const themeImport_getZIndex: typeof getZIndex;
12106
+ declare const themeImport_hexToRgb: typeof hexToRgb;
12107
+ declare const themeImport_injectCSS: typeof injectCSS;
11361
12108
  declare const themeImport_isBrowser: typeof isBrowser;
12109
+ declare const themeImport_isJSTheme: typeof isJSTheme;
11362
12110
  declare const themeImport_isServer: typeof isServer;
11363
12111
  declare const themeImport_isThemeLoaded: typeof isThemeLoaded;
11364
12112
  declare const themeImport_isValidThemeName: typeof isValidThemeName;
12113
+ declare const themeImport_lighten: typeof lighten;
11365
12114
  declare const themeImport_loadThemeCSS: typeof loadThemeCSS;
12115
+ declare const themeImport_mergeTheme: typeof mergeTheme;
12116
+ declare const themeImport_overrideTheme: typeof overrideTheme;
12117
+ declare const themeImport_pxToRem: typeof pxToRem;
12118
+ declare const themeImport_remToPx: typeof remToPx;
11366
12119
  declare const themeImport_removeAllThemeCSS: typeof removeAllThemeCSS;
12120
+ declare const themeImport_removeInjectedCSS: typeof removeInjectedCSS;
11367
12121
  declare const themeImport_removeThemeAttributes: typeof removeThemeAttributes;
11368
12122
  declare const themeImport_removeThemeCSS: typeof removeThemeCSS;
12123
+ declare const themeImport_rgbToHex: typeof rgbToHex;
12124
+ declare const themeImport_spacing: typeof spacing;
11369
12125
  declare const themeImport_useTheme: typeof useTheme;
11370
12126
  declare const themeImport_validateThemeMetadata: typeof validateThemeMetadata;
11371
12127
  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 };
12128
+ export { themeImport_ThemeContext as ThemeContext, ThemeContext as ThemeContextDefault, themeImport_ThemeManager as ThemeManager, ThemeManager as ThemeManagerDefault, themeImport_ThemeProvider as ThemeProvider, ThemeProvider as ThemeProviderDefault, themeImport_alpha as alpha, themeImport_applyThemeAttributes as applyThemeAttributes, themeImport_breakpointBetween as breakpointBetween, themeImport_breakpointDown as breakpointDown, themeImport_breakpointUp as breakpointUp, themeImport_buildThemePath as buildThemePath, themeImport_composeThemes as composeThemes, themeImport_createLocalStorageAdapter as createLocalStorageAdapter, themeImport_createSpacing as createSpacing, themeImport_createTheme as createTheme, createTheme as createThemeDefault, themeImport_createThemePreset as createThemePreset, themeImport_createThemeVariants as createThemeVariants, themeImport_createTransition as createTransition, themeImport_darken as darken, themeImport_debounce as debounce, themeImport_deepMerge as deepMerge, themeImport_emphasize as emphasize, themeImport_extendTheme as extendTheme, themeImport_generateCSSVariables as generateCSSVariables, themeImport_generateSectionVariables as generateSectionVariables, themeImport_getContrastRatio as getContrastRatio, themeImport_getContrastText as getContrastText, themeImport_getCurrentThemeFromDOM as getCurrentThemeFromDOM, themeImport_getLuminance as getLuminance, themeImport_getShadow as getShadow, themeImport_getSystemTheme as getSystemTheme, themeImport_getThemeLinkId as getThemeLinkId, themeImport_getThemeValue as getThemeValue, themeImport_getTransitionDuration as getTransitionDuration, themeImport_getTransitionEasing as getTransitionEasing, themeImport_getTypography as getTypography, themeImport_getZIndex as getZIndex, themeImport_hexToRgb as hexToRgb, themeImport_injectCSS as injectCSS, themeImport_isBrowser as isBrowser, themeImport_isJSTheme as isJSTheme, themeImport_isServer as isServer, themeImport_isThemeLoaded as isThemeLoaded, themeImport_isValidThemeName as isValidThemeName, themeImport_lighten as lighten, themeImport_loadThemeCSS as loadThemeCSS, themeImport_mergeTheme as mergeTheme, themeImport_overrideTheme as overrideTheme, themeImport_pxToRem as pxToRem, themeImport_remToPx as remToPx, themeImport_removeAllThemeCSS as removeAllThemeCSS, themeImport_removeInjectedCSS as removeInjectedCSS, themeImport_removeThemeAttributes as removeThemeAttributes, themeImport_removeThemeCSS as removeThemeCSS, themeImport_rgbToHex as rgbToHex, themeImport_spacing as spacing, themeImport_useTheme as useTheme, useTheme as useThemeDefault, themeImport_validateThemeMetadata as validateThemeMetadata };
12129
+ export type { themeImport_BreakpointValues as BreakpointValues, themeImport_BreakpointsOptions as BreakpointsOptions, themeImport_GenerateCSSVariablesOptions as GenerateCSSVariablesOptions, themeImport_PaletteColor as PaletteColor, themeImport_PaletteOptions as PaletteOptions, themeImport_ShadowOptions as ShadowOptions, themeImport_SpacingFunction as SpacingFunction, themeImport_SpacingOptions as SpacingOptions, themeImport_StorageAdapter as StorageAdapter, themeImport_Theme as Theme, themeImport_ThemeChangeCallback as ThemeChangeCallback, themeImport_ThemeChangeEvent as ThemeChangeEvent, themeImport_ThemeContextValue as ThemeContextValue, themeImport_ThemeCustomProperties as ThemeCustomProperties, 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_ThemeOptions as ThemeOptions, themeImport_ThemeProviderProps as ThemeProviderProps, themeImport_ThemeValidationResult as ThemeValidationResult, themeImport_TransitionOptions as TransitionOptions, themeImport_TypographyOptions as TypographyOptions, themeImport_UseThemeOptions as UseThemeOptions, themeImport_UseThemeReturn as UseThemeReturn, themeImport_ZIndexOptions as ZIndexOptions };
11374
12130
  }
11375
12131
 
11376
12132
  declare const composables: typeof __lib_composables;
@@ -11668,7 +12424,7 @@ declare const atomix: {
11668
12424
  Badge: react.FC<BadgeProps>;
11669
12425
  Block: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLDivElement>>;
11670
12426
  Breadcrumb: react.FC<BreadcrumbProps>;
11671
- Button: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ButtonProps & ButtonAsProp, "ref"> & react.RefAttributes<HTMLButtonElement>>>;
12427
+ Button: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ButtonProps & ButtonAsProp, "ref"> & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>>;
11672
12428
  Callout: react.FC<CalloutProps>;
11673
12429
  Card: react.MemoExoticComponent<react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement | HTMLAnchorElement>>>;
11674
12430
  ElevationCard: react.FC<ElevationCardProps>;
@@ -11759,5 +12515,5 @@ declare const atomix: {
11759
12515
  VideoPlayer: react.ForwardRefExoticComponent<VideoPlayerProps & react.RefAttributes<HTMLVideoElement>>;
11760
12516
  };
11761
12517
 
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 };
12518
+ 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, alpha, applyThemeAttributes, breakpointBetween, breakpointDown, breakpointUp, buildThemePath, composables, composeThemes, constants, createLocalStorageAdapter, createSpacing, createTheme, createTheme as createThemeDefault, createThemePreset, createThemeVariants, createTransition, darken, debounce, deepMerge, atomix as default, emphasize, extendTheme, generateCSSVariables, generateSectionVariables, getContrastRatio, getContrastText, getCurrentThemeFromDOM, getLuminance, getShadow, getSystemTheme, getThemeLinkId, getThemeValue, getTransitionDuration, getTransitionEasing, getTypography, getZIndex, hexToRgb, injectCSS, isBrowser, isJSTheme, isServer, isThemeLoaded, isValidThemeName, lighten, loadThemeCSS, mergeTheme, overrideTheme, pxToRem, remToPx, removeAllThemeCSS, removeInjectedCSS, removeThemeAttributes, removeThemeCSS, rgbToHex, spacing, theme, types, useTheme, useTheme as useThemeDefault, utils, validateThemeMetadata };
12519
+ export type { AccordionProps, AnimatedChartProps, AreaChartProps, AtomixGlassProps, AtomixLogoProps, AvatarGroupProps, AvatarProps, BadgeProps, BarChartProps, BlockProps, BreadcrumbProps, BreakpointValues, BreakpointsOptions, 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, GenerateCSSVariablesOptions, 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, PaletteColor, PaletteOptions, PhotoViewerProps, PieChartProps, PopoverProps, ProductReviewProps, ProgressProps, RadarChartProps, RadioProps, RatingProps, RiverProps, RowProps, ScatterChartProps, ScatterDataPoint, SectionIntroProps, SelectProps, ShadowOptions, SideMenuItemProps, SideMenuListProps, SideMenuProps, SliderProps, SocialLink, SocialPlatform, SpacingFunction, SpacingOptions, SpinnerProps, StepsProps, StorageAdapter, TabsProps, TestimonialProps, TextareaProps, Theme, ThemeChangeCallback, ThemeChangeEvent, ThemeContextValue, ThemeCustomProperties, ThemeErrorCallback, ThemeEventListeners, ThemeLoadCallback, ThemeLoadOptions, ThemeManagerConfig, ThemeManagerEvent, ThemeMetadata, ThemeOptions, ThemeProviderProps, ThemeValidationResult, TodoProps, ToggleProps, TooltipProps, TransitionOptions, TreemapChartProps, TreemapDataPoint, TreemapNode, TypographyOptions, UploadProps, UseThemeOptions, UseThemeReturn, VideoPlayerProps, WaterfallChartProps, WaterfallDataPoint, ZIndexOptions };