@crisp-ui-kit/crisp 0.51.0 → 0.52.1

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

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.recordpanelRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
-const recordstable_tag_1 = require("../recordstable/recordstable.tag");
 // A right-side record peek panel — slides in over the main content to show one
-// record's fields, the way a row peek panel opens. Positioned absolutely inside a
-// relative container (the app main area); slides in via @starting-style.
+// record's Highlights and Activity, the way Attio's own peek does. Positioned
+// absolutely inside a relative container (the app main area); slides in via
+// @starting-style.
 const config = (0, core_1.defineRecipe)({
     name: "recordpanel",
     base: `
@@ -21,53 +21,60 @@ const config = (0, core_1.defineRecipe)({
     @starting-style { transform: translateX(calc(100% + ${tokens_1.contract.space["2"]})); }
     & * { box-sizing: border-box; }
 
-    & .crisp-recordpanel-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    /* #448: measured live on app.attio.com's peek -- a toolbar row above
+       the identity header: Close, then Previous/Next, on the left; "Open
+       record" on the right. 49px tall, 8px/10px padding, a hairline border
+       beneath (the same borderSubtle every other panel/row edge here
+       already uses). Close keeps the existing transparent ghost button;
+       Previous/Next/Open record are a distinct field-elevation style
+       (white fill, e.field's own ring+shadow, solid icon) -- measured as
+       genuinely different chrome from Close, not a reuse. */
+    & .crisp-recordpanel-toolbar { display: flex; align-items: center; height: 49px; flex-shrink: 0; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["2.5"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-recordpanel-toolbar-spacer { flex: 1; }
+    & .crisp-recordpanel-pager { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; margin-inline-start: ${tokens_1.contract.space["3"]}; }
+    & .crisp-recordpanel-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s; }
+    & .crisp-recordpanel-iconbtn:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpanel-navbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; cursor: pointer; }
+    & .crisp-recordpanel-navbtn:hover:not(:disabled) { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-recordpanel-navbtn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+    & .crisp-recordpanel-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 52px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; }
     & .crisp-recordpanel-fav { width: 22px; height: ${tokens_1.contract.size.chip}; border-radius: ${tokens_1.contract.radius.sm}; flex-shrink: 0; object-fit: cover; background: ${tokens_1.contract.bgRaised}; }
     & .crisp-recordpanel-title { flex: 1; min-width: 0; font-size: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.2px; color: ${tokens_1.contract.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .crisp-recordpanel-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; transition: background-color .12s; }
-    & .crisp-recordpanel-iconbtn:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
 
     & .crisp-recordpanel-body { flex: 1; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]}; }
-    & .crisp-recordpanel-sectionlabel { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]}; }
-    & .crisp-recordpanel-field { display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2"]}; min-height: 32px; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.md}; }
-    & .crisp-recordpanel-field:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 3%, transparent); }
-    & .crisp-recordpanel-field-label { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 132px; flex-shrink: 0; padding-top: 3px; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.md}; }
-    & .crisp-recordpanel-field-label svg { flex-shrink: 0; }
-    & .crisp-recordpanel-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; padding-top: 3px; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
-    & .crisp-recordpanel-field-value[data-editable] { cursor: pointer; }
-    /* the click-to-edit trigger is a real <button> (keyboard-operable),
-       reset back to plain inline text and made a flex-wrap container of its
-       own -- FieldValue can render several chips (tags), which still need
-       to wrap the way they did before this had a button around them at
-       all. It wraps only FieldValue, never the error slot beside it (see
-       the component's own comment) -- NOT \`display: contents\`, which
-       drops a button's accessible semantics in some engines. */
-    & .crisp-recordpanel-edit-trigger { display: inline-flex; flex-wrap: wrap; align-items: center; gap: ${tokens_1.contract.space["1"]}; margin: 0; padding: 0; border: none; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
-    & .crisp-recordpanel-empty { color: ${tokens_1.contract.fgMuted}; }
 
-    /* #431: measured live on app.attio.com's record side panel -- clicking a
-       field's value opens a plain, borderless field exactly filling the
-       value's own box (no border, no background, no box-shadow), same font
-       as the value it replaces (hence \`font: inherit\`, not a restated
-       size/weight). A field row's own hover tint above already carries the
-       "this is interactive" affordance; the pending/error treatment isn't
-       Attio-measured -- it reuses the same tokens DataTable's identical
-       states already use (opacity 0.5, \`bgDanger\`), per #385/#430. */
-    & .crisp-recordpanel-edit { display: block; width: 100%; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; box-shadow: none; outline: none; font: inherit; color: inherit; }
-    /* not Attio-measured (its own field shows no focus ring either, caret
-       only) -- kept for real keyboard users, the same brand ring every
-       other crisp field already shows on focus (DataTable's identical
-       .crisp-datatable-edit:focus, e.g.). */
-    & .crisp-recordpanel-edit:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
-    & .crisp-recordpanel-edit:disabled { opacity: 0.5; cursor: not-allowed; }
-    & .crisp-recordpanel-edit-pending { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
-    & .crisp-recordpanel-edit-error { flex-basis: 100%; margin-top: ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.sm}; color: ${tokens_1.contract.bgDanger}; }
-    & .crisp-recordpanel-edit-picker { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; }
-    & .crisp-recordpanel-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; }
+    /* #448: measured live on app.attio.com's peek (hover a Companies row,
+       click "Open preview"). Section label reads identically for both
+       Highlights and Activity: 14px/500, the same 63%-of-fgPrimary mix
+       RecordPage's own field-label already uses (product/recordpage's
+       .crisp-recordpage-field-label) -- one more surface landing on the
+       same measured "muted section heading" colour. */
+    & .crisp-recordpanel-section { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]} 0; }
+    & .crisp-recordpanel-section-head { display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["2"]}; height: 20px; margin-bottom: ${tokens_1.contract.space["2"]}; }
+    & .crisp-recordpanel-section-label { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+    /* "View all" -- measured 10px/400, a lighter mix than the section label
+       (55%, not 63%) -- its own distinct, honestly-measured value, not a
+       reuse of a nearby one that happened to be close. */
+    & .crisp-recordpanel-section-action { border: none; background: none; padding: 0; font-family: inherit; font-size: 10px; font-weight: ${tokens_1.contract.weight.regular}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); cursor: pointer; }
+    & .crisp-recordpanel-section-action:hover { color: ${tokens_1.contract.fgPrimary}; }
 
-    ${recordstable_tag_1.recordTagCss}
-    & .crisp-recordpanel-link { color: ${tokens_1.contract.bgBrandSolid}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
-    & .crisp-recordpanel-link:hover { text-decoration: underline; }
+    /* Highlights: a 2-column grid of label+icon+value cards, no card
+       chrome at all (no border/background/radius/shadow -- confirmed on
+       the live DOM: every highlight's computed style is fully transparent).
+       8px row/column gap; two rows measured "233x86" inside 473px content
+       width is exactly (473 - 8) / 2. */
+    & .crisp-recordpanel-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: ${tokens_1.contract.space["2"]}; }
+    & .crisp-recordpanel-highlight { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
+    & .crisp-recordpanel-highlight-label { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+    & .crisp-recordpanel-highlight-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-recordpanel-highlight-label svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpanel-highlight-value { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; overflow: hidden; text-overflow: ellipsis; }
+
+    /* Activity is a consumer-supplied slot (crisp has no activity-feed
+       model of its own to render) -- this only wraps it with the measured
+       section heading above. */
+    & .crisp-recordpanel-activity { font-size: ${tokens_1.contract.text.lg}; }
 
     /* #329: an optional slot for record actions (e.g. Edit). Reuses the
        header's own measured values rather than inventing new ones -- the
@@ -76,6 +83,8 @@ const config = (0, core_1.defineRecipe)({
        edge), and the header/body gap (space.2) for its own vertical padding
        and for spacing between whatever it's given. */
     & .crisp-recordpanel-footer { flex-shrink: 0; display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
+
+    ${core_1.rtlFlipCss}
   `,
     variants: {},
     defaultVariants: {},

package/dist/cjs/product/recordstable/editable-field.js

@@ -37,18 +37,21 @@ exports.useEditableField = useEditableField;
 exports.editableInputType = editableInputType;
 const React = __importStar(require("react"));
 /**
- * The async-commit state machine behind `RecordPanel`/`RecordPage`'s
- * editable fields (#431) — the same shape `DataTable`'s own `commitEdit`
- * uses (#385/#430): a sync `onEdit` (returns `undefined`) commits and closes
+ * The async-commit state machine behind `RecordPage`'s editable Details
+ * column (#431) — the same shape `DataTable`'s own `commitEdit` uses
+ * (#385/#430): a sync `onEdit` (returns `undefined`) commits and closes
  * immediately; a Promise-returning `onEdit` keeps the field open and pending
  * while it settles, then either closes it (resolve) or closes it AND
  * reverts while showing the rejection's message (reject). The revert needs
- * no extra code here either: neither `RecordPanel` nor `RecordPage` mutates
- * `record` itself, so once `editingKey` clears, the field simply renders
- * `record[key]` again — whatever it still says.
+ * no extra code here either: `RecordPage` never mutates `record` itself, so
+ * once `editingKey` clears, the field simply renders `record[key]` again —
+ * whatever it still says.
  *
- * One hook shared by both consumers rather than two copies of the same
- * three `useState`s and the same `.then` branching.
+ * `RecordPanel` (the peek panel) used to share this hook too, before #448
+ * found that Attio's own peek has no editable field at all to attach it to
+ * — only `RecordPage`'s Details column does. Kept as its own module rather
+ * than folded back into `recordpage.tsx`: a second consumer turning up
+ * again is a smaller change than re-extracting it would be.
  */
 function useEditableField(onEdit) {
     const [editingKey, setEditingKey] = React.useState(null);

package/dist/cjs/product/recordstable/recordstable.tag.js

@@ -7,9 +7,14 @@ const tokens_1 = require("../../tokens");
  * `border-radius: ${c.radius.chip}`, 14px/20px at weight 500, and a 1px inset ring in the
  * tone's colour.
  *
- * Shared because RecordsTable and RecordPanel render the *same* chip. It used
- * to be pasted into both recipes, and the two copies had already started to
- * drift — adding the measured inset ring meant patching the same rules twice.
+ * Its own module (not pasted into `recordstable.recipe.ts`) because it used
+ * to be shared with `RecordPanel`'s own Details field list too, and the two
+ * copies had already started to drift before that sharing existed — adding
+ * the measured inset ring meant patching the same rules twice. `RecordPanel`
+ * no longer renders a Details list (#448, Attio's own peek doesn't have
+ * one), so `RecordsTable` is this module's only consumer now; kept as its
+ * own file rather than folded back in, since a second consumer showing up
+ * again is exactly how the drift happened the first time.
  */
 exports.recordTagCss = `& .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 30%, transparent); }

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.richtextRecipe = exports.RichTextEditor = void 0;
+exports.richtextRecipe = exports.RichTextEditor = exports.RICHTEXT_COLOR_TONES = void 0;
 var richtext_1 = require("./richtext");
+Object.defineProperty(exports, "RICHTEXT_COLOR_TONES", { enumerable: true, get: function () { return richtext_1.RICHTEXT_COLOR_TONES; } });
 Object.defineProperty(exports, "RichTextEditor", { enumerable: true, get: function () { return richtext_1.RichTextEditor; } });
 var richtext_recipe_1 = require("./richtext.recipe");
 Object.defineProperty(exports, "richtextRecipe", { enumerable: true, get: function () { return richtext_recipe_1.richtextRecipe; } });