@baseline-ui/core 0.59.0 → 0.60.0

package/dist/components/DeviceProvider/DeviceProvider.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { Breakpoints, DeviceProviderProps } from "./DeviceProvider.types";
+export declare const DeviceProviderContext: React.Context<{
+    breakpoints: Breakpoints;
+}>;
+export declare const DeviceProvider: React.FC<DeviceProviderProps>;

package/dist/components/DeviceProvider/DeviceProvider.types.d.ts

@@ -0,0 +1,12 @@
+import type { BlockProps } from "../../utils";
+import type React from "react";
+export interface Breakpoints {
+    mobile: number;
+    tablet: number;
+    desktop: number;
+}
+export interface DeviceProviderProps extends BlockProps {
+    children: React.ReactNode;
+    /** The breakpoints to use for the device provider. */
+    breakpoints?: Breakpoints;
+}

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

@@ -0,0 +1,2 @@
+export { DeviceProvider, DeviceProviderContext } from "./DeviceProvider";
+export { type DeviceProviderProps } from "./DeviceProvider.types";

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

@@ -0,0 +1,53 @@
+export declare const containerWidthVar: `var(--${string})`;
+export declare const contentCn: ((options?: {
+    size?: "content" | "sm" | "lg" | "md" | undefined;
+    variant?: "primary" | "ghost" | undefined;
+    overlayType?: "popover" | "modal" | undefined;
+    isDrawer?: boolean | undefined;
+    isFocusVisible?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("size" | "variant" | "isFocusVisible" | "overlayType" | "isDrawer")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        size: {
+            sm: {
+                maxWidth: number;
+            };
+            md: {
+                maxWidth: number;
+            };
+            lg: {
+                maxWidth: number;
+            };
+            content: import("@vanilla-extract/css").StyleRule[];
+        };
+        variant: {
+            primary: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            ghost: {
+                outline: "none";
+                borderColor: "transparent";
+            };
+        };
+        overlayType: {
+            modal: {};
+            popover: {};
+        };
+        isDrawer: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                maxWidth: "100vw";
+            })[];
+        };
+        isFocusVisible: {
+            true: string;
+        };
+    }>;
+};

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

@@ -0,0 +1,6 @@
+import React from "react";
+import type { DialogProps } from "./Dialog.types";
+export declare const DialogContentContext: React.Context<{
+    titleProps: React.HTMLAttributes<HTMLElement>;
+}>;
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,37 @@
+import type { StylingProps } from "../../utils";
+import type { DrawerProps } from "../Drawer";
+import type React from "react";
+import type { AriaDialogProps } from "react-aria";
+export interface DialogProps extends AriaDialogProps, StylingProps {
+    /** The children to render. */
+    children: React.ReactNode;
+    /**
+     * The size of the dialog. This defines the max width of the dialog.
+     *
+     * @default "sm"
+     */
+    size?: "sm" | "md" | "lg" | "content";
+    /**
+     * The variant of the dialog.
+     *
+     * @default "primary"
+     */
+    variant?: "primary" | "ghost";
+    /**
+     * The background color of the drawer.
+     *
+     * @default "medium"
+     */
+    drawerBackground?: DrawerProps["background"];
+    /**
+     * When used inside a modal, this prop will decide whether the dialog should
+     * inherit the drawer styles.
+     *
+     * @default false
+     */
+    inheritDrawer?: boolean;
+}
+export interface DialogTitleProps extends StylingProps {
+    /** The children to render. */
+    children: React.ReactNode;
+}

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

@@ -0,0 +1,3 @@
+import React from "react";
+import type { DialogTitleProps } from "./Dialog.types";
+export declare const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,3 @@
+export { Dialog } from "./Dialog";
+export { DialogTitle } from "./DialogTitle";
+export { type DialogProps, type DialogTitleProps } from "./Dialog.types";

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

@@ -0,0 +1,7 @@
+import type React from "react";
+interface UseDeferredLabelProps {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}
+export declare function useDeferredLabel(props: UseDeferredLabelProps, rootRef?: React.RefObject<HTMLElement | null>): string;
+export {};

package/dist/components/Disclosure/Disclosure.css.d.ts

@@ -0,0 +1,116 @@
+export declare const disclosureCn: ((options?: {
+    variant?: "active" | "success" | "warning" | "error" | "denied" | "active-tinted" | "warning-tinted" | "error-tinted" | "denied-tinted" | "success-tinted" | undefined;
+} | undefined) => string) & {
+    variants: () => "variant"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        variant: {
+            active: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            warning: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            error: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            success: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            denied: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            "warning-tinted": {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            "error-tinted": {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            "active-tinted": {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            "success-tinted": {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            "denied-tinted": {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const disclosureHeaderCn: ((options?: {
+    isFocusVisible?: boolean | undefined;
+    isHovered?: boolean | undefined;
+    variant?: "active" | "success" | "warning" | "error" | "denied" | "active-tinted" | "warning-tinted" | "error-tinted" | "denied-tinted" | "success-tinted" | undefined;
+} | undefined) => string) & {
+    variants: () => ("isHovered" | "variant" | "isFocusVisible")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isFocusVisible: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isHovered: {
+            true: {};
+        };
+        variant: {
+            active: {};
+            warning: {};
+            error: {};
+            success: {};
+            denied: {};
+            "warning-tinted": {};
+            "error-tinted": {};
+            "active-tinted": {};
+            "success-tinted": {};
+            "denied-tinted": {};
+        };
+    }>;
+};
+export declare const disclosurePanelCn: string;
+export declare const disclosurePanelSeparatorCn: Record<"active" | "success" | "warning" | "error" | "denied" | "active-tinted" | "warning-tinted" | "error-tinted" | "denied-tinted" | "success-tinted", string>;
+export declare const popupCn: ((options?: {
+    isPopupOpen?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => "isPopupOpen"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isPopupOpen: {
+            true: {};
+            false: {
+                rotate: "180deg";
+            };
+        };
+    }>;
+};

package/dist/components/Disclosure/Disclosure.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { DisclosureProps } from "./Disclosure.types";
+export declare const Disclosure: React.ForwardRefExoticComponent<DisclosureProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Disclosure/Disclosure.types.d.ts

@@ -0,0 +1,30 @@
+import type { BlockProps, StylingProps } from "../../utils";
+import type { IconProps } from "../Icon";
+import type { StatusCardProps } from "../StatusCard";
+import type React from "react";
+import type { AriaDisclosureProps } from "react-aria";
+import type { DisclosureProps as StatelyDisclosureProps } from "react-stately";
+export interface DisclosureProps extends Omit<StylingProps, keyof BlockProps>, AriaDisclosureProps, StatelyDisclosureProps, Pick<StatusCardProps, "variant" | "shouldTruncateTitle"> {
+    /** Content to be displayed in the panel area when expanded. */
+    children: React.ReactNode;
+    /**
+     * Main header or summary text, always shown as the clickable disclosure
+     * summary.
+     */
+    title: string;
+    /** Optional supporting text, shown immediately under the title in the header. */
+    description?: string;
+    /**
+     * Optional icon component to display in the header before the title. Defaults
+     * to the icon mapped to the current `variant`.
+     */
+    icon?: React.FC<IconProps>;
+    /** Additional class name(s) to apply to the header element. */
+    headerClassName?: string;
+    /** Custom style object to apply to the header element. */
+    headerStyle?: React.CSSProperties;
+    /** Additional class name(s) to apply to the panel section. */
+    panelClassName?: string;
+    /** Custom style object to apply to the panel section. */
+    panelStyle?: React.CSSProperties;
+}

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

@@ -0,0 +1,3 @@
+export { Disclosure } from "./Disclosure";
+export { type DisclosureProps } from "./Disclosure.types";
+export * from "./Disclosure";

package/dist/components/DomNodeRenderer/DomNodeRenderer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { DomNodeRendererProps } from "./DomNodeRenderer.types";
+export declare const DomNodeRenderer: React.ForwardRefExoticComponent<DomNodeRendererProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DomNodeRenderer/DomNodeRenderer.types.d.ts

@@ -0,0 +1,11 @@
+import type { StylingProps } from "../../utils";
+import type { PressHookProps } from "@react-aria/interactions";
+export interface DomNodeRendererProps extends StylingProps, Omit<PressHookProps, "ref"> {
+    /**
+     * The DOM node to render inside the component. If this is not provided, the
+     * component will render nothing. If this is provided, the component will
+     * render the DOM node inside a `div` component with `display` set to
+     * `contents`.
+     */
+    node: Node;
+}

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

@@ -0,0 +1,2 @@
+export { DomNodeRenderer } from "./DomNodeRenderer";
+export { type DomNodeRendererProps } from "./DomNodeRenderer.types";

package/dist/components/Drawer/Drawer.css.d.ts

@@ -0,0 +1,31 @@
+export declare const drawerCn: ((options?: {
+    background?: "medium" | "subtle" | undefined;
+    isFocusVisible?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("background" | "isFocusVisible")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        background: {
+            subtle: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            medium: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isFocusVisible: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const headerCn: string;

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { DrawerProps } from "./Drawer.types";
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Drawer/Drawer.types.d.ts

@@ -0,0 +1,24 @@
+import type { StylingProps } from "../../utils";
+import type { ActionIconButtonProps } from "../ActionIconButton";
+import type React from "react";
+import type { AriaDialogProps } from "react-aria";
+export interface DrawerProps extends StylingProps, AriaDialogProps {
+    /** The children to render. */
+    children: React.ReactNode;
+    /**
+     * The valid values for the background type are "medium" and "subtle".
+     *
+     * @default "medium"
+     */
+    background?: "medium" | "subtle";
+    /** The title to display in the drawer. */
+    title: string;
+    /** The props of additional `ActionIconButton` to display in the drawer header. */
+    action?: ActionIconButtonProps;
+    /** The callback to call when the drawer is requested to be closed. */
+    onCloseRequest?: () => void;
+    /** The style of the content container. */
+    contentStyle?: React.CSSProperties;
+    /** The class name of the content container. */
+    contentClassName?: string;
+}

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

@@ -0,0 +1,3 @@
+export { Drawer } from "./Drawer";
+export { type DrawerProps } from "./Drawer.types";
+export * from "./Drawer";

package/dist/components/Editor/Editor.css.d.ts

@@ -0,0 +1,131 @@
+export declare const editorCn: ((options?: {
+    isInline?: boolean | undefined;
+    isMinimal?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isInline" | "isMinimal")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isInline: {
+            true: {};
+        };
+        isMinimal: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            }[];
+            false: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const editorContentCn: ((options?: {
+    isDisabled?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => "isDisabled"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isDisabled: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                pointerEvents: "none";
+                cursor: "not-allowed";
+            })[];
+        };
+    }>;
+};
+export declare const textBoxCn: ((options?: {
+    isInline?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => "isInline"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isInline: {
+            true: {
+                selectors: {
+                    "&:hover:not(:focus)": {
+                        outline: `1px solid var(--${string})`;
+                    };
+                };
+            };
+            false: {
+                selectors: {
+                    "&:hover:not(:focus)": {
+                        boxShadow: `0 -1px 1px -1px var(--${string}), 0 1px 1px -1px var(--${string})`;
+                    };
+                };
+            };
+        };
+    }>;
+};
+export declare const toolbarCn: string;
+export declare const colorBtnCn: string;
+export declare const textAreaCn: string;
+export declare const minimalTextAreaContainerCn: ((options?: {
+    isInline?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => "isInline"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isInline: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            false: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const minimalTextAreaCn: string;
+export declare const mentionOptionCn: ((options?: {
+    isHovered?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isHovered" | "isDisabled")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isHovered: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isDisabled: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const inlineMentionCn: {
+    color: `var(--${string})`;
+    cursor: string;
+    display: string;
+    backgroundColor: `var(--${string})`;
+    borderRadius: `var(--${string})`;
+    padding: string;
+};
+export declare const avatarCn: string;
+export declare const minimalSaveButtonCn: string;
+export declare const helpDialogCn: string;
+export declare const helpDialogHeaderCn: string;
+export declare const separatorCn: string;
+export declare const addLinkFooterCn: string;
+export declare const mentionInputCn: string;
+export declare const toolbarVerticalSeparatorCn: string;

package/dist/components/Editor/Editor.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { EditorProps } from "./Editor.types";
+export declare const Editor: React.MemoExoticComponent<React.ForwardRefExoticComponent<EditorProps & React.RefAttributes<HTMLDivElement>>>;