@crisp-ui-kit/crisp 0.54.1 → 0.54.2

package/dist/esm/product/formdialog/formdialog.js

@@ -0,0 +1,134 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "../../components/button/index.js";
+import { Dialog, DialogBody, DialogFooter } from "../../components/dialog/index.js";
+import { Switch } from "../../components/switch/index.js";
+import { useCrispMessage, usePrefersReducedMotion } from "../../core/index.js";
+import { formdialogRecipe } from "./formdialog.recipe.js";
+/**
+ * Whether a non-required field inside a `createMode` `FormDialog` gets
+ * `FormField`'s "(optional)" marker automatically — Attio suffixes every
+ * optional label this way on its own "New Company" dialog (crisp#548). A
+ * consumer's own field wrapper reads this once (`useFormDialogOptional`);
+ * `false` outside any `FormDialog`, or on an edit dialog.
+ */
+const OptionalLabelsContext = React.createContext(false);
+/** See `OptionalLabelsContext`. Call from a field wrapper as
+ *  `optional={useFormDialogOptional(required)}`. */
+export function useFormDialogOptional(required) {
+    return React.useContext(OptionalLabelsContext) && !required;
+}
+/**
+ * A modal for a create or edit form — crisp's own `Dialog`/`DialogBody`/
+ * `DialogFooter`, plus everything a record-creating form needs beyond plain
+ * chrome (crisp#548, moved out of internal/grc's own `forms.tsx`, called
+ * from nine places there): dirty tracking with a discard-changes confirm
+ * (any click/change/input inside the form marks it dirty; Escape/backdrop/
+ * header-×/Cancel all route through one `requestClose`, which only asks
+ * when something actually changed — a stacked crisp `Dialog`), a
+ * `beforeunload` guard for a reload or external navigation, and
+ * scroll-to-first-invalid-field once a submit attempt finishes (crisp's own
+ * `FormField` already marks every control `aria-invalid`, so this needs no
+ * per-field wiring). A record needs several fields at once to be valid,
+ * which is why records are not created by inline editing.
+ */
+export function FormDialog({ title, submitLabel, onSubmit, onClose, busy, error, children, wide = false, size, createMode = false, createMoreLabel: createMoreLabelProp, cancelLabel: cancelLabelProp, discardTitle: discardTitleProp, discardConfirmLabel: discardConfirmLabelProp, discardCancelLabel: discardCancelLabelProp, className, ...rest }) {
+    const createMoreLabel = useCrispMessage(createMoreLabelProp, "Create more");
+    const createRecordLabel = useCrispMessage(undefined, "Create record");
+    const cancelLabel = useCrispMessage(cancelLabelProp, "Cancel");
+    const discardTitle = useCrispMessage(discardTitleProp, "Discard changes? Your changes will be lost.");
+    const discardConfirmLabel = useCrispMessage(discardConfirmLabelProp, "Discard");
+    const discardCancelLabel = useCrispMessage(discardCancelLabelProp, "Keep editing");
+    const formId = React.useId();
+    const formRef = React.useRef(null);
+    const switchId = React.useId();
+    // Read at submit time (click, Enter, or Cmd/Ctrl+Enter alike — all three
+    // go through the one <form onSubmit>), so `onSubmit` never has to reach
+    // back into the footer to know which way the switch was left.
+    const [createMore, setCreateMore] = React.useState(false);
+    const [confirmingDiscard, setConfirmingDiscard] = React.useState(false);
+    // Dirtiness is detected generically (any click, change or text input
+    // anywhere inside the form), not wired per field: React delivers these as
+    // synthetic events through the REACT tree, so a Select's portaled listbox
+    // or a DatePicker's portaled calendar — neither a DOM descendant of
+    // <form> — still reaches this handler, the same way a click inside either
+    // already reaches a submit handler on the form itself. A stray click
+    // (opening a picker without choosing anything) can mark this dirty when
+    // nothing actually changed; an occasional unneeded confirmation is a far
+    // smaller cost than silently discarding real, typed work.
+    const dirtyRef = React.useRef(false);
+    const markDirty = () => {
+        dirtyRef.current = true;
+    };
+    const requestClose = () => {
+        if (!dirtyRef.current) {
+            onClose();
+            return;
+        }
+        setConfirmingDiscard(true);
+    };
+    // A reload or an external navigation never reaches `requestClose` above —
+    // needs its own listener, live only while the dialog is mounted.
+    React.useEffect(() => {
+        const onBeforeUnload = (e) => {
+            if (!dirtyRef.current)
+                return;
+            e.preventDefault();
+            e.returnValue = "";
+        };
+        window.addEventListener("beforeunload", onBeforeUnload);
+        return () => window.removeEventListener("beforeunload", onBeforeUnload);
+    }, []);
+    // A refused save that leaves a field invalid is the one thing on screen
+    // that matters, and on a long form the field can be several screens above
+    // the submit button — a failed submit that never moves the viewport reads
+    // as nothing happened. `FormField` already marks every field it was given
+    // an error for with `aria-invalid`, on every control kind, so this needs
+    // no per-field wiring of its own — it just goes looking for the first one
+    // once a submit attempt finishes.
+    // `usePrefersReducedMotion`, not CSS `scroll-behavior: smooth`: this is JS
+    // motion driven by an explicit `behavior` argument, which CSS cannot reach.
+    const reduceMotion = usePrefersReducedMotion();
+    const wasBusy = React.useRef(false);
+    React.useEffect(() => {
+        if (wasBusy.current && !busy) {
+            const invalid = formRef.current?.querySelector('[aria-invalid="true"]');
+            if (invalid) {
+                invalid.scrollIntoView({
+                    block: "center",
+                    ...(reduceMotion
+                        ? { behavior: "auto" }
+                        : { behavior: "smooth" }),
+                });
+                invalid.focus({ preventScroll: true });
+            }
+        }
+        wasBusy.current = Boolean(busy);
+    }, [busy, reduceMotion]);
+    // Attached to the document, not the form: a portaled Popover (a
+    // DatePicker's calendar, a Select's listbox) renders outside the <form>
+    // element in the DOM, and a person pressing the shortcut while one of
+    // those is open should still submit the dialog it belongs to.
+    React.useEffect(() => {
+        if (!createMode)
+            return;
+        const onKeyDown = (e) => {
+            if (busy)
+                return;
+            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                formRef.current?.requestSubmit();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [createMode, busy]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Dialog, { open: true, onOpenChange: (open) => !open && requestClose(), title: title, width: size ?? (wide ? 760 : 640), className: formdialogRecipe({ className }), ...rest, children: [_jsxs(DialogBody, { children: [_jsx(OptionalLabelsContext.Provider, { value: createMode, children: _jsx("form", { ref: formRef, id: formId, className: "crisp-formdialog-form", onSubmit: (e) => {
+                                        e.preventDefault();
+                                        onSubmit(createMore);
+                                    }, onChange: markDirty, onInput: markDirty, onClick: markDirty, children: children }) }), error != null && _jsx("p", { className: "crisp-formdialog-error", children: error })] }), _jsx(DialogFooter, { children: createMode ? (_jsxs("div", { className: "crisp-formdialog-createfoot", children: [_jsxs("span", { className: "crisp-dialog-more", children: [_jsx(Switch, { id: switchId, checked: createMore, onCheckedChange: setCreateMore, "aria-label": createMoreLabel }), _jsx("label", { className: "crisp-formdialog-more-label", htmlFor: switchId, children: createMoreLabel })] }), _jsxs("button", { type: "submit", form: formId, className: "crisp-dialog-submit", disabled: busy, children: [createRecordLabel, _jsxs("span", { className: "crisp-dialog-submit-key", "aria-hidden": "true", children: [_jsx("kbd", { children: "\u2318" }), _jsx("kbd", { children: "\u21B5" })] })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", intent: "neutral", onClick: requestClose, children: cancelLabel }), _jsx(Button, { type: "submit", form: formId, intent: "primary", loading: busy, children: submitLabel })] })) })] }), _jsx(Dialog, { open: confirmingDiscard, onOpenChange: (open) => !open && setConfirmingDiscard(false), title: discardTitle, width: 400, children: _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", intent: "neutral", onClick: () => setConfirmingDiscard(false), children: discardCancelLabel }), _jsx(Button, { type: "button", intent: "danger", onClick: () => {
+                                setConfirmingDiscard(false);
+                                onClose();
+                            }, children: discardConfirmLabel })] }) })] }));
+}
+FormDialog.displayName = "FormDialog";

package/dist/esm/product/formdialog/formdialog.recipe.js

@@ -0,0 +1,23 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The createMode footer's switch+button cluster — measured live off Attio's
+// own "New Company" create dialog (crisp#548): a 16px gap between the
+// "Create more" switch group and the submit button, different from
+// `.crisp-dialog-footer`'s own 12px (the gap every OTHER dialog's
+// Cancel/Save pair uses). One wrapper carries the 16px itself rather than
+// widening the shared token, so it doesn't stretch to the footer's full
+// width — `.crisp-dialog-footer`'s `justify-content: flex-end` still pushes
+// the whole cluster to the right edge as one snug group.
+const config = defineRecipe({
+    name: "formdialog",
+    base: `& .crisp-formdialog-createfoot { display: flex; align-items: center; gap: ${c.space["4"]}; }
+    & .crisp-formdialog-more-label { font-size: ${c.text.md}; color: ${c.fgMuted}; cursor: pointer; }
+    & .crisp-formdialog-error { font-size: ${c.text.md}; color: ${c.fgDanger}; margin: 0; }
+    & .crisp-formdialog-form { display: grid; gap: ${c.space["3"]}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const formdialogRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/formdialog/index.js

@@ -0,0 +1,2 @@
+export { FormDialog, useFormDialogOptional, } from "./formdialog.js";
+export { formdialogRecipe } from "./formdialog.recipe.js";

package/dist/esm/product/importdialog/importdialog.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFileUpload } from "@seed-design/react-file-upload";
+import * as dialog from "@zag-js/dialog";
+import { normalizeProps, Portal, useMachine } from "@zag-js/react";
+import { X } from "lucide-react";
+import * as React from "react";
+import { Button } from "../../components/button/index.js";
+import { cx, hasOpenFloatingLayer, useCrispMessage, withDescribedBy, } from "../../core/index.js";
+import { importdialogRecipe } from "./importdialog.recipe.js";
+let instanceCounter = 0;
+function useImportDialogInstanceId() {
+    const idRef = React.useRef(null);
+    if (idRef.current == null) {
+        instanceCounter += 1;
+        idRef.current = `crisp-importdialog-${instanceCounter}`;
+    }
+    return idRef.current;
+}
+/**
+ * A full-viewport step wizard — Attio's own CSV import flow (measured live:
+ * `1584x871` filling a ~1600x900 viewport, `border-radius: 0`, no shadow,
+ * opaque white). Composes Zag's dialog machine for focus-trap/scroll-lock/
+ * Escape exactly like `Dialog`/`Drawer`, with its own recipe for the
+ * full-bleed chrome neither of those two share (see importdialog.recipe.ts).
+ *
+ * The step header and footer are generic — the wizard doesn't know about
+ * CSV. Step 1's body is typically `ImportDialogDropzone`; steps 2-4
+ * (map columns / review values / preview import) are consumer-supplied
+ * `children`, since Attio's own column-mapping UI wasn't part of this
+ * measurement pass.
+ */
+export function ImportDialog({ open, onOpenChange, title = "Import", steps, activeStep, onStepClick, children, primaryLabel = "Next", onPrimary, primaryDisabled, "aria-label": ariaLabel, closeLabel: closeLabelProp, className, style, "aria-describedby": describedBy, ...rest }) {
+    const closeLabel = useCrispMessage(closeLabelProp, "Close");
+    const id = useImportDialogInstanceId();
+    const service = useMachine(dialog.machine, {
+        id,
+        open,
+        onOpenChange(details) {
+            onOpenChange(details.open);
+        },
+        "aria-label": typeof title === "string" ? title : ariaLabel,
+        // Defer to a nested Menu/Select/Popover/ContextMenu's own Escape
+        // handling (#361) -- see Dialog's identical comment; this composes the
+        // same Zag machine.
+        onEscapeKeyDown(event) {
+            if (hasOpenFloatingLayer())
+                event.preventDefault();
+        },
+    });
+    const api = dialog.connect(service, normalizeProps);
+    if (!api.open)
+        return null;
+    return (_jsx(Portal, { children: _jsxs("div", { className: importdialogRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "crisp-importdialog-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "crisp-importdialog-positioner", children: _jsxs("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("crisp-importdialog-content", className), style: style, "data-crisp-importdialog": id, children: [_jsxs("div", { className: "crisp-importdialog-header", children: [_jsx("h2", { ...api.getTitleProps(), className: "crisp-importdialog-title", children: title }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-importdialog-close", "aria-label": closeLabel, children: _jsx(X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] }), _jsx("nav", { className: "crisp-importdialog-steps", "aria-label": (typeof title === "string" ? title : ariaLabel) ?? "Steps", children: steps.map((step) => {
+                                    const isActive = step.id === activeStep;
+                                    const commonProps = {
+                                        className: "crisp-importdialog-step",
+                                        "data-active": isActive ? "" : undefined,
+                                        "aria-current": isActive ? "step" : undefined,
+                                    };
+                                    return onStepClick ? (_jsx("button", { type: "button", ...commonProps, onClick: () => onStepClick(step.id), children: step.label }, step.id)) : (_jsx("span", { ...commonProps, children: step.label }, step.id));
+                                }) }), _jsx("div", { className: "crisp-importdialog-body", children: children }), _jsx("div", { className: "crisp-importdialog-footer", children: _jsx(Button, { type: "button", intent: "primary", size: "md", disabled: primaryDisabled, onClick: onPrimary, children: primaryLabel }) })] }) })] }) }));
+}
+ImportDialog.displayName = "ImportDialog";
+/**
+ * The step-1 drop target — measured chrome (`border: 1px dashed
+ * rgb(230,231,234)`, `border-radius: 20px`, `background: rgb(251,251,251)`)
+ * over the SAME headless drag/drop + file-picker engine `FileUpload` uses
+ * (`@seed-design/react-file-upload`'s `useFileUpload`), rather than a fork
+ * of it. `FileUpload`'s own rendered markup (a single button carrying one
+ * title + one hint) can't host this dropzone's four separate pieces of copy
+ * — a title, an "or" divider, a "Choose a .CSV file" trigger, and a "Learn
+ * more" link that needs its own `<a href>` — so this composes the hook
+ * directly instead of wrapping `<FileUpload>`, and the engine (not this
+ * file) still owns every bit of drag-state/accept/reject behaviour.
+ */
+export function ImportDialogDropzone({ accept = ".csv", disabled, maxFileSize, onFileAccept, onFileReject, dropLabel = "Drop your .CSV file onto this area to upload", orLabel = "or", chooseLabel = "Choose a .CSV file", learnMoreHref, learnMoreLabel = "Learn more", className, id, ...rest }) {
+    const [rejections, setRejections] = React.useState([]);
+    const { dropzoneProps, triggerProps, hiddenInputProps, inputRef } = useFileUpload({
+        accept,
+        disabled,
+        maxFileSize,
+        maxFiles: 1,
+        onFileReject: (r) => {
+            setRejections(r);
+            onFileReject?.(r);
+        },
+        onFileAccept: (entries) => {
+            setRejections([]);
+            const file = entries[entries.length - 1]?.file;
+            if (file)
+                onFileAccept?.(file);
+        },
+    });
+    return (_jsxs("div", { ...rest, ...dropzoneProps, className: cx("crisp-importdialog-dropzone", className), children: [_jsx("input", { ...hiddenInputProps, id: id ?? hiddenInputProps.id, ref: inputRef, className: "crisp-importdialog-dropzone-input" }), _jsx("span", { className: "crisp-importdialog-dropzone-title", children: dropLabel }), _jsx("span", { className: "crisp-importdialog-dropzone-or", children: orLabel }), _jsx("button", { ...triggerProps, className: "crisp-importdialog-dropzone-choose", children: chooseLabel }), learnMoreHref && (_jsx("a", { className: "crisp-importdialog-dropzone-learnmore", href: learnMoreHref, target: "_blank", rel: "noreferrer", children: learnMoreLabel })), _jsx("ul", { className: "crisp-importdialog-dropzone-errors", "aria-live": "polite", children: rejections.map((r) => (_jsx("li", { className: "crisp-importdialog-dropzone-error", children: r.file.name }, r.file.name))) })] }));
+}
+ImportDialogDropzone.displayName = "ImportDialogDropzone";

package/dist/esm/product/importdialog/importdialog.recipe.js

@@ -0,0 +1,89 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A full-viewport wizard takeover — measured live from Attio's own Import CSV
+// flow (app.attio.com/techpartners/companies -> toolbar "Import / Export" ->
+// "Import CSV"): panel `1584x871` in a ~1600x900 viewport (i.e. it fills the
+// content area, not a small centred modal like `Dialog`), `border-radius: 0`,
+// `box-shadow: none`, opaque `rgb(255,255,255)` background. Unlike
+// Dialog/Drawer's frosted, edge-gutter surfaces (AUTHORING Lesson 30), a
+// full-viewport takeover has no edge to float off of, so it gets its own
+// recipe rather than composing either.
+//
+// The 4-step header renders each step as a 28px pill (`size.row`), 8px
+// corner (`radius.md`), transparent at rest. Attio's own active-step
+// treatment wasn't captured in the measurement pass, so the current step
+// reuses crisp's existing brand-tint pattern (14%/82% `color-mix` — the same
+// ratio `RecordsTable`'s brand-tone tag and `MultiSelect`'s brand chip
+// already use) rather than inventing a new colour — a documented scope
+// decision, not a guess.
+//
+// The dropzone is `border: 1px dashed rgb(230,231,234)` (`borderDropzone`,
+// see tokens/palette.ts), `border-radius: 20px`, `background: rgb(251,251,251)`
+// (`bgSubtle`). 20px sits between the scale's `2xl` (16px) and `full` (999px)
+// with no other measured use yet — left as a raw px per AUTHORING 4b's
+// "genuine one-off" exception rather than added to the shared scale for a
+// single consumer.
+//
+// The primary "Next" button is composed from crisp's own `Button` (`intent`
+// `primary`, `size` `md` — 28px tall, 8px corner, brand solid background —
+// matches the measurement exactly), not a hand-rolled button.
+const config = defineRecipe({
+    name: "importdialog",
+    base: `display: contents; font-family: ${c.font.sans};
+    & .crisp-importdialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
+    & .crisp-importdialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; }
+    & .crisp-importdialog-content {
+      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: relative; display: flex; flex-direction: column; box-sizing: border-box;
+      width: 100%; height: 100%; border-radius: 0; background: ${c.bgSurface}; box-shadow: none;
+      transform: none; opacity: 1; transition: opacity 0.2s ease;
+      @starting-style { opacity: 0; }
+    }
+    & .crisp-importdialog-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["6"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-importdialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; margin: 0; }
+    & .crisp-importdialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .crisp-importdialog-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+
+    & .crisp-importdialog-steps { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; padding: ${c.space["4"]} ${c.space["6"]} 0; }
+    & .crisp-importdialog-step {
+      display: inline-flex; align-items: center; height: ${c.size.row}; padding: 0 ${c.space["2.5"]};
+      border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgMuted};
+      font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: default;
+      transition: background-color .12s, color .12s;
+    }
+    & button.crisp-importdialog-step { cursor: pointer; }
+    & .crisp-importdialog-step[data-active] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
+    & .crisp-importdialog-step:focus-visible { outline: 2px solid ${c.strokeFocusRing}; outline-offset: 1px; }
+
+    & .crisp-importdialog-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: ${c.space["6"]}; }
+
+    & .crisp-importdialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${c.space["6"]}; border-top: 1px solid ${c.borderSubtle}; }
+
+    & .crisp-importdialog-dropzone {
+      box-sizing: border-box; position: relative; flex: 1; min-height: 0;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      gap: ${c.space["1"]}; width: 100%;
+      border: 1px dashed ${c.borderDropzone}; border-radius: 20px; background: ${c.bgSubtle};
+      text-align: center; transition: background-color .12s, border-color .12s;
+    }
+    & .crisp-importdialog-dropzone[data-dragging-over] { border-color: ${c.bgBrandSolid}; background: color-mix(in srgb, ${c.bgBrandSolid} 6%, transparent); }
+    & .crisp-importdialog-dropzone[data-invalid] { border-color: ${c.bgDanger}; }
+    & .crisp-importdialog-dropzone-title { color: ${c.fgPrimary}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; }
+    & .crisp-importdialog-dropzone-or { color: ${c.fgMuted}; font-size: ${c.text.md}; line-height: 18px; }
+    & .crisp-importdialog-dropzone-choose {
+      border: none; background: none; padding: 0; margin: 0; font-family: inherit;
+      font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.bgBrandSolid}; cursor: pointer;
+    }
+    & .crisp-importdialog-dropzone-choose:hover { color: ${c.bgBrandSolidPressed}; }
+    & .crisp-importdialog-dropzone-choose:focus-visible { outline: 2px solid ${c.strokeFocusRing}; outline-offset: 2px; border-radius: ${c.radius.sm}; }
+    & .crisp-importdialog-dropzone-learnmore { color: ${c.fgMuted}; font-size: ${c.text.md}; text-decoration: underline; }
+    & .crisp-importdialog-dropzone-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    & .crisp-importdialog-dropzone-errors { margin: 0; padding: 0; list-style: none; }
+    & .crisp-importdialog-dropzone-errors:empty { position: absolute; }
+    & .crisp-importdialog-dropzone-error { color: ${c.bgDanger}; font-size: ${c.text.md}; line-height: 18px; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const importdialogRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/importdialog/index.js

@@ -0,0 +1,2 @@
+export * from "./importdialog.js";
+export * from "./importdialog.recipe.js";

package/dist/esm/product/savedviews/index.js

@@ -0,0 +1,2 @@
+export { SavedViews, } from "./savedviews.js";
+export { savedviewsRecipe } from "./savedviews.recipe.js";

package/dist/esm/product/savedviews/savedviews.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, MoreVertical, Plus, Users2 } from "lucide-react";
+import * as React from "react";
+import { Menu, MenuItem } from "../../components/menu/index.js";
+import { useListboxKeyboard } from "../../components/select/index.js";
+import { FloatingPortal, hasNestedFloatingLayer, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, useCrispMessage, } from "../../core/index.js";
+import { savedviewsRecipe } from "./savedviews.recipe.js";
+/**
+ * A saved-view switcher — measured from Attio's "All Companies ▾" menu. A
+ * chip trigger opens a popover listing every saved view as a `role="option"`
+ * row (leading coloured icon, name, a hover-revealed kebab of
+ * rename/duplicate/delete), plus a trailing "Create new view" row. The
+ * active view is marked `aria-selected`/`aria-current="page"` and mirrored
+ * onto the trigger's own icon/label.
+ *
+ * Keyboard: while the trigger has focus and the panel is open, ↑/↓ move a
+ * virtual highlight (`aria-activedescendant`, the same "focus stays on the
+ * trigger" model `Select`/`MultiSelect` use without a search field), Enter
+ * chooses the highlighted row, Escape closes — deferring to a still-open
+ * kebab submenu first (`hasOpenFloatingLayer`), so Escape closes one layer
+ * at a time.
+ */
+export function SavedViews({ label, icon, views, activeId, onSelect, onCreate, onRename, onDuplicate, onDelete, onToggleFavorite, createLabel: createLabelProp, renameLabel: renameLabelProp, duplicateLabel: duplicateLabelProp, deleteLabel: deleteLabelProp, favoriteLabel: favoriteLabelProp, viewOptionsLabel: viewOptionsLabelProp, className, "aria-label": ariaLabel, ...rest }) {
+    const createLabel = useCrispMessage(createLabelProp, "Create new view");
+    const renameLabel = useCrispMessage(renameLabelProp, "Rename");
+    const duplicateLabel = useCrispMessage(duplicateLabelProp, "Duplicate");
+    const deleteLabel = useCrispMessage(deleteLabelProp, "Delete");
+    const favoriteLabel = useCrispMessage(favoriteLabelProp, "Add to favorites");
+    const viewOptionsLabel = useCrispMessage(viewOptionsLabelProp, "View options");
+    const autoId = React.useId();
+    const triggerId = `${autoId}-trigger`;
+    // role="combobox" (below) does not take its name from content — unlike a
+    // plain button, aria-activedescendant is only valid on a widget role that
+    // supports it (Select's/MultiSelect's own !searchable trigger is the same
+    // shape). aria-labelledby, resolved recursively, DOES read a referenced
+    // node's own text, so pointing it at the visible label span gives the
+    // trigger a name equal to what's on screen without a second, redundant
+    // aria-label prop — self-referencing (aria-labelledby={triggerId} on the
+    // trigger itself) does not work, since the referenced node's own
+    // name-from-content restriction still applies to it.
+    const triggerLabelId = `${autoId}-trigger-label`;
+    const panelId = `${autoId}-panel`;
+    const optionId = (i) => `${autoId}-opt-${i}`;
+    const [open, setOpen] = React.useState(false);
+    const [up, setUp] = React.useState(false);
+    const [pos, setPos] = React.useState({});
+    const [highlight, setHighlight] = React.useState(-1);
+    const rootRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const panelRef = React.useRef(null);
+    const activeView = views.find((v) => v.id === activeId) ?? null;
+    // the trailing "Create new view" row is one more enabled index, past every
+    // real view
+    const createIndex = views.length;
+    const openPanel = () => {
+        const rect = triggerRef.current?.getBoundingClientRect();
+        if (rect) {
+            const { style, up: flipUp } = placeFloating({
+                rect,
+                gap: 4,
+                flipBelow: 280,
+                anchor: triggerRef.current,
+            });
+            setUp(flipUp);
+            setPos(style);
+        }
+        setHighlight(-1);
+        setOpen(true);
+    };
+    const close = React.useCallback(() => {
+        setOpen(false);
+        triggerRef.current?.focus({ preventScroll: true });
+    }, []);
+    const commit = () => {
+        if (highlight === createIndex) {
+            onCreate();
+            close();
+        }
+        else {
+            const v = views[highlight];
+            if (v) {
+                onSelect(v.id);
+                close();
+            }
+        }
+    };
+    const { onKeyDown: onNavKeys } = useListboxKeyboard({
+        enabledIndexes: Array.from({ length: views.length + 1 }, (_, i) => i),
+        highlight,
+        setHighlight,
+        commit,
+        close,
+        dismiss: () => setOpen(false),
+    });
+    // Registers the portaled panel on the shared floating-layer stack (#339)
+    // so a kebab's own Menu (also portaled, also registered) counts as
+    // "inside" this layer for outside-click purposes, and so this panel's own
+    // Escape can defer to it below.
+    React.useEffect(() => {
+        if (!open || !panelRef.current)
+            return;
+        return registerFloatingLayer(panelRef.current);
+    }, [open]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            const target = e.target;
+            if (rootRef.current?.contains(target))
+                return;
+            if (panelRef.current?.contains(target))
+                return;
+            if (isInsideLaterFloatingLayer(target, panelRef.current))
+                return;
+            setOpen(false);
+        };
+        document.addEventListener("pointerdown", onDown);
+        return () => document.removeEventListener("pointerdown", onDown);
+    }, [open]);
+    // Escape defers to a still-open kebab submenu (core/floating-stack.ts):
+    // without this, both this panel's listener AND the kebab Menu's own
+    // Escape listener fire on the same keydown and both close at once, which
+    // is the double-close bug that module's doc comment warns about. One
+    // Escape now closes the kebab; a second closes the panel.
+    //
+    // `hasNestedFloatingLayer`, not `hasOpenFloatingLayer`: this panel
+    // registers ITSELF on the stack (below), so a plain "is the stack
+    // non-empty" check would always be true the moment this panel is open and
+    // Escape would never reach `close()` — `hasNestedFloatingLayer` excludes
+    // this panel's own slot and only counts a layer registered after it.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key !== "Escape")
+                return;
+            if (hasNestedFloatingLayer(panelRef.current))
+                return;
+            close();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
+    const triggerIcon = activeView ? activeView.icon : icon;
+    const triggerLabel = activeView ? activeView.name : label;
+    return (_jsxs("div", { ref: rootRef, className: savedviewsRecipe({ className }), ...rest, children: [_jsxs("button", { ref: triggerRef, id: triggerId, type: "button", 
+                // combobox, not the bare default "button" role: aria-activedescendant
+                // (the virtual-focus highlight, same model Select/MultiSelect use
+                // without a search field) is only valid on a widget role that
+                // supports it, and combobox's aria-haspopup explicitly allows
+                // "dialog" — the value Attio's own trigger measures — alongside the
+                // more common "listbox".
+                role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? panelId : undefined, "aria-activedescendant": open && highlight >= 0 ? optionId(highlight) : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerLabelId, "data-open": open ? "" : undefined, className: "crisp-savedviews-trigger", onClick: () => (open ? setOpen(false) : openPanel()), onKeyDown: (e) => {
+                    if (open)
+                        onNavKeys(e);
+                    else if (e.key === "ArrowDown" || e.key === "Enter") {
+                        e.preventDefault();
+                        openPanel();
+                    }
+                }, children: [triggerIcon != null && (_jsx("span", { className: "crisp-savedviews-trigger-icon", children: triggerIcon })), _jsx("span", { id: triggerLabelId, className: "crisp-savedviews-trigger-label", children: triggerLabel }), _jsx(ChevronDown, { className: "crisp-savedviews-trigger-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsxs("div", { ref: panelRef, id: panelId, role: "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerLabelId, className: "crisp-savedviews-panel", "data-up": up ? "" : undefined, style: pos, children: [views.map((v, i) => {
+                            const selected = v.id === activeId;
+                            return (_jsxs("div", { id: optionId(i), role: "option", "aria-selected": selected, "aria-current": selected ? "page" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-savedviews-row", onMouseEnter: () => setHighlight(i), onClick: () => {
+                                    onSelect(v.id);
+                                    close();
+                                }, children: [v.icon != null && (_jsx("span", { className: "crisp-savedviews-row-icon", children: v.icon })), _jsx("span", { className: "crisp-savedviews-row-label", children: v.name }), v.shared && (_jsx("span", { className: "crisp-savedviews-row-shared", "aria-hidden": "true", children: _jsx(Users2, { size: 12, strokeWidth: 1.75 }) })), _jsx("div", { className: "crisp-savedviews-kebab-slot", onClick: (e) => e.stopPropagation(), children: _jsxs(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-savedviews-kebab", "aria-label": viewOptionsLabel, children: _jsx(MoreVertical, { size: 14, strokeWidth: 1.75 }) }), children: [onToggleFavorite && (_jsx(MenuItem, { onSelect: () => onToggleFavorite(v.id), children: favoriteLabel })), _jsx(MenuItem, { onSelect: () => onRename(v.id), children: renameLabel }), _jsx(MenuItem, { onSelect: () => onDuplicate(v.id), children: duplicateLabel }), _jsx(MenuItem, { danger: true, onSelect: () => onDelete(v.id), children: deleteLabel })] }) })] }, v.id));
+                        }), _jsxs("div", { id: optionId(createIndex), role: "option", "aria-selected": false, "data-highlighted": highlight === createIndex ? "" : undefined, className: "crisp-savedviews-row", onMouseEnter: () => setHighlight(createIndex), onClick: () => {
+                                onCreate();
+                                close();
+                            }, children: [_jsx("span", { className: "crisp-savedviews-row-icon", "aria-hidden": "true", children: _jsx(Plus, { size: 16, strokeWidth: 1.75 }) }), _jsx("span", { className: "crisp-savedviews-row-label", children: createLabel })] })] }) }))] }));
+}
+SavedViews.displayName = "SavedViews";

package/dist/esm/product/savedviews/savedviews.recipe.js

@@ -0,0 +1,100 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// A saved-view switcher — measured live from Attio's own "All Companies ▾"
+// trigger (app.attio.com/techpartners/companies): a 28px chip opens a
+// popover of 32px `role="option"` rows, each revealing a 20px kebab on
+// hover that opens a second, identical-chrome popover of rename/duplicate/
+// delete actions. The trigger stays un-portaled (`&`-nested); the panel and
+// its rows portal to document.body (#339), so they live in `globalCss`, not
+// nested under `&` — the same split Menu/MultiSelect use and for the same
+// reason: a descendant selector needs real DOM containment, which the
+// portal breaks.
+//
+// Panel chrome (radius 12 / 4px padding / elevation.floating) and row height
+// (32px) are the exact values Menu's own `crisp-menu-content`/`crisp-menu-item`
+// already carry — reused by reference (radius.xl, space["1"], size.menuRow,
+// elevation.floating), not re-measured, since it is the same overlay
+// surface. The panel's measured 308.75×182 size is deliberately NOT
+// hardcoded — it grows with the number of views — so width/height are left
+// to content, with the same 200px floor Menu's own popover uses.
+const config = defineRecipe({
+    name: "savedviews",
+    base: `
+    position: relative; display: inline-flex; font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    /* Trigger fill measured rgb(246,247,247); bgRaised's light value is
+       #f4f4f5 (244,244,245) — a 2-unit-per-channel difference, inside
+       screenshot/anti-aliasing noise, not a second real colour. Reusing the
+       token (Lesson 3 — tokens, not raw px/hex) gets a correct,
+       already-established dark-mode fill for free instead of a light-only
+       literal; AUTHORING.md Lesson 29 is the case where that shortcut went
+       wrong (a flat colour that stayed visible where the reference had
+       none) — this is the opposite risk (a token that already flips per
+       theme, applied to the closest measured match). */
+    & .crisp-savedviews-trigger {
+      box-sizing: border-box; display: inline-flex; align-items: center; gap: ${c.space["1.5"]};
+      height: ${c.size.row}; margin: 0; padding: ${c.space["1"]} ${c.space["1.5"]};
+      border: none; border-radius: ${c.radius.md}; background: ${c.bgRaised};
+      font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary};
+      cursor: pointer; white-space: nowrap; transition: background-color .12s ease;
+    }
+    & .crisp-savedviews-trigger:hover,
+    & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgRaised}); }
+    & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: ${c.size.icon}; height: ${c.size.icon}; }
+    & .crisp-savedviews-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-savedviews-trigger-chevron { flex-shrink: 0; color: ${c.fgMuted}; }
+  `,
+    globalCss: `
+    /* pointer-events: auto (#375) — see Menu/MultiSelect's matching comment:
+       a modal Dialog sets pointer-events: none on document.body, and a
+       portaled layer outside Zag's knowledge inherits that lock. */
+    .crisp-savedviews-panel {
+      font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
+      min-width: 200px; max-height: 360px; overflow-y: auto; padding: ${c.space["1"]};
+      border-radius: ${c.radius.xl}; background: ${c.bgPopover};
+      box-shadow: ${e.floating};
+      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+    }
+    .crisp-savedviews-panel[data-up] { transform-origin: bottom left; }
+    .crisp-savedviews-panel { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+
+    .crisp-savedviews-row {
+      box-sizing: border-box; position: relative; display: flex; align-items: center; gap: ${c.space["1.5"]};
+      height: ${c.size.menuRow}; flex-shrink: 0; padding: ${c.space["1.5"]} ${c.space["2"]};
+      border-radius: ${c.radius.md}; cursor: pointer; -webkit-user-select: none; user-select: none;
+    }
+    .crisp-savedviews-row:hover, .crisp-savedviews-row[data-highlighted] { background: ${c.bgRaised}; }
+    .crisp-savedviews-row-icon { flex-shrink: 0; display: inline-flex; width: ${c.size.icon}; height: ${c.size.icon}; color: ${c.fgMuted}; }
+    .crisp-savedviews-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    .crisp-savedviews-row[aria-selected="true"] .crisp-savedviews-row-label { font-weight: ${c.weight.semibold}; }
+    .crisp-savedviews-row-shared { flex-shrink: 0; display: inline-flex; color: ${c.fgMuted}; }
+
+    /* The kebab's own <Menu> is wrapped in a slot div (savedviews.tsx) that
+       stops a click from bubbling — through the REACT tree, which a portal
+       does not leave, even though the Menu's content is a DOM sibling under
+       document.body — into the row's own onClick. The slot, not the kebab
+       button itself, is what the row's flex layout pushes to the trailing
+       edge. */
+    .crisp-savedviews-kebab-slot { flex-shrink: 0; margin-inline-start: auto; }
+    /* 20px / 4px padding is a component-intrinsic size (AUTHORING.md §4b —
+       "a badge's 20px" is the named example), used once here: raw, not a
+       scale step. */
+    .crisp-savedviews-kebab {
+      box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      width: 20px; height: 20px; padding: ${c.space["1"]}; margin: 0;
+      border: none; border-radius: ${c.radius.sm}; background: none; color: ${c.fgMuted}; cursor: pointer;
+      opacity: 0; transition: opacity .1s ease, background-color .12s ease, color .12s ease;
+    }
+    .crisp-savedviews-row:hover .crisp-savedviews-kebab,
+    .crisp-savedviews-row:focus-within .crisp-savedviews-kebab,
+    .crisp-savedviews-kebab[data-open] { opacity: 1; }
+    .crisp-savedviews-kebab:hover, .crisp-savedviews-kebab[data-open] { background: ${c.bgSurface}; color: ${c.fgPrimary}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const savedviewsRecipe = resolveRecipe(config);
+export default config;