@crisp-ui-kit/crisp 0.5.0 → 0.7.0

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

@@ -14,6 +14,10 @@ declare const config: import("../..").RecipeConfig<{
         text: string;
         icon: string;
     };
+    touchTarget: {
+        true: string;
+        false: string;
+    };
 }>;
 export declare const buttonRecipe: import("../..").RecipeFn<{
     intent: {
@@ -31,6 +35,10 @@ export declare const buttonRecipe: import("../..").RecipeFn<{
         text: string;
         icon: string;
     };
+    touchTarget: {
+        true: string;
+        false: string;
+    };
 }> & {
     config: import("../..").RecipeConfig<{
         intent: {
@@ -48,6 +56,10 @@ export declare const buttonRecipe: import("../..").RecipeFn<{
             text: string;
             icon: string;
         };
+        touchTarget: {
+            true: string;
+            false: string;
+        };
     }>;
     meta: {
         primary: {

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

@@ -1,6 +1,6 @@
 import type * as React from "react";
 export type CalloutTone = "neutral" | "info" | "success" | "warning" | "danger";
-export type CalloutProps = {
+export type CalloutProps = Omit<React.ComponentPropsWithoutRef<"div">, "title"> & {
     tone?: CalloutTone;
     /** Leading icon; defaults to a tone-appropriate one (pass `null` for none). */
     icon?: React.ReactNode;
@@ -14,7 +14,7 @@ export type CalloutProps = {
  * An inline callout / banner — measured from Attio's info notices. `tone` tints
  * the background and icon; pass a `title` and/or body `children`.
  */
-export declare function Callout({ tone, icon, title, children, action, className, }: CalloutProps): React.JSX.Element;
+export declare function Callout({ tone, icon, title, children, action, className, ...rest }: CalloutProps): React.JSX.Element;
 export declare namespace Callout {
     var displayName: string;
 }

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

@@ -0,0 +1,49 @@
+import * as React from "react";
+/**
+ * Attio's column footer calculation. Measured from the live app: clicking a
+ * summary cell opens an "Aggregations" menu — 180px wide — whose contents
+ * depend on the column's type.
+ *
+ * Every column offers the four universal aggregations; numeric columns add
+ * four more plus "None" to clear:
+ *
+ *   all types   Count empty · Count filled · Percent empty · Percent filled
+ *   numbers     …plus Sum · Average · Min · Max
+ *   both        None
+ *
+ * Plugs into `DataTable`'s per-column `summary(rows)` slot.
+ */
+export type CalcOp = "none" | "countEmpty" | "countFilled" | "percentEmpty" | "percentFilled" | "sum" | "average" | "min" | "max";
+/** The four Attio offers on every column, in its order. */
+export declare const UNIVERSAL_CALCS: CalcOp[];
+/** The four Attio adds for numeric columns, in its order. */
+export declare const NUMERIC_CALCS: CalcOp[];
+export declare const CALC_LABEL: Record<CalcOp, string>;
+/** A value counts as empty when it is null/undefined, "" or an empty array. */
+export declare function isEmptyValue(v: unknown): boolean;
+/**
+ * Pure so the arithmetic is testable without rendering. Returns `null` for
+ * "none" and for numeric ops with no numbers to work on — a caller renders
+ * nothing rather than a misleading 0.
+ */
+export declare function computeCalc(values: unknown[], op: CalcOp): number | null;
+export type ColumnCalcProps<T> = Omit<React.ComponentPropsWithoutRef<"span">, "value" | "children"> & {
+    rows: T[];
+    /** Reads this column's value out of a row. */
+    value: (row: T) => unknown;
+    /** Numeric columns get Sum/Average/Min/Max, as in Attio. */
+    numeric?: boolean;
+    defaultOp?: CalcOp;
+    /** Controlled operation. */
+    op?: CalcOp;
+    onOpChange?: (op: CalcOp) => void;
+    /** Overrides the operation names shown in the menu and the cell. Partial —
+     * anything omitted keeps its English default from `CALC_LABEL`. */
+    opLabels?: Partial<Record<CalcOp, string>>;
+    /** Format the result; defaults to a grouped number, percentages with a %. */
+    format?: (n: number, op: CalcOp) => string;
+    /** Match the column's alignment — numeric columns right-align in Attio. */
+    align?: "left" | "right";
+    className?: string;
+};
+export declare function ColumnCalc<T>({ rows, value, numeric, defaultOp, op: opProp, onOpChange, format, align, opLabels, className, ...rest }: ColumnCalcProps<T>): React.JSX.Element;

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

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

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

@@ -0,0 +1 @@
+export { CALC_LABEL, type CalcOp, ColumnCalc, type ColumnCalcProps, computeCalc, isEmptyValue, NUMERIC_CALCS, UNIVERSAL_CALCS, } from "./columncalc";

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

@@ -10,6 +10,9 @@ export type EntityValue = {
 export type DataCellType = "text" | "entity" | "tags" | "status" | "date" | "number" | "currency";
 export type DataTableColumn<T> = {
     key: string;
+    /** Truncates with an ellipsis (matches Attio) when it's wider than the
+     * column. The full text stays in the DOM, so assistive tech and copy/paste
+     * get all of it; there is deliberately no `title` tooltip — see the recipe. */
     header: React.ReactNode;
     /** Built-in rich renderer: entity (avatar+name), tags (colour pills), status
      * (dot), date, number, currency. Overridden by `render`. */
@@ -43,6 +46,10 @@ export type DataTableColumn<T> = {
     format?: (value: unknown, row: T) => string;
     /** Footer summary for this column (shown when any column supplies one). */
     summary?: (rows: T[]) => React.ReactNode;
+    /** Opt this column out of the header menu's Hide/Move/Rename items. */
+    managed?: boolean;
+    /** Hidden from the grid but still listed in the column manager. */
+    hidden?: boolean;
 };
 export type SortState = {
     key: string;
@@ -50,20 +57,63 @@ export type SortState = {
 };
 export type DataTableProps<T extends {
     id: string;
-}> = {
+}> = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onSelect"> & {
     columns: DataTableColumn<T>[];
     data: T[];
     /** Show a leading selection column with a select-all header checkbox. */
     selectable?: boolean;
     selectedIds?: string[];
     onSelectionChange?: (ids: string[]) => void;
+    /** aria-label for the header's select-all checkbox (default "Select all
+     * rows"). Override for non-English UIs — the built-in string never reaches
+     * a translated screen otherwise. */
+    selectAllLabel?: string;
+    /** aria-label for each row's checkbox (default `Select row ${row.id}`).
+     * Takes the row so the label can read back a human identifier (a name,
+     * a code) instead of the raw id. */
+    selectRowLabel?: (row: T) => string;
     /** Controlled sort (omit for self-managed; seed with `defaultSort`). */
-    sort?: SortState | null;
+    /**
+     * Active sort. Accepts a single sort or an ordered list — Attio sorts by
+     * several columns at once ("Sorted by Last interaction +1"), applying each
+     * in turn and falling through to the next on a tie.
+     */
+    /**
+     * Show Attio's column header menu — Sort ascending/descending, Move
+     * left/right, Edit column label, Hide from view. Anything but sorting
+     * needs `onColumnsChange` (or leave it off and the table manages its own
+     * copy of the column list).
+     */
+    columnMenu?: boolean;
+    /** Called with the next column list after a move, rename or hide. */
+    onColumnsChange?: (columns: DataTableColumn<T>[]) => void;
+    /** Group rows under a heading row, the way Attio groups a view. */
+    groupBy?: (row: T) => string;
+    /**
+     * Enables drag-to-reorder rows (a leading grip column). Called with the
+     * full row array in its new order. Ignored while a sort or `groupBy` is
+     * active — dragging a row would be instantly undone by the comparator, or
+     * is ambiguous across groups, so the grip isn't rendered at all in either
+     * case.
+     */
+    onRowsReorder?: (rows: T[]) => void;
+    /** aria-label on each row's drag grip (default "Reorder row"). */
+    reorderRowLabel?: string;
+    /**
+     * Render an error state in place of the rows. Uses the same measured
+     * `EmptyState variant="page"` surface as the zero-row state.
+     */
+    error?: React.ReactNode;
+    sort?: SortState | SortState[] | null;
     defaultSort?: SortState;
     onSortChange?: (s: SortState | null) => void;
     /** Show a search box that filters rows across filterable columns. */
     filterable?: boolean;
     searchPlaceholder?: string;
+    /** aria-label for the search input (default "Search table"). Independent
+     * of `searchPlaceholder`, which is visible text — this is the
+     * screen-reader-only label. */
+    searchLabel?: 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). */
@@ -85,13 +135,18 @@ export type DataTableProps<T extends {
     empty?: React.ReactNode;
     /** Show the "N of M" count on the right of the toolbar (default true). */
     showCount?: boolean;
+    /** Renders the toolbar's row count (default: "N row(s)" / "N of M" in
+     * English). Takes the shown (filtered) and total row counts — override for
+     * non-English pluralisation, since "N row/rows" doesn't translate as a
+     * template. */
+    countLabel?: (shown: number, total: number) => React.ReactNode;
     /** 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;
+}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel, selectRowLabel, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder, searchLabel, onEdit, stickyFirst, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel, empty, showCount, countLabel, toolbar, className, reorderRowLabel, ...rest }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var displayName: string;
 }

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

@@ -1,22 +1,45 @@
+import { type DatePickerActions, type DatePickerCellState, type DatePickerMonthRange, type UseDatePickerProps } from "@seed-design/react-date-picker";
 import * as React from "react";
-export type DatePickerProps = {
-    /** Controlled value. Omit to let the picker manage it (see defaultValue). */
-    value?: Date | null;
-    defaultValue?: Date | null;
-    onChange?: (date: Date) => void;
-    placeholder?: string;
-    /** `default` = outlined trigger; `ghost` = transparent (for table cells). */
-    variant?: "default" | "ghost";
-    /** Formats the trigger label (default: e.g. "Jun 3, 2026"). */
-    format?: (date: Date) => string;
-    "aria-label"?: string;
-    className?: string;
-};
 /**
- * A date field with a calendar popover — composes [Popover] with a month grid.
- * Controlled via `value`/`onChange` or self-managed from `defaultValue`.
+ * The calendar's behaviour — selection modes, constraints, roving focus, the
+ * live region, the year/month wheel — comes from `@seed-design/react-date-picker`,
+ * the headless engine seed-design publishes. crisp supplies the view and the
+ * measured styling, so the semantics are seed's by construction rather than by
+ * reimplementation, and upstream fixes arrive as a version bump.
  */
-export declare function DatePicker({ value, defaultValue, onChange, placeholder, variant, format, "aria-label": ariaLabel, className, }: DatePickerProps): React.JSX.Element;
-export declare namespace DatePicker {
-    var displayName: string;
+type RootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange" | "onValueChange">;
+export interface DatePickerCellContentRenderProps extends DatePickerCellState {
 }
+type BehaviorProps = UseDatePickerProps extends infer P ? P extends UseDatePickerProps ? Omit<P, "visibleRange" | "monthRange"> : never : never;
+type CellCustomization = {
+    /** Extra content under the date numeral. Prefer this. */
+    renderDateCellSupplement?: (props: DatePickerCellContentRenderProps) => React.ReactNode;
+    renderDateCellContent?: never;
+} | {
+    /** Replaces the cell's content, keeping its a11y and interaction. */
+    renderDateCellContent?: (props: DatePickerCellContentRenderProps) => React.ReactNode;
+    renderDateCellSupplement?: never;
+};
+type SizeProps = {
+    height?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+};
+type SharedProps = BehaviorProps & RootProps & {
+    /** Receives `navigateToDate` (no focus move) and `focusDate`. */
+    actionsRef?: React.Ref<DatePickerActions>;
+    className?: string;
+} & CellCustomization;
+export type DatePickerProps = SharedProps;
+export type TwoMonthDatePickerProps = SharedProps;
+export type WeekDatePickerProps = SharedProps;
+export type ContinuousDatePickerProps = SharedProps & SizeProps & {
+    /** Months the calendar can scroll through, inclusive of both ends. */
+    monthRange?: DatePickerMonthRange;
+};
+export declare const DatePicker: React.ForwardRefExoticComponent<SharedProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TwoMonthDatePicker: React.ForwardRefExoticComponent<SharedProps & React.RefAttributes<HTMLDivElement>>;
+export declare const WeekDatePicker: React.ForwardRefExoticComponent<SharedProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ContinuousDatePicker: React.ForwardRefExoticComponent<ContinuousDatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export type { DatePickerActions, DatePickerAriaLabels, DatePickerCell, DatePickerCellState, DatePickerConstraint, DatePickerConstraintContext, DatePickerDate, DatePickerMonth, DatePickerMonthRange, DatePickerMultipleProps, DatePickerRangeProps, DatePickerRangeValue, DatePickerSelectionMode, DatePickerSingleProps, DatePickerValue, DatePickerVisibleRange, DatePickerWeek, DatePickerYearMonth, } from "@seed-design/react-date-picker";
+export { compareDates, dateKey, dateOnOrAfter, dateOnOrBefore, excludeDates, isSameDate, maxSelectionCount, rangeDayCountAtLeast, rangeDayCountAtMost, } from "@seed-design/react-date-picker";

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

@@ -1,3 +1,26 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const datepickerRecipe: import("../..").RecipeFn<{}>;
+declare const config: import("../..").RecipeConfig<{
+    visibleRange: {
+        month: string;
+        twoMonths: string;
+        week: string;
+        continuous: string;
+    };
+}>;
+export declare const datepickerRecipe: import("../..").RecipeFn<{
+    visibleRange: {
+        month: string;
+        twoMonths: string;
+        week: string;
+        continuous: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        visibleRange: {
+            month: string;
+            twoMonths: string;
+            week: string;
+            continuous: string;
+        };
+    }>;
+};
 export default config;

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

@@ -1,2 +1,2 @@
-export { DatePicker, type DatePickerProps } from "./datepicker";
+export { ContinuousDatePicker, type ContinuousDatePickerProps, compareDates, DatePicker, type DatePickerActions, type DatePickerAriaLabels, type DatePickerCell, type DatePickerCellContentRenderProps, type DatePickerCellState, type DatePickerConstraint, type DatePickerConstraintContext, type DatePickerDate, type DatePickerMonth, type DatePickerMonthRange, type DatePickerMultipleProps, type DatePickerProps, type DatePickerRangeProps, type DatePickerRangeValue, type DatePickerSelectionMode, type DatePickerSingleProps, type DatePickerValue, type DatePickerVisibleRange, type DatePickerWeek, type DatePickerYearMonth, dateKey, dateOnOrAfter, dateOnOrBefore, excludeDates, isSameDate, maxSelectionCount, rangeDayCountAtLeast, rangeDayCountAtMost, TwoMonthDatePicker, type TwoMonthDatePickerProps, WeekDatePicker, type WeekDatePickerProps, } from "./datepicker";
 export { datepickerRecipe } from "./datepicker.recipe";

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { type DatePickerProps } from "../datepicker";
+export type DatePreset = {
+    label: React.ReactNode;
+    /** Thunk, not a Date: "Tomorrow" must be computed when the chip is pressed,
+     * not when the picker rendered — a long-lived page would otherwise offer a
+     * stale date. */
+    date: () => Date;
+};
+export type DatePickerFieldProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange"> & {
+    /** Controlled value. Omit to let the field manage it (see defaultValue). */
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (date: Date) => void;
+    placeholder?: string;
+    /** `default` = outlined trigger; `ghost` = transparent (for table cells). */
+    variant?: "default" | "ghost";
+    /** Formats the trigger label (default: e.g. "Jun 3, 2026"). */
+    format?: (date: Date) => string;
+    /** Quick-pick chips under the calendar. */
+    presets?: DatePreset[];
+    /** Forwarded to the calendar — constraints, locale, ariaLabels and the rest. */
+    calendarProps?: Omit<DatePickerProps, "value" | "defaultValue" | "onValueChange" | "selectionMode">;
+    "aria-label"?: string;
+    className?: string;
+};
+/**
+ * Attio's date field: a trigger showing the value, opening a calendar in a
+ * popover. This is what `DatePicker` used to be; `DatePicker` is now
+ * seed-design's bare calendar, and this composes it.
+ */
+export declare function DatePickerField({ value, defaultValue, onChange, placeholder, variant, format, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }: DatePickerFieldProps): React.JSX.Element;
+export declare namespace DatePickerField {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+export { DatePickerField, type DatePickerFieldProps, type DatePreset, } from "./datepickerfield";
+export { datepickerfieldRecipe } from "./datepickerfield.recipe";

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

@@ -10,6 +10,8 @@ export type DialogProps = {
     /** Content width in px (clamped to 90vw). */
     width?: number;
     "aria-label"?: string;
+    /** aria-label on the close button (default "Close") — override for non-English UIs. */
+    closeLabel?: string;
     children?: React.ReactNode;
 };
 /**
@@ -17,7 +19,7 @@ export type DialogProps = {
  * Escape / outside-click dismissal) with the measured Attio modal surface.
  * Compose the body with `DialogBody` and actions with `DialogFooter`.
  */
-export declare function Dialog({ open, onOpenChange, title, icon, width, "aria-label": ariaLabel, children, }: DialogProps): React.JSX.Element | null;
+export declare function Dialog({ open, onOpenChange, title, icon, width, "aria-label": ariaLabel, closeLabel, children, }: DialogProps): React.JSX.Element | null;
 export declare namespace Dialog {
     var displayName: string;
 }

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

@@ -1,9 +1,9 @@
-export type DividerProps = {
+export type DividerProps = React.ComponentPropsWithoutRef<"hr"> & {
     orientation?: "horizontal" | "vertical";
     className?: string;
 };
 /** A hairline separator over `borderSubtle`, horizontal or vertical. */
-export declare function Divider({ orientation, className, }: DividerProps): import("react").JSX.Element;
+export declare function Divider({ orientation, className, ...rest }: DividerProps): import("react").JSX.Element;
 export declare namespace Divider {
     var displayName: string;
 }

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

@@ -4,7 +4,7 @@ export type DonutSlice = {
     value: number;
     color?: string;
 };
-export type DonutChartProps = {
+export type DonutChartProps = React.ComponentPropsWithoutRef<"div"> & {
     data: DonutSlice[];
     /** Ring diameter in px (default 120). */
     size?: number;
@@ -26,7 +26,7 @@ export type DonutChartProps = {
  * ring using the r=15.915 (circumference 100) trick so slices are percentages;
  * a centred total and an optional legend. `role="img"` with a summary.
  */
-export declare function DonutChart({ data, size, thickness, centerValue, centerCaption, legend, format, "aria-label": ariaLabel, className, }: DonutChartProps): React.JSX.Element;
+export declare function DonutChart({ data, size, thickness, centerValue, centerCaption, legend, format, "aria-label": ariaLabel, className, ...rest }: DonutChartProps): React.JSX.Element;
 export declare namespace DonutChart {
     var displayName: string;
 }

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

@@ -7,6 +7,8 @@ export type DrawerProps = {
     title?: React.ReactNode;
     icon?: React.ReactNode;
     "aria-label"?: string;
+    /** aria-label on the close button (default "Close"). */
+    closeLabel?: string;
     children?: React.ReactNode;
 };
 /**
@@ -14,7 +16,7 @@ export type DrawerProps = {
  * Escape / outside-click dismissal) with a panel that slides in from the edge.
  * Compose the body with `DrawerBody` and actions with `DrawerFooter`.
  */
-export declare function Drawer({ open, onOpenChange, side, title, icon, "aria-label": ariaLabel, children, }: DrawerProps): React.JSX.Element | null;
+export declare function Drawer({ open, onOpenChange, side, title, icon, "aria-label": ariaLabel, closeLabel, children, }: DrawerProps): React.JSX.Element | null;
 export declare namespace Drawer {
     var displayName: string;
 }

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

@@ -1,5 +1,5 @@
 import type * as React from "react";
-export type EmptyStateProps = {
+export type EmptyStateProps = Omit<React.ComponentPropsWithoutRef<"div">, "title"> & {
     icon?: React.ReactNode;
     title: React.ReactNode;
     description?: React.ReactNode;
@@ -13,7 +13,7 @@ export type EmptyStateProps = {
     className?: string;
 };
 /** A centred empty-state panel — icon, title, description, optional action. */
-export declare function EmptyState({ icon, title, description, action, variant, className, }: EmptyStateProps): React.JSX.Element;
+export declare function EmptyState({ icon, title, description, action, variant, className, ...rest }: EmptyStateProps): React.JSX.Element;
 export declare namespace EmptyState {
     var displayName: string;
 }

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

@@ -1,12 +1,15 @@
 import * as React from "react";
-export type FormFieldProps = {
+export type FormFieldProps = React.ComponentPropsWithoutRef<"div"> & {
     label: React.ReactNode;
     /** `id` of the control — wires the label's `htmlFor`. */
     htmlFor?: string;
     /** Marks the field required (red asterisk). */
     required?: boolean;
-    /** Shows a muted "(optional)" after the label. */
-    optional?: boolean;
+    /** Shows a muted marker after the label when the field isn't required.
+     * `true` shows the default "(optional)" text; pass any node (e.g. a
+     * translated string) to show that instead — for non-English UIs, since
+     * the default text has no other override. */
+    optional?: boolean | React.ReactNode;
     /** Helper text under the control. */
     description?: React.ReactNode;
     /** Error message under the control (replaces description, coloured danger). */
@@ -20,7 +23,7 @@ export type FormFieldProps = {
  * above any control, with an optional description or error line below. When
  * `error` is set, it replaces the description and gets `aria-describedby` wiring.
  */
-export declare function FormField({ label, htmlFor, required, optional, description, error, children, className, }: FormFieldProps): React.JSX.Element;
+export declare function FormField({ label, htmlFor, required, optional, description, error, children, className, ...rest }: FormFieldProps): React.JSX.Element;
 export declare namespace FormField {
     var displayName: string;
 }

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;
 }