@baseline-ui/core 0.58.0 → 0.60.0

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

@@ -0,0 +1,78 @@
+export declare const freehandCanvasContainerCn: string;
+export declare const freehandCanvasHeaderCn: ((options?: {
+    isInline?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => "isInline"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isInline: {
+            false: string;
+        };
+    }>;
+};
+export declare const freehandCanvasCn: ((options?: {
+    isFocusVisible?: boolean | undefined;
+    isInline?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isDisabled" | "isFocusVisible" | "isInline")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isFocusVisible: {
+            true: {};
+        };
+        isInline: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+            false: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isDisabled: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                readonly pointerEvents: "none";
+                readonly cursor: "not-allowed";
+            })[];
+            false: {
+                cursor: "crosshair";
+            };
+        };
+    }>;
+};
+export declare const freehandCanvasFooterCn: ((options?: {
+    isInline?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isDisabled" | "isInline")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isInline: {
+            false: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isDisabled: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                readonly pointerEvents: "none";
+                readonly cursor: "not-allowed";
+            })[];
+        };
+    }>;
+};

package/dist/components/FreehandCanvas/FreehandCanvas.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { FreehandCanvasProps } from "./FreehandCanvas.types";
+export declare const BORDER_SIZE = 1;
+export declare const FreehandCanvas: React.ForwardRefExoticComponent<FreehandCanvasProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,116 @@
+import type { StylingProps } from "../../utils";
+import type { AriaLabelingProps } from "@react-types/shared";
+import type React from "react";
+export interface FreehandCanvasProps extends StylingProps, AriaLabelingProps {
+    /** The className applicable to the SVG canvas. */
+    canvasClassName?: string;
+    /** The style applicable to the SVG canvas. */
+    canvasStyle?: React.CSSProperties;
+    /** The ref for the canvas. */
+    canvasRef?: React.RefObject<HTMLDivElement>;
+    /** The className applicable to the footer. */
+    footerClassName?: string;
+    /** The style applicable to the footer. */
+    footerStyle?: React.CSSProperties;
+    /**
+     * How much to soften the stroke's edges.
+     *
+     * @default 0
+     */
+    smoothing?: number;
+    /**
+     * How much to streamline the stroke.
+     *
+     * @default 0
+     */
+    streamline?: number;
+    /** An easing function to apply to each point's pressure. */
+    easing?: (pressure: number) => number;
+    /**
+     * Whether to simulate pressure based on velocity.
+     *
+     * @default false
+     */
+    simulatePressure?: boolean;
+    /** Cap, taper and easing for the start of the line. */
+    start?: {
+        cap?: boolean;
+        taper?: number | boolean;
+        easing?: (distance: number) => number;
+    };
+    /** Cap, taper and easing for the end of the line. */
+    end?: {
+        cap?: boolean;
+        taper?: number | boolean;
+        easing?: (distance: number) => number;
+    };
+    /**
+     * The width of the stroke.
+     *
+     * @default 2
+     */
+    strokeWidth?: number;
+    /**
+     * The color of the stroke.
+     *
+     * @default #3A87FD
+     */
+    strokeColor?: string;
+    /**
+     * Whether to keep the points within the canvas.
+     *
+     * @default true
+     */
+    isBound?: boolean;
+    /**
+     * Callback for when the lines change. This is called on every point change.
+     *
+     * @param lines
+     */
+    onChange?: (lines: FreehandCanvasLine[]) => void;
+    /**
+     * Callback for when the lines change has ended. This is called once after the
+     * pointerup event. It is recommended to use this callback for performance
+     * reasons.
+     *
+     * @param lines
+     */
+    onChangeEnd?: (lines: FreehandCanvasLine[]) => void;
+    /** The default lines to render. */
+    defaultValue?: FreehandCanvasLine[];
+    /**
+     * The value of the canvas. This can be used to make the canvas a controlled
+     * component.
+     */
+    value?: FreehandCanvasLine[];
+    /** The label for the canvas. */
+    label?: string;
+    /**
+     * Whether to enable history for undo/redo.
+     *
+     * @default false
+     */
+    enableHistory?: boolean;
+    /**
+     * Whether the canvas is inline.
+     *
+     * @default true
+     */
+    isInline?: boolean;
+    /** Whether the canvas is disabled. */
+    isDisabled?: boolean;
+    /** The placeholder for the canvas. */
+    placeholder?: string;
+    /** The label for the clear button. */
+    clearLabel?: string;
+    /** The label for the undo button. */
+    undoLabel?: string;
+    /** The label for the redo button. */
+    redoLabel?: string;
+    /** Description for the canvas. */
+    description?: string;
+}
+/** A line in the freehand canvas. */
+export type FreehandCanvasLine = FreehandCanvasPoint[];
+/** A point in the freehand canvas. The pressure is optional. */
+export type FreehandCanvasPoint = [x: number, y: number, pressure?: number];

package/dist/components/FreehandCanvas/hooks/usePathsData.d.ts

@@ -0,0 +1,27 @@
+import type { FreehandCanvasLine } from "../FreehandCanvas.types";
+import type { StrokeOptions } from "perfect-freehand";
+interface UsePathsDataProps {
+    line: FreehandCanvasLine;
+    options: StrokeOptions;
+}
+/**
+ * React custom hook to generate path data strings for a freehand drawing while
+ * it's being drawn, to improve performance.
+ *
+ * Accepts a line and drawing options and returns an array of path data strings
+ * that can be directly used in an SVG path element `d` attribute.
+ *
+ * The provided line points are assumed to be persistent and never change once
+ * received, and the number of points can grow over time.
+ *
+ * To improve performance, the line is split into chunks of
+ * `POINTS_PER_STROKE_CHUNK` points, and the path data for each chunk is cached
+ * once it reaches that number of points.
+ *
+ * @param line The line to generate path data for
+ * @param options The stroke options to use
+ * @returns An array of path data strings
+ */
+export declare function usePathsData({ line, options }: UsePathsDataProps): any[];
+export declare const POINTS_PER_STROKE_CHUNK: number;
+export {};

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

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

package/dist/components/FreehandCanvas/intl/index.d.ts

@@ -0,0 +1,135 @@
+declare const _default: {
+    ar: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    cs: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    cy: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    da: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    de: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    el: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    en_GB: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    en: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    es: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    fi: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    fr_CA: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    fr: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    he: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    hr: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    id: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    it: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    ja: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    ko: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    ms: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    nb_NO: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    nl: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    pl: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    pt_PT: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    pt: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    ru: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    sk: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    sl: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    sv: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    th: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    tr: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    uk: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    zh_Hans: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+    zh_Hant: {
+        "bui.freehandCanvas.redo": string;
+        "bui.freehandCanvas.undo": string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,22 @@
+export declare const gridListCn: string;
+export declare const gridListItemPreviewCn: ((options?: {
+    [x: string]: string | undefined;
+} | undefined) => string) & {
+    variants: () => string[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        [x: string]: {
+            [x: string]: string | ((import("@vanilla-extract/css").StyleRule | {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            }) | ((import("@vanilla-extract/css").StyleRule | {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            }) | (string | (string | (string | (string | (string | (string | (string | (string | (string | (string | (string | (string | /*elided*/ any)[])[])[])[])[])[])[])[])[])[])[]))[]);
+        };
+    }>;
+};
+export declare const dragIndicatorCn: string;

package/dist/components/GridList/GridList.d.ts

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

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

@@ -0,0 +1,84 @@
+import type { StylingProps } from "../../utils";
+import type { CheckboxProps } from "../Checkbox";
+import type { ListHandle, ListOption } from "../ListBox";
+import type { DragAndDropProps } from "../ListBox/hooks/useDragDrop";
+import type { Node } from "@react-types/shared";
+import type React from "react";
+import type { AriaButtonProps, AriaGridListOptions, GridListItemAria } from "react-aria";
+import type { ListProps } from "react-stately";
+export type GridListProps = Omit<StylingProps & ListProps<ListOption> & AriaGridListOptions<ListOption> & Partial<Pick<DragAndDropProps, "enableReorder" | "orientation" | "layout" | "onReorder">> & {
+    /**
+     * The items to render in the grid list. Items have the following shape:
+     *
+     * ```ts
+     * export type ListOption = {
+     *   id: string;
+     *   label: string;
+     *   description?: string;
+     *   icon?: React.FC<IconProps>;
+     *   data?: T;
+     * };
+     * ```
+     */
+    items: ListOption[];
+    /**
+     * Function to render a grid item. This is called for each item in the
+     * list. The function receives the item, props for the grid item, and a
+     * ref to the grid item element. It should return a React element
+     * representing the item.
+     *
+     * The `checkBoxProps` property in the options object is used to pass
+     * props to the checkbox rendered in the grid item. This property is
+     * `undefined` when the grid list is not selectable.
+     *
+     * ```jsx
+     * <GridList
+     *   items={items}
+     *   renderGridItem={(
+     *     item,
+     *     { rowProps, isDisabled, gridCellProps, checkBoxProps },
+     *     ref,
+     *   ) => (
+     *     <div
+     *       {...rowProps}
+     *       ref={ref}
+     *       style={{ opacity: isDisabled ? 0.5 : 1 }}
+     *     >
+     *       <Checkbox {...checkBoxProps} />
+     *       <Text>{item.label}</Text>
+     *       <ActionButton label="Click Me" />
+     *     </div>
+     *   )}
+     * />;
+     * ```
+     *
+     * The `dragHandleProps` property in the options object is used to pass
+     * props to the drag handle rendered in the grid item. This property is
+     * `undefined` when the grid list is not reorderable.
+     *
+     * DragProps: Props to apply to the drag handle element. dragButtonProps:
+     * Props to apply to the custom drag button element in case the drag
+     * handle is a button and not the whole row.
+     *
+     * @param item
+     * @param options
+     * @param ref
+     */
+    renderGridItem: (item: Node<ListOption>, options: GridListItemAria & {
+        checkBoxProps?: CheckboxProps;
+        dragHandleProps?: {
+            dragProps: React.HTMLAttributes<HTMLElement>;
+            dragButtonProps: AriaButtonProps;
+        };
+    }, ref: React.Ref<HTMLLIElement>) => React.JSX.Element;
+    /**
+     * Enables editing mode which disables keydown event capturing, useful
+     * when you may want the internal `GridList` from taking away focus from
+     * child input due to type-ahead
+     *
+     * @default false
+     */
+    isEditing?: boolean;
+    /** Handle to access the gridlist imperative methods. */
+    gridListHandle?: React.RefObject<ListHandle>;
+}, "children" | "suppressTextValueWarning" | "allowDuplicateSelectionEvents" | "linkBehavior" | "keyboardDelegate" | "isVirtualized" | "filter">;

package/dist/components/GridList/GridListItem.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { type AriaButtonProps } from "react-aria";
+import type { ListOption } from "../ListBox";
+import type { GridListProps } from "./GridList.types";
+import type { Node } from "@react-types/shared";
+import type { DraggableCollectionState, DroppableCollectionState, ListState } from "react-stately";
+interface GridListItemProps {
+    item: Node<ListOption>;
+    renderGridItem: GridListProps["renderGridItem"];
+    enableReorder?: boolean;
+    state: ListState<ListOption>;
+    dragState?: DraggableCollectionState;
+    dropState?: DroppableCollectionState;
+    dragHandleProps?: {
+        dragProps: React.HTMLAttributes<HTMLElement>;
+        dragButtonProps: AriaButtonProps;
+    };
+}
+export declare const GridListItem: React.ForwardRefExoticComponent<GridListItemProps & React.RefAttributes<HTMLLIElement>>;
+export {};

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

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

package/dist/components/Group/Group.d.ts

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

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

@@ -0,0 +1,19 @@
+import type { StylingProps } from "../../utils";
+import type { AriaLabelingProps } from "@react-types/shared";
+import type React from "react";
+export interface GroupProps extends StylingProps, AriaLabelingProps {
+    /**
+     * The `role` property specifies the accessibility `role` for the group. By
+     * default, it is set to 'group'. If the contents of the group are important
+     * enough to be included in the page table of contents, use 'region'. If the
+     * group is visual only and does not represent a semantic grouping of
+     * controls, use 'presentation'.
+     *
+     * @default group
+     */
+    role?: "group" | "region" | "presentation";
+    /** Whether the group is disabled. */
+    isDisabled?: boolean;
+    /** The children to render. */
+    children: React.ReactNode;
+}

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

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

package/dist/components/I18nProvider/I18Provider.types.d.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+import type { I18nProviderProps as I18Props, LocalizedStrings } from "react-aria";
+export interface I18nProviderProps extends I18Props {
+    messages?: LocalizedStrings;
+    children: React.ReactNode;
+    locale?: string;
+    /**
+     * @default true
+     */
+    shouldLogMissingMessages?: boolean;
+}

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

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

package/dist/components/I18nProvider/I18nProvider.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { I18nProviderProps } from "./I18Provider.types";
+import type { LocalizedStrings } from "react-aria";
+export declare const IntlMessagesProvider: React.Context<{
+    messages: LocalizedStrings;
+    shouldLogMissingMessages: boolean;
+    hasMissingErrorLoggedFor: React.MutableRefObject<Set<string>>;
+    setLang: (lang: string) => void;
+}>;
+export declare const I18nProvider: React.FC<I18nProviderProps>;

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

@@ -0,0 +1,4 @@
+export { useNumberFormatter, useDateFormatter, useCollator, useLocale, } from "react-aria";
+export { I18nProvider } from "./I18nProvider";
+export type { I18nProviderProps } from "./I18Provider.types";
+export { directionVar } from "./I18nProvider.css";

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { IconComponentProps } from "./Icon.types";
+declare const Icon: React.ForwardRefExoticComponent<IconComponentProps & React.RefAttributes<HTMLSpanElement>>;
+export { Icon };

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

@@ -0,0 +1,36 @@
+import type { CSSProperties, SVGProps } from "react";
+import type React from "react";
+interface SharedProps {
+    /** The `className` property assigned to the SVG element of the component. */
+    className?: string;
+    /**
+     * The `width` and `height` of the icon. This can be a string or a number. If
+     * you want to set the width and height to different values, you can pass
+     * `width` and `height` as separate props.
+     *
+     * @default "1em"
+     */
+    size?: string | number;
+    /** The style applicable to the SVG element of the component. */
+    style?: React.CSSProperties;
+    title?: string;
+    /** The color of the icon. */
+    color?: string;
+}
+export interface IconComponentProps extends SharedProps {
+    /**
+     * The SVG string of the icon to render. This is useful if you want to render
+     * an icon that is not in the catalog of icons provided in the list above. You
+     * can use the `createIcon` function to create an icon from an SVG string.
+     *
+     * @default undefined
+     */
+    svg: string;
+}
+export interface SVGRProps {
+    title?: string;
+    titleId?: string;
+    size?: CSSProperties["width"];
+}
+export type IconProps = SVGRProps & SVGProps<SVGSVGElement>;
+export {};

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

@@ -0,0 +1,2 @@
+export * from "./Icon";
+export * from "./Icon.types";