@marwes-ui/core 1.3.0 → 1.4.0
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 +22 -17
- package/dist/index.d.ts +1197 -249
- package/dist/index.js +1557 -71
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Non-heading text typography variants.
|
|
3
|
+
* Use `TextVariant.display` for type-safe runtime access.
|
|
4
|
+
*/
|
|
5
|
+
declare const TextVariant: {
|
|
6
|
+
readonly display: "display";
|
|
7
|
+
readonly label: "label";
|
|
8
|
+
readonly labelSmall: "label-small";
|
|
9
|
+
readonly caption: "caption";
|
|
10
|
+
readonly overline: "overline";
|
|
11
|
+
readonly micro: "micro";
|
|
12
|
+
};
|
|
13
|
+
type TextVariant = (typeof TextVariant)[keyof typeof TextVariant];
|
|
14
|
+
|
|
1
15
|
interface ColorRole {
|
|
2
16
|
base: string;
|
|
3
17
|
hover: string;
|
|
@@ -28,14 +42,32 @@ type ToneDefinition = Pick<Partial<ThemeInput>, "font" | "ui" | "typography">;
|
|
|
28
42
|
*/
|
|
29
43
|
declare function resolveTone(tone: ToneName): ToneDefinition;
|
|
30
44
|
|
|
45
|
+
/**
|
|
46
|
+
* Personality is an optional visual identity axis. It adds signature visual
|
|
47
|
+
* effects (shadows, glow, outlines) on top of the token layer without
|
|
48
|
+
* changing colors or typography. Default is "flat" — no additional CSS is
|
|
49
|
+
* applied, so existing themes remain unchanged.
|
|
50
|
+
*/
|
|
51
|
+
type PersonalityName = "flat" | "glow" | "print" | "soft" | "outlined";
|
|
31
52
|
type Density = "compact" | "comfortable" | "spacious";
|
|
32
|
-
type HeadingSize = "h1" | "h2" | "h3";
|
|
53
|
+
type HeadingSize = "display" | "h1" | "h2" | "h3";
|
|
33
54
|
type ParagraphSize = "sm" | "md" | "lg";
|
|
55
|
+
type TextTransform = "none" | "uppercase";
|
|
56
|
+
interface TypographyStyle {
|
|
57
|
+
fontSize: number;
|
|
58
|
+
lineHeight: number;
|
|
59
|
+
fontWeight: number;
|
|
60
|
+
letterSpacing: number;
|
|
61
|
+
}
|
|
62
|
+
interface TextTypographyStyle extends TypographyStyle {
|
|
63
|
+
textTransform?: TextTransform;
|
|
64
|
+
}
|
|
34
65
|
type StatusColorTokens = {
|
|
35
66
|
background: string;
|
|
36
67
|
text: string;
|
|
37
68
|
icon: string;
|
|
38
69
|
border: string;
|
|
70
|
+
borderAccessible?: string;
|
|
39
71
|
borderStrong: string;
|
|
40
72
|
};
|
|
41
73
|
/**
|
|
@@ -50,6 +82,9 @@ declare const ThemeMode: {
|
|
|
50
82
|
type ThemeMode = (typeof ThemeMode)[keyof typeof ThemeMode];
|
|
51
83
|
type ThemePreference = ThemeMode | "system";
|
|
52
84
|
type ThemeVariableStrategy = "inline" | "style-tag";
|
|
85
|
+
type ThemeBreakpointName = "mobile" | "tablet" | "desktop" | "wideDesktop";
|
|
86
|
+
type ThemeBreakpoints = Record<ThemeBreakpointName, number>;
|
|
87
|
+
declare const defaultThemeBreakpoints: ThemeBreakpoints;
|
|
53
88
|
type Theme = {
|
|
54
89
|
/**
|
|
55
90
|
* The current theme mode. This determines which color defaults are applied.
|
|
@@ -60,7 +95,9 @@ type Theme = {
|
|
|
60
95
|
primary: string;
|
|
61
96
|
background: string;
|
|
62
97
|
surface: string;
|
|
98
|
+
surfacePrimary: string;
|
|
63
99
|
surfaceSubtle: string;
|
|
100
|
+
surfaceBrand: string;
|
|
64
101
|
surfaceElevated: string;
|
|
65
102
|
surfaceDisabled: string;
|
|
66
103
|
surfaceInverted: string;
|
|
@@ -70,11 +107,15 @@ type Theme = {
|
|
|
70
107
|
textDisabled: string;
|
|
71
108
|
textInverted: string;
|
|
72
109
|
textBrand: string;
|
|
110
|
+
textLink: string;
|
|
111
|
+
iconMuted: string;
|
|
112
|
+
borderLow: string;
|
|
73
113
|
border: string;
|
|
74
114
|
borderSubtle: string;
|
|
75
115
|
borderStrong: string;
|
|
76
116
|
borderDisabled: string;
|
|
77
117
|
borderBrand: string;
|
|
118
|
+
borderFull: string;
|
|
78
119
|
/**
|
|
79
120
|
* Focus color used for focus-visible outlines on interactive elements.
|
|
80
121
|
* Defaults to the source focus ring token from docs/marwes-colors.json.
|
|
@@ -99,25 +140,13 @@ type Theme = {
|
|
|
99
140
|
radius: number;
|
|
100
141
|
density: Density;
|
|
101
142
|
};
|
|
143
|
+
breakpoint: ThemeBreakpoints;
|
|
102
144
|
typography: {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
};
|
|
109
|
-
h2: {
|
|
110
|
-
fontSize: number;
|
|
111
|
-
lineHeight: number;
|
|
112
|
-
fontWeight: number;
|
|
113
|
-
letterSpacing: number;
|
|
114
|
-
};
|
|
115
|
-
h3: {
|
|
116
|
-
fontSize: number;
|
|
117
|
-
lineHeight: number;
|
|
118
|
-
fontWeight: number;
|
|
119
|
-
letterSpacing: number;
|
|
120
|
-
};
|
|
145
|
+
display: TypographyStyle;
|
|
146
|
+
h1: TypographyStyle;
|
|
147
|
+
h2: TypographyStyle;
|
|
148
|
+
h3: TypographyStyle;
|
|
149
|
+
text: Record<TextVariant, TextTypographyStyle>;
|
|
121
150
|
paragraph: {
|
|
122
151
|
sm: {
|
|
123
152
|
fontSize: number;
|
|
@@ -142,7 +171,9 @@ interface ThemeInputColor {
|
|
|
142
171
|
warning: ColorInput;
|
|
143
172
|
background: string;
|
|
144
173
|
surface: string;
|
|
174
|
+
surfacePrimary: string;
|
|
145
175
|
surfaceSubtle: string;
|
|
176
|
+
surfaceBrand: string;
|
|
146
177
|
surfaceElevated: string;
|
|
147
178
|
surfaceDisabled: string;
|
|
148
179
|
surfaceInverted: string;
|
|
@@ -151,10 +182,14 @@ interface ThemeInputColor {
|
|
|
151
182
|
textSubtle: string;
|
|
152
183
|
textDisabled: string;
|
|
153
184
|
textInverted: string;
|
|
185
|
+
textLink: string;
|
|
186
|
+
iconMuted: string;
|
|
187
|
+
borderLow: string;
|
|
154
188
|
border: string;
|
|
155
189
|
borderSubtle: string;
|
|
156
190
|
borderStrong: string;
|
|
157
191
|
borderDisabled: string;
|
|
192
|
+
borderFull: string;
|
|
158
193
|
focus: string;
|
|
159
194
|
/** @deprecated Removed in v3. Label color is now derived via WCAG contrast. Remove this field. */
|
|
160
195
|
onPrimary?: never;
|
|
@@ -168,13 +203,17 @@ interface ThemeInputColor {
|
|
|
168
203
|
interface ThemeInput {
|
|
169
204
|
mode?: ThemeMode;
|
|
170
205
|
tone?: ToneName;
|
|
206
|
+
personality?: PersonalityName;
|
|
171
207
|
color?: Partial<ThemeInputColor>;
|
|
172
208
|
font?: Partial<Theme["font"]>;
|
|
173
209
|
ui?: Partial<Theme["ui"]>;
|
|
210
|
+
breakpoint?: Partial<ThemeBreakpoints>;
|
|
174
211
|
typography?: Partial<{
|
|
212
|
+
display?: Partial<Theme["typography"]["display"]>;
|
|
175
213
|
h1?: Partial<Theme["typography"]["h1"]>;
|
|
176
214
|
h2?: Partial<Theme["typography"]["h2"]>;
|
|
177
215
|
h3?: Partial<Theme["typography"]["h3"]>;
|
|
216
|
+
text?: Partial<Record<TextVariant, Partial<TextTypographyStyle>>>;
|
|
178
217
|
paragraph?: Partial<{
|
|
179
218
|
sm?: Partial<Theme["typography"]["paragraph"]["sm"]>;
|
|
180
219
|
md?: Partial<Theme["typography"]["paragraph"]["md"]>;
|
|
@@ -191,6 +230,7 @@ declare function nextThemeMode(mode: ThemeMode): ThemeMode;
|
|
|
191
230
|
|
|
192
231
|
interface ResolvedTheme {
|
|
193
232
|
mode: ThemeMode;
|
|
233
|
+
personality: PersonalityName;
|
|
194
234
|
color: {
|
|
195
235
|
primary: ColorRole;
|
|
196
236
|
secondary: SecondaryColorRole;
|
|
@@ -200,7 +240,9 @@ interface ResolvedTheme {
|
|
|
200
240
|
info: ColorRole;
|
|
201
241
|
background: string;
|
|
202
242
|
surface: string;
|
|
243
|
+
surfacePrimary: string;
|
|
203
244
|
surfaceSubtle: string;
|
|
245
|
+
surfaceBrand: string;
|
|
204
246
|
surfaceElevated: string;
|
|
205
247
|
surfaceDisabled: string;
|
|
206
248
|
surfaceInverted: string;
|
|
@@ -210,11 +252,15 @@ interface ResolvedTheme {
|
|
|
210
252
|
textDisabled: string;
|
|
211
253
|
textInverted: string;
|
|
212
254
|
textBrand: string;
|
|
255
|
+
textLink: string;
|
|
256
|
+
iconMuted: string;
|
|
257
|
+
borderLow: string;
|
|
213
258
|
border: string;
|
|
214
259
|
borderSubtle: string;
|
|
215
260
|
borderStrong: string;
|
|
216
261
|
borderDisabled: string;
|
|
217
262
|
borderBrand: string;
|
|
263
|
+
borderFull: string;
|
|
218
264
|
focus: string;
|
|
219
265
|
status: {
|
|
220
266
|
success: StatusColorTokens;
|
|
@@ -232,25 +278,13 @@ interface ResolvedTheme {
|
|
|
232
278
|
radius: number;
|
|
233
279
|
density: Density;
|
|
234
280
|
};
|
|
281
|
+
breakpoint: ThemeBreakpoints;
|
|
235
282
|
typography: {
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
};
|
|
242
|
-
h2: {
|
|
243
|
-
fontSize: number;
|
|
244
|
-
lineHeight: number;
|
|
245
|
-
fontWeight: number;
|
|
246
|
-
letterSpacing: number;
|
|
247
|
-
};
|
|
248
|
-
h3: {
|
|
249
|
-
fontSize: number;
|
|
250
|
-
lineHeight: number;
|
|
251
|
-
fontWeight: number;
|
|
252
|
-
letterSpacing: number;
|
|
253
|
-
};
|
|
283
|
+
display: TypographyStyle;
|
|
284
|
+
h1: TypographyStyle;
|
|
285
|
+
h2: TypographyStyle;
|
|
286
|
+
h3: TypographyStyle;
|
|
287
|
+
text: Record<TextVariant, TextTypographyStyle>;
|
|
254
288
|
paragraph: {
|
|
255
289
|
sm: {
|
|
256
290
|
fontSize: number;
|
|
@@ -269,7 +303,7 @@ interface ResolvedTheme {
|
|
|
269
303
|
}
|
|
270
304
|
/**
|
|
271
305
|
* Maps every field of a resolved theme to its CSS custom property name.
|
|
272
|
-
* Returns
|
|
306
|
+
* Returns 149 entries total. `variant` is excluded — it is deprecated.
|
|
273
307
|
* Density is emitted as 10 `--mw-density-*` vars via densityToCSSVars.
|
|
274
308
|
*
|
|
275
309
|
* Variable naming follows D11: --mw-color-{role}-{state}, --mw-font-*, etc.
|
|
@@ -334,12 +368,23 @@ declare function resolveThemeInput(input: ThemeInput): ResolvedTheme;
|
|
|
334
368
|
|
|
335
369
|
type MwThemeVarName = `--mw-${string}`;
|
|
336
370
|
type MwThemeVarReference = `var(${MwThemeVarName})` | `var(${MwThemeVarName}, ${string})`;
|
|
371
|
+
type MwThemeMedia = {
|
|
372
|
+
mobileAndAbove: string;
|
|
373
|
+
tabletAndAbove: string;
|
|
374
|
+
desktopAndAbove: string;
|
|
375
|
+
wideDesktopAndAbove: string;
|
|
376
|
+
mobileAndBelow: string;
|
|
377
|
+
tabletAndBelow: string;
|
|
378
|
+
desktopAndBelow: string;
|
|
379
|
+
wideDesktopAndBelow: string;
|
|
380
|
+
};
|
|
337
381
|
/**
|
|
338
382
|
* Wraps a Marwes CSS custom property name in `var(...)`, with an optional fallback.
|
|
339
383
|
* Use this as the escape hatch for custom or advanced `--mw-*` variables.
|
|
340
384
|
*/
|
|
341
385
|
declare function mwVar<const TName extends MwThemeVarName>(name: TName): `var(${TName})`;
|
|
342
386
|
declare function mwVar<const TName extends MwThemeVarName>(name: TName, fallback: string): `var(${TName}, ${string})`;
|
|
387
|
+
declare function createMwThemeMedia(breakpoint: ThemeBreakpoints): MwThemeMedia;
|
|
343
388
|
/**
|
|
344
389
|
* Raw Marwes CSS custom property names, without `var(...)`.
|
|
345
390
|
* Use these when assigning variables, inspecting tokens, writing tests, or building adapter/tooling bridges.
|
|
@@ -398,7 +443,9 @@ declare const mwThemeVarNames: {
|
|
|
398
443
|
};
|
|
399
444
|
readonly background: "--mw-color-background";
|
|
400
445
|
readonly surface: "--mw-color-surface";
|
|
446
|
+
readonly surfacePrimary: "--mw-color-surface-primary";
|
|
401
447
|
readonly surfaceSubtle: "--mw-color-surface-subtle";
|
|
448
|
+
readonly surfaceBrand: "--mw-color-surface-brand";
|
|
402
449
|
readonly surfaceElevated: "--mw-color-surface-elevated";
|
|
403
450
|
readonly surfaceDisabled: "--mw-color-surface-disabled";
|
|
404
451
|
readonly surfaceInverted: "--mw-color-surface-inverted";
|
|
@@ -408,11 +455,15 @@ declare const mwThemeVarNames: {
|
|
|
408
455
|
readonly textDisabled: "--mw-color-text-disabled";
|
|
409
456
|
readonly textInverted: "--mw-color-text-inverted";
|
|
410
457
|
readonly textBrand: "--mw-color-text-brand";
|
|
458
|
+
readonly textLink: "--mw-color-text-link";
|
|
459
|
+
readonly iconMuted: "--mw-color-icon-muted";
|
|
460
|
+
readonly borderLow: "--mw-color-border-low";
|
|
411
461
|
readonly border: "--mw-color-border";
|
|
412
462
|
readonly borderSubtle: "--mw-color-border-subtle";
|
|
413
463
|
readonly borderStrong: "--mw-color-border-strong";
|
|
414
464
|
readonly borderDisabled: "--mw-color-border-disabled";
|
|
415
465
|
readonly borderBrand: "--mw-color-border-brand";
|
|
466
|
+
readonly borderFull: "--mw-color-border-full";
|
|
416
467
|
readonly focus: "--mw-color-focus";
|
|
417
468
|
readonly status: {
|
|
418
469
|
readonly success: {
|
|
@@ -427,6 +478,7 @@ declare const mwThemeVarNames: {
|
|
|
427
478
|
readonly text: "--mw-color-status-warning-text";
|
|
428
479
|
readonly icon: "--mw-color-status-warning-icon";
|
|
429
480
|
readonly border: "--mw-color-status-warning-border";
|
|
481
|
+
readonly borderAccessible: "--mw-color-status-warning-border-accessible";
|
|
430
482
|
readonly borderStrong: "--mw-color-status-warning-border-strong";
|
|
431
483
|
};
|
|
432
484
|
readonly error: {
|
|
@@ -450,6 +502,7 @@ declare const mwThemeVarNames: {
|
|
|
450
502
|
readonly sp2: "--mw-spacing-sp-2";
|
|
451
503
|
readonly sp4: "--mw-spacing-sp-4";
|
|
452
504
|
readonly sp8: "--mw-spacing-sp-8";
|
|
505
|
+
readonly sp12: "--mw-spacing-sp-12";
|
|
453
506
|
readonly sp16: "--mw-spacing-sp-16";
|
|
454
507
|
readonly sp24: "--mw-spacing-sp-24";
|
|
455
508
|
readonly sp32: "--mw-spacing-sp-32";
|
|
@@ -486,6 +539,12 @@ declare const mwThemeVarNames: {
|
|
|
486
539
|
readonly fontSizeSm: "--mw-density-font-size-sm";
|
|
487
540
|
};
|
|
488
541
|
readonly typography: {
|
|
542
|
+
readonly display: {
|
|
543
|
+
readonly fontSize: "--mw-typography-display-font-size";
|
|
544
|
+
readonly lineHeight: "--mw-typography-display-line-height";
|
|
545
|
+
readonly fontWeight: "--mw-typography-display-font-weight";
|
|
546
|
+
readonly letterSpacing: "--mw-typography-display-letter-spacing";
|
|
547
|
+
};
|
|
489
548
|
readonly h1: {
|
|
490
549
|
readonly fontSize: "--mw-typography-h1-font-size";
|
|
491
550
|
readonly lineHeight: "--mw-typography-h1-line-height";
|
|
@@ -504,6 +563,50 @@ declare const mwThemeVarNames: {
|
|
|
504
563
|
readonly fontWeight: "--mw-typography-h3-font-weight";
|
|
505
564
|
readonly letterSpacing: "--mw-typography-h3-letter-spacing";
|
|
506
565
|
};
|
|
566
|
+
readonly text: {
|
|
567
|
+
readonly display: {
|
|
568
|
+
readonly fontSize: "--mw-typography-text-display-font-size";
|
|
569
|
+
readonly lineHeight: "--mw-typography-text-display-line-height";
|
|
570
|
+
readonly fontWeight: "--mw-typography-text-display-font-weight";
|
|
571
|
+
readonly letterSpacing: "--mw-typography-text-display-letter-spacing";
|
|
572
|
+
readonly textTransform: "--mw-typography-text-display-transform";
|
|
573
|
+
};
|
|
574
|
+
readonly label: {
|
|
575
|
+
readonly fontSize: "--mw-typography-text-label-font-size";
|
|
576
|
+
readonly lineHeight: "--mw-typography-text-label-line-height";
|
|
577
|
+
readonly fontWeight: "--mw-typography-text-label-font-weight";
|
|
578
|
+
readonly letterSpacing: "--mw-typography-text-label-letter-spacing";
|
|
579
|
+
readonly textTransform: "--mw-typography-text-label-transform";
|
|
580
|
+
};
|
|
581
|
+
readonly "label-small": {
|
|
582
|
+
readonly fontSize: "--mw-typography-text-label-small-font-size";
|
|
583
|
+
readonly lineHeight: "--mw-typography-text-label-small-line-height";
|
|
584
|
+
readonly fontWeight: "--mw-typography-text-label-small-font-weight";
|
|
585
|
+
readonly letterSpacing: "--mw-typography-text-label-small-letter-spacing";
|
|
586
|
+
readonly textTransform: "--mw-typography-text-label-small-transform";
|
|
587
|
+
};
|
|
588
|
+
readonly caption: {
|
|
589
|
+
readonly fontSize: "--mw-typography-text-caption-font-size";
|
|
590
|
+
readonly lineHeight: "--mw-typography-text-caption-line-height";
|
|
591
|
+
readonly fontWeight: "--mw-typography-text-caption-font-weight";
|
|
592
|
+
readonly letterSpacing: "--mw-typography-text-caption-letter-spacing";
|
|
593
|
+
readonly textTransform: "--mw-typography-text-caption-transform";
|
|
594
|
+
};
|
|
595
|
+
readonly overline: {
|
|
596
|
+
readonly fontSize: "--mw-typography-text-overline-font-size";
|
|
597
|
+
readonly lineHeight: "--mw-typography-text-overline-line-height";
|
|
598
|
+
readonly fontWeight: "--mw-typography-text-overline-font-weight";
|
|
599
|
+
readonly letterSpacing: "--mw-typography-text-overline-letter-spacing";
|
|
600
|
+
readonly textTransform: "--mw-typography-text-overline-transform";
|
|
601
|
+
};
|
|
602
|
+
readonly micro: {
|
|
603
|
+
readonly fontSize: "--mw-typography-text-micro-font-size";
|
|
604
|
+
readonly lineHeight: "--mw-typography-text-micro-line-height";
|
|
605
|
+
readonly fontWeight: "--mw-typography-text-micro-font-weight";
|
|
606
|
+
readonly letterSpacing: "--mw-typography-text-micro-letter-spacing";
|
|
607
|
+
readonly textTransform: "--mw-typography-text-micro-transform";
|
|
608
|
+
};
|
|
609
|
+
};
|
|
507
610
|
readonly paragraph: {
|
|
508
611
|
readonly sm: {
|
|
509
612
|
readonly fontSize: "--mw-typography-paragraph-sm-font-size";
|
|
@@ -578,7 +681,9 @@ declare const mwThemeVars: {
|
|
|
578
681
|
};
|
|
579
682
|
readonly background: "var(--mw-color-background)";
|
|
580
683
|
readonly surface: "var(--mw-color-surface)";
|
|
684
|
+
readonly surfacePrimary: "var(--mw-color-surface-primary)";
|
|
581
685
|
readonly surfaceSubtle: "var(--mw-color-surface-subtle)";
|
|
686
|
+
readonly surfaceBrand: "var(--mw-color-surface-brand)";
|
|
582
687
|
readonly surfaceElevated: "var(--mw-color-surface-elevated)";
|
|
583
688
|
readonly surfaceDisabled: "var(--mw-color-surface-disabled)";
|
|
584
689
|
readonly surfaceInverted: "var(--mw-color-surface-inverted)";
|
|
@@ -588,11 +693,15 @@ declare const mwThemeVars: {
|
|
|
588
693
|
readonly textDisabled: "var(--mw-color-text-disabled)";
|
|
589
694
|
readonly textInverted: "var(--mw-color-text-inverted)";
|
|
590
695
|
readonly textBrand: "var(--mw-color-text-brand)";
|
|
696
|
+
readonly textLink: "var(--mw-color-text-link)";
|
|
697
|
+
readonly iconMuted: "var(--mw-color-icon-muted)";
|
|
698
|
+
readonly borderLow: "var(--mw-color-border-low)";
|
|
591
699
|
readonly border: "var(--mw-color-border)";
|
|
592
700
|
readonly borderSubtle: "var(--mw-color-border-subtle)";
|
|
593
701
|
readonly borderStrong: "var(--mw-color-border-strong)";
|
|
594
702
|
readonly borderDisabled: "var(--mw-color-border-disabled)";
|
|
595
703
|
readonly borderBrand: "var(--mw-color-border-brand)";
|
|
704
|
+
readonly borderFull: "var(--mw-color-border-full)";
|
|
596
705
|
readonly focus: "var(--mw-color-focus)";
|
|
597
706
|
readonly status: {
|
|
598
707
|
readonly success: {
|
|
@@ -607,6 +716,7 @@ declare const mwThemeVars: {
|
|
|
607
716
|
readonly text: "var(--mw-color-status-warning-text)";
|
|
608
717
|
readonly icon: "var(--mw-color-status-warning-icon)";
|
|
609
718
|
readonly border: "var(--mw-color-status-warning-border)";
|
|
719
|
+
readonly borderAccessible: "var(--mw-color-status-warning-border-accessible)";
|
|
610
720
|
readonly borderStrong: "var(--mw-color-status-warning-border-strong)";
|
|
611
721
|
};
|
|
612
722
|
readonly error: {
|
|
@@ -630,6 +740,7 @@ declare const mwThemeVars: {
|
|
|
630
740
|
readonly sp2: "var(--mw-spacing-sp-2)";
|
|
631
741
|
readonly sp4: "var(--mw-spacing-sp-4)";
|
|
632
742
|
readonly sp8: "var(--mw-spacing-sp-8)";
|
|
743
|
+
readonly sp12: "var(--mw-spacing-sp-12)";
|
|
633
744
|
readonly sp16: "var(--mw-spacing-sp-16)";
|
|
634
745
|
readonly sp24: "var(--mw-spacing-sp-24)";
|
|
635
746
|
readonly sp32: "var(--mw-spacing-sp-32)";
|
|
@@ -666,6 +777,12 @@ declare const mwThemeVars: {
|
|
|
666
777
|
readonly fontSizeSm: "var(--mw-density-font-size-sm)";
|
|
667
778
|
};
|
|
668
779
|
readonly typography: {
|
|
780
|
+
readonly display: {
|
|
781
|
+
readonly fontSize: "var(--mw-typography-display-font-size)";
|
|
782
|
+
readonly lineHeight: "var(--mw-typography-display-line-height)";
|
|
783
|
+
readonly fontWeight: "var(--mw-typography-display-font-weight)";
|
|
784
|
+
readonly letterSpacing: "var(--mw-typography-display-letter-spacing)";
|
|
785
|
+
};
|
|
669
786
|
readonly h1: {
|
|
670
787
|
readonly fontSize: "var(--mw-typography-h1-font-size)";
|
|
671
788
|
readonly lineHeight: "var(--mw-typography-h1-line-height)";
|
|
@@ -684,186 +801,50 @@ declare const mwThemeVars: {
|
|
|
684
801
|
readonly fontWeight: "var(--mw-typography-h3-font-weight)";
|
|
685
802
|
readonly letterSpacing: "var(--mw-typography-h3-letter-spacing)";
|
|
686
803
|
};
|
|
687
|
-
readonly
|
|
688
|
-
readonly
|
|
689
|
-
readonly fontSize: "var(--mw-typography-
|
|
690
|
-
readonly lineHeight: "var(--mw-typography-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
readonly
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
readonly
|
|
698
|
-
readonly
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
readonly
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
readonly hover: "var(--mw-color-danger-hover)";
|
|
730
|
-
readonly pressed: "var(--mw-color-danger-pressed)";
|
|
731
|
-
readonly disabled: "var(--mw-color-danger-disabled)";
|
|
732
|
-
readonly label: "var(--mw-color-danger-label)";
|
|
733
|
-
readonly labelDisabled: "var(--mw-color-danger-label-disabled)";
|
|
734
|
-
};
|
|
735
|
-
readonly success: {
|
|
736
|
-
readonly base: "var(--mw-color-success-base)";
|
|
737
|
-
readonly hover: "var(--mw-color-success-hover)";
|
|
738
|
-
readonly pressed: "var(--mw-color-success-pressed)";
|
|
739
|
-
readonly disabled: "var(--mw-color-success-disabled)";
|
|
740
|
-
readonly label: "var(--mw-color-success-label)";
|
|
741
|
-
readonly labelDisabled: "var(--mw-color-success-label-disabled)";
|
|
742
|
-
};
|
|
743
|
-
readonly warning: {
|
|
744
|
-
readonly base: "var(--mw-color-warning-base)";
|
|
745
|
-
readonly hover: "var(--mw-color-warning-hover)";
|
|
746
|
-
readonly pressed: "var(--mw-color-warning-pressed)";
|
|
747
|
-
readonly disabled: "var(--mw-color-warning-disabled)";
|
|
748
|
-
readonly label: "var(--mw-color-warning-label)";
|
|
749
|
-
readonly labelDisabled: "var(--mw-color-warning-label-disabled)";
|
|
750
|
-
};
|
|
751
|
-
readonly info: {
|
|
752
|
-
readonly base: "var(--mw-color-info-base)";
|
|
753
|
-
readonly hover: "var(--mw-color-info-hover)";
|
|
754
|
-
readonly pressed: "var(--mw-color-info-pressed)";
|
|
755
|
-
readonly disabled: "var(--mw-color-info-disabled)";
|
|
756
|
-
readonly label: "var(--mw-color-info-label)";
|
|
757
|
-
readonly labelDisabled: "var(--mw-color-info-label-disabled)";
|
|
758
|
-
};
|
|
759
|
-
readonly background: "var(--mw-color-background)";
|
|
760
|
-
readonly surface: "var(--mw-color-surface)";
|
|
761
|
-
readonly surfaceSubtle: "var(--mw-color-surface-subtle)";
|
|
762
|
-
readonly surfaceElevated: "var(--mw-color-surface-elevated)";
|
|
763
|
-
readonly surfaceDisabled: "var(--mw-color-surface-disabled)";
|
|
764
|
-
readonly surfaceInverted: "var(--mw-color-surface-inverted)";
|
|
765
|
-
readonly text: "var(--mw-color-text)";
|
|
766
|
-
readonly textMuted: "var(--mw-color-text-muted)";
|
|
767
|
-
readonly textSubtle: "var(--mw-color-text-subtle)";
|
|
768
|
-
readonly textDisabled: "var(--mw-color-text-disabled)";
|
|
769
|
-
readonly textInverted: "var(--mw-color-text-inverted)";
|
|
770
|
-
readonly textBrand: "var(--mw-color-text-brand)";
|
|
771
|
-
readonly border: "var(--mw-color-border)";
|
|
772
|
-
readonly borderSubtle: "var(--mw-color-border-subtle)";
|
|
773
|
-
readonly borderStrong: "var(--mw-color-border-strong)";
|
|
774
|
-
readonly borderDisabled: "var(--mw-color-border-disabled)";
|
|
775
|
-
readonly borderBrand: "var(--mw-color-border-brand)";
|
|
776
|
-
readonly focus: "var(--mw-color-focus)";
|
|
777
|
-
readonly status: {
|
|
778
|
-
readonly success: {
|
|
779
|
-
readonly background: "var(--mw-color-status-success-background)";
|
|
780
|
-
readonly text: "var(--mw-color-status-success-text)";
|
|
781
|
-
readonly icon: "var(--mw-color-status-success-icon)";
|
|
782
|
-
readonly border: "var(--mw-color-status-success-border)";
|
|
783
|
-
readonly borderStrong: "var(--mw-color-status-success-border-strong)";
|
|
784
|
-
};
|
|
785
|
-
readonly warning: {
|
|
786
|
-
readonly background: "var(--mw-color-status-warning-background)";
|
|
787
|
-
readonly text: "var(--mw-color-status-warning-text)";
|
|
788
|
-
readonly icon: "var(--mw-color-status-warning-icon)";
|
|
789
|
-
readonly border: "var(--mw-color-status-warning-border)";
|
|
790
|
-
readonly borderStrong: "var(--mw-color-status-warning-border-strong)";
|
|
791
|
-
};
|
|
792
|
-
readonly error: {
|
|
793
|
-
readonly background: "var(--mw-color-status-error-background)";
|
|
794
|
-
readonly text: "var(--mw-color-status-error-text)";
|
|
795
|
-
readonly icon: "var(--mw-color-status-error-icon)";
|
|
796
|
-
readonly border: "var(--mw-color-status-error-border)";
|
|
797
|
-
readonly borderStrong: "var(--mw-color-status-error-border-strong)";
|
|
798
|
-
};
|
|
799
|
-
readonly info: {
|
|
800
|
-
readonly background: "var(--mw-color-status-info-background)";
|
|
801
|
-
readonly text: "var(--mw-color-status-info-text)";
|
|
802
|
-
readonly icon: "var(--mw-color-status-info-icon)";
|
|
803
|
-
readonly border: "var(--mw-color-status-info-border)";
|
|
804
|
-
readonly borderStrong: "var(--mw-color-status-info-border-strong)";
|
|
804
|
+
readonly text: {
|
|
805
|
+
readonly display: {
|
|
806
|
+
readonly fontSize: "var(--mw-typography-text-display-font-size)";
|
|
807
|
+
readonly lineHeight: "var(--mw-typography-text-display-line-height)";
|
|
808
|
+
readonly fontWeight: "var(--mw-typography-text-display-font-weight)";
|
|
809
|
+
readonly letterSpacing: "var(--mw-typography-text-display-letter-spacing)";
|
|
810
|
+
readonly textTransform: "var(--mw-typography-text-display-transform)";
|
|
811
|
+
};
|
|
812
|
+
readonly label: {
|
|
813
|
+
readonly fontSize: "var(--mw-typography-text-label-font-size)";
|
|
814
|
+
readonly lineHeight: "var(--mw-typography-text-label-line-height)";
|
|
815
|
+
readonly fontWeight: "var(--mw-typography-text-label-font-weight)";
|
|
816
|
+
readonly letterSpacing: "var(--mw-typography-text-label-letter-spacing)";
|
|
817
|
+
readonly textTransform: "var(--mw-typography-text-label-transform)";
|
|
818
|
+
};
|
|
819
|
+
readonly "label-small": {
|
|
820
|
+
readonly fontSize: "var(--mw-typography-text-label-small-font-size)";
|
|
821
|
+
readonly lineHeight: "var(--mw-typography-text-label-small-line-height)";
|
|
822
|
+
readonly fontWeight: "var(--mw-typography-text-label-small-font-weight)";
|
|
823
|
+
readonly letterSpacing: "var(--mw-typography-text-label-small-letter-spacing)";
|
|
824
|
+
readonly textTransform: "var(--mw-typography-text-label-small-transform)";
|
|
825
|
+
};
|
|
826
|
+
readonly caption: {
|
|
827
|
+
readonly fontSize: "var(--mw-typography-text-caption-font-size)";
|
|
828
|
+
readonly lineHeight: "var(--mw-typography-text-caption-line-height)";
|
|
829
|
+
readonly fontWeight: "var(--mw-typography-text-caption-font-weight)";
|
|
830
|
+
readonly letterSpacing: "var(--mw-typography-text-caption-letter-spacing)";
|
|
831
|
+
readonly textTransform: "var(--mw-typography-text-caption-transform)";
|
|
832
|
+
};
|
|
833
|
+
readonly overline: {
|
|
834
|
+
readonly fontSize: "var(--mw-typography-text-overline-font-size)";
|
|
835
|
+
readonly lineHeight: "var(--mw-typography-text-overline-line-height)";
|
|
836
|
+
readonly fontWeight: "var(--mw-typography-text-overline-font-weight)";
|
|
837
|
+
readonly letterSpacing: "var(--mw-typography-text-overline-letter-spacing)";
|
|
838
|
+
readonly textTransform: "var(--mw-typography-text-overline-transform)";
|
|
839
|
+
};
|
|
840
|
+
readonly micro: {
|
|
841
|
+
readonly fontSize: "var(--mw-typography-text-micro-font-size)";
|
|
842
|
+
readonly lineHeight: "var(--mw-typography-text-micro-line-height)";
|
|
843
|
+
readonly fontWeight: "var(--mw-typography-text-micro-font-weight)";
|
|
844
|
+
readonly letterSpacing: "var(--mw-typography-text-micro-letter-spacing)";
|
|
845
|
+
readonly textTransform: "var(--mw-typography-text-micro-transform)";
|
|
805
846
|
};
|
|
806
847
|
};
|
|
807
|
-
};
|
|
808
|
-
readonly spacing: {
|
|
809
|
-
readonly sp0: "var(--mw-spacing-sp-0)";
|
|
810
|
-
readonly sp2: "var(--mw-spacing-sp-2)";
|
|
811
|
-
readonly sp4: "var(--mw-spacing-sp-4)";
|
|
812
|
-
readonly sp8: "var(--mw-spacing-sp-8)";
|
|
813
|
-
readonly sp16: "var(--mw-spacing-sp-16)";
|
|
814
|
-
readonly sp24: "var(--mw-spacing-sp-24)";
|
|
815
|
-
readonly sp32: "var(--mw-spacing-sp-32)";
|
|
816
|
-
readonly sp40: "var(--mw-spacing-sp-40)";
|
|
817
|
-
readonly sp48: "var(--mw-spacing-sp-48)";
|
|
818
|
-
readonly sp56: "var(--mw-spacing-sp-56)";
|
|
819
|
-
readonly sp64: "var(--mw-spacing-sp-64)";
|
|
820
|
-
readonly sp72: "var(--mw-spacing-sp-72)";
|
|
821
|
-
readonly sp80: "var(--mw-spacing-sp-80)";
|
|
822
|
-
readonly sp88: "var(--mw-spacing-sp-88)";
|
|
823
|
-
readonly sp96: "var(--mw-spacing-sp-96)";
|
|
824
|
-
readonly sp104: "var(--mw-spacing-sp-104)";
|
|
825
|
-
readonly sp112: "var(--mw-spacing-sp-112)";
|
|
826
|
-
readonly sp120: "var(--mw-spacing-sp-120)";
|
|
827
|
-
};
|
|
828
|
-
readonly font: {
|
|
829
|
-
readonly primary: "var(--mw-font-primary)";
|
|
830
|
-
readonly secondary: "var(--mw-font-secondary)";
|
|
831
|
-
readonly mono: "var(--mw-font-mono)";
|
|
832
|
-
};
|
|
833
|
-
readonly ui: {
|
|
834
|
-
readonly radius: "var(--mw-ui-radius)";
|
|
835
|
-
};
|
|
836
|
-
readonly density: {
|
|
837
|
-
readonly height: "var(--mw-density-height)";
|
|
838
|
-
readonly paddingX: "var(--mw-density-padding-x)";
|
|
839
|
-
readonly paddingY: "var(--mw-density-padding-y)";
|
|
840
|
-
readonly gap: "var(--mw-density-gap)";
|
|
841
|
-
readonly fontSize: "var(--mw-density-font-size)";
|
|
842
|
-
readonly iconSize: "var(--mw-density-icon-size)";
|
|
843
|
-
readonly checkboxSize: "var(--mw-density-checkbox-size)";
|
|
844
|
-
readonly fieldGap: "var(--mw-density-field-gap)";
|
|
845
|
-
readonly spacingMultiplier: "var(--mw-density-spacing-multiplier)";
|
|
846
|
-
readonly fontSizeSm: "var(--mw-density-font-size-sm)";
|
|
847
|
-
};
|
|
848
|
-
readonly typography: {
|
|
849
|
-
readonly h1: {
|
|
850
|
-
readonly fontSize: "var(--mw-typography-h1-font-size)";
|
|
851
|
-
readonly lineHeight: "var(--mw-typography-h1-line-height)";
|
|
852
|
-
readonly fontWeight: "var(--mw-typography-h1-font-weight)";
|
|
853
|
-
readonly letterSpacing: "var(--mw-typography-h1-letter-spacing)";
|
|
854
|
-
};
|
|
855
|
-
readonly h2: {
|
|
856
|
-
readonly fontSize: "var(--mw-typography-h2-font-size)";
|
|
857
|
-
readonly lineHeight: "var(--mw-typography-h2-line-height)";
|
|
858
|
-
readonly fontWeight: "var(--mw-typography-h2-font-weight)";
|
|
859
|
-
readonly letterSpacing: "var(--mw-typography-h2-letter-spacing)";
|
|
860
|
-
};
|
|
861
|
-
readonly h3: {
|
|
862
|
-
readonly fontSize: "var(--mw-typography-h3-font-size)";
|
|
863
|
-
readonly lineHeight: "var(--mw-typography-h3-line-height)";
|
|
864
|
-
readonly fontWeight: "var(--mw-typography-h3-font-weight)";
|
|
865
|
-
readonly letterSpacing: "var(--mw-typography-h3-letter-spacing)";
|
|
866
|
-
};
|
|
867
848
|
readonly paragraph: {
|
|
868
849
|
readonly sm: {
|
|
869
850
|
readonly fontSize: "var(--mw-typography-paragraph-sm-font-size)";
|
|
@@ -880,8 +861,26 @@ declare const mwStyledTheme: {
|
|
|
880
861
|
};
|
|
881
862
|
};
|
|
882
863
|
};
|
|
864
|
+
/**
|
|
865
|
+
* Creates a ThemeProvider-friendly object for styled-components, Emotion, and other CSS providers.
|
|
866
|
+
* Token values are CSS custom property references; media helpers are derived from the resolved theme.
|
|
867
|
+
*/
|
|
868
|
+
declare function createMwTheme(theme: ResolvedTheme): MwTheme;
|
|
869
|
+
/**
|
|
870
|
+
* Static CSS-provider theme using default Marwes breakpoint values.
|
|
871
|
+
* Use provider-rendered `mwTheme` when consumers need breakpoint overrides.
|
|
872
|
+
*/
|
|
873
|
+
declare const mwTheme: MwTheme;
|
|
874
|
+
/**
|
|
875
|
+
* @deprecated Use `mwTheme`. This alias is kept for existing styled-provider consumers.
|
|
876
|
+
*/
|
|
877
|
+
declare const mwStyledTheme: MwTheme;
|
|
883
878
|
type MwThemeVarNames = typeof mwThemeVarNames;
|
|
884
879
|
type MwThemeVars = typeof mwThemeVars;
|
|
880
|
+
type MwTheme = MwThemeVars & {
|
|
881
|
+
breakpoint: ThemeBreakpoints;
|
|
882
|
+
media: MwThemeMedia;
|
|
883
|
+
};
|
|
885
884
|
type MwStyledTheme = typeof mwStyledTheme;
|
|
886
885
|
|
|
887
886
|
interface DensityScale {
|
|
@@ -988,6 +987,9 @@ declare function isSystemFont(name: string): boolean;
|
|
|
988
987
|
*/
|
|
989
988
|
declare function shouldLoadGoogleFont(name: string, config?: FontLoadingConfig): boolean;
|
|
990
989
|
interface TypographyForWeightExtraction {
|
|
990
|
+
display?: {
|
|
991
|
+
fontWeight: number;
|
|
992
|
+
};
|
|
991
993
|
h1: {
|
|
992
994
|
fontWeight: number;
|
|
993
995
|
};
|
|
@@ -997,6 +999,9 @@ interface TypographyForWeightExtraction {
|
|
|
997
999
|
h3: {
|
|
998
1000
|
fontWeight: number;
|
|
999
1001
|
};
|
|
1002
|
+
text?: Record<string, {
|
|
1003
|
+
fontWeight: number;
|
|
1004
|
+
}>;
|
|
1000
1005
|
}
|
|
1001
1006
|
/**
|
|
1002
1007
|
* Collects unique fontWeight values from typography config.
|
|
@@ -1009,7 +1014,7 @@ declare const canonicalSemanticAttributeNames: readonly ["data-component", "data
|
|
|
1009
1014
|
type SemanticAttributeName = (typeof canonicalSemanticAttributeNames)[number];
|
|
1010
1015
|
declare const semanticLayers: readonly ["atom", "molecule", "purpose"];
|
|
1011
1016
|
type SemanticLayer = (typeof semanticLayers)[number];
|
|
1012
|
-
declare const semanticFamilies: readonly ["button", "badge", "avatar", "toast", "dialog"];
|
|
1017
|
+
declare const semanticFamilies: readonly ["button", "badge", "banner", "avatar", "toast", "dialog", "drawer", "context-menu", "breadcrumb"];
|
|
1013
1018
|
type SemanticFamily = (typeof semanticFamilies)[number];
|
|
1014
1019
|
declare const semanticIntents: readonly ["success", "error", "warning", "info", "confirm", "destructive"];
|
|
1015
1020
|
type SemanticIntent = (typeof semanticIntents)[number];
|
|
@@ -1021,8 +1026,9 @@ declare const buttonPurposes: readonly ["destructive", "create", "submit", "canc
|
|
|
1021
1026
|
declare const badgePurposes: readonly ["status", "priority", "notification"];
|
|
1022
1027
|
declare const avatarPurposes: readonly ["profile", "presence", "team"];
|
|
1023
1028
|
declare const toastPurposes: readonly ["success-toast", "error-toast", "warning-toast", "info-toast"];
|
|
1029
|
+
declare const bannerPurposes: readonly ["info-banner", "success-banner", "warning-banner", "error-banner"];
|
|
1024
1030
|
declare const dialogPurposes: readonly ["confirm-dialog", "destructive-dialog", "info-dialog"];
|
|
1025
|
-
declare const semanticPurposes: readonly ["destructive", "create", "submit", "cancel", "navigation", "save", "confirm", "verify", "edit", "close", "refresh", "upload", "download", "copy", "search", "filter", "sort", "dropdown", "success", "status", "priority", "notification", "profile", "presence", "team", "success-toast", "error-toast", "warning-toast", "info-toast", "confirm-dialog", "destructive-dialog", "info-dialog"];
|
|
1031
|
+
declare const semanticPurposes: readonly ["destructive", "create", "submit", "cancel", "navigation", "save", "confirm", "verify", "edit", "close", "refresh", "upload", "download", "copy", "search", "filter", "sort", "dropdown", "success", "status", "priority", "notification", "profile", "presence", "team", "success-toast", "error-toast", "warning-toast", "info-toast", "info-banner", "success-banner", "warning-banner", "error-banner", "confirm-dialog", "destructive-dialog", "info-dialog"];
|
|
1026
1032
|
type SemanticPurpose = (typeof semanticPurposes)[number];
|
|
1027
1033
|
type SemanticAttributeValue = string;
|
|
1028
1034
|
interface SemanticAttributeDefinition {
|
|
@@ -1078,6 +1084,16 @@ declare const familySemanticsRegistry: {
|
|
|
1078
1084
|
allowedPurposes: ("status" | "priority" | "notification")[];
|
|
1079
1085
|
notes: string;
|
|
1080
1086
|
};
|
|
1087
|
+
banner: {
|
|
1088
|
+
family: "banner";
|
|
1089
|
+
defaultLayer: "atom";
|
|
1090
|
+
baseAttributes: {
|
|
1091
|
+
"data-component": string;
|
|
1092
|
+
};
|
|
1093
|
+
canonicalAttributes: ("data-component" | "data-variant")[];
|
|
1094
|
+
allowedPurposes: ("info-banner" | "success-banner" | "warning-banner" | "error-banner")[];
|
|
1095
|
+
notes: string;
|
|
1096
|
+
};
|
|
1081
1097
|
avatar: {
|
|
1082
1098
|
family: "avatar";
|
|
1083
1099
|
defaultLayer: "atom";
|
|
@@ -1108,6 +1124,36 @@ declare const familySemanticsRegistry: {
|
|
|
1108
1124
|
allowedPurposes: ("confirm-dialog" | "destructive-dialog" | "info-dialog")[];
|
|
1109
1125
|
notes: string;
|
|
1110
1126
|
};
|
|
1127
|
+
drawer: {
|
|
1128
|
+
family: "drawer";
|
|
1129
|
+
defaultLayer: "atom";
|
|
1130
|
+
baseAttributes: {
|
|
1131
|
+
"data-component": string;
|
|
1132
|
+
};
|
|
1133
|
+
canonicalAttributes: ("data-component" | "data-size")[];
|
|
1134
|
+
allowedPurposes: never[];
|
|
1135
|
+
notes: string;
|
|
1136
|
+
};
|
|
1137
|
+
"context-menu": {
|
|
1138
|
+
family: "context-menu";
|
|
1139
|
+
defaultLayer: "atom";
|
|
1140
|
+
baseAttributes: {
|
|
1141
|
+
"data-component": string;
|
|
1142
|
+
};
|
|
1143
|
+
canonicalAttributes: ("data-component" | "data-destructive")[];
|
|
1144
|
+
allowedPurposes: never[];
|
|
1145
|
+
notes: string;
|
|
1146
|
+
};
|
|
1147
|
+
breadcrumb: {
|
|
1148
|
+
family: "breadcrumb";
|
|
1149
|
+
defaultLayer: "atom";
|
|
1150
|
+
baseAttributes: {
|
|
1151
|
+
"data-component": string;
|
|
1152
|
+
};
|
|
1153
|
+
canonicalAttributes: "data-component"[];
|
|
1154
|
+
allowedPurposes: never[];
|
|
1155
|
+
notes: string;
|
|
1156
|
+
};
|
|
1111
1157
|
};
|
|
1112
1158
|
|
|
1113
1159
|
declare const buttonPurposeSemantics: {
|
|
@@ -1408,6 +1454,48 @@ declare const toastPurposeSemantics: {
|
|
|
1408
1454
|
supportedFrameworks: readonly ["react", "vue"];
|
|
1409
1455
|
};
|
|
1410
1456
|
};
|
|
1457
|
+
declare const bannerPurposeSemantics: {
|
|
1458
|
+
infoBanner: {
|
|
1459
|
+
purpose: "info-banner";
|
|
1460
|
+
family: "banner";
|
|
1461
|
+
layer: "purpose";
|
|
1462
|
+
attributes: {
|
|
1463
|
+
"data-purpose": string;
|
|
1464
|
+
"data-intent": string;
|
|
1465
|
+
};
|
|
1466
|
+
supportedFrameworks: readonly ["react", "vue"];
|
|
1467
|
+
};
|
|
1468
|
+
successBanner: {
|
|
1469
|
+
purpose: "success-banner";
|
|
1470
|
+
family: "banner";
|
|
1471
|
+
layer: "purpose";
|
|
1472
|
+
attributes: {
|
|
1473
|
+
"data-purpose": string;
|
|
1474
|
+
"data-intent": string;
|
|
1475
|
+
};
|
|
1476
|
+
supportedFrameworks: readonly ["react", "vue"];
|
|
1477
|
+
};
|
|
1478
|
+
warningBanner: {
|
|
1479
|
+
purpose: "warning-banner";
|
|
1480
|
+
family: "banner";
|
|
1481
|
+
layer: "purpose";
|
|
1482
|
+
attributes: {
|
|
1483
|
+
"data-purpose": string;
|
|
1484
|
+
"data-intent": string;
|
|
1485
|
+
};
|
|
1486
|
+
supportedFrameworks: readonly ["react", "vue"];
|
|
1487
|
+
};
|
|
1488
|
+
errorBanner: {
|
|
1489
|
+
purpose: "error-banner";
|
|
1490
|
+
family: "banner";
|
|
1491
|
+
layer: "purpose";
|
|
1492
|
+
attributes: {
|
|
1493
|
+
"data-purpose": string;
|
|
1494
|
+
"data-intent": string;
|
|
1495
|
+
};
|
|
1496
|
+
supportedFrameworks: readonly ["react", "vue"];
|
|
1497
|
+
};
|
|
1498
|
+
};
|
|
1411
1499
|
declare const dialogPurposeSemantics: {
|
|
1412
1500
|
confirmDialog: {
|
|
1413
1501
|
purpose: "confirm-dialog";
|
|
@@ -1475,6 +1563,46 @@ declare const purposeSemanticsRegistry: {
|
|
|
1475
1563
|
};
|
|
1476
1564
|
supportedFrameworks: readonly ["react", "vue"];
|
|
1477
1565
|
};
|
|
1566
|
+
infoBanner: {
|
|
1567
|
+
purpose: "info-banner";
|
|
1568
|
+
family: "banner";
|
|
1569
|
+
layer: "purpose";
|
|
1570
|
+
attributes: {
|
|
1571
|
+
"data-purpose": string;
|
|
1572
|
+
"data-intent": string;
|
|
1573
|
+
};
|
|
1574
|
+
supportedFrameworks: readonly ["react", "vue"];
|
|
1575
|
+
};
|
|
1576
|
+
successBanner: {
|
|
1577
|
+
purpose: "success-banner";
|
|
1578
|
+
family: "banner";
|
|
1579
|
+
layer: "purpose";
|
|
1580
|
+
attributes: {
|
|
1581
|
+
"data-purpose": string;
|
|
1582
|
+
"data-intent": string;
|
|
1583
|
+
};
|
|
1584
|
+
supportedFrameworks: readonly ["react", "vue"];
|
|
1585
|
+
};
|
|
1586
|
+
warningBanner: {
|
|
1587
|
+
purpose: "warning-banner";
|
|
1588
|
+
family: "banner";
|
|
1589
|
+
layer: "purpose";
|
|
1590
|
+
attributes: {
|
|
1591
|
+
"data-purpose": string;
|
|
1592
|
+
"data-intent": string;
|
|
1593
|
+
};
|
|
1594
|
+
supportedFrameworks: readonly ["react", "vue"];
|
|
1595
|
+
};
|
|
1596
|
+
errorBanner: {
|
|
1597
|
+
purpose: "error-banner";
|
|
1598
|
+
family: "banner";
|
|
1599
|
+
layer: "purpose";
|
|
1600
|
+
attributes: {
|
|
1601
|
+
"data-purpose": string;
|
|
1602
|
+
"data-intent": string;
|
|
1603
|
+
};
|
|
1604
|
+
supportedFrameworks: readonly ["react", "vue"];
|
|
1605
|
+
};
|
|
1478
1606
|
successToast: {
|
|
1479
1607
|
purpose: "success-toast";
|
|
1480
1608
|
family: "toast";
|
|
@@ -3589,29 +3717,46 @@ declare const storybookA11yPolicy: {
|
|
|
3589
3717
|
};
|
|
3590
3718
|
};
|
|
3591
3719
|
};
|
|
3592
|
-
declare const storybookIconNames: ("info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "
|
|
3593
|
-
declare const storybookOptionalIconNames: ("info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "
|
|
3720
|
+
declare const storybookIconNames: ("tablet" | "info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "tag" | "thumbsDown" | "thumbsUp" | "trash" | "trendingDown" | "trendingUp" | "triangle" | "tv" | "twitter" | "type" | "underline" | "unlock" | "uploadCloud" | "user" | "userCheck" | "userCircle" | "userMinus" | "userPlus" | "userX" | "users" | "video" | "videoOff" | "volume" | "volume1" | "volume2" | "volumeX" | "watch" | "wifi" | "x" | "xCircle" | "xSquare" | "zoomIn" | "zoomOut")[];
|
|
3721
|
+
declare const storybookOptionalIconNames: ("tablet" | "info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "tag" | "thumbsDown" | "thumbsUp" | "trash" | "trendingDown" | "trendingUp" | "triangle" | "tv" | "twitter" | "type" | "underline" | "unlock" | "uploadCloud" | "user" | "userCheck" | "userCircle" | "userMinus" | "userPlus" | "userX" | "users" | "video" | "videoOff" | "volume" | "volume1" | "volume2" | "volumeX" | "watch" | "wifi" | "x" | "xCircle" | "xSquare" | "zoomIn" | "zoomOut" | undefined)[];
|
|
3594
3722
|
declare const storybookButtonIconArgTypes: {
|
|
3595
3723
|
readonly iconLeft: {
|
|
3596
3724
|
readonly control: "select";
|
|
3597
|
-
readonly options: ("info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "
|
|
3725
|
+
readonly options: ("tablet" | "info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "tag" | "thumbsDown" | "thumbsUp" | "trash" | "trendingDown" | "trendingUp" | "triangle" | "tv" | "twitter" | "type" | "underline" | "unlock" | "uploadCloud" | "user" | "userCheck" | "userCircle" | "userMinus" | "userPlus" | "userX" | "users" | "video" | "videoOff" | "volume" | "volume1" | "volume2" | "volumeX" | "watch" | "wifi" | "x" | "xCircle" | "xSquare" | "zoomIn" | "zoomOut" | undefined)[];
|
|
3598
3726
|
};
|
|
3599
3727
|
readonly iconRight: {
|
|
3600
3728
|
readonly control: "select";
|
|
3601
|
-
readonly options: ("info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "
|
|
3729
|
+
readonly options: ("tablet" | "info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "tag" | "thumbsDown" | "thumbsUp" | "trash" | "trendingDown" | "trendingUp" | "triangle" | "tv" | "twitter" | "type" | "underline" | "unlock" | "uploadCloud" | "user" | "userCheck" | "userCircle" | "userMinus" | "userPlus" | "userX" | "users" | "video" | "videoOff" | "volume" | "volume1" | "volume2" | "volumeX" | "watch" | "wifi" | "x" | "xCircle" | "xSquare" | "zoomIn" | "zoomOut" | undefined)[];
|
|
3602
3730
|
};
|
|
3603
3731
|
readonly disabled: {
|
|
3604
3732
|
readonly control: "boolean";
|
|
3605
3733
|
};
|
|
3606
3734
|
};
|
|
3607
3735
|
declare const storybookButtonGeneralArgTypes: {
|
|
3736
|
+
readonly variant: {
|
|
3737
|
+
readonly control: "select";
|
|
3738
|
+
readonly options: readonly ["primary", "secondary", "neutral", "text", "success", "danger"];
|
|
3739
|
+
};
|
|
3608
3740
|
readonly iconLeft: {
|
|
3609
3741
|
readonly control: "select";
|
|
3610
|
-
readonly options: ("info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "
|
|
3742
|
+
readonly options: ("tablet" | "info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "tag" | "thumbsDown" | "thumbsUp" | "trash" | "trendingDown" | "trendingUp" | "triangle" | "tv" | "twitter" | "type" | "underline" | "unlock" | "uploadCloud" | "user" | "userCheck" | "userCircle" | "userMinus" | "userPlus" | "userX" | "users" | "video" | "videoOff" | "volume" | "volume1" | "volume2" | "volumeX" | "watch" | "wifi" | "x" | "xCircle" | "xSquare" | "zoomIn" | "zoomOut" | undefined)[];
|
|
3611
3743
|
};
|
|
3612
3744
|
readonly iconRight: {
|
|
3613
3745
|
readonly control: "select";
|
|
3614
|
-
readonly options: ("info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "
|
|
3746
|
+
readonly options: ("tablet" | "info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "tag" | "thumbsDown" | "thumbsUp" | "trash" | "trendingDown" | "trendingUp" | "triangle" | "tv" | "twitter" | "type" | "underline" | "unlock" | "uploadCloud" | "user" | "userCheck" | "userCircle" | "userMinus" | "userPlus" | "userX" | "users" | "video" | "videoOff" | "volume" | "volume1" | "volume2" | "volumeX" | "watch" | "wifi" | "x" | "xCircle" | "xSquare" | "zoomIn" | "zoomOut" | undefined)[];
|
|
3747
|
+
};
|
|
3748
|
+
readonly disabled: {
|
|
3749
|
+
readonly control: "boolean";
|
|
3750
|
+
};
|
|
3751
|
+
};
|
|
3752
|
+
declare const storybookIconButtonArgTypes: {
|
|
3753
|
+
readonly icon: {
|
|
3754
|
+
readonly control: "select";
|
|
3755
|
+
readonly options: ("tablet" | "info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "tag" | "thumbsDown" | "thumbsUp" | "trash" | "trendingDown" | "trendingUp" | "triangle" | "tv" | "twitter" | "type" | "underline" | "unlock" | "uploadCloud" | "user" | "userCheck" | "userCircle" | "userMinus" | "userPlus" | "userX" | "users" | "video" | "videoOff" | "volume" | "volume1" | "volume2" | "volumeX" | "watch" | "wifi" | "x" | "xCircle" | "xSquare" | "zoomIn" | "zoomOut")[];
|
|
3756
|
+
};
|
|
3757
|
+
readonly variant: {
|
|
3758
|
+
readonly control: "select";
|
|
3759
|
+
readonly options: readonly ["primary", "secondary", "neutral", "text", "success", "danger"];
|
|
3615
3760
|
};
|
|
3616
3761
|
readonly disabled: {
|
|
3617
3762
|
readonly control: "boolean";
|
|
@@ -3620,11 +3765,11 @@ declare const storybookButtonGeneralArgTypes: {
|
|
|
3620
3765
|
declare const storybookButtonPurposeArgTypes: {
|
|
3621
3766
|
readonly iconLeft: {
|
|
3622
3767
|
readonly control: "select";
|
|
3623
|
-
readonly options: ("info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "
|
|
3768
|
+
readonly options: ("tablet" | "info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "tag" | "thumbsDown" | "thumbsUp" | "trash" | "trendingDown" | "trendingUp" | "triangle" | "tv" | "twitter" | "type" | "underline" | "unlock" | "uploadCloud" | "user" | "userCheck" | "userCircle" | "userMinus" | "userPlus" | "userX" | "users" | "video" | "videoOff" | "volume" | "volume1" | "volume2" | "volumeX" | "watch" | "wifi" | "x" | "xCircle" | "xSquare" | "zoomIn" | "zoomOut" | undefined)[];
|
|
3624
3769
|
};
|
|
3625
3770
|
readonly iconRight: {
|
|
3626
3771
|
readonly control: "select";
|
|
3627
|
-
readonly options: ("info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "
|
|
3772
|
+
readonly options: ("tablet" | "info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "tag" | "thumbsDown" | "thumbsUp" | "trash" | "trendingDown" | "trendingUp" | "triangle" | "tv" | "twitter" | "type" | "underline" | "unlock" | "uploadCloud" | "user" | "userCheck" | "userCircle" | "userMinus" | "userPlus" | "userX" | "users" | "video" | "videoOff" | "volume" | "volume1" | "volume2" | "volumeX" | "watch" | "wifi" | "x" | "xCircle" | "xSquare" | "zoomIn" | "zoomOut" | undefined)[];
|
|
3628
3773
|
};
|
|
3629
3774
|
readonly disabled: {
|
|
3630
3775
|
readonly control: "boolean";
|
|
@@ -3721,6 +3866,60 @@ declare const storybookSkeletonArgTypes: {
|
|
|
3721
3866
|
readonly description: "Accessible label for standalone loading placeholder groups";
|
|
3722
3867
|
};
|
|
3723
3868
|
};
|
|
3869
|
+
declare const storybookProgressBarArgTypes: {
|
|
3870
|
+
readonly label: {
|
|
3871
|
+
readonly control: "text";
|
|
3872
|
+
};
|
|
3873
|
+
readonly value: {
|
|
3874
|
+
readonly control: {
|
|
3875
|
+
readonly type: "number";
|
|
3876
|
+
readonly min: -1000;
|
|
3877
|
+
readonly max: 1000;
|
|
3878
|
+
readonly step: 1;
|
|
3879
|
+
};
|
|
3880
|
+
};
|
|
3881
|
+
readonly min: {
|
|
3882
|
+
readonly control: {
|
|
3883
|
+
readonly type: "number";
|
|
3884
|
+
readonly min: -1000;
|
|
3885
|
+
readonly max: 1000;
|
|
3886
|
+
readonly step: 1;
|
|
3887
|
+
};
|
|
3888
|
+
};
|
|
3889
|
+
readonly max: {
|
|
3890
|
+
readonly control: {
|
|
3891
|
+
readonly type: "number";
|
|
3892
|
+
readonly min: -1000;
|
|
3893
|
+
readonly max: 1000;
|
|
3894
|
+
readonly step: 1;
|
|
3895
|
+
};
|
|
3896
|
+
};
|
|
3897
|
+
readonly size: {
|
|
3898
|
+
readonly control: "inline-radio";
|
|
3899
|
+
readonly options: readonly ["small", "default"];
|
|
3900
|
+
readonly description: "Figma track size: small is 4px, default is 8px";
|
|
3901
|
+
};
|
|
3902
|
+
readonly state: {
|
|
3903
|
+
readonly control: "select";
|
|
3904
|
+
readonly options: readonly ["default", "hover", "pressed", "focus"];
|
|
3905
|
+
readonly description: "Visual state for documentation and visual QA";
|
|
3906
|
+
};
|
|
3907
|
+
readonly disabled: {
|
|
3908
|
+
readonly control: "boolean";
|
|
3909
|
+
};
|
|
3910
|
+
readonly showLabel: {
|
|
3911
|
+
readonly control: "boolean";
|
|
3912
|
+
};
|
|
3913
|
+
readonly showPercentage: {
|
|
3914
|
+
readonly control: "boolean";
|
|
3915
|
+
};
|
|
3916
|
+
readonly valueLabel: {
|
|
3917
|
+
readonly control: "text";
|
|
3918
|
+
};
|
|
3919
|
+
readonly ariaLabel: {
|
|
3920
|
+
readonly control: "text";
|
|
3921
|
+
};
|
|
3922
|
+
};
|
|
3724
3923
|
declare const storybookStatTileArgTypes: {
|
|
3725
3924
|
readonly tone: {
|
|
3726
3925
|
readonly control: "select";
|
|
@@ -3780,8 +3979,8 @@ declare const storybookDatePickerArgTypes: {
|
|
|
3780
3979
|
declare const storybookSpacingArgTypes: {
|
|
3781
3980
|
readonly size: {
|
|
3782
3981
|
readonly control: "select";
|
|
3783
|
-
readonly options: readonly ["sp-0", "sp-2", "sp-4", "sp-8", "sp-16", "sp-24", "sp-32", "sp-40", "sp-48", "sp-56", "sp-64", "sp-72", "sp-80", "sp-88", "sp-96", "sp-104", "sp-112", "sp-120"];
|
|
3784
|
-
readonly description: "Size variant (sp-0=0 … sp-
|
|
3982
|
+
readonly options: readonly ["sp-0", "sp-2", "sp-4", "sp-8", "sp-12", "sp-16", "sp-24", "sp-32", "sp-40", "sp-48", "sp-56", "sp-64", "sp-72", "sp-80", "sp-88", "sp-96", "sp-104", "sp-112", "sp-120"];
|
|
3983
|
+
readonly description: "Size variant (sp-0=0 … sp-12=12 … sp-24=24 … sp-120=120px)";
|
|
3785
3984
|
};
|
|
3786
3985
|
readonly scale: {
|
|
3787
3986
|
readonly control: {
|
|
@@ -3908,7 +4107,7 @@ declare const storybookSliderArgTypes: {
|
|
|
3908
4107
|
};
|
|
3909
4108
|
declare const storybookDocsDescription: {
|
|
3910
4109
|
readonly linkButton: "LinkButton locks navigation semantics, renders as an anchor, and keeps the canonical text treatment. Use Button for intentional visual deviations.";
|
|
3911
|
-
readonly destructiveButton: "DestructiveButton locks destructive semantics, uses the canonical
|
|
4110
|
+
readonly destructiveButton: "DestructiveButton locks destructive semantics, uses the canonical danger treatment, and requires confirmation by default. Use Button for intentional exceptions.";
|
|
3912
4111
|
readonly submitButton: "SubmitButton locks form-submit semantics, always renders as a button, and keeps the canonical primary treatment.";
|
|
3913
4112
|
readonly saveButton: "SaveButton locks save semantics and the canonical primary treatment. Use Button if you need a different visual hierarchy.";
|
|
3914
4113
|
readonly confirmButton: "ConfirmButton locks affirmative confirmation semantics, always renders as a button, and keeps the canonical success treatment.";
|
|
@@ -4209,7 +4408,7 @@ type IconName = (typeof IconName)[keyof typeof IconName];
|
|
|
4209
4408
|
/**
|
|
4210
4409
|
* Runtime list of all icon names (useful for docs, search, etc.)
|
|
4211
4410
|
*/
|
|
4212
|
-
declare const iconNamesList: ("info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "
|
|
4411
|
+
declare const iconNamesList: ("tablet" | "info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "tag" | "thumbsDown" | "thumbsUp" | "trash" | "trendingDown" | "trendingUp" | "triangle" | "tv" | "twitter" | "type" | "underline" | "unlock" | "uploadCloud" | "user" | "userCheck" | "userCircle" | "userMinus" | "userPlus" | "userX" | "users" | "video" | "videoOff" | "volume" | "volume1" | "volume2" | "volumeX" | "watch" | "wifi" | "x" | "xCircle" | "xSquare" | "zoomIn" | "zoomOut")[];
|
|
4213
4412
|
|
|
4214
4413
|
type IconSize = "xs" | "sm" | "md" | "lg";
|
|
4215
4414
|
type IconStrokeWidth = "xs" | "sm" | "md" | "lg";
|
|
@@ -4217,7 +4416,7 @@ type IconColor = "currentColor" | "primary" | "secondary" | "muted";
|
|
|
4217
4416
|
/**
|
|
4218
4417
|
* @deprecated Use `iconNamesList` instead
|
|
4219
4418
|
*/
|
|
4220
|
-
declare const iconNames: ("info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "
|
|
4419
|
+
declare const iconNames: ("tablet" | "info" | "search" | "repeat" | "bold" | "link" | "save" | "edit" | "upload" | "download" | "copy" | "delete" | "code" | "airplay" | "alertCircle" | "alertOctagon" | "alertTriangle" | "alignCenter" | "alignJustify" | "alignLeft" | "alignRight" | "arrowDown" | "arrowDownCircle" | "arrowDownLeft" | "arrowDownRight" | "arrowIn" | "arrowInCircle" | "arrowInSquare" | "arrowLeft" | "arrowLeftCircle" | "arrowOut" | "arrowOutCircle" | "arrowOutSquare" | "arrowRight" | "arrowRightCircle" | "arrowUp" | "arrowUpCircle" | "arrowUpLeft" | "arrowUpRight" | "atSign" | "barChart" | "barChart2" | "barChart3" | "barChart4" | "bell" | "bluetooth" | "bookmark" | "calendar" | "camera" | "cast" | "check" | "checkCircle" | "checkSquare" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronsDown" | "chevronsLeft" | "chevronsRight" | "chevronsUp" | "circle" | "clipboard" | "clock" | "command" | "compass" | "cornerDownLeft" | "cornerDownRight" | "cornerLeftDown" | "cornerLeftUp" | "cornerRightDown" | "cornerRightUp" | "cornerUpLeft" | "cornerUpRight" | "cpu" | "creditCard" | "database" | "disc" | "dollarSign" | "downloadCloud" | "edit2" | "edit3" | "expand" | "externalLink" | "eye" | "eyeOff" | "facebook" | "fastForward" | "file" | "fileMinus" | "fileMinus2" | "filePlus" | "filePlus2" | "fileText" | "fileX" | "fileX2" | "film" | "flag" | "folder" | "folderMinus" | "folderMinus2" | "folderPlus" | "folderPlus2" | "folderX" | "folderX2" | "grid" | "hardDrive" | "hash" | "headphones" | "heart" | "helpCircle" | "hexagon" | "home" | "home2" | "image" | "inbox" | "italic" | "layout" | "layout2" | "layout3" | "layout4" | "layout5" | "layout6" | "lineChart" | "lineChart2" | "list" | "loader" | "lock" | "mail" | "mapMarker1" | "mapMarker2" | "mapMarker3" | "maximize" | "maximize2" | "menu" | "messageCircle" | "messageSquare" | "mic" | "minimize" | "minimize3" | "minus" | "minusCircle" | "minusSquare" | "monitor" | "moon" | "moreHorizontal" | "moreVertical" | "move" | "music" | "octagon" | "paperclip" | "pause" | "pauseCircle" | "percent" | "phone" | "pieChart" | "pieChart2" | "pieChart3" | "pieChart4" | "pieChart5" | "play" | "playCircle" | "plus" | "plusCircle" | "plusSquare" | "power" | "printer" | "radio" | "refreshCcw" | "refreshCw" | "rewind" | "rotateLeft" | "rotateRight" | "rss" | "scissors" | "server" | "settings" | "share" | "shoppingBag" | "shoppingCart" | "shuffle" | "skipBack" | "skipForward" | "slash" | "sliders" | "smartphone" | "speaker" | "square" | "star" | "stopCircle" | "strikethrough" | "sun" | "table" | "table2" | "tag" | "thumbsDown" | "thumbsUp" | "trash" | "trendingDown" | "trendingUp" | "triangle" | "tv" | "twitter" | "type" | "underline" | "unlock" | "uploadCloud" | "user" | "userCheck" | "userCircle" | "userMinus" | "userPlus" | "userX" | "users" | "video" | "videoOff" | "volume" | "volume1" | "volume2" | "volumeX" | "watch" | "wifi" | "x" | "xCircle" | "xSquare" | "zoomIn" | "zoomOut")[];
|
|
4221
4420
|
type IconOptions = {
|
|
4222
4421
|
name: IconName;
|
|
4223
4422
|
size?: IconSize;
|
|
@@ -4276,6 +4475,7 @@ interface AvatarOptions {
|
|
|
4276
4475
|
iconName?: IconName;
|
|
4277
4476
|
decorative?: boolean;
|
|
4278
4477
|
ariaLabel?: string;
|
|
4478
|
+
label?: string;
|
|
4279
4479
|
}
|
|
4280
4480
|
interface AvatarA11yProps {
|
|
4281
4481
|
role?: "img";
|
|
@@ -4350,23 +4550,232 @@ interface DialogA11yProps {
|
|
|
4350
4550
|
role: "dialog";
|
|
4351
4551
|
ariaModal?: true;
|
|
4352
4552
|
ariaLabel?: string;
|
|
4353
|
-
ariaLabelledBy?: string;
|
|
4354
|
-
ariaDescribedBy?: string;
|
|
4553
|
+
ariaLabelledBy?: string;
|
|
4554
|
+
ariaDescribedBy?: string;
|
|
4555
|
+
}
|
|
4556
|
+
interface DialogRenderKit {
|
|
4557
|
+
tag: "section";
|
|
4558
|
+
className: string;
|
|
4559
|
+
vars: Record<string, string>;
|
|
4560
|
+
size: DialogSize;
|
|
4561
|
+
showFooter: boolean;
|
|
4562
|
+
showCloseButton: boolean;
|
|
4563
|
+
a11y: DialogA11yProps;
|
|
4564
|
+
dataAttributes: Record<string, string | boolean | undefined>;
|
|
4565
|
+
}
|
|
4566
|
+
|
|
4567
|
+
declare function createDialogRecipe(opts?: DialogOptions): DialogRenderKit;
|
|
4568
|
+
|
|
4569
|
+
declare function resolveDialogA11y(opts: DialogOptions): DialogA11yProps;
|
|
4570
|
+
|
|
4571
|
+
/**
|
|
4572
|
+
* Core types for Drawer.
|
|
4573
|
+
* Core owns the behavior contract; adapters own rendering and lifecycle.
|
|
4574
|
+
*/
|
|
4575
|
+
type DrawerSize = "small" | "medium" | "large";
|
|
4576
|
+
type DrawerPlacement = "left" | "right";
|
|
4577
|
+
interface DrawerOptions {
|
|
4578
|
+
size?: DrawerSize;
|
|
4579
|
+
placement?: DrawerPlacement;
|
|
4580
|
+
showFooter?: boolean;
|
|
4581
|
+
dismissible?: boolean;
|
|
4582
|
+
modal?: boolean;
|
|
4583
|
+
showScrim?: boolean;
|
|
4584
|
+
ariaLabel?: string;
|
|
4585
|
+
ariaLabelledBy?: string;
|
|
4586
|
+
ariaDescribedBy?: string;
|
|
4587
|
+
dataAttributes?: Record<string, string | boolean | undefined>;
|
|
4588
|
+
}
|
|
4589
|
+
interface DrawerA11yProps {
|
|
4590
|
+
role: "dialog";
|
|
4591
|
+
ariaModal?: true;
|
|
4592
|
+
ariaLabel?: string;
|
|
4593
|
+
ariaLabelledBy?: string;
|
|
4594
|
+
ariaDescribedBy?: string;
|
|
4595
|
+
}
|
|
4596
|
+
interface DrawerPanelRenderKit {
|
|
4597
|
+
tag: "div";
|
|
4598
|
+
className: string;
|
|
4599
|
+
vars: Record<string, string>;
|
|
4600
|
+
a11y: DrawerA11yProps;
|
|
4601
|
+
dataAttributes: Record<string, string | boolean | undefined>;
|
|
4602
|
+
}
|
|
4603
|
+
interface DrawerScrimRenderKit {
|
|
4604
|
+
tag: "div";
|
|
4605
|
+
className: string;
|
|
4606
|
+
vars: Record<string, string>;
|
|
4607
|
+
dataAttributes: Record<string, string | boolean | undefined>;
|
|
4608
|
+
}
|
|
4609
|
+
interface DrawerRenderKit {
|
|
4610
|
+
tag: "div";
|
|
4611
|
+
className: string;
|
|
4612
|
+
vars: Record<string, string>;
|
|
4613
|
+
size: DrawerSize;
|
|
4614
|
+
placement: DrawerPlacement;
|
|
4615
|
+
showFooter: boolean;
|
|
4616
|
+
showCloseButton: boolean;
|
|
4617
|
+
showScrim: boolean;
|
|
4618
|
+
panel: DrawerPanelRenderKit;
|
|
4619
|
+
scrim: DrawerScrimRenderKit;
|
|
4620
|
+
dataAttributes: Record<string, string | boolean | undefined>;
|
|
4621
|
+
}
|
|
4622
|
+
|
|
4623
|
+
declare function createDrawerRecipe(opts?: DrawerOptions): DrawerRenderKit;
|
|
4624
|
+
|
|
4625
|
+
declare function resolveDrawerA11y(opts: DrawerOptions): DrawerA11yProps;
|
|
4626
|
+
|
|
4627
|
+
type ContextMenuItemKind = "item" | "divider";
|
|
4628
|
+
interface ContextMenuActionItem {
|
|
4629
|
+
kind?: "item";
|
|
4630
|
+
value: string;
|
|
4631
|
+
label: string;
|
|
4632
|
+
icon?: IconName;
|
|
4633
|
+
disabled?: boolean;
|
|
4634
|
+
destructive?: boolean;
|
|
4635
|
+
dataAttributes?: Record<string, string | boolean | undefined>;
|
|
4636
|
+
}
|
|
4637
|
+
interface ContextMenuDividerItem {
|
|
4638
|
+
kind: "divider";
|
|
4639
|
+
id?: string;
|
|
4640
|
+
dataAttributes?: Record<string, string | boolean | undefined>;
|
|
4641
|
+
}
|
|
4642
|
+
type ContextMenuEntry = ContextMenuActionItem | ContextMenuDividerItem;
|
|
4643
|
+
interface ContextMenuOptions {
|
|
4644
|
+
items?: readonly ContextMenuEntry[];
|
|
4645
|
+
ariaLabel?: string;
|
|
4646
|
+
dataAttributes?: Record<string, string | boolean | undefined>;
|
|
4647
|
+
}
|
|
4648
|
+
interface ContextMenuA11yProps {
|
|
4649
|
+
role: "menu";
|
|
4650
|
+
ariaLabel: string;
|
|
4651
|
+
}
|
|
4652
|
+
interface ContextMenuItemA11yProps {
|
|
4653
|
+
role: "menuitem";
|
|
4654
|
+
type: "button";
|
|
4655
|
+
disabled?: boolean;
|
|
4656
|
+
ariaDisabled?: "true";
|
|
4657
|
+
}
|
|
4658
|
+
interface ContextMenuDividerA11yProps {
|
|
4659
|
+
role: "separator";
|
|
4660
|
+
ariaOrientation: "horizontal";
|
|
4661
|
+
}
|
|
4662
|
+
interface ContextMenuBaseRenderKit {
|
|
4663
|
+
key: string;
|
|
4664
|
+
className: string;
|
|
4665
|
+
vars: Record<string, string>;
|
|
4666
|
+
dataAttributes: Record<string, string | boolean | undefined>;
|
|
4667
|
+
}
|
|
4668
|
+
interface ContextMenuActionItemRenderKit extends ContextMenuBaseRenderKit {
|
|
4669
|
+
kind: "item";
|
|
4670
|
+
item: ContextMenuActionItem;
|
|
4671
|
+
a11y: ContextMenuItemA11yProps;
|
|
4672
|
+
label: string;
|
|
4673
|
+
value: string;
|
|
4674
|
+
icon?: IconName;
|
|
4675
|
+
}
|
|
4676
|
+
interface ContextMenuDividerRenderKit extends ContextMenuBaseRenderKit {
|
|
4677
|
+
kind: "divider";
|
|
4678
|
+
item: ContextMenuDividerItem;
|
|
4679
|
+
a11y: ContextMenuDividerA11yProps;
|
|
4680
|
+
}
|
|
4681
|
+
type ContextMenuEntryRenderKit = ContextMenuActionItemRenderKit | ContextMenuDividerRenderKit;
|
|
4682
|
+
interface ContextMenuRenderKit {
|
|
4683
|
+
tag: "div";
|
|
4684
|
+
className: string;
|
|
4685
|
+
vars: Record<string, string>;
|
|
4686
|
+
a11y: ContextMenuA11yProps;
|
|
4687
|
+
items: ContextMenuEntryRenderKit[];
|
|
4688
|
+
dataAttributes: Record<string, string | boolean | undefined>;
|
|
4689
|
+
}
|
|
4690
|
+
|
|
4691
|
+
declare function createContextMenuRecipe(options?: ContextMenuOptions): ContextMenuRenderKit;
|
|
4692
|
+
|
|
4693
|
+
declare function resolveContextMenuA11y(options?: ContextMenuOptions): ContextMenuA11yProps;
|
|
4694
|
+
declare function resolveContextMenuItemA11y(disabled?: boolean): ContextMenuItemA11yProps;
|
|
4695
|
+
declare function resolveContextMenuDividerA11y(): ContextMenuDividerA11yProps;
|
|
4696
|
+
|
|
4697
|
+
interface BreadcrumbItem {
|
|
4698
|
+
id?: string;
|
|
4699
|
+
value?: string;
|
|
4700
|
+
label: string;
|
|
4701
|
+
href?: string;
|
|
4702
|
+
current?: boolean;
|
|
4703
|
+
ariaLabel?: string;
|
|
4704
|
+
dataAttributes?: Record<string, string | boolean | undefined>;
|
|
4705
|
+
}
|
|
4706
|
+
interface BreadcrumbOptions {
|
|
4707
|
+
items?: readonly BreadcrumbItem[];
|
|
4708
|
+
ariaLabel?: string;
|
|
4709
|
+
showHome?: boolean;
|
|
4710
|
+
homeHref?: string;
|
|
4711
|
+
homeLabel?: string;
|
|
4712
|
+
dataAttributes?: Record<string, string | boolean | undefined>;
|
|
4713
|
+
}
|
|
4714
|
+
interface BreadcrumbA11yProps {
|
|
4715
|
+
ariaLabel: string;
|
|
4716
|
+
}
|
|
4717
|
+
interface BreadcrumbListA11yProps {
|
|
4718
|
+
role: "list";
|
|
4719
|
+
}
|
|
4720
|
+
interface BreadcrumbSeparatorA11yProps {
|
|
4721
|
+
ariaHidden: true;
|
|
4722
|
+
}
|
|
4723
|
+
interface BreadcrumbItemA11yProps {
|
|
4724
|
+
ariaCurrent?: "page";
|
|
4725
|
+
ariaLabel?: string;
|
|
4355
4726
|
}
|
|
4356
|
-
interface
|
|
4357
|
-
|
|
4727
|
+
interface BreadcrumbHomeA11yProps {
|
|
4728
|
+
ariaLabel: string;
|
|
4729
|
+
}
|
|
4730
|
+
interface BreadcrumbBaseItemRenderKit {
|
|
4731
|
+
key: string;
|
|
4732
|
+
label: string;
|
|
4733
|
+
value?: string;
|
|
4734
|
+
href?: string;
|
|
4735
|
+
current: boolean;
|
|
4358
4736
|
className: string;
|
|
4737
|
+
actionClassName: string;
|
|
4359
4738
|
vars: Record<string, string>;
|
|
4360
|
-
|
|
4361
|
-
|
|
4362
|
-
|
|
4363
|
-
|
|
4739
|
+
dataAttributes: Record<string, string | boolean | undefined>;
|
|
4740
|
+
}
|
|
4741
|
+
interface BreadcrumbHomeRenderKit extends BreadcrumbBaseItemRenderKit {
|
|
4742
|
+
kind: "home";
|
|
4743
|
+
a11y: BreadcrumbHomeA11yProps;
|
|
4744
|
+
}
|
|
4745
|
+
interface BreadcrumbItemRenderKit extends BreadcrumbBaseItemRenderKit {
|
|
4746
|
+
kind: "item";
|
|
4747
|
+
item: BreadcrumbItem;
|
|
4748
|
+
a11y: BreadcrumbItemA11yProps;
|
|
4749
|
+
}
|
|
4750
|
+
type BreadcrumbEntryRenderKit = BreadcrumbHomeRenderKit | BreadcrumbItemRenderKit;
|
|
4751
|
+
interface BreadcrumbRenderKit {
|
|
4752
|
+
tag: "nav";
|
|
4753
|
+
className: string;
|
|
4754
|
+
vars: Record<string, string>;
|
|
4755
|
+
a11y: BreadcrumbA11yProps;
|
|
4756
|
+
list: {
|
|
4757
|
+
tag: "ol";
|
|
4758
|
+
className: string;
|
|
4759
|
+
vars: Record<string, string>;
|
|
4760
|
+
a11y: BreadcrumbListA11yProps;
|
|
4761
|
+
};
|
|
4762
|
+
separator: {
|
|
4763
|
+
tag: "span";
|
|
4764
|
+
className: string;
|
|
4765
|
+
vars: Record<string, string>;
|
|
4766
|
+
a11y: BreadcrumbSeparatorA11yProps;
|
|
4767
|
+
};
|
|
4768
|
+
items: BreadcrumbEntryRenderKit[];
|
|
4364
4769
|
dataAttributes: Record<string, string | boolean | undefined>;
|
|
4365
4770
|
}
|
|
4366
4771
|
|
|
4367
|
-
declare function
|
|
4772
|
+
declare function createBreadcrumbRecipe(options?: BreadcrumbOptions): BreadcrumbRenderKit;
|
|
4368
4773
|
|
|
4369
|
-
declare function
|
|
4774
|
+
declare function resolveBreadcrumbA11y(options?: BreadcrumbOptions): BreadcrumbA11yProps;
|
|
4775
|
+
declare function resolveBreadcrumbListA11y(): BreadcrumbListA11yProps;
|
|
4776
|
+
declare function resolveBreadcrumbSeparatorA11y(): BreadcrumbSeparatorA11yProps;
|
|
4777
|
+
declare function resolveBreadcrumbHomeA11y(homeLabel: string): BreadcrumbHomeA11yProps;
|
|
4778
|
+
declare function resolveBreadcrumbItemA11y(item: BreadcrumbItem, current: boolean): BreadcrumbItemA11yProps;
|
|
4370
4779
|
|
|
4371
4780
|
/**
|
|
4372
4781
|
* Core types for Toast.
|
|
@@ -4454,6 +4863,7 @@ interface BadgeOptions {
|
|
|
4454
4863
|
variant?: BadgeVariant;
|
|
4455
4864
|
/** For numeric/icon-only badges without visible text context */
|
|
4456
4865
|
ariaLabel?: string;
|
|
4866
|
+
label?: string;
|
|
4457
4867
|
}
|
|
4458
4868
|
interface BadgeA11yProps {
|
|
4459
4869
|
ariaLabel?: string;
|
|
@@ -4476,6 +4886,84 @@ declare function createBadgeRecipe(opts: BadgeOptions): BadgeRenderKit;
|
|
|
4476
4886
|
|
|
4477
4887
|
declare function resolveBadgeA11y(opts: BadgeOptions): BadgeA11yProps;
|
|
4478
4888
|
|
|
4889
|
+
/**
|
|
4890
|
+
* Core types for Banner.
|
|
4891
|
+
* Figma: .figma/marwes/components/banner.json
|
|
4892
|
+
*
|
|
4893
|
+
* A single token-driven component. Color → Banner states.
|
|
4894
|
+
* Toggle: Show icon / Show CTA / Show Close.
|
|
4895
|
+
*/
|
|
4896
|
+
/** Banner visual variant / intent. */
|
|
4897
|
+
declare const BannerVariant: {
|
|
4898
|
+
readonly neutral: "neutral";
|
|
4899
|
+
readonly info: "info";
|
|
4900
|
+
readonly success: "success";
|
|
4901
|
+
readonly warning: "warning";
|
|
4902
|
+
readonly error: "error";
|
|
4903
|
+
};
|
|
4904
|
+
type BannerVariant = (typeof BannerVariant)[keyof typeof BannerVariant];
|
|
4905
|
+
interface BannerOptions {
|
|
4906
|
+
/** Visual intent of the banner. Defaults to "neutral". */
|
|
4907
|
+
variant?: BannerVariant;
|
|
4908
|
+
/** Whether to show the leading icon. Defaults to true. */
|
|
4909
|
+
showIcon?: boolean;
|
|
4910
|
+
/** Whether to show the CTA action area. Defaults to false. */
|
|
4911
|
+
showAction?: boolean;
|
|
4912
|
+
/** Whether to show the dismiss/close button. Defaults to true. */
|
|
4913
|
+
dismissible?: boolean;
|
|
4914
|
+
/** Accessible label for the banner region. */
|
|
4915
|
+
ariaLabel?: string;
|
|
4916
|
+
}
|
|
4917
|
+
interface BannerA11yProps {
|
|
4918
|
+
role: "status" | "alert";
|
|
4919
|
+
ariaLabel?: string | undefined;
|
|
4920
|
+
ariaLive: "polite" | "assertive";
|
|
4921
|
+
}
|
|
4922
|
+
interface BannerRenderKit {
|
|
4923
|
+
root: {
|
|
4924
|
+
className: string;
|
|
4925
|
+
a11y: BannerA11yProps;
|
|
4926
|
+
dataAttributes: Record<string, string>;
|
|
4927
|
+
};
|
|
4928
|
+
content: {
|
|
4929
|
+
className: string;
|
|
4930
|
+
};
|
|
4931
|
+
icon: {
|
|
4932
|
+
className: string;
|
|
4933
|
+
visible: boolean;
|
|
4934
|
+
};
|
|
4935
|
+
message: {
|
|
4936
|
+
className: string;
|
|
4937
|
+
};
|
|
4938
|
+
action: {
|
|
4939
|
+
className: string;
|
|
4940
|
+
visible: boolean;
|
|
4941
|
+
};
|
|
4942
|
+
dismiss: {
|
|
4943
|
+
className: string;
|
|
4944
|
+
visible: boolean;
|
|
4945
|
+
ariaLabel: string;
|
|
4946
|
+
};
|
|
4947
|
+
}
|
|
4948
|
+
|
|
4949
|
+
/**
|
|
4950
|
+
* Banner core recipe.
|
|
4951
|
+
* Returns a render kit consumed by framework adapters.
|
|
4952
|
+
*
|
|
4953
|
+
* Figma reference:
|
|
4954
|
+
* - .figma/marwes/components/banner.json
|
|
4955
|
+
* - .figma/marwes/pages/-banner/-banner_1593-5094.json
|
|
4956
|
+
*/
|
|
4957
|
+
|
|
4958
|
+
declare function createBannerRecipe(opts: BannerOptions): BannerRenderKit;
|
|
4959
|
+
|
|
4960
|
+
/**
|
|
4961
|
+
* Resolve a11y props for Banner.
|
|
4962
|
+
* Error/warning variants use role="alert" with assertive live region;
|
|
4963
|
+
* info/success/neutral use role="status" with polite live region.
|
|
4964
|
+
*/
|
|
4965
|
+
declare function resolveBannerA11y(opts: BannerOptions): BannerA11yProps;
|
|
4966
|
+
|
|
4479
4967
|
declare const SpinnerVariants: {
|
|
4480
4968
|
readonly classic: "classic";
|
|
4481
4969
|
readonly ring: "ring";
|
|
@@ -4525,6 +5013,7 @@ interface SpinnerOptions {
|
|
|
4525
5013
|
* Accessible name when the spinner should announce loading state on its own.
|
|
4526
5014
|
*/
|
|
4527
5015
|
ariaLabel?: string;
|
|
5016
|
+
label?: string;
|
|
4528
5017
|
id?: string;
|
|
4529
5018
|
}
|
|
4530
5019
|
interface SpinnerA11yProps {
|
|
@@ -4578,6 +5067,7 @@ type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
|
|
|
4578
5067
|
* @property neutral - Low-chroma outlined buttons for neutral utility actions.
|
|
4579
5068
|
* @property text - Minimal text-like buttons for tertiary or inline actions.
|
|
4580
5069
|
* @property success - Positive emphasis buttons for confirm-style actions.
|
|
5070
|
+
* @property danger - Destructive emphasis buttons for irreversible actions.
|
|
4581
5071
|
*
|
|
4582
5072
|
* @example
|
|
4583
5073
|
* ```tsx
|
|
@@ -4593,6 +5083,7 @@ declare const ButtonVariant: {
|
|
|
4593
5083
|
readonly neutral: "neutral";
|
|
4594
5084
|
readonly text: "text";
|
|
4595
5085
|
readonly success: "success";
|
|
5086
|
+
readonly danger: "danger";
|
|
4596
5087
|
};
|
|
4597
5088
|
type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];
|
|
4598
5089
|
/**
|
|
@@ -4658,7 +5149,11 @@ type ButtonOptions = {
|
|
|
4658
5149
|
error?: boolean;
|
|
4659
5150
|
toggle?: boolean;
|
|
4660
5151
|
pressed?: boolean;
|
|
5152
|
+
/** Accessible name. Use `label` as a consumer-friendly alias for standalone/icon-only buttons. */
|
|
4661
5153
|
ariaLabel?: string;
|
|
5154
|
+
/** ID of an element whose text labels the button. Wins over `ariaLabel`/`label` if set. */
|
|
5155
|
+
ariaLabelledBy?: string;
|
|
5156
|
+
label?: string;
|
|
4662
5157
|
hasVisibleText?: boolean;
|
|
4663
5158
|
ariaExpanded?: boolean;
|
|
4664
5159
|
ariaControls?: string;
|
|
@@ -4672,6 +5167,7 @@ type ButtonOptions = {
|
|
|
4672
5167
|
};
|
|
4673
5168
|
type ButtonA11yProps = {
|
|
4674
5169
|
ariaLabel?: string;
|
|
5170
|
+
ariaLabelledBy?: string;
|
|
4675
5171
|
ariaBusy?: boolean;
|
|
4676
5172
|
ariaDisabled?: boolean;
|
|
4677
5173
|
ariaPressed?: boolean;
|
|
@@ -4712,6 +5208,7 @@ interface RadioOptions {
|
|
|
4712
5208
|
name?: string;
|
|
4713
5209
|
value?: string;
|
|
4714
5210
|
ariaLabel?: string;
|
|
5211
|
+
label?: string;
|
|
4715
5212
|
ariaLabelledBy?: string;
|
|
4716
5213
|
ariaDescribedBy?: string;
|
|
4717
5214
|
}
|
|
@@ -4762,7 +5259,8 @@ interface SwitchOptions {
|
|
|
4762
5259
|
disabled?: boolean;
|
|
4763
5260
|
/** Required when no visible label text is provided */
|
|
4764
5261
|
ariaLabel?: string;
|
|
4765
|
-
|
|
5262
|
+
label?: string;
|
|
5263
|
+
ariaLabelledBy?: string;
|
|
4766
5264
|
ariaDescribedBy?: string;
|
|
4767
5265
|
}
|
|
4768
5266
|
interface SwitchA11yProps {
|
|
@@ -4770,7 +5268,7 @@ interface SwitchA11yProps {
|
|
|
4770
5268
|
ariaChecked: boolean;
|
|
4771
5269
|
ariaDisabled?: true;
|
|
4772
5270
|
ariaLabel?: string;
|
|
4773
|
-
|
|
5271
|
+
ariaLabelledBy?: string;
|
|
4774
5272
|
ariaDescribedBy?: string;
|
|
4775
5273
|
}
|
|
4776
5274
|
interface SwitchRenderKit {
|
|
@@ -4805,6 +5303,7 @@ interface SliderOptions {
|
|
|
4805
5303
|
showTouchArea?: boolean;
|
|
4806
5304
|
orientation?: SliderOrientation;
|
|
4807
5305
|
ariaLabel?: string;
|
|
5306
|
+
label?: string;
|
|
4808
5307
|
ariaLabelledBy?: string;
|
|
4809
5308
|
ariaDescribedBy?: string;
|
|
4810
5309
|
ariaValueText?: string;
|
|
@@ -4879,6 +5378,7 @@ type CheckboxProps = {
|
|
|
4879
5378
|
value?: string;
|
|
4880
5379
|
/** Connects to external label/description elements. */
|
|
4881
5380
|
ariaLabel?: string;
|
|
5381
|
+
label?: string;
|
|
4882
5382
|
ariaLabelledBy?: string;
|
|
4883
5383
|
ariaDescribedBy?: string;
|
|
4884
5384
|
};
|
|
@@ -5036,6 +5536,89 @@ declare function resolveSkeletonA11y(options?: SkeletonOptions): SkeletonA11yPro
|
|
|
5036
5536
|
|
|
5037
5537
|
declare function createSkeletonRecipe(options?: SkeletonOptions): SkeletonRenderKit;
|
|
5038
5538
|
|
|
5539
|
+
declare const ProgressBarSize: {
|
|
5540
|
+
readonly small: "small";
|
|
5541
|
+
readonly default: "default";
|
|
5542
|
+
};
|
|
5543
|
+
type ProgressBarSize = (typeof ProgressBarSize)[keyof typeof ProgressBarSize];
|
|
5544
|
+
declare const progressBarSizes: ProgressBarSize[];
|
|
5545
|
+
declare const ProgressBarState: {
|
|
5546
|
+
readonly default: "default";
|
|
5547
|
+
readonly hover: "hover";
|
|
5548
|
+
readonly pressed: "pressed";
|
|
5549
|
+
readonly focus: "focus";
|
|
5550
|
+
};
|
|
5551
|
+
type ProgressBarState = (typeof ProgressBarState)[keyof typeof ProgressBarState];
|
|
5552
|
+
declare const progressBarStates: ProgressBarState[];
|
|
5553
|
+
interface ProgressBarOptions {
|
|
5554
|
+
id?: string;
|
|
5555
|
+
label?: string;
|
|
5556
|
+
value?: number;
|
|
5557
|
+
min?: number;
|
|
5558
|
+
max?: number;
|
|
5559
|
+
size?: ProgressBarSize;
|
|
5560
|
+
state?: ProgressBarState;
|
|
5561
|
+
disabled?: boolean;
|
|
5562
|
+
showLabel?: boolean;
|
|
5563
|
+
showPercentage?: boolean;
|
|
5564
|
+
valueLabel?: string;
|
|
5565
|
+
ariaLabel?: string;
|
|
5566
|
+
ariaLabelledBy?: string;
|
|
5567
|
+
ariaDescribedBy?: string;
|
|
5568
|
+
}
|
|
5569
|
+
interface ProgressBarA11yProps {
|
|
5570
|
+
id?: string;
|
|
5571
|
+
role: "progressbar";
|
|
5572
|
+
ariaValueMin: number;
|
|
5573
|
+
ariaValueMax: number;
|
|
5574
|
+
ariaValueNow: number;
|
|
5575
|
+
ariaValueText?: string;
|
|
5576
|
+
ariaLabel?: string;
|
|
5577
|
+
ariaLabelledBy?: string;
|
|
5578
|
+
ariaDescribedBy?: string;
|
|
5579
|
+
ariaDisabled?: true;
|
|
5580
|
+
}
|
|
5581
|
+
interface ProgressBarDataAttributes {
|
|
5582
|
+
"data-component": "progress-bar";
|
|
5583
|
+
"data-size": ProgressBarSize;
|
|
5584
|
+
"data-state": ProgressBarState;
|
|
5585
|
+
"data-disabled"?: "true";
|
|
5586
|
+
}
|
|
5587
|
+
interface ProgressBarRenderKit {
|
|
5588
|
+
tag: "div";
|
|
5589
|
+
className: string;
|
|
5590
|
+
trackClassName: string;
|
|
5591
|
+
fillClassName: string;
|
|
5592
|
+
labelClassName: string;
|
|
5593
|
+
percentageClassName: string;
|
|
5594
|
+
labelId?: string;
|
|
5595
|
+
vars: CssVars;
|
|
5596
|
+
a11y: ProgressBarA11yProps;
|
|
5597
|
+
dataAttributes: ProgressBarDataAttributes;
|
|
5598
|
+
label: string;
|
|
5599
|
+
percentageLabel: string;
|
|
5600
|
+
value: number;
|
|
5601
|
+
min: number;
|
|
5602
|
+
max: number;
|
|
5603
|
+
percentage: number;
|
|
5604
|
+
size: ProgressBarSize;
|
|
5605
|
+
state: ProgressBarState;
|
|
5606
|
+
showLabel: boolean;
|
|
5607
|
+
showPercentage: boolean;
|
|
5608
|
+
}
|
|
5609
|
+
|
|
5610
|
+
declare const DEFAULT_PROGRESS_BAR_MIN = 0;
|
|
5611
|
+
declare const DEFAULT_PROGRESS_BAR_MAX = 100;
|
|
5612
|
+
declare const DEFAULT_PROGRESS_BAR_LABEL = "Progress";
|
|
5613
|
+
declare function resolveProgressBarBounds(options: ProgressBarOptions): {
|
|
5614
|
+
min: number;
|
|
5615
|
+
max: number;
|
|
5616
|
+
};
|
|
5617
|
+
declare function clampProgressBarValue(value: number, min: number, max: number): number;
|
|
5618
|
+
declare function resolveProgressBarA11y(options: ProgressBarOptions, value: number): ProgressBarA11yProps;
|
|
5619
|
+
|
|
5620
|
+
declare function createProgressBarRecipe(options?: ProgressBarOptions): ProgressBarRenderKit;
|
|
5621
|
+
|
|
5039
5622
|
type StatTileTone = "neutral" | "brand" | "success" | "warning" | "danger";
|
|
5040
5623
|
type StatTileTrendDirection = "positive" | "negative";
|
|
5041
5624
|
type StatTileDataAttributes = Record<string, string>;
|
|
@@ -5091,9 +5674,21 @@ interface DatePickerOptions {
|
|
|
5091
5674
|
nextYearLabel?: string;
|
|
5092
5675
|
cancelLabel?: string;
|
|
5093
5676
|
applyLabel?: string;
|
|
5677
|
+
/** Accessible name for the calendar landmark. Alias for `calendarLabel`. */
|
|
5678
|
+
ariaLabel?: string;
|
|
5679
|
+
/** ID of an element whose text labels the calendar landmark. Wins over `ariaLabel`/`calendarLabel`. */
|
|
5680
|
+
ariaLabelledBy?: string;
|
|
5681
|
+
/** ID(s) of elements that describe the calendar (helper text, errors). */
|
|
5682
|
+
ariaDescribedBy?: string;
|
|
5683
|
+
/** @deprecated Use `ariaLabel` instead. */
|
|
5094
5684
|
calendarLabel?: string;
|
|
5095
5685
|
dataAttributes?: Record<string, string>;
|
|
5096
5686
|
}
|
|
5687
|
+
interface DatePickerA11yProps {
|
|
5688
|
+
ariaLabel?: string;
|
|
5689
|
+
ariaLabelledBy?: string;
|
|
5690
|
+
ariaDescribedBy?: string;
|
|
5691
|
+
}
|
|
5097
5692
|
interface DatePickerDataAttributes extends Record<string, string> {
|
|
5098
5693
|
"data-component": "date-picker";
|
|
5099
5694
|
"data-device": DatePickerDevice;
|
|
@@ -5109,6 +5704,7 @@ interface DatePickerDayRenderKit {
|
|
|
5109
5704
|
interface DatePickerRenderKit {
|
|
5110
5705
|
className: string;
|
|
5111
5706
|
dataAttributes: DatePickerDataAttributes;
|
|
5707
|
+
a11y: DatePickerA11yProps;
|
|
5112
5708
|
monthLabel: string;
|
|
5113
5709
|
weekdayLabels: readonly string[];
|
|
5114
5710
|
weeks: readonly (readonly DatePickerDay[])[];
|
|
@@ -9043,7 +9639,11 @@ type InputOptions = {
|
|
|
9043
9639
|
tone?: InputTone;
|
|
9044
9640
|
invalid?: boolean;
|
|
9045
9641
|
describedBy?: string;
|
|
9642
|
+
/** Accessible name for standalone inputs. Field components should use visible `label`. */
|
|
9046
9643
|
ariaLabel?: string;
|
|
9644
|
+
/** ID of an element whose text labels the input. Wins over `ariaLabel` if both are set. */
|
|
9645
|
+
ariaLabelledBy?: string;
|
|
9646
|
+
label?: string;
|
|
9047
9647
|
};
|
|
9048
9648
|
type InputA11yProps = {
|
|
9049
9649
|
id?: string;
|
|
@@ -9056,6 +9656,7 @@ type InputA11yProps = {
|
|
|
9056
9656
|
autoComplete?: string;
|
|
9057
9657
|
placeholder?: string;
|
|
9058
9658
|
ariaLabel?: string;
|
|
9659
|
+
ariaLabelledBy?: string;
|
|
9059
9660
|
ariaInvalid?: true;
|
|
9060
9661
|
ariaDescribedBy?: string;
|
|
9061
9662
|
};
|
|
@@ -9081,6 +9682,9 @@ type InputOtpOptions = {
|
|
|
9081
9682
|
invalid?: boolean;
|
|
9082
9683
|
describedBy?: string;
|
|
9083
9684
|
ariaLabel?: string;
|
|
9685
|
+
label?: string;
|
|
9686
|
+
/** ID of an element whose text labels the OTP input. Wins over `ariaLabel` and `label` if set. */
|
|
9687
|
+
ariaLabelledBy?: string;
|
|
9084
9688
|
};
|
|
9085
9689
|
type InputOtpA11yProps = {
|
|
9086
9690
|
id?: string;
|
|
@@ -9093,6 +9697,7 @@ type InputOtpA11yProps = {
|
|
|
9093
9697
|
maxLength: number;
|
|
9094
9698
|
pattern: string;
|
|
9095
9699
|
ariaLabel?: string;
|
|
9700
|
+
ariaLabelledBy?: string;
|
|
9096
9701
|
ariaInvalid?: true;
|
|
9097
9702
|
ariaDescribedBy?: string;
|
|
9098
9703
|
};
|
|
@@ -9135,7 +9740,11 @@ type SelectOptions = {
|
|
|
9135
9740
|
appearance?: SelectAppearance;
|
|
9136
9741
|
invalid?: boolean;
|
|
9137
9742
|
describedBy?: string;
|
|
9743
|
+
/** Accessible name for standalone selects. SelectField should use visible `label`. */
|
|
9138
9744
|
ariaLabel?: string;
|
|
9745
|
+
/** ID of an element whose text labels the select. Wins over `ariaLabel` if both are set. */
|
|
9746
|
+
ariaLabelledBy?: string;
|
|
9747
|
+
label?: string;
|
|
9139
9748
|
};
|
|
9140
9749
|
type SelectA11yProps = {
|
|
9141
9750
|
id?: string;
|
|
@@ -9143,6 +9752,7 @@ type SelectA11yProps = {
|
|
|
9143
9752
|
disabled?: true;
|
|
9144
9753
|
required?: true;
|
|
9145
9754
|
ariaLabel?: string;
|
|
9755
|
+
ariaLabelledBy?: string;
|
|
9146
9756
|
ariaInvalid?: true;
|
|
9147
9757
|
ariaDescribedBy?: string;
|
|
9148
9758
|
};
|
|
@@ -9174,7 +9784,11 @@ type TextareaOptions = {
|
|
|
9174
9784
|
tone?: InputTone;
|
|
9175
9785
|
invalid?: boolean;
|
|
9176
9786
|
describedBy?: string;
|
|
9787
|
+
/** Accessible name for standalone textareas. TextareaField should use visible `label`. */
|
|
9177
9788
|
ariaLabel?: string;
|
|
9789
|
+
/** ID of an element whose text labels the textarea. Wins over `ariaLabel` if both are set. */
|
|
9790
|
+
ariaLabelledBy?: string;
|
|
9791
|
+
label?: string;
|
|
9178
9792
|
};
|
|
9179
9793
|
type TextareaA11yProps = {
|
|
9180
9794
|
id?: string;
|
|
@@ -9188,6 +9802,7 @@ type TextareaA11yProps = {
|
|
|
9188
9802
|
rows?: number;
|
|
9189
9803
|
cols?: number;
|
|
9190
9804
|
ariaLabel?: string;
|
|
9805
|
+
ariaLabelledBy?: string;
|
|
9191
9806
|
ariaInvalid?: true;
|
|
9192
9807
|
ariaDescribedBy?: string;
|
|
9193
9808
|
};
|
|
@@ -9214,7 +9829,9 @@ type RichTextOptions = {
|
|
|
9214
9829
|
invalid?: boolean;
|
|
9215
9830
|
describedBy?: string;
|
|
9216
9831
|
labelledBy?: string;
|
|
9832
|
+
/** Accessible name for standalone editors. RichTextField should use visible `label`. */
|
|
9217
9833
|
ariaLabel?: string;
|
|
9834
|
+
label?: string;
|
|
9218
9835
|
allowedFormats?: RichTextFormat[];
|
|
9219
9836
|
};
|
|
9220
9837
|
type RichTextA11yProps = {
|
|
@@ -9253,8 +9870,27 @@ declare function resolveRichTextAllowedFormats(allowedFormats: RichTextOptions["
|
|
|
9253
9870
|
* - Supports semantic level (h1/h2/h3) and visual size override.
|
|
9254
9871
|
*/
|
|
9255
9872
|
|
|
9256
|
-
/**
|
|
9873
|
+
/**
|
|
9874
|
+
* Heading levels styled by the design system.
|
|
9875
|
+
*
|
|
9876
|
+
* Marwes officially ships visual styling for H1-H3 only. The `Heading`
|
|
9877
|
+
* recipe and the `H1`/`H2`/`H3` adapters are scoped to this ladder.
|
|
9878
|
+
*
|
|
9879
|
+
* For semantic-only H4-H6 (deep section nesting, accessibility outlines),
|
|
9880
|
+
* see {@link SemanticHeadingLevel} and the `Text` component's `headingLevel`
|
|
9881
|
+
* prop — `<Text headingLevel={4} variant="..." />` renders an `<h4>` while
|
|
9882
|
+
* letting the consumer pick the visual variant.
|
|
9883
|
+
*/
|
|
9257
9884
|
type HeadingLevel = 1 | 2 | 3;
|
|
9885
|
+
/**
|
|
9886
|
+
* Every HTML heading level the design system acknowledges semantically.
|
|
9887
|
+
*
|
|
9888
|
+
* Wider than {@link HeadingLevel} (which is the styled subset). Use this
|
|
9889
|
+
* when typing a consumer-side wrapper that needs to accept all six rungs
|
|
9890
|
+
* of the HTML heading ladder — e.g. a `MyH4` wrapper built around
|
|
9891
|
+
* `<Text headingLevel={4} />`.
|
|
9892
|
+
*/
|
|
9893
|
+
type SemanticHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
9258
9894
|
/** Public props the adapter can pass into core. */
|
|
9259
9895
|
type HeadingOptions = {
|
|
9260
9896
|
/**
|
|
@@ -9352,6 +9988,54 @@ type ParagraphRenderKit = {
|
|
|
9352
9988
|
|
|
9353
9989
|
declare function paragraphRecipe(opts: ParagraphOptions, theme: ResolvedTheme): ParagraphRenderKit;
|
|
9354
9990
|
|
|
9991
|
+
/**
|
|
9992
|
+
* Core types for non-heading text typography.
|
|
9993
|
+
* - Use Text for display/label/caption/overline/micro styles that should not create heading hierarchy.
|
|
9994
|
+
*/
|
|
9995
|
+
|
|
9996
|
+
type TextAs = "span" | "p" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
9997
|
+
interface TextOptions {
|
|
9998
|
+
/**
|
|
9999
|
+
* Visual typography variant.
|
|
10000
|
+
* @default "caption"
|
|
10001
|
+
*/
|
|
10002
|
+
variant?: TextVariant;
|
|
10003
|
+
/**
|
|
10004
|
+
* Rendered HTML element.
|
|
10005
|
+
* @default "span"
|
|
10006
|
+
*/
|
|
10007
|
+
as?: TextAs;
|
|
10008
|
+
/**
|
|
10009
|
+
* Render as a heading element (h1–h6) while keeping the visual variant.
|
|
10010
|
+
* Wins over `as` when both are set. Use this to give the page outline
|
|
10011
|
+
* a semantic level without coupling it to the visual size. The dedicated
|
|
10012
|
+
* `Heading` component is preferred when the visual size IS a heading size;
|
|
10013
|
+
* use `headingLevel` on `Text` when the visual variant is display/overline/etc.
|
|
10014
|
+
*/
|
|
10015
|
+
headingLevel?: SemanticHeadingLevel;
|
|
10016
|
+
/**
|
|
10017
|
+
* Optional ID.
|
|
10018
|
+
*/
|
|
10019
|
+
id?: string;
|
|
10020
|
+
}
|
|
10021
|
+
interface TextA11y {
|
|
10022
|
+
id?: string;
|
|
10023
|
+
}
|
|
10024
|
+
interface TextRenderKit {
|
|
10025
|
+
tag: TextAs;
|
|
10026
|
+
className: string;
|
|
10027
|
+
vars: CssVars;
|
|
10028
|
+
a11y: TextA11y;
|
|
10029
|
+
}
|
|
10030
|
+
|
|
10031
|
+
/**
|
|
10032
|
+
* Text recipe: theme + options → render kit.
|
|
10033
|
+
* - Supports non-heading typography variants from the Figma type scale.
|
|
10034
|
+
* - No spacing/margin (user-controlled).
|
|
10035
|
+
*/
|
|
10036
|
+
|
|
10037
|
+
declare function textRecipe(opts: TextOptions, theme: ResolvedTheme): TextRenderKit;
|
|
10038
|
+
|
|
9355
10039
|
/**
|
|
9356
10040
|
* Core types for Tab.
|
|
9357
10041
|
* - Core never renders; it returns a render kit consumed by adapters (React/Vue).
|
|
@@ -9362,6 +10046,7 @@ interface TabOptions {
|
|
|
9362
10046
|
disabled?: boolean;
|
|
9363
10047
|
/** For icon-only tabs that have no visible label */
|
|
9364
10048
|
ariaLabel?: string;
|
|
10049
|
+
label?: string;
|
|
9365
10050
|
/** id of the associated tabpanel this tab controls */
|
|
9366
10051
|
ariaControls?: string;
|
|
9367
10052
|
}
|
|
@@ -9413,7 +10098,7 @@ declare function moveTabSelection(items: TabGroupItemState[], currentValue: stri
|
|
|
9413
10098
|
/**
|
|
9414
10099
|
* Core types for Spacing component.
|
|
9415
10100
|
* - Pure layout primitive that inserts vertical space between elements.
|
|
9416
|
-
* -
|
|
10101
|
+
* - 19 sizes mapped to the --mw-spacing-* token scale.
|
|
9417
10102
|
* - Renders as an aria-hidden div.
|
|
9418
10103
|
*/
|
|
9419
10104
|
|
|
@@ -9436,15 +10121,17 @@ declare function moveTabSelection(items: TabGroupItemState[], currentValue: stri
|
|
|
9436
10121
|
* ```
|
|
9437
10122
|
*
|
|
9438
10123
|
* Pixel scale:
|
|
9439
|
-
* sp-0→0 | sp-2→2 | sp-4→4 | sp-8→8 | sp-
|
|
9440
|
-
* sp-
|
|
9441
|
-
* sp-
|
|
10124
|
+
* sp-0→0 | sp-2→2 | sp-4→4 | sp-8→8 | sp-12→12 | sp-16→16
|
|
10125
|
+
* sp-24→24 | sp-32→32 | sp-40→40 | sp-48→48 | sp-56→56
|
|
10126
|
+
* sp-64→64 | sp-72→72 | sp-80→80 | sp-88→88 | sp-96→96
|
|
10127
|
+
* sp-104→104 | sp-112→112 | sp-120→120
|
|
9442
10128
|
*/
|
|
9443
10129
|
declare const Spacings: {
|
|
9444
10130
|
readonly sp0: "sp-0";
|
|
9445
10131
|
readonly sp2: "sp-2";
|
|
9446
10132
|
readonly sp4: "sp-4";
|
|
9447
10133
|
readonly sp8: "sp-8";
|
|
10134
|
+
readonly sp12: "sp-12";
|
|
9448
10135
|
readonly sp16: "sp-16";
|
|
9449
10136
|
readonly sp24: "sp-24";
|
|
9450
10137
|
readonly sp32: "sp-32";
|
|
@@ -9463,6 +10150,7 @@ declare const Spacings: {
|
|
|
9463
10150
|
readonly "sp-2": "sp-2";
|
|
9464
10151
|
readonly "sp-4": "sp-4";
|
|
9465
10152
|
readonly "sp-8": "sp-8";
|
|
10153
|
+
readonly "sp-12": "sp-12";
|
|
9466
10154
|
readonly "sp-16": "sp-16";
|
|
9467
10155
|
readonly "sp-24": "sp-24";
|
|
9468
10156
|
readonly "sp-32": "sp-32";
|
|
@@ -9535,4 +10223,264 @@ type SpacingRenderKit = {
|
|
|
9535
10223
|
|
|
9536
10224
|
declare function createSpacingRecipe(opts?: SpacingOptions): SpacingRenderKit;
|
|
9537
10225
|
|
|
9538
|
-
|
|
10226
|
+
/**
|
|
10227
|
+
* Core types for SegmentedControl.
|
|
10228
|
+
* Uses radiogroup semantics — single-select between options without panels.
|
|
10229
|
+
*/
|
|
10230
|
+
interface SegmentedControlItemState {
|
|
10231
|
+
value: string;
|
|
10232
|
+
disabled?: boolean;
|
|
10233
|
+
}
|
|
10234
|
+
interface SegmentedControlOptions {
|
|
10235
|
+
/** Selected value */
|
|
10236
|
+
value?: string | undefined;
|
|
10237
|
+
/** Whether the control is disabled */
|
|
10238
|
+
disabled?: boolean | undefined;
|
|
10239
|
+
/** Accessible label for the group */
|
|
10240
|
+
ariaLabel?: string | undefined;
|
|
10241
|
+
/** ID of an element whose text labels the group. Wins over `ariaLabel` if both are set. */
|
|
10242
|
+
ariaLabelledBy?: string | undefined;
|
|
10243
|
+
/** ID(s) of elements that describe the group (helper text, errors). */
|
|
10244
|
+
ariaDescribedBy?: string | undefined;
|
|
10245
|
+
label?: string | undefined;
|
|
10246
|
+
/** Visual variant */
|
|
10247
|
+
variant?: SegmentedControlVariant | undefined;
|
|
10248
|
+
/** Size variant */
|
|
10249
|
+
size?: SegmentedControlSize | undefined;
|
|
10250
|
+
/** Stretch the control to fill its container. Defaults to inline width. */
|
|
10251
|
+
fullWidth?: boolean | undefined;
|
|
10252
|
+
}
|
|
10253
|
+
type SegmentedControlVariant = "default" | "inverse" | "pill";
|
|
10254
|
+
type SegmentedControlSize = "sm" | "md";
|
|
10255
|
+
interface SegmentedControlItemOptions {
|
|
10256
|
+
value: string;
|
|
10257
|
+
selected?: boolean;
|
|
10258
|
+
disabled?: boolean | undefined;
|
|
10259
|
+
ariaLabel?: string | undefined;
|
|
10260
|
+
label?: string | undefined;
|
|
10261
|
+
iconOnly?: boolean | undefined;
|
|
10262
|
+
}
|
|
10263
|
+
interface SegmentedControlA11yProps {
|
|
10264
|
+
role: "radiogroup";
|
|
10265
|
+
ariaLabel?: string;
|
|
10266
|
+
ariaLabelledBy?: string;
|
|
10267
|
+
ariaDescribedBy?: string;
|
|
10268
|
+
ariaDisabled?: true;
|
|
10269
|
+
}
|
|
10270
|
+
interface SegmentedControlItemA11yProps {
|
|
10271
|
+
role: "radio";
|
|
10272
|
+
ariaChecked: boolean;
|
|
10273
|
+
ariaDisabled?: true;
|
|
10274
|
+
ariaLabel?: string;
|
|
10275
|
+
tabIndex: 0 | -1;
|
|
10276
|
+
}
|
|
10277
|
+
interface SegmentedControlRenderKit {
|
|
10278
|
+
tag: "div";
|
|
10279
|
+
className: string;
|
|
10280
|
+
vars: Record<string, string>;
|
|
10281
|
+
a11y: SegmentedControlA11yProps;
|
|
10282
|
+
}
|
|
10283
|
+
interface SegmentedControlItemRenderKit {
|
|
10284
|
+
tag: "button";
|
|
10285
|
+
className: string;
|
|
10286
|
+
vars: Record<string, string>;
|
|
10287
|
+
a11y: SegmentedControlItemA11yProps;
|
|
10288
|
+
}
|
|
10289
|
+
|
|
10290
|
+
/**
|
|
10291
|
+
* SegmentedControl core recipe:
|
|
10292
|
+
* - returns render kits for the track and items
|
|
10293
|
+
* - stable classnames, modifier classes, strict a11y
|
|
10294
|
+
*/
|
|
10295
|
+
|
|
10296
|
+
declare function createSegmentedControlRecipe(opts: SegmentedControlOptions): SegmentedControlRenderKit;
|
|
10297
|
+
declare function createSegmentedControlItemRecipe(opts: SegmentedControlItemOptions): SegmentedControlItemRenderKit;
|
|
10298
|
+
|
|
10299
|
+
type SegmentedControlNavigationDirection = "next" | "previous" | "start" | "end";
|
|
10300
|
+
declare function resolveSegmentedControlA11y(opts: SegmentedControlOptions): SegmentedControlA11yProps;
|
|
10301
|
+
declare function resolveSegmentedControlItemA11y(opts: SegmentedControlItemOptions): SegmentedControlItemA11yProps;
|
|
10302
|
+
declare function resolveSegmentedControlValue(items: SegmentedControlItemState[], requestedValue?: string): string | undefined;
|
|
10303
|
+
declare function moveSegmentedControlSelection(items: SegmentedControlItemState[], currentValue: string | undefined, direction: SegmentedControlNavigationDirection): string | undefined;
|
|
10304
|
+
|
|
10305
|
+
type PaginationControlDirection = "first" | "previous" | "next" | "last";
|
|
10306
|
+
type PaginationControlDisplay = "auto" | "label" | "icon";
|
|
10307
|
+
type PaginationResolvedControlDisplay = Exclude<PaginationControlDisplay, "auto">;
|
|
10308
|
+
type PaginationItemType = "page" | "start-ellipsis" | "end-ellipsis";
|
|
10309
|
+
type PaginationItem = {
|
|
10310
|
+
type: "page";
|
|
10311
|
+
page: number;
|
|
10312
|
+
key: string;
|
|
10313
|
+
selected: boolean;
|
|
10314
|
+
} | {
|
|
10315
|
+
type: "start-ellipsis" | "end-ellipsis";
|
|
10316
|
+
key: string;
|
|
10317
|
+
};
|
|
10318
|
+
interface PaginationItemAriaLabelOptions {
|
|
10319
|
+
type: PaginationItemType | PaginationControlDirection;
|
|
10320
|
+
page: number | null;
|
|
10321
|
+
selected: boolean;
|
|
10322
|
+
}
|
|
10323
|
+
type PaginationGetItemAriaLabel = (item: PaginationItemAriaLabelOptions) => string;
|
|
10324
|
+
interface PaginationOptions {
|
|
10325
|
+
page?: number;
|
|
10326
|
+
pageCount: number;
|
|
10327
|
+
siblingCount?: number;
|
|
10328
|
+
boundaryCount?: number;
|
|
10329
|
+
maxVisibleItems?: number;
|
|
10330
|
+
controlDisplay?: PaginationControlDisplay;
|
|
10331
|
+
showPrevNext?: boolean;
|
|
10332
|
+
showFirstLast?: boolean;
|
|
10333
|
+
disabled?: boolean;
|
|
10334
|
+
ariaLabel?: string;
|
|
10335
|
+
/** ID of an element whose text labels the pagination nav. Wins over `ariaLabel` if both are set. */
|
|
10336
|
+
ariaLabelledBy?: string;
|
|
10337
|
+
/** ID(s) of elements that describe the pagination (helper text, errors). */
|
|
10338
|
+
ariaDescribedBy?: string;
|
|
10339
|
+
firstLabel?: string;
|
|
10340
|
+
previousLabel?: string;
|
|
10341
|
+
nextLabel?: string;
|
|
10342
|
+
lastLabel?: string;
|
|
10343
|
+
getItemAriaLabel?: PaginationGetItemAriaLabel;
|
|
10344
|
+
}
|
|
10345
|
+
interface PaginationAdaptiveMaxVisibleItemsOptions {
|
|
10346
|
+
containerWidth: number;
|
|
10347
|
+
controlWidth?: number;
|
|
10348
|
+
controlCount?: number;
|
|
10349
|
+
itemSize?: number;
|
|
10350
|
+
itemGap?: number;
|
|
10351
|
+
sectionGap?: number;
|
|
10352
|
+
}
|
|
10353
|
+
interface PaginationAdaptiveProfileOptions extends PaginationReservedItemCountOptions {
|
|
10354
|
+
containerWidth: number;
|
|
10355
|
+
labelControlWidth?: number;
|
|
10356
|
+
iconControlWidth?: number;
|
|
10357
|
+
controlCount?: number;
|
|
10358
|
+
itemSize?: number;
|
|
10359
|
+
itemGap?: number;
|
|
10360
|
+
sectionGap?: number;
|
|
10361
|
+
controlDisplay?: PaginationControlDisplay;
|
|
10362
|
+
}
|
|
10363
|
+
interface PaginationAdaptiveProfile {
|
|
10364
|
+
controlDisplay: PaginationResolvedControlDisplay;
|
|
10365
|
+
maxVisibleItems: number | undefined;
|
|
10366
|
+
reservedItemCount: number;
|
|
10367
|
+
}
|
|
10368
|
+
interface PaginationReservedItemCountOptions {
|
|
10369
|
+
pageCount: number;
|
|
10370
|
+
siblingCount?: number;
|
|
10371
|
+
boundaryCount?: number;
|
|
10372
|
+
maxVisibleItems?: number;
|
|
10373
|
+
}
|
|
10374
|
+
interface PaginationA11yProps {
|
|
10375
|
+
ariaLabel?: string;
|
|
10376
|
+
ariaLabelledBy?: string;
|
|
10377
|
+
ariaDescribedBy?: string;
|
|
10378
|
+
ariaDisabled?: true;
|
|
10379
|
+
}
|
|
10380
|
+
interface PaginationListA11yProps {
|
|
10381
|
+
role: "list";
|
|
10382
|
+
}
|
|
10383
|
+
interface PaginationControlOptions {
|
|
10384
|
+
direction: PaginationControlDirection;
|
|
10385
|
+
disabled?: boolean;
|
|
10386
|
+
label?: string;
|
|
10387
|
+
ariaLabel?: string;
|
|
10388
|
+
}
|
|
10389
|
+
interface PaginationControlA11yProps {
|
|
10390
|
+
ariaLabel: string;
|
|
10391
|
+
ariaDisabled?: true;
|
|
10392
|
+
}
|
|
10393
|
+
interface PaginationPageOptions {
|
|
10394
|
+
page: number;
|
|
10395
|
+
selected?: boolean;
|
|
10396
|
+
disabled?: boolean;
|
|
10397
|
+
ariaLabel?: string;
|
|
10398
|
+
}
|
|
10399
|
+
interface PaginationPageA11yProps {
|
|
10400
|
+
ariaLabel: string;
|
|
10401
|
+
ariaCurrent?: "page";
|
|
10402
|
+
ariaDisabled?: true;
|
|
10403
|
+
}
|
|
10404
|
+
interface PaginationEllipsisA11yProps {
|
|
10405
|
+
ariaHidden: true;
|
|
10406
|
+
}
|
|
10407
|
+
interface PaginationRenderKit {
|
|
10408
|
+
tag: "nav";
|
|
10409
|
+
className: string;
|
|
10410
|
+
vars: Record<string, string>;
|
|
10411
|
+
a11y: PaginationA11yProps;
|
|
10412
|
+
items: PaginationItem[];
|
|
10413
|
+
reservedItemCount: number;
|
|
10414
|
+
controlDisplay: PaginationResolvedControlDisplay;
|
|
10415
|
+
showPrevNext: boolean;
|
|
10416
|
+
showFirstLast: boolean;
|
|
10417
|
+
}
|
|
10418
|
+
interface PaginationListRenderKit {
|
|
10419
|
+
tag: "ul";
|
|
10420
|
+
className: string;
|
|
10421
|
+
vars: Record<string, string>;
|
|
10422
|
+
a11y: PaginationListA11yProps;
|
|
10423
|
+
}
|
|
10424
|
+
interface PaginationListItemRenderKit {
|
|
10425
|
+
tag: "li";
|
|
10426
|
+
className: string;
|
|
10427
|
+
vars: Record<string, string>;
|
|
10428
|
+
}
|
|
10429
|
+
interface PaginationControlRenderKit {
|
|
10430
|
+
tag: "button";
|
|
10431
|
+
className: string;
|
|
10432
|
+
vars: Record<string, string>;
|
|
10433
|
+
a11y: PaginationControlA11yProps;
|
|
10434
|
+
}
|
|
10435
|
+
interface PaginationPageRenderKit {
|
|
10436
|
+
tag: "button";
|
|
10437
|
+
className: string;
|
|
10438
|
+
vars: Record<string, string>;
|
|
10439
|
+
a11y: PaginationPageA11yProps;
|
|
10440
|
+
}
|
|
10441
|
+
interface PaginationEllipsisRenderKit {
|
|
10442
|
+
tag: "span";
|
|
10443
|
+
className: string;
|
|
10444
|
+
vars: Record<string, string>;
|
|
10445
|
+
a11y: PaginationEllipsisA11yProps;
|
|
10446
|
+
}
|
|
10447
|
+
|
|
10448
|
+
declare function clampPaginationPage(page: number | undefined, pageCount: number): number;
|
|
10449
|
+
declare function resolvePaginationAdaptiveMaxVisibleItems(opts: PaginationAdaptiveMaxVisibleItemsOptions): number | undefined;
|
|
10450
|
+
declare function resolvePaginationAdaptiveProfile(opts: PaginationAdaptiveProfileOptions): PaginationAdaptiveProfile;
|
|
10451
|
+
declare function resolvePaginationReservedItemCount(opts: PaginationReservedItemCountOptions): number;
|
|
10452
|
+
declare function createPaginationItems(opts: PaginationOptions): PaginationItem[];
|
|
10453
|
+
declare function createPaginationRecipe(opts: PaginationOptions): PaginationRenderKit;
|
|
10454
|
+
declare function createPaginationListRecipe(): PaginationListRenderKit;
|
|
10455
|
+
declare function createPaginationListItemRecipe(): PaginationListItemRenderKit;
|
|
10456
|
+
declare function createPaginationControlRecipe(opts: PaginationControlOptions): PaginationControlRenderKit;
|
|
10457
|
+
declare function createPaginationPageRecipe(opts: PaginationPageOptions): PaginationPageRenderKit;
|
|
10458
|
+
declare function createPaginationEllipsisRecipe(): PaginationEllipsisRenderKit;
|
|
10459
|
+
|
|
10460
|
+
declare function resolvePaginationA11y(opts: PaginationOptions): PaginationA11yProps;
|
|
10461
|
+
declare function resolvePaginationListA11y(): PaginationListA11yProps;
|
|
10462
|
+
declare function resolvePaginationControlA11y(opts: PaginationControlOptions): PaginationControlA11yProps;
|
|
10463
|
+
declare function resolvePaginationPageA11y(opts: PaginationPageOptions): PaginationPageA11yProps;
|
|
10464
|
+
declare function resolvePaginationEllipsisA11y(): PaginationEllipsisA11yProps;
|
|
10465
|
+
declare function resolvePaginationItemAriaLabel(getItemAriaLabel: PaginationGetItemAriaLabel, item: PaginationItemAriaLabelOptions): string;
|
|
10466
|
+
declare function resolvePaginationItemAriaLabel(getItemAriaLabel: undefined, item: PaginationItemAriaLabelOptions): undefined;
|
|
10467
|
+
|
|
10468
|
+
/**
|
|
10469
|
+
* Core types for SkipLink.
|
|
10470
|
+
* - Visually hidden anchor that becomes visible on focus.
|
|
10471
|
+
* - Pairs with a target element (typically <main>) via an href fragment.
|
|
10472
|
+
*/
|
|
10473
|
+
interface SkipLinkOptions {
|
|
10474
|
+
/** Anchor href, typically a fragment like "#main". */
|
|
10475
|
+
href: string;
|
|
10476
|
+
/** Optional class name to merge with the recipe class. */
|
|
10477
|
+
className?: string | undefined;
|
|
10478
|
+
}
|
|
10479
|
+
interface SkipLinkRenderKit {
|
|
10480
|
+
tag: "a";
|
|
10481
|
+
className: string;
|
|
10482
|
+
}
|
|
10483
|
+
|
|
10484
|
+
declare function createSkipLinkRecipe(opts: SkipLinkOptions): SkipLinkRenderKit;
|
|
10485
|
+
|
|
10486
|
+
export { type AccordionA11yProps, type AccordionOptions, type AccordionRenderKit, type AvatarA11yProps, type AvatarDataAttributes, type AvatarOptions, type AvatarRenderContent, type AvatarRenderKit, AvatarSize, AvatarType, type BadgeA11yProps, type BadgeOptions, type BadgeRenderKit, BadgeVariant, type BannerA11yProps, type BannerOptions, type BannerRenderKit, BannerVariant, type BreadcrumbA11yProps, type BreadcrumbEntryRenderKit, type BreadcrumbHomeA11yProps, type BreadcrumbHomeRenderKit, type BreadcrumbItem, type BreadcrumbItemA11yProps, type BreadcrumbItemRenderKit, type BreadcrumbListA11yProps, type BreadcrumbOptions, type BreadcrumbRenderKit, type BreadcrumbSeparatorA11yProps, type ButtonA11yProps, ButtonAction, type ButtonLoadingOptions, type ButtonOptions, type ButtonRenderKit, ButtonSize, ButtonVariant, type CardOptions, type CardRenderKit, type CheckboxA11y, type CheckboxProps, type CheckboxRenderKit, type CheckboxState, type ColorInput, type ColorRole, type ContextMenuA11yProps, type ContextMenuActionItem, type ContextMenuActionItemRenderKit, type ContextMenuDividerA11yProps, type ContextMenuDividerItem, type ContextMenuDividerRenderKit, type ContextMenuEntry, type ContextMenuEntryRenderKit, type ContextMenuItemA11yProps, type ContextMenuItemKind, type ContextMenuOptions, type ContextMenuRenderKit, type CssVars, type CurrencyCode, DEFAULT_PROGRESS_BAR_LABEL, DEFAULT_PROGRESS_BAR_MAX, DEFAULT_PROGRESS_BAR_MIN, DENSITY_SCALES, type DatePickerA11yProps, type DatePickerDataAttributes, type DatePickerDay, type DatePickerDayRenderKit, type DatePickerDayState, type DatePickerDevice, type DatePickerOptions, type DatePickerRenderKit, type Density, type DensityScale, type DialogA11yProps, type DialogOptions, type DialogRenderKit, type DialogSize, type DividerA11y, type DividerDataAttributes, type DividerOptions, type DividerOrientation, type DividerRenderKit, type DividerSize, type DrawerA11yProps, type DrawerOptions, type DrawerPanelRenderKit, type DrawerPlacement, type DrawerRenderKit, type DrawerScrimRenderKit, type DrawerSize, type FamilySemanticDefinition, type FieldComparisonRow, type FontLoadingConfig, type FontLoadingMode, type FontLoadingOptions, type HeadingA11y, type HeadingLevel, type HeadingOptions, type HeadingRenderKit, type HeadingSize, type IconA11yProps, type IconColor, IconName, IconName as IconNameType, type IconOptions, type IconPreset, type IconRenderKit, type IconSize, type IconSizeKey, type IconStrokeWidth, type IconStrokeWidthKey, type InputA11yProps, type InputOptions, type InputOtpA11yProps, type InputOtpOptions, type InputOtpRenderKit, type InputRenderKit, type InputTone, type LabeledCopy, type MarwesThemeScriptOptions, type MarwesThemeStyleOptions, type MwAvailableFont, type MwFontFallback, type MwGoogleFontFamily, type MwStyledTheme, type MwTheme, type MwThemeMedia, type MwThemeVarName, type MwThemeVarNames, type MwThemeVarReference, type MwThemeVars, type PaginationA11yProps, type PaginationAdaptiveMaxVisibleItemsOptions, type PaginationAdaptiveProfile, type PaginationAdaptiveProfileOptions, type PaginationControlA11yProps, type PaginationControlDirection, type PaginationControlDisplay, type PaginationControlOptions, type PaginationControlRenderKit, type PaginationEllipsisA11yProps, type PaginationEllipsisRenderKit, type PaginationGetItemAriaLabel, type PaginationItem, type PaginationItemAriaLabelOptions, type PaginationItemType, type PaginationListA11yProps, type PaginationListItemRenderKit, type PaginationListRenderKit, type PaginationOptions, type PaginationPageA11yProps, type PaginationPageOptions, type PaginationPageRenderKit, type PaginationRenderKit, type PaginationReservedItemCountOptions, type PaginationResolvedControlDisplay, type ParagraphA11y, type ParagraphOptions, type ParagraphRenderKit, type ParagraphSize, type PersonalityName, type ProgressBarA11yProps, type ProgressBarDataAttributes, type ProgressBarOptions, type ProgressBarRenderKit, ProgressBarSize, ProgressBarState, type PurposeSemanticDefinition, type RadioA11y, type RadioOptions, type RadioRenderKit, type ResolvedButtonLoading, type ResolvedTheme, type RichTextA11yProps, type RichTextFormat, type RichTextOptions, type RichTextRenderKit, type SecondaryColorRole, type SegmentedControlA11yProps, type SegmentedControlItemA11yProps, type SegmentedControlItemOptions, type SegmentedControlItemRenderKit, type SegmentedControlItemState, type SegmentedControlNavigationDirection, type SegmentedControlOptions, type SegmentedControlRenderKit, type SegmentedControlSize, type SegmentedControlVariant, type SelectA11yProps, type SelectAppearance, type SelectMode, type SelectOption, type SelectOptions, type SelectRenderKit, type SemanticAttributeDefinition, type SemanticAttributeName, type SemanticAttributeValue, type SemanticAttributes, type SemanticFamily, type SemanticHeadingLevel, type SemanticIntent, type SemanticLayer, type SemanticOrientation, type SemanticOutcome, type SemanticPurpose, type SkeletonA11yProps, SkeletonAnimation, type SkeletonDataAttributes, type SkeletonDimension, type SkeletonOptions, type SkeletonRenderKit, SkeletonVariant, type SkipLinkOptions, type SkipLinkRenderKit, type SliderA11yProps, type SliderDataAttributes, type SliderOptions, type SliderRenderKit, type SpacingA11y, type SpacingDataAttributes, type SpacingOptions, type SpacingRenderKit, type SpacingSize, Spacings, type SpinnerA11yProps, type SpinnerDataAttributes, type SpinnerOptions, type SpinnerRenderKit, type SpinnerSize, type SpinnerSvgDefinition, type SpinnerSvgElement, type SpinnerSvgNode, SpinnerVariant, SpinnerVariants, type StatTileA11yProps, type StatTileDataAttributes, type StatTileOptions, type StatTileRenderKit, type StatTileTone, type StatTileTrendDirection, type SvgElementType, type SvgNode, type SwitchA11yProps, type SwitchOptions, type SwitchRenderKit, SwitchSize, type SystemThemeMode, type TabA11yProps, type TabGroupA11yIds, type TabGroupItemState, type TabNavigationDirection, type TabOptions, type TabRenderKit, type TextA11y, type TextAs, type TextOptions, type TextRenderKit, type TextTransform, type TextTypographyStyle, TextVariant, type TextareaA11yProps, type TextareaOptions, type TextareaRenderKit, type TextareaResize, type Theme, type ThemeBreakpointName, type ThemeBreakpoints, type ThemeInput, type ThemeInputColor, ThemeMode, type ThemeModeAttribute, type ThemeModeCSSRulesOptions, type ThemeModeRootTarget, type ThemePreference, type ThemeVariableStrategy, type ToastA11yProps, type ToastContainerOptions, type ToastIntent, type ToastOptions, type ToastPlacement, type ToastRenderKit, type ToastVariant, type ToneName, type TooltipA11yProps, type TooltipDataAttributes, type TooltipOptions, type TooltipRenderKit, type TypographyStyle, accordionPurposeComponentReference, accordionWhyPurposeComponents, avatarPurposeSemantics, avatarPurposes, badgePurposeComponentReference, badgePurposeSemantics, badgePurposes, badgeWhyPurposeComponents, bannerPurposeSemantics, bannerPurposes, buildAccordionFieldA11yIds, buildCheckboxA11y, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, buildCurrencyHelperText, buildGoogleFontsUrl, buildHeadingA11y, buildInputFieldA11yIds, buildRadioA11y, buildRadioGroupFieldA11yIds, buildRichTextFieldA11yIds, buildSliderFieldA11yIds, buildSwitchFieldA11yIds, buildTabGroupA11yIds, buttonActionSemanticPurposes, buttonPurposeSemantics, buttonPurposes, buttonVariantVisualStyles, buttonWhySemanticComponents, canonicalSemanticAttributeNames, canonicalSemanticAttributeRegistry, canonicalSemanticAttributes, cardPurposeComponentReference, cardWhyPurposeComponents, checkboxRecipe, clampPaginationPage, clampProgressBarValue, createAccordionRecipe, createAvatarRecipe, createBadgeRecipe, createBannerRecipe, createBreadcrumbRecipe, createButtonRecipe, createCardRecipe, createContextMenuRecipe, createDatePickerRecipe, createDialogRecipe, createDividerRecipe, createDrawerRecipe, createFamilySemanticAttributes, createFontStack, createIconRecipe, createInputOtpRecipe, createInputRecipe, createMarwesThemeScript, createMarwesThemeStyle, createMwTheme, createMwThemeMedia, createPaginationControlRecipe, createPaginationEllipsisRecipe, createPaginationItems, createPaginationListItemRecipe, createPaginationListRecipe, createPaginationPageRecipe, createPaginationRecipe, createProgressBarRecipe, createPurposeSemanticAttributes, createRichTextRecipe, createSegmentedControlItemRecipe, createSegmentedControlRecipe, createSelectRecipe, createSkeletonRecipe, createSkipLinkRecipe, createSliderRecipe, createSpacingRecipe, createSpinnerRecipe, createStatTileRecipe, createSwitchRecipe, createTabRecipe, createTextareaRecipe, createToastRecipe, createTooltipRecipe, currencyCodes, darkThemeDefaults, defaultThemeBreakpoints, densityToCSSVars, dialogPurposeComponentReference, dialogPurposeSemantics, dialogPurposes, dialogWhyPurposeComponents, emptySemanticAttributes, escapeRichTextHtml, extractFontFamilyName, extractUsedWeights, familySemanticsRegistry, fieldComparisonRows, fieldWhyPurposeComponents, filterUndefinedSemanticAttributes, getCurrencySymbol, headingRecipe, iconNames, iconNamesList, iconRegistry, iconSizeScale, iconStrokeWidthScale, isRichTextHtmlEmpty, isSystemFont, isThemeMode, isThemePreference, lightThemeDefaults, mergeIdRefs, mergeSemanticAttributes, moveSegmentedControlSelection, moveTabSelection, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwTheme, mwThemeVarNames, mwThemeVars, mwVar, nextThemeMode, normalizeRichTextHtml, paragraphRecipe, progressBarSizes, progressBarStates, purposeSemanticsRegistry, radioPurposeComponentReference, radioRecipe, radioWhyPurposeComponents, resolveAccordionA11y, resolveAvatarA11y, resolveBadgeA11y, resolveBannerA11y, resolveBreadcrumbA11y, resolveBreadcrumbHomeA11y, resolveBreadcrumbItemA11y, resolveBreadcrumbListA11y, resolveBreadcrumbSeparatorA11y, resolveButtonLoading, resolveContextMenuA11y, resolveContextMenuDividerA11y, resolveContextMenuItemA11y, resolveDatePickerDayLabel, resolveDialogA11y, resolveDrawerA11y, resolveIconA11y, resolveIconSize, resolveIconStrokeWidth, resolvePaginationA11y, resolvePaginationAdaptiveMaxVisibleItems, resolvePaginationAdaptiveProfile, resolvePaginationControlA11y, resolvePaginationEllipsisA11y, resolvePaginationItemAriaLabel, resolvePaginationListA11y, resolvePaginationPageA11y, resolvePaginationReservedItemCount, resolveProgressBarA11y, resolveProgressBarBounds, resolveRichTextAllowedFormats, resolveSegmentedControlA11y, resolveSegmentedControlItemA11y, resolveSegmentedControlValue, resolveSelectMode, resolveServerThemeMode, resolveSkeletonA11y, resolveSliderA11y, resolveSpinnerA11y, resolveSpinnerSize, resolveStatTileTrendLabel, resolveSwitchA11y, resolveTabA11y, resolveTabValue, resolveThemeInput, resolveThemePreference, resolveToastA11y, resolveTone, resolveTooltipA11y, richTextCommandByFormat, richTextFormattingReference, richTextWhyUseIt, sanitizeCurrencyValue, sanitizeInputOtpValue, semanticFamilies, semanticFrameworkSupport, semanticIntents, semanticLayers, semanticOrientations, semanticOutcomes, semanticPurposes, shouldLoadGoogleFont, skeletonAnimations, skeletonVariants, sliderPurposeComponentReference, sliderWhyPurposeComponents, spinnerSizeScale, spinnerSizes, spinnerVariants, storybookA11yPolicy, storybookButtonGeneralArgTypes, storybookButtonIconArgTypes, storybookButtonPurposeArgTypes, storybookCheckboxArgTypes, storybookDatePickerArgTypes, storybookDividerArgTypes, storybookDocsDescription, storybookIconButtonArgTypes, storybookIconGalleryArgTypes, storybookIconGalleryDefaults, storybookIconNames, storybookLayout, storybookOptionalIconNames, storybookProgressBarArgTypes, storybookRadioArgTypes, storybookSkeletonArgTypes, storybookSliderArgTypes, storybookSpacingArgTypes, storybookSpinnerArgTypes, storybookStatTileArgTypes, switchPurposeComponentReference, switchWhyPurposeComponents, tabPurposeComponentReference, tabWhyPurposeComponents, textRecipe, themeModesToCSSRules, themeToCSSRule, themeToCSSVars, toastPurposeComponentReference, toastPurposeSemantics, toastPurposes, toastWhyPurposeComponents, validateSemanticRegistry };
|