@ciridae/ui 0.16.1 → 1.0.1

package/dist/components/date-range-picker.d.ts

@@ -0,0 +1,44 @@
+import { type CiridaeLabels } from "./locale.js";
+export type DateRangeValue = {
+    kind: "preset";
+    preset: string;
+} | {
+    kind: "custom";
+    start: string;
+    end: string;
+};
+/** A named range, measured back from `today`. */
+export type DateRangePreset = {
+    value: string;
+    label: string;
+    bounds: (today: Date) => {
+        start: Date;
+        end: Date;
+    };
+};
+/** A day as `yyyy-mm-dd`, in local time. */
+export declare function toIsoDay(date: Date): string;
+/** A `yyyy-mm-dd` day as local midnight. */
+export declare function fromIsoDay(isoDay: string): Date;
+/** Today, Yesterday, Last 7 and 30 days, This month and Last month, in the locale's words. */
+export declare function defaultDateRangePresets(labels: CiridaeLabels["dateRange"]): DateRangePreset[];
+/** The first and last day a range covers, both inclusive; null for an unknown preset. */
+export declare function dateRangeBounds(value: DateRangeValue, presets: readonly DateRangePreset[], today?: Date): {
+    start: Date;
+    end: Date;
+} | null;
+/**
+ * A select-shaped trigger opening the presets, and Pick dates, which swaps them for a calendar:
+ * the first day picked starts the range and the second ends it.
+ */
+export declare function DateRangePicker({ value: ownValue, defaultValue, onValueChange, presets: ownPresets, today, labels: ownLabels, className, }: {
+    value?: DateRangeValue;
+    defaultValue?: DateRangeValue;
+    onValueChange?: (value: DateRangeValue) => void;
+    /** The presets offered; `defaultDateRangePresets` by default. */
+    presets?: readonly DateRangePreset[];
+    /** The day the presets count back from. */
+    today?: Date;
+    labels?: Partial<CiridaeLabels["dateRange"]>;
+    className?: string;
+}): import("@types/react").JSX.Element;

package/dist/components/date-range-picker.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * A list's date range: a preset from the list, or two days picked on the calendar. The value is
+ * plain data (`{ kind: "preset", preset }` or `{ kind: "custom", start, end }` with `yyyy-mm-dd`
+ * days), so it round-trips through a URL; `dateRangeBounds` turns it into the days it covers.
+ */
+import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { css, cx } from "#primitives/css";
+import { Calendar } from "./calendar.js";
+import { useControllableState } from "./controllable-state.js";
+import { Divider } from "./data-display.js";
+import { icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Popover } from "./overlays.js";
+function addDays(date, days) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+}
+function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+/** A day as `yyyy-mm-dd`, in local time. */
+export function toIsoDay(date) {
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${date.getFullYear()}-${month}-${day}`;
+}
+/** A `yyyy-mm-dd` day as local midnight. */
+export function fromIsoDay(isoDay) {
+    const [year, month, day] = isoDay.split("-").map(Number);
+    return new Date(year, (month || 1) - 1, day || 1);
+}
+/** Today, Yesterday, Last 7 and 30 days, This month and Last month, in the locale's words. */
+export function defaultDateRangePresets(labels) {
+    return [
+        { value: "today", label: labels.today, bounds: (today) => ({ start: today, end: today }) },
+        {
+            value: "yesterday",
+            label: labels.yesterday,
+            bounds: (today) => ({ start: addDays(today, -1), end: addDays(today, -1) }),
+        },
+        {
+            value: "last_7_days",
+            label: labels.last7Days,
+            bounds: (today) => ({ start: addDays(today, -6), end: today }),
+        },
+        {
+            value: "last_30_days",
+            label: labels.last30Days,
+            bounds: (today) => ({ start: addDays(today, -29), end: today }),
+        },
+        {
+            value: "this_month",
+            label: labels.thisMonth,
+            bounds: (today) => ({
+                start: new Date(today.getFullYear(), today.getMonth(), 1),
+                end: new Date(today.getFullYear(), today.getMonth() + 1, 0),
+            }),
+        },
+        {
+            value: "last_month",
+            label: labels.lastMonth,
+            bounds: (today) => ({
+                start: new Date(today.getFullYear(), today.getMonth() - 1, 1),
+                end: new Date(today.getFullYear(), today.getMonth(), 0),
+            }),
+        },
+    ];
+}
+/** The first and last day a range covers, both inclusive; null for an unknown preset. */
+export function dateRangeBounds(value, presets, today = new Date()) {
+    if (value.kind === "custom")
+        return { start: fromIsoDay(value.start), end: fromIsoDay(value.end) };
+    const preset = presets.find((candidate) => candidate.value === value.preset);
+    return preset ? preset.bounds(startOfDay(today)) : null;
+}
+const trigger = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    height: "control.default",
+    paddingInline: "control.compactInline",
+    border: "1px solid transparent",
+    borderRadius: "action",
+    background: "bg.glass",
+    color: "fg.primary",
+    fontFamily: "sans",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    whiteSpace: "nowrap",
+    cursor: "pointer",
+    _hover: { background: "bg.glassHover" },
+    "&[data-popup-open]": { borderColor: "fg.primary" },
+    _focusVisible: { focusRing: "outer" },
+});
+const options = css({ display: "grid", width: "222px" });
+const option = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    height: "control.compact",
+    paddingInline: "menu.itemInline",
+    border: "0",
+    borderRadius: "control",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    textAlign: "start",
+    cursor: "pointer",
+    _hover: { background: "bg.glass" },
+    _focusVisible: { focusRing: "inset" },
+});
+const checkSlot = css({ display: "inline-flex", width: "14px", flexShrink: "0" });
+/**
+ * A select-shaped trigger opening the presets, and Pick dates, which swaps them for a calendar:
+ * the first day picked starts the range and the second ends it.
+ */
+export function DateRangePicker({ value: ownValue, defaultValue = { kind: "preset", preset: "last_7_days" }, onValueChange, presets: ownPresets, today = new Date(), labels: ownLabels, className, }) {
+    const { labels: localeLabels, formatDate } = useCiridaeLocale();
+    const labels = { ...localeLabels.dateRange, ...ownLabels };
+    const presets = ownPresets ?? defaultDateRangePresets(labels);
+    const [value, setValue] = useControllableState(ownValue, defaultValue, onValueChange);
+    const [open, setOpen] = useState(false);
+    const [picking, setPicking] = useState(false);
+    const [month, setMonth] = useState(today);
+    const [start, setStart] = useState(undefined);
+    const changeOpen = (next) => {
+        setOpen(next);
+        setPicking(false);
+        setStart(undefined);
+    };
+    const pickDay = (day) => {
+        if (!start) {
+            setStart(day);
+            return;
+        }
+        const [earlier, later] = day < start ? [day, start] : [start, day];
+        setValue({ kind: "custom", start: toIsoDay(earlier), end: toIsoDay(later) });
+        changeOpen(false);
+    };
+    const shortDay = (isoDay) => formatDate(fromIsoDay(isoDay), { month: "short", day: "numeric" });
+    const valueLabel = value.kind === "custom"
+        ? labels.range(shortDay(value.start), shortDay(value.end))
+        : (presets.find((preset) => preset.value === value.preset)?.label ?? value.preset);
+    return (_jsx(Popover, { open: open, onOpenChange: changeOpen, density: "compact", trigger: _jsxs("button", { type: "button", className: cx(trigger, className), "aria-label": `${labels.label}: ${valueLabel}`, "data-ciridae-ui": "", "data-edge": "glass", children: [valueLabel, _jsx(CaretDownIcon, { className: icon({ size: "small" }) })] }), children: picking ? (_jsx(Calendar, { month: month, selected: start, onMonthChange: setMonth, onSelect: pickDay })) : (_jsxs("div", { className: options, children: [presets.map((preset) => (_jsxs("button", { type: "button", className: option, onClick: () => {
+                        setValue({ kind: "preset", preset: preset.value });
+                        changeOpen(false);
+                    }, children: [_jsx("span", { className: checkSlot, children: value.kind === "preset" && value.preset === preset.value && (_jsx(CheckIcon, { className: icon({ size: "small" }), weight: "bold" })) }), preset.label] }, preset.value))), _jsx(Divider, { inset: "menu" }), _jsxs("button", { type: "button", className: option, onClick: () => setPicking(true), children: [_jsx("span", { className: checkSlot, children: value.kind === "custom" && (_jsx(CheckIcon, { className: icon({ size: "small" }), weight: "bold" })) }), labels.pickDates] })] })) }));
+}

package/dist/components/date-time.d.ts

@@ -0,0 +1,11 @@
+import { type DateInput } from "./locale.js";
+/**
+ * One timestamp style for the whole app: recent values read relatively ("3 hours ago"), older
+ * ones as a short date, and the exact time is always on hover. `dateTime` always shows the date and
+ * time of day. `relative` also supports future deadlines. Relative labels refresh while mounted.
+ * Everything formats through the `CiridaeLocaleProvider`'s locale.
+ */
+export declare function DateTime({ value, mode, }: {
+    value: DateInput | null;
+    mode?: "auto" | "date" | "dateTime" | "relative";
+}): import("@types/react").JSX.Element | null;

package/dist/components/date-time.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isThisYear } from "date-fns";
+import { useEffect, useState } from "react";
+import { toDate, useCiridaeLocale } from "./locale.js";
+/** A week: newer than this reads relatively, older reads as a date. */
+const relativeWindowMs = 7 * 86400000;
+/**
+ * One timestamp style for the whole app: recent values read relatively ("3 hours ago"), older
+ * ones as a short date, and the exact time is always on hover. `dateTime` always shows the date and
+ * time of day. `relative` also supports future deadlines. Relative labels refresh while mounted.
+ * Everything formats through the `CiridaeLocaleProvider`'s locale.
+ */
+export function DateTime({ value, mode = "auto", }) {
+    const { formatDate, formatDateTime, formatRelative } = useCiridaeLocale();
+    const [now, setNow] = useState(Date.now);
+    const date = value === null ? null : toDate(value);
+    const timestamp = date?.getTime();
+    const ageMs = timestamp === undefined ? null : now - timestamp;
+    const isRelative = mode === "relative" ||
+        (mode === "auto" && ageMs !== null && ageMs >= 0 && ageMs < relativeWindowMs);
+    useEffect(() => {
+        if (!isRelative)
+            return;
+        setNow(Date.now());
+        const timer = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(timer);
+    }, [isRelative, timestamp]);
+    if (!date)
+        return null;
+    const shortDate = (withYear) => formatDate(date, { month: "short", day: "numeric", ...(withYear ? { year: "numeric" } : {}) });
+    return (_jsx("time", { dateTime: date.toISOString(), title: formatDateTime(date), children: isRelative
+            ? formatRelative(date, now)
+            : mode === "date"
+                ? shortDate(true)
+                : mode === "dateTime"
+                    ? formatDateTime(date, {
+                        month: "short",
+                        day: "numeric",
+                        ...(isThisYear(date) ? {} : { year: "numeric" }),
+                        hour: "numeric",
+                        minute: "2-digit",
+                    })
+                    : shortDate(!isThisYear(date)) }));
+}

package/dist/components/dialog-height-context.d.ts

@@ -0,0 +1,2 @@
+/** A Wizard starts a new height scope on each step; filtering within that step keeps its height. */
+export declare const DialogHeightResetContext: import("@types/react").Context<(() => void) | null>;

package/dist/components/dialog-height-context.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+/** A Wizard starts a new height scope on each step; filtering within that step keeps its height. */
+export const DialogHeightResetContext = createContext(null);

package/dist/components/document-viewer.d.ts

@@ -0,0 +1,62 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentProps, type ReactNode } from "react";
+import { type CiridaeLabels } from "./locale.js";
+import type { Tone } from "./badge.js";
+/** One page, drawn at `width` by `height` (its natural size, such as PDF points) and scaled. */
+export type DocumentPage = {
+    id: string;
+    width: number;
+    height: number;
+    /** Draws the page at its natural size; takes precedence over `src`. */
+    render?: () => ReactNode;
+    /** An image of the page, such as a rendered PDF page. */
+    src?: string;
+};
+/** A spot on a page, as fractions of the page's width and height from its top-start corner. */
+export type DocumentRegionBox = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+export type DocumentRegion = {
+    id: string;
+    pageId: string;
+    box: DocumentRegionBox;
+    /** Names the region on the page while it is marked, such as the field read from it. */
+    label?: string;
+    /** `info` by default; `warning` for a value that needs a person, say. */
+    tone?: Tone;
+};
+/** A scale (1 is the page's natural size), or fit the whole page or its width to the well. */
+export type DocumentZoom = number | "page" | "width";
+export type DocumentViewerProps = Omit<ComponentProps<"div">, "children"> & {
+    pages: readonly DocumentPage[];
+    regions?: readonly DocumentRegion[];
+    activeRegionId?: string | null;
+    defaultActiveRegionId?: string | null;
+    onActiveRegionChange?: (regionId: string | null) => void;
+    pageId?: string;
+    defaultPageId?: string;
+    onPageChange?: (pageId: string) => void;
+    zoom?: DocumentZoom;
+    /** `"page"` by default. */
+    defaultZoom?: DocumentZoom;
+    onZoomChange?: (zoom: DocumentZoom) => void;
+    /** Beside the viewer, stacking under it on narrow screens: the fields, as `DocumentField`s. */
+    aside?: ReactNode;
+    /** At the toolbar's end, such as Download. */
+    actions?: ReactNode;
+    labels?: Partial<CiridaeLabels["documentViewer"]>;
+};
+export declare function DocumentViewer({ pages, regions, activeRegionId: ownActiveRegionId, defaultActiveRegionId, onActiveRegionChange, pageId: ownPageId, defaultPageId, onPageChange, zoom: ownZoom, defaultZoom, onZoomChange, aside, actions, labels: ownLabels, className, ...props }: DocumentViewerProps): import("@types/react").JSX.Element;
+export type DocumentFieldProps = useRender.ComponentProps<"button"> & {
+    /** The region this field was read from; selecting either marks the other. */
+    regionId: string;
+};
+/**
+ * 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 declare function DocumentField({ regionId, render, className, onClick, onMouseEnter, onMouseLeave, ...props }: DocumentFieldProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;