@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/document-viewer.js

@@ -0,0 +1,419 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * A document beside what was read from it: a thumbnail rail, one page at a time in a well with
+ * zoom (a step, fit page, fit width), rotation and full screen, and regions over the page that
+ * link to the fields in the aside. Hovering or selecting a region marks its field and the other
+ * way round; selecting a field on another page turns to it. Arrows (or Page Up / Page Down) turn
+ * pages, + and - zoom and 0 fits the page while focus is in the viewer.
+ */
+import { useRender } from "@base-ui/react/use-render";
+import { ArrowClockwiseIcon, ArrowsInIcon, ArrowsOutIcon, CaretDownIcon, CaretLeftIcon, CaretRightIcon, MinusIcon, PlusIcon, } from "@phosphor-icons/react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { css, cx } from "#primitives/css";
+import { Button, IconButton } from "./button.js";
+import { useControllableState } from "./controllable-state.js";
+import { useHotkeys } from "./hotkeys.js";
+import { directional, icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Menu } from "./menu.js";
+import { cardSurface } from "./panel.js";
+const MIN_SCALE = 0.25;
+const MAX_SCALE = 4;
+const ZOOM_STEP = 0.1;
+/** The well's inset around the page, in pixels, which fitting leaves free. */
+const WELL_INSET = 24;
+const THUMBNAIL_WIDTH = 64;
+const root = css({
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr)",
+    gap: "layout.clusterGap",
+    alignItems: "stretch",
+    "&[data-aside]": {
+        gridTemplateColumns: "minmax(0, 1fr) 400px",
+        _wide: { gridTemplateColumns: "minmax(0, 1fr)" },
+    },
+});
+const viewer = css(cardSurface, {
+    display: "grid",
+    gridTemplateRows: "auto minmax(0, 1fr)",
+    minWidth: "0",
+    overflow: "hidden",
+    outline: "none",
+    "&:fullscreen": { borderRadius: "0", height: "100dvh" },
+});
+const toolbar = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: "layout.contentGap",
+    paddingBlock: "log.columnGap",
+    paddingInline: "panel.default",
+    borderBottom: "1px solid token(colors.border.panel)",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+});
+const toolbarGroup = css({ display: "flex", alignItems: "center", gap: "layout.controlGap" });
+const zoomPill = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.trackInset",
+    height: "control.small",
+    padding: "control.trackInset",
+    border: "1px solid token(colors.border.glass)",
+    borderRadius: "pill",
+    background: "bg.raised",
+    "& > button": {
+        display: "inline-grid",
+        placeItems: "center",
+        width: "control.small",
+        height: "control.shortcut",
+        padding: "none",
+        border: "0",
+        borderRadius: "pill",
+        background: "transparent",
+        color: "fg.primary",
+        cursor: "pointer",
+        _hover: { background: "bg.hover" },
+        _focusVisible: { focusRing: "outer" },
+        _disabled: { opacity: "0.5", cursor: "default" },
+    },
+    "& > output": {
+        minWidth: "52px",
+        textAlign: "center",
+        fontSize: "body",
+        fontWeight: "medium",
+        fontVariantNumeric: "tabular-nums",
+    },
+});
+const body = css({
+    display: "grid",
+    gridTemplateColumns: "104px minmax(0, 1fr)",
+    height: "min(693px, 80dvh)",
+    minHeight: "0",
+    _phone: { gridTemplateColumns: "minmax(0, 1fr)" },
+    "[data-full-screen] > &": { height: "auto" },
+});
+const thumbnails = css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "layout.clusterGap",
+    paddingBlock: "panel.comfortable",
+    borderInlineEnd: "1px solid token(colors.border.panel)",
+    overflowY: "auto",
+    _phone: { display: "none" },
+});
+const thumbnail = css({
+    display: "grid",
+    gap: "control.iconGap",
+    justifyItems: "center",
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    color: "fg.muted",
+    font: "inherit",
+    fontSize: "code",
+    fontWeight: "medium",
+    cursor: "pointer",
+    "&[aria-current=page]": { color: "fg.primary" },
+    _focusVisible: { outline: "none", "& > span": { focusRing: "outer" } },
+    "& > span": {
+        position: "relative",
+        overflow: "hidden",
+        borderRadius: "2px",
+        outline: "1px solid token(colors.border.control)",
+        pointerEvents: "none",
+    },
+    "&[aria-current=page] > span": { outline: "2px solid token(colors.accent.brand)" },
+});
+const well = css({
+    display: "flex",
+    justifyContent: "safe center",
+    alignItems: "safe center",
+    padding: "24px",
+    background: "bg.canvas",
+    overflow: "auto",
+    outline: "none",
+    _focusVisible: { focusRing: "inset" },
+});
+const pageBox = css({ position: "relative", flexShrink: "0", boxShadow: "card" });
+const pageLayer = css({ position: "absolute", top: "0", left: "0", transformOrigin: "0 0" });
+const pageContent = css({
+    position: "absolute",
+    top: "0",
+    left: "0",
+    transformOrigin: "0 0",
+    "& > img": { display: "block", width: "100%", height: "100%" },
+});
+const regionButton = css({
+    position: "absolute",
+    padding: "none",
+    border: "1.5px solid transparent",
+    borderRadius: "3px",
+    background: "transparent",
+    cursor: "pointer",
+    "--region-ink": "token(colors.accent.blue)",
+    "--region-wash": "token(colors.bg.infoSubtle)",
+    "&[data-tone=warning]": {
+        "--region-ink": "token(colors.accent.yellow)",
+        "--region-wash": "token(colors.bg.warningSubtle)",
+    },
+    "&[data-tone=danger]": {
+        "--region-ink": "token(colors.accent.red)",
+        "--region-wash": "token(colors.bg.errorSubtle)",
+    },
+    "&[data-tone=success]": {
+        "--region-ink": "token(colors.accent.green)",
+        "--region-wash": "token(colors.bg.successSubtle)",
+    },
+    "&[data-tone=neutral]": {
+        "--region-ink": "token(colors.fg.muted)",
+        "--region-wash": "token(colors.bg.hover)",
+    },
+    "&[data-marked], &:focus-visible": {
+        borderColor: "var(--region-ink)",
+        background: "var(--region-wash)",
+        outline: "none",
+    },
+    "& > span": {
+        position: "absolute",
+        insetInlineStart: "-1.5px",
+        bottom: "calc(100% + 4px)",
+        display: "none",
+        alignItems: "center",
+        height: "22px",
+        paddingInline: "6px",
+        borderRadius: "control",
+        background: "var(--region-ink)",
+        color: "fg.onAccent",
+        fontSize: "code",
+        fontWeight: "medium",
+        letterSpacing: "compact",
+        whiteSpace: "nowrap",
+        pointerEvents: "none",
+    },
+    "&[data-near-top] > span": { bottom: "auto", top: "calc(100% + 4px)" },
+    "&[data-marked] > span, &:focus-visible > span": { display: "inline-flex" },
+});
+const field = css({
+    width: "100%",
+    padding: "none",
+    border: "0",
+    borderRadius: "keycap",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
+    textAlign: "start",
+    letterSpacing: "compact",
+    cursor: "pointer",
+    _hover: { background: "bg.rowHover" },
+    "&[data-marked]": { background: "bg.rowHover" },
+    "&[aria-pressed=true]": { background: "bg.selected" },
+    _focusVisible: { focusRing: "outer" },
+});
+const DocumentViewerContext = createContext(null);
+function clampScale(scale) {
+    return Math.min(MAX_SCALE, Math.max(MIN_SCALE, Math.round(scale * 100) / 100));
+}
+/** Draws a page at `scale` and `rotation`, with its regions over it when given. */
+function PageSurface({ page, scale, rotation = 0, children, }) {
+    const width = page.width * scale;
+    const height = page.height * scale;
+    const quarterTurned = rotation === 90 || rotation === 270;
+    // Rotating about the top-start corner moves the page off its box; the translate brings it back.
+    const offset = rotation === 90
+        ? `translate(${height}px, 0)`
+        : rotation === 180
+            ? `translate(${width}px, ${height}px)`
+            : rotation === 270
+                ? `translate(0, ${width}px)`
+                : "";
+    return (_jsx("span", { className: pageBox, style: {
+            display: "block",
+            width: quarterTurned ? height : width,
+            height: quarterTurned ? width : height,
+        }, children: _jsxs("span", { className: pageLayer, style: { width, height, transform: `${offset} rotate(${rotation}deg)` }, children: [_jsx("span", { className: pageContent, style: page.render
+                        ? { width: page.width, height: page.height, transform: `scale(${scale})` }
+                        : { width, height }, children: page.render ? page.render() : page.src && _jsx("img", { src: page.src, alt: "" }) }), children] }) }));
+}
+export function DocumentViewer({ pages, regions = [], activeRegionId: ownActiveRegionId, defaultActiveRegionId = null, onActiveRegionChange, pageId: ownPageId, defaultPageId, onPageChange, zoom: ownZoom, defaultZoom = "page", onZoomChange, aside, actions, labels: ownLabels, className, ...props }) {
+    const { labels: localeLabels, dir } = useCiridaeLocale();
+    const labels = { ...localeLabels.documentViewer, ...ownLabels };
+    const [activeRegionId, setActiveRegionId] = useControllableState(ownActiveRegionId, defaultActiveRegionId, onActiveRegionChange);
+    const [pageId, setPageId] = useControllableState(ownPageId, defaultPageId ?? pages[0]?.id ?? "", onPageChange);
+    const [zoom, setZoom] = useControllableState(ownZoom, defaultZoom, onZoomChange);
+    const [rotation, setRotation] = useState(0);
+    const [hoveredRegionId, setHoveredRegionId] = useState(null);
+    const [selectedFrom, setSelectedFrom] = useState("field");
+    const [fullScreen, setFullScreen] = useState(false);
+    const viewerRef = useRef(null);
+    const wellRef = useRef(null);
+    const [wellSize, setWellSize] = useState({ width: 0, height: 0 });
+    const pageIndex = Math.max(0, pages.findIndex((page) => page.id === pageId));
+    const page = pages[pageIndex];
+    useLayoutEffect(() => {
+        const element = wellRef.current;
+        if (!element)
+            return;
+        const measure = () => setWellSize({ width: element.clientWidth, height: element.clientHeight });
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => {
+        const follow = () => setFullScreen(document.fullscreenElement === viewerRef.current);
+        document.addEventListener("fullscreenchange", follow);
+        return () => document.removeEventListener("fullscreenchange", follow);
+    }, []);
+    // A region chosen from its field, or by the caller, turns to its page.
+    // Only a change of region turns the page, never a page the reader turned since.
+    const activePageId = regions.find((region) => region.id === activeRegionId)?.pageId;
+    const followedRegionId = useRef(activeRegionId);
+    useEffect(() => {
+        if (followedRegionId.current === activeRegionId)
+            return;
+        followedRegionId.current = activeRegionId;
+        if (activePageId !== undefined)
+            setPageId(activePageId);
+    }, [activeRegionId, activePageId, setPageId]);
+    const quarterTurned = rotation === 90 || rotation === 270;
+    const pageWidth = page ? (quarterTurned ? page.height : page.width) : 1;
+    const pageHeight = page ? (quarterTurned ? page.width : page.height) : 1;
+    const fitWidthScale = (wellSize.width - WELL_INSET * 2) / pageWidth;
+    const fitPageScale = Math.min(fitWidthScale, (wellSize.height - WELL_INSET * 2) / pageHeight);
+    const scale = zoom === "page"
+        ? clampScale(fitPageScale)
+        : zoom === "width"
+            ? clampScale(fitWidthScale)
+            : clampScale(zoom);
+    const zoomBy = (step) => setZoom(clampScale(Math.round((scale + step) * 10) / 10));
+    const turnTo = (index) => {
+        const next = pages[Math.min(pages.length - 1, Math.max(0, index))];
+        if (next && next.id !== pageId)
+            setPageId(next.id);
+    };
+    const selectRegion = useCallback((regionId, from) => {
+        setSelectedFrom(from);
+        setActiveRegionId(regionId);
+    }, [setActiveRegionId]);
+    const context = useMemo(() => ({
+        activeRegionId,
+        hoveredRegionId,
+        selectedFrom,
+        selectRegion,
+        hoverRegion: setHoveredRegionId,
+    }), [activeRegionId, hoveredRegionId, selectedFrom, selectRegion]);
+    // While focus is in the viewer; the arrows follow the reading direction.
+    const previousPage = { group: labels.document, name: labels.previousPage };
+    const nextPage = { group: labels.document, name: labels.nextPage };
+    const zoomIn = { group: labels.document, name: labels.zoomIn };
+    useHotkeys([
+        {
+            hotkey: dir === "rtl" ? "ArrowRight" : "ArrowLeft",
+            callback: () => turnTo(pageIndex - 1),
+            options: { meta: previousPage },
+        },
+        { hotkey: "PageUp", callback: () => turnTo(pageIndex - 1), options: { meta: previousPage } },
+        {
+            hotkey: dir === "rtl" ? "ArrowLeft" : "ArrowRight",
+            callback: () => turnTo(pageIndex + 1),
+            options: { meta: nextPage },
+        },
+        { hotkey: "PageDown", callback: () => turnTo(pageIndex + 1), options: { meta: nextPage } },
+        { hotkey: "+", callback: () => zoomBy(ZOOM_STEP), options: { meta: zoomIn } },
+        { hotkey: "=", callback: () => zoomBy(ZOOM_STEP), options: { meta: zoomIn } },
+        {
+            hotkey: "-",
+            callback: () => zoomBy(-ZOOM_STEP),
+            options: { meta: { group: labels.document, name: labels.zoomOut } },
+        },
+        {
+            hotkey: "0",
+            callback: () => setZoom("page"),
+            options: { meta: { group: labels.document, name: labels.fitPage } },
+        },
+    ], { target: viewerRef });
+    const toggleFullScreen = () => {
+        const element = viewerRef.current;
+        if (!element)
+            return;
+        if (document.fullscreenElement === element)
+            void document.exitFullscreen();
+        else
+            void element.requestFullscreen();
+    };
+    const fitLabel = zoom === "page"
+        ? labels.fitPage
+        : zoom === "width"
+            ? labels.fitWidth
+            : zoom === 1
+                ? labels.actualSize
+                : labels.fit;
+    const pageRegions = regions.filter((region) => region.pageId === page?.id);
+    return (_jsx(DocumentViewerContext, { value: context, children: _jsxs("div", { ...props, className: cx(root, className), "data-ciridae-ui": "", "data-aside": aside !== undefined || undefined, children: [_jsxs("div", { ref: viewerRef, className: viewer, role: "group", "aria-label": labels.document, "data-full-screen": fullScreen || undefined, children: [_jsxs("div", { className: toolbar, children: [_jsxs("div", { className: toolbarGroup, children: [_jsx(IconButton, { "aria-label": labels.previousPage, size: "small", disabled: pageIndex === 0, onClick: () => turnTo(pageIndex - 1), children: _jsx(CaretLeftIcon, { className: cx(icon({ size: "small" }), directional) }) }), _jsx(IconButton, { "aria-label": labels.nextPage, size: "small", disabled: pageIndex >= pages.length - 1, onClick: () => turnTo(pageIndex + 1), children: _jsx(CaretRightIcon, { className: cx(icon({ size: "small" }), directional) }) }), _jsx("span", { "aria-live": "polite", children: labels.pageOf(pageIndex + 1, pages.length) })] }), _jsxs("div", { className: toolbarGroup, children: [_jsxs("span", { className: zoomPill, children: [_jsx("button", { type: "button", "aria-label": labels.zoomOut, disabled: scale <= MIN_SCALE, onClick: () => zoomBy(-ZOOM_STEP), children: _jsx(MinusIcon, { className: icon({ size: "small" }) }) }), _jsxs("output", { "aria-live": "polite", children: [Math.round(scale * 100), "%"] }), _jsx("button", { type: "button", "aria-label": labels.zoomIn, disabled: scale >= MAX_SCALE, onClick: () => zoomBy(ZOOM_STEP), children: _jsx(PlusIcon, { className: icon({ size: "small" }) }) })] }), _jsx(Menu, { align: "end", trigger: _jsxs(Button, { variant: "secondary", children: [fitLabel, _jsx(CaretDownIcon, { className: icon({ size: "compact" }) })] }), items: [
+                                                {
+                                                    label: labels.fitPage,
+                                                    checked: zoom === "page",
+                                                    onSelect: () => setZoom("page"),
+                                                },
+                                                {
+                                                    label: labels.fitWidth,
+                                                    checked: zoom === "width",
+                                                    onSelect: () => setZoom("width"),
+                                                },
+                                                {
+                                                    label: labels.actualSize,
+                                                    checked: zoom === 1,
+                                                    onSelect: () => setZoom(1),
+                                                },
+                                            ] }), _jsx(IconButton, { "aria-label": labels.rotate, size: "small", onClick: () => setRotation((current) => (current + 90) % 360), children: _jsx(ArrowClockwiseIcon, { className: icon({ size: "small" }) }) }), _jsx(IconButton, { "aria-label": fullScreen ? labels.exitFullScreen : labels.fullScreen, size: "small", onClick: toggleFullScreen, children: fullScreen ? (_jsx(ArrowsInIcon, { className: icon({ size: "small" }) })) : (_jsx(ArrowsOutIcon, { className: icon({ size: "small" }) })) }), actions] })] }), _jsxs("div", { className: body, children: [_jsx("nav", { className: thumbnails, "aria-label": labels.pages, children: pages.map((candidate, index) => (_jsxs("button", { type: "button", className: thumbnail, "aria-current": candidate.id === page?.id ? "page" : undefined, "aria-label": labels.page(index + 1), onClick: () => turnTo(index), children: [_jsx(PageSurface, { page: candidate, scale: THUMBNAIL_WIDTH / candidate.width }), index + 1] }, candidate.id))) }), _jsx("div", { ref: wellRef, className: well, tabIndex: 0, "aria-label": labels.pageOf(pageIndex + 1, pages.length), children: page && wellSize.width > 0 && (_jsx(PageSurface, { page: page, scale: scale, rotation: rotation, children: pageRegions.map((region) => (_jsx("button", { type: "button", className: regionButton, "aria-label": region.label, "aria-pressed": region.id === activeRegionId, "data-tone": region.tone ?? "info", "data-marked": region.id === activeRegionId || region.id === hoveredRegionId || undefined, "data-near-top": region.box.y < 0.06 || undefined, style: {
+                                                left: `${region.box.x * 100}%`,
+                                                top: `${region.box.y * 100}%`,
+                                                width: `${region.box.w * 100}%`,
+                                                height: `${region.box.h * 100}%`,
+                                            }, onClick: () => selectRegion(region.id, "page"), onMouseEnter: () => setHoveredRegionId(region.id), onMouseLeave: () => setHoveredRegionId((current) => (current === region.id ? null : current)), children: region.label && _jsx("span", { children: region.label }) }, region.id))) })) })] })] }), aside] }) }));
+}
+/**
+ * A field read from the document, inside `DocumentViewer`'s `aside`: pressed while its region is
+ * selected, marked while its region is hovered, and scrolled into view when its region is
+ * selected on the page.
+ */
+export function DocumentField({ regionId, render, className, onClick, onMouseEnter, onMouseLeave, ...props }) {
+    const context = useContext(DocumentViewerContext);
+    if (!context)
+        throw new Error("DocumentField must be inside a DocumentViewer");
+    const ref = useRef(null);
+    const active = context.activeRegionId === regionId;
+    const fromPage = context.selectedFrom === "page";
+    useEffect(() => {
+        if (active && fromPage)
+            ref.current?.scrollIntoView({ block: "nearest" });
+    }, [active, fromPage]);
+    return useRender({
+        defaultTagName: "button",
+        render,
+        ref,
+        props: {
+            type: "button",
+            ...props,
+            className: cx(field, className),
+            "aria-pressed": active,
+            "data-marked": context.hoveredRegionId === regionId || undefined,
+            onClick: (event) => {
+                context.selectRegion(regionId, "field");
+                onClick?.(event);
+            },
+            onMouseEnter: (event) => {
+                context.hoverRegion(regionId);
+                onMouseEnter?.(event);
+            },
+            onMouseLeave: (event) => {
+                context.hoverRegion(null);
+                onMouseLeave?.(event);
+            },
+        },
+    });
+}

package/dist/components/drawer.d.ts

@@ -0,0 +1,44 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type { ComponentProps, ReactNode } from "react";
+export type DrawerProps = Omit<ComponentProps<typeof BaseDrawer.Root>, "children" | "swipeDirection"> & {
+    title: ReactNode;
+    /** A mark before the title, such as the sheet's icon. */
+    icon?: ReactNode;
+    /** A muted line above a larger title, such as the stage an action sheet names. */
+    eyebrow?: ReactNode;
+    subtitle?: ReactNode;
+    /** Sits on the title's line after it, such as the status of what the drawer shows. */
+    titleAccessory?: ReactNode;
+    /** Controls in the header, before the close button. */
+    actions?: ReactNode;
+    size?: "narrow" | "regular" | "large";
+    children: ReactNode;
+};
+export declare function Drawer({ title, icon: titleIcon, eyebrow, subtitle, titleAccessory, actions, size, children, ...rootProps }: DrawerProps): import("@types/react").JSX.Element;
+export declare function DrawerBody({ flush, className, ...props }: ComponentProps<"div"> & {
+    flush?: boolean;
+}): import("@types/react").JSX.Element;
+export declare function DrawerForm({ className, ...props }: ComponentProps<"form">): import("@types/react").JSX.Element;
+export type DrawerFooterProps = ComponentProps<"footer"> & {
+    /** Muted text at the footer's leading edge saying what the actions do, before the actions. */
+    note?: ReactNode;
+};
+export declare function DrawerFooter({ note, className, children, ...props }: DrawerFooterProps): import("@types/react").JSX.Element;
+export type DrawerFieldProps = {
+    label: ReactNode;
+    /** Muted after the label, such as `Optional` or where a value was filled in from. */
+    hint?: ReactNode;
+    /** Under the control, until an error replaces it. */
+    helper?: ReactNode;
+    error?: ReactNode;
+    /** The control's id, which the label points at; generated when left out. */
+    controlId?: string;
+    children: ReactNode;
+};
+/**
+ * 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 declare function DrawerField({ label, hint, helper, error, controlId, children }: DrawerFieldProps): import("@types/react").JSX.Element;
+/** Two fields side by side. */
+export declare function DrawerFieldRow({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;