@crisp-ui-kit/crisp 0.55.6 → 0.57.0

package/dist/tokens.css

@@ -1,3 +1,31 @@
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display Regular");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display Medium");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display DemiBold");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display Bold");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
 :root {
   --crisp-bg-brand-solid: #266df0;
   --crisp-bg-brand-solid-pressed: #1f5fd6;
@@ -54,6 +82,16 @@
   --crisp-bg-purple-soft: #f5f0ff;
   --crisp-fg-purple-soft: #6238b5;
   --crisp-ring-purple-soft: #e8ddfe;
+  --crisp-ring-brand-soft: #d6e5ff;
+  --crisp-fg-select-neutral: #1a1c20;
+  --crisp-bg-select-listbox: #ffffff;
+  --crisp-stroke-select-trigger: #dcdee3;
+  --crisp-bg-select-pressed: #00000007;
+  --crisp-bg-select-disabled: #f3f4f5;
+  --crisp-stroke-select-invalid: #fa342c;
+  --crisp-stroke-select-divider: #00000010;
+  --crisp-fg-select-placeholder: #b0b3ba;
+  --crisp-shadow-select: #0000001f;
 }
 
 [data-theme="dark"] {
@@ -112,6 +150,16 @@
   --crisp-bg-purple-soft: #2f1e5a;
   --crisp-fg-purple-soft: #d8c4ff;
   --crisp-ring-purple-soft: #45297d;
+  --crisp-ring-brand-soft: #212224;
+  --crisp-fg-select-neutral: #f3f4f5;
+  --crisp-bg-select-listbox: #1d2025;
+  --crisp-stroke-select-trigger: #393d46;
+  --crisp-bg-select-pressed: #ffffff0d;
+  --crisp-bg-select-disabled: #2b2e35;
+  --crisp-stroke-select-invalid: #ff6e60;
+  --crisp-stroke-select-divider: #ffffff17;
+  --crisp-fg-select-placeholder: #868b94;
+  --crisp-shadow-select: #000000cc;
 }
 
 :root {
@@ -126,12 +174,14 @@
   --crisp-space-0-5: 2px;
   --crisp-space-1-5: 6px;
   --crisp-space-2-5: 10px;
+  --crisp-space-3-5: 14px;
   --crisp-radius-chip: 7px;
   --crisp-radius-sm: 6px;
   --crisp-radius-md: 8px;
   --crisp-radius-lg: 9px;
   --crisp-radius-xl: 12px;
   --crisp-radius-2xl: 16px;
+  --crisp-radius-3xl: 20px;
   --crisp-radius-full: 999px;
   --crisp-size-icon: 16px;
   --crisp-size-chip: 22px;
@@ -142,6 +192,9 @@
   --crisp-size-header: 48px;
   --crisp-size-calendarCell: 34px;
   --crisp-size-calendarPill: 32px;
+  --crisp-size-selectTriggerMd: 40px;
+  --crisp-size-selectTriggerLg: 52px;
+  --crisp-size-selectIconLg: 20px;
   --crisp-text-xs: 11px;
   --crisp-text-sm: 12px;
   --crisp-text-md: 13px;
@@ -151,5 +204,5 @@
   --crisp-weight-medium: 500;
   --crisp-weight-semibold: 600;
   --crisp-weight-bold: 700;
-  --crisp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --crisp-font-sans: "VK Sans Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
 }

package/dist/tokens.json

@@ -55,7 +55,17 @@
       "fgNeutralSoft": "#505155",
       "bgPurpleSoft": "#f5f0ff",
       "fgPurpleSoft": "#6238b5",
-      "ringPurpleSoft": "#e8ddfe"
+      "ringPurpleSoft": "#e8ddfe",
+      "ringBrandSoft": "#d6e5ff",
+      "fgSelectNeutral": "#1a1c20",
+      "bgSelectListbox": "#ffffff",
+      "strokeSelectTrigger": "#dcdee3",
+      "bgSelectPressed": "#00000007",
+      "bgSelectDisabled": "#f3f4f5",
+      "strokeSelectInvalid": "#fa342c",
+      "strokeSelectDivider": "#00000010",
+      "fgSelectPlaceholder": "#b0b3ba",
+      "shadowSelect": "#0000001f"
     },
     "dark": {
       "bgBrandSolid": "#266df0",
@@ -112,7 +122,17 @@
       "fgNeutralSoft": "#9a9aa2",
       "bgPurpleSoft": "#2f1e5a",
       "fgPurpleSoft": "#d8c4ff",
-      "ringPurpleSoft": "#45297d"
+      "ringPurpleSoft": "#45297d",
+      "ringBrandSoft": "#212224",
+      "fgSelectNeutral": "#f3f4f5",
+      "bgSelectListbox": "#1d2025",
+      "strokeSelectTrigger": "#393d46",
+      "bgSelectPressed": "#ffffff0d",
+      "bgSelectDisabled": "#2b2e35",
+      "strokeSelectInvalid": "#ff6e60",
+      "strokeSelectDivider": "#ffffff17",
+      "fgSelectPlaceholder": "#868b94",
+      "shadowSelect": "#000000cc"
     }
   },
   "palette": {
@@ -129,6 +149,7 @@
       "ringNeutral": "transparent",
       "ringField": "rgba(0,0,0,0.06)",
       "ringSwitch": "#d9dade",
+      "ringBrandSoft": "#d6e5ff",
       "tileActive": "#ffffff",
       "tileActiveShadow": "rgba(0,0,0,0.04)",
       "bgScrim": "rgba(0,0,0,0.25)",
@@ -169,7 +190,15 @@
       "softNeutralText": "#505155",
       "purpleTint": "#f5f0ff",
       "softPurpleText": "#6238b5",
-      "purpleRing": "#e8ddfe"
+      "purpleRing": "#e8ddfe",
+      "selectListboxBg": "#ffffff",
+      "selectTriggerStroke": "#dcdee3",
+      "selectPressedTint": "#00000007",
+      "selectDisabledBg": "#f3f4f5",
+      "selectInvalidStroke": "#fa342c",
+      "selectDivider": "#00000010",
+      "selectPlaceholder": "#b0b3ba",
+      "selectShadow": "#0000001f"
     },
     "dark": {
       "gray00": "#0a0a0a",
@@ -184,6 +213,7 @@
       "ringNeutral": "#212224",
       "ringField": "#212224",
       "ringSwitch": "#212224",
+      "ringBrandSoft": "#212224",
       "tileActive": "#101112",
       "tileActiveShadow": "rgba(0,0,0,0)",
       "bgScrim": "rgba(0,0,0,0.55)",
@@ -224,7 +254,15 @@
       "softNeutralText": "#9a9aa2",
       "purpleTint": "#2f1e5a",
       "softPurpleText": "#d8c4ff",
-      "purpleRing": "#45297d"
+      "purpleRing": "#45297d",
+      "selectListboxBg": "#1d2025",
+      "selectTriggerStroke": "#393d46",
+      "selectPressedTint": "#ffffff0d",
+      "selectDisabledBg": "#2b2e35",
+      "selectInvalidStroke": "#ff6e60",
+      "selectDivider": "#ffffff17",
+      "selectPlaceholder": "#868b94",
+      "selectShadow": "#000000cc"
     }
   },
   "space": {
@@ -238,7 +276,8 @@
     "px": 1,
     "0.5": 2,
     "1.5": 6,
-    "2.5": 10
+    "2.5": 10,
+    "3.5": 14
   },
   "radius": {
     "chip": 7,
@@ -247,6 +286,7 @@
     "lg": 9,
     "xl": 12,
     "2xl": 16,
+    "3xl": 20,
     "full": 999
   },
   "size": {
@@ -258,7 +298,10 @@
     "tableHeader": 40,
     "header": 48,
     "calendarCell": 34,
-    "calendarPill": 32
+    "calendarPill": 32,
+    "selectTriggerMd": 40,
+    "selectTriggerLg": 52,
+    "selectIconLg": 20
   },
   "text": {
     "xs": 11,
@@ -268,7 +311,7 @@
     "xl": 16
   },
   "font": {
-    "sans": "\"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif"
+    "sans": "\"VK Sans Display\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif"
   },
   "weight": {
     "regular": "400",

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

@@ -8,13 +8,21 @@ export type CalloutProps = Omit<React.ComponentPropsWithoutRef<"div">, "title">
     children?: React.ReactNode;
     /** Trailing action (e.g. a Button). */
     action?: React.ReactNode;
+    /**
+     * A page-level banner look (crisp#869): a 1px border, 12px radius, tighter
+     * 8px/12px padding, and a brand-tinted background — measured live on
+     * Attio's own Objects settings page (a real full-width Pro-plan nudge).
+     * There's no measured close/dismiss button on that banner, so this adds
+     * none.
+     */
+    bordered?: boolean;
     className?: string;
 };
 /**
  * An inline callout / banner — measured from info notices. `tone` tints
  * the background and icon; pass a `title` and/or body `children`.
  */
-export declare function Callout({ tone, icon, title, children, action, className, ...rest }: CalloutProps): React.JSX.Element;
+export declare function Callout({ tone, icon, title, children, action, bordered, className, ...rest }: CalloutProps): React.JSX.Element;
 export declare namespace Callout {
     var displayName: string;
 }

package/dist/types/components/callout/callout.recipe.d.ts

@@ -1,3 +1,13 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const calloutRecipe: import("../..").RecipeFn<{}>;
+declare const config: import("../..").RecipeConfig<{
+    bordered: {
+        true: string;
+        false: string;
+    };
+}>;
+export declare const calloutRecipe: import("../..").RecipeFn<{
+    bordered: {
+        true: string;
+        false: string;
+    };
+}>;
 export default config;

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

@@ -7,6 +7,7 @@ export type InputProps = Omit<React.ComponentPropsWithoutRef<"input">, "size"> &
 };
 export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size"> & VariantProps<import("../..").RecipeFn<{
     size: {
+        sm: string;
         medium: string;
         large: string;
     };
@@ -17,6 +18,7 @@ export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
 }> & {
     config: import("../..").RecipeConfig<{
         size: {
+            sm: string;
             medium: string;
             large: string;
         };

package/dist/types/components/input/input.recipe.d.ts

@@ -1,5 +1,6 @@
 declare const config: import("../..").RecipeConfig<{
     size: {
+        sm: string;
         medium: string;
         large: string;
     };
@@ -10,6 +11,7 @@ declare const config: import("../..").RecipeConfig<{
 }>;
 export declare const inputRecipe: import("../..").RecipeFn<{
     size: {
+        sm: string;
         medium: string;
         large: string;
     };
@@ -20,6 +22,7 @@ export declare const inputRecipe: import("../..").RecipeFn<{
 }> & {
     config: import("../..").RecipeConfig<{
         size: {
+            sm: string;
             medium: string;
             large: string;
         };

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

@@ -39,13 +39,19 @@ export type MenuItemProps = {
     children: React.ReactNode;
     icon?: React.ReactNode;
     shortcut?: string;
+    /**
+     * A trailing count badge (crisp#875) — e.g. a saved-filter item showing
+     * how many rows match. Same measured neutral chip `ToolbarTool`'s own
+     * `count` prop uses, not bare text.
+     */
+    count?: React.ReactNode;
     danger?: boolean;
     disabled?: boolean;
     onSelect?: () => void;
     /** Keep the menu open after selecting (default closes). */
     closeOnSelect?: boolean;
 };
-export declare function MenuItem({ children, icon, shortcut, danger, disabled, onSelect, closeOnSelect, }: MenuItemProps): React.JSX.Element;
+export declare function MenuItem({ children, icon, shortcut, count, danger, disabled, onSelect, closeOnSelect, }: MenuItemProps): React.JSX.Element;
 export declare namespace MenuItem {
     var displayName: string;
 }

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

@@ -45,18 +45,36 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
     /** Shown when the search matches nothing. */
     emptyLabel?: string;
     disabled?: boolean;
-    /** Red ring + `aria-invalid`, matching `Input`'s and `Select`'s. */
+    /**
+     * Answered and locked, not editable — unlike `disabled`, the trigger stays
+     * focusable (crisp/#882, matching `Select`'s `readOnly`).
+     */
+    readOnly?: boolean;
+    /** 2px red border + `aria-invalid`, matching `Input`'s and `Select`'s. */
     invalid?: boolean;
+    /**
+     * seed-design's two Select-family sizes (crisp/#882): `medium` (default,
+     * 40px trigger floor) or `large` (52px). Purely visual.
+     */
+    size?: "medium" | "large";
+    /**
+     * `ghost` fills whatever row it's embedded in instead of the fixed
+     * trigger height — for inline table cell editors (crisp/#882, matching
+     * `Select`'s `variant`).
+     */
+    variant?: "default" | "ghost";
     className?: string;
     "aria-label"?: string;
 };
 /**
- * A multi-select / tag editor — measured from a cell tag picker. The
- * outlined trigger shows the selected values as coloured chips; it opens a
- * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
- * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
+ * A multi-select / tag editor, its trigger/listbox/item chrome built to the
+ * same seed-design parity as `Select` (crisp/#882, following #867/#879) —
+ * its own chip/checkbox picker behaviour is unchanged. The outlined trigger
+ * shows the selected values as coloured chips; it opens a popover with a
+ * search field over rows of "[chip] … [checkbox]" that toggle on click (the
+ * menu stays open). Keyboard: ↑/↓ move, Enter/Space toggle, Esc closes.
  */
-export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, required, id, placeholder: placeholderProp, searchable, searchPlaceholder: searchPlaceholderProp, emptyLabel: emptyLabelProp, disabled, invalid, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
+export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, required, id, placeholder: placeholderProp, searchable, searchPlaceholder: searchPlaceholderProp, emptyLabel: emptyLabelProp, disabled, readOnly, invalid, size, variant, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
 export declare namespace MultiSelect {
     var displayName: string;
 }

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

@@ -1,20 +1,44 @@
 declare const config: import("../..").RecipeConfig<{
+    size: {
+        medium: string;
+        large: string;
+    };
     invalid: {
         true: string;
         false: string;
     };
+    variant: {
+        default: string;
+        ghost: string;
+    };
 }>;
 export declare const multiselectRecipe: import("../..").RecipeFn<{
+    size: {
+        medium: string;
+        large: string;
+    };
     invalid: {
         true: string;
         false: string;
     };
+    variant: {
+        default: string;
+        ghost: string;
+    };
 }> & {
     config: import("../..").RecipeConfig<{
+        size: {
+            medium: string;
+            large: string;
+        };
         invalid: {
             true: string;
             false: string;
         };
+        variant: {
+            default: string;
+            ghost: string;
+        };
     }>;
 };
 export default config;

package/dist/types/components/select/listbox-keyboard.d.ts

@@ -19,6 +19,15 @@ export type UseListboxKeyboardOptions = {
      * lands the user in the wrong place. Defaults to `close`.
      */
     dismiss?: () => void;
+    /**
+     * Space also commits the highlighted option, matching seed-design's
+     * Select (crisp/#867: Enter AND Space both commit) and native `<select>`.
+     * Defaults `false` because this same hook wires a `searchable` popup's own
+     * text input — there, Space must stay a normal character, never a commit.
+     * Pass `true` only when the element this hook is bound to is NOT a text
+     * field (the trigger itself, when not `searchable`).
+     */
+    commitOnSpace?: boolean;
 };
 /**
  * The WAI-ARIA listbox keyboard model for a POPUP listbox: ↑/↓ to move the
@@ -33,6 +42,6 @@ export type UseListboxKeyboardOptions = {
  * NOT for `WheelPicker`: that is an always-visible multi-column wheel that
  * commits on move, so Enter, Escape and Tab have no meaning in it.
  */
-export declare function useListboxKeyboard({ enabledIndexes, highlight, setHighlight, commit, close, dismiss, }: UseListboxKeyboardOptions): {
+export declare function useListboxKeyboard({ enabledIndexes, highlight, setHighlight, commit, close, dismiss, commitOnSpace, }: UseListboxKeyboardOptions): {
     onKeyDown: (e: React.KeyboardEvent) => void;
 };

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

@@ -20,6 +20,12 @@ export type SelectOption = {
      * with no `group` render exactly as before this existed.
      */
     group?: string;
+    /**
+     * A second line under `label` (crisp/#867, seed-design's `SelectItem`
+     * label + description). Omit for the plain single-line row every existing
+     * consumer already renders.
+     */
+    description?: React.ReactNode;
 };
 export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange"> & {
     options: SelectOption[];
@@ -49,6 +55,19 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
     variant?: "default" | "ghost";
     /** `full` (default) fills its container; `auto` sizes to content. */
     width?: "full" | "auto";
+    /**
+     * seed-design's two Select sizes (crisp/#867): `medium` (default, 40px
+     * trigger) for general use, `large` (52px) where the surrounding layout
+     * calls for it. Purely visual — everything else about the control is
+     * identical between the two.
+     */
+    size?: "medium" | "large";
+    /**
+     * Answered and locked, not editable — unlike `disabled`, the trigger stays
+     * focusable and its text stays full-strength ink (crisp/#867, seed-design's
+     * `readonly` state: the fill greys like `disabled`, the text doesn't).
+     */
+    readOnly?: boolean;
     /** Show a search field at the top of the list that filters options (Linear/cmdk style). */
     searchable?: boolean;
     searchPlaceholder?: string;
@@ -68,13 +87,16 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
     id?: string;
 };
 /**
- * A select / dropdown — the settings control, measured live, with an
- * optional Linear-style search. A `role="combobox"` trigger opens a
- * `role="listbox"`; pass `searchable` to add a filter field at the top (with a
- * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
- * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
+ * A select / dropdown, built to seed-design's Select (crisp/#867) rather than
+ * measured from Attio — a deliberate one-component exception, the same way
+ * `DatePicker` follows seed's calendar structure — with an optional
+ * Linear-style search seed itself has no equivalent of. A `role="combobox"`
+ * trigger opens a `role="listbox"`; pass `searchable` to add a filter field
+ * at the top (with a "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, name, required, placeholder: placeholderProp, variant, width, searchable, searchPlaceholder: searchPlaceholderProp, onSearchChange, emptyLabel: emptyLabelProp, disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
+export declare function Select({ options, value, defaultValue, onValueChange, name, required, placeholder: placeholderProp, variant, width, size, searchable, searchPlaceholder: searchPlaceholderProp, onSearchChange, emptyLabel: emptyLabelProp, disabled, readOnly, invalid, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
 export declare namespace Select {
     var displayName: string;
 }

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

@@ -1,44 +1,56 @@
 declare const config: import("../..").RecipeConfig<{
-    variant: {
-        default: string;
-        ghost: string;
-    };
     width: {
         full: string;
         auto: string;
     };
+    size: {
+        medium: string;
+        large: string;
+    };
     invalid: {
         true: string;
         false: string;
     };
-}>;
-export declare const selectRecipe: import("../..").RecipeFn<{
     variant: {
         default: string;
         ghost: string;
     };
+}>;
+export declare const selectRecipe: import("../..").RecipeFn<{
     width: {
         full: string;
         auto: string;
     };
+    size: {
+        medium: string;
+        large: string;
+    };
     invalid: {
         true: string;
         false: string;
     };
+    variant: {
+        default: string;
+        ghost: string;
+    };
 }> & {
     config: import("../..").RecipeConfig<{
-        variant: {
-            default: string;
-            ghost: string;
-        };
         width: {
             full: string;
             auto: string;
         };
+        size: {
+            medium: string;
+            large: string;
+        };
         invalid: {
             true: string;
             false: string;
         };
+        variant: {
+            default: string;
+            ghost: string;
+        };
     }>;
 };
 export default config;

package/dist/types/components/statusdot/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusDot, type StatusDotProps } from "./statusdot";
+export { statusdotRecipe } from "./statusdot.recipe";

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

@@ -0,0 +1,21 @@
+import type * as React from "react";
+export type StatusDotProps = React.ComponentPropsWithoutRef<"span"> & {
+    /**
+     * The dot's fill — any CSS colour. Attio assigns an arbitrary colour per
+     * stage/status from its own picker (measured values aren't a fixed enum;
+     * see the recipe's doc), so this takes a colour directly rather than a
+     * `tone` name.
+     */
+    color: string;
+    className?: string;
+};
+/**
+ * A standalone coloured status/stage dot — a stage-column header's own
+ * colour swatch, a status field's leading indicator. Not a Badge: no pill,
+ * no text pairing required. Pass `children` (e.g. a label) alongside it in
+ * your own flex row; this renders only the dot.
+ */
+export declare function StatusDot({ color, className, style, ...rest }: StatusDotProps): React.JSX.Element;
+export declare namespace StatusDot {
+    var displayName: string;
+}

package/dist/types/components/statusdot/statusdot.recipe.d.ts

@@ -0,0 +1,15 @@
+declare const spec: {
+    readonly name: "statusdot";
+    readonly base: {
+        readonly display: "inline-block";
+        readonly boxSizing: "border-box";
+        readonly flexShrink: 0;
+        readonly width: "12px";
+        readonly height: "12px";
+        readonly borderRadius: `var(--${string})`;
+    };
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const statusdotRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+export { spec };
+export default config;

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

@@ -320,6 +320,13 @@ export type ToolbarToolProps = React.ComponentPropsWithoutRef<"button"> & {
     /** The quieter, no-ring variant Sort/Filter never use themselves, for a
      * chip whose "on" state should read as less committed than a real filter. */
     ghost?: boolean;
+    /**
+     * A trailing count badge (crisp#875) — a screen's own quick filter
+     * showing how many rows match, e.g. "My tasks 5". Measured live on two
+     * independent Attio surfaces (the Sort tool's own "+N" overflow, a Kanban
+     * board's stage-column count): a small neutral chip, not bare text.
+     */
+    count?: React.ReactNode;
 };
 /**
  * The Sort/Filter chip's own chrome (`.crisp-tabletoolbar-tool`), standalone
@@ -337,5 +344,12 @@ export declare const ToolbarTool: React.ForwardRefExoticComponent<Omit<React.Det
     /** The quieter, no-ring variant Sort/Filter never use themselves, for a
      * chip whose "on" state should read as less committed than a real filter. */
     ghost?: boolean;
+    /**
+     * A trailing count badge (crisp#875) — a screen's own quick filter
+     * showing how many rows match, e.g. "My tasks 5". Measured live on two
+     * independent Attio surfaces (the Sort tool's own "+N" overflow, a Kanban
+     * board's stage-column count): a small neutral chip, not bare text.
+     */
+    count?: React.ReactNode;
 } & React.RefAttributes<HTMLButtonElement>>;
 export {};

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

@@ -20,6 +20,14 @@ export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "d
     leading?: React.ReactNode;
     /** Rendered for the active tab. Receives the active value. */
     children?: (value: string) => React.ReactNode;
+    /**
+     * The "+N more" overflow trigger's own label (crisp#863, confirmed live:
+     * Attio's own copy is exactly "+N more", a chevron after it). Receives
+     * the hidden-tab count. Defaults to that measured copy.
+     */
+    moreLabel?: (count: number) => React.ReactNode;
+    /** aria-label on the overflow trigger/menu (default "More tabs"). */
+    moreMenuLabel?: string;
     className?: string;
     "aria-label"?: string;
 };
@@ -29,7 +37,7 @@ export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "d
  * Home/End jump); activation follows focus. Controlled via
  * `value`/`onValueChange`, or uncontrolled from `defaultValue`.
  */
-export declare function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, fill, "aria-label": ariaLabel, ...rest }: TabsProps): React.JSX.Element;
+export declare function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, moreLabel, moreMenuLabel, className, fill, "aria-label": ariaLabel, ...rest }: TabsProps): React.JSX.Element;
 export declare namespace Tabs {
     var displayName: string;
 }