@baseline-ui/core 0.59.0 → 0.60.0

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

@@ -0,0 +1,76 @@
+export declare const imageDropZoneCn: ((options?: {
+    isInline?: boolean | undefined;
+    isHovered?: boolean | undefined;
+    hasLoadedImage?: boolean | undefined;
+    includeCheckeredBackground?: boolean | undefined;
+    showFocusRing?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isHovered" | "isDisabled" | "hasLoadedImage" | "isInline" | "includeCheckeredBackground" | "showFocusRing")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isInline: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                minWidth: number;
+            })[];
+            false: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isHovered: {
+            true: {};
+        };
+        hasLoadedImage: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        includeCheckeredBackground: {
+            true: {};
+        };
+        showFocusRing: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+        isDisabled: {
+            true: ({
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            } | {
+                pointerEvents: "none";
+                cursor: "not-allowed";
+            })[];
+        };
+    }>;
+};
+export declare const previewCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    isInline: {
+        true: {};
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            opacity: number;
+        };
+    };
+    hasLoadedImage: {
+        true: string;
+    };
+}>;
+export declare const opacityNoneCn: string;

package/dist/components/ImageDropZone/ImageDropZone.d.ts

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

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

@@ -0,0 +1,50 @@
+import type { SharedFileUploadProps } from "../FileUpload/FileUpload.types";
+import type { FreehandCanvasProps } from "../FreehandCanvas";
+import type { AriaLabelingProps } from "@react-types/shared";
+import type React from "react";
+import type { ClipboardProps, DropOptions } from "react-aria";
+export interface ImageDropZoneProps extends Omit<SharedFileUploadProps, "label" | "variant">, Omit<DropOptions, "ref" | "getDropOperation" | "hasDropButton" | "getDropOperationForPoint">, Omit<ClipboardProps, "getItems" | "onCut" | "onCopy">, Pick<FreehandCanvasProps, "footerClassName" | "footerStyle" | "placeholder" | "clearLabel">, AriaLabelingProps {
+    /**
+     * The initial image to display. This will be used as the `src` attribute of
+     * the `<img>` element. You will be able to choose a new image.
+     */
+    defaultImageSrc?: string | File;
+    /**
+     * The image to display. This will be used as the `src` attribute of the
+     * `<img>` element and will not be able to be changed from within the
+     * component. Basically, this makes the component controlled.
+     */
+    imageSrc?: string | File;
+    /**
+     * The alt text to display for the image. This will be used as the `alt`
+     * attribute of the `<img>`. element. If no `imageAlt` is provided, the
+     * `label` will be used.
+     */
+    imageAlt?: string;
+    /** The label to display for the picker button. */
+    pickerButtonLabel?: string;
+    /**
+     * Whether to show the checkered background behind the image. This is useful
+     * when the image has transparency.
+     *
+     * @default true
+     */
+    includeCheckeredBackground?: boolean;
+    /** Whether the component is inlined. */
+    isInline?: boolean;
+    /** The class name to apply to the picker button. */
+    pickerButtonClassName?: string;
+    /** The style to apply to the picker button. */
+    pickerButtonStyle?: React.CSSProperties;
+    /** The class name to apply to the label. */
+    labelClassName?: string;
+    /** The style to apply to the label. */
+    labelStyle?: React.CSSProperties;
+    /**
+     * Maximum allowed file size in bytes. Files exceeding this limit will be
+     * rejected.
+     */
+    maxFileSize?: number;
+    /** Callback fired when a dropped/pasted/selected file exceeds `maxFileSize`. */
+    onFileSizeError?: (file: File) => void;
+}

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

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

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

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

package/dist/components/ImageGallery/AdaptiveText.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface LabelProps {
+    className?: string;
+    children?: string;
+    style?: React.CSSProperties;
+    isDisabled?: boolean;
+    onTruncatedChange?: (isTruncated: boolean) => void;
+    onHoverChange?: (isHovered: boolean) => void;
+}
+export declare const AdaptiveText: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<LabelProps, "onHoverChange" | "onTruncatedChange"> & {
+    isOpen?: boolean;
+} & React.RefAttributes<HTMLSpanElement>>>;
+export {};

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

@@ -0,0 +1,86 @@
+export declare const imageGalleryCn: string;
+export declare const galleryOptionCn: string;
+export declare const imageGalleryOptionCn: ((options?: {
+    isFocusVisible?: boolean | undefined;
+    isSelected?: boolean | undefined;
+    isLoading?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isSelected" | "isFocusVisible" | "isLoading")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isFocusVisible: {
+            true: string;
+        };
+        isSelected: {
+            true: string;
+        };
+        isLoading: {
+            true: {
+                "__@@Component_Sprinkles__": boolean;
+                baseSprinkles: string;
+                variantSprinkles: string;
+                compoundVariantSprinkles: string;
+            };
+        };
+    }>;
+};
+export declare const labelCn: ((options?: {
+    isFocusVisible?: boolean | undefined;
+    isSelected?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => ("isSelected" | "isFocusVisible")[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isFocusVisible: {
+            true: (string | {
+                outlineOffset: number;
+            })[];
+        };
+        isSelected: {
+            true: {
+                backgroundColor: `var(--${string})`;
+                color: `var(--${string})`;
+            };
+        };
+    }>;
+};
+export declare const imageContainerCn: string;
+export declare const imageCn: ((options?: {
+    isLoading?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => "isLoading"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isLoading: {
+            false: {
+                opacity: number;
+            };
+        };
+    }>;
+};
+export declare const labelCountCn: string;
+export declare const deleteBtnContainerCn: string;
+export declare const dropIndicatorCn: ((options?: {
+    isVirtualized?: boolean | undefined;
+} | undefined) => string) & {
+    variants: () => "isVirtualized"[];
+    classNames: import("@baseline-ui/css").RecipeClassNames<{
+        isVirtualized: {
+            true: {
+                width: number;
+                backgroundColor: "transparent";
+                selectors: {
+                    "&[data-drop-target=true]": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
+            };
+            false: {
+                width: number;
+                transform: "translateX(2px)";
+                selectors: {
+                    "&[data-drop-target=true]": {
+                        outline: `1px solid var(--${string})`;
+                    };
+                };
+            };
+        };
+    }>;
+};

package/dist/components/ImageGallery/ImageGallery.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { ImageGalleryProps } from "./ImageGallery.types";
+export { ImageSize } from "./ImageGalleryDragPreview";
+export declare const ImageGallery: React.ForwardRefExoticComponent<ImageGalleryProps & React.RefAttributes<HTMLDivElement>>;
+export declare const messages: {
+    delete: {
+        id: string;
+        defaultMessage: string;
+    };
+    cancel: {
+        id: string;
+        defaultMessage: string;
+    };
+    loading: {
+        id: string;
+        defaultMessage: string;
+    };
+};

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

@@ -0,0 +1,130 @@
+import type { StylingProps } from "../../utils";
+import type { UIState } from "../ListBox/ListBox.types";
+import type { ListOption } from "../shared/types/List";
+import type { UNSAFE_ListBoxProps as ListBoxProps } from "../UNSAFE_ListBox";
+import type { DroppableCollectionUtilityOptions, Key } from "@react-types/shared";
+import type React from "react";
+import type { Selection } from "react-stately";
+export interface Item {
+    id: string;
+    label: string;
+    src?: string;
+    alt?: string;
+}
+export type ClassNameFunc = (item: Item, state: UIState) => string | undefined;
+export type ClassName = string | ClassNameFunc;
+export type Style = React.CSSProperties | ((item: Item, state: UIState) => React.CSSProperties | undefined);
+type Dimension = {
+    width: number | "sm" | "md";
+    height: number;
+} | {
+    width: number | "sm" | "md";
+    aspectRatio: number;
+};
+export interface ImageGalleryProps extends StylingProps, Omit<ListBoxProps, "items" | "layout" | "grid" | "renderOption" | "showSelectedIcon" | "orientation" | "shouldSelectOnPressUp" | "shouldFocusOnHover" | "shouldUseVirtualFocus" | "acceptedDragTypes" | "sectionClassName" | "sectionStyle" | "onKeyDown" | "renderSectionHeader" | "showSectionHeader" | "withSectionHeaderPadding">, Pick<DroppableCollectionUtilityOptions, "onReorder"> {
+    /**
+     * An array of objects containing the image source, alt text, and label for
+     * each image. This property makes the component a controlled component.
+     *
+     * ```tsx
+     * const items = [
+     *   {
+     *     id: "1",
+     *     src: "https://example.com/image1.jpg",
+     *     alt: "Image 1",
+     *     label: "Image 1",
+     *   },
+     *   {
+     *     id: "2",
+     *     src: "https://example.com/image2.jpg",
+     *     alt: "Image 2",
+     *     label: "Image 2",
+     *   },
+     * ];
+     * ```
+     */
+    items?: Item[];
+    /**
+     * An array of objects containing the image source, alt text, and label for
+     * each image.
+     *
+     * ```tsx
+     * const items = [
+     *   {
+     *     id: "1",
+     *     src: "https://example.com/image1.jpg",
+     *     alt: "Image 1",
+     *     label: "Image 1",
+     *   },
+     *   {
+     *     id: "2",
+     *     src: "https://example.com/image2.jpg",
+     *     alt: "Image 2",
+     *     label: "Image 2",
+     *   },
+     * ];
+     * ```
+     */
+    defaultItems?: Item[];
+    /**
+     * The width of the images.
+     *
+     * @default "sm"
+     */
+    imageWidth?: number | "sm" | "md";
+    /**
+     * The aspect ratio of the images.
+     *
+     * @default 16 / 9
+     */
+    aspectRatio?: number;
+    /**
+     * The fit of the images.
+     *
+     * @default "cover"
+     */
+    fit?: "contain" | "cover";
+    /** A callback that is called when the list of images or selection is updated. */
+    onListChange?: (items: Item[]) => void;
+    /** A callback that is called when an image is deleted. */
+    onDelete?: (keys: Key[]) => void;
+    /** A callback that is called when a key is pressed. */
+    onKeyDown?: (event: KeyboardEvent) => void;
+    /** ClassName for each item container */
+    imageContainerClassName?: ClassName;
+    /** ClassName for each item image */
+    imageClassName?: ClassName;
+    /** ClassName for each item image label */
+    labelClassName?: ClassName;
+    /** A callback that is called to render the image. */
+    renderImage?: (item: ListOption<Pick<Item, "alt" | "src">>, options: {
+        deleteElement?: React.JSX.Element;
+        onDelete?: (id: string) => void;
+    }) => React.JSX.Element;
+    /** The dimensions of the grid. */
+    imageContainerStyle?: React.CSSProperties;
+    /** The dimensions of the image. */
+    imageDimensions?: Dimension | ((item: Item, options: {
+        isSelected: boolean;
+    }) => Dimension);
+    /**
+     * The title of the delete confirmation modal.
+     *
+     * @default "Are you sure you want to delete this item?"
+     */
+    deleteConfirmationTitle?: string | ((selectedKeys: Selection) => string);
+}
+export interface ImageGalleryItemProps extends Pick<ImageGalleryProps, "fit" | "renderImage" | "imageDimensions" | "imageContainerStyle" | "layoutTransition"> {
+    item: Item;
+    options: Parameters<Exclude<ListBoxProps["renderOption"], undefined>>[1];
+    onDelete?: (id: string) => void;
+    className?: ClassName;
+    style?: Style;
+    imageClassName?: ClassName;
+    imageLabelClassName?: ClassName;
+}
+export interface ImageProps extends Pick<ImageGalleryProps, "fit"> {
+    item: ListOption<Pick<Item, "alt" | "src">>;
+    deleteElement: React.ReactNode;
+}
+export {};

package/dist/components/ImageGallery/ImageGalleryDragPreview.d.ts

@@ -0,0 +1,22 @@
+import type { ImageGalleryProps, Item } from "./ImageGallery.types";
+import type { imageItemsToListOption } from "./utils";
+import type { DragItem } from "@react-types/shared";
+import type { CSSProperties } from "react";
+import type { Key } from "react-aria";
+export declare const ImageSize: {
+    readonly sm: 102;
+    readonly md: 170;
+};
+type ImageGalleryListItem = ReturnType<typeof imageItemsToListOption>[number];
+export declare function getImageGalleryDragPreviewItem(list: ImageGalleryListItem[], key: Key): DragItem;
+export declare function getImageGalleryDragPreviewImageProps(item: DragItem): {
+    src: string;
+    alt: string;
+} | null;
+export declare function getImageGalleryDragPreviewImageStyle({ fit, imageDimensions, item, isSelected, }: {
+    fit: NonNullable<ImageGalleryProps["fit"]>;
+    imageDimensions: ImageGalleryProps["imageDimensions"];
+    item?: Item;
+    isSelected: boolean;
+}): CSSProperties;
+export {};

package/dist/components/ImageGallery/ImageGalleryItem.d.ts

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

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

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

package/dist/components/ImageGallery/utils.d.ts

@@ -0,0 +1,10 @@
+import type { ListOption } from "../ListBox";
+import type { Item } from "./ImageGallery.types";
+import type { Key } from "react-aria";
+export declare function getByKey<T extends {
+    id: string;
+}>(list: T[], key: Key): T | undefined;
+export declare function moveBefore(list: ListOption<Pick<Item, "alt" | "src">>[], referenceKey: Key, keysToMove: Set<Key>): ListOption<Pick<Item, "alt" | "src">>[];
+export declare function moveAfter(list: ListOption<Pick<Item, "alt" | "src">>[], referenceKey: Key, keysToMove: Set<Key>): ListOption<Pick<Item, "alt" | "src">>[];
+export declare function imageItemsToListOption(items: Item[]): ListOption<Pick<Item, "alt" | "src">>[];
+export declare function listOptionToImageItems(list: ListOption<Pick<Item, "alt" | "src">>[]): Item[];