@crisp-ui-kit/crisp 0.54.1 → 0.54.2

package/dist/cjs/components/datatable/datatable.js

@@ -337,7 +337,7 @@ function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
                     onCommit(v);
             } }) }));
 }
-function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst = true, stickyLast = false, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }) {
+function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst = true, stickyLast = false, scrollProps, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }) {
     // crisp/#471: same resolution order as TableToolbar's own — an explicit
     // prop wins, then the provider's translation of the built-in English
     // default, then that default itself with no provider in the tree.
@@ -818,6 +818,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
         return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
     }
     return ((0, jsx_runtime_1.jsxs)("div", { ref: gridRef, className: (0, datatable_recipe_1.datatableRecipe)({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-datatable-toolbar", children: [columnMenu && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-viewsettings", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), viewSettingsLabel] }), children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-group-label", children: columnsGroupLabel }), allColumns.map((c) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-count", children: resolvedCountLabel(rows.length, data.length) })), toolbar] })), (0, jsx_runtime_1.jsxs)(table_1.Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+                    ...scrollProps,
                     ref: scrollRef,
                     onScroll: (e) => {
                         const el = e.currentTarget;

package/dist/cjs/components/datatable/datatable.recipe.js

@@ -69,6 +69,10 @@ const config = (0, core_1.defineRecipe)({
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: ${tokens_1.contract.bgSurface}; }
     & th[data-sticky] { z-index: 3; }
+    /* #554: a footer sticky-column cell sits in the bottom-sticky row (table.recipe.ts's
+       \`tfoot td { z-index: 2 }\`), which \`td[data-sticky]\`'s own higher-specificity
+       \`z-index: 1\` would otherwise undercut -- keep it level with the row it's in. */
+    & tfoot td[data-sticky] { z-index: 2; }
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface}); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.bgSurface}); }
     & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }

package/dist/cjs/components/mentionchip/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mentionChipRecipe = exports.MentionChip = void 0;
+var mentionchip_1 = require("./mentionchip");
+Object.defineProperty(exports, "MentionChip", { enumerable: true, get: function () { return mentionchip_1.MentionChip; } });
+var mentionchip_recipe_1 = require("./mentionchip.recipe");
+Object.defineProperty(exports, "mentionChipRecipe", { enumerable: true, get: function () { return mentionchip_recipe_1.mentionChipRecipe; } });

package/dist/cjs/components/mentionchip/mentionchip.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MentionChip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const mentionchip_recipe_1 = require("./mentionchip.recipe");
+/**
+ * A standalone "@mention" chip — the same look `RichTextEditor` draws
+ * inline while an editor is live (`.crisp-rte-mention`), exported on its
+ * own for a consumer rendering a mention OUTSIDE a mounted editor: a
+ * comment thread, a note's collapsed preview, anywhere a stored
+ * `@[Name](actor:id)`-shaped token needs to read as a person, not literal
+ * markup. Renders whatever `children` is given (the trigger character
+ * included, if the caller wants one, matching how `RichTextEditor`'s own
+ * chip includes it) rather than assuming an `@` prefix itself — plain text,
+ * no built-in click/remove behaviour (none was asked for; add one once a
+ * real interaction is measured, the same reasoning `Chip`'s own doc gives
+ * for not guessing a remove affordance).
+ */
+exports.MentionChip = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(core_1.Primitive.span, { ref: ref, asChild: asChild, className: (0, mentionchip_recipe_1.mentionChipRecipe)({ className }), ...props }));
+});
+exports.MentionChip.displayName = "MentionChip";

package/dist/cjs/components/mentionchip/mentionchip.recipe.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spec = exports.mentionChipRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The exact same values `product/richtext`'s own inline "@mention" span
+// uses (`.crisp-rte-mention`, richtext.recipe.ts) — not re-measured against
+// Attio independently (#428's own doc: no live @mention was reachable to
+// read computed styles from, and typing one to create one is off-limits),
+// reused verbatim from the one measured "brand" tag/chip this repo already
+// has (Chip's own `tone="brand"`). Pulled out to its own top-level recipe,
+// rather than importing richtext's, because `.crisp-rte-mention`'s CSS is
+// nested under richtext's own root selector (`&`, i.e. native CSS
+// nesting) — it only resolves inside a mounted `RichTextEditor`. A
+// standalone consumer rendering a mention OUTSIDE an editor (a comment
+// thread, a note preview list) needs the same look with no such ancestor,
+// which is what this recipe is for. Kept deliberately un-pill-shaped (no
+// fixed height, no ring) unlike Chip's own `brand` tone: this reads as
+// tinted text flowing inside a sentence, the same as a live mention does
+// mid-edit, not a standalone tag sitting in its own table cell.
+const spec = (0, core_1.defineSpec)({
+    name: "mention-chip",
+    base: {
+        display: "inline",
+        borderRadius: tokens_1.contract.radius.chip,
+        paddingInline: tokens_1.contract.space["1"],
+        background: `color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent)`,
+        color: `color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary})`,
+        fontWeight: tokens_1.contract.weight.medium,
+        cursor: "default",
+    },
+});
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.mentionChipRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+});
+exports.default = config;

package/dist/cjs/components/table/table.recipe.js

@@ -11,18 +11,30 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "table",
     base: `display: block; box-sizing: border-box; background: ${tokens_1.contract.bgSurface};
-    & .crisp-table-scroll { overflow-x: auto; }
+    /* #554: both axes -- a consumer bounds the height via \`scrollProps\`
+       (style/className on this element), and the header/footer below pin
+       inside it exactly the way Attio's own grid does ("Both the header and
+       the summary row are sticky, on the scroll container rather than the
+       cells" -- docs/study/attio-table.md). Unbounded, \`overflow: auto\`
+       shows no vertical scrollbar and nothing sticks, so this is a no-op
+       for every existing consumer that never set a height. */
+    & .crisp-table-scroll { overflow: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
     /* #465: 12px, not crisp's old 8px -- measured on a live header cell
        (padding: 0 12px) and independently on a body cell's text inset
        (getBoundingClientRect delta from the cell edge). Matches
        ColumnCalc's own already-correct 12px trigger inset. */
     & th, & td { position: relative; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    & th { height: ${tokens_1.contract.size.tableHeader}; background: ${tokens_1.contract.bgSurface}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); user-select: none; }
+    /* #554: sticky on the vertical axis, mirroring RecordsTable's own
+       \`.crisp-recordstable-th\`. z-index 2 sits above a plain body cell (auto)
+       and below a sticky-column corner cell (DataTable's \`th[data-sticky]\`,
+       z-index 3), so the corner always wins. */
+    & th { position: sticky; top: 0; z-index: 2; height: ${tokens_1.contract.size.tableHeader}; background: ${tokens_1.contract.bgSurface}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); user-select: none; }
     & td { color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSurface}; }
     & th:last-child, & td:last-child { border-inline-end: none; }
     & tbody tr:last-child td { border-bottom: none; }
-    & tfoot td { border-top: 1px solid ${tokens_1.contract.borderSubtle}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    /* #554: sticky to the bottom, mirroring \`.crisp-recordstable-sum\`. */
+    & tfoot td { position: sticky; bottom: 0; z-index: 2; border-top: 1px solid ${tokens_1.contract.borderSubtle}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
     & caption { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2"]}; text-align: start; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.fgMuted}; caption-side: bottom; }
     & td[data-align="right"], & th[data-align="right"] { text-align: end; }
     & td[data-align="center"], & th[data-align="center"] { text-align: center; }`,

package/dist/cjs/core/floating-stack.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.registerFloatingLayer = registerFloatingLayer;
 exports.isInsideLaterFloatingLayer = isInsideLaterFloatingLayer;
+exports.hasNestedFloatingLayer = hasNestedFloatingLayer;
 exports.hasOpenFloatingLayer = hasOpenFloatingLayer;
 /**
  * Tracks every currently-open `FloatingPortal` layer, in open order, so a
@@ -53,6 +54,23 @@ function isInsideLaterFloatingLayer(target, self) {
     }
     return false;
 }
+/**
+ * True when a layer is registered strictly after `self` — i.e. `self` has
+ * spawned a still-open nested layer of its own (a row's kebab `Menu` inside
+ * `SavedViews`' own panel, e.g.).
+ *
+ * This is `hasOpenFloatingLayer`'s sibling for a caller that DOES register
+ * itself on this stack: `hasOpenFloatingLayer` reads "is the stack
+ * non-empty", which is always true for such a caller once its own layer is
+ * open — checking that before closing on Escape would defer to itself
+ * forever and Escape would never close it. `self`'s own position on the
+ * stack has to be excluded from the count, which `hasOpenFloatingLayer`
+ * cannot do since it takes no argument.
+ */
+function hasNestedFloatingLayer(self) {
+    const selfIndex = self ? stack.indexOf(self) : -1;
+    return selfIndex + 1 < stack.length;
+}
 /**
  * True when at least one `Select`/`MultiSelect`/`Menu`/`Popover`/
  * `ContextMenu` is currently open, anywhere (#361).

package/dist/cjs/core/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useMentionTrigger = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.matchMentionTrigger = exports.useCrispMessages = exports.useCrispMessage = exports.useCrispComponentDefaults = exports.CrispMessagesProvider = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = exports.cellDatePrecision = exports.caretRectInField = void 0;
+exports.usePrefersReducedMotion = exports.useMentionTrigger = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.specToRecipe = exports.defineSpec = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.matchMentionTrigger = exports.useCrispMessages = exports.useCrispMessage = exports.useCrispComponentDefaults = exports.CrispMessagesProvider = exports.formValueStyle = exports.registerFloatingLayer = exports.isInsideLaterFloatingLayer = exports.hasOpenFloatingLayer = exports.hasNestedFloatingLayer = exports.FloatingPortal = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = exports.parseCellDate = exports.formatCellDate = exports.cellDatePrecision = exports.caretRectInField = void 0;
 var caret_rect_1 = require("./caret-rect");
 Object.defineProperty(exports, "caretRectInField", { enumerable: true, get: function () { return caret_rect_1.caretRectInField; } });
 var cell_date_1 = require("./cell-date");
@@ -32,6 +32,7 @@ Object.defineProperty(exports, "isRtlElement", { enumerable: true, get: function
 var floating_portal_1 = require("./floating-portal");
 Object.defineProperty(exports, "FloatingPortal", { enumerable: true, get: function () { return floating_portal_1.FloatingPortal; } });
 var floating_stack_1 = require("./floating-stack");
+Object.defineProperty(exports, "hasNestedFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.hasNestedFloatingLayer; } });
 Object.defineProperty(exports, "hasOpenFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.hasOpenFloatingLayer; } });
 Object.defineProperty(exports, "isInsideLaterFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.isInsideLaterFloatingLayer; } });
 Object.defineProperty(exports, "registerFloatingLayer", { enumerable: true, get: function () { return floating_stack_1.registerFloatingLayer; } });

package/dist/cjs/index.js

@@ -49,6 +49,7 @@ __exportStar(require("./components/heatmapchart"), exports);
 __exportStar(require("./components/input"), exports);
 __exportStar(require("./components/kbd"), exports);
 __exportStar(require("./components/linechart"), exports);
+__exportStar(require("./components/mentionchip"), exports);
 __exportStar(require("./components/menu"), exports);
 __exportStar(require("./components/middletruncate"), exports);
 __exportStar(require("./components/multiselect"), exports);
@@ -88,7 +89,9 @@ __exportStar(require("./product/board"), exports);
 __exportStar(require("./product/command"), exports);
 __exportStar(require("./product/entitycard"), exports);
 __exportStar(require("./product/flowcanvas"), exports);
+__exportStar(require("./product/formdialog"), exports);
 __exportStar(require("./product/headerbar"), exports);
+__exportStar(require("./product/importdialog"), exports);
 __exportStar(require("./product/inbox"), exports);
 __exportStar(require("./product/listpage"), exports);
 __exportStar(require("./product/navitem"), exports);
@@ -97,11 +100,14 @@ __exportStar(require("./product/recordpage"), exports);
 __exportStar(require("./product/recordpanel"), exports);
 __exportStar(require("./product/recordstable"), exports);
 __exportStar(require("./product/richtext"), exports);
+__exportStar(require("./product/savedviews"), exports);
 __exportStar(require("./product/settingssection"), exports);
 __exportStar(require("./product/settingsshell"), exports);
 __exportStar(require("./product/sidebar"), exports);
 __exportStar(require("./product/statlist"), exports);
 __exportStar(require("./product/tasklist"), exports);
+__exportStar(require("./product/taskstable"), exports);
+__exportStar(require("./product/themepicker"), exports);
 __exportStar(require("./product/trialbanner"), exports);
 __exportStar(require("./product/viewtoggle"), exports);
 // design tokens + recipe core (for building custom components)

package/dist/cjs/product/formdialog/formdialog.js

@@ -0,0 +1,171 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormDialogOptional = useFormDialogOptional;
+exports.FormDialog = FormDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const button_1 = require("../../components/button");
+const dialog_1 = require("../../components/dialog");
+const switch_1 = require("../../components/switch");
+const core_1 = require("../../core");
+const formdialog_recipe_1 = require("./formdialog.recipe");
+/**
+ * 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)}`. */
+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.
+ */
+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 = (0, core_1.useCrispMessage)(createMoreLabelProp, "Create more");
+    const createRecordLabel = (0, core_1.useCrispMessage)(undefined, "Create record");
+    const cancelLabel = (0, core_1.useCrispMessage)(cancelLabelProp, "Cancel");
+    const discardTitle = (0, core_1.useCrispMessage)(discardTitleProp, "Discard changes? Your changes will be lost.");
+    const discardConfirmLabel = (0, core_1.useCrispMessage)(discardConfirmLabelProp, "Discard");
+    const discardCancelLabel = (0, core_1.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 = (0, core_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { open: true, onOpenChange: (open) => !open && requestClose(), title: title, width: size ?? (wide ? 760 : 640), className: (0, formdialog_recipe_1.formdialogRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)(dialog_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(OptionalLabelsContext.Provider, { value: createMode, children: (0, jsx_runtime_1.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 && (0, jsx_runtime_1.jsx)("p", { className: "crisp-formdialog-error", children: error })] }), (0, jsx_runtime_1.jsx)(dialog_1.DialogFooter, { children: createMode ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-formdialog-createfoot", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-dialog-more", children: [(0, jsx_runtime_1.jsx)(switch_1.Switch, { id: switchId, checked: createMore, onCheckedChange: setCreateMore, "aria-label": createMoreLabel }), (0, jsx_runtime_1.jsx)("label", { className: "crisp-formdialog-more-label", htmlFor: switchId, children: createMoreLabel })] }), (0, jsx_runtime_1.jsxs)("button", { type: "submit", form: formId, className: "crisp-dialog-submit", disabled: busy, children: [createRecordLabel, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-dialog-submit-key", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("kbd", { children: "\u2318" }), (0, jsx_runtime_1.jsx)("kbd", { children: "\u21B5" })] })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "neutral", onClick: requestClose, children: cancelLabel }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "submit", form: formId, intent: "primary", loading: busy, children: submitLabel })] })) })] }), (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { open: confirmingDiscard, onOpenChange: (open) => !open && setConfirmingDiscard(false), title: discardTitle, width: 400, children: (0, jsx_runtime_1.jsxs)(dialog_1.DialogFooter, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "neutral", onClick: () => setConfirmingDiscard(false), children: discardCancelLabel }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "danger", onClick: () => {
+                                setConfirmingDiscard(false);
+                                onClose();
+                            }, children: discardConfirmLabel })] }) })] }));
+}
+FormDialog.displayName = "FormDialog";

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formdialogRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "formdialog",
+    base: `& .crisp-formdialog-createfoot { display: flex; align-items: center; gap: ${tokens_1.contract.space["4"]}; }
+    & .crisp-formdialog-more-label { font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+    & .crisp-formdialog-error { font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgDanger}; margin: 0; }
+    & .crisp-formdialog-form { display: grid; gap: ${tokens_1.contract.space["3"]}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.formdialogRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formdialogRecipe = exports.useFormDialogOptional = exports.FormDialog = void 0;
+var formdialog_1 = require("./formdialog");
+Object.defineProperty(exports, "FormDialog", { enumerable: true, get: function () { return formdialog_1.FormDialog; } });
+Object.defineProperty(exports, "useFormDialogOptional", { enumerable: true, get: function () { return formdialog_1.useFormDialogOptional; } });
+var formdialog_recipe_1 = require("./formdialog.recipe");
+Object.defineProperty(exports, "formdialogRecipe", { enumerable: true, get: function () { return formdialog_recipe_1.formdialogRecipe; } });

package/dist/cjs/product/importdialog/importdialog.js

@@ -0,0 +1,134 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImportDialog = ImportDialog;
+exports.ImportDialogDropzone = ImportDialogDropzone;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_file_upload_1 = require("@seed-design/react-file-upload");
+const dialog = __importStar(require("@zag-js/dialog"));
+const react_1 = require("@zag-js/react");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const button_1 = require("../../components/button");
+const core_1 = require("../../core");
+const importdialog_recipe_1 = require("./importdialog.recipe");
+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.
+ */
+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 = (0, core_1.useCrispMessage)(closeLabelProp, "Close");
+    const id = useImportDialogInstanceId();
+    const service = (0, react_1.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 ((0, core_1.hasOpenFloatingLayer)())
+                event.preventDefault();
+        },
+    });
+    const api = dialog.connect(service, react_1.normalizeProps);
+    if (!api.open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, importdialog_recipe_1.importdialogRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "crisp-importdialog-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "crisp-importdialog-positioner", children: (0, jsx_runtime_1.jsxs)("div", { ...rest, ...(0, core_1.withDescribedBy)(api.getContentProps(), describedBy), className: (0, core_1.cx)("crisp-importdialog-content", className), style: style, "data-crisp-importdialog": id, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-importdialog-header", children: [(0, jsx_runtime_1.jsx)("h2", { ...api.getTitleProps(), className: "crisp-importdialog-title", children: title }), (0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-importdialog-close", "aria-label": closeLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] }), (0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("button", { type: "button", ...commonProps, onClick: () => onStepClick(step.id), children: step.label }, step.id)) : ((0, jsx_runtime_1.jsx)("span", { ...commonProps, children: step.label }, step.id));
+                                }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-importdialog-body", children: children }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-importdialog-footer", children: (0, jsx_runtime_1.jsx)(button_1.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.
+ */
+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 } = (0, react_file_upload_1.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 ((0, jsx_runtime_1.jsxs)("div", { ...rest, ...dropzoneProps, className: (0, core_1.cx)("crisp-importdialog-dropzone", className), children: [(0, jsx_runtime_1.jsx)("input", { ...hiddenInputProps, id: id ?? hiddenInputProps.id, ref: inputRef, className: "crisp-importdialog-dropzone-input" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-importdialog-dropzone-title", children: dropLabel }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-importdialog-dropzone-or", children: orLabel }), (0, jsx_runtime_1.jsx)("button", { ...triggerProps, className: "crisp-importdialog-dropzone-choose", children: chooseLabel }), learnMoreHref && ((0, jsx_runtime_1.jsx)("a", { className: "crisp-importdialog-dropzone-learnmore", href: learnMoreHref, target: "_blank", rel: "noreferrer", children: learnMoreLabel })), (0, jsx_runtime_1.jsx)("ul", { className: "crisp-importdialog-dropzone-errors", "aria-live": "polite", children: rejections.map((r) => ((0, jsx_runtime_1.jsx)("li", { className: "crisp-importdialog-dropzone-error", children: r.file.name }, r.file.name))) })] }));
+}
+ImportDialogDropzone.displayName = "ImportDialogDropzone";