@crisp-ui-kit/crisp 0.20.2 → 0.21.0

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.onboardingRecipe = exports.OnboardingChecklist = void 0;
+exports.onboardingRecipe = exports.onboardingLabels = exports.OnboardingChecklist = void 0;
 var onboarding_1 = require("./onboarding");
 Object.defineProperty(exports, "OnboardingChecklist", { enumerable: true, get: function () { return onboarding_1.OnboardingChecklist; } });
+Object.defineProperty(exports, "onboardingLabels", { enumerable: true, get: function () { return onboarding_1.onboardingLabels; } });
 var onboarding_recipe_1 = require("./onboarding.recipe");
 Object.defineProperty(exports, "onboardingRecipe", { enumerable: true, get: function () { return onboarding_recipe_1.onboardingRecipe; } });

package/dist/cjs/product/onboarding/onboarding.js

@@ -1,17 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.onboardingLabels = void 0;
 exports.OnboardingChecklist = OnboardingChecklist;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const onboarding_recipe_1 = require("./onboarding.recipe");
+/**
+ * The English defaults for the two pieces of copy that are formatters rather
+ * than strings. Exported so a consumer can wrap one instead of restating it,
+ * and so the strings live in one place rather than inside the signature.
+ */
+exports.onboardingLabels = {
+    progressText: (done, total) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("b", { children: [done, "/", total] }), " ", "steps completed"] })),
+    completedStepLabel: (label) => `${String(label)} — completed`,
+};
 /**
  * An onboarding checklist card — measured from Attio's floating "Getting
  * started" widget. Title + optional menu/minimize, a segmented progress bar,
  * and step rows (completed rows strike through with a brand check).
  */
-function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", }) {
+function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", progressText = exports.onboardingLabels.progressText, completedStepLabel = exports.onboardingLabels.completedStepLabel, }) {
     const total = steps.length;
     const done = steps.filter((s) => s.done).length;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, onboarding_recipe_1.onboardingRecipe)({ className }), children: [(0, jsx_runtime_1.jsxs)("div", { className: "onboarding-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "onboarding-title", children: title }), onMenu && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "onboarding-sub", children: [(0, jsx_runtime_1.jsxs)("b", { children: [done, "/", total] }), " ", "steps completed", encouragement ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => ((0, jsx_runtime_1.jsx)("span", { className: "onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), (0, jsx_runtime_1.jsx)("div", { className: "onboarding-steps", children: steps.map((s) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "onboarding-step", "data-done": s.done ? "" : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [(0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-icon", children: s.icon }), (0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-label", children: s.label }), (0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-check", children: s.done && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, onboarding_recipe_1.onboardingRecipe)({ className }), children: [(0, jsx_runtime_1.jsxs)("div", { className: "onboarding-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "onboarding-title", children: title }), onMenu && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "onboarding-sub", children: [progressText(done, total), encouragement ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => ((0, jsx_runtime_1.jsx)("span", { className: "onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), (0, jsx_runtime_1.jsx)("div", { className: "onboarding-steps", children: steps.map((s) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "onboarding-step", "data-done": s.done ? "" : undefined, "aria-label": s.done ? completedStepLabel(s.label) : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [(0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-icon", children: s.icon }), (0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-label", children: s.label }), (0, jsx_runtime_1.jsx)("span", { className: "onboarding-step-check", children: s.done && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
 }
 OnboardingChecklist.displayName = "OnboardingChecklist";

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.recordpageRecipe = exports.RecordPage = void 0;
+exports.recordpageRecipe = exports.recordPageLabels = exports.RecordPage = void 0;
 var recordpage_1 = require("./recordpage");
 Object.defineProperty(exports, "RecordPage", { enumerable: true, get: function () { return recordpage_1.RecordPage; } });
+Object.defineProperty(exports, "recordPageLabels", { enumerable: true, get: function () { return recordpage_1.recordPageLabels; } });
 var recordpage_recipe_1 = require("./recordpage.recipe");
 Object.defineProperty(exports, "recordpageRecipe", { enumerable: true, get: function () { return recordpage_recipe_1.recordpageRecipe; } });

package/dist/cjs/product/recordpage/recordpage.js

@@ -119,6 +119,8 @@ exports.recordPageLabels = {
     },
     domainSetTo: (value) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Domain set to ", (0, jsx_runtime_1.jsx)("b", { children: value })] })),
     taggedCategories: (count) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Tagged ", (0, jsx_runtime_1.jsx)("b", { children: count }), " categories"] })),
+    recordCreated: (name) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { children: name }), " record was created"] })),
+    noEmailsWith: (name) => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["No emails logged with ", name, " yet."] }),
 };
 function TagsValue({ values }) {
     const [expanded, setExpanded] = React.useState(false);
@@ -367,13 +369,13 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
             : null,
         {
             id: "created",
-            text: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { children: name }), " record was created"] })),
+            text: t.recordCreated(name),
             time: "1 day ago",
         },
     ].filter(Boolean);
     const shownActivity = showAllActivity ? activity : activity.slice(0, 2);
     const activityFeed = ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.activity, action: activity.length > 2 ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-viewall recordpage-viewall--inline", onClick: () => setShowAllActivity((s) => !s), children: showAllActivity ? t.showLess : t.viewAll })) : undefined }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-feed", children: shownActivity.map((a) => ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-feed-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "recordpage-feed-dot", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Activity, { size: 13, strokeWidth: 2 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-feed-body", children: [a.text, (0, jsx_runtime_1.jsx)("div", { className: "recordpage-feed-time", children: a.time })] })] }, a.id))) })] }));
-    const emailsEmpty = ((0, jsx_runtime_1.jsxs)(EmptyCard, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: 22, strokeWidth: 1.5 }), children: ["No emails logged with ", name, " yet."] }));
+    const emailsEmpty = ((0, jsx_runtime_1.jsx)(EmptyCard, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: 22, strokeWidth: 1.5 }), children: t.noEmailsWith(name) }));
     const panel = (active) => {
         switch (active) {
             case "overview":

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

@@ -1,2 +1,2 @@
-export { OnboardingChecklist, } from "./onboarding.js";
+export { OnboardingChecklist, onboardingLabels, } from "./onboarding.js";
 export { onboardingRecipe } from "./onboarding.recipe.js";

package/dist/esm/product/onboarding/onboarding.js

@@ -1,14 +1,23 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, MoreHorizontal } from "lucide-react";
 import { onboardingRecipe } from "./onboarding.recipe.js";
+/**
+ * The English defaults for the two pieces of copy that are formatters rather
+ * than strings. Exported so a consumer can wrap one instead of restating it,
+ * and so the strings live in one place rather than inside the signature.
+ */
+export const onboardingLabels = {
+    progressText: (done, total) => (_jsxs(_Fragment, { children: [_jsxs("b", { children: [done, "/", total] }), " ", "steps completed"] })),
+    completedStepLabel: (label) => `${String(label)} — completed`,
+};
 /**
  * An onboarding checklist card — measured from Attio's floating "Getting
  * started" widget. Title + optional menu/minimize, a segmented progress bar,
  * and step rows (completed rows strike through with a brand check).
  */
-export function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", }) {
+export function OnboardingChecklist({ title = "Getting started", steps, encouragement = "Keep it up!", onStepClick, onMenu, onMinimize, className, optionsLabel = "Checklist options", minimizeLabel = "Minimize", progressLabel = "Onboarding progress", progressText = onboardingLabels.progressText, completedStepLabel = onboardingLabels.completedStepLabel, }) {
     const total = steps.length;
     const done = steps.filter((s) => s.done).length;
-    return (_jsxs("div", { className: onboardingRecipe({ className }), children: [_jsxs("div", { className: "onboarding-head", children: [_jsx("span", { className: "onboarding-title", children: title }), onMenu && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), _jsxs("span", { className: "onboarding-sub", children: [_jsxs("b", { children: [done, "/", total] }), " ", "steps completed", encouragement ? _jsxs(_Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), _jsx("div", { className: "onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => (_jsx("span", { className: "onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), _jsx("div", { className: "onboarding-steps", children: steps.map((s) => (_jsxs("button", { type: "button", className: "onboarding-step", "data-done": s.done ? "" : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [_jsx("span", { className: "onboarding-step-icon", children: s.icon }), _jsx("span", { className: "onboarding-step-label", children: s.label }), _jsx("span", { className: "onboarding-step-check", children: s.done && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
+    return (_jsxs("div", { className: onboardingRecipe({ className }), children: [_jsxs("div", { className: "onboarding-head", children: [_jsx("span", { className: "onboarding-title", children: title }), onMenu && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": optionsLabel, onClick: onMenu, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), onMinimize && (_jsx("button", { type: "button", className: "onboarding-iconbtn", "aria-label": minimizeLabel, onClick: onMinimize, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) }))] }), _jsxs("span", { className: "onboarding-sub", children: [progressText(done, total), encouragement ? _jsxs(_Fragment, { children: [" \u00B7 ", encouragement] }) : null] }), _jsx("div", { className: "onboarding-progress", role: "progressbar", "aria-valuenow": done, "aria-valuemin": 0, "aria-valuemax": total, "aria-label": progressLabel, children: Array.from({ length: total }, (_, i) => (_jsx("span", { className: "onboarding-seg", "data-done": i < done ? "" : undefined }, i))) }), _jsx("div", { className: "onboarding-steps", children: steps.map((s) => (_jsxs("button", { type: "button", className: "onboarding-step", "data-done": s.done ? "" : undefined, "aria-label": s.done ? completedStepLabel(s.label) : undefined, disabled: s.done, onClick: s.done ? undefined : () => onStepClick?.(s.id), children: [_jsx("span", { className: "onboarding-step-icon", children: s.icon }), _jsx("span", { className: "onboarding-step-label", children: s.label }), _jsx("span", { className: "onboarding-step-check", children: s.done && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, s.id))) })] }));
 }
 OnboardingChecklist.displayName = "OnboardingChecklist";

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

@@ -1,2 +1,2 @@
-export { RecordPage } from "./recordpage.js";
+export { RecordPage, recordPageLabels, } from "./recordpage.js";
 export { recordpageRecipe } from "./recordpage.recipe.js";

package/dist/esm/product/recordpage/recordpage.js

@@ -82,6 +82,8 @@ export const recordPageLabels = {
     },
     domainSetTo: (value) => (_jsxs(_Fragment, { children: ["Domain set to ", _jsx("b", { children: value })] })),
     taggedCategories: (count) => (_jsxs(_Fragment, { children: ["Tagged ", _jsx("b", { children: count }), " categories"] })),
+    recordCreated: (name) => (_jsxs(_Fragment, { children: [_jsx("b", { children: name }), " record was created"] })),
+    noEmailsWith: (name) => _jsxs(_Fragment, { children: ["No emails logged with ", name, " yet."] }),
 };
 function TagsValue({ values }) {
     const [expanded, setExpanded] = React.useState(false);
@@ -330,13 +332,13 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
             : null,
         {
             id: "created",
-            text: (_jsxs(_Fragment, { children: [_jsx("b", { children: name }), " record was created"] })),
+            text: t.recordCreated(name),
             time: "1 day ago",
         },
     ].filter(Boolean);
     const shownActivity = showAllActivity ? activity : activity.slice(0, 2);
     const activityFeed = (_jsxs("section", { children: [_jsx(SectionHead, { title: t.tabs.activity, action: activity.length > 2 ? (_jsx("button", { type: "button", className: "recordpage-viewall recordpage-viewall--inline", onClick: () => setShowAllActivity((s) => !s), children: showAllActivity ? t.showLess : t.viewAll })) : undefined }), _jsx("div", { className: "recordpage-feed", children: shownActivity.map((a) => (_jsxs("div", { className: "recordpage-feed-item", children: [_jsx("span", { className: "recordpage-feed-dot", children: _jsx(ActivityIcon, { size: 13, strokeWidth: 2 }) }), _jsxs("div", { className: "recordpage-feed-body", children: [a.text, _jsx("div", { className: "recordpage-feed-time", children: a.time })] })] }, a.id))) })] }));
-    const emailsEmpty = (_jsxs(EmptyCard, { icon: _jsx(Inbox, { size: 22, strokeWidth: 1.5 }), children: ["No emails logged with ", name, " yet."] }));
+    const emailsEmpty = (_jsx(EmptyCard, { icon: _jsx(Inbox, { size: 22, strokeWidth: 1.5 }), children: t.noEmailsWith(name) }));
     const panel = (active) => {
         switch (active) {
             case "overview":

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

@@ -1,2 +1,2 @@
-export { OnboardingChecklist, type OnboardingChecklistProps, type OnboardingStep, } from "./onboarding";
+export { OnboardingChecklist, type OnboardingChecklistProps, type OnboardingStep, onboardingLabels, } from "./onboarding";
 export { onboardingRecipe } from "./onboarding.recipe";

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

@@ -14,6 +14,18 @@ export type OnboardingChecklistProps = {
     minimizeLabel?: string;
     /** Accessible name for the progress bar. */
     progressLabel?: string;
+    /**
+     * The "N/total steps completed" line. A formatter, not a string: the count
+     * moves within the sentence between languages, so a template with holes
+     * cannot be translated (#216).
+     */
+    progressText?: (done: number, total: number) => React.ReactNode;
+    /**
+     * Accessible name for a completed step. Without one, a done step announces
+     * as "…, button, dimmed" and the strikethrough and check glyph — its only
+     * other signals — are invisible to a screen reader.
+     */
+    completedStepLabel?: (label: React.ReactNode) => string;
     title?: React.ReactNode;
     steps: OnboardingStep[];
     /** Subtitle after "N/total steps completed" (default "Keep it up!"). */
@@ -26,12 +38,21 @@ export type OnboardingChecklistProps = {
     onMinimize?: () => void;
     className?: string;
 };
+/**
+ * The English defaults for the two pieces of copy that are formatters rather
+ * than strings. Exported so a consumer can wrap one instead of restating it,
+ * and so the strings live in one place rather than inside the signature.
+ */
+export declare const onboardingLabels: {
+    progressText: (done: number, total: number) => React.ReactNode;
+    completedStepLabel: (label: React.ReactNode) => string;
+};
 /**
  * An onboarding checklist card — measured from Attio's floating "Getting
  * started" widget. Title + optional menu/minimize, a segmented progress bar,
  * and step rows (completed rows strike through with a brand check).
  */
-export declare function OnboardingChecklist({ title, steps, encouragement, onStepClick, onMenu, onMinimize, className, optionsLabel, minimizeLabel, progressLabel, }: OnboardingChecklistProps): React.JSX.Element;
+export declare function OnboardingChecklist({ title, steps, encouragement, onStepClick, onMenu, onMinimize, className, optionsLabel, minimizeLabel, progressLabel, progressText, completedStepLabel, }: OnboardingChecklistProps): React.JSX.Element;
 export declare namespace OnboardingChecklist {
     var displayName: string;
 }

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

@@ -1,2 +1,2 @@
-export { RecordPage, type RecordPageProps } from "./recordpage";
+export { RecordPage, type RecordPageLabels, type RecordPageLabelsInput, type RecordPageProps, recordPageLabels, } from "./recordpage";
 export { recordpageRecipe } from "./recordpage.recipe";

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

@@ -77,6 +77,10 @@ export type RecordPageLabels = {
     domainSetTo: (value: React.ReactNode) => React.ReactNode;
     /** Activity line for added categories, given how many. */
     taggedCategories: (count: number) => React.ReactNode;
+    /** Activity line for the record's creation, given its name. */
+    recordCreated: (name: React.ReactNode) => React.ReactNode;
+    /** Empty state on the Emails tab, given the record's name. */
+    noEmailsWith: (name: React.ReactNode) => React.ReactNode;
 };
 export declare const recordPageLabels: RecordPageLabels;
 /** Partial override of any chrome string; the keyed maps nest. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.20.2",
+  "version": "0.21.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",