@crisp-ui-kit/crisp 0.57.0 → 0.57.2

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

@@ -267,6 +267,25 @@ export type DataTableColumn<T> = {
      * row's own record — that's what `onRowClick` is for. Ignored on any
      * other `type`. */
     onEntityClick?: (row: T) => void;
+    /** `type: "entity"` only (#893) — a column-scoped link to the ROW'S OWN
+     * record, rendered as a real `<a href>` (matching Attio's own measured
+     * markup exactly — its entity cell name is a genuine anchor, confirmed
+     * via `outerHTML`, not a button with a click handler). Distinct from
+     * `onEntityClick` above (a DIFFERENT record than the row) and from the
+     * table-level `onRowClick` (fires for a click on any non-editable cell
+     * in the row, not just this column) — a consumer whose other columns
+     * select-on-click can't wire `onRowClick` for this without turning every
+     * cell in the row into a navigation trigger too. Set at most one of
+     * `href`/`onEntityClick` per column; `href` wins if both are given. */
+    href?: (row: T) => string;
+    /** `type: "entity"` only (#892) — the avatar's corner shape: Attio's own
+     * measured default (a company/object logo, `border-radius: 30%`, already
+     * `Avatar`'s own `shape="rounded"` value) or `"circle"` (`Avatar`'s own
+     * `shape="circle"`, `border-radius: 50%`) for a person entity — measured
+     * live on a real Attio People avatar. Naming matches `Avatar`'s own
+     * `shape` prop values exactly. Default `"rounded"`, so every existing
+     * entity column (Companies-style) is unaffected. */
+    avatarShape?: "rounded" | "circle";
     /** `type: "entity"` only (crisp/#601, checklist G-048) — a right-aligned
      * "Open preview" icon that appears on row hover (or keyboard focus),
      * alongside `onOpenComments` below. Matches Attio's own measured pair

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

@@ -9,12 +9,38 @@ export type FileUploadLabels = {
     errors: Record<string, string>;
 };
 export declare const fileUploadLabels: FileUploadLabels;
+export type FileUploadItemProps = {
+    name: string;
+    /** Bytes. Omit for a caller with no size to report. */
+    size?: number;
+    status?: FileEntry["status"];
+    /** 0-100. Only drawn while `status === "uploading"`. */
+    progress?: number;
+    /** Omit to render a non-removable row. */
+    onRemove?: () => void;
+    /** Required whenever `onRemove` is passed — the remove button's accessible name. */
+    removeLabel?: string;
+    className?: string;
+};
+/**
+ * One row of `FileUpload`'s own accepted-file list (crisp#965) — icon-free
+ * name + trailing size + remove, `min-height: size.tableRow` on `bgRaised`
+ * (measured from a data-grid row, see `fileupload.recipe.ts`). Exported on
+ * its own because `FileUpload` internally only lists `File` objects from the
+ * current browser session; a caller with already-persisted attachments
+ * (fetched from a server, never a real `File`) has no `acceptedFileEntries`
+ * to hand it and needs the identical row for its own list instead of
+ * hand-rolling one.
+ */
+export declare function FileUploadItem({ name, size, status, progress, onRemove, removeLabel, className, }: FileUploadItemProps): React.JSX.Element;
 export type FileUploadProps = UseFileUploadProps & Omit<React.ComponentPropsWithoutRef<"div">, keyof UseFileUploadProps | "children"> & {
     /** PARTIAL override of the chrome strings; anything omitted keeps its default. */
     labels?: Partial<Omit<FileUploadLabels, "errors">> & {
         errors?: Record<string, string>;
     };
 };
+/** 1000-based, matching how every file manager reports size. */
+export declare function formatSize(bytes: number): string;
 /**
  * A file dropzone with an accepted-file list, driven by seed-design's headless
  * engine so the behaviour — drag state, accept/reject, per-file upload status —

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

@@ -1,2 +1,2 @@
-export { Input, type InputProps } from "./input";
+export { Input, type InputProps, InputShell, type InputShellProps, } from "./input";
 export { inputRecipe } from "./input.recipe";

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

@@ -4,6 +4,12 @@ import { inputRecipe } from "./input.recipe";
 export type InputProps = Omit<React.ComponentPropsWithoutRef<"input">, "size"> & VariantProps<typeof inputRecipe> & {
     /** Class for the wrapper that draws the field chrome and focus ring. */
     className?: string;
+    /**
+     * Content after the value (crisp#634) — e.g. an "Edit" button on a
+     * read-only field. Measured live on Attio's own Settings > Profile
+     * primary-email field.
+     */
+    suffix?: React.ReactNode;
 };
 export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size"> & VariantProps<import("../..").RecipeFn<{
     size: {
@@ -30,4 +36,82 @@ export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
 }> & {
     /** Class for the wrapper that draws the field chrome and focus ring. */
     className?: string;
+    /**
+     * Content after the value (crisp#634) — e.g. an "Edit" button on a
+     * read-only field. Measured live on Attio's own Settings > Profile
+     * primary-email field.
+     */
+    suffix?: React.ReactNode;
 } & React.RefAttributes<HTMLInputElement>>;
+export type InputShellProps = React.ComponentPropsWithoutRef<"div"> & VariantProps<typeof inputRecipe> & {
+    /**
+     * Tints the shell to match `Input`'s own read-only fill (crisp#634).
+     * `Input` derives this from the native `readOnly` attribute already on
+     * its `<input>`; `InputShell`'s children aren't necessarily a real
+     * form control (a CodeMirror instance, say), so there's no DOM
+     * attribute to read it off — an explicit prop instead.
+     */
+    readOnly?: boolean;
+    suffix?: React.ReactNode;
+};
+/**
+ * crisp#917: the same field chrome `Input` draws (border, focus ring,
+ * radius, size, invalid/read-only states) around arbitrary children instead
+ * of a hardcoded `<input>` — for a third-party editor (CodeMirror, a
+ * rich-text widget, a masked-input library) that needs to mount into a
+ * plain element rather than a native `<input>`.
+ *
+ * Deliberately NOT `asChild` (crisp's usual `Primitive`/`Slot` pattern, used
+ * by `Button`/`Chip`/`Avatar`/etc. elsewhere): those merge the shell's own
+ * props onto ONE child, replacing it outright — correct when the shell
+ * and the interactive surface are the same element. `Input`'s real shape is
+ * TWO parts, an outer shell hosting the `::after` focus ring plus an inner
+ * value that carries the actual text/interaction; a rich editor mounts its
+ * own DOM subtree inside a container div, which is exactly what `children`
+ * gives it, not what replacing a single node would.
+ *
+ * Only draws the OUTER shell (`inputRecipe`'s own class — border, ring,
+ * radius, size-driven height, background, `data-readonly` tint) around
+ * `children` unchanged, the same granularity GRC's own pre-existing
+ * workaround (internal/grc#159, reaching into `.crisp-input`/
+ * `.crisp-input--size_medium` by hand) already used — NOT `.crisp-input-
+ * value`'s own text-field resets (`border: none`, `padding-inline`, `font:
+ * inherit`, …), which assume a real `<input>` and would fight a rich
+ * editor's own internal layout. A child that wants to fill the shell the
+ * way `Input`'s own `<input>` does should set its own sizing (e.g. `flex: 1
+ * 1 auto; min-width: 0; width: 100%; height: 100%`), same as any block
+ * content dropped into an `inline-flex` container.
+ */
+export declare const InputShell: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
+    size: {
+        sm: string;
+        medium: string;
+        large: string;
+    };
+    invalid: {
+        true: string;
+        false: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        size: {
+            sm: string;
+            medium: string;
+            large: string;
+        };
+        invalid: {
+            true: string;
+            false: string;
+        };
+    }>;
+}> & {
+    /**
+     * Tints the shell to match `Input`'s own read-only fill (crisp#634).
+     * `Input` derives this from the native `readOnly` attribute already on
+     * its `<input>`; `InputShell`'s children aren't necessarily a real
+     * form control (a CodeMirror instance, say), so there's no DOM
+     * attribute to read it off — an explicit prop instead.
+     */
+    readOnly?: boolean;
+    suffix?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { MenuSheet, MenuSheetGroup, MenuSheetItem, type MenuSheetItemProps, type MenuSheetProps, } from "./menusheet";
+export { menusheetRecipe } from "./menusheet.recipe";

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+export type MenuSheetProps = Omit<React.ComponentPropsWithoutRef<"div">, "title" | "children"> & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    footer?: React.ReactNode;
+    "aria-label"?: string;
+    children?: React.ReactNode;
+};
+/**
+ * A mobile menu sheet -- a focus-trapped bottom sheet (same Zag dialog
+ * machine as BottomSheet) whose body is a role=menu list, with the identical
+ * keyboard model Menu already uses: arrow keys move, Home/End jump,
+ * typeahead, Enter/Space select, Escape closes. Compose items with
+ * MenuSheetItem, and group a run of them in one rounded card with
+ * MenuSheetGroup.
+ */
+export declare function MenuSheet({ open, onOpenChange, title, description, footer, "aria-label": ariaLabel, children, className, "aria-describedby": describedBy, ...rest }: MenuSheetProps): React.JSX.Element | null;
+export declare namespace MenuSheet {
+    var displayName: string;
+}
+export declare function MenuSheetGroup({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+export declare namespace MenuSheetGroup {
+    var displayName: string;
+}
+export type MenuSheetItemProps = {
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+    tone?: "neutral" | "critical";
+    disabled?: boolean;
+    onSelect?: () => void;
+    /** Keep the sheet open after selecting (default closes). */
+    closeOnSelect?: boolean;
+};
+export declare function MenuSheetItem({ children, icon, description, tone, disabled, onSelect, closeOnSelect, }: MenuSheetItemProps): React.JSX.Element;
+export declare namespace MenuSheetItem {
+    var displayName: string;
+}

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

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const menusheetRecipe: import("../..").RecipeFn<{}>;
+export default config;

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

@@ -53,10 +53,11 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
     /** 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.
+     * `small` (default, crisp/#889) is Attio's own 32px trigger floor — lines
+     * up with `Input`'s own size. `medium`/`large` are seed-design's own
+     * 40px/52px floors (crisp/#882), opt-in. Purely visual.
      */
-    size?: "medium" | "large";
+    size?: "small" | "medium" | "large";
     /**
      * `ghost` fills whatever row it's embedded in instead of the fixed
      * trigger height — for inline table cell editors (crisp/#882, matching

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

@@ -1,5 +1,6 @@
 declare const config: import("../..").RecipeConfig<{
     size: {
+        small: string;
         medium: string;
         large: string;
     };
@@ -14,6 +15,7 @@ declare const config: import("../..").RecipeConfig<{
 }>;
 export declare const multiselectRecipe: import("../..").RecipeFn<{
     size: {
+        small: string;
         medium: string;
         large: string;
     };
@@ -28,6 +30,7 @@ export declare const multiselectRecipe: import("../..").RecipeFn<{
 }> & {
     config: import("../..").RecipeConfig<{
         size: {
+            small: string;
             medium: string;
             large: string;
         };

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

@@ -5,15 +5,27 @@ export type ProgressProps = React.ComponentPropsWithoutRef<"div"> & {
     max?: number;
     /** Render as N discrete segments (a step bar) instead of a continuous fill. */
     segments?: number;
+    /**
+     * `"linear"` (default) or `"circular"` — a small ring, measured live on
+     * Attio's own Settings > Profile character-counter (crisp#634).
+     */
+    variant?: "linear" | "circular";
+    /**
+     * Circular only: outer diameter in px. Default 18 is Attio's own measured
+     * size; `strokeWidth` scales proportionally at other sizes (18px's own
+     * 1.6px ratio) since only the one size was ever measured.
+     */
+    size?: number;
     "aria-label"?: string;
     className?: string;
 };
 /**
- * A progress bar — a continuous brand fill, or a segmented row of pills when
- * `segments` is set (the "Getting started 3/6" pattern). Reports its state via
- * `role="progressbar"` and the ARIA value attributes.
+ * A progress bar — a continuous brand fill, a segmented row of pills when
+ * `segments` is set (the "Getting started 3/6" pattern), or a small ring
+ * (`variant="circular"`, a character-counter's own progress). Reports its
+ * state via `role="progressbar"` and the ARIA value attributes.
  */
-export declare function Progress({ value, max, segments, "aria-label": ariaLabel, className, ...rest }: ProgressProps): import("react").JSX.Element;
+export declare function Progress({ value, max, segments, variant, size, "aria-label": ariaLabel, className, ...rest }: ProgressProps): import("react").JSX.Element;
 export declare namespace Progress {
     var displayName: string;
 }

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

@@ -42,6 +42,28 @@ declare const spec: {
         readonly decls: {
             background: `var(--${string})`;
         };
+    }, {
+        readonly selector: "&[data-variant=\"circular\"]";
+        readonly decls: {
+            readonly display: "inline-flex";
+            readonly height: "auto";
+            readonly borderRadius: "0";
+            readonly background: "transparent";
+            readonly overflow: "visible";
+        };
+    }, {
+        readonly slot: "circleTrack";
+        readonly selector: "& .crisp-progress-circle-track";
+        readonly decls: {
+            readonly stroke: `color-mix(in srgb, var(--${string}) 14%, transparent)`;
+        };
+    }, {
+        readonly slot: "circleFill";
+        readonly selector: "& .crisp-progress-circle-fill";
+        readonly decls: {
+            readonly stroke: `var(--${string})`;
+            readonly transition: "stroke-dashoffset 0.25s ease";
+        };
     }];
 };
 declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;

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

@@ -56,12 +56,13 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
     /** `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.
+     * `small` (default, crisp/#889) is Attio's own 32px trigger height — lines
+     * up with `Input`'s own size, since the two sit side by side in every
+     * form. `medium`/`large` are seed-design's own 40px/52px (crisp/#867),
+     * opt-in where the surrounding layout calls for a bigger control. Purely
+     * visual — the listbox/item chrome is identical across all three.
      */
-    size?: "medium" | "large";
+    size?: "small" | "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

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

@@ -4,6 +4,7 @@ declare const config: import("../..").RecipeConfig<{
         auto: string;
     };
     size: {
+        small: string;
         medium: string;
         large: string;
     };
@@ -22,6 +23,7 @@ export declare const selectRecipe: import("../..").RecipeFn<{
         auto: string;
     };
     size: {
+        small: string;
         medium: string;
         large: string;
     };
@@ -40,6 +42,7 @@ export declare const selectRecipe: import("../..").RecipeFn<{
             auto: string;
         };
         size: {
+            small: string;
             medium: string;
             large: string;
         };

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

@@ -0,0 +1,2 @@
+export { type SnackbarOptions, SnackbarProvider, type SnackbarVariant, useSnackbar, } from "./snackbar";
+export { snackbarRecipe } from "./snackbar.recipe";

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+export type SnackbarVariant = "default" | "positive" | "critical";
+export type SnackbarOptions = {
+    message: React.ReactNode;
+    variant?: SnackbarVariant;
+    /** Auto-dismiss after this many ms (0 = sticky). Defaults to the provider's. */
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+type SnackbarApi = {
+    show: (o: SnackbarOptions) => number;
+    dismiss: (id: number) => void;
+};
+/**
+ * Wrap your app in a `SnackbarProvider`, then call `useSnackbar().show({...})`
+ * from anywhere to queue a bottom-anchored snackbar. Only one shows at a time
+ * (seed-design's mobile pattern, crisp#911) -- a second call queues behind the
+ * first and shows once it dismisses. Auto-dismisses after `duration` (default
+ * 4s; 0 keeps it until `dismiss()` or its action fires -- there is no close
+ * button, matching seed's own anatomy, which has none).
+ */
+export declare function SnackbarProvider({ children, duration, regionLabel: regionLabelProp, }: {
+    children: React.ReactNode;
+    duration?: number;
+    /** aria-label on the always-mounted notifications region (default
+     * "Notifications"). */
+    regionLabel?: string;
+}): React.JSX.Element;
+export declare namespace SnackbarProvider {
+    var displayName: string;
+}
+export declare function useSnackbar(): SnackbarApi;
+export {};

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

@@ -0,0 +1,5 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const snackbarRecipe: import("../..").RecipeFn<{}> & {
+    config: import("../..").RecipeConfig<{}>;
+};
+export default config;

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

@@ -152,6 +152,26 @@ export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "chi
      *  "Delete filter" (this prop's original default) after a re-measurement
      *  caught the wrong word. */
     deleteFilterLabel?: string;
+    /**
+     * Overrides for the filter chip's operator words ("contains", "is any
+     * of", …) — crisp/#962: these came from a plain internal lookup table
+     * with no prop of their own, so a consumer's own non-English UI (GRC's
+     * Mongolian locale) had no discoverable way to translate them short of
+     * adding entries to a `CrispMessagesProvider` dictionary keyed by the
+     * exact English string, undocumented and easy to miss. Partial, same as
+     * `RecordPage`'s/`RecordsTable`'s own `labels` object (`core/i18n.tsx`'s
+     * own doc comment: "a handful of product components already take their
+     * own translatable text as one big labels object rather than a prop per
+     * string") — this is the one TableToolbar string that's a lookup table
+     * keyed by an enum rather than a single piece of text, so it gets that
+     * treatment instead of thirteen new individual `xLabel` props. A
+     * `CrispMessagesProvider`'s `componentDefaults.tableToolbar` (see
+     * `useToolbarOperatorLabels` below) sits between the built-in English
+     * words and this prop; the OLD whole-dictionary-by-English-string path
+     * still works underneath both, unchanged, for any consumer already
+     * relying on it.
+     */
+    operatorLabels?: Partial<ToolbarOperatorLabels>;
     /** Label on the "ascending" sort-direction option (default "Ascending"). */
     ascendingLabel?: string;
     /** Label on the "descending" sort-direction option (default "Descending"). */
@@ -288,6 +308,13 @@ export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "chi
      */
     nestedFieldPlaceholder?: (noun: string) => string;
 };
+/** crisp/#962: the canonical English operator words, keyed the same way
+ *  `RecordPageLabels` keys its own defaults — exported so a consumer's
+ *  `CrispMessagesProvider` or `operatorLabels` override can be typed
+ *  against the real key set instead of guessing `ToolbarFilterOp`'s
+ *  strings by hand. */
+export type ToolbarOperatorLabels = Record<ToolbarFilterOp, string>;
+export declare const toolbarOperatorLabels: ToolbarOperatorLabels;
 /**
  * Applies a toolbar's filter conditions to any row array. Reads the raw value
  * at `row[key]` (override with `get` for derived fields) — never a formatted
@@ -313,7 +340,7 @@ export declare function applySorts<T>(rows: T[], sorts: ToolbarSort[], get?: (ro
  * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
  * Created by), which one shared list can't reproduce.
  */
-export declare function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, showSort, showViewSettings, viewSettingsRef, importExportRef, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, importExportLabel: importExportLabelProp, onImportCsv, onExportCsv, onExportExcel, importExportHelpHref, importCsvLabel: importCsvLabelProp, exportCsvLabel: exportCsvLabelProp, exportExcelLabel: exportExcelLabelProp, learnImportExportLabel: learnImportExportLabelProp, backLabel: backLabelProp, nestedFieldPlaceholder, ...rest }: TableToolbarProps): React.JSX.Element;
+export declare function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, operatorLabels, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, showSort, showViewSettings, viewSettingsRef, importExportRef, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, importExportLabel: importExportLabelProp, onImportCsv, onExportCsv, onExportExcel, importExportHelpHref, importCsvLabel: importCsvLabelProp, exportCsvLabel: exportCsvLabelProp, exportExcelLabel: exportExcelLabelProp, learnImportExportLabel: learnImportExportLabelProp, backLabel: backLabelProp, nestedFieldPlaceholder, ...rest }: TableToolbarProps): React.JSX.Element;
 export type ToolbarToolProps = React.ComponentPropsWithoutRef<"button"> & {
     /** Drawn the way Sort/Filter are once a condition is set (#399). */
     active?: boolean;

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

@@ -28,6 +28,16 @@ export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "d
     moreLabel?: (count: number) => React.ReactNode;
     /** aria-label on the overflow trigger/menu (default "More tabs"). */
     moreMenuLabel?: string;
+    /**
+     * How the tab row handles running out of width. `"collapse"` (default,
+     * crisp#863) hides trailing tabs behind a "+N more" menu, matching
+     * Attio's own record-view tabs. `"scroll"` (crisp#908) never hides a
+     * tab — the row scrolls horizontally instead, snapping each tab to the
+     * left edge, the pattern Naver/Kakao's own tab rows use
+     * (`docs/study/korean/`). Mutually exclusive: `"scroll"` never computes
+     * or renders the "+N more" trigger.
+     */
+    overflow?: "collapse" | "scroll";
     className?: string;
     "aria-label"?: string;
 };
@@ -37,7 +47,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, moreLabel, moreMenuLabel, className, fill, "aria-label": ariaLabel, ...rest }: TabsProps): React.JSX.Element;
+export declare function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, moreLabel, moreMenuLabel, overflow, className, fill, "aria-label": ariaLabel, ...rest }: TabsProps): React.JSX.Element;
 export declare namespace Tabs {
     var displayName: string;
 }

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

@@ -2,6 +2,14 @@ import * as React from "react";
 export type TextareaProps = React.ComponentPropsWithoutRef<"textarea"> & {
     /** Show a "N / maxLength" counter bottom-right (also caps input at maxLength). */
     showCount?: boolean;
+    /**
+     * Pair the counter with a small circular progress ring (crisp#634),
+     * measured live on Attio's own Settings > Profile "Personal context"
+     * field. Only meaningful alongside `showCount`+`maxLength` — not every
+     * counted textarea in Attio has one, so this is opt-in rather than tied
+     * to `showCount` itself.
+     */
+    showProgress?: boolean;
     /** Extra class on the wrapper. */
     wrapperClassName?: string;
 };
@@ -13,6 +21,14 @@ export type TextareaProps = React.ComponentPropsWithoutRef<"textarea"> & {
 export declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
     /** Show a "N / maxLength" counter bottom-right (also caps input at maxLength). */
     showCount?: boolean;
+    /**
+     * Pair the counter with a small circular progress ring (crisp#634),
+     * measured live on Attio's own Settings > Profile "Personal context"
+     * field. Only meaningful alongside `showCount`+`maxLength` — not every
+     * counted textarea in Attio has one, so this is opt-in rather than tied
+     * to `showCount` itself.
+     */
+    showProgress?: boolean;
     /** Extra class on the wrapper. */
     wrapperClassName?: string;
 } & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/types/index.d.ts

@@ -1,8 +1,10 @@
+export * from "./components/accentpicker";
 export * from "./components/accordion";
 export * from "./components/avatar";
 export * from "./components/avatargroup";
 export * from "./components/badge";
 export * from "./components/barchart";
+export * from "./components/bottomsheet";
 export * from "./components/breadcrumb";
 export * from "./components/bulkbar";
 export * from "./components/button";
@@ -10,6 +12,7 @@ export * from "./components/callout";
 export * from "./components/card";
 export * from "./components/checkbox";
 export * from "./components/chip";
+export * from "./components/chipgroup";
 export * from "./components/columncalc";
 export * from "./components/composewindow";
 export * from "./components/contextmenu";
@@ -31,6 +34,7 @@ export * from "./components/kbd";
 export * from "./components/linechart";
 export * from "./components/mentionchip";
 export * from "./components/menu";
+export * from "./components/menusheet";
 export * from "./components/middletruncate";
 export * from "./components/multiselect";
 export * from "./components/personchip";
@@ -44,6 +48,7 @@ export * from "./components/select";
 export * from "./components/skeleton";
 export * from "./components/skiplink";
 export * from "./components/slider";
+export * from "./components/snackbar";
 export * from "./components/spinner";
 export * from "./components/stagebar";
 export * from "./components/statcard";
@@ -74,7 +79,9 @@ export * from "./product/headerbar";
 export * from "./product/importdialog";
 export * from "./product/inbox";
 export * from "./product/listpage";
+export * from "./product/memberssettings";
 export * from "./product/navitem";
+export * from "./product/notificationssettings";
 export * from "./product/objectsettings";
 export * from "./product/onboarding";
 export * from "./product/recordpage";
@@ -89,4 +96,5 @@ export * from "./product/tasklist";
 export * from "./product/themepicker";
 export * from "./product/trialbanner";
 export * from "./product/viewtoggle";
+export * from "./product/workspacegeneralsettings";
 export * from "./tokens";

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { type MentionAnchor } from "../../core";
+import { type MentionAnchor, type VariantProps } from "../../core";
+import { commentsRecipe } from "./comments.recipe";
 /** One participant — crisp has no user model of its own, so every field
  * beyond `id`/`name` (avatar image, colour) is fully consumer-supplied, the
  * same split `Inbox`'s own `avatar` prop already draws. */
@@ -76,7 +77,7 @@ export type CommentMentionTriggerState = {
  * never read from the part that changed.
  */
 export declare function serializeComposerField(field: HTMLElement): string;
-export type CommentsPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "title" | "onCopy"> & {
+export type CommentsPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "title" | "onCopy"> & VariantProps<typeof commentsRecipe> & {
     threads: CommentThread[];
     currentUserId: string;
     /** The record/page these comments belong to -- shown in the single-thread
@@ -168,8 +169,13 @@ export type CommentsPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "ch
  * nothing on its own beyond that data. See `CommentCountBadge` for the
  * separate row affordance (P-051) — deliberately NOT part of this
  * component, since it lives in a table cell this component doesn't own.
+ *
+ * `variant="drawer"` (default) is today's measured 320px + left-border
+ * look; `variant="pane"` (crisp#960) fills its container's width instead,
+ * for a consumer embedding this in a full-width tab pane rather than a
+ * true slide-over/drawer.
  */
-export declare function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResolved, onShowResolvedChange, onlyMine, onOnlyMineChange, activeThreadId: activeThreadIdProp, onActiveThreadChange, onPost, onReact, onResolve, onDelete, onCopyLink, emojiOptions, mentionTrigger, renderMentionPicker, onClose, closeLabel: closeLabelProp, backLabel: backLabelProp, title: titleProp, threadTitle: threadTitleProp, breadcrumbPrefix: breadcrumbPrefixProp, composerPlaceholder: composerPlaceholderProp, replyPlaceholder: replyPlaceholderProp, postLabel: postLabelProp, replyPostLabel: replyPostLabelProp, emptyLabel, filterLabel: filterLabelProp, showResolvedLabel: showResolvedLabelProp, onlyMineLabel: onlyMineLabelProp, replyActionLabel: replyActionLabelProp, reactActionLabel: reactActionLabelProp, resolveActionLabel: resolveActionLabelProp, resolvedByYouLabel: resolvedByYouLabelProp, resolvedByLabel, moreActionsLabel: moreActionsLabelProp, copyLinkLabel: copyLinkLabelProp, deleteLabel: deleteLabelProp, addReactionLabel: addReactionLabelProp, reactionSearchLabel: reactionSearchLabelProp, deleteConfirmTitle: deleteConfirmTitleProp, deleteConfirmBody: deleteConfirmBodyProp, deleteConfirmActionLabel: deleteConfirmActionLabelProp, cancelLabel: cancelLabelProp, composerMentionToolLabel: composerMentionToolLabelProp, className, ...rest }: CommentsPanelProps): React.JSX.Element;
+export declare function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResolved, onShowResolvedChange, onlyMine, onOnlyMineChange, activeThreadId: activeThreadIdProp, onActiveThreadChange, onPost, onReact, onResolve, onDelete, onCopyLink, emojiOptions, mentionTrigger, renderMentionPicker, onClose, closeLabel: closeLabelProp, backLabel: backLabelProp, title: titleProp, threadTitle: threadTitleProp, breadcrumbPrefix: breadcrumbPrefixProp, composerPlaceholder: composerPlaceholderProp, replyPlaceholder: replyPlaceholderProp, postLabel: postLabelProp, replyPostLabel: replyPostLabelProp, emptyLabel, filterLabel: filterLabelProp, showResolvedLabel: showResolvedLabelProp, onlyMineLabel: onlyMineLabelProp, replyActionLabel: replyActionLabelProp, reactActionLabel: reactActionLabelProp, resolveActionLabel: resolveActionLabelProp, resolvedByYouLabel: resolvedByYouLabelProp, resolvedByLabel, moreActionsLabel: moreActionsLabelProp, copyLinkLabel: copyLinkLabelProp, deleteLabel: deleteLabelProp, addReactionLabel: addReactionLabelProp, reactionSearchLabel: reactionSearchLabelProp, deleteConfirmTitle: deleteConfirmTitleProp, deleteConfirmBody: deleteConfirmBodyProp, deleteConfirmActionLabel: deleteConfirmActionLabelProp, cancelLabel: cancelLabelProp, composerMentionToolLabel: composerMentionToolLabelProp, variant, className, ...rest }: CommentsPanelProps): React.JSX.Element;
 export declare namespace CommentsPanel {
     var displayName: string;
 }

package/dist/types/product/comments/comments.recipe.d.ts

@@ -1,3 +1,13 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const commentsRecipe: import("../..").RecipeFn<{}>;
+declare const config: import("../..").RecipeConfig<{
+    variant: {
+        drawer: string;
+        pane: string;
+    };
+}>;
+export declare const commentsRecipe: import("../..").RecipeFn<{
+    variant: {
+        drawer: string;
+        pane: string;
+    };
+}>;
 export default config;

package/dist/types/product/memberssettings/index.d.ts

@@ -0,0 +1 @@
+export { InviteMembersDialog, type InviteMembersDialogProps, type MemberRow, MembersSettings, type MembersSettingsProps, } from "./memberssettings";