@prismicio/editor-ui 0.4.57 → 0.4.58-alpha.repeatable-link-base.1
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/dist/components/ActionList/ActionList.d.ts +46 -4
- package/dist/components/ActionList/ActionList.stories.d.ts +42 -2
- package/dist/components/ActionList/index.d.ts +1 -1
- package/dist/components/Alert/Alert.stories.d.ts +1 -1
- package/dist/components/AnimatedList/AnimatedList.stories.d.ts +1 -1
- package/dist/components/BlankSlate/index.d.ts +1 -1
- package/dist/components/Box/Box.d.ts +1 -1
- package/dist/components/Box/Box.stories.d.ts +3 -138
- package/dist/components/Button/Button.d.ts +6 -4
- package/dist/components/Button/Button.stories.d.ts +7 -5
- package/dist/components/Card/index.d.ts +1 -1
- package/dist/components/CircleIcon/CircleIcon.d.ts +3 -1
- package/dist/components/CircleIcon/CircleIcon.stories.d.ts +1 -1
- package/dist/components/ComboBox/ComboBox.d.ts +10 -0
- package/dist/components/ComboBox/index.d.ts +1 -1
- package/dist/components/Dialog/Dialog.d.ts +3 -1
- package/dist/components/Dialog/Options/DialogOptions.d.ts +2 -2
- package/dist/components/Dialog/index.d.ts +1 -1
- package/dist/components/DropdownMenu/index.d.ts +1 -1
- package/dist/components/Field/Field.d.ts +1 -0
- package/dist/components/Field/Field.stories.d.ts +6 -0
- package/dist/components/Field/index.d.ts +1 -1
- package/dist/components/FieldSet/FieldSet.d.ts +3 -0
- package/dist/components/Form/Form.d.ts +3 -2
- package/dist/components/Form/Form.stories.d.ts +2 -1
- package/dist/components/Form/FormField.d.ts +21 -8
- package/dist/components/Form/FormFieldError.d.ts +1 -2
- package/dist/components/Form/FormInput.d.ts +2 -1
- package/dist/components/Form/FormSearchInput.d.ts +1 -0
- package/dist/components/Form/index.d.ts +2 -2
- package/dist/components/HeaderTabLink/HeaderTabLink.d.ts +2 -1
- package/dist/components/Icon/iconNames.d.ts +1 -1
- package/dist/components/IconButton/IconButton.d.ts +1 -0
- package/dist/components/MediaCard/index.d.ts +1 -1
- package/dist/components/OverflowContainer/OverflowContainer.d.ts +1 -1
- package/dist/components/OverflowContainer/OverflowContainer.stories.d.ts +1 -1
- package/dist/components/OverflowContainer/index.d.ts +1 -1
- package/dist/components/ProgressCircle/ProgressCircle.d.ts +1 -1
- package/dist/components/SearchInput/SearchInput.d.ts +2 -0
- package/dist/components/Select/Select.d.ts +6 -0
- package/dist/components/Select/index.d.ts +1 -1
- package/dist/components/Skeleton/Skeleton.d.ts +14 -14
- package/dist/components/Skeleton/Skeleton.stories.d.ts +1 -1
- package/dist/components/Table/index.d.ts +1 -1
- package/dist/components/TagField/TagFieldHeader.d.ts +1 -1
- package/dist/components/Text/Text.d.ts +11 -1
- package/dist/components/Toast/ToastContext.d.ts +1 -1
- package/dist/components/Toast/index.d.ts +1 -1
- package/dist/components/ToggleButton/ToggleButton.stories.d.ts +2 -2
- package/dist/components/Toolbar/index.d.ts +1 -1
- package/dist/components/Video/Video.stories.d.ts +1 -1
- package/dist/components/Window/index.d.ts +1 -1
- package/dist/index.cjs.js +190 -161
- package/dist/index.d.ts +23 -23
- package/dist/index.es.js +16377 -13868
- package/dist/style.css +1 -1
- package/dist/theme/theme.d.ts +1 -0
- package/package.json +12 -12
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { type MouseEvent, type PropsWithChildren, type ReactNode } from "react";
|
|
2
|
+
import type { SX } from "../../theme";
|
|
2
3
|
import { type IconName } from "../Icon";
|
|
3
4
|
import { textVariantMapping } from "../Text";
|
|
4
5
|
export type ActionListVariant = "borderless" | "bordered" | "compact";
|
|
5
6
|
export interface ActionListProps extends PropsWithChildren {
|
|
6
7
|
variant?: ActionListVariant;
|
|
7
8
|
gap?: 0 | 4 | 8;
|
|
9
|
+
sx?: SX;
|
|
8
10
|
}
|
|
9
11
|
export declare function ActionList(props: ActionListProps): JSX.Element;
|
|
10
12
|
type Color = "grey" | "tomato";
|
|
11
|
-
export
|
|
13
|
+
export type ActionListItemProps = {
|
|
12
14
|
children: ReactNode;
|
|
13
15
|
color?: Color;
|
|
14
16
|
backgroundColor?: "grey" | "transparent";
|
|
15
17
|
description?: ReactNode;
|
|
16
18
|
disabled?: boolean;
|
|
17
19
|
selected?: boolean;
|
|
18
|
-
endAdornment?: ReactNode;
|
|
19
|
-
endIcon?: IconName;
|
|
20
20
|
onClick?: (event: MouseEvent) => void;
|
|
21
21
|
renderEndIcon?: (icon: ReactNode) => ReactNode;
|
|
22
22
|
renderStartIcon?: (icon: ReactNode) => ReactNode;
|
|
@@ -28,7 +28,49 @@ export interface ActionListItemProps {
|
|
|
28
28
|
* mandatory to pass the boolean value for each item, even if `false`.
|
|
29
29
|
*/
|
|
30
30
|
completed?: boolean;
|
|
31
|
-
|
|
31
|
+
/**
|
|
32
|
+
* Change the default rendered element for the one passed as a child,
|
|
33
|
+
* merging their props and behavior.
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
asChild?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Override the variant from ActionList
|
|
39
|
+
*/
|
|
40
|
+
variant?: ActionListVariant;
|
|
41
|
+
/**
|
|
42
|
+
* If true, the item title and description will be rendered on a single line.
|
|
43
|
+
*/
|
|
44
|
+
noWrap?: boolean;
|
|
45
|
+
} & ActionListItemEndProps;
|
|
46
|
+
export type ActionListItemEndProps = {
|
|
47
|
+
endAdornment?: ReactNode;
|
|
48
|
+
endIcon?: IconName;
|
|
49
|
+
endOverlay?: never;
|
|
50
|
+
} | {
|
|
51
|
+
endAdornment?: never;
|
|
52
|
+
endIcon?: never;
|
|
53
|
+
/**
|
|
54
|
+
* An overlay element that will be rendered on top of the item at the end.
|
|
55
|
+
* Useful when you cannot use the `endAdornment` prop,
|
|
56
|
+
* ie. when you have to render a button on the right and the ActionListItem itself is a Link.
|
|
57
|
+
* (you cannot nest buttons inside links in HTML, but you can display them on top of the link)
|
|
58
|
+
*/
|
|
59
|
+
endOverlay: ReactNode;
|
|
60
|
+
};
|
|
32
61
|
export declare const ActionListItem: (props: ActionListItemProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
62
|
+
interface SlotChildProps {
|
|
63
|
+
children: ReactNode;
|
|
64
|
+
/**
|
|
65
|
+
* Children passed by the user.
|
|
66
|
+
*/
|
|
67
|
+
externalChildren?: ReactNode;
|
|
68
|
+
asChild: boolean;
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* This component is used to properly render Slot's children.
|
|
72
|
+
*/
|
|
73
|
+
export declare const SlotChild: (props: SlotChildProps & import("react").RefAttributes<Element>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
33
74
|
export declare function ActionListLabel(props: PropsWithChildren): JSX.Element;
|
|
75
|
+
export declare function ActionListHeader(props: PropsWithChildren): JSX.Element;
|
|
34
76
|
export {};
|
|
@@ -85,6 +85,7 @@ export declare const Default: {
|
|
|
85
85
|
decorators?: import("@storybook/types").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R, {
|
|
86
86
|
variant?: import("./ActionList").ActionListVariant | undefined;
|
|
87
87
|
gap?: 0 | 4 | 8 | undefined;
|
|
88
|
+
sx?: import("../../theme").SX | undefined;
|
|
88
89
|
children?: import("react").ReactNode;
|
|
89
90
|
items: ActionListItemProps[];
|
|
90
91
|
}>[] | undefined;
|
|
@@ -130,6 +131,7 @@ export declare const WithProgress: {
|
|
|
130
131
|
decorators?: import("@storybook/types").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R, {
|
|
131
132
|
variant?: import("./ActionList").ActionListVariant | undefined;
|
|
132
133
|
gap?: 0 | 4 | 8 | undefined;
|
|
134
|
+
sx?: import("../../theme").SX | undefined;
|
|
133
135
|
children?: import("react").ReactNode;
|
|
134
136
|
items: ActionListItemProps[];
|
|
135
137
|
}>[] | undefined;
|
|
@@ -174,6 +176,7 @@ export declare const WithReadonlyProgress: {
|
|
|
174
176
|
decorators?: import("@storybook/types").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R, {
|
|
175
177
|
variant?: import("./ActionList").ActionListVariant | undefined;
|
|
176
178
|
gap?: 0 | 4 | 8 | undefined;
|
|
179
|
+
sx?: import("../../theme").SX | undefined;
|
|
177
180
|
children?: import("react").ReactNode;
|
|
178
181
|
items: ActionListItemProps[];
|
|
179
182
|
}>[] | undefined;
|
|
@@ -208,10 +211,11 @@ export declare const NavigationMenu: {
|
|
|
208
211
|
gap: 4;
|
|
209
212
|
variant: "compact";
|
|
210
213
|
items: ({
|
|
211
|
-
component: "
|
|
212
|
-
children:
|
|
214
|
+
component: "ActionListHeader";
|
|
215
|
+
children: JSX.Element;
|
|
213
216
|
backgroundColor?: undefined;
|
|
214
217
|
startIcon?: undefined;
|
|
218
|
+
endOverlay?: undefined;
|
|
215
219
|
style?: undefined;
|
|
216
220
|
sx?: undefined;
|
|
217
221
|
selected?: undefined;
|
|
@@ -221,6 +225,7 @@ export declare const NavigationMenu: {
|
|
|
221
225
|
backgroundColor: "transparent";
|
|
222
226
|
startIcon: "prismic";
|
|
223
227
|
children: string;
|
|
228
|
+
endOverlay?: undefined;
|
|
224
229
|
style?: undefined;
|
|
225
230
|
sx?: undefined;
|
|
226
231
|
selected?: undefined;
|
|
@@ -230,6 +235,7 @@ export declare const NavigationMenu: {
|
|
|
230
235
|
backgroundColor: "transparent";
|
|
231
236
|
startIcon: "checkBox";
|
|
232
237
|
children: string;
|
|
238
|
+
endOverlay?: undefined;
|
|
233
239
|
style?: undefined;
|
|
234
240
|
sx?: undefined;
|
|
235
241
|
selected?: undefined;
|
|
@@ -239,6 +245,7 @@ export declare const NavigationMenu: {
|
|
|
239
245
|
backgroundColor: "transparent";
|
|
240
246
|
startIcon: "colorLens";
|
|
241
247
|
children: string;
|
|
248
|
+
endOverlay?: undefined;
|
|
242
249
|
style?: undefined;
|
|
243
250
|
sx?: undefined;
|
|
244
251
|
selected?: undefined;
|
|
@@ -248,6 +255,7 @@ export declare const NavigationMenu: {
|
|
|
248
255
|
backgroundColor: "transparent";
|
|
249
256
|
startIcon: "search";
|
|
250
257
|
children: string;
|
|
258
|
+
endOverlay?: undefined;
|
|
251
259
|
style?: undefined;
|
|
252
260
|
sx?: undefined;
|
|
253
261
|
selected?: undefined;
|
|
@@ -257,6 +265,7 @@ export declare const NavigationMenu: {
|
|
|
257
265
|
backgroundColor: "transparent";
|
|
258
266
|
startIcon: "language";
|
|
259
267
|
children: string;
|
|
268
|
+
endOverlay: JSX.Element;
|
|
260
269
|
style?: undefined;
|
|
261
270
|
sx?: undefined;
|
|
262
271
|
selected?: undefined;
|
|
@@ -270,6 +279,17 @@ export declare const NavigationMenu: {
|
|
|
270
279
|
children?: undefined;
|
|
271
280
|
backgroundColor?: undefined;
|
|
272
281
|
startIcon?: undefined;
|
|
282
|
+
endOverlay?: undefined;
|
|
283
|
+
selected?: undefined;
|
|
284
|
+
renderEndIcon?: undefined;
|
|
285
|
+
} | {
|
|
286
|
+
component: "ActionListLabel";
|
|
287
|
+
children: string;
|
|
288
|
+
backgroundColor?: undefined;
|
|
289
|
+
startIcon?: undefined;
|
|
290
|
+
endOverlay?: undefined;
|
|
291
|
+
style?: undefined;
|
|
292
|
+
sx?: undefined;
|
|
273
293
|
selected?: undefined;
|
|
274
294
|
renderEndIcon?: undefined;
|
|
275
295
|
} | {
|
|
@@ -277,6 +297,7 @@ export declare const NavigationMenu: {
|
|
|
277
297
|
backgroundColor: "transparent";
|
|
278
298
|
startIcon: "database";
|
|
279
299
|
children: string;
|
|
300
|
+
endOverlay?: undefined;
|
|
280
301
|
style?: undefined;
|
|
281
302
|
sx?: undefined;
|
|
282
303
|
selected?: undefined;
|
|
@@ -286,6 +307,7 @@ export declare const NavigationMenu: {
|
|
|
286
307
|
backgroundColor: "transparent";
|
|
287
308
|
startIcon: "folder";
|
|
288
309
|
children: string;
|
|
310
|
+
endOverlay?: undefined;
|
|
289
311
|
style?: undefined;
|
|
290
312
|
sx?: undefined;
|
|
291
313
|
selected?: undefined;
|
|
@@ -296,6 +318,7 @@ export declare const NavigationMenu: {
|
|
|
296
318
|
startIcon: "checkBox";
|
|
297
319
|
children: string;
|
|
298
320
|
selected: true;
|
|
321
|
+
endOverlay?: undefined;
|
|
299
322
|
style?: undefined;
|
|
300
323
|
sx?: undefined;
|
|
301
324
|
renderEndIcon?: undefined;
|
|
@@ -304,6 +327,7 @@ export declare const NavigationMenu: {
|
|
|
304
327
|
backgroundColor: "transparent";
|
|
305
328
|
startIcon: "multipleStop";
|
|
306
329
|
children: string;
|
|
330
|
+
endOverlay?: undefined;
|
|
307
331
|
style?: undefined;
|
|
308
332
|
sx?: undefined;
|
|
309
333
|
selected?: undefined;
|
|
@@ -314,6 +338,7 @@ export declare const NavigationMenu: {
|
|
|
314
338
|
startIcon: "colorLens";
|
|
315
339
|
children: string;
|
|
316
340
|
renderEndIcon: () => JSX.Element;
|
|
341
|
+
endOverlay?: undefined;
|
|
317
342
|
style?: undefined;
|
|
318
343
|
sx?: undefined;
|
|
319
344
|
selected?: undefined;
|
|
@@ -322,6 +347,7 @@ export declare const NavigationMenu: {
|
|
|
322
347
|
decorators?: import("@storybook/types").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R, {
|
|
323
348
|
variant?: import("./ActionList").ActionListVariant | undefined;
|
|
324
349
|
gap?: 0 | 4 | 8 | undefined;
|
|
350
|
+
sx?: import("../../theme").SX | undefined;
|
|
325
351
|
children?: import("react").ReactNode;
|
|
326
352
|
items: ((ActionListItemProps & {
|
|
327
353
|
component: "ActionListItem";
|
|
@@ -329,6 +355,8 @@ export declare const NavigationMenu: {
|
|
|
329
355
|
component: "ActionListLabel";
|
|
330
356
|
}) | (SeparatorProps & {
|
|
331
357
|
component: "Separator";
|
|
358
|
+
}) | (PropsWithChildren & {
|
|
359
|
+
component: "ActionListHeader";
|
|
332
360
|
}))[];
|
|
333
361
|
}>[] | undefined;
|
|
334
362
|
argTypes?: Partial<import("@storybook/types").ArgTypes<ActionListProps & {
|
|
@@ -338,6 +366,8 @@ export declare const NavigationMenu: {
|
|
|
338
366
|
component: "ActionListLabel";
|
|
339
367
|
}) | (SeparatorProps & {
|
|
340
368
|
component: "Separator";
|
|
369
|
+
}) | (PropsWithChildren & {
|
|
370
|
+
component: "ActionListHeader";
|
|
341
371
|
}))[];
|
|
342
372
|
}>> | undefined;
|
|
343
373
|
loaders?: import("@storybook/types").LoaderFunction<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
|
|
@@ -347,6 +377,8 @@ export declare const NavigationMenu: {
|
|
|
347
377
|
component: "ActionListLabel";
|
|
348
378
|
}) | (SeparatorProps & {
|
|
349
379
|
component: "Separator";
|
|
380
|
+
}) | (PropsWithChildren & {
|
|
381
|
+
component: "ActionListHeader";
|
|
350
382
|
}))[];
|
|
351
383
|
}>[] | undefined;
|
|
352
384
|
render?: import("@storybook/types").ArgsStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ActionListProps & {
|
|
@@ -356,6 +388,8 @@ export declare const NavigationMenu: {
|
|
|
356
388
|
component: "ActionListLabel";
|
|
357
389
|
}) | (SeparatorProps & {
|
|
358
390
|
component: "Separator";
|
|
391
|
+
}) | (PropsWithChildren & {
|
|
392
|
+
component: "ActionListHeader";
|
|
359
393
|
}))[];
|
|
360
394
|
}> | undefined;
|
|
361
395
|
name?: string | undefined;
|
|
@@ -367,6 +401,8 @@ export declare const NavigationMenu: {
|
|
|
367
401
|
component: "ActionListLabel";
|
|
368
402
|
}) | (SeparatorProps & {
|
|
369
403
|
component: "Separator";
|
|
404
|
+
}) | (PropsWithChildren & {
|
|
405
|
+
component: "ActionListHeader";
|
|
370
406
|
}))[];
|
|
371
407
|
}> | undefined;
|
|
372
408
|
tags?: string[] | undefined;
|
|
@@ -377,6 +413,8 @@ export declare const NavigationMenu: {
|
|
|
377
413
|
component: "ActionListLabel";
|
|
378
414
|
}) | (SeparatorProps & {
|
|
379
415
|
component: "Separator";
|
|
416
|
+
}) | (PropsWithChildren & {
|
|
417
|
+
component: "ActionListHeader";
|
|
380
418
|
}))[];
|
|
381
419
|
}, Partial<ActionListProps & {
|
|
382
420
|
items: ((ActionListItemProps & {
|
|
@@ -385,6 +423,8 @@ export declare const NavigationMenu: {
|
|
|
385
423
|
component: "ActionListLabel";
|
|
386
424
|
}) | (SeparatorProps & {
|
|
387
425
|
component: "Separator";
|
|
426
|
+
}) | (PropsWithChildren & {
|
|
427
|
+
component: "ActionListHeader";
|
|
388
428
|
}))[];
|
|
389
429
|
}>>, "story"> | undefined;
|
|
390
430
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { ActionList, ActionListItem, ActionListLabel } from "./ActionList";
|
|
1
|
+
export { ActionList, ActionListHeader, ActionListItem, ActionListLabel, } from "./ActionList";
|
|
@@ -7,7 +7,7 @@ declare const meta: {
|
|
|
7
7
|
argTypes: {
|
|
8
8
|
icon: {
|
|
9
9
|
control: string;
|
|
10
|
-
options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "attachFile", "autoFixHigh", "biToggle", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "contentPaste", "createNewFolder", "crop", "cropLandscape", "cropPortrait", "dataObject", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "invite", "javascript", "json", "keyboardArrowDown", "keyboardArrowUp", "label", "language", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notStarted", "notes", "openInFull", "openInNew", "outbound", "people", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "sentimentSatisfied", "settings", "settingsEthernet", "smartDisplay", "svelte", "tabletMac", "tag", "terminal", "textFields", "title", "toggleOff", "translate", "typescript", "unfoldMore", "unsplash", "upload", "videocam", "viewDay", "visibility", "vue", "zoomOutMap"];
|
|
10
|
+
options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "attachFile", "autoFixHigh", "autorenew", "biToggle", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "contentPaste", "createNewFolder", "creditCard", "crop", "cropLandscape", "cropPortrait", "dataObject", "dataUsage", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "folderManaged", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "groupWork", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "invite", "javascript", "json", "keyboardArrowDown", "keyboardArrowUp", "label", "language", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "menuBook", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notStarted", "notes", "openInFull", "openInNew", "outbound", "people", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "receiptLong", "refresh", "save", "schedule", "search", "security", "sentimentSatisfied", "settings", "settingsEthernet", "smartDisplay", "svelte", "tabletMac", "tag", "terminal", "textFields", "title", "toggleOff", "translate", "tune", "typescript", "unfoldMore", "unsplash", "upload", "videocam", "viewDay", "visibility", "vue", "warning", "zoomOutMap"];
|
|
11
11
|
};
|
|
12
12
|
color: {
|
|
13
13
|
control: string;
|
|
@@ -8,7 +8,7 @@ export default meta;
|
|
|
8
8
|
export declare const Default: {
|
|
9
9
|
render: (args: {
|
|
10
10
|
ariaLabel: string;
|
|
11
|
-
gap?: 0 | "auto" | "fieldSetGap" |
|
|
11
|
+
gap?: 0 | 2 | 1 | "auto" | "fieldSetGap" | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 60 | 72 | 80 | 100 | 120 | undefined;
|
|
12
12
|
direction?: "horizontal" | "vertical" | undefined;
|
|
13
13
|
items: unknown[];
|
|
14
14
|
getItemKey: (item: unknown) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { BlankSlate, BlankSlateActions, BlankSlateDescription, BlankSlateIcon, BlankSlateImage, BlankSlateTitle } from "./BlankSlate";
|
|
1
|
+
export { BlankSlate, BlankSlateActions, BlankSlateDescription, BlankSlateIcon, BlankSlateImage, BlankSlateTitle, } from "./BlankSlate";
|
|
@@ -44,7 +44,7 @@ export type BoxProps = {
|
|
|
44
44
|
} & DisplayProps;
|
|
45
45
|
type DisplayProps = {
|
|
46
46
|
gap?: ThemeKeys<"space">;
|
|
47
|
-
alignItems?: "flex-start" | "center";
|
|
47
|
+
alignItems?: "flex-start" | "center" | "flex-end";
|
|
48
48
|
justifyContent?: "center" | "space-between" | "end";
|
|
49
49
|
} & (BoxGridDisplayProps | BoxFlexDisplayProps);
|
|
50
50
|
type BoxGridDisplayProps = {
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import type { StoryObj } from "@storybook/react";
|
|
3
|
+
type Story = StoryObj<typeof meta>;
|
|
2
4
|
declare const meta: {
|
|
3
5
|
title: string;
|
|
4
6
|
component: (props: import("./Box").BoxProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
@@ -11,141 +13,4 @@ declare const meta: {
|
|
|
11
13
|
};
|
|
12
14
|
};
|
|
13
15
|
export default meta;
|
|
14
|
-
export declare const Default:
|
|
15
|
-
render: (args: {
|
|
16
|
-
as?: "div" | "nav" | "ul" | "ol" | "article" | "header" | "form" | "span" | undefined;
|
|
17
|
-
children?: import("react").ReactNode;
|
|
18
|
-
position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
|
|
19
|
-
top?: string | number | undefined;
|
|
20
|
-
left?: string | number | undefined;
|
|
21
|
-
right?: string | number | undefined;
|
|
22
|
-
bottom?: string | number | undefined;
|
|
23
|
-
width?: string | number | undefined;
|
|
24
|
-
minWidth?: string | number | undefined;
|
|
25
|
-
maxWidth?: string | number | undefined;
|
|
26
|
-
height?: string | number | undefined;
|
|
27
|
-
minHeight?: string | number | undefined;
|
|
28
|
-
maxHeight?: string | number | undefined;
|
|
29
|
-
flexBasis?: 0 | undefined;
|
|
30
|
-
flexGrow?: 1 | undefined;
|
|
31
|
-
flexShrink?: 0 | undefined;
|
|
32
|
-
flexWrap?: "wrap" | undefined;
|
|
33
|
-
animation?: {
|
|
34
|
-
name?: "fadeIn" | undefined;
|
|
35
|
-
duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
|
|
36
|
-
} | undefined;
|
|
37
|
-
transition?: {
|
|
38
|
-
property: "opacity" | "background-color" | "height";
|
|
39
|
-
duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
|
|
40
|
-
delay?: string | undefined;
|
|
41
|
-
} | undefined;
|
|
42
|
-
padding?: (0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | {
|
|
43
|
-
block?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | undefined;
|
|
44
|
-
inline?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | undefined;
|
|
45
|
-
top?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | undefined;
|
|
46
|
-
bottom?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | undefined;
|
|
47
|
-
left?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | undefined;
|
|
48
|
-
right?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | undefined;
|
|
49
|
-
}) | undefined;
|
|
50
|
-
border?: (boolean | {
|
|
51
|
-
top?: boolean | undefined;
|
|
52
|
-
bottom?: boolean | undefined;
|
|
53
|
-
left?: boolean | undefined;
|
|
54
|
-
right?: boolean | undefined;
|
|
55
|
-
}) | undefined;
|
|
56
|
-
borderRadius?: (0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | {
|
|
57
|
-
topLeft?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
58
|
-
topRight?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
59
|
-
bottomLeft?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
60
|
-
bottomRight?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
61
|
-
}) | undefined;
|
|
62
|
-
borderStyle?: "none" | "dashed" | "solid" | undefined;
|
|
63
|
-
backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "indigo8" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato5" | "tomato6" | "tomato7" | "tomato8" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | "logoPurple" | "logoBlue" | "logoYellow" | "logoRed" | undefined;
|
|
64
|
-
opacity?: 0 | 1 | 0.1 | 0.3 | 0.4 | 0.5 | 0.6 | 0.8 | 0.9 | undefined;
|
|
65
|
-
visibility?: "hidden" | "visible" | undefined;
|
|
66
|
-
overflowY?: "auto" | "hidden" | undefined;
|
|
67
|
-
overflow?: "hidden" | undefined;
|
|
68
|
-
gridColumn?: string | undefined;
|
|
69
|
-
gridRow?: string | undefined;
|
|
70
|
-
transform?: import("csstype").Property.Transform | undefined;
|
|
71
|
-
gap?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | undefined;
|
|
72
|
-
alignItems?: "flex-start" | "center" | undefined;
|
|
73
|
-
justifyContent?: "center" | "space-between" | "end" | undefined;
|
|
74
|
-
display: "grid";
|
|
75
|
-
gridTemplateColumns?: string | undefined;
|
|
76
|
-
gridTemplateRows?: string | undefined;
|
|
77
|
-
flexDirection?: undefined;
|
|
78
|
-
ref?: import("react").Ref<HTMLElement> | undefined;
|
|
79
|
-
key?: import("react").Key | null | undefined;
|
|
80
|
-
} | {
|
|
81
|
-
as?: "div" | "nav" | "ul" | "ol" | "article" | "header" | "form" | "span" | undefined;
|
|
82
|
-
children?: import("react").ReactNode;
|
|
83
|
-
position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
|
|
84
|
-
top?: string | number | undefined;
|
|
85
|
-
left?: string | number | undefined;
|
|
86
|
-
right?: string | number | undefined;
|
|
87
|
-
bottom?: string | number | undefined;
|
|
88
|
-
width?: string | number | undefined;
|
|
89
|
-
minWidth?: string | number | undefined;
|
|
90
|
-
maxWidth?: string | number | undefined;
|
|
91
|
-
height?: string | number | undefined;
|
|
92
|
-
minHeight?: string | number | undefined;
|
|
93
|
-
maxHeight?: string | number | undefined;
|
|
94
|
-
flexBasis?: 0 | undefined;
|
|
95
|
-
flexGrow?: 1 | undefined;
|
|
96
|
-
flexShrink?: 0 | undefined;
|
|
97
|
-
flexWrap?: "wrap" | undefined;
|
|
98
|
-
animation?: {
|
|
99
|
-
name?: "fadeIn" | undefined;
|
|
100
|
-
duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
|
|
101
|
-
} | undefined;
|
|
102
|
-
transition?: {
|
|
103
|
-
property: "opacity" | "background-color" | "height";
|
|
104
|
-
duration?: 0 | 100 | 75 | 150 | 200 | 250 | 300 | 400 | undefined;
|
|
105
|
-
delay?: string | undefined;
|
|
106
|
-
} | undefined;
|
|
107
|
-
padding?: (0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | {
|
|
108
|
-
block?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | undefined;
|
|
109
|
-
inline?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | undefined;
|
|
110
|
-
top?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | undefined;
|
|
111
|
-
bottom?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | undefined;
|
|
112
|
-
left?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | undefined;
|
|
113
|
-
right?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | undefined;
|
|
114
|
-
}) | undefined;
|
|
115
|
-
border?: (boolean | {
|
|
116
|
-
top?: boolean | undefined;
|
|
117
|
-
bottom?: boolean | undefined;
|
|
118
|
-
left?: boolean | undefined;
|
|
119
|
-
right?: boolean | undefined;
|
|
120
|
-
}) | undefined;
|
|
121
|
-
borderRadius?: (0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | {
|
|
122
|
-
topLeft?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
123
|
-
topRight?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
124
|
-
bottomLeft?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
125
|
-
bottomRight?: 0 | "50%" | "100%" | "inherit" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | undefined;
|
|
126
|
-
}) | undefined;
|
|
127
|
-
borderStyle?: "none" | "dashed" | "solid" | undefined;
|
|
128
|
-
backgroundColor?: "inherit" | "currentColor" | "transparent" | "white" | "black" | "grey1" | "grey2" | "grey3" | "grey4" | "grey5" | "grey6" | "grey7" | "grey8" | "grey9" | "grey10" | "grey11" | "grey12" | "dark12" | "indigo2" | "indigo4" | "indigo5" | "indigo7" | "indigo8" | "indigo10" | "indigo11" | "indigo12" | "green3" | "green4" | "green9" | "green10" | "green11" | "green12" | "amber3" | "amber4" | "amber9" | "amber10" | "amber11" | "amber12" | "tomato1" | "tomato2" | "tomato3" | "tomato4" | "tomato5" | "tomato6" | "tomato7" | "tomato8" | "tomato9" | "tomato10" | "tomato11" | "tomato12" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "purple11" | "purple12" | "greyAlpha1" | "logoPurple" | "logoBlue" | "logoYellow" | "logoRed" | undefined;
|
|
129
|
-
opacity?: 0 | 1 | 0.1 | 0.3 | 0.4 | 0.5 | 0.6 | 0.8 | 0.9 | undefined;
|
|
130
|
-
visibility?: "hidden" | "visible" | undefined;
|
|
131
|
-
overflowY?: "auto" | "hidden" | undefined;
|
|
132
|
-
overflow?: "hidden" | undefined;
|
|
133
|
-
gridColumn?: string | undefined;
|
|
134
|
-
gridRow?: string | undefined;
|
|
135
|
-
transform?: import("csstype").Property.Transform | undefined;
|
|
136
|
-
gap?: 0 | "auto" | "fieldSetGap" | 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 72 | 80 | 100 | 120 | undefined;
|
|
137
|
-
alignItems?: "flex-start" | "center" | undefined;
|
|
138
|
-
justifyContent?: "center" | "space-between" | "end" | undefined;
|
|
139
|
-
display?: "flex" | "inline-flex" | undefined;
|
|
140
|
-
flexDirection?: "column" | "row" | undefined;
|
|
141
|
-
gridTemplateColumns?: undefined;
|
|
142
|
-
gridTemplateRows?: undefined;
|
|
143
|
-
ref?: import("react").Ref<HTMLElement> | undefined;
|
|
144
|
-
key?: import("react").Key | null | undefined;
|
|
145
|
-
}) => JSX.Element;
|
|
146
|
-
args: {
|
|
147
|
-
children: JSX.Element;
|
|
148
|
-
as: "div";
|
|
149
|
-
};
|
|
150
|
-
name: string;
|
|
151
|
-
};
|
|
16
|
+
export declare const Default: Story;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type MouseEvent, type ReactNode } from "react";
|
|
1
|
+
import { type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from "react";
|
|
2
2
|
import { type Keys } from "react-hotkeys-hook";
|
|
3
3
|
import type { SX } from "../../theme";
|
|
4
4
|
import { type IconName } from "../Icon";
|
|
@@ -10,8 +10,8 @@ export interface ButtonProps {
|
|
|
10
10
|
* Note that said component must be implemented with forwardRef() and spread/provide all its props to its first child VNode.
|
|
11
11
|
*/
|
|
12
12
|
asChild?: boolean;
|
|
13
|
-
/** Note that white
|
|
14
|
-
color?: "grey" | "darkGrey" | "purple" | "dark" | "tomato" | "amber" | "green" | "white" | "indigo";
|
|
13
|
+
/** Note that black & white are only supported for the invisible button */
|
|
14
|
+
color?: "black" | "grey" | "darkGrey" | "purple" | "dark" | "tomato" | "amber" | "green" | "white" | "indigo";
|
|
15
15
|
size?: "small" | "medium" | "large";
|
|
16
16
|
disabled?: boolean;
|
|
17
17
|
loading?: boolean;
|
|
@@ -40,11 +40,13 @@ export interface ButtonProps {
|
|
|
40
40
|
/** Removes padding around the icon. Will only apply to icon only buttons. */
|
|
41
41
|
hasPadding?: boolean;
|
|
42
42
|
/** Underlines the text content of the button. Only applies to invisible buttons */
|
|
43
|
-
underline?: boolean;
|
|
43
|
+
underline?: boolean | "hover";
|
|
44
44
|
hiddenLabel?: string;
|
|
45
45
|
onClick?: (event: MouseEvent | KeyboardEvent) => void;
|
|
46
46
|
onMouseDown?: (event: MouseEvent) => void;
|
|
47
47
|
onMouseUp?: (event: MouseEvent) => void;
|
|
48
|
+
type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
|
|
49
|
+
form?: ButtonHTMLAttributes<HTMLButtonElement>["form"];
|
|
48
50
|
}
|
|
49
51
|
export declare const Button: (props: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|
|
50
52
|
interface ButtonChildrenProps {
|
|
@@ -8,7 +8,7 @@ declare const meta: {
|
|
|
8
8
|
control: {
|
|
9
9
|
type: string;
|
|
10
10
|
};
|
|
11
|
-
options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "attachFile", "autoFixHigh", "biToggle", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "contentPaste", "createNewFolder", "crop", "cropLandscape", "cropPortrait", "dataObject", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "invite", "javascript", "json", "keyboardArrowDown", "keyboardArrowUp", "label", "language", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notStarted", "notes", "openInFull", "openInNew", "outbound", "people", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "sentimentSatisfied", "settings", "settingsEthernet", "smartDisplay", "svelte", "tabletMac", "tag", "terminal", "textFields", "title", "toggleOff", "translate", "typescript", "unfoldMore", "unsplash", "upload", "videocam", "viewDay", "visibility", "vue", "zoomOutMap"];
|
|
11
|
+
options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "attachFile", "autoFixHigh", "autorenew", "biToggle", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "contentPaste", "createNewFolder", "creditCard", "crop", "cropLandscape", "cropPortrait", "dataObject", "dataUsage", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "folderManaged", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "groupWork", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "invite", "javascript", "json", "keyboardArrowDown", "keyboardArrowUp", "label", "language", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "menuBook", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notStarted", "notes", "openInFull", "openInNew", "outbound", "people", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "receiptLong", "refresh", "save", "schedule", "search", "security", "sentimentSatisfied", "settings", "settingsEthernet", "smartDisplay", "svelte", "tabletMac", "tag", "terminal", "textFields", "title", "toggleOff", "translate", "tune", "typescript", "unfoldMore", "unsplash", "upload", "videocam", "viewDay", "visibility", "vue", "warning", "zoomOutMap"];
|
|
12
12
|
};
|
|
13
13
|
};
|
|
14
14
|
};
|
|
@@ -17,7 +17,7 @@ export declare const Default: {
|
|
|
17
17
|
render: (args: {
|
|
18
18
|
children?: import("react").ReactNode;
|
|
19
19
|
asChild?: boolean | undefined;
|
|
20
|
-
color?: "dark" | "white" | "green" | "grey" | "indigo" | "purple" | "tomato" | "darkGrey" | "amber" | undefined;
|
|
20
|
+
color?: "dark" | "white" | "black" | "green" | "grey" | "indigo" | "purple" | "tomato" | "darkGrey" | "amber" | undefined;
|
|
21
21
|
size?: "small" | "medium" | "large" | undefined;
|
|
22
22
|
disabled?: boolean | undefined;
|
|
23
23
|
loading?: boolean | undefined;
|
|
@@ -26,18 +26,20 @@ export declare const Default: {
|
|
|
26
26
|
textWeight?: "bold" | "normal" | undefined;
|
|
27
27
|
radius?: "normal" | "full" | undefined;
|
|
28
28
|
sx?: import("../../theme").SX | undefined;
|
|
29
|
-
startIcon?: "
|
|
30
|
-
endIcon?: "
|
|
29
|
+
startIcon?: "translate" | "visibility" | "search" | "link" | "description" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "attachFile" | "autoFixHigh" | "autorenew" | "biToggle" | "block" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "contentPaste" | "createNewFolder" | "creditCard" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dataUsage" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "folderManaged" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "groupWork" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "invite" | "javascript" | "json" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "language" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "menuBook" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notStarted" | "notes" | "openInFull" | "openInNew" | "outbound" | "people" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "receiptLong" | "refresh" | "save" | "schedule" | "security" | "sentimentSatisfied" | "settings" | "settingsEthernet" | "smartDisplay" | "svelte" | "tabletMac" | "tag" | "terminal" | "textFields" | "title" | "toggleOff" | "tune" | "typescript" | "unfoldMore" | "unsplash" | "upload" | "videocam" | "viewDay" | "vue" | "warning" | "zoomOutMap" | undefined;
|
|
30
|
+
endIcon?: "translate" | "visibility" | "search" | "link" | "description" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "attachFile" | "autoFixHigh" | "autorenew" | "biToggle" | "block" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "contentPaste" | "createNewFolder" | "creditCard" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dataUsage" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "folderManaged" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "groupWork" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "invite" | "javascript" | "json" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "language" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "menuBook" | "migrationRelease" | "moreVert" | "multipleStop" | "musicNote" | "notStarted" | "notes" | "openInFull" | "openInNew" | "outbound" | "people" | "phoneIphone" | "photo" | "pin" | "place" | "playCircle" | "preview" | "prismic" | "public" | "receiptLong" | "refresh" | "save" | "schedule" | "security" | "sentimentSatisfied" | "settings" | "settingsEthernet" | "smartDisplay" | "svelte" | "tabletMac" | "tag" | "terminal" | "textFields" | "title" | "toggleOff" | "tune" | "typescript" | "unfoldMore" | "unsplash" | "upload" | "videocam" | "viewDay" | "vue" | "warning" | "zoomOutMap" | undefined;
|
|
31
31
|
renderStartIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
|
|
32
32
|
renderEndIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
|
|
33
33
|
hotkeys?: import("react-hotkeys-hook").Keys | undefined;
|
|
34
34
|
invisible?: boolean | undefined;
|
|
35
35
|
hasPadding?: boolean | undefined;
|
|
36
|
-
underline?: boolean | undefined;
|
|
36
|
+
underline?: boolean | "hover" | undefined;
|
|
37
37
|
hiddenLabel?: string | undefined;
|
|
38
38
|
onClick?: ((event: import("react").MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
|
|
39
39
|
onMouseDown?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
|
|
40
40
|
onMouseUp?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
|
|
41
|
+
type?: "button" | "submit" | "reset" | undefined;
|
|
42
|
+
form?: string | undefined;
|
|
41
43
|
ref?: import("react").Ref<HTMLButtonElement> | undefined;
|
|
42
44
|
key?: import("react").Key | null | undefined;
|
|
43
45
|
}) => JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Card, CardContent, CardFooter, CardHeader, CardHeaderActions, CardHeaderTitle, CardImage } from "./Card";
|
|
1
|
+
export { Card, CardContent, CardFooter, CardHeader, CardHeaderActions, CardHeaderTitle, CardImage, } from "./Card";
|
|
2
2
|
export { PreviewCard, PreviewContent, PreviewImage } from "./PreviewCard";
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { type IconProps } from "../Icon";
|
|
2
2
|
export interface CircleIconProps {
|
|
3
|
-
color?:
|
|
3
|
+
color?: Color;
|
|
4
4
|
name: IconProps["name"];
|
|
5
5
|
size?: IconProps["size"];
|
|
6
6
|
sx?: IconProps["sx"];
|
|
7
7
|
variant?: "soft" | "solid";
|
|
8
8
|
}
|
|
9
9
|
export declare function CircleIcon(props: CircleIconProps): JSX.Element;
|
|
10
|
+
type Color = "amber" | "grey" | "purple" | "tomato";
|
|
11
|
+
export {};
|
|
@@ -9,7 +9,7 @@ declare const meta: {
|
|
|
9
9
|
};
|
|
10
10
|
name: {
|
|
11
11
|
control: string;
|
|
12
|
-
options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "attachFile", "autoFixHigh", "biToggle", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "contentPaste", "createNewFolder", "crop", "cropLandscape", "cropPortrait", "dataObject", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "invite", "javascript", "json", "keyboardArrowDown", "keyboardArrowUp", "label", "language", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notStarted", "notes", "openInFull", "openInNew", "outbound", "people", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "sentimentSatisfied", "settings", "settingsEthernet", "smartDisplay", "svelte", "tabletMac", "tag", "terminal", "textFields", "title", "toggleOff", "translate", "typescript", "unfoldMore", "unsplash", "upload", "videocam", "viewDay", "visibility", "vue", "zoomOutMap"];
|
|
12
|
+
options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "attachFile", "autoFixHigh", "autorenew", "biToggle", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "contentPaste", "createNewFolder", "creditCard", "crop", "cropLandscape", "cropPortrait", "dataObject", "dataUsage", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "folderManaged", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "groupWork", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "invite", "javascript", "json", "keyboardArrowDown", "keyboardArrowUp", "label", "language", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "menuBook", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notStarted", "notes", "openInFull", "openInNew", "outbound", "people", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "receiptLong", "refresh", "save", "schedule", "search", "security", "sentimentSatisfied", "settings", "settingsEthernet", "smartDisplay", "svelte", "tabletMac", "tag", "terminal", "textFields", "title", "toggleOff", "translate", "tune", "typescript", "unfoldMore", "unsplash", "upload", "videocam", "viewDay", "visibility", "vue", "warning", "zoomOutMap"];
|
|
13
13
|
};
|
|
14
14
|
size: import("@storybook/types").InputType | undefined;
|
|
15
15
|
variant: {
|