@crisp-ui-kit/crisp 0.5.0 → 0.7.1

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;
@@ -34,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, width, 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/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. */
@@ -23,7 +23,7 @@ export type StatCardProps = {
  * 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, card, 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/tabletoolbar/tabletoolbar.d.ts

@@ -21,7 +21,7 @@ export type TableToolbarColumn = {
     /** Leading field-type icon, shown in the field pickers. */
     icon?: IconType;
 };
-export type TableToolbarProps = {
+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. */
@@ -38,6 +38,32 @@ export type TableToolbarProps = {
     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;
 };
 /**
@@ -59,5 +85,5 @@ export declare function applySorts<T>(rows: T[], sorts: ToolbarSort[], get?: (ro
  * 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 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/tabs/tabs.d.ts

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

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

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

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

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

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

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

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

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

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

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

package/dist/types/index.d.ts

@@ -9,9 +9,11 @@ export * from "./components/button";
 export * from "./components/callout";
 export * from "./components/card";
 export * from "./components/checkbox";
+export * from "./components/columncalc";
 export * from "./components/contextmenu";
 export * from "./components/datatable";
 export * from "./components/datepicker";
+export * from "./components/datepickerfield";
 export * from "./components/dialog";
 export * from "./components/divider";
 export * from "./components/donutchart";
@@ -26,6 +28,7 @@ export * from "./components/multiselect";
 export * from "./components/popover";
 export * from "./components/progress";
 export * from "./components/radiogroup";
+export * from "./components/resizablepanel";
 export * from "./components/segmented";
 export * from "./components/select";
 export * from "./components/skeleton";
@@ -39,8 +42,10 @@ export * from "./components/tabs";
 export * from "./components/textarea";
 export * from "./components/toast";
 export * from "./components/tooltip";
+export * from "./components/wheelpicker";
 export * from "./core";
 export * from "./product/appshell";
+export * from "./product/authshell";
 export * from "./product/board";
 export * from "./product/command";
 export * from "./product/entitycard";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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