@atomazing-org/design-system 1.2.9 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/AGENTS.md +92 -0
  2. package/README.MD +47 -392
  3. package/dist/index.d.ts +21 -1000
  4. package/dist/index.js +37 -118
  5. package/dist/presets/index.d.ts +26 -7
  6. package/dist/presets/index.js +339 -2
  7. package/dist/{typography-Dq0wCojD.d.mts → typography-B-BeIk0v.d.ts} +4 -5
  8. package/migrations/README.UPDATE.md +41 -0
  9. package/migrations/docs/migrations/design-system/README.md +100 -0
  10. package/migrations/docs/migrations/design-system/routes/adopt-existing/AEROCRM-EXAMPLE.md +197 -0
  11. package/migrations/docs/migrations/design-system/routes/adopt-existing/RUNBOOK.md +194 -0
  12. package/migrations/docs/migrations/design-system/routes/adopt-existing/migration.spec.json +109 -0
  13. package/migrations/docs/migrations/design-system/routes/greenfield/RUNBOOK.md +61 -0
  14. package/migrations/docs/migrations/design-system/routes/greenfield/migration.spec.json +58 -0
  15. package/migrations/docs/migrations/design-system/routes/mui4-to-latest/RUNBOOK.md +140 -0
  16. package/migrations/docs/migrations/design-system/routes/mui4-to-latest/migration.spec.json +143 -0
  17. package/migrations/docs/migrations/design-system/routes/mui4-to-latest/token-map.csv +4 -0
  18. package/migrations/docs/migrations/design-system/schema/migration.spec.schema.json +63 -0
  19. package/migrations/docs/migrations/design-system/shared/FOUNDATION.md +39 -0
  20. package/migrations/docs/migrations/design-system/shared/WORKING-RULES.md +194 -0
  21. package/migrations/docs/migrations/design-system/shared/acceptance.md +83 -0
  22. package/migrations/docs/migrations/design-system/shared/common-regressions.md +218 -0
  23. package/migrations/docs/migrations/design-system/shared/gates.md +71 -0
  24. package/migrations/docs/migrations/design-system/shared/manual-qa-matrix.md +70 -0
  25. package/migrations/docs/migrations/design-system/shared/phase-exit-criteria.md +129 -0
  26. package/migrations/docs/migrations/design-system/shared/phases.md +377 -0
  27. package/migrations/docs/migrations/design-system/shared/rollback.md +13 -0
  28. package/migrations/skills/design-system-consumer-agent/SKILL.md +84 -0
  29. package/migrations/skills/design-system-migration-agent/SKILL.md +158 -0
  30. package/package.json +40 -17
  31. package/dist/chunk-OYZ4FCLV.mjs +0 -2
  32. package/dist/chunk-OYZ4FCLV.mjs.map +0 -1
  33. package/dist/index.d.mts +0 -1181
  34. package/dist/index.js.map +0 -1
  35. package/dist/index.mjs +0 -273
  36. package/dist/index.mjs.map +0 -1
  37. package/dist/presets/index.d.mts +0 -17
  38. package/dist/presets/index.js.map +0 -1
  39. package/dist/presets/index.mjs +0 -2
  40. package/dist/presets/index.mjs.map +0 -1
  41. package/dist/typography-Dq0wCojD.d.ts +0 -121
package/dist/index.d.mts DELETED
@@ -1,1181 +0,0 @@
1
- import * as _emotion_styled from '@emotion/styled';
2
- import * as _emotion_react from '@emotion/react';
3
- import * as react 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 as Theme$1, Components, TypographyVariantsOptions } from '@mui/material';
8
- import * as react_jsx_runtime from 'react/jsx-runtime';
9
- import * as _mui_material_styles from '@mui/material/styles';
10
- import { Theme, ThemeOptions, PaletteMode } from '@mui/material/styles';
11
- import { O as OptionItem, T as ThemeContextProps, a as ThemePreset, N as NamedThemeOptions, D as DarkModeOptions, b as ThemeModeBackground, c as NormalizedPreset, A as AppSettings } from './typography-Dq0wCojD.mjs';
12
- export { C as CustomTypographyVariants, d as DarkModeSetting, e as ThemeId, f as ThemeScheme } from './typography-Dq0wCojD.mjs';
13
-
14
- declare const DialogBtn: _emotion_styled.StyledComponent<_mui_material.ButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.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"> & {
15
- theme?: _emotion_react.Theme;
16
- }, {}, {}>;
17
-
18
- interface ErrorBoundaryProps {
19
- children: react__default.ReactNode;
20
- }
21
- interface ErrorBoundaryState {
22
- hasError: boolean;
23
- error?: Error;
24
- }
25
- /**
26
- * ErrorBoundary component that catches and displays errors.
27
- */
28
- declare class ErrorBoundary extends react__default.Component<ErrorBoundaryProps, ErrorBoundaryState> {
29
- constructor(props: ErrorBoundaryProps);
30
- static getDerivedStateFromError(error: Error): ErrorBoundaryState;
31
- componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
32
- 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;
33
- }
34
-
35
- declare const Loading: () => react_jsx_runtime.JSX.Element;
36
-
37
- declare const PathName: _emotion_styled.StyledComponent<{
38
- theme?: _emotion_react.Theme;
39
- as?: React.ElementType;
40
- }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
41
-
42
- declare const editorialClassic: {
43
- name: string;
44
- direction: "rtl";
45
- palette: {
46
- mode: "light";
47
- primary: {
48
- main: string;
49
- dark: string;
50
- light: string;
51
- contrastText: string;
52
- };
53
- secondary: {
54
- main: string;
55
- dark: string;
56
- light: string;
57
- contrastText: string;
58
- };
59
- info: {
60
- main: string;
61
- dark: string;
62
- light: string;
63
- contrastText: string;
64
- };
65
- success: {
66
- main: string;
67
- dark: string;
68
- light: string;
69
- contrastText: string;
70
- };
71
- warning: {
72
- main: string;
73
- dark: string;
74
- light: string;
75
- contrastText: string;
76
- };
77
- error: {
78
- main: string;
79
- dark: string;
80
- light: string;
81
- contrastText: string;
82
- };
83
- background: {
84
- default: string;
85
- paper: string;
86
- };
87
- text: {
88
- primary: string;
89
- secondary: string;
90
- disabled: string;
91
- };
92
- divider: string;
93
- grey: {
94
- 50: string;
95
- 100: string;
96
- 200: string;
97
- 300: string;
98
- 400: string;
99
- 500: string;
100
- 600: string;
101
- 700: string;
102
- 800: string;
103
- 900: string;
104
- };
105
- action: {
106
- hover: string;
107
- selected: string;
108
- focus: string;
109
- active: string;
110
- disabled: string;
111
- disabledBackground: string;
112
- };
113
- };
114
- typography: {
115
- fontFamily: "\"Source Serif 4\",\"Noto Naskh Arabic\",\"Tajawal\",\"Cairo\",\"Georgia\",\"Times New Roman\",serif";
116
- h1: {
117
- fontWeight: number;
118
- fontSize: string;
119
- lineHeight: number;
120
- letterSpacing: string;
121
- };
122
- h2: {
123
- fontWeight: number;
124
- fontSize: string;
125
- lineHeight: number;
126
- letterSpacing: string;
127
- };
128
- h3: {
129
- fontWeight: number;
130
- fontSize: string;
131
- lineHeight: number;
132
- };
133
- h4: {
134
- fontWeight: number;
135
- fontSize: string;
136
- lineHeight: number;
137
- };
138
- subtitle1: {
139
- fontWeight: number;
140
- fontSize: string;
141
- };
142
- subtitle2: {
143
- fontWeight: number;
144
- fontSize: string;
145
- };
146
- body1: {
147
- fontSize: string;
148
- lineHeight: number;
149
- };
150
- body2: {
151
- fontSize: string;
152
- lineHeight: number;
153
- };
154
- button: {
155
- textTransform: "none";
156
- fontWeight: number;
157
- };
158
- caption: {
159
- fontSize: string;
160
- };
161
- overline: {
162
- fontSize: string;
163
- letterSpacing: string;
164
- };
165
- };
166
- shape: {
167
- borderRadius: number;
168
- };
169
- spacing: number;
170
- components: {
171
- MuiCssBaseline: {
172
- styleOverrides: (theme: Omit<_mui_material_styles.Theme, "components">) => {
173
- body: {
174
- backgroundColor: string;
175
- color: string;
176
- };
177
- };
178
- };
179
- MuiPaper: {
180
- styleOverrides: {
181
- root: ({ theme }: _mui_material.PaperOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "classes" | "children" | "sx" | "variant" | "elevation" | "square"> & {
182
- component?: React.ElementType;
183
- } & Record<string, unknown> & {
184
- ownerState: _mui_material.PaperOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "classes" | "children" | "sx" | "variant" | "elevation" | "square"> & {
185
- component?: React.ElementType;
186
- } & Record<string, unknown>;
187
- } & {
188
- theme: Omit<_mui_material_styles.Theme, "components">;
189
- }) => {
190
- borderRadius: number;
191
- backgroundImage: "none";
192
- border: string;
193
- };
194
- };
195
- };
196
- MuiCard: {
197
- styleOverrides: {
198
- root: ({ theme }: _mui_material.CardOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "classes" | "children" | "sx" | "variant" | "elevation" | "square" | "raised"> & {
199
- component?: React.ElementType;
200
- } & Record<string, unknown> & {
201
- ownerState: _mui_material.CardOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "classes" | "children" | "sx" | "variant" | "elevation" | "square" | "raised"> & {
202
- component?: React.ElementType;
203
- } & Record<string, unknown>;
204
- } & {
205
- theme: Omit<_mui_material_styles.Theme, "components">;
206
- }) => {
207
- borderRadius: number;
208
- border: string;
209
- };
210
- };
211
- };
212
- MuiAppBar: {
213
- defaultProps: {
214
- color: "inherit";
215
- elevation: number;
216
- };
217
- styleOverrides: {
218
- root: ({ theme }: _mui_material.AppBarOwnProps & Omit<_mui_material.PaperOwnProps, "classes" | "color" | "position"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "style" | "className" | "classes" | "children" | "sx" | "color" | "position" | "variant" | "elevation" | "square" | "enableColorOnDark"> & {
219
- component?: React.ElementType;
220
- } & Record<string, unknown> & {
221
- ownerState: _mui_material.AppBarOwnProps & Omit<_mui_material.PaperOwnProps, "classes" | "color" | "position"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "style" | "className" | "classes" | "children" | "sx" | "color" | "position" | "variant" | "elevation" | "square" | "enableColorOnDark"> & {
222
- component?: React.ElementType;
223
- } & Record<string, unknown>;
224
- } & {
225
- theme: Omit<_mui_material_styles.Theme, "components">;
226
- }) => {
227
- backgroundColor: string;
228
- borderBottom: string;
229
- };
230
- };
231
- };
232
- MuiButton: {
233
- defaultProps: {
234
- disableElevation: true;
235
- };
236
- styleOverrides: {
237
- root: {
238
- borderRadius: number;
239
- paddingInline: number;
240
- paddingBlock: number;
241
- };
242
- outlined: {
243
- borderWidth: number;
244
- };
245
- };
246
- };
247
- MuiLink: {
248
- styleOverrides: {
249
- root: {
250
- textDecorationThickness: string;
251
- textUnderlineOffset: string;
252
- };
253
- };
254
- };
255
- MuiOutlinedInput: {
256
- styleOverrides: {
257
- root: {
258
- borderRadius: number;
259
- };
260
- notchedOutline: ({ theme }: _mui_material.OutlinedInputProps & Record<string, unknown> & {
261
- ownerState: _mui_material.OutlinedInputProps & Record<string, unknown>;
262
- } & {
263
- theme: Omit<_mui_material_styles.Theme, "components">;
264
- }) => {
265
- borderColor: string;
266
- };
267
- };
268
- };
269
- MuiInputLabel: {
270
- styleOverrides: {
271
- root: {
272
- fontWeight: number;
273
- };
274
- };
275
- };
276
- MuiTabs: {
277
- styleOverrides: {
278
- root: {
279
- minHeight: number;
280
- };
281
- indicator: {
282
- height: number;
283
- borderRadius: number;
284
- };
285
- };
286
- };
287
- MuiTab: {
288
- styleOverrides: {
289
- root: {
290
- minHeight: number;
291
- fontWeight: number;
292
- paddingInline: number;
293
- };
294
- };
295
- };
296
- MuiTableHead: {
297
- styleOverrides: {
298
- root: ({ theme }: _mui_material.TableHeadOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "style" | "className" | "classes" | "children" | "sx"> & {
299
- component?: React.ElementType;
300
- } & Record<string, unknown> & {
301
- ownerState: _mui_material.TableHeadOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "style" | "className" | "classes" | "children" | "sx"> & {
302
- component?: React.ElementType;
303
- } & Record<string, unknown>;
304
- } & {
305
- theme: Omit<_mui_material_styles.Theme, "components">;
306
- }) => {
307
- backgroundColor: string;
308
- };
309
- };
310
- };
311
- MuiTableCell: {
312
- styleOverrides: {
313
- head: ({ theme }: _mui_material.TableCellProps & Record<string, unknown> & {
314
- ownerState: _mui_material.TableCellProps & Record<string, unknown>;
315
- } & {
316
- theme: Omit<_mui_material_styles.Theme, "components">;
317
- }) => {
318
- fontWeight: number;
319
- borderBottom: string;
320
- };
321
- body: ({ theme }: _mui_material.TableCellProps & Record<string, unknown> & {
322
- ownerState: _mui_material.TableCellProps & Record<string, unknown>;
323
- } & {
324
- theme: Omit<_mui_material_styles.Theme, "components">;
325
- }) => {
326
- borderBottom: string;
327
- };
328
- };
329
- };
330
- MuiDivider: {
331
- styleOverrides: {
332
- root: ({ theme }: _mui_material.DividerOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "style" | "className" | "classes" | "children" | "sx" | "textAlign" | "variant" | "orientation" | "light" | "absolute" | "flexItem"> & {
333
- component?: React.ElementType;
334
- } & Record<string, unknown> & {
335
- ownerState: _mui_material.DividerOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "style" | "className" | "classes" | "children" | "sx" | "textAlign" | "variant" | "orientation" | "light" | "absolute" | "flexItem"> & {
336
- component?: React.ElementType;
337
- } & Record<string, unknown>;
338
- } & {
339
- theme: Omit<_mui_material_styles.Theme, "components">;
340
- }) => {
341
- borderColor: string;
342
- };
343
- };
344
- };
345
- MuiAlert: {
346
- styleOverrides: {
347
- root: ({ theme }: _mui_material.AlertProps & Record<string, unknown> & {
348
- ownerState: _mui_material.AlertProps & Record<string, unknown>;
349
- } & {
350
- theme: Omit<_mui_material_styles.Theme, "components">;
351
- }) => {
352
- borderRadius: number;
353
- border: string;
354
- };
355
- };
356
- };
357
- MuiTooltip: {
358
- styleOverrides: {
359
- tooltip: {
360
- borderRadius: number;
361
- fontSize: string;
362
- };
363
- };
364
- };
365
- MuiSnackbarContent: {
366
- styleOverrides: {
367
- root: {
368
- borderRadius: number;
369
- };
370
- };
371
- };
372
- };
373
- };
374
-
375
- declare const modernMinimal: {
376
- name: string;
377
- direction: "rtl";
378
- palette: {
379
- mode: "light";
380
- primary: {
381
- main: string;
382
- dark: string;
383
- light: string;
384
- contrastText: string;
385
- };
386
- secondary: {
387
- main: string;
388
- dark: string;
389
- light: string;
390
- contrastText: string;
391
- };
392
- info: {
393
- main: string;
394
- dark: string;
395
- light: string;
396
- contrastText: string;
397
- };
398
- success: {
399
- main: string;
400
- dark: string;
401
- light: string;
402
- contrastText: string;
403
- };
404
- warning: {
405
- main: string;
406
- dark: string;
407
- light: string;
408
- contrastText: string;
409
- };
410
- error: {
411
- main: string;
412
- dark: string;
413
- light: string;
414
- contrastText: string;
415
- };
416
- background: {
417
- default: string;
418
- paper: string;
419
- };
420
- text: {
421
- primary: string;
422
- secondary: string;
423
- disabled: string;
424
- };
425
- divider: string;
426
- grey: {
427
- 50: string;
428
- 100: string;
429
- 200: string;
430
- 300: string;
431
- 400: string;
432
- 500: string;
433
- 600: string;
434
- 700: string;
435
- 800: string;
436
- 900: string;
437
- };
438
- action: {
439
- hover: string;
440
- selected: string;
441
- focus: string;
442
- active: string;
443
- disabled: string;
444
- disabledBackground: string;
445
- };
446
- };
447
- typography: {
448
- readonly fontFamily: "\"IBM Plex Sans\",\"Tajawal\",\"Cairo\",\"Noto Sans Arabic\",\"Inter\",\"Arial\",sans-serif";
449
- readonly h1: {
450
- readonly fontWeight: 900;
451
- readonly fontSize: "2.1rem";
452
- readonly lineHeight: 1.16;
453
- readonly letterSpacing: "-0.03em";
454
- };
455
- readonly h2: {
456
- readonly fontWeight: 800;
457
- readonly fontSize: "1.68rem";
458
- readonly lineHeight: 1.22;
459
- readonly letterSpacing: "-0.02em";
460
- };
461
- readonly h3: {
462
- readonly fontWeight: 700;
463
- readonly fontSize: "1.32rem";
464
- readonly lineHeight: 1.3;
465
- readonly letterSpacing: "-0.01em";
466
- };
467
- readonly h4: {
468
- readonly fontWeight: 700;
469
- readonly fontSize: "1.08rem";
470
- readonly lineHeight: 1.4;
471
- };
472
- readonly subtitle1: {
473
- readonly fontWeight: 600;
474
- readonly fontSize: "0.94rem";
475
- };
476
- readonly subtitle2: {
477
- readonly fontWeight: 600;
478
- readonly fontSize: "0.86rem";
479
- };
480
- readonly body1: {
481
- readonly fontSize: "0.94rem";
482
- readonly lineHeight: 1.62;
483
- };
484
- readonly body2: {
485
- readonly fontSize: "0.86rem";
486
- readonly lineHeight: 1.56;
487
- };
488
- readonly button: {
489
- readonly textTransform: "uppercase";
490
- readonly fontWeight: 700;
491
- readonly letterSpacing: "0.05em";
492
- };
493
- readonly caption: {
494
- readonly fontSize: "0.74rem";
495
- };
496
- readonly overline: {
497
- readonly fontSize: "0.72rem";
498
- readonly letterSpacing: "0.12em";
499
- readonly textTransform: "uppercase";
500
- };
501
- };
502
- shape: {
503
- borderRadius: number;
504
- };
505
- spacing: number;
506
- components: _mui_material_styles.Components<Omit<Theme, "components">> | undefined;
507
- };
508
-
509
- declare const neoGlass: {
510
- name: string;
511
- direction: "rtl";
512
- palette: {
513
- mode: "light";
514
- primary: {
515
- main: string;
516
- dark: string;
517
- light: string;
518
- contrastText: string;
519
- };
520
- secondary: {
521
- main: string;
522
- dark: string;
523
- light: string;
524
- contrastText: string;
525
- };
526
- info: {
527
- main: string;
528
- dark: string;
529
- light: string;
530
- contrastText: string;
531
- };
532
- success: {
533
- main: string;
534
- dark: string;
535
- light: string;
536
- contrastText: string;
537
- };
538
- warning: {
539
- main: string;
540
- dark: string;
541
- light: string;
542
- contrastText: string;
543
- };
544
- error: {
545
- main: string;
546
- dark: string;
547
- light: string;
548
- contrastText: string;
549
- };
550
- background: {
551
- default: string;
552
- paper: string;
553
- };
554
- text: {
555
- primary: string;
556
- secondary: string;
557
- disabled: string;
558
- };
559
- divider: string;
560
- grey: {
561
- 50: string;
562
- 100: string;
563
- 200: string;
564
- 300: string;
565
- 400: string;
566
- 500: string;
567
- 600: string;
568
- 700: string;
569
- 800: string;
570
- 900: string;
571
- };
572
- action: {
573
- hover: string;
574
- selected: string;
575
- focus: string;
576
- active: string;
577
- disabled: string;
578
- disabledBackground: string;
579
- };
580
- };
581
- typography: {
582
- readonly fontFamily: "\"Space Grotesk\",\"Tajawal\",\"Cairo\",\"Noto Sans Arabic\",\"Inter\",\"Roboto\",\"Arial\",sans-serif";
583
- readonly h1: {
584
- readonly fontWeight: 800;
585
- readonly fontSize: "2.08rem";
586
- readonly lineHeight: 1.2;
587
- readonly letterSpacing: "-0.025em";
588
- };
589
- readonly h2: {
590
- readonly fontWeight: 800;
591
- readonly fontSize: "1.56rem";
592
- readonly lineHeight: 1.25;
593
- readonly letterSpacing: "-0.02em";
594
- };
595
- readonly h3: {
596
- readonly fontWeight: 700;
597
- readonly fontSize: "1.28rem";
598
- readonly lineHeight: 1.32;
599
- };
600
- readonly h4: {
601
- readonly fontWeight: 700;
602
- readonly fontSize: "1.13rem";
603
- readonly lineHeight: 1.4;
604
- };
605
- readonly subtitle1: {
606
- readonly fontWeight: 700;
607
- readonly fontSize: "0.95rem";
608
- };
609
- readonly subtitle2: {
610
- readonly fontWeight: 700;
611
- readonly fontSize: "0.875rem";
612
- };
613
- readonly body1: {
614
- readonly fontSize: "0.95rem";
615
- readonly lineHeight: 1.64;
616
- };
617
- readonly body2: {
618
- readonly fontSize: "0.875rem";
619
- readonly lineHeight: 1.58;
620
- };
621
- readonly button: {
622
- readonly textTransform: "none";
623
- readonly fontWeight: 700;
624
- readonly letterSpacing: "0.01em";
625
- };
626
- readonly caption: {
627
- readonly fontSize: "0.75rem";
628
- };
629
- readonly overline: {
630
- readonly fontSize: "0.75rem";
631
- readonly letterSpacing: "0.08em";
632
- };
633
- };
634
- shape: {
635
- borderRadius: number;
636
- };
637
- spacing: number;
638
- components: _mui_material_styles.Components<Omit<Theme, "components">> | undefined;
639
- };
640
-
641
- declare const retroTerminal: {
642
- name: string;
643
- direction: "rtl";
644
- palette: {
645
- mode: "light";
646
- primary: {
647
- main: string;
648
- dark: string;
649
- light: string;
650
- contrastText: string;
651
- };
652
- secondary: {
653
- main: string;
654
- dark: string;
655
- light: string;
656
- contrastText: string;
657
- };
658
- info: {
659
- main: string;
660
- dark: string;
661
- light: string;
662
- contrastText: string;
663
- };
664
- success: {
665
- main: string;
666
- dark: string;
667
- light: string;
668
- contrastText: string;
669
- };
670
- warning: {
671
- main: string;
672
- dark: string;
673
- light: string;
674
- contrastText: string;
675
- };
676
- error: {
677
- main: string;
678
- dark: string;
679
- light: string;
680
- contrastText: string;
681
- };
682
- background: {
683
- default: string;
684
- paper: string;
685
- };
686
- text: {
687
- primary: string;
688
- secondary: string;
689
- disabled: string;
690
- };
691
- divider: string;
692
- grey: {
693
- 50: string;
694
- 100: string;
695
- 200: string;
696
- 300: string;
697
- 400: string;
698
- 500: string;
699
- 600: string;
700
- 700: string;
701
- 800: string;
702
- 900: string;
703
- };
704
- action: {
705
- hover: string;
706
- selected: string;
707
- focus: string;
708
- active: string;
709
- disabled: string;
710
- disabledBackground: string;
711
- };
712
- };
713
- typography: {
714
- readonly fontFamily: "\"IBM Plex Mono\",\"JetBrains Mono\",\"Tajawal\",\"Cairo\",\"Noto Sans Arabic\",\"Roboto Mono\",\"Consolas\",\"Arial\",monospace";
715
- readonly h1: {
716
- readonly fontWeight: 800;
717
- readonly fontSize: "1.85rem";
718
- readonly lineHeight: 1.2;
719
- readonly letterSpacing: "0.03em";
720
- };
721
- readonly h2: {
722
- readonly fontWeight: 800;
723
- readonly fontSize: "1.42rem";
724
- readonly lineHeight: 1.24;
725
- readonly letterSpacing: "0.025em";
726
- };
727
- readonly h3: {
728
- readonly fontWeight: 800;
729
- readonly fontSize: "1.14rem";
730
- readonly lineHeight: 1.3;
731
- readonly letterSpacing: "0.02em";
732
- };
733
- readonly h4: {
734
- readonly fontWeight: 700;
735
- readonly fontSize: "1.02rem";
736
- readonly lineHeight: 1.35;
737
- readonly letterSpacing: "0.015em";
738
- };
739
- readonly subtitle1: {
740
- readonly fontWeight: 700;
741
- readonly fontSize: "0.92rem";
742
- readonly letterSpacing: "0.02em";
743
- };
744
- readonly subtitle2: {
745
- readonly fontWeight: 700;
746
- readonly fontSize: "0.84rem";
747
- readonly letterSpacing: "0.02em";
748
- };
749
- readonly body1: {
750
- readonly fontSize: "0.92rem";
751
- readonly lineHeight: 1.72;
752
- };
753
- readonly body2: {
754
- readonly fontSize: "0.84rem";
755
- readonly lineHeight: 1.62;
756
- };
757
- readonly button: {
758
- readonly textTransform: "uppercase";
759
- readonly fontWeight: 800;
760
- readonly letterSpacing: "0.08em";
761
- };
762
- readonly caption: {
763
- readonly fontSize: "0.73rem";
764
- readonly letterSpacing: "0.03em";
765
- };
766
- readonly overline: {
767
- readonly fontSize: "0.7rem";
768
- readonly letterSpacing: "0.14em";
769
- readonly textTransform: "uppercase";
770
- };
771
- };
772
- shape: {
773
- borderRadius: number;
774
- };
775
- spacing: number;
776
- components: _mui_material_styles.Components<Omit<Theme, "components">> | undefined;
777
- };
778
-
779
- declare const warmEarth: {
780
- name: string;
781
- direction: "rtl";
782
- palette: {
783
- mode: "light";
784
- primary: {
785
- main: string;
786
- dark: string;
787
- light: string;
788
- contrastText: string;
789
- };
790
- secondary: {
791
- main: string;
792
- dark: string;
793
- light: string;
794
- contrastText: string;
795
- };
796
- info: {
797
- main: string;
798
- dark: string;
799
- light: string;
800
- contrastText: string;
801
- };
802
- success: {
803
- main: string;
804
- dark: string;
805
- light: string;
806
- contrastText: string;
807
- };
808
- warning: {
809
- main: string;
810
- dark: string;
811
- light: string;
812
- contrastText: string;
813
- };
814
- error: {
815
- main: string;
816
- dark: string;
817
- light: string;
818
- contrastText: string;
819
- };
820
- background: {
821
- default: string;
822
- paper: string;
823
- };
824
- text: {
825
- primary: string;
826
- secondary: string;
827
- disabled: string;
828
- };
829
- divider: string;
830
- grey: {
831
- 50: string;
832
- 100: string;
833
- 200: string;
834
- 300: string;
835
- 400: string;
836
- 500: string;
837
- 600: string;
838
- 700: string;
839
- 800: string;
840
- 900: string;
841
- };
842
- action: {
843
- hover: string;
844
- selected: string;
845
- focus: string;
846
- active: string;
847
- disabled: string;
848
- disabledBackground: string;
849
- };
850
- };
851
- typography: {
852
- readonly fontFamily: "\"Tajawal\",\"Cairo\",\"Noto Naskh Arabic\",\"Noto Sans Arabic\",\"Inter\",\"Roboto\",\"Arial\",sans-serif";
853
- readonly h1: {
854
- readonly fontWeight: 800;
855
- readonly fontSize: "2rem";
856
- readonly lineHeight: 1.24;
857
- readonly letterSpacing: "-0.01em";
858
- };
859
- readonly h2: {
860
- readonly fontWeight: 800;
861
- readonly fontSize: "1.5rem";
862
- readonly lineHeight: 1.3;
863
- };
864
- readonly h3: {
865
- readonly fontWeight: 700;
866
- readonly fontSize: "1.24rem";
867
- readonly lineHeight: 1.36;
868
- };
869
- readonly h4: {
870
- readonly fontWeight: 700;
871
- readonly fontSize: "1.1rem";
872
- readonly lineHeight: 1.42;
873
- };
874
- readonly subtitle1: {
875
- readonly fontWeight: 600;
876
- readonly fontSize: "0.95rem";
877
- };
878
- readonly subtitle2: {
879
- readonly fontWeight: 600;
880
- readonly fontSize: "0.875rem";
881
- };
882
- readonly body1: {
883
- readonly fontSize: "0.95rem";
884
- readonly lineHeight: 1.78;
885
- };
886
- readonly body2: {
887
- readonly fontSize: "0.875rem";
888
- readonly lineHeight: 1.68;
889
- };
890
- readonly button: {
891
- readonly textTransform: "none";
892
- readonly fontWeight: 700;
893
- readonly letterSpacing: "0.01em";
894
- };
895
- readonly caption: {
896
- readonly fontSize: "0.75rem";
897
- };
898
- readonly overline: {
899
- readonly fontSize: "0.75rem";
900
- readonly letterSpacing: "0.06em";
901
- };
902
- };
903
- shape: {
904
- borderRadius: number;
905
- };
906
- spacing: number;
907
- components: _mui_material_styles.Components<Omit<Theme, "components">> | undefined;
908
- };
909
-
910
- /**
911
- * Represents the theme mode as reported by the operating system or browser.
912
- * - `light`: Light mode
913
- * - `dark`: Dark mode
914
- * - `unknown`: Theme mode could not be determined
915
- */
916
- type SystemTheme = "light" | "dark" | "unknown";
917
-
918
- declare const darkModeOptions: OptionItem[];
919
-
920
- declare const useThemeSettings: () => ThemeContextProps;
921
-
922
- type ThemesInput = ThemePreset[];
923
-
924
- /**
925
- * Normalizes preset input so the result always includes valid theme names.
926
- * - No input/empty: returns a single default theme.
927
- * - Duplicate preset ids: resolved with last-wins while keeping first-order.
928
- */
929
- declare const normalizeThemes: (input?: ThemesInput) => NamedThemeOptions[];
930
- declare const mergeThemes: (presets?: ThemesInput, customThemes?: ThemesInput) => NamedThemeOptions[];
931
- declare const resolveDefaultThemeName: (themes: NamedThemeOptions[]) => string;
932
- declare const resolveThemeById: (themes: NamedThemeOptions[], themeId: string) => NamedThemeOptions | undefined;
933
-
934
- type ThemeProviderWrapperProps = PropsWithChildren<{
935
- /** Optional font stack to apply across the app. */
936
- fontFamily?: string;
937
- /**
938
- * Optional list of theme presets.
939
- * Accepts only `ThemePreset[]`.
940
- */
941
- themes?: ThemesInput;
942
- /**
943
- * Forces dark mode regardless of persisted settings and system preference.
944
- * When set, `setDarkMode` becomes a no-op.
945
- */
946
- darkMode?: DarkModeOptions;
947
- }>;
948
- declare const ThemeProviderWrapper: FC<ThemeProviderWrapperProps>;
949
-
950
- /**
951
- * Injects global styles into the document using Emotion.
952
- * These styles include font setup, base HTML styles, custom scrollbars,
953
- * selection styling, and some accessibility tweaks.
954
- *
955
- * Uses the MUI theme to dynamically adjust colors for light/dark mode.
956
- */
957
- interface GlobalStylesProps {
958
- /** Optional font stack to apply across the app. */
959
- fontFamily?: string;
960
- }
961
- declare const GlobalStyles: FC<GlobalStylesProps>;
962
-
963
- /**
964
- * Common component style overrides and default props shared across the design system.
965
- * This object should be spread into the `components` field of the MUI theme.
966
- */
967
- declare const commonComponentProps: Theme$1["components"];
968
-
969
- type ThemeInput = ThemeOptions & {
970
- background?: ThemeModeBackground;
971
- };
972
- declare const buildMuiTheme: (options: ThemeInput, mode: PaletteMode) => Theme;
973
-
974
- declare const resolveEffectiveMode: (darkMode: DarkModeOptions, systemTheme: SystemTheme) => PaletteMode;
975
-
976
- declare const selectThemeOptions: (preset: NormalizedPreset, mode: PaletteMode) => ThemeOptions;
977
-
978
- type ThemeWithPalette = Pick<Theme, "palette">;
979
- interface SurfaceTokens {
980
- pageBg: string;
981
- surfaceBg: string;
982
- textPrimary: string;
983
- textSecondary: string;
984
- divider: string;
985
- }
986
- declare const getSurfaceTokens: (theme: ThemeWithPalette) => SurfaceTokens;
987
- declare const alphaText: (theme: ThemeWithPalette, opacity: number) => string;
988
-
989
- /**
990
- * Mapping of custom typography variants to corresponding HTML elements.
991
- */
992
- declare const muiTypography: Components<Theme$1>["MuiTypography"];
993
- /**
994
- * Custom typography variant definitions with adjusted display sizes.
995
- */
996
- declare const typographyVariants: TypographyVariantsOptions;
997
-
998
- declare const validateSchemeTokens: (options: ThemeOptions) => string[];
999
-
1000
- /**
1001
- * Fade in from the left with slight movement on the X-axis.
1002
- */
1003
- declare const fadeInLeft: {
1004
- name: string;
1005
- styles: string;
1006
- anim: 1;
1007
- toString: () => string;
1008
- } & string;
1009
- /**
1010
- * Simple fade in animation (opacity only).
1011
- */
1012
- declare const fadeIn: {
1013
- name: string;
1014
- styles: string;
1015
- anim: 1;
1016
- toString: () => string;
1017
- } & string;
1018
- /**
1019
- * Slide in from the left side of the screen.
1020
- */
1021
- declare const slideIn: {
1022
- name: string;
1023
- styles: string;
1024
- anim: 1;
1025
- toString: () => string;
1026
- } & string;
1027
- /**
1028
- * Slide in from the bottom of the screen.
1029
- */
1030
- declare const slideInBottom: {
1031
- name: string;
1032
- styles: string;
1033
- anim: 1;
1034
- toString: () => string;
1035
- } & string;
1036
- /**
1037
- * Scale from 0 to full size.
1038
- */
1039
- declare const scale: {
1040
- name: string;
1041
- styles: string;
1042
- anim: 1;
1043
- toString: () => string;
1044
- } & string;
1045
- /**
1046
- * Creates a pulsating animation using scale and box-shadow.
1047
- * Simulates a glowing effect.
1048
- *
1049
- * @param clr - The base color for the shadow in hex format.
1050
- * @param shadowBlur - The maximum spread of the shadow during the pulse (default: 12).
1051
- * @returns Emotion keyframes animation.
1052
- */
1053
- declare const pulseAnimation: (clr: string, shadowBlur?: number) => {
1054
- name: string;
1055
- styles: string;
1056
- anim: 1;
1057
- toString: () => string;
1058
- } & string;
1059
- /**
1060
- * Creates a glowing pulse animation using drop-shadow.
1061
- * Used in progress or highlight elements.
1062
- *
1063
- * @param clr - The glow color in hex.
1064
- * @returns Emotion keyframes animation.
1065
- */
1066
- declare const progressPulse: (clr: string) => {
1067
- name: string;
1068
- styles: string;
1069
- anim: 1;
1070
- toString: () => string;
1071
- } & string;
1072
- /**
1073
- * A bounce-scale animation used during logout transition.
1074
- */
1075
- declare const logoutAnimation: {
1076
- name: string;
1077
- styles: string;
1078
- anim: 1;
1079
- toString: () => string;
1080
- } & string;
1081
- /**
1082
- * Subtle bounce animation used for install app prompts.
1083
- */
1084
- declare const installAppAnimation: {
1085
- name: string;
1086
- styles: string;
1087
- anim: 1;
1088
- toString: () => string;
1089
- } & string;
1090
-
1091
- /**
1092
- * A custom React hook to determine if the current device is a smaller device
1093
- * based on the screen width.
1094
- * @param [breakpoint=768] - The breakpoint in pixels at which a device is considered "smaller".
1095
- * @returns {boolean} - A boolean value indicating whether the current device is a smaller device.
1096
- */
1097
- declare const useResponsiveDisplay: (breakpoint?: number) => boolean;
1098
-
1099
- /**
1100
- * A React hook to detect the system theme preference.
1101
- * @returns The current system theme ('light', 'dark', or 'unknown').
1102
- */
1103
- declare const useSystemTheme: () => SystemTheme;
1104
-
1105
- declare const canUseDom: () => boolean;
1106
-
1107
- declare const APP_SETTINGS_VERSION = 1;
1108
- interface StoredAppSettings {
1109
- version: typeof APP_SETTINGS_VERSION;
1110
- themeId: string;
1111
- darkMode: DarkModeOptions;
1112
- }
1113
- declare const readAppSettings: () => Partial<StoredAppSettings> | null;
1114
- declare const writeAppSettings: (settings: StoredAppSettings) => void;
1115
-
1116
- /**
1117
- * Validates whether a given string is a valid 3- or 6-digit hex color code (e.g., "#fff" or "#ffffff").
1118
- *
1119
- * @param value - The string to check.
1120
- * @returns `true` if the string is a valid hex color; otherwise, `false`.
1121
- */
1122
- declare const isHexColor: (value: string) => boolean;
1123
-
1124
- /**
1125
- * Returns a greeting based on the current time.
1126
- * @returns {string} The appropriate greeting.
1127
- */
1128
- declare const displayGreeting: () => string;
1129
-
1130
- /**
1131
- * Function to extract year, month, and day from a Date object
1132
- */
1133
- declare const getDayIdentifier: (date: Date) => string;
1134
-
1135
- /**
1136
- * A list of supported operating systems.
1137
- */
1138
- type OperatingSystem = "Windows" | "macOS" | "Linux" | "iOS" | "Android" | "Unknown";
1139
- /**
1140
- * A list of supported browsers.
1141
- */
1142
- type Browser = "Chrome" | "Firefox" | "Safari" | "Edge" | "Unknown";
1143
- /**
1144
- * Detects the user's operating system based on the user agent string.
1145
- * Safe for SSR: falls back to "Unknown" on server.
1146
- */
1147
- declare const getOperatingSystem: () => OperatingSystem;
1148
- /**
1149
- * Detects the user's browser based on the user agent string.
1150
- * Safe for SSR: falls back to "Unknown" on server.
1151
- */
1152
- declare const getBrowser: () => Browser;
1153
- /**
1154
- * Basic information about the user's system (OS and browser).
1155
- * Safe for SSR: resolves to Unknown values on server.
1156
- */
1157
- declare const systemInfo: {
1158
- os: OperatingSystem;
1159
- browser: Browser;
1160
- };
1161
-
1162
- /**
1163
- * Determines whether dark mode should be enabled based on user settings and system conditions.
1164
- *
1165
- * @param darkMode - User preference: 'light' | 'dark' | 'system' | 'auto'.
1166
- * @param systemTheme - Detected OS-level theme: 'light' | 'dark'.
1167
- * @returns True if dark mode should be used.
1168
- */
1169
- declare const isDarkMode: (darkMode: AppSettings["darkMode"], systemTheme: SystemTheme) => boolean;
1170
-
1171
- /**
1172
- * Converts a given date to a human-readable relative time string.
1173
- *
1174
- * @param {Date} date - The date to be converted.
1175
- * @param lang
1176
- * @returns {string} A string representing the relative time using `Intl` format (e.g., "2 days ago").
1177
- */
1178
- declare const timeAgo: (date: Date, lang?: string) => string;
1179
- declare const timeAgoFromStart: (date: Date, lang?: string) => string;
1180
-
1181
- export { APP_SETTINGS_VERSION, AppSettings, type Browser, DarkModeOptions, DialogBtn, ErrorBoundary, GlobalStyles, Loading, NamedThemeOptions, type OperatingSystem, OptionItem, PathName, type StoredAppSettings, type SurfaceTokens, type SystemTheme, ThemeContextProps, ThemeModeBackground, ThemePreset, ThemeProviderWrapper, type ThemesInput, alphaText, buildMuiTheme, canUseDom, commonComponentProps, darkModeOptions, displayGreeting, editorialClassic, fadeIn, fadeInLeft, getBrowser, getDayIdentifier, getOperatingSystem, getSurfaceTokens, installAppAnimation, isDarkMode, isHexColor, logoutAnimation, mergeThemes, modernMinimal, muiTypography, neoGlass, normalizeThemes, progressPulse, pulseAnimation, readAppSettings, resolveDefaultThemeName, resolveEffectiveMode, resolveThemeById, retroTerminal, scale, selectThemeOptions, slideIn, slideInBottom, systemInfo, timeAgo, timeAgoFromStart, typographyVariants, useResponsiveDisplay, useSystemTheme, useThemeSettings, validateSchemeTokens, warmEarth, writeAppSettings };