@instruments/materia-ui 0.1.0

package/dist/compositions/file-upload/use-file-upload.js

@@ -0,0 +1,242 @@
+"use client";
+import { useCallback, useRef, useState } from "react";
+import { prepareFileAdditions } from "../file-upload/file-upload-utils.js";
+const createPreview = (file) => file instanceof File ? URL.createObjectURL(file) : file.url;
+const generateUniqueId = (file) => file instanceof File
+    ? `${file.name}-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+    : file.id;
+/** Free the object URL of an image file's preview, when it owns one. */
+const revokeImagePreview = (file) => {
+    if (file?.preview !== undefined &&
+        file.preview !== null &&
+        file.preview !== "" &&
+        file.file instanceof File &&
+        file.file.type.startsWith("image/")) {
+        URL.revokeObjectURL(file.preview);
+    }
+};
+/** File list mutations: add (with validation), remove, and clears. */
+const useFileMutations = ({ accept, inputRef, maxFiles, maxSize, multiple, onError, onFilesAdded, onFilesChange, setState, state, }) => {
+    const clearFiles = useCallback(() => {
+        setState((prev) => {
+            for (const file of prev.files) {
+                revokeImagePreview(file);
+            }
+            if (inputRef.current) {
+                inputRef.current.value = "";
+            }
+            const newState = {
+                ...prev,
+                errors: [],
+                files: [],
+            };
+            onFilesChange?.(newState.files);
+            return newState;
+        });
+    }, [inputRef, onFilesChange, setState]);
+    const addFiles = useCallback((newFiles) => {
+        if (newFiles.length === 0) {
+            return;
+        }
+        const newFilesArray = [...newFiles];
+        const errors = [];
+        setState((prev) => ({ ...prev, errors: [] }));
+        if (!multiple) {
+            clearFiles();
+        }
+        const preparedAdditions = prepareFileAdditions({
+            accept,
+            createPreview,
+            existingFiles: state.files,
+            generateUniqueId,
+            maxFiles,
+            maxSize,
+            multiple,
+            newFiles: newFilesArray,
+        });
+        errors.push(...preparedAdditions.errors);
+        if (preparedAdditions.validFiles.length > 0) {
+            onFilesAdded?.(preparedAdditions.validFiles);
+            setState((prev) => {
+                const updatedFiles = multiple
+                    ? [...prev.files, ...preparedAdditions.validFiles]
+                    : preparedAdditions.validFiles;
+                onFilesChange?.(updatedFiles);
+                return {
+                    ...prev,
+                    errors,
+                    files: updatedFiles,
+                };
+            });
+        }
+        else if (errors.length > 0) {
+            onError?.(errors);
+            setState((prev) => ({
+                ...prev,
+                errors,
+            }));
+        }
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
+    }, [
+        state.files,
+        accept,
+        maxFiles,
+        multiple,
+        maxSize,
+        clearFiles,
+        onFilesChange,
+        onFilesAdded,
+        onError,
+        inputRef,
+        setState,
+    ]);
+    const removeFile = useCallback((id) => {
+        setState((prev) => {
+            const fileToRemove = prev.files.find((file) => file.id === id);
+            revokeImagePreview(fileToRemove);
+            const newFiles = prev.files.filter((file) => file.id !== id);
+            onFilesChange?.(newFiles);
+            return {
+                ...prev,
+                errors: [],
+                files: newFiles,
+            };
+        });
+    }, [onFilesChange, setState]);
+    const clearErrors = useCallback(() => {
+        setState((prev) => ({
+            ...prev,
+            errors: [],
+        }));
+    }, [setState]);
+    return { addFiles, clearErrors, clearFiles, removeFile };
+};
+/** Drag/drop, file-input change, and input-prop helpers. */
+const useFileDragHandlers = ({ accept, addFiles, inputRef, multiple, setState, }) => {
+    const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setState((prev) => ({ ...prev, isDragging: true }));
+    }, [setState]);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.relatedTarget instanceof Node &&
+            e.currentTarget.contains(e.relatedTarget)) {
+            return;
+        }
+        setState((prev) => ({ ...prev, isDragging: false }));
+    }, [setState]);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setState((prev) => ({ ...prev, isDragging: false }));
+        if (inputRef.current?.disabled === true) {
+            return;
+        }
+        if (e.dataTransfer.files.length > 0) {
+            if (multiple) {
+                addFiles(e.dataTransfer.files);
+            }
+            else {
+                const [file] = e.dataTransfer.files;
+                if (file) {
+                    addFiles([file]);
+                }
+            }
+        }
+    }, [addFiles, multiple, inputRef, setState]);
+    const handleFileChange = useCallback((e) => {
+        if (e.target.files && e.target.files.length > 0) {
+            addFiles(e.target.files);
+        }
+    }, [addFiles]);
+    const openFileDialog = useCallback(() => {
+        if (inputRef.current) {
+            inputRef.current.click();
+        }
+    }, [inputRef]);
+    const getInputProps = useCallback((props = {}) => ({
+        ...props,
+        accept: props.accept !== undefined && props.accept !== ""
+            ? props.accept
+            : accept,
+        multiple: props.multiple ?? multiple,
+        onChange: handleFileChange,
+        ref: inputRef,
+        type: "file",
+    }), [accept, multiple, handleFileChange, inputRef]);
+    return {
+        getInputProps,
+        handleDragEnter,
+        handleDragLeave,
+        handleDragOver,
+        handleDrop,
+        handleFileChange,
+        openFileDialog,
+    };
+};
+/**
+ * Manages file-selection state for the FileUpload components: the selected
+ * files (with previews), drag state, and validation errors.
+ *
+ * Returns a `[state, actions]` tuple. Wire `actions` to a
+ * {@link FileUploadDropzone}/{@link FileUploadTrigger} and spread
+ * `actions.getInputProps()` onto a hidden `<input>`. Object-URL previews for
+ * image files are created on add and revoked on remove/clear automatically.
+ */
+export const useFileUpload = (options = {}) => {
+    const { maxFiles = Number.POSITIVE_INFINITY, maxSize = Number.POSITIVE_INFINITY, accept = "*", multiple = false, initialFiles = [], onFilesChange, onFilesAdded, onError, } = options;
+    const [state, setState] = useState({
+        errors: [],
+        files: initialFiles.map((file) => ({
+            file,
+            id: file.id,
+            preview: file.url,
+        })),
+        isDragging: false,
+    });
+    const inputRef = useRef(null);
+    const { addFiles, clearErrors, clearFiles, removeFile } = useFileMutations({
+        accept,
+        inputRef,
+        maxFiles,
+        maxSize,
+        multiple,
+        onError,
+        onFilesAdded,
+        onFilesChange,
+        setState,
+        state,
+    });
+    const { getInputProps, handleDragEnter, handleDragLeave, handleDragOver, handleDrop, handleFileChange, openFileDialog, } = useFileDragHandlers({
+        accept,
+        addFiles,
+        inputRef,
+        multiple,
+        setState,
+    });
+    return [
+        state,
+        {
+            addFiles,
+            clearErrors,
+            clearFiles,
+            getInputProps,
+            handleDragEnter,
+            handleDragLeave,
+            handleDragOver,
+            handleDrop,
+            handleFileChange,
+            openFileDialog,
+            removeFile,
+        },
+    ];
+};
+export { formatBytes } from "../file-upload/file-upload-utils.js";

package/dist/compositions/file-upload.d.ts

@@ -0,0 +1,5 @@
+export { FileUploadDropzone } from "./file-upload/file-upload-dropzone.js";
+export { FileUploadItem } from "./file-upload/file-upload-item.js";
+export { FileUploadList } from "./file-upload/file-upload-list.js";
+export { FileUploadTrigger } from "./file-upload/file-upload-trigger.js";
+export { type FileMetadata, type FileUploadActions, type FileUploadOptions, type FileUploadState, type FileWithPreview, formatBytes, useFileUpload, } from "./file-upload/use-file-upload.js";

package/dist/compositions/file-upload.js

@@ -0,0 +1,5 @@
+export { FileUploadDropzone } from "./file-upload/file-upload-dropzone.js";
+export { FileUploadItem } from "./file-upload/file-upload-item.js";
+export { FileUploadList } from "./file-upload/file-upload-list.js";
+export { FileUploadTrigger } from "./file-upload/file-upload-trigger.js";
+export { formatBytes, useFileUpload, } from "./file-upload/use-file-upload.js";

package/dist/compositions/folder-tile/folder-tile-artwork.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { FolderTileImageProps, FolderTileMaterial, FolderTileState, FolderTileTransition } from "./folder-tile-types.js";
+interface FolderArtworkProps {
+    frontFlapLeft: number;
+    frontSvgInset: CSSProperties;
+    frontTransition?: FolderTileTransition | undefined;
+    isEmptyIconAnimated: boolean;
+    isFilled: boolean;
+    isFrontFolded: boolean;
+    isOpen: boolean;
+    isSelectedVisible: boolean;
+    previewMaterials: FolderTileMaterial[];
+    renderImage?: ((props: FolderTileImageProps) => ReactNode) | undefined;
+    frontFlapOpen: boolean;
+    transition?: FolderTileTransition | undefined;
+    visualState: FolderTileState;
+}
+/** The animated folder graphic: back plate, material previews, front flap. */
+export declare const FolderArtwork: ({ frontFlapLeft, frontSvgInset, frontTransition, isEmptyIconAnimated, isFilled, isFrontFolded, isOpen, isSelectedVisible, previewMaterials, renderImage, frontFlapOpen, transition, visualState, }: FolderArtworkProps) => import("react").JSX.Element;
+interface FolderLabelProps {
+    count: number | undefined;
+    isSelectedVisible: boolean;
+    label: string;
+    name: string;
+}
+/** The folder name + item count caption below the artwork. */
+export declare const FolderLabel: ({ count, isSelectedVisible, label, name, }: FolderLabelProps) => import("react").JSX.Element;
+export {};

package/dist/compositions/folder-tile/folder-tile-artwork.js

@@ -0,0 +1,132 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import * as m from "motion/react-m";
+import { useMemo } from "react";
+import { Flex } from "../../components/flex.js";
+import { MaterialPreview } from "./folder-tile-materials.js";
+import { FolderBackSvg, FolderFrontSvg, FolderPlusSvg, } from "./folder-tile-svgs.js";
+const FOLDER_BACK_SVG_STYLE = {
+    bottom: "-5%",
+    height: "auto",
+    left: "-3%",
+    maxWidth: "none",
+    position: "absolute",
+    right: "-3%",
+    top: "-2.5%",
+    width: "auto",
+};
+const FolderBackPlate = ({ isFilled, isOpen, transition, }) => (_jsx(m.div, { animate: { x: isOpen && isFilled ? -0.45 : 0 }, className: "absolute top-1 left-[7.14px] h-20 w-25", "data-slot": "folder-back", style: {
+        height: 80,
+        left: 7.14,
+        position: "absolute",
+        top: 4,
+        width: 100,
+    }, ...(transition === undefined ? {} : { transition }), children: _jsx(FolderBackSvg, { className: "absolute inset-[-2.5%_-3%_-5%_-3%] size-[unset]", style: FOLDER_BACK_SVG_STYLE }) }));
+const FolderPreviewPlane = ({ isOpen, previewMaterials, renderImage, transition, }) => (_jsx(m.div, { animate: {
+        // oxlint-disable-next-line react-doctor/no-layout-property-animation -- the flap, preview and material row change real size; a transform would stretch the artwork
+        height: isOpen ? 71 : 66,
+        // oxlint-disable-next-line react-doctor/no-layout-property-animation -- the flap, preview and material row change real size; a transform would stretch the artwork
+        left: isOpen ? 1.31 : 6.55,
+        // oxlint-disable-next-line react-doctor/no-layout-property-animation -- the flap, preview and material row change real size; a transform would stretch the artwork
+        top: isOpen ? -6 : 5,
+        // oxlint-disable-next-line react-doctor/no-layout-property-animation -- the flap, preview and material row change real size; a transform would stretch the artwork
+        width: isOpen ? 110 : 100,
+    }, className: cn("drop-shadow-folder absolute isolate z-10 flex justify-center", isOpen ? "items-start" : "items-center"), "data-slot": "folder-preview-plane", style: {
+        alignItems: isOpen ? "flex-start" : "center",
+        display: "flex",
+        filter: "drop-shadow(0 3.881px 2.91px rgba(0,0,0,0.35))",
+        isolation: "isolate",
+        justifyContent: "center",
+        position: "absolute",
+        zIndex: 10,
+    }, ...(transition === undefined ? {} : { transition }), children: _jsx(MaterialPreview, { isOpen: isOpen, materials: previewMaterials, renderImage: renderImage, ...(transition === undefined ? {} : { transition }) }) }));
+const FolderFrontFlap = ({ frontFlapLeft, frontSvgInset, frontTransition, isFrontFolded, frontFlapOpen, }) => (_jsx(m.div, { animate: {
+        // oxlint-disable-next-line react-doctor/no-layout-property-animation -- the flap, preview and material row change real size; a transform would stretch the artwork
+        height: frontFlapOpen ? 66 : 68,
+        // oxlint-disable-next-line react-doctor/no-layout-property-animation -- the flap, preview and material row change real size; a transform would stretch the artwork
+        left: frontFlapLeft,
+        scaleY: isFrontFolded ? 0.975 : 1,
+        // oxlint-disable-next-line react-doctor/no-layout-property-animation -- the flap, preview and material row change real size; a transform would stretch the artwork
+        top: frontFlapOpen ? 18 : 16,
+        // oxlint-disable-next-line react-doctor/no-layout-property-animation -- the flap, preview and material row change real size; a transform would stretch the artwork
+        width: frontFlapOpen ? 108 : 100,
+    }, className: "absolute z-20 overflow-visible", "data-folded": isFrontFolded, "data-slot": "folder-front", style: {
+        overflow: "visible",
+        position: "absolute",
+        transformOrigin: "50% 100%",
+        zIndex: 20,
+    }, ...(frontTransition === undefined ? {} : { transition: frontTransition }), children: _jsx(FolderFrontSvg, { className: cn("absolute block size-[unset] max-w-none overflow-visible", frontFlapOpen
+            ? "inset-[-6.06%_-3.19%_-6.06%_-3.24%]"
+            : "inset-[-5.88%_-4%]"), style: {
+            display: "block",
+            height: "auto",
+            maxWidth: "none",
+            overflow: "visible",
+            position: "absolute",
+            width: "auto",
+            ...frontSvgInset,
+        }, variant: frontFlapOpen ? "open" : "closed" }) }));
+const FolderEmptyIcon = ({ isEmptyIconAnimated, transition, }) => (_jsx(m.div, { animate: {
+        rotate: isEmptyIconAnimated ? 90 : 0,
+        scale: isEmptyIconAnimated ? 1.08 : 1,
+    }, className: "absolute top-[calc(50%+6.2px)] left-[calc(50%+0.57px)] z-30 size-[20.851px] -translate-x-1/2 -translate-y-1/2", style: {
+        height: 20.851,
+        left: "calc(50% + 0.57px)",
+        position: "absolute",
+        top: "calc(50% + 6.2px)",
+        translate: "-50% -50%",
+        width: 20.851,
+        zIndex: 30,
+    }, ...(transition === undefined ? {} : { transition }), children: _jsx(FolderPlusSvg, { className: "absolute top-[3.766px] left-[3.766px] size-[13.3186px] overflow-visible", style: {
+            height: 13.3186,
+            left: 3.766,
+            overflow: "visible",
+            position: "absolute",
+            top: 3.766,
+            width: 13.3186,
+        } }) }));
+const FolderSelectionRing = ({ isSelectedVisible, }) => {
+    const selectionRingStyle = useMemo(() => ({
+        borderRadius: 12,
+        bottom: 2,
+        boxShadow: "0 0 0 2px #111827, 0 0 0 4px #fff",
+        left: 2,
+        opacity: isSelectedVisible ? 1 : 0,
+        pointerEvents: "none",
+        position: "absolute",
+        right: 2,
+        top: 2,
+        transition: "opacity 150ms",
+    }), [isSelectedVisible]);
+    return (_jsx("div", { "aria-hidden": "true", className: cn("duration-quick absolute inset-0.5 rounded-xl opacity-0 ring-2 ring-gray-900 ring-offset-2 transition-opacity", isSelectedVisible && "opacity-100"), style: selectionRingStyle }));
+};
+/** The animated folder graphic: back plate, material previews, front flap. */
+// oxlint-disable-next-line react-doctor/no-many-boolean-props -- these are orthogonal animation flags from FolderTile's state machine (open/filled/folded/selected/etc.); they don't reduce to named variants (2^6 independent combos) and grouping them into one object would change the component's public props
+export const FolderArtwork = ({ frontFlapLeft, frontSvgInset, frontTransition, isEmptyIconAnimated, isFilled, isFrontFolded, isOpen, isSelectedVisible, previewMaterials, renderImage, frontFlapOpen, transition, visualState, }) => (_jsxs("div", { className: "relative h-22.5 w-28.5", "data-slot": "folder-art", style: {
+        height: 90,
+        position: "relative",
+        width: 114,
+    }, children: [_jsx(FolderBackPlate, { isFilled: isFilled, isOpen: isOpen, transition: transition }), isFilled && (_jsx(FolderPreviewPlane, { isOpen: isOpen, previewMaterials: previewMaterials, renderImage: renderImage, transition: transition })), _jsx(FolderFrontFlap, { frontFlapLeft: frontFlapLeft, frontSvgInset: frontSvgInset, frontTransition: frontTransition, frontFlapOpen: frontFlapOpen, isFrontFolded: isFrontFolded }), visualState === "empty" && (_jsx(FolderEmptyIcon, { isEmptyIconAnimated: isEmptyIconAnimated, transition: transition })), _jsx(FolderSelectionRing, { isSelectedVisible: isSelectedVisible })] }));
+/** The folder name + item count caption below the artwork. */
+export const FolderLabel = ({ count, isSelectedVisible, label, name, }) => {
+    const labelStyle = useMemo(() => ({
+        alignItems: "center",
+        color: isSelectedVisible ? "#111827" : "#6b7280",
+        display: "flex",
+        fontSize: 12,
+        fontWeight: 500,
+        gap: 2,
+        justifyContent: "center",
+        letterSpacing: -0.24,
+        lineHeight: "16px",
+        overflow: "hidden",
+        textAlign: "center",
+        whiteSpace: "nowrap",
+        width: "100%",
+    }), [isSelectedVisible]);
+    return (_jsxs(Flex, { align: "center", as: "span", className: cn("tracking-folder-label text-caption w-full overflow-hidden text-center font-medium whitespace-nowrap text-gray-500", isSelectedVisible && "text-gray-900"), gap: "3xs", justify: "center", style: labelStyle, title: label, children: [_jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis", style: {
+                    minWidth: 0,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                }, children: name }), count !== undefined && (_jsxs(_Fragment, { children: [_jsx("span", { className: "shrink-0", style: { flexShrink: 0 }, children: "\u2219" }), _jsx("span", { className: "shrink-0", style: { flexShrink: 0 }, children: count })] }))] }));
+};

package/dist/compositions/folder-tile/folder-tile-materials.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import type { FolderTileImageProps, FolderTileMaterial, FolderTileTransition } from "./folder-tile-types.js";
+export declare const MaterialPreview: ({ isOpen, materials, renderImage, transition, }: {
+    isOpen: boolean;
+    materials: FolderTileMaterial[];
+    renderImage?: ((props: FolderTileImageProps) => ReactNode) | undefined;
+    transition?: FolderTileTransition | undefined;
+}) => import("react").JSX.Element;

package/dist/compositions/folder-tile/folder-tile-materials.js

@@ -0,0 +1,53 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as m from "motion/react-m";
+import { Center } from "../../components/center.js";
+const MATERIAL_CARD_SHADOW = "0 4px 6px -1px rgba(17, 24, 39, 0.1), 0 2px 4px -2px rgba(17, 24, 39, 0.1)";
+const MaterialCard = ({ material, renderImage, }) => {
+    const imageProps = {
+        alt: material.alt ?? "",
+        className: "absolute inset-0 size-full rounded-xl object-cover",
+        draggable: false,
+        fill: true,
+        sizes: "58px",
+        src: material.src,
+    };
+    return (_jsx("div", { className: "border-folder-edge relative size-14.5 overflow-hidden rounded-xl border-white bg-gray-100", "data-slot": "folder-material-card", style: { boxShadow: MATERIAL_CARD_SHADOW }, children: renderImage ? (renderImage(imageProps)) : (_jsx("img", { alt: imageProps.alt, className: imageProps.className, draggable: imageProps.draggable, src: imageProps.src })) }));
+};
+const PartialMaterialStack = ({ isOpen, materials, renderImage, transition, }) => {
+    const [first, second] = materials;
+    if (!first) {
+        return null;
+    }
+    if (!second) {
+        return (_jsx(m.div, { animate: { scale: isOpen ? 1.02 : 1, y: isOpen ? -7 : 0 }, className: "absolute top-[5px] left-[21px]", "data-slot": "folder-material-preview", ...(transition === undefined ? {} : { transition }), children: _jsx(MaterialCard, { material: first, renderImage: renderImage }) }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(m.div, { animate: {
+                    rotate: isOpen ? -11 : -8,
+                    x: isOpen ? -7 : -2,
+                    y: isOpen ? -8 : 0,
+                }, className: "absolute top-[5px] left-[17px] z-[2]", "data-slot": "folder-material-preview", ...(transition === undefined ? {} : { transition }), children: _jsx(MaterialCard, { material: first, renderImage: renderImage }) }), _jsx(m.div, { animate: {
+                    rotate: isOpen ? 11 : 8,
+                    x: isOpen ? 7 : 2,
+                    y: isOpen ? -8 : 0,
+                }, className: "absolute top-[5px] left-[27px] z-[1]", "data-slot": "folder-material-preview", ...(transition === undefined ? {} : { transition }), children: _jsx(MaterialCard, { material: second, renderImage: renderImage }) })] }));
+};
+const FullMaterialStack = ({ isOpen, materials, renderImage, transition, }) => {
+    const [left, center, right] = materials;
+    const overlapMargin = isOpen ? -43 : -52;
+    return (_jsxs(_Fragment, { children: [_jsx(m.div
+            // oxlint-disable-next-line react-doctor/no-layout-property-animation -- the material row changes real size; a transform would stretch the artwork
+            , { 
+                // oxlint-disable-next-line react-doctor/no-layout-property-animation -- the material row changes real size; a transform would stretch the artwork
+                animate: { marginRight: overlapMargin }, className: "relative z-[3] flex size-[67.19px] shrink-0 items-center justify-center", "data-slot": "folder-material-preview", ...(transition === undefined ? {} : { transition }), children: _jsx(m.div, { animate: { rotate: -10 }, ...(transition === undefined ? {} : { transition }), children: _jsx(MaterialCard, { material: left, renderImage: renderImage }) }) }), _jsx(m.div
+            // oxlint-disable-next-line react-doctor/no-layout-property-animation -- the material row changes real size; a transform would stretch the artwork
+            , { 
+                // oxlint-disable-next-line react-doctor/no-layout-property-animation -- the material row changes real size; a transform would stretch the artwork
+                animate: { marginRight: overlapMargin }, className: "relative z-[2] shrink-0", "data-slot": "folder-material-preview", ...(transition === undefined ? {} : { transition }), children: _jsx(MaterialCard, { material: center, renderImage: renderImage }) }), _jsx(Center, { className: "relative z-[1] size-[67.19px] shrink-0", "data-slot": "folder-material-preview", children: _jsx(m.div, { animate: { rotate: 10 }, ...(transition === undefined ? {} : { transition }), children: _jsx(MaterialCard, { material: right, renderImage: renderImage }) }) })] }));
+};
+export const MaterialPreview = ({ isOpen, materials, renderImage, transition, }) => {
+    const [left, center, right] = materials;
+    if (left && center && right) {
+        return (_jsx(FullMaterialStack, { isOpen: isOpen, materials: [left, center, right], renderImage: renderImage, transition: transition }));
+    }
+    return (_jsx(PartialMaterialStack, { isOpen: isOpen, materials: materials, renderImage: renderImage, transition: transition }));
+};

package/dist/compositions/folder-tile/folder-tile-root.d.ts

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import type { FolderTileProps } from "./folder-tile-types.js";
+export type { FolderTileImageProps, FolderTileMaterial, FolderTileProps, FolderTileState, } from "./folder-tile-types.js";
+/** Pencil glyph sized for the FolderTile action slot (e.g. an edit/menu trigger). */
+export declare const FolderTileEditIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+/**
+ * Animated folder button showing a fanned preview of up to three materials, an
+ * opening flap, selected styling, and an optional hover action slot.
+ *
+ * Visual state is derived from `materials` unless `state` is set; the folder
+ * leans open on hover (`openOnHover`) or when forced open as a drop target
+ * (`open`). All motion collapses to instant under reduced-motion preferences.
+ *
+ * @bestPractice Only the first three `materials` render in the fan; pass `itemCount` when the real total differs, otherwise the count shows `materials.length`.
+ * @bestPractice Supply `renderImage` in Next.js so previews go through `next/image` - the default renders plain `<img>` from each material's `src`/`alt`.
+ * @bestPractice Drive drag-and-drop drop-target styling with `open` (forces the open look without revealing the action); use `selected`+`showSelectedState` for selection, not manual classes.
+ * @bestPractice `FolderTile` is itself the button - pass `name`/`onClick` and button props directly; don't wrap it in another `<button>`/`<a>`.
+ * @category catalogue
+ */
+export declare const FolderTile: ({ action, actionVisible, animateEmptyIcon, className, itemCount, materials, name, onMouseEnter, onMouseLeave, open, openOnHover, renderImage, selected, showSelectedState, state, style, testId, type, ...buttonProps }: FolderTileProps) => import("react").JSX.Element;