@baseline-ui/core 0.59.0 → 0.60.0

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

@@ -0,0 +1,214 @@
+export declare const inlineAlertCn: ((options?: {
+    variant?: "success" | "warning" | "error" | "info" | undefined;
+    arrangement?: "single" | "compact" | "multi" | undefined;
+    hasButton?: boolean | undefined;
+    hasCloseButton?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("variant" | "hasButton" | "arrangement" | "hasCloseButton")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        variant: {
+            info: {
+                "__@@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;
+            };
+        };
+        arrangement: {
+            single: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                minHeight: number;
+            })[];
+            multi: {
+                justifyContent: "space-between";
+            };
+            compact: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                width: number;
+            })[];
+        };
+        hasButton: {
+            true: {};
+        };
+        hasCloseButton: {
+            true: {};
+        };
+    }>;
+};
+export declare const inlineStartCn: ((options?: {
+    arrangement?: "single" | "compact" | "multi" | undefined;
+} | undefined) => string) & {
+    variants: () => "arrangement"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        arrangement: {
+            single: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            multi: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            compact: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const inlineAlertTitleCn: ((options?: {
+    size?: "sm" | "md" | undefined;
+} | undefined) => string) & {
+    variants: () => "size"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        size: {
+            sm: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            md: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const inlineAlertIconCn: ((options?: {
+    variant?: "success" | "warning" | "error" | "info" | undefined;
+} | undefined) => string) & {
+    variants: () => "variant"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        variant: {
+            info: {
+                "__@@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;
+            };
+        };
+    }>;
+};
+export declare const inlineAlertEndCn: ((options?: {
+    arrangement?: "single" | "compact" | "multi" | undefined;
+} | undefined) => string) & {
+    variants: () => "arrangement"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        arrangement: {
+            single: {};
+            multi: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            compact: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const inlineAlertDescriptionCn: ((options?: {
+    size?: "sm" | "md" | undefined;
+} | undefined) => string) & {
+    variants: () => "size"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        size: {
+            sm: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            md: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const contentCn: ((options?: {
+    arrangement?: "single" | "compact" | "multi" | undefined;
+} | undefined) => string) & {
+    variants: () => "arrangement"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        arrangement: {
+            single: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            multi: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            compact: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};

package/dist/components/InlineAlert/InlineAlert.d.ts

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

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

@@ -0,0 +1,38 @@
+import type { StylingProps } from "../../utils";
+export interface InlineAlertProps extends StylingProps {
+    /**
+     * The variant of the alert.
+     *
+     * @default "info"
+     */
+    variant?: "info" | "warning" | "error" | "success";
+    /** The title of the alert. */
+    title: string;
+    /** The description of the alert. */
+    description: string;
+    /**
+     * The label of the action button. When provided, the action button will be
+     * rendered.
+     */
+    actionLabel?: string;
+    /** The callback fired when the action button is clicked. */
+    onAction?: () => void;
+    /**
+     * The callback fired when the close button is clicked. When provided, the
+     * close button will be rendered.
+     */
+    onClose?: () => void;
+    /**
+     * The arrangement of the variable.
+     *
+     * @default "single"
+     * @typedef {"single" | "multi" | "compact"} Arrangement
+     */
+    arrangement?: "single" | "multi" | "compact";
+    /**
+     * The size of the alert.
+     *
+     * @default "sm"
+     */
+    size?: "sm" | "md";
+}

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

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

package/dist/components/InlineAlert/intl/index.d.ts

@@ -0,0 +1,102 @@
+declare const _default: {
+    ar: {
+        "bui.inlineAlert.close": string;
+    };
+    cs: {
+        "bui.inlineAlert.close": string;
+    };
+    cy: {
+        "bui.inlineAlert.close": string;
+    };
+    da: {
+        "bui.inlineAlert.close": string;
+    };
+    de: {
+        "bui.inlineAlert.close": string;
+    };
+    el: {
+        "bui.inlineAlert.close": string;
+    };
+    en_GB: {
+        "bui.inlineAlert.close": string;
+    };
+    en: {
+        "bui.inlineAlert.close": string;
+    };
+    es: {
+        "bui.inlineAlert.close": string;
+    };
+    fi: {
+        "bui.inlineAlert.close": string;
+    };
+    fr_CA: {
+        "bui.inlineAlert.close": string;
+    };
+    fr: {
+        "bui.inlineAlert.close": string;
+    };
+    he: {
+        "bui.inlineAlert.close": string;
+    };
+    hr: {
+        "bui.inlineAlert.close": string;
+    };
+    id: {
+        "bui.inlineAlert.close": string;
+    };
+    it: {
+        "bui.inlineAlert.close": string;
+    };
+    ja: {
+        "bui.inlineAlert.close": string;
+    };
+    ko: {
+        "bui.inlineAlert.close": string;
+    };
+    ms: {
+        "bui.inlineAlert.close": string;
+    };
+    nb_NO: {
+        "bui.inlineAlert.close": string;
+    };
+    nl: {
+        "bui.inlineAlert.close": string;
+    };
+    pl: {
+        "bui.inlineAlert.close": string;
+    };
+    pt_PT: {
+        "bui.inlineAlert.close": string;
+    };
+    pt: {
+        "bui.inlineAlert.close": string;
+    };
+    ru: {
+        "bui.inlineAlert.close": string;
+    };
+    sk: {
+        "bui.inlineAlert.close": string;
+    };
+    sl: {
+        "bui.inlineAlert.close": string;
+    };
+    sv: {
+        "bui.inlineAlert.close": string;
+    };
+    th: {
+        "bui.inlineAlert.close": string;
+    };
+    tr: {
+        "bui.inlineAlert.close": string;
+    };
+    uk: {
+        "bui.inlineAlert.close": string;
+    };
+    zh_Hans: {
+        "bui.inlineAlert.close": string;
+    };
+    zh_Hant: {
+        "bui.inlineAlert.close": string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,50 @@
+export declare const inlineToolbarContentCn: string;
+export declare const inlineToolbarBtnCn: ((options?: {
+    isFocusVisible?: boolean | undefined;
+    isHovered?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isHovered" | "isDisabled" | "isFocusVisible")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isFocusVisible: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                boxShadow: `inset 0 0 0 1px var(--${string})`;
+                zIndex: number;
+            })[];
+        };
+        isHovered: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            false: {
+                backgroundColor: "transparent";
+            };
+        };
+        isDisabled: {
+            true: (string | {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            })[];
+        };
+    }>;
+};
+export declare const arrowInlineCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    placement: {
+        bottom: {
+            top: number;
+        };
+        left: string;
+        right: string;
+        top: string;
+    };
+}>;

package/dist/components/InlineToolbar/InlineToolbar.d.ts

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

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

@@ -0,0 +1,63 @@
+import type { Rect, StylingProps } from "../../utils";
+import type { IconProps } from "../Icon";
+import type { AriaToolbarProps } from "@react-aria/toolbar";
+import type React from "react";
+import type { AriaPopoverProps, Key } from "react-aria";
+import type { OverlayTriggerProps } from "react-stately";
+export interface Item {
+    id: string;
+    "aria-label"?: string;
+    label?: string;
+    icon?: React.FC<IconProps>;
+}
+export interface InlineToolbarProps extends StylingProps, Omit<AriaPopoverProps, "triggerRef" | "popoverRef" | "isNonModal" | "maxHeight" | "arrowSize" | "arrowBoundaryOffset" | "offset">, Omit<OverlayTriggerProps, "defaultOpen" | "isOpen">, Omit<AriaToolbarProps, "orientation"> {
+    /**
+     * The children of the InlineToolbar component. This should be a single
+     * element that will be used as the trigger for the InlineToolbar. Any text
+     * selected within this element will be used to determine the position of the
+     * InlineToolbar.
+     */
+    children: React.JSX.Element;
+    /**
+     * The items to display in the InlineToolbar. This can be an array of items or
+     * a function that returns an array of items. If a function is provided, it
+     * will be called with the current selection as an argument.
+     *
+     * The signature of `Item` is:
+     *
+     * ```js
+     * interface Item {
+     *    id: string;
+     *    "aria-label"?: string;
+     *    label?: string;
+     *    icon?: React.FC<IconProps>;
+     * }
+     * ```
+     *
+     * The `id` property is required and will be passed to the `onAction` callback
+     * when the item is selected. The `aria-label` property will be used as the
+     * `aria-label` for the button when you render an icon-only button.
+     */
+    items: Item[] | ((selection: Selection | null) => Item[]);
+    /**
+     * Callback that is called when an item is selected. The `id` of the selected
+     * item and the current selection will be passed as arguments.
+     */
+    onAction?: (id: string, selection: Selection) => void;
+    /**
+     * The keys that should be disabled in the InlineToolbar. This can be used to
+     * disable certain items when the selection changes.
+     */
+    disabledKeys?: Iterable<Key> | ((selection: Selection | null) => Iterable<Key>);
+    /**
+     * Whether the InlineToolbar should be disabled. This can be used to disable
+     * the InlineToolbar when the selection changes.
+     */
+    isDisabled?: boolean;
+    /**
+     * Client rect to be used as anchor for the popover content when no child
+     * element is provided. This will make the position controlled by the
+     * `anchorRect` instead of the selection.
+     */
+    anchorRect?: Rect;
+}

package/dist/components/InlineToolbar/InlineToolbarButton.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { AriaButtonProps } from "react-aria";
+export declare const InlineToolbarButton: React.FC<AriaButtonProps>;

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

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

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

@@ -0,0 +1 @@
+export declare const kbdKeyCn: string;

package/dist/components/Kbd/Kbd.d.ts

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

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

@@ -0,0 +1,21 @@
+import type { StylingProps } from "../../utils";
+export interface KbdProps extends Omit<StylingProps, "data-block-id" | "data-block-class"> {
+    /**
+     * The keyboard shortcut to display. Can be:
+     *
+     * - A single key: "K", "Enter", "Shift"
+     * - A Windows-style shortcut: "Ctrl+K", "Ctrl+Shift+P" (will be converted to
+     *   OS-specific format)
+     *
+     * @example
+     *   Ctrl+K -> "⌘K" on Mac (with shouldUseSymbol), "Cmd+K" on Mac (without shouldUseSymbol)
+     */
+    children: string;
+    /**
+     * Whether to use symbols for modifier keys (e.g., "⌘" instead of "Cmd"). Only
+     * applies when the shortcut contains modifiers like Ctrl, Alt, Shift.
+     *
+     * @default false
+     */
+    shouldUseSymbol?: boolean;
+}

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

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

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

@@ -0,0 +1,41 @@
+export declare const linkCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        default: {
+            textDecoration: "none";
+        };
+        inline: {
+            textDecoration: "underline";
+            textDecorationColor: `var(--${string})`;
+        };
+    };
+    isHovered: {
+        true: {
+            color: `var(--${string})`;
+            textDecorationColor: `var(--${string})`;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            outline: `2px solid var(--${string})`;
+        };
+    };
+    isDisabled: {
+        true: {
+            color: `var(--${string})`;
+            cursor: "not-allowed";
+            textDecorationColor: `var(--${string})`;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+    };
+    type: {
+        body: {};
+        label: {};
+    };
+    isActive: {
+        true: {};
+    };
+}>;

package/dist/components/Link/Link.d.ts

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

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

@@ -0,0 +1,26 @@
+import type { StylingProps } from "../../utils";
+import type { AriaRole } from "react";
+import type React from "react";
+import type { AriaLinkOptions } from "react-aria";
+export interface LinkProps extends AriaLinkOptions, StylingProps {
+    /** The link's style variant. */
+    variant?: "default" | "inline";
+    /** The children to render. */
+    children: React.ReactNode;
+    /** The size of the link. */
+    size?: "sm" | "md" | "lg";
+    /**
+     * The type of the link.
+     *
+     * @default "body"
+     */
+    type?: "body" | "label";
+    /** The title of the link, for providing additional information. */
+    title?: string;
+    /**
+     * Optional ARIA role, useful for specifying a different role for the link.
+     *
+     * @default "link"
+     */
+    role?: AriaRole;
+}

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

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

package/dist/components/ListBox/DefaultListOption.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { MenuItem } from "../Menu/Menu.types";
+import type { ListItem } from "../shared/types/List";
+import type { Node } from "@react-types/shared";
+import type { ListState, TreeState } from "react-stately";
+export declare const DefaultListOption: React.ForwardRefExoticComponent<DefaultListOptionProps & React.RefAttributes<HTMLLIElement>>;
+interface DefaultListOptionProps {
+    item: Node<ListItem | MenuItem>;
+    liProps: React.ComponentProps<"li">;
+    labelProps: React.ComponentProps<"span">;
+    isFocusVisible: boolean;
+    isDisabled: boolean;
+    isSelected: boolean;
+    showSelectedIcon?: boolean;
+    description?: string;
+    descriptionProps?: React.ComponentProps<"span">;
+    selectionMode?: "single" | "multiple";
+    isFocused?: boolean;
+    isPressed?: boolean;
+    _state: ListState<ListItem> | TreeState<MenuItem>;
+}
+export {};

package/dist/components/ListBox/DropIndicator.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { ListBoxProps } from "./ListBox.types";
+import type { DropIndicatorProps } from "react-aria";
+import type { DroppableCollectionState, Orientation } from "react-stately";
+export declare const DropIndicator: React.FC<DropIndicatorProps & {
+    dropState: DroppableCollectionState;
+    renderDropIndicator?: ListBoxProps["renderDropIndicator"];
+    orientation?: Orientation;
+    dropIndicatorClassName?: string;
+    dropIndicatorStyle?: React.CSSProperties;
+}>;