@prismicio/editor-ui 0.4.17 → 0.4.18
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/AnimatedElement/AnimatedElement.d.ts +0 -1
- package/dist/components/Badge/Badge.css.d.ts +4 -1
- package/dist/components/Badge/Badge.d.ts +3 -3
- package/dist/components/Badge/Badge.stories.d.ts +3 -3
- package/dist/components/BlankSlate/BlankSlate.css.d.ts +0 -2
- package/dist/components/BlankSlate/BlankSlate.d.ts +3 -3
- package/dist/components/Button/Button.d.ts +15 -6
- package/dist/components/Button/Button.stories.d.ts +34 -7
- package/dist/components/ButtonGroup/ButtonGroup.d.ts +2 -3
- package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts +44 -7
- package/dist/components/Card/Card.d.ts +10 -4
- package/dist/components/Checkbox/Checkbox.d.ts +2 -0
- package/dist/components/Checkbox/Checkbox.stories.d.ts +2 -0
- package/dist/components/Cropper/Cropper.stories.d.ts +6 -6
- package/dist/components/DropdownMenu/DropdownMenu.css.d.ts +1 -0
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +1 -0
- package/dist/components/FileUpload/FileDropZone/FileDropZone.d.ts +2 -0
- package/dist/components/FileUpload/FileUpload.utils.d.ts +8 -2
- package/dist/components/FileUpload/FileUploadTrigger/FileUploadTrigger.d.ts +2 -0
- package/dist/components/Form/FormInput.d.ts +4 -1
- package/dist/components/Group/GroupItem.css.d.ts +0 -1
- package/dist/components/HiddenLabel/HiddenLabel.d.ts +11 -0
- package/dist/components/HiddenLabel/index.d.ts +1 -0
- package/dist/components/Icon/Icon.d.ts +2 -2
- package/dist/components/Icon/iconNames.d.ts +1 -1
- package/dist/components/IconButton/IconButton.d.ts +1 -0
- package/dist/components/Image/Image.d.ts +2 -0
- package/dist/components/InvisibleButton/InvisibleButton.css.d.ts +1 -0
- package/dist/components/InvisibleButton/InvisibleButton.d.ts +1 -0
- package/dist/components/List/UnorderedList.d.ts +11 -0
- package/dist/components/List/UnorderedList.stories.d.ts +23 -0
- package/dist/components/List/index.d.ts +1 -0
- package/dist/components/Masonry/MasonryFile.d.ts +2 -3
- package/dist/components/MediaCard/MediaCard.d.ts +35 -0
- package/dist/components/MediaCard/MediaCard.stories.d.ts +54 -0
- package/dist/components/MediaCard/index.d.ts +1 -0
- package/dist/components/MediaProgress/MediaProgress.d.ts +6 -0
- package/dist/components/MediaProgress/MediaProgress.stories.d.ts +24 -0
- package/dist/components/MediaProgress/index.d.ts +1 -0
- package/dist/components/Select/Select.css.d.ts +0 -5
- package/dist/components/Select/Select.d.ts +8 -9
- package/dist/components/Select/SelectGhostTrigger.d.ts +11 -0
- package/dist/components/Select/index.d.ts +1 -0
- package/dist/components/Separator/Separator.d.ts +6 -1
- package/dist/components/Separator/Separator.stories.d.ts +31 -6
- package/dist/components/Skeleton/Skeleton.d.ts +11 -11
- package/dist/components/Slider/Slider.stories.d.ts +2 -2
- package/dist/components/Table/Table.d.ts +1 -0
- package/dist/components/TagField/useTagFieldHeader.d.ts +1 -0
- package/dist/components/Text/Text.css.d.ts +2 -1
- package/dist/components/Text/Text.d.ts +2 -1
- package/dist/components/Toast/Toast.stories.d.ts +2 -2
- package/dist/components/ToggleButton/ToggleButton.d.ts +2 -3
- package/dist/components/ToggleButton/ToggleButton.stories.d.ts +37 -7
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.ts +25 -15
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.d.ts +64 -16
- package/dist/components/Toolbar/Toolbar.d.ts +2 -3
- package/dist/components/Video/Video.d.ts +6 -1
- package/dist/components/Video/Video.stories.d.ts +34 -7
- package/dist/index.d.ts +3 -1
- package/dist/index.es.js +10038 -9806
- package/dist/style.css +1 -1
- package/dist/theme/mode.css.d.ts +1 -1
- package/dist/theme/new/theme.d.ts +12 -2
- package/dist/theme/selectors.d.ts +20 -20
- package/dist/theme/sprinkles.css.d.ts +1335 -1335
- package/package.json +3 -2
- package/dist/components/Button/Button.css.d.ts +0 -13
- package/dist/components/ButtonGroup/ButtonGroup.css.d.ts +0 -5
- package/dist/components/Image/Image.css.d.ts +0 -8
- package/dist/components/SearchInput/SearchInput.css.d.ts +0 -2
- package/dist/components/Separator/Separator.css.d.ts +0 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
2
|
export declare const Badge: import("react").ForwardRefExoticComponent<Readonly<{
|
|
3
3
|
title: ReactNode;
|
|
4
|
-
color?: "
|
|
4
|
+
color?: "grey" | "tomato" | "green" | "purple" | "amber" | undefined;
|
|
5
5
|
size?: "medium" | "large" | undefined;
|
|
6
|
-
|
|
6
|
+
maxWidth?: 150 | 250 | undefined;
|
|
7
7
|
onClose?: (() => void) | undefined;
|
|
8
|
-
icon?: "
|
|
8
|
+
icon?: "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "code" | "colorLens" | "contentCopy" | "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" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "link" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "search" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "visibility" | "zoomOutMap" | undefined;
|
|
9
9
|
onClick?: (() => void) | undefined;
|
|
10
10
|
selected?: boolean | undefined;
|
|
11
11
|
onMouseEnter?: (() => void) | undefined;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Readonly<{
|
|
2
2
|
title: import("react").ReactNode;
|
|
3
|
-
color?: "
|
|
3
|
+
color?: "grey" | "tomato" | "green" | "purple" | "amber" | undefined;
|
|
4
4
|
size?: "medium" | "large" | undefined;
|
|
5
|
-
|
|
5
|
+
maxWidth?: 150 | 250 | undefined;
|
|
6
6
|
onClose?: (() => void) | undefined;
|
|
7
|
-
icon?: "
|
|
7
|
+
icon?: "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "code" | "colorLens" | "contentCopy" | "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" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "link" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "search" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "visibility" | "zoomOutMap" | undefined;
|
|
8
8
|
onClick?: (() => void) | undefined;
|
|
9
9
|
selected?: boolean | undefined;
|
|
10
10
|
onMouseEnter?: (() => void) | undefined;
|
|
@@ -3,10 +3,8 @@ export declare const icon: string;
|
|
|
3
3
|
export declare const image: string;
|
|
4
4
|
export declare const imageFixedHeight: string;
|
|
5
5
|
export declare const iconChildren: string;
|
|
6
|
-
export declare const title: string;
|
|
7
6
|
export declare const titleSizeVariant: {
|
|
8
7
|
regular: string;
|
|
9
8
|
big: string;
|
|
10
9
|
};
|
|
11
10
|
export declare const description: string;
|
|
12
|
-
export declare const actions: string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { CSSProperties, FC, PropsWithChildren } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { type ThemeKeys } from "../../theme/new/theme";
|
|
3
3
|
import { type IconName } from "../Icon";
|
|
4
4
|
import * as styles from "./BlankSlate.css";
|
|
5
5
|
export interface BlankSlateProps extends PropsWithChildren {
|
|
@@ -8,8 +8,8 @@ export interface BlankSlateProps extends PropsWithChildren {
|
|
|
8
8
|
export declare const BlankSlate: FC<BlankSlateProps>;
|
|
9
9
|
type BlankSlateIconProps = Readonly<{
|
|
10
10
|
name: IconName;
|
|
11
|
-
lineColor?:
|
|
12
|
-
backgroundColor?:
|
|
11
|
+
lineColor?: ThemeKeys<"color">;
|
|
12
|
+
backgroundColor?: ThemeKeys<"color">;
|
|
13
13
|
}>;
|
|
14
14
|
export declare const BlankSlateIcon: FC<BlankSlateIconProps>;
|
|
15
15
|
export interface BlankSlateTitleProps extends PropsWithChildren {
|
|
@@ -1,18 +1,27 @@
|
|
|
1
1
|
import { type MouseEvent, type ReactNode } from "react";
|
|
2
2
|
import type { SX } from "../../theme/new/sx";
|
|
3
3
|
import { type IconName } from "../Icon";
|
|
4
|
-
import * as styles from "./Button.css";
|
|
5
4
|
export interface ButtonProps {
|
|
6
5
|
children?: ReactNode;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
size?: keyof typeof styles.size;
|
|
6
|
+
color?: "grey" | "purple" | "dark" | "tomato" | "amber" | "green";
|
|
7
|
+
size?: "small" | "medium" | "large";
|
|
10
8
|
disabled?: boolean;
|
|
11
9
|
loading?: boolean;
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
/**
|
|
11
|
+
* Whether to make the text (children) content of the Button take all the available space.
|
|
12
|
+
* This can be useful when the Button's width is set from the outside instead of being "auto".
|
|
13
|
+
* If you set a large width from the outside but leave this prop to false/undefined,
|
|
14
|
+
* the button's children will be centered, which looks strange.
|
|
15
|
+
* Defaults to false.
|
|
16
|
+
*/
|
|
14
17
|
flexContent?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Buttons have a bold text by default. You can override this by passing "normal".
|
|
20
|
+
*/
|
|
21
|
+
textWeight?: "normal" | "bold";
|
|
15
22
|
sx?: SX;
|
|
23
|
+
startIcon?: IconName;
|
|
24
|
+
endIcon?: IconName;
|
|
16
25
|
renderStartIcon?: (icon: ReactNode) => ReactNode;
|
|
17
26
|
renderEndIcon?: (icon: ReactNode) => ReactNode;
|
|
18
27
|
onClick?: (event: MouseEvent) => void;
|
|
@@ -1,13 +1,40 @@
|
|
|
1
|
-
declare const
|
|
2
|
-
|
|
1
|
+
declare const meta: {
|
|
2
|
+
title: string;
|
|
3
|
+
component: import("react").ForwardRefExoticComponent<import("./Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
4
|
+
argTypes: {
|
|
5
|
+
onClick: {};
|
|
6
|
+
startIcon: {
|
|
7
|
+
control: {
|
|
8
|
+
type: string;
|
|
9
|
+
};
|
|
10
|
+
options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "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", "keyboardArrowDown", "keyboardArrowUp", "label", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "musicNote", "notes", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export default meta;
|
|
3
15
|
export declare const Default: {
|
|
16
|
+
render: (args: {
|
|
17
|
+
children?: import("react").ReactNode;
|
|
18
|
+
color?: "grey" | "tomato" | "dark" | "green" | "purple" | "amber" | undefined;
|
|
19
|
+
size?: "small" | "medium" | "large" | undefined;
|
|
20
|
+
disabled?: boolean | undefined;
|
|
21
|
+
loading?: boolean | undefined;
|
|
22
|
+
flexContent?: boolean | undefined;
|
|
23
|
+
textWeight?: "bold" | "normal" | undefined;
|
|
24
|
+
sx?: import("../../theme/new/sx").SX | undefined;
|
|
25
|
+
startIcon?: "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "code" | "colorLens" | "contentCopy" | "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" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "link" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "search" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "visibility" | "zoomOutMap" | undefined;
|
|
26
|
+
endIcon?: "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "code" | "colorLens" | "contentCopy" | "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" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "link" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "search" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "visibility" | "zoomOutMap" | undefined;
|
|
27
|
+
renderStartIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
|
|
28
|
+
renderEndIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
|
|
29
|
+
onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
|
|
30
|
+
onMouseEnter?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
|
|
31
|
+
onMouseLeave?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
|
|
32
|
+
ref?: import("react").Ref<HTMLButtonElement> | undefined;
|
|
33
|
+
key?: import("react").Key | null | undefined;
|
|
34
|
+
}) => JSX.Element;
|
|
4
35
|
args: {
|
|
5
36
|
children: string;
|
|
6
|
-
|
|
7
|
-
loading: boolean;
|
|
8
|
-
size: string;
|
|
9
|
-
startIcon: string;
|
|
10
|
-
variant: string;
|
|
37
|
+
startIcon: "schedule";
|
|
11
38
|
};
|
|
12
39
|
name: string;
|
|
13
40
|
};
|
|
@@ -2,10 +2,9 @@ import { type ReactNode } from "react";
|
|
|
2
2
|
import type { SX } from "../../theme/new/sx";
|
|
3
3
|
export interface ButtonGroupProps {
|
|
4
4
|
children?: ReactNode;
|
|
5
|
-
className?: string;
|
|
6
5
|
disabled?: boolean;
|
|
7
6
|
size?: "small" | "medium" | "large";
|
|
8
|
-
|
|
7
|
+
color?: "grey" | "purple" | "dark";
|
|
9
8
|
density?: "regular" | "compact";
|
|
10
9
|
sx?: SX;
|
|
11
10
|
}
|
|
@@ -13,7 +12,7 @@ export declare const ButtonGroup: import("react").ForwardRefExoticComponent<Butt
|
|
|
13
12
|
interface ButtonGroupContextValue {
|
|
14
13
|
disabled?: boolean;
|
|
15
14
|
size: "small" | "medium" | "large";
|
|
16
|
-
|
|
15
|
+
color: "grey" | "dark" | "purple";
|
|
17
16
|
}
|
|
18
17
|
export declare function useButtonGroup(): ButtonGroupContextValue | undefined;
|
|
19
18
|
export {};
|
|
@@ -1,12 +1,49 @@
|
|
|
1
|
-
declare const
|
|
2
|
-
|
|
1
|
+
declare const meta: {
|
|
2
|
+
title: string;
|
|
3
|
+
component: import("react").ForwardRefExoticComponent<import("./ButtonGroup").ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
4
|
+
argTypes: {
|
|
5
|
+
children: {
|
|
6
|
+
control: {
|
|
7
|
+
disable: boolean;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
density: {
|
|
11
|
+
control: {
|
|
12
|
+
type: string;
|
|
13
|
+
};
|
|
14
|
+
options: string[];
|
|
15
|
+
};
|
|
16
|
+
size: {
|
|
17
|
+
control: {
|
|
18
|
+
type: string;
|
|
19
|
+
};
|
|
20
|
+
options: string[];
|
|
21
|
+
};
|
|
22
|
+
color: {
|
|
23
|
+
control: {
|
|
24
|
+
type: string;
|
|
25
|
+
};
|
|
26
|
+
options: string[];
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
export default meta;
|
|
3
31
|
export declare const Default: {
|
|
32
|
+
render: (args: {
|
|
33
|
+
children?: import("react").ReactNode;
|
|
34
|
+
disabled?: boolean | undefined;
|
|
35
|
+
size?: "small" | "medium" | "large" | undefined;
|
|
36
|
+
color?: "grey" | "dark" | "purple" | undefined;
|
|
37
|
+
density?: "compact" | "regular" | undefined;
|
|
38
|
+
sx?: import("../../theme/new/sx").SX | undefined;
|
|
39
|
+
ref?: import("react").Ref<HTMLDivElement> | undefined;
|
|
40
|
+
key?: import("react").Key | null | undefined;
|
|
41
|
+
}) => JSX.Element;
|
|
4
42
|
args: {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
variant: string;
|
|
43
|
+
density: "regular";
|
|
44
|
+
disabled: false;
|
|
45
|
+
size: "medium";
|
|
46
|
+
color: "purple";
|
|
10
47
|
};
|
|
11
48
|
name: string;
|
|
12
49
|
};
|
|
@@ -1,15 +1,21 @@
|
|
|
1
1
|
import type { PropsWithChildren, ReactNode } from "react";
|
|
2
2
|
import type { SX } from "../../theme/new/sx";
|
|
3
|
-
import
|
|
3
|
+
import { type TextProps } from "../Text";
|
|
4
4
|
export interface CardProps {
|
|
5
5
|
children?: ReactNode;
|
|
6
|
-
color?:
|
|
7
|
-
variant?:
|
|
6
|
+
color?: "grey1" | "grey2" | "grey3" | "indigo2" | "purple1";
|
|
7
|
+
variant?: "dashed" | "elevated" | "outlined" | "selected";
|
|
8
|
+
radius?: 4 | 6;
|
|
9
|
+
padding?: 24;
|
|
8
10
|
sx?: SX;
|
|
9
11
|
}
|
|
10
12
|
export declare function Card(props: CardProps): JSX.Element;
|
|
11
13
|
export declare function CardHeader(props: PropsWithChildren): JSX.Element;
|
|
12
|
-
|
|
14
|
+
interface CardHeaderTitleProps {
|
|
15
|
+
children?: ReactNode;
|
|
16
|
+
variant?: TextProps["variant"];
|
|
17
|
+
}
|
|
18
|
+
export declare function CardHeaderTitle(props: CardHeaderTitleProps): JSX.Element;
|
|
13
19
|
interface CardHeaderActionsProps {
|
|
14
20
|
children?: ReactNode;
|
|
15
21
|
sx?: SX;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
import { type MouseEventHandler } from "react";
|
|
1
2
|
export interface CheckboxProps {
|
|
2
3
|
checked?: boolean;
|
|
3
4
|
disabled?: boolean;
|
|
4
5
|
onCheckedChange?: (checked: boolean) => void;
|
|
6
|
+
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
5
7
|
tabIndex?: number;
|
|
6
8
|
}
|
|
7
9
|
export declare function Checkbox(props: CheckboxProps): JSX.Element;
|
|
@@ -4,9 +4,11 @@ export declare const Default: import("@storybook/types").StoryAnnotations<import
|
|
|
4
4
|
checked?: boolean | undefined;
|
|
5
5
|
disabled?: boolean | undefined;
|
|
6
6
|
onCheckedChange?: ((checked: boolean) => void) | undefined;
|
|
7
|
+
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
7
8
|
tabIndex?: number | undefined;
|
|
8
9
|
}, {
|
|
9
10
|
disabled?: boolean | undefined;
|
|
11
|
+
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
10
12
|
tabIndex?: number | undefined;
|
|
11
13
|
checked?: boolean | undefined;
|
|
12
14
|
onCheckedChange?: ((checked: boolean) => void) | undefined;
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
|
|
2
|
-
zoom: number;
|
|
3
2
|
crop: import("react-easy-crop").Point;
|
|
4
3
|
image?: string | undefined;
|
|
5
|
-
|
|
6
|
-
onZoomChange?: ((zoom: number) => void) | undefined;
|
|
4
|
+
zoom: number;
|
|
7
5
|
onCropChange: (location: import("react-easy-crop").Point) => void;
|
|
6
|
+
onZoomChange?: ((zoom: number) => void) | undefined;
|
|
8
7
|
onCropAreaChange?: ((croppedArea: import("react-easy-crop").Area, croppedAreaPixels: import("react-easy-crop").Area) => void) | undefined;
|
|
8
|
+
aspect: number;
|
|
9
9
|
initialCroppedAreaPixels?: import("react-easy-crop").Area | undefined;
|
|
10
10
|
}>;
|
|
11
11
|
export default _default;
|
|
12
12
|
export declare const Default: {
|
|
13
13
|
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
|
|
14
|
-
zoom: number;
|
|
15
14
|
crop: import("react-easy-crop").Point;
|
|
16
15
|
image?: string | undefined;
|
|
17
|
-
|
|
18
|
-
onZoomChange?: ((zoom: number) => void) | undefined;
|
|
16
|
+
zoom: number;
|
|
19
17
|
onCropChange: (location: import("react-easy-crop").Point) => void;
|
|
18
|
+
onZoomChange?: ((zoom: number) => void) | undefined;
|
|
20
19
|
onCropAreaChange?: ((croppedArea: import("react-easy-crop").Area, croppedAreaPixels: import("react-easy-crop").Area) => void) | undefined;
|
|
20
|
+
aspect: number;
|
|
21
21
|
initialCroppedAreaPixels?: import("react-easy-crop").Area | undefined;
|
|
22
22
|
}>;
|
|
23
23
|
args: {
|
|
@@ -15,6 +15,7 @@ export interface DropdownMenuContentProps {
|
|
|
15
15
|
minWidth?: 128 | 256;
|
|
16
16
|
children: ReactNode;
|
|
17
17
|
containerRef?: MutableRefObject<null>;
|
|
18
|
+
maxHeight?: 256;
|
|
18
19
|
}
|
|
19
20
|
export declare function DropdownMenuContent(props: DropdownMenuContentProps): JSX.Element;
|
|
20
21
|
interface DropdownMenuItemProps {
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
|
+
import { type MediaAssetType } from "../FileUpload.utils";
|
|
2
3
|
export interface FileDropZoneProps {
|
|
3
4
|
onFilesSelected: (files: File[]) => void;
|
|
4
5
|
overlay: ReactNode;
|
|
6
|
+
assetType?: MediaAssetType;
|
|
5
7
|
children?: ReactNode;
|
|
6
8
|
}
|
|
7
9
|
export declare function FileDropZone(props: FileDropZoneProps): JSX.Element;
|
|
@@ -1,5 +1,11 @@
|
|
|
1
|
+
import type { FileDropItem } from "@react-aria/dnd";
|
|
1
2
|
export declare const validExtensions: {
|
|
2
|
-
readonly
|
|
3
|
+
readonly applicationAll: "application/*";
|
|
4
|
+
readonly textAll: "text/*";
|
|
3
5
|
readonly imageAll: "image/*";
|
|
4
|
-
readonly
|
|
6
|
+
readonly videoAll: "video/*";
|
|
7
|
+
readonly audioAll: "audio/*";
|
|
5
8
|
};
|
|
9
|
+
export type MediaAssetType = "image" | "all";
|
|
10
|
+
export declare function isValidFileExtension(item: FileDropItem, assetType: "image" | "all"): boolean;
|
|
11
|
+
export declare function getNonSpecificExtension(inputString: string): string;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import type { IconName } from "../../Icon";
|
|
2
|
+
import { type MediaAssetType } from "../FileUpload.utils";
|
|
2
3
|
export interface FileUploadTriggerProps {
|
|
3
4
|
title: string;
|
|
4
5
|
startIcon?: IconName;
|
|
5
6
|
disabled?: boolean;
|
|
6
7
|
onFilesSelected: (files: File[]) => void;
|
|
8
|
+
assetType?: MediaAssetType;
|
|
7
9
|
}
|
|
8
10
|
export declare function FileUploadTrigger(props: FileUploadTriggerProps): JSX.Element;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { type KeyboardEventHandler } from "react";
|
|
1
|
+
import { type ClipboardEventHandler, type KeyboardEventHandler } from "react";
|
|
2
|
+
import type { SX } from "../../theme/new/sx";
|
|
2
3
|
import { type IconName } from "../Icon";
|
|
3
4
|
import * as styles from "./FormInput.css";
|
|
4
5
|
export interface FormInputProps {
|
|
@@ -10,7 +11,9 @@ export interface FormInputProps {
|
|
|
10
11
|
error?: boolean;
|
|
11
12
|
size?: keyof typeof styles.input;
|
|
12
13
|
icon?: IconName;
|
|
14
|
+
sx?: SX;
|
|
13
15
|
onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
|
|
14
16
|
onValueChange?: (value: string) => void;
|
|
17
|
+
onPaste?: ClipboardEventHandler<HTMLInputElement>;
|
|
15
18
|
}
|
|
16
19
|
export declare function FormInput(props: FormInputProps): JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
|
|
2
|
+
/**
|
|
3
|
+
* A label that is hidden visually but still accessible to screen readers
|
|
4
|
+
* and automated translation services.
|
|
5
|
+
*
|
|
6
|
+
* "aria-label" is not translated by automated translation services and should
|
|
7
|
+
* be avoided in favor of "HiddenLabel" component.
|
|
8
|
+
*
|
|
9
|
+
* @see https://adrianroselli.com/2019/11/aria-label-does-not-translate.html
|
|
10
|
+
*/
|
|
11
|
+
export declare function HiddenLabel(props: VisuallyHidden.VisuallyHiddenProps): JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { HiddenLabel } from "./HiddenLabel";
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { type ThemeColor } from "../../theme/colors";
|
|
2
1
|
import type { SX } from "../../theme/new/sx";
|
|
2
|
+
import { type ThemeKeys } from "../../theme/new/theme";
|
|
3
3
|
import * as styles from "./Icon.css";
|
|
4
4
|
import type { IconName } from "./iconNames";
|
|
5
5
|
export interface IconProps {
|
|
6
6
|
className?: string;
|
|
7
|
-
color?:
|
|
7
|
+
color?: ThemeKeys<"color">;
|
|
8
8
|
name: IconName;
|
|
9
9
|
size?: keyof typeof styles.size;
|
|
10
10
|
sx?: SX;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const iconNames: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "keyboardArrowDown", "keyboardArrowUp", "label", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "notes", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
|
|
1
|
+
export declare const iconNames: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "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", "keyboardArrowDown", "keyboardArrowUp", "label", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "musicNote", "notes", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
|
|
2
2
|
export type IconName = typeof iconNames[number];
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { SX } from "../../theme/new/sx";
|
|
1
2
|
export interface ImageProps {
|
|
2
3
|
src: string;
|
|
3
4
|
alt?: string;
|
|
@@ -7,6 +8,7 @@ export interface ImageProps {
|
|
|
7
8
|
borderRadius?: 0 | 4;
|
|
8
9
|
boxShadow?: "3";
|
|
9
10
|
animateOnLoad?: boolean;
|
|
11
|
+
sx?: SX;
|
|
10
12
|
onLoad?: () => void;
|
|
11
13
|
}
|
|
12
14
|
export declare function ImageComponent(props: ImageProps): JSX.Element;
|
|
@@ -10,5 +10,6 @@ export interface InvisibleButtonProps {
|
|
|
10
10
|
onClick?: (event: MouseEvent) => void;
|
|
11
11
|
startIcon?: IconName;
|
|
12
12
|
textVariant?: keyof typeof variant;
|
|
13
|
+
inline?: boolean;
|
|
13
14
|
}
|
|
14
15
|
export declare const InvisibleButton: import("react").ForwardRefExoticComponent<InvisibleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
import type { SX } from "../../theme/new/sx";
|
|
3
|
+
export interface UnorderedListProps {
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
sx?: SX;
|
|
6
|
+
}
|
|
7
|
+
export declare function UnorderedList(props: UnorderedListProps): JSX.Element;
|
|
8
|
+
export interface ListItemProps {
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
export declare function ListItem(props: ListItemProps): JSX.Element;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { UnorderedList } from "./UnorderedList";
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: typeof UnorderedList;
|
|
5
|
+
argTypes: {
|
|
6
|
+
children: {
|
|
7
|
+
control: {
|
|
8
|
+
disable: boolean;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export default meta;
|
|
14
|
+
export declare const Default: {
|
|
15
|
+
name: string;
|
|
16
|
+
render: (args: {
|
|
17
|
+
children?: import("react").ReactNode;
|
|
18
|
+
sx?: import("../../theme/new/sx").SX | undefined;
|
|
19
|
+
}) => JSX.Element;
|
|
20
|
+
args: {
|
|
21
|
+
children: JSX.Element;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ListItem, UnorderedList } from "./UnorderedList";
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
interface MasonryFile {
|
|
1
|
+
interface MasonryFileProps {
|
|
3
2
|
extension: string;
|
|
4
3
|
filename: string;
|
|
5
4
|
onClick?: () => void;
|
|
6
5
|
}
|
|
7
|
-
export declare
|
|
6
|
+
export declare function MasonryFile(props: MasonryFileProps): JSX.Element;
|
|
8
7
|
export {};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { type Status } from "../MediaProgress/MediaProgress";
|
|
2
|
+
interface MediaCardProps {
|
|
3
|
+
url: string;
|
|
4
|
+
filename: string;
|
|
5
|
+
/**
|
|
6
|
+
* The file extension of the media
|
|
7
|
+
* @example "png"
|
|
8
|
+
*/
|
|
9
|
+
extension: string;
|
|
10
|
+
width?: number;
|
|
11
|
+
height?: number;
|
|
12
|
+
selected?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* The upload status of the media
|
|
15
|
+
* @default idle
|
|
16
|
+
*/
|
|
17
|
+
status?: Status;
|
|
18
|
+
/**
|
|
19
|
+
* The size of the media in bytes
|
|
20
|
+
*/
|
|
21
|
+
size: number;
|
|
22
|
+
/**
|
|
23
|
+
* Function called when the card is clicked
|
|
24
|
+
* @description This only affects the card, not the checkbox
|
|
25
|
+
*/
|
|
26
|
+
onCardClick?: () => void;
|
|
27
|
+
/**
|
|
28
|
+
* Function called when the checkbox is clicked
|
|
29
|
+
* @description This only affects the checkbox, not the card
|
|
30
|
+
* @param checked - The new checked state of the checkbox
|
|
31
|
+
*/
|
|
32
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
33
|
+
}
|
|
34
|
+
export declare function MediaCard(props: MediaCardProps): JSX.Element;
|
|
35
|
+
export {};
|