@foldstryx/kitchen-sink 0.1.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 +21 -0
- package/README.md +12 -0
- package/dist/index.d.ts +1383 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +726 -0
- package/dist/index.js.map +1 -0
- package/package.json +47 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,726 @@
|
|
|
1
|
+
import { Option, Schema as S } from 'effect';
|
|
2
|
+
import { Command, Runtime, Submodel } from 'foldkit';
|
|
3
|
+
import { html } from 'foldkit/html';
|
|
4
|
+
import { Alert, Attention, Avatar, Badge, Button, Card, Checkbox, Details, Dialog, DropdownMenu, EmptyState, Field, Grid, Input, ListRow, LoadingPanel, NativeSelect, Page, Pagination, Row, Separator, Stack, Stat, Switch, Table, Tabs, Text, Toast, Tooltip, elAttrs, sxAttrs, } from '@foldstryx/foldkit';
|
|
5
|
+
import { layoutStyles, tooltipStyles } from '@foldstryx/styles';
|
|
6
|
+
const DemoTabs = Tabs.create();
|
|
7
|
+
const DemoMenu = DropdownMenu.create();
|
|
8
|
+
const DemoToast = Toast.create();
|
|
9
|
+
export const Model = S.Struct({
|
|
10
|
+
clicks: S.Finite,
|
|
11
|
+
detailsOpen: S.Boolean,
|
|
12
|
+
dialog: Dialog.Model,
|
|
13
|
+
email: S.String,
|
|
14
|
+
filter: S.String,
|
|
15
|
+
includeInactive: S.Boolean,
|
|
16
|
+
kind: S.String,
|
|
17
|
+
menu: DropdownMenu.Model,
|
|
18
|
+
notifications: S.Boolean,
|
|
19
|
+
page: S.Finite,
|
|
20
|
+
tabs: Tabs.Model,
|
|
21
|
+
toast: DemoToast.Model,
|
|
22
|
+
tooltip: Tooltip.Model,
|
|
23
|
+
});
|
|
24
|
+
export const Clicked = () => ({ _tag: 'Clicked' });
|
|
25
|
+
export const FieldChanged = (field, value) => ({ _tag: 'FieldChanged', field, value });
|
|
26
|
+
export const IncludeInactiveChanged = (checked) => ({
|
|
27
|
+
_tag: 'IncludeInactiveChanged',
|
|
28
|
+
checked,
|
|
29
|
+
});
|
|
30
|
+
export const NotificationsChanged = (checked) => ({
|
|
31
|
+
_tag: 'NotificationsChanged',
|
|
32
|
+
checked,
|
|
33
|
+
});
|
|
34
|
+
export const DetailsToggled = (isOpen) => ({
|
|
35
|
+
_tag: 'DetailsToggled',
|
|
36
|
+
isOpen,
|
|
37
|
+
});
|
|
38
|
+
export const PageChanged = (delta) => ({
|
|
39
|
+
_tag: 'PageChanged',
|
|
40
|
+
delta,
|
|
41
|
+
});
|
|
42
|
+
export const GotTooltipMessage = (message) => ({
|
|
43
|
+
_tag: 'GotTooltipMessage',
|
|
44
|
+
message,
|
|
45
|
+
});
|
|
46
|
+
export const GotDialogMessage = (message) => ({
|
|
47
|
+
_tag: 'GotDialogMessage',
|
|
48
|
+
message,
|
|
49
|
+
});
|
|
50
|
+
export const GotTabsMessage = (message) => ({
|
|
51
|
+
_tag: 'GotTabsMessage',
|
|
52
|
+
message,
|
|
53
|
+
});
|
|
54
|
+
export const GotMenuMessage = (message) => ({
|
|
55
|
+
_tag: 'GotMenuMessage',
|
|
56
|
+
message,
|
|
57
|
+
});
|
|
58
|
+
export const GotToastMessage = (message) => ({
|
|
59
|
+
_tag: 'GotToastMessage',
|
|
60
|
+
message,
|
|
61
|
+
});
|
|
62
|
+
export const ShowToast = (variant) => ({
|
|
63
|
+
_tag: 'ShowToast',
|
|
64
|
+
variant,
|
|
65
|
+
});
|
|
66
|
+
export const init = () => [
|
|
67
|
+
{
|
|
68
|
+
clicks: 0,
|
|
69
|
+
detailsOpen: false,
|
|
70
|
+
dialog: Dialog.init({ id: 'catalog-dialog' }),
|
|
71
|
+
email: '',
|
|
72
|
+
filter: '',
|
|
73
|
+
includeInactive: false,
|
|
74
|
+
kind: 'all',
|
|
75
|
+
menu: DropdownMenu.init({ id: 'catalog-menu' }),
|
|
76
|
+
notifications: false,
|
|
77
|
+
page: 1,
|
|
78
|
+
tabs: Tabs.init({ id: 'catalog-tabs' }),
|
|
79
|
+
toast: DemoToast.init({ id: 'catalog-toast' }),
|
|
80
|
+
tooltip: Tooltip.init('catalog-tooltip'),
|
|
81
|
+
},
|
|
82
|
+
[],
|
|
83
|
+
];
|
|
84
|
+
export const update = (model, message) => {
|
|
85
|
+
switch (message._tag) {
|
|
86
|
+
case 'GotTooltipMessage': {
|
|
87
|
+
const [tooltip, commands] = Tooltip.update(model.tooltip, message.message);
|
|
88
|
+
return [
|
|
89
|
+
{ ...model, tooltip },
|
|
90
|
+
Command.mapMessages(commands, m => GotTooltipMessage(m)),
|
|
91
|
+
];
|
|
92
|
+
}
|
|
93
|
+
case 'GotDialogMessage': {
|
|
94
|
+
const [dialog, commands] = Dialog.update(model.dialog, message.message);
|
|
95
|
+
return [
|
|
96
|
+
{ ...model, dialog },
|
|
97
|
+
Command.mapMessages(commands, m => GotDialogMessage(m)),
|
|
98
|
+
];
|
|
99
|
+
}
|
|
100
|
+
case 'GotTabsMessage': {
|
|
101
|
+
const [tabs, commands] = DemoTabs.update(model.tabs, message.message);
|
|
102
|
+
return [
|
|
103
|
+
{ ...model, tabs },
|
|
104
|
+
Command.mapMessages(commands, m => GotTabsMessage(m)),
|
|
105
|
+
];
|
|
106
|
+
}
|
|
107
|
+
case 'GotMenuMessage': {
|
|
108
|
+
const [menu, commands] = DemoMenu.update(model.menu, message.message);
|
|
109
|
+
return [
|
|
110
|
+
{ ...model, menu },
|
|
111
|
+
Command.mapMessages(commands, m => GotMenuMessage(m)),
|
|
112
|
+
];
|
|
113
|
+
}
|
|
114
|
+
case 'GotToastMessage': {
|
|
115
|
+
const [toast, commands] = DemoToast.update(model.toast, message.message);
|
|
116
|
+
return [
|
|
117
|
+
{ ...model, toast },
|
|
118
|
+
Command.mapMessages(commands, m => GotToastMessage(m)),
|
|
119
|
+
];
|
|
120
|
+
}
|
|
121
|
+
case 'ShowToast': {
|
|
122
|
+
const [toast, commands] = DemoToast.show(model.toast, {
|
|
123
|
+
payload: {
|
|
124
|
+
title: 'Notification',
|
|
125
|
+
maybeDescription: Option.some('A toast was shown.'),
|
|
126
|
+
},
|
|
127
|
+
variant: message.variant,
|
|
128
|
+
});
|
|
129
|
+
return [
|
|
130
|
+
{ ...model, toast },
|
|
131
|
+
Command.mapMessages(commands, m => GotToastMessage(m)),
|
|
132
|
+
];
|
|
133
|
+
}
|
|
134
|
+
case 'Clicked':
|
|
135
|
+
return [{ ...model, clicks: model.clicks + 1 }, []];
|
|
136
|
+
case 'FieldChanged':
|
|
137
|
+
return [{ ...model, [message.field]: message.value }, []];
|
|
138
|
+
case 'IncludeInactiveChanged':
|
|
139
|
+
return [{ ...model, includeInactive: message.checked }, []];
|
|
140
|
+
case 'NotificationsChanged':
|
|
141
|
+
return [{ ...model, notifications: message.checked }, []];
|
|
142
|
+
case 'DetailsToggled':
|
|
143
|
+
return [{ ...model, detailsOpen: message.isOpen }, []];
|
|
144
|
+
case 'PageChanged':
|
|
145
|
+
return [
|
|
146
|
+
{
|
|
147
|
+
...model,
|
|
148
|
+
page: Math.min(Math.max(model.page + message.delta, 1), 5),
|
|
149
|
+
},
|
|
150
|
+
[],
|
|
151
|
+
];
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
export const view = Submodel.defineView(model => {
|
|
155
|
+
const h = html();
|
|
156
|
+
return h.div(elAttrs(sxAttrs(h, layoutStyles.catalogShell)), [
|
|
157
|
+
Stack.view({
|
|
158
|
+
gap: 'lg',
|
|
159
|
+
children: [
|
|
160
|
+
Text.view({
|
|
161
|
+
variant: 'title',
|
|
162
|
+
as: 'h1',
|
|
163
|
+
children: 'Foldstryx catalog',
|
|
164
|
+
}),
|
|
165
|
+
Text.view({
|
|
166
|
+
variant: 'muted',
|
|
167
|
+
children: 'First primitives: layout, type, controls, and chrome.',
|
|
168
|
+
}),
|
|
169
|
+
Card.section({
|
|
170
|
+
title: 'Typography',
|
|
171
|
+
description: 'Astryx-faithful type roles.',
|
|
172
|
+
padded: true,
|
|
173
|
+
children: [
|
|
174
|
+
Text.view({ children: 'Body text for a readable interface.' }),
|
|
175
|
+
Text.view({ variant: 'body', children: 'Label text' }),
|
|
176
|
+
Text.view({ variant: 'muted', children: 'Supporting text' }),
|
|
177
|
+
Text.view({
|
|
178
|
+
variant: 'mono',
|
|
179
|
+
children: 'const font = "Maple Mono NL NF"',
|
|
180
|
+
}),
|
|
181
|
+
],
|
|
182
|
+
}),
|
|
183
|
+
Card.section({
|
|
184
|
+
title: 'Stack and Row',
|
|
185
|
+
description: 'Token-based spacing and alignment.',
|
|
186
|
+
padded: true,
|
|
187
|
+
children: [
|
|
188
|
+
Row.view({
|
|
189
|
+
align: 'wrap',
|
|
190
|
+
children: [
|
|
191
|
+
Text.view({ children: 'Row item' }),
|
|
192
|
+
Text.view({ children: 'Another item' }),
|
|
193
|
+
],
|
|
194
|
+
}),
|
|
195
|
+
Stack.view({
|
|
196
|
+
gap: 'sm',
|
|
197
|
+
children: [
|
|
198
|
+
Text.view({ children: 'Stack item' }),
|
|
199
|
+
Text.view({ children: 'Another item' }),
|
|
200
|
+
],
|
|
201
|
+
}),
|
|
202
|
+
],
|
|
203
|
+
}),
|
|
204
|
+
Card.section({
|
|
205
|
+
title: 'Page',
|
|
206
|
+
description: 'Header, content, and footer regions compose a shell.',
|
|
207
|
+
padded: true,
|
|
208
|
+
children: [
|
|
209
|
+
Page.shell({
|
|
210
|
+
header: Page.header({
|
|
211
|
+
title: 'Page title',
|
|
212
|
+
description: 'Supporting description for the page.',
|
|
213
|
+
actions: [
|
|
214
|
+
Button.view({
|
|
215
|
+
label: 'Action',
|
|
216
|
+
size: 'sm',
|
|
217
|
+
variant: 'secondary',
|
|
218
|
+
onClick: Clicked(),
|
|
219
|
+
}),
|
|
220
|
+
],
|
|
221
|
+
}),
|
|
222
|
+
content: [
|
|
223
|
+
Text.view({
|
|
224
|
+
children: 'Page content sits between the header and footer.',
|
|
225
|
+
}),
|
|
226
|
+
],
|
|
227
|
+
footer: Page.footer([
|
|
228
|
+
Text.view({ variant: 'mutedSm', children: 'Footer region' }),
|
|
229
|
+
]),
|
|
230
|
+
}),
|
|
231
|
+
],
|
|
232
|
+
}),
|
|
233
|
+
Card.section({
|
|
234
|
+
title: 'Grid',
|
|
235
|
+
description: 'Responsive columns with a token gap scale.',
|
|
236
|
+
padded: true,
|
|
237
|
+
children: [
|
|
238
|
+
Grid.view({
|
|
239
|
+
columns: 3,
|
|
240
|
+
children: [
|
|
241
|
+
Text.view({ children: 'Cell one' }),
|
|
242
|
+
Text.view({ children: 'Cell two' }),
|
|
243
|
+
Text.view({ children: 'Cell three' }),
|
|
244
|
+
],
|
|
245
|
+
}),
|
|
246
|
+
],
|
|
247
|
+
}),
|
|
248
|
+
Card.section({
|
|
249
|
+
title: 'Avatar',
|
|
250
|
+
description: 'Sizes, shapes, image, and fallback labeling.',
|
|
251
|
+
padded: true,
|
|
252
|
+
children: [
|
|
253
|
+
Row.view({
|
|
254
|
+
align: 'wrap',
|
|
255
|
+
children: [
|
|
256
|
+
Avatar.view({ fallback: 'JD', label: 'Jane Doe' }),
|
|
257
|
+
Avatar.view({ fallback: 'AB', size: 'sm' }),
|
|
258
|
+
Avatar.view({ fallback: 'CD', size: 'lg' }),
|
|
259
|
+
Avatar.view({ fallback: 'EF', shape: 'rounded' }),
|
|
260
|
+
Avatar.view({
|
|
261
|
+
fallback: 'GH',
|
|
262
|
+
imageSrc: 'data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22><rect width=%2232%22 height=%2232%22 fill=%22%230064E0%22/></svg>',
|
|
263
|
+
label: 'With image',
|
|
264
|
+
}),
|
|
265
|
+
],
|
|
266
|
+
}),
|
|
267
|
+
],
|
|
268
|
+
}),
|
|
269
|
+
Card.section({
|
|
270
|
+
title: 'Buttons',
|
|
271
|
+
description: `Click count: ${model.clicks}`,
|
|
272
|
+
padded: true,
|
|
273
|
+
children: [
|
|
274
|
+
Row.view({
|
|
275
|
+
align: 'wrap',
|
|
276
|
+
children: [
|
|
277
|
+
Button.view({ label: 'Primary', onClick: Clicked() }),
|
|
278
|
+
Button.view({ label: 'Secondary', variant: 'secondary' }),
|
|
279
|
+
Button.view({ label: 'Ghost', variant: 'ghost' }),
|
|
280
|
+
Button.view({ label: 'Danger', variant: 'danger' }),
|
|
281
|
+
Button.view({ label: 'Small', size: 'sm' }),
|
|
282
|
+
Button.view({ label: 'Disabled', isDisabled: true }),
|
|
283
|
+
],
|
|
284
|
+
}),
|
|
285
|
+
],
|
|
286
|
+
}),
|
|
287
|
+
Card.section({
|
|
288
|
+
title: 'Card',
|
|
289
|
+
description: 'Root, header, and body slots compose surface chrome.',
|
|
290
|
+
padded: true,
|
|
291
|
+
children: [
|
|
292
|
+
Text.view({
|
|
293
|
+
children: 'Cards provide a neutral surface with border, radius, and elevation.',
|
|
294
|
+
}),
|
|
295
|
+
],
|
|
296
|
+
}),
|
|
297
|
+
Card.section({
|
|
298
|
+
title: 'Form',
|
|
299
|
+
description: 'Labeled controls with shared Astryx form styling.',
|
|
300
|
+
padded: true,
|
|
301
|
+
children: [
|
|
302
|
+
Input.view({
|
|
303
|
+
id: 'catalog-email',
|
|
304
|
+
label: 'Email',
|
|
305
|
+
value: model.email,
|
|
306
|
+
onInput: value => FieldChanged('email', value),
|
|
307
|
+
placeholder: 'name@example.com',
|
|
308
|
+
description: 'We will never share your email.',
|
|
309
|
+
}),
|
|
310
|
+
Input.view({
|
|
311
|
+
id: 'catalog-disabled',
|
|
312
|
+
label: 'Disabled',
|
|
313
|
+
value: 'Read only',
|
|
314
|
+
isDisabled: true,
|
|
315
|
+
}),
|
|
316
|
+
Field.group({
|
|
317
|
+
orientation: 'horizontal',
|
|
318
|
+
children: [
|
|
319
|
+
Checkbox.control({
|
|
320
|
+
id: 'catalog-terms',
|
|
321
|
+
checked: model.includeInactive,
|
|
322
|
+
label: 'Accept terms',
|
|
323
|
+
onChange: checked => IncludeInactiveChanged(checked),
|
|
324
|
+
}),
|
|
325
|
+
],
|
|
326
|
+
}),
|
|
327
|
+
h.submodel({
|
|
328
|
+
slotId: 'catalog-notifications',
|
|
329
|
+
model: {
|
|
330
|
+
id: 'catalog-notifications',
|
|
331
|
+
isChecked: model.notifications,
|
|
332
|
+
},
|
|
333
|
+
view: Switch.view,
|
|
334
|
+
viewInputs: Switch.styledViewInputs({ id: 'catalog-notifications', isChecked: model.notifications }, {
|
|
335
|
+
label: 'Notifications',
|
|
336
|
+
description: 'Enable notifications.',
|
|
337
|
+
}),
|
|
338
|
+
toParentMessage: message => message._tag === 'Toggled'
|
|
339
|
+
? NotificationsChanged(!model.notifications)
|
|
340
|
+
: NotificationsChanged(message.isChecked),
|
|
341
|
+
}),
|
|
342
|
+
Separator.view(),
|
|
343
|
+
],
|
|
344
|
+
}),
|
|
345
|
+
Card.section({
|
|
346
|
+
title: 'Dense controls',
|
|
347
|
+
description: 'Compact inputs and native select for filters.',
|
|
348
|
+
padded: true,
|
|
349
|
+
children: [
|
|
350
|
+
Row.view({
|
|
351
|
+
align: 'wrap',
|
|
352
|
+
children: [
|
|
353
|
+
Input.control({
|
|
354
|
+
id: 'catalog-filter',
|
|
355
|
+
ariaLabel: 'Filter',
|
|
356
|
+
density: 'compact',
|
|
357
|
+
width: 'md',
|
|
358
|
+
placeholder: 'Filter…',
|
|
359
|
+
value: model.filter,
|
|
360
|
+
onInput: value => FieldChanged('filter', value),
|
|
361
|
+
label: 'Filter',
|
|
362
|
+
}),
|
|
363
|
+
NativeSelect.view({
|
|
364
|
+
id: 'catalog-kind',
|
|
365
|
+
ariaLabel: 'Kind',
|
|
366
|
+
density: 'compact',
|
|
367
|
+
width: 'sm',
|
|
368
|
+
value: model.kind,
|
|
369
|
+
options: [
|
|
370
|
+
{ value: 'all', label: 'All kinds' },
|
|
371
|
+
{ value: 'active', label: 'Active' },
|
|
372
|
+
],
|
|
373
|
+
onChange: value => FieldChanged('kind', value),
|
|
374
|
+
label: 'Kind',
|
|
375
|
+
}),
|
|
376
|
+
],
|
|
377
|
+
}),
|
|
378
|
+
],
|
|
379
|
+
}),
|
|
380
|
+
Card.section({
|
|
381
|
+
title: 'Badges',
|
|
382
|
+
description: 'Status and metadata chips across sentiment variants.',
|
|
383
|
+
padded: true,
|
|
384
|
+
children: [
|
|
385
|
+
Row.view({
|
|
386
|
+
align: 'wrap',
|
|
387
|
+
children: [
|
|
388
|
+
Badge.view({ label: 'Default' }),
|
|
389
|
+
Badge.view({ label: 'Secondary', variant: 'secondary' }),
|
|
390
|
+
Badge.view({ label: 'Destructive', variant: 'destructive' }),
|
|
391
|
+
Badge.view({ label: 'Outline', variant: 'outline' }),
|
|
392
|
+
Badge.view({ label: 'Success', variant: 'success' }),
|
|
393
|
+
Badge.view({ label: 'Warning', variant: 'warning' }),
|
|
394
|
+
Badge.view({ label: 'Info', variant: 'info' }),
|
|
395
|
+
Badge.view({ label: 'Large', size: 'lg' }),
|
|
396
|
+
],
|
|
397
|
+
}),
|
|
398
|
+
],
|
|
399
|
+
}),
|
|
400
|
+
Card.section({
|
|
401
|
+
title: 'Alerts',
|
|
402
|
+
description: 'Role=alert banners with optional action slots.',
|
|
403
|
+
padded: true,
|
|
404
|
+
children: [
|
|
405
|
+
Stack.view({
|
|
406
|
+
gap: 'sm',
|
|
407
|
+
children: [
|
|
408
|
+
Alert.view({
|
|
409
|
+
title: 'Default',
|
|
410
|
+
body: 'A neutral informational banner.',
|
|
411
|
+
}),
|
|
412
|
+
Alert.view({
|
|
413
|
+
variant: 'destructive',
|
|
414
|
+
title: 'Error',
|
|
415
|
+
body: 'Something went wrong.',
|
|
416
|
+
action: Button.view({
|
|
417
|
+
label: 'Dismiss',
|
|
418
|
+
variant: 'ghost',
|
|
419
|
+
size: 'sm',
|
|
420
|
+
onClick: Clicked(),
|
|
421
|
+
}),
|
|
422
|
+
}),
|
|
423
|
+
Alert.view({
|
|
424
|
+
variant: 'warning',
|
|
425
|
+
body: 'Review required before continuing.',
|
|
426
|
+
compact: true,
|
|
427
|
+
}),
|
|
428
|
+
Alert.view({
|
|
429
|
+
variant: 'success',
|
|
430
|
+
body: 'Import complete.',
|
|
431
|
+
}),
|
|
432
|
+
],
|
|
433
|
+
}),
|
|
434
|
+
],
|
|
435
|
+
}),
|
|
436
|
+
Card.section({
|
|
437
|
+
title: 'Feedback',
|
|
438
|
+
description: 'Loading, empty, and attention surfaces.',
|
|
439
|
+
padded: true,
|
|
440
|
+
children: [
|
|
441
|
+
Stack.view({
|
|
442
|
+
gap: 'sm',
|
|
443
|
+
children: [
|
|
444
|
+
LoadingPanel.view({
|
|
445
|
+
message: 'Loading panel…',
|
|
446
|
+
card: false,
|
|
447
|
+
}),
|
|
448
|
+
EmptyState.view({
|
|
449
|
+
title: 'Nothing here',
|
|
450
|
+
message: 'Empty state with an optional action.',
|
|
451
|
+
action: Button.view({
|
|
452
|
+
label: 'Create',
|
|
453
|
+
size: 'sm',
|
|
454
|
+
variant: 'ghost',
|
|
455
|
+
onClick: Clicked(),
|
|
456
|
+
}),
|
|
457
|
+
card: false,
|
|
458
|
+
}),
|
|
459
|
+
Attention.view({
|
|
460
|
+
title: 'Attention',
|
|
461
|
+
body: 'Soft callout for inline notices (not role=alert).',
|
|
462
|
+
}),
|
|
463
|
+
],
|
|
464
|
+
}),
|
|
465
|
+
],
|
|
466
|
+
}),
|
|
467
|
+
Card.section({
|
|
468
|
+
title: 'Tooltip',
|
|
469
|
+
description: 'Hover or focus the trigger to reveal the panel.',
|
|
470
|
+
padded: true,
|
|
471
|
+
children: [
|
|
472
|
+
h.submodel({
|
|
473
|
+
slotId: 'catalog-tooltip',
|
|
474
|
+
model: model.tooltip,
|
|
475
|
+
view: Tooltip.view,
|
|
476
|
+
viewInputs: {
|
|
477
|
+
anchor: { placement: 'top', gap: 8, padding: 8 },
|
|
478
|
+
enabled: true,
|
|
479
|
+
toView: ({ trigger, panel, isVisible }) => h.div(elAttrs(sxAttrs(h, layoutStyles.rowCenterGap2)), [
|
|
480
|
+
h.button(elAttrs(trigger), [
|
|
481
|
+
'Hover or focus me',
|
|
482
|
+
]),
|
|
483
|
+
h.div(elAttrs(sxAttrs(h, tooltipStyles.content, isVisible ? undefined : tooltipStyles.contentHidden), panel), ['Tooltip content']),
|
|
484
|
+
]),
|
|
485
|
+
},
|
|
486
|
+
toParentMessage: message => GotTooltipMessage(message),
|
|
487
|
+
}),
|
|
488
|
+
],
|
|
489
|
+
}),
|
|
490
|
+
Card.section({
|
|
491
|
+
title: 'Data display',
|
|
492
|
+
description: 'Tables, stats, list rows, pagination, and disclosures.',
|
|
493
|
+
padded: true,
|
|
494
|
+
children: [
|
|
495
|
+
Stack.view({
|
|
496
|
+
gap: 'sm',
|
|
497
|
+
children: [
|
|
498
|
+
Table.wrap([
|
|
499
|
+
Table.table([
|
|
500
|
+
Table.thead([
|
|
501
|
+
Table.tr({
|
|
502
|
+
children: [
|
|
503
|
+
Table.th('Project'),
|
|
504
|
+
Table.th({ align: 'right', children: 'Value' }),
|
|
505
|
+
Table.th({ align: 'right', children: 'Status' }),
|
|
506
|
+
],
|
|
507
|
+
}),
|
|
508
|
+
]),
|
|
509
|
+
Table.tbody([
|
|
510
|
+
Table.tr({
|
|
511
|
+
children: [
|
|
512
|
+
Table.td('Foldstryx'),
|
|
513
|
+
Table.td({ align: 'right', children: '1,240' }),
|
|
514
|
+
Table.td({
|
|
515
|
+
align: 'right',
|
|
516
|
+
tone: 'success',
|
|
517
|
+
children: 'Active',
|
|
518
|
+
}),
|
|
519
|
+
],
|
|
520
|
+
}),
|
|
521
|
+
Table.tr({
|
|
522
|
+
children: [
|
|
523
|
+
Table.td('Sidebar'),
|
|
524
|
+
Table.td({ align: 'right', children: '860' }),
|
|
525
|
+
Table.td({
|
|
526
|
+
align: 'right',
|
|
527
|
+
tone: 'warning',
|
|
528
|
+
children: 'Review',
|
|
529
|
+
}),
|
|
530
|
+
],
|
|
531
|
+
}),
|
|
532
|
+
Table.tr({
|
|
533
|
+
presentation: 'summary',
|
|
534
|
+
children: [
|
|
535
|
+
Table.td('Total'),
|
|
536
|
+
Table.td({ align: 'right', children: '2,100' }),
|
|
537
|
+
Table.td({ align: 'right', children: '' }),
|
|
538
|
+
],
|
|
539
|
+
}),
|
|
540
|
+
]),
|
|
541
|
+
]),
|
|
542
|
+
]),
|
|
543
|
+
Row.view({
|
|
544
|
+
align: 'wrap',
|
|
545
|
+
children: [
|
|
546
|
+
Stat.card({
|
|
547
|
+
label: 'Active users',
|
|
548
|
+
state: new Stat.Ready({ value: '1,240' }),
|
|
549
|
+
}),
|
|
550
|
+
Stat.card({
|
|
551
|
+
label: 'Error rate',
|
|
552
|
+
state: new Stat.Failed({ message: 'Unavailable' }),
|
|
553
|
+
}),
|
|
554
|
+
Stat.card({
|
|
555
|
+
label: 'Requests',
|
|
556
|
+
state: new Stat.Loading(),
|
|
557
|
+
}),
|
|
558
|
+
],
|
|
559
|
+
}),
|
|
560
|
+
ListRow.view({
|
|
561
|
+
title: 'Recent activity',
|
|
562
|
+
meta: ['Updated 2 min ago'],
|
|
563
|
+
actions: [
|
|
564
|
+
Button.view({
|
|
565
|
+
label: 'View',
|
|
566
|
+
size: 'sm',
|
|
567
|
+
variant: 'ghost',
|
|
568
|
+
onClick: Clicked(),
|
|
569
|
+
}),
|
|
570
|
+
],
|
|
571
|
+
}),
|
|
572
|
+
Pagination.view({
|
|
573
|
+
status: `Page ${model.page} of 5`,
|
|
574
|
+
previous: Button.view({
|
|
575
|
+
label: 'Previous',
|
|
576
|
+
variant: 'secondary',
|
|
577
|
+
size: 'sm',
|
|
578
|
+
onClick: PageChanged(-1),
|
|
579
|
+
isDisabled: model.page <= 1,
|
|
580
|
+
}),
|
|
581
|
+
next: Button.view({
|
|
582
|
+
label: 'Next',
|
|
583
|
+
variant: 'secondary',
|
|
584
|
+
size: 'sm',
|
|
585
|
+
onClick: PageChanged(1),
|
|
586
|
+
isDisabled: model.page >= 5,
|
|
587
|
+
}),
|
|
588
|
+
}),
|
|
589
|
+
Details.view({
|
|
590
|
+
summary: 'More about this data',
|
|
591
|
+
children: [
|
|
592
|
+
Text.view({
|
|
593
|
+
variant: 'muted',
|
|
594
|
+
children: 'Disclosure body with supporting detail.',
|
|
595
|
+
}),
|
|
596
|
+
],
|
|
597
|
+
open: model.detailsOpen,
|
|
598
|
+
onToggle: isOpen => DetailsToggled(isOpen),
|
|
599
|
+
}),
|
|
600
|
+
],
|
|
601
|
+
}),
|
|
602
|
+
],
|
|
603
|
+
}),
|
|
604
|
+
Card.section({
|
|
605
|
+
title: 'Dialog',
|
|
606
|
+
description: 'Modal surface with accessible labeling and dismissal.',
|
|
607
|
+
padded: true,
|
|
608
|
+
children: [
|
|
609
|
+
Button.view({
|
|
610
|
+
label: 'Open dialog',
|
|
611
|
+
onClick: GotDialogMessage(Dialog.RequestedOpen()),
|
|
612
|
+
}),
|
|
613
|
+
h.submodel({
|
|
614
|
+
slotId: 'catalog-dialog',
|
|
615
|
+
model: model.dialog,
|
|
616
|
+
view: Dialog.view,
|
|
617
|
+
viewInputs: Dialog.styledViewInputs({
|
|
618
|
+
id: 'catalog-dialog',
|
|
619
|
+
title: 'Confirm action',
|
|
620
|
+
description: 'Controlled dialog with accessible labeling.',
|
|
621
|
+
showClose: true,
|
|
622
|
+
onRequestClose: message => GotDialogMessage(message),
|
|
623
|
+
body: [Text.view({ children: 'Dialog body content.' })],
|
|
624
|
+
footer: [
|
|
625
|
+
Button.view({
|
|
626
|
+
label: 'Cancel',
|
|
627
|
+
variant: 'secondary',
|
|
628
|
+
onClick: GotDialogMessage(Dialog.RequestedClose()),
|
|
629
|
+
}),
|
|
630
|
+
Button.view({
|
|
631
|
+
label: 'Confirm',
|
|
632
|
+
onClick: GotDialogMessage(Dialog.RequestedClose()),
|
|
633
|
+
}),
|
|
634
|
+
],
|
|
635
|
+
}),
|
|
636
|
+
toParentMessage: message => GotDialogMessage(message),
|
|
637
|
+
}),
|
|
638
|
+
],
|
|
639
|
+
}),
|
|
640
|
+
Card.section({
|
|
641
|
+
title: 'Tabs',
|
|
642
|
+
description: 'Accessible tablist with controlled selection.',
|
|
643
|
+
padded: true,
|
|
644
|
+
children: [
|
|
645
|
+
h.submodel({
|
|
646
|
+
slotId: 'catalog-tabs',
|
|
647
|
+
model: model.tabs,
|
|
648
|
+
view: DemoTabs.view,
|
|
649
|
+
viewInputs: DemoTabs.styledViewInputs({
|
|
650
|
+
tabs: ['overview', 'details', 'settings'],
|
|
651
|
+
ariaLabel: 'Catalog tabs',
|
|
652
|
+
renderPanel: value => Text.view({
|
|
653
|
+
variant: 'muted',
|
|
654
|
+
children: `Panel for ${value}.`,
|
|
655
|
+
}),
|
|
656
|
+
}),
|
|
657
|
+
toParentMessage: message => GotTabsMessage(message),
|
|
658
|
+
}),
|
|
659
|
+
],
|
|
660
|
+
}),
|
|
661
|
+
Card.section({
|
|
662
|
+
title: 'Dropdown menu',
|
|
663
|
+
description: 'Menu trigger with accessible items and disabled behavior.',
|
|
664
|
+
padded: true,
|
|
665
|
+
children: [
|
|
666
|
+
h.submodel({
|
|
667
|
+
slotId: 'catalog-menu',
|
|
668
|
+
model: model.menu,
|
|
669
|
+
view: DemoMenu.view,
|
|
670
|
+
viewInputs: DropdownMenu.styledViewInputs({
|
|
671
|
+
items: ['edit', 'duplicate', 'delete'],
|
|
672
|
+
buttonContent: h.span([], ['Actions']),
|
|
673
|
+
itemSpec: item => item === 'delete'
|
|
674
|
+
? { label: 'Delete', variant: 'destructive' }
|
|
675
|
+
: { label: item[0].toUpperCase() + item.slice(1) },
|
|
676
|
+
isItemDisabled: item => item === 'duplicate',
|
|
677
|
+
}),
|
|
678
|
+
toParentMessage: message => GotMenuMessage(message),
|
|
679
|
+
}),
|
|
680
|
+
],
|
|
681
|
+
}),
|
|
682
|
+
Card.section({
|
|
683
|
+
title: 'Toast',
|
|
684
|
+
description: 'Status notifications with lifecycle and dismissal.',
|
|
685
|
+
padded: true,
|
|
686
|
+
children: [
|
|
687
|
+
Row.view({
|
|
688
|
+
align: 'wrap',
|
|
689
|
+
children: [
|
|
690
|
+
Button.view({
|
|
691
|
+
label: 'Info',
|
|
692
|
+
variant: 'secondary',
|
|
693
|
+
onClick: ShowToast('Info'),
|
|
694
|
+
}),
|
|
695
|
+
Button.view({
|
|
696
|
+
label: 'Success',
|
|
697
|
+
variant: 'secondary',
|
|
698
|
+
onClick: ShowToast('Success'),
|
|
699
|
+
}),
|
|
700
|
+
Button.view({
|
|
701
|
+
label: 'Warning',
|
|
702
|
+
variant: 'secondary',
|
|
703
|
+
onClick: ShowToast('Warning'),
|
|
704
|
+
}),
|
|
705
|
+
Button.view({
|
|
706
|
+
label: 'Error',
|
|
707
|
+
variant: 'secondary',
|
|
708
|
+
onClick: ShowToast('Error'),
|
|
709
|
+
}),
|
|
710
|
+
],
|
|
711
|
+
}),
|
|
712
|
+
h.submodel({
|
|
713
|
+
slotId: 'catalog-toast',
|
|
714
|
+
model: model.toast,
|
|
715
|
+
view: DemoToast.view,
|
|
716
|
+
viewInputs: DemoToast.styledViewInputs(),
|
|
717
|
+
toParentMessage: message => GotToastMessage(message),
|
|
718
|
+
}),
|
|
719
|
+
],
|
|
720
|
+
}),
|
|
721
|
+
],
|
|
722
|
+
}),
|
|
723
|
+
]);
|
|
724
|
+
});
|
|
725
|
+
export const Mount = { Model, init, update, view };
|
|
726
|
+
//# sourceMappingURL=index.js.map
|