@crisp-ui-kit/crisp 0.31.6 → 0.32.1

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

@@ -116,7 +116,7 @@ function formatCell(type, v, symbol) {
 // display string belongs -- as an entity's name, a status' label -- while the
 // raw value keeps driving structure and tone.
 function renderTyped(col, value, avatarTone, display) {
-    const empty = (0, jsx_runtime_1.jsx)("span", { className: "datatable-muted", children: "\u2014" });
+    const empty = (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-muted", children: "\u2014" });
     switch (col.type) {
         case "entity": {
             const raw = (typeof value === "object" && value ? value : { name: asText(value) });
@@ -125,7 +125,7 @@ function renderTyped(col, value, avatarTone, display) {
             const e = display ? { ...raw, name: display } : raw;
             if (!e.name)
                 return empty;
-            return ((0, jsx_runtime_1.jsxs)("span", { className: "datatable-entity", children: [(0, jsx_runtime_1.jsx)("span", { className: "datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), (0, jsx_runtime_1.jsx)("span", { className: "datatable-entity-name", children: e.name })] }));
+            return ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-entity", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-avatar", "data-tone": avatarTone === "hashed" ? toneFor(raw.name) : undefined, children: e.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: e.avatar, alt: "" })) : (initials(e.name).slice(0, 2)) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-entity-name", children: e.name })] }));
         }
         case "tags": {
             // asking for a format on a tag column means "render it your way" -- show
@@ -135,7 +135,7 @@ function renderTyped(col, value, avatarTone, display) {
             const tags = Array.isArray(value) ? value : [];
             if (!tags.length)
                 return empty;
-            return ((0, jsx_runtime_1.jsx)("span", { className: "datatable-tags", children: tags.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "datatable-tag", "data-tone": col.tones?.[t] ?? toneFor(t), children: t }, t))) }));
+            return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tags", children: tags.map((t) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[t] ?? toneFor(t), children: t }, t))) }));
         }
         case "status": {
             const s = asText(value);
@@ -143,14 +143,14 @@ function renderTyped(col, value, avatarTone, display) {
                 return empty;
             // tone is looked up by the RAW status, so formatting the label (casing,
             // translation) can never silently repaint the chip
-            return ((0, jsx_runtime_1.jsx)("span", { className: "datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
+            return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
         }
         default: {
             const text = display || formatCell(col.type, value, col.symbol);
             const isNum = col.type === "number" || col.type === "currency";
             if (!text)
                 return empty;
-            return isNum ? (0, jsx_runtime_1.jsx)("span", { className: "datatable-num", children: text }) : text;
+            return isNum ? (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-num", children: text }) : text;
         }
     }
 }
@@ -402,21 +402,29 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
     // sticky attrs for the leading column(s): grip col (index -2) + selection
     // col (-1) + first data column (0). Each offsets by whatever leading
     // columns come before it, so the group stays contiguous when scrolled.
+    // `insetInlineStart`, never `left`: the offset pins the column to the
+    // LEADING edge, which is the right one under `dir="rtl"`. A physical `left`
+    // pins to the trailing edge instead, and the column scrolls out of view the
+    // moment sticky would have engaged (#285). RecordsTable does the same job in
+    // CSS and has used the logical property since #91 -- this offset is computed
+    // here rather than in a recipe, which is why that sweep could not reach it.
     const stickyCol = (index) => {
         if (!stickyFirst)
             return {};
         if (showGrip && index === -2)
-            return { "data-sticky": "", style: { left: 0 } };
+            return { "data-sticky": "", style: { insetInlineStart: 0 } };
         if (selectable && index === -1)
             return {
                 "data-sticky": "",
-                style: { left: showGrip ? GRIP_W : 0 },
+                style: { insetInlineStart: showGrip ? GRIP_W : 0 },
             };
         if (index === 0)
             return {
                 "data-sticky": "",
                 "data-sticky-edge": "",
-                style: { left: (showGrip ? GRIP_W : 0) + (selectable ? CHECK_W : 0) },
+                style: {
+                    insetInlineStart: (showGrip ? GRIP_W : 0) + (selectable ? CHECK_W : 0),
+                },
             };
         return {};
     };
@@ -453,13 +461,13 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
     function ChevronFor({ colKey }) {
         const dir = sortDirByKey.get(colKey);
         if (dir)
-            return dir === "asc" ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { className: "datatable-chevron", size: 13, strokeWidth: 2 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "datatable-chevron", size: 13, strokeWidth: 2 }));
-        return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "datatable-chevron", size: 13, strokeWidth: 2 }));
+            return dir === "asc" ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
+        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: [(filterable || showCount || toolbar || columnMenu) && ((0, jsx_runtime_1.jsxs)("div", { className: "datatable-toolbar", children: [columnMenu && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "datatable-viewsettings", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [(0, jsx_runtime_1.jsx)("div", { className: "datatable-group-label", children: "Columns" }), 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: "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: "datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), (0, jsx_runtime_1.jsxs)(table_1.Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: gridRef, className: (0, datatable_recipe_1.datatableRecipe)({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(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 }), "View settings"] }), children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-group-label", children: "Columns" }), 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: countLabel(rows.length, data.length) })), toolbar] })), (0, jsx_runtime_1.jsxs)(table_1.Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
                     onScroll: (e) => setScrolledX(e.currentTarget.scrollLeft > 0),
                     ...(scrolledX ? { "data-scrolled-x": "" } : {}),
-                }, children: [(0, jsx_runtime_1.jsxs)("colgroup", { children: [showGrip && (0, jsx_runtime_1.jsx)("col", { style: { width: GRIP_W } }), selectable && (0, jsx_runtime_1.jsx)("col", { style: { width: CHECK_W } }), columns.map((col) => ((0, jsx_runtime_1.jsx)("col", { style: { width: colWidth(col) } }, col.key)))] }), (0, jsx_runtime_1.jsx)(table_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "datatable-col-grip", ...stickyCol(-2) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "datatable-col-check", ...stickyCol(-1), children: (0, jsx_runtime_1.jsx)("span", { className: "datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": selectAllLabel, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {
+                }, children: [(0, jsx_runtime_1.jsxs)("colgroup", { children: [showGrip && (0, jsx_runtime_1.jsx)("col", { style: { width: GRIP_W } }), selectable && (0, jsx_runtime_1.jsx)("col", { style: { width: CHECK_W } }), columns.map((col) => ((0, jsx_runtime_1.jsx)("col", { style: { width: colWidth(col) } }, col.key)))] }), (0, jsx_runtime_1.jsx)(table_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "crisp-datatable-col-grip", ...stickyCol(-2) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "crisp-datatable-col-check", ...stickyCol(-1), children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": selectAllLabel, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {
                                     const Icon = col.icon;
                                     // The sort direction was painted (`data-sorted`) and never
                                     // announced: a screen reader heard the same header before and
@@ -475,10 +483,10 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 ? "ascending"
                                                 : "descending"
                                             : "none";
-                                    const inner = ((0, jsx_runtime_1.jsxs)("span", { className: "datatable-th-inner", children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 14, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "datatable-th-label", children: col.header }), col.sortable ? (0, jsx_runtime_1.jsx)(ChevronFor, { colKey: col.key }) : null] }));
+                                    const inner = ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-th-inner", children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 14, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-th-label", children: col.header }), col.sortable ? (0, jsx_runtime_1.jsx)(ChevronFor, { colKey: col.key }) : null] }));
                                     return ((0, jsx_runtime_1.jsxs)(table_1.TableHead, { align: alignFor(col), "aria-sort": ariaSort, ...stickyCol(i), children: [renaming === col.key ? ((0, jsx_runtime_1.jsx)("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: the rename item opens this field
-                                                autoFocus: true, className: "datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": `Rename column`, onBlur: (e) => {
+                                                autoFocus: true, className: "crisp-datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": `Rename column`, onBlur: (e) => {
                                                     renameColumn(col.key, e.currentTarget.value);
                                                     setRenaming(null);
                                                 }, onKeyDown: (e) => {
@@ -488,10 +496,10 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                     }
                                                     else if (e.key === "Escape")
                                                         setRenaming(null);
-                                                } })) : columnMenu ? ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "datatable-sort", "data-sorted": sortDirByKey.get(col.key), "aria-label": `${typeof col.header === "string"
+                                                } })) : columnMenu ? ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), "aria-label": `${typeof col.header === "string"
                                                         ? col.header
-                                                        : col.key} column options`, children: inner }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setSort({ key: col.key, dir: "asc" }), children: "Sort ascending" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setSort({ key: col.key, dir: "desc" }), children: "Sort descending" }), col.managed === false ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => moveColumn(col.key, -1), children: "Move left" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => moveColumn(col.key, 1), children: "Move right" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setRenaming(col.key), children: "Edit column label" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => hideColumn(col.key), children: "Hide from view" })] }))] })) : col.sortable ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "datatable-sort", "data-sorted": sortDirByKey.get(col.key), onClick: () => cycleSort(col.key), children: inner })) : (inner), col.resizable !== false && ((0, jsx_runtime_1.jsx)("span", { className: "datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
-                                })] }) }), (0, jsx_runtime_1.jsx)(table_1.TableBody, { children: error ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsx)("div", { className: "datatable-empty", children: error }) }) })) : rows.length === 0 ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsx)("div", { className: "datatable-empty", children: empty }) }) })) : (groupedRows.map(({ group, rows: groupRows }) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [group !== null && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsxs)(table_1.TableCell, { colSpan: totalCols, className: "datatable-group", children: [(0, jsx_runtime_1.jsx)("span", { className: "datatable-group-label", children: group }), (0, jsx_runtime_1.jsx)("span", { className: "datatable-group-count", children: groupRows.length })] }) })), groupRows.map((row) => ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { "data-selected": selected.has(row.id) ? "" : undefined, "data-drop-target": showGrip &&
+                                                        : col.key} column options`, children: inner }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setSort({ key: col.key, dir: "asc" }), children: "Sort ascending" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setSort({ key: col.key, dir: "desc" }), children: "Sort descending" }), col.managed === false ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => moveColumn(col.key, -1), children: "Move left" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => moveColumn(col.key, 1), children: "Move right" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setRenaming(col.key), children: "Edit column label" }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => hideColumn(col.key), children: "Hide from view" })] }))] })) : col.sortable ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-sort", "data-sorted": sortDirByKey.get(col.key), onClick: () => cycleSort(col.key), children: inner })) : (inner), col.resizable !== false && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-resize", "data-resizing": resizingKey === col.key ? "" : undefined, onPointerDown: (e) => startResize(col, e), onPointerMove: moveResize, onPointerUp: endResize }))] }, col.key));
+                                })] }) }), (0, jsx_runtime_1.jsx)(table_1.TableBody, { children: error ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-empty", children: error }) }) })) : rows.length === 0 ? ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { colSpan: totalCols, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-empty", children: empty }) }) })) : (groupedRows.map(({ group, rows: groupRows }) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [group !== null && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsxs)(table_1.TableCell, { colSpan: totalCols, className: "crisp-datatable-group", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-group-label", children: group }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-group-count", children: groupRows.length })] }) })), groupRows.map((row) => ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { "data-selected": selected.has(row.id) ? "" : undefined, "data-drop-target": showGrip &&
                                         dragRowId &&
                                         dragRowId !== row.id &&
                                         dropRowId === row.id
@@ -507,18 +515,18 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                             e.preventDefault();
                                             reorderRows(dragRowId, row.id);
                                         }
-                                        : undefined, children: [showGrip && ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "datatable-col-grip", ...stickyCol(-2), onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "datatable-grip", "aria-label": reorderRowLabel, draggable: true, onDragStart: (e) => {
+                                        : undefined, children: [showGrip && ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "crisp-datatable-col-grip", ...stickyCol(-2), onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-datatable-grip", "aria-label": reorderRowLabel, draggable: true, onDragStart: (e) => {
                                                     setDragRowId(row.id);
                                                     e.dataTransfer.effectAllowed = "move";
                                                 }, onDragEnd: () => {
                                                     setDragRowId(null);
                                                     setDropRowId(null);
-                                                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "datatable-col-check", ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("span", { className: "datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), onChange: () => toggleRow(row.id) }) }) })), columns.map((col, i) => {
+                                                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "crisp-datatable-col-check", ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), onChange: () => toggleRow(row.id) }) }) })), columns.map((col, i) => {
                                             const isEditing = editing?.id === row.id && editing?.key === col.key;
                                             const value = cellValue(col, row);
                                             const sticky = stickyCol(i);
                                             if (isEditing) {
-                                                return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("input", { className: "datatable-edit", 
+                                                return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)("input", { className: "crisp-datatable-edit", 
                                                         // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
                                                         autoFocus: true, ...editorFor(col), "data-editor": editorFor(col).type, defaultValue: col.type === "date"
                                                             ? toDateInputValue(value)
@@ -529,7 +537,9 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                                 setEditing(null);
                                                         }, onBlur: (e) => commitEdit(row.id, col.key, e.currentTarget.value) }) }, col.key));
                                             }
-                                            return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...sticky, className: col.editable ? "datatable-editable" : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
+                                            return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...sticky, className: col.editable
+                                                    ? "crisp-datatable-editable"
+                                                    : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                     ? ""
                                                     : undefined, onClick: (e) => {
                                                     // the keyboard model's anchor; also opens the
@@ -547,6 +557,6 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 }, children: col.render
                                                     ? col.render(value, row)
                                                     : renderTyped(col, value, avatarTone, col.format?.(value, row)) }, col.key));
-                                        })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && ((0, jsx_runtime_1.jsxs)(table_1.TableFooter, { children: [hasSummary && ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-2) }), selectable && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-1) }), columns.map((col, i) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...stickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "datatable-addcell", colSpan: totalCols, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "datatable-addrow", onClick: onAddRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
+                                        })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && ((0, jsx_runtime_1.jsxs)(table_1.TableFooter, { children: [hasSummary && ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-2) }), selectable && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-1) }), columns.map((col, i) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...stickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";

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

@@ -10,13 +10,13 @@ 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};
-    & .datatable-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; }
-    & .datatable-search { position: relative; flex: 1; max-width: 280px; display: inline-flex; align-items: center; }
-    & .datatable-search svg { position: absolute; inset-inline-start: ${tokens_1.contract.space["2"]}; color: ${tokens_1.contract.fgMuted}; pointer-events: none; }
-    & .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; }
-    & .datatable-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
-    & .datatable-search input:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
-    & .datatable-count { margin-inline-start: auto; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-datatable-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; }
+    & .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; }
+    & .crisp-datatable-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-datatable-count { margin-inline-start: auto; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
 /* The header cell has no padding of its own -- the button owns the
        full cell so the whole header is clickable (its own inset is 12px).
        Mirrors the summary-row fix. */
@@ -28,71 +28,71 @@ const config = (0, core_1.defineRecipe)({
        -sized box to truncate against, and the th's own overflow hard-clipped
        it with no "...". Fill the wrapper, scoped to th so Menu's default
        (correct everywhere else) is untouched. */
-    & th .menu { width: 100%; height: 100%; }
-    & .datatable-th-inner { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; min-width: 0; height: 100%; }
-    & .datatable-th-inner > svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & th .crisp-menu { width: 100%; height: 100%; }
+    & .crisp-datatable-th-inner { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; min-width: 0; height: 100%; }
+    & .crisp-datatable-th-inner > svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
 /* The summary cell has NO padding of its own -- the calculation trigger
        owns the whole 246x37 area so a click anywhere in the cell opens the
        menu. Zero the cell's inset and let ColumnCalc supply the 12px. */
     & tfoot td { padding: 0; }
 /* Group heading row -- a view is grouped under a subtle label with the
        bucket's count beside it. */
-& .datatable-viewsettings { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
-    & .datatable-viewsettings:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
-    & .datatable-group-label { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
-        & .datatable-group { height: ${tokens_1.contract.size.menuRow}; padding: 0 ${tokens_1.contract.space["3"]}; background: ${tokens_1.contract.bgSubtle}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
-    & .datatable-group-count { margin-inline-start: ${tokens_1.contract.space["1.5"]}; color: ${tokens_1.contract.fgMuted}; font-variant-numeric: tabular-nums; }
-    & .datatable-th-rename { width: 100%; min-width: 0; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["1"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; outline: none; }
-    & .datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
-    & .datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
-    & .datatable-sort { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
-    & th[data-align="right"] .datatable-sort { justify-content: flex-end; }
-    & .datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; opacity: 0; transition: opacity .12s; }
-    & th[data-align="right"] .datatable-chevron { margin-inline-start: 0; }
-    & .datatable-sort:hover .datatable-chevron { opacity: 0.6; }
-    & .datatable-sort[data-sorted] .datatable-chevron { opacity: 1; color: ${tokens_1.contract.fgPrimary}; }
+& .crisp-datatable-viewsettings { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-datatable-viewsettings:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-datatable-group-label { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+        & .crisp-datatable-group { height: ${tokens_1.contract.size.menuRow}; padding: 0 ${tokens_1.contract.space["3"]}; background: ${tokens_1.contract.bgSubtle}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+    & .crisp-datatable-group-count { margin-inline-start: ${tokens_1.contract.space["1.5"]}; color: ${tokens_1.contract.fgMuted}; font-variant-numeric: tabular-nums; }
+    & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["1"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; outline: none; }
+    & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+    & .crisp-datatable-sort { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
+    & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; }
+    & .crisp-datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; opacity: 0; transition: opacity .12s; }
+    & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; }
+    & .crisp-datatable-sort:hover .crisp-datatable-chevron { opacity: 0.6; }
+    & .crisp-datatable-sort[data-sorted] .crisp-datatable-chevron { opacity: 1; color: ${tokens_1.contract.fgPrimary}; }
     /* 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; }
     & 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}); }
-    & .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); }
+    & .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); }
     /* add-row + summary footer */
-    & .datatable-addcell { padding: 0; border-top: none; }
-    & .datatable-addrow { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-top: 1px solid ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; cursor: pointer; transition: background-color .12s; }
-    & .datatable-addrow:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
-    & .datatable-addrow svg { flex-shrink: 0; }
-    & .datatable-check { display: flex; align-items: center; justify-content: center; }
-    & .datatable-col-check { width: 40px; padding: 0; text-align: center; }
+    & .crisp-datatable-addcell { padding: 0; border-top: none; }
+    & .crisp-datatable-addrow { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-top: 1px solid ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; cursor: pointer; transition: background-color .12s; }
+    & .crisp-datatable-addrow:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-datatable-addrow svg { flex-shrink: 0; }
+    & .crisp-datatable-check { display: flex; align-items: center; justify-content: center; }
+    & .crisp-datatable-col-check { width: 40px; padding: 0; text-align: center; }
     & tbody tr[data-selected] td { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface}); }
     & tbody tr[data-selected]:hover td { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface})); }
-    & .datatable-editable:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.bgSurface}); cursor: text; }
-    & .datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 ${tokens_1.contract.space["1.5"]}; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; outline: none; vertical-align: middle; }
-    & .datatable-edit:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
-    & .datatable-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; text-align: center; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.lg}; }
+    & .crisp-datatable-editable:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.bgSurface}); cursor: text; }
+    & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 ${tokens_1.contract.space["1.5"]}; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; outline: none; vertical-align: middle; }
+    & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-datatable-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; text-align: center; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.lg}; }
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }
     /* column resize grip */
-    & .datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
-    & .datatable-resize:hover::after, & .datatable-resize[data-resizing]::after { opacity: 1; }
+    & .crisp-datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .crisp-datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
+    & .crisp-datatable-resize:hover::after, & .crisp-datatable-resize[data-resizing]::after { opacity: 1; }
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
-    & .datatable-entity { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; }
-    & .datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .datatable-avatar { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; border-radius: ${tokens_1.contract.radius.sm}; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${tokens_1.contract.weight.semibold}; text-transform: uppercase; color: ${tokens_1.contract.fgOnBrand}; background: ${tokens_1.contract.bgBrandSolid}; }
-    & .datatable-avatar[data-tone="success"] { background: ${tokens_1.contract.bgSuccess}; } & .datatable-avatar[data-tone="warning"] { background: ${tokens_1.contract.bgWarning}; } & .datatable-avatar[data-tone="danger"] { background: ${tokens_1.contract.bgDanger}; } & .datatable-avatar[data-tone="purple"] { background: ${tokens_1.contract.bgPurple}; } & .datatable-avatar[data-tone="cyan"] { background: ${tokens_1.contract.bgCyan}; } & .datatable-avatar[data-tone="orange"] { background: ${tokens_1.contract.bgOrange}; }
-    & .datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
-    & .datatable-tags { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; overflow: hidden; }
-    & .datatable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); }
-    & .datatable-tag[data-tone="brand"] { 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}); }
-    & .datatable-tag[data-tone="success"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 78%, ${tokens_1.contract.fgPrimary}); }
-    & .datatable-tag[data-tone="warning"] { background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgWarning} 82%, ${tokens_1.contract.fgPrimary}); }
-    & .datatable-tag[data-tone="danger"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 15%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgDanger} 80%, ${tokens_1.contract.fgPrimary}); }
-    & .datatable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); }
-    & .datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); }
-    & .datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
-    & .datatable-num { font-variant-numeric: tabular-nums; }
-    & .datatable-muted { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-datatable-entity { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; }
+    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-datatable-avatar { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; border-radius: ${tokens_1.contract.radius.sm}; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${tokens_1.contract.weight.semibold}; text-transform: uppercase; color: ${tokens_1.contract.fgOnBrand}; background: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-datatable-avatar[data-tone="success"] { background: ${tokens_1.contract.bgSuccess}; } & .crisp-datatable-avatar[data-tone="warning"] { background: ${tokens_1.contract.bgWarning}; } & .crisp-datatable-avatar[data-tone="danger"] { background: ${tokens_1.contract.bgDanger}; } & .crisp-datatable-avatar[data-tone="purple"] { background: ${tokens_1.contract.bgPurple}; } & .crisp-datatable-avatar[data-tone="cyan"] { background: ${tokens_1.contract.bgCyan}; } & .crisp-datatable-avatar[data-tone="orange"] { background: ${tokens_1.contract.bgOrange}; }
+    & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
+    & .crisp-datatable-tags { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; overflow: hidden; }
+    & .crisp-datatable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); }
+    & .crisp-datatable-tag[data-tone="brand"] { 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}); }
+    & .crisp-datatable-tag[data-tone="success"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 78%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="warning"] { background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgWarning} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="danger"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 15%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgDanger} 80%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
+    & .crisp-datatable-muted { color: ${tokens_1.contract.fgMuted}; }
     /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
        a leading 20px grip column, a 16px grip icon, and the row's own
        hairline doubling as the drop indicator (it tints toward the brand
@@ -101,9 +101,9 @@ const config = (0, core_1.defineRecipe)({
        draggable + dataTransfer, the same one column reorder already uses
        (RecordsTable's reorderColumn) -- not a proprietary
        pointer-events implementation. */
-    & .datatable-col-grip { width: 20px; padding: 0; text-align: center; }
-    & .datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: ${tokens_1.contract.fgMuted}; cursor: grab; }
-    & .datatable-grip:active { cursor: grabbing; }
+    & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
+    & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: ${tokens_1.contract.fgMuted}; cursor: grab; }
+    & .crisp-datatable-grip:active { cursor: grabbing; }
     & tbody tr[data-drop-target] td, & tbody tr[data-drop-target] th { box-shadow: inset 0 2px 0 0 ${tokens_1.contract.bgBrandSolid}; transition: box-shadow .12s; }`,
     variants: {},
     defaultVariants: {},

package/dist/cjs/components/datepicker/datepicker.js

@@ -42,15 +42,15 @@ const React = __importStar(require("react"));
 const wheelpicker_1 = require("../wheelpicker");
 const datepicker_recipe_1 = require("./datepicker.recipe");
 function WeekdayRow({ api, semantic = true, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { role: semantic ? "row" : undefined, "aria-hidden": semantic ? undefined : true, className: "datepicker-weekday-row", children: api.weekdayLabels.map((weekday) => ((0, jsx_runtime_1.jsx)("div", { role: semantic ? "columnheader" : undefined, "aria-label": semantic ? weekday.long : undefined, className: "datepicker-weekday", children: (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: weekday.short }) }, weekday.key))) }));
+    return ((0, jsx_runtime_1.jsx)("div", { role: semantic ? "row" : undefined, "aria-hidden": semantic ? undefined : true, className: "crisp-datepicker-weekday-row", children: api.weekdayLabels.map((weekday) => ((0, jsx_runtime_1.jsx)("div", { role: semantic ? "columnheader" : undefined, "aria-label": semantic ? weekday.long : undefined, className: "crisp-datepicker-weekday", children: (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: weekday.short }) }, weekday.key))) }));
 }
 function DateCellView({ cell, renderDateCellContent, renderDateCellSupplement, }) {
     // a leading/trailing blank in the grid: still a gridcell, so the row keeps
     // seven columns for a screen reader, but nothing to press
     if (cell === null)
-        return ((0, jsx_runtime_1.jsx)("div", { role: "gridcell", className: "datepicker-empty-cell" }));
+        return ((0, jsx_runtime_1.jsx)("div", { role: "gridcell", className: "crisp-datepicker-empty-cell" }));
     const { cellProps, buttonProps, key: _key, ...renderProps } = cell;
-    return ((0, jsx_runtime_1.jsx)("div", { ...cellProps, className: "datepicker-cell", children: (0, jsx_runtime_1.jsx)("button", { ...buttonProps, type: "button", className: "datepicker-date", children: (0, jsx_runtime_1.jsx)("span", { className: "datepicker-date-content", children: renderDateCellContent ? (renderDateCellContent(renderProps)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { "data-date-picker-day": "", children: cell.formattedDay }), renderDateCellSupplement?.(renderProps)] })) }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...cellProps, className: "crisp-datepicker-cell", children: (0, jsx_runtime_1.jsx)("button", { ...buttonProps, type: "button", className: "crisp-datepicker-date", children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-datepicker-date-content", children: renderDateCellContent ? (renderDateCellContent(renderProps)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { "data-date-picker-day": "", children: cell.formattedDay }), renderDateCellSupplement?.(renderProps)] })) }) }) }));
 }
 function NavigationButton({ direction, className, ...props }) {
     const Icon = direction === "left" ? lucide_react_1.ChevronLeft : lucide_react_1.ChevronRight;
@@ -60,9 +60,9 @@ function Header({ api }) {
     // in RTL the chevrons swap: "previous" is on the right
     const previousDirection = api.isRtl ? "right" : "left";
     const nextDirection = api.isRtl ? "left" : "right";
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "datepicker-header", children: [(0, jsx_runtime_1.jsxs)("button", { ...api.monthYearButtonProps, "aria-controls": api.isWheelOpen
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepicker-header", children: [(0, jsx_runtime_1.jsxs)("button", { ...api.monthYearButtonProps, "aria-controls": api.isWheelOpen
                     ? api.monthYearButtonProps["aria-controls"]
-                    : undefined, type: "button", id: `${api.rootProps.id}-header-label`, className: "datepicker-header-label", children: [(0, jsx_runtime_1.jsx)("span", { "data-date-picker-header-label": "", children: api.headerLabel }), (0, jsx_runtime_1.jsx)("span", { className: "datepicker-header-chevron", "data-open": api.isWheelOpen ? "" : undefined, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "datepicker-nav", children: [(0, jsx_runtime_1.jsx)(NavigationButton, { ...api.previousButtonProps, direction: previousDirection, className: "datepicker-nav-button" }), (0, jsx_runtime_1.jsx)(NavigationButton, { ...api.nextButtonProps, direction: nextDirection, className: "datepicker-nav-button" })] })] }));
+                    : undefined, type: "button", id: `${api.rootProps.id}-header-label`, className: "crisp-datepicker-header-label", children: [(0, jsx_runtime_1.jsx)("span", { "data-date-picker-header-label": "", children: api.headerLabel }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-datepicker-header-chevron", "data-open": api.isWheelOpen ? "" : undefined, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepicker-nav", children: [(0, jsx_runtime_1.jsx)(NavigationButton, { ...api.previousButtonProps, direction: previousDirection, className: "crisp-datepicker-nav-button" }), (0, jsx_runtime_1.jsx)(NavigationButton, { ...api.nextButtonProps, direction: nextDirection, className: "crisp-datepicker-nav-button" })] })] }));
 }
 function TwoMonthHeader({ api, label, labelId, position, }) {
     const isFirst = position === "first";
@@ -73,19 +73,19 @@ function TwoMonthHeader({ api, label, labelId, position, }) {
         : isFirst
             ? "left"
             : "right";
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "datepicker-two-month-header", children: [(0, jsx_runtime_1.jsx)("div", { id: labelId, className: "datepicker-two-month-label", children: label }), (0, jsx_runtime_1.jsx)(NavigationButton, { ...(isFirst ? api.previousButtonProps : api.nextButtonProps), direction: direction, "data-placement": isFirst ? "start" : "end", className: "datepicker-nav-button" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepicker-two-month-header", children: [(0, jsx_runtime_1.jsx)("div", { id: labelId, className: "crisp-datepicker-two-month-label", children: label }), (0, jsx_runtime_1.jsx)(NavigationButton, { ...(isFirst ? api.previousButtonProps : api.nextButtonProps), direction: direction, "data-placement": isFirst ? "start" : "end", className: "crisp-datepicker-nav-button" })] }));
 }
 function MonthView({ api, month, renderDateCellContent, renderDateCellSupplement, showWeekdays, showMonthLabel, renderHeader, monthRef, }) {
     const labelId = `${api.rootProps.id}-${month.key}-label`;
     const headerLabelId = `${api.rootProps.id}-header-label`;
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: monthRef, className: "datepicker-month", children: [renderHeader?.(labelId), showMonthLabel ? ((0, jsx_runtime_1.jsx)("div", { id: labelId, className: "datepicker-month-label", children: month.label })) : ((0, jsx_runtime_1.jsx)("span", { id: labelId, className: "datepicker-live-region", children: month.label })), (0, jsx_runtime_1.jsxs)("div", { ...api.gridProps, "aria-labelledby": showMonthLabel || renderHeader
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: monthRef, className: "crisp-datepicker-month", children: [renderHeader?.(labelId), showMonthLabel ? ((0, jsx_runtime_1.jsx)("div", { id: labelId, className: "crisp-datepicker-month-label", children: month.label })) : ((0, jsx_runtime_1.jsx)("span", { id: labelId, className: "crisp-datepicker-live-region", children: month.label })), (0, jsx_runtime_1.jsxs)("div", { ...api.gridProps, "aria-labelledby": showMonthLabel || renderHeader
                     ? labelId
                     : api.visibleRange === "month"
                         ? headerLabelId
-                        : labelId, className: "datepicker-grid", children: [showWeekdays && (0, jsx_runtime_1.jsx)(WeekdayRow, { api: api }), month.weeks.map((week) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "datepicker-week-row", children: week.cells.map((cell, index) => ((0, jsx_runtime_1.jsx)(DateCellView, { cell: cell, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement }, cell?.key ?? `${week.key}-empty-${index}`))) }, week.key)))] })] }));
+                        : labelId, className: "crisp-datepicker-grid", children: [showWeekdays && (0, jsx_runtime_1.jsx)(WeekdayRow, { api: api }), month.weeks.map((week) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "crisp-datepicker-week-row", children: week.cells.map((cell, index) => ((0, jsx_runtime_1.jsx)(DateCellView, { cell: cell, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement }, cell?.key ?? `${week.key}-empty-${index}`))) }, week.key)))] })] }));
 }
 function WheelView({ api }) {
-    return ((0, jsx_runtime_1.jsx)("div", { ...api.wheelProps, className: "datepicker-wheel-container", children: (0, jsx_runtime_1.jsx)(wheelpicker_1.WheelPicker, { className: "datepicker-wheel", "aria-label": api.headerLabel, columns: [
+    return ((0, jsx_runtime_1.jsx)("div", { ...api.wheelProps, className: "crisp-datepicker-wheel-container", children: (0, jsx_runtime_1.jsx)(wheelpicker_1.WheelPicker, { className: "crisp-datepicker-wheel", "aria-label": api.headerLabel, columns: [
                 {
                     key: "year",
                     label: api.ariaLabels.yearWheel,
@@ -126,13 +126,13 @@ const DatePickerImplementation = React.forwardRef((props, forwardedRef) => {
         }, ...(0, dom_utils_1.mergeProps)(api.rootProps, rootProps), "aria-label": rootAriaLabel, "aria-labelledby": ariaLabelledby, className: (0, datepicker_recipe_1.datepickerRecipe)({
             visibleRange: api.visibleRange,
             className,
-        }), style: styleOf({ height, minHeight, maxHeight }), children: [api.visibleRange === "continuous" ? ((0, jsx_runtime_1.jsxs)("div", { ref: api.refs.continuousScroll, ...api.continuousScrollProps, "data-date-picker-continuous-scroll": "", className: "datepicker-continuous-scroll", children: [(0, jsx_runtime_1.jsx)(WeekdayRow, { api: api, semantic: false }), (0, jsx_runtime_1.jsxs)("div", { className: "datepicker-continuous-content", children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.topHeight } }), api.months.map((month) => ((0, jsx_runtime_1.jsx)(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: false, showMonthLabel: true, monthRef: api.refs.continuousMonth(month.key) }, month.key))), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.bottomHeight } })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [api.visibleRange !== "twoMonths" && (0, jsx_runtime_1.jsx)(Header, { api: api }), (0, jsx_runtime_1.jsx)("div", { "data-wheel-open": api.isWheelOpen && api.visibleRange !== "twoMonths"
+        }), style: styleOf({ height, minHeight, maxHeight }), children: [api.visibleRange === "continuous" ? ((0, jsx_runtime_1.jsxs)("div", { ref: api.refs.continuousScroll, ...api.continuousScrollProps, "data-date-picker-continuous-scroll": "", className: "crisp-datepicker-continuous-scroll", children: [(0, jsx_runtime_1.jsx)(WeekdayRow, { api: api, semantic: false }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepicker-continuous-content", children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.topHeight } }), api.months.map((month) => ((0, jsx_runtime_1.jsx)(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: false, showMonthLabel: true, monthRef: api.refs.continuousMonth(month.key) }, month.key))), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.bottomHeight } })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [api.visibleRange !== "twoMonths" && (0, jsx_runtime_1.jsx)(Header, { api: api }), (0, jsx_runtime_1.jsx)("div", { "data-wheel-open": api.isWheelOpen && api.visibleRange !== "twoMonths"
                             ? ""
                             : undefined, "aria-hidden": api.isWheelOpen && api.visibleRange !== "twoMonths"
                             ? true
-                            : undefined, className: "datepicker-months", children: api.months.map((month, index) => ((0, jsx_runtime_1.jsx)(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: true, showMonthLabel: false, renderHeader: api.visibleRange === "twoMonths"
+                            : undefined, className: "crisp-datepicker-months", children: api.months.map((month, index) => ((0, jsx_runtime_1.jsx)(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: true, showMonthLabel: false, renderHeader: api.visibleRange === "twoMonths"
                                 ? (labelId) => ((0, jsx_runtime_1.jsx)(TwoMonthHeader, { api: api, label: month.label, labelId: labelId, position: index === 0 ? "first" : "last" }))
-                                : undefined }, month.key))) }), api.isWheelOpen && api.visibleRange !== "twoMonths" && ((0, jsx_runtime_1.jsx)(WheelView, { api: api }))] })), (0, jsx_runtime_1.jsx)("span", { ...api.liveRegionProps, className: "datepicker-live-region", children: api.headerLabel })] }));
+                                : undefined }, month.key))) }), api.isWheelOpen && api.visibleRange !== "twoMonths" && ((0, jsx_runtime_1.jsx)(WheelView, { api: api }))] })), (0, jsx_runtime_1.jsx)("span", { ...api.liveRegionProps, className: "crisp-datepicker-live-region", children: api.headerLabel })] }));
 });
 DatePickerImplementation.displayName = "DatePickerImplementation";
 exports.DatePicker = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(DatePickerImplementation, { ref: ref, ...props, visibleRange: "month" })));