@crisp-ui-kit/crisp 0.2.0 → 0.5.0

package/dist/tabletoolbar.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface TabletoolbarVariants {
+
+}
+
+export declare const tabletoolbarRecipe: RecipeFn<{  }>;

package/dist/tokens.css

@@ -6,6 +6,18 @@
   --bg-raised: #f4f4f5;
   --border-default: #e4e4e7;
   --border-subtle: #eeeff1;
+  --ring-neutral: transparent;
+  --bg-tile-active: #ffffff;
+  --shadow-tile-active: rgba(0,0,0,0.04);
+  --bg-overlay-frost: #ffffff;
+  --shadow-overlay1: rgba(28,40,64,0.12);
+  --shadow-overlay2: rgba(28,40,64,0.16);
+  --shadow-overlay3: rgba(28,40,64,0.16);
+  --bg-popover: #ffffff;
+  --ring-popover: rgba(0,0,0,0);
+  --shadow-popover1: rgba(28,40,64,0.04);
+  --shadow-popover2: rgba(28,40,64,0.12);
+  --shadow-popover3: rgba(24,41,75,0.16);
   --fg-primary: #101112;
   --fg-muted: #71717a;
   --bg-danger: #e5484d;
@@ -25,6 +37,18 @@
   --bg-raised: #101112;
   --border-default: #212224;
   --border-subtle: #1c1d1f;
+  --ring-neutral: #212224;
+  --bg-tile-active: #101112;
+  --shadow-tile-active: rgba(0,0,0,0);
+  --bg-overlay-frost: #1c1d1f;
+  --shadow-overlay1: rgba(0,0,0,0.48);
+  --shadow-overlay2: rgba(0,0,0,0.64);
+  --shadow-overlay3: rgba(0,0,0,0);
+  --bg-popover: #17181a;
+  --ring-popover: #212224;
+  --shadow-popover1: rgba(0,0,0,0.16);
+  --shadow-popover2: rgba(0,0,0,0.24);
+  --shadow-popover3: rgba(0,0,0,0.32);
   --fg-primary: #f5f5f5;
   --fg-muted: #9a9aa2;
   --bg-danger: #ff5a5f;

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

@@ -0,0 +1,98 @@
+import * as React from "react";
+type IconType = React.ComponentType<{
+    size?: number;
+    strokeWidth?: number;
+}>;
+export type EntityValue = {
+    name: string;
+    avatar?: string;
+};
+export type DataCellType = "text" | "entity" | "tags" | "status" | "date" | "number" | "currency";
+export type DataTableColumn<T> = {
+    key: string;
+    header: React.ReactNode;
+    /** Built-in rich renderer: entity (avatar+name), tags (colour pills), status
+     * (dot), date, number, currency. Overridden by `render`. */
+    type?: DataCellType;
+    /** A leading field-type icon in the header (matches RecordsTable). */
+    icon?: IconType;
+    /** Currency symbol for `currency` columns (default "$"). */
+    symbol?: string;
+    /** Allow drag-to-resize on this column (default true). */
+    resizable?: boolean;
+    /** Tone overrides for `status`/`tags` values (else a stable colour per value). */
+    tones?: Record<string, string>;
+    /** Enable click-to-sort on this column's header. */
+    sortable?: boolean;
+    /** Exclude this column from the search filter (default: included). */
+    filterable?: boolean;
+    /** Allow inline editing (click the cell → text input → Enter/blur commits). */
+    editable?: boolean;
+    align?: "left" | "right" | "center";
+    width?: number;
+    /** Custom cell renderer. */
+    render?: (value: unknown, row: T) => React.ReactNode;
+    /** Derive the sort/filter/display value (defaults to `row[key]`). */
+    accessor?: (row: T) => string | number;
+    /** Transform the value into a display string (locale formatting, masking, a
+     * unit suffix, …); the result still flows through the built-in type
+     * renderer, so a `number`/`currency` column keeps its alignment + chrome.
+     * Precedence: `render` (full custom node) beats `format` (value string)
+     * beats the built-in type renderer. Display-only — sorting and filtering
+     * use the raw/`accessor` value, never the formatted string. */
+    format?: (value: unknown, row: T) => string;
+    /** Footer summary for this column (shown when any column supplies one). */
+    summary?: (rows: T[]) => React.ReactNode;
+};
+export type SortState = {
+    key: string;
+    dir: "asc" | "desc";
+};
+export type DataTableProps<T extends {
+    id: string;
+}> = {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    /** Show a leading selection column with a select-all header checkbox. */
+    selectable?: boolean;
+    selectedIds?: string[];
+    onSelectionChange?: (ids: string[]) => void;
+    /** Controlled sort (omit for self-managed; seed with `defaultSort`). */
+    sort?: SortState | null;
+    defaultSort?: SortState;
+    onSortChange?: (s: SortState | null) => void;
+    /** Show a search box that filters rows across filterable columns. */
+    filterable?: boolean;
+    searchPlaceholder?: string;
+    /** Commit handler for inline edits. */
+    onEdit?: (id: string, key: string, value: string) => void;
+    /** Sticky the first column(s) with a horizontal scroll shadow (default true). */
+    stickyFirst?: boolean;
+    /** Tone for `entity`-type avatars: `"brand"` (uniform, matches Attio's real
+     * records grid) or `"hashed"` (a stable colour per name — the tone `tags`/
+     * `status` pills already use, and entity's previous default). */
+    avatarTone?: "brand" | "hashed";
+    /** Card-style bordered surface (default) or full-bleed edge-to-edge, like
+     * RecordsTable. Passed through to the underlying `Table`. */
+    surface?: "card" | "bleed";
+    /** Row hover affordance + `onRowClick`. */
+    interactive?: boolean;
+    onRowClick?: (row: T) => void;
+    /** Renders a trailing add-row button ("New record") when provided. */
+    onAddRow?: () => void;
+    addRowLabel?: React.ReactNode;
+    /** Rendered in the body when there are no rows. */
+    empty?: React.ReactNode;
+    /** Show the "N of M" count on the right of the toolbar (default true). */
+    showCount?: boolean;
+    /** Extra toolbar content (e.g. buttons) on the right of the toolbar. */
+    toolbar?: React.ReactNode;
+    className?: string;
+};
+export declare function DataTable<T extends {
+    id: string;
+}>({ columns, data, selectable, selectedIds, onSelectionChange, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder, onEdit, stickyFirst, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel, empty, showCount, toolbar, className, }: DataTableProps<T>): React.JSX.Element;
+export declare namespace DataTable {
+    var displayName: string;
+}
+export {};

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

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

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

@@ -0,0 +1,2 @@
+export { DataTable, type DataTableColumn, type DataTableProps, type SortState, } from "./datatable";
+export { datatableRecipe } from "./datatable.recipe";

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

@@ -17,6 +17,8 @@ export type SelectProps = {
     placeholder?: string;
     /** `ghost` is borderless until hover — for inline selects (e.g. sort rows). */
     variant?: "default" | "ghost";
+    /** `full` (default) fills its container; `auto` sizes to content. */
+    width?: "full" | "auto";
     /** Show a search field at the top of the list that filters options (Linear/cmdk style). */
     searchable?: boolean;
     searchPlaceholder?: string;
@@ -32,7 +34,7 @@ export type SelectProps = {
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export declare function Select({ options, value, defaultValue, onValueChange, placeholder, variant, searchable, searchPlaceholder, disabled, className, "aria-label": ariaLabel, id, }: SelectProps): React.JSX.Element;
+export declare function Select({ options, value, defaultValue, onValueChange, placeholder, variant, width, searchable, searchPlaceholder, disabled, className, "aria-label": ariaLabel, id, }: SelectProps): React.JSX.Element;
 export declare namespace Select {
     var displayName: string;
 }

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

@@ -3,18 +3,30 @@ declare const config: import("../..").RecipeConfig<{
         default: string;
         ghost: string;
     };
+    width: {
+        full: string;
+        auto: string;
+    };
 }>;
 export declare const selectRecipe: import("../..").RecipeFn<{
     variant: {
         default: string;
         ghost: string;
     };
+    width: {
+        full: string;
+        auto: string;
+    };
 }> & {
     config: import("../..").RecipeConfig<{
         variant: {
             default: string;
             ghost: string;
         };
+        width: {
+            full: string;
+            auto: string;
+        };
     }>;
 };
 export default config;

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

@@ -12,13 +12,18 @@ export type StatCardProps = {
     deltaSuffix?: string;
     /** Caption after the delta (e.g. "vs last month"). */
     caption?: React.ReactNode;
+    /** Opt-in bordered card chrome (padding + border + radius), for use
+     * standalone instead of hand-wrapping in `<Card><CardBody>`. Default
+     * `false` — StatCard renders bare, as measured (pair with `Card` yourself
+     * for the Reports grid look). */
+    card?: boolean;
     className?: string;
 };
 /**
  * A single-metric KPI tile — measured from Attio's Reports number/insight cards.
  * Label, a large value, and an optional up/down delta pill with a caption.
  */
-export declare function StatCard({ label, icon, value, delta, deltaSuffix, caption, className, }: StatCardProps): React.JSX.Element;
+export declare function StatCard({ label, icon, value, delta, deltaSuffix, caption, card, className, }: StatCardProps): React.JSX.Element;
 export declare namespace StatCard {
     var displayName: string;
 }

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

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

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

@@ -0,0 +1,2 @@
+export { Table, TableBody, TableCaption, TableCell, type TableCellAlign, type TableCellProps, TableFooter, TableHead, TableHeader, type TableHeadProps, type TableProps, TableRow, } from "./table";
+export { tableRecipe } from "./table.recipe";

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+import type { VariantProps } from "../../core";
+import { tableRecipe } from "./table.recipe";
+export type TableProps = React.ComponentPropsWithoutRef<"table"> & VariantProps<typeof tableRecipe> & {
+    /** Class for the outer bordered wrapper (the recipe root). */
+    wrapperClassName?: string;
+    /** Props spread onto the horizontally-scrollable container (for sticky-column shadows). */
+    scrollProps?: React.ComponentPropsWithoutRef<"div"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    };
+};
+/**
+ * A composable data table. Wraps `<table>` in a horizontally scrollable
+ * surface — `surface="card"` (default) bordered + rounded, `surface="bleed"`
+ * edge-to-edge like RecordsTable's full-page grid. Compose with
+ * `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`,
+ * `TableCell`, and `TableCaption`.
+ */
+export declare const Table: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
+    interactive: {
+        true: string;
+        false: string;
+    };
+    surface: {
+        card: string;
+        bleed: string;
+    };
+}>> & {
+    /** Class for the outer bordered wrapper (the recipe root). */
+    wrapperClassName?: string;
+    /** Props spread onto the horizontally-scrollable container (for sticky-column shadows). */
+    scrollProps?: React.ComponentPropsWithoutRef<"div"> & {
+        ref?: React.Ref<HTMLDivElement>;
+    };
+} & React.RefAttributes<HTMLTableElement>>;
+export declare const TableHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableRow: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
+export type TableCellAlign = "left" | "right" | "center";
+export type TableHeadProps = React.ComponentPropsWithoutRef<"th"> & {
+    align?: TableCellAlign;
+};
+export declare const TableHead: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
+    align?: TableCellAlign;
+} & React.RefAttributes<HTMLTableCellElement>>;
+export type TableCellProps = React.ComponentPropsWithoutRef<"td"> & {
+    align?: TableCellAlign;
+};
+export declare const TableCell: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
+    align?: TableCellAlign;
+} & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableCaption: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLTableCaptionElement>>;

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

@@ -0,0 +1,21 @@
+declare const config: import("../..").RecipeConfig<{
+    interactive: {
+        true: string;
+        false: string;
+    };
+    surface: {
+        card: string;
+        bleed: string;
+    };
+}>;
+export declare const tableRecipe: import("../..").RecipeFn<{
+    interactive: {
+        true: string;
+        false: string;
+    };
+    surface: {
+        card: string;
+        bleed: string;
+    };
+}>;
+export default config;

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

@@ -0,0 +1,2 @@
+export * from "./tabletoolbar";
+export { tabletoolbarRecipe } from "./tabletoolbar.recipe";

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

@@ -0,0 +1,2 @@
+export declare const toolbarChromeHead: (p: string) => string;
+export declare const toolbarChromeBody: (p: string) => string;

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

@@ -0,0 +1,63 @@
+import * as React from "react";
+type IconType = React.ComponentType<{
+    size?: number;
+    strokeWidth?: number;
+}>;
+export type SortDir = "asc" | "desc";
+export type ToolbarSort = {
+    key: string;
+    dir: SortDir;
+};
+export type ToolbarFilterOp = "contains" | "is" | "isnot" | "empty" | "notempty";
+export type ToolbarFilter = {
+    id: string;
+    key: string;
+    op: ToolbarFilterOp;
+    value: string;
+};
+export type TableToolbarColumn = {
+    key: string;
+    label: string;
+    /** Leading field-type icon, shown in the field pickers. */
+    icon?: IconType;
+};
+export type TableToolbarProps = {
+    /** The fields that can be sorted and filtered on. */
+    columns: TableToolbarColumn[];
+    /** Controlled sorts. Omit to let the toolbar manage them internally. */
+    sorts?: ToolbarSort[];
+    defaultSorts?: ToolbarSort[];
+    onSortsChange?: (sorts: ToolbarSort[]) => void;
+    /** Controlled filter conditions. Omit for internal state. */
+    filters?: ToolbarFilter[];
+    defaultFilters?: ToolbarFilter[];
+    onFiltersChange?: (filters: ToolbarFilter[]) => void;
+    /** Right-aligned count, e.g. `${rows.length} records`. */
+    count?: React.ReactNode;
+    /** Right-aligned actions after the count (a "New" button, say). */
+    children?: React.ReactNode;
+    /** Shows a "Learn about sorting" link in the sort popover when set. */
+    helpHref?: string;
+    className?: string;
+};
+/**
+ * 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
+ * display string, so a grouped-thousands "$1,200" still matches "1200".
+ */
+export declare function applyFilters<T>(rows: T[], filters: ToolbarFilter[], get?: (row: T, key: string) => unknown): T[];
+/**
+ * Applies a toolbar's sorts to any row array, in order — sort 0 wins, later
+ * sorts break ties. Numbers compare numerically, everything else by locale.
+ */
+export declare function applySorts<T>(rows: T[], sorts: ToolbarSort[], get?: (row: T, key: string) => unknown): T[];
+/**
+ * Attio's table toolbar as a standalone primitive: the Sort and Filter
+ * controls, their menus, the sort-condition rows and the filter chips.
+ *
+ * `RecordsTable` renders this same measured chrome internally; this is the
+ * composable version, to put above `DataTable` or any table of your own. Pair
+ * it with `applyFilters` / `applySorts` to turn its state into rows.
+ */
+export declare function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, }: TableToolbarProps): React.JSX.Element;
+export {};

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

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

package/dist/types/index.d.ts

@@ -10,6 +10,7 @@ export * from "./components/callout";
 export * from "./components/card";
 export * from "./components/checkbox";
 export * from "./components/contextmenu";
+export * from "./components/datatable";
 export * from "./components/datepicker";
 export * from "./components/dialog";
 export * from "./components/divider";
@@ -32,6 +33,8 @@ 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";

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

@@ -26,6 +26,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;
@@ -48,6 +84,11 @@ 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;
@@ -59,7 +100,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({ 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/sidebar/index.d.ts

@@ -1,2 +1,2 @@
-export { Sidebar, type SidebarProps } from "./sidebar";
+export { ATTIO_SIDEBAR_CHATS_SECTION, ATTIO_SIDEBAR_FOOTER, ATTIO_SIDEBAR_ITEMS, ATTIO_SIDEBAR_LISTS_SECTION, ATTIO_SIDEBAR_RECORDS_SECTION, ATTIO_SIDEBAR_WORKSPACE, Sidebar, type SidebarFooter, type SidebarListsSection, type SidebarNavItem, type SidebarProps, type SidebarRecordItem, type SidebarRecordsSection, type SidebarSection, type SidebarWorkspace, } from "./sidebar";
 export { sidebarRecipe } from "./sidebar.recipe";

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

@@ -1,11 +1,96 @@
 import * as React from "react";
+import type { AvatarProps } from "../../components/avatar";
+type IconProps = {
+    className?: string;
+};
+/** A row in the main nav, or in a section's item list (Chats, etc). */
+export type SidebarNavItem = {
+    label: string;
+    /** 16px icon component, rendered `<Icon />`. */
+    icon: React.ComponentType<IconProps>;
+    active?: boolean;
+    trailing?: React.ReactNode;
+};
+/** A row in the Records section — rendered as a tinted 20px glyph avatar. */
+export type SidebarRecordItem = {
+    label: string;
+    tone: NonNullable<AvatarProps["tone"]>;
+    /** 12px glyph, rendered `<Glyph />` inside the tone avatar. */
+    glyph: React.ComponentType;
+};
+/** The workspace switcher at the top of the sidebar. */
+export type SidebarWorkspace = {
+    name: string;
+    /** Avatar initial/letter. */
+    avatarLabel: string;
+    avatarTone?: NonNullable<AvatarProps["tone"]>;
+};
+/** A collapsible section built from nav-item rows (main nav shape is used, less the divider). */
+export type SidebarSection = {
+    label: string;
+    items: SidebarNavItem[];
+};
+/** The Records section — same shape as SidebarSection but with glyph-avatar rows. */
+export type SidebarRecordsSection = {
+    label: string;
+    items: SidebarRecordItem[];
+};
+/** The Lists section — has no item list of its own, just the "+ New list" affordance. */
+export type SidebarListsSection = {
+    label: string;
+    newListLabel: string;
+};
+/** Footer copy: the onboarding pill, the invite row, and the trial banner. */
+export type SidebarFooter = {
+    gettingStartedLabel: string;
+    inviteLabel: string;
+    trialText: string;
+    trialActionLabel: string;
+};
 export type SidebarProps = React.ComponentPropsWithoutRef<"nav"> & {
     asChild?: boolean;
     /** Called when the collapse-panel button in the header is pressed. */
     onToggleCollapse?: () => void;
+    /** Workspace switcher content. Defaults to the measured Attio workspace. */
+    workspace?: SidebarWorkspace;
+    /** Main nav rows (Home, Tasks, …). Defaults to the measured Attio nav. */
+    items?: SidebarNavItem[];
+    /** The Records section (label + glyph-avatar rows). */
+    recordsSection?: SidebarRecordsSection;
+    /** The Lists section (label + "new list" affordance label). */
+    listsSection?: SidebarListsSection;
+    /** The Chats section (label + nav-item rows). */
+    chatsSection?: SidebarSection;
+    /** Footer copy (onboarding pill, invite row, trial banner). */
+    footer?: SidebarFooter;
 };
+/** The measured Attio workspace switcher — the default `workspace` prop. */
+export declare const ATTIO_SIDEBAR_WORKSPACE: SidebarWorkspace;
+/** The measured Attio main nav — the default `items` prop. */
+export declare const ATTIO_SIDEBAR_ITEMS: SidebarNavItem[];
+/** The measured Attio Records section — the default `recordsSection` prop. */
+export declare const ATTIO_SIDEBAR_RECORDS_SECTION: SidebarRecordsSection;
+/** The measured Attio Lists section — the default `listsSection` prop. */
+export declare const ATTIO_SIDEBAR_LISTS_SECTION: SidebarListsSection;
+/** The measured Attio Chats section — the default `chatsSection` prop. */
+export declare const ATTIO_SIDEBAR_CHATS_SECTION: SidebarSection;
+/** The measured Attio footer copy — the default `footer` prop. */
+export declare const ATTIO_SIDEBAR_FOOTER: SidebarFooter;
 export declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     asChild?: boolean;
     /** Called when the collapse-panel button in the header is pressed. */
     onToggleCollapse?: () => void;
+    /** Workspace switcher content. Defaults to the measured Attio workspace. */
+    workspace?: SidebarWorkspace;
+    /** Main nav rows (Home, Tasks, …). Defaults to the measured Attio nav. */
+    items?: SidebarNavItem[];
+    /** The Records section (label + glyph-avatar rows). */
+    recordsSection?: SidebarRecordsSection;
+    /** The Lists section (label + "new list" affordance label). */
+    listsSection?: SidebarListsSection;
+    /** The Chats section (label + nav-item rows). */
+    chatsSection?: SidebarSection;
+    /** Footer copy (onboarding pill, invite row, trial banner). */
+    footer?: SidebarFooter;
 } & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/tokens/contract.d.ts

@@ -8,6 +8,18 @@ export declare const contract: MapLeafNodes<{
     bgRaised: "gray50";
     borderDefault: "line200";
     borderSubtle: "line100";
+    ringNeutral: "ringNeutral";
+    bgTileActive: "tileActive";
+    shadowTileActive: "tileActiveShadow";
+    bgOverlayFrost: "overlayFrost";
+    shadowOverlay1: "shadowOverlay1";
+    shadowOverlay2: "shadowOverlay2";
+    shadowOverlay3: "shadowOverlay3";
+    bgPopover: "popoverBg";
+    ringPopover: "ringPopover";
+    shadowPopover1: "shadowPopover1";
+    shadowPopover2: "shadowPopover2";
+    shadowPopover3: "shadowPopover3";
     fgPrimary: "gray900";
     fgMuted: "gray400";
     bgDanger: "red600";