@baseline-ui/core 0.59.0 → 0.60.0

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

@@ -0,0 +1,16 @@
+import type { StylingProps } from "../../utils";
+import type { AriaProgressBarProps } from "react-aria";
+export interface ProgressSpinnerProps extends Omit<AriaProgressBarProps, "value" | "isIndeterminate" | "formatOptions" | "maxValue" | "minValue" | "valueLabel">, StylingProps {
+    /**
+     * The size of the progress circle.
+     *
+     * @default md
+     */
+    size?: "sm" | "md";
+    /**
+     * The progress circle's variant.
+     *
+     * @default active
+     */
+    variant?: "active" | "inactive" | "success" | "error";
+}

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

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

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

@@ -0,0 +1,26 @@
+export declare const radioGroupListContainerCn: string;
+export declare const radioOutlineCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    isHovered: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {};
+    };
+}>;
+export declare const labelContainerCn: string;
+export declare const radioDotIconCn: string;
+export declare const radioDescriptionCn: ((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;
+            };
+        };
+    }>;
+};

package/dist/components/RadioGroup/RadioGroup.d.ts

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

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

@@ -0,0 +1,67 @@
+import type { StylingProps } from "../../utils";
+import type { ListOption } from "../shared/types/List";
+import type React from "react";
+import type { AriaRadioGroupProps } from "react-aria";
+export interface RadioGroupProps extends StylingProps, Omit<AriaRadioGroupProps, "description" | "errorMessage" | "isRequired" | "isInvalid" | "validate" | "validationBehavior" | "validationState"> {
+    /**
+     * The position of the label relative to the input.
+     *
+     * @default top
+     */
+    labelPosition?: "top" | "start";
+    /**
+     * The list of items to render in the radio group. Items have the following
+     * shape:
+     *
+     * ```ts
+     * export type ListOption = {
+     *   id: string;
+     *   label: string;
+     *   description?: string;
+     *   icon?: React.FC<IconProps>;
+     * };
+     * ```
+     */
+    items: ListOption[];
+    /**
+     * Render item option
+     *
+     * @typedef {Object} RenderItemOptions
+     * @property {boolean} isFocusVisible - Whether the focus ring is visible.
+     * @property {boolean} isFocused - Whether the option is focused.
+     * @property {boolean} isSelected - Whether the option is selected.
+     * @property {boolean} isHovered - Whether the option is hovered.
+     * @property {boolean} isDisabled - Whether the option is disabled.
+     */
+    /**
+     * The custom render function for the radio group options.
+     *
+     * @param {ListOption} item The item to render.
+     * @param {RenderItemOptions} options The options for rendering the item.
+     */
+    renderOption?: (item: ListOption, options: {
+        isFocusVisible: boolean;
+        isFocused: boolean;
+        isSelected: boolean;
+        isHovered: boolean;
+        isDisabled: boolean;
+        optionLabelPosition: "start" | "end";
+        isReadOnly?: boolean;
+    }) => React.ReactNode;
+    /** The class name for the group container. */
+    optionsContainerClassName?: string;
+    /** The style for the group container. */
+    optionsContainerStyle?: React.CSSProperties;
+    /** The ids of the items that are disabled. */
+    disabledValues?: string[];
+    /**
+     * The position of the label of individual radio buttons.
+     *
+     * @default end
+     */
+    optionLabelPosition?: "start" | "end";
+    /** The className applicable to the label. */
+    optionClassName?: string;
+    /** The style applicable to the label. */
+    optionStyle?: React.CSSProperties;
+}

package/dist/components/RadioGroup/RadioItem.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { ListOption } from "../shared/types/List";
+import type { RadioGroupProps } from "./RadioGroup.types";
+import type { AriaRadioProps } from "react-aria";
+import type { RadioGroupState } from "react-stately";
+export declare const RadioItem: React.FC<RadioItemProps>;
+interface RadioItemProps extends AriaRadioProps, Pick<RadioGroupProps, "renderOption" | "disabledValues" | "optionLabelPosition" | "optionClassName" | "optionStyle" | "isReadOnly"> {
+    state: RadioGroupState;
+    item: ListOption;
+}
+export {};

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

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

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

@@ -0,0 +1,74 @@
+export declare const labelCn: string;
+export declare const reactionCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    isSelected: {
+        true: {
+            backgroundColor: `var(--${string})`;
+        };
+        false: {
+            backgroundColor: `var(--${string})`;
+        };
+    };
+    isDisabled: {
+        true: string;
+    };
+    isHovered: {
+        true: {};
+    };
+    isFocusVisible: {
+        true: {
+            outline: `2px solid var(--${string})`;
+        };
+    };
+    isReadOnly: {
+        true: {
+            cursor: "default";
+            boxShadow: `inset 0 0 0 1px var(--${string})`;
+            backgroundColor: `var(--${string})`;
+        };
+    };
+}>;
+export declare const reactionIconWrapperCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    isDisabled: {
+        true: {
+            color: `var(--${string})`;
+        };
+    };
+    isReadOnly: {
+        true: {
+            color: `var(--${string})`;
+            backgroundColor: `var(--${string})`;
+        };
+    };
+}>;
+export declare const reactionCountCn: ((options?: {
+    isSelected?: boolean | undefined;
+    size?: "sm" | "md" | undefined;
+    isDisabled?: boolean | undefined;
+    isReadOnly?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("size" | "isSelected" | "isDisabled" | "isReadOnly")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isSelected: {
+            true: {};
+        };
+        size: {
+            sm: {
+                height: number;
+            };
+            md: {
+                height: number;
+            };
+        };
+        isDisabled: {
+            true: {};
+        };
+        isReadOnly: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};

package/dist/components/Reaction/Reaction.d.ts

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

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

@@ -0,0 +1,13 @@
+import type { StylingProps } from "../../utils";
+import type { IconProps } from "../Icon";
+import type React from "react";
+import type { AriaSwitchProps } from "react-aria";
+import type { ToggleProps } from "react-stately";
+export interface ReactionProps extends Omit<AriaSwitchProps & ToggleProps, "validationState" | "isRequired" | "children" | "isInvalid" | "validationBehavior" | "validate">, StylingProps {
+    /** The size of the reaction. */
+    size?: "sm" | "md";
+    /** The number of reactions. */
+    count: number;
+    /** The icon to render. */
+    icon?: React.FC<IconProps>;
+}

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

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

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

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

package/dist/components/ScrollControlButton/ScrollControlButton.d.ts

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

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

@@ -0,0 +1,31 @@
+import type { StylingProps } from "../../utils";
+import type { ActionButtonProps } from "../ActionButton";
+import type React from "react";
+export interface ScrollControlButtonProps extends StylingProps, Pick<ActionButtonProps, "label"> {
+    /**
+     * The ref to the scrollable element.
+     *
+     * @default document.body
+     */
+    scrollRef?: React.RefObject<HTMLElement>;
+    /**
+     * Indicates whether the button should be hidden when the keyboard is being
+     * used.
+     *
+     * @default false
+     */
+    hideForKeyboard?: boolean;
+    /**
+     * The delay in milliseconds before the button is hidden when the scrolling
+     * stops.
+     *
+     * @default 1500
+     */
+    delay?: number;
+    /**
+     * Indicates whether the scroll should be smooth.
+     *
+     * @default true
+     */
+    smoothScroll?: boolean;
+}

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

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

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

@@ -0,0 +1,64 @@
+export declare const searchCn: ((options?: {
+    size?: "sm" | "lg" | "md" | undefined;
+    variant?: "primary" | "ghost" | undefined;
+    isFocused?: boolean | undefined;
+    hasText?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("size" | "isFocused" | "isDisabled" | "variant" | "hasText")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        size: {
+            lg: {
+                height: number;
+            };
+            md: {
+                height: number;
+            };
+            sm: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                height: number;
+            })[];
+        };
+        variant: {
+            primary: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            ghost: {};
+        };
+        isFocused: {
+            true: {
+                borderColor: "transparent";
+                outlineWidth: number;
+                outlineStyle: "solid";
+                outlineColor: `var(--${string})`;
+                outlineOffset: number;
+            };
+        };
+        hasText: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isDisabled: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                cursor: "not-allowed";
+            })[];
+        };
+    }>;
+};
+export declare const inputCn: string;

package/dist/components/SearchInput/SearchInput.d.ts

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

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

@@ -0,0 +1,27 @@
+import type { StylingProps } from "../../utils";
+import type { AriaSearchFieldProps } from "react-aria";
+export interface SearchInputProps extends Omit<AriaSearchFieldProps, "validationState" | "label" | "aria-autocomplete" | "autoComplete" | "isRequired" | "aria-haspopup" | "isReadOnly" | "aria-activedescendant" | "type" | "validationBehavior" | "validate" | "isInvalid">, StylingProps {
+    /**
+     * The size of the search input.
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * The variant of the search input.
+     *
+     * @default "primary"
+     */
+    variant?: "primary" | "ghost";
+    /** Defines a string value that labels the current element. */
+    "aria-label": string;
+    /**
+     * Whether the clear button is focusable. By default, you can clear the search
+     * input by pressing the `Escape` key and clicking the clear button. So the
+     * clear button is excluded from receiving focus. This prop is useful when you
+     * want to allow the clear button to receive focus.
+     *
+     * @default false
+     */
+    isClearFocusable?: boolean;
+}

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

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

package/dist/components/Select/IconSelect.d.ts

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

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

@@ -0,0 +1,58 @@
+export declare const selectButtonCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    isFocused: {
+        false: {
+            outline: "none";
+        };
+    };
+    isOpen: {
+        true: {
+            borderColor: `var(--${string})`;
+        };
+    };
+    isDisabled: {
+        true: string[];
+    };
+    isHovered: {
+        true: {};
+    };
+    variant: {
+        primary: {};
+        ghost: {};
+    };
+    isReadOnly: {
+        true: {};
+    };
+    areTagsVisible: {
+        true: (string | {
+            overflow: "auto";
+            flexBasis: "auto";
+        })[];
+    };
+}>;
+export declare const chevronCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    isOpen: {
+        true: {
+            transform: "rotate(180deg)";
+        };
+    };
+}>;
+export declare const selectStatusIconCn: string;
+export declare const selectedButtonLabelContainerCn: string;
+export declare const popoverContentCn: string;
+export declare const actionButtonCn: string;
+export declare const listBoxCn: ((options?: {
+    isVirtualized?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => "isVirtualized"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isVirtualized: {
+            true: {
+                width: "calc(100% - 2px)";
+                marginInline: number;
+            };
+        };
+    }>;
+};
+export declare const resetButtonCn: string;
+export declare const searchCn: string;
+export declare const footerContainerCn: string;

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ListItem } from "../shared/types/List";
+import type { SelectProps } from "./Select.types";
+import type { SelectState } from "react-stately";
+export declare const SelectContext: React.Context<{
+    state: SelectState<ListItem> | null;
+    popoverAnchorRef: React.RefObject<HTMLElement> | null;
+}>;
+export declare const Select: React.ForwardRefExoticComponent<SelectProps<"multiple" | "single"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,87 @@
+import type { StylingProps } from "../../utils";
+import type { ActionButtonProps } from "../ActionButton";
+import type { ColorInputProps } from "../ColorInput";
+import type { PopoverContentProps } from "../Popover";
+import type { IconComponentProps } from "../shared/types/IconComponent";
+import type { ListItem, ListOption } from "../shared/types/List";
+import type { UNSAFE_ListBoxProps as ListBoxProps } from "../UNSAFE_ListBox/ListBox.types";
+import type { DOMAttributes, Key } from "@react-types/shared";
+import type React from "react";
+import type { AriaSelectOptions } from "react-aria";
+import type { SelectStateOptions } from "react-stately";
+type SelectionMode = "single" | "multiple";
+export interface SelectProps<M extends SelectionMode = SelectionMode> extends Omit<AriaSelectOptions<ListItem, M> & SelectStateOptions<ListItem, M> & PopoverContentProps, "validationState" | "items" | "children" | "isRequired" | "className" | "style" | "triggerRef" | "validate" | "validationBehavior" | "keyboardDelegate" | "state" | "overlayProps">, Pick<ListBoxProps, "items" | "optionStyle" | "optionClassName" | "showSectionHeader">, Pick<ColorInputProps, "onTriggerPress">, StylingProps {
+    /**
+     * The position of the label.
+     *
+     * @default "top"
+     */
+    labelPosition?: "top" | "start";
+    /** The description of the select component. */
+    description?: string;
+    /** The error message of the select component. */
+    errorMessage?: string;
+    /** The warning message of the select component. */
+    warningMessage?: string;
+    /** The label of the select component. */
+    label?: React.ReactNode;
+    /** The variant of the select component. */
+    variant?: "primary" | "ghost";
+    /** The state of the select component. */
+    validationState?: "valid" | "error" | "warning";
+    /** Whether the select component is read only. */
+    isReadOnly?: boolean;
+    /**
+     * This callback can be used to render the trigger element of the select
+     * component. The trigger element is the element that is clicked to open the
+     * select menu.
+     */
+    renderTrigger?: (options: {
+        buttonProps: Omit<ActionButtonProps, "variant" | "label" | "elementType" | "iconStart" | "iconEnd" | "className" | "style">;
+        valueProps: DOMAttributes;
+        isOpen: boolean;
+        selectedValue: ListOption[] | null;
+        ref: React.RefObject<HTMLButtonElement>;
+        selectionMode: SelectionMode;
+        onRemove: (key: Set<Key>) => void;
+        maxCount: number;
+    }) => React.ReactNode;
+    /** The class name of the trigger element. */
+    triggerClassName?: string;
+    /** The style of the trigger element. */
+    triggerStyle?: React.CSSProperties;
+    /**
+     * The maximum number of items to show in the select button as tags when
+     * `selectionMode` is `multiple`.
+     *
+     * @default 2
+     */
+    maxCount?: number;
+    /**
+     * Whether to hide the select all option that is shown when `selectionMode` is
+     * `multiple`.
+     *
+     * @default false
+     */
+    hideSelectAll?: boolean;
+    /**
+     * Whether to hide the clear option that is shown when `selectionMode` is
+     * `multiple`.
+     *
+     * @default false
+     */
+    hideClear?: boolean;
+}
+export interface IconSelectProps extends Omit<SelectProps, "renderTrigger" | "aria-label" | "selectionMode">, IconComponentProps {
+}
+export interface SelectButtonProps extends Omit<ActionButtonProps, "variant" | "label" | "className" | "style" | "value">, Pick<SelectProps, "maxCount" | "isOpen" | "isReadOnly" | "selectionMode"> {
+    value: ListOption[] | null;
+    variant?: "primary" | "ghost";
+    validationState?: "valid" | "error" | "warning";
+    valueProps: React.HTMLAttributes<HTMLSpanElement>;
+    className?: string;
+    style?: React.CSSProperties;
+    fallbackValue?: string;
+    onRemove?: (key: Set<Key>) => void;
+}
+export {};

package/dist/components/Select/SelectButton.d.ts

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

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

@@ -0,0 +1,3 @@
+export { Select } from "./Select";
+export { IconSelect } from "./IconSelect";
+export { type SelectProps, type IconSelectProps } from "./Select.types";

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

@@ -0,0 +1,19 @@
+export declare const separatorCn: ((options?: {
+    isVertical?: boolean | undefined;
+    isSecondary?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isVertical" | "isSecondary")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isVertical: {
+            true: {
+                width: "1px";
+                height: "100%";
+            };
+        };
+        isSecondary: {
+            true: {
+                backgroundColor: `var(--${string})`;
+            };
+        };
+    }>;
+};

package/dist/components/Separator/Separator.d.ts

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

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

@@ -0,0 +1,12 @@
+import type { StylingProps } from "../../utils";
+import type { SeparatorProps as ReactAriaSeparatorProps } from "react-aria";
+export interface SeparatorProps extends ReactAriaSeparatorProps, StylingProps {
+    /**
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary";
+    /**
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+}

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import type React from "react";
+export interface SkeletonProps {
+    /** The className applied to the root element of the component. */
+    className?: string;
+    /** The style applied to the root element of the component. */
+    style?: React.CSSProperties;
+}

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

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

package/dist/components/Slider/IconSlider.d.ts

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