@crisp-ui-kit/crisp 0.2.0 → 0.7.0

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

@@ -1,7 +1,10 @@
 import * as React from "react";
 import type { VariantProps } from "../../core";
 import { inputRecipe } from "./input.recipe";
-export type InputProps = Omit<React.ComponentPropsWithoutRef<"input">, "size"> & VariantProps<typeof inputRecipe>;
+export type InputProps = Omit<React.ComponentPropsWithoutRef<"input">, "size"> & VariantProps<typeof inputRecipe> & {
+    /** Class for the wrapper that draws the field chrome and focus ring. */
+    className?: string;
+};
 export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size"> & VariantProps<import("../..").RecipeFn<{
     size: {
         medium: string;
@@ -29,4 +32,7 @@ export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
             fontSize: string;
         };
     };
-}> & React.RefAttributes<HTMLInputElement>>;
+}> & {
+    /** Class for the wrapper that draws the field chrome and focus ring. */
+    className?: string;
+} & React.RefAttributes<HTMLInputElement>>;

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

@@ -3,7 +3,7 @@ export type LinePoint = {
     label: string;
     value: number;
 };
-export type LineChartProps = {
+export type LineChartProps = Omit<React.ComponentPropsWithoutRef<"div">, "color"> & {
     data: LinePoint[];
     /** Overall height in px (default 240). */
     height?: number;
@@ -19,6 +19,8 @@ export type LineChartProps = {
     dots?: boolean;
     /** Formats axis ticks and point values. */
     format?: (n: number) => string;
+    /** Pins the value-axis gutter width in px, overriding the width auto-derived from the longest tick label. */
+    yAxisWidth?: number;
     /** Category-axis title, shown centred below the labels. */
     xAxisTitle?: React.ReactNode;
     "aria-label"?: string;
@@ -29,7 +31,7 @@ export type LineChartProps = {
  * A stretched SVG line/area (non-scaling stroke keeps it crisp) over dashed
  * gridlines; dots are HTML so they stay round. `role="img"` with a summary.
  */
-export declare function LineChart({ data, height, max, ticks, color, area, dots, format, xAxisTitle, "aria-label": ariaLabel, className, }: LineChartProps): React.JSX.Element;
+export declare function LineChart({ data, height, max, ticks, color, area, dots, format, yAxisWidth, xAxisTitle, "aria-label": ariaLabel, className, ...rest }: LineChartProps): React.JSX.Element;
 export declare namespace LineChart {
     var displayName: string;
 }

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

@@ -1,2 +1,3 @@
 export { Menu, MenuCheckboxItem, type MenuCheckboxItemProps, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuSeparator, } from "./menu";
 export { menuRecipe } from "./menu.recipe";
+export { MENU_ITEM_SELECTOR, type UseMenuKeyboardOptions, useMenuKeyboard, } from "./menu-keyboard";

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+/**
+ * The elements a `role="menu"` may own, minus the disabled ones. Kept here so
+ * every menu surface in crisp agrees on what counts as an item.
+ */
+export declare const MENU_ITEM_SELECTOR: string;
+export type UseMenuKeyboardOptions = {
+    /** Whether the menu surface is currently rendered. */
+    open: boolean;
+    /** Close it. Callers that have a trigger should restore focus to it here. */
+    close: () => void;
+    /**
+     * Close it WITHOUT moving focus, for Tab — the browser is already taking
+     * focus somewhere else, and yanking it back to the trigger first would send
+     * the user to the wrong place.
+     */
+    dismiss?: () => void;
+    /** The element carrying `role="menu"`. */
+    contentRef: React.RefObject<HTMLElement | null>;
+};
+/**
+ * The WAI-ARIA menu keyboard model: focus the first item on open, ↑/↓ to move
+ * (wrapping), Home/End to jump, printable characters for typeahead, Esc to
+ * close, Tab to dismiss. Returns the `onKeyDown` to put on the menu element.
+ *
+ * Extracted from `Menu` so the table surfaces, which build their own popovers
+ * against measured positions, get the identical model instead of a second
+ * partial one.
+ */
+export declare function useMenuKeyboard({ open, close, dismiss, contentRef, }: UseMenuKeyboardOptions): {
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    items: () => HTMLElement[];
+};

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

@@ -5,6 +5,12 @@ export type MenuProps = {
     children: React.ReactNode;
     /** Align the menu to the start (left) or end (right) of the trigger. */
     align?: "start" | "end";
+    /** Controlled open state. Omit to let Menu manage it (see defaultOpen). */
+    open?: boolean;
+    /** Initially open, when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Fires with the next open state, controlled or not. */
+    onOpenChange?: (open: boolean) => void;
     className?: string;
     "aria-label"?: string;
 };
@@ -15,7 +21,7 @@ export type MenuProps = {
  * typeahead, Enter/Space select, Esc closes and returns focus to the trigger);
  * closes on outside click. Flips up / right-aligns when space is tight.
  */
-export declare function Menu({ trigger, children, align, className, "aria-label": ariaLabel, }: MenuProps): React.JSX.Element;
+export declare function Menu({ trigger, children, align, open: openProp, defaultOpen, onOpenChange, className, "aria-label": ariaLabel, }: MenuProps): React.JSX.Element;
 export declare namespace Menu {
     var displayName: string;
 }

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

@@ -5,10 +5,14 @@ export type MultiSelectOption = {
     /** Chip colour tone; falls back to a deterministic pastel per value. */
     tone?: string;
 };
-export type MultiSelectProps = {
+export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange"> & {
     options: MultiSelectOption[];
-    value: string[];
-    onValueChange: (value: string[]) => void;
+    /** Controlled value. Omit to let MultiSelect manage it (see defaultValue). */
+    value?: string[];
+    /** Initially selected values, when uncontrolled. */
+    defaultValue?: string[];
+    /** Fires with the next value on every toggle, controlled or not. */
+    onValueChange?: (value: string[]) => void;
     placeholder?: string;
     /** Show a filter field at the top of the list (default true). */
     searchable?: boolean;
@@ -23,7 +27,7 @@ export type MultiSelectProps = {
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-export declare function MultiSelect({ options, value, onValueChange, placeholder, searchable, searchPlaceholder, disabled, className, "aria-label": ariaLabel, }: MultiSelectProps): React.JSX.Element;
+export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder, searchable, searchPlaceholder, disabled, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
 export declare namespace MultiSelect {
     var displayName: string;
 }

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

@@ -7,7 +7,10 @@ export type PopoverProps = {
     /** Align the popover to the trigger's left (`start`) or right (`end`) edge. */
     align?: "start" | "end";
     /** Controlled open state. Omit to let the popover manage it. */
+    /** Controlled open state. Omit to let Popover manage it (see defaultOpen). */
     open?: boolean;
+    /** Initially open, when uncontrolled. */
+    defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     "aria-label"?: string;
     className?: string;
@@ -17,7 +20,7 @@ export type PopoverProps = {
  * content. Opens below the trigger (flipping up when there's no room),
  * closes on outside pointer-down and Escape. Controlled or self-managed.
  */
-export declare function Popover({ trigger, children, align, open: openProp, onOpenChange, "aria-label": ariaLabel, className, }: PopoverProps): React.JSX.Element;
+export declare function Popover({ trigger, children, align, open: openProp, defaultOpen, onOpenChange, "aria-label": ariaLabel, className, }: PopoverProps): React.JSX.Element;
 export declare namespace Popover {
     var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-export type ProgressProps = {
+export type ProgressProps = React.ComponentPropsWithoutRef<"div"> & {
     /** Current value. */
     value: number;
     /** Maximum value (default 100). */
@@ -13,7 +13,7 @@ export type ProgressProps = {
  * `segments` is set (the "Getting started 3/6" pattern). Reports its state via
  * `role="progressbar"` and the ARIA value attributes.
  */
-export declare function Progress({ value, max, segments, "aria-label": ariaLabel, className, }: ProgressProps): import("react").JSX.Element;
+export declare function Progress({ value, max, segments, "aria-label": ariaLabel, className, ...rest }: ProgressProps): import("react").JSX.Element;
 export declare namespace Progress {
     var displayName: string;
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-export type RadioGroupProps = {
+export type RadioGroupProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange"> & {
     /** Controlled value. Omit to let the group manage it (see defaultValue). */
     value?: string;
     defaultValue?: string;
@@ -17,7 +17,7 @@ export type RadioGroupProps = {
  * preview cards whose border turns brand when picked (the Theme picker). Arrow
  * keys move between options (roving focus). Controlled or uncontrolled.
  */
-export declare function RadioGroup({ value, defaultValue, onValueChange, variant, name, className, "aria-label": ariaLabel, children, }: RadioGroupProps): React.JSX.Element;
+export declare function RadioGroup({ value, defaultValue, onValueChange, variant, name, className, "aria-label": ariaLabel, children, ...rest }: RadioGroupProps): React.JSX.Element;
 export declare namespace RadioGroup {
     var displayName: string;
 }

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

@@ -0,0 +1,2 @@
+export { computeDragWidth, percentToWidth, ResizablePanel, type ResizablePanelHandleVariant, type ResizablePanelProps, type ResizablePanelSide, readStoredPercent, widthToPercent, writeStoredPercent, } from "./resizablepanel";
+export { resizablepanelRecipe } from "./resizablepanel.recipe";

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

@@ -0,0 +1,75 @@
+import * as React from "react";
+export type ResizablePanelSide = "left" | "right";
+export type ResizablePanelHandleVariant = "panel" | "column";
+/**
+ * Drag delta -> next width, in px, signed by which edge of the panel the
+ * handle drags from. A left-side panel's handle sits at its *right* edge, so
+ * dragging right (positive dx) grows it; a right-side panel's handle sits at
+ * its *left* edge, so dragging right shrinks it. Pure so drag math can be
+ * unit-tested without a DOM.
+ */
+export declare function computeDragWidth(startWidth: number, startX: number, clientX: number, side: ResizablePanelSide): number;
+/** width (px) -> percentage of the container's width. Pure, unrounded. */
+export declare function widthToPercent(width: number, containerWidth: number): number;
+/** percentage of the container's width -> width (px). Pure, unrounded. */
+export declare function percentToWidth(percent: number, containerWidth: number): number;
+type ReadableStorage = Pick<Storage, "getItem">;
+type WritableStorage = Pick<Storage, "setItem">;
+/**
+ * Reads a persisted width percentage, wrapped in try/catch: `localStorage`
+ * can throw (private browsing, storage disabled), and a resizable panel
+ * failing to *render* over a persistence error would be worse than the
+ * panel simply forgetting its width. `storage` defaults to
+ * `window.localStorage` and exists as a seam for tests — dropping the
+ * try/catch here is the exact failure this must catch.
+ */
+export declare function readStoredPercent(key: string, storage?: ReadableStorage): number | null;
+/** Writes a persisted width percentage, wrapped in try/catch — see {@link readStoredPercent}. */
+export declare function writeStoredPercent(key: string, percent: number, storage?: WritableStorage): void;
+export type ResizablePanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onResize"> & {
+    /** Which edge of its container the panel is anchored to (default "left"). */
+    side?: ResizablePanelSide;
+    /** Controlled width, in px. */
+    size?: number;
+    /** Initial width, in px, when uncontrolled (default 280). */
+    defaultSize?: number;
+    /** Fires with the final, CSS-clamped width once a drag ends. */
+    onSizeChange?: (size: number) => void;
+    /** `min-width` in px (default 200). */
+    min?: number;
+    /**
+     * `max-width` — a px number, or a raw CSS expression for callers that need
+     * Attio's real clamp, e.g. `max="min(60%, 100% - 350px)"`. Constraints are
+     * never re-applied in JS: the handler writes the unclamped drag width, and
+     * the browser's own `min-width`/`max-width` resolve the rendered size.
+     */
+    max?: number | string;
+    /**
+     * Layout model: "docked" (default) reserves flow width and sits in-line
+     * with a hairline border; "floating" takes the panel out of flow
+     * (`position: fixed`, an 8px gutter, r10, the measured floating shadow).
+     */
+    floating?: boolean;
+    /** Resize-handle geometry — "panel" (default) or "column" (table edges). */
+    handleVariant?: ResizablePanelHandleVariant;
+    /**
+     * Persist width as a percentage of the container under this key (matches
+     * Attio: a `%`, not px, so the panel keeps its proportion on resize).
+     * Only applies when `size` is uncontrolled.
+     */
+    storageKey?: string;
+    className?: string;
+    children?: React.ReactNode;
+};
+/**
+ * Attio's adjustable-panel primitive: a spacer that reserves layout width
+ * plus a panel that overlays it, so the panel can move between docked
+ * (in-flow) and floating (`position: fixed`, an overlay) without a reflow
+ * glitch. Drag the edge handle to resize; constraints are CSS `min-width`/
+ * `max-width`, never re-clamped in JS.
+ */
+export declare function ResizablePanel({ side, size, defaultSize, onSizeChange, min, max, floating, handleVariant, storageKey, className, children, ...rest }: ResizablePanelProps): React.JSX.Element;
+export declare namespace ResizablePanel {
+    var displayName: string;
+}
+export {};

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

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

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

@@ -7,7 +7,7 @@ export type SegmentedOption = {
     disabled?: boolean;
     "aria-label"?: string;
 };
-export type SegmentedProps = {
+export type SegmentedProps = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValue"> & {
     options: SegmentedOption[];
     /** Controlled value. Omit to let the control manage it (see defaultValue). */
     value?: string;
@@ -21,7 +21,7 @@ export type SegmentedProps = {
  * switcher. `role="radiogroup"` over `role="radio"` buttons with roving
  * tabindex and ←/→ (Home/End) keyboard selection.
  */
-export declare function Segmented({ options, value, defaultValue, onValueChange, "aria-label": ariaLabel, className, }: SegmentedProps): React.JSX.Element;
+export declare function Segmented({ options, value, defaultValue, onValueChange, "aria-label": ariaLabel, className, ...rest }: SegmentedProps): React.JSX.Element;
 export declare namespace Segmented {
     var displayName: string;
 }

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

@@ -8,7 +8,7 @@ export type SelectOption = {
     color?: string;
     disabled?: boolean;
 };
-export type SelectProps = {
+export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange"> & {
     options: SelectOption[];
     /** Controlled value. Omit to let Select manage it (see defaultValue). */
     value?: string;
@@ -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, ...rest }: 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/skeleton/skeleton.d.ts

@@ -1,4 +1,4 @@
-export type SkeletonProps = {
+export type SkeletonProps = React.ComponentPropsWithoutRef<"span"> & {
     width?: number | string;
     height?: number | string;
     /** Render as a circle (avatar placeholder). */
@@ -7,7 +7,7 @@ export type SkeletonProps = {
     className?: string;
 };
 /** A pulsing placeholder block sized to the content it stands in for. */
-export declare function Skeleton({ width, height, circle, radius, className, }: SkeletonProps): import("react").JSX.Element;
+export declare function Skeleton({ width, height, circle, radius, className, ...rest }: SkeletonProps): import("react").JSX.Element;
 export declare namespace Skeleton {
     var displayName: string;
 }

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

@@ -1,11 +1,11 @@
-export type SpinnerProps = {
+export type SpinnerProps = React.ComponentPropsWithoutRef<"span"> & {
     /** Diameter in px (default 16). Border scales with it. */
     size?: number;
     "aria-label"?: string;
     className?: string;
 };
 /** A spinning ring indicator. Reports `role="status"` for assistive tech. */
-export declare function Spinner({ size, "aria-label": ariaLabel, className, }: SpinnerProps): import("react").JSX.Element;
+export declare function Spinner({ size, "aria-label": ariaLabel, className, ...rest }: SpinnerProps): import("react").JSX.Element;
 export declare namespace Spinner {
     var displayName: string;
 }

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

@@ -3,7 +3,7 @@ export type Stage = {
     /** Stage colour (CSS). Defaults to the brand colour. */
     color?: string;
 };
-export type StageBarProps = {
+export type StageBarProps = React.ComponentPropsWithoutRef<"div"> & {
     stages: Stage[];
     /** The current stage, by index or by matching `label`. */
     current: number | string;
@@ -14,7 +14,7 @@ export type StageBarProps = {
  * A pipeline stage bar — measured from Attio's Deal-stage Highlight. Each stage
  * is a segment tinted with its colour; the current stage is at full strength.
  */
-export declare function StageBar({ stages, current, "aria-label": ariaLabel, className, }: StageBarProps): import("react").JSX.Element;
+export declare function StageBar({ stages, current, "aria-label": ariaLabel, className, ...rest }: StageBarProps): import("react").JSX.Element;
 export declare namespace StageBar {
     var displayName: string;
 }

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

@@ -1,5 +1,5 @@
 import type * as React from "react";
-export type StatCardProps = {
+export type StatCardProps = React.ComponentPropsWithoutRef<"div"> & {
     /** Small muted metric name. */
     label: React.ReactNode;
     /** Optional icon shown before the label. */
@@ -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, ...rest }: 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,89 @@
+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 = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
+    /** 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;
+    /** aria-label on the Sort trigger (default "Sort"). */
+    sortLabel?: string;
+    /** aria-label on each sort row's drag grip (default "Reorder sort"). */
+    reorderSortLabel?: string;
+    /** aria-label on a sort row's field select (default "Sort field"). */
+    sortFieldLabel?: string;
+    /** aria-label on a sort row's direction select (default "Sort direction"). */
+    sortDirectionLabel?: string;
+    /** aria-label on a sort row's remove control (default "Remove sort"). */
+    removeSortLabel?: string;
+    /** aria-label on a filter row's field select (default "Filter by field"). */
+    filterFieldLabel?: string;
+    /** Placeholder in the filter field select (default "Filter by…"). */
+    filterFieldPlaceholder?: string;
+    /** Placeholder in a filter row's value input (default "Value…"). */
+    filterValuePlaceholder?: string;
+    /** Label on the "ascending" sort-direction option (default "Ascending"). */
+    ascendingLabel?: string;
+    /** Label on the "descending" sort-direction option (default "Descending"). */
+    descendingLabel?: string;
+    /** Text on the sort trigger. Receives the active sorts and the columns, so
+     * the sorted-by phrase can be built in the caller's own word order —
+     * "Sorted by Name +2" does not survive a template with holes. */
+    sortTriggerLabel?: (sorts: ToolbarSort[], columns: TableToolbarColumn[]) => React.ReactNode;
+    /** Text on the filter trigger. Receives the number of active filters. */
+    filterTriggerLabel?: (activeFilters: number) => React.ReactNode;
+    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, sortLabel, reorderSortLabel, sortFieldLabel, sortDirectionLabel, removeSortLabel, filterFieldLabel, filterFieldPlaceholder, filterValuePlaceholder, ascendingLabel, descendingLabel, sortTriggerLabel, filterTriggerLabel, ...rest }: 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;