@mason-ds/vue 0.2.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/LICENSE +202 -0
- package/NOTICE +14 -0
- package/README.md +20 -0
- package/dist/index.cjs +1317 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +792 -0
- package/dist/index.d.ts +792 -0
- package/dist/index.js +1278 -0
- package/dist/index.js.map +1 -0
- package/package.json +50 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,792 @@
|
|
|
1
|
+
import * as vue from 'vue';
|
|
2
|
+
import { PropType } from 'vue';
|
|
3
|
+
import { SemanticTokenPath } from '@mason-ds/tokens';
|
|
4
|
+
|
|
5
|
+
type MasonTheme = 'light' | 'dark' | 'system';
|
|
6
|
+
/** Root provider for mason-ds Vue apps. */
|
|
7
|
+
declare const MasonProvider: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
8
|
+
theme: {
|
|
9
|
+
type: PropType<MasonTheme>;
|
|
10
|
+
default: string;
|
|
11
|
+
};
|
|
12
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
13
|
+
[key: string]: any;
|
|
14
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
15
|
+
theme: {
|
|
16
|
+
type: PropType<MasonTheme>;
|
|
17
|
+
default: string;
|
|
18
|
+
};
|
|
19
|
+
}>> & Readonly<{}>, {
|
|
20
|
+
theme: MasonTheme;
|
|
21
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
22
|
+
type MasonProviderProps = {
|
|
23
|
+
theme?: MasonTheme;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Prop unions are derived from the semantic token paths, so adding or removing
|
|
28
|
+
* a token role changes the component API instead of silently drifting from it.
|
|
29
|
+
*/
|
|
30
|
+
type FontRoleOf<Path> = Path extends `font.${infer Role}.family` ? Role : never;
|
|
31
|
+
type TextToneOf<Path> = Path extends `color.text.${infer Tone}` ? Tone : never;
|
|
32
|
+
type FeedbackToneOf<Path> = Path extends `color.feedback.${infer Tone}.bg` ? Tone : never;
|
|
33
|
+
type LevelOf<Path> = Path extends `spacing.inset.${infer Level}` ? Level : never;
|
|
34
|
+
type RadiusOf<Path> = Path extends `radius.${infer Level}` ? Level : never;
|
|
35
|
+
type ShadowOf<Path> = Path extends `shadow.${infer Level}` ? Level : never;
|
|
36
|
+
/** Typography roles, e.g. `heading.h2`, `body.md`, `code.md`. */
|
|
37
|
+
type TextVariant = FontRoleOf<SemanticTokenPath>;
|
|
38
|
+
/** Text color roles, e.g. `primary`, `secondary`, `link`, `danger`. */
|
|
39
|
+
type TextTone = TextToneOf<SemanticTokenPath>;
|
|
40
|
+
/** Status roles shared by Badge / Callout. */
|
|
41
|
+
type FeedbackTone = FeedbackToneOf<SemanticTokenPath>;
|
|
42
|
+
/** Spacing steps — sm / md / lg. */
|
|
43
|
+
type Level = LevelOf<SemanticTokenPath>;
|
|
44
|
+
type RadiusLevel = RadiusOf<SemanticTokenPath>;
|
|
45
|
+
type ShadowLevel = ShadowOf<SemanticTokenPath>;
|
|
46
|
+
|
|
47
|
+
type TextAlign = 'start' | 'center' | 'end';
|
|
48
|
+
|
|
49
|
+
type TextElement = 'p' | 'span' | 'div' | 'label' | 'strong' | 'code' | 'h1' | 'h2' | 'h3' | 'h4';
|
|
50
|
+
/**
|
|
51
|
+
* Typography primitive. `variant` covers every font role in the token set,
|
|
52
|
+
* `tone` every `color.text.*` role.
|
|
53
|
+
*
|
|
54
|
+
* Pick `as` for semantics (a heading role does not imply an `<h2>`).
|
|
55
|
+
*/
|
|
56
|
+
declare const Text: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
57
|
+
as: {
|
|
58
|
+
type: PropType<TextElement>;
|
|
59
|
+
default: string;
|
|
60
|
+
};
|
|
61
|
+
variant: {
|
|
62
|
+
type: PropType<TextVariant>;
|
|
63
|
+
default: string;
|
|
64
|
+
};
|
|
65
|
+
tone: {
|
|
66
|
+
type: PropType<TextTone>;
|
|
67
|
+
default: string;
|
|
68
|
+
};
|
|
69
|
+
align: {
|
|
70
|
+
type: PropType<TextAlign>;
|
|
71
|
+
default: undefined;
|
|
72
|
+
};
|
|
73
|
+
truncate: {
|
|
74
|
+
type: BooleanConstructor;
|
|
75
|
+
default: boolean;
|
|
76
|
+
};
|
|
77
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
78
|
+
[key: string]: any;
|
|
79
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
80
|
+
as: {
|
|
81
|
+
type: PropType<TextElement>;
|
|
82
|
+
default: string;
|
|
83
|
+
};
|
|
84
|
+
variant: {
|
|
85
|
+
type: PropType<TextVariant>;
|
|
86
|
+
default: string;
|
|
87
|
+
};
|
|
88
|
+
tone: {
|
|
89
|
+
type: PropType<TextTone>;
|
|
90
|
+
default: string;
|
|
91
|
+
};
|
|
92
|
+
align: {
|
|
93
|
+
type: PropType<TextAlign>;
|
|
94
|
+
default: undefined;
|
|
95
|
+
};
|
|
96
|
+
truncate: {
|
|
97
|
+
type: BooleanConstructor;
|
|
98
|
+
default: boolean;
|
|
99
|
+
};
|
|
100
|
+
}>> & Readonly<{}>, {
|
|
101
|
+
variant: TextVariant;
|
|
102
|
+
tone: TextTone;
|
|
103
|
+
align: TextAlign;
|
|
104
|
+
truncate: boolean;
|
|
105
|
+
as: TextElement;
|
|
106
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
107
|
+
type TextProps = {
|
|
108
|
+
as?: TextElement;
|
|
109
|
+
variant?: TextVariant;
|
|
110
|
+
tone?: TextTone;
|
|
111
|
+
align?: TextAlign;
|
|
112
|
+
truncate?: boolean;
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
type StackDirection = 'row' | 'column';
|
|
116
|
+
type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
|
|
117
|
+
type StackJustify = 'start' | 'center' | 'end' | 'between';
|
|
118
|
+
|
|
119
|
+
/** Layout primitive — flex row/column with token gaps. */
|
|
120
|
+
declare const Stack: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
121
|
+
direction: {
|
|
122
|
+
type: PropType<StackDirection>;
|
|
123
|
+
default: string;
|
|
124
|
+
};
|
|
125
|
+
gap: {
|
|
126
|
+
type: PropType<Level>;
|
|
127
|
+
default: string;
|
|
128
|
+
};
|
|
129
|
+
align: {
|
|
130
|
+
type: PropType<StackAlign>;
|
|
131
|
+
default: undefined;
|
|
132
|
+
};
|
|
133
|
+
justify: {
|
|
134
|
+
type: PropType<StackJustify>;
|
|
135
|
+
default: undefined;
|
|
136
|
+
};
|
|
137
|
+
wrap: {
|
|
138
|
+
type: BooleanConstructor;
|
|
139
|
+
default: boolean;
|
|
140
|
+
};
|
|
141
|
+
inline: {
|
|
142
|
+
type: BooleanConstructor;
|
|
143
|
+
default: boolean;
|
|
144
|
+
};
|
|
145
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
146
|
+
[key: string]: any;
|
|
147
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
148
|
+
direction: {
|
|
149
|
+
type: PropType<StackDirection>;
|
|
150
|
+
default: string;
|
|
151
|
+
};
|
|
152
|
+
gap: {
|
|
153
|
+
type: PropType<Level>;
|
|
154
|
+
default: string;
|
|
155
|
+
};
|
|
156
|
+
align: {
|
|
157
|
+
type: PropType<StackAlign>;
|
|
158
|
+
default: undefined;
|
|
159
|
+
};
|
|
160
|
+
justify: {
|
|
161
|
+
type: PropType<StackJustify>;
|
|
162
|
+
default: undefined;
|
|
163
|
+
};
|
|
164
|
+
wrap: {
|
|
165
|
+
type: BooleanConstructor;
|
|
166
|
+
default: boolean;
|
|
167
|
+
};
|
|
168
|
+
inline: {
|
|
169
|
+
type: BooleanConstructor;
|
|
170
|
+
default: boolean;
|
|
171
|
+
};
|
|
172
|
+
}>> & Readonly<{}>, {
|
|
173
|
+
inline: boolean;
|
|
174
|
+
align: StackAlign;
|
|
175
|
+
wrap: boolean;
|
|
176
|
+
justify: StackJustify;
|
|
177
|
+
direction: StackDirection;
|
|
178
|
+
gap: Level;
|
|
179
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
180
|
+
type StackProps = {
|
|
181
|
+
direction?: StackDirection;
|
|
182
|
+
gap?: Level;
|
|
183
|
+
align?: StackAlign;
|
|
184
|
+
justify?: StackJustify;
|
|
185
|
+
wrap?: boolean;
|
|
186
|
+
inline?: boolean;
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
type CardTone = 'surface' | 'canvas' | 'elevated';
|
|
190
|
+
|
|
191
|
+
/** Surface primitive — background, border, radius and shadow from tokens. */
|
|
192
|
+
declare const Card: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
193
|
+
padding: {
|
|
194
|
+
type: PropType<Level>;
|
|
195
|
+
default: string;
|
|
196
|
+
};
|
|
197
|
+
elevation: {
|
|
198
|
+
type: PropType<ShadowLevel>;
|
|
199
|
+
default: string;
|
|
200
|
+
};
|
|
201
|
+
radius: {
|
|
202
|
+
type: PropType<RadiusLevel>;
|
|
203
|
+
default: string;
|
|
204
|
+
};
|
|
205
|
+
tone: {
|
|
206
|
+
type: PropType<CardTone>;
|
|
207
|
+
default: string;
|
|
208
|
+
};
|
|
209
|
+
bordered: {
|
|
210
|
+
type: BooleanConstructor;
|
|
211
|
+
default: boolean;
|
|
212
|
+
};
|
|
213
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
214
|
+
[key: string]: any;
|
|
215
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
216
|
+
padding: {
|
|
217
|
+
type: PropType<Level>;
|
|
218
|
+
default: string;
|
|
219
|
+
};
|
|
220
|
+
elevation: {
|
|
221
|
+
type: PropType<ShadowLevel>;
|
|
222
|
+
default: string;
|
|
223
|
+
};
|
|
224
|
+
radius: {
|
|
225
|
+
type: PropType<RadiusLevel>;
|
|
226
|
+
default: string;
|
|
227
|
+
};
|
|
228
|
+
tone: {
|
|
229
|
+
type: PropType<CardTone>;
|
|
230
|
+
default: string;
|
|
231
|
+
};
|
|
232
|
+
bordered: {
|
|
233
|
+
type: BooleanConstructor;
|
|
234
|
+
default: boolean;
|
|
235
|
+
};
|
|
236
|
+
}>> & Readonly<{}>, {
|
|
237
|
+
radius: RadiusLevel;
|
|
238
|
+
tone: CardTone;
|
|
239
|
+
padding: Level;
|
|
240
|
+
elevation: ShadowLevel;
|
|
241
|
+
bordered: boolean;
|
|
242
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
243
|
+
type CardProps = {
|
|
244
|
+
padding?: Level;
|
|
245
|
+
elevation?: ShadowLevel;
|
|
246
|
+
radius?: RadiusLevel;
|
|
247
|
+
tone?: CardTone;
|
|
248
|
+
bordered?: boolean;
|
|
249
|
+
};
|
|
250
|
+
|
|
251
|
+
type DividerOrientation = 'horizontal' | 'vertical';
|
|
252
|
+
|
|
253
|
+
/** Separator line. `<hr>` already carries the separator role. */
|
|
254
|
+
declare const Divider: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
255
|
+
orientation: {
|
|
256
|
+
type: PropType<DividerOrientation>;
|
|
257
|
+
default: string;
|
|
258
|
+
};
|
|
259
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
260
|
+
[key: string]: any;
|
|
261
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
262
|
+
orientation: {
|
|
263
|
+
type: PropType<DividerOrientation>;
|
|
264
|
+
default: string;
|
|
265
|
+
};
|
|
266
|
+
}>> & Readonly<{}>, {
|
|
267
|
+
orientation: DividerOrientation;
|
|
268
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
269
|
+
type DividerProps = {
|
|
270
|
+
orientation?: DividerOrientation;
|
|
271
|
+
};
|
|
272
|
+
|
|
273
|
+
type LinkTone = 'link' | 'inherit';
|
|
274
|
+
type LinkUnderline = 'hover' | 'always' | 'none';
|
|
275
|
+
|
|
276
|
+
/** Navigational anchor. Typography is inherited, so it composes inside Text. */
|
|
277
|
+
declare const Link: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
278
|
+
tone: {
|
|
279
|
+
type: PropType<LinkTone>;
|
|
280
|
+
default: string;
|
|
281
|
+
};
|
|
282
|
+
underline: {
|
|
283
|
+
type: PropType<LinkUnderline>;
|
|
284
|
+
default: string;
|
|
285
|
+
};
|
|
286
|
+
/** Adds `target="_blank"` and a safe `rel`. */
|
|
287
|
+
external: {
|
|
288
|
+
type: BooleanConstructor;
|
|
289
|
+
default: boolean;
|
|
290
|
+
};
|
|
291
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
292
|
+
[key: string]: any;
|
|
293
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
294
|
+
tone: {
|
|
295
|
+
type: PropType<LinkTone>;
|
|
296
|
+
default: string;
|
|
297
|
+
};
|
|
298
|
+
underline: {
|
|
299
|
+
type: PropType<LinkUnderline>;
|
|
300
|
+
default: string;
|
|
301
|
+
};
|
|
302
|
+
/** Adds `target="_blank"` and a safe `rel`. */
|
|
303
|
+
external: {
|
|
304
|
+
type: BooleanConstructor;
|
|
305
|
+
default: boolean;
|
|
306
|
+
};
|
|
307
|
+
}>> & Readonly<{}>, {
|
|
308
|
+
tone: LinkTone;
|
|
309
|
+
underline: LinkUnderline;
|
|
310
|
+
external: boolean;
|
|
311
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
312
|
+
type LinkProps = {
|
|
313
|
+
tone?: LinkTone;
|
|
314
|
+
underline?: LinkUnderline;
|
|
315
|
+
external?: boolean;
|
|
316
|
+
};
|
|
317
|
+
|
|
318
|
+
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
319
|
+
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
320
|
+
|
|
321
|
+
/**
|
|
322
|
+
* Primary action component. Native `<button>` with token-backed styles.
|
|
323
|
+
*
|
|
324
|
+
* Icon-only usage requires an `aria-label`.
|
|
325
|
+
* Slots: default (label), `leading`, `trailing`.
|
|
326
|
+
*/
|
|
327
|
+
declare const Button: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
328
|
+
variant: {
|
|
329
|
+
type: PropType<ButtonVariant>;
|
|
330
|
+
default: string;
|
|
331
|
+
};
|
|
332
|
+
size: {
|
|
333
|
+
type: PropType<ButtonSize>;
|
|
334
|
+
default: string;
|
|
335
|
+
};
|
|
336
|
+
loading: {
|
|
337
|
+
type: BooleanConstructor;
|
|
338
|
+
default: boolean;
|
|
339
|
+
};
|
|
340
|
+
disabled: {
|
|
341
|
+
type: BooleanConstructor;
|
|
342
|
+
default: boolean;
|
|
343
|
+
};
|
|
344
|
+
type: {
|
|
345
|
+
type: PropType<"button" | "submit" | "reset">;
|
|
346
|
+
default: string;
|
|
347
|
+
};
|
|
348
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
349
|
+
[key: string]: any;
|
|
350
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
351
|
+
variant: {
|
|
352
|
+
type: PropType<ButtonVariant>;
|
|
353
|
+
default: string;
|
|
354
|
+
};
|
|
355
|
+
size: {
|
|
356
|
+
type: PropType<ButtonSize>;
|
|
357
|
+
default: string;
|
|
358
|
+
};
|
|
359
|
+
loading: {
|
|
360
|
+
type: BooleanConstructor;
|
|
361
|
+
default: boolean;
|
|
362
|
+
};
|
|
363
|
+
disabled: {
|
|
364
|
+
type: BooleanConstructor;
|
|
365
|
+
default: boolean;
|
|
366
|
+
};
|
|
367
|
+
type: {
|
|
368
|
+
type: PropType<"button" | "submit" | "reset">;
|
|
369
|
+
default: string;
|
|
370
|
+
};
|
|
371
|
+
}>> & Readonly<{}>, {
|
|
372
|
+
type: "button" | "reset" | "submit";
|
|
373
|
+
disabled: boolean;
|
|
374
|
+
size: ButtonSize;
|
|
375
|
+
variant: ButtonVariant;
|
|
376
|
+
loading: boolean;
|
|
377
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
378
|
+
type ButtonProps = {
|
|
379
|
+
variant?: ButtonVariant;
|
|
380
|
+
size?: ButtonSize;
|
|
381
|
+
loading?: boolean;
|
|
382
|
+
disabled?: boolean;
|
|
383
|
+
type?: 'button' | 'submit' | 'reset';
|
|
384
|
+
};
|
|
385
|
+
|
|
386
|
+
/** `inherit` follows the surrounding font size — used inside Button. */
|
|
387
|
+
type SpinnerSize = 'sm' | 'md' | 'lg' | 'inherit';
|
|
388
|
+
|
|
389
|
+
/** Indeterminate loading indicator. The rotation lives in `tokens.css`. */
|
|
390
|
+
declare const Spinner: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
391
|
+
size: {
|
|
392
|
+
type: PropType<SpinnerSize>;
|
|
393
|
+
default: string;
|
|
394
|
+
};
|
|
395
|
+
/** Announced while loading. Without it the spinner is `aria-hidden`. */
|
|
396
|
+
label: {
|
|
397
|
+
type: StringConstructor;
|
|
398
|
+
default: undefined;
|
|
399
|
+
};
|
|
400
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
401
|
+
[key: string]: any;
|
|
402
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
403
|
+
size: {
|
|
404
|
+
type: PropType<SpinnerSize>;
|
|
405
|
+
default: string;
|
|
406
|
+
};
|
|
407
|
+
/** Announced while loading. Without it the spinner is `aria-hidden`. */
|
|
408
|
+
label: {
|
|
409
|
+
type: StringConstructor;
|
|
410
|
+
default: undefined;
|
|
411
|
+
};
|
|
412
|
+
}>> & Readonly<{}>, {
|
|
413
|
+
label: string;
|
|
414
|
+
size: SpinnerSize;
|
|
415
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
416
|
+
type SpinnerProps = {
|
|
417
|
+
size?: SpinnerSize;
|
|
418
|
+
label?: string;
|
|
419
|
+
};
|
|
420
|
+
|
|
421
|
+
type BadgeTone = FeedbackTone | 'neutral';
|
|
422
|
+
type BadgeSize = 'sm' | 'md';
|
|
423
|
+
|
|
424
|
+
/**
|
|
425
|
+
* Compact status chip. Colour carries no meaning on its own — keep the label
|
|
426
|
+
* readable (`활성`, not just a green dot).
|
|
427
|
+
*/
|
|
428
|
+
declare const Badge: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
429
|
+
tone: {
|
|
430
|
+
type: PropType<BadgeTone>;
|
|
431
|
+
default: string;
|
|
432
|
+
};
|
|
433
|
+
size: {
|
|
434
|
+
type: PropType<BadgeSize>;
|
|
435
|
+
default: string;
|
|
436
|
+
};
|
|
437
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
438
|
+
[key: string]: any;
|
|
439
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
440
|
+
tone: {
|
|
441
|
+
type: PropType<BadgeTone>;
|
|
442
|
+
default: string;
|
|
443
|
+
};
|
|
444
|
+
size: {
|
|
445
|
+
type: PropType<BadgeSize>;
|
|
446
|
+
default: string;
|
|
447
|
+
};
|
|
448
|
+
}>> & Readonly<{}>, {
|
|
449
|
+
size: BadgeSize;
|
|
450
|
+
tone: BadgeTone;
|
|
451
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
452
|
+
type BadgeProps = {
|
|
453
|
+
tone?: BadgeTone;
|
|
454
|
+
size?: BadgeSize;
|
|
455
|
+
};
|
|
456
|
+
|
|
457
|
+
/**
|
|
458
|
+
* Inline message block for page-level feedback.
|
|
459
|
+
* Slots: default (body), `title`, `icon`.
|
|
460
|
+
*
|
|
461
|
+
* It is static content by default — for something that appears in response to
|
|
462
|
+
* an action, pass `role="status"` (or `"alert"` when it must interrupt).
|
|
463
|
+
*/
|
|
464
|
+
declare const Callout: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
465
|
+
tone: {
|
|
466
|
+
type: PropType<FeedbackTone>;
|
|
467
|
+
default: string;
|
|
468
|
+
};
|
|
469
|
+
/** Heading text; the `title` slot takes precedence. */
|
|
470
|
+
title: {
|
|
471
|
+
type: StringConstructor;
|
|
472
|
+
default: undefined;
|
|
473
|
+
};
|
|
474
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
475
|
+
[key: string]: any;
|
|
476
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
477
|
+
tone: {
|
|
478
|
+
type: PropType<FeedbackTone>;
|
|
479
|
+
default: string;
|
|
480
|
+
};
|
|
481
|
+
/** Heading text; the `title` slot takes precedence. */
|
|
482
|
+
title: {
|
|
483
|
+
type: StringConstructor;
|
|
484
|
+
default: undefined;
|
|
485
|
+
};
|
|
486
|
+
}>> & Readonly<{}>, {
|
|
487
|
+
title: string;
|
|
488
|
+
tone: FeedbackTone;
|
|
489
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
490
|
+
type CalloutProps = {
|
|
491
|
+
tone?: FeedbackTone;
|
|
492
|
+
title?: string;
|
|
493
|
+
};
|
|
494
|
+
|
|
495
|
+
/** Field sizes reuse the spacing ladder — sm / md / lg. */
|
|
496
|
+
type FieldSize = Level;
|
|
497
|
+
|
|
498
|
+
/**
|
|
499
|
+
* Labelled text input. Supports `v-model`.
|
|
500
|
+
* `class` / `style` apply to the wrapper; every other attribute goes to the
|
|
501
|
+
* native `<input>`.
|
|
502
|
+
* Slots: `label`, `description`, `error` (override the same-named props).
|
|
503
|
+
*/
|
|
504
|
+
declare const TextField: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
505
|
+
label: {
|
|
506
|
+
type: StringConstructor;
|
|
507
|
+
default: undefined;
|
|
508
|
+
};
|
|
509
|
+
description: {
|
|
510
|
+
type: StringConstructor;
|
|
511
|
+
default: undefined;
|
|
512
|
+
};
|
|
513
|
+
/** Present error text switches the field to its invalid styling. */
|
|
514
|
+
error: {
|
|
515
|
+
type: StringConstructor;
|
|
516
|
+
default: undefined;
|
|
517
|
+
};
|
|
518
|
+
size: {
|
|
519
|
+
type: PropType<FieldSize>;
|
|
520
|
+
default: string;
|
|
521
|
+
};
|
|
522
|
+
invalid: {
|
|
523
|
+
type: PropType<boolean | undefined>;
|
|
524
|
+
default: undefined;
|
|
525
|
+
};
|
|
526
|
+
disabled: {
|
|
527
|
+
type: BooleanConstructor;
|
|
528
|
+
default: boolean;
|
|
529
|
+
};
|
|
530
|
+
id: {
|
|
531
|
+
type: StringConstructor;
|
|
532
|
+
default: undefined;
|
|
533
|
+
};
|
|
534
|
+
modelValue: {
|
|
535
|
+
type: StringConstructor;
|
|
536
|
+
default: undefined;
|
|
537
|
+
};
|
|
538
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
539
|
+
[key: string]: any;
|
|
540
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
541
|
+
label: {
|
|
542
|
+
type: StringConstructor;
|
|
543
|
+
default: undefined;
|
|
544
|
+
};
|
|
545
|
+
description: {
|
|
546
|
+
type: StringConstructor;
|
|
547
|
+
default: undefined;
|
|
548
|
+
};
|
|
549
|
+
/** Present error text switches the field to its invalid styling. */
|
|
550
|
+
error: {
|
|
551
|
+
type: StringConstructor;
|
|
552
|
+
default: undefined;
|
|
553
|
+
};
|
|
554
|
+
size: {
|
|
555
|
+
type: PropType<FieldSize>;
|
|
556
|
+
default: string;
|
|
557
|
+
};
|
|
558
|
+
invalid: {
|
|
559
|
+
type: PropType<boolean | undefined>;
|
|
560
|
+
default: undefined;
|
|
561
|
+
};
|
|
562
|
+
disabled: {
|
|
563
|
+
type: BooleanConstructor;
|
|
564
|
+
default: boolean;
|
|
565
|
+
};
|
|
566
|
+
id: {
|
|
567
|
+
type: StringConstructor;
|
|
568
|
+
default: undefined;
|
|
569
|
+
};
|
|
570
|
+
modelValue: {
|
|
571
|
+
type: StringConstructor;
|
|
572
|
+
default: undefined;
|
|
573
|
+
};
|
|
574
|
+
}>> & Readonly<{
|
|
575
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
576
|
+
}>, {
|
|
577
|
+
label: string;
|
|
578
|
+
error: string;
|
|
579
|
+
invalid: boolean | undefined;
|
|
580
|
+
disabled: boolean;
|
|
581
|
+
size: Level;
|
|
582
|
+
description: string;
|
|
583
|
+
id: string;
|
|
584
|
+
modelValue: string;
|
|
585
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
586
|
+
type TextFieldProps = {
|
|
587
|
+
label?: string;
|
|
588
|
+
description?: string;
|
|
589
|
+
error?: string;
|
|
590
|
+
size?: FieldSize;
|
|
591
|
+
invalid?: boolean;
|
|
592
|
+
disabled?: boolean;
|
|
593
|
+
id?: string;
|
|
594
|
+
modelValue?: string;
|
|
595
|
+
};
|
|
596
|
+
|
|
597
|
+
/**
|
|
598
|
+
* Labelled native `<select>`. Supports `v-model`.
|
|
599
|
+
* The default slot holds the `<option>` elements, so the browser's own popup
|
|
600
|
+
* and keyboard behaviour is preserved.
|
|
601
|
+
* Slots: default (options), `label`, `description`, `error`.
|
|
602
|
+
*/
|
|
603
|
+
declare const Select: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
604
|
+
label: {
|
|
605
|
+
type: StringConstructor;
|
|
606
|
+
default: undefined;
|
|
607
|
+
};
|
|
608
|
+
description: {
|
|
609
|
+
type: StringConstructor;
|
|
610
|
+
default: undefined;
|
|
611
|
+
};
|
|
612
|
+
error: {
|
|
613
|
+
type: StringConstructor;
|
|
614
|
+
default: undefined;
|
|
615
|
+
};
|
|
616
|
+
size: {
|
|
617
|
+
type: PropType<FieldSize>;
|
|
618
|
+
default: string;
|
|
619
|
+
};
|
|
620
|
+
invalid: {
|
|
621
|
+
type: PropType<boolean | undefined>;
|
|
622
|
+
default: undefined;
|
|
623
|
+
};
|
|
624
|
+
disabled: {
|
|
625
|
+
type: BooleanConstructor;
|
|
626
|
+
default: boolean;
|
|
627
|
+
};
|
|
628
|
+
id: {
|
|
629
|
+
type: StringConstructor;
|
|
630
|
+
default: undefined;
|
|
631
|
+
};
|
|
632
|
+
/** Rendered as a leading empty `<option>`. */
|
|
633
|
+
placeholder: {
|
|
634
|
+
type: StringConstructor;
|
|
635
|
+
default: undefined;
|
|
636
|
+
};
|
|
637
|
+
modelValue: {
|
|
638
|
+
type: StringConstructor;
|
|
639
|
+
default: undefined;
|
|
640
|
+
};
|
|
641
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
642
|
+
[key: string]: any;
|
|
643
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
644
|
+
label: {
|
|
645
|
+
type: StringConstructor;
|
|
646
|
+
default: undefined;
|
|
647
|
+
};
|
|
648
|
+
description: {
|
|
649
|
+
type: StringConstructor;
|
|
650
|
+
default: undefined;
|
|
651
|
+
};
|
|
652
|
+
error: {
|
|
653
|
+
type: StringConstructor;
|
|
654
|
+
default: undefined;
|
|
655
|
+
};
|
|
656
|
+
size: {
|
|
657
|
+
type: PropType<FieldSize>;
|
|
658
|
+
default: string;
|
|
659
|
+
};
|
|
660
|
+
invalid: {
|
|
661
|
+
type: PropType<boolean | undefined>;
|
|
662
|
+
default: undefined;
|
|
663
|
+
};
|
|
664
|
+
disabled: {
|
|
665
|
+
type: BooleanConstructor;
|
|
666
|
+
default: boolean;
|
|
667
|
+
};
|
|
668
|
+
id: {
|
|
669
|
+
type: StringConstructor;
|
|
670
|
+
default: undefined;
|
|
671
|
+
};
|
|
672
|
+
/** Rendered as a leading empty `<option>`. */
|
|
673
|
+
placeholder: {
|
|
674
|
+
type: StringConstructor;
|
|
675
|
+
default: undefined;
|
|
676
|
+
};
|
|
677
|
+
modelValue: {
|
|
678
|
+
type: StringConstructor;
|
|
679
|
+
default: undefined;
|
|
680
|
+
};
|
|
681
|
+
}>> & Readonly<{
|
|
682
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
683
|
+
}>, {
|
|
684
|
+
label: string;
|
|
685
|
+
error: string;
|
|
686
|
+
invalid: boolean | undefined;
|
|
687
|
+
disabled: boolean;
|
|
688
|
+
placeholder: string;
|
|
689
|
+
size: Level;
|
|
690
|
+
description: string;
|
|
691
|
+
id: string;
|
|
692
|
+
modelValue: string;
|
|
693
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
694
|
+
type SelectProps = {
|
|
695
|
+
label?: string;
|
|
696
|
+
description?: string;
|
|
697
|
+
error?: string;
|
|
698
|
+
size?: FieldSize;
|
|
699
|
+
invalid?: boolean;
|
|
700
|
+
disabled?: boolean;
|
|
701
|
+
id?: string;
|
|
702
|
+
placeholder?: string;
|
|
703
|
+
modelValue?: string;
|
|
704
|
+
};
|
|
705
|
+
|
|
706
|
+
/**
|
|
707
|
+
* Native checkbox with a token-backed label row. Supports `v-model`.
|
|
708
|
+
* The check mark uses `accent-color`, so platform behaviour is untouched.
|
|
709
|
+
* Slots: `label`, `description`, `error`.
|
|
710
|
+
*/
|
|
711
|
+
declare const Checkbox: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
712
|
+
label: {
|
|
713
|
+
type: StringConstructor;
|
|
714
|
+
default: undefined;
|
|
715
|
+
};
|
|
716
|
+
description: {
|
|
717
|
+
type: StringConstructor;
|
|
718
|
+
default: undefined;
|
|
719
|
+
};
|
|
720
|
+
error: {
|
|
721
|
+
type: StringConstructor;
|
|
722
|
+
default: undefined;
|
|
723
|
+
};
|
|
724
|
+
invalid: {
|
|
725
|
+
type: PropType<boolean | undefined>;
|
|
726
|
+
default: undefined;
|
|
727
|
+
};
|
|
728
|
+
disabled: {
|
|
729
|
+
type: BooleanConstructor;
|
|
730
|
+
default: boolean;
|
|
731
|
+
};
|
|
732
|
+
id: {
|
|
733
|
+
type: StringConstructor;
|
|
734
|
+
default: undefined;
|
|
735
|
+
};
|
|
736
|
+
modelValue: {
|
|
737
|
+
type: PropType<boolean | undefined>;
|
|
738
|
+
default: undefined;
|
|
739
|
+
};
|
|
740
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
741
|
+
[key: string]: any;
|
|
742
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
743
|
+
label: {
|
|
744
|
+
type: StringConstructor;
|
|
745
|
+
default: undefined;
|
|
746
|
+
};
|
|
747
|
+
description: {
|
|
748
|
+
type: StringConstructor;
|
|
749
|
+
default: undefined;
|
|
750
|
+
};
|
|
751
|
+
error: {
|
|
752
|
+
type: StringConstructor;
|
|
753
|
+
default: undefined;
|
|
754
|
+
};
|
|
755
|
+
invalid: {
|
|
756
|
+
type: PropType<boolean | undefined>;
|
|
757
|
+
default: undefined;
|
|
758
|
+
};
|
|
759
|
+
disabled: {
|
|
760
|
+
type: BooleanConstructor;
|
|
761
|
+
default: boolean;
|
|
762
|
+
};
|
|
763
|
+
id: {
|
|
764
|
+
type: StringConstructor;
|
|
765
|
+
default: undefined;
|
|
766
|
+
};
|
|
767
|
+
modelValue: {
|
|
768
|
+
type: PropType<boolean | undefined>;
|
|
769
|
+
default: undefined;
|
|
770
|
+
};
|
|
771
|
+
}>> & Readonly<{
|
|
772
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
773
|
+
}>, {
|
|
774
|
+
label: string;
|
|
775
|
+
error: string;
|
|
776
|
+
invalid: boolean | undefined;
|
|
777
|
+
disabled: boolean;
|
|
778
|
+
description: string;
|
|
779
|
+
id: string;
|
|
780
|
+
modelValue: boolean | undefined;
|
|
781
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
782
|
+
type CheckboxProps = {
|
|
783
|
+
label?: string;
|
|
784
|
+
description?: string;
|
|
785
|
+
error?: string;
|
|
786
|
+
invalid?: boolean;
|
|
787
|
+
disabled?: boolean;
|
|
788
|
+
id?: string;
|
|
789
|
+
modelValue?: boolean;
|
|
790
|
+
};
|
|
791
|
+
|
|
792
|
+
export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, Card, type CardProps, type CardTone, Checkbox, type CheckboxProps, Divider, type DividerOrientation, type DividerProps, type FeedbackTone, type FieldSize, type Level, Link, type LinkProps, type LinkTone, type LinkUnderline, MasonProvider, type MasonProviderProps, type MasonTheme, type RadiusLevel, Select, type SelectProps, type ShadowLevel, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackAlign, type StackDirection, type StackJustify, type StackProps, Text, type TextAlign, type TextElement, TextField, type TextFieldProps, type TextProps, type TextTone, type TextVariant };
|