@crisp-ui-kit/crisp 0.2.0 → 0.7.0

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type AvatarProps } from "../avatar/avatar";
-export type AvatarGroupProps = {
+export type AvatarGroupProps = React.ComponentPropsWithoutRef<"div"> & {
     /** Avatar elements to stack, in order (left on the outside). */
     children: React.ReactNode;
     /** Show at most this many, then a "+N" overflow chip. */
@@ -15,7 +15,7 @@ export type AvatarGroupProps = {
  * from Attio's team / member rows. Pass `<Avatar>` children; each is ringed in
  * the surface colour so it reads against its neighbour.
  */
-export declare function AvatarGroup({ children, max, size, className, "aria-label": ariaLabel, }: AvatarGroupProps): React.JSX.Element;
+export declare function AvatarGroup({ children, max, size, className, "aria-label": ariaLabel, ...rest }: AvatarGroupProps): React.JSX.Element;
 export declare namespace AvatarGroup {
     var displayName: string;
 }

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

@@ -3,7 +3,7 @@ export type BarDatum = {
     label: string;
     value: number;
 };
-export type BarChartProps = {
+export type BarChartProps = Omit<React.ComponentPropsWithoutRef<"div">, "color"> & {
     data: BarDatum[];
     /** Overall height in px (default 240). */
     height?: number;
@@ -15,6 +15,8 @@ export type BarChartProps = {
     color?: string;
     /** Formats axis ticks and bar 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;
@@ -24,7 +26,7 @@ export type BarChartProps = {
  * A responsive bar chart — measured from Attio's Reports dashboard. Pure CSS, so
  * it scales with its container. Renders `role="img"` with an accessible summary.
  */
-export declare function BarChart({ data, height, max, ticks, color, format, xAxisTitle, "aria-label": ariaLabel, className, }: BarChartProps): React.JSX.Element;
+export declare function BarChart({ data, height, max, ticks, color, format, yAxisWidth, xAxisTitle, "aria-label": ariaLabel, className, ...rest }: BarChartProps): React.JSX.Element;
 export declare namespace BarChart {
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ export type BreadcrumbItem = {
     icon?: React.ReactNode;
     onClick?: () => void;
 };
-export type BreadcrumbProps = {
+export type BreadcrumbProps = React.ComponentPropsWithoutRef<"nav"> & {
     items: BreadcrumbItem[];
     /** Separator between items (default a chevron). */
     separator?: React.ReactNode;
@@ -16,7 +16,7 @@ export type BreadcrumbProps = {
  * A breadcrumb trail — measured from Attio's record-page nav. The last item is
  * marked `aria-current="page"`; earlier items render as links or buttons.
  */
-export declare function Breadcrumb({ items, separator, "aria-label": ariaLabel, className, }: BreadcrumbProps): React.JSX.Element;
+export declare function Breadcrumb({ items, separator, "aria-label": ariaLabel, className, ...rest }: BreadcrumbProps): React.JSX.Element;
 export declare namespace Breadcrumb {
     var displayName: string;
 }

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

@@ -1,11 +1,13 @@
 import * as React from "react";
-export type BulkBarProps = {
+export type BulkBarProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
     /** Selected count — renders the leading "N selected" pill when provided. */
     count?: number;
     /** Called when the count pill (its ✕) is pressed — clear the selection. */
     onClear?: () => void;
     /** Word after the count in the pill (default "selected"). */
     countLabel?: string;
+    /** title on the count pill's clear (✕) control (default "Clear selection"). */
+    clearLabel?: string;
     /** Action buttons — usually `<BulkBarButton>`s and a `<Menu>` overflow. */
     children?: React.ReactNode;
     className?: string;
@@ -15,7 +17,7 @@ export type BulkBarProps = {
  * positioned ancestor when a selection is active; render it conditionally
  * (e.g. `count > 0 && <BulkBar …/>`). Measured from Attio's records table.
  */
-export declare function BulkBar({ count, onClear, countLabel, children, className, }: BulkBarProps): React.JSX.Element;
+export declare function BulkBar({ count, onClear, countLabel, children, className, clearLabel, ...rest }: BulkBarProps): React.JSX.Element;
 export declare namespace BulkBar {
     var displayName: string;
 }

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

@@ -22,6 +22,10 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<React.Detailed
         text: string;
         icon: string;
     };
+    touchTarget: {
+        true: string;
+        false: string;
+    };
 }> & {
     config: import("../..").RecipeConfig<{
         intent: {
@@ -39,6 +43,10 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<React.Detailed
             text: string;
             icon: string;
         };
+        touchTarget: {
+            true: string;
+            false: string;
+        };
     }>;
     meta: {
         primary: {

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

@@ -0,0 +1,153 @@
+import * as React from "react";
+type IconType = React.ComponentType<{
+    size?: number;
+    strokeWidth?: number;
+}>;
+export type EntityValue = {
+    name: string;
+    avatar?: string;
+};
+export type DataCellType = "text" | "entity" | "tags" | "status" | "date" | "number" | "currency";
+export type DataTableColumn<T> = {
+    key: string;
+    /** 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`. */
+    type?: DataCellType;
+    /** A leading field-type icon in the header (matches RecordsTable). */
+    icon?: IconType;
+    /** Currency symbol for `currency` columns (default "$"). */
+    symbol?: string;
+    /** Allow drag-to-resize on this column (default true). */
+    resizable?: boolean;
+    /** Tone overrides for `status`/`tags` values (else a stable colour per value). */
+    tones?: Record<string, string>;
+    /** Enable click-to-sort on this column's header. */
+    sortable?: boolean;
+    /** Exclude this column from the search filter (default: included). */
+    filterable?: boolean;
+    /** Allow inline editing (click the cell → text input → Enter/blur commits). */
+    editable?: boolean;
+    align?: "left" | "right" | "center";
+    width?: number;
+    /** Custom cell renderer. */
+    render?: (value: unknown, row: T) => React.ReactNode;
+    /** Derive the sort/filter/display value (defaults to `row[key]`). */
+    accessor?: (row: T) => string | number;
+    /** Transform the value into a display string (locale formatting, masking, a
+     * unit suffix, …); the result still flows through the built-in type
+     * renderer, so a `number`/`currency` column keeps its alignment + chrome.
+     * Precedence: `render` (full custom node) beats `format` (value string)
+     * beats the built-in type renderer. Display-only — sorting and filtering
+     * use the raw/`accessor` value, never the formatted string. */
+    format?: (value: unknown, row: T) => string;
+    /** Footer summary for this column (shown when any column supplies one). */
+    summary?: (rows: T[]) => React.ReactNode;
+    /** 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;
+    dir: "asc" | "desc";
+};
+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`). */
+    /**
+     * 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). */
+    stickyFirst?: boolean;
+    /** Tone for `entity`-type avatars: `"brand"` (uniform, matches Attio's real
+     * records grid) or `"hashed"` (a stable colour per name — the tone `tags`/
+     * `status` pills already use, and entity's previous default). */
+    avatarTone?: "brand" | "hashed";
+    /** Card-style bordered surface (default) or full-bleed edge-to-edge, like
+     * RecordsTable. Passed through to the underlying `Table`. */
+    surface?: "card" | "bleed";
+    /** Row hover affordance + `onRowClick`. */
+    interactive?: boolean;
+    onRowClick?: (row: T) => void;
+    /** Renders a trailing add-row button ("New record") when provided. */
+    onAddRow?: () => void;
+    addRowLabel?: React.ReactNode;
+    /** Rendered in the body when there are no rows. */
+    empty?: React.ReactNode;
+    /** Show the "N of M" count on the right of the toolbar (default true). */
+    showCount?: boolean;
+    /** 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: 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;
+}
+export {};

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

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

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

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

package/dist/types/components/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;
 }