@baseline-ui/core 0.60.0 → 0.61.0

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

@@ -1,44 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

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

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

@@ -1,216 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

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

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

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

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

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

@@ -1,116 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

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

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

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