@crisp-ui-kit/crisp 0.53.2 → 0.53.4

package/dist/styles.layered.css

@@ -1029,6 +1029,34 @@
     & .crisp-formfield-error { font-size: var(--crisp-text-sm); line-height: 16px; color: var(--crisp-bg-danger); }
 }
 
+.crisp-heatmapchart {
+  display: flex; gap: var(--crisp-space-2); box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-heatmapchart-rowaxis { display: flex; flex-direction: column; justify-content: space-between; padding: var(--crisp-space-1) 0; font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-rowaxis-title { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
+    & .crisp-heatmapchart-body { flex: 1; }
+    & .crisp-heatmapchart-grid { display: grid; gap: var(--crisp-space-1-5); }
+    & .crisp-heatmapchart-cell { box-sizing: border-box; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; border-radius: var(--crisp-radius-md); border: none; background: transparent; margin: 0; padding: 0; font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-semibold); font-variant-numeric: tabular-nums; color: var(--crisp-fg-primary); }
+    & button.crisp-heatmapchart-cell { cursor: pointer; transition: filter 0.12s ease; }
+    & button.crisp-heatmapchart-cell:hover { filter: brightness(0.97); }
+    & button.crisp-heatmapchart-cell:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    & .crisp-heatmapchart-cell[data-tone="neutral"] { background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
+    & .crisp-heatmapchart-cell[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="warning"] { background: color-mix(in srgb, var(--crisp-bg-warning) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 18%, transparent); }
+    & .crisp-heatmapchart-cell[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 16%, transparent); }
+    & .crisp-heatmapchart-cell[data-ring] { box-shadow: inset 0 0 0 2px var(--crisp-bg-danger-solid); }
+    & .crisp-heatmapchart-colaxis { display: flex; justify-content: space-between; margin-top: var(--crisp-space-1-5); padding: 0 var(--crisp-space-0-5); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); text-transform: uppercase; letter-spacing: 0.02em; color: var(--crisp-fg-neutral-subtle); }
+    & .crisp-heatmapchart-empty { padding: var(--crisp-space-8) 0; text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-heatmapchart, .crisp-heatmapchart * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 .crisp-input {
   position: relative; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
     &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; transition: border-color .1s ease; pointer-events: none; }
@@ -1759,8 +1787,8 @@
 
 .crisp-toast {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); bottom: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
-    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-3); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
     & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: var(--crisp-fg-muted); }
     & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: var(--crisp-bg-brand-solid); }
     & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: var(--crisp-bg-success); }
@@ -2730,6 +2758,15 @@
   }
 }
 
+.crisp-statlist {
+  display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & .crisp-statlist-row { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-3); padding: var(--crisp-space-2-5) 0; border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-md); color: inherit; text-decoration: none; }
+    & .crisp-statlist-row:first-child { border-top: none; }
+    & a.crisp-statlist-row:hover .crisp-statlist-label { color: var(--crisp-fg-brand-soft); }
+    & .crisp-statlist-label { color: var(--crisp-fg-muted); }
+    & .crisp-statlist-empty { padding: var(--crisp-space-4) 0; text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+}
+
 .crisp-tasklist {
   display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-tasklist-group { display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 36px; padding: 0 var(--crisp-space-2); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }

package/dist/toast.css

@@ -1,7 +1,7 @@
 .crisp-toast {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); bottom: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
-    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-3); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
     & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: var(--crisp-fg-muted); }
     & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: var(--crisp-bg-brand-solid); }
     & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: var(--crisp-bg-success); }

package/dist/toast.layered.css

@@ -1,8 +1,8 @@
 @layer crisp-components {
 .crisp-toast {
   display: contents; font-family: var(--crisp-font-sans);
-    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); bottom: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
-    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-3); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
+    & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
+    & .crisp-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); box-sizing: border-box; padding: var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transform: translateY(0); transition: opacity 0.15s ease, transform 0.15s ease; @starting-style { opacity: 0; transform: translateY(8px); } }
     & .crisp-toast-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: var(--crisp-fg-muted); }
     & .crisp-toast[data-tone="info"] .crisp-toast-icon { color: var(--crisp-bg-brand-solid); }
     & .crisp-toast[data-tone="success"] .crisp-toast-icon { color: var(--crisp-bg-success); }

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

@@ -16,7 +16,7 @@ export type BreadcrumbProps = React.ComponentPropsWithoutRef<"nav"> & {
  * A breadcrumb trail — measured from a 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, ...rest }: BreadcrumbProps): React.JSX.Element;
+export declare function Breadcrumb({ items, separator, "aria-label": ariaLabelProp, className, ...rest }: BreadcrumbProps): React.JSX.Element;
 export declare namespace Breadcrumb {
     var displayName: string;
 }

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

@@ -50,4 +50,4 @@ export type ColumnCalcProps<T> = Omit<React.ComponentPropsWithoutRef<"span">, "v
     align?: "left" | "right";
     className?: string;
 };
-export declare function ColumnCalc<T>({ rows, value, numeric, defaultOp, op: opProp, onOpChange, addLabel, sectionLabel, format, align, opLabels, className, ...rest }: ColumnCalcProps<T>): React.JSX.Element;
+export declare function ColumnCalc<T>({ rows, value, numeric, defaultOp, op: opProp, onOpChange, addLabel: addLabelProp, sectionLabel: sectionLabelProp, format, align, opLabels, className, ...rest }: ColumnCalcProps<T>): React.JSX.Element;

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

@@ -70,7 +70,7 @@ export type ComposeWindowProps = Omit<React.ComponentPropsWithoutRef<"div">, "ch
  * measured screenshot. `trapFocus` follows the same call — a picture-in-
  * picture window, not a modal, so Tab is not caught inside it.
  */
-export declare function ComposeWindow({ open, onOpenChange, breadcrumb, minimized: minimizedProp, defaultMinimized, onMinimizedChange, pinned: pinnedProp, defaultPinned, onPinnedChange, width, "aria-label": ariaLabel, minimizeLabel, pinLabel, closeLabel, children, className, style, "aria-describedby": describedBy, ...rest }: ComposeWindowProps): React.JSX.Element | null;
+export declare function ComposeWindow({ open, onOpenChange, breadcrumb, minimized: minimizedProp, defaultMinimized, onMinimizedChange, pinned: pinnedProp, defaultPinned, onPinnedChange, width, "aria-label": ariaLabel, minimizeLabel: minimizeLabelProp, pinLabel: pinLabelProp, closeLabel: closeLabelProp, children, className, style, "aria-describedby": describedBy, ...rest }: ComposeWindowProps): React.JSX.Element | null;
 export declare namespace ComposeWindow {
     var displayName: string;
 }

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

@@ -33,7 +33,7 @@ export type ContextMenuProps = {
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-export declare function ContextMenu({ children, items, menuLabel, className, asChild, }: ContextMenuProps): React.JSX.Element;
+export declare function ContextMenu({ children, items, menuLabel: menuLabelProp, className, asChild, }: ContextMenuProps): React.JSX.Element;
 export declare namespace ContextMenu {
     var displayName: string;
 }

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

@@ -0,0 +1,51 @@
+import type * as React from "react";
+export type HeatmapCell = {
+    /** The raw value a consumer's own severity/intensity scale maps from. */
+    value: number;
+    /** Cell background. "neutral" (the default) is a plain muted tint —
+     *  typically used for a value of 0. */
+    tone?: "neutral" | "success" | "warning" | "orange" | "danger";
+    /** Draws an inset danger ring around the cell (e.g. "over the appetite
+     *  threshold"), independent of — and layered on top of — `tone`. */
+    ring?: boolean;
+};
+/** An axis's own end labels + an optional rotated (row) or inline (column)
+ *  title between them — a 5x5 heatmap reads its axis by its two extremes
+ *  and what they mean, not a tick per row/column. */
+export type HeatmapAxis = {
+    low: React.ReactNode;
+    high: React.ReactNode;
+    title?: React.ReactNode;
+};
+export type HeatmapChartProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onClick"> & {
+    /** `data[row][col]`, row 0 at the top (the axis's `high` end). */
+    data: HeatmapCell[][];
+    rowAxis: HeatmapAxis;
+    colAxis: HeatmapAxis;
+    /** Cell display text — default `cell.value || ""` (a 0 renders blank, the
+     *  same "an empty cell says nothing happened here" reading GRC's own
+     *  heatmap already used). */
+    format?: (cell: HeatmapCell, row: number, col: number) => React.ReactNode;
+    /** Hover/focus tooltip text for a cell. */
+    cellTitle?: (cell: HeatmapCell, row: number, col: number) => string;
+    /** Only cells this returns true for become a real `<button>` — a cell
+     *  with nothing behind it stays a plain, non-interactive `<div>`. */
+    onCellClick?: (row: number, col: number, cell: HeatmapCell) => void;
+    isCellClickable?: (cell: HeatmapCell, row: number, col: number) => boolean;
+    /** Renders the empty-state message instead of the grid. */
+    empty?: boolean;
+    emptyLabel?: React.ReactNode;
+    "aria-label"?: string;
+    className?: string;
+};
+/**
+ * An NxM cell-matrix chart — GRC's own risk heatmap (impact x likelihood)
+ * is the first consumer. Severity/intensity mapping (`tone`, `ring`) is
+ * entirely the caller's own data, not a scale this component invents; see
+ * the recipe's own doc comment for why (and for its measurement — or lack
+ * of one — against Attio).
+ */
+export declare function HeatmapChart({ data, rowAxis, colAxis, format, cellTitle, onCellClick, isCellClickable, empty, emptyLabel, "aria-label": ariaLabel, className, ...rest }: HeatmapChartProps): React.JSX.Element;
+export declare namespace HeatmapChart {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1 @@
+export * from "./heatmapchart";

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

@@ -5,7 +5,7 @@ export type SpinnerProps = React.ComponentPropsWithoutRef<"span"> & {
     className?: string;
 };
 /** A spinning ring indicator. Reports `role="status"` for assistive tech. */
-export declare function Spinner({ size, "aria-label": ariaLabel, className, ...rest }: SpinnerProps): import("react").JSX.Element;
+export declare function Spinner({ size, "aria-label": ariaLabelProp, className, ...rest }: SpinnerProps): import("react").JSX.Element;
 export declare namespace Spinner {
     var displayName: string;
 }

package/dist/types/core/i18n.d.ts

@@ -28,8 +28,27 @@ import * as React from "react";
  * before this existed.
  */
 export type CrispMessages = Record<string, string>;
-export declare function CrispMessagesProvider({ messages, children, }: {
+/**
+ * A handful of product components (`RecordPage`, `RecordsTable`) already
+ * take their own translatable text as one big `labels` object rather than a
+ * prop per string — and several of ITS entries are formatter FUNCTIONS
+ * (`domainSetTo(value)`, `sortedBy(first, extra)`), not plain strings, since
+ * word order and pluralisation differ too much across languages for a
+ * template (the same reason `TableToolbar.sortTriggerLabel` is a function).
+ * `CrispMessages` can't hold those — it's `Record<string,string>` — so those
+ * two components get their own whole-object slot instead of a per-string
+ * swap through `messages`. `componentDefaults` is deliberately untyped here
+ * (`Record<string, unknown>`, cast back to the real shape by
+ * `useCrispComponentDefaults<T>` at the CALL site): `core/` sits underneath
+ * `product/`, so it cannot import `RecordPageLabels`/`RecordsTableLabels`
+ * without a circular dependency. Keyed by the component's own name
+ * ("recordPage", "recordsTable") — a small, closed set, not a general
+ * registry, since only these two currently need it.
+ */
+export type CrispComponentDefaults = Record<string, unknown>;
+export declare function CrispMessagesProvider({ messages, componentDefaults, children, }: {
     messages: CrispMessages;
+    componentDefaults?: CrispComponentDefaults;
     children?: React.ReactNode;
 }): React.ReactElement;
 /**
@@ -56,3 +75,13 @@ export declare function useCrispMessage(explicit: string | undefined, englishDef
  * per fragment, same fallback order, no hook-in-a-loop.
  */
 export declare function useCrispMessages(): CrispMessages;
+/**
+ * Reads one component's own whole-object defaults override, set via
+ * `CrispMessagesProvider`'s `componentDefaults` prop (see its own doc for
+ * why this exists separately from `useCrispMessage`). `T` is the
+ * component's own labels TYPE (e.g. `Partial<RecordPageLabels>`) — this
+ * hook itself only knows `name`, a plain string key; the caller supplies
+ * and trusts the real shape, the same way `useContext` always has for an
+ * untyped-at-the-provider value.
+ */
+export declare function useCrispComponentDefaults<T>(name: string): T | undefined;

package/dist/types/core/index.d.ts

@@ -7,7 +7,7 @@ export { isRtlElement } from "./direction";
 export { FloatingPortal } from "./floating-portal";
 export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack";
 export { formValueStyle } from "./form-value";
-export { type CrispMessages, CrispMessagesProvider, useCrispMessage, useCrispMessages, } from "./i18n";
+export { type CrispComponentDefaults, type CrispMessages, CrispMessagesProvider, useCrispComponentDefaults, useCrispMessage, useCrispMessages, } from "./i18n";
 export { type MentionAnchor, type MentionMatch, matchMentionTrigger, } from "./mention";
 export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
 export { Primitive } from "./primitive";

package/dist/types/index.d.ts

@@ -25,6 +25,7 @@ export * from "./components/fileupload";
 export * from "./components/filldoc";
 export * from "./components/fillsheet";
 export * from "./components/formfield";
+export * from "./components/heatmapchart";
 export * from "./components/input";
 export * from "./components/kbd";
 export * from "./components/linechart";
@@ -70,6 +71,7 @@ export * from "./product/richtext";
 export * from "./product/settingssection";
 export * from "./product/settingsshell";
 export * from "./product/sidebar";
+export * from "./product/statlist";
 export * from "./product/tasklist";
 export * from "./product/trialbanner";
 export * from "./product/viewtoggle";

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

@@ -0,0 +1 @@
+export * from "./statlist";

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

@@ -0,0 +1,34 @@
+import type * as React from "react";
+export type StatListItem = {
+    id: string;
+    label: React.ReactNode;
+    /** The trailing count. Rendered as a Badge; 0 always reads "neutral",
+     *  regardless of `tone` — a zero is never itself a finding. */
+    count: number;
+    /** Badge tone once `count > 0`. Default "neutral". */
+    tone?: "neutral" | "success" | "warning" | "danger" | "brand";
+    /** Real anchor href — gives right-click / middle-click / ctrl-click their
+     *  ordinary browser behaviour. Omit for a non-navigable row. */
+    href?: string;
+    /** Called on a plain left click; pair with `href` and `event.preventDefault()`
+     *  for client-side routing (e.g. react-router), the same division of
+     *  labour its own `Link` uses internally. */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+};
+export type StatListProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
+    items: StatListItem[];
+    /** Shown when `items` is empty. */
+    emptyLabel?: React.ReactNode;
+    className?: string;
+};
+/**
+ * A list of label + trailing-count rows — a dashboard's own findings
+ * summary ("Open risks with no owner: 3") or an audit-readiness check list,
+ * each row optionally a link. Not measured against one specific Attio
+ * widget (see the recipe's own doc comment for why); composed from
+ * already-measured crisp values throughout.
+ */
+export declare function StatList({ items, emptyLabel, className, ...rest }: StatListProps): React.JSX.Element;
+export declare namespace StatList {
+    var displayName: string;
+}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.53.2",
+  "version": "0.53.4",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -168,6 +168,11 @@
       "import": "./dist/esm/components/formfield/index.js",
       "require": "./dist/cjs/components/formfield/index.js"
     },
+    "./heatmapchart": {
+      "types": "./dist/types/components/heatmapchart/index.d.ts",
+      "import": "./dist/esm/components/heatmapchart/index.js",
+      "require": "./dist/cjs/components/heatmapchart/index.js"
+    },
     "./input": {
       "types": "./dist/types/components/input/index.d.ts",
       "import": "./dist/esm/components/input/index.js",
@@ -388,6 +393,11 @@
       "import": "./dist/esm/product/sidebar/index.js",
       "require": "./dist/cjs/product/sidebar/index.js"
     },
+    "./statlist": {
+      "types": "./dist/types/product/statlist/index.d.ts",
+      "import": "./dist/esm/product/statlist/index.js",
+      "require": "./dist/cjs/product/statlist/index.js"
+    },
     "./tasklist": {
       "types": "./dist/types/product/tasklist/index.d.ts",
       "import": "./dist/esm/product/tasklist/index.js",