@prismicio/editor-ui 0.4.58-alpha.repeatable-link-base.1 → 0.4.59-alpha.feat-track-onboarding-tutorial.0

package/dist/components/Alert/Alert.d.ts

@@ -14,6 +14,7 @@ export type AlertProps = {
     color?: Colors;
     footerButtons?: FooterButtons;
     noShadow?: boolean;
+    align?: "center";
 };
 type RightButton = {
     onClick: () => void;
@@ -22,6 +23,9 @@ type RightButton = {
 } | {
     type: "text";
     title: string;
+} | {
+    type: "text-dimmed";
+    title: string;
 });
 export interface FooterButtons {
     /** Dismiss button in the footer, displayed first */

package/dist/components/Alert/Alert.stories.d.ts

@@ -26,3 +26,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Dismissable: Story;
 export declare const Loading: Story;
+export declare const InlineDangerWithoutIcon: Story;

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,18 @@
+import { type PropsWithChildren, type ReactNode } from "react";
+import type { IconName } from "../Icon";
+type Color = "error" | "warn" | "info";
+export interface BannerProps {
+    children?: ReactNode;
+    color?: Color;
+    iconName?: IconName;
+    onClose: () => void;
+}
+export declare function Banner(props: BannerProps): JSX.Element;
+export declare function BannerTitle(props: PropsWithChildren): JSX.Element;
+export declare function BannerDescription(props: PropsWithChildren): JSX.Element;
+export interface BannerButtonProps {
+    children: string;
+    onClick: () => void;
+}
+export declare function BannerButton(props: BannerButtonProps): JSX.Element;
+export {};

package/dist/components/Banner/Banner.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from "@storybook/react";
+import { Banner } from "./Banner";
+type Story = StoryObj<typeof meta>;
+declare const meta: {
+    title: string;
+    component: typeof Banner;
+    argTypes: {
+        color: {
+            control: string;
+            options: string[];
+        };
+        iconName: {
+            control: string;
+            options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "attachFile", "autoFixHigh", "autorenew", "biToggle", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "contentPaste", "createNewFolder", "creditCard", "crop", "cropLandscape", "cropPortrait", "dataObject", "dataUsage", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "folderManaged", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "groupWork", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "invite", "javascript", "json", "keyboardArrowDown", "keyboardArrowUp", "label", "language", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "menuBook", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notStarted", "notes", "openInFull", "openInNew", "outbound", "people", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "receiptLong", "refresh", "save", "schedule", "search", "security", "sentimentSatisfied", "settings", "settingsEthernet", "smartDisplay", "svelte", "tabletMac", "tag", "terminal", "textFields", "title", "toggleOff", "translate", "tune", "typescript", "unfoldMore", "unsplash", "upload", "videocam", "viewDay", "visibility", "vue", "warning", "zoomOutMap"];
+        };
+    };
+};
+export default meta;
+export declare const Default: Story;

package/dist/components/Banner/index.d.ts

@@ -0,0 +1 @@
+export { Banner, BannerButton, type BannerButtonProps, BannerDescription, type BannerProps, BannerTitle, } from "./Banner";

package/dist/components/Button/Button.d.ts

@@ -11,7 +11,7 @@ export interface ButtonProps {
      */
     asChild?: boolean;
     /** Note that black & white are only supported for the invisible button */
-    color?: "black" | "grey" | "darkGrey" | "purple" | "dark" | "tomato" | "amber" | "green" | "white" | "indigo";
+    color?: "black" | "grey" | "darkGrey" | "purple" | "dark" | "tomato" | "tomato-dimmed" | "amber" | "green" | "white" | "indigo";
     size?: "small" | "medium" | "large";
     disabled?: boolean;
     loading?: boolean;

package/dist/components/Button/Button.stories.d.ts

@@ -17,7 +17,7 @@ export declare const Default: {
     render: (args: {
         children?: import("react").ReactNode;
         asChild?: boolean | undefined;
-        color?: "dark" | "white" | "black" | "green" | "grey" | "indigo" | "purple" | "tomato" | "darkGrey" | "amber" | undefined;
+        color?: "dark" | "white" | "black" | "green" | "grey" | "indigo" | "purple" | "tomato" | "darkGrey" | "tomato-dimmed" | "amber" | undefined;
         size?: "small" | "medium" | "large" | undefined;
         disabled?: boolean | undefined;
         loading?: boolean | undefined;

package/dist/components/Card/Card.d.ts

@@ -7,8 +7,11 @@ export interface CardProps {
     color?: "grey1" | "grey2" | "grey3" | "indigo2" | "purple1" | "purple2" | "tomato2";
     variant?: "animated-light" | "animated-dark" | "dashed" | "elevated" | "highlighted" | "outlined" | "selected";
     radius?: 4 | 6;
-    paddingBlock?: 0 | 8 | 12 | 16 | 28;
-    paddingInline?: 0 | 16 | 24 | 32;
+    gap?: 0 | 8 | 12 | 16 | 28 | 32;
+    paddingBlock?: 0 | 8 | 12 | 16 | 28 | 32;
+    paddingInline?: 0 | 8 | 16 | 24 | 32;
+    paddingLeft?: 0 | 16 | 32;
+    paddingRight?: 0 | 16 | 32;
     padding?: 0 | 12 | 16;
     sx?: SX;
     onSelect?: (event: MouseEvent | KeyboardEvent) => void;
@@ -34,7 +37,7 @@ export declare function CardHeaderActions(props: CardHeaderActionsProps): JSX.El
 interface CardContentProps {
     children?: ReactNode;
     sx?: SX;
-    gap?: ThemeKeys<"space", 0 | 8 | 12>;
+    gap?: ThemeKeys<"space", 0 | 4 | 8 | 12 | 16>;
     padding?: 0 | 32;
 }
 export declare function CardContent(props: CardContentProps): JSX.Element;

package/dist/components/Card/Card.stories.d.ts

@@ -35,8 +35,11 @@ export declare const Default: {
         color?: "grey1" | "grey2" | "grey3" | "indigo2" | "tomato2" | "purple1" | "purple2" | undefined;
         variant?: "dashed" | "selected" | "animated-light" | "animated-dark" | "elevated" | "highlighted" | "outlined" | undefined;
         radius?: 4 | 6 | undefined;
-        paddingBlock?: 0 | 8 | 12 | 16 | 28 | undefined;
-        paddingInline?: 0 | 16 | 24 | 32 | undefined;
+        gap?: 0 | 8 | 12 | 16 | 28 | 32 | undefined;
+        paddingBlock?: 0 | 8 | 12 | 16 | 28 | 32 | undefined;
+        paddingInline?: 0 | 8 | 16 | 24 | 32 | undefined;
+        paddingLeft?: 0 | 16 | 32 | undefined;
+        paddingRight?: 0 | 16 | 32 | undefined;
         padding?: 0 | 12 | 16 | undefined;
         sx?: import("../../theme").SX | undefined;
         onSelect?: ((event: import("react").MouseEvent<Element, MouseEvent> | import("react").KeyboardEvent<Element>) => void) | undefined;

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -1,7 +1,7 @@
 export declare const supportedLanguages: readonly ["typescript", "tsx", "javascript", "jsx", "vue", "svelte", "plaintext", "json", "bash"];
 export interface CodeBlockProps {
     title?: string;
-    language: typeof supportedLanguages[number];
+    language: (typeof supportedLanguages)[number];
     code: string;
     showLineNumbers?: boolean;
     onCopy?: () => void;

package/dist/components/Dialog/Dialog.d.ts

@@ -7,7 +7,7 @@ export interface Custom {
     width: number | string;
     height: number | string;
 }
-export interface DialogProps {
+export type DialogProps = {
     modal?: boolean;
     trigger?: ReactNode;
     children?: ReactNode;
@@ -16,7 +16,6 @@ export interface DialogProps {
     onOpenChange?: (open: boolean) => void;
     onAnimationEnd?: () => void;
     onAnimationStart?: () => void;
-    hasClose?: boolean;
     size?: "small" | "large" | "fullscreen" | Custom;
     /**
      * The position of the dialog in the viewport.
@@ -26,7 +25,23 @@ export interface DialogProps {
     position?: "center" | "bottomRight" | "top";
     onPointerDownOutside?: RadixDialogContentProps["onPointerDownOutside"];
     onOpenAutoFocus?: RadixDialogContentProps["onOpenAutoFocus"];
-}
+    /**
+     * Pass this prop if the modal has no static text that describes it, i.e. if it's a form or a table.
+     * Passing true will disable the warning that the dialog has no description.
+     * If the dialog has some meaningful text description, wrap this text in a DialogDescription component and do not pass this prop.
+     * Sources:
+     * - https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/
+     * - https://www.radix-ui.com/primitives/docs/components/dialog#description
+     */
+    noDescription?: true;
+} & CloseButtonProps;
+type CloseButtonProps = {
+    hasClose?: true;
+    closeButtonDisabled?: boolean;
+} | {
+    hasClose?: false;
+    closeButtonDisabled?: never;
+};
 /**
  * A Dialog rendered in document.body.
  * The first focusable child will automatically be focused.
@@ -35,9 +50,47 @@ export declare function Dialog(props: DialogProps): JSX.Element;
 interface DialogHeaderProps {
     icon?: IconName;
     onIconClick?: () => void;
+    /**
+     * If true, the Icon will have the same padding as the IconButton.
+     * This is useful when transitioning between headers with Icon and IconButton,
+     * to make sure there's no horizontal shift in the header.
+     */
+    iconButtonPadding?: boolean;
     title: string;
 }
 export declare function DialogHeader(props: DialogHeaderProps): JSX.Element;
+interface DialogTitleProps {
+    children: ReactNode;
+    /**
+     * If true, will hide the title visually but keep it accessible for screen readers.
+     * @default false
+     */
+    hidden?: boolean;
+    asChild?: boolean;
+}
+/**
+ * DialogTitle is supposed to be placed inside of our Dialog.
+ * It is required to have either this component or DialogHeader inside of each Dialog,
+ * at least for screen readers only (see `hidden` prop).
+ */
+export declare function DialogTitle(props: DialogTitleProps): JSX.Element;
+interface DialogDescriptionProps {
+    children: ReactNode;
+    /**
+     * If true, will hide the description visually but keep it accessible for screen readers.
+     * @default false
+     */
+    hidden?: boolean;
+    asChild?: boolean;
+}
+/**
+ * DialogDescription is supposed to be placed inside of our Dialog.
+ * It is required to use this component if the modal has some static text
+ * or pass `noDescription` flag to our Dialog if there's no proper description
+ * inside of a dialog, i.e. when it's a form or contains only a table.
+ * You can also pass `hidden` prop to hide the description visually.
+ */
+export declare function DialogDescription(props: DialogDescriptionProps): JSX.Element;
 interface DialogContentProps {
     children: ReactNode;
     padding?: 16;

package/dist/components/Dialog/index.d.ts

@@ -1,2 +1,2 @@
-export { Dialog, DialogActionButton, DialogActionLink, DialogActions, DialogCancelButton, DialogContent, DialogHeader, type DialogProps, } from "./Dialog";
+export { Dialog, DialogActionButton, DialogActionLink, DialogActions, DialogCancelButton, DialogContent, DialogDescription, DialogHeader, type DialogProps, DialogTitle, } from "./Dialog";
 export { DialogOptions, DialogOptionsItem } from "./Options/DialogOptions";

package/dist/components/Field/Field.d.ts

@@ -5,7 +5,6 @@ export interface FieldProps {
     footer?: ReactNode;
     labelPosition?: "top" | "side";
     selected?: boolean;
-    onMouseOverChange?: (isMouseOver: boolean) => void;
     variant?: "normal" | "compact";
 }
 export declare const Field: (props: FieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/dist/components/HairlineButton/HairlineButton.d.ts

@@ -1,11 +1,19 @@
 import { type MouseEvent } from "react";
 import type { SX } from "../../theme";
 import { type IconName } from "../Icon";
+import type { TooltipProps } from "../Tooltip/Tooltip";
+type Variant = "centerSolid" | "rightDashed";
 export interface HairlineButtonProps {
     icon: IconName;
     disabled?: boolean;
     dropMode?: boolean;
     sx?: SX;
     onClick?: (event: MouseEvent) => void;
+    variant?: Variant;
+    tooltip?: {
+        content: string;
+        side?: TooltipProps["side"];
+    };
 }
 export declare const HairlineButton: (props: HairlineButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export {};

package/dist/components/HairlineButton/HairlineButton.stories.d.ts

@@ -5,6 +5,10 @@ export declare const Default: {
     render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./HairlineButton").HairlineButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
     args: {
         icon: string;
+        tooltip: {
+            content: string;
+            side: string;
+        };
         dropMode: boolean;
         disabled: boolean;
     };

package/dist/components/Icon/iconNames.d.ts

@@ -1,2 +1,2 @@
 export declare const iconNames: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "attachFile", "autoFixHigh", "autorenew", "biToggle", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "contentPaste", "createNewFolder", "creditCard", "crop", "cropLandscape", "cropPortrait", "dataObject", "dataUsage", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "folderManaged", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "groupWork", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "invite", "javascript", "json", "keyboardArrowDown", "keyboardArrowUp", "label", "language", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "menuBook", "migrationRelease", "moreVert", "multipleStop", "musicNote", "notStarted", "notes", "openInFull", "openInNew", "outbound", "people", "phoneIphone", "photo", "pin", "place", "playCircle", "preview", "prismic", "public", "receiptLong", "refresh", "save", "schedule", "search", "security", "sentimentSatisfied", "settings", "settingsEthernet", "smartDisplay", "svelte", "tabletMac", "tag", "terminal", "textFields", "title", "toggleOff", "translate", "tune", "typescript", "unfoldMore", "unsplash", "upload", "videocam", "viewDay", "visibility", "vue", "warning", "zoomOutMap"];
-export type IconName = typeof iconNames[number];
+export type IconName = (typeof iconNames)[number];

package/dist/components/IconButton/IconButton.d.ts

@@ -1,5 +1,6 @@
 import { type MouseEvent } from "react";
 import type { Keys } from "react-hotkeys-hook";
+import type { SX } from "../../theme";
 import type { IconName } from "../Icon/iconNames";
 export interface IconButtonProps {
     color?: Color;
@@ -10,6 +11,7 @@ export interface IconButtonProps {
     hotkeys?: Keys;
     radius?: "normal" | "full";
     size?: "small" | "medium" | "large";
+    sx?: SX;
     variant?: "solid" | "ghost";
     disabled?: boolean;
     type?: "button";

package/dist/components/List/UnorderedList.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import type { SX } from "../../theme";
+import { type IconName } from "../Icon";
 export interface UnorderedListProps {
     children?: ReactNode;
     density?: "regular" | "compact";
@@ -10,3 +11,8 @@ export interface ListItemProps {
     children?: ReactNode;
 }
 export declare function ListItem(props: ListItemProps): JSX.Element;
+interface IconListItemProps extends ListItemProps {
+    icon?: IconName;
+}
+export declare function IconListItem(props: IconListItemProps): JSX.Element;
+export {};

package/dist/components/List/UnorderedList.stories.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
 import { UnorderedList } from "./UnorderedList";
+type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
     component: typeof UnorderedList;
@@ -12,14 +13,5 @@ declare const meta: {
     };
 };
 export default meta;
-export declare const Default: {
-    name: string;
-    render: (args: {
-        children?: import("react").ReactNode;
-        density?: "compact" | "regular" | undefined;
-        sx?: import("../../theme").SX | undefined;
-    }) => JSX.Element;
-    args: {
-        children: JSX.Element;
-    };
-};
+export declare const ListItems: Story;
+export declare const IconListItems: Story;

package/dist/components/List/index.d.ts

@@ -1 +1 @@
-export { ListItem, UnorderedList } from "./UnorderedList";
+export { IconListItem, ListItem, UnorderedList } from "./UnorderedList";

package/dist/components/Popover/Popover.d.ts

@@ -10,7 +10,6 @@ export interface PopoverProps {
     align?: "start" | "center" | "end";
     sideOffset?: number;
     onOpenChange?: (open: boolean) => void;
-    onMouseOverChange?: (isMouseOver: boolean) => void;
     onInteractOutside?: (event: PopoverInteractOutsideEvent) => void;
     onEscapeKeyDown?: (event: KeyboardEvent) => void;
 }

package/dist/components/Popover/Popover.stories.d.ts

@@ -1,32 +1,9 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./Popover").PopoverProps>;
-export default _default;
-export declare const Default: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./Popover").PopoverProps>;
-    argTypes: {
-        children: {
-            control: {
-                disable: boolean;
-            };
-        };
-        anchor: {
-            control: {
-                disable: boolean;
-            };
-        };
-        align: {
-            control: {
-                type: string;
-            };
-            options: string[];
-        };
-    };
-    args: {
-        open: boolean;
-        openDelay: number;
-        closeDelay: number;
-        align: string;
-        anchor: JSX.Element;
-        children: JSX.Element;
-    };
-    name: string;
+import type { StoryObj } from "@storybook/react";
+import { Popover } from "./Popover";
+type Story = StoryObj<typeof meta>;
+declare const meta: {
+    title: string;
+    component: typeof Popover;
 };
+export default meta;
+export declare const Default: Story;

package/dist/components/Skeleton/Skeleton.d.ts

@@ -27,7 +27,7 @@ export declare function Skeleton(props: Props): import("react").DetailedReactHTM
         width: string | number | undefined;
         height: string | number | undefined;
         zIndex: -1 | undefined;
-        flexGrow?: 1 | undefined;
+        flexGrow?: 0 | 1 | undefined;
         flexShrink?: 0 | undefined;
         flexBasis?: 0 | undefined;
         flexWrap?: "wrap" | undefined;

package/dist/components/Text/Text.d.ts

@@ -39,15 +39,17 @@ interface LinkProps extends BaseTextProps {
     component?: "a";
     target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
     rel?: AnchorHTMLAttributes<HTMLAnchorElement>["rel"];
+    onClick?: AnchorHTMLAttributes<HTMLAnchorElement>["onClick"];
 }
 interface NonLinkProps extends BaseTextProps {
     component?: Exclude<Component, "a">;
     href?: never;
     inline?: never;
+    onClick?: never;
 }
 export type TextProps = NonLinkProps | LinkProps;
 export declare const Text: (props: TextProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
-type Component = "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "kbd" | "p" | "pre" | "span" | "label" | "a";
+type Component = "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "header" | "kbd" | "p" | "pre" | "span" | "label" | "a";
 export declare const textVariantMapping: {
     readonly normal: "p";
     readonly bold: "p";

package/dist/components/Tooltip/Tooltip.d.ts

@@ -32,6 +32,7 @@ interface BaseTooltipProps {
      * @defaultValue "fade"
      */
     animation?: "fade" | "none";
+    disableHoverableContent?: boolean;
 }
 interface TextTooltipProps extends BaseTooltipProps {
     variant?: "text";