@baseline-ui/core 0.59.0 → 0.60.0

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

@@ -0,0 +1,44 @@
+export declare const accordionCn: string;
+export declare const chevronCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    isExpanded: {
+        true: {
+            transform: "rotate(90deg)";
+        };
+    };
+}>;
+export declare const headerCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    isFocusVisible: {
+        true: {
+            outlineOffset: number;
+            outline: `2px solid var(--${string})`;
+        };
+    };
+    isHovered: {
+        true: string;
+        false: string;
+    };
+    isDisabled: {
+        true: string;
+    };
+}>;
+export declare const headerStartCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+}>;
+export declare const headerLabelCn: string;
+export declare const actionBtnContainerCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    showActionsOnTriggerOnly: {
+        true: {
+            opacity: number;
+        };
+    };
+    isTriggered: {
+        true: {
+            opacity: number;
+        };
+    };
+}>;
+export declare const descriptionCn: string;
+export declare const contentContainerCn: string;

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { AccordionProps } from "./Accordion.types";
+import type { Key } from "react";
+export declare const AccordionContext: React.Context<{
+    expandedKeys: Set<Key>;
+    setExpandedKeys: React.Dispatch<React.SetStateAction<Set<Key>>>;
+    disabledKeys?: Set<Key>;
+    headers: Map<number, React.RefObject<HTMLButtonElement>>;
+    expansionMode?: "single" | "multiple";
+}>;
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,70 @@
+import type { StylingProps } from "../../utils";
+import type { ActionIconButtonProps } from "../ActionIconButton";
+import type React from "react";
+import type { Key } from "react";
+export interface AccordionProps extends StylingProps {
+    /**
+     * This prop controls the expansion mode of the accordion. If set to `single`,
+     * only one item can be expanded at a time. If set to `multiple`, multiple
+     * items can be expanded at the same time.
+     *
+     * @default "multiple"
+     */
+    expansionMode?: "single" | "multiple";
+    /** This callback is called when the expanded state of the accordion changes. */
+    onChange?: (value: Set<Key>) => void;
+    /** The children of the accordion. Each child should be an `AccordionItem`. */
+    children: React.ReactNode;
+    /** The keys of the items that should be expanded by default. */
+    defaultExpandedKeys?: Set<Key>;
+    /**
+     * The keys of the items that should be expanded. If this prop is provided,
+     * the accordion will be a controlled component. This means that the expanded
+     * state of the accordion will not change unless you update this prop.
+     */
+    expandedKeys?: Set<Key>;
+    /**
+     * The keys of the items that should be disabled. Disabled items cannot be
+     * expanded or collapsed.
+     */
+    disabledKeys?: Set<Key>;
+}
+export interface AccordionItemProps extends StylingProps {
+    /** The title of the accordion item. */
+    title: string;
+    /**
+     * The buttons that should be rendered in the accordion item. These buttons
+     * will be rendered in the top right corner of the accordion item. They will
+     * be rendered in the order they are provided. The buttons will be rendered as
+     * `ActionIconButton`s, so you can pass any props that you would pass to an
+     * `ActionIconButton`.
+     *
+     * @example
+     *   ```jsx
+     *   <AccordionItem
+     *    title="Accordion Item"
+     *    actions={[{
+     *      icon: EditIcon,
+     *      label: "Edit",
+     *      onPress: () => alert("Edit"),
+     *    }]}>Content</AccordionItem>
+     *    ```;
+     */
+    actions?: Omit<ActionIconButtonProps, "size" | "variant" | "excludeFromTabOrder">[];
+    /**
+     * The action buttons should only be shown when the user hovers over or
+     * focuses the accordion item.
+     *
+     * @default false
+     */
+    showActionsOnTriggerOnly?: boolean;
+    /** The content of the accordion item. */
+    children: React.ReactNode;
+    /** The key of the accordion item. */
+    value: Key;
+    /**
+     * The description of the accordion item. This will be rendered at the end of
+     * the accordion header.
+     */
+    subLabel?: string;
+}

package/dist/components/Accordion/AccordionBase.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { StylingProps } from "../../utils";
+export declare const AccordionBase: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & StylingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/AccordionHeader.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { AccordionItemProps } from "./Accordion.types";
+export declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<AccordionItemProps, "children"> & {
+    controlId: string;
+    id: string;
+} & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/Accordion/AccordionItem.d.ts

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

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

@@ -0,0 +1,3 @@
+export { Accordion } from "./Accordion";
+export { AccordionItem } from "./AccordionItem";
+export { type AccordionProps, type AccordionItemProps, } from "./Accordion.types";

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

@@ -0,0 +1,216 @@
+import { Layers } from "@baseline-ui/tokens";
+export declare const buttonCn: ((options?: {
+    variant?: "toolbar" | "primary" | "secondary" | "tertiary" | "ghost" | "popover" | "success" | "warning" | "error" | undefined;
+    isDisabled?: boolean | undefined;
+    isFocusVisible?: boolean | undefined;
+    isHovered?: boolean | undefined;
+    size?: "sm" | "lg" | "md" | undefined;
+} | undefined) => string) & {
+    variants: () => ("size" | "isHovered" | "isDisabled" | "variant" | "isFocusVisible")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        variant: {
+            primary: {
+                backgroundColor: `var(--${string})`;
+                color: `var(--${string})`;
+                ":disabled": {
+                    backgroundColor: `var(--${string})`;
+                };
+            };
+            secondary: {
+                boxShadow: `inset 0 0 0 1px var(--${string})`;
+                backgroundColor: `var(--${string})`;
+                color: `var(--${string})`;
+                ":disabled": {
+                    color: `var(--${string})`;
+                };
+            };
+            tertiary: {
+                backgroundColor: "transparent";
+                boxShadow: `inset 0 0 0 1px var(--${string})`;
+                color: `var(--${string})`;
+                ":disabled": {
+                    boxShadow: `inset 0 0 0 1px var(--${string})`;
+                    color: `var(--${string})`;
+                };
+            };
+            ghost: {
+                backgroundColor: "transparent";
+                color: `var(--${string})`;
+                ":disabled": {
+                    color: `var(--${string})`;
+                };
+            };
+            popover: ({
+                backgroundColor: "transparent";
+                color: `var(--${string})`;
+                transitionProperty: "none";
+                ":disabled": {
+                    color: `var(--${string})`;
+                };
+                "@layer"?: undefined;
+            } | {
+                "@layer": {
+                    [Layers.BASE]: {
+                        selectors: {
+                            "&[data-hovered='true'], &[aria-expanded='true']": {
+                                outline: `1px solid var(--${string})`;
+                                outlineOffset: number;
+                            };
+                        };
+                    };
+                };
+                backgroundColor?: undefined;
+                color?: undefined;
+                transitionProperty?: undefined;
+                ":disabled"?: undefined;
+            })[];
+            toolbar: {
+                backgroundColor: "transparent";
+                color: `var(--${string})`;
+                borderRadius: number;
+                ":disabled": {
+                    color: `var(--${string})`;
+                };
+                selectors: {
+                    "&[data-hovered='true'], &[data-pressed='true'], &[aria-expanded='true']": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-focus-visible='true']": {
+                        outline: `2px solid var(--${string})`;
+                        outlineOffset: number;
+                    };
+                };
+            };
+            success: {
+                backgroundColor: `var(--${string})`;
+                color: `var(--${string})`;
+                ":disabled": {
+                    backgroundColor: `var(--${string})`;
+                };
+            };
+            warning: {
+                backgroundColor: `var(--${string})`;
+                color: `var(--${string})`;
+                ":disabled": {
+                    backgroundColor: `var(--${string})`;
+                };
+            };
+            error: {
+                backgroundColor: `var(--${string})`;
+                color: `var(--${string})`;
+                ":disabled": {
+                    backgroundColor: `var(--${string})`;
+                };
+            };
+        };
+        isDisabled: {
+            true: {
+                cursor: "not-allowed";
+            };
+        };
+        isFocusVisible: {
+            true: {
+                boxShadow: `inset 0 0 0 2px var(--${string})`;
+            };
+        };
+        isHovered: {
+            true: {};
+        };
+        size: {
+            sm: {
+                minHeight: number;
+                padding: `var(--${string})`;
+            };
+            md: {
+                minHeight: number;
+                padding: `var(--${string}) var(--${string})`;
+            };
+            lg: {
+                font: `var(--${string})`;
+                letterSpacing: `var(--${string})`;
+                minHeight: number;
+                padding: `var(--${string})`;
+            };
+        };
+    }>;
+};
+export declare const buttonIconCn: ((options?: {
+    isDisabled?: boolean | undefined;
+    isFocusVisible?: boolean | undefined;
+    isHovered?: boolean | undefined;
+    variant?: "toolbar" | "primary" | "secondary" | "tertiary" | "ghost" | "popover" | "success" | "warning" | "error" | undefined;
+} | undefined) => string) & {
+    variants: () => ("isHovered" | "isDisabled" | "variant" | "isFocusVisible")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isDisabled: {
+            true: {};
+        };
+        isFocusVisible: {
+            true: {};
+        };
+        isHovered: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        variant: {
+            primary: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            secondary: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            tertiary: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            ghost: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            popover: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            toolbar: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            success: {
+                "__@@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;
+            };
+        };
+    }>;
+};

package/dist/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ActionButtonProps } from "./ActionButton.types";
+declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { ActionButton };

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

@@ -0,0 +1,44 @@
+import type { StylingProps } from "../../utils";
+import type { IconProps } from "../Icon";
+import type React from "react";
+import type { AriaButtonProps } from "react-aria";
+export type UIStateOptions<T = object> = {
+    isHovered?: boolean;
+    isFocused?: boolean;
+    isPressed?: boolean;
+    isDisabled?: boolean;
+    isFocusVisible?: boolean;
+} & T;
+export interface StylingWithUIState<T = object> {
+    /** The button's class name. */
+    className?: string | ((props: UIStateOptions<T>) => string);
+    /** The button's style. */
+    style?: React.CSSProperties | ((props: UIStateOptions<T>) => React.CSSProperties);
+}
+export interface ActionButtonSharedProps extends Omit<AriaButtonProps<"button" | "div">, "rel" | "href" | "target" | "children">, Omit<StylingProps, "className" | "style">, StylingWithUIState {
+    /**
+     * A slot name for the component. Used to integrate with React Aria Components'
+     * context system (e.g., `slot="drag"` for drag handles in Table rows).
+     */
+    slot?: string | null;
+}
+export interface ActionButtonProps extends ActionButtonSharedProps {
+    /**
+     * The button's variant.
+     *
+     * @default primary
+     */
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "popover" | "toolbar" | "success" | "warning" | "error";
+    /** The button's label. */
+    label: React.ReactNode;
+    /** The button's icon before the label. */
+    iconStart?: React.FC<IconProps>;
+    /** The button's icon after the label. */
+    iconEnd?: React.FC<IconProps>;
+    /**
+     * The button's size.
+     *
+     * @default sm
+     */
+    size?: "sm" | "md" | "lg";
+}

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

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

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

@@ -0,0 +1,2 @@
+export declare const actionGroupItemSelectedCn: string;
+export declare const actionGroupIconCn: string;

package/dist/components/ActionGroup/ActionGroup.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { ListItem } from "../shared/types/List";
+import type { ActionGroupProps } from "./ActionGroup.types";
+import type { ListState, Node } from "react-stately";
+export declare const ActionGroup: React.ForwardRefExoticComponent<ActionGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ActionGroupItem: React.FC<ActionGroupItemProps>;
+interface ActionGroupItemProps extends Pick<ActionGroupProps, "tooltipProps" | "renderActionItem" | "onAction" | "isDisabled"> {
+    item: Node<ListItem>;
+    state: ListState<ListItem>;
+}
+export {};

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

@@ -0,0 +1,43 @@
+import type { StylingProps } from "../../utils";
+import type { IconProps } from "../Icon";
+import type { ListItem } from "../shared/types/List";
+import type { TooltipProps } from "../Tooltip";
+import type { AriaActionGroupProps } from "@react-aria/actiongroup";
+import type React from "react";
+import type { Node } from "react-stately";
+type ActionTooltipProps = Omit<TooltipProps, "variant" | "size" | "includeArrow" | "children">;
+export interface ActionGroupProps extends StylingProps, Omit<AriaActionGroupProps<ListItem>, "children"> {
+    /** The items to display in the action group. */
+    items: ListItem[];
+    /**
+     * Represents the mode of selection for a component. This variable should be
+     * assigned one of the following string values: "single" or "multiple".
+     */
+    selectionMode?: "single" | "multiple";
+    /** The props to be passed to the tooltip component. */
+    tooltipProps?: ActionTooltipProps | ((item: ListItem) => ActionTooltipProps);
+    /**
+     * A function that renders an action item. This function is called for each
+     * item in the action group. By default, an `ActionIconButton` is rendered.
+     *
+     * @default
+     *
+     * ```jsx
+     * <ActionIconButton
+     *   variant="tertiary"
+     *   icon={icon}
+     *   aria-label={item.textValue}
+     *   size="sm"
+     *   isDisabled={_isDisabled}
+     *   className={"BaselineUI-ActionGroup-Item"}
+     * />;
+     * ```
+     */
+    renderActionItem?: (item: Node<ListItem>, options: {
+        isSelected?: boolean;
+        isDisabled?: boolean;
+    }) => React.ReactNode;
+    /** The icon visible at the start of the group. */
+    icon?: React.FC<IconProps>;
+}
+export {};

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

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

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

@@ -0,0 +1,116 @@
+export declare const iconButtonCn: ((options?: {
+    size?: "xs" | "sm" | "lg" | "md" | "xxs" | undefined;
+    isHovered?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    isFocusVisible?: boolean | undefined;
+    variant?: "toolbar" | "primary" | "secondary" | "tertiary" | "ghost" | "popover" | undefined;
+} | undefined) => string) & {
+    variants: () => ("size" | "isHovered" | "isDisabled" | "variant" | "isFocusVisible")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        size: {
+            xxs: {
+                minHeight: number;
+                minWidth: number;
+            };
+            xs: {
+                minHeight: number;
+                minWidth: number;
+            };
+            sm: {
+                minHeight: number;
+                minWidth: number;
+            };
+            md: {
+                minHeight: number;
+                minWidth: number;
+            };
+            lg: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                minHeight: number;
+                minWidth: number;
+            })[];
+        };
+        isHovered: {
+            true: {};
+        };
+        isDisabled: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                cursor: "not-allowed";
+            })[];
+        };
+        isFocusVisible: {
+            true: {
+                boxShadow: `inset 0 0 0 2px var(--${string})`;
+            };
+        };
+        variant: {
+            primary: {
+                selectors: {
+                    "&[aria-expanded='true'], &[data-pressed='true']": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
+            };
+            secondary: {
+                selectors: {
+                    "&[aria-expanded='true'], &[data-pressed='true']": {
+                        color: `var(--${string})`;
+                    };
+                };
+            };
+            tertiary: {
+                selectors: {
+                    "&[aria-expanded='true'], &[data-pressed='true']": {
+                        backgroundColor: `var(--${string})`;
+                        color: `var(--${string})`;
+                    };
+                };
+            };
+            ghost: {
+                selectors: {
+                    "&[aria-expanded='true'], &[data-pressed='true']": {
+                        color: `var(--${string})`;
+                    };
+                };
+            };
+            toolbar: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                selectors: {
+                    "&[aria-expanded='true'], &[data-pressed='true']": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
+            })[];
+            popover: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                minHeight: "unset";
+                width: "fit-content";
+                minWidth: "unset";
+                selectors: {
+                    "&[aria-expanded='true'], &[data-pressed='true']": {
+                        outline: `1px solid var(--${string})`;
+                        outlineOffset: number;
+                    };
+                };
+            })[];
+        };
+    }>;
+};
+export declare const chevronCn: string;

package/dist/components/ActionIconButton/ActionIconButton.d.ts

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

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

@@ -0,0 +1,56 @@
+import type { ActionButtonSharedProps } from "../ActionButton/ActionButton.types";
+import type { IconProps } from "../Icon";
+import type { TooltipProps } from "../Tooltip";
+import type React from "react";
+export interface ActionIconButtonProps extends ActionButtonSharedProps {
+    /** The icon to display */
+    icon: React.FC<IconProps>;
+    /**
+     * The size of the icon button.
+     *
+     * @default "md"
+     */
+    size?: "xxs" | "xs" | "sm" | "md" | "lg";
+    /**
+     * The variant of the icon button.
+     *
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "toolbar" | "popover";
+    /** Indicates whether focusing should be prevented on press. */
+    preventFocusOnPress?: boolean;
+    /**
+     * Whether to show a tooltip. You can pass a boolean or a partial tooltip
+     * object that extends the default tooltip props.
+     *
+     * @default false
+     */
+    tooltip?: boolean | Partial<Omit<TooltipProps, "children">>;
+    /** The drag props to use for drag and drop interactions. */
+    dragProps?: React.HTMLAttributes<HTMLElement>;
+    /**
+     * There are some cases where we need to use a button that is not interactive.
+     * For example, when we need to use a visual button inside a TabItem component
+     * that should remove the tab when clicked. Since this button never needs to
+     * be focused directly, we can set this prop to true to avoid the button being
+     * focusable. At the same time we also avoid the [nested element
+     * rule](https://dequeuniversity.com/rules/axe/html/4.6/nested-interactive)
+     *
+     * This is different from `isExcludedFromRovingFocus` because it only affects
+     * because this prop removes the button fully from the accessibility tree and
+     * renders it as a div with no role, aria-label, aria-labelledby,
+     * aria-disabled, etc.
+     *
+     * @default false
+     */
+    UNSAFE_isVisuallyInteractiveOnly?: boolean;
+    /**
+     * Whether the button is excluded from roving focus. In this case, the button
+     * will not be focusable using keyboard arrow keys but will still have correct
+     * role, aria-label, aria-labelledby, aria-disabled, etc. Avoid using this
+     * prop unless absolutely necessary.
+     *
+     * @default false
+     */
+    isExcludedFromRovingFocus?: boolean;
+}

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

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

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

@@ -0,0 +1,2 @@
+export declare const actionableCn: string;
+export declare const actionableFocusCn: string;