@atomazing-org/design-system 1.0.21 → 1.0.22
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/dist/index.d.mts +440 -0
- package/dist/index.d.ts +440 -0
- package/dist/index.js +5 -5
- package/dist/index.mjs +4 -4
- package/package.json +1 -1
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,440 @@
|
|
|
1
|
+
import * as _emotion_styled from '@emotion/styled';
|
|
2
|
+
import * as _emotion_react from '@emotion/react';
|
|
3
|
+
import * as React$1 from 'react';
|
|
4
|
+
import React__default, { ErrorInfo, FC, PropsWithChildren } from 'react';
|
|
5
|
+
import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
|
|
6
|
+
import * as _mui_material from '@mui/material';
|
|
7
|
+
import { Theme, PaletteMode } from '@mui/material';
|
|
8
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
9
|
+
|
|
10
|
+
declare const DialogBtn: _emotion_styled.StyledComponent<_mui_material.ButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & {
|
|
11
|
+
theme?: _emotion_react.Theme;
|
|
12
|
+
}, {}, {}>;
|
|
13
|
+
|
|
14
|
+
interface ErrorBoundaryProps {
|
|
15
|
+
children: React__default.ReactNode;
|
|
16
|
+
}
|
|
17
|
+
interface ErrorBoundaryState {
|
|
18
|
+
hasError: boolean;
|
|
19
|
+
error?: Error;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* ErrorBoundary component that catches and displays errors.
|
|
23
|
+
*/
|
|
24
|
+
declare class ErrorBoundary extends React__default.Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
25
|
+
constructor(props: ErrorBoundaryProps);
|
|
26
|
+
static getDerivedStateFromError(error: Error): ErrorBoundaryState;
|
|
27
|
+
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
28
|
+
render(): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
declare const Loading: () => react_jsx_runtime.JSX.Element;
|
|
32
|
+
|
|
33
|
+
declare const PathName: _emotion_styled.StyledComponent<{
|
|
34
|
+
theme?: _emotion_react.Theme;
|
|
35
|
+
as?: React.ElementType;
|
|
36
|
+
}, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Available options for dark mode configuration.
|
|
40
|
+
* - `system`: Follows the operating system preference.
|
|
41
|
+
* - `auto`: Uses contrast-based detection (e.g., based on background color).
|
|
42
|
+
* - `light`: Forces light mode.
|
|
43
|
+
* - `dark`: Forces dark mode.
|
|
44
|
+
*/
|
|
45
|
+
type DarkModeOptions = "system" | "auto" | "light" | "dark";
|
|
46
|
+
/**
|
|
47
|
+
* Represents user-specific theme preferences stored in the application.
|
|
48
|
+
*/
|
|
49
|
+
interface AppSettings {
|
|
50
|
+
/**
|
|
51
|
+
* The selected theme name. `"system"` indicates the app should follow system preference.
|
|
52
|
+
* Other values are custom theme names defined by the application.
|
|
53
|
+
*/
|
|
54
|
+
theme: "system" | (string & {});
|
|
55
|
+
/**
|
|
56
|
+
* Controls how dark mode is applied in the app.
|
|
57
|
+
*/
|
|
58
|
+
darkMode: DarkModeOptions;
|
|
59
|
+
}
|
|
60
|
+
interface ThemeContextProps {
|
|
61
|
+
theme: string;
|
|
62
|
+
darkMode: DarkModeOptions;
|
|
63
|
+
setTheme: (theme: string) => void;
|
|
64
|
+
setDarkMode: (mode: DarkModeOptions) => void;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Represents the theme mode as reported by the operating system or browser.
|
|
69
|
+
* - `light`: Light mode
|
|
70
|
+
* - `dark`: Dark mode
|
|
71
|
+
* - `unknown`: Theme mode could not be determined
|
|
72
|
+
*/
|
|
73
|
+
type SystemTheme = "light" | "dark" | "unknown";
|
|
74
|
+
|
|
75
|
+
declare const useThemeSettings: () => ThemeContextProps;
|
|
76
|
+
|
|
77
|
+
declare const ThemeProviderWrapper: FC<PropsWithChildren>;
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* Validates whether a given string is a valid 3- or 6-digit hex color code (e.g., "#fff" or "#ffffff").
|
|
81
|
+
*
|
|
82
|
+
* @param value - The string to check.
|
|
83
|
+
* @returns `true` if the string is a valid hex color; otherwise, `false`.
|
|
84
|
+
*/
|
|
85
|
+
declare const isHexColor: (value: string) => boolean;
|
|
86
|
+
/**
|
|
87
|
+
* Determines the ideal font color (white or black) for contrast against a given background color.
|
|
88
|
+
*
|
|
89
|
+
* Uses luminance calculation (YIQ) to ensure accessibility and visual clarity.
|
|
90
|
+
*
|
|
91
|
+
* @param backgroundColor - A valid hex color (e.g., "#ffffff").
|
|
92
|
+
* @returns A hex color string (`fontLight` or `fontDark`) suitable for overlay text.
|
|
93
|
+
*/
|
|
94
|
+
declare const getFontColor: (backgroundColor: string) => string;
|
|
95
|
+
/**
|
|
96
|
+
* Determines whether the ideal font color for a background is light (i.e., white).
|
|
97
|
+
*
|
|
98
|
+
* @param color - The background color in hex.
|
|
99
|
+
* @returns `true` if white text is recommended; otherwise, `false`.
|
|
100
|
+
*/
|
|
101
|
+
declare const isFontLight: (color: string) => boolean;
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Common component style overrides and default props shared across the design system.
|
|
105
|
+
* This object should be spread into the `components` field of the MUI theme.
|
|
106
|
+
*/
|
|
107
|
+
declare const commonComponentProps: Theme["components"];
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Generates a custom MUI theme using a primary color, background color, and color mode.
|
|
111
|
+
*
|
|
112
|
+
* @param primaryColor - The main color used for primary palette.
|
|
113
|
+
* @param backgroundColor - Background color (used as secondary). Defaults to dark blue.
|
|
114
|
+
* @param mode - MUI palette mode ('light' | 'dark'). Defaults to 'dark'.
|
|
115
|
+
* @returns A MUI Theme object.
|
|
116
|
+
*/
|
|
117
|
+
declare const createCustomTheme: (primaryColor: string, backgroundColor?: string, mode?: PaletteMode) => Theme;
|
|
118
|
+
/**
|
|
119
|
+
* A predefined list of named themes based on the `themeConfig` definition.
|
|
120
|
+
*/
|
|
121
|
+
declare const themes: {
|
|
122
|
+
name: string;
|
|
123
|
+
MuiTheme: Theme;
|
|
124
|
+
}[];
|
|
125
|
+
/**
|
|
126
|
+
* Determines whether dark mode should be enabled based on user settings and system conditions.
|
|
127
|
+
*
|
|
128
|
+
* @param darkMode - User preference: 'light' | 'dark' | 'system' | 'auto'.
|
|
129
|
+
* @param systemTheme - Detected OS-level theme: 'light' | 'dark'.
|
|
130
|
+
* @param backgroundColor - The background color to assess contrast in 'auto' mode.
|
|
131
|
+
* @returns True if dark mode should be used.
|
|
132
|
+
*/
|
|
133
|
+
declare const isDarkMode: (darkMode: AppSettings["darkMode"], systemTheme: SystemTheme, backgroundColor: string) => boolean;
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* Injects global styles into the document using Emotion.
|
|
137
|
+
* These styles include font setup, base HTML styles, custom scrollbars,
|
|
138
|
+
* selection styling, and some accessibility tweaks.
|
|
139
|
+
*
|
|
140
|
+
* Uses the MUI theme to dynamically adjust colors for light/dark mode.
|
|
141
|
+
*/
|
|
142
|
+
declare const GlobalStyles: FC;
|
|
143
|
+
|
|
144
|
+
/**
|
|
145
|
+
* Fade in from the left with slight movement on the X-axis.
|
|
146
|
+
*/
|
|
147
|
+
declare const fadeInLeft: {
|
|
148
|
+
name: string;
|
|
149
|
+
styles: string;
|
|
150
|
+
anim: 1;
|
|
151
|
+
toString: () => string;
|
|
152
|
+
} & string;
|
|
153
|
+
/**
|
|
154
|
+
* Simple fade in animation (opacity only).
|
|
155
|
+
*/
|
|
156
|
+
declare const fadeIn: {
|
|
157
|
+
name: string;
|
|
158
|
+
styles: string;
|
|
159
|
+
anim: 1;
|
|
160
|
+
toString: () => string;
|
|
161
|
+
} & string;
|
|
162
|
+
/**
|
|
163
|
+
* Slide in from the left side of the screen.
|
|
164
|
+
*/
|
|
165
|
+
declare const slideIn: {
|
|
166
|
+
name: string;
|
|
167
|
+
styles: string;
|
|
168
|
+
anim: 1;
|
|
169
|
+
toString: () => string;
|
|
170
|
+
} & string;
|
|
171
|
+
/**
|
|
172
|
+
* Slide in from the bottom of the screen.
|
|
173
|
+
*/
|
|
174
|
+
declare const slideInBottom: {
|
|
175
|
+
name: string;
|
|
176
|
+
styles: string;
|
|
177
|
+
anim: 1;
|
|
178
|
+
toString: () => string;
|
|
179
|
+
} & string;
|
|
180
|
+
/**
|
|
181
|
+
* Scale from 0 to full size.
|
|
182
|
+
*/
|
|
183
|
+
declare const scale: {
|
|
184
|
+
name: string;
|
|
185
|
+
styles: string;
|
|
186
|
+
anim: 1;
|
|
187
|
+
toString: () => string;
|
|
188
|
+
} & string;
|
|
189
|
+
/**
|
|
190
|
+
* Creates a pulsating animation using scale and box-shadow.
|
|
191
|
+
* Simulates a glowing effect.
|
|
192
|
+
*
|
|
193
|
+
* @param clr - The base color for the shadow in hex format.
|
|
194
|
+
* @param shadowBlur - The maximum spread of the shadow during the pulse (default: 12).
|
|
195
|
+
* @returns Emotion keyframes animation.
|
|
196
|
+
*/
|
|
197
|
+
declare const pulseAnimation: (clr: string, shadowBlur?: number) => {
|
|
198
|
+
name: string;
|
|
199
|
+
styles: string;
|
|
200
|
+
anim: 1;
|
|
201
|
+
toString: () => string;
|
|
202
|
+
} & string;
|
|
203
|
+
/**
|
|
204
|
+
* Creates a glowing pulse animation using drop-shadow.
|
|
205
|
+
* Used in progress or highlight elements.
|
|
206
|
+
*
|
|
207
|
+
* @param clr - The glow color in hex.
|
|
208
|
+
* @returns Emotion keyframes animation.
|
|
209
|
+
*/
|
|
210
|
+
declare const progressPulse: (clr: string) => {
|
|
211
|
+
name: string;
|
|
212
|
+
styles: string;
|
|
213
|
+
anim: 1;
|
|
214
|
+
toString: () => string;
|
|
215
|
+
} & string;
|
|
216
|
+
/**
|
|
217
|
+
* A bounce-scale animation used during logout transition.
|
|
218
|
+
*/
|
|
219
|
+
declare const logoutAnimation: {
|
|
220
|
+
name: string;
|
|
221
|
+
styles: string;
|
|
222
|
+
anim: 1;
|
|
223
|
+
toString: () => string;
|
|
224
|
+
} & string;
|
|
225
|
+
/**
|
|
226
|
+
* Subtle bounce animation used for install app prompts.
|
|
227
|
+
*/
|
|
228
|
+
declare const installAppAnimation: {
|
|
229
|
+
name: string;
|
|
230
|
+
styles: string;
|
|
231
|
+
anim: 1;
|
|
232
|
+
toString: () => string;
|
|
233
|
+
} & string;
|
|
234
|
+
|
|
235
|
+
declare const ColorPalette: {
|
|
236
|
+
readonly fontDark: "#101727";
|
|
237
|
+
readonly fontLight: "#f0f0f0";
|
|
238
|
+
readonly darkMode: "#383838";
|
|
239
|
+
readonly lightMode: "#ffffff";
|
|
240
|
+
readonly purple: "#b624ff";
|
|
241
|
+
readonly red: "#ff3131";
|
|
242
|
+
readonly orange: "#ff9318";
|
|
243
|
+
readonly orangeDark: "#ff9500";
|
|
244
|
+
};
|
|
245
|
+
declare const themeConfig: Record<string, {
|
|
246
|
+
primaryColor: string;
|
|
247
|
+
secondaryColor?: string;
|
|
248
|
+
}>;
|
|
249
|
+
|
|
250
|
+
/**
|
|
251
|
+
* Default MUI Typography variant-to-element mapping.
|
|
252
|
+
* Custom variants are mapped to HTML tags like <p>, <h1>, etc.
|
|
253
|
+
*/
|
|
254
|
+
declare const typographyProps: {
|
|
255
|
+
MuiTypography: {
|
|
256
|
+
defaultProps: {
|
|
257
|
+
variantMapping: {
|
|
258
|
+
display_2xl_regular: string;
|
|
259
|
+
display_xl_regular: string;
|
|
260
|
+
display_lg_regular: string;
|
|
261
|
+
display_md_regular: string;
|
|
262
|
+
display_sm_regular: string;
|
|
263
|
+
display_xs_regular: string;
|
|
264
|
+
display_2xl_bold: string;
|
|
265
|
+
display_xl_bold: string;
|
|
266
|
+
display_lg_bold: string;
|
|
267
|
+
display_md_bold: string;
|
|
268
|
+
display_sm_bold: string;
|
|
269
|
+
display_xs_bold: string;
|
|
270
|
+
};
|
|
271
|
+
};
|
|
272
|
+
};
|
|
273
|
+
};
|
|
274
|
+
/**
|
|
275
|
+
* Custom typography variants.
|
|
276
|
+
* Defines font-weight, size, line-height and optionally fallback font.
|
|
277
|
+
*/
|
|
278
|
+
declare const typographyVariants: {
|
|
279
|
+
text_xl_regular: {
|
|
280
|
+
font: string;
|
|
281
|
+
};
|
|
282
|
+
text_lg_regular: {
|
|
283
|
+
font: string;
|
|
284
|
+
};
|
|
285
|
+
text_md_regular: {
|
|
286
|
+
font: string;
|
|
287
|
+
};
|
|
288
|
+
text_sm_regular: {
|
|
289
|
+
font: string;
|
|
290
|
+
};
|
|
291
|
+
text_xs_regular: {
|
|
292
|
+
font: string;
|
|
293
|
+
};
|
|
294
|
+
text_2xs_regular: {
|
|
295
|
+
font: string;
|
|
296
|
+
};
|
|
297
|
+
text_xl_bold: {
|
|
298
|
+
font: string;
|
|
299
|
+
};
|
|
300
|
+
text_lg_bold: {
|
|
301
|
+
font: string;
|
|
302
|
+
};
|
|
303
|
+
text_md_bold: {
|
|
304
|
+
font: string;
|
|
305
|
+
};
|
|
306
|
+
text_sm_bold: {
|
|
307
|
+
font: string;
|
|
308
|
+
};
|
|
309
|
+
text_xs_bold: {
|
|
310
|
+
font: string;
|
|
311
|
+
};
|
|
312
|
+
text_2xs_bold: {
|
|
313
|
+
font: string;
|
|
314
|
+
};
|
|
315
|
+
text_xl_semibold: {
|
|
316
|
+
font: string;
|
|
317
|
+
};
|
|
318
|
+
text_lg_semibold: {
|
|
319
|
+
font: string;
|
|
320
|
+
};
|
|
321
|
+
text_md_semibold: {
|
|
322
|
+
font: string;
|
|
323
|
+
};
|
|
324
|
+
text_sm_semibold: {
|
|
325
|
+
font: string;
|
|
326
|
+
};
|
|
327
|
+
text_xs_semibold: {
|
|
328
|
+
font: string;
|
|
329
|
+
};
|
|
330
|
+
text_2xs_semibold: {
|
|
331
|
+
font: string;
|
|
332
|
+
};
|
|
333
|
+
text_xl_thin: {
|
|
334
|
+
font: string;
|
|
335
|
+
};
|
|
336
|
+
text_lg_thin: {
|
|
337
|
+
font: string;
|
|
338
|
+
};
|
|
339
|
+
text_md_thin: {
|
|
340
|
+
font: string;
|
|
341
|
+
};
|
|
342
|
+
text_sm_thin: {
|
|
343
|
+
font: string;
|
|
344
|
+
};
|
|
345
|
+
text_xs_thin: {
|
|
346
|
+
font: string;
|
|
347
|
+
};
|
|
348
|
+
text_2xs_thin: {
|
|
349
|
+
font: string;
|
|
350
|
+
};
|
|
351
|
+
display_2xl_regular: {
|
|
352
|
+
font: string;
|
|
353
|
+
};
|
|
354
|
+
display_xl_regular: {
|
|
355
|
+
font: string;
|
|
356
|
+
};
|
|
357
|
+
display_lg_regular: {
|
|
358
|
+
font: string;
|
|
359
|
+
};
|
|
360
|
+
display_md_regular: {
|
|
361
|
+
font: string;
|
|
362
|
+
};
|
|
363
|
+
display_sm_regular: {
|
|
364
|
+
font: string;
|
|
365
|
+
};
|
|
366
|
+
display_xs_regular: {
|
|
367
|
+
font: string;
|
|
368
|
+
};
|
|
369
|
+
display_2xl_bold: {
|
|
370
|
+
font: string;
|
|
371
|
+
};
|
|
372
|
+
display_xl_bold: {
|
|
373
|
+
font: string;
|
|
374
|
+
};
|
|
375
|
+
display_lg_bold: {
|
|
376
|
+
font: string;
|
|
377
|
+
};
|
|
378
|
+
display_md_bold: {
|
|
379
|
+
font: string;
|
|
380
|
+
};
|
|
381
|
+
display_sm_bold: {
|
|
382
|
+
font: string;
|
|
383
|
+
};
|
|
384
|
+
display_xs_bold: {
|
|
385
|
+
font: string;
|
|
386
|
+
};
|
|
387
|
+
};
|
|
388
|
+
|
|
389
|
+
/**
|
|
390
|
+
* Returns a greeting based on the current time.
|
|
391
|
+
* @returns {string} The appropriate greeting.
|
|
392
|
+
*/
|
|
393
|
+
declare const displayGreeting: () => string;
|
|
394
|
+
|
|
395
|
+
/**
|
|
396
|
+
* Function to extract year, month, and day from a Date object
|
|
397
|
+
*/
|
|
398
|
+
declare const getDayIdentifier: (date: Date) => string;
|
|
399
|
+
|
|
400
|
+
/**
|
|
401
|
+
* A list of supported operating systems.
|
|
402
|
+
*/
|
|
403
|
+
type OperatingSystem = "Windows" | "macOS" | "Linux" | "iOS" | "Android" | "Unknown";
|
|
404
|
+
/**
|
|
405
|
+
* A list of supported browsers.
|
|
406
|
+
*/
|
|
407
|
+
type Browser = "Chrome" | "Firefox" | "Safari" | "Edge" | "Unknown";
|
|
408
|
+
/**
|
|
409
|
+
* Basic information about the user's system (OS and browser).
|
|
410
|
+
*/
|
|
411
|
+
declare const systemInfo: {
|
|
412
|
+
os: OperatingSystem;
|
|
413
|
+
browser: Browser;
|
|
414
|
+
};
|
|
415
|
+
|
|
416
|
+
/**
|
|
417
|
+
* Converts a given date to a human-readable relative time string.
|
|
418
|
+
*
|
|
419
|
+
* @param {Date} date - The date to be converted.
|
|
420
|
+
* @param lang
|
|
421
|
+
* @returns {string} A string representing the relative time using `Intl` format (e.g., "2 days ago").
|
|
422
|
+
*/
|
|
423
|
+
declare const timeAgo: (date: Date, lang?: string) => string;
|
|
424
|
+
declare const timeAgoFromStart: (date: Date, lang?: string) => string;
|
|
425
|
+
|
|
426
|
+
/**
|
|
427
|
+
* A custom React hook to determine if the current device is a smaller device
|
|
428
|
+
* based on the screen width.
|
|
429
|
+
* @param [breakpoint=768] - The breakpoint in pixels at which a device is considered "smaller".
|
|
430
|
+
* @returns {boolean} - A boolean value indicating whether the current device is a smaller device.
|
|
431
|
+
*/
|
|
432
|
+
declare const useResponsiveDisplay: (breakpoint?: number) => boolean;
|
|
433
|
+
|
|
434
|
+
/**
|
|
435
|
+
* A React hook to detect the system theme preference.
|
|
436
|
+
* @returns The current system theme ('light', 'dark', or 'unknown').
|
|
437
|
+
*/
|
|
438
|
+
declare const useSystemTheme: () => SystemTheme;
|
|
439
|
+
|
|
440
|
+
export { type AppSettings, ColorPalette, type DarkModeOptions, DialogBtn, ErrorBoundary, GlobalStyles, Loading, PathName, type SystemTheme, type ThemeContextProps, ThemeProviderWrapper, commonComponentProps, createCustomTheme, displayGreeting, fadeIn, fadeInLeft, getDayIdentifier, getFontColor, installAppAnimation, isDarkMode, isFontLight, isHexColor, logoutAnimation, progressPulse, pulseAnimation, scale, slideIn, slideInBottom, systemInfo, themeConfig, themes, timeAgo, timeAgoFromStart, typographyProps, typographyVariants, useResponsiveDisplay, useSystemTheme, useThemeSettings };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,440 @@
|
|
|
1
|
+
import * as _emotion_styled from '@emotion/styled';
|
|
2
|
+
import * as _emotion_react from '@emotion/react';
|
|
3
|
+
import * as React$1 from 'react';
|
|
4
|
+
import React__default, { ErrorInfo, FC, PropsWithChildren } from 'react';
|
|
5
|
+
import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
|
|
6
|
+
import * as _mui_material from '@mui/material';
|
|
7
|
+
import { Theme, PaletteMode } from '@mui/material';
|
|
8
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
9
|
+
|
|
10
|
+
declare const DialogBtn: _emotion_styled.StyledComponent<_mui_material.ButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & {
|
|
11
|
+
theme?: _emotion_react.Theme;
|
|
12
|
+
}, {}, {}>;
|
|
13
|
+
|
|
14
|
+
interface ErrorBoundaryProps {
|
|
15
|
+
children: React__default.ReactNode;
|
|
16
|
+
}
|
|
17
|
+
interface ErrorBoundaryState {
|
|
18
|
+
hasError: boolean;
|
|
19
|
+
error?: Error;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* ErrorBoundary component that catches and displays errors.
|
|
23
|
+
*/
|
|
24
|
+
declare class ErrorBoundary extends React__default.Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
25
|
+
constructor(props: ErrorBoundaryProps);
|
|
26
|
+
static getDerivedStateFromError(error: Error): ErrorBoundaryState;
|
|
27
|
+
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
28
|
+
render(): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
declare const Loading: () => react_jsx_runtime.JSX.Element;
|
|
32
|
+
|
|
33
|
+
declare const PathName: _emotion_styled.StyledComponent<{
|
|
34
|
+
theme?: _emotion_react.Theme;
|
|
35
|
+
as?: React.ElementType;
|
|
36
|
+
}, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Available options for dark mode configuration.
|
|
40
|
+
* - `system`: Follows the operating system preference.
|
|
41
|
+
* - `auto`: Uses contrast-based detection (e.g., based on background color).
|
|
42
|
+
* - `light`: Forces light mode.
|
|
43
|
+
* - `dark`: Forces dark mode.
|
|
44
|
+
*/
|
|
45
|
+
type DarkModeOptions = "system" | "auto" | "light" | "dark";
|
|
46
|
+
/**
|
|
47
|
+
* Represents user-specific theme preferences stored in the application.
|
|
48
|
+
*/
|
|
49
|
+
interface AppSettings {
|
|
50
|
+
/**
|
|
51
|
+
* The selected theme name. `"system"` indicates the app should follow system preference.
|
|
52
|
+
* Other values are custom theme names defined by the application.
|
|
53
|
+
*/
|
|
54
|
+
theme: "system" | (string & {});
|
|
55
|
+
/**
|
|
56
|
+
* Controls how dark mode is applied in the app.
|
|
57
|
+
*/
|
|
58
|
+
darkMode: DarkModeOptions;
|
|
59
|
+
}
|
|
60
|
+
interface ThemeContextProps {
|
|
61
|
+
theme: string;
|
|
62
|
+
darkMode: DarkModeOptions;
|
|
63
|
+
setTheme: (theme: string) => void;
|
|
64
|
+
setDarkMode: (mode: DarkModeOptions) => void;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Represents the theme mode as reported by the operating system or browser.
|
|
69
|
+
* - `light`: Light mode
|
|
70
|
+
* - `dark`: Dark mode
|
|
71
|
+
* - `unknown`: Theme mode could not be determined
|
|
72
|
+
*/
|
|
73
|
+
type SystemTheme = "light" | "dark" | "unknown";
|
|
74
|
+
|
|
75
|
+
declare const useThemeSettings: () => ThemeContextProps;
|
|
76
|
+
|
|
77
|
+
declare const ThemeProviderWrapper: FC<PropsWithChildren>;
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* Validates whether a given string is a valid 3- or 6-digit hex color code (e.g., "#fff" or "#ffffff").
|
|
81
|
+
*
|
|
82
|
+
* @param value - The string to check.
|
|
83
|
+
* @returns `true` if the string is a valid hex color; otherwise, `false`.
|
|
84
|
+
*/
|
|
85
|
+
declare const isHexColor: (value: string) => boolean;
|
|
86
|
+
/**
|
|
87
|
+
* Determines the ideal font color (white or black) for contrast against a given background color.
|
|
88
|
+
*
|
|
89
|
+
* Uses luminance calculation (YIQ) to ensure accessibility and visual clarity.
|
|
90
|
+
*
|
|
91
|
+
* @param backgroundColor - A valid hex color (e.g., "#ffffff").
|
|
92
|
+
* @returns A hex color string (`fontLight` or `fontDark`) suitable for overlay text.
|
|
93
|
+
*/
|
|
94
|
+
declare const getFontColor: (backgroundColor: string) => string;
|
|
95
|
+
/**
|
|
96
|
+
* Determines whether the ideal font color for a background is light (i.e., white).
|
|
97
|
+
*
|
|
98
|
+
* @param color - The background color in hex.
|
|
99
|
+
* @returns `true` if white text is recommended; otherwise, `false`.
|
|
100
|
+
*/
|
|
101
|
+
declare const isFontLight: (color: string) => boolean;
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Common component style overrides and default props shared across the design system.
|
|
105
|
+
* This object should be spread into the `components` field of the MUI theme.
|
|
106
|
+
*/
|
|
107
|
+
declare const commonComponentProps: Theme["components"];
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Generates a custom MUI theme using a primary color, background color, and color mode.
|
|
111
|
+
*
|
|
112
|
+
* @param primaryColor - The main color used for primary palette.
|
|
113
|
+
* @param backgroundColor - Background color (used as secondary). Defaults to dark blue.
|
|
114
|
+
* @param mode - MUI palette mode ('light' | 'dark'). Defaults to 'dark'.
|
|
115
|
+
* @returns A MUI Theme object.
|
|
116
|
+
*/
|
|
117
|
+
declare const createCustomTheme: (primaryColor: string, backgroundColor?: string, mode?: PaletteMode) => Theme;
|
|
118
|
+
/**
|
|
119
|
+
* A predefined list of named themes based on the `themeConfig` definition.
|
|
120
|
+
*/
|
|
121
|
+
declare const themes: {
|
|
122
|
+
name: string;
|
|
123
|
+
MuiTheme: Theme;
|
|
124
|
+
}[];
|
|
125
|
+
/**
|
|
126
|
+
* Determines whether dark mode should be enabled based on user settings and system conditions.
|
|
127
|
+
*
|
|
128
|
+
* @param darkMode - User preference: 'light' | 'dark' | 'system' | 'auto'.
|
|
129
|
+
* @param systemTheme - Detected OS-level theme: 'light' | 'dark'.
|
|
130
|
+
* @param backgroundColor - The background color to assess contrast in 'auto' mode.
|
|
131
|
+
* @returns True if dark mode should be used.
|
|
132
|
+
*/
|
|
133
|
+
declare const isDarkMode: (darkMode: AppSettings["darkMode"], systemTheme: SystemTheme, backgroundColor: string) => boolean;
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* Injects global styles into the document using Emotion.
|
|
137
|
+
* These styles include font setup, base HTML styles, custom scrollbars,
|
|
138
|
+
* selection styling, and some accessibility tweaks.
|
|
139
|
+
*
|
|
140
|
+
* Uses the MUI theme to dynamically adjust colors for light/dark mode.
|
|
141
|
+
*/
|
|
142
|
+
declare const GlobalStyles: FC;
|
|
143
|
+
|
|
144
|
+
/**
|
|
145
|
+
* Fade in from the left with slight movement on the X-axis.
|
|
146
|
+
*/
|
|
147
|
+
declare const fadeInLeft: {
|
|
148
|
+
name: string;
|
|
149
|
+
styles: string;
|
|
150
|
+
anim: 1;
|
|
151
|
+
toString: () => string;
|
|
152
|
+
} & string;
|
|
153
|
+
/**
|
|
154
|
+
* Simple fade in animation (opacity only).
|
|
155
|
+
*/
|
|
156
|
+
declare const fadeIn: {
|
|
157
|
+
name: string;
|
|
158
|
+
styles: string;
|
|
159
|
+
anim: 1;
|
|
160
|
+
toString: () => string;
|
|
161
|
+
} & string;
|
|
162
|
+
/**
|
|
163
|
+
* Slide in from the left side of the screen.
|
|
164
|
+
*/
|
|
165
|
+
declare const slideIn: {
|
|
166
|
+
name: string;
|
|
167
|
+
styles: string;
|
|
168
|
+
anim: 1;
|
|
169
|
+
toString: () => string;
|
|
170
|
+
} & string;
|
|
171
|
+
/**
|
|
172
|
+
* Slide in from the bottom of the screen.
|
|
173
|
+
*/
|
|
174
|
+
declare const slideInBottom: {
|
|
175
|
+
name: string;
|
|
176
|
+
styles: string;
|
|
177
|
+
anim: 1;
|
|
178
|
+
toString: () => string;
|
|
179
|
+
} & string;
|
|
180
|
+
/**
|
|
181
|
+
* Scale from 0 to full size.
|
|
182
|
+
*/
|
|
183
|
+
declare const scale: {
|
|
184
|
+
name: string;
|
|
185
|
+
styles: string;
|
|
186
|
+
anim: 1;
|
|
187
|
+
toString: () => string;
|
|
188
|
+
} & string;
|
|
189
|
+
/**
|
|
190
|
+
* Creates a pulsating animation using scale and box-shadow.
|
|
191
|
+
* Simulates a glowing effect.
|
|
192
|
+
*
|
|
193
|
+
* @param clr - The base color for the shadow in hex format.
|
|
194
|
+
* @param shadowBlur - The maximum spread of the shadow during the pulse (default: 12).
|
|
195
|
+
* @returns Emotion keyframes animation.
|
|
196
|
+
*/
|
|
197
|
+
declare const pulseAnimation: (clr: string, shadowBlur?: number) => {
|
|
198
|
+
name: string;
|
|
199
|
+
styles: string;
|
|
200
|
+
anim: 1;
|
|
201
|
+
toString: () => string;
|
|
202
|
+
} & string;
|
|
203
|
+
/**
|
|
204
|
+
* Creates a glowing pulse animation using drop-shadow.
|
|
205
|
+
* Used in progress or highlight elements.
|
|
206
|
+
*
|
|
207
|
+
* @param clr - The glow color in hex.
|
|
208
|
+
* @returns Emotion keyframes animation.
|
|
209
|
+
*/
|
|
210
|
+
declare const progressPulse: (clr: string) => {
|
|
211
|
+
name: string;
|
|
212
|
+
styles: string;
|
|
213
|
+
anim: 1;
|
|
214
|
+
toString: () => string;
|
|
215
|
+
} & string;
|
|
216
|
+
/**
|
|
217
|
+
* A bounce-scale animation used during logout transition.
|
|
218
|
+
*/
|
|
219
|
+
declare const logoutAnimation: {
|
|
220
|
+
name: string;
|
|
221
|
+
styles: string;
|
|
222
|
+
anim: 1;
|
|
223
|
+
toString: () => string;
|
|
224
|
+
} & string;
|
|
225
|
+
/**
|
|
226
|
+
* Subtle bounce animation used for install app prompts.
|
|
227
|
+
*/
|
|
228
|
+
declare const installAppAnimation: {
|
|
229
|
+
name: string;
|
|
230
|
+
styles: string;
|
|
231
|
+
anim: 1;
|
|
232
|
+
toString: () => string;
|
|
233
|
+
} & string;
|
|
234
|
+
|
|
235
|
+
declare const ColorPalette: {
|
|
236
|
+
readonly fontDark: "#101727";
|
|
237
|
+
readonly fontLight: "#f0f0f0";
|
|
238
|
+
readonly darkMode: "#383838";
|
|
239
|
+
readonly lightMode: "#ffffff";
|
|
240
|
+
readonly purple: "#b624ff";
|
|
241
|
+
readonly red: "#ff3131";
|
|
242
|
+
readonly orange: "#ff9318";
|
|
243
|
+
readonly orangeDark: "#ff9500";
|
|
244
|
+
};
|
|
245
|
+
declare const themeConfig: Record<string, {
|
|
246
|
+
primaryColor: string;
|
|
247
|
+
secondaryColor?: string;
|
|
248
|
+
}>;
|
|
249
|
+
|
|
250
|
+
/**
|
|
251
|
+
* Default MUI Typography variant-to-element mapping.
|
|
252
|
+
* Custom variants are mapped to HTML tags like <p>, <h1>, etc.
|
|
253
|
+
*/
|
|
254
|
+
declare const typographyProps: {
|
|
255
|
+
MuiTypography: {
|
|
256
|
+
defaultProps: {
|
|
257
|
+
variantMapping: {
|
|
258
|
+
display_2xl_regular: string;
|
|
259
|
+
display_xl_regular: string;
|
|
260
|
+
display_lg_regular: string;
|
|
261
|
+
display_md_regular: string;
|
|
262
|
+
display_sm_regular: string;
|
|
263
|
+
display_xs_regular: string;
|
|
264
|
+
display_2xl_bold: string;
|
|
265
|
+
display_xl_bold: string;
|
|
266
|
+
display_lg_bold: string;
|
|
267
|
+
display_md_bold: string;
|
|
268
|
+
display_sm_bold: string;
|
|
269
|
+
display_xs_bold: string;
|
|
270
|
+
};
|
|
271
|
+
};
|
|
272
|
+
};
|
|
273
|
+
};
|
|
274
|
+
/**
|
|
275
|
+
* Custom typography variants.
|
|
276
|
+
* Defines font-weight, size, line-height and optionally fallback font.
|
|
277
|
+
*/
|
|
278
|
+
declare const typographyVariants: {
|
|
279
|
+
text_xl_regular: {
|
|
280
|
+
font: string;
|
|
281
|
+
};
|
|
282
|
+
text_lg_regular: {
|
|
283
|
+
font: string;
|
|
284
|
+
};
|
|
285
|
+
text_md_regular: {
|
|
286
|
+
font: string;
|
|
287
|
+
};
|
|
288
|
+
text_sm_regular: {
|
|
289
|
+
font: string;
|
|
290
|
+
};
|
|
291
|
+
text_xs_regular: {
|
|
292
|
+
font: string;
|
|
293
|
+
};
|
|
294
|
+
text_2xs_regular: {
|
|
295
|
+
font: string;
|
|
296
|
+
};
|
|
297
|
+
text_xl_bold: {
|
|
298
|
+
font: string;
|
|
299
|
+
};
|
|
300
|
+
text_lg_bold: {
|
|
301
|
+
font: string;
|
|
302
|
+
};
|
|
303
|
+
text_md_bold: {
|
|
304
|
+
font: string;
|
|
305
|
+
};
|
|
306
|
+
text_sm_bold: {
|
|
307
|
+
font: string;
|
|
308
|
+
};
|
|
309
|
+
text_xs_bold: {
|
|
310
|
+
font: string;
|
|
311
|
+
};
|
|
312
|
+
text_2xs_bold: {
|
|
313
|
+
font: string;
|
|
314
|
+
};
|
|
315
|
+
text_xl_semibold: {
|
|
316
|
+
font: string;
|
|
317
|
+
};
|
|
318
|
+
text_lg_semibold: {
|
|
319
|
+
font: string;
|
|
320
|
+
};
|
|
321
|
+
text_md_semibold: {
|
|
322
|
+
font: string;
|
|
323
|
+
};
|
|
324
|
+
text_sm_semibold: {
|
|
325
|
+
font: string;
|
|
326
|
+
};
|
|
327
|
+
text_xs_semibold: {
|
|
328
|
+
font: string;
|
|
329
|
+
};
|
|
330
|
+
text_2xs_semibold: {
|
|
331
|
+
font: string;
|
|
332
|
+
};
|
|
333
|
+
text_xl_thin: {
|
|
334
|
+
font: string;
|
|
335
|
+
};
|
|
336
|
+
text_lg_thin: {
|
|
337
|
+
font: string;
|
|
338
|
+
};
|
|
339
|
+
text_md_thin: {
|
|
340
|
+
font: string;
|
|
341
|
+
};
|
|
342
|
+
text_sm_thin: {
|
|
343
|
+
font: string;
|
|
344
|
+
};
|
|
345
|
+
text_xs_thin: {
|
|
346
|
+
font: string;
|
|
347
|
+
};
|
|
348
|
+
text_2xs_thin: {
|
|
349
|
+
font: string;
|
|
350
|
+
};
|
|
351
|
+
display_2xl_regular: {
|
|
352
|
+
font: string;
|
|
353
|
+
};
|
|
354
|
+
display_xl_regular: {
|
|
355
|
+
font: string;
|
|
356
|
+
};
|
|
357
|
+
display_lg_regular: {
|
|
358
|
+
font: string;
|
|
359
|
+
};
|
|
360
|
+
display_md_regular: {
|
|
361
|
+
font: string;
|
|
362
|
+
};
|
|
363
|
+
display_sm_regular: {
|
|
364
|
+
font: string;
|
|
365
|
+
};
|
|
366
|
+
display_xs_regular: {
|
|
367
|
+
font: string;
|
|
368
|
+
};
|
|
369
|
+
display_2xl_bold: {
|
|
370
|
+
font: string;
|
|
371
|
+
};
|
|
372
|
+
display_xl_bold: {
|
|
373
|
+
font: string;
|
|
374
|
+
};
|
|
375
|
+
display_lg_bold: {
|
|
376
|
+
font: string;
|
|
377
|
+
};
|
|
378
|
+
display_md_bold: {
|
|
379
|
+
font: string;
|
|
380
|
+
};
|
|
381
|
+
display_sm_bold: {
|
|
382
|
+
font: string;
|
|
383
|
+
};
|
|
384
|
+
display_xs_bold: {
|
|
385
|
+
font: string;
|
|
386
|
+
};
|
|
387
|
+
};
|
|
388
|
+
|
|
389
|
+
/**
|
|
390
|
+
* Returns a greeting based on the current time.
|
|
391
|
+
* @returns {string} The appropriate greeting.
|
|
392
|
+
*/
|
|
393
|
+
declare const displayGreeting: () => string;
|
|
394
|
+
|
|
395
|
+
/**
|
|
396
|
+
* Function to extract year, month, and day from a Date object
|
|
397
|
+
*/
|
|
398
|
+
declare const getDayIdentifier: (date: Date) => string;
|
|
399
|
+
|
|
400
|
+
/**
|
|
401
|
+
* A list of supported operating systems.
|
|
402
|
+
*/
|
|
403
|
+
type OperatingSystem = "Windows" | "macOS" | "Linux" | "iOS" | "Android" | "Unknown";
|
|
404
|
+
/**
|
|
405
|
+
* A list of supported browsers.
|
|
406
|
+
*/
|
|
407
|
+
type Browser = "Chrome" | "Firefox" | "Safari" | "Edge" | "Unknown";
|
|
408
|
+
/**
|
|
409
|
+
* Basic information about the user's system (OS and browser).
|
|
410
|
+
*/
|
|
411
|
+
declare const systemInfo: {
|
|
412
|
+
os: OperatingSystem;
|
|
413
|
+
browser: Browser;
|
|
414
|
+
};
|
|
415
|
+
|
|
416
|
+
/**
|
|
417
|
+
* Converts a given date to a human-readable relative time string.
|
|
418
|
+
*
|
|
419
|
+
* @param {Date} date - The date to be converted.
|
|
420
|
+
* @param lang
|
|
421
|
+
* @returns {string} A string representing the relative time using `Intl` format (e.g., "2 days ago").
|
|
422
|
+
*/
|
|
423
|
+
declare const timeAgo: (date: Date, lang?: string) => string;
|
|
424
|
+
declare const timeAgoFromStart: (date: Date, lang?: string) => string;
|
|
425
|
+
|
|
426
|
+
/**
|
|
427
|
+
* A custom React hook to determine if the current device is a smaller device
|
|
428
|
+
* based on the screen width.
|
|
429
|
+
* @param [breakpoint=768] - The breakpoint in pixels at which a device is considered "smaller".
|
|
430
|
+
* @returns {boolean} - A boolean value indicating whether the current device is a smaller device.
|
|
431
|
+
*/
|
|
432
|
+
declare const useResponsiveDisplay: (breakpoint?: number) => boolean;
|
|
433
|
+
|
|
434
|
+
/**
|
|
435
|
+
* A React hook to detect the system theme preference.
|
|
436
|
+
* @returns The current system theme ('light', 'dark', or 'unknown').
|
|
437
|
+
*/
|
|
438
|
+
declare const useSystemTheme: () => SystemTheme;
|
|
439
|
+
|
|
440
|
+
export { type AppSettings, ColorPalette, type DarkModeOptions, DialogBtn, ErrorBoundary, GlobalStyles, Loading, PathName, type SystemTheme, type ThemeContextProps, ThemeProviderWrapper, commonComponentProps, createCustomTheme, displayGreeting, fadeIn, fadeInLeft, getDayIdentifier, getFontColor, installAppAnimation, isDarkMode, isFontLight, isHexColor, logoutAnimation, progressPulse, pulseAnimation, scale, slideIn, slideInBottom, systemInfo, themeConfig, themes, timeAgo, timeAgoFromStart, typographyProps, typographyVariants, useResponsiveDisplay, useSystemTheme, useThemeSettings };
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";var ke=Object.create;var b=Object.defineProperty;var we=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var ke=Object.create;var b=Object.defineProperty;var we=Object.getOwnPropertyDescriptor;var ve=Object.getOwnPropertyNames;var Te=Object.getPrototypeOf,Me=Object.prototype.hasOwnProperty;var Se=(e,r)=>{for(var t in r)b(e,t,{get:r[t],enumerable:!0})},z=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of ve(r))!Me.call(e,i)&&i!==t&&b(e,i,{get:()=>r[i],enumerable:!(o=we(r,i))||o.enumerable});return e};var h=(e,r,t)=>(t=e!=null?ke(Te(e)):{},z(r||!e||!e.__esModule?b(t,"default",{value:e,enumerable:!0}):t,e)),Pe=e=>z(b({},"__esModule",{value:!0}),e);var Oe={};Se(Oe,{ColorPalette:()=>s,DialogBtn:()=>N,ErrorBoundary:()=>_,GlobalStyles:()=>K,Loading:()=>G,PathName:()=>j,ThemeProviderWrapper:()=>_e,commonComponentProps:()=>T,createCustomTheme:()=>y,displayGreeting:()=>me,fadeIn:()=>re,fadeInLeft:()=>ee,getDayIdentifier:()=>fe,getFontColor:()=>x,installAppAnimation:()=>le,isDarkMode:()=>M,isFontLight:()=>Q,isHexColor:()=>$,logoutAnimation:()=>se,progressPulse:()=>ae,pulseAnimation:()=>ne,scale:()=>ie,slideIn:()=>te,slideInBottom:()=>oe,systemInfo:()=>xe,themeConfig:()=>v,themes:()=>u,timeAgo:()=>ue,timeAgoFromStart:()=>he,typographyProps:()=>pe,typographyVariants:()=>de,useResponsiveDisplay:()=>ge,useSystemTheme:()=>E,useThemeSettings:()=>J});module.exports=Pe(Oe);var W=h(require("@emotion/styled")),H=require("@mui/material"),N=(0,W.default)(H.Button)`
|
|
2
2
|
padding: 10px 16px;
|
|
3
3
|
border-radius: 16px;
|
|
4
4
|
font-size: 16px;
|
|
5
5
|
margin: 8px;
|
|
6
|
-
`;var Y=h(require("react")),L=h(require("@emotion/styled")),O=h(require("@mui/icons-material/ErrorOutlineRounded")),g=require("@mui/material"),
|
|
6
|
+
`;var Y=h(require("react")),L=h(require("@emotion/styled")),O=h(require("@mui/icons-material/ErrorOutlineRounded")),g=require("@mui/material"),l=require("react/jsx-runtime"),_=class extends Y.default.Component{constructor(r){super(r),this.state={hasError:!1}}static getDerivedStateFromError(r){return{hasError:!0,error:r}}componentDidCatch(r,t){console.error("Error:",r),console.error("Error Info:",t)}render(){var o,i,n;let{state:r,props:t}=this;return r.hasError?(0,l.jsxs)(De,{children:[(0,l.jsx)(Ee,{children:(0,l.jsx)(g.Box,{children:"\u041E\u0448\u0438\u0431\u043A\u0430.\xA0"})}),(0,l.jsxs)("h3",{children:[(0,l.jsxs)(g.Box,{style:{color:"#ff3131",display:"inline-block"},children:[(0,l.jsx)(O.default,{sx:{verticalAlign:"middle",mb:"4px"}})," ","ERROR:"]})," ",(0,l.jsxs)(g.Box,{translate:"no",children:["[",(o=r.error)==null?void 0:o.name,"] ",(i=r.error)==null?void 0:i.message]}),(0,l.jsxs)(g.Box,{style:{color:"#ff3131",display:"inline-block"},children:[(0,l.jsx)(O.default,{sx:{verticalAlign:"middle",mb:"4px"}})," ","Stack:"]})," ",(0,l.jsxs)(g.Box,{translate:"no",children:["[",(n=r.error)==null?void 0:n.stack,"]"]})]})]}):t.children}},De=L.default.div`
|
|
7
7
|
margin: 0 8vw;
|
|
8
8
|
@media (max-width: 768px) {
|
|
9
9
|
margin: 0;
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
color: white;
|
|
41
41
|
padding: 4px 6px;
|
|
42
42
|
border-radius: 8px;
|
|
43
|
-
`;var w=require("react"),B=(0,w.createContext)(void 0),J=()=>{let e=(0,w.useContext)(B);if(!e)throw new Error("useThemeSettings must be used within ThemeProviderWrapper");return e};var f=require("react"),ye=require("@emotion/react"),be=require("@mui/material/styles");var s={fontDark:"#101727",fontLight:"#f0f0f0",darkMode:"#383838",lightMode:"#ffffff",purple:"#b624ff",red:"#ff3131",orange:"#ff9318",orangeDark:"#ff9500"},
|
|
43
|
+
`;var w=require("react"),B=(0,w.createContext)(void 0),J=()=>{let e=(0,w.useContext)(B);if(!e)throw new Error("useThemeSettings must be used within ThemeProviderWrapper");return e};var f=require("react"),ye=require("@emotion/react"),be=require("@mui/material/styles");var s={fontDark:"#101727",fontLight:"#f0f0f0",darkMode:"#383838",lightMode:"#ffffff",purple:"#b624ff",red:"#ff3131",orange:"#ff9318",orangeDark:"#ff9500"},v={Lanit:{primaryColor:"#33ccff",secondaryColor:"#f7f7f7"},BPM:{primaryColor:"#203959",secondaryColor:"#ffffff"},Pampa:{primaryColor:"#ffe22e",secondaryColor:"#fafafa"},Hurma:{primaryColor:"#f6883d",secondaryColor:"#ffffff"},"Dark Purple":{primaryColor:s.purple},"Light Purple":{primaryColor:s.purple,secondaryColor:"#edeef6"},"Dark Blue":{primaryColor:"#106cff",secondaryColor:"#090815"},"Light Blue":{primaryColor:"#278ad2",secondaryColor:"#dddaf6"},"Dark Pink":{primaryColor:"#f2369d",secondaryColor:"#191218"},"Light Pink":{primaryColor:"#e5369a",secondaryColor:"#ffe3ff"},"Blush Blossom":{primaryColor:"#EC407A",secondaryColor:"#FCE4EC"},Cheesecake:{primaryColor:"#E14C94",secondaryColor:"#FDF0D5"},"Mystic Coral":{primaryColor:"#ff7b9c",secondaryColor:"#4a2333"},"Dark Orange":{primaryColor:"#FF5631",secondaryColor:"#0D0D0D"},"Light Orange":{primaryColor:"#F26E56",secondaryColor:"#F6F6F6"},Aurora:{primaryColor:"#00e952",secondaryColor:"#011926"}};var $=e=>/^#([\dA-Fa-f]{3}|[\dA-Fa-f]{6})$/.test(e),x=e=>{if(!$(e))return console.error("Invalid hex color provided:",e),s.fontDark;let r=e.slice(1),t=r.length===3?r.split("").map(p=>p+p).join(""):r,o=Number.parseInt(t.slice(0,2),16),i=Number.parseInt(t.slice(2,4),16),n=Number.parseInt(t.slice(4,6),16);return Math.round((o*299+i*587+n*114)/1e3)>128?s.fontDark:s.fontLight},Q=e=>x(e)===s.fontLight;var T={MuiTooltip:{defaultProps:{disableInteractive:!0},styleOverrides:{tooltip:({theme:e})=>({color:e.palette.mode==="dark"?"#fff":"#000",backgroundColor:e.palette.mode==="dark"?"#141431dd":"#ededf3dd",backdropFilter:"blur(6px)",WebkitBackdropFilter:"blur(6px)",padding:"8px 16px",borderRadius:e.shape.borderRadius,fontSize:"12px"})}},MuiButton:{styleOverrides:{root:({theme:e})=>({padding:"12px 24px",borderRadius:e.shape.borderRadius}),contained:{boxShadow:"none"}}},MuiSkeleton:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiSelect:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius}),select:{display:"flex",justifyContent:"flex-start",alignItems:"center",gap:"4px"}}},MuiDialog:{defaultProps:{slotProps:{paper:{style:{padding:"12px",borderRadius:24,minWidth:"400px"}}}},styleOverrides:{root:{"& .MuiDialog-container":{backdropFilter:"blur(4px)"}}}},MuiAvatar:{styleOverrides:{root:{fontWeight:500,color:"#fff"}}},MuiAlert:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiTextField:{styleOverrides:{root:({theme:e})=>({"& .MuiInputBase-root":{borderRadius:e.shape.borderRadius}})}},MuiPaper:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius}),elevation8:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiMenuItem:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiBottomNavigationAction:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"12px",margin:0,maxHeight:"none"})}},MuiIcon:{styleOverrides:{root:{borderRadius:"100%"}}},MuiDialogContent:{styleOverrides:{root:{padding:0}}},MuiSlider:{styleOverrides:{valueLabel:({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"6px 14px",color:e.palette.mode==="dark"?"#fff":"#000",backgroundColor:e.palette.mode==="dark"?"#141431dd":"#ededf3dd","&::before, &::after":{display:"none"}})}},MuiCircularProgress:{styleOverrides:{circle:{strokeLinecap:"round"}}},MuiTab:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiAccordion:{styleOverrides:{root:{"&::before":{display:"none"}}}}};var V=require("@mui/material");var y=(e,r="#232e58",t="dark")=>(0,V.createTheme)({palette:{primary:{main:e},secondary:{main:r},warning:{main:t==="dark"?s.orange:s.orangeDark},error:{main:s.red},mode:t},components:{...T,MuiTypography:{defaultProps:{variantMapping:{text_xl_regular:"p",text_lg_regular:"p"}}}},typography:{text_xl_regular:{font:"400 20px/30px inherit inherit"},text_lg_regular:{font:"400 18px/28px inherit inherit"}},shape:{borderRadius:24}}),u=Object.entries(v).map(([e,r])=>({name:e,MuiTheme:y(r.primaryColor,r.secondaryColor)})),M=(e,r,t)=>{switch(e){case"light":return!1;case"dark":return!0;case"system":return r==="dark";case"auto":return x(t)===s.fontLight;default:return!1}};var A=require("react"),S=require("@emotion/react"),q=require("@mui/material/styles");var Z=require("react/jsx-runtime"),K=()=>{let e=(0,q.useTheme)(),r=e.palette.mode==="dark",t=e.palette.primary.main,o=e.palette.secondary.main,i=(0,A.useMemo)(()=>x(t),[t]),n=(0,A.useMemo)(()=>x(o),[o]);return(0,Z.jsx)(S.Global,{styles:S.css`
|
|
44
44
|
* {
|
|
45
45
|
font-family: "Poppins", sans-serif !important;
|
|
46
46
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -234,7 +234,7 @@
|
|
|
234
234
|
transform: scale(1);
|
|
235
235
|
opacity: 1;
|
|
236
236
|
}
|
|
237
|
-
`,
|
|
237
|
+
`,le=m.keyframes`
|
|
238
238
|
0% {
|
|
239
239
|
transform: translateY(0);
|
|
240
240
|
}
|
|
@@ -250,5 +250,5 @@
|
|
|
250
250
|
100% {
|
|
251
251
|
transform: translateY(0);
|
|
252
252
|
}
|
|
253
|
-
`;var
|
|
253
|
+
`;var pe={MuiTypography:{defaultProps:{variantMapping:{...Object.fromEntries(["xl","lg","md","sm","xs","2xs"].flatMap(e=>[[`text_${e}_regular`,"p"],[`text_${e}_bold`,"p"],[`text_${e}_semibold`,"p"],[`text_${e}_thin`,"p"]])),display_2xl_regular:"h1",display_xl_regular:"h2",display_lg_regular:"h3",display_md_regular:"h4",display_sm_regular:"h5",display_xs_regular:"h6",display_2xl_bold:"h1",display_xl_bold:"h2",display_lg_bold:"h3",display_md_bold:"h4",display_sm_bold:"h5",display_xs_bold:"h6"}}}},de={text_xl_regular:{font:"400 20px/30px inherit inherit"},text_lg_regular:{font:"400 18px/28px inherit inherit"},text_md_regular:{font:"400 16px/24px inherit inherit"},text_sm_regular:{font:"400 14px/20px inherit inherit"},text_xs_regular:{font:"400 12px/18px inherit inherit"},text_2xs_regular:{font:"400 10px/14px inherit inherit"},text_xl_bold:{font:"600 20px/30px inherit inherit"},text_lg_bold:{font:"700 18px/28px inherit inherit"},text_md_bold:{font:"700 16px/24px inherit inherit"},text_sm_bold:{font:"700 14px/20px inherit inherit"},text_xs_bold:{font:"700 12px/18px inherit inherit"},text_2xs_bold:{font:"700 10px/14px inherit inherit"},text_xl_semibold:{font:"600 20px/30px inherit inherit"},text_lg_semibold:{font:"600 18px/28px inherit inherit"},text_md_semibold:{font:"600 16px/24px inherit inherit"},text_sm_semibold:{font:"600 14px/20px inherit inherit"},text_xs_semibold:{font:"600 12px/18px inherit inherit"},text_2xs_semibold:{font:"600 10px/14px inherit inherit"},text_xl_thin:{font:"100 20px/30px inherit inherit"},text_lg_thin:{font:"100 18px/28px inherit inherit"},text_md_thin:{font:"100 16px/24px inherit inherit"},text_sm_thin:{font:"100 14px/20px inherit inherit"},text_xs_thin:{font:"100 12px/18px inherit inherit"},text_2xs_thin:{font:"100 10px/14px inherit inherit"},display_2xl_regular:{font:"400 72px/90px inherit inherit"},display_xl_regular:{font:"400 60px/72px inherit inherit"},display_lg_regular:{font:"400 48px/60px inherit inherit"},display_md_regular:{font:"400 36px/44px inherit inherit"},display_sm_regular:{font:"400 30px/38px inherit inherit"},display_xs_regular:{font:"400 24px/32px inherit inherit"},display_2xl_bold:{font:"700 72px/90px inherit inherit"},display_xl_bold:{font:"700 60px/72px inherit inherit"},display_lg_bold:{font:"700 48px/60px inherit inherit"},display_md_bold:{font:"700 36px/44px inherit inherit"},display_sm_bold:{font:"700 30px/38px inherit inherit"},display_xs_bold:{font:"700 24px/32px inherit inherit"}};var me=()=>{let r=new Date().getHours(),t;return r<12&&r>=5?t="\u0414\u043E\u0431\u0440\u043E\u0435 \u0443\u0442\u0440\u043E,":r<18&&r>12?t="\u0414\u043E\u0431\u0440\u044B\u0439 \u0434\u0435\u043D\u044C,":t="\u0414\u043E\u0431\u0440\u044B\u0439 \u0432\u0435\u0447\u0435\u0440,",t};var fe=e=>{let r=e.getFullYear(),t=String(e.getMonth()+1).padStart(2,"0"),o=String(e.getDate()).padStart(2,"0");return`${r}-${t}-${o}`};var{userAgent:ce}=globalThis.navigator,Fe=()=>{let e=ce.toLowerCase();return e.includes("windows nt")?"Windows":e.includes("iphone")||e.includes("ipad")||e.includes("ipod")?"iOS":e.includes("mac")?"macOS":e.includes("android")?"Android":e.includes("linux")?"Linux":"Unknown"},Ie=()=>{let e=ce.toLowerCase();return e.includes("edg")?"Edge":e.includes("chrome")?"Chrome":e.includes("firefox")?"Firefox":e.includes("safari")?"Safari":"Unknown"},xe={os:Fe(),browser:Ie()};var ue=(e,r=navigator.language||"en-US")=>{let t=new Date;e=new Date(e);let o=Math.floor((t.getTime()-e.getTime())/1e3),i=new Intl.RelativeTimeFormat(r,{numeric:"auto"});if(o<60)return i.format(-o,"second");if(o<3600){let a=Math.floor(o/60);return i.format(-a,"minute")}if(o<86400){let a=Math.floor(o/3600);return i.format(-a,"hour")}let n=Math.floor(o/86400);return i.format(-n,"day")},he=(e,r=navigator.language||"en-US")=>{let t=new Date;e=new Date(e);let o=(e.getTime()-t.getTime())/1e3,i=Math.floor(o/(60*60)),n=Math.floor((o-60*60*i)/60),a=Math.floor(o-60*60*i-60*n),p=new Intl.RelativeTimeFormat(r,{numeric:"auto"});if(n===0&&a<60)return p.format(a,"second");if(i===0&&n<60)return p.format(n,"minute");if(i<24){let I=`${new Intl.RelativeTimeFormat(r,{numeric:"auto"}).format(i,"hour")}`,d=` ${new Intl.RelativeTimeFormat(r,{localeMatcher:"lookup",numeric:"always",style:"long"}).format(n,"minute")}`.replace(/^\D+/,"");return`${I} ${d}`}let F=Math.floor(a/86400);return p.format(F,"day")};var P=require("react"),ge=(e=768)=>{let[r,t]=(0,P.useState)(!1);return(0,P.useEffect)(()=>{let o=()=>{t(window.innerWidth<e)};o();let i=()=>o();return window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)}},[e]),r};var D=require("react"),E=()=>{let[e,r]=(0,D.useState)("unknown");return(0,D.useEffect)(()=>{let t=i=>{r(i.matches?"dark":"light")},o=globalThis.matchMedia("(prefers-color-scheme: dark)");return r(o.matches?"dark":"light"),o.addEventListener("change",t),()=>{o.removeEventListener("change",t)}},[]),e};var R=require("react/jsx-runtime"),_e=({children:e})=>{let r=E(),[t,o]=(0,f.useState)(()=>{let d=localStorage.getItem("appSettings");return d&&JSON.parse(d).theme||"system"}),[i,n]=(0,f.useState)(()=>{let d=localStorage.getItem("appSettings");return d&&JSON.parse(d).darkMode||"auto"});(0,f.useEffect)(()=>{localStorage.setItem("appSettings",JSON.stringify({theme:t,darkMode:i}))},[t,i]);let a=(0,f.useMemo)(()=>{var d;return r==="unknown"?u[0].MuiTheme:t==="system"?r==="dark"?u[0].MuiTheme:u[1].MuiTheme:((d=u.find(Ce=>Ce.name===t))==null?void 0:d.MuiTheme)||u[0].MuiTheme},[r,t]),p=(0,f.useMemo)(()=>M(i,r,a.palette.secondary.main)?"dark":"light",[i,r,a]),F=(0,f.useMemo)(()=>y(a.palette.primary.main,a.palette.secondary.main,p),[a,p]),I=(0,f.useMemo)(()=>({darkMode:p==="dark"}),[p]);return(0,R.jsx)(B.Provider,{value:{theme:t,darkMode:i,setTheme:o,setDarkMode:n},children:(0,R.jsx)(be.ThemeProvider,{theme:F,children:(0,R.jsx)(ye.ThemeProvider,{theme:I,children:e})})})};0&&(module.exports={ColorPalette,DialogBtn,ErrorBoundary,GlobalStyles,Loading,PathName,ThemeProviderWrapper,commonComponentProps,createCustomTheme,displayGreeting,fadeIn,fadeInLeft,getDayIdentifier,getFontColor,installAppAnimation,isDarkMode,isFontLight,isHexColor,logoutAnimation,progressPulse,pulseAnimation,scale,slideIn,slideInBottom,systemInfo,themeConfig,themes,timeAgo,timeAgoFromStart,typographyProps,typographyVariants,useResponsiveDisplay,useSystemTheme,useThemeSettings});
|
|
254
254
|
//# sourceMappingURL=index.js.map
|
package/dist/index.mjs
CHANGED
|
@@ -40,7 +40,7 @@ import L from"@emotion/styled";import{Button as B}from"@mui/material";var $=L(B)
|
|
|
40
40
|
color: white;
|
|
41
41
|
padding: 4px 6px;
|
|
42
42
|
border-radius: 8px;
|
|
43
|
-
`;import{createContext as K,useContext as Z}from"react";var k=K(void 0),ee=()=>{let e=Z(k);if(!e)throw new Error("useThemeSettings must be used within ThemeProviderWrapper");return e};import{useMemo as g,useState as I,useEffect as Re}from"react";import{ThemeProvider as Fe}from"@emotion/react";import{ThemeProvider as Ie}from"@mui/material/styles";var s={fontDark:"#101727",fontLight:"#f0f0f0",darkMode:"#383838",lightMode:"#ffffff",purple:"#b624ff",red:"#ff3131",orange:"#ff9318",orangeDark:"#ff9500"},w={Lanit:{primaryColor:"#33ccff",secondaryColor:"#f7f7f7"},BPM:{primaryColor:"#203959",secondaryColor:"#ffffff"},Pampa:{primaryColor:"#ffe22e",secondaryColor:"#fafafa"},Hurma:{primaryColor:"#f6883d",secondaryColor:"#ffffff"},"Dark Purple":{primaryColor:s.purple},"Light Purple":{primaryColor:s.purple,secondaryColor:"#edeef6"},"Dark Blue":{primaryColor:"#106cff",secondaryColor:"#090815"},"Light Blue":{primaryColor:"#278ad2",secondaryColor:"#dddaf6"},"Dark Pink":{primaryColor:"#f2369d",secondaryColor:"#191218"},"Light Pink":{primaryColor:"#e5369a",secondaryColor:"#ffe3ff"},"Blush Blossom":{primaryColor:"#EC407A",secondaryColor:"#FCE4EC"},Cheesecake:{primaryColor:"#E14C94",secondaryColor:"#FDF0D5"},"Mystic Coral":{primaryColor:"#ff7b9c",secondaryColor:"#4a2333"},"Dark Orange":{primaryColor:"#FF5631",secondaryColor:"#0D0D0D"},"Light Orange":{primaryColor:"#F26E56",secondaryColor:"#F6F6F6"},Aurora:{primaryColor:"#00e952",secondaryColor:"#011926"}};var E=e=>/^#([\dA-Fa-f]{3}|[\dA-Fa-f]{6})$/.test(e),m=e=>{if(!E(e))return console.error("Invalid hex color provided:",e),s.fontDark;let r=e.slice(1),t=r.length===3?r.split("").map(
|
|
43
|
+
`;import{createContext as K,useContext as Z}from"react";var k=K(void 0),ee=()=>{let e=Z(k);if(!e)throw new Error("useThemeSettings must be used within ThemeProviderWrapper");return e};import{useMemo as g,useState as I,useEffect as Re}from"react";import{ThemeProvider as Fe}from"@emotion/react";import{ThemeProvider as Ie}from"@mui/material/styles";var s={fontDark:"#101727",fontLight:"#f0f0f0",darkMode:"#383838",lightMode:"#ffffff",purple:"#b624ff",red:"#ff3131",orange:"#ff9318",orangeDark:"#ff9500"},w={Lanit:{primaryColor:"#33ccff",secondaryColor:"#f7f7f7"},BPM:{primaryColor:"#203959",secondaryColor:"#ffffff"},Pampa:{primaryColor:"#ffe22e",secondaryColor:"#fafafa"},Hurma:{primaryColor:"#f6883d",secondaryColor:"#ffffff"},"Dark Purple":{primaryColor:s.purple},"Light Purple":{primaryColor:s.purple,secondaryColor:"#edeef6"},"Dark Blue":{primaryColor:"#106cff",secondaryColor:"#090815"},"Light Blue":{primaryColor:"#278ad2",secondaryColor:"#dddaf6"},"Dark Pink":{primaryColor:"#f2369d",secondaryColor:"#191218"},"Light Pink":{primaryColor:"#e5369a",secondaryColor:"#ffe3ff"},"Blush Blossom":{primaryColor:"#EC407A",secondaryColor:"#FCE4EC"},Cheesecake:{primaryColor:"#E14C94",secondaryColor:"#FDF0D5"},"Mystic Coral":{primaryColor:"#ff7b9c",secondaryColor:"#4a2333"},"Dark Orange":{primaryColor:"#FF5631",secondaryColor:"#0D0D0D"},"Light Orange":{primaryColor:"#F26E56",secondaryColor:"#F6F6F6"},Aurora:{primaryColor:"#00e952",secondaryColor:"#011926"}};var E=e=>/^#([\dA-Fa-f]{3}|[\dA-Fa-f]{6})$/.test(e),m=e=>{if(!E(e))return console.error("Invalid hex color provided:",e),s.fontDark;let r=e.slice(1),t=r.length===3?r.split("").map(l=>l+l).join(""):r,o=Number.parseInt(t.slice(0,2),16),i=Number.parseInt(t.slice(2,4),16),n=Number.parseInt(t.slice(4,6),16);return Math.round((o*299+i*587+n*114)/1e3)>128?s.fontDark:s.fontLight},re=e=>m(e)===s.fontLight;var v={MuiTooltip:{defaultProps:{disableInteractive:!0},styleOverrides:{tooltip:({theme:e})=>({color:e.palette.mode==="dark"?"#fff":"#000",backgroundColor:e.palette.mode==="dark"?"#141431dd":"#ededf3dd",backdropFilter:"blur(6px)",WebkitBackdropFilter:"blur(6px)",padding:"8px 16px",borderRadius:e.shape.borderRadius,fontSize:"12px"})}},MuiButton:{styleOverrides:{root:({theme:e})=>({padding:"12px 24px",borderRadius:e.shape.borderRadius}),contained:{boxShadow:"none"}}},MuiSkeleton:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiSelect:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius}),select:{display:"flex",justifyContent:"flex-start",alignItems:"center",gap:"4px"}}},MuiDialog:{defaultProps:{slotProps:{paper:{style:{padding:"12px",borderRadius:24,minWidth:"400px"}}}},styleOverrides:{root:{"& .MuiDialog-container":{backdropFilter:"blur(4px)"}}}},MuiAvatar:{styleOverrides:{root:{fontWeight:500,color:"#fff"}}},MuiAlert:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiTextField:{styleOverrides:{root:({theme:e})=>({"& .MuiInputBase-root":{borderRadius:e.shape.borderRadius}})}},MuiPaper:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius}),elevation8:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiMenuItem:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiBottomNavigationAction:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"12px",margin:0,maxHeight:"none"})}},MuiIcon:{styleOverrides:{root:{borderRadius:"100%"}}},MuiDialogContent:{styleOverrides:{root:{padding:0}}},MuiSlider:{styleOverrides:{valueLabel:({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"6px 14px",color:e.palette.mode==="dark"?"#fff":"#000",backgroundColor:e.palette.mode==="dark"?"#141431dd":"#ededf3dd","&::before, &::after":{display:"none"}})}},MuiCircularProgress:{styleOverrides:{circle:{strokeLinecap:"round"}}},MuiTab:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiAccordion:{styleOverrides:{root:{"&::before":{display:"none"}}}}};import{createTheme as te}from"@mui/material";var h=(e,r="#232e58",t="dark")=>te({palette:{primary:{main:e},secondary:{main:r},warning:{main:t==="dark"?s.orange:s.orangeDark},error:{main:s.red},mode:t},components:{...v,MuiTypography:{defaultProps:{variantMapping:{text_xl_regular:"p",text_lg_regular:"p"}}}},typography:{text_xl_regular:{font:"400 20px/30px inherit inherit"},text_lg_regular:{font:"400 18px/28px inherit inherit"}},shape:{borderRadius:24}}),f=Object.entries(w).map(([e,r])=>({name:e,MuiTheme:h(r.primaryColor,r.secondaryColor)})),T=(e,r,t)=>{switch(e){case"light":return!1;case"dark":return!0;case"system":return r==="dark";case"auto":return m(t)===s.fontLight;default:return!1}};import{useMemo as R}from"react";import{Global as oe,css as ie}from"@emotion/react";import{useTheme as ne}from"@mui/material/styles";import{jsx as se}from"react/jsx-runtime";var ae=()=>{let e=ne(),r=e.palette.mode==="dark",t=e.palette.primary.main,o=e.palette.secondary.main,i=R(()=>m(t),[t]),n=R(()=>m(o),[o]);return se(oe,{styles:ie`
|
|
44
44
|
* {
|
|
45
45
|
font-family: "Poppins", sans-serif !important;
|
|
46
46
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -161,7 +161,7 @@ import L from"@emotion/styled";import{Button as B}from"@mui/material";var $=L(B)
|
|
|
161
161
|
margin-top: 3px;
|
|
162
162
|
}
|
|
163
163
|
}
|
|
164
|
-
`})};import{keyframes as d}from"@emotion/react";var
|
|
164
|
+
`})};import{keyframes as d}from"@emotion/react";var le=d`
|
|
165
165
|
from {
|
|
166
166
|
opacity: 0;
|
|
167
167
|
transform: translateX(-40px);
|
|
@@ -170,7 +170,7 @@ import L from"@emotion/styled";import{Button as B}from"@mui/material";var $=L(B)
|
|
|
170
170
|
opacity: 1;
|
|
171
171
|
transform: translateX(0);
|
|
172
172
|
}
|
|
173
|
-
`,
|
|
173
|
+
`,pe=d`
|
|
174
174
|
from {
|
|
175
175
|
opacity: 0;
|
|
176
176
|
}
|
|
@@ -250,5 +250,5 @@ import L from"@emotion/styled";import{Button as B}from"@mui/material";var $=L(B)
|
|
|
250
250
|
100% {
|
|
251
251
|
transform: translateY(0);
|
|
252
252
|
}
|
|
253
|
-
`;var ge={MuiTypography:{defaultProps:{variantMapping:{...Object.fromEntries(["xl","lg","md","sm","xs","2xs"].flatMap(e=>[[`text_${e}_regular`,"p"],[`text_${e}_bold`,"p"],[`text_${e}_semibold`,"p"],[`text_${e}_thin`,"p"]])),display_2xl_regular:"h1",display_xl_regular:"h2",display_lg_regular:"h3",display_md_regular:"h4",display_sm_regular:"h5",display_xs_regular:"h6",display_2xl_bold:"h1",display_xl_bold:"h2",display_lg_bold:"h3",display_md_bold:"h4",display_sm_bold:"h5",display_xs_bold:"h6"}}}},ye={text_xl_regular:{font:"400 20px/30px inherit inherit"},text_lg_regular:{font:"400 18px/28px inherit inherit"},text_md_regular:{font:"400 16px/24px inherit inherit"},text_sm_regular:{font:"400 14px/20px inherit inherit"},text_xs_regular:{font:"400 12px/18px inherit inherit"},text_2xs_regular:{font:"400 10px/14px inherit inherit"},text_xl_bold:{font:"600 20px/30px inherit inherit"},text_lg_bold:{font:"700 18px/28px inherit inherit"},text_md_bold:{font:"700 16px/24px inherit inherit"},text_sm_bold:{font:"700 14px/20px inherit inherit"},text_xs_bold:{font:"700 12px/18px inherit inherit"},text_2xs_bold:{font:"700 10px/14px inherit inherit"},text_xl_semibold:{font:"600 20px/30px inherit inherit"},text_lg_semibold:{font:"600 18px/28px inherit inherit"},text_md_semibold:{font:"600 16px/24px inherit inherit"},text_sm_semibold:{font:"600 14px/20px inherit inherit"},text_xs_semibold:{font:"600 12px/18px inherit inherit"},text_2xs_semibold:{font:"600 10px/14px inherit inherit"},text_xl_thin:{font:"100 20px/30px inherit inherit"},text_lg_thin:{font:"100 18px/28px inherit inherit"},text_md_thin:{font:"100 16px/24px inherit inherit"},text_sm_thin:{font:"100 14px/20px inherit inherit"},text_xs_thin:{font:"100 12px/18px inherit inherit"},text_2xs_thin:{font:"100 10px/14px inherit inherit"},display_2xl_regular:{font:"400 72px/90px inherit inherit"},display_xl_regular:{font:"400 60px/72px inherit inherit"},display_lg_regular:{font:"400 48px/60px inherit inherit"},display_md_regular:{font:"400 36px/44px inherit inherit"},display_sm_regular:{font:"400 30px/38px inherit inherit"},display_xs_regular:{font:"400 24px/32px inherit inherit"},display_2xl_bold:{font:"700 72px/90px inherit inherit"},display_xl_bold:{font:"700 60px/72px inherit inherit"},display_lg_bold:{font:"700 48px/60px inherit inherit"},display_md_bold:{font:"700 36px/44px inherit inherit"},display_sm_bold:{font:"700 30px/38px inherit inherit"},display_xs_bold:{font:"700 24px/32px inherit inherit"}};var be=()=>{let r=new Date().getHours(),t;return r<12&&r>=5?t="\u0414\u043E\u0431\u0440\u043E\u0435 \u0443\u0442\u0440\u043E,":r<18&&r>12?t="\u0414\u043E\u0431\u0440\u044B\u0439 \u0434\u0435\u043D\u044C,":t="\u0414\u043E\u0431\u0440\u044B\u0439 \u0432\u0435\u0447\u0435\u0440,",t};var _e=e=>{let r=e.getFullYear(),t=String(e.getMonth()+1).padStart(2,"0"),o=String(e.getDate()).padStart(2,"0");return`${r}-${t}-${o}`};var{userAgent:F}=globalThis.navigator,Ce=()=>{let e=F.toLowerCase();return e.includes("windows nt")?"Windows":e.includes("iphone")||e.includes("ipad")||e.includes("ipod")?"iOS":e.includes("mac")?"macOS":e.includes("android")?"Android":e.includes("linux")?"Linux":"Unknown"},ke=()=>{let e=F.toLowerCase();return e.includes("edg")?"Edge":e.includes("chrome")?"Chrome":e.includes("firefox")?"Firefox":e.includes("safari")?"Safari":"Unknown"},we={os:Ce(),browser:ke()};var
|
|
253
|
+
`;var ge={MuiTypography:{defaultProps:{variantMapping:{...Object.fromEntries(["xl","lg","md","sm","xs","2xs"].flatMap(e=>[[`text_${e}_regular`,"p"],[`text_${e}_bold`,"p"],[`text_${e}_semibold`,"p"],[`text_${e}_thin`,"p"]])),display_2xl_regular:"h1",display_xl_regular:"h2",display_lg_regular:"h3",display_md_regular:"h4",display_sm_regular:"h5",display_xs_regular:"h6",display_2xl_bold:"h1",display_xl_bold:"h2",display_lg_bold:"h3",display_md_bold:"h4",display_sm_bold:"h5",display_xs_bold:"h6"}}}},ye={text_xl_regular:{font:"400 20px/30px inherit inherit"},text_lg_regular:{font:"400 18px/28px inherit inherit"},text_md_regular:{font:"400 16px/24px inherit inherit"},text_sm_regular:{font:"400 14px/20px inherit inherit"},text_xs_regular:{font:"400 12px/18px inherit inherit"},text_2xs_regular:{font:"400 10px/14px inherit inherit"},text_xl_bold:{font:"600 20px/30px inherit inherit"},text_lg_bold:{font:"700 18px/28px inherit inherit"},text_md_bold:{font:"700 16px/24px inherit inherit"},text_sm_bold:{font:"700 14px/20px inherit inherit"},text_xs_bold:{font:"700 12px/18px inherit inherit"},text_2xs_bold:{font:"700 10px/14px inherit inherit"},text_xl_semibold:{font:"600 20px/30px inherit inherit"},text_lg_semibold:{font:"600 18px/28px inherit inherit"},text_md_semibold:{font:"600 16px/24px inherit inherit"},text_sm_semibold:{font:"600 14px/20px inherit inherit"},text_xs_semibold:{font:"600 12px/18px inherit inherit"},text_2xs_semibold:{font:"600 10px/14px inherit inherit"},text_xl_thin:{font:"100 20px/30px inherit inherit"},text_lg_thin:{font:"100 18px/28px inherit inherit"},text_md_thin:{font:"100 16px/24px inherit inherit"},text_sm_thin:{font:"100 14px/20px inherit inherit"},text_xs_thin:{font:"100 12px/18px inherit inherit"},text_2xs_thin:{font:"100 10px/14px inherit inherit"},display_2xl_regular:{font:"400 72px/90px inherit inherit"},display_xl_regular:{font:"400 60px/72px inherit inherit"},display_lg_regular:{font:"400 48px/60px inherit inherit"},display_md_regular:{font:"400 36px/44px inherit inherit"},display_sm_regular:{font:"400 30px/38px inherit inherit"},display_xs_regular:{font:"400 24px/32px inherit inherit"},display_2xl_bold:{font:"700 72px/90px inherit inherit"},display_xl_bold:{font:"700 60px/72px inherit inherit"},display_lg_bold:{font:"700 48px/60px inherit inherit"},display_md_bold:{font:"700 36px/44px inherit inherit"},display_sm_bold:{font:"700 30px/38px inherit inherit"},display_xs_bold:{font:"700 24px/32px inherit inherit"}};var be=()=>{let r=new Date().getHours(),t;return r<12&&r>=5?t="\u0414\u043E\u0431\u0440\u043E\u0435 \u0443\u0442\u0440\u043E,":r<18&&r>12?t="\u0414\u043E\u0431\u0440\u044B\u0439 \u0434\u0435\u043D\u044C,":t="\u0414\u043E\u0431\u0440\u044B\u0439 \u0432\u0435\u0447\u0435\u0440,",t};var _e=e=>{let r=e.getFullYear(),t=String(e.getMonth()+1).padStart(2,"0"),o=String(e.getDate()).padStart(2,"0");return`${r}-${t}-${o}`};var{userAgent:F}=globalThis.navigator,Ce=()=>{let e=F.toLowerCase();return e.includes("windows nt")?"Windows":e.includes("iphone")||e.includes("ipad")||e.includes("ipod")?"iOS":e.includes("mac")?"macOS":e.includes("android")?"Android":e.includes("linux")?"Linux":"Unknown"},ke=()=>{let e=F.toLowerCase();return e.includes("edg")?"Edge":e.includes("chrome")?"Chrome":e.includes("firefox")?"Firefox":e.includes("safari")?"Safari":"Unknown"},we={os:Ce(),browser:ke()};var ve=(e,r=navigator.language||"en-US")=>{let t=new Date;e=new Date(e);let o=Math.floor((t.getTime()-e.getTime())/1e3),i=new Intl.RelativeTimeFormat(r,{numeric:"auto"});if(o<60)return i.format(-o,"second");if(o<3600){let a=Math.floor(o/60);return i.format(-a,"minute")}if(o<86400){let a=Math.floor(o/3600);return i.format(-a,"hour")}let n=Math.floor(o/86400);return i.format(-n,"day")},Te=(e,r=navigator.language||"en-US")=>{let t=new Date;e=new Date(e);let o=(e.getTime()-t.getTime())/1e3,i=Math.floor(o/(60*60)),n=Math.floor((o-60*60*i)/60),a=Math.floor(o-60*60*i-60*n),l=new Intl.RelativeTimeFormat(r,{numeric:"auto"});if(n===0&&a<60)return l.format(a,"second");if(i===0&&n<60)return l.format(n,"minute");if(i<24){let b=`${new Intl.RelativeTimeFormat(r,{numeric:"auto"}).format(i,"hour")}`,p=` ${new Intl.RelativeTimeFormat(r,{localeMatcher:"lookup",numeric:"always",style:"long"}).format(n,"minute")}`.replace(/^\D+/,"");return`${b} ${p}`}let y=Math.floor(a/86400);return l.format(y,"day")};import{useEffect as Me,useState as Se}from"react";var Pe=(e=768)=>{let[r,t]=Se(!1);return Me(()=>{let o=()=>{t(window.innerWidth<e)};o();let i=()=>o();return window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)}},[e]),r};import{useState as De,useEffect as Ee}from"react";var M=()=>{let[e,r]=De("unknown");return Ee(()=>{let t=i=>{r(i.matches?"dark":"light")},o=globalThis.matchMedia("(prefers-color-scheme: dark)");return r(o.matches?"dark":"light"),o.addEventListener("change",t),()=>{o.removeEventListener("change",t)}},[]),e};import{jsx as S}from"react/jsx-runtime";var Oe=({children:e})=>{let r=M(),[t,o]=I(()=>{let p=localStorage.getItem("appSettings");return p&&JSON.parse(p).theme||"system"}),[i,n]=I(()=>{let p=localStorage.getItem("appSettings");return p&&JSON.parse(p).darkMode||"auto"});Re(()=>{localStorage.setItem("appSettings",JSON.stringify({theme:t,darkMode:i}))},[t,i]);let a=g(()=>{var p;return r==="unknown"?f[0].MuiTheme:t==="system"?r==="dark"?f[0].MuiTheme:f[1].MuiTheme:((p=f.find(O=>O.name===t))==null?void 0:p.MuiTheme)||f[0].MuiTheme},[r,t]),l=g(()=>T(i,r,a.palette.secondary.main)?"dark":"light",[i,r,a]),y=g(()=>h(a.palette.primary.main,a.palette.secondary.main,l),[a,l]),b=g(()=>({darkMode:l==="dark"}),[l]);return S(k.Provider,{value:{theme:t,darkMode:i,setTheme:o,setDarkMode:n},children:S(Ie,{theme:y,children:S(Fe,{theme:b,children:e})})})};export{s as ColorPalette,$ as DialogBtn,_ as ErrorBoundary,ae as GlobalStyles,X as Loading,q as PathName,Oe as ThemeProviderWrapper,v as commonComponentProps,h as createCustomTheme,be as displayGreeting,pe as fadeIn,le as fadeInLeft,_e as getDayIdentifier,m as getFontColor,he as installAppAnimation,T as isDarkMode,re as isFontLight,E as isHexColor,ue as logoutAnimation,xe as progressPulse,ce as pulseAnimation,fe as scale,de as slideIn,me as slideInBottom,we as systemInfo,w as themeConfig,f as themes,ve as timeAgo,Te as timeAgoFromStart,ge as typographyProps,ye as typographyVariants,Pe as useResponsiveDisplay,M as useSystemTheme,ee as useThemeSettings};
|
|
254
254
|
//# sourceMappingURL=index.mjs.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atomazing-org/design-system",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.22",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A library providing a set of useful utils, MUI style extensions, and components to build your application.",
|
|
6
6
|
"author": "PonomarevBPM + MarkSinD",
|