@baseline-ui/core 0.59.0 → 0.60.0

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

@@ -0,0 +1,122 @@
+export declare const tabHeaderCn: ((options?: {
+    variant?: "primary" | "ghost" | undefined;
+} | undefined) => string) & {
+    variants: () => "variant"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        variant: {
+            primary: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            ghost: {};
+        };
+    }>;
+};
+export declare const tabButtonContainerCn: ((options?: {
+    variant?: "primary" | "ghost" | undefined;
+} | undefined) => string) & {
+    variants: () => "variant"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        variant: {
+            primary: {};
+            ghost: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const tabButtonCn: ((options?: {
+    isHovered?: boolean | undefined;
+    isSelected?: boolean | undefined;
+    isFocusVisible?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    variant?: "primary" | "ghost" | undefined;
+} | undefined) => string) & {
+    variants: () => ("isSelected" | "isHovered" | "isDisabled" | "variant" | "isFocusVisible")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isHovered: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isSelected: {
+            true: {};
+        };
+        isFocusVisible: {
+            true: {
+                boxShadow: `inset 0 0 0 2px var(--${string})`;
+            };
+        };
+        isDisabled: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                pointerEvents: "none";
+                cursor: "not-allowed";
+            })[];
+        };
+        variant: {
+            primary: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                borderRight: `1px solid var(--${string})`;
+            })[];
+            ghost: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const tabButtonStartIconCn: ((options?: {
+    isHovered?: boolean | undefined;
+    isSelected?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    variant?: "primary" | "ghost" | undefined;
+} | undefined) => string) & {
+    variants: () => ("isSelected" | "isHovered" | "isDisabled" | "variant")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isHovered: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isSelected: {
+            true: {};
+        };
+        isDisabled: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        variant: {
+            primary: {};
+            ghost: {};
+        };
+    }>;
+};
+export declare const tabActionContainerCn: string;
+export declare const tabButtonIconCn: string;
+export declare const tabContentFocusRingCn: string;

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

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

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

@@ -0,0 +1,66 @@
+import type { StylingProps } from "../../utils";
+import type { ActionIconButtonProps } from "../ActionIconButton";
+import type { IconProps, SVGRProps } from "../Icon";
+import type { AriaTabListProps } from "@react-types/tabs";
+import type React from "react";
+import type { Key } from "react-aria";
+import type { Item } from "react-stately";
+export type ItemProps = React.ComponentProps<typeof Item> & StylingProps & {
+    key?: Key;
+    icon?: React.FC<IconProps>;
+    value?: string;
+    title?: string;
+    titleClassName?: string;
+    titleStyle?: React.CSSProperties;
+};
+export type TabsProps = Omit<StylingProps & AriaTabListProps<ItemProps>, "orientation" | "children" | "items" | "selectedKey" | "defaultSelectedKey" | "disabledKeys"> & {
+    /**
+     * The `TabItem` components to render inside the `Tabs` component.
+     *
+     * ```jsx
+     * <Tabs>
+     *   <TabItem key="tab1" title="Tab 1">
+     *     <div>Tab 1 content</div>
+     *   </TabItem>
+     *   <TabItem key="tab2" title="Tab 2">
+     *     <div>Tab 2 content</div>
+     *   </TabItem>
+     * </Tabs>;
+     * ```
+     */
+    children: React.ReactNode;
+    /**
+     * The key of the tab that needs to be removed.
+     *
+     * @param key
+     */
+    onRemove?: (key: Key) => void;
+    /** The value of the tab that needs to be selected. */
+    selectedValue?: string;
+    /** The default value of the tab that needs to be selected. */
+    defaultSelectedValue?: string;
+    /** The values of the tabs that need to be disabled. */
+    disabledValues?: Set<Key>;
+    /** A list of action buttons to render beside the tab items. */
+    actions?: Omit<ActionIconButtonProps, "variant" | "size">[];
+    /** The variant of the tabs */
+    variant?: "primary" | "ghost";
+    /** The className to apply to the tab header container. */
+    tabHeaderClassName?: string;
+    /** The style to apply to the tab header container. */
+    tabHeaderStyle?: React.CSSProperties;
+};
+export type TabItemProps = StylingProps & {
+    /** The title of the tab. This will be displayed in the tab button. */
+    title: string;
+    /** The icon to display in front of the title. */
+    icon?: React.FC<SVGRProps>;
+    /** The value of the tab. This will be used to identify the tab. */
+    value: string;
+    /** The className to apply to the tab item. */
+    titleClassName?: string;
+    /** The style to apply to the tab item. */
+    titleStyle?: React.CSSProperties;
+    /** The contents of the tab item. */
+    children: React.ReactNode;
+};

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ItemProps, TabsProps } from "./Tabs.types";
+import type { CollectionChildren } from "@react-types/shared";
+export declare const TabsBase: React.ForwardRefExoticComponent<Omit<TabsProps, "children"> & {
+    items: ItemProps[];
+    children: CollectionChildren<ItemProps>;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,3 @@
+export { Tabs } from "./Tabs";
+export { type TabsProps, type TabItemProps } from "./Tabs.types";
+export { TabItem } from "./TabItem";

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

@@ -0,0 +1,215 @@
+export declare const tagCn: ((options?: {
+    isFocusVisible?: boolean | undefined;
+    variant?: "blue" | "green" | "red" | "neutral" | "high-contrast" | undefined;
+    isDisabled?: boolean | undefined;
+    allowsRemoving?: boolean | undefined;
+    isSelected?: boolean | undefined;
+    allowsSelection?: boolean | undefined;
+    isHovered?: boolean | undefined;
+    size?: "sm" | "md" | undefined;
+} | undefined) => string) & {
+    variants: () => ("size" | "isSelected" | "isHovered" | "isDisabled" | "variant" | "isFocusVisible" | "allowsSelection" | "allowsRemoving")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isFocusVisible: {
+            true: {
+                outline: `2px solid var(--${string})`;
+                outlineOffset: number;
+            };
+        };
+        variant: {
+            neutral: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            red: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            green: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            blue: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            "high-contrast": {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isDisabled: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                cursor: "not-allowed";
+            })[];
+        };
+        allowsRemoving: {
+            true: {};
+        };
+        isSelected: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        allowsSelection: {
+            true: {
+                cursor: "pointer";
+            };
+        };
+        isHovered: {
+            true: {};
+        };
+        size: {
+            md: {
+                selectors: {
+                    "&:has(.BaselineUI-Tag-Icon)": {
+                        paddingInlineStart: `var(--${string})`;
+                    };
+                };
+            };
+            sm: {
+                minHeight: number;
+                selectors: {
+                    "&:has(.BaselineUI-Tag-Icon)": {
+                        paddingInlineStart: `var(--${string})`;
+                    };
+                };
+            }[];
+        };
+    }>;
+};
+export declare const textColorCn: ((options?: {
+    variant?: "blue" | "green" | "red" | "neutral" | "high-contrast" | undefined;
+    isDisabled?: boolean | undefined;
+    isSelected?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isSelected" | "isDisabled" | "variant")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        variant: {
+            neutral: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            red: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            green: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            blue: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            "high-contrast": {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isDisabled: {
+            true: string;
+        };
+        isSelected: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const iconColorCn: ((options?: {
+    variant?: "blue" | "green" | "red" | "neutral" | "high-contrast" | undefined;
+    isDisabled?: boolean | undefined;
+    isSelected?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isSelected" | "isDisabled" | "variant")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        variant: {
+            neutral: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            red: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            green: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            blue: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            "high-contrast": {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isDisabled: {
+            true: string;
+        };
+        isSelected: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const tagContentCn: string;
+export declare const tagRemoveCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        neutral: {};
+        red: {};
+        green: {};
+        blue: {};
+        "high-contrast": {};
+    };
+    isHovered: {
+        true: {};
+    };
+}>;

package/dist/components/Tag/Tag.d.ts

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

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

@@ -0,0 +1,43 @@
+import type { StylingProps } from "../../utils";
+import type { IconProps } from "../Icon";
+import type React from "react";
+export type TagVariant = "neutral" | "red" | "green" | "blue" | "high-contrast";
+export interface TagProps extends StylingProps {
+    /**
+     * The content to display inside the tag.
+     */
+    children: React.ReactNode;
+    /**
+     * The visual variant of the tag.
+     *
+     * @default "neutral"
+     */
+    variant?: TagVariant;
+    /**
+     * The size of the tag.
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md";
+    /**
+     * An optional icon to display before the tag content.
+     */
+    icon?: React.FC<IconProps>;
+    /**
+     * Whether the tag is disabled.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the tag is selected.
+     *
+     * @default false
+     */
+    isSelected?: boolean;
+    /**
+     * Callback when the remove button is pressed. When provided, a remove button
+     * is rendered.
+     */
+    onRemove?: () => void;
+}

package/dist/components/Tag/TagContext.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { ListOption } from "../ListBox";
+import type { TagVariant } from "./Tag.types";
+import type { Node } from "@react-types/shared";
+import type { ListState } from "react-stately";
+export interface TagGroupContextValue {
+    state: ListState<ListOption>;
+    variant?: TagVariant;
+    size?: "sm" | "md";
+}
+export interface TagItemContextValue {
+    item: Node<ListOption>;
+}
+export declare const TagGroupContext: React.Context<TagGroupContextValue | null>;
+export declare const TagItemContext: React.Context<TagItemContextValue | null>;

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

@@ -0,0 +1,2 @@
+export { Tag } from "./Tag";
+export { type TagProps, type TagVariant } from "./Tag.types";

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

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

package/dist/components/TagGroup/TagGroup.d.ts

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

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

@@ -0,0 +1,38 @@
+import type { StylingProps } from "../../utils";
+import type { SVGRProps } from "../Icon";
+import type React from "react";
+import type { AriaTagGroupProps } from "react-aria";
+import type { ListProps } from "react-stately";
+export interface Item {
+    id: string;
+    label: string;
+    variant?: "neutral" | "red" | "green" | "blue" | "high-contrast";
+    icon?: React.FC<SVGRProps>;
+}
+export interface TagGroupProps extends StylingProps, Omit<AriaTagGroupProps<Item>, "children" | "errorMessage" | "description">, Omit<ListProps<Item>, "children" | "collection" | "filter"> {
+    /**
+     * The items to display in the tag group.
+     *
+     * Type Item = { id: string; label: string; variant?: "neutral" | "red" |
+     * "green" | "blue" | "high-contrast"; icon?: React.FC<SVGRProps>; }
+     */
+    items: Item[];
+    /**
+     * The variant of the tag group.
+     *
+     * @default "neutral"
+     */
+    variant?: Item["variant"];
+    /**
+     * The size of the tag group.
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md";
+    /**
+     * Whether the tag group is disabled.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+}

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

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

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

@@ -0,0 +1,70 @@
+export declare const taggedPaginationCn: Record<"xs" | "sm" | "md", string>;
+export declare const labelCn: ((options?: {
+    size?: "xs" | "sm" | "md" | undefined;
+    isDisabled?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("size" | "isDisabled")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        size: {
+            xs: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            sm: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            md: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isDisabled: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const inputCn: ((options?: {
+    size?: "xs" | "sm" | "md" | undefined;
+} | undefined) => string) & {
+    variants: () => "size"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        size: {
+            xs: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                width: number;
+            })[];
+            sm: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                width: number;
+            })[];
+            md: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                width: number;
+            })[];
+        };
+    }>;
+};

package/dist/components/TaggedPagination/TaggedPagination.d.ts

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

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

@@ -0,0 +1,50 @@
+import type { StylingProps } from "../../utils";
+import type { PaginationProps } from "../Pagination";
+import type React from "react";
+import type { AriaTextFieldOptions } from "react-aria";
+export interface TaggedPaginationProps extends StylingProps, Pick<PaginationProps, "isDisabled" | "decrementAriaLabel" | "incrementAriaLabel">, Pick<AriaTextFieldOptions<"input">, "onBlur" | "onKeyDown" | "isDisabled" | "isReadOnly" | "label"> {
+    /** Whether the decrement button is disabled. */
+    isDecrementButtonDisabled?: boolean;
+    /** Whether the increment button is disabled. */
+    isIncrementButtonDisabled?: boolean;
+    /**
+     * Determines the size of the component.
+     *
+     * @default "md"
+     */
+    size?: "xs" | "sm" | "md";
+    /** The label for the component. */
+    label?: React.ReactNode;
+    /** The aria-label for the description. */
+    descriptionAriaLabel?: string;
+    /**
+     * The type of the input field.
+     *
+     * @default "number"
+     */
+    type?: "number" | "text";
+    /** The minimum value of the component. */
+    minValue?: number;
+    /** The maximum value of the component. */
+    maxValue?: number;
+    /** The value of the component. */
+    value?: number;
+    /** The default value of the component. */
+    defaultValue?: number;
+    /** The callback that is called when the value is changed. */
+    onChange?: (value: number | string) => void;
+    /** The callback that is called when the value is changed successfully. */
+    onChangeSuccess?: (value: number) => void;
+    /** The callback that is called when the input value is changed. */
+    onInputChange?: (value: string) => void;
+    /** The description of the component. */
+    description?: string | ((value: number) => string);
+    /**
+     * The step of the component.
+     *
+     * @default 1
+     */
+    step?: number;
+    /** The mapping of label to value. */
+    valueToLabelMap?: Map<number, string>;
+}

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

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