@baseline-ui/core 0.58.0 → 0.60.0

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

@@ -0,0 +1,133 @@
+export declare const sliderCn: string;
+export declare const sliderHeaderCn: string;
+export declare const sliderLabelCn: ((options?: {
+    isDisabled?: boolean | undefined;
+    hasNumberInput?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isDisabled" | "hasNumberInput")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isDisabled: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        hasNumberInput: {
+            false: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const sliderContentCn: string;
+export declare const sliderTrackCn: string;
+export declare const sliderTrackHighlightCn: ((options?: {
+    active?: boolean | undefined;
+    isFocusVisible?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    isHovered?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("active" | "isHovered" | "isDisabled" | "isFocusVisible")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        active: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isFocusVisible: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isDisabled: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isHovered: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const sliderThumbHandleCn: string;
+export declare const sliderThumbCn: ((options?: {
+    active?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    isReadOnly?: boolean | undefined;
+    isFocusVisible?: boolean | undefined;
+    isHovered?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("active" | "isHovered" | "isDisabled" | "isFocusVisible" | "isReadOnly")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        active: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                height: number;
+                width: number;
+            })[];
+        };
+        isDisabled: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                cursor: "not-allowed";
+            })[];
+        };
+        isReadOnly: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isFocusVisible: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                boxShadow: `0 0 0 1px var(--${string}), 0 0 0 3px var(--${string})`;
+                transitionProperty: "left";
+            })[];
+        };
+        isHovered: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                height: number;
+                width: number;
+            })[];
+        };
+    }>;
+};

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

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

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

@@ -0,0 +1,42 @@
+import type { StylingProps } from "../../utils";
+import type { ColorInputProps } from "../ColorInput";
+import type { NumberInputProps } from "../NumberInput";
+import type { PopoverContentProps } from "../Popover";
+import type { IconComponentProps } from "../shared/types/IconComponent";
+import type React from "react";
+import type { AriaSliderProps } from "react-aria";
+import type { SliderStateOptions } from "react-stately";
+export interface SliderProps extends Omit<AriaSliderProps<number> & SliderStateOptions<number>, "orientation" | "numberFormatter">, StylingProps {
+    /**
+     * Whether the slider is read only.
+     *
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /** The format options passed to `Intl.NumberFormat`. */
+    numberFormatOptions?: Intl.NumberFormatOptions & {
+        numberingSystem?: string;
+    };
+    /** The label for the slider. */
+    label?: React.ReactNode;
+    /**
+     * Whether to include a number input for the slider.
+     *
+     * @default false
+     */
+    includeNumberInput?: boolean;
+    /** Additional class name passed to the embedded number input. */
+    numberInputClassName?: NumberInputProps["className"];
+    /** Additional inline styles merged into the embedded number input. */
+    numberInputStyle?: NumberInputProps["style"];
+}
+export interface IconSliderProps extends Pick<SliderProps, "value" | "minValue" | "maxValue" | "onChange" | "defaultValue" | "includeNumberInput" | "step" | "numberFormatOptions" | "isDisabled" | "isReadOnly">, StylingProps, IconComponentProps, Pick<ColorInputProps, "onTriggerPress"> {
+    /**
+     * A function to format the value of the slider.
+     *
+     * @default value => value
+     */
+    formatValue?: (value: number) => string | number;
+    /** The props passed to the `PopoverContent` component. */
+    popoverContentProps?: Omit<PopoverContentProps, "children">;
+}

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

@@ -0,0 +1,3 @@
+export { Slider } from "./Slider";
+export { IconSlider } from "./IconSlider";
+export { type SliderProps, type IconSliderProps } from "./Slider.types";

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

@@ -0,0 +1,87 @@
+export declare const scalePulseKf: string;
+export declare const statusCardCn: ((options?: {
+    variant?: "active" | "success" | "warning" | "error" | "denied" | "active-tinted" | "warning-tinted" | "error-tinted" | "denied-tinted" | "success-tinted" | undefined;
+} | undefined) => string) & {
+    variants: () => "variant"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        variant: {
+            active: {};
+            warning: {};
+            error: {};
+            denied: {};
+            success: {};
+            "active-tinted": {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            "warning-tinted": {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            "error-tinted": {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            "denied-tinted": {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            "success-tinted": {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const textCn: ((options?: {
+    variant?: "active" | "success" | "warning" | "error" | "denied" | undefined;
+} | undefined) => string) & {
+    variants: () => "variant"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        variant: {
+            active: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            warning: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            error: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            denied: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            success: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const pulsorIconCn: string;
+export declare const truncateTitleCn: string;
+export declare const truncateContentContainerCn: string;

package/dist/components/StatusCard/StatusCard.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { StatusCardProps } from "./StatusCard.types";
+export declare const iconMap: {
+    warning: import("react/jsx-runtime").JSX.Element;
+    error: import("react/jsx-runtime").JSX.Element;
+    active: import("react/jsx-runtime").JSX.Element;
+    success: import("react/jsx-runtime").JSX.Element;
+    denied: import("react/jsx-runtime").JSX.Element;
+};
+export declare const StatusCard: React.ForwardRefExoticComponent<StatusCardProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,34 @@
+import type { BlockProps, StylingProps } from "../../utils";
+import type { IconProps } from "../Icon";
+import type React from "react";
+export interface StatusCardProps extends Omit<StylingProps, keyof BlockProps> {
+    /**
+     * The visual variant of the status card. Controls the color scheme and
+     * styling. Variants ending with "-tinted" provide a lighter, tinted
+     * background appearance.
+     *
+     * @default active
+     */
+    variant?: "active" | "warning" | "error" | "denied" | "success" | "active-tinted" | "warning-tinted" | "error-tinted" | "denied-tinted" | "success-tinted";
+    /** The main title text displayed in the status card. */
+    title: string;
+    /** The description text displayed below the title in the status card. */
+    description?: string;
+    /**
+     * An optional custom icon component to display in the status card. If not
+     * provided, a default icon will be used based on the variant.
+     */
+    icon?: React.FC<IconProps>;
+    /**
+     * A function that renders a trailing element to be displayed after the status
+     * card. This is useful for displaying a popup indicator (caret icon).
+     */
+    renderTrailingElement?: () => React.ReactNode;
+    /**
+     * When true, truncates the title text with an ellipsis if it overflows the
+     * available space. This is useful for long titles in constrained layouts.
+     *
+     * @default false
+     */
+    shouldTruncateTitle?: boolean;
+}

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

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

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

@@ -0,0 +1,67 @@
+export declare const switchRootCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    labelPosition: {
+        top: {
+            flexDirection: "column";
+            gap: `var(--${string})`;
+            width: "fit-content";
+        };
+        left: {
+            flexDirection: "row";
+            justifyContent: "space-between";
+            alignItems: "center";
+            width: "100%";
+        };
+    };
+}>;
+export declare const switchWrapperCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    labelPosition: {
+        top: {
+            flexDirection: "row-reverse";
+        };
+        left: {};
+    };
+}>;
+export declare const switchStatusLabelCn: string;
+export declare const switchCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    isReadOnly: {
+        true: {
+            border: `1px solid var(--${string})`;
+            padding: number;
+            backgroundColor: "transparent";
+            cursor: "default";
+        };
+    };
+    isDisabled: {
+        true: {
+            backgroundColor: `var(--${string})`;
+            cursor: "not-allowed";
+        };
+    };
+    isSelected: {
+        true: {};
+    };
+    isFocused: {
+        true: {
+            outlineOffset: number;
+            outline: `var(--${string}) 2px solid`;
+        };
+    };
+}>;
+export declare const switchLabelCn: string;
+export declare const switchKnobCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    isDisabled: {
+        true: {
+            backgroundColor: `var(--${string})`;
+        };
+    };
+    isSelected: {
+        true: {
+            transform: `translateX(calc(var(--${string}) * (${number}px - 1px)))`;
+        };
+    };
+    isReadOnly: {
+        true: {
+            backgroundColor: `var(--${string})`;
+        };
+    };
+}>;

package/dist/components/Switch/Switch.d.ts

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

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

@@ -0,0 +1,15 @@
+import type { StylingProps } from "../../utils";
+import type React from "react";
+import type { AriaSwitchProps } from "react-aria";
+import type { ToggleProps } from "react-stately";
+export interface SwitchProps extends Omit<AriaSwitchProps, "children">, Omit<ToggleProps, "children" | "isRequired" | "validate" | "validationBehavior" | "validationState" | "isInvalid">, StylingProps {
+    /** The label to display next to the switch. */
+    label?: React.ReactNode;
+    /** The position of the label. */
+    labelPosition?: "top" | "left";
+    /** The status label to display next to the switch. */
+    statusLabel?: {
+        on: string;
+        off: string;
+    };
+}

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

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

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

@@ -0,0 +1,111 @@
+export declare const tableCn: string;
+export declare const tableHeaderCn: string;
+export declare const columnCn: ((options?: {
+    allowsSorting?: boolean | undefined;
+    isFocusVisible?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isFocusVisible" | "allowsSorting")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        allowsSorting: {
+            true: {
+                cursor: "pointer";
+            };
+        };
+        isFocusVisible: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const tableBodyCn: string;
+export declare const tableLoadingIndicatorCn: string;
+export declare const tableLoadingIndicatorContentCn: string;
+export declare const rowCn: ((options?: {
+    isHovered?: boolean | undefined;
+    isSelected?: boolean | undefined;
+    isFocusVisible?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isSelected" | "isHovered" | "isDisabled" | "isFocusVisible")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isHovered: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isSelected: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isFocusVisible: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isDisabled: {
+            true: {
+                opacity: number;
+                pointerEvents: "none";
+            };
+        };
+    }>;
+};
+export declare const cellCn: ((options?: {
+    isFocusVisible?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => "isFocusVisible"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isFocusVisible: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const sortIndicatorCn: ((options?: {
+    sortDirection?: "ascending" | "descending" | undefined;
+} | undefined) => string) & {
+    variants: () => "sortDirection"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        sortDirection: {
+            ascending: {
+                transform: "rotate(180deg)";
+            };
+            descending: {
+                transform: "rotate(0deg)";
+            };
+        };
+    }>;
+};
+export declare const dropIndicatorCn: ((options?: {
+    isDropTarget?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => "isDropTarget"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isDropTarget: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { ColumnProps, RowProps, TableBodyProps, TableHeaderProps } from "./Table.types";
+export declare const Table: React.ForwardRefExoticComponent<import("react-aria-components").TableProps & React.RefAttributes<HTMLDivElement | HTMLTableElement>>;
+export declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLDivElement | HTMLTableSectionElement>>;
+export declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLTableRowElement>>;
+export declare const Cell: React.ForwardRefExoticComponent<import("react-aria-components").CellProps & React.RefAttributes<HTMLTableCellElement>>;

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

@@ -0,0 +1,26 @@
+import type { CellProps as RACCellProps, ColumnProps as RACColumnProps, RowProps as RACRowProps, TableBodyProps as RACTableBodyProps, TableHeaderProps as RACTableHeaderProps, TableLoadMoreItemProps as RACTableLoadMoreItemProps, TableProps as RACTableProps } from "react-aria-components";
+export type TableProps = RACTableProps;
+export type TableHeaderProps<T extends object = object> = RACTableHeaderProps<T>;
+type LoadMoreProps = {
+    /**
+     * Called when the table scrolls near the end of the currently loaded rows.
+     * TableBody automatically renders an internal loading sentinel when this is provided.
+     */
+    onLoadMore: RACTableLoadMoreItemProps["onLoadMore"];
+    /** Whether the automatic loading indicator should be visible. Also suppresses re-triggering while a fetch is in flight. */
+    isLoading?: RACTableLoadMoreItemProps["isLoading"];
+    /**
+     * Distance from the end of the scroll region that triggers loading, as a fraction of the container height.
+     * @default 1 (100% of container height — triggers when the sentinel enters view)
+     */
+    scrollOffset?: RACTableLoadMoreItemProps["scrollOffset"];
+} | {
+    onLoadMore?: never;
+    isLoading?: never;
+    scrollOffset?: never;
+};
+export type TableBodyProps<T extends object = object> = RACTableBodyProps<T> & LoadMoreProps;
+export type ColumnProps = Omit<RACColumnProps, "width" | "defaultWidth" | "minWidth" | "maxWidth">;
+export type RowProps<T extends object = object> = RACRowProps<T>;
+export type CellProps = RACCellProps;
+export {};

package/dist/components/Table/hooks/useTableDragAndDrop.d.ts

@@ -0,0 +1,8 @@
+import type React from "react";
+import type { DragAndDropOptions } from "react-aria-components";
+export interface UseTableDragAndDropOptions<T extends object = object> extends DragAndDropOptions<T> {
+    /** Ref to the scrollable container element. When provided, auto-scroll
+     *  activates when dragging near container edges. */
+    scrollRef?: React.RefObject<HTMLElement>;
+}
+export declare function useTableDragAndDrop<T extends object = object>(options: UseTableDragAndDropOptions<T>): import(".generated/react-spectrum-types/dist/react-aria-components/src/useDragAndDrop").DragAndDrop<T>;

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

@@ -0,0 +1,3 @@
+export { Table, TableHeader, TableBody, Column, Row, Cell } from "./Table";
+export { useTableDragAndDrop, type UseTableDragAndDropOptions, } from "./hooks/useTableDragAndDrop";
+export type { TableProps, TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps, } from "./Table.types";

package/dist/components/Tabs/TabItem.d.ts

@@ -0,0 +1,3 @@
+import type { TabItemProps } from "./Tabs.types";
+import type React from "react";
+export declare const TabItem: React.FC<TabItemProps>;

package/dist/components/Tabs/TabPanel.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ItemProps } from "./Tabs.types";
+import type { AriaTabPanelProps } from "react-aria";
+import type { TabListState } from "react-stately";
+export declare const TabPanel: React.FC<TabPanelProps>;
+type TabPanelProps = AriaTabPanelProps & {
+    state: TabListState<ItemProps>;
+};
+export {};