@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/drawer.js

@@ -0,0 +1,236 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import { XIcon } from "@phosphor-icons/react";
+import { useId, useMemo } from "react";
+import { css, cva, cx } from "#primitives/css";
+import { IconButton } from "./button.js";
+import { FieldControlContext } from "./field-context.js";
+import { HotkeyLayer } from "./hotkeys.js";
+import { icon } from "./icon.js";
+import { Eyebrow, heading } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+const backdrop = css({
+    position: "fixed",
+    inset: "none",
+    zIndex: "drawer",
+    background: "bg.backdrop",
+    transitionProperty: "opacity",
+    transitionDuration: "fast",
+    "&[data-starting-style], &[data-ending-style]": { opacity: "0" },
+    _motionReduce: { transitionDuration: "0ms" },
+});
+const viewport = css({ position: "fixed", inset: "none", zIndex: "drawer", pointerEvents: "none" });
+const popup = cva({
+    base: {
+        position: "absolute",
+        // Inset from the window by the shell's gap and rounded like the main panel, so a sheet reads
+        // as the docked agent sheet does; a phone takes it to the edges, where rounding is a gap.
+        insetBlock: "panel.compact",
+        insetInlineEnd: "panel.compact",
+        display: "flex",
+        overflow: "hidden",
+        pointerEvents: "auto",
+        outline: "none",
+        textStyle: "body",
+        background: "bg.surface",
+        border: "1px solid token(colors.border.control)",
+        borderRadius: "action",
+        boxShadow: "card",
+        _phone: { insetBlock: "none", insetInlineEnd: "none", border: "0", borderRadius: "0" },
+        // Base UI drives live swipe drag through this custom property; the resting
+        // transform must reference it or dragging won't visually track the pointer.
+        transform: "translateX(var(--drawer-swipe-movement-x, 0px))",
+        transitionProperty: "transform",
+        transitionDuration: "default",
+        "&[data-starting-style], &[data-ending-style]": {
+            transform: "translateX(calc(100% + token(spacing.panel.compact)))",
+            _rtl: { transform: "translateX(calc(-100% - token(spacing.panel.compact)))" },
+        },
+        "&[data-swiping]": { transitionDuration: "0ms" },
+        _motionReduce: { transitionDuration: "0ms" },
+    },
+    variants: {
+        size: {
+            // A conversation or a short form, such as the agent sheet.
+            narrow: {
+                width: "min(calc(100vw - token(spacing.panel.compact) * 2), token(sizes.overlay.sheetNarrow))",
+                _phone: { width: "100vw" },
+            },
+            regular: {
+                width: "min(calc(100vw - token(spacing.panel.compact) * 2), token(sizes.overlay.sheet))",
+                _phone: { width: "100vw" },
+            },
+            // Near the full viewport, for content such as logs that needs the room.
+            large: { width: "calc(100vw - token(spacing.layout.pageGap) * 2)" },
+        },
+    },
+    defaultVariants: { size: "regular" },
+});
+const panel = css({
+    display: "flex",
+    flex: "1",
+    minWidth: "0",
+    minHeight: "0",
+    flexDirection: "column",
+    color: "fg.primary",
+});
+// At least the app header's height, so on a desktop the sheet's header rule lines up with the main
+// panel's beside it: both start one shell gap from the window's top.
+const header = css({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: "layout.contentGap",
+    minHeight: "shell.header",
+    paddingBlock: "layout.tightGap",
+    paddingInlineStart: "panel.comfortable",
+    paddingInlineEnd: "panel.default",
+    borderBottom: "1px solid token(colors.border.control)",
+});
+const headerLine = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.contentGap",
+});
+const titleBlock = css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "control.iconGap",
+    minWidth: "0",
+    paddingBlock: "layout.tightGap",
+});
+const titleLine = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "layout.contentGap",
+    minWidth: "0",
+});
+const titleStyle = cx(heading(), css({ minWidth: "0", lineHeight: "tight" }));
+// The sheet's mark before its title, muted like the agent sheet's sparkle.
+const titleMark = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    minWidth: "0",
+    "& > svg": { flexShrink: "0", color: "fg.muted" },
+});
+const displayTitle = css({
+    margin: "none",
+    fontSize: "heading.page",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+const displaySubtitle = css({
+    margin: "none",
+    color: "fg.muted",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+const eyebrowLine = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.controlGap",
+    minHeight: "control.shortcut",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+});
+const headerActions = css({ display: "flex", alignItems: "center", gap: "layout.controlGap" });
+const body = cva({
+    base: { flex: "1", minHeight: "0", overflowY: "auto", padding: "panel.comfortable" },
+    // A list whose rows run edge to edge draws its own insets.
+    variants: { flush: { true: { padding: "none" } } },
+});
+const form = css({ display: "flex", flex: "1", minHeight: "0", flexDirection: "column" });
+const footer = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+    padding: "panel.comfortable",
+    borderTop: "1px solid token(colors.border.control)",
+    background: "bg.card",
+});
+const footerNote = css({
+    flex: "1",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+});
+const footerActions = css({ display: "flex", alignItems: "center", gap: "layout.controlGap" });
+export function Drawer({ title, icon: titleIcon, eyebrow, subtitle, titleAccessory, actions, size = "regular", children, ...rootProps }) {
+    const { labels, dir } = useCiridaeLocale();
+    const close = (_jsx(BaseDrawer.Close, { render: _jsx(IconButton, { "aria-label": labels.common.close, variant: "ghost", size: "small" }), children: _jsx(XIcon, { className: icon({ size: "small" }) }) }));
+    const titleContent = titleIcon ? (_jsxs("span", { className: titleMark, children: [titleIcon, title] })) : (title);
+    return (_jsx(BaseDrawer.Root, { ...rootProps, swipeDirection: dir === "rtl" ? "left" : "right", children: _jsx(BaseDrawer.Portal, { children: _jsxs(HotkeyLayer, { children: [_jsx(BaseDrawer.Backdrop, { className: backdrop, "data-ciridae-ui": "" }), _jsx(BaseDrawer.Viewport, { className: viewport, children: _jsx(BaseDrawer.Popup, { className: popup({ size }), "data-ciridae-ui": "", children: _jsxs("div", { className: panel, children: [_jsx("header", { className: header, children: eyebrow ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: eyebrowLine, children: [eyebrow, _jsxs("div", { className: headerActions, children: [actions, close] })] }), _jsxs("div", { className: css({ display: "grid", gap: "layout.controlGap" }), children: [_jsx(BaseDrawer.Title, { className: displayTitle, children: title }), subtitle && _jsx("p", { className: displaySubtitle, children: subtitle })] })] })) : (_jsxs("div", { className: headerLine, children: [_jsxs("div", { className: titleBlock, children: [titleAccessory ? (_jsxs("div", { className: titleLine, children: [_jsx(BaseDrawer.Title, { className: titleStyle, children: titleContent }), titleAccessory] })) : (_jsx(BaseDrawer.Title, { className: titleStyle, children: titleContent })), subtitle && _jsx(Eyebrow, { as: "p", children: subtitle })] }), _jsxs("div", { className: headerActions, children: [actions, close] })] })) }), children] }) }) })] }) }) }));
+}
+export function DrawerBody({ flush = false, className, ...props }) {
+    return (_jsx(BaseDrawer.Content, { ...props, className: cx(body({ flush }), className), "data-ciridae-ui": "" }));
+}
+export function DrawerForm({ className, ...props }) {
+    return _jsx("form", { ...props, className: cx(form, className), "data-ciridae-ui": "" });
+}
+export function DrawerFooter({ note, className, children, ...props }) {
+    return (_jsx("footer", { ...props, className: cx(footer, className), "data-ciridae-ui": "", children: note !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: footerNote, children: note }), _jsx("span", { className: footerActions, children: children })] })) : (children) }));
+}
+/* The form field a sheet's form shares: a 12px label row, the control, then a helper or error. */
+const field = css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "control.iconGap",
+    minWidth: "0",
+});
+const fieldLabelRow = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+const fieldHint = css({ color: "fg.muted" });
+const fieldError = css({
+    margin: "none",
+    color: "accent.red",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+// Shrinkable tracks, so a select's long value cannot push its pair past the sheet; one column on a
+// phone, where two fields side by side leave neither room for its value.
+const fieldRow = css({
+    display: "grid",
+    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+    alignItems: "start",
+    gap: "layout.contentGap",
+    _phone: { gridTemplateColumns: "minmax(0, 1fr)" },
+});
+/**
+ * A labelled form field. Its `<label>` points at the control inside, and its helper or error
+ * describes it: `Input`, `Textarea`, `Select` and `Combobox` take the ids from the field.
+ */
+export function DrawerField({ label, hint, helper, error, controlId, children }) {
+    const generatedId = useId();
+    const id = controlId ?? `${generatedId}-control`;
+    const descriptionId = `${generatedId}-description`;
+    const description = error || helper;
+    const hasDescription = Boolean(description);
+    const invalid = Boolean(error);
+    const fieldControl = useMemo(() => ({ controlId: id, descriptionId: hasDescription ? descriptionId : undefined, invalid }), [id, descriptionId, hasDescription, invalid]);
+    return (_jsxs("div", { className: field, "data-ciridae-ui": "", children: [_jsxs("div", { className: fieldLabelRow, children: [_jsx("label", { htmlFor: id, children: label }), hint && _jsx("span", { className: fieldHint, children: hint })] }), _jsx(FieldControlContext, { value: fieldControl, children: children }), error ? (_jsx("p", { id: descriptionId, className: fieldError, role: "alert", children: error })) : (helper && (_jsx(Eyebrow, { as: "p", id: descriptionId, children: helper })))] }));
+}
+/** Two fields side by side. */
+export function DrawerFieldRow({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx(fieldRow, className), "data-ciridae-ui": "" });
+}

package/dist/components/dropzone.d.ts

@@ -0,0 +1,47 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type ReactNode } from "react";
+import { type ButtonProps } from "./button.js";
+/** One square per file, as a chat app draws them: an image's thumbnail, or a file's icon over its name. */
+export declare const fileSquare: string;
+export type DropzoneContextValue = {
+    openPicker: () => void;
+    disabled: boolean;
+};
+export type DropzoneProps = useRender.ComponentProps<"div"> & {
+    /** The files dropped, picked or pasted, in one batch. */
+    onFiles: (files: File[]) => void;
+    /** What the overlay says while files are dragged over; the locale's "Drop to attach" by default. */
+    dropLabel?: ReactNode;
+    /** Ignores drops, pastes and the picker. */
+    disabled?: boolean;
+    /** The picker's `accept`, such as `image/*,.pdf`; drops and pastes are not filtered. */
+    accept?: string;
+};
+/** Drop or paste files onto the element; while dragged over it carries `data-dragging`. */
+export declare function Dropzone({ onFiles, dropLabel, disabled, accept, render, className, children, ...props }: DropzoneProps): import("@types/react").JSX.Element;
+/** The enclosing `Dropzone`'s picker, for a trigger of the caller's own, such as an icon button. */
+export declare function useDropzonePicker(): DropzoneContextValue;
+export type DropzoneTriggerProps = Omit<ButtonProps, "onClick">;
+/** Opens the enclosing `Dropzone`'s file picker; a paperclip unless it sets its own icon. */
+export declare function DropzoneTrigger({ icon: triggerIcon, variant, disabled, ...props }: DropzoneTriggerProps): import("@types/react").JSX.Element;
+/** A dashed pad at rest inside a `Dropzone`: drop files on it, or browse for them. */
+export declare function DropzonePad({ className }: {
+    className?: string;
+}): import("@types/react").JSX.Element;
+export type DropzoneFileListProps = {
+    files: readonly File[];
+    onRemove: (file: File) => void;
+    /** The files are uploading: each row spins in place of its remove button. */
+    pending?: boolean;
+    disabled?: boolean;
+    /**
+     * `rows` lists the files in a bordered list; `chips` as small chips in a wrapping row; `tiles`
+     * as squares that open the file in a `Lightbox`, as a chat composer shows them.
+     */
+    variant?: "rows" | "chips" | "tiles";
+    className?: string;
+};
+/** One row per file: a thumbnail for an image, else its type's icon, its name and size, remove. */
+export declare function DropzoneFileList({ files, onRemove, pending, disabled, variant, className, }: DropzoneFileListProps): import("@types/react").JSX.Element | null;
+/** A file's type as an icon: PDF, archive, text, or a plain file. */
+export declare function fileTypeIcon(file: Pick<File, "name" | "type">): ReactNode;

package/dist/components/dropzone.js

@@ -0,0 +1,370 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * A file drop target: any element, by default a div, that takes files dropped on it or pasted into
+ * it and highlights while files are dragged over it; `DropzoneTrigger` opens the file picker, and
+ * `DropzoneFileList` lists the files the caller holds. The caller owns the files and their limits.
+ */
+import { useRender } from "@base-ui/react/use-render";
+import { FileIcon, FilePdfIcon, FileTextIcon, FileZipIcon, PaperclipIcon, UploadSimpleIcon, XIcon, } from "@phosphor-icons/react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { css, cx } from "#primitives/css";
+import { Button, IconButton } from "./button.js";
+import { icon, Spinner } from "./icon.js";
+import { Lightbox } from "./lightbox.js";
+import { useCiridaeLocale } from "./locale.js";
+const zone = css({ position: "relative" });
+// While files are over it, the zone dims under a dashed frame that names what a drop does.
+const dropOverlay = css({
+    position: "absolute",
+    inset: "0",
+    zIndex: "raised",
+    display: "grid",
+    placeItems: "center",
+    padding: "layout.controlGap",
+    background: "color-mix(in srgb, token(colors.bg.surface) 88%, transparent)",
+    pointerEvents: "none",
+    "& > span": {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "layout.controlGap",
+        width: "100%",
+        height: "100%",
+        border: "1px dashed token(colors.border.selected)",
+        borderRadius: "action",
+        background: "bg.selected",
+        color: "fg.primary",
+        fontSize: "body",
+        fontWeight: "medium",
+        letterSpacing: "compact",
+        "& svg": { color: "accent.brand" },
+    },
+});
+// At rest, a form's drop target: a dashed pad that names both ways in.
+const pad = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "layout.controlGap",
+    minHeight: "control.row",
+    paddingInline: "panel.default",
+    paddingBlock: "control.block",
+    border: "1px dashed token(colors.border.control)",
+    borderRadius: "control",
+    color: "fg.muted",
+    fontSize: "caption",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    transitionProperty: "border-color, color",
+    transitionDuration: "fast",
+    "& > svg": { flexShrink: "0" },
+    _hover: { borderColor: "border.selected", color: "fg.secondary" },
+    "&[data-disabled]": { opacity: "disabled" },
+});
+const padBrowse = css({
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    color: "accent.brand",
+    font: "inherit",
+    cursor: "pointer",
+    _hover: { textDecoration: "underline" },
+    _focusVisible: { focusRing: "outer" },
+    _disabled: { cursor: "default", textDecoration: "none" },
+});
+const fileList = css({
+    display: "grid",
+    margin: "none",
+    padding: "none",
+    listStyle: "none",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "control",
+    background: "bg.field",
+});
+const fileRow = css({
+    display: "grid",
+    gridTemplateColumns: "auto minmax(0, 1fr) auto",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    paddingBlock: "layout.tightGap",
+    paddingInlineStart: "layout.controlGap",
+    paddingInlineEnd: "layout.tightGap",
+    "& + &": { borderTop: "1px solid token(colors.border.subtle)" },
+});
+const fileMark = css({
+    display: "grid",
+    placeItems: "center",
+    width: "control.mark",
+    height: "control.mark",
+    color: "fg.muted",
+    "& img": {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        borderRadius: "control",
+    },
+});
+const fileCopy = css({
+    display: "flex",
+    alignItems: "baseline",
+    gap: "layout.controlGap",
+    minWidth: "0",
+    fontSize: "body",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+const fileName = css({ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" });
+const fileSize = css({
+    flexShrink: "0",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    fontVariantNumeric: "tabular-nums",
+});
+/** One square per file, as a chat app draws them: an image's thumbnail, or a file's icon over its name. */
+export const fileSquare = css({
+    display: "grid",
+    placeItems: "center",
+    alignContent: "center",
+    gap: "layout.tightGap",
+    width: "chat.attachment",
+    height: "chat.attachment",
+    padding: "layout.tightGap",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "action",
+    overflow: "hidden",
+    background: "bg.card",
+    color: "fg.primary",
+    font: "inherit",
+    fontSize: "avatar.small",
+    lineHeight: "compact",
+    textAlign: "center",
+    "& > img": { display: "block", width: "100%", height: "100%", objectFit: "cover" },
+    "&[data-image]": { padding: "none", background: "bg.fill" },
+    "& > span": {
+        maxWidth: "100%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    "& > svg": { color: "fg.muted" },
+    "&:is(button)": { cursor: "zoom-in", _hover: { borderColor: "fg.muted" } },
+    _focusVisible: { focusRing: "outer" },
+});
+/* `tiles`: each file a square that opens it, with its remove button in the corner. */
+const fileTiles = css({
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "layout.tightGap",
+    margin: "none",
+    padding: "none",
+    listStyle: "none",
+});
+const fileTileItem = css({ position: "relative" });
+const fileTileCorner = css({
+    position: "absolute",
+    top: "layout.tightGap",
+    insetInlineEnd: "layout.tightGap",
+    display: "grid",
+    placeItems: "center",
+});
+/*
+ * `chips`: each file a small hairline chip, wrapping in a row, for files waiting with a message
+ * just above its text.
+ */
+const fileChips = css({
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "layout.tightGap",
+    margin: "none",
+    padding: "none",
+    listStyle: "none",
+});
+const fileChip = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    maxWidth: "100%",
+    height: "control.shortcut",
+    paddingInlineStart: "control.trackInset",
+    paddingInlineEnd: "1px",
+    border: "1px solid token(colors.border.subtle)",
+    borderRadius: "control",
+    background: "bg.card",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    "& > [data-mark]": {
+        display: "grid",
+        flexShrink: "0",
+        placeItems: "center",
+        width: "mark.inline",
+        height: "mark.inline",
+        color: "fg.muted",
+    },
+    "& > [data-mark] > svg": { fontSize: "icon.compact" },
+    "& > [data-mark] > img": {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        borderRadius: "control",
+    },
+    "& > [data-name]": {
+        maxWidth: "file.chipName",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    "& > [data-size]": { flexShrink: "0", color: "fg.muted", fontVariantNumeric: "tabular-nums" },
+    "& > button, & > [data-pending]": {
+        display: "grid",
+        flexShrink: "0",
+        placeItems: "center",
+        width: "control.mark",
+        height: "control.mark",
+    },
+});
+// The remove button's box, so a row keeps its height while it uploads.
+const filePending = css({
+    display: "grid",
+    placeItems: "center",
+    width: "control.shortcut",
+    height: "control.shortcut",
+    color: "fg.muted",
+});
+const DropzoneContext = createContext(null);
+/** Drop or paste files onto the element; while dragged over it carries `data-dragging`. */
+export function Dropzone({ onFiles, dropLabel, disabled = false, accept, render, className, children, ...props }) {
+    const { labels } = useCiridaeLocale();
+    const [dragging, setDragging] = useState(false);
+    const input = useRef(null);
+    const carriesFiles = (event) => !disabled && event.dataTransfer.types.includes("Files");
+    const dragOver = (event) => {
+        if (!carriesFiles(event))
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+        setDragging(true);
+    };
+    const picker = useMemo(() => ({ openPicker: () => input.current?.click(), disabled }), [disabled]);
+    const element = useRender({
+        defaultTagName: "div",
+        render,
+        state: { dragging, disabled },
+        stateAttributesMapping: {
+            dragging: (value) => (value ? { "data-dragging": "" } : null),
+            disabled: (value) => (value ? { "data-disabled": "" } : null),
+        },
+        props: {
+            ...props,
+            className: cx(zone, className),
+            onDragEnter: dragOver,
+            onDragOver: dragOver,
+            onDragLeave: (event) => {
+                const next = event.relatedTarget;
+                if (next instanceof Node && event.currentTarget.contains(next))
+                    return;
+                setDragging(false);
+            },
+            onDrop: (event) => {
+                setDragging(false);
+                if (!carriesFiles(event))
+                    return;
+                event.preventDefault();
+                onFiles(Array.from(event.dataTransfer.files));
+            },
+            // A pasted image, but not text that carries a picture of itself, as office apps copy.
+            onPaste: (event) => {
+                const { files, types } = event.clipboardData;
+                if (disabled || files.length === 0 || types.includes("text/plain"))
+                    return;
+                event.preventDefault();
+                onFiles(Array.from(files));
+            },
+            // The input after the content, so the content's first child stays the element's first.
+            children: (_jsxs(_Fragment, { children: [children, dragging && (_jsx("span", { className: dropOverlay, "aria-hidden": "true", children: _jsxs("span", { children: [_jsx(UploadSimpleIcon, { className: icon() }), dropLabel ?? labels.dropzone.dropToAttach] }) })), _jsx("input", { ref: input, type: "file", multiple: true, accept: accept, hidden: true, tabIndex: -1, "aria-hidden": "true", onChange: (event) => {
+                            const files = Array.from(event.target.files ?? []);
+                            // Cleared so picking the same file again still reports it.
+                            event.target.value = "";
+                            if (files.length > 0)
+                                onFiles(files);
+                        } })] })),
+        },
+    });
+    return _jsx(DropzoneContext.Provider, { value: picker, children: element });
+}
+/** The enclosing `Dropzone`'s picker, for a trigger of the caller's own, such as an icon button. */
+export function useDropzonePicker() {
+    const dropzone = useContext(DropzoneContext);
+    if (!dropzone)
+        throw new Error("useDropzonePicker must be inside a Dropzone.");
+    return dropzone;
+}
+/** Opens the enclosing `Dropzone`'s file picker; a paperclip unless it sets its own icon. */
+export function DropzoneTrigger({ icon: triggerIcon, variant = "secondary", disabled, ...props }) {
+    const dropzone = useDropzonePicker();
+    return (_jsx(Button, { ...props, variant: variant, disabled: disabled || dropzone.disabled, icon: triggerIcon ?? _jsx(PaperclipIcon, { className: icon({ size: "small" }) }), onClick: dropzone.openPicker }));
+}
+/** A dashed pad at rest inside a `Dropzone`: drop files on it, or browse for them. */
+export function DropzonePad({ className }) {
+    const dropzone = useDropzonePicker();
+    const { labels } = useCiridaeLocale();
+    return (_jsxs("div", { className: cx(pad, className), "data-ciridae-ui": "", "data-disabled": dropzone.disabled || undefined, children: [_jsx(UploadSimpleIcon, { className: icon({ size: "small" }) }), _jsx("span", { children: labels.dropzone.dropOrBrowse(_jsx("button", { type: "button", className: padBrowse, disabled: dropzone.disabled, onClick: dropzone.openPicker, children: labels.dropzone.browse })) })] }));
+}
+/** One row per file: a thumbnail for an image, else its type's icon, its name and size, remove. */
+export function DropzoneFileList({ files, onRemove, pending = false, disabled = false, variant = "rows", className, }) {
+    const { labels, formatFileSize } = useCiridaeLocale();
+    if (files.length === 0)
+        return null;
+    const key = (file, index) => `${index}-${file.name}-${file.size}-${file.lastModified}`;
+    if (variant === "tiles") {
+        return (_jsx(FileTiles, { files: files, onRemove: onRemove, pending: pending, disabled: disabled, fileKey: key, className: className }));
+    }
+    if (variant === "chips") {
+        return (_jsx("ul", { className: cx(fileChips, className), "data-ciridae-ui": "", children: files.map((file, index) => (_jsxs("li", { className: fileChip, title: file.name, children: [_jsx("span", { "data-mark": "", children: file.type.startsWith("image/") ? _jsx(FileThumbnail, { file: file }) : fileTypeIcon(file) }), _jsx("span", { "data-name": "", children: file.name }), _jsx("span", { "data-size": "", children: formatFileSize(file.size) }), pending ? (_jsx("span", { "data-pending": "", children: _jsx(Spinner, { label: labels.dropzone.uploading(file.name) }) })) : (_jsx(IconButton, { "aria-label": labels.common.remove(file.name), variant: "ghost", size: "compact", disabled: disabled, onClick: () => onRemove(file), children: _jsx(XIcon, { className: icon({ size: "compact" }) }) }))] }, key(file, index)))) }));
+    }
+    return (_jsx("ul", { className: cx(fileList, className), "data-ciridae-ui": "", children: files.map((file, index) => (_jsxs("li", { className: fileRow, children: [_jsx("span", { className: fileMark, children: file.type.startsWith("image/") ? _jsx(FileThumbnail, { file: file }) : fileTypeIcon(file) }), _jsxs("span", { className: fileCopy, children: [_jsx("span", { className: fileName, children: file.name }), _jsx("span", { className: fileSize, children: formatFileSize(file.size) })] }), pending ? (_jsx("span", { className: filePending, children: _jsx(Spinner, { label: labels.dropzone.uploading(file.name) }) })) : (_jsx(IconButton, { "aria-label": labels.common.remove(file.name), variant: "ghost", size: "compact", disabled: disabled, onClick: () => onRemove(file), children: _jsx(XIcon, { className: icon({ size: "small" }) }) }))] }, key(file, index)))) }));
+}
+function FileTiles({ files, onRemove, pending, disabled, fileKey, className, }) {
+    const { labels } = useCiridaeLocale();
+    const [open, setOpen] = useState(null);
+    const [urls, setUrls] = useState([]);
+    useEffect(() => {
+        const made = files.map((file) => URL.createObjectURL(file));
+        setUrls(made);
+        return () => made.forEach((url) => URL.revokeObjectURL(url));
+    }, [files]);
+    const items = files.flatMap((file, index) => {
+        const url = urls[index];
+        return url ? [{ id: fileKey(file, index), name: file.name, url, mediaType: file.type }] : [];
+    });
+    return (_jsxs("ul", { className: cx(fileTiles, className), "data-ciridae-ui": "", children: [files.map((file, index) => {
+                const image = file.type.startsWith("image/");
+                return (_jsxs("li", { className: fileTileItem, children: [_jsx("button", { type: "button", className: fileSquare, "data-image": image || undefined, "aria-label": labels.lightbox.preview(file.name), title: file.name, onClick: () => setOpen(index), children: image ? (_jsx(FileThumbnail, { file: file })) : (_jsxs(_Fragment, { children: [fileTypeIcon(file), _jsx("span", { children: file.name })] })) }), _jsx("span", { className: fileTileCorner, children: pending ? (_jsx(Spinner, { label: labels.dropzone.uploading(file.name) })) : (_jsx(IconButton, { "aria-label": labels.common.remove(file.name), size: "compact", disabled: disabled, onClick: () => onRemove(file), children: _jsx(XIcon, { className: icon({ size: "compact" }) }) })) })] }, fileKey(file, index)));
+            }), _jsx(Lightbox, { items: items, index: open, onIndexChange: setOpen })] }));
+}
+/* The image from an object URL that lives as long as the element. */
+function FileThumbnail({ file }) {
+    const attach = useCallback((element) => {
+        if (!element)
+            return;
+        const url = URL.createObjectURL(file);
+        element.src = url;
+        return () => URL.revokeObjectURL(url);
+    }, [file]);
+    return _jsx("img", { ref: attach, alt: "" });
+}
+/** A file's type as an icon: PDF, archive, text, or a plain file. */
+export function fileTypeIcon(file) {
+    const name = file.name.toLowerCase();
+    const className = icon({ size: "small" });
+    if (file.type === "application/pdf" || name.endsWith(".pdf"))
+        return _jsx(FilePdfIcon, { className: className });
+    if (/zip|gzip|tar|compressed/.test(file.type) || /\.(?:zip|gz|tgz|tar|7z)$/.test(name))
+        return _jsx(FileZipIcon, { className: className });
+    if (file.type.startsWith("text/") || /\.(?:log|txt|json|csv|md|har)$/.test(name))
+        return _jsx(FileTextIcon, { className: className });
+    return _jsx(FileIcon, { className: className });
+}