@baseline-ui/core 0.59.0 → 0.60.0

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

@@ -0,0 +1,51 @@
+export declare const textCn: ((options?: {
+    size?: "sm" | "lg" | "md" | undefined;
+    type?: "body" | "label" | "title" | "value" | "subtitle" | "helper" | undefined;
+} | undefined) => string) & {
+    variants: () => ("size" | "type")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        size: {
+            sm: {};
+            md: {};
+            lg: {};
+        };
+        type: {
+            subtitle: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            title: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            label: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            value: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            helper: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            body: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { TextProps } from "./Text.types";
+export declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,24 @@
+import type { StylingProps } from "../../utils";
+import type React from "react";
+export type TextProps<T extends keyof React.JSX.IntrinsicElements = "span"> = StylingProps & React.ComponentProps<T> & {
+    /**
+     * The type of text to render.
+     *
+     * @default "title"
+     */
+    type?: "subtitle" | "title" | "label" | "value" | "helper" | "body";
+    /**
+     * The size of the text.
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /** The text to render. Can be a string or a number. */
+    children: React.ReactNode;
+    /**
+     * The HTML element to render.
+     *
+     * @default "span"
+     */
+    elementType?: React.ElementType;
+};

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

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

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

@@ -0,0 +1,183 @@
+export declare const textInputRootCn: ((options?: {
+    labelPosition?: "top" | "start" | undefined;
+} | undefined) => string) & {
+    variants: () => "labelPosition"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        labelPosition: {
+            top: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            start: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const textInputLabelCn: string;
+export declare const textInputLabelContainerCn: ((options?: {
+    labelPosition?: "top" | "start" | undefined;
+    hasMessage?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("labelPosition" | "hasMessage")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        labelPosition: {
+            top: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            start: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        hasMessage: {
+            true: {};
+        };
+    }>;
+};
+export declare const textInputWrapperCn: ((options?: {
+    validationState?: "warning" | "error" | "valid" | undefined;
+    isHovered?: boolean | undefined;
+    isFocused?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    variant?: "primary" | "ghost" | undefined;
+    isReadOnly?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isFocused" | "isHovered" | "isDisabled" | "variant" | "validationState" | "isReadOnly")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        validationState: {
+            valid: {};
+            error: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            warning: {};
+        };
+        isHovered: {
+            true: {};
+        };
+        isFocused: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isDisabled: {
+            true: {
+                cursor: "not-allowed";
+            };
+        };
+        variant: {
+            primary: {};
+            ghost: {};
+        };
+        isReadOnly: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const textInputCn: ((options?: {
+    isDisabled?: boolean | undefined;
+    labelPosition?: "top" | "start" | undefined;
+} | undefined) => string) & {
+    variants: () => ("isDisabled" | "labelPosition")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isDisabled: {
+            true: {
+                cursor: "inherit";
+                color: `var(--${string})`;
+                "::placeholder": {
+                    color: `var(--${string})`;
+                };
+            }[];
+        };
+        labelPosition: {
+            top: {};
+            start: {
+                textAlign: "right";
+            };
+        };
+    }>;
+};
+export declare const textInputIconCn: ((options?: {
+    validationState?: "warning" | "error" | "valid" | undefined;
+    isReadOnly?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("validationState" | "isReadOnly")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        validationState: {
+            valid: {};
+            error: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            warning: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isReadOnly: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const helperTextCn: ((options?: {
+    isDisabled?: boolean | undefined;
+    hasError?: boolean | undefined;
+    labelPosition?: "top" | "start" | undefined;
+} | undefined) => string) & {
+    variants: () => ("isDisabled" | "labelPosition" | "hasError")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isDisabled: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        hasError: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        labelPosition: {
+            start: {
+                width: "max-content";
+                maxWidth: number;
+            };
+            top: {};
+        };
+    }>;
+};

package/dist/components/TextInput/TextInput.d.ts

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

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

@@ -0,0 +1,18 @@
+import type { StylingProps } from "../../utils";
+import type { SharedInputProps } from "../shared/components/SharedInput/SharedInput.types";
+import type React from "react";
+import type { AriaTextFieldProps } from "react-aria";
+export interface InputMessage {
+    /** The description to display below the input. */
+    description?: string;
+    /** The error message to display when the input is in an error state. */
+    errorMessage?: string;
+    /** The warning message to display when the input is in a warning state. */
+    warningMessage?: string;
+}
+export interface TextInputProps extends Omit<AriaTextFieldProps, "validationState" | "isInvalid" | "description" | "errorMessage">, StylingProps, InputMessage, Pick<SharedInputProps, "validationState" | "variant" | "labelPosition"> {
+    /** The style object to apply to the input element */
+    inputStyle?: React.CSSProperties;
+    /** The class name to apply to the input element */
+    inputClassName?: string;
+}

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

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

package/dist/components/TextInput/utils/getMessage.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export declare function getMessage({ description, errorMessageProps, descriptionProps, warningMessage, errorMessage, labelPosition, isDisabled, }: IOptions): import("react/jsx-runtime").JSX.Element | null;
+interface IOptions {
+    description?: string;
+    errorMessage?: string;
+    warningMessage?: string;
+    descriptionProps: React.HTMLAttributes<HTMLDivElement>;
+    errorMessageProps: React.HTMLAttributes<HTMLDivElement>;
+    isDisabled?: boolean;
+    labelPosition?: "top" | "start";
+}
+export {};

package/dist/components/TextInput/utils/getStatusIcon.d.ts

@@ -0,0 +1,6 @@
+import type { IconProps } from "../../Icon";
+import type React from "react";
+export declare function getStatusIcon({ isReadOnly, validationState, }: {
+    isReadOnly?: boolean;
+    validationState?: "error" | "warning" | "valid";
+}): React.FC<IconProps> | null;

package/dist/components/ThemeProvider/ThemeProvider.context.d.ts

@@ -0,0 +1,6 @@
+import type { ThemeProviderProps } from "./ThemeProvider.types";
+export declare const ThemeProviderContext: import("react").Context<{
+    theme: ThemeProviderProps["theme"];
+    setTheme?: (theme: Exclude<ThemeProviderProps["theme"], undefined>) => void;
+    shouldHandleVirtualKeyboard: boolean;
+}>;

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

@@ -0,0 +1 @@
+export declare const minTouchTargetSizeVar: `var(--${string})`;

package/dist/components/ThemeProvider/ThemeProvider.d.ts

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

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

@@ -0,0 +1,29 @@
+import type { StylingProps } from "../../utils";
+import type { Theme } from "@baseline-ui/tokens";
+import type React from "react";
+export type ThemeProviderTheme = Theme | "light" | "dark" | "system";
+export interface ThemeProviderProps extends StylingProps {
+    /**
+     * The theme to use. If not provided, the theme will be inherited from the
+     * parent ThemeProvider. If there is no parent ThemeProvider, the default
+     * theme will be used.
+     *
+     * @default "system"
+     */
+    theme?: ThemeProviderTheme;
+    /** The children to render. */
+    children: React.ReactNode;
+    /**
+     * A function that will be called when the theme changes from any of the child
+     * components.
+     *
+     * @deprecated This prop is deprecated and will be removed in a future
+     *   version. Please use the `onThemeChange` prop instead.
+     */
+    setTheme?: (theme: ThemeProviderTheme) => void;
+    /**
+     * A function that will be called when the theme changes from any of the child
+     * components.
+     */
+    onThemeChange?: (theme: ThemeProviderTheme) => void;
+}

package/dist/components/ThemeProvider/hooks/useUserPreferences.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A hook that returns the user preferences for color scheme, contrast, reduced
+ * motion, transparency and reduced data. The values are updated when the user
+ * changes their preferences.
+ *
+ * @example
+ *   const { colorScheme, highContrast, reducedMotion, transparency } =
+ *     useUserPreferences();
+ *
+ * @param ownerWindow - The window object to use. Defaults to the global window
+ *   object.
+ * @returns The user preferences.
+ */
+export declare function useUserPreferences(ownerWindow?: (Window & typeof globalThis) | undefined): {
+    colorScheme: "dark" | "light";
+    highContrast: boolean;
+    reducedMotion: boolean;
+    transparency: boolean;
+};

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

@@ -0,0 +1,6 @@
+export declare function disableAnimations(): void;
+export declare function enableAnimations(): void;
+export { ThemeProvider } from "./ThemeProvider";
+export { type ThemeProviderProps } from "./ThemeProvider.types";
+export { useUserPreferences } from "./hooks/useUserPreferences";
+export { MotionGlobalConfig } from "motion/react";

package/dist/components/TimeField/DateTimeSegment.d.ts

@@ -0,0 +1,5 @@
+import type { DateFieldState, DateSegment, TimeFieldState } from "react-stately";
+export declare function DateTimeSegment({ segment, state, }: {
+    segment: DateSegment;
+    state: TimeFieldState | DateFieldState;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+export declare const timeFieldCn: string;
+export declare const segmentCn: ((options?: {
+    isSeparator?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => "isSeparator"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isSeparator: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};

package/dist/components/TimeField/TimeField.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { TimeFieldStateOptions } from "react-stately";
+export declare const TimeField: React.ForwardRefExoticComponent<import("../..").StylingProps & Omit<Omit<TimeFieldStateOptions<import("react-aria-components").TimeValue>, "locale"> & import("react-aria").AriaTimeFieldProps<import("react-aria-components").TimeValue>, "validationState" | "isRequired" | "validate" | "isInvalid"> & Pick<import("../shared/components/SharedInput/SharedInput.types").SharedInputProps, "label" | "variant" | "labelPosition" | "validationState"> & import("../TextInput/TextInput.types").InputMessage & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,6 @@
+import type { StylingProps } from "../../utils";
+import type { SharedInputProps } from "../shared/components/SharedInput/SharedInput.types";
+import type { InputMessage } from "../TextInput/TextInput.types";
+import type { AriaTimeFieldProps, TimeValue } from "react-aria";
+import type { TimeFieldStateOptions } from "react-stately";
+export type TimeFieldProps = StylingProps & Omit<Omit<TimeFieldStateOptions, "locale"> & AriaTimeFieldProps<TimeValue>, "validationState" | "isInvalid" | "isRequired" | "validate"> & Pick<SharedInputProps, "variant" | "labelPosition" | "validationState" | "label"> & InputMessage;

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

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

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

@@ -0,0 +1,34 @@
+export declare const toastCn: ((options?: {
+    variant?: "success" | "warning" | "error" | "info" | undefined;
+} | undefined) => string) & {
+    variants: () => "variant"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        variant: {
+            info: {
+                "__@@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;
+            };
+            success: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const toastRegionCn: string;

package/dist/components/Toast/Toast.d.ts

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

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

@@ -0,0 +1,14 @@
+import type { StylingProps } from "../../utils";
+import type { InlineAlertProps } from "../InlineAlert";
+import type { ToastQueue } from "react-stately";
+export interface ToastProps extends StylingProps {
+}
+export type ToastContent = Omit<InlineAlertProps, "onClose"> & {
+    canClose?: boolean;
+};
+export interface GlobalToastRegionProps extends StylingProps {
+    /** The toast queue to render. */
+    toastQueue: ToastQueue<ToastContent>;
+    /** The container to render the toast into. */
+    portalContainer?: HTMLElement;
+}

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

@@ -0,0 +1,4 @@
+export { ToastQueue } from "react-stately";
+export { GlobalToastRegion } from "./Toast";
+export { type ToastProps } from "./Toast.types";
+export * from "./Toast";

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

@@ -0,0 +1,74 @@
+export declare const toggleButtonCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    isHovered: {
+        true: {
+            backgroundColor: `var(--${string})`;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            boxShadow: `inset 0 0 0 2px var(--${string})`;
+        };
+    };
+    isDisabled: {
+        true: {
+            color: `var(--${string})`;
+            cursor: "not-allowed";
+        }[];
+    };
+    isSelected: {
+        true: {
+            color: `var(--${string})`;
+            backgroundColor: `var(--${string})`;
+        };
+    };
+    size: {
+        sm: {
+            padding: `var(--${string})`;
+            font: `var(--${string})`;
+            letterSpacing: `var(--${string})`;
+            minHeight: number;
+        };
+        md: {
+            padding: `var(--${string}) var(--${string})`;
+            font: `var(--${string})`;
+            letterSpacing: `var(--${string})`;
+            minHeight: number;
+        };
+        lg: {
+            padding: `var(--${string})`;
+            font: `var(--${string})`;
+            letterSpacing: `var(--${string})`;
+            minHeight: number;
+        };
+    };
+    variant: {
+        primary: {
+            borderRadius: `var(--${string})`;
+        };
+        toolbar: {};
+    };
+}>;
+export declare const toggleButtonIconCn: ((options?: {
+    isDisabled?: boolean | undefined;
+    isSelected?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isSelected" | "isDisabled")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isDisabled: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isSelected: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};

package/dist/components/ToggleButton/ToggleButton.d.ts

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

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

@@ -0,0 +1,27 @@
+import type { StylingProps } from "../../utils";
+import type { StylingWithUIState } from "../ActionButton/ActionButton.types";
+import type { IconProps } from "../Icon";
+import type React from "react";
+import type { AriaToggleButtonProps } from "react-aria";
+export interface ToggleButtonProps extends Omit<StylingProps, "style" | "className">, Omit<AriaToggleButtonProps, "children">, StylingWithUIState<{
+    isSelected?: boolean;
+}> {
+    /** The text content of the button. */
+    label: React.ReactNode;
+    /** The icon to display before the label. */
+    iconStart?: React.FC<IconProps>;
+    /**
+     * The size of the button.
+     *
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /** Indicates whether focusing should be prevented on press. */
+    preventFocusOnPress?: boolean;
+    /**
+     * Button variant
+     *
+     * @default toolbar
+     */
+    variant?: "primary" | "toolbar";
+}

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

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