@crisp-ui-kit/crisp 0.1.0 → 0.5.0

package/dist/tabletoolbar.css

@@ -0,0 +1,70 @@
+.tabletoolbar {
+  
+    display: contents; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & * { box-sizing: border-box; }
+    & .tabletoolbar-toolbar { display: flex; align-items: center; gap: var(--space-1-5); padding: 0 var(--space-3) var(--space-2); }
+    & .tabletoolbar-search { display: flex; align-items: center; gap: var(--space-1-5); height: var(--size-row); padding: 0 var(--space-2-5); border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--fg-muted); }
+    & .tabletoolbar-search svg { flex-shrink: 0; }
+    & .tabletoolbar-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--text-md); color: var(--fg-primary); width: 180px; }
+    & .tabletoolbar-search input::placeholder { color: var(--fg-muted); }
+    & .tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--size-row); margin: 0; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); color: var(--fg-primary); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; transition: background-color .12s; }
+    & .tabletoolbar-tool:hover { background: var(--bg-raised); }
+    & .tabletoolbar-tool svg { flex-shrink: 0; color: var(--fg-muted); }
+    & .tabletoolbar-tool--active { background: var(--bg-raised); }
+    & .tabletoolbar-tool--ghost { box-shadow: none; background: color-mix(in srgb, var(--fg-primary) 3%, transparent); color: var(--fg-muted); }
+    & .tabletoolbar-tool--ghost:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); }
+    & .tabletoolbar-toolgroup { position: relative; display: inline-flex; }
+    & .tabletoolbar-menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 30; min-width: 232px; padding: var(--space-1); border-radius: var(--radius-lg); background: var(--bg-popover); box-shadow: inset 0 0 0 1px var(--ring-popover), 0 0 0 1px var(--shadow-popover1), 0 4px 8px -4px var(--shadow-popover2), 0 4px 12px -2px var(--shadow-popover3); display: flex; flex-direction: column; gap: var(--space-px); transform-origin: top; opacity: 1; transform: none; transition: opacity .13s ease, transform .13s ease; }
+    & .tabletoolbar-menu { @starting-style { opacity: 0; transform: scale(0.96); } }
+    & .tabletoolbar-menu-head { padding: var(--space-1) var(--space-2) var(--space-0-5); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); }
+    & .tabletoolbar-sortpop { min-width: 460px; overflow: visible; padding: var(--space-1-5); gap: var(--space-1); }
+    & .tabletoolbar-sort-empty { padding: var(--space-1) var(--space-1) var(--space-2); font-size: var(--text-md); color: var(--fg-muted); }
+    & .tabletoolbar-sort-row { display: flex; align-items: center; gap: var(--space-1-5); }
+    & .tabletoolbar-sort-grip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 28px; flex-shrink: 0; margin-right: calc(-1 * var(--space-1)); padding: 0; border: none; background: none; color: var(--fg-muted); cursor: grab; }
+    & .tabletoolbar-sort-grip:active { cursor: grabbing; }
+    & .tabletoolbar-sort-grip:hover { color: var(--fg-primary); }
+    & .tabletoolbar-sort-optlabel { display: inline-flex; align-items: center; gap: var(--space-1-5); min-width: 0; }
+    & .tabletoolbar-sort-optlabel svg { flex-shrink: 0; color: var(--fg-muted); }
+    & .tabletoolbar-sort-field { flex: 1; min-width: 0; }
+    & .tabletoolbar-sort-dir { width: 136px; flex-shrink: 0; }
+    & .tabletoolbar-sort-field .select-trigger, & .tabletoolbar-sort-dir .select-trigger { height: 28px; padding-right: var(--space-1); }
+    & .tabletoolbar-sort-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted); cursor: pointer; transition: background-color .12s, color .12s; }
+    & .tabletoolbar-sort-remove:hover { background: var(--bg-raised); color: var(--fg-primary); }
+    & .tabletoolbar-sort-addrow { display: flex; padding: var(--space-0-5) 0; }
+    & .tabletoolbar-sort-add { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 28px; padding: 0 var(--space-2) 0 var(--space-1-5); margin: 0; border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-regular); color: var(--fg-primary); cursor: pointer; transition: background-color .12s; }
+    & .tabletoolbar-sort-add:hover { background: var(--bg-raised); }
+    & .tabletoolbar-sort-add svg { flex-shrink: 0; color: var(--fg-muted); }
+    & .tabletoolbar-sort-foot { display: flex; padding: var(--space-1-5) var(--space-1) var(--space-0-5); }
+    & .tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-lg); color: color-mix(in srgb, var(--fg-primary) 63%, transparent); text-decoration: none; }
+    & .tabletoolbar-sort-learn svg { flex-shrink: 0; }
+    & .tabletoolbar-sort-learn:hover { color: var(--fg-primary); }
+    & .tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--size-row); margin: 0; padding: 0 var(--space-2); border: none; background: none; border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); text-align: left; cursor: pointer; }
+    & .tabletoolbar-menu-item:hover { background: var(--bg-raised); }
+    & .tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
+    & .tabletoolbar-menu-item:disabled:hover { background: none; }
+    & .tabletoolbar-menu-item svg { flex-shrink: 0; color: var(--fg-muted); }
+    & .tabletoolbar-menu-item[data-on] svg { color: var(--bg-brand-solid); }
+    & .tabletoolbar-menu-item .tabletoolbar-menu-check { margin-left: auto; }
+    & .tabletoolbar-menu-input { height: var(--size-row); margin: var(--space-0-5); padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-subtle); background: var(--bg-surface); font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); outline: none; }
+    & .tabletoolbar-menu-sep { height: 1px; background: var(--border-subtle); margin: var(--space-0-5) 0; }
+    & .tabletoolbar-menu--up { top: auto; bottom: calc(100% + var(--space-1)); transform-origin: bottom; }
+    & .tabletoolbar-menu--right { left: auto; right: 0; }
+    & .tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
+    & .tabletoolbar-menu--hdr { min-width: 200px; }
+    & .tabletoolbar-menu-item--danger { color: var(--bg-danger); }
+    & .tabletoolbar-menu-item--danger svg { color: var(--bg-danger); }
+    & .tabletoolbar-menu-item--danger:hover { background: color-mix(in srgb, var(--bg-danger) 10%, transparent); }
+    & .tabletoolbar-menu-check { margin-left: auto; color: var(--bg-brand-solid); }
+    & .tabletoolbar-fchip { display: inline-flex; align-items: center; height: var(--size-row); padding-right: var(--space-1); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-default); background: var(--bg-surface); font-size: var(--text-md); color: var(--fg-primary); white-space: nowrap; }
+    & .tabletoolbar-fchip-main { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 100%; margin: 0; padding: 0 var(--space-1) 0 var(--space-2); border: none; background: none; font-family: inherit; font-size: var(--text-md); color: var(--fg-primary); cursor: pointer; }
+    & .tabletoolbar-fchip-field { font-weight: var(--weight-medium); }
+    & .tabletoolbar-fchip-op { color: var(--fg-muted); }
+    & .tabletoolbar-fchip-val { font-weight: var(--weight-medium); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
+    & .tabletoolbar-fchip-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: var(--radius-sm); background: none; color: var(--fg-muted); cursor: pointer; }
+    & .tabletoolbar-fchip-x:hover { background: color-mix(in srgb, var(--fg-primary) 10%, transparent); color: var(--fg-primary); }
+    & .tabletoolbar-spacer { flex: 1; }
+    & .tabletoolbar-count { font-size: var(--text-md); color: var(--fg-muted); }
+    & .tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--size-row); padding: 0 var(--space-2-5); border: none; border-radius: var(--radius-md); background: var(--bg-brand-solid); color: var(--fg-on-brand); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; transition: background-color .12s; }
+    & .tabletoolbar-new:hover { background: var(--bg-brand-solid-pressed); }
+  
+}

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/bulkbar/bulkbar.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+export type BulkBarProps = {
+    /** Selected count — renders the leading "N selected" pill when provided. */
+    count?: number;
+    /** Called when the count pill (its ✕) is pressed — clear the selection. */
+    onClear?: () => void;
+    /** Word after the count in the pill (default "selected"). */
+    countLabel?: string;
+    /** Action buttons — usually `<BulkBarButton>`s and a `<Menu>` overflow. */
+    children?: React.ReactNode;
+    className?: string;
+};
+/**
+ * A floating bulk-action bar. Rises from the bottom-centre of its nearest
+ * positioned ancestor when a selection is active; render it conditionally
+ * (e.g. `count > 0 && <BulkBar …/>`). Measured from Attio's records table.
+ */
+export declare function BulkBar({ count, onClear, countLabel, children, className, }: BulkBarProps): React.JSX.Element;
+export declare namespace BulkBar {
+    var displayName: string;
+}
+export type BulkBarButtonProps = React.ComponentPropsWithoutRef<"button"> & {
+    icon?: React.ReactNode;
+    /** Danger styling (e.g. a destructive "Delete"). */
+    danger?: boolean;
+};
+/** A styled action button for use inside a `<BulkBar>` (or as a `<Menu>` trigger). */
+export declare const BulkBarButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    icon?: React.ReactNode;
+    /** Danger styling (e.g. a destructive "Delete"). */
+    danger?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;

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

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

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

@@ -0,0 +1,2 @@
+export { BulkBar, BulkBarButton, type BulkBarButtonProps, type BulkBarProps, } from "./bulkbar";
+export { bulkbarRecipe } from "./bulkbar.recipe";

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

@@ -4,11 +4,13 @@ export * from "./components/avatargroup";
 export * from "./components/badge";
 export * from "./components/barchart";
 export * from "./components/breadcrumb";
+export * from "./components/bulkbar";
 export * from "./components/button";
 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";
@@ -31,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;
@@ -42,10 +78,17 @@ export type RecordsTableProps = {
     onSelectionChange?: (ids: string[]) => void;
     /** Show the toolbar's "New" button (hide it when the page provides its own). */
     showNew?: boolean;
+    /** Allow adding columns via the trailing "+" header button (default true). */
+    allowAddColumn?: boolean;
     /** Called when a row's open (↗) button is pressed — opens a record panel. */
     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;
@@ -57,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, 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";