@idealyst/mcp-server 1.2.29 → 1.2.30
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/examples/components/ActivityIndicator.examples.tsx +22 -22
- package/examples/components/Alert.examples.tsx +14 -14
- package/examples/components/Avatar.examples.tsx +7 -7
- package/examples/components/Breadcrumb.examples.tsx +6 -6
- package/examples/components/Button.examples.tsx +1 -1
- package/examples/components/Card.examples.tsx +1 -1
- package/examples/components/Checkbox.examples.tsx +26 -26
- package/examples/components/Chip.examples.tsx +1 -1
- package/examples/components/Dialog.examples.tsx +25 -25
- package/examples/components/Divider.examples.tsx +31 -27
- package/examples/components/Icon.examples.tsx +12 -12
- package/examples/components/Menu.examples.tsx +3 -3
- package/examples/components/Popover.examples.tsx +36 -36
- package/examples/components/Progress.examples.tsx +42 -42
- package/examples/components/RadioButton.examples.tsx +21 -21
- package/examples/components/Screen.examples.tsx +35 -35
- package/examples/components/Select.examples.tsx +17 -17
- package/examples/components/Skeleton.examples.tsx +1 -1
- package/examples/components/Slider.examples.tsx +23 -23
- package/examples/components/Switch.examples.tsx +17 -17
- package/examples/components/TabBar.examples.tsx +13 -13
- package/examples/components/Text.examples.tsx +26 -26
- package/examples/components/{Input.examples.tsx → TextInput.examples.tsx} +47 -47
- package/examples/components/Tooltip.examples.tsx +11 -11
- package/examples/components/View.examples.tsx +22 -22
- package/package.json +4 -4
|
@@ -13,7 +13,7 @@ export function BasicActivityIndicator() {
|
|
|
13
13
|
return (
|
|
14
14
|
<View spacing="md">
|
|
15
15
|
<ActivityIndicator />
|
|
16
|
-
<Text
|
|
16
|
+
<Text typography="body2">
|
|
17
17
|
Loading...
|
|
18
18
|
</Text>
|
|
19
19
|
</View>
|
|
@@ -26,23 +26,23 @@ export function ActivityIndicatorSizes() {
|
|
|
26
26
|
<View spacing="md">
|
|
27
27
|
<View spacing="sm">
|
|
28
28
|
<ActivityIndicator size="xs" />
|
|
29
|
-
<Text
|
|
29
|
+
<Text typography="body2">Extra Small</Text>
|
|
30
30
|
</View>
|
|
31
31
|
<View spacing="sm">
|
|
32
32
|
<ActivityIndicator size="sm" />
|
|
33
|
-
<Text
|
|
33
|
+
<Text typography="body2">Small</Text>
|
|
34
34
|
</View>
|
|
35
35
|
<View spacing="sm">
|
|
36
36
|
<ActivityIndicator size="md" />
|
|
37
|
-
<Text
|
|
37
|
+
<Text typography="body2">Medium</Text>
|
|
38
38
|
</View>
|
|
39
39
|
<View spacing="sm">
|
|
40
40
|
<ActivityIndicator size="lg" />
|
|
41
|
-
<Text
|
|
41
|
+
<Text typography="body2">Large</Text>
|
|
42
42
|
</View>
|
|
43
43
|
<View spacing="sm">
|
|
44
44
|
<ActivityIndicator size="xl" />
|
|
45
|
-
<Text
|
|
45
|
+
<Text typography="body2">Extra Large</Text>
|
|
46
46
|
</View>
|
|
47
47
|
</View>
|
|
48
48
|
);
|
|
@@ -54,27 +54,27 @@ export function ActivityIndicatorWithIntent() {
|
|
|
54
54
|
<View spacing="md">
|
|
55
55
|
<View spacing="sm">
|
|
56
56
|
<ActivityIndicator intent="primary" />
|
|
57
|
-
<Text
|
|
57
|
+
<Text typography="body2">Primary</Text>
|
|
58
58
|
</View>
|
|
59
59
|
<View spacing="sm">
|
|
60
60
|
<ActivityIndicator intent="success" />
|
|
61
|
-
<Text
|
|
61
|
+
<Text typography="body2">Success</Text>
|
|
62
62
|
</View>
|
|
63
63
|
<View spacing="sm">
|
|
64
|
-
<ActivityIndicator intent="
|
|
65
|
-
<Text
|
|
64
|
+
<ActivityIndicator intent="danger" />
|
|
65
|
+
<Text typography="body2">Error</Text>
|
|
66
66
|
</View>
|
|
67
67
|
<View spacing="sm">
|
|
68
68
|
<ActivityIndicator intent="warning" />
|
|
69
|
-
<Text
|
|
69
|
+
<Text typography="body2">Warning</Text>
|
|
70
70
|
</View>
|
|
71
71
|
<View spacing="sm">
|
|
72
72
|
<ActivityIndicator intent="info" />
|
|
73
|
-
<Text
|
|
73
|
+
<Text typography="body2">Info</Text>
|
|
74
74
|
</View>
|
|
75
75
|
<View spacing="sm">
|
|
76
76
|
<ActivityIndicator intent="neutral" />
|
|
77
|
-
<Text
|
|
77
|
+
<Text typography="body2">Neutral</Text>
|
|
78
78
|
</View>
|
|
79
79
|
</View>
|
|
80
80
|
);
|
|
@@ -166,7 +166,7 @@ export function LoadingCard() {
|
|
|
166
166
|
</View>
|
|
167
167
|
) : (
|
|
168
168
|
<View spacing="md">
|
|
169
|
-
<Text
|
|
169
|
+
<Text typography="subtitle1" weight="bold">
|
|
170
170
|
Content Loaded
|
|
171
171
|
</Text>
|
|
172
172
|
<Text>Here is the content that was loaded.</Text>
|
|
@@ -216,19 +216,19 @@ export function InlineLoadingStates() {
|
|
|
216
216
|
<View spacing="sm">
|
|
217
217
|
<View spacing="xs">
|
|
218
218
|
<ActivityIndicator size="xs" />
|
|
219
|
-
<Text
|
|
219
|
+
<Text typography="body2">Saving changes...</Text>
|
|
220
220
|
</View>
|
|
221
221
|
</View>
|
|
222
222
|
<View spacing="sm">
|
|
223
223
|
<View spacing="xs">
|
|
224
224
|
<ActivityIndicator size="xs" intent="success" />
|
|
225
|
-
<Text
|
|
225
|
+
<Text typography="body2">Syncing data...</Text>
|
|
226
226
|
</View>
|
|
227
227
|
</View>
|
|
228
228
|
<View spacing="sm">
|
|
229
229
|
<View spacing="xs">
|
|
230
230
|
<ActivityIndicator size="xs" intent="info" />
|
|
231
|
-
<Text
|
|
231
|
+
<Text typography="body2">Processing request...</Text>
|
|
232
232
|
</View>
|
|
233
233
|
</View>
|
|
234
234
|
</View>
|
|
@@ -269,7 +269,7 @@ export function FetchingDataExample() {
|
|
|
269
269
|
))}
|
|
270
270
|
</View>
|
|
271
271
|
) : (
|
|
272
|
-
<Text
|
|
272
|
+
<Text typography="body2" align="center">
|
|
273
273
|
Click the button to fetch data
|
|
274
274
|
</Text>
|
|
275
275
|
)}
|
|
@@ -300,13 +300,13 @@ export function UploadingFilesExample() {
|
|
|
300
300
|
{uploading && (
|
|
301
301
|
<View spacing="sm">
|
|
302
302
|
<ActivityIndicator size="md" intent="primary" />
|
|
303
|
-
<Text
|
|
303
|
+
<Text typography="body2">
|
|
304
304
|
Uploading files...
|
|
305
305
|
</Text>
|
|
306
306
|
</View>
|
|
307
307
|
)}
|
|
308
308
|
{success && !uploading && (
|
|
309
|
-
<Text
|
|
309
|
+
<Text typography="body2">
|
|
310
310
|
Files uploaded successfully!
|
|
311
311
|
</Text>
|
|
312
312
|
)}
|
|
@@ -332,14 +332,14 @@ export function RefreshControl() {
|
|
|
332
332
|
<View spacing="md">
|
|
333
333
|
<View spacing="sm">
|
|
334
334
|
<Text weight="semibold">Content Area</Text>
|
|
335
|
-
<Text
|
|
335
|
+
<Text typography="body2">
|
|
336
336
|
Last updated: {lastUpdated.toLocaleTimeString()}
|
|
337
337
|
</Text>
|
|
338
338
|
</View>
|
|
339
339
|
{refreshing && (
|
|
340
340
|
<View spacing="sm">
|
|
341
341
|
<ActivityIndicator size="sm" intent="primary" />
|
|
342
|
-
<Text
|
|
342
|
+
<Text typography="body2">Refreshing...</Text>
|
|
343
343
|
</View>
|
|
344
344
|
)}
|
|
345
345
|
<Button size="sm" onPress={handleRefresh} disabled={refreshing}>
|
|
@@ -33,7 +33,7 @@ export function AlertIntents() {
|
|
|
33
33
|
message="Your changes have been saved successfully."
|
|
34
34
|
/>
|
|
35
35
|
<Alert
|
|
36
|
-
intent="
|
|
36
|
+
intent="danger"
|
|
37
37
|
title="Error"
|
|
38
38
|
message="An error occurred while processing your request."
|
|
39
39
|
/>
|
|
@@ -93,7 +93,7 @@ export function AlertWithIcons() {
|
|
|
93
93
|
showIcon
|
|
94
94
|
/>
|
|
95
95
|
<Alert
|
|
96
|
-
intent="
|
|
96
|
+
intent="danger"
|
|
97
97
|
title="Error"
|
|
98
98
|
message="Something went wrong."
|
|
99
99
|
showIcon
|
|
@@ -196,12 +196,12 @@ export function AlertWithActions() {
|
|
|
196
196
|
}
|
|
197
197
|
/>
|
|
198
198
|
<Alert
|
|
199
|
-
intent="
|
|
199
|
+
intent="danger"
|
|
200
200
|
title="Connection Lost"
|
|
201
201
|
message="Unable to connect to the server."
|
|
202
202
|
showIcon
|
|
203
203
|
actions={
|
|
204
|
-
<Button size="sm" intent="
|
|
204
|
+
<Button size="sm" intent="danger">
|
|
205
205
|
Retry
|
|
206
206
|
</Button>
|
|
207
207
|
}
|
|
@@ -216,17 +216,17 @@ export function AlertWithChildren() {
|
|
|
216
216
|
<Alert intent="info" showIcon>
|
|
217
217
|
<View spacing="sm">
|
|
218
218
|
<View spacing="xs">
|
|
219
|
-
<Text weight="bold"
|
|
219
|
+
<Text weight="bold" typography="body1">
|
|
220
220
|
Important Notice
|
|
221
221
|
</Text>
|
|
222
|
-
<Text
|
|
222
|
+
<Text typography="body2">
|
|
223
223
|
Please read the following information carefully:
|
|
224
224
|
</Text>
|
|
225
225
|
</View>
|
|
226
226
|
<View spacing="xs">
|
|
227
|
-
<Text
|
|
228
|
-
<Text
|
|
229
|
-
<Text
|
|
227
|
+
<Text typography="body2">• Your account will expire in 30 days</Text>
|
|
228
|
+
<Text typography="body2">• Make sure to backup your data</Text>
|
|
229
|
+
<Text typography="body2">• Contact support if you need help</Text>
|
|
230
230
|
</View>
|
|
231
231
|
</View>
|
|
232
232
|
</Alert>
|
|
@@ -279,19 +279,19 @@ export function FormValidationAlerts() {
|
|
|
279
279
|
<View spacing="md">
|
|
280
280
|
<Alert
|
|
281
281
|
type="outlined"
|
|
282
|
-
intent="
|
|
282
|
+
intent="danger"
|
|
283
283
|
title="Form Validation Failed"
|
|
284
284
|
message="Please correct the following errors:"
|
|
285
285
|
showIcon
|
|
286
286
|
>
|
|
287
287
|
<View spacing="xs">
|
|
288
|
-
<Text
|
|
288
|
+
<Text typography="body2">
|
|
289
289
|
• Email address is required
|
|
290
290
|
</Text>
|
|
291
|
-
<Text
|
|
291
|
+
<Text typography="body2">
|
|
292
292
|
• Password must be at least 8 characters
|
|
293
293
|
</Text>
|
|
294
|
-
<Text
|
|
294
|
+
<Text typography="body2">
|
|
295
295
|
• Terms and conditions must be accepted
|
|
296
296
|
</Text>
|
|
297
297
|
</View>
|
|
@@ -325,7 +325,7 @@ export function SystemStatusAlerts() {
|
|
|
325
325
|
/>
|
|
326
326
|
<Alert
|
|
327
327
|
type="filled"
|
|
328
|
-
intent="
|
|
328
|
+
intent="danger"
|
|
329
329
|
title="Service Disruption"
|
|
330
330
|
message="We're experiencing technical difficulties. Our team is working on it."
|
|
331
331
|
showIcon
|
|
@@ -81,7 +81,7 @@ export function UserProfileList() {
|
|
|
81
81
|
<Avatar src="https://i.pravatar.cc/150?img=8" size="md" />
|
|
82
82
|
<View spacing="xs">
|
|
83
83
|
<Text weight="semibold">John Doe</Text>
|
|
84
|
-
<Text
|
|
84
|
+
<Text typography="body2">
|
|
85
85
|
john.doe@example.com
|
|
86
86
|
</Text>
|
|
87
87
|
</View>
|
|
@@ -90,7 +90,7 @@ export function UserProfileList() {
|
|
|
90
90
|
<Avatar src="https://i.pravatar.cc/150?img=9" size="md" />
|
|
91
91
|
<View spacing="xs">
|
|
92
92
|
<Text weight="semibold">Jane Smith</Text>
|
|
93
|
-
<Text
|
|
93
|
+
<Text typography="body2">
|
|
94
94
|
jane.smith@example.com
|
|
95
95
|
</Text>
|
|
96
96
|
</View>
|
|
@@ -99,7 +99,7 @@ export function UserProfileList() {
|
|
|
99
99
|
<Avatar fallback="AB" size="md" />
|
|
100
100
|
<View spacing="xs">
|
|
101
101
|
<Text weight="semibold">Alex Brown</Text>
|
|
102
|
-
<Text
|
|
102
|
+
<Text typography="body2">
|
|
103
103
|
alex.brown@example.com
|
|
104
104
|
</Text>
|
|
105
105
|
</View>
|
|
@@ -112,7 +112,7 @@ export function UserProfileList() {
|
|
|
112
112
|
export function AvatarGroup() {
|
|
113
113
|
return (
|
|
114
114
|
<View spacing="md">
|
|
115
|
-
<Text weight="semibold"
|
|
115
|
+
<Text weight="semibold" typography="body2">
|
|
116
116
|
Team Members
|
|
117
117
|
</Text>
|
|
118
118
|
<View spacing="sm">
|
|
@@ -135,10 +135,10 @@ export function LargeProfileAvatar() {
|
|
|
135
135
|
alt="Profile picture"
|
|
136
136
|
/>
|
|
137
137
|
<View spacing="xs">
|
|
138
|
-
<Text
|
|
138
|
+
<Text typography="h5" weight="bold">
|
|
139
139
|
Sarah Johnson
|
|
140
140
|
</Text>
|
|
141
|
-
<Text
|
|
141
|
+
<Text typography="body1">
|
|
142
142
|
Product Designer
|
|
143
143
|
</Text>
|
|
144
144
|
</View>
|
|
@@ -156,7 +156,7 @@ export function AvatarWithFallbackOnError() {
|
|
|
156
156
|
alt="Broken image"
|
|
157
157
|
size="lg"
|
|
158
158
|
/>
|
|
159
|
-
<Text
|
|
159
|
+
<Text typography="body2">
|
|
160
160
|
Fallback shown when image fails to load
|
|
161
161
|
</Text>
|
|
162
162
|
</View>
|
|
@@ -169,7 +169,7 @@ export function BreadcrumbWithDisabledItems() {
|
|
|
169
169
|
return (
|
|
170
170
|
<View spacing="md">
|
|
171
171
|
<Breadcrumb items={items} />
|
|
172
|
-
<Text
|
|
172
|
+
<Text typography="body2">
|
|
173
173
|
The "Restricted" item is disabled
|
|
174
174
|
</Text>
|
|
175
175
|
</View>
|
|
@@ -192,7 +192,7 @@ export function ResponsiveBreadcrumb() {
|
|
|
192
192
|
<Text weight="semibold">Responsive (collapses on narrow screens)</Text>
|
|
193
193
|
<Breadcrumb items={items} responsive minVisibleItems={3} />
|
|
194
194
|
</View>
|
|
195
|
-
<Text
|
|
195
|
+
<Text typography="body2">
|
|
196
196
|
Try resizing the window to see the breadcrumb collapse
|
|
197
197
|
</Text>
|
|
198
198
|
</View>
|
|
@@ -222,7 +222,7 @@ export function FileSystemBreadcrumb() {
|
|
|
222
222
|
return (
|
|
223
223
|
<View spacing="md">
|
|
224
224
|
<Breadcrumb items={items} separator="/" />
|
|
225
|
-
<Text
|
|
225
|
+
<Text typography="body2">
|
|
226
226
|
Current path: /{path.join('/')}
|
|
227
227
|
</Text>
|
|
228
228
|
</View>
|
|
@@ -243,7 +243,7 @@ export function EcommerceBreadcrumb() {
|
|
|
243
243
|
<View spacing="lg">
|
|
244
244
|
<Breadcrumb items={items} intent="primary" />
|
|
245
245
|
<View spacing="md">
|
|
246
|
-
<Text
|
|
246
|
+
<Text typography="h5" weight="bold">
|
|
247
247
|
Gaming Laptops
|
|
248
248
|
</Text>
|
|
249
249
|
<Text>Browse our selection of high-performance gaming laptops.</Text>
|
|
@@ -269,7 +269,7 @@ export function DocumentationBreadcrumb() {
|
|
|
269
269
|
separator={<Icon name="chevron-right" size="xs" />}
|
|
270
270
|
/>
|
|
271
271
|
<View spacing="md">
|
|
272
|
-
<Text
|
|
272
|
+
<Text typography="h5" weight="bold">
|
|
273
273
|
Breadcrumb Component
|
|
274
274
|
</Text>
|
|
275
275
|
<Text>
|
|
@@ -293,7 +293,7 @@ export function SettingsBreadcrumb() {
|
|
|
293
293
|
<View spacing="lg">
|
|
294
294
|
<Breadcrumb items={items} intent="neutral" size="md" />
|
|
295
295
|
<View spacing="md">
|
|
296
|
-
<Text
|
|
296
|
+
<Text typography="subtitle1" weight="bold">
|
|
297
297
|
Privacy Settings
|
|
298
298
|
</Text>
|
|
299
299
|
<Text>Manage your privacy preferences and data sharing options.</Text>
|
|
@@ -47,7 +47,7 @@ export function ButtonIntents() {
|
|
|
47
47
|
<>
|
|
48
48
|
<Button intent="primary">Primary</Button>
|
|
49
49
|
<Button intent="success">Success</Button>
|
|
50
|
-
<Button intent="
|
|
50
|
+
<Button intent="danger">Error</Button>
|
|
51
51
|
<Button intent="warning">Warning</Button>
|
|
52
52
|
<Button intent="neutral">Neutral</Button>
|
|
53
53
|
<Button intent="info">Info</Button>
|
|
@@ -15,7 +15,7 @@ export function BasicCheckbox() {
|
|
|
15
15
|
return (
|
|
16
16
|
<Checkbox
|
|
17
17
|
checked={checked}
|
|
18
|
-
|
|
18
|
+
onChange={setChecked}
|
|
19
19
|
label="Accept terms and conditions"
|
|
20
20
|
/>
|
|
21
21
|
);
|
|
@@ -27,11 +27,11 @@ export function CheckboxSizes() {
|
|
|
27
27
|
|
|
28
28
|
return (
|
|
29
29
|
<View spacing="md">
|
|
30
|
-
<Checkbox checked={checked}
|
|
31
|
-
<Checkbox checked={checked}
|
|
32
|
-
<Checkbox checked={checked}
|
|
33
|
-
<Checkbox checked={checked}
|
|
34
|
-
<Checkbox checked={checked}
|
|
30
|
+
<Checkbox checked={checked} onChange={setChecked} label="Extra Small" size="xs" />
|
|
31
|
+
<Checkbox checked={checked} onChange={setChecked} label="Small" size="sm" />
|
|
32
|
+
<Checkbox checked={checked} onChange={setChecked} label="Medium" size="md" />
|
|
33
|
+
<Checkbox checked={checked} onChange={setChecked} label="Large" size="lg" />
|
|
34
|
+
<Checkbox checked={checked} onChange={setChecked} label="Extra Large" size="xl" />
|
|
35
35
|
</View>
|
|
36
36
|
);
|
|
37
37
|
}
|
|
@@ -42,12 +42,12 @@ export function CheckboxIntents() {
|
|
|
42
42
|
|
|
43
43
|
return (
|
|
44
44
|
<View spacing="md">
|
|
45
|
-
<Checkbox checked={checked}
|
|
46
|
-
<Checkbox checked={checked}
|
|
47
|
-
<Checkbox checked={checked}
|
|
48
|
-
<Checkbox checked={checked}
|
|
49
|
-
<Checkbox checked={checked}
|
|
50
|
-
<Checkbox checked={checked}
|
|
45
|
+
<Checkbox checked={checked} onChange={setChecked} label="Primary" intent="primary" />
|
|
46
|
+
<Checkbox checked={checked} onChange={setChecked} label="Success" intent="success" />
|
|
47
|
+
<Checkbox checked={checked} onChange={setChecked} label="Error" intent="danger" />
|
|
48
|
+
<Checkbox checked={checked} onChange={setChecked} label="Warning" intent="warning" />
|
|
49
|
+
<Checkbox checked={checked} onChange={setChecked} label="Neutral" intent="neutral" />
|
|
50
|
+
<Checkbox checked={checked} onChange={setChecked} label="Info" intent="info" />
|
|
51
51
|
</View>
|
|
52
52
|
);
|
|
53
53
|
}
|
|
@@ -60,13 +60,13 @@ export function CheckboxVariants() {
|
|
|
60
60
|
<View spacing="md">
|
|
61
61
|
<Checkbox
|
|
62
62
|
checked={checked}
|
|
63
|
-
|
|
63
|
+
onChange={setChecked}
|
|
64
64
|
label="Default variant"
|
|
65
65
|
variant="default"
|
|
66
66
|
/>
|
|
67
67
|
<Checkbox
|
|
68
68
|
checked={checked}
|
|
69
|
-
|
|
69
|
+
onChange={setChecked}
|
|
70
70
|
label="Outlined variant"
|
|
71
71
|
variant="outlined"
|
|
72
72
|
/>
|
|
@@ -92,7 +92,7 @@ export function IndeterminateCheckbox() {
|
|
|
92
92
|
<Checkbox
|
|
93
93
|
checked={parentChecked}
|
|
94
94
|
indeterminate={indeterminate}
|
|
95
|
-
|
|
95
|
+
onChange={(checked) => {
|
|
96
96
|
setParentChecked(checked);
|
|
97
97
|
setChild1(checked);
|
|
98
98
|
setChild2(checked);
|
|
@@ -100,8 +100,8 @@ export function IndeterminateCheckbox() {
|
|
|
100
100
|
label="Select All"
|
|
101
101
|
/>
|
|
102
102
|
<View spacing="sm" style={{ paddingLeft: 20 }}>
|
|
103
|
-
<Checkbox checked={child1}
|
|
104
|
-
<Checkbox checked={child2}
|
|
103
|
+
<Checkbox checked={child1} onChange={setChild1} label="Option 1" />
|
|
104
|
+
<Checkbox checked={child2} onChange={setChild2} label="Option 2" />
|
|
105
105
|
</View>
|
|
106
106
|
</View>
|
|
107
107
|
);
|
|
@@ -111,8 +111,8 @@ export function IndeterminateCheckbox() {
|
|
|
111
111
|
export function DisabledCheckbox() {
|
|
112
112
|
return (
|
|
113
113
|
<View spacing="md">
|
|
114
|
-
<Checkbox checked={false}
|
|
115
|
-
<Checkbox checked={true}
|
|
114
|
+
<Checkbox checked={false} onChange={() => {}} label="Unchecked disabled" disabled />
|
|
115
|
+
<Checkbox checked={true} onChange={() => {}} label="Checked disabled" disabled />
|
|
116
116
|
</View>
|
|
117
117
|
);
|
|
118
118
|
}
|
|
@@ -122,10 +122,10 @@ export function CheckboxWithCustomContent() {
|
|
|
122
122
|
const [checked, setChecked] = React.useState(false);
|
|
123
123
|
|
|
124
124
|
return (
|
|
125
|
-
<Checkbox checked={checked}
|
|
125
|
+
<Checkbox checked={checked} onChange={setChecked}>
|
|
126
126
|
<View spacing="xs">
|
|
127
127
|
<Text weight="bold">Marketing emails</Text>
|
|
128
|
-
<Text
|
|
128
|
+
<Text typography="body2">
|
|
129
129
|
Receive updates about new features and special offers
|
|
130
130
|
</Text>
|
|
131
131
|
</View>
|
|
@@ -144,7 +144,7 @@ export function CheckboxWithHelperText() {
|
|
|
144
144
|
<View spacing="md">
|
|
145
145
|
<Checkbox
|
|
146
146
|
checked={accepted}
|
|
147
|
-
|
|
147
|
+
onChange={setAccepted}
|
|
148
148
|
label="I agree to the terms and conditions"
|
|
149
149
|
required
|
|
150
150
|
error={showError ? 'You must accept the terms to continue' : undefined}
|
|
@@ -172,22 +172,22 @@ export function CheckboxGroup() {
|
|
|
172
172
|
<Text weight="bold">Select your interests:</Text>
|
|
173
173
|
<Checkbox
|
|
174
174
|
checked={interests.tech}
|
|
175
|
-
|
|
175
|
+
onChange={() => toggleInterest('tech')}
|
|
176
176
|
label="Technology"
|
|
177
177
|
/>
|
|
178
178
|
<Checkbox
|
|
179
179
|
checked={interests.design}
|
|
180
|
-
|
|
180
|
+
onChange={() => toggleInterest('design')}
|
|
181
181
|
label="Design"
|
|
182
182
|
/>
|
|
183
183
|
<Checkbox
|
|
184
184
|
checked={interests.business}
|
|
185
|
-
|
|
185
|
+
onChange={() => toggleInterest('business')}
|
|
186
186
|
label="Business"
|
|
187
187
|
/>
|
|
188
188
|
<Checkbox
|
|
189
189
|
checked={interests.marketing}
|
|
190
|
-
|
|
190
|
+
onChange={() => toggleInterest('marketing')}
|
|
191
191
|
label="Marketing"
|
|
192
192
|
/>
|
|
193
193
|
</View>
|
|
@@ -43,7 +43,7 @@ export function ChipIntents() {
|
|
|
43
43
|
<>
|
|
44
44
|
<Chip label="Primary" intent="primary" />
|
|
45
45
|
<Chip label="Success" intent="success" />
|
|
46
|
-
<Chip label="Error" intent="
|
|
46
|
+
<Chip label="Error" intent="danger" />
|
|
47
47
|
<Chip label="Warning" intent="warning" />
|
|
48
48
|
<Chip label="Neutral" intent="neutral" />
|
|
49
49
|
<Chip label="Info" intent="info" />
|