@crisp-ui-kit/crisp 0.55.0 → 0.55.1

package/dist/badge.css

@@ -27,7 +27,7 @@
   height: 20px; padding-inline: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; gap: 3px; border-radius: var(--crisp-radius-sm);
 }
 .crisp-badge--size_large {
-  height: var(--crisp-size-chip); padding-inline: 9px; font-size: var(--crisp-text-lg); letter-spacing: -0.1px; border-radius: var(--crisp-radius-chip);
+  height: var(--crisp-size-chip); padding-block: var(--crisp-space-px); padding-inline-start: var(--crisp-space-1); padding-inline-end: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); letter-spacing: -0.1px; border-radius: var(--crisp-radius-lg);
 }
 .crisp-badge--variant_soft {
   

package/dist/badge.layered.css

@@ -28,7 +28,7 @@
   height: 20px; padding-inline: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; gap: 3px; border-radius: var(--crisp-radius-sm);
 }
 .crisp-badge--size_large {
-  height: var(--crisp-size-chip); padding-inline: 9px; font-size: var(--crisp-text-lg); letter-spacing: -0.1px; border-radius: var(--crisp-radius-chip);
+  height: var(--crisp-size-chip); padding-block: var(--crisp-space-px); padding-inline-start: var(--crisp-space-1); padding-inline-end: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); letter-spacing: -0.1px; border-radius: var(--crisp-radius-lg);
 }
 .crisp-badge--variant_soft {
   

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

@@ -106,15 +106,20 @@ const spec = (0, core_1.defineSpec)({
                 gap: "3px",
                 borderRadius: tokens_1.contract.radius.sm,
             },
-            // crisp#696: not re-measured this round -- kept exactly as it rendered
-            // before the base tracking changed to `normal`, by pinning the old
-            // `-0.1px` here instead. Gap is untouched (base's 4px).
+            // crisp#805: measured live against Attio's real status/stage chip
+            // (Deals "Deal stage" column, All Deals table view) -- radius 9px, not
+            // `radius.chip`'s 7px, and asymmetric padding (room for a leading dot/
+            // icon: 1px top/bottom, 6px trailing, 4px leading), not a symmetric
+            // 9px. Height/font/tracking are unchanged (still not independently
+            // re-measured this round, per #696's own note).
             large: {
                 height: tokens_1.contract.size.chip,
-                paddingInline: "9px",
+                paddingBlock: tokens_1.contract.space.px,
+                paddingInlineStart: tokens_1.contract.space["1"],
+                paddingInlineEnd: tokens_1.contract.space["1.5"],
                 fontSize: tokens_1.contract.text.lg,
                 letterSpacing: "-0.1px",
-                borderRadius: tokens_1.contract.radius.chip,
+                borderRadius: tokens_1.contract.radius.lg,
             },
         },
         variant: { soft: {}, solid: {} },

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

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COUNTRIES = void 0;
+exports.flagEmoji = flagEmoji;
+exports.countryByIso2 = countryByIso2;
+exports.COUNTRIES = [
+    { iso2: "US", name: "United States", dialCode: "1" },
+    { iso2: "CA", name: "Canada", dialCode: "1" },
+    { iso2: "GB", name: "United Kingdom", dialCode: "44" },
+    { iso2: "IE", name: "Ireland", dialCode: "353" },
+    { iso2: "FR", name: "France", dialCode: "33" },
+    { iso2: "DE", name: "Germany", dialCode: "49" },
+    { iso2: "ES", name: "Spain", dialCode: "34" },
+    { iso2: "PT", name: "Portugal", dialCode: "351" },
+    { iso2: "IT", name: "Italy", dialCode: "39" },
+    { iso2: "NL", name: "Netherlands", dialCode: "31" },
+    { iso2: "BE", name: "Belgium", dialCode: "32" },
+    { iso2: "CH", name: "Switzerland", dialCode: "41" },
+    { iso2: "AT", name: "Austria", dialCode: "43" },
+    { iso2: "SE", name: "Sweden", dialCode: "46" },
+    { iso2: "NO", name: "Norway", dialCode: "47" },
+    { iso2: "DK", name: "Denmark", dialCode: "45" },
+    { iso2: "FI", name: "Finland", dialCode: "358" },
+    { iso2: "PL", name: "Poland", dialCode: "48" },
+    { iso2: "CZ", name: "Czechia", dialCode: "420" },
+    { iso2: "GR", name: "Greece", dialCode: "30" },
+    { iso2: "RO", name: "Romania", dialCode: "40" },
+    { iso2: "HU", name: "Hungary", dialCode: "36" },
+    { iso2: "UA", name: "Ukraine", dialCode: "380" },
+    { iso2: "RU", name: "Russia", dialCode: "7" },
+    { iso2: "TR", name: "Turkey", dialCode: "90" },
+    { iso2: "IL", name: "Israel", dialCode: "972" },
+    { iso2: "AE", name: "United Arab Emirates", dialCode: "971" },
+    { iso2: "SA", name: "Saudi Arabia", dialCode: "966" },
+    { iso2: "EG", name: "Egypt", dialCode: "20" },
+    { iso2: "ZA", name: "South Africa", dialCode: "27" },
+    { iso2: "NG", name: "Nigeria", dialCode: "234" },
+    { iso2: "KE", name: "Kenya", dialCode: "254" },
+    { iso2: "IN", name: "India", dialCode: "91" },
+    { iso2: "PK", name: "Pakistan", dialCode: "92" },
+    { iso2: "BD", name: "Bangladesh", dialCode: "880" },
+    { iso2: "LK", name: "Sri Lanka", dialCode: "94" },
+    { iso2: "NP", name: "Nepal", dialCode: "977" },
+    { iso2: "CN", name: "China", dialCode: "86" },
+    { iso2: "HK", name: "Hong Kong", dialCode: "852" },
+    { iso2: "TW", name: "Taiwan", dialCode: "886" },
+    { iso2: "JP", name: "Japan", dialCode: "81" },
+    { iso2: "KR", name: "South Korea", dialCode: "82" },
+    { iso2: "MN", name: "Mongolia", dialCode: "976" },
+    { iso2: "VN", name: "Vietnam", dialCode: "84" },
+    { iso2: "TH", name: "Thailand", dialCode: "66" },
+    { iso2: "SG", name: "Singapore", dialCode: "65" },
+    { iso2: "MY", name: "Malaysia", dialCode: "60" },
+    { iso2: "ID", name: "Indonesia", dialCode: "62" },
+    { iso2: "PH", name: "Philippines", dialCode: "63" },
+    { iso2: "AU", name: "Australia", dialCode: "61" },
+    { iso2: "NZ", name: "New Zealand", dialCode: "64" },
+    { iso2: "MX", name: "Mexico", dialCode: "52" },
+    { iso2: "BR", name: "Brazil", dialCode: "55" },
+    { iso2: "AR", name: "Argentina", dialCode: "54" },
+    { iso2: "CL", name: "Chile", dialCode: "56" },
+    { iso2: "CO", name: "Colombia", dialCode: "57" },
+    { iso2: "PE", name: "Peru", dialCode: "51" },
+];
+/** Two Unicode Regional Indicator Symbols spell the flag emoji for `iso2`. */
+function flagEmoji(iso2) {
+    return [...iso2.toUpperCase()]
+        .map((ch) => String.fromCodePoint(0x1f1e6 - 65 + ch.charCodeAt(0)))
+        .join("");
+}
+function countryByIso2(iso2) {
+    return exports.COUNTRIES.find((c) => c.iso2 === iso2);
+}

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

@@ -52,13 +52,16 @@ const avatar_1 = require("../avatar");
 const checkbox_1 = require("../checkbox");
 const columncalc_1 = require("../columncalc");
 const contextmenu_1 = require("../contextmenu");
+const datepickerfield_1 = require("../datepickerfield");
 const menu_1 = require("../menu");
 const radiogroup_1 = require("../radiogroup");
 const select_1 = require("../select");
 const spinner_1 = require("../spinner");
 const switch_1 = require("../switch");
 const table_1 = require("../table");
+const timepicker_1 = require("../timepicker");
 const tooltip_1 = require("../tooltip");
+const countries_1 = require("./countries");
 const datatable_recipe_1 = require("./datatable.recipe");
 // #534: whether an element's own content is being cut off by its own box --
 // the same fact `.crisp-datatable-th-label`'s CSS ellipsis is silently
@@ -196,6 +199,17 @@ function asText(v) {
         return v.join(", ");
     return String(v);
 }
+// crisp/#765 -- a `type: "phone"`/`editor: "phone"` cell's raw value is
+// "{iso2}|{digits}", not a bare E.164 string: see DataTableColumn's own
+// "phone" doc comment for why the pipe separator earns its keep over a
+// plain "+{dialCode}{digits}" concatenation.
+function parsePhoneValue(v) {
+    const s = typeof v === "string" ? v : "";
+    const i = s.indexOf("|");
+    if (i < 0)
+        return null;
+    return { iso2: s.slice(0, i), digits: s.slice(i + 1) };
+}
 // stable pastel tone per string value — colour-coded tags/statuses
 const TAG_TONES = [
     "brand",
@@ -415,6 +429,13 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US", ope
                 return empty;
             return (0, jsx_runtime_1.jsx)(RatingStars, { value: n, max: col.maxRating ?? 5 });
         }
+        case "phone": {
+            const parsed = parsePhoneValue(value);
+            if (!parsed?.digits)
+                return empty;
+            const country = (0, countries_1.countryByIso2)(parsed.iso2);
+            return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-phone", children: [country && (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: (0, countries_1.flagEmoji)(country.iso2) }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-phone-dial", children: ["+", country?.dialCode ?? "?"] }), parsed.digits] }));
+        }
         case "url":
         case "email": {
             const text = display || asText(value);
@@ -568,6 +589,92 @@ function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
                     onCommit(v);
             } }) }));
 }
+// crisp/#765, confirmed live -- Attio's own Phone Number editor: a
+// country-code select (ghost trigger, "MN ▾"), then a static, non-editable
+// "+{dialCode}" prefix, then a borderless digits field -- measured
+// `rgba(0,0,0,0.63)` for the prefix text, matching every other muted-text
+// value already measured elsewhere in this file (14px in both cases).
+// Reuses crisp's own searchable `Select` for the country list -- the same
+// popover chrome every other picker in this file already uses -- rather
+// than inventing new country-picker chrome; the flag/name/dial-code ROW
+// shape wasn't independently re-measured against Attio's own popover this
+// pass (time-boxed), so it's built to the same shape crisp's other search
+// pickers already carry.
+function DataPhoneEditor({ col, value, isPending, onCommit, }) {
+    const parsed = parsePhoneValue(value);
+    const [iso2, setIso2] = React.useState(parsed?.iso2 ?? "US");
+    const [digits, setDigits] = React.useState(parsed?.digits ?? "");
+    const country = (0, countries_1.countryByIso2)(iso2);
+    const countryOptions = countries_1.COUNTRIES.map((c) => ({
+        value: c.iso2,
+        label: `${(0, countries_1.flagEmoji)(c.iso2)} ${c.name} +${c.dialCode}`,
+        keywords: `${c.name} ${c.iso2} ${c.dialCode}`,
+    }));
+    const commit = (nextIso2, nextDigits) => onCommit(`${nextIso2}|${nextDigits}`);
+    return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-phone-editor", children: [(0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", searchable: true, "aria-label": `Edit ${col.key} country`, value: iso2, disabled: isPending, options: countryOptions, onValueChange: (v) => {
+                    setIso2(v);
+                    commit(v, digits);
+                } }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-phone-dial", "aria-hidden": "true", children: ["+", country?.dialCode ?? "?"] }), (0, jsx_runtime_1.jsx)("input", { className: "crisp-datatable-edit", "aria-label": `Edit ${col.key} number`, value: digits, disabled: isPending, onChange: (e) => setDigits(e.currentTarget.value), onBlur: () => commit(iso2, digits), onKeyDown: (e) => {
+                    if (e.key === "Enter")
+                        commit(iso2, digits);
+                } })] }));
+}
+// crisp/#762, confirmed live -- Attio's own Timestamp editor is a calendar +
+// time + preset picker, not the native `datetime-local` input `type:
+// "datetime"` gets by default (that stays the DEFAULT, unchanged, for
+// backward compatibility -- this is a new, opt-in `editor: "datetime"`).
+// Composes crisp's own `DatePickerField` (calendar + presets, already the
+// measured shape: Today/Tomorrow/Next week/No date chips under the
+// calendar) with `TimePicker` (hour/minute wheel) side by side. The exact
+// PRESET WORDING/order and the time control's own wheel-vs-text-field
+// shape weren't independently re-verified against Attio's pixels this
+// pass (time-boxed) -- `TimePicker` is crisp's only time-input primitive,
+// reused rather than inventing a new one from scratch.
+function DataDateTimeEditor({ col, value, isPending, onCommit, }) {
+    const initial = value instanceof Date
+        ? value
+        : typeof value === "string" || typeof value === "number"
+            ? new Date(value)
+            : null;
+    const hasInitial = initial != null && !Number.isNaN(initial.getTime());
+    const [date, setDate] = React.useState(hasInitial ? initial : null);
+    const [time, setTime] = React.useState({
+        hour: hasInitial ? initial.getHours() : 0,
+        minute: hasInitial ? initial.getMinutes() : 0,
+    });
+    const commit = (nextDate, nextTime) => {
+        if (!nextDate) {
+            onCommit("");
+            return;
+        }
+        const pad = (n) => String(n).padStart(2, "0");
+        onCommit(`${nextDate.getFullYear()}-${pad(nextDate.getMonth() + 1)}-${pad(nextDate.getDate())}T${pad(nextTime.hour)}:${pad(nextTime.minute)}`);
+    };
+    const preset = (label, days) => ({
+        label,
+        date: () => {
+            const d = new Date();
+            d.setDate(d.getDate() + days);
+            return d;
+        },
+    });
+    return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-datetime-editor", children: [(0, jsx_runtime_1.jsx)(datepickerfield_1.DatePickerField, { "aria-label": `Edit ${col.key} date`, variant: "ghost", 
+                // "No date" chip in Attio's own popover maps to DatePickerField's
+                // existing Clear affordance -- its own default label ("Clear
+                // date") is already overridable via `useCrispMessage` internally,
+                // so no hardcoded copy of this component's own is added here.
+                value: date, presets: [
+                    preset("Today", 0),
+                    preset("Tomorrow", 1),
+                    preset("Next week", 7),
+                ], onValueChange: (d) => {
+                    setDate(d);
+                    commit(d, time);
+                } }), (0, jsx_runtime_1.jsx)(timepicker_1.TimePicker, { size: "small", value: time, disabled: isPending, onValueChange: (t) => {
+                    setTime(t);
+                    commit(date, t);
+                } })] }));
+}
 function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, columnOrder, onColumnOrderChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, onViewEditHistory, stickyFirst = true, stickyLast = false, scrollProps, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, height, className, reorderRowLabel: reorderRowLabelProp, openPreviewLabel: openPreviewLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, cellMenuLabel: cellMenuLabelProp, copyLabel: copyLabelProp, pasteLabel: pasteLabelProp, viewEditHistoryLabel: viewEditHistoryLabelProp, clearValueLabel: clearValueLabelProp, ...rest }) {
     // crisp/#471: same resolution order as TableToolbar's own — an explicit
     // prop wins, then the provider's translation of the built-in English
@@ -1323,12 +1430,8 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
         // Cmd/Ctrl+ArrowDown to the last -- confirmed live (Attio's own help
         // drawer documents "Jump to top"/"Jump to bottom" on these exact
         // bindings). `!e.shiftKey` guards this from stealing Cmd+Shift+Arrow,
-        // a separate gesture (#773, extend-selection-to-first/last) that falls
-        // through to the Shift+Arrow branch below untouched. Placed before that
-        // branch for the same reason: without the guard, Cmd+Shift+Arrow would
-        // still reach it (that branch doesn't check metaKey/ctrlKey either),
-        // just not do the "jump" part -- the guard here is what keeps the two
-        // gestures from fighting over the same keys.
+        // the separate #773 gesture (extend-selection-to-first/last) handled
+        // in its own branch right below.
         if ((e.metaKey || e.ctrlKey) &&
             !e.shiftKey &&
             (e.key === "ArrowUp" || e.key === "ArrowDown")) {
@@ -1341,6 +1444,34 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             clipboardProxyRef.current?.select();
             return;
         }
+        // crisp/#773: Cmd/Ctrl+Shift+Up/Down extends the row-checkbox selection
+        // all the way to the first/last row in one keystroke -- confirmed live,
+        // the "jump" sibling of #749's one-step Shift+Arrow below, sharing the
+        // same anchor→destination-span recompute (only the destination differs:
+        // 0 / rows.length-1 instead of r±1). Checked ahead of #749's own branch
+        // so the modifier routes here instead of being swallowed as a one-step
+        // Shift+Arrow.
+        if (selectable &&
+            (e.metaKey || e.ctrlKey) &&
+            e.shiftKey &&
+            (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+            const r0 = rows.findIndex((row) => row.id === selCell.id);
+            if (r0 < 0)
+                return;
+            const nr0 = e.key === "ArrowDown" ? rows.length - 1 : 0;
+            e.preventDefault();
+            const anchorId = rowSelectAnchor ?? selCell.id;
+            const anchorIdx = rows.findIndex((row) => row.id === anchorId);
+            if (anchorIdx < 0)
+                return;
+            setRowSelectAnchor(anchorId);
+            const lo = Math.min(anchorIdx, nr0);
+            const hi = Math.max(anchorIdx, nr0);
+            setSelected(new Set(rows.slice(lo, hi + 1).map((row) => row.id)));
+            setSelCell({ id: rows[nr0].id, key: selCell.key });
+            clipboardProxyRef.current?.select();
+            return;
+        }
         // crisp/#749: Shift+ArrowUp/Down extends the row-checkbox selection --
         // confirmed live, distinct from Shift+Click's cell-range gesture above
         // (that one is `selAnchor`; this is `rowSelectAnchor`, and the two
@@ -1371,12 +1502,38 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             clipboardProxyRef.current?.select();
             return;
         }
+        // crisp/#770: Shift+Space toggles the current row's own checkbox without
+        // moving the selected cell or touching any other row -- distinct from
+        // #749/#773 above, whose Shift+Arrow gestures move the cursor as they
+        // extend the range.
+        if (selectable && e.shiftKey && e.key === " ") {
+            e.preventDefault();
+            toggleRow(selCell.id);
+            return;
+        }
+        // crisp/#771: Cmd/Ctrl+Enter always opens the row's record page,
+        // regardless of whether the current column is editable -- distinct from
+        // plain Enter below, which opens the cell's own editor first when one
+        // exists.
+        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+            if (onRowClick) {
+                const r0 = rows.findIndex((row) => row.id === selCell.id);
+                if (r0 < 0)
+                    return;
+                e.preventDefault();
+                onRowClick(rows[r0]);
+            }
+            return;
+        }
         const r = rows.findIndex((row) => row.id === selCell.id);
         const c = columns.findIndex((col) => col.key === selCell.key);
         if (r < 0 || c < 0)
             return;
         let nr = r;
         let nc = c;
+        // #772/#773 (Cmd/Ctrl±Shift+Up/Down) are both handled in their own
+        // early-return branches above, before `r`/`c` are even computed -- a
+        // plain arrow (no modifier) is the only thing that reaches here.
         if (e.key === "ArrowUp")
             nr = Math.max(0, r - 1);
         else if (e.key === "ArrowDown")
@@ -1388,6 +1545,33 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             const forward = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
             nc = forward ? Math.min(columns.length - 1, c + 1) : Math.max(0, c - 1);
         }
+        // crisp/#769: Tab/Shift+Tab move to the next/previous cell in reading
+        // order, wrapping to the next (or previous) row at a row boundary. This
+        // is pure logical/DOM order, not a visual direction, so unlike Left/Right
+        // above it needs no RTL handling -- native tab order doesn't flip under
+        // RTL either. At the grid's first/last cell there's nowhere left to go:
+        // return without `preventDefault`, so Tab still falls through to the
+        // browser's native focus order instead of getting trapped.
+        else if (e.key === "Tab" && !e.shiftKey) {
+            if (c + 1 < columns.length)
+                nc = c + 1;
+            else if (r + 1 < rows.length) {
+                nr = r + 1;
+                nc = 0;
+            }
+            else
+                return;
+        }
+        else if (e.key === "Tab" && e.shiftKey) {
+            if (c - 1 >= 0)
+                nc = c - 1;
+            else if (r - 1 >= 0) {
+                nr = r - 1;
+                nc = columns.length - 1;
+            }
+            else
+                return;
+        }
         // crisp/#607, G-066/G-068: End jumps to the last row (confirmed live --
         // it also triggers Attio's own lazy-load, which is a data-loading
         // concern outside this component; the #577 scroll-into-view effect
@@ -2015,7 +2199,9 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 if (isEditing &&
                                                     (col.editor === "select" ||
                                                         col.editor === "reference" ||
-                                                        col.editor === "actor")) {
+                                                        col.editor === "actor" ||
+                                                        col.editor === "phone" ||
+                                                        col.editor === "datetime")) {
                                                     return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
                                                         // Same as the plain text editor's own cell:
                                                         // opening/using the picker must not also fire
@@ -2027,7 +2213,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                         // portaled popover, so a handler here can't
                                                         // rely on the key event ever bubbling through
                                                         // this element (#453).
-                                                        onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? ((0, jsx_runtime_1.jsx)(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : ((0, jsx_runtime_1.jsx)(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                        onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? ((0, jsx_runtime_1.jsx)(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : col.editor === "phone" ? ((0, jsx_runtime_1.jsx)(DataPhoneEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : col.editor === "datetime" ? ((0, jsx_runtime_1.jsx)(DataDateTimeEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : ((0, jsx_runtime_1.jsx)(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 if (isEditing) {
                                                     return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-datatable-edit", 

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

@@ -10,7 +10,15 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "datatable",
     base: `display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2.5"]}; font-family: ${tokens_1.contract.font.sans};
-    & .crisp-datatable-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; min-height: 49px; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
+    /* The toolbar carried no horizontal inset of its own, so its content
+       (search box, sort/filter chips) sat flush at the table's outer edge
+       (x=0) while the header row's own th/td padding (table.recipe.ts,
+       #465) starts every column's text at 12px -- one row down, the SAME
+       grid's own header cell already begins at that inset. c.space["3"]
+       here just matches the row directly below it, measured live against
+       Attio (the sort/filter row's search chip lines up with the first
+       column header's text, not the grid's raw edge). */
+    & .crisp-datatable-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; min-height: 49px; border-top: 1px solid ${tokens_1.contract.borderSubtle}; padding: 0 ${tokens_1.contract.space["3"]}; }
     & .crisp-datatable-search { position: relative; flex: 1; max-width: 280px; display: inline-flex; align-items: center; }
     & .crisp-datatable-search svg { position: absolute; inset-inline-start: ${tokens_1.contract.space["2"]}; color: ${tokens_1.contract.fgMuted}; pointer-events: none; }
     & .crisp-datatable-search input { width: 100%; height: 32px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["6"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; outline: none; transition: box-shadow .15s; }
@@ -275,6 +283,15 @@ const config = (0, core_1.defineRecipe)({
        link. */
     & .crisp-datatable-link { color: ${tokens_1.contract.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-datatable-link:hover { text-decoration: underline; }
+    /* phone cell type/editor (#765) -- measured live: the dial-code prefix
+       is a muted rgba(0,0,0,0.63) at 14px, matching every other muted-text
+       value already measured elsewhere in this file. */
+    & .crisp-datatable-phone { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; }
+    & .crisp-datatable-phone-dial { color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+    & .crisp-datatable-phone-editor { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; }
+    & .crisp-datatable-phone-editor input { flex: 1; min-width: 0; }
+    /* datetime cell editor (#762) -- DatePickerField + TimePicker side by side. */
+    & .crisp-datatable-datetime-editor { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; }
     /* rating cell type/editor (#760) -- measured live: 16px stars on an
        18px pitch (a 2px gap), an empty star at rgba(0,0,0,0.1), a
        committed/filled star at brand600 (--crisp-bg-brand-solid, an exact