@crisp-ui-kit/crisp 0.17.0 → 0.19.0

package/dist/cjs/components/columncalc/columncalc.js

@@ -117,7 +117,7 @@ function computeCalc(values, op) {
 const defaultFormat = (n, op) => op === "percentEmpty" || op === "percentFilled"
     ? `${Math.round(n)}%`
     : n.toLocaleString(undefined, { maximumFractionDigits: 2 });
-function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opProp, onOpChange, format = defaultFormat, align, opLabels, className, ...rest }) {
+function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opProp, onOpChange, addLabel = "Add calculation", sectionLabel = "Aggregations", format = defaultFormat, align, opLabels, className, ...rest }) {
     // a partial override, so a consumer can translate one op without
     // restating all nine
     const labelFor = (o) => opLabels?.[o] ?? exports.CALC_LABEL[o];
@@ -135,5 +135,5 @@ function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opPr
         ...(numeric ? exports.NUMERIC_CALCS : []),
         "none",
     ];
-    return ((0, jsx_runtime_1.jsx)("span", { className: (0, columncalc_recipe_1.columncalcRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)(menu_1.Menu, { trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "columncalc-trigger", "data-align": align === "right" ? "right" : undefined, children: op === "none" || result === null ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 12, strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("span", { className: "columncalc-placeholder", children: "Add calculation" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "columncalc-value", children: format(result, op) }), (0, jsx_runtime_1.jsx)("span", { className: "columncalc-op", children: labelFor(op) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 12, strokeWidth: 2 })] })) }), children: [(0, jsx_runtime_1.jsx)("div", { className: "columncalc-section", children: "Aggregations" }), ops.map((o) => ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setOp(o), children: labelFor(o) }, o)))] }) }));
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, columncalc_recipe_1.columncalcRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)(menu_1.Menu, { trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "columncalc-trigger", "data-align": align === "right" ? "right" : undefined, children: op === "none" || result === null ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 12, strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("span", { className: "columncalc-placeholder", children: addLabel })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "columncalc-value", children: format(result, op) }), (0, jsx_runtime_1.jsx)("span", { className: "columncalc-op", children: labelFor(op) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 12, strokeWidth: 2 })] })) }), children: [(0, jsx_runtime_1.jsx)("div", { className: "columncalc-section", children: sectionLabel }), ops.map((o) => ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setOp(o), children: labelFor(o) }, o)))] }) }));
 }

package/dist/cjs/components/datepickerfield/datepickerfield.js

@@ -57,13 +57,15 @@ const fromDate = (d) => ({
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-function DatePickerField({ value, defaultValue, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
     const [internal, setInternal] = React.useState(defaultValue ?? null);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);
     const pick = (d) => {
         if (value === undefined)
             setInternal(d);
+        // both, so a consumer passing either name is heard
+        onValueChange?.(d);
         onChange?.(d);
         setOpen(false);
     };

package/dist/cjs/components/multiselect/multiselect.js

@@ -64,7 +64,7 @@ function Chip({ opt }) {
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, ...rest }) {
+function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field) and the
     // active option is named by `aria-activedescendant`. `data-highlighted` is a
     // styling hook only -- a screen reader cannot see it.
@@ -161,7 +161,7 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, p
                 }, children: [(0, jsx_runtime_1.jsx)("span", { className: "multiselect-chips", children: selectedOptions.length === 0 ? ((0, jsx_runtime_1.jsx)("span", { className: "multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => (0, jsx_runtime_1.jsx)(Chip, { opt: o }, o.value))) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { id: listboxId, className: "multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "multiselect-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                     setQuery(e.target.value);
                                     setHighlight(0);
-                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "multiselect-empty", children: "No results" })) : (filtered.map((opt, i) => {
+                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                         const sel = selectedSet.has(opt.value);
                         return ((0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [(0, jsx_runtime_1.jsx)("span", { className: "multiselect-option-chip", children: (0, jsx_runtime_1.jsx)(Chip, { opt: opt }) }), (0, jsx_runtime_1.jsx)("span", { className: "multiselect-check", children: sel && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
                     }))] }))] }));

package/dist/cjs/components/select/select.js

@@ -51,7 +51,7 @@ function optionText(o) {
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
+function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field), and the
     // active option is named by `aria-activedescendant`. That is the only thing a
     // screen reader has to go on -- `data-highlighted` is invisible to it -- so the
@@ -150,7 +150,7 @@ function Select({ options, value, defaultValue, onValueChange, placeholder = "Se
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { id: listboxId, className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                     setQuery(e.target.value);
                                     setHighlight(0);
-                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "select-empty", children: "No results" })) : (filtered.map((opt, i) => {
+                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                         const isSel = opt.value === selected;
                         return ((0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: opt.color } })), (0, jsx_runtime_1.jsx)("span", { className: "select-option-label", children: opt.label }), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
                     }))] }))] }));

package/dist/cjs/components/tabletoolbar/tabletoolbar.js

@@ -134,7 +134,7 @@ function applySorts(rows, sorts, get = (row, key) => row[key]) {
  * composable version, to put above `DataTable` or any table of your own. Pair
  * it with `applyFilters` / `applySorts` to turn its state into rows.
  */
-function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel = "Sort", reorderSortLabel = "Reorder sort", sortFieldLabel = "Sort field", sortDirectionLabel = "Sort direction", removeSortLabel = "Remove sort", filterFieldLabel = "Filter by field", filterFieldPlaceholder = "Filter by…", filterValuePlaceholder = "Value…", ascendingLabel = "Ascending", descendingLabel = "Descending", sortTriggerLabel, filterTriggerLabel, ...rest }) {
+function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel = "Sort", reorderSortLabel = "Reorder sort", noSortsLabel = "No sorts applied to this view.", addSortLabel = "Add sort", learnSortingLabel = "Learn about sorting", selectConditionLabel = "Select condition", sortFieldLabel = "Sort field", sortDirectionLabel = "Sort direction", removeSortLabel = "Remove sort", filterFieldLabel = "Filter by field", filterFieldPlaceholder = "Filter by…", filterValuePlaceholder = "Value…", ascendingLabel = "Ascending", descendingLabel = "Descending", sortTriggerLabel, filterTriggerLabel, ...rest }) {
     const [sortsState, setSortsState] = React.useState(defaultSorts ?? []);
     const [filtersState, setFiltersState] = React.useState(defaultFilters ?? []);
     const sorts = sortsProp ?? sortsState;
@@ -206,7 +206,7 @@ function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange,
         : sorts.length
             ? `Sorted by ${columns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
             : "Sort";
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, tabletoolbar_recipe_1.tabletoolbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-toolbar", children: [(0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `tabletoolbar-tool${sorts.length ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && ((0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-menu tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-empty", children: "No sorts applied to this view." })) : (sorts.map((s, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-sort-row", onDragOver: (e) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, tabletoolbar_recipe_1.tabletoolbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-toolbar", children: [(0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `tabletoolbar-tool${sorts.length ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && ((0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-menu tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
                                             e.preventDefault();
                                     }, onDrop: () => {
@@ -228,7 +228,7 @@ function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange,
                                                     label: ((0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), descendingLabel] })),
                                                     keywords: descendingLabel,
                                                 },
-                                            ], "aria-label": sortDirectionLabel }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "tabletoolbar-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), "Add sort"] }) }), helpHref && ((0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-foot", children: (0, jsx_runtime_1.jsxs)("a", { className: "tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), "Learn about sorting"] }) }))] }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `tabletoolbar-tool tabletoolbar-tool--ghost${activeFilters ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
+                                            ], "aria-label": sortDirectionLabel }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "tabletoolbar-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && ((0, jsx_runtime_1.jsx)("div", { className: "tabletoolbar-sort-foot", children: (0, jsx_runtime_1.jsxs)("a", { className: "tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `tabletoolbar-tool tabletoolbar-tool--ghost${activeFilters ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
                                     ? filterTriggerLabel(activeFilters)
                                     : activeFilters
                                         ? `Filter · ${activeFilters}`
@@ -242,7 +242,7 @@ function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange,
                     const col = columns.find((c) => c.key === cond.key);
                     const open = openMenu === `fcond:${cond.id}`;
                     const hasValue = !opNeedsValue(cond.op) || cond.value.trim();
-                    return ((0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-fchip", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [(0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-fchip-field", children: col?.label }), hasValue ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-fchip-val", children: cond.value }))] })) : ((0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-fchip-op", children: "Select condition" }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("input", { className: "tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
+                    return ((0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("span", { className: "tabletoolbar-fchip", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [(0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-fchip-field", children: col?.label }), hasValue ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-fchip-val", children: cond.value }))] })) : ((0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-fchip-op", children: selectConditionLabel }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2 }) })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "tabletoolbar-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && ((0, jsx_runtime_1.jsx)("input", { className: "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.id));
                 }), (0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-spacer" }), count != null && (0, jsx_runtime_1.jsx)("span", { className: "tabletoolbar-count", children: count }), children] }) }));

package/dist/cjs/product/recordpage/recordpage.js

@@ -64,6 +64,7 @@ exports.recordPageLabels = {
     composeEmail: "Compose email",
     askAttio: "Ask Attio",
     addToList: "Add to list",
+    noLists: "This record has not been added to any lists.",
     highlights: "Highlights",
     recordDetails: "Record Details",
     searchFields: "Search fields",
@@ -76,6 +77,10 @@ exports.recordPageLabels = {
     viewLess: "View less",
     newNote: "New note",
     newTask: "New task",
+    notePlaceholder: "Write a note…  (⌘↵ to save)",
+    saveNote: "Save note",
+    taskPlaceholder: "Task name…  (↵ to add)",
+    addTask: "Add task",
     cancel: "Cancel",
     noNotesYet: "No notes yet.",
     noTasksYet: "No tasks yet.",
@@ -159,14 +164,14 @@ function Composer({ placeholder, submitLabel, multiline, onSubmit, onCancel, lab
 }
 function NotesSection({ notes, onAdd, labels, }) {
     const [open, setOpen] = React.useState(false);
-    return ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: labels.tabs.notes, count: notes.length, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), labels.newNote] }) }), open && ((0, jsx_runtime_1.jsx)(Composer, { labels: labels, multiline: true, placeholder: "Write a note\u2026  (\u2318\u21B5 to save)", submitLabel: "Save note", onCancel: () => setOpen(false), onSubmit: (t) => {
+    return ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: labels.tabs.notes, count: notes.length, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), labels.newNote] }) }), open && ((0, jsx_runtime_1.jsx)(Composer, { labels: labels, multiline: true, placeholder: labels.notePlaceholder, submitLabel: labels.saveNote, onCancel: () => setOpen(false), onSubmit: (t) => {
                     onAdd(t);
                     setOpen(false);
                 } })), notes.length === 0 && !open ? ((0, jsx_runtime_1.jsx)("div", { className: "recordpage-emptystate", children: labels.noNotesYet })) : (notes.map((n) => ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-note", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-note-body", children: [(0, jsx_runtime_1.jsxs)("div", { className: "recordpage-note-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "recordpage-note-author", children: labels.you }), (0, jsx_runtime_1.jsx)("span", { className: "recordpage-note-time", children: n.time })] }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-note-text", children: n.text })] })] }, n.id))))] }));
 }
 function TasksSection({ tasks, onAdd, onToggle, labels, }) {
     const [open, setOpen] = React.useState(false);
-    return ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: labels.tabs.tasks, count: tasks.length, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), labels.newTask] }) }), open && ((0, jsx_runtime_1.jsx)(Composer, { labels: labels, placeholder: "Task name\u2026  (\u21B5 to add)", submitLabel: "Add task", onCancel: () => setOpen(false), onSubmit: (t) => {
+    return ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: labels.tabs.tasks, count: tasks.length, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), labels.newTask] }) }), open && ((0, jsx_runtime_1.jsx)(Composer, { labels: labels, placeholder: labels.taskPlaceholder, submitLabel: labels.addTask, onCancel: () => setOpen(false), onSubmit: (t) => {
                     onAdd(t);
                     setOpen(false);
                 } })), tasks.length === 0 && !open ? ((0, jsx_runtime_1.jsx)("div", { className: "recordpage-emptystate", children: labels.noTasksYet })) : (tasks.map((t) => ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-task", "data-done": t.done ? "" : undefined, children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: t.done, onChange: () => onToggle(t.id), "aria-label": t.text }), (0, jsx_runtime_1.jsx)("span", { className: "recordpage-task-text", children: t.text })] }, t.id))))] }));
@@ -399,7 +404,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                                                         setSearchOpen(next);
                                                         if (!next)
                                                             setFieldQuery("");
-                                                    }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-emptystate", children: "This record has not been added to any lists." })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": 300, "aria-valuemax": 560, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
+                                                    }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": 300, "aria-valuemax": 560, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
                             if (e.key === "ArrowLeft")
                                 setDetailsW((w) => Math.max(300, w - 16));
                             else if (e.key === "ArrowRight")

package/dist/cjs/product/recordstable/recordstable.js

@@ -124,6 +124,9 @@ exports.recordsTableLabels = {
     duplicate: "Duplicate",
     addToList: "Add to list",
     inAList: "In a list",
+    searchRecordsPlaceholder: "Search records…",
+    searchOptionsPlaceholder: "Search options…",
+    selectedCount: "Selected",
     delete: "Delete",
     sendEmail: "Send email",
     exportCsv: "Export CSV",
@@ -309,14 +312,14 @@ function StatusCell({ column, row, onChange, }) {
     return ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", "aria-label": column.label, placeholder: "\u2014", value: row[column.key] ?? undefined, onValueChange: onChange, options: column.options ?? [] }));
 }
 function ReferenceCell({ column, row, onChange, labels, }) {
-    return ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", searchable: true, searchPlaceholder: "Search records\u2026", "aria-label": column.label, placeholder: labels.setRecordPlaceholder, value: row[column.key] ?? undefined, onValueChange: onChange, options: (column.refOptions ?? []).map((o) => ({
+    return ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", searchable: true, searchPlaceholder: labels.searchRecordsPlaceholder, "aria-label": column.label, placeholder: labels.setRecordPlaceholder, value: row[column.key] ?? undefined, onValueChange: onChange, options: (column.refOptions ?? []).map((o) => ({
             value: o.value,
             label: o.label,
         })) }));
 }
 function TagsCell({ column, row, options, onChange, labels, }) {
     const value = row[column.key] ?? [];
-    return ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { options: options, value: value, onValueChange: onChange, placeholder: labels.emptyPlaceholder, searchPlaceholder: "Search options\u2026", "aria-label": column.label }));
+    return ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { options: options, value: value, onValueChange: onChange, placeholder: labels.emptyPlaceholder, searchPlaceholder: labels.searchOptionsPlaceholder, "aria-label": column.label }));
 }
 function DateCell({ column, row, onChange, }) {
     const raw = row[column.key];
@@ -1047,7 +1050,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                             (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "recordstable-menu recordstable-menu--fixed recordstable-menu--up", role: "menu", "aria-label": `${col.label} summary`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: aggOptions(col).map((opt) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitemradio", tabIndex: -1, "aria-checked": a === opt, "data-on": a === opt ? "" : undefined, onClick: () => setAggValue(col.key, opt), children: [t.agg[opt], a === opt ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
                                         }), (0, jsx_runtime_1.jsx)("td", { className: "recordstable-sum recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "recordstable-empty", children: (0, jsx_runtime_1.jsx)(emptystate_1.EmptyState, { variant: "page", icon: activeFilters ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
                                 ? "None of your records match the filters that are set."
-                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-addrow", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), selected.size > 0 && ((0, jsx_runtime_1.jsxs)(bulkbar_1.BulkBar, { count: selected.size, countLabel: "Selected", onClear: () => setSelected(new Set()), children: [(0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.moreActions, trigger: (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), (0, jsx_runtime_1.jsx)(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
+                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-addrow", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), selected.size > 0 && ((0, jsx_runtime_1.jsxs)(bulkbar_1.BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [(0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.moreActions, trigger: (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), (0, jsx_runtime_1.jsx)(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: ctxRef, className: "recordstable-menu recordstable-ctx", role: "menu", "aria-label": t.recordActions, style: { position: "fixed", top: ctxMenu.y, left: ctxMenu.x }, onKeyDown: onCtxKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-menu-item recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), t.delete] })] }), rootRef.current ?? document.body)] }));
 }
 exports.defaultColumns = [

package/dist/cjs/product/sidebar/sidebar.js

@@ -117,7 +117,7 @@ exports.ATTIO_SIDEBAR_FOOTER = {
 function SectionHeader({ label, open, onToggle, }) {
     return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "sidebar-section-header", "data-collapsed": open ? undefined : "", "aria-expanded": open, onClick: onToggle, children: [(0, jsx_runtime_1.jsx)(IconChevronMini, {}), (0, jsx_runtime_1.jsx)("span", { children: label })] }));
 }
-exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", workspace = exports.ATTIO_SIDEBAR_WORKSPACE, items = exports.ATTIO_SIDEBAR_ITEMS, recordsSection = exports.ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = exports.ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = exports.ATTIO_SIDEBAR_CHATS_SECTION, footer = exports.ATTIO_SIDEBAR_FOOTER, ...props }, ref) => {
+exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = exports.ATTIO_SIDEBAR_WORKSPACE, items = exports.ATTIO_SIDEBAR_ITEMS, recordsSection = exports.ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = exports.ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = exports.ATTIO_SIDEBAR_CHATS_SECTION, footer = exports.ATTIO_SIDEBAR_FOOTER, ...props }, ref) => {
     const [collapsedSections, setCollapsedSections] = React.useState(() => new Set());
     const [commandOpen, setCommandOpen] = React.useState(false);
     React.useEffect(() => {
@@ -143,6 +143,6 @@ exports.Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, coll
             return next;
         });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.div, { ref: ref, asChild: asChild, className: (0, sidebar_recipe_1.sidebarRecipe)({ className }), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "sidebar-ws", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), (0, jsx_runtime_1.jsx)("span", { className: "sidebar-ws-name", children: workspace.name }), (0, jsx_runtime_1.jsx)(IconChevronDown, {}), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "ghost", size: "sm", shape: "icon", className: "sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: (0, jsx_runtime_1.jsx)(IconCollapsePanel, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "sidebar-searchrow", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "sidebar-search", onClick: () => setCommandOpen(true), children: [(0, jsx_runtime_1.jsx)(IconSearch, {}), (0, jsx_runtime_1.jsx)("span", { className: "sidebar-search-label", children: "Search" }), (0, jsx_runtime_1.jsx)("span", { className: "sidebar-search-kbd", children: "\u2318K" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: (0, jsx_runtime_1.jsx)(IconInbox, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-divider" }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", active: active, icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), trailing: trailing, children: label }, label))) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: tone, children: (0, jsx_runtime_1.jsx)(Glyph, {}) }), children: label }, label))) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "sidebar-newlist", children: listsSection.newListLabel }) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), children: label }, label))) }), (0, jsx_runtime_1.jsxs)("div", { className: "sidebar-footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", className: "sidebar-pill", children: footer.gettingStartedLabel }), (0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(IconInvite, {}), children: footer.inviteLabel }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "sidebar-trial", children: [(0, jsx_runtime_1.jsx)("span", { children: footer.trialText }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), (0, jsx_runtime_1.jsx)(command_1.Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
+    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.div, { ref: ref, asChild: asChild, className: (0, sidebar_recipe_1.sidebarRecipe)({ className }), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "sidebar-ws", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), (0, jsx_runtime_1.jsx)("span", { className: "sidebar-ws-name", children: workspace.name }), (0, jsx_runtime_1.jsx)(IconChevronDown, {}), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "ghost", size: "sm", shape: "icon", className: "sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: (0, jsx_runtime_1.jsx)(IconCollapsePanel, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "sidebar-searchrow", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "sidebar-search", onClick: () => setCommandOpen(true), children: [(0, jsx_runtime_1.jsx)(IconSearch, {}), (0, jsx_runtime_1.jsx)("span", { className: "sidebar-search-label", children: searchLabel }), (0, jsx_runtime_1.jsx)("span", { className: "sidebar-search-kbd", children: "\u2318K" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: (0, jsx_runtime_1.jsx)(IconInbox, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-divider" }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", active: active, icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), trailing: trailing, children: label }, label))) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "rounded", tone: tone, children: (0, jsx_runtime_1.jsx)(Glyph, {}) }), children: label }, label))) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "sidebar-newlist", children: listsSection.newListLabel }) }), (0, jsx_runtime_1.jsx)(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => ((0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(ItemIcon, {}), children: label }, label))) }), (0, jsx_runtime_1.jsxs)("div", { className: "sidebar-footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", className: "sidebar-pill", children: footer.gettingStartedLabel }), (0, jsx_runtime_1.jsx)(navitem_1.NavItem, { href: "#", icon: (0, jsx_runtime_1.jsx)(IconInvite, {}), children: footer.inviteLabel }), (0, jsx_runtime_1.jsx)("div", { className: "sidebar-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "sidebar-trial", children: [(0, jsx_runtime_1.jsx)("span", { children: footer.trialText }), (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), (0, jsx_runtime_1.jsx)(command_1.Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
 });
 exports.Sidebar.displayName = "Sidebar";

package/dist/cjs/product/viewtoggle/viewtoggle.js

@@ -42,12 +42,15 @@ const viewtoggle_recipe_1 = require("./viewtoggle.recipe");
  * of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
  * grid) or any small mutually-exclusive icon choice.
  */
-function ViewToggle({ options, value: valueProp, defaultValue, onChange, "aria-label": ariaLabel, className, ...rest }) {
+function ViewToggle({ options, value: valueProp, defaultValue, onValueChange, onChange, "aria-label": ariaLabel, className, ...rest }) {
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const value = valueProp ?? internalValue ?? options[0]?.value;
     const pick = (next) => {
         if (valueProp === undefined)
             setInternalValue(next);
+        // both, so a consumer passing either name is heard and one passing both
+        // does not silently lose one
+        onValueChange?.(next);
         onChange?.(next);
     };
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, viewtoggle_recipe_1.viewtoggleRecipe)({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: options.map((o) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "viewtoggle-tile", "aria-pressed": o.value === value, "aria-label": o.label, title: o.label, "data-active": o.value === value ? "" : undefined, onClick: () => pick(o.value), children: o.icon }, o.value))) }));

package/dist/esm/components/columncalc/columncalc.js

@@ -78,7 +78,7 @@ export function computeCalc(values, op) {
 const defaultFormat = (n, op) => op === "percentEmpty" || op === "percentFilled"
     ? `${Math.round(n)}%`
     : n.toLocaleString(undefined, { maximumFractionDigits: 2 });
-export function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opProp, onOpChange, format = defaultFormat, align, opLabels, className, ...rest }) {
+export function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opProp, onOpChange, addLabel = "Add calculation", sectionLabel = "Aggregations", format = defaultFormat, align, opLabels, className, ...rest }) {
     // a partial override, so a consumer can translate one op without
     // restating all nine
     const labelFor = (o) => opLabels?.[o] ?? CALC_LABEL[o];
@@ -96,5 +96,5 @@ export function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", o
         ...(numeric ? NUMERIC_CALCS : []),
         "none",
     ];
-    return (_jsx("span", { className: columncalcRecipe({ className }), ...rest, children: _jsxs(Menu, { trigger: _jsx("button", { type: "button", className: "columncalc-trigger", "data-align": align === "right" ? "right" : undefined, children: op === "none" || result === null ? (_jsxs(_Fragment, { children: [_jsx(Plus, { size: 12, strokeWidth: 2 }), _jsx("span", { className: "columncalc-placeholder", children: "Add calculation" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "columncalc-value", children: format(result, op) }), _jsx("span", { className: "columncalc-op", children: labelFor(op) }), _jsx(ChevronDown, { size: 12, strokeWidth: 2 })] })) }), children: [_jsx("div", { className: "columncalc-section", children: "Aggregations" }), ops.map((o) => (_jsx(MenuItem, { onSelect: () => setOp(o), children: labelFor(o) }, o)))] }) }));
+    return (_jsx("span", { className: columncalcRecipe({ className }), ...rest, children: _jsxs(Menu, { trigger: _jsx("button", { type: "button", className: "columncalc-trigger", "data-align": align === "right" ? "right" : undefined, children: op === "none" || result === null ? (_jsxs(_Fragment, { children: [_jsx(Plus, { size: 12, strokeWidth: 2 }), _jsx("span", { className: "columncalc-placeholder", children: addLabel })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "columncalc-value", children: format(result, op) }), _jsx("span", { className: "columncalc-op", children: labelFor(op) }), _jsx(ChevronDown, { size: 12, strokeWidth: 2 })] })) }), children: [_jsx("div", { className: "columncalc-section", children: sectionLabel }), ops.map((o) => (_jsx(MenuItem, { onSelect: () => setOp(o), children: labelFor(o) }, o)))] }) }));
 }

package/dist/esm/components/datepickerfield/datepickerfield.js

@@ -21,13 +21,15 @@ const fromDate = (d) => ({
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-export function DatePickerField({ value, defaultValue, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+export function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
     const [internal, setInternal] = React.useState(defaultValue ?? null);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);
     const pick = (d) => {
         if (value === undefined)
             setInternal(d);
+        // both, so a consumer passing either name is heard
+        onValueChange?.(d);
         onChange?.(d);
         setOpen(false);
     };

package/dist/esm/components/multiselect/multiselect.js

@@ -28,7 +28,7 @@ function Chip({ opt }) {
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-export function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, ...rest }) {
+export function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field) and the
     // active option is named by `aria-activedescendant`. `data-highlighted` is a
     // styling hook only -- a screen reader cannot see it.
@@ -125,7 +125,7 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
                 }, children: [_jsx("span", { className: "multiselect-chips", children: selectedOptions.length === 0 ? (_jsx("span", { className: "multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => _jsx(Chip, { opt: o }, o.value))) }), _jsx(ChevronDown, { className: "multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { id: listboxId, className: "multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "multiselect-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                     setQuery(e.target.value);
                                     setHighlight(0);
-                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "multiselect-empty", children: "No results" })) : (filtered.map((opt, i) => {
+                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                         const sel = selectedSet.has(opt.value);
                         return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [_jsx("span", { className: "multiselect-option-chip", children: _jsx(Chip, { opt: opt }) }), _jsx("span", { className: "multiselect-check", children: sel && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
                     }))] }))] }));

package/dist/esm/components/select/select.js

@@ -15,7 +15,7 @@ function optionText(o) {
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
+export function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field), and the
     // active option is named by `aria-activedescendant`. That is the only thing a
     // screen reader has to go on -- `data-highlighted` is invisible to it -- so the
@@ -114,7 +114,7 @@ export function Select({ options, value, defaultValue, onValueChange, placeholde
     return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, className }), ...rest, children: [_jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { id: listboxId, className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                     setQuery(e.target.value);
                                     setHighlight(0);
-                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "select-empty", children: "No results" })) : (filtered.map((opt, i) => {
+                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                         const isSel = opt.value === selected;
                         return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && (_jsx("span", { className: "select-option-dot", style: { background: opt.color } })), _jsx("span", { className: "select-option-label", children: opt.label }), isSel && (_jsx(Check, { className: "select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
                     }))] }))] }));

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

@@ -96,7 +96,7 @@ export function applySorts(rows, sorts, get = (row, key) => row[key]) {
  * composable version, to put above `DataTable` or any table of your own. Pair
  * it with `applyFilters` / `applySorts` to turn its state into rows.
  */
-export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel = "Sort", reorderSortLabel = "Reorder sort", sortFieldLabel = "Sort field", sortDirectionLabel = "Sort direction", removeSortLabel = "Remove sort", filterFieldLabel = "Filter by field", filterFieldPlaceholder = "Filter by…", filterValuePlaceholder = "Value…", ascendingLabel = "Ascending", descendingLabel = "Descending", sortTriggerLabel, filterTriggerLabel, ...rest }) {
+export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel = "Sort", reorderSortLabel = "Reorder sort", noSortsLabel = "No sorts applied to this view.", addSortLabel = "Add sort", learnSortingLabel = "Learn about sorting", selectConditionLabel = "Select condition", sortFieldLabel = "Sort field", sortDirectionLabel = "Sort direction", removeSortLabel = "Remove sort", filterFieldLabel = "Filter by field", filterFieldPlaceholder = "Filter by…", filterValuePlaceholder = "Value…", ascendingLabel = "Ascending", descendingLabel = "Descending", sortTriggerLabel, filterTriggerLabel, ...rest }) {
     const [sortsState, setSortsState] = React.useState(defaultSorts ?? []);
     const [filtersState, setFiltersState] = React.useState(defaultFilters ?? []);
     const sorts = sortsProp ?? sortsState;
@@ -168,7 +168,7 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
         : sorts.length
             ? `Sorted by ${columns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
             : "Sort";
-    return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "tabletoolbar-toolbar", children: [_jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `tabletoolbar-tool${sorts.length ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && (_jsxs("div", { className: "tabletoolbar-menu tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "tabletoolbar-sort-empty", children: "No sorts applied to this view." })) : (sorts.map((s, i) => (_jsxs("div", { className: "tabletoolbar-sort-row", onDragOver: (e) => {
+    return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "tabletoolbar-toolbar", children: [_jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `tabletoolbar-tool${sorts.length ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && (_jsxs("div", { className: "tabletoolbar-menu tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => (_jsxs("div", { className: "tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
                                             e.preventDefault();
                                     }, onDrop: () => {
@@ -190,7 +190,7 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
                                                     label: (_jsxs("span", { className: "tabletoolbar-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), descendingLabel] })),
                                                     keywords: descendingLabel,
                                                 },
-                                            ], "aria-label": sortDirectionLabel }), _jsx("button", { type: "button", className: "tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "tabletoolbar-sort-addrow", children: _jsxs("button", { type: "button", className: "tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), "Add sort"] }) }), helpHref && (_jsx("div", { className: "tabletoolbar-sort-foot", children: _jsxs("a", { className: "tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), "Learn about sorting"] }) }))] }))] }), _jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `tabletoolbar-tool tabletoolbar-tool--ghost${activeFilters ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
+                                            ], "aria-label": sortDirectionLabel }), _jsx("button", { type: "button", className: "tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "tabletoolbar-sort-addrow", children: _jsxs("button", { type: "button", className: "tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && (_jsx("div", { className: "tabletoolbar-sort-foot", children: _jsxs("a", { className: "tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] }), _jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `tabletoolbar-tool tabletoolbar-tool--ghost${activeFilters ? " tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
                                     ? filterTriggerLabel(activeFilters)
                                     : activeFilters
                                         ? `Filter · ${activeFilters}`
@@ -204,7 +204,7 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
                     const col = columns.find((c) => c.key === cond.key);
                     const open = openMenu === `fcond:${cond.id}`;
                     const hasValue = !opNeedsValue(cond.op) || cond.value.trim();
-                    return (_jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("span", { className: "tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "tabletoolbar-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "tabletoolbar-fchip-op", children: "Select condition" }))] }), _jsx("button", { type: "button", className: "tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [_jsxs("div", { className: "tabletoolbar-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => (_jsxs("button", { type: "button", className: "tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
+                    return (_jsxs("span", { className: "tabletoolbar-toolgroup", children: [_jsxs("span", { className: "tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "tabletoolbar-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [_jsxs("div", { className: "tabletoolbar-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => (_jsxs("button", { type: "button", className: "tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "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.id));
                 }), _jsx("span", { className: "tabletoolbar-spacer" }), count != null && _jsx("span", { className: "tabletoolbar-count", children: count }), children] }) }));

package/dist/esm/product/recordpage/recordpage.js

@@ -27,6 +27,7 @@ export const recordPageLabels = {
     composeEmail: "Compose email",
     askAttio: "Ask Attio",
     addToList: "Add to list",
+    noLists: "This record has not been added to any lists.",
     highlights: "Highlights",
     recordDetails: "Record Details",
     searchFields: "Search fields",
@@ -39,6 +40,10 @@ export const recordPageLabels = {
     viewLess: "View less",
     newNote: "New note",
     newTask: "New task",
+    notePlaceholder: "Write a note…  (⌘↵ to save)",
+    saveNote: "Save note",
+    taskPlaceholder: "Task name…  (↵ to add)",
+    addTask: "Add task",
     cancel: "Cancel",
     noNotesYet: "No notes yet.",
     noTasksYet: "No tasks yet.",
@@ -122,14 +127,14 @@ function Composer({ placeholder, submitLabel, multiline, onSubmit, onCancel, lab
 }
 function NotesSection({ notes, onAdd, labels, }) {
     const [open, setOpen] = React.useState(false);
-    return (_jsxs("section", { children: [_jsx(SectionHead, { title: labels.tabs.notes, count: notes.length, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), labels.newNote] }) }), open && (_jsx(Composer, { labels: labels, multiline: true, placeholder: "Write a note\u2026  (\u2318\u21B5 to save)", submitLabel: "Save note", onCancel: () => setOpen(false), onSubmit: (t) => {
+    return (_jsxs("section", { children: [_jsx(SectionHead, { title: labels.tabs.notes, count: notes.length, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), labels.newNote] }) }), open && (_jsx(Composer, { labels: labels, multiline: true, placeholder: labels.notePlaceholder, submitLabel: labels.saveNote, onCancel: () => setOpen(false), onSubmit: (t) => {
                     onAdd(t);
                     setOpen(false);
                 } })), notes.length === 0 && !open ? (_jsx("div", { className: "recordpage-emptystate", children: labels.noNotesYet })) : (notes.map((n) => (_jsxs("div", { className: "recordpage-note", children: [_jsx(Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), _jsxs("div", { className: "recordpage-note-body", children: [_jsxs("div", { className: "recordpage-note-head", children: [_jsx("span", { className: "recordpage-note-author", children: labels.you }), _jsx("span", { className: "recordpage-note-time", children: n.time })] }), _jsx("div", { className: "recordpage-note-text", children: n.text })] })] }, n.id))))] }));
 }
 function TasksSection({ tasks, onAdd, onToggle, labels, }) {
     const [open, setOpen] = React.useState(false);
-    return (_jsxs("section", { children: [_jsx(SectionHead, { title: labels.tabs.tasks, count: tasks.length, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), labels.newTask] }) }), open && (_jsx(Composer, { labels: labels, placeholder: "Task name\u2026  (\u21B5 to add)", submitLabel: "Add task", onCancel: () => setOpen(false), onSubmit: (t) => {
+    return (_jsxs("section", { children: [_jsx(SectionHead, { title: labels.tabs.tasks, count: tasks.length, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), labels.newTask] }) }), open && (_jsx(Composer, { labels: labels, placeholder: labels.taskPlaceholder, submitLabel: labels.addTask, onCancel: () => setOpen(false), onSubmit: (t) => {
                     onAdd(t);
                     setOpen(false);
                 } })), tasks.length === 0 && !open ? (_jsx("div", { className: "recordpage-emptystate", children: labels.noTasksYet })) : (tasks.map((t) => (_jsxs("div", { className: "recordpage-task", "data-done": t.done ? "" : undefined, children: [_jsx(Checkbox, { checked: t.done, onChange: () => onToggle(t.id), "aria-label": t.text }), _jsx("span", { className: "recordpage-task-text", children: t.text })] }, t.id))))] }));
@@ -362,7 +367,7 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                                                         setSearchOpen(next);
                                                         if (!next)
                                                             setFieldQuery("");
-                                                    }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : (_jsxs("div", { className: "recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), _jsxs("div", { className: "recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "recordpage-emptystate", children: "This record has not been added to any lists." })] })] }), _jsx("div", { className: "recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": 300, "aria-valuemax": 560, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
+                                                    }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : (_jsxs("div", { className: "recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), _jsxs("div", { className: "recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "recordpage-emptystate", children: t.noLists })] })] }), _jsx("div", { className: "recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": 300, "aria-valuemax": 560, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
                             if (e.key === "ArrowLeft")
                                 setDetailsW((w) => Math.max(300, w - 16));
                             else if (e.key === "ArrowRight")

package/dist/esm/product/recordstable/recordstable.js

@@ -86,6 +86,9 @@ export const recordsTableLabels = {
     duplicate: "Duplicate",
     addToList: "Add to list",
     inAList: "In a list",
+    searchRecordsPlaceholder: "Search records…",
+    searchOptionsPlaceholder: "Search options…",
+    selectedCount: "Selected",
     delete: "Delete",
     sendEmail: "Send email",
     exportCsv: "Export CSV",
@@ -271,14 +274,14 @@ function StatusCell({ column, row, onChange, }) {
     return (_jsx(Select, { variant: "ghost", "aria-label": column.label, placeholder: "\u2014", value: row[column.key] ?? undefined, onValueChange: onChange, options: column.options ?? [] }));
 }
 function ReferenceCell({ column, row, onChange, labels, }) {
-    return (_jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: "Search records\u2026", "aria-label": column.label, placeholder: labels.setRecordPlaceholder, value: row[column.key] ?? undefined, onValueChange: onChange, options: (column.refOptions ?? []).map((o) => ({
+    return (_jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: labels.searchRecordsPlaceholder, "aria-label": column.label, placeholder: labels.setRecordPlaceholder, value: row[column.key] ?? undefined, onValueChange: onChange, options: (column.refOptions ?? []).map((o) => ({
             value: o.value,
             label: o.label,
         })) }));
 }
 function TagsCell({ column, row, options, onChange, labels, }) {
     const value = row[column.key] ?? [];
-    return (_jsx(MultiSelect, { options: options, value: value, onValueChange: onChange, placeholder: labels.emptyPlaceholder, searchPlaceholder: "Search options\u2026", "aria-label": column.label }));
+    return (_jsx(MultiSelect, { options: options, value: value, onValueChange: onChange, placeholder: labels.emptyPlaceholder, searchPlaceholder: labels.searchOptionsPlaceholder, "aria-label": column.label }));
 }
 function DateCell({ column, row, onChange, }) {
     const raw = row[column.key];
@@ -1009,7 +1012,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                             createPortal(_jsx("div", { ref: menuRef, className: "recordstable-menu recordstable-menu--fixed recordstable-menu--up", role: "menu", "aria-label": `${col.label} summary`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: aggOptions(col).map((opt) => (_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitemradio", tabIndex: -1, "aria-checked": a === opt, "data-on": a === opt ? "" : undefined, onClick: () => setAggValue(col.key, opt), children: [t.agg[opt], a === opt ? (_jsx(Check, { className: "recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
                                         }), _jsx("td", { className: "recordstable-sum recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? (_jsx("div", { className: "recordstable-empty", children: _jsx(EmptyState, { variant: "page", icon: activeFilters ? (_jsx(ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : (_jsx(Inbox, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
                                 ? "None of your records match the filters that are set."
-                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? (_jsxs(Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [_jsx(ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : (_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : (_jsxs("button", { type: "button", className: "recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), selected.size > 0 && (_jsxs(BulkBar, { count: selected.size, countLabel: "Selected", onClear: () => setSelected(new Set()), children: [_jsx(BulkBarButton, { icon: _jsx(ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), _jsx(BulkBarButton, { icon: _jsx(Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), _jsx(BulkBarButton, { icon: _jsx(Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), _jsxs(Menu, { align: "end", "aria-label": t.moreActions, trigger: _jsx(BulkBarButton, { icon: _jsx(MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [_jsx(MenuItem, { icon: _jsx(Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), _jsx(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
+                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? (_jsxs(Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [_jsx(ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : (_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : (_jsxs("button", { type: "button", className: "recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), selected.size > 0 && (_jsxs(BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [_jsx(BulkBarButton, { icon: _jsx(ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), _jsx(BulkBarButton, { icon: _jsx(Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), _jsx(BulkBarButton, { icon: _jsx(Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), _jsxs(Menu, { align: "end", "aria-label": t.moreActions, trigger: _jsx(BulkBarButton, { icon: _jsx(MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [_jsx(MenuItem, { icon: _jsx(Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), _jsx(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
                 createPortal(_jsxs("div", { ref: ctxRef, className: "recordstable-menu recordstable-ctx", role: "menu", "aria-label": t.recordActions, style: { position: "fixed", top: ctxMenu.y, left: ctxMenu.x }, onKeyDown: onCtxKeyDown, children: [_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [_jsx(Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [_jsx(CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [_jsx(Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), _jsxs("button", { type: "button", className: "recordstable-menu-item recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [_jsx(Trash2, { size: 15, strokeWidth: 1.75 }), t.delete] })] }), rootRef.current ?? document.body)] }));
 }
 export const defaultColumns = [

package/dist/esm/product/sidebar/sidebar.js

@@ -81,7 +81,7 @@ export const ATTIO_SIDEBAR_FOOTER = {
 function SectionHeader({ label, open, onToggle, }) {
     return (_jsxs("button", { type: "button", className: "sidebar-section-header", "data-collapsed": open ? undefined : "", "aria-expanded": open, onClick: onToggle, children: [_jsx(IconChevronMini, {}), _jsx("span", { children: label })] }));
 }
-export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", workspace = ATTIO_SIDEBAR_WORKSPACE, items = ATTIO_SIDEBAR_ITEMS, recordsSection = ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = ATTIO_SIDEBAR_CHATS_SECTION, footer = ATTIO_SIDEBAR_FOOTER, ...props }, ref) => {
+export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse, collapseLabel = "Collapse sidebar", inboxLabel = "Inbox", searchLabel = "Search", workspace = ATTIO_SIDEBAR_WORKSPACE, items = ATTIO_SIDEBAR_ITEMS, recordsSection = ATTIO_SIDEBAR_RECORDS_SECTION, listsSection = ATTIO_SIDEBAR_LISTS_SECTION, chatsSection = ATTIO_SIDEBAR_CHATS_SECTION, footer = ATTIO_SIDEBAR_FOOTER, ...props }, ref) => {
     const [collapsedSections, setCollapsedSections] = React.useState(() => new Set());
     const [commandOpen, setCommandOpen] = React.useState(false);
     React.useEffect(() => {
@@ -107,6 +107,6 @@ export const Sidebar = React.forwardRef(({ className, asChild, onToggleCollapse,
             return next;
         });
     }, []);
-    return (_jsxs(Primitive.div, { ref: ref, asChild: asChild, className: sidebarRecipe({ className }), ...props, children: [_jsxs("div", { className: "sidebar-ws", children: [_jsx(Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), _jsx("span", { className: "sidebar-ws-name", children: workspace.name }), _jsx(IconChevronDown, {}), _jsx(Button, { intent: "ghost", size: "sm", shape: "icon", className: "sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: _jsx(IconCollapsePanel, {}) })] }), _jsxs("div", { className: "sidebar-searchrow", children: [_jsxs("button", { type: "button", className: "sidebar-search", onClick: () => setCommandOpen(true), children: [_jsx(IconSearch, {}), _jsx("span", { className: "sidebar-search-label", children: "Search" }), _jsx("span", { className: "sidebar-search-kbd", children: "\u2318K" })] }), _jsx(Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: _jsx(IconInbox, {}) })] }), _jsx("div", { className: "sidebar-divider" }), _jsx("div", { className: "sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => (_jsx(NavItem, { href: "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, children: label }, label))) }), _jsx(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), _jsx("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => (_jsx(NavItem, { href: "#", icon: _jsx(Avatar, { size: "sm", shape: "rounded", tone: tone, children: _jsx(Glyph, {}) }), children: label }, label))) }), _jsx(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), _jsx("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: _jsx("button", { type: "button", className: "sidebar-newlist", children: listsSection.newListLabel }) }), _jsx(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), _jsx("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => (_jsx(NavItem, { href: "#", icon: _jsx(ItemIcon, {}), children: label }, label))) }), _jsxs("div", { className: "sidebar-footer", children: [_jsx(Button, { intent: "neutral", size: "sm", className: "sidebar-pill", children: footer.gettingStartedLabel }), _jsx(NavItem, { href: "#", icon: _jsx(IconInvite, {}), children: footer.inviteLabel }), _jsx("div", { className: "sidebar-divider" }), _jsxs("div", { className: "sidebar-trial", children: [_jsx("span", { children: footer.trialText }), _jsx(Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), _jsx(Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
+    return (_jsxs(Primitive.div, { ref: ref, asChild: asChild, className: sidebarRecipe({ className }), ...props, children: [_jsxs("div", { className: "sidebar-ws", children: [_jsx(Avatar, { size: "lg", shape: "rounded", tone: workspace.avatarTone, children: workspace.avatarLabel }), _jsx("span", { className: "sidebar-ws-name", children: workspace.name }), _jsx(IconChevronDown, {}), _jsx(Button, { intent: "ghost", size: "sm", shape: "icon", className: "sidebar-ws-collapse", "aria-label": collapseLabel, onClick: onToggleCollapse, children: _jsx(IconCollapsePanel, {}) })] }), _jsxs("div", { className: "sidebar-searchrow", children: [_jsxs("button", { type: "button", className: "sidebar-search", onClick: () => setCommandOpen(true), children: [_jsx(IconSearch, {}), _jsx("span", { className: "sidebar-search-label", children: searchLabel }), _jsx("span", { className: "sidebar-search-kbd", children: "\u2318K" })] }), _jsx(Button, { intent: "neutral", size: "sm", shape: "icon", "aria-label": inboxLabel, children: _jsx(IconInbox, {}) })] }), _jsx("div", { className: "sidebar-divider" }), _jsx("div", { className: "sidebar-section", children: items.map(({ label, icon: ItemIcon, active, trailing }) => (_jsx(NavItem, { href: "#", active: active, icon: _jsx(ItemIcon, {}), trailing: trailing, children: label }, label))) }), _jsx(SectionHeader, { label: recordsSection.label, open: !collapsedSections.has("records"), onToggle: () => toggleSection("records") }), _jsx("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("records") ? "" : undefined, children: recordsSection.items.map(({ label, tone, glyph: Glyph }) => (_jsx(NavItem, { href: "#", icon: _jsx(Avatar, { size: "sm", shape: "rounded", tone: tone, children: _jsx(Glyph, {}) }), children: label }, label))) }), _jsx(SectionHeader, { label: listsSection.label, open: !collapsedSections.has("lists"), onToggle: () => toggleSection("lists") }), _jsx("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("lists") ? "" : undefined, children: _jsx("button", { type: "button", className: "sidebar-newlist", children: listsSection.newListLabel }) }), _jsx(SectionHeader, { label: chatsSection.label, open: !collapsedSections.has("chats"), onToggle: () => toggleSection("chats") }), _jsx("div", { className: "sidebar-section", "data-collapsed": collapsedSections.has("chats") ? "" : undefined, children: chatsSection.items.map(({ label, icon: ItemIcon }) => (_jsx(NavItem, { href: "#", icon: _jsx(ItemIcon, {}), children: label }, label))) }), _jsxs("div", { className: "sidebar-footer", children: [_jsx(Button, { intent: "neutral", size: "sm", className: "sidebar-pill", children: footer.gettingStartedLabel }), _jsx(NavItem, { href: "#", icon: _jsx(IconInvite, {}), children: footer.inviteLabel }), _jsx("div", { className: "sidebar-divider" }), _jsxs("div", { className: "sidebar-trial", children: [_jsx("span", { children: footer.trialText }), _jsx(Button, { intent: "neutral", size: "sm", children: footer.trialActionLabel })] })] }), _jsx(Command, { open: commandOpen, onOpenChange: setCommandOpen })] }));
 });
 Sidebar.displayName = "Sidebar";

package/dist/esm/product/viewtoggle/viewtoggle.js

@@ -6,12 +6,15 @@ import { viewtoggleRecipe } from "./viewtoggle.recipe.js";
  * of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
  * grid) or any small mutually-exclusive icon choice.
  */
-export function ViewToggle({ options, value: valueProp, defaultValue, onChange, "aria-label": ariaLabel, className, ...rest }) {
+export function ViewToggle({ options, value: valueProp, defaultValue, onValueChange, onChange, "aria-label": ariaLabel, className, ...rest }) {
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const value = valueProp ?? internalValue ?? options[0]?.value;
     const pick = (next) => {
         if (valueProp === undefined)
             setInternalValue(next);
+        // both, so a consumer passing either name is heard and one passing both
+        // does not silently lose one
+        onValueChange?.(next);
         onChange?.(next);
     };
     return (_jsx("div", { className: viewtoggleRecipe({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: options.map((o) => (_jsx("button", { type: "button", className: "viewtoggle-tile", "aria-pressed": o.value === value, "aria-label": o.label, title: o.label, "data-active": o.value === value ? "" : undefined, onClick: () => pick(o.value), children: o.icon }, o.value))) }));

package/dist/types/components/columncalc/columncalc.d.ts

@@ -37,6 +37,10 @@ export type ColumnCalcProps<T> = Omit<React.ComponentPropsWithoutRef<"span">, "v
     /** Controlled operation. */
     op?: CalcOp;
     onOpChange?: (op: CalcOp) => void;
+    /** Placeholder in the cell when no calculation is chosen. */
+    addLabel?: string;
+    /** Heading above the operation list in the menu. */
+    sectionLabel?: string;
     /** Overrides the operation names shown in the menu and the cell. Partial —
      * anything omitted keeps its English default from `CALC_LABEL`. */
     opLabels?: Partial<Record<CalcOp, string>>;
@@ -46,4 +50,4 @@ export type ColumnCalcProps<T> = Omit<React.ComponentPropsWithoutRef<"span">, "v
     align?: "left" | "right";
     className?: string;
 };
-export declare function ColumnCalc<T>({ rows, value, numeric, defaultOp, op: opProp, onOpChange, format, align, opLabels, className, ...rest }: ColumnCalcProps<T>): React.JSX.Element;
+export declare function ColumnCalc<T>({ rows, value, numeric, defaultOp, op: opProp, onOpChange, addLabel, sectionLabel, format, align, opLabels, className, ...rest }: ColumnCalcProps<T>): React.JSX.Element;

package/dist/types/components/datepickerfield/datepickerfield.d.ts

@@ -11,6 +11,14 @@ export type DatePickerFieldProps = Omit<React.ComponentPropsWithoutRef<"div">, "
     /** Controlled value. Omit to let the field manage it (see defaultValue). */
     value?: Date | null;
     defaultValue?: Date | null;
+    /** Fires with the picked date, controlled or not. */
+    onValueChange?: (date: Date) => void;
+    /**
+     * The original name for `onValueChange`, kept working so no consumer breaks.
+     * Prefer `onValueChange`: it is what every other crisp component calls this,
+     * and passing the house name to a component that only knew `onChange` was
+     * not a type error — the handler simply never fired (#202).
+     */
     onChange?: (date: Date) => void;
     placeholder?: string;
     /** `default` = outlined trigger; `ghost` = transparent (for table cells). */
@@ -29,7 +37,7 @@ export type DatePickerFieldProps = Omit<React.ComponentPropsWithoutRef<"div">, "
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-export declare function DatePickerField({ value, defaultValue, onChange, placeholder, variant, format, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }: DatePickerFieldProps): React.JSX.Element;
+export declare function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder, variant, format, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }: DatePickerFieldProps): React.JSX.Element;
 export declare namespace DatePickerField {
     var displayName: string;
 }

package/dist/types/components/multiselect/multiselect.d.ts

@@ -17,6 +17,8 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
     /** Show a filter field at the top of the list (default true). */
     searchable?: boolean;
     searchPlaceholder?: string;
+    /** Shown when the search matches nothing. */
+    emptyLabel?: string;
     disabled?: boolean;
     className?: string;
     "aria-label"?: string;
@@ -27,7 +29,7 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder, searchable, searchPlaceholder, disabled, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
+export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
 export declare namespace MultiSelect {
     var displayName: string;
 }

package/dist/types/components/select/select.d.ts

@@ -22,6 +22,8 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
     /** Show a search field at the top of the list that filters options (Linear/cmdk style). */
     searchable?: boolean;
     searchPlaceholder?: string;
+    /** Shown when the search matches nothing. */
+    emptyLabel?: string;
     disabled?: boolean;
     className?: string;
     "aria-label"?: string;
@@ -34,7 +36,7 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export declare function Select({ options, value, defaultValue, onValueChange, placeholder, variant, width, searchable, searchPlaceholder, disabled, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
+export declare function Select({ options, value, defaultValue, onValueChange, placeholder, variant, width, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
 export declare namespace Select {
     var displayName: string;
 }

package/dist/types/components/tabletoolbar/tabletoolbar.d.ts

@@ -36,6 +36,14 @@ export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "chi
     count?: React.ReactNode;
     /** Right-aligned actions after the count (a "New" button, say). */
     children?: React.ReactNode;
+    /** Empty state in the sort popover. */
+    noSortsLabel?: string;
+    /** Label on the button that appends a sort condition. */
+    addSortLabel?: string;
+    /** Text of the help link, when `helpHref` is set. */
+    learnSortingLabel?: string;
+    /** Placeholder on a filter condition's operator picker. */
+    selectConditionLabel?: string;
     /** Shows a "Learn about sorting" link in the sort popover when set. */
     helpHref?: string;
     /** aria-label on the Sort trigger (default "Sort"). */
@@ -85,5 +93,5 @@ export declare function applySorts<T>(rows: T[], sorts: ToolbarSort[], get?: (ro
  * composable version, to put above `DataTable` or any table of your own. Pair
  * it with `applyFilters` / `applySorts` to turn its state into rows.
  */
-export declare function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel, reorderSortLabel, sortFieldLabel, sortDirectionLabel, removeSortLabel, filterFieldLabel, filterFieldPlaceholder, filterValuePlaceholder, ascendingLabel, descendingLabel, sortTriggerLabel, filterTriggerLabel, ...rest }: TableToolbarProps): React.JSX.Element;
+export declare function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel, reorderSortLabel, noSortsLabel, addSortLabel, learnSortingLabel, selectConditionLabel, sortFieldLabel, sortDirectionLabel, removeSortLabel, filterFieldLabel, filterFieldPlaceholder, filterValuePlaceholder, ascendingLabel, descendingLabel, sortTriggerLabel, filterTriggerLabel, ...rest }: TableToolbarProps): React.JSX.Element;
 export {};

package/dist/types/product/recordpage/recordpage.d.ts

@@ -40,6 +40,8 @@ export type RecordPageLabels = {
     composeEmail: string;
     askAttio: string;
     addToList: string;
+    /** Empty state under the Lists panel. */
+    noLists: string;
     highlights: string;
     recordDetails: string;
     searchFields: string;
@@ -52,6 +54,14 @@ export type RecordPageLabels = {
     viewLess: string;
     newNote: string;
     newTask: string;
+    /** Placeholder in the note composer. */
+    notePlaceholder: string;
+    /** Submit button in the note composer. */
+    saveNote: string;
+    /** Placeholder in the task composer. */
+    taskPlaceholder: string;
+    /** Submit button in the task composer. */
+    addTask: string;
     cancel: string;
     noNotesYet: string;
     noTasksYet: string;

package/dist/types/product/recordstable/recordstable.d.ts

@@ -146,6 +146,12 @@ export type RecordsTableLabels = {
     duplicate: string;
     addToList: string;
     inAList: string;
+    /** Placeholder in the record search field. */
+    searchRecordsPlaceholder: string;
+    /** Placeholder in a select cell's option search. */
+    searchOptionsPlaceholder: string;
+    /** Prefix on the bulk bar's selected count. */
+    selectedCount: string;
     delete: string;
     sendEmail: string;
     exportCsv: string;

package/dist/types/product/sidebar/sidebar.d.ts

@@ -52,6 +52,8 @@ export type SidebarProps = React.ComponentPropsWithoutRef<"nav"> & {
     collapseLabel?: string;
     /** Label for the inbox quick-action. */
     inboxLabel?: string;
+    /** Label for the search / command-palette button. */
+    searchLabel?: string;
     asChild?: boolean;
     /** Called when the collapse-panel button in the header is pressed. */
     onToggleCollapse?: () => void;
@@ -85,6 +87,8 @@ export declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.Detaile
     collapseLabel?: string;
     /** Label for the inbox quick-action. */
     inboxLabel?: string;
+    /** Label for the search / command-palette button. */
+    searchLabel?: string;
     asChild?: boolean;
     /** Called when the collapse-panel button in the header is pressed. */
     onToggleCollapse?: () => void;

package/dist/types/product/viewtoggle/viewtoggle.d.ts

@@ -12,9 +12,15 @@ export type ViewToggleProps<T extends string = string> = Omit<React.ComponentPro
     value?: T;
     /** Initially selected value, when uncontrolled. Defaults to the first option. */
     defaultValue?: T;
-    /** Fires with the next value on every pick, controlled or not.
-     * Named `onChange` rather than the house `onValueChange` for historical
-     * reasons; renaming it would break consumers. */
+    /** Fires with the next value on every pick, controlled or not. */
+    onValueChange?: (value: T) => void;
+    /**
+     * The original name for `onValueChange`, kept working so no consumer breaks.
+     * Prefer `onValueChange`: it is what every other crisp component calls this,
+     * and because these props extend a `<div>`'s, passing the house name to a
+     * component that only knew `onChange` was not a type error — it landed on
+     * the DOM and React dropped it with a development-only warning (#202).
+     */
     onChange?: (value: T) => void;
     "aria-label"?: string;
     className?: string;
@@ -24,7 +30,7 @@ export type ViewToggleProps<T extends string = string> = Omit<React.ComponentPro
  * of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
  * grid) or any small mutually-exclusive icon choice.
  */
-export declare function ViewToggle<T extends string = string>({ options, value: valueProp, defaultValue, onChange, "aria-label": ariaLabel, className, ...rest }: ViewToggleProps<T>): React.JSX.Element;
+export declare function ViewToggle<T extends string = string>({ options, value: valueProp, defaultValue, onValueChange, onChange, "aria-label": ariaLabel, className, ...rest }: ViewToggleProps<T>): React.JSX.Element;
 export declare namespace ViewToggle {
     var displayName: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",