@prismicio/editor-ui 0.4.16 → 0.4.17

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 (71) 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 -1
  5. package/dist/components/Badge/Badge.d.ts +1 -1
  6. package/dist/components/Badge/Badge.stories.d.ts +1 -1
  7. package/dist/components/BaseInput/BaseInput.d.ts +1 -1
  8. package/dist/components/Box/Box.d.ts +9 -1
  9. package/dist/components/Button/Button.css.d.ts +1 -1
  10. package/dist/components/Button/Button.d.ts +1 -1
  11. package/dist/components/ButtonGroup/ButtonGroup.d.ts +15 -14
  12. package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts +1 -9
  13. package/dist/components/Card/Card.d.ts +1 -1
  14. package/dist/components/DateInput/DateInput.d.ts +1 -1
  15. package/dist/components/Dialog/Dialog.d.ts +7 -3
  16. package/dist/components/Dialog/Dialog.stories.d.ts +4 -3
  17. package/dist/components/Dialog/Options/DialogOptions.d.ts +17 -3
  18. package/dist/components/Field/Field.stories.d.ts +20 -5
  19. package/dist/components/Form/Form.d.ts +1 -1
  20. package/dist/components/Form/FormDateInput.d.ts +1 -1
  21. package/dist/components/Form/FormField.d.ts +1 -1
  22. package/dist/components/Gradient/Gradient.d.ts +1 -1
  23. package/dist/components/HairlineButton/HairlineButton.d.ts +1 -1
  24. package/dist/components/HeaderTabLink/HeaderTabLink.d.ts +8 -0
  25. package/dist/components/HeaderTabLink/index.d.ts +1 -0
  26. package/dist/components/Icon/Icon.d.ts +1 -1
  27. package/dist/components/Icon/iconNames.d.ts +1 -1
  28. package/dist/components/IconButton/IconButton.d.ts +3 -0
  29. package/dist/components/NumberInput/NumberInput.d.ts +1 -1
  30. package/dist/components/Radio/RadioGroup.d.ts +1 -1
  31. package/dist/components/ScrollArea/ScrollArea.css.d.ts +1 -0
  32. package/dist/components/ScrollArea/ScrollArea.d.ts +10 -0
  33. package/dist/components/ScrollArea/ScrollArea.stories.d.ts +9 -0
  34. package/dist/components/ScrollArea/ScrollAreaControls.d.ts +14 -0
  35. package/dist/components/SearchInput/SearchInput.d.ts +2 -0
  36. package/dist/components/SearchInput/SearchInput.stories.d.ts +1 -0
  37. package/dist/components/Select/Select.d.ts +1 -1
  38. package/dist/components/Separator/Separator.d.ts +1 -1
  39. package/dist/components/Skeleton/Skeleton.d.ts +25 -9
  40. package/dist/components/Skeleton/Skeleton.stories.d.ts +2 -0
  41. package/dist/components/Switch/Switch.css.d.ts +1 -1
  42. package/dist/components/Table/Table.d.ts +2 -3
  43. package/dist/components/Text/Text.css.d.ts +1 -1
  44. package/dist/components/Text/Text.d.ts +1 -1
  45. package/dist/components/TextArea/TextArea.d.ts +1 -1
  46. package/dist/components/TextInput/TextInput.d.ts +1 -1
  47. package/dist/components/Toast/Toast.stories.d.ts +2 -2
  48. package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.d.ts +2 -2
  49. package/dist/components/Toolbar/Toolbar.d.ts +1 -1
  50. package/dist/components/Tooltip/Tooltip.stories.d.ts +2 -0
  51. package/dist/index.d.ts +1 -0
  52. package/dist/index.es.js +7124 -6506
  53. package/dist/style.css +1 -1
  54. package/dist/theme/colors.d.ts +0 -4
  55. package/dist/theme/mode.css.d.ts +1 -1
  56. package/dist/theme/new/Theme.stories.d.ts +9 -0
  57. package/dist/theme/new/install.d.ts +11 -0
  58. package/dist/theme/new/sx.d.ts +24 -0
  59. package/dist/theme/new/theme.d.ts +277 -0
  60. package/dist/theme/new/utils.d.ts +36 -0
  61. package/dist/theme/selectors.d.ts +20 -20
  62. package/dist/theme/sprinkles.css.d.ts +648 -753
  63. package/dist/theme/util.d.ts +1 -23
  64. package/dist/theme/vars.css.d.ts +2 -2
  65. package/package.json +4 -3
  66. package/dist/components/ActionList/ActionList.css.d.ts +0 -8
  67. package/dist/components/Checkbox/Checkbox.css.d.ts +0 -1
  68. package/dist/components/Dialog/Dialog.css.d.ts +0 -14
  69. package/dist/components/Dialog/Options/DialogOptions.css.d.ts +0 -8
  70. package/dist/components/Skeleton/Skeleton.css.d.ts +0 -12
  71. 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?: {
@@ -5,7 +5,7 @@ export declare const Badge: import("react").ForwardRefExoticComponent<Readonly<{
5
5
  size?: "medium" | "large" | undefined;
6
6
  width?: "restricted" | "unrestricted" | 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?: "visibility" | "search" | "link" | "description" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
9
9
  onClick?: (() => void) | undefined;
10
10
  selected?: boolean | undefined;
11
11
  onMouseEnter?: (() => void) | undefined;
@@ -4,7 +4,7 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
4
4
  size?: "medium" | "large" | undefined;
5
5
  width?: "restricted" | "unrestricted" | 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?: "visibility" | "search" | "link" | "description" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "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;
@@ -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;
@@ -4,7 +4,7 @@ export declare const content: string;
4
4
  export declare const dimContent: string;
5
5
  export declare const hiddenContent: string;
6
6
  export declare const iconOnly: string;
7
- export declare const size: Record<"medium" | "large" | "small", string>;
7
+ export declare const size: Record<"small" | "medium" | "large", string>;
8
8
  export declare const variant: {
9
9
  primary: string;
10
10
  secondary: string;
@@ -1,5 +1,5 @@
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
4
  import * as styles from "./Button.css";
5
5
  export interface ButtonProps {
@@ -1,18 +1,19 @@
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
+ className?: string;
6
+ disabled?: boolean;
7
+ size?: "small" | "medium" | "large";
8
+ variant?: "primary" | "secondary" | "tertiary";
9
+ density?: "regular" | "compact";
10
+ sx?: SX;
11
+ }
12
+ export declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
13
+ interface ButtonGroupContextValue {
14
+ disabled?: boolean;
15
+ size: "small" | "medium" | "large";
16
+ variant: "primary" | "secondary" | "tertiary";
17
+ }
17
18
  export declare function useButtonGroup(): ButtonGroupContextValue | undefined;
18
19
  export {};
@@ -1,12 +1,4 @@
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>>;
1
+ declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./ButtonGroup").ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
10
2
  export default _default;
11
3
  export declare const Default: {
12
4
  args: {
@@ -1,5 +1,5 @@
1
1
  import type { PropsWithChildren, ReactNode } from "react";
2
- import { type SX } from "../../theme/util";
2
+ import type { SX } from "../../theme/new/sx";
3
3
  import * as styles from "./Card.css";
4
4
  export interface CardProps {
5
5
  children?: ReactNode;
@@ -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,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,6 +1,6 @@
1
1
  import type { Handler } from "@prismicio/editor-support/Type";
2
2
  import type { ReactNode } from "react";
3
- import { type SX } from "../../theme/util";
3
+ import type { SX } from "../../theme/new/sx";
4
4
  export interface FormProps {
5
5
  children?: ReactNode;
6
6
  sx?: SX;
@@ -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
  import type { DateInputProps } from "../DateInput/DateInput";
4
4
  export interface FormDateInputProps {
5
5
  label: string;
@@ -1,5 +1,5 @@
1
1
  import { type ReactNode } from "react";
2
- import { type SX } from "../../theme/util";
2
+ import type { SX } from "../../theme/new/sx";
3
3
  export type FormFieldProps = {
4
4
  children?: ReactNode;
5
5
  disabled?: boolean;
@@ -1,4 +1,4 @@
1
- import { type SX } from "../../theme/util";
1
+ import type { SX } from "../../theme/new/sx";
2
2
  export interface GradientProps {
3
3
  sx?: SX;
4
4
  }
@@ -1,5 +1,5 @@
1
1
  import { type MouseEvent } 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
4
  export interface HairlineButtonProps {
5
5
  icon: IconName;
@@ -0,0 +1,8 @@
1
+ interface Props {
2
+ text: string;
3
+ selected: boolean;
4
+ disabled?: boolean;
5
+ renderLink: (children: JSX.Element) => JSX.Element;
6
+ }
7
+ export declare function HeaderTabLink(props: Props): JSX.Element;
8
+ export {};
@@ -0,0 +1 @@
1
+ export { HeaderTabLink } from "./HeaderTabLink";
@@ -1,5 +1,5 @@
1
1
  import { type ThemeColor } from "../../theme/colors";
2
- import { type SX } from "../../theme/util";
2
+ import type { SX } from "../../theme/new/sx";
3
3
  import * as styles from "./Icon.css";
4
4
  import type { IconName } from "./iconNames";
5
5
  export interface IconProps {
@@ -1,2 +1,2 @@
1
- export declare const iconNames: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "close", "cloud", "cloudUpload", "code", "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", "visibility", "zoomOutMap"];
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"];
2
2
  export type IconName = typeof iconNames[number];
@@ -1,3 +1,4 @@
1
+ import { type MouseEvent } from "react";
1
2
  import type { IconName } from "../Icon/iconNames";
2
3
  import * as styles from "./IconButton.css";
3
4
  export interface IconButtonProps {
@@ -7,6 +8,8 @@ export interface IconButtonProps {
7
8
  icon: IconName | JSX.Element;
8
9
  loading?: boolean;
9
10
  onClick?: () => void;
11
+ onMouseDown?: (event: MouseEvent) => void;
12
+ onMouseUp?: (event: MouseEvent) => void;
10
13
  radius?: keyof typeof styles.radius;
11
14
  size?: keyof typeof styles.size;
12
15
  variant?: keyof typeof styles.variant;
@@ -1,4 +1,4 @@
1
- import type { SX } from "../../theme/util";
1
+ import type { SX } from "../../theme/new/sx";
2
2
  export interface NumberInputProps {
3
3
  autoComplete?: string;
4
4
  id?: string;
@@ -1,5 +1,5 @@
1
1
  import { type ReactNode } from "react";
2
- import { type SX } from "../../theme/util";
2
+ import type { SX } from "../../theme/new/sx";
3
3
  export interface RadioGroupProps<VALUE extends string> {
4
4
  values: readonly VALUE[];
5
5
  selectedValue: VALUE;
@@ -3,3 +3,4 @@ export declare const direction: {
3
3
  horizontal: string;
4
4
  vertical: string;
5
5
  };
6
+ export declare const gradient: string;
@@ -6,5 +6,15 @@ export interface ScrollAreaProps {
6
6
  direction?: keyof typeof styles.direction;
7
7
  style?: CSSProperties;
8
8
  onScrollToBottom?: () => void;
9
+ /**
10
+ * Adds a set of controls to the scroll area.
11
+ * @default false
12
+ */
13
+ controls?: boolean;
14
+ /**
15
+ * The threshold for triggering the onScrollToBottom function.
16
+ * @default 50
17
+ */
18
+ treshold?: number;
9
19
  }
10
20
  export declare function ScrollArea(props: ScrollAreaProps): JSX.Element;
@@ -8,3 +8,12 @@ export declare const Default: {
8
8
  };
9
9
  name: string;
10
10
  };
11
+ export declare const ScrollAreaWithControls: {
12
+ render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./ScrollArea").ScrollAreaProps>;
13
+ args: {
14
+ children: JSX.Element[];
15
+ direction: string;
16
+ controls: boolean;
17
+ };
18
+ name: string;
19
+ };
@@ -0,0 +1,14 @@
1
+ import { type PropsWithChildren, type RefObject } from "react";
2
+ interface ScrollAreaControlsProps extends PropsWithChildren {
3
+ /**
4
+ * A reference to the scroll area component.
5
+ */
6
+ scrollAreaRef: RefObject<HTMLDivElement>;
7
+ direction?: "vertical" | "horizontal";
8
+ }
9
+ /**
10
+ * @private
11
+ * This is an internal component we will always use this within the context of a ScrollArea component.
12
+ */
13
+ export declare function ScrollAreaControls(props: ScrollAreaControlsProps): JSX.Element;
14
+ export {};
@@ -2,5 +2,7 @@ export interface SearchInputProps {
2
2
  value: string;
3
3
  onValueChange: (value: string) => void;
4
4
  placeholder?: string;
5
+ maxLength?: number;
6
+ isLoading?: boolean;
5
7
  }
6
8
  export declare function SearchInput(props: SearchInputProps): JSX.Element;
@@ -5,6 +5,7 @@ export declare const Default: {
5
5
  args: {
6
6
  value: string;
7
7
  placeholder: string;
8
+ isLoading: boolean;
8
9
  };
9
10
  name: string;
10
11
  };
@@ -1,5 +1,5 @@
1
1
  import type { ReactNode } from "react";
2
- import { type SX } from "../../theme/util";
2
+ import type { SX } from "../../theme/new/sx";
3
3
  import type * as buttonStyles from "../Button/Button.css";
4
4
  import { type IconName } from "../Icon";
5
5
  export interface SelectProps<VALUE extends string> {
@@ -1,4 +1,4 @@
1
- import { type SX } from "../../theme/util";
1
+ import type { SX } from "../../theme/new/sx";
2
2
  export interface SeparatorProps {
3
3
  /**
4
4
  * Either `vertical` or `horizontal`. Defaults to `horizontal`.
@@ -1,18 +1,34 @@
1
- import { type CSSProperties } from "react";
2
- import { type SX } from "../../theme/util";
3
- import * as styles from "./Skeleton.css";
1
+ import type { SX } from "../../theme/new/sx";
2
+ import type { ThemeKeys } from "../../theme/new/theme";
4
3
  export interface Props {
5
4
  component?: "span";
6
- width?: CSSProperties["width"];
7
- height?: CSSProperties["height"];
8
- color?: keyof typeof styles.color;
9
- borderRadius?: keyof typeof styles.borderRadius;
5
+ borderRadius?: ThemeKeys<"borderRadius", 0 | 4 | 6 | "100%">;
6
+ color?: ThemeKeys<"color", "grey1" | "grey5">;
7
+ width?: number | string;
8
+ height?: number | string;
10
9
  sx?: SX;
11
10
  }
12
11
  export declare function Skeleton(props: Props): import("react").DetailedReactHTMLElement<{
13
12
  className: string;
14
13
  style: {
15
- height: import("csstype").Property.Height<string | number> | undefined;
16
- width: import("csstype").Property.Width<string | number> | undefined;
14
+ width: string | number | undefined;
15
+ height: string | number | undefined;
16
+ flexGrow?: 1 | undefined;
17
+ flexShrink?: 0 | undefined;
18
+ alignSelf?: "center" | "stretch" | undefined;
19
+ justifySelf?: "center" | "stretch" | undefined;
20
+ visibility?: "hidden" | "visible" | undefined;
21
+ position?: "fixed" | "absolute" | "relative" | "sticky" | undefined;
22
+ marginLeft?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
23
+ marginRight?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
24
+ marginTop?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
25
+ marginBottom?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
26
+ marginInline?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
27
+ marginBlock?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
28
+ top?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
29
+ left?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
30
+ right?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
31
+ bottom?: 0 | 2 | 1 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | 40 | 48 | 72 | 80 | 100 | undefined;
32
+ zIndex?: 0 | 1 | "overlay" | "dialog" | "toolbar" | "dropdownMenu" | undefined;
17
33
  };
18
34
  }, HTMLElement>;
@@ -4,6 +4,8 @@ export declare const Default: {
4
4
  args: {
5
5
  width: number;
6
6
  height: number;
7
+ color: string;
8
+ borderRadius: number;
7
9
  };
8
10
  name: string;
9
11
  };
@@ -1,3 +1,3 @@
1
1
  export declare const root: string;
2
- export declare const size: Record<"medium" | "small", string>;
2
+ export declare const size: Record<"small" | "medium", string>;
3
3
  export declare const thumb: string;
@@ -3,6 +3,7 @@ export interface TableProps {
3
3
  children: ReactNode;
4
4
  /** The number and size of columns. See [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns). */
5
5
  columnLayout: string;
6
+ isLoading?: boolean;
6
7
  }
7
8
  /**
8
9
  * Outer table component. This should wrap any table header and body in order to
@@ -35,9 +36,7 @@ export interface LinkTableRowProps {
35
36
  children: ReactNode;
36
37
  onClick?: never;
37
38
  /** Anchor tag wrapper for the row to enable using any routing library such as next Link or react-router. */
38
- renderLink: ({ children }: {
39
- children: ReactNode;
40
- }) => JSX.Element;
39
+ renderLink: (children: ReactNode) => JSX.Element;
41
40
  }
42
41
  type TableRowProps = ClickableTableRowProps | LinkTableRowProps;
43
42
  /**
@@ -1,7 +1,7 @@
1
1
  import { type StyleRule } from "@vanilla-extract/css";
2
2
  export declare const root: string;
3
3
  export declare const normalVariantDef: StyleRule;
4
- export declare const variant: Record<"inherit" | "normal" | "small" | "italic" | "bold" | "extraSmall" | "h1" | "h2" | "h3" | "h4" | "smallItalic" | "smallBold" | "emphasized", string>;
4
+ export declare const variant: Record<"inherit" | "bold" | "small" | "normal" | "italic" | "extraSmall" | "h1" | "h2" | "h3" | "h4" | "smallItalic" | "smallBold" | "emphasized", string>;
5
5
  export declare const align: {
6
6
  start: string;
7
7
  center: string;
@@ -1,6 +1,6 @@
1
1
  import { type ReactNode } from "react";
2
2
  import { colors } from "../../theme/colors";
3
- import { type SX } from "../../theme/util";
3
+ import type { SX } from "../../theme/new/sx";
4
4
  import * as styles from "./Text.css";
5
5
  export interface TextProps {
6
6
  align?: keyof typeof styles.align;
@@ -1,4 +1,4 @@
1
- import { type SX } from "../../theme/util";
1
+ import type { SX } from "../../theme/new/sx";
2
2
  export interface TextAreaProps {
3
3
  autoComplete?: string;
4
4
  id?: string;