@crisp-ui-kit/crisp 0.53.1 → 0.53.3

package/dist/cjs/components/breadcrumb/breadcrumb.js

@@ -36,12 +36,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breadcrumb = Breadcrumb;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const breadcrumb_recipe_1 = require("./breadcrumb.recipe");
 /**
  * A breadcrumb trail — measured from a record-page nav. The last item is
  * marked `aria-current="page"`; earlier items render as links or buttons.
  */
-function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb", className, ...rest }) {
+function Breadcrumb({ items, separator, "aria-label": ariaLabelProp, className, ...rest }) {
+    // crisp/#471: an explicit prop always wins; missing, it reads the nearest
+    // CrispMessagesProvider's translation of the English default, or that
+    // default itself with no provider — unchanged from before this existed.
+    const ariaLabel = (0, core_1.useCrispMessage)(ariaLabelProp, "Breadcrumb");
     // Live-measured (app.attio.com/<ws>/home, /companies,
     // /company/<id>/overview): a plain rounded divider, not a chevron -- a
     // symmetric shape needs no RTL mirroring, unlike the ChevronRight this

package/dist/cjs/components/columncalc/columncalc.js

@@ -40,6 +40,7 @@ exports.ColumnCalc = ColumnCalc;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const menu_1 = require("../menu");
 const columncalc_recipe_1 = require("./columncalc.recipe");
 /** The four calcs offered on every column, in their order. */
@@ -117,10 +118,18 @@ function computeCalc(values, op) {
 const defaultFormat = (n, op) => op === "percentEmpty" || op === "percentFilled"
     ? `${Math.round(n)}%`
     : n.toLocaleString(undefined, { maximumFractionDigits: 2 });
-function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opProp, onOpChange, addLabel = "Add calculation", sectionLabel = "Aggregations", format = defaultFormat, align, opLabels, className, ...rest }) {
-    // a partial override, so a consumer can translate one op without
-    // restating all nine
-    const labelFor = (o) => opLabels?.[o] ?? exports.CALC_LABEL[o];
+function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opProp, onOpChange, addLabel: addLabelProp, sectionLabel: sectionLabelProp, format = defaultFormat, align, opLabels, className, ...rest }) {
+    // crisp/#471: an explicit prop always wins; missing, it reads the nearest
+    // CrispMessagesProvider's translation of the English default, or that
+    // default itself with no provider — unchanged from before this existed.
+    const addLabel = (0, core_1.useCrispMessage)(addLabelProp, "Add calculation");
+    const sectionLabel = (0, core_1.useCrispMessage)(sectionLabelProp, "Aggregations");
+    const crispMessages = (0, core_1.useCrispMessages)();
+    // opLabels (a per-op partial override) wins, then the provider's own
+    // translation of CALC_LABEL's English default, then that default itself —
+    // a consumer can translate one op via opLabels without restating all
+    // nine, AND get the rest from a provider with no per-instance prop at all.
+    const labelFor = (o) => opLabels?.[o] ?? crispMessages[exports.CALC_LABEL[o]] ?? exports.CALC_LABEL[o];
     const [internal, setInternal] = React.useState(defaultOp);
     const op = opProp ?? internal;
     const setOp = (next) => {

package/dist/cjs/components/composewindow/composewindow.js

@@ -93,7 +93,11 @@ function useComposeWindowInstanceId() {
  * measured screenshot. `trapFocus` follows the same call — a picture-in-
  * picture window, not a modal, so Tab is not caught inside it.
  */
-function ComposeWindow({ open, onOpenChange, breadcrumb, minimized: minimizedProp, defaultMinimized, onMinimizedChange, pinned: pinnedProp, defaultPinned, onPinnedChange, width = 968, "aria-label": ariaLabel, minimizeLabel = "Minimize", pinLabel = "Pin to screen", closeLabel = "Close", children, className, style, "aria-describedby": describedBy, ...rest }) {
+function ComposeWindow({ open, onOpenChange, breadcrumb, minimized: minimizedProp, defaultMinimized, onMinimizedChange, pinned: pinnedProp, defaultPinned, onPinnedChange, width = 968, "aria-label": ariaLabel, minimizeLabel: minimizeLabelProp, pinLabel: pinLabelProp, closeLabel: closeLabelProp, children, className, style, "aria-describedby": describedBy, ...rest }) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const minimizeLabel = (0, core_1.useCrispMessage)(minimizeLabelProp, "Minimize");
+    const pinLabel = (0, core_1.useCrispMessage)(pinLabelProp, "Pin to screen");
+    const closeLabel = (0, core_1.useCrispMessage)(closeLabelProp, "Close");
     const id = useComposeWindowInstanceId();
     const [internalMinimized, setInternalMinimized] = React.useState(defaultMinimized ?? false);
     const minimized = minimizedProp ?? internalMinimized;

package/dist/cjs/components/contextmenu/contextmenu.js

@@ -45,7 +45,9 @@ const contextmenu_recipe_1 = require("./contextmenu.recipe");
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-function ContextMenu({ children, items, menuLabel = "Context menu", className, asChild = false, }) {
+function ContextMenu({ children, items, menuLabel: menuLabelProp, className, asChild = false, }) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const menuLabel = (0, core_1.useCrispMessage)(menuLabelProp, "Context menu");
     const rootRef = React.useRef(null);
     const menuRef = React.useRef(null);
     const returnFocusTo = React.useRef(null);

package/dist/cjs/components/filldoc/filldoc.js

@@ -72,7 +72,12 @@ const emptyTable = () => ({
  * page covered in handles and grips stops looking like a page, which is the
  * whole thing this is for.
  */
-exports.FillDoc = React.forwardRef(function FillDoc({ blocks, onBlocksChange, mode = "edit", page = "a4", label, addTextLabel = "Text", addHeadingLabel = "Heading", addTableLabel = "Table", removeLabel = "Remove", className, style, ...rest }, forwardedRef) {
+exports.FillDoc = React.forwardRef(function FillDoc({ blocks, onBlocksChange, mode = "edit", page = "a4", label, addTextLabel: addTextLabelProp, addHeadingLabel: addHeadingLabelProp, addTableLabel: addTableLabelProp, removeLabel: removeLabelProp, className, style, ...rest }, forwardedRef) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const addTextLabel = (0, core_1.useCrispMessage)(addTextLabelProp, "Text");
+    const addHeadingLabel = (0, core_1.useCrispMessage)(addHeadingLabelProp, "Heading");
+    const addTableLabel = (0, core_1.useCrispMessage)(addTableLabelProp, "Table");
+    const removeLabel = (0, core_1.useCrispMessage)(removeLabelProp, "Remove");
     const editable = mode === "edit";
     const replace = (i, block) => {
         const next = blocks.slice();

package/dist/cjs/components/spinner/spinner.js

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spinner = Spinner;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("../../core");
 const spinner_recipe_1 = require("./spinner.recipe");
 /** A spinning ring indicator. Reports `role="status"` for assistive tech. */
-function Spinner({ size = 16, "aria-label": ariaLabel = "Loading", className, ...rest }) {
+function Spinner({ size = 16, "aria-label": ariaLabelProp, className, ...rest }) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const ariaLabel = (0, core_1.useCrispMessage)(ariaLabelProp, "Loading");
     return ((0, jsx_runtime_1.jsx)("span", { role: "status", "aria-label": ariaLabel, className: (0, spinner_recipe_1.spinnerRecipe)({ className }), ...rest, style: {
             width: size,
             height: size,

package/dist/cjs/index.js

@@ -94,6 +94,7 @@ __exportStar(require("./product/richtext"), exports);
 __exportStar(require("./product/settingssection"), exports);
 __exportStar(require("./product/settingsshell"), exports);
 __exportStar(require("./product/sidebar"), exports);
+__exportStar(require("./product/statlist"), exports);
 __exportStar(require("./product/tasklist"), exports);
 __exportStar(require("./product/trialbanner"), exports);
 __exportStar(require("./product/viewtoggle"), exports);

package/dist/cjs/product/statlist/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./statlist"), exports);

package/dist/cjs/product/statlist/statlist.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatList = StatList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const badge_1 = require("../../components/badge/badge");
+const statlist_recipe_1 = require("./statlist.recipe");
+/**
+ * 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.
+ */
+function StatList({ items, emptyLabel = "Nothing to show", className, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, statlist_recipe_1.statlistRecipe)({ className }), ...rest, children: items.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-statlist-empty", children: emptyLabel })) : (items.map((item) => {
+            const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-statlist-label", children: item.label }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: item.count === 0 ? "neutral" : (item.tone ?? "neutral"), children: item.count })] }));
+            return item.href ? ((0, jsx_runtime_1.jsx)("a", { href: item.href, onClick: item.onClick, className: "crisp-statlist-row", children: content }, item.id)) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-statlist-row", children: content }, item.id));
+        })) }));
+}
+StatList.displayName = "StatList";

package/dist/cjs/product/statlist/statlist.recipe.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.statlistRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A list of label + trailing-count rows, each optionally a link — the
+// "N findings of this kind" shape a dashboard's own status summary and an
+// audit-readiness check list both need. No direct Attio widget measures
+// this exact row (Attio's own Reports/Dashboards surface in this workspace
+// has bar/line/number report tiles, not a findings list), so this reuses
+// already-measured crisp values throughout rather than a fresh guess:
+// TaskList's own row-divider structure (border-top, no border on the first
+// row), the type scale's own `md`/`sm` sizes, and Badge's own tone colours
+// for the trailing count — no new pixel or colour value is introduced here.
+const config = (0, core_1.defineRecipe)({
+    name: "statlist",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-statlist-row { display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["3"]}; padding: ${tokens_1.contract.space["2.5"]} 0; border-top: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.md}; color: inherit; text-decoration: none; }
+    & .crisp-statlist-row:first-child { border-top: none; }
+    & a.crisp-statlist-row:hover .crisp-statlist-label { color: ${tokens_1.contract.fgBrandSoft}; }
+
+    & .crisp-statlist-label { color: ${tokens_1.contract.fgMuted}; }
+
+    & .crisp-statlist-empty { padding: ${tokens_1.contract.space["4"]} 0; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.statlistRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/esm/components/breadcrumb/breadcrumb.js

@@ -1,11 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useCrispMessage } from "../../core/index.js";
 import { breadcrumbRecipe } from "./breadcrumb.recipe.js";
 /**
  * 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 function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb", className, ...rest }) {
+export function Breadcrumb({ items, separator, "aria-label": ariaLabelProp, className, ...rest }) {
+    // crisp/#471: an explicit prop always wins; missing, it reads the nearest
+    // CrispMessagesProvider's translation of the English default, or that
+    // default itself with no provider — unchanged from before this existed.
+    const ariaLabel = useCrispMessage(ariaLabelProp, "Breadcrumb");
     // Live-measured (app.attio.com/<ws>/home, /companies,
     // /company/<id>/overview): a plain rounded divider, not a chevron -- a
     // symmetric shape needs no RTL mirroring, unlike the ChevronRight this

package/dist/esm/components/columncalc/columncalc.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, Plus } from "lucide-react";
 import * as React from "react";
+import { useCrispMessage, useCrispMessages } from "../../core/index.js";
 import { Menu, MenuItem } from "../menu/index.js";
 import { columncalcRecipe } from "./columncalc.recipe.js";
 /** The four calcs offered on every column, in their order. */
@@ -78,10 +79,18 @@ export function computeCalc(values, op) {
 const defaultFormat = (n, op) => op === "percentEmpty" || op === "percentFilled"
     ? `${Math.round(n)}%`
     : n.toLocaleString(undefined, { maximumFractionDigits: 2 });
-export function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opProp, onOpChange, addLabel = "Add calculation", sectionLabel = "Aggregations", format = defaultFormat, align, opLabels, className, ...rest }) {
-    // a partial override, so a consumer can translate one op without
-    // restating all nine
-    const labelFor = (o) => opLabels?.[o] ?? CALC_LABEL[o];
+export function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opProp, onOpChange, addLabel: addLabelProp, sectionLabel: sectionLabelProp, format = defaultFormat, align, opLabels, className, ...rest }) {
+    // crisp/#471: an explicit prop always wins; missing, it reads the nearest
+    // CrispMessagesProvider's translation of the English default, or that
+    // default itself with no provider — unchanged from before this existed.
+    const addLabel = useCrispMessage(addLabelProp, "Add calculation");
+    const sectionLabel = useCrispMessage(sectionLabelProp, "Aggregations");
+    const crispMessages = useCrispMessages();
+    // opLabels (a per-op partial override) wins, then the provider's own
+    // translation of CALC_LABEL's English default, then that default itself —
+    // a consumer can translate one op via opLabels without restating all
+    // nine, AND get the rest from a provider with no per-instance prop at all.
+    const labelFor = (o) => opLabels?.[o] ?? crispMessages[CALC_LABEL[o]] ?? CALC_LABEL[o];
     const [internal, setInternal] = React.useState(defaultOp);
     const op = opProp ?? internal;
     const setOp = (next) => {

package/dist/esm/components/composewindow/composewindow.js

@@ -3,7 +3,7 @@ import * as dialog from "@zag-js/dialog";
 import { normalizeProps, Portal, useMachine } from "@zag-js/react";
 import { Minus, Pin, X } from "lucide-react";
 import * as React from "react";
-import { cx, withDescribedBy } from "../../core/index.js";
+import { cx, useCrispMessage, withDescribedBy } from "../../core/index.js";
 import { composewindowRecipe } from "./composewindow.recipe.js";
 // A globally unique id per mounted instance — see command.tsx/dialog.tsx for
 // the rationale (the machine defers its dismissal listeners a frame, so a
@@ -56,7 +56,11 @@ function useComposeWindowInstanceId() {
  * measured screenshot. `trapFocus` follows the same call — a picture-in-
  * picture window, not a modal, so Tab is not caught inside it.
  */
-export function ComposeWindow({ open, onOpenChange, breadcrumb, minimized: minimizedProp, defaultMinimized, onMinimizedChange, pinned: pinnedProp, defaultPinned, onPinnedChange, width = 968, "aria-label": ariaLabel, minimizeLabel = "Minimize", pinLabel = "Pin to screen", closeLabel = "Close", children, className, style, "aria-describedby": describedBy, ...rest }) {
+export function ComposeWindow({ open, onOpenChange, breadcrumb, minimized: minimizedProp, defaultMinimized, onMinimizedChange, pinned: pinnedProp, defaultPinned, onPinnedChange, width = 968, "aria-label": ariaLabel, minimizeLabel: minimizeLabelProp, pinLabel: pinLabelProp, closeLabel: closeLabelProp, children, className, style, "aria-describedby": describedBy, ...rest }) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const minimizeLabel = useCrispMessage(minimizeLabelProp, "Minimize");
+    const pinLabel = useCrispMessage(pinLabelProp, "Pin to screen");
+    const closeLabel = useCrispMessage(closeLabelProp, "Close");
     const id = useComposeWindowInstanceId();
     const [internalMinimized, setInternalMinimized] = React.useState(defaultMinimized ?? false);
     const minimized = minimizedProp ?? internalMinimized;

package/dist/esm/components/contextmenu/contextmenu.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
-import { FloatingPortal, isInsideLaterFloatingLayer, registerFloatingLayer, } from "../../core/index.js";
+import { FloatingPortal, isInsideLaterFloatingLayer, registerFloatingLayer, useCrispMessage, } from "../../core/index.js";
 import { useMenuKeyboard } from "../menu/index.js";
 import { contextmenuRecipe } from "./contextmenu.recipe.js";
 /**
@@ -9,7 +9,9 @@ import { contextmenuRecipe } from "./contextmenu.recipe.js";
  * Wrap the target; right-clicking it opens the menu (flipping at the viewport
  * edges), closing on select, outside pointer-down, and Escape.
  */
-export function ContextMenu({ children, items, menuLabel = "Context menu", className, asChild = false, }) {
+export function ContextMenu({ children, items, menuLabel: menuLabelProp, className, asChild = false, }) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const menuLabel = useCrispMessage(menuLabelProp, "Context menu");
     const rootRef = React.useRef(null);
     const menuRef = React.useRef(null);
     const returnFocusTo = React.useRef(null);

package/dist/esm/components/filldoc/filldoc.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cx } from "../../core/index.js";
+import { cx, useCrispMessage } from "../../core/index.js";
 import { FillSheet } from "../fillsheet/index.js";
 import { filldocRecipe } from "./filldoc.recipe.js";
 /** Size a textarea to its content; see FillSheet's autoGrow for the reset. */
@@ -36,7 +36,12 @@ const emptyTable = () => ({
  * page covered in handles and grips stops looking like a page, which is the
  * whole thing this is for.
  */
-export const FillDoc = React.forwardRef(function FillDoc({ blocks, onBlocksChange, mode = "edit", page = "a4", label, addTextLabel = "Text", addHeadingLabel = "Heading", addTableLabel = "Table", removeLabel = "Remove", className, style, ...rest }, forwardedRef) {
+export const FillDoc = React.forwardRef(function FillDoc({ blocks, onBlocksChange, mode = "edit", page = "a4", label, addTextLabel: addTextLabelProp, addHeadingLabel: addHeadingLabelProp, addTableLabel: addTableLabelProp, removeLabel: removeLabelProp, className, style, ...rest }, forwardedRef) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const addTextLabel = useCrispMessage(addTextLabelProp, "Text");
+    const addHeadingLabel = useCrispMessage(addHeadingLabelProp, "Heading");
+    const addTableLabel = useCrispMessage(addTableLabelProp, "Table");
+    const removeLabel = useCrispMessage(removeLabelProp, "Remove");
     const editable = mode === "edit";
     const replace = (i, block) => {
         const next = blocks.slice();

package/dist/esm/components/spinner/spinner.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useCrispMessage } from "../../core/index.js";
 import { spinnerRecipe } from "./spinner.recipe.js";
 /** A spinning ring indicator. Reports `role="status"` for assistive tech. */
-export function Spinner({ size = 16, "aria-label": ariaLabel = "Loading", className, ...rest }) {
+export function Spinner({ size = 16, "aria-label": ariaLabelProp, className, ...rest }) {
+    // crisp/#471: same resolution order as Breadcrumb's own.
+    const ariaLabel = useCrispMessage(ariaLabelProp, "Loading");
     return (_jsx("span", { role: "status", "aria-label": ariaLabel, className: spinnerRecipe({ className }), ...rest, style: {
             width: size,
             height: size,

package/dist/esm/index.js

@@ -78,6 +78,7 @@ export * from "./product/richtext/index.js";
 export * from "./product/settingssection/index.js";
 export * from "./product/settingsshell/index.js";
 export * from "./product/sidebar/index.js";
+export * from "./product/statlist/index.js";
 export * from "./product/tasklist/index.js";
 export * from "./product/trialbanner/index.js";
 export * from "./product/viewtoggle/index.js";

package/dist/esm/product/statlist/index.js

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

package/dist/esm/product/statlist/statlist.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "../../components/badge/badge.js";
+import { statlistRecipe } from "./statlist.recipe.js";
+/**
+ * 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 function StatList({ items, emptyLabel = "Nothing to show", className, ...rest }) {
+    return (_jsx("div", { className: statlistRecipe({ className }), ...rest, children: items.length === 0 ? (_jsx("div", { className: "crisp-statlist-empty", children: emptyLabel })) : (items.map((item) => {
+            const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-statlist-label", children: item.label }), _jsx(Badge, { tone: item.count === 0 ? "neutral" : (item.tone ?? "neutral"), children: item.count })] }));
+            return item.href ? (_jsx("a", { href: item.href, onClick: item.onClick, className: "crisp-statlist-row", children: content }, item.id)) : (_jsx("div", { className: "crisp-statlist-row", children: content }, item.id));
+        })) }));
+}
+StatList.displayName = "StatList";

package/dist/esm/product/statlist/statlist.recipe.js

@@ -0,0 +1,29 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A list of label + trailing-count rows, each optionally a link — the
+// "N findings of this kind" shape a dashboard's own status summary and an
+// audit-readiness check list both need. No direct Attio widget measures
+// this exact row (Attio's own Reports/Dashboards surface in this workspace
+// has bar/line/number report tiles, not a findings list), so this reuses
+// already-measured crisp values throughout rather than a fresh guess:
+// TaskList's own row-divider structure (border-top, no border on the first
+// row), the type scale's own `md`/`sm` sizes, and Badge's own tone colours
+// for the trailing count — no new pixel or colour value is introduced here.
+const config = defineRecipe({
+    name: "statlist",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-statlist-row { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["3"]}; padding: ${c.space["2.5"]} 0; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.md}; color: inherit; text-decoration: none; }
+    & .crisp-statlist-row:first-child { border-top: none; }
+    & a.crisp-statlist-row:hover .crisp-statlist-label { color: ${c.fgBrandSoft}; }
+
+    & .crisp-statlist-label { color: ${c.fgMuted}; }
+
+    & .crisp-statlist-empty { padding: ${c.space["4"]} 0; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const statlistRecipe = resolveRecipe(config);
+export default config;

package/dist/statlist.css

@@ -0,0 +1,8 @@
+.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); }
+}

package/dist/statlist.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface StatlistVariants {
+
+}
+
+export declare const statlistRecipe: RecipeFn<{  }>;

package/dist/statlist.layered.css

@@ -0,0 +1,10 @@
+@layer crisp-components {
+.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); }
+}
+}

package/dist/styles.css

@@ -2729,6 +2729,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/styles.layered.css

@@ -2730,6 +2730,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/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/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/index.d.ts

@@ -70,6 +70,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.1",
+  "version": "0.53.3",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -388,6 +388,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",