@crisp-ui-kit/crisp 0.54.2 → 0.54.4

package/dist/esm/components/emptystate/emptystate.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { emptystateRecipe } from "./emptystate.recipe.js";
 /** A centred empty-state panel — icon, title, description, optional action. */
-export function EmptyState({ icon, title, description, action, variant, className, ...rest }) {
-    return (_jsxs("div", { className: emptystateRecipe({ variant, className }), ...rest, children: [icon && _jsx("span", { className: "crisp-emptystate-icon", children: icon }), _jsx("div", { className: "crisp-emptystate-title", children: title }), description != null && (_jsx("div", { className: "crisp-emptystate-desc", children: description })), action && _jsx("div", { className: "crisp-emptystate-action", children: action })] }));
+export function EmptyState({ icon, title, description, action, learnMore, variant, className, ...rest }) {
+    const learnMoreInner = learnMore && (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-emptystate-learnmore-icon", children: learnMore.icon }), _jsx("span", { className: "crisp-emptystate-learnmore-title", children: learnMore.title })] }));
+    return (_jsxs("div", { className: emptystateRecipe({ variant, className }), ...rest, children: [icon && _jsx("span", { className: "crisp-emptystate-icon", children: icon }), _jsx("div", { className: "crisp-emptystate-title", children: title }), description != null && (_jsx("div", { className: "crisp-emptystate-desc", children: description })), action && _jsx("div", { className: "crisp-emptystate-action", children: action }), learnMore && (_jsxs("div", { className: "crisp-emptystate-learnmore", children: [_jsx("div", { className: "crisp-emptystate-learnmore-label", children: learnMore.label ?? "Learn more" }), learnMore.href ? (_jsx("a", { className: "crisp-emptystate-learnmore-card", href: learnMore.href, onClick: learnMore.onClick, children: learnMoreInner })) : (_jsx("button", { type: "button", className: "crisp-emptystate-learnmore-card", onClick: learnMore.onClick, children: learnMoreInner }))] }))] }));
 }
 EmptyState.displayName = "EmptyState";

package/dist/esm/components/emptystate/emptystate.recipe.js

@@ -7,7 +7,18 @@ const config = defineRecipe({
     & .crisp-emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent); color: ${c.fgMuted}; }
     & .crisp-emptystate-title { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
     & .crisp-emptystate-desc { max-width: 320px; font-size: ${c.text.md}; color: ${c.fgMuted}; }
-    & .crisp-emptystate-action { margin-top: ${c.space["2"]}; }`,
+    /* #603: measured 8px gap between "Import CSV"/"Connect data source" --
+       inline-flex so one action (the common case) or several lay out the
+       same way, wrapping if the container is narrow. */
+    & .crisp-emptystate-action { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: ${c.space["2"]}; margin-top: ${c.space["2"]}; }
+    /* #603: Attio's zero-records "Learn more" card -- a label above a
+       clickable icon+title tile. Left/start-aligned, unlike the rest of
+       this centred panel, so it overrides the base text-align. */
+    & .crisp-emptystate-learnmore { display: flex; flex-direction: column; align-items: stretch; gap: ${c.space["2"]}; margin-top: ${c.space["6"]}; text-align: start; }
+    & .crisp-emptystate-learnmore-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
+    & .crisp-emptystate-learnmore-card { display: flex; align-items: center; gap: ${c.space["2"]}; padding: ${c.space["2"]} ${c.space["3"]} ${c.space["2"]} ${c.space["2"]}; margin: 0; border: 1px solid ${c.borderSubtle}; border-radius: 18px; background: ${c.bgSurface}; font: inherit; text-align: start; text-decoration: none; color: inherit; cursor: pointer; }
+    & .crisp-emptystate-learnmore-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: ${c.radius.xl}; background: color-mix(in srgb, ${c.fgPrimary} 2%, transparent); color: ${c.fgMuted}; }
+    & .crisp-emptystate-learnmore-title { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }`,
     variants: {
         variant: {
             // compact icon tile (default)
@@ -22,6 +33,20 @@ const config = defineRecipe({
     & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
     & .crisp-emptystate-desc { max-width: 266px; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; }
     & .crisp-emptystate-action { margin-top: ${c.space["2"]}; }`,
+            // #603: Attio's zero-*records* table state (Users/Workspaces with
+            // nothing imported) -- the same dotted-grid backdrop `illustrated`
+            // uses, at its own measured 138x138 square (illustrated's is a
+            // 132x96 rectangle; different surface, not the same number).
+            // Attio's own illustration also draws four small "+" tick marks at
+            // the tile's corners -- a single proprietary SVG asset (confirmed
+            // by inspecting the live DOM: one <svg> with no separately
+            // measurable sub-elements), so not reproduced here per AUTHORING's
+            // "never copy Attio's icon set" rule; the icon itself is supplied
+            // by the consumer via the existing `icon` prop, same as every
+            // other variant.
+            records: `& .crisp-emptystate-icon { width: 138px; height: 138px; margin-bottom: ${c.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${c.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${c.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-desc { max-width: 266px; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; }`,
         },
     },
     defaultVariants: { variant: "default" },

package/dist/esm/components/emptystate/index.js

@@ -1,2 +1,2 @@
-export { EmptyState } from "./emptystate.js";
+export { EmptyState, } from "./emptystate.js";
 export { emptystateRecipe } from "./emptystate.recipe.js";

package/dist/esm/components/personchip/index.js

@@ -0,0 +1 @@
+export * from "./personchip.js";

package/dist/esm/components/personchip/personchip.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { contract as c } from "../../tokens/index.js";
+import { Avatar } from "../avatar/index.js";
+import { Chip } from "../chip/index.js";
+// The same five hashed avatar tones DataTable's own `avatarTone="hashed"`
+// picks from (datatable.tsx's private `TAG_TONES`, transcribed rather than
+// imported — DataTable owns its own file, and this is a one-line pure
+// function, not a visual value that could drift). `neutral`/`brand` are
+// left out: `neutral` is Avatar's own no-photo default (wrong here, every
+// name needs a colour to tell people apart) and `brand` is reserved for an
+// entity that IS the record a cell points at (`RecordChip`'s own tone),
+// which a person mention never is.
+const HASH_TONES = ["brand", "orange", "cyan", "purple", "green"];
+function hashTone(name) {
+    let h = 0;
+    for (let i = 0; i < name.length; i++)
+        h = (h * 31 + name.charCodeAt(i)) >>> 0;
+    return HASH_TONES[h % HASH_TONES.length];
+}
+function initials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return "?";
+    return (parts[0][0] + (parts[1]?.[0] ?? "")).toUpperCase();
+}
+/**
+ * A person, as a chip: a small avatar (a photo, or hashed-colour initials)
+ * plus their name, truncating with an ellipsis when it doesn't fit — Attio's
+ * own actor chip (measured live on `techpartners`, Tasks page, "Assigned to"
+ * column): a 16px circular avatar in a neutral `Chip`, `gap: 3px` between
+ * avatar and name (now `Chip`'s own base — every multi-child `Chip` gets
+ * it). Every other value — the pill's height, padding, radius, ring and text
+ * — is already `Chip`'s, unchanged; `PersonChip` adds no recipe of its own.
+ *
+ * Ellipsis only, no `Tooltip` on hover (#623 — no Attio reference for one;
+ * a truncated cell there is revealed by its own click-to-expand, #579, a
+ * different, DataTable-specific interaction).
+ *
+ * Composes `Chip`'s `truncate` CSS directly rather than its string-only
+ * auto-wrap (children here is an avatar plus a name, not a single string),
+ * so the name gets its own `.crisp-chip-label` span while the avatar stays
+ * fixed-size.
+ */
+export function PersonChip({ name, avatar, muted, className, ...props }) {
+    return (_jsxs(Chip, { tone: "neutral", truncate: true, className: className, ...props, children: [_jsx(Avatar, { size: "sm", shape: "circle", tone: avatar ? "neutral" : hashTone(name), children: avatar ? _jsx("img", { src: avatar, alt: "" }) : initials(name) }), _jsx("span", { className: "crisp-chip-label", style: muted ? { color: c.fgNeutralMuted } : undefined, children: name })] }));
+}
+PersonChip.displayName = "PersonChip";

package/dist/esm/components/table/table.js

@@ -12,11 +12,11 @@ export const Table = React.forwardRef(({ interactive, surface, className, wrappe
 // on the root for the same reason as Textarea: the wrapper is the box a
 // consumer sees and the scroll container they want to size. Native
 // table attributes still reach the <table> below.
-style, ...props }, ref) => (_jsx("div", { className: tableRecipe({
+style, tableStyle, ...props }, ref) => (_jsx("div", { className: tableRecipe({
         interactive,
         surface,
         className: wrapperClassName,
-    }), style: style, children: _jsx("div", { ...scrollProps, className: `crisp-table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: _jsx("table", { ref: ref, className: className, ...props, children: children }) }) })));
+    }), style: style, children: _jsx("div", { ...scrollProps, className: `crisp-table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: _jsx("table", { ref: ref, className: className, style: tableStyle, ...props, children: children }) }) })));
 Table.displayName = "Table";
 export const TableHeader = React.forwardRef((props, ref) => _jsx("thead", { ref: ref, ...props }));
 TableHeader.displayName = "TableHeader";

package/dist/esm/components/tabletoolbar/tabletoolbar.js

@@ -1,20 +1,30 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, Plus, X, } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, MoreVertical, Plus, X, } from "lucide-react";
 import * as React from "react";
 import { isInsideLaterFloatingLayer, useCrispMessage, useCrispMessages, useFocusAfterRemoval, } from "../../core/index.js";
-import { MenuCheckboxItem } from "../menu/index.js";
+import { MenuCheckboxItem, useMenuKeyboard } from "../menu/index.js";
 import { Select } from "../select/index.js";
 import { tabletoolbarRecipe } from "./tabletoolbar.recipe.js";
 const OP_LABELS = {
     contains: "contains",
+    doesnotcontain: "does not contain",
+    startswith: "starts with",
+    endswith: "ends with",
     is: "is",
     isnot: "is not",
     isanyof: "is any of",
     empty: "is empty",
     notempty: "is not empty",
 };
+// #619: order and label set match Attio's own text-filter operator picker
+// verbatim (measured live, per RecordsTable's own #578 port of the same
+// set: contains · does not contain · starts with · ends with · is · is not ·
+// empty · not empty).
 const OP_ORDER = [
     "contains",
+    "doesnotcontain",
+    "startswith",
+    "endswith",
     "is",
     "isnot",
     "empty",
@@ -23,7 +33,12 @@ const OP_ORDER = [
 // "isanyof" is appended only for a column that supplies `values` — there is
 // nothing to check off otherwise.
 const opsFor = (col) => col?.values?.length ? [...OP_ORDER, "isanyof"] : OP_ORDER;
-const opNeedsValue = (op) => op === "contains" || op === "is" || op === "isnot";
+const opNeedsValue = (op) => op === "contains" ||
+    op === "doesnotcontain" ||
+    op === "startswith" ||
+    op === "endswith" ||
+    op === "is" ||
+    op === "isnot";
 const opNeedsValues = (op) => op === "isanyof";
 // "Department is any of IT, Finance" past two values becomes "… +N": the
 // chip is one line, and a field can have far more than two facet values.
@@ -71,9 +86,15 @@ export function applyFilters(rows, filters, get = (row, key) => row[key]) {
         const v = f.value.trim().toLowerCase();
         if (f.op === "contains")
             return t.includes(v);
+        if (f.op === "doesnotcontain")
+            return !t.includes(v);
+        if (f.op === "startswith")
+            return t.startsWith(v);
+        if (f.op === "endswith")
+            return t.endsWith(v);
         if (f.op === "is")
             return t === v;
-        return t !== v;
+        return t !== v; // isnot
     }));
 }
 /**
@@ -117,7 +138,7 @@ export function applySorts(rows, sorts, get = (row, key) => row[key]) {
  * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
  * Created by), which one shared list can't reproduce.
  */
-export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, ...rest }) {
+export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, ...rest }) {
     // crisp/#471: an explicit prop always wins; missing, it reads the nearest
     // CrispMessagesProvider's translation of the English default below, or
     // that default itself with no provider — unchanged from before this
@@ -136,6 +157,8 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     const filterFieldLabel = useCrispMessage(filterFieldLabelProp, "Filter by field");
     const filterFieldPlaceholder = useCrispMessage(filterFieldPlaceholderProp, "Filter by…");
     const filterValuePlaceholder = useCrispMessage(filterValuePlaceholderProp, "Value…");
+    const filterOptionsLabel = useCrispMessage(filterOptionsLabelProp, "Filter options");
+    const deleteFilterLabel = useCrispMessage(deleteFilterLabelProp, "Delete filter");
     const ascendingLabel = useCrispMessage(ascendingLabelProp, "Ascending");
     const descendingLabel = useCrispMessage(descendingLabelProp, "Descending");
     // OP_LABELS' own words ("contains", "is", "is any of", …) have no prop of
@@ -230,6 +253,19 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
         putFilters(filters.filter((c) => c.id !== id));
         setOpenMenu(null);
     };
+    // #594: the filter chip's kebab is a real role="menu" (crisp/#188's shared
+    // model — arrows, Home/End, typeahead, Escape), not a hand-rolled div like
+    // the sort/condition popovers above (those are role="dialog", which makes
+    // no such promise). `openMenu` already only ever names ONE open surface at
+    // a time, so one hook call at the top level — not one per filter row,
+    // which would break the Rules of Hooks inside `filters.map` below — tracks
+    // whichever chip's kebab is currently open via its content ref.
+    const kebabMenuRef = React.useRef(null);
+    const { onKeyDown: onKebabKeyDown } = useMenuKeyboard({
+        open: typeof openMenu === "string" && openMenu.startsWith("fkebab:"),
+        close: () => setOpenMenu(null),
+        contentRef: kebabMenuRef,
+    });
     const activeFilters = filters.length;
     // The default phrase only works in English word order, so a caller can
     // replace the whole thing rather than fill a template — crisp/#471's
@@ -279,10 +315,11 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                     .map((col) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key)))] }))] }), filters.map((cond) => {
                     const col = filterColumns.find((c) => c.key === cond.key);
                     const open = openMenu === `fcond:${cond.id}`;
+                    const kebabOpen = openMenu === `fkebab:${cond.id}`;
                     const hasValue = (!opNeedsValue(cond.op) || cond.value.trim()) &&
                         (!opNeedsValues(cond.op) || (cond.values?.length ?? 0) > 0);
                     return (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("span", { className: "crisp-tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: crispMessages[OP_LABELS[cond.op]] ??
-                                                            OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : (_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "aria-label": `${crispMessages.Remove ?? "Remove"} ${col?.label} ${crispMessages.filter ?? "filter"}`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, children: [_jsxs("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " ", crispMessages.condition ?? "condition"] }), opsFor(col).map((op) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
+                                                            OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : (_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": kebabOpen, "aria-label": `${col?.label} ${filterOptionsLabel}`, onClick: () => setOpenMenu(kebabOpen ? null : `fkebab:${cond.id}`), children: _jsx(MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && (_jsx("div", { ref: kebabMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--right crisp-tabletoolbar-menu--hdr", role: "menu", "aria-label": `${col?.label} ${filterOptionsLabel}`, onKeyDown: onKebabKeyDown, children: _jsx("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => removeFilter(cond.id), children: deleteFilterLabel }) })), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, children: [_jsxs("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " ", crispMessages.condition ?? "condition"] }), opsFor(col).map((op) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
                                         // biome-ignore lint/a11y/noAutofocus: focus the value field
                                         autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) })), cond.op === "isanyof" && col?.values && (_jsxs(_Fragment, { children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
                                                 // biome-ignore lint/a11y/noAutofocus: focus the search field

package/dist/esm/components/tabs/tabs.js

@@ -8,7 +8,7 @@ import { useTablistKeyboard } from "./tabs-keyboard.js";
  * Home/End jump); activation follows focus. Controlled via
  * `value`/`onValueChange`, or uncontrolled from `defaultValue`.
  */
-export function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, "aria-label": ariaLabel, ...rest }) {
+export function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, fill, "aria-label": ariaLabel, ...rest }) {
     // Scoped to this instance: `tab-${value}` and `panel-${value}` are global,
     // so two tab bars sharing a value mint the same id twice and every
     // aria-labelledby resolves to the first one (#227).
@@ -47,7 +47,7 @@ export function Tabs({ tabs, value, defaultValue, onValueChange, leading, childr
         select,
         listRef,
     });
-    return (_jsxs("div", { className: tabsRecipe({ className }), ...rest, children: [_jsxs("div", { ref: listRef, className: "crisp-tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && _jsx("span", { className: "crisp-tabs-leading", children: leading }), tabs.map((t) => {
+    return (_jsxs("div", { className: tabsRecipe({ fill, className }), ...rest, children: [_jsxs("div", { ref: listRef, className: "crisp-tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && _jsx("span", { className: "crisp-tabs-leading", children: leading }), tabs.map((t) => {
                         const selected = t.value === active;
                         return (_jsxs("button", { type: "button", role: "tab", id: tabId(t.value), "aria-selected": selected, "aria-controls": children && selected ? panelId(t.value) : undefined, tabIndex: tabIndexFor(t.value), "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "crisp-tabs-tab", onClick: () => select(t.value), children: [t.icon, _jsx("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && (_jsx("span", { className: "crisp-tabs-tab-badge", children: t.badge }))] }, t.value));
                     }), indicator && (_jsx("span", { className: "crisp-tabs-indicator", style: {

package/dist/esm/components/tabs/tabs.recipe.js

@@ -12,6 +12,22 @@ import { contract as c } from "../../tokens/index.js";
 // a 16px leading icon and an optional count badge. Measured from the live
 // app: bar `padding: 0 12px 8px`, 28px pills, 4/8 padding, 6px icon-label
 // gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
+//
+// The panel's own `padding-top` (`c.space["8"]`, 32px) is measured
+// separately, live, on a company record page (Overview tab): the gap from
+// the tab row's own bottom to the content below it (the "Highlights"
+// heading) is a clean 32px with zero margin/padding contributed by either
+// boundary — not the 12px a GRC consumer had been carrying locally, which
+// turned out (checking its own history) to have been measured against that
+// app's own demo rendering, never against Attio itself.
+//
+// The panel is also `display: flex; flex-direction: column` (structural,
+// not measured): a consumer's own content — a table sizing itself to "the
+// rest of the space" — needs a flex-column ancestor with a real height to
+// grow into. A GRC consumer used to supply that itself, wrapping every
+// `children(active)` in its own `<div className="flex h-full min-h-0
+// flex-col">`; dropping that wrapper in favour of `fill` without this would
+// have silently broken every such table the moment the wrapper went away.
 const config = defineRecipe({
     name: "tabs",
     base: `
@@ -29,11 +45,22 @@ const config = defineRecipe({
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${c.fgPrimary}; }
     & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: ${c.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
-    & .crisp-tabs-panel { flex: 1; min-height: 0; }
+    & .crisp-tabs-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: ${c.space["8"]}; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
   `,
-    variants: {},
-    defaultVariants: {},
+    variants: {
+        // Opt-in: a `Tabs` dropped into a document-flow layout (a docs page, a
+        // demo) should size to its content like anything else. `fill` is for a
+        // consumer embedding it in a fixed-height shell — a record page, a full
+        // screen — matching the record page's own tab area, which visibly
+        // fills all available height (the same live check this file's panel
+        // measurement came from).
+        fill: {
+            true: `height: 100%;`,
+            false: "",
+        },
+    },
+    defaultVariants: { fill: false },
     compoundVariants: [],
 });
 export const tabsRecipe = Object.assign(resolveRecipe(config), { config });

package/dist/esm/components/text/index.js

@@ -0,0 +1,2 @@
+export { Text } from "./text.js";
+export { textRecipe } from "./text.recipe.js";

package/dist/esm/components/text/text.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { textRecipe } from "./text.recipe.js";
+/**
+ * Plain coloured text — `tone="default"` (the app's primary text colour) or
+ * `"muted"` — for the runs of text that aren't a Badge, a Chip, a link, or
+ * any of crisp's other typed things: a cell's own yes/no, an empty-state
+ * caption, a secondary line under a heading. One component so every such
+ * spot reaches for crisp's own tokens instead of each hand-writing its own
+ * colour utility for the same two values.
+ *
+ * Renders a `<span>` (inherits its size/weight/line-height from context —
+ * see `text.recipe.ts`'s doc for why `Text` sets none of those itself).
+ */
+export const Text = React.forwardRef(({ tone, className, asChild, children, ...props }, ref) => {
+    return (_jsx(Primitive.span, { ref: ref, asChild: asChild, className: textRecipe({ tone, className }), ...props, children: children }));
+});
+Text.displayName = "Text";

package/dist/esm/components/text/text.recipe.js

@@ -0,0 +1,31 @@
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// No new measurement — `tone` just names two colour tokens every other
+// component already carries (`fgPrimary`/`fgNeutralMuted`), for the plain
+// runs of text that aren't any of crisp's other typed things (a Badge, a
+// Chip, a link). Font size/weight/line-height are deliberately NOT set here:
+// unlike Badge or Chip, plain text has no single measured size across the
+// app (a table cell, a label, a caption are all different sizes) — `Text`
+// inherits type from its context, the same choice `MiddleTruncate` makes for
+// the same reason (see its own doc).
+const spec = defineSpec({
+    name: "text",
+    // `display: inline` -- a span's own default, stated rather than left
+    // implicit: an EMPTY base compiles to an empty string, and
+    // `core/resolve.ts`'s `if (base) classes.push(prefixedName)` treats that
+    // falsy string as "no base rule", which drops the `crisp-text` class
+    // itself, silently, from every instance (caught by this file's own
+    // tests going red on that exact class).
+    base: { display: "inline" },
+    variants: {
+        tone: {
+            default: { color: c.fgPrimary },
+            muted: { color: c.fgNeutralMuted },
+        },
+    },
+    defaultVariants: { tone: "default" },
+});
+const config = specToRecipe(spec);
+export const textRecipe = Object.assign(resolveRecipe(config), { config });
+export { spec };
+export default config;

package/dist/esm/index.js

@@ -37,6 +37,7 @@ export * from "./components/mentionchip/index.js";
 export * from "./components/menu/index.js";
 export * from "./components/middletruncate/index.js";
 export * from "./components/multiselect/index.js";
+export * from "./components/personchip/index.js";
 export * from "./components/popover/index.js";
 export * from "./components/progress/index.js";
 export * from "./components/quantitypicker/index.js";
@@ -54,6 +55,7 @@ export * from "./components/switch/index.js";
 export * from "./components/table/index.js";
 export * from "./components/tabletoolbar/index.js";
 export * from "./components/tabs/index.js";
+export * from "./components/text/index.js";
 export * from "./components/textarea/index.js";
 export * from "./components/textlink/index.js";
 export * from "./components/timepicker/index.js";
@@ -71,6 +73,7 @@ export * from "./product/appshell/index.js";
 export * from "./product/authshell/index.js";
 export * from "./product/board/index.js";
 export * from "./product/command/index.js";
+export * from "./product/comments/index.js";
 export * from "./product/entitycard/index.js";
 export * from "./product/flowcanvas/index.js";
 export * from "./product/formdialog/index.js";
@@ -79,6 +82,7 @@ export * from "./product/importdialog/index.js";
 export * from "./product/inbox/index.js";
 export * from "./product/listpage/index.js";
 export * from "./product/navitem/index.js";
+export * from "./product/objectsettings/index.js";
 export * from "./product/onboarding/index.js";
 export * from "./product/recordpage/index.js";
 export * from "./product/recordpanel/index.js";

package/dist/esm/product/board/board.js

@@ -1,18 +1,74 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
 import * as React from "react";
+import { Menu, MenuItem } from "../../components/menu/index.js";
 import { isRtlElement, useCrispMessage, useCrispMessages } from "../../core/index.js";
 import { boardRecipe } from "./board.recipe.js";
+const BOARD_AGG_ORDER = [
+    "countEmpty",
+    "countFilled",
+    "percentEmpty",
+    "percentFilled",
+    "sum",
+    "average",
+    "max",
+    "min",
+];
+// English default text, looked up through `useCrispMessages()` (crisp/#471)
+// the same way Board's other built-in fragments already are.
+const AGG_LABEL = {
+    countEmpty: "Count empty",
+    countFilled: "Count filled",
+    percentEmpty: "Percent empty",
+    percentFilled: "Percent filled",
+    sum: "Sum",
+    average: "Average",
+    max: "Max",
+    min: "Min",
+};
+function computeBoardAgg(agg, values) {
+    const filled = values.filter((v) => v != null);
+    const total = values.length;
+    switch (agg) {
+        case "countEmpty":
+            return String(total - filled.length);
+        case "countFilled":
+            return String(filled.length);
+        case "percentEmpty":
+            return total === 0
+                ? "0%"
+                : `${Math.round(((total - filled.length) / total) * 100)}%`;
+        case "percentFilled":
+            return total === 0
+                ? "0%"
+                : `${Math.round((filled.length / total) * 100)}%`;
+        case "sum":
+            return filled.reduce((a, b) => a + b, 0).toLocaleString();
+        case "average":
+            return filled.length === 0
+                ? "0"
+                : (filled.reduce((a, b) => a + b, 0) / filled.length).toLocaleString(undefined, { maximumFractionDigits: 2 });
+        case "max":
+            return filled.length === 0 ? "—" : Math.max(...filled).toLocaleString();
+        case "min":
+            return filled.length === 0 ? "—" : Math.min(...filled).toLocaleString();
+    }
+}
 /**
  * A kanban board with native drag-and-drop between columns. Cards are
  * `draggable`; dropping one on a column reparents it via `onCardsChange`
  * (the parent owns the cards, so the move is a controlled state update).
  * Measured from a deals pipeline.
  */
-export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel: newCardLabelProp, getCardLabel, announceMove: announceMoveProp, className, ...rest }) {
+export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel: newCardLabelProp, getCardLabel, announceMove: announceMoveProp, calc, className, ...rest }) {
     // crisp/#471: same resolution order as every other component's own —
     // explicit prop, then a CrispMessagesProvider's translation of the English
     // default, then that default itself.
     const newCardLabel = useCrispMessage(newCardLabelProp, "New");
+    // #604: which BoardAgg each column's footer shows, keyed by column id.
+    // Unset (undefined) means the column still shows the "+ Add calculation"
+    // trigger, exactly like the table footer's own per-column state.
+    const [colAgg, setColAgg] = React.useState({});
     const crispMessages = useCrispMessages();
     const announceMove = announceMoveProp ??
         ((column, card) => card
@@ -92,7 +148,9 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
                                         // Ctrl+Right at the last column still reaches the browser
                                         if (delta && moveByKey(card, delta))
                                             e.preventDefault();
-                                    }, children: renderCard(card) }, card.id)))] })] }, col.id));
+                                    }, children: renderCard(card) }, card.id)))] }), calc && (_jsx("div", { className: "crisp-board-col-footer", children: _jsx(Menu, { align: "start", trigger: _jsx("button", { type: "button", className: "crisp-board-col-calc", "data-empty": colAgg[col.id] ? undefined : "", children: colAgg[col.id] ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-board-col-calc-label", children: crispMessages[AGG_LABEL[colAgg[col.id]]] ??
+                                                    AGG_LABEL[colAgg[col.id]] }), _jsx("span", { className: "crisp-board-col-calc-value", children: computeBoardAgg(colAgg[col.id], colCards.map((c) => calc.getValue(c))) })] })) : ((crispMessages["+ Add calculation"] ??
+                                        "+ Add calculation")) }), children: BOARD_AGG_ORDER.map((a) => (_jsxs(MenuItem, { onSelect: () => setColAgg((prev) => ({ ...prev, [col.id]: a })), children: [crispMessages[AGG_LABEL[a]] ?? AGG_LABEL[a], colAgg[col.id] === a ? (_jsx(Check, { size: 15, strokeWidth: 1.75 })) : null] }, a))) }) }))] }, col.id));
             }), _jsx("div", { className: "crisp-board-live", role: "status", "aria-live": "polite", children: announcement })] }));
 }
 Board.displayName = "Board";

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

@@ -32,6 +32,16 @@ const config = defineRecipe({
     & .crisp-board-card[data-dragging] { opacity: 0.4; }
     & .crisp-board-card:focus { outline: none; }
     & .crisp-board-card:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+    /* #604: a per-column calc footer, mirroring the table's own (measured
+       live, Deals pipeline). Sits below the scrollable card body, not
+       inside it or pinned to it -- Attio's own is position: static, not
+       sticky, so it's a plain flex-shrink:0 sibling here too. */
+    & .crisp-board-col-footer { flex-shrink: 0; padding: ${c.space["1"]} 0; }
+    & .crisp-board-col-calc { display: flex; align-items: center; justify-content: center; gap: ${c.space["1"]}; width: 100%; height: 28px; padding: ${c.space["1"]} ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); cursor: pointer; }
+    & .crisp-board-col-calc:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
+    & .crisp-board-col-calc[data-empty] { opacity: 0.7; }
+    & .crisp-board-col-calc-label { text-transform: capitalize; }
+    & .crisp-board-col-calc-value { color: ${c.fgPrimary}; font-variant-numeric: tabular-nums; }
     /* announced, never drawn */
     & .crisp-board-live {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;