@crisp-ui-kit/crisp 0.2.0 → 0.7.0

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

@@ -8,7 +8,7 @@ export type TabItem = {
     badge?: React.ReactNode;
     disabled?: boolean;
 };
-export type TabsProps = {
+export type TabsProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "children"> & {
     tabs: TabItem[];
     /** Controlled active value. Omit to let Tabs manage it (see defaultValue). */
     value?: string;
@@ -27,7 +27,7 @@ export type TabsProps = {
  * Home/End jump); activation follows focus, matching Attio. Controlled via
  * `value`/`onValueChange`, or uncontrolled from `defaultValue`.
  */
-export declare function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, "aria-label": ariaLabel, }: TabsProps): React.JSX.Element;
+export declare function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, "aria-label": ariaLabel, ...rest }: TabsProps): React.JSX.Element;
 export declare namespace Tabs {
     var displayName: string;
 }

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

@@ -20,9 +20,15 @@ type ToastApi = {
  * anywhere to push a notification. Toasts stack bottom-right and auto-dismiss
  * after `duration` (default 4s; 0 keeps them until dismissed).
  */
-export declare function ToastProvider({ children, duration, }: {
+export declare function ToastProvider({ children, duration, dismissLabel, regionLabel, }: {
     children: React.ReactNode;
     duration?: number;
+    /** aria-label on each toast's dismiss button (default "Dismiss"). */
+    dismissLabel?: string;
+    /** aria-label on the always-mounted notifications region (default
+     * "Notifications") — announced to screen readers on every page, whether or
+     * not a toast is ever shown. */
+    regionLabel?: string;
 }): React.JSX.Element;
 export declare namespace ToastProvider {
     var displayName: string;

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

@@ -8,6 +8,13 @@ export type TooltipProps = {
     side?: "top" | "bottom";
     /** Delay in ms before showing (default 350). Hides immediately. */
     delay?: number;
+    /** Controlled open state. Omit to let Tooltip manage it (see defaultOpen).
+     * A controlled tooltip shows at once — `delay` only paces hover. */
+    open?: boolean;
+    /** Initially open, when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Fires with the next open state, controlled or not. */
+    onOpenChange?: (open: boolean) => void;
 };
 /**
  * A hover/focus tooltip — a dark hint chip measured from Attio. Wraps its
@@ -15,7 +22,7 @@ export type TooltipProps = {
  * and hides on leave / blur / Escape. The bubble is portaled and positioned
  * above the trigger (flipping below near the top edge).
  */
-export declare function Tooltip({ content, children, side, delay, }: TooltipProps): React.JSX.Element;
+export declare function Tooltip({ content, children, side, delay, open: openProp, defaultOpen, onOpenChange, }: TooltipProps): React.JSX.Element;
 export declare namespace Tooltip {
     var displayName: string;
 }

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

@@ -0,0 +1,2 @@
+export { WheelPicker, type WheelPickerColumn, type WheelPickerOption, type WheelPickerProps, } from "./wheelpicker";
+export { wheelpickerRecipe } from "./wheelpicker.recipe";

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+export type WheelPickerOption = {
+    value: string;
+    label: React.ReactNode;
+};
+export type WheelPickerColumn = {
+    /** Identifies the column in `value` / `onValueChange`. */
+    key: string;
+    options: WheelPickerOption[];
+    /** Accessible name for this column's listbox. */
+    label: string;
+};
+export type WheelPickerProps = Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> & {
+    columns: WheelPickerColumn[];
+    /** Controlled selection, keyed by column. Omit to let WheelPicker manage it. */
+    value?: Record<string, string>;
+    /** Initial selection, when uncontrolled. Defaults to each column's first option. */
+    defaultValue?: Record<string, string>;
+    /** Fires with the next selection on every change, controlled or not. */
+    onValueChange?: (value: Record<string, string>) => void;
+    size?: "small" | "medium";
+    className?: string;
+};
+/**
+ * A scroll-snapping wheel, measured from seed-design. Each column snaps its
+ * rows to a centred selection band; the momentum is the browser's own, because
+ * the column is an ordinary scroll container with `scroll-snap-type: y
+ * mandatory` rather than a JavaScript animation.
+ *
+ * Keyboard: each column is a `listbox` that takes focus, with ↑/↓ moving the
+ * selection, Home/End jumping to the ends, and a visible ring on the selected
+ * row for keyboard focus only.
+ */
+export declare function WheelPicker({ columns, value: valueProp, defaultValue, onValueChange, size, className, ...rest }: WheelPickerProps): React.JSX.Element;
+export declare namespace WheelPicker {
+    var displayName: string;
+}

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

@@ -0,0 +1,26 @@
+declare const config: import("../..").RecipeConfig<{
+    size: {
+        small: string;
+        medium: string;
+    };
+}>;
+export declare const wheelpickerRecipe: import("../..").RecipeFn<{
+    size: {
+        small: string;
+        medium: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        size: {
+            small: string;
+            medium: string;
+        };
+    }>;
+    meta: {
+        medium: {
+            height: string;
+            itemHeight: string;
+        };
+    };
+};
+export default config;

package/dist/types/index.d.ts

@@ -9,8 +9,11 @@ export * from "./components/button";
 export * from "./components/callout";
 export * from "./components/card";
 export * from "./components/checkbox";
+export * from "./components/columncalc";
 export * from "./components/contextmenu";
+export * from "./components/datatable";
 export * from "./components/datepicker";
+export * from "./components/datepickerfield";
 export * from "./components/dialog";
 export * from "./components/divider";
 export * from "./components/donutchart";
@@ -25,6 +28,7 @@ export * from "./components/multiselect";
 export * from "./components/popover";
 export * from "./components/progress";
 export * from "./components/radiogroup";
+export * from "./components/resizablepanel";
 export * from "./components/segmented";
 export * from "./components/select";
 export * from "./components/skeleton";
@@ -32,12 +36,16 @@ export * from "./components/spinner";
 export * from "./components/stagebar";
 export * from "./components/statcard";
 export * from "./components/switch";
+export * from "./components/table";
+export * from "./components/tabletoolbar";
 export * from "./components/tabs";
 export * from "./components/textarea";
 export * from "./components/toast";
 export * from "./components/tooltip";
+export * from "./components/wheelpicker";
 export * from "./core";
 export * from "./product/appshell";
+export * from "./product/authshell";
 export * from "./product/board";
 export * from "./product/command";
 export * from "./product/entitycard";

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

@@ -1,13 +1,27 @@
 import * as React from "react";
-export type AppShellProps = {
+export type AppShellProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onResize"> & {
     /**
      * The sidebar, as a render function receiving a `toggleCollapse` callback to
      * wire to your sidebar's collapse control (e.g. `Sidebar`'s
      * `onToggleCollapse`). Make the sidebar fill its pane (`width: 100%`).
      */
     sidebar: (toggleCollapse: () => void) => React.ReactNode;
+    /** Label for the control that reopens a collapsed sidebar. */
+    expandLabel?: string;
     children: React.ReactNode;
+    /** Controlled sidebar width in px. Omit to let AppShell manage it. */
+    width?: number;
+    /** Initial width in px when uncontrolled (default 275). */
     defaultWidth?: number;
+    /** Fires with the final clamped width once a drag ends — not on every
+     * pointer move, matching ResizablePanel's `onSizeChange`. Persist it here. */
+    onWidthChange?: (width: number) => void;
+    /** Controlled collapsed state. Omit to let AppShell manage it. */
+    collapsed?: boolean;
+    /** Initially collapsed when uncontrolled (default false). */
+    defaultCollapsed?: boolean;
+    /** Fires with the next collapsed state, controlled or not. */
+    onCollapsedChange?: (collapsed: boolean) => void;
     minWidth?: number;
     maxWidth?: number;
     className?: string;
@@ -18,7 +32,7 @@ export type AppShellProps = {
  * collapse button to slide it away (a floating button brings it back). The
  * sidebar pane clips rather than squishing, so its content never reflows.
  */
-export declare function AppShell({ sidebar, children, defaultWidth, minWidth, maxWidth, className, }: AppShellProps): React.JSX.Element;
+export declare function AppShell({ sidebar, children, width: widthProp, defaultWidth, onWidthChange, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, minWidth, maxWidth, className, expandLabel, ...rest }: AppShellProps): React.JSX.Element;
 export declare namespace AppShell {
     var displayName: string;
 }

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

@@ -0,0 +1,28 @@
+import type * as React from "react";
+export type AuthShellProps = Omit<React.ComponentPropsWithoutRef<"div">, "title"> & {
+    /** 0–1. Omit for no progress bar. */
+    progress?: number;
+    /** Brand mark above the card (measured 96x24). */
+    logo?: React.ReactNode;
+    /** Card heading. */
+    title?: React.ReactNode;
+    /** The form / body content. */
+    children: React.ReactNode;
+    /** Right-hand product preview. Hidden under 1200px; omit for a single-pane card. */
+    preview?: React.ReactNode;
+    /** Legal / support links under the card. */
+    footer?: React.ReactNode;
+    className?: string;
+};
+/**
+ * The Attio welcome/auth layout (app.attio.com/welcome/*) — measured live.
+ * A centered page frame: an optional top progress bar, a logo, a two-pane
+ * card (the form + an optional product preview, hidden under 1200px), and
+ * a footer. Auth-surface Input/FormField/Button treatment (flatter fields,
+ * 36px buttons) applies automatically to those crisp components when
+ * rendered as `children` — see authshell.recipe.ts.
+ */
+export declare function AuthShell({ progress, logo, title, children, preview, footer, className, ...rest }: AuthShellProps): React.JSX.Element;
+export declare namespace AuthShell {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+export { AuthShell, type AuthShellProps } from "./authshell";
+export { authshellRecipe } from "./authshell.recipe";

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

@@ -9,7 +9,7 @@ export type BoardCard = {
     id: string;
     columnId: string;
 };
-export type BoardProps<T extends BoardCard> = {
+export type BoardProps<T extends BoardCard> = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
     columns: BoardColumn[];
     cards: T[];
     /** Called with the next cards after a drag moves one between columns. */
@@ -26,7 +26,7 @@ export type BoardProps<T extends BoardCard> = {
  * (the parent owns the cards, so the move is a controlled state update).
  * Measured from Attio's Deals pipeline.
  */
-export declare function Board<T extends BoardCard>({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel, className, }: BoardProps<T>): React.JSX.Element;
+export declare function Board<T extends BoardCard>({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel, className, ...rest }: BoardProps<T>): React.JSX.Element;
 export declare namespace Board {
     var displayName: string;
 }

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

@@ -19,6 +19,30 @@ export type CommandProps = {
     onOpenChange: (open: boolean) => void;
     items?: CommandItem[];
     placeholder?: string;
+    "aria-label"?: string;
+    /** Footer hint next to the ↑ ↓ keys (default "Navigate"). */
+    navigateLabel?: React.ReactNode;
+    /** Footer action-button fallback text, shown while no item is highlighted
+     * (once one is, the button mirrors that item's own — already translatable
+     * — label instead). Default "Select". */
+    selectLabel?: string;
+    /** Shown in the list when no item matches the query (default
+     * "No matching commands"). */
+    emptyLabel?: React.ReactNode;
+    /** The search input's text. Omit for internal state (the default) — pass
+     * this alongside `onQueryChange` to observe or drive it from outside, e.g.
+     * to search the host app's own data (records, transactions, …) and feed
+     * matching results back in via `items`. */
+    query?: string;
+    /** Called with the next query text on every keystroke, and on the
+     * open-triggered reset to `""`. Works standalone (without `query`) just to
+     * observe what the user typed. */
+    onQueryChange?: (query: string) => void;
+    /** Whether Command filters `items` against `query` itself (default true).
+     * Turn off when `items` is already filtered externally — e.g. driven by
+     * `onQueryChange` calling out to search the host app's own data — so
+     * results aren't filtered a second time here. */
+    filterItems?: boolean;
 };
 /**
  * ⌘K command palette. Composes a Zag dialog machine (modal, focus trap,
@@ -26,4 +50,4 @@ export type CommandProps = {
  * option list) so keyboard/focus correctness comes from the machines, not
  * hand-rolled event handling.
  */
-export declare function Command({ open, onOpenChange, items, placeholder, }: CommandProps): React.JSX.Element | null;
+export declare function Command({ open, onOpenChange, items, placeholder, "aria-label": ariaLabel, navigateLabel, selectLabel, emptyLabel, query: queryProp, onQueryChange, filterItems, }: CommandProps): React.JSX.Element | null;

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

@@ -1,5 +1,5 @@
 import type * as React from "react";
-export type EntityCardProps = {
+export type EntityCardProps = Omit<React.ComponentPropsWithoutRef<"button">, "children" | "title"> & {
     /** Author row shown at the top (e.g. avatar + name). */
     author?: React.ReactNode;
     title: React.ReactNode;
@@ -18,7 +18,7 @@ export type EntityCardProps = {
  * card with an author row, a title, a clamped excerpt, and a footer row with a
  * right-aligned date. Rendered as a button so the whole card is clickable.
  */
-export declare function EntityCard({ author, title, excerpt, footer, date, onClick, "aria-label": ariaLabel, className, }: EntityCardProps): React.JSX.Element;
+export declare function EntityCard({ author, title, excerpt, footer, date, onClick, "aria-label": ariaLabel, className, ...rest }: EntityCardProps): React.JSX.Element;
 export declare namespace EntityCard {
     var displayName: string;
 }

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

@@ -9,6 +9,14 @@ export type FlowEdge = {
     to: string;
 };
 export type FlowCanvasProps<T extends FlowNode> = {
+    /** Zoom-out control label. */
+    zoomOutLabel?: string;
+    /** Zoom-in control label. */
+    zoomInLabel?: string;
+    /** Reset-view control label. */
+    resetLabel?: string;
+    /** Accessible title for the edges layer. */
+    edgesLabel?: string;
     nodes: T[];
     edges: FlowEdge[];
     /** Called with the next nodes after a node is dragged. */
@@ -26,7 +34,7 @@ export type FlowCanvasProps<T extends FlowNode> = {
  * measured from Attio's Workflows editor. Drag a node to move it (fires
  * `onNodesChange`); drag the background to pan; use the toolbar to zoom.
  */
-export declare function FlowCanvas<T extends FlowNode>({ nodes, edges, onNodesChange, renderNode, nodeWidth, nodeHeight, "aria-label": ariaLabel, className, }: FlowCanvasProps<T>): React.JSX.Element;
+export declare function FlowCanvas<T extends FlowNode>({ nodes, edges, onNodesChange, renderNode, nodeWidth, nodeHeight, "aria-label": ariaLabel, className, zoomOutLabel, zoomInLabel, resetLabel, edgesLabel, }: FlowCanvasProps<T>): React.JSX.Element;
 export declare namespace FlowCanvas {
     var displayName: string;
 }

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

@@ -8,6 +8,12 @@ export type OnboardingStep = {
     done?: boolean;
 };
 export type OnboardingChecklistProps = {
+    /** Label for the overflow-menu trigger. */
+    optionsLabel?: string;
+    /** Label for the minimise control. */
+    minimizeLabel?: string;
+    /** Accessible name for the progress bar. */
+    progressLabel?: string;
     title?: React.ReactNode;
     steps: OnboardingStep[];
     /** Subtitle after "N/total steps completed" (default "Keep it up!"). */
@@ -25,7 +31,7 @@ export type OnboardingChecklistProps = {
  * started" widget. Title + optional menu/minimize, a segmented progress bar,
  * and step rows (completed rows strike through with a brand check).
  */
-export declare function OnboardingChecklist({ title, steps, encouragement, onStepClick, onMenu, onMinimize, className, }: OnboardingChecklistProps): React.JSX.Element;
+export declare function OnboardingChecklist({ title, steps, encouragement, onStepClick, onMenu, onMinimize, className, optionsLabel, minimizeLabel, progressLabel, }: OnboardingChecklistProps): React.JSX.Element;
 export declare namespace OnboardingChecklist {
     var displayName: string;
 }

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

@@ -5,12 +5,76 @@ export type RecordPageProps = {
     columns: Column[];
     /** Breadcrumb label + back button target (e.g. "Companies"). */
     collection?: string;
+    /** Partial override of the chrome strings; see `recordPageLabels`. */
+    labels?: RecordPageLabelsInput;
     onBack?: () => void;
     /** When provided, shows a maximise/minimise button in the top bar. */
     onToggleFull?: () => void;
     full?: boolean;
     className?: string;
 };
+/**
+ * Every chrome string RecordPage renders. Supplied as a PARTIAL map, so
+ * translating one control does not mean restating the other fifty; anything
+ * omitted keeps its English default from `recordPageLabels`.
+ *
+ * The record's own field labels and values are NOT here — those arrive through
+ * `record` and `columns`, and are the consumer's data. What this covers is the
+ * surface crisp draws around them: the tab strip, the Highlights stats (a fixed
+ * set measured from Attio, not consumer data), the action bar and the feed.
+ */
+export type RecordPageLabels = {
+    breadcrumb: string;
+    editRecord: string;
+    recordActions: string;
+    addToFavourites: string;
+    removeFromFavourites: string;
+    copyRecordLink: string;
+    deleteRecord: string;
+    linkRecords: string;
+    logANote: string;
+    createATask: string;
+    fullScreen: string;
+    exitFullScreen: string;
+    resizeDetails: string;
+    composeEmail: string;
+    askAttio: string;
+    addToList: string;
+    highlights: string;
+    recordDetails: string;
+    searchFields: string;
+    closeSearch: string;
+    searchPlaceholder: string;
+    viewAllValues: string;
+    setAValue: string;
+    viewAll: string;
+    showLess: string;
+    viewLess: string;
+    newNote: string;
+    newTask: string;
+    cancel: string;
+    noNotesYet: string;
+    noTasksYet: string;
+    nothingHereYet: string;
+    you: string;
+    justNow: string;
+    /** Tab names, keyed by tab. */
+    tabs: Record<"overview" | "activity" | "emails" | "calls" | "team" | "lists" | "notes" | "tasks" | "files", string>;
+    /** Highlight stat names and their empty states, keyed by stat. */
+    highlightLabels: Record<"connectionStrength" | "nextInteraction" | "team" | "estimatedArr" | "fundingRaised" | "employeeRange" | "associatedDeals", string>;
+    highlightEmpty: Record<"connectionStrength" | "nextInteraction" | "team" | "estimatedArr" | "fundingRaised" | "employeeRange" | "associatedDeals", string>;
+    /** Activity line for a changed domain, given the new value. */
+    domainSetTo: (value: React.ReactNode) => React.ReactNode;
+    /** Activity line for added categories, given how many. */
+    taggedCategories: (count: number) => React.ReactNode;
+};
+export declare const recordPageLabels: RecordPageLabels;
+/** Partial override of any chrome string; the keyed maps nest. */
+export type RecordPageLabelsInput = Partial<Omit<RecordPageLabels, "tabs" | "highlightLabels" | "highlightEmpty">> & {
+    tabs?: Partial<RecordPageLabels["tabs"]>;
+    highlightLabels?: Partial<RecordPageLabels["highlightLabels"]>;
+    highlightEmpty?: Partial<RecordPageLabels["highlightEmpty"]>;
+};
 /**
  * The full-page company record view — the page Attio opens when you click into a
  * record (as opposed to the peek [RecordPanel]). A top breadcrumb bar with
@@ -19,7 +83,7 @@ export type RecordPageProps = {
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-export declare function RecordPage({ record, columns, collection, onBack, onToggleFull, full, className, }: RecordPageProps): React.JSX.Element;
+export declare function RecordPage({ record, columns, collection, labels, onBack, onToggleFull, full, className, }: RecordPageProps): React.JSX.Element;
 export declare namespace RecordPage {
     var displayName: string;
 }

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

@@ -1,7 +1,13 @@
 import * as React from "react";
 import { type Column, type Row } from "../recordstable";
-export type RecordPanelProps = {
+export type RecordPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "title"> & {
     /** The record to show; render nothing when null. */
+    /** Label for the close control. */
+    closeLabel?: string;
+    /** Heading above the field list. */
+    detailsLabel?: React.ReactNode;
+    /** Shown in place of a field that has no value. */
+    emptyLabel?: React.ReactNode;
     record: Row | null;
     columns: Column[];
     onClose: () => void;
@@ -13,7 +19,7 @@ export type RecordPanelProps = {
  * relative` container (e.g. the app main area); it slides in from the right and
  * overlays the content.
  */
-export declare function RecordPanel({ record, columns, onClose, className, }: RecordPanelProps): React.JSX.Element | null;
+export declare function RecordPanel({ record, columns, onClose, className, closeLabel, detailsLabel, emptyLabel, ...rest }: RecordPanelProps): React.JSX.Element | null;
 export declare namespace RecordPanel {
     var displayName: string;
 }

package/dist/types/product/recordstable/company-logos.d.ts

@@ -0,0 +1 @@
+export declare const companyLogos: Record<string, string>;

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

@@ -18,6 +18,9 @@ export type Column = {
     key: string;
     label: string;
     type?: ColumnType;
+    /** Mark the column's values as AI-enriched — tints the cells the way Attio
+     *  washes enriched values (#9b69ff at 4%). */
+    enriched?: boolean;
     icon?: IconType;
     width?: number;
     /** Currency symbol for `currency` columns (default "$"). */
@@ -26,6 +29,42 @@ export type Column = {
     options?: StatusOption[];
     /** Choices for a `reference` column (a searchable record picker). */
     refOptions?: ReferenceOption[];
+    /**
+     * Full custom cell content — an escape hatch for a display crisp can't
+     * express via `type` (sign-coloured currency, a maskable amount, a custom
+     * badge, …). Precedence is **`render` > `format` > the built-in `type`
+     * renderer**: when `render` is set it is the *only* thing drawn in the
+     * cell, replacing whatever `type` would normally render.
+     *
+     * Interaction contract for a `render` column: it keeps every grid chrome —
+     * row height, hairlines, padding, hover/selected tint, the cell focus ring,
+     * shift-click range select, the right-click row menu — but is **never**
+     * inline-editable and never shows a `type` picker (status/reference/date/
+     * tags), because crisp has no way to write a value back into custom
+     * content. Use `format` instead if the column should stay editable.
+     *
+     * ⌘C copies `format(value, row)` when the column also has one, otherwise
+     * the raw value stringified the same way a plain column would — never a
+     * serialization of the rendered node. Sort, filter, and the footer
+     * aggregation all read `row[column.key]` directly and never call `render`.
+     */
+    render?: (value: unknown, row: Row) => React.ReactNode;
+    /**
+     * Display-only string transform. Unlike `render`, a `format` column keeps
+     * the built-in `type` renderer's chrome (a `currency`/`number` column stays
+     * right-aligned in its numeric span; `text`/`url`/`date`/the default case
+     * keep their own wrapper) — `format`'s return value simply replaces the
+     * text that renderer would otherwise show. `format` fully owns that text,
+     * so a `currency` column's `format` should include its own symbol/masking
+     * if it wants one (the built-in `$` prefix is skipped once `format` is
+     * set). A `format` column stays editable/pickable exactly like a plain
+     * `type` column — only `render` disables that.
+     *
+     * Sort, filter, and the footer aggregation all read the **raw**
+     * `row[column.key]` value, never `format`'s output — so a grouped/prefixed
+     * currency string still sums and sorts numerically.
+     */
+    format?: (value: unknown, row: Row) => string;
 };
 export type EntityValue = {
     name: string;
@@ -35,6 +74,8 @@ export type Row = {
     id: string;
 } & Record<string, any>;
 export type RecordsTableProps = {
+    /** Partial override of the chrome strings; see `recordsTableLabels`. */
+    labels?: RecordsTableLabelsInput;
     columns?: Column[];
     rows?: Row[];
     /** Controlled selection — omit for self-managed selection state. */
@@ -48,9 +89,98 @@ export type RecordsTableProps = {
     onOpenRecord?: (row: Row) => void;
     /** Called when a row's entity name is clicked — navigate to its full record page. */
     onOpenRecordPage?: (row: Row) => void;
+    /** Tone for `entity`/`reference` avatars: `"brand"` (uniform, today's
+     * measured Attio records-grid behaviour — the default) or `"hashed"` (a
+     * stable colour per name, matching what `DataTable`'s `avatarTone` offers).
+     * Entity avatars only — `TAG_TONES`/tag/status tone logic is untouched. */
+    avatarTone?: "brand" | "hashed";
     className?: string;
 };
 export declare function tagTone(t: string): string;
+type Agg = "none" | "count" | "filled" | "sum" | "avg" | "min" | "max";
+/**
+ * Every chrome string RecordsTable renders. Supplied as a PARTIAL map, so
+ * translating one menu item does not mean restating the other fifty; anything
+ * omitted keeps its English default from `recordsTableLabels`.
+ *
+ * The interpolated ones are formatters rather than templates because word
+ * order does not survive translation — "Sorted by Name +2" has no stable
+ * arrangement of its parts across languages (the same reason TableToolbar's
+ * triggers take formatters, #77).
+ */
+export type RecordsTableLabels = {
+    selectAll: string;
+    sort: string;
+    sortField: string;
+    sortDirection: string;
+    removeSort: string;
+    reorderSort: string;
+    addSort: string;
+    ascending: string;
+    descending: string;
+    noSorts: string;
+    learnSorting: string;
+    filter: string;
+    addFilter: string;
+    filterByField: string;
+    filterByPlaceholder: string;
+    filterValuePlaceholder: string;
+    selectCondition: string;
+    clearFilter: string;
+    addColumn: string;
+    columnLabel: string;
+    editColumnLabel: string;
+    hideFromView: string;
+    moveLeft: string;
+    moveRight: string;
+    sortAscending: string;
+    sortDescending: string;
+    newRecord: string;
+    createRecord: string;
+    createMore: string;
+    newButton: string;
+    more: string;
+    moreActions: string;
+    recordActions: string;
+    copy: string;
+    duplicate: string;
+    addToList: string;
+    inAList: string;
+    delete: string;
+    sendEmail: string;
+    exportCsv: string;
+    runWorkflow: string;
+    calculate: string;
+    emptyPlaceholder: string;
+    setRecordPlaceholder: string;
+    noRecords: string;
+    untitled: string;
+    /** Aggregation names, keyed by the aggregation. */
+    agg: Record<Agg, string>;
+    /** Filter operator names, keyed by the operator. */
+    op: Record<FilterOp, string>;
+    /** Title of the create dialog, given the entity column's label. */
+    newRecordTitle: (entity: string) => string;
+    /** Placeholder for a create-dialog field, given the field's label. */
+    setFieldPlaceholder: (field: string) => string;
+    /** Label for a newly added column, given how many columns exist. */
+    newColumnLabel: (index: number) => string;
+    /** The sort trigger, given the first sorted column and how many more. */
+    sortedBy: (first: string, extra: number) => string;
+    /** The filter trigger, given how many filters are active. */
+    filterCount: (active: number) => string;
+    /** The row count under the table. */
+    recordCount: (n: number) => string;
+    /** Heading above a filter chip's condition editor. */
+    conditionTitle: (field: string) => string;
+};
+export declare const recordsTableLabels: RecordsTableLabels;
+/** Partial override of any chrome string; the two keyed maps nest. */
+export type RecordsTableLabelsInput = Partial<Omit<RecordsTableLabels, "agg" | "op">> & {
+    agg?: Partial<Record<Agg, string>>;
+    op?: Partial<Record<FilterOp, string>>;
+};
+type FilterOp = "contains" | "is" | "isnot" | "empty" | "notempty";
 /**
  * Attio-style record grid — fully featured. Toolbar (search / sort status /
  * count / New), sticky checkbox + entity columns, 36px rows, typed cells,
@@ -59,7 +189,7 @@ export declare function tagTone(t: string): string;
  * and a floating bulk-action bar (delete / deselect) when rows are selected.
  * Selection can be controlled via `selectedIds`/`onSelectionChange`.
  */
-export declare function RecordsTable({ columns: columnsProp, rows: rowsProp, selectedIds, onSelectionChange, showNew, allowAddColumn, onOpenRecord, onOpenRecordPage, className, }: RecordsTableProps): React.JSX.Element;
+export declare function RecordsTable({ labels, columns: columnsProp, rows: rowsProp, selectedIds, onSelectionChange, showNew, allowAddColumn, onOpenRecord, onOpenRecordPage, avatarTone, className, }: RecordsTableProps): React.JSX.Element;
 export declare const defaultColumns: Column[];
 export declare const defaultRows: Row[];
 export {};

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

@@ -0,0 +1,10 @@
+/**
+ * The record tag/chip, measured from Attio: 22px tall, `padding: 0 4px`,
+ * `border-radius: ${c.radius.chip}`, 14px/20px at weight 500, and a 1px inset ring in the
+ * tone's colour.
+ *
+ * Shared because RecordsTable and RecordPanel render the *same* chip. It used
+ * to be pasted into both recipes, and the two copies had already started to
+ * drift — adding the measured inset ring meant patching the same rules twice.
+ */
+export declare const recordTagCss: string;