@atomazing-org/design-system 1.0.5 → 1.0.6
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/README.MD +191 -19
- package/dist/index.d.mts +297 -0
- package/dist/index.d.ts +297 -0
- package/dist/index.js +254 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +254 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +64 -40
- package/build/components/DialogBtn.d.ts +0 -5
- package/build/components/DialogBtn.js +0 -8
- package/build/components/ErrorBoundary.d.ts +0 -20
- package/build/components/ErrorBoundary.js +0 -75
- package/build/components/Loading.d.ts +0 -1
- package/build/components/Loading.js +0 -26
- package/build/components/PathName.d.ts +0 -4
- package/build/components/PathName.js +0 -8
- package/build/components/index.d.ts +0 -3
- package/build/components/index.js +0 -3
- package/build/styles/commonComponents.d.ts +0 -2
- package/build/styles/commonComponents.js +0 -69
- package/build/styles/index.d.ts +0 -3
- package/build/styles/index.js +0 -3
- package/build/styles/keyframes.d.ts +0 -10
- package/build/styles/keyframes.js +0 -108
- package/build/styles/typography.d.ts +0 -4
- package/build/styles/typography.js +0 -160
- package/build/utils/displayGreeting.d.ts +0 -5
- package/build/utils/displayGreeting.js +0 -19
- package/build/utils/getDayIdentifier.d.ts +0 -4
- package/build/utils/getDayIdentifier.js +0 -9
- package/build/utils/getSystemInfo.d.ts +0 -7
- package/build/utils/getSystemInfo.js +0 -26
- package/build/utils/index.d.ts +0 -5
- package/build/utils/index.js +0 -5
- package/build/utils/timeAgo.d.ts +0 -9
- package/build/utils/timeAgo.js +0 -56
- package/build/utils/useResponsiveDisplay.d.ts +0 -7
- package/build/utils/useResponsiveDisplay.js +0 -22
- package/index.d.ts +0 -187
- package/index.js +0 -26
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,297 @@
|
|
|
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 } 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
|
+
import { TypographyVariantsOptions } from '@mui/material/styles/createTypography';
|
|
10
|
+
|
|
11
|
+
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"> & {
|
|
12
|
+
theme?: _emotion_react.Theme;
|
|
13
|
+
}, {}, {}>;
|
|
14
|
+
|
|
15
|
+
interface ErrorBoundaryProps {
|
|
16
|
+
children: React__default.ReactNode;
|
|
17
|
+
}
|
|
18
|
+
interface ErrorBoundaryState {
|
|
19
|
+
hasError: boolean;
|
|
20
|
+
error?: Error;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* ErrorBoundary component that catches and displays errors.
|
|
24
|
+
*/
|
|
25
|
+
declare class ErrorBoundary extends React__default.Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
26
|
+
constructor(props: ErrorBoundaryProps);
|
|
27
|
+
static getDerivedStateFromError(error: Error): ErrorBoundaryState;
|
|
28
|
+
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
29
|
+
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;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
declare const Loading: () => react_jsx_runtime.JSX.Element;
|
|
33
|
+
|
|
34
|
+
declare const PathName: _emotion_styled.StyledComponent<{
|
|
35
|
+
theme?: _emotion_react.Theme;
|
|
36
|
+
as?: React.ElementType;
|
|
37
|
+
}, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Validates whether a given string is a valid 3- or 6-digit hex color code (e.g., "#fff" or "#ffffff").
|
|
41
|
+
*
|
|
42
|
+
* @param value - The string to check.
|
|
43
|
+
* @returns `true` if the string is a valid hex color; otherwise, `false`.
|
|
44
|
+
*/
|
|
45
|
+
declare const isHexColor: (value: string) => boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Determines the ideal font color (white or black) for contrast against a given background color.
|
|
48
|
+
*
|
|
49
|
+
* Uses luminance calculation (YIQ) to ensure accessibility and visual clarity.
|
|
50
|
+
*
|
|
51
|
+
* @param backgroundColor - A valid hex color (e.g., "#ffffff").
|
|
52
|
+
* @returns A hex color string (`fontLight` or `fontDark`) suitable for overlay text.
|
|
53
|
+
*/
|
|
54
|
+
declare const getFontColor: (backgroundColor: string) => string;
|
|
55
|
+
/**
|
|
56
|
+
* Determines whether the ideal font color for a background is light (i.e., white).
|
|
57
|
+
*
|
|
58
|
+
* @param color - The background color in hex.
|
|
59
|
+
* @returns `true` if white text is recommended; otherwise, `false`.
|
|
60
|
+
*/
|
|
61
|
+
declare const isFontLight: (color: string) => boolean;
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Common component style overrides and default props shared across the design system.
|
|
65
|
+
* This object should be spread into the `components` field of the MUI theme.
|
|
66
|
+
*/
|
|
67
|
+
declare const commonComponentProps: Theme["components"];
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Available options for dark mode configuration.
|
|
71
|
+
* - `system`: Follows the operating system preference.
|
|
72
|
+
* - `auto`: Uses contrast-based detection (e.g., based on background color).
|
|
73
|
+
* - `light`: Forces light mode.
|
|
74
|
+
* - `dark`: Forces dark mode.
|
|
75
|
+
*/
|
|
76
|
+
type DarkModeOptions = "system" | "auto" | "light" | "dark";
|
|
77
|
+
/**
|
|
78
|
+
* Represents user-specific theme preferences stored in the application.
|
|
79
|
+
*/
|
|
80
|
+
interface AppSettings {
|
|
81
|
+
/**
|
|
82
|
+
* The selected theme name. `"system"` indicates the app should follow system preference.
|
|
83
|
+
* Other values are custom theme names defined by the application.
|
|
84
|
+
*/
|
|
85
|
+
theme: "system" | (string & {});
|
|
86
|
+
/**
|
|
87
|
+
* Controls how dark mode is applied in the app.
|
|
88
|
+
*/
|
|
89
|
+
darkMode: DarkModeOptions;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* Represents the theme mode as reported by the operating system or browser.
|
|
94
|
+
* - `light`: Light mode
|
|
95
|
+
* - `dark`: Dark mode
|
|
96
|
+
* - `unknown`: Theme mode could not be determined
|
|
97
|
+
*/
|
|
98
|
+
type SystemTheme = "light" | "dark" | "unknown";
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Generates a custom MUI theme using a primary color, background color, and color mode.
|
|
102
|
+
*
|
|
103
|
+
* @param primaryColor - The main color used for primary palette.
|
|
104
|
+
* @param backgroundColor - Background color (used as secondary). Defaults to dark blue.
|
|
105
|
+
* @param mode - MUI palette mode ('light' | 'dark'). Defaults to 'dark'.
|
|
106
|
+
* @returns A MUI Theme object.
|
|
107
|
+
*/
|
|
108
|
+
declare const createCustomTheme: (primaryColor: string, backgroundColor?: string, mode?: PaletteMode) => Theme;
|
|
109
|
+
/**
|
|
110
|
+
* A predefined list of named themes based on the `themeConfig` definition.
|
|
111
|
+
*/
|
|
112
|
+
declare const themes: {
|
|
113
|
+
name: string;
|
|
114
|
+
MuiTheme: Theme;
|
|
115
|
+
}[];
|
|
116
|
+
/**
|
|
117
|
+
* Determines whether dark mode should be enabled based on user settings and system conditions.
|
|
118
|
+
*
|
|
119
|
+
* @param darkMode - User preference: 'light' | 'dark' | 'system' | 'auto'.
|
|
120
|
+
* @param systemTheme - Detected OS-level theme: 'light' | 'dark'.
|
|
121
|
+
* @param backgroundColor - The background color to assess contrast in 'auto' mode.
|
|
122
|
+
* @returns True if dark mode should be used.
|
|
123
|
+
*/
|
|
124
|
+
declare const isDarkMode: (darkMode: AppSettings["darkMode"], systemTheme: SystemTheme, backgroundColor: string) => boolean;
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Injects global styles into the document using Emotion.
|
|
128
|
+
* These styles include font setup, base HTML styles, custom scrollbars,
|
|
129
|
+
* selection styling, and some accessibility tweaks.
|
|
130
|
+
*
|
|
131
|
+
* Uses the MUI theme to dynamically adjust colors for light/dark mode.
|
|
132
|
+
*/
|
|
133
|
+
declare const GlobalStyles: FC;
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* Fade in from the left with slight movement on the X-axis.
|
|
137
|
+
*/
|
|
138
|
+
declare const fadeInLeft: {
|
|
139
|
+
name: string;
|
|
140
|
+
styles: string;
|
|
141
|
+
anim: 1;
|
|
142
|
+
toString: () => string;
|
|
143
|
+
} & string;
|
|
144
|
+
/**
|
|
145
|
+
* Simple fade in animation (opacity only).
|
|
146
|
+
*/
|
|
147
|
+
declare const fadeIn: {
|
|
148
|
+
name: string;
|
|
149
|
+
styles: string;
|
|
150
|
+
anim: 1;
|
|
151
|
+
toString: () => string;
|
|
152
|
+
} & string;
|
|
153
|
+
/**
|
|
154
|
+
* Slide in from the left side of the screen.
|
|
155
|
+
*/
|
|
156
|
+
declare const slideIn: {
|
|
157
|
+
name: string;
|
|
158
|
+
styles: string;
|
|
159
|
+
anim: 1;
|
|
160
|
+
toString: () => string;
|
|
161
|
+
} & string;
|
|
162
|
+
/**
|
|
163
|
+
* Slide in from the bottom of the screen.
|
|
164
|
+
*/
|
|
165
|
+
declare const slideInBottom: {
|
|
166
|
+
name: string;
|
|
167
|
+
styles: string;
|
|
168
|
+
anim: 1;
|
|
169
|
+
toString: () => string;
|
|
170
|
+
} & string;
|
|
171
|
+
/**
|
|
172
|
+
* Scale from 0 to full size.
|
|
173
|
+
*/
|
|
174
|
+
declare const scale: {
|
|
175
|
+
name: string;
|
|
176
|
+
styles: string;
|
|
177
|
+
anim: 1;
|
|
178
|
+
toString: () => string;
|
|
179
|
+
} & string;
|
|
180
|
+
/**
|
|
181
|
+
* Creates a pulsating animation using scale and box-shadow.
|
|
182
|
+
* Simulates a glowing effect.
|
|
183
|
+
*
|
|
184
|
+
* @param clr - The base color for the shadow in hex format.
|
|
185
|
+
* @param shadowBlur - The maximum spread of the shadow during the pulse (default: 12).
|
|
186
|
+
* @returns Emotion keyframes animation.
|
|
187
|
+
*/
|
|
188
|
+
declare const pulseAnimation: (clr: string, shadowBlur?: number) => {
|
|
189
|
+
name: string;
|
|
190
|
+
styles: string;
|
|
191
|
+
anim: 1;
|
|
192
|
+
toString: () => string;
|
|
193
|
+
} & string;
|
|
194
|
+
/**
|
|
195
|
+
* Creates a glowing pulse animation using drop-shadow.
|
|
196
|
+
* Used in progress or highlight elements.
|
|
197
|
+
*
|
|
198
|
+
* @param clr - The glow color in hex.
|
|
199
|
+
* @returns Emotion keyframes animation.
|
|
200
|
+
*/
|
|
201
|
+
declare const progressPulse: (clr: string) => {
|
|
202
|
+
name: string;
|
|
203
|
+
styles: string;
|
|
204
|
+
anim: 1;
|
|
205
|
+
toString: () => string;
|
|
206
|
+
} & string;
|
|
207
|
+
/**
|
|
208
|
+
* A bounce-scale animation used during logout transition.
|
|
209
|
+
*/
|
|
210
|
+
declare const logoutAnimation: {
|
|
211
|
+
name: string;
|
|
212
|
+
styles: string;
|
|
213
|
+
anim: 1;
|
|
214
|
+
toString: () => string;
|
|
215
|
+
} & string;
|
|
216
|
+
/**
|
|
217
|
+
* Subtle bounce animation used for install app prompts.
|
|
218
|
+
*/
|
|
219
|
+
declare const installAppAnimation: {
|
|
220
|
+
name: string;
|
|
221
|
+
styles: string;
|
|
222
|
+
anim: 1;
|
|
223
|
+
toString: () => string;
|
|
224
|
+
} & string;
|
|
225
|
+
|
|
226
|
+
declare const ColorPalette: {
|
|
227
|
+
readonly fontDark: "#101727";
|
|
228
|
+
readonly fontLight: "#f0f0f0";
|
|
229
|
+
readonly darkMode: "#383838";
|
|
230
|
+
readonly lightMode: "#ffffff";
|
|
231
|
+
readonly purple: "#b624ff";
|
|
232
|
+
readonly red: "#ff3131";
|
|
233
|
+
readonly orange: "#ff9318";
|
|
234
|
+
readonly orangeDark: "#ff9500";
|
|
235
|
+
};
|
|
236
|
+
declare const themeConfig: Record<string, {
|
|
237
|
+
primaryColor: string;
|
|
238
|
+
secondaryColor?: string;
|
|
239
|
+
}>;
|
|
240
|
+
|
|
241
|
+
/**
|
|
242
|
+
* Default MUI Typography variant-to-element mapping.
|
|
243
|
+
* Custom variants are mapped to HTML tags like <p>, <h1>, etc.
|
|
244
|
+
*/
|
|
245
|
+
declare const typographyProps: Theme["components"];
|
|
246
|
+
/**
|
|
247
|
+
* Custom typography variants.
|
|
248
|
+
* Defines font-weight, size, line-height and optionally fallback font.
|
|
249
|
+
*/
|
|
250
|
+
declare const typographyVariants: TypographyVariantsOptions;
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* Returns a greeting based on the current time.
|
|
254
|
+
* @returns {string} The appropriate greeting.
|
|
255
|
+
*/
|
|
256
|
+
declare const displayGreeting: () => string;
|
|
257
|
+
|
|
258
|
+
/**
|
|
259
|
+
* Function to extract year, month, and day from a Date object
|
|
260
|
+
*/
|
|
261
|
+
declare const getDayIdentifier: (date: Date) => string;
|
|
262
|
+
|
|
263
|
+
/**
|
|
264
|
+
* A list of supported operating systems.
|
|
265
|
+
*/
|
|
266
|
+
type OperatingSystem = "Windows" | "macOS" | "Linux" | "iOS" | "Android" | "Unknown";
|
|
267
|
+
/**
|
|
268
|
+
* A list of supported browsers.
|
|
269
|
+
*/
|
|
270
|
+
type Browser = "Chrome" | "Firefox" | "Safari" | "Edge" | "Unknown";
|
|
271
|
+
/**
|
|
272
|
+
* Basic information about the user's system (OS and browser).
|
|
273
|
+
*/
|
|
274
|
+
declare const systemInfo: {
|
|
275
|
+
os: OperatingSystem;
|
|
276
|
+
browser: Browser;
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
/**
|
|
280
|
+
* Converts a given date to a human-readable relative time string.
|
|
281
|
+
*
|
|
282
|
+
* @param {Date} date - The date to be converted.
|
|
283
|
+
* @param lang
|
|
284
|
+
* @returns {string} A string representing the relative time using `Intl` format (e.g., "2 days ago").
|
|
285
|
+
*/
|
|
286
|
+
declare const timeAgo: (date: Date, lang?: string) => string;
|
|
287
|
+
declare const timeAgoFromStart: (date: Date, lang?: string) => string;
|
|
288
|
+
|
|
289
|
+
/**
|
|
290
|
+
* A custom React hook to determine if the current device is a smaller device
|
|
291
|
+
* based on the screen width.
|
|
292
|
+
* @param [breakpoint=768] - The breakpoint in pixels at which a device is considered "smaller".
|
|
293
|
+
* @returns {boolean} - A boolean value indicating whether the current device is a smaller device.
|
|
294
|
+
*/
|
|
295
|
+
declare const useResponsiveDisplay: (breakpoint?: number) => boolean;
|
|
296
|
+
|
|
297
|
+
export { type AppSettings, ColorPalette, type DarkModeOptions, DialogBtn, ErrorBoundary, GlobalStyles, Loading, PathName, type SystemTheme, 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 };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,254 @@
|
|
|
1
|
+
"use strict";var mr=Object.create;var u=Object.defineProperty;var fr=Object.getOwnPropertyDescriptor;var cr=Object.getOwnPropertyNames;var xr=Object.getPrototypeOf,ur=Object.prototype.hasOwnProperty;var hr=(r,t)=>{for(var e in t)u(r,e,{get:t[e],enumerable:!0})},F=(r,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of cr(t))!ur.call(r,n)&&n!==e&&u(r,n,{get:()=>t[n],enumerable:!(o=fr(t,n))||o.enumerable});return r};var c=(r,t,e)=>(e=r!=null?mr(xr(r)):{},F(t||!r||!r.__esModule?u(e,"default",{value:r,enumerable:!0}):e,r)),gr=r=>F(u({},"__esModule",{value:!0}),r);var wr={};hr(wr,{ColorPalette:()=>a,DialogBtn:()=>P,ErrorBoundary:()=>h,GlobalStyles:()=>N,Loading:()=>I,PathName:()=>A,commonComponentProps:()=>_,createCustomTheme:()=>S,displayGreeting:()=>tr,fadeIn:()=>j,fadeInLeft:()=>W,getDayIdentifier:()=>er,getFontColor:()=>m,installAppAnimation:()=>Q,isDarkMode:()=>H,isFontLight:()=>L,isHexColor:()=>M,logoutAnimation:()=>K,progressPulse:()=>J,pulseAnimation:()=>q,scale:()=>V,slideIn:()=>G,slideInBottom:()=>X,systemInfo:()=>nr,themeConfig:()=>b,themes:()=>z,timeAgo:()=>ir,timeAgoFromStart:()=>ar,typographyProps:()=>Z,typographyVariants:()=>rr,useResponsiveDisplay:()=>sr});module.exports=gr(wr);var T=c(require("@emotion/styled")),E=require("@mui/material"),P=(0,T.default)(E.Button)`
|
|
2
|
+
padding: 10px 16px;
|
|
3
|
+
border-radius: 16px;
|
|
4
|
+
font-size: 16px;
|
|
5
|
+
margin: 8px;
|
|
6
|
+
`;var $=c(require("react")),v=c(require("@emotion/styled")),w=c(require("@mui/icons-material/ErrorOutlineRounded")),x=require("@mui/material"),s=require("react/jsx-runtime"),h=class extends $.default.Component{constructor(t){super(t),this.state={hasError:!1}}static getDerivedStateFromError(t){return{hasError:!0,error:t}}componentDidCatch(t,e){console.error("Error:",t),console.error("Error Info:",e)}render(){var o,n,i;let{state:t,props:e}=this;return t.hasError?(0,s.jsxs)(yr,{children:[(0,s.jsx)(br,{children:(0,s.jsx)(x.Box,{children:"\u041E\u0448\u0438\u0431\u043A\u0430.\xA0"})}),(0,s.jsxs)("h3",{children:[(0,s.jsxs)(x.Box,{style:{color:"#ff3131",display:"inline-block"},children:[(0,s.jsx)(w.default,{sx:{verticalAlign:"middle",mb:"4px"}})," ","ERROR:"]})," ",(0,s.jsxs)(x.Box,{translate:"no",children:["[",(o=t.error)==null?void 0:o.name,"] ",(n=t.error)==null?void 0:n.message]}),(0,s.jsxs)(x.Box,{style:{color:"#ff3131",display:"inline-block"},children:[(0,s.jsx)(w.default,{sx:{verticalAlign:"middle",mb:"4px"}})," ","Stack:"]})," ",(0,s.jsxs)(x.Box,{translate:"no",children:["[",(i=t.error)==null?void 0:i.stack,"]"]})]})]}):e.children}},yr=v.default.div`
|
|
7
|
+
margin: 0 8vw;
|
|
8
|
+
@media (max-width: 768px) {
|
|
9
|
+
margin: 0;
|
|
10
|
+
}
|
|
11
|
+
`,br=v.default.h1`
|
|
12
|
+
margin-top: 32px;
|
|
13
|
+
margin-bottom: 32px;
|
|
14
|
+
font-size: 36px;
|
|
15
|
+
color: #ff3131;
|
|
16
|
+
text-align: center;
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
@media (max-width: 768px) {
|
|
21
|
+
text-align: left;
|
|
22
|
+
justify-content: left;
|
|
23
|
+
font-size: 30px;
|
|
24
|
+
margin-top: 0;
|
|
25
|
+
margin-bottom: 0;
|
|
26
|
+
}
|
|
27
|
+
`;var g=require("react"),B=c(require("@emotion/styled")),y=require("@mui/material"),d=require("react/jsx-runtime"),I=()=>{let[r,t]=(0,g.useState)(!1);return(0,g.useEffect)(()=>{let e=setTimeout(()=>{t(!0)},100);return()=>clearTimeout(e)},[]),(0,d.jsx)(_r,{children:r&&(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(y.CircularProgress,{"aria-label":"loading",size:80,thickness:4}),(0,d.jsx)("h3",{style:{opacity:.8},children:"Loading Page..."})]})})},_r=(0,B.default)(y.Box)`
|
|
28
|
+
position: absolute;
|
|
29
|
+
top: 50%;
|
|
30
|
+
left: 50%;
|
|
31
|
+
transform: translate(-50%, -50%);
|
|
32
|
+
display: flex;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
align-items: center;
|
|
35
|
+
flex-direction: column;
|
|
36
|
+
text-align: center;
|
|
37
|
+
gap: 8px;
|
|
38
|
+
`;var O=c(require("@emotion/styled")),A=O.default.code`
|
|
39
|
+
background: #000000c8;
|
|
40
|
+
color: white;
|
|
41
|
+
padding: 4px 6px;
|
|
42
|
+
border-radius: 8px;
|
|
43
|
+
`;var a={fontDark:"#101727",fontLight:"#f0f0f0",darkMode:"#383838",lightMode:"#ffffff",purple:"#b624ff",red:"#ff3131",orange:"#ff9318",orangeDark:"#ff9500"},b={"Dark Purple":{primaryColor:a.purple},"Light Purple":{primaryColor:a.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 M=r=>/^#([\dA-Fa-f]{3}|[\dA-Fa-f]{6})$/.test(r),m=r=>{if(!M(r))return console.error("Invalid hex color provided:",r),a.fontDark;let t=r.slice(1),e=t.length===3?t.split("").map(f=>f+f).join(""):t,o=Number.parseInt(e.slice(0,2),16),n=Number.parseInt(e.slice(2,4),16),i=Number.parseInt(e.slice(4,6),16);return Math.round((o*299+n*587+i*114)/1e3)>128?a.fontDark:a.fontLight},L=r=>m(r)===a.fontLight;var _={MuiTooltip:{defaultProps:{disableInteractive:!0},styleOverrides:{tooltip:({theme:r})=>({color:r.palette.mode==="dark"?"#fff":"#000",backgroundColor:r.palette.mode==="dark"?"#141431dd":"#ededf3dd",backdropFilter:"blur(6px)",WebkitBackdropFilter:"blur(6px)",padding:"8px 16px",borderRadius:"8px",fontSize:"12px"})}},MuiButton:{styleOverrides:{root:{padding:"12px 24px",borderRadius:"14px"},contained:{boxShadow:"none"}}},MuiSkeleton:{styleOverrides:{root:{borderRadius:"24px"}}},MuiSelect:{styleOverrides:{root:{borderRadius:"18px"},select:{display:"flex",justifyContent:"flex-start",alignItems:"center",gap:"4px"}}},MuiDialog:{defaultProps:{slotProps:{paper:{style:{padding:"12px",borderRadius:"24px",minWidth:"400px"}}}},styleOverrides:{root:{"& .MuiDialog-container":{backdropFilter:"blur(4px)"}}}},MuiAvatar:{styleOverrides:{root:{fontWeight:500,color:"#fff"}}},MuiAlert:{styleOverrides:{root:{borderRadius:"16px"}}},MuiTextField:{styleOverrides:{root:{"& .MuiInputBase-root":{borderRadius:"16px"}}}},MuiPaper:{styleOverrides:{elevation8:{borderRadius:"16px"}}},MuiBottomNavigationAction:{styleOverrides:{root:{padding:"12px",margin:0,maxHeight:"none"}}},MuiSlider:{styleOverrides:{valueLabel:({theme:r})=>({borderRadius:"10px",padding:"6px 14px",color:r.palette.mode==="dark"?"#fff":"#000",backgroundColor:r.palette.mode==="dark"?"#141431dd":"#ededf3dd","&::before, &::after":{display:"none"}})}},MuiCircularProgress:{styleOverrides:{circle:{strokeLinecap:"round"}}},MuiAccordion:{styleOverrides:{root:{"&::before":{display:"none"}}}}};var R=require("@mui/material");var S=(r,t="#232e58",e="dark")=>(0,R.createTheme)({palette:{primary:{main:r},secondary:{main:t},warning:{main:e==="dark"?a.orange:a.orangeDark},error:{main:a.red},mode:e},components:{..._}}),z=Object.entries(b).map(([r,t])=>({name:r,MuiTheme:S(t.primaryColor,t.secondaryColor)})),H=(r,t,e)=>{switch(r){case"light":return!1;case"dark":return!0;case"system":return t==="dark";case"auto":return m(e)===a.fontLight;default:return!1}};var D=require("react"),k=require("@emotion/react"),Y=require("@mui/material/styles");var U=require("react/jsx-runtime"),N=()=>{let r=(0,Y.useTheme)(),t=r.palette.mode==="dark",e=r.palette.primary.main,o=r.palette.secondary.main,n=(0,D.useMemo)(()=>m(e),[e]),i=(0,D.useMemo)(()=>m(o),[o]);return(0,U.jsx)(k.Global,{styles:k.css`
|
|
44
|
+
* {
|
|
45
|
+
font-family: "Poppins", sans-serif !important;
|
|
46
|
+
-webkit-tap-highlight-color: transparent;
|
|
47
|
+
&::selection {
|
|
48
|
+
background-color: ${`${e}e1`};
|
|
49
|
+
color: ${n};
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
:root {
|
|
54
|
+
height: 100%;
|
|
55
|
+
font-family: "Poppins", sans-serif;
|
|
56
|
+
line-height: 1.5;
|
|
57
|
+
font-weight: 400;
|
|
58
|
+
color-scheme: ${t?"dark":"light"};
|
|
59
|
+
color: ${i};
|
|
60
|
+
font-synthesis: none;
|
|
61
|
+
text-rendering: optimizeLegibility;
|
|
62
|
+
-webkit-font-smoothing: antialiased;
|
|
63
|
+
-moz-osx-font-smoothing: grayscale;
|
|
64
|
+
-webkit-text-size-adjust: 100%;
|
|
65
|
+
|
|
66
|
+
--rsbs-backdrop-bg: rgba(0, 0, 0, 0.3);
|
|
67
|
+
--rsbs-bg: ${t?"#383838":"#ffffff"};
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
body {
|
|
71
|
+
margin: 0;
|
|
72
|
+
height: 100%;
|
|
73
|
+
touch-action: manipulation;
|
|
74
|
+
background: ${o};
|
|
75
|
+
background-attachment: fixed;
|
|
76
|
+
background-size: cover;
|
|
77
|
+
transition: 0.3s background;
|
|
78
|
+
|
|
79
|
+
::-webkit-scrollbar {
|
|
80
|
+
width: 8px;
|
|
81
|
+
background-color: ${o};
|
|
82
|
+
}
|
|
83
|
+
::-webkit-scrollbar-thumb {
|
|
84
|
+
background-color: ${e};
|
|
85
|
+
border-radius: 64px;
|
|
86
|
+
}
|
|
87
|
+
::-webkit-scrollbar-thumb:hover {
|
|
88
|
+
background-color: ${`${e}d8`};
|
|
89
|
+
}
|
|
90
|
+
::-webkit-scrollbar-track {
|
|
91
|
+
border-radius: 64px;
|
|
92
|
+
background-color: ${o};
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
a {
|
|
97
|
+
text-decoration: none;
|
|
98
|
+
color: inherit;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
img {
|
|
102
|
+
user-select: none;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
input[type="file"]::-webkit-file-upload-button {
|
|
106
|
+
display: none;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
input[type="datetime-local"]:placeholder-shown {
|
|
110
|
+
color: transparent !important;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
pre {
|
|
114
|
+
background-color: #000000d7;
|
|
115
|
+
color: white;
|
|
116
|
+
padding: 16px;
|
|
117
|
+
border-radius: 18px;
|
|
118
|
+
overflow-x: auto;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.MuiDialogContent-root,
|
|
122
|
+
.MuiDrawer-paper,
|
|
123
|
+
.customScrollbar,
|
|
124
|
+
textarea {
|
|
125
|
+
::-webkit-scrollbar {
|
|
126
|
+
width: 8px;
|
|
127
|
+
border-radius: 4px;
|
|
128
|
+
background-color: #84848415;
|
|
129
|
+
}
|
|
130
|
+
::-webkit-scrollbar-thumb {
|
|
131
|
+
background-color: #8484844b;
|
|
132
|
+
border-radius: 4px;
|
|
133
|
+
}
|
|
134
|
+
::-webkit-scrollbar-thumb:hover {
|
|
135
|
+
background-color: #84848476;
|
|
136
|
+
}
|
|
137
|
+
::-webkit-scrollbar-track {
|
|
138
|
+
border-radius: 4px;
|
|
139
|
+
background-color: #84848415;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* react-spring-bottom-sheet styles */
|
|
144
|
+
div[role="dialog"] {
|
|
145
|
+
border-radius: 42px 42px 0 0;
|
|
146
|
+
z-index: 9999999;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
div[data-rsbs-backdrop] {
|
|
150
|
+
z-index: 999;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
div[data-rsbs-header] {
|
|
154
|
+
z-index: 999999;
|
|
155
|
+
box-shadow: none;
|
|
156
|
+
&::before {
|
|
157
|
+
width: 60px;
|
|
158
|
+
height: 6px;
|
|
159
|
+
border-radius: 100px;
|
|
160
|
+
background: ${t?"#717171":"#cfcfcf"};
|
|
161
|
+
margin-top: 3px;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
`})};var l=require("@emotion/react"),W=l.keyframes`
|
|
165
|
+
from {
|
|
166
|
+
opacity: 0;
|
|
167
|
+
transform: translateX(-40px);
|
|
168
|
+
}
|
|
169
|
+
to {
|
|
170
|
+
opacity: 1;
|
|
171
|
+
transform: translateX(0);
|
|
172
|
+
}
|
|
173
|
+
`,j=l.keyframes`
|
|
174
|
+
from {
|
|
175
|
+
opacity: 0;
|
|
176
|
+
}
|
|
177
|
+
to {
|
|
178
|
+
opacity: 1;
|
|
179
|
+
}
|
|
180
|
+
`,G=l.keyframes`
|
|
181
|
+
from {
|
|
182
|
+
transform: translateX(-100%);
|
|
183
|
+
}
|
|
184
|
+
to {
|
|
185
|
+
transform: translateX(0);
|
|
186
|
+
}
|
|
187
|
+
`,X=l.keyframes`
|
|
188
|
+
from {
|
|
189
|
+
transform: translateY(100%);
|
|
190
|
+
}
|
|
191
|
+
to {
|
|
192
|
+
transform: translateY(0);
|
|
193
|
+
}
|
|
194
|
+
`,V=l.keyframes`
|
|
195
|
+
from {
|
|
196
|
+
transform: scale(0);
|
|
197
|
+
}
|
|
198
|
+
to {
|
|
199
|
+
transform: scale(1);
|
|
200
|
+
}
|
|
201
|
+
`,q=(r,t=12)=>l.keyframes`
|
|
202
|
+
0% {
|
|
203
|
+
transform: scale(0.95);
|
|
204
|
+
box-shadow: 0 0 0 0 ${r}b2;
|
|
205
|
+
}
|
|
206
|
+
70% {
|
|
207
|
+
transform: scale(1);
|
|
208
|
+
box-shadow: 0 0 0 ${t}px ${r}00;
|
|
209
|
+
}
|
|
210
|
+
100% {
|
|
211
|
+
transform: scale(0.95);
|
|
212
|
+
box-shadow: 0 0 0 0 ${r}00;
|
|
213
|
+
}
|
|
214
|
+
`,J=r=>l.keyframes`
|
|
215
|
+
0% {
|
|
216
|
+
filter: none;
|
|
217
|
+
}
|
|
218
|
+
50% {
|
|
219
|
+
filter: drop-shadow(0 0 10px ${r}78);
|
|
220
|
+
}
|
|
221
|
+
100% {
|
|
222
|
+
filter: none;
|
|
223
|
+
}
|
|
224
|
+
`,K=l.keyframes`
|
|
225
|
+
0% {
|
|
226
|
+
transform: scale(1);
|
|
227
|
+
opacity: 1;
|
|
228
|
+
}
|
|
229
|
+
50% {
|
|
230
|
+
transform: scale(0.9) translateX(-2px);
|
|
231
|
+
opacity: 0.7;
|
|
232
|
+
}
|
|
233
|
+
100% {
|
|
234
|
+
transform: scale(1);
|
|
235
|
+
opacity: 1;
|
|
236
|
+
}
|
|
237
|
+
`,Q=l.keyframes`
|
|
238
|
+
0% {
|
|
239
|
+
transform: translateY(0);
|
|
240
|
+
}
|
|
241
|
+
30% {
|
|
242
|
+
transform: translateY(-5px);
|
|
243
|
+
}
|
|
244
|
+
50% {
|
|
245
|
+
transform: translateY(2px);
|
|
246
|
+
}
|
|
247
|
+
70% {
|
|
248
|
+
transform: translateY(-2px);
|
|
249
|
+
}
|
|
250
|
+
100% {
|
|
251
|
+
transform: translateY(0);
|
|
252
|
+
}
|
|
253
|
+
`;var Z={MuiTypography:{defaultProps:{variantMapping:{...Object.fromEntries(["xl","lg","md","sm","xs","2xs"].flatMap(r=>[[`text_${r}_regular`,"p"],[`text_${r}_bold`,"p"],[`text_${r}_semibold`,"p"],[`text_${r}_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"}}}},rr={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 tr=()=>{let t=new Date().getHours(),e;return t<12&&t>=5?e="\u0414\u043E\u0431\u0440\u043E\u0435 \u0443\u0442\u0440\u043E,":t<18&&t>12?e="\u0414\u043E\u0431\u0440\u044B\u0439 \u0434\u0435\u043D\u044C,":e="\u0414\u043E\u0431\u0440\u044B\u0439 \u0432\u0435\u0447\u0435\u0440,",e};var er=r=>{let t=r.getFullYear(),e=String(r.getMonth()+1).padStart(2,"0"),o=String(r.getDate()).padStart(2,"0");return`${t}-${e}-${o}`};var{userAgent:or}=globalThis.navigator,kr=()=>{let r=or.toLowerCase();return r.includes("windows nt")?"Windows":r.includes("iphone")||r.includes("ipad")||r.includes("ipod")?"iOS":r.includes("mac")?"macOS":r.includes("android")?"Android":r.includes("linux")?"Linux":"Unknown"},Cr=()=>{let r=or.toLowerCase();return r.includes("edg")?"Edge":r.includes("chrome")?"Chrome":r.includes("firefox")?"Firefox":r.includes("safari")?"Safari":"Unknown"},nr={os:kr(),browser:Cr()};var ir=(r,t=navigator.language||"en-US")=>{let e=new Date;r=new Date(r);let o=Math.floor((e.getTime()-r.getTime())/1e3),n=new Intl.RelativeTimeFormat(t,{numeric:"auto"});if(o<60)return n.format(-o,"second");if(o<3600){let p=Math.floor(o/60);return n.format(-p,"minute")}if(o<86400){let p=Math.floor(o/3600);return n.format(-p,"hour")}let i=Math.floor(o/86400);return n.format(-i,"day")},ar=(r,t=navigator.language||"en-US")=>{let e=new Date;r=new Date(r);let o=(r.getTime()-e.getTime())/1e3,n=Math.floor(o/(60*60)),i=Math.floor((o-60*60*n)/60),p=Math.floor(o-60*60*n-60*i),f=new Intl.RelativeTimeFormat(t,{numeric:"auto"});if(i===0&&p<60)return f.format(p,"second");if(n===0&&i<60)return f.format(i,"minute");if(n<24){let pr=`${new Intl.RelativeTimeFormat(t,{numeric:"auto"}).format(n,"hour")}`,dr=` ${new Intl.RelativeTimeFormat(t,{localeMatcher:"lookup",numeric:"always",style:"long"}).format(i,"minute")}`.replace(/^\D+/,"");return`${pr} ${dr}`}let lr=Math.floor(p/86400);return f.format(lr,"day")};var C=require("react"),sr=(r=768)=>{let[t,e]=(0,C.useState)(!1);return(0,C.useEffect)(()=>{let o=()=>{e(window.innerWidth<r)};o();let n=()=>o();return window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}},[r]),t};0&&(module.exports={ColorPalette,DialogBtn,ErrorBoundary,GlobalStyles,Loading,PathName,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});
|
|
254
|
+
//# sourceMappingURL=index.js.map
|