@prismicio/editor-ui 0.4.16 → 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.
Files changed (114) hide show
  1. package/README.md +12 -0
  2. package/dist/components/ActionList/ActionList.d.ts +5 -1
  3. package/dist/components/ActionList/ActionList.stories.d.ts +1 -3
  4. package/dist/components/AnimatedElement/AnimatedElement.d.ts +1 -2
  5. package/dist/components/Badge/Badge.css.d.ts +4 -1
  6. package/dist/components/Badge/Badge.d.ts +3 -3
  7. package/dist/components/Badge/Badge.stories.d.ts +3 -3
  8. package/dist/components/BaseInput/BaseInput.d.ts +1 -1
  9. package/dist/components/BlankSlate/BlankSlate.css.d.ts +0 -2
  10. package/dist/components/BlankSlate/BlankSlate.d.ts +3 -3
  11. package/dist/components/Box/Box.d.ts +9 -1
  12. package/dist/components/Button/Button.d.ts +16 -7
  13. package/dist/components/Button/Button.stories.d.ts +34 -7
  14. package/dist/components/ButtonGroup/ButtonGroup.d.ts +14 -14
  15. package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts +44 -15
  16. package/dist/components/Card/Card.d.ts +11 -5
  17. package/dist/components/Checkbox/Checkbox.d.ts +2 -0
  18. package/dist/components/Checkbox/Checkbox.stories.d.ts +2 -0
  19. package/dist/components/Cropper/Cropper.stories.d.ts +6 -6
  20. package/dist/components/DateInput/DateInput.d.ts +1 -1
  21. package/dist/components/Dialog/Dialog.d.ts +7 -3
  22. package/dist/components/Dialog/Dialog.stories.d.ts +4 -3
  23. package/dist/components/Dialog/Options/DialogOptions.d.ts +17 -3
  24. package/dist/components/DropdownMenu/DropdownMenu.css.d.ts +1 -0
  25. package/dist/components/DropdownMenu/DropdownMenu.d.ts +1 -0
  26. package/dist/components/Field/Field.stories.d.ts +20 -5
  27. package/dist/components/FileUpload/FileDropZone/FileDropZone.d.ts +2 -0
  28. package/dist/components/FileUpload/FileUpload.utils.d.ts +8 -2
  29. package/dist/components/FileUpload/FileUploadTrigger/FileUploadTrigger.d.ts +2 -0
  30. package/dist/components/Form/Form.d.ts +1 -1
  31. package/dist/components/Form/FormDateInput.d.ts +1 -1
  32. package/dist/components/Form/FormField.d.ts +1 -1
  33. package/dist/components/Form/FormInput.d.ts +4 -1
  34. package/dist/components/Gradient/Gradient.d.ts +1 -1
  35. package/dist/components/Group/GroupItem.css.d.ts +0 -1
  36. package/dist/components/HairlineButton/HairlineButton.d.ts +1 -1
  37. package/dist/components/HeaderTabLink/HeaderTabLink.d.ts +8 -0
  38. package/dist/components/HeaderTabLink/index.d.ts +1 -0
  39. package/dist/components/HiddenLabel/HiddenLabel.d.ts +11 -0
  40. package/dist/components/HiddenLabel/index.d.ts +1 -0
  41. package/dist/components/Icon/Icon.d.ts +3 -3
  42. package/dist/components/Icon/iconNames.d.ts +1 -1
  43. package/dist/components/IconButton/IconButton.d.ts +4 -0
  44. package/dist/components/Image/Image.d.ts +2 -0
  45. package/dist/components/InvisibleButton/InvisibleButton.css.d.ts +1 -0
  46. package/dist/components/InvisibleButton/InvisibleButton.d.ts +1 -0
  47. package/dist/components/List/UnorderedList.d.ts +11 -0
  48. package/dist/components/List/UnorderedList.stories.d.ts +23 -0
  49. package/dist/components/List/index.d.ts +1 -0
  50. package/dist/components/Masonry/MasonryFile.d.ts +2 -3
  51. package/dist/components/MediaCard/MediaCard.d.ts +35 -0
  52. package/dist/components/MediaCard/MediaCard.stories.d.ts +54 -0
  53. package/dist/components/MediaCard/index.d.ts +1 -0
  54. package/dist/components/MediaProgress/MediaProgress.d.ts +6 -0
  55. package/dist/components/MediaProgress/MediaProgress.stories.d.ts +24 -0
  56. package/dist/components/MediaProgress/index.d.ts +1 -0
  57. package/dist/components/NumberInput/NumberInput.d.ts +1 -1
  58. package/dist/components/Radio/RadioGroup.d.ts +1 -1
  59. package/dist/components/ScrollArea/ScrollArea.css.d.ts +1 -0
  60. package/dist/components/ScrollArea/ScrollArea.d.ts +10 -0
  61. package/dist/components/ScrollArea/ScrollArea.stories.d.ts +9 -0
  62. package/dist/components/ScrollArea/ScrollAreaControls.d.ts +14 -0
  63. package/dist/components/SearchInput/SearchInput.d.ts +2 -0
  64. package/dist/components/SearchInput/SearchInput.stories.d.ts +1 -0
  65. package/dist/components/Select/Select.css.d.ts +0 -5
  66. package/dist/components/Select/Select.d.ts +9 -10
  67. package/dist/components/Select/SelectGhostTrigger.d.ts +11 -0
  68. package/dist/components/Select/index.d.ts +1 -0
  69. package/dist/components/Separator/Separator.d.ts +7 -2
  70. package/dist/components/Separator/Separator.stories.d.ts +31 -6
  71. package/dist/components/Skeleton/Skeleton.d.ts +25 -9
  72. package/dist/components/Skeleton/Skeleton.stories.d.ts +2 -0
  73. package/dist/components/Slider/Slider.stories.d.ts +2 -2
  74. package/dist/components/Switch/Switch.css.d.ts +1 -1
  75. package/dist/components/Table/Table.d.ts +3 -3
  76. package/dist/components/TagField/useTagFieldHeader.d.ts +1 -0
  77. package/dist/components/Text/Text.css.d.ts +2 -1
  78. package/dist/components/Text/Text.d.ts +3 -2
  79. package/dist/components/TextArea/TextArea.d.ts +1 -1
  80. package/dist/components/TextInput/TextInput.d.ts +1 -1
  81. package/dist/components/Toast/Toast.stories.d.ts +2 -2
  82. package/dist/components/ToggleButton/ToggleButton.d.ts +2 -3
  83. package/dist/components/ToggleButton/ToggleButton.stories.d.ts +37 -7
  84. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.ts +25 -15
  85. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.d.ts +64 -16
  86. package/dist/components/Toolbar/Toolbar.d.ts +3 -4
  87. package/dist/components/Tooltip/Tooltip.stories.d.ts +2 -0
  88. package/dist/components/Video/Video.d.ts +6 -1
  89. package/dist/components/Video/Video.stories.d.ts +34 -7
  90. package/dist/index.d.ts +4 -1
  91. package/dist/index.es.js +10507 -9657
  92. package/dist/style.css +1 -1
  93. package/dist/theme/colors.d.ts +0 -4
  94. package/dist/theme/new/Theme.stories.d.ts +9 -0
  95. package/dist/theme/new/install.d.ts +11 -0
  96. package/dist/theme/new/sx.d.ts +24 -0
  97. package/dist/theme/new/theme.d.ts +287 -0
  98. package/dist/theme/new/utils.d.ts +36 -0
  99. package/dist/theme/selectors.d.ts +20 -20
  100. package/dist/theme/sprinkles.css.d.ts +1074 -1179
  101. package/dist/theme/util.d.ts +1 -23
  102. package/dist/theme/vars.css.d.ts +2 -2
  103. package/package.json +5 -3
  104. package/dist/components/ActionList/ActionList.css.d.ts +0 -8
  105. package/dist/components/Button/Button.css.d.ts +0 -13
  106. package/dist/components/ButtonGroup/ButtonGroup.css.d.ts +0 -5
  107. package/dist/components/Checkbox/Checkbox.css.d.ts +0 -1
  108. package/dist/components/Dialog/Dialog.css.d.ts +0 -14
  109. package/dist/components/Dialog/Options/DialogOptions.css.d.ts +0 -8
  110. package/dist/components/Image/Image.css.d.ts +0 -8
  111. package/dist/components/SearchInput/SearchInput.css.d.ts +0 -2
  112. package/dist/components/Separator/Separator.css.d.ts +0 -1
  113. package/dist/components/Skeleton/Skeleton.css.d.ts +0 -12
  114. package/dist/components/Table/Table.css.d.ts +0 -12
package/README.md CHANGED
@@ -16,3 +16,15 @@
16
16
  3. You can repeat 1. and 2. as many times as needed.
17
17
  4. Run `deno task update-icons` (it does not matter where in the monorepo you run this from)
18
18
  5. Check that your icon is visible in Storybook.
19
+
20
+ ## Mark components or functions as private.
21
+
22
+ In some cases a subset of functions are only used within `editor-ui` and should not be available outside of the package.
23
+ By using TSDoc we can mark our these functions as `private`, thereby showing intent. If you were to export this function from the package, there would greater sentiment to evaluate if that is indeed the desired outcome.
24
+
25
+ ```ts
26
+ /**
27
+ * @private
28
+ * This is an internal component we will always use this within the context of a xyz component.
29
+ */
30
+ ```
@@ -1,6 +1,10 @@
1
1
  import { type MouseEvent, type PropsWithChildren, type ReactNode } from "react";
2
2
  import { type IconName } from "../Icon";
3
- export declare function ActionList(props: PropsWithChildren): JSX.Element;
3
+ export type ActionListVariants = "Borderless" | "Bordered";
4
+ export interface ActionListProps extends PropsWithChildren {
5
+ variant?: ActionListVariants;
6
+ }
7
+ export declare function ActionList(props: ActionListProps): JSX.Element;
4
8
  export interface ActionListItemProps {
5
9
  children: ReactNode;
6
10
  color?: "grey" | "tomato";
@@ -1,6 +1,4 @@
1
- declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
2
- children?: import("react").ReactNode;
3
- }>;
1
+ declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./ActionList").ActionListProps>;
4
2
  export default _default;
5
3
  export declare const Default: {
6
4
  args: {
@@ -1,6 +1,6 @@
1
1
  import { type ReactElement } from "react";
2
+ import type { SX } from "../../theme/new/sx";
2
3
  import { type Sprinkles } from "../../theme/sprinkles.css";
3
- import { type SX } from "../../theme/util";
4
4
  export interface AnimatedElementProps {
5
5
  children: OnlyChild;
6
6
  animation?: {
@@ -11,7 +11,6 @@ export interface AnimatedElementProps {
11
11
  };
12
12
  enterDuration?: Sprinkles["animationDuration"];
13
13
  exitDuration?: Sprinkles["animationDuration"];
14
- onAnimationEnd?: (animation: "enter" | "exit") => void;
15
14
  sx?: SX;
16
15
  }
17
16
  /**
@@ -24,4 +24,7 @@ export declare const size: {
24
24
  large: string;
25
25
  medium: string;
26
26
  };
27
- export declare const restricted: string;
27
+ export declare const width: {
28
+ 150: string;
29
+ 250: string;
30
+ };
@@ -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?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
4
+ color?: "grey" | "tomato" | "green" | "purple" | "amber" | undefined;
5
5
  size?: "medium" | "large" | undefined;
6
- width?: "restricted" | "unrestricted" | undefined;
6
+ maxWidth?: 150 | 250 | undefined;
7
7
  onClose?: (() => void) | undefined;
8
- icon?: "visibility" | "add" | "code" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "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" | "zoomOutMap" | undefined;
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?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
3
+ color?: "grey" | "tomato" | "green" | "purple" | "amber" | undefined;
4
4
  size?: "medium" | "large" | undefined;
5
- width?: "restricted" | "unrestricted" | undefined;
5
+ maxWidth?: 150 | 250 | undefined;
6
6
  onClose?: (() => void) | undefined;
7
- icon?: "visibility" | "add" | "code" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "description" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "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" | "zoomOutMap" | undefined;
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;
@@ -1,5 +1,5 @@
1
1
  import { type KeyboardEvent, type ReactNode } from "react";
2
- import { type SX } from "../../theme/util";
2
+ import type { SX } from "../../theme/new/sx";
3
3
  import * as styles from "./BaseInput.css";
4
4
  export interface BaseInputProps {
5
5
  autoComplete?: string;
@@ -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 { colors } from "../../theme/colors";
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?: keyof typeof colors;
12
- backgroundColor?: keyof typeof colors;
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 {
@@ -22,7 +22,7 @@ export type BoxProps = {
22
22
  transition?: Transition;
23
23
  padding?: Padding;
24
24
  border?: Border;
25
- borderRadius?: Sprinkles["borderRadius"];
25
+ borderRadius?: BorderRadius;
26
26
  borderStyle?: Sprinkles["borderStyle"];
27
27
  boxShadow?: Sprinkles["boxShadow"];
28
28
  backgroundColor?: ThemeColor;
@@ -30,6 +30,8 @@ export type BoxProps = {
30
30
  visibility?: Sprinkles["visibility"];
31
31
  overflowY?: Sprinkles["overflowY"];
32
32
  overflow?: Sprinkles["overflow"];
33
+ gridColumn?: string;
34
+ gridRow?: string;
33
35
  } & DisplayProps;
34
36
  type DisplayProps = {
35
37
  gap?: Sprinkles["gap"];
@@ -66,6 +68,12 @@ type Padding = Sprinkles["padding"] | {
66
68
  left?: Sprinkles["padding"];
67
69
  right?: Sprinkles["padding"];
68
70
  };
71
+ type BorderRadius = Sprinkles["borderRadius"] | {
72
+ topLeft?: Sprinkles["borderRadius"];
73
+ topRight?: Sprinkles["borderRadius"];
74
+ bottomLeft?: Sprinkles["borderRadius"];
75
+ bottomRight?: Sprinkles["borderRadius"];
76
+ };
69
77
  type Border = boolean | {
70
78
  top?: boolean;
71
79
  bottom?: boolean;
@@ -1,18 +1,27 @@
1
1
  import { type MouseEvent, type ReactNode } from "react";
2
- import { type SX } from "../../theme/util";
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
- variant?: keyof typeof styles.variant;
8
- className?: string;
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
- startIcon?: IconName;
13
- endIcon?: IconName;
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 _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
2
- export default _default;
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
- disabled: boolean;
7
- loading: boolean;
8
- size: string;
9
- startIcon: string;
10
- variant: string;
37
+ startIcon: "schedule";
11
38
  };
12
39
  name: string;
13
40
  };
@@ -1,18 +1,18 @@
1
1
  import { type ReactNode } from "react";
2
- import type * as buttonStyles from "../Button/Button.css";
3
- type ButtonGroupContextValue = Readonly<{
4
- disabled?: boolean;
5
- size: keyof typeof buttonStyles.size;
6
- variant: keyof typeof buttonStyles.variant;
7
- }>;
8
- export declare const ButtonGroup: import("react").ForwardRefExoticComponent<Partial<Readonly<{
9
- disabled?: boolean | undefined;
10
- size: keyof typeof buttonStyles.size;
11
- variant: keyof typeof buttonStyles.variant;
12
- }>> & Readonly<{
2
+ import type { SX } from "../../theme/new/sx";
3
+ export interface ButtonGroupProps {
13
4
  children?: ReactNode;
14
- className?: string | undefined;
15
- density?: "compact" | "regular" | undefined;
16
- }> & import("react").RefAttributes<HTMLDivElement>>;
5
+ disabled?: boolean;
6
+ size?: "small" | "medium" | "large";
7
+ color?: "grey" | "purple" | "dark";
8
+ density?: "regular" | "compact";
9
+ sx?: SX;
10
+ }
11
+ export declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
12
+ interface ButtonGroupContextValue {
13
+ disabled?: boolean;
14
+ size: "small" | "medium" | "large";
15
+ color: "grey" | "dark" | "purple";
16
+ }
17
17
  export declare function useButtonGroup(): ButtonGroupContextValue | undefined;
18
18
  export {};
@@ -1,20 +1,49 @@
1
- declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Partial<Readonly<{
2
- disabled?: boolean | undefined;
3
- size: "medium" | "large" | "small";
4
- variant: "primary" | "secondary" | "tertiary";
5
- }>> & Readonly<{
6
- children?: import("react").ReactNode;
7
- className?: string | undefined;
8
- density?: "compact" | "regular" | undefined;
9
- }> & import("react").RefAttributes<HTMLDivElement>>;
10
- export default _default;
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;
11
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;
12
42
  args: {
13
- children: import("react").FunctionComponentElement<{}>;
14
- density: string;
15
- disabled: boolean;
16
- size: string;
17
- variant: string;
43
+ density: "regular";
44
+ disabled: false;
45
+ size: "medium";
46
+ color: "purple";
18
47
  };
19
48
  name: string;
20
49
  };
@@ -1,15 +1,21 @@
1
1
  import type { PropsWithChildren, ReactNode } from "react";
2
- import { type SX } from "../../theme/util";
3
- import * as styles from "./Card.css";
2
+ import type { SX } from "../../theme/new/sx";
3
+ import { type TextProps } from "../Text";
4
4
  export interface CardProps {
5
5
  children?: ReactNode;
6
- color?: keyof typeof styles.color;
7
- variant?: keyof typeof styles.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
- export declare function CardHeaderTitle(props: PropsWithChildren): JSX.Element;
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
- aspect: number;
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
- aspect: number;
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: {
@@ -1,5 +1,5 @@
1
1
  import { Time } from "@internationalized/date";
2
- import { type SX } from "../../theme/util";
2
+ import type { SX } from "../../theme/new/sx";
3
3
  export type DateInputProps = {
4
4
  value?: Date;
5
5
  mode: Mode;
@@ -1,6 +1,5 @@
1
1
  import type { FC, PropsWithChildren, ReactNode } from "react";
2
2
  import { type IconName } from "../Icon";
3
- import * as styles from "./Dialog.css";
4
3
  export interface Custom {
5
4
  width: number | "auto";
6
5
  height: number | "auto";
@@ -13,8 +12,8 @@ export interface DialogProps {
13
12
  onOpenChange?: (open: boolean) => void;
14
13
  onAnimationEnd?: () => void;
15
14
  hasClose?: boolean;
16
- size?: keyof typeof styles.containerSize | "fullscreen" | Custom;
17
- position?: keyof typeof styles.containerPosition;
15
+ size?: "small" | "large" | "fullscreen" | Custom;
16
+ position?: "center" | "bottomRight";
18
17
  }
19
18
  /**
20
19
  * A Dialog rendered in document.body.
@@ -38,6 +37,11 @@ type ActionsProps = {
38
37
  cancel?: {
39
38
  text: string;
40
39
  };
40
+ /**
41
+ * If true, the actions will be rendered in the dialog grid area `footer`.
42
+ */
43
+ asFooter?: boolean;
44
+ size?: "medium" | "large";
41
45
  };
42
46
  export declare const DialogActions: FC<ActionsProps>;
43
47
  export {};
@@ -1,5 +1,6 @@
1
+ import type { DialogProps } from "./Dialog";
1
2
  export declare const DialogActionsStory: {
2
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./Dialog").DialogProps>;
3
+ render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, DialogProps>;
3
4
  args: {
4
5
  open: boolean;
5
6
  trigger: JSX.Element;
@@ -14,10 +15,10 @@ export declare const DialogOptionsStory: {
14
15
  };
15
16
  name: string;
16
17
  };
17
- declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Dialog").DialogProps>;
18
+ declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, DialogProps>;
18
19
  export default _default;
19
20
  export declare const Default: {
20
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./Dialog").DialogProps>;
21
+ render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, DialogProps>;
21
22
  args: {
22
23
  open: boolean;
23
24
  modal: boolean;
@@ -1,16 +1,30 @@
1
1
  import type { ReactNode } from "react";
2
+ import type { SX } from "../../../theme/new/sx";
2
3
  import { type IconName } from "../../Icon";
3
4
  export interface DialogOptionsProps {
4
5
  value?: string;
5
6
  onValueChange?: (newValue: string) => void;
6
7
  children: ReactNode;
8
+ sx?: SX;
9
+ /**
10
+ * Determines the padding for the dialog options panel
11
+ * @default medium
12
+ */
13
+ padding?: "small" | "medium";
14
+ /**
15
+ * Determines the width of the dialog options panel based on set of options.
16
+ *
17
+ * @param auto - Add auto width to the panel and let it grow with its content
18
+ * @default large
19
+ */
20
+ width?: "large" | "auto";
7
21
  }
8
- export declare const DialogOptions: ({ value, onValueChange, children }: DialogOptionsProps) => JSX.Element;
22
+ export declare const DialogOptions: ({ value, onValueChange, children, width, padding }: DialogOptionsProps) => JSX.Element;
9
23
  interface DialogOptionsItemProps {
10
24
  value: string;
11
25
  icon?: IconName;
12
- title: string;
13
- subtitle: string;
26
+ title?: string;
27
+ subtitle?: string;
14
28
  }
15
29
  export declare const DialogOptionsItem: ({ value, icon, title, subtitle }: DialogOptionsItemProps) => JSX.Element;
16
30
  export {};
@@ -1,4 +1,5 @@
1
1
  export declare const content: string;
2
+ export declare const contentHeight: Record<256, string>;
2
3
  export declare const contentWidth: Record<128 | 256, string>;
3
4
  export declare const contentChild: string;
4
5
  export declare const contentChildColors: {
@@ -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,10 +1,25 @@
1
- declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Field").FieldProps & import("react").RefAttributes<HTMLDivElement>>;
2
- export default _default;
3
- export declare const ExampleFieldChildren: import("react").FunctionComponentElement<{}>;
1
+ declare const meta: {
2
+ title: string;
3
+ component: import("react").ForwardRefExoticComponent<import("./Field").FieldProps & import("react").RefAttributes<HTMLDivElement>>;
4
+ argTypes: {
5
+ children: {
6
+ control: {
7
+ disable: boolean;
8
+ };
9
+ };
10
+ labelPosition: {
11
+ control: {
12
+ type: string;
13
+ };
14
+ options: string[];
15
+ };
16
+ };
17
+ };
18
+ export default meta;
4
19
  export declare const Default: {
5
20
  args: {
6
- children: import("react").FunctionComponentElement<{}>;
7
- labelPosition: string;
21
+ children: import("react").FunctionComponentElement<any>;
22
+ labelPosition: "top";
8
23
  };
9
24
  name: string;
10
25
  };
@@ -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 imageNonSpecific: "image/";
3
+ readonly applicationAll: "application/*";
4
+ readonly textAll: "text/*";
3
5
  readonly imageAll: "image/*";
4
- readonly applicationPdf: "application/pdf";
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;