@crisp-ui-kit/crisp 0.53.4 → 0.53.5

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

@@ -149,7 +149,7 @@ const exec = (cmd, value) => document.execCommand(cmd, false, value);
  * reach the identical menu, sitting at the end of the body's last line) —
  * only the two entry points #426 asked for.
  */
-exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", linkPromptLabel = "Link URL", imagePromptLabel = "Image URL", textColorLabel = "Text", highlightColorLabel = "Highlight", clearColorLabel = "Default", blockMenuLabel = "Body", blockMenuSearchPlaceholder = "Search items…", blockMenuEmptyLabel = "No matching blocks", mentionTrigger = "@", renderMentionPicker, readOnly = false, ...rest }, ref) {
+exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", linkPromptLabel = "Link URL", imagePromptLabel = "Image URL", textColorLabel = "Text", highlightColorLabel = "Highlight", clearColorLabel = "Default", blockMenuLabel = "Body", blockMenuSearchPlaceholder = "Search items…", blockMenuEmptyLabel = "No matching blocks", mentionTrigger = "@", renderMentionPicker, readOnly = false, showTitle = true, ...rest }, ref) {
     const titleRef = React.useRef(null);
     const bodyRef = React.useRef(null);
     const [bar, setBar] = React.useState(null);
@@ -550,12 +550,12 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
         ol: (0, jsx_runtime_1.jsx)(lucide_react_1.ListOrdered, { ...menuIc }),
         image: (0, jsx_runtime_1.jsx)(lucide_react_1.Image, { ...menuIc }),
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, richtext_recipe_1.richtextRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { ref: titleRef, className: "crisp-rte-title", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-label": titleLabel, "aria-readonly": readOnly || undefined, "data-placeholder": titlePlaceholder, onInput: readOnly
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, richtext_recipe_1.richtextRecipe)({ className }), ...rest, children: [showTitle && ((0, jsx_runtime_1.jsx)("div", { ref: titleRef, className: "crisp-rte-title", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-label": titleLabel, "aria-readonly": readOnly || undefined, "data-placeholder": titlePlaceholder, onInput: readOnly
                     ? undefined
                     : () => {
                         syncEmpty(titleRef.current);
                         emit();
-                    } }), (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, className: "crisp-rte-body", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-multiline": "true", "aria-label": bodyLabel, "aria-readonly": readOnly || undefined, "data-placeholder": placeholder, onInput: readOnly
+                    } })), (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, className: "crisp-rte-body", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-multiline": "true", "aria-label": bodyLabel, "aria-readonly": readOnly || undefined, "data-placeholder": placeholder, onInput: readOnly
                     ? undefined
                     : () => {
                         syncEmpty(bodyRef.current);

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

@@ -6,13 +6,22 @@ const tokens_1 = require("../../tokens");
 // A settings section — measured from Settings pages: a 16px/600 title
 // with an optional subtitle, then a stack of rows (form fields, toggles…). Rows
 // gap evenly; an optional trailing action sits on the title row.
+//
+// Title line-height/letter-spacing and subtitle font-size/line-height
+// re-measured live at app.attio.com/<workspace>/settings/account against a
+// subsection heading ("Time preferences") — crisp#522. The subtitle's own
+// colour (measured `rgba(0,0,0,0.63)`, a black-alpha value) is left as
+// `fgMuted` pending a dark-mode measurement: a raw alpha-black has no
+// existing token match and would need its own light/dark pair to stay
+// legible in dark mode (Lesson: theme-constant vs theme-flipping colours
+// must each be independently verified).
 const config = (0, core_1.defineRecipe)({
     name: "settingssection",
     base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans};
     & .crisp-settingssection-head { display: flex; align-items: flex-start; gap: ${tokens_1.contract.space["2"]}; }
     & .crisp-settingssection-heading { flex: 1; min-width: 0; }
-    & .crisp-settingssection-title { font-size: ${tokens_1.contract.text.xl}; line-height: 24px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.2px; color: ${tokens_1.contract.fgPrimary}; }
-    & .crisp-settingssection-sub { margin-top: ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.md}; line-height: 18px; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-settingssection-title { font-size: ${tokens_1.contract.text.xl}; line-height: 20px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.16px; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-settingssection-sub { margin-top: ${tokens_1.contract.space["0.5"]}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgMuted}; }
     & .crisp-settingssection-action { flex-shrink: 0; }
     & .crisp-settingssection-body { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; margin-top: ${tokens_1.contract.space["3"]}; }`,
     variants: {},

package/dist/esm/product/richtext/richtext.js

@@ -113,7 +113,7 @@ const exec = (cmd, value) => document.execCommand(cmd, false, value);
  * reach the identical menu, sitting at the end of the body's last line) —
  * only the two entry points #426 asked for.
  */
-export const RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", linkPromptLabel = "Link URL", imagePromptLabel = "Image URL", textColorLabel = "Text", highlightColorLabel = "Highlight", clearColorLabel = "Default", blockMenuLabel = "Body", blockMenuSearchPlaceholder = "Search items…", blockMenuEmptyLabel = "No matching blocks", mentionTrigger = "@", renderMentionPicker, readOnly = false, ...rest }, ref) {
+export const RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle = "", defaultHtml = "", titlePlaceholder = "Untitled", placeholder = "Start writing, or press a toolbar button…", onChange, className, titleLabel = "Title", bodyLabel = "Note body", linkPromptLabel = "Link URL", imagePromptLabel = "Image URL", textColorLabel = "Text", highlightColorLabel = "Highlight", clearColorLabel = "Default", blockMenuLabel = "Body", blockMenuSearchPlaceholder = "Search items…", blockMenuEmptyLabel = "No matching blocks", mentionTrigger = "@", renderMentionPicker, readOnly = false, showTitle = true, ...rest }, ref) {
     const titleRef = React.useRef(null);
     const bodyRef = React.useRef(null);
     const [bar, setBar] = React.useState(null);
@@ -514,12 +514,12 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
         ol: _jsx(ListOrdered, { ...menuIc }),
         image: _jsx(ImageIcon, { ...menuIc }),
     };
-    return (_jsxs("div", { className: richtextRecipe({ className }), ...rest, children: [_jsx("div", { ref: titleRef, className: "crisp-rte-title", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-label": titleLabel, "aria-readonly": readOnly || undefined, "data-placeholder": titlePlaceholder, onInput: readOnly
+    return (_jsxs("div", { className: richtextRecipe({ className }), ...rest, children: [showTitle && (_jsx("div", { ref: titleRef, className: "crisp-rte-title", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-label": titleLabel, "aria-readonly": readOnly || undefined, "data-placeholder": titlePlaceholder, onInput: readOnly
                     ? undefined
                     : () => {
                         syncEmpty(titleRef.current);
                         emit();
-                    } }), _jsx("div", { ref: bodyRef, className: "crisp-rte-body", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-multiline": "true", "aria-label": bodyLabel, "aria-readonly": readOnly || undefined, "data-placeholder": placeholder, onInput: readOnly
+                    } })), _jsx("div", { ref: bodyRef, className: "crisp-rte-body", contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", tabIndex: readOnly ? -1 : 0, "aria-multiline": "true", "aria-label": bodyLabel, "aria-readonly": readOnly || undefined, "data-placeholder": placeholder, onInput: readOnly
                     ? undefined
                     : () => {
                         syncEmpty(bodyRef.current);

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

@@ -3,13 +3,22 @@ import { contract as c } from "../../tokens/index.js";
 // A settings section — measured from Settings pages: a 16px/600 title
 // with an optional subtitle, then a stack of rows (form fields, toggles…). Rows
 // gap evenly; an optional trailing action sits on the title row.
+//
+// Title line-height/letter-spacing and subtitle font-size/line-height
+// re-measured live at app.attio.com/<workspace>/settings/account against a
+// subsection heading ("Time preferences") — crisp#522. The subtitle's own
+// colour (measured `rgba(0,0,0,0.63)`, a black-alpha value) is left as
+// `fgMuted` pending a dark-mode measurement: a raw alpha-black has no
+// existing token match and would need its own light/dark pair to stay
+// legible in dark mode (Lesson: theme-constant vs theme-flipping colours
+// must each be independently verified).
 const config = defineRecipe({
     name: "settingssection",
     base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans};
     & .crisp-settingssection-head { display: flex; align-items: flex-start; gap: ${c.space["2"]}; }
     & .crisp-settingssection-heading { flex: 1; min-width: 0; }
-    & .crisp-settingssection-title { font-size: ${c.text.xl}; line-height: 24px; font-weight: ${c.weight.semibold}; letter-spacing: -0.2px; color: ${c.fgPrimary}; }
-    & .crisp-settingssection-sub { margin-top: ${c.space["0.5"]}; font-size: ${c.text.md}; line-height: 18px; color: ${c.fgMuted}; }
+    & .crisp-settingssection-title { font-size: ${c.text.xl}; line-height: 20px; font-weight: ${c.weight.semibold}; letter-spacing: -0.16px; color: ${c.fgPrimary}; }
+    & .crisp-settingssection-sub { margin-top: ${c.space["0.5"]}; font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgMuted}; }
     & .crisp-settingssection-action { flex-shrink: 0; }
     & .crisp-settingssection-body { display: flex; flex-direction: column; gap: ${c.space["4"]}; margin-top: ${c.space["3"]}; }`,
     variants: {},

package/dist/settingssection.css

@@ -2,8 +2,8 @@
   display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans);
     & .crisp-settingssection-head { display: flex; align-items: flex-start; gap: var(--crisp-space-2); }
     & .crisp-settingssection-heading { flex: 1; min-width: 0; }
-    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.2px; color: var(--crisp-fg-primary); }
-    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-md); line-height: 18px; color: var(--crisp-fg-muted); }
+    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 20px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.16px; color: var(--crisp-fg-primary); }
+    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); }
     & .crisp-settingssection-action { flex-shrink: 0; }
     & .crisp-settingssection-body { display: flex; flex-direction: column; gap: var(--crisp-space-4); margin-top: var(--crisp-space-3); }
 }

package/dist/settingssection.layered.css

@@ -3,8 +3,8 @@
   display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans);
     & .crisp-settingssection-head { display: flex; align-items: flex-start; gap: var(--crisp-space-2); }
     & .crisp-settingssection-heading { flex: 1; min-width: 0; }
-    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.2px; color: var(--crisp-fg-primary); }
-    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-md); line-height: 18px; color: var(--crisp-fg-muted); }
+    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 20px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.16px; color: var(--crisp-fg-primary); }
+    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); }
     & .crisp-settingssection-action { flex-shrink: 0; }
     & .crisp-settingssection-body { display: flex; flex-direction: column; gap: var(--crisp-space-4); margin-top: var(--crisp-space-3); }
 }

package/dist/styles.css

@@ -2674,8 +2674,8 @@
   display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans);
     & .crisp-settingssection-head { display: flex; align-items: flex-start; gap: var(--crisp-space-2); }
     & .crisp-settingssection-heading { flex: 1; min-width: 0; }
-    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.2px; color: var(--crisp-fg-primary); }
-    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-md); line-height: 18px; color: var(--crisp-fg-muted); }
+    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 20px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.16px; color: var(--crisp-fg-primary); }
+    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); }
     & .crisp-settingssection-action { flex-shrink: 0; }
     & .crisp-settingssection-body { display: flex; flex-direction: column; gap: var(--crisp-space-4); margin-top: var(--crisp-space-3); }
 }

package/dist/styles.layered.css

@@ -2675,8 +2675,8 @@
   display: flex; flex-direction: column; box-sizing: border-box; font-family: var(--crisp-font-sans);
     & .crisp-settingssection-head { display: flex; align-items: flex-start; gap: var(--crisp-space-2); }
     & .crisp-settingssection-heading { flex: 1; min-width: 0; }
-    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.2px; color: var(--crisp-fg-primary); }
-    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-md); line-height: 18px; color: var(--crisp-fg-muted); }
+    & .crisp-settingssection-title { font-size: var(--crisp-text-xl); line-height: 20px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.16px; color: var(--crisp-fg-primary); }
+    & .crisp-settingssection-sub { margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); }
     & .crisp-settingssection-action { flex-shrink: 0; }
     & .crisp-settingssection-body { display: flex; flex-direction: column; gap: var(--crisp-space-4); margin-top: var(--crisp-space-3); }
 }

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

@@ -93,6 +93,16 @@ export type RichTextEditorProps = Omit<React.ComponentPropsWithoutRef<"div">, "c
      * headings/lists/marks all survive into it. No toolbar renders in this
      * mode. */
     readOnly?: boolean;
+    /**
+     * Renders the title field at all (default `true`, matching Attio's own
+     * preview — see `readOnly` above). `false` omits it from the DOM
+     * entirely, not just visually: for a consumer whose own layout already
+     * shows a note's title elsewhere (a list row's own heading, a record's
+     * collapsed-note summary), rendering it a second time here would
+     * duplicate it rather than match anything Attio does. `onChange`'s
+     * `title` is always `""` with this off; `defaultTitle` is ignored.
+     */
+    showTitle?: boolean;
     className?: string;
 };
 /**
@@ -187,5 +197,15 @@ export declare const RichTextEditor: React.ForwardRefExoticComponent<Omit<Omit<R
      * headings/lists/marks all survive into it. No toolbar renders in this
      * mode. */
     readOnly?: boolean;
+    /**
+     * Renders the title field at all (default `true`, matching Attio's own
+     * preview — see `readOnly` above). `false` omits it from the DOM
+     * entirely, not just visually: for a consumer whose own layout already
+     * shows a note's title elsewhere (a list row's own heading, a record's
+     * collapsed-note summary), rendering it a second time here would
+     * duplicate it rather than match anything Attio does. `onChange`'s
+     * `title` is always `""` with this off; `defaultTitle` is ignored.
+     */
+    showTitle?: boolean;
     className?: string;
 } & React.RefAttributes<RichTextEditorHandle>>;

package/package.json

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