@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/editable-field.d.ts

@@ -0,0 +1,99 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type CiridaeLabels } from "./locale.js";
+import { type SelectOption } from "./select.js";
+/** What a save reports: the saved line's message, or why it failed. */
+export type SaveOutcome = {
+    ok: true;
+    message?: ReactNode;
+} | {
+    ok: false;
+    message: ReactNode;
+};
+export type FieldEdit = {
+    kind: "text";
+    value: string;
+    save: (value: string) => Promise<SaveOutcome>;
+    /**
+     * The change goes through review: while `warning` returns a message for the draft it
+     * shows under the field, and only the `label` button saves.
+     */
+    confirm?: {
+        label: ReactNode;
+        warning: (value: string) => ReactNode | null;
+    };
+} | {
+    kind: "date";
+    /** Epoch milliseconds at local midnight. */
+    value: number;
+    /** Under the calendar, such as what the date was and where it came from. */
+    footer?: ReactNode;
+    save: (value: number) => Promise<SaveOutcome>;
+} | {
+    kind: "list";
+    value: string;
+    options: readonly SelectOption[];
+    save: (value: string) => Promise<SaveOutcome>;
+    emptyMessage?: ReactNode;
+}
+/** Not editable here: a lock with why in its tooltip. */
+ | {
+    kind: "locked";
+    title: string;
+    detail?: ReactNode;
+}
+/** Edited in another system: a link out. */
+ | {
+    kind: "external";
+    label: ReactNode;
+    href?: string;
+    onClick?: () => void;
+};
+/** Where a value came from or who checked it; `onOpen` or `href` opens the source. */
+export type FieldProvenance = {
+    id: string;
+    label: ReactNode;
+    /** A magnifier, or a document for a source that opens. */
+    icon?: ReactNode;
+    onOpen?: () => void;
+    href?: string;
+};
+export type EditableFieldProps = Omit<ComponentProps<"div">, "children"> & {
+    label: string;
+    value: ReactNode;
+    provenance?: readonly FieldProvenance[];
+    /** Beside the value, such as a "Contested" `Badge`. */
+    badge?: ReactNode;
+    /** Under the value while the row is idle. */
+    note?: ReactNode;
+    /** The field needs the reader: the row lifts and this button sits at its end. */
+    action?: {
+        label: ReactNode;
+        onClick: () => void;
+        disabled?: boolean;
+    };
+    edit?: FieldEdit;
+    labels?: Partial<CiridaeLabels["editableField"]>;
+};
+export declare function EditableField({ label, value, provenance, badge, note, action, edit, labels: ownLabels, className, ...props }: EditableFieldProps): import("@types/react").JSX.Element;
+export type ConflictingSource = {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    value: ReactNode;
+    /** At the row's end, such as when the source was synced or who entered it. */
+    meta?: ReactNode;
+};
+export type SourceConflictProps = Omit<ComponentProps<"div">, "children"> & {
+    sources: readonly ConflictingSource[];
+    /** The value used until someone resolves the conflict, and why it is that one. */
+    effective: {
+        value: ReactNode;
+        note?: ReactNode;
+    };
+    /** At the effective row's end, such as a Resolve button. */
+    action?: ReactNode;
+    labels?: Partial<{
+        effectiveValue: string;
+    }>;
+};
+export declare function SourceConflict({ sources, effective, action, labels: ownLabels, className, ...props }: SourceConflictProps): import("@types/react").JSX.Element;

package/dist/components/editable-field.js

@@ -0,0 +1,422 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * A record's field as a row: its label, value and where the value came from. A field with an
+ * `edit` changes in place and saves on its own: the row owns the editing, saving, saved and error
+ * states, and the caller owns what a save does through each edit's `save`. `SourceConflict` sits
+ * under a field whose sources disagree, with each source's value and the one in effect.
+ */
+import { ArrowSquareOutIcon, CheckIcon, FileTextIcon, LockIcon, MagnifyingGlassIcon, PencilSimpleIcon, WarningIcon, } from "@phosphor-icons/react";
+import { useEffect, useId, useRef, useState, } from "react";
+import { css, cx } from "#primitives/css";
+import { Button } from "./button.js";
+import { Calendar } from "./calendar.js";
+import { useHotkey } from "./hotkeys.js";
+import { icon, Spinner } from "./icon.js";
+import { Input } from "./input.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Tooltip } from "./overlays.js";
+import { Combobox } from "./select.js";
+/* The row stacks its label over the value in a narrow box, so each field is its own container. */
+const fieldBox = css({ containerType: "inline-size" });
+const fieldRow = css({
+    position: "relative",
+    display: "grid",
+    gridTemplateColumns: "150px minmax(0, 1fr) auto",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    paddingBlock: "panel.default",
+    paddingInline: "panel.comfortable",
+    borderBottom: "1px solid token(colors.border.panel)",
+    fontSize: "caption",
+    letterSpacing: "compact",
+    "&[data-needs]": {
+        background: "bg.raised",
+        borderBlock: "1px solid token(colors.border.glass)",
+    },
+    "&[data-editable]": { cursor: "pointer", _hover: { background: "bg.rowHover" } },
+    "&[data-editable]:is(:hover, :focus-within) [data-affordance], &[data-editing] [data-affordance]": { opacity: "1" },
+    "&[data-editable]:hover > [data-label]": { color: "fg.secondary" },
+    "@container (max-width: 520px)": {
+        gridTemplateColumns: "minmax(0, 1fr) auto",
+        rowGap: "layout.tightGap",
+        "& > [data-label]": { gridColumn: "1 / -1" },
+    },
+});
+const fieldLabel = css({
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    "[data-needs] > &": { color: "fg.secondary" },
+});
+const fieldValue = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    minHeight: "control.knob",
+    fontSize: "body",
+    fontWeight: "medium",
+    lineHeight: "tight",
+});
+const valueButton = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    minWidth: "0",
+    padding: "none",
+    border: "0",
+    borderRadius: "control",
+    background: "transparent",
+    color: "inherit",
+    font: "inherit",
+    textAlign: "start",
+    cursor: "pointer",
+    _focusVisible: { focusRing: "outer" },
+});
+const affordance = css({
+    color: "fg.muted",
+    opacity: "0",
+    transitionProperty: "opacity",
+    transitionDuration: "fast",
+});
+const lockMark = css({ display: "inline-flex", color: "fg.muted" });
+const externalLink = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    color: "fg.secondary",
+    font: "inherit",
+    fontSize: "caption",
+    textDecoration: "none",
+    cursor: "pointer",
+    _hover: { color: "fg.primary" },
+    _focusVisible: { focusRing: "outer" },
+});
+const provenanceLine = css({
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    marginTop: "control.iconGap",
+    minHeight: "control.knob",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    "& > span, & > button, & > a": {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "layout.tightGap",
+    },
+    "&[data-tone=success] > span:first-child": { color: "accent.green" },
+    "&[data-tone=warning]": { color: "accent.yellow" },
+    "&[data-tone=danger]": { color: "accent.red" },
+});
+const sourceLink = css({
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    color: "inherit",
+    font: "inherit",
+    cursor: "pointer",
+    textAlign: "start",
+    textDecoration: "underline",
+    textDecorationColor: "border.glass",
+    textUnderlineOffset: "2px",
+    _hover: { color: "fg.primary" },
+    _focusVisible: { focusRing: "outer" },
+});
+const fieldNote = css({
+    display: "block",
+    marginTop: "control.iconGap",
+    color: "fg.secondary",
+    fontSize: "code",
+    fontWeight: "medium",
+});
+const editor = css({ width: "200px", maxWidth: "100%", fontSize: "body" });
+const editorValue = css({ position: "relative", display: "flex", alignItems: "center" });
+const tooltipTitle = css({ display: "block", fontWeight: "medium" });
+const tooltipDetail = css({ display: "block", fontSize: "code", opacity: "0.8" });
+const trailingActions = css({ display: "inline-flex", gap: "layout.tightGap" });
+/* The calendar opens above the date editor. */
+const calendarPicker = css({
+    position: "absolute",
+    bottom: "calc(100% + token(spacing.control.iconGap))",
+    insetInlineStart: "0",
+    zIndex: "popover",
+    cursor: "default",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "inset",
+    background: "bg.card",
+    boxShadow: "card",
+    "& > section": { border: "0", background: "transparent" },
+});
+const calendarFooter = css({
+    paddingInline: "panel.default",
+    paddingBottom: "panel.compact",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+});
+/** An editor opens with its text selected, so typing replaces the value. */
+function selectTyped(event) {
+    if (event.target instanceof HTMLInputElement)
+        event.target.select();
+}
+function localMidnight(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+}
+export function EditableField({ label, value, provenance, badge, note, action, edit, labels: ownLabels, className, ...props }) {
+    const locale = useCiridaeLocale();
+    const labels = { ...locale.labels.editableField, ...ownLabels };
+    const formatDate = (timestamp) => locale.formatDate(timestamp);
+    const editable = edit !== undefined && edit.kind !== "locked" && edit.kind !== "external";
+    const [status, setStatus] = useState({ mode: "idle" });
+    const [draft, setDraft] = useState("");
+    const [draftDate, setDraftDate] = useState(0);
+    const [month, setMonth] = useState(() => new Date());
+    const rowRef = useRef(null);
+    const inputRef = useRef(null);
+    const valueRef = useRef(null);
+    // Focus goes back to the value once an edit that had it ends.
+    const restoreFocus = useRef(false);
+    // A pick from the list closes it too; this tells that close from a dismissal.
+    const picked = useRef(false);
+    const labelId = useId();
+    const valueId = useId();
+    const editing = status.mode === "editing" || status.mode === "error";
+    useEffect(() => {
+        if (status.mode === "editing")
+            inputRef.current?.focus();
+        if ((status.mode === "idle" || status.mode === "saved") && restoreFocus.current) {
+            restoreFocus.current = false;
+            valueRef.current?.focus();
+        }
+    }, [status.mode]);
+    const holdsFocus = () => rowRef.current?.contains(document.activeElement) ?? false;
+    const begin = () => {
+        if (!editable || editing || status.mode === "saving")
+            return;
+        picked.current = false;
+        if (edit.kind === "text")
+            setDraft(edit.value);
+        if (edit.kind === "list")
+            setDraft(edit.value);
+        if (edit.kind === "date") {
+            setDraftDate(edit.value);
+            setDraft(formatDate(edit.value));
+            setMonth(new Date(edit.value));
+        }
+        setStatus({ mode: "editing" });
+    };
+    const cancel = () => {
+        restoreFocus.current = holdsFocus();
+        setStatus({ mode: "idle" });
+    };
+    const commit = async (run) => {
+        restoreFocus.current = holdsFocus();
+        setStatus({ mode: "saving" });
+        const outcome = await run();
+        setStatus(outcome.ok
+            ? { mode: "saved", message: outcome.message }
+            : { mode: "error", message: outcome.message });
+    };
+    const saveText = () => {
+        if (edit?.kind !== "text")
+            return;
+        if (draft === edit.value)
+            return cancel();
+        void commit(() => edit.save(draft));
+    };
+    const saveDate = (timestamp) => {
+        if (edit?.kind !== "date")
+            return;
+        if (timestamp === edit.value)
+            return cancel();
+        void commit(() => edit.save(timestamp));
+    };
+    const saveListValue = (next) => {
+        if (edit?.kind !== "list")
+            return;
+        if (next === edit.value)
+            return cancel();
+        setDraft(next);
+        void commit(() => edit.save(next));
+    };
+    // E edits the field while focus is in it, such as on its value.
+    useHotkey("E", begin, {
+        target: rowRef,
+        enabled: editable && !editing,
+        meta: { group: locale.labels.keyboard.record, name: locale.labels.keyboard.editField },
+    });
+    const retry = () => {
+        if (edit?.kind === "text" || edit?.kind === "list")
+            void commit(() => edit.save(draft));
+        if (edit?.kind === "date")
+            void commit(() => edit.save(draftDate));
+    };
+    const warning = edit?.kind === "text" && edit.confirm && status.mode === "editing"
+        ? edit.confirm.warning(draft)
+        : null;
+    // A click outside saves a text edit that needs no review and drops any other.
+    useEffect(() => {
+        if (status.mode !== "editing" || edit?.kind === "list")
+            return;
+        const listener = (event) => {
+            const row = rowRef.current;
+            if (!row || !(event.target instanceof Node) || row.contains(event.target))
+                return;
+            if (edit?.kind === "text" && warning === null)
+                saveText();
+            else
+                cancel();
+        };
+        document.addEventListener("mousedown", listener);
+        return () => document.removeEventListener("mousedown", listener);
+    });
+    const onKeyDown = (event) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            return cancel();
+        }
+        if (event.key !== "Enter")
+            return;
+        event.preventDefault();
+        if (edit?.kind === "text" && warning === null)
+            return saveText();
+        if (edit?.kind === "date") {
+            const typed = new Date(draft);
+            saveDate(Number.isNaN(typed.getTime()) ? draftDate : localMidnight(typed));
+        }
+    };
+    const valueLine = () => {
+        if (!edit || !editing || edit.kind === "locked" || edit.kind === "external") {
+            const shown = _jsx("span", { id: valueId, children: value });
+            return (_jsxs("span", { className: fieldValue, children: [editable && status.mode !== "saving" ? (_jsxs("button", { ref: valueRef, type: "button", className: valueButton, "aria-label": labels.edit(label), "aria-describedby": valueId, children: [shown, _jsx(PencilSimpleIcon, { "data-affordance": "", className: cx(icon({ size: "small" }), affordance), "aria-hidden": "true" })] })) : (shown), badge, edit?.kind === "locked" && (_jsx(Tooltip, { content: _jsxs(_Fragment, { children: [_jsx("span", { className: tooltipTitle, children: edit.title }), edit.detail !== undefined && (_jsx("span", { className: tooltipDetail, children: edit.detail }))] }), children: _jsx("span", { className: lockMark, role: "img", "aria-label": edit.title, tabIndex: 0, children: _jsx(LockIcon, { className: icon({ size: "small" }) }) }) })), edit?.kind === "external" &&
+                        (edit.href !== undefined ? (_jsxs("a", { className: externalLink, href: edit.href, onClick: edit.onClick, children: [edit.label, _jsx(ArrowSquareOutIcon, { className: icon({ size: "small" }) })] })) : (_jsxs("button", { type: "button", className: externalLink, onClick: edit.onClick, children: [edit.label, _jsx(ArrowSquareOutIcon, { className: icon({ size: "small" }) })] }))), status.mode === "saving" && _jsx(Spinner, { size: "small", label: labels.saving })] }));
+        }
+        if (edit.kind === "list") {
+            return (_jsx("span", { className: editorValue, onFocus: selectTyped, children: _jsx("span", { className: editor, children: _jsx(Combobox, { label: label, options: edit.options, value: status.mode === "error" ? draft : edit.value, emptyMessage: edit.emptyMessage, defaultOpen: status.mode === "editing", autoFocus: true, onValueChange: (next) => {
+                            if (next === null)
+                                return;
+                            picked.current = true;
+                            saveListValue(next);
+                        }, onOpenChange: (open) => {
+                            if (!open && !picked.current && status.mode === "editing")
+                                cancel();
+                        } }) }) }));
+        }
+        return (_jsxs("span", { className: editorValue, onFocus: selectTyped, children: [_jsx(Input, { ref: inputRef, className: editor, "aria-labelledby": labelId, "aria-invalid": status.mode === "error" || undefined, value: draft, onChange: (event) => {
+                        setDraft(event.target.value);
+                        if (status.mode === "error")
+                            setStatus({ mode: "editing" });
+                    }, onKeyDown: onKeyDown }), edit.kind === "date" && status.mode === "editing" && (_jsxs("div", { className: calendarPicker, children: [_jsx(Calendar, { month: month, selected: new Date(draftDate), onMonthChange: setMonth, onSelect: (date) => {
+                                const next = localMidnight(date);
+                                setDraftDate(next);
+                                setDraft(formatDate(next));
+                                saveDate(next);
+                            }, weekStartsOn: 1 }), edit.footer !== undefined && _jsx("div", { className: calendarFooter, children: edit.footer })] }))] }));
+    };
+    const statusLine = () => {
+        if (status.mode === "saving")
+            return null;
+        if (status.mode === "saved") {
+            return (_jsxs("span", { className: provenanceLine, "data-tone": "success", children: [_jsxs("span", { children: [_jsx(CheckIcon, { className: icon({ size: "small" }), weight: "bold" }), labels.saved] }), status.message !== undefined && _jsxs("span", { children: ["\u00B7 ", status.message] })] }));
+        }
+        if (status.mode === "error") {
+            return (_jsx("span", { className: provenanceLine, "data-tone": "danger", children: _jsxs("span", { children: [_jsx(WarningIcon, { className: icon({ size: "small" }) }), status.message] }) }));
+        }
+        if (status.mode === "editing" && edit) {
+            if (warning !== null) {
+                return (_jsx("span", { className: provenanceLine, "data-tone": "warning", children: _jsxs("span", { children: [_jsx(WarningIcon, { className: icon({ size: "small" }) }), warning] }) }));
+            }
+            return (_jsx("span", { className: provenanceLine, children: _jsx("span", { children: edit.kind === "list" ? labels.pickHint : labels.saveHint }) }));
+        }
+        if (!provenance?.length)
+            return null;
+        return (_jsx("span", { className: provenanceLine, children: provenance.map((item) => {
+                const opens = item.onOpen !== undefined || item.href !== undefined;
+                const mark = item.icon ?? (_jsx(_Fragment, { children: opens ? (_jsx(FileTextIcon, { className: icon({ size: "small" }) })) : (_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) })) }));
+                if (item.href !== undefined)
+                    return (_jsxs("a", { className: sourceLink, href: item.href, onClick: item.onOpen, children: [mark, item.label] }, item.id));
+                if (item.onOpen !== undefined)
+                    return (_jsxs("button", { type: "button", className: sourceLink, onClick: (event) => {
+                            event.stopPropagation();
+                            item.onOpen?.();
+                        }, children: [mark, item.label] }, item.id));
+                return (_jsxs("span", { children: [mark, item.label] }, item.id));
+            }) }));
+    };
+    const trailing = () => {
+        if (status.mode === "error") {
+            return (_jsxs("span", { className: trailingActions, children: [_jsx(Button, { variant: "secondary", size: "medium", onClick: cancel, children: labels.undo }), _jsx(Button, { variant: "secondary", size: "medium", onClick: retry, children: locale.labels.common.retry })] }));
+        }
+        if (status.mode === "editing" && edit?.kind === "text" && edit.confirm && warning !== null) {
+            const confirmLabel = edit.confirm.label;
+            return (_jsxs("span", { className: trailingActions, children: [_jsx(Button, { variant: "secondary", size: "medium", onClick: cancel, children: locale.labels.common.cancel }), _jsx(Button, { size: "medium", onClick: () => void commit(() => edit.save(draft)), children: confirmLabel })] }));
+        }
+        if (action && !editing) {
+            return (_jsx(Button, { variant: "secondary", size: "medium", disabled: action.disabled, onClick: (event) => {
+                    event.stopPropagation();
+                    action.onClick();
+                }, children: action.label }));
+        }
+        return _jsx("span", {});
+    };
+    return (_jsx("div", { ...props, className: cx(fieldBox, className), "data-ciridae-ui": "", children: _jsxs("div", { ref: rowRef, className: fieldRow, "data-needs": action && !editing ? "" : undefined, "data-editable": editable && !editing ? "" : undefined, "data-editing": editing ? "" : undefined, onClick: begin, children: [_jsx("span", { className: fieldLabel, id: labelId, "data-label": "", children: label }), _jsxs("span", { className: css({ minWidth: "0" }), children: [valueLine(), _jsx("span", { role: "status", children: statusLine() }), note !== undefined && status.mode === "idle" && (_jsx("span", { className: fieldNote, children: note }))] }), trailing()] }) }));
+}
+/* Source conflict: each source's value under a disputed field, then the value in effect. */
+const conflictBlock = css({
+    display: "grid",
+    gap: "layout.controlGap",
+    paddingBlock: "panel.default",
+    paddingInline: "panel.comfortable",
+    borderBottom: "1px solid token(colors.border.panel)",
+    background: "bg.panel",
+    letterSpacing: "compact",
+    containerType: "inline-size",
+});
+const conflictRow = css({
+    display: "grid",
+    gridTemplateColumns: "150px minmax(0, 1fr) auto",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    "@container (max-width: 520px)": {
+        gridTemplateColumns: "minmax(0, 1fr) auto",
+        rowGap: "layout.tightGap",
+        "& > :first-child": { gridColumn: "1 / -1" },
+    },
+});
+const sourceName = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    color: "fg.secondary",
+    fontSize: "code",
+    fontWeight: "medium",
+    "& svg": { fontSize: "icon.small" },
+});
+const sourceValue = css({ fontSize: "body", fontWeight: "medium", lineHeight: "tight" });
+const sourceMeta = css({
+    color: "fg.secondary",
+    fontSize: "code",
+    fontWeight: "medium",
+    "@container (max-width: 520px)": { gridColumn: "1 / -1" },
+});
+const effectiveRow = css({
+    paddingTop: "panel.default",
+    borderTop: "1px solid token(colors.border.panel)",
+});
+const effectiveLabel = css({ fontSize: "code", fontWeight: "medium" });
+const effectiveNote = css({
+    display: "block",
+    marginTop: "layout.tightGap",
+    color: "fg.secondary",
+    fontSize: "code",
+    fontWeight: "medium",
+});
+export function SourceConflict({ sources, effective, action, labels: ownLabels, className, ...props }) {
+    const labels = { ...useCiridaeLocale().labels.editableField, ...ownLabels };
+    return (_jsxs("div", { ...props, className: cx(conflictBlock, className), "data-ciridae-ui": "", children: [sources.map((source) => (_jsxs("div", { className: conflictRow, children: [_jsxs("span", { className: sourceName, children: [source.icon, source.label] }), _jsx("span", { className: sourceValue, children: source.value }), _jsx("span", { className: sourceMeta, children: source.meta })] }, source.id))), _jsxs("div", { className: cx(conflictRow, effectiveRow), children: [_jsx("span", { className: effectiveLabel, children: labels.effectiveValue }), _jsxs("span", { children: [_jsx("span", { className: sourceValue, children: effective.value }), effective.note !== undefined && _jsx("span", { className: effectiveNote, children: effective.note })] }), action ?? _jsx("span", {})] })] }));
+}

package/dist/components/email-input.d.ts

@@ -0,0 +1,12 @@
+import type { InputProps } from "./input.js";
+export type EmailInputProps = Omit<InputProps, "value" | "defaultValue" | "onChange" | "type" | "size"> & {
+    value: readonly string[];
+    onValueChange: (emails: string[]) => void;
+    /** Controlled draft lets a form validate and submit text not yet committed to a chip. */
+    inputValue: string;
+    onInputValueChange: (draft: string) => void;
+    /** Validation belongs to the form's email contract; invalid entries stay editable/removable. */
+    invalidEmails?: readonly string[];
+};
+/** Comma, semicolon, whitespace, Enter, Tab, or blur commits addresses; duplicates are ignored. */
+export declare function EmailInput({ value, onValueChange, inputValue, onInputValueChange, invalidEmails, disabled, className, onKeyDown, onBlur, onPaste, ...props }: EmailInputProps): import("@types/react").JSX.Element;

package/dist/components/email-input.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cx } from "#primitives/css";
+import { Chip } from "./chip.js";
+import { useFieldControl } from "./field-context.js";
+const emailField = css({
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    padding: "control.compactBlock",
+    minHeight: "control.compact",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "field",
+    background: "bg.control",
+    _focusWithin: { focusRing: "outer" },
+    "&[data-invalid]": { borderColor: "accent.red" },
+    "&[data-disabled]": { opacity: "disabled" },
+});
+const draftInput = css({
+    flex: "1",
+    minWidth: "control.search",
+    width: "auto",
+    border: "0",
+    background: "transparent",
+    color: "fg.primary",
+    fontFamily: "sans",
+    fontSize: "caption",
+    height: "control.shortcut",
+    paddingInline: "control.compactInline",
+    outline: "none",
+    _placeholder: { color: "fg.muted" },
+    _focusVisible: { outline: "none", boxShadow: "none" },
+});
+/** Comma, semicolon, whitespace, Enter, Tab, or blur commits addresses; duplicates are ignored. */
+export function EmailInput({ value, onValueChange, inputValue, onInputValueChange, invalidEmails = [], disabled, className, onKeyDown, onBlur, onPaste, ...props }) {
+    // A `Field` names the draft input and describes it with its helper or error, as it does `Input`.
+    const fieldIds = useFieldControl(props);
+    const commit = (text) => {
+        const addresses = text.split(/[\s,;]+/).filter(Boolean);
+        if (addresses.length)
+            onValueChange([...new Set([...value, ...addresses])]);
+        onInputValueChange("");
+    };
+    const updateDraft = (text) => {
+        const parts = text.split(/[\s,;]+/);
+        const draft = parts.pop() ?? "";
+        const addresses = parts.filter(Boolean);
+        if (addresses.length)
+            onValueChange([...new Set([...value, ...addresses])]);
+        onInputValueChange(draft);
+    };
+    return (_jsxs("div", { className: cx(emailField, "ph-no-capture", className), "data-ciridae-ui": "", "data-sentry-mask": true, "data-disabled": disabled || undefined, "data-invalid": fieldIds["aria-invalid"] || undefined, children: [value.map((email) => (_jsx(Chip, { size: "compact", disabled: disabled, invalid: invalidEmails.includes(email), onRemove: () => onValueChange(value.filter((address) => address !== email)), children: email }, email))), _jsx("input", { ...props, ...fieldIds, type: "text", inputMode: "email", autoCapitalize: "none", spellCheck: false, className: draftInput, disabled: disabled, value: inputValue, onChange: (event) => updateDraft(event.target.value), onPaste: (event) => {
+                    onPaste?.(event);
+                    if (event.defaultPrevented)
+                        return;
+                    const text = event.clipboardData.getData("text");
+                    if (!/[\s,;]/.test(text))
+                        return;
+                    event.preventDefault();
+                    const input = event.currentTarget;
+                    const start = input.selectionStart ?? inputValue.length;
+                    const end = input.selectionEnd ?? start;
+                    updateDraft(inputValue.slice(0, start) + text + inputValue.slice(end));
+                }, onKeyDown: (event) => {
+                    onKeyDown?.(event);
+                    if (event.defaultPrevented || event.nativeEvent.isComposing)
+                        return;
+                    if ((event.key === "Enter" || event.key === "Tab") && inputValue.trim()) {
+                        if (event.key === "Enter")
+                            event.preventDefault();
+                        commit(inputValue);
+                    }
+                }, onBlur: (event) => {
+                    // Do not move a clicked action by adding a chip between pointerdown and click.
+                    const nextFocus = event.relatedTarget;
+                    const movingToAction = nextFocus instanceof Element &&
+                        nextFocus.closest('button, a, [role="checkbox"], [role="switch"]');
+                    // Safari button clicks blur without a relatedTarget. Keep that draft for form submission.
+                    if (nextFocus !== null && inputValue.trim() && !movingToAction)
+                        commit(inputValue);
+                    onBlur?.(event);
+                } })] }));
+}

package/dist/components/environment-frame.d.ts

@@ -0,0 +1,13 @@
+import { type SiteBannerProps } from "./site-banner.js";
+import type { ComponentProps, ReactNode } from "react";
+export type EnvironmentFrameProps = ComponentProps<"div"> & {
+    /**
+     * The environment's name, such as "Staging", read as "Staging environment" through the locale's
+     * `shell.environment` label. Omit for builds that should not show an environment banner.
+     */
+    label?: ReactNode;
+    /** The strip's tint: `warning` for a staging build, `info` for dev. */
+    tone?: SiteBannerProps["tone"];
+};
+/** A persistent environment strip and an inset AppShell viewport. */
+export declare function EnvironmentFrame({ label, tone, children, className, ...props }: EnvironmentFrameProps): import("@types/react").JSX.Element;