@crisp-ui-kit/crisp 0.54.1 → 0.54.3

package/dist/esm/components/datatable/datatable.recipe.js

@@ -66,6 +66,10 @@ const config = defineRecipe({
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: ${c.bgSurface}; }
     & th[data-sticky] { z-index: 3; }
+    /* #554: a footer sticky-column cell sits in the bottom-sticky row (table.recipe.ts's
+       \`tfoot td { z-index: 2 }\`), which \`td[data-sticky]\`'s own higher-specificity
+       \`z-index: 1\` would otherwise undercut -- keep it level with the row it's in. */
+    & tfoot td[data-sticky] { z-index: 2; }
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface}); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); }
     & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }

package/dist/esm/components/emptystate/emptystate.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { emptystateRecipe } from "./emptystate.recipe.js";
 /** A centred empty-state panel — icon, title, description, optional action. */
-export function EmptyState({ icon, title, description, action, variant, className, ...rest }) {
-    return (_jsxs("div", { className: emptystateRecipe({ variant, className }), ...rest, children: [icon && _jsx("span", { className: "crisp-emptystate-icon", children: icon }), _jsx("div", { className: "crisp-emptystate-title", children: title }), description != null && (_jsx("div", { className: "crisp-emptystate-desc", children: description })), action && _jsx("div", { className: "crisp-emptystate-action", children: action })] }));
+export function EmptyState({ icon, title, description, action, learnMore, variant, className, ...rest }) {
+    const learnMoreInner = learnMore && (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-emptystate-learnmore-icon", children: learnMore.icon }), _jsx("span", { className: "crisp-emptystate-learnmore-title", children: learnMore.title })] }));
+    return (_jsxs("div", { className: emptystateRecipe({ variant, className }), ...rest, children: [icon && _jsx("span", { className: "crisp-emptystate-icon", children: icon }), _jsx("div", { className: "crisp-emptystate-title", children: title }), description != null && (_jsx("div", { className: "crisp-emptystate-desc", children: description })), action && _jsx("div", { className: "crisp-emptystate-action", children: action }), learnMore && (_jsxs("div", { className: "crisp-emptystate-learnmore", children: [_jsx("div", { className: "crisp-emptystate-learnmore-label", children: learnMore.label ?? "Learn more" }), learnMore.href ? (_jsx("a", { className: "crisp-emptystate-learnmore-card", href: learnMore.href, onClick: learnMore.onClick, children: learnMoreInner })) : (_jsx("button", { type: "button", className: "crisp-emptystate-learnmore-card", onClick: learnMore.onClick, children: learnMoreInner }))] }))] }));
 }
 EmptyState.displayName = "EmptyState";

package/dist/esm/components/emptystate/emptystate.recipe.js

@@ -7,7 +7,18 @@ const config = defineRecipe({
     & .crisp-emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent); color: ${c.fgMuted}; }
     & .crisp-emptystate-title { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
     & .crisp-emptystate-desc { max-width: 320px; font-size: ${c.text.md}; color: ${c.fgMuted}; }
-    & .crisp-emptystate-action { margin-top: ${c.space["2"]}; }`,
+    /* #603: measured 8px gap between "Import CSV"/"Connect data source" --
+       inline-flex so one action (the common case) or several lay out the
+       same way, wrapping if the container is narrow. */
+    & .crisp-emptystate-action { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: ${c.space["2"]}; margin-top: ${c.space["2"]}; }
+    /* #603: Attio's zero-records "Learn more" card -- a label above a
+       clickable icon+title tile. Left/start-aligned, unlike the rest of
+       this centred panel, so it overrides the base text-align. */
+    & .crisp-emptystate-learnmore { display: flex; flex-direction: column; align-items: stretch; gap: ${c.space["2"]}; margin-top: ${c.space["6"]}; text-align: start; }
+    & .crisp-emptystate-learnmore-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
+    & .crisp-emptystate-learnmore-card { display: flex; align-items: center; gap: ${c.space["2"]}; padding: ${c.space["2"]} ${c.space["3"]} ${c.space["2"]} ${c.space["2"]}; margin: 0; border: 1px solid ${c.borderSubtle}; border-radius: 18px; background: ${c.bgSurface}; font: inherit; text-align: start; text-decoration: none; color: inherit; cursor: pointer; }
+    & .crisp-emptystate-learnmore-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: ${c.radius.xl}; background: color-mix(in srgb, ${c.fgPrimary} 2%, transparent); color: ${c.fgMuted}; }
+    & .crisp-emptystate-learnmore-title { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }`,
     variants: {
         variant: {
             // compact icon tile (default)
@@ -22,6 +33,20 @@ const config = defineRecipe({
     & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
     & .crisp-emptystate-desc { max-width: 266px; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; }
     & .crisp-emptystate-action { margin-top: ${c.space["2"]}; }`,
+            // #603: Attio's zero-*records* table state (Users/Workspaces with
+            // nothing imported) -- the same dotted-grid backdrop `illustrated`
+            // uses, at its own measured 138x138 square (illustrated's is a
+            // 132x96 rectangle; different surface, not the same number).
+            // Attio's own illustration also draws four small "+" tick marks at
+            // the tile's corners -- a single proprietary SVG asset (confirmed
+            // by inspecting the live DOM: one <svg> with no separately
+            // measurable sub-elements), so not reproduced here per AUTHORING's
+            // "never copy Attio's icon set" rule; the icon itself is supplied
+            // by the consumer via the existing `icon` prop, same as every
+            // other variant.
+            records: `& .crisp-emptystate-icon { width: 138px; height: 138px; margin-bottom: ${c.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${c.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${c.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-desc { max-width: 266px; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; }`,
         },
     },
     defaultVariants: { variant: "default" },

package/dist/esm/components/emptystate/index.js

@@ -1,2 +1,2 @@
-export { EmptyState } from "./emptystate.js";
+export { EmptyState, } from "./emptystate.js";
 export { emptystateRecipe } from "./emptystate.recipe.js";

package/dist/esm/components/mentionchip/index.js

@@ -0,0 +1,2 @@
+export { MentionChip } from "./mentionchip.js";
+export { mentionChipRecipe } from "./mentionchip.recipe.js";

package/dist/esm/components/mentionchip/mentionchip.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { mentionChipRecipe } from "./mentionchip.recipe.js";
+/**
+ * A standalone "@mention" chip — the same look `RichTextEditor` draws
+ * inline while an editor is live (`.crisp-rte-mention`), exported on its
+ * own for a consumer rendering a mention OUTSIDE a mounted editor: a
+ * comment thread, a note's collapsed preview, anywhere a stored
+ * `@[Name](actor:id)`-shaped token needs to read as a person, not literal
+ * markup. Renders whatever `children` is given (the trigger character
+ * included, if the caller wants one, matching how `RichTextEditor`'s own
+ * chip includes it) rather than assuming an `@` prefix itself — plain text,
+ * no built-in click/remove behaviour (none was asked for; add one once a
+ * real interaction is measured, the same reasoning `Chip`'s own doc gives
+ * for not guessing a remove affordance).
+ */
+export const MentionChip = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    return (_jsx(Primitive.span, { ref: ref, asChild: asChild, className: mentionChipRecipe({ className }), ...props }));
+});
+MentionChip.displayName = "MentionChip";

package/dist/esm/components/mentionchip/mentionchip.recipe.js

@@ -0,0 +1,35 @@
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The exact same values `product/richtext`'s own inline "@mention" span
+// uses (`.crisp-rte-mention`, richtext.recipe.ts) — not re-measured against
+// Attio independently (#428's own doc: no live @mention was reachable to
+// read computed styles from, and typing one to create one is off-limits),
+// reused verbatim from the one measured "brand" tag/chip this repo already
+// has (Chip's own `tone="brand"`). Pulled out to its own top-level recipe,
+// rather than importing richtext's, because `.crisp-rte-mention`'s CSS is
+// nested under richtext's own root selector (`&`, i.e. native CSS
+// nesting) — it only resolves inside a mounted `RichTextEditor`. A
+// standalone consumer rendering a mention OUTSIDE an editor (a comment
+// thread, a note preview list) needs the same look with no such ancestor,
+// which is what this recipe is for. Kept deliberately un-pill-shaped (no
+// fixed height, no ring) unlike Chip's own `brand` tone: this reads as
+// tinted text flowing inside a sentence, the same as a live mention does
+// mid-edit, not a standalone tag sitting in its own table cell.
+const spec = defineSpec({
+    name: "mention-chip",
+    base: {
+        display: "inline",
+        borderRadius: c.radius.chip,
+        paddingInline: c.space["1"],
+        background: `color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent)`,
+        color: `color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary})`,
+        fontWeight: c.weight.medium,
+        cursor: "default",
+    },
+});
+const config = specToRecipe(spec);
+export const mentionChipRecipe = Object.assign(resolveRecipe(config), {
+    config,
+});
+export { spec };
+export default config;

package/dist/esm/components/personchip/index.js

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

package/dist/esm/components/personchip/personchip.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { contract as c } from "../../tokens/index.js";
+import { Avatar } from "../avatar/index.js";
+import { Chip } from "../chip/index.js";
+// The same five hashed avatar tones DataTable's own `avatarTone="hashed"`
+// picks from (datatable.tsx's private `TAG_TONES`, transcribed rather than
+// imported — DataTable owns its own file, and this is a one-line pure
+// function, not a visual value that could drift). `neutral`/`brand` are
+// left out: `neutral` is Avatar's own no-photo default (wrong here, every
+// name needs a colour to tell people apart) and `brand` is reserved for an
+// entity that IS the record a cell points at (`RecordChip`'s own tone),
+// which a person mention never is.
+const HASH_TONES = ["brand", "orange", "cyan", "purple", "green"];
+function hashTone(name) {
+    let h = 0;
+    for (let i = 0; i < name.length; i++)
+        h = (h * 31 + name.charCodeAt(i)) >>> 0;
+    return HASH_TONES[h % HASH_TONES.length];
+}
+function initials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return "?";
+    return (parts[0][0] + (parts[1]?.[0] ?? "")).toUpperCase();
+}
+/**
+ * A person, as a chip: a small avatar (a photo, or hashed-colour initials)
+ * plus their name, truncating with an ellipsis when it doesn't fit — Attio's
+ * own actor chip (measured live on `techpartners`, Tasks page, "Assigned to"
+ * column): a 16px circular avatar in a neutral `Chip`, `gap: 3px` between
+ * avatar and name (now `Chip`'s own base — every multi-child `Chip` gets
+ * it). Every other value — the pill's height, padding, radius, ring and text
+ * — is already `Chip`'s, unchanged; `PersonChip` adds no recipe of its own.
+ *
+ * Ellipsis only, no `Tooltip` on hover (#623 — no Attio reference for one;
+ * a truncated cell there is revealed by its own click-to-expand, #579, a
+ * different, DataTable-specific interaction).
+ *
+ * Composes `Chip`'s `truncate` CSS directly rather than its string-only
+ * auto-wrap (children here is an avatar plus a name, not a single string),
+ * so the name gets its own `.crisp-chip-label` span while the avatar stays
+ * fixed-size.
+ */
+export function PersonChip({ name, avatar, muted, className, ...props }) {
+    return (_jsxs(Chip, { tone: "neutral", truncate: true, className: className, ...props, children: [_jsx(Avatar, { size: "sm", shape: "circle", tone: avatar ? "neutral" : hashTone(name), children: avatar ? _jsx("img", { src: avatar, alt: "" }) : initials(name) }), _jsx("span", { className: "crisp-chip-label", style: muted ? { color: c.fgNeutralMuted } : undefined, children: name })] }));
+}
+PersonChip.displayName = "PersonChip";

package/dist/esm/components/table/table.js

@@ -12,11 +12,11 @@ export const Table = React.forwardRef(({ interactive, surface, className, wrappe
 // on the root for the same reason as Textarea: the wrapper is the box a
 // consumer sees and the scroll container they want to size. Native
 // table attributes still reach the <table> below.
-style, ...props }, ref) => (_jsx("div", { className: tableRecipe({
+style, tableStyle, ...props }, ref) => (_jsx("div", { className: tableRecipe({
         interactive,
         surface,
         className: wrapperClassName,
-    }), style: style, children: _jsx("div", { ...scrollProps, className: `crisp-table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: _jsx("table", { ref: ref, className: className, ...props, children: children }) }) })));
+    }), style: style, children: _jsx("div", { ...scrollProps, className: `crisp-table-scroll${scrollProps?.className ? ` ${scrollProps.className}` : ""}`, children: _jsx("table", { ref: ref, className: className, style: tableStyle, ...props, children: children }) }) })));
 Table.displayName = "Table";
 export const TableHeader = React.forwardRef((props, ref) => _jsx("thead", { ref: ref, ...props }));
 TableHeader.displayName = "TableHeader";

package/dist/esm/components/table/table.recipe.js

@@ -8,18 +8,30 @@ import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "table",
     base: `display: block; box-sizing: border-box; background: ${c.bgSurface};
-    & .crisp-table-scroll { overflow-x: auto; }
+    /* #554: both axes -- a consumer bounds the height via \`scrollProps\`
+       (style/className on this element), and the header/footer below pin
+       inside it exactly the way Attio's own grid does ("Both the header and
+       the summary row are sticky, on the scroll container rather than the
+       cells" -- docs/study/attio-table.md). Unbounded, \`overflow: auto\`
+       shows no vertical scrollbar and nothing sticks, so this is a no-op
+       for every existing consumer that never set a height. */
+    & .crisp-table-scroll { overflow: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: ${c.font.sans}; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
     /* #465: 12px, not crisp's old 8px -- measured on a live header cell
        (padding: 0 12px) and independently on a body cell's text inset
        (getBoundingClientRect delta from the cell edge). Matches
        ColumnCalc's own already-correct 12px trigger inset. */
     & th, & td { position: relative; height: ${c.size.tableRow}; padding: 0 ${c.space["3"]}; border-bottom: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    & th { height: ${c.size.tableHeader}; background: ${c.bgSurface}; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); user-select: none; }
+    /* #554: sticky on the vertical axis, mirroring RecordsTable's own
+       \`.crisp-recordstable-th\`. z-index 2 sits above a plain body cell (auto)
+       and below a sticky-column corner cell (DataTable's \`th[data-sticky]\`,
+       z-index 3), so the corner always wins. */
+    & th { position: sticky; top: 0; z-index: 2; height: ${c.size.tableHeader}; background: ${c.bgSurface}; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); user-select: none; }
     & td { color: ${c.fgPrimary}; background: ${c.bgSurface}; }
     & th:last-child, & td:last-child { border-inline-end: none; }
     & tbody tr:last-child td { border-bottom: none; }
-    & tfoot td { border-top: 1px solid ${c.borderSubtle}; border-bottom: 1px solid ${c.borderSubtle}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    /* #554: sticky to the bottom, mirroring \`.crisp-recordstable-sum\`. */
+    & tfoot td { position: sticky; bottom: 0; z-index: 2; border-top: 1px solid ${c.borderSubtle}; border-bottom: 1px solid ${c.borderSubtle}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     & caption { padding: ${c.space["2"]} ${c.space["2"]}; text-align: start; font-size: ${c.text.sm}; color: ${c.fgMuted}; caption-side: bottom; }
     & td[data-align="right"], & th[data-align="right"] { text-align: end; }
     & td[data-align="center"], & th[data-align="center"] { text-align: center; }`,

package/dist/esm/components/tabs/tabs.js

@@ -8,7 +8,7 @@ import { useTablistKeyboard } from "./tabs-keyboard.js";
  * Home/End jump); activation follows focus. Controlled via
  * `value`/`onValueChange`, or uncontrolled from `defaultValue`.
  */
-export function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, "aria-label": ariaLabel, ...rest }) {
+export function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, fill, "aria-label": ariaLabel, ...rest }) {
     // Scoped to this instance: `tab-${value}` and `panel-${value}` are global,
     // so two tab bars sharing a value mint the same id twice and every
     // aria-labelledby resolves to the first one (#227).
@@ -47,7 +47,7 @@ export function Tabs({ tabs, value, defaultValue, onValueChange, leading, childr
         select,
         listRef,
     });
-    return (_jsxs("div", { className: tabsRecipe({ className }), ...rest, children: [_jsxs("div", { ref: listRef, className: "crisp-tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && _jsx("span", { className: "crisp-tabs-leading", children: leading }), tabs.map((t) => {
+    return (_jsxs("div", { className: tabsRecipe({ fill, className }), ...rest, children: [_jsxs("div", { ref: listRef, className: "crisp-tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && _jsx("span", { className: "crisp-tabs-leading", children: leading }), tabs.map((t) => {
                         const selected = t.value === active;
                         return (_jsxs("button", { type: "button", role: "tab", id: tabId(t.value), "aria-selected": selected, "aria-controls": children && selected ? panelId(t.value) : undefined, tabIndex: tabIndexFor(t.value), "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "crisp-tabs-tab", onClick: () => select(t.value), children: [t.icon, _jsx("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && (_jsx("span", { className: "crisp-tabs-tab-badge", children: t.badge }))] }, t.value));
                     }), indicator && (_jsx("span", { className: "crisp-tabs-indicator", style: {

package/dist/esm/components/tabs/tabs.recipe.js

@@ -12,6 +12,22 @@ import { contract as c } from "../../tokens/index.js";
 // a 16px leading icon and an optional count badge. Measured from the live
 // app: bar `padding: 0 12px 8px`, 28px pills, 4/8 padding, 6px icon-label
 // gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
+//
+// The panel's own `padding-top` (`c.space["8"]`, 32px) is measured
+// separately, live, on a company record page (Overview tab): the gap from
+// the tab row's own bottom to the content below it (the "Highlights"
+// heading) is a clean 32px with zero margin/padding contributed by either
+// boundary — not the 12px a GRC consumer had been carrying locally, which
+// turned out (checking its own history) to have been measured against that
+// app's own demo rendering, never against Attio itself.
+//
+// The panel is also `display: flex; flex-direction: column` (structural,
+// not measured): a consumer's own content — a table sizing itself to "the
+// rest of the space" — needs a flex-column ancestor with a real height to
+// grow into. A GRC consumer used to supply that itself, wrapping every
+// `children(active)` in its own `<div className="flex h-full min-h-0
+// flex-col">`; dropping that wrapper in favour of `fill` without this would
+// have silently broken every such table the moment the wrapper went away.
 const config = defineRecipe({
     name: "tabs",
     base: `
@@ -29,11 +45,22 @@ const config = defineRecipe({
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${c.fgPrimary}; }
     & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: ${c.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
-    & .crisp-tabs-panel { flex: 1; min-height: 0; }
+    & .crisp-tabs-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: ${c.space["8"]}; }
     & .crisp-tabs-panel:focus-visible { outline: none; }
   `,
-    variants: {},
-    defaultVariants: {},
+    variants: {
+        // Opt-in: a `Tabs` dropped into a document-flow layout (a docs page, a
+        // demo) should size to its content like anything else. `fill` is for a
+        // consumer embedding it in a fixed-height shell — a record page, a full
+        // screen — matching the record page's own tab area, which visibly
+        // fills all available height (the same live check this file's panel
+        // measurement came from).
+        fill: {
+            true: `height: 100%;`,
+            false: "",
+        },
+    },
+    defaultVariants: { fill: false },
     compoundVariants: [],
 });
 export const tabsRecipe = Object.assign(resolveRecipe(config), { config });

package/dist/esm/components/text/index.js

@@ -0,0 +1,2 @@
+export { Text } from "./text.js";
+export { textRecipe } from "./text.recipe.js";

package/dist/esm/components/text/text.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { textRecipe } from "./text.recipe.js";
+/**
+ * Plain coloured text — `tone="default"` (the app's primary text colour) or
+ * `"muted"` — for the runs of text that aren't a Badge, a Chip, a link, or
+ * any of crisp's other typed things: a cell's own yes/no, an empty-state
+ * caption, a secondary line under a heading. One component so every such
+ * spot reaches for crisp's own tokens instead of each hand-writing its own
+ * colour utility for the same two values.
+ *
+ * Renders a `<span>` (inherits its size/weight/line-height from context —
+ * see `text.recipe.ts`'s doc for why `Text` sets none of those itself).
+ */
+export const Text = React.forwardRef(({ tone, className, asChild, children, ...props }, ref) => {
+    return (_jsx(Primitive.span, { ref: ref, asChild: asChild, className: textRecipe({ tone, className }), ...props, children: children }));
+});
+Text.displayName = "Text";

package/dist/esm/components/text/text.recipe.js

@@ -0,0 +1,31 @@
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// No new measurement — `tone` just names two colour tokens every other
+// component already carries (`fgPrimary`/`fgNeutralMuted`), for the plain
+// runs of text that aren't any of crisp's other typed things (a Badge, a
+// Chip, a link). Font size/weight/line-height are deliberately NOT set here:
+// unlike Badge or Chip, plain text has no single measured size across the
+// app (a table cell, a label, a caption are all different sizes) — `Text`
+// inherits type from its context, the same choice `MiddleTruncate` makes for
+// the same reason (see its own doc).
+const spec = defineSpec({
+    name: "text",
+    // `display: inline` -- a span's own default, stated rather than left
+    // implicit: an EMPTY base compiles to an empty string, and
+    // `core/resolve.ts`'s `if (base) classes.push(prefixedName)` treats that
+    // falsy string as "no base rule", which drops the `crisp-text` class
+    // itself, silently, from every instance (caught by this file's own
+    // tests going red on that exact class).
+    base: { display: "inline" },
+    variants: {
+        tone: {
+            default: { color: c.fgPrimary },
+            muted: { color: c.fgNeutralMuted },
+        },
+    },
+    defaultVariants: { tone: "default" },
+});
+const config = specToRecipe(spec);
+export const textRecipe = Object.assign(resolveRecipe(config), { config });
+export { spec };
+export default config;

package/dist/esm/core/floating-stack.js

@@ -48,6 +48,23 @@ export function isInsideLaterFloatingLayer(target, self) {
     }
     return false;
 }
+/**
+ * True when a layer is registered strictly after `self` — i.e. `self` has
+ * spawned a still-open nested layer of its own (a row's kebab `Menu` inside
+ * `SavedViews`' own panel, e.g.).
+ *
+ * This is `hasOpenFloatingLayer`'s sibling for a caller that DOES register
+ * itself on this stack: `hasOpenFloatingLayer` reads "is the stack
+ * non-empty", which is always true for such a caller once its own layer is
+ * open — checking that before closing on Escape would defer to itself
+ * forever and Escape would never close it. `self`'s own position on the
+ * stack has to be excluded from the count, which `hasOpenFloatingLayer`
+ * cannot do since it takes no argument.
+ */
+export function hasNestedFloatingLayer(self) {
+    const selfIndex = self ? stack.indexOf(self) : -1;
+    return selfIndex + 1 < stack.length;
+}
 /**
  * True when at least one `Select`/`MultiSelect`/`Menu`/`Popover`/
  * `ContextMenu` is currently open, anywhere (#361).

package/dist/esm/core/index.js

@@ -5,7 +5,7 @@ export { defineRecipe } from "./define.js";
 export { withDescribedBy } from "./dialog-description.js";
 export { isRtlElement } from "./direction.js";
 export { FloatingPortal } from "./floating-portal.js";
-export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
+export { hasNestedFloatingLayer, hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
 export { formValueStyle } from "./form-value.js";
 export { CrispMessagesProvider, useCrispComponentDefaults, useCrispMessage, useCrispMessages, } from "./i18n.js";
 export { matchMentionTrigger, } from "./mention.js";

package/dist/esm/index.js

@@ -33,9 +33,11 @@ export * from "./components/heatmapchart/index.js";
 export * from "./components/input/index.js";
 export * from "./components/kbd/index.js";
 export * from "./components/linechart/index.js";
+export * from "./components/mentionchip/index.js";
 export * from "./components/menu/index.js";
 export * from "./components/middletruncate/index.js";
 export * from "./components/multiselect/index.js";
+export * from "./components/personchip/index.js";
 export * from "./components/popover/index.js";
 export * from "./components/progress/index.js";
 export * from "./components/quantitypicker/index.js";
@@ -53,6 +55,7 @@ export * from "./components/switch/index.js";
 export * from "./components/table/index.js";
 export * from "./components/tabletoolbar/index.js";
 export * from "./components/tabs/index.js";
+export * from "./components/text/index.js";
 export * from "./components/textarea/index.js";
 export * from "./components/textlink/index.js";
 export * from "./components/timepicker/index.js";
@@ -72,7 +75,9 @@ export * from "./product/board/index.js";
 export * from "./product/command/index.js";
 export * from "./product/entitycard/index.js";
 export * from "./product/flowcanvas/index.js";
+export * from "./product/formdialog/index.js";
 export * from "./product/headerbar/index.js";
+export * from "./product/importdialog/index.js";
 export * from "./product/inbox/index.js";
 export * from "./product/listpage/index.js";
 export * from "./product/navitem/index.js";
@@ -81,11 +86,14 @@ export * from "./product/recordpage/index.js";
 export * from "./product/recordpanel/index.js";
 export * from "./product/recordstable/index.js";
 export * from "./product/richtext/index.js";
+export * from "./product/savedviews/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/taskstable/index.js";
+export * from "./product/themepicker/index.js";
 export * from "./product/trialbanner/index.js";
 export * from "./product/viewtoggle/index.js";
 // design tokens + recipe core (for building custom components)

package/dist/esm/product/formdialog/formdialog.js

@@ -0,0 +1,134 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "../../components/button/index.js";
+import { Dialog, DialogBody, DialogFooter } from "../../components/dialog/index.js";
+import { Switch } from "../../components/switch/index.js";
+import { useCrispMessage, usePrefersReducedMotion } from "../../core/index.js";
+import { formdialogRecipe } from "./formdialog.recipe.js";
+/**
+ * Whether a non-required field inside a `createMode` `FormDialog` gets
+ * `FormField`'s "(optional)" marker automatically — Attio suffixes every
+ * optional label this way on its own "New Company" dialog (crisp#548). A
+ * consumer's own field wrapper reads this once (`useFormDialogOptional`);
+ * `false` outside any `FormDialog`, or on an edit dialog.
+ */
+const OptionalLabelsContext = React.createContext(false);
+/** See `OptionalLabelsContext`. Call from a field wrapper as
+ *  `optional={useFormDialogOptional(required)}`. */
+export function useFormDialogOptional(required) {
+    return React.useContext(OptionalLabelsContext) && !required;
+}
+/**
+ * A modal for a create or edit form — crisp's own `Dialog`/`DialogBody`/
+ * `DialogFooter`, plus everything a record-creating form needs beyond plain
+ * chrome (crisp#548, moved out of internal/grc's own `forms.tsx`, called
+ * from nine places there): dirty tracking with a discard-changes confirm
+ * (any click/change/input inside the form marks it dirty; Escape/backdrop/
+ * header-×/Cancel all route through one `requestClose`, which only asks
+ * when something actually changed — a stacked crisp `Dialog`), a
+ * `beforeunload` guard for a reload or external navigation, and
+ * scroll-to-first-invalid-field once a submit attempt finishes (crisp's own
+ * `FormField` already marks every control `aria-invalid`, so this needs no
+ * per-field wiring). A record needs several fields at once to be valid,
+ * which is why records are not created by inline editing.
+ */
+export function FormDialog({ title, submitLabel, onSubmit, onClose, busy, error, children, wide = false, size, createMode = false, createMoreLabel: createMoreLabelProp, cancelLabel: cancelLabelProp, discardTitle: discardTitleProp, discardConfirmLabel: discardConfirmLabelProp, discardCancelLabel: discardCancelLabelProp, className, ...rest }) {
+    const createMoreLabel = useCrispMessage(createMoreLabelProp, "Create more");
+    const createRecordLabel = useCrispMessage(undefined, "Create record");
+    const cancelLabel = useCrispMessage(cancelLabelProp, "Cancel");
+    const discardTitle = useCrispMessage(discardTitleProp, "Discard changes? Your changes will be lost.");
+    const discardConfirmLabel = useCrispMessage(discardConfirmLabelProp, "Discard");
+    const discardCancelLabel = useCrispMessage(discardCancelLabelProp, "Keep editing");
+    const formId = React.useId();
+    const formRef = React.useRef(null);
+    const switchId = React.useId();
+    // Read at submit time (click, Enter, or Cmd/Ctrl+Enter alike — all three
+    // go through the one <form onSubmit>), so `onSubmit` never has to reach
+    // back into the footer to know which way the switch was left.
+    const [createMore, setCreateMore] = React.useState(false);
+    const [confirmingDiscard, setConfirmingDiscard] = React.useState(false);
+    // Dirtiness is detected generically (any click, change or text input
+    // anywhere inside the form), not wired per field: React delivers these as
+    // synthetic events through the REACT tree, so a Select's portaled listbox
+    // or a DatePicker's portaled calendar — neither a DOM descendant of
+    // <form> — still reaches this handler, the same way a click inside either
+    // already reaches a submit handler on the form itself. A stray click
+    // (opening a picker without choosing anything) can mark this dirty when
+    // nothing actually changed; an occasional unneeded confirmation is a far
+    // smaller cost than silently discarding real, typed work.
+    const dirtyRef = React.useRef(false);
+    const markDirty = () => {
+        dirtyRef.current = true;
+    };
+    const requestClose = () => {
+        if (!dirtyRef.current) {
+            onClose();
+            return;
+        }
+        setConfirmingDiscard(true);
+    };
+    // A reload or an external navigation never reaches `requestClose` above —
+    // needs its own listener, live only while the dialog is mounted.
+    React.useEffect(() => {
+        const onBeforeUnload = (e) => {
+            if (!dirtyRef.current)
+                return;
+            e.preventDefault();
+            e.returnValue = "";
+        };
+        window.addEventListener("beforeunload", onBeforeUnload);
+        return () => window.removeEventListener("beforeunload", onBeforeUnload);
+    }, []);
+    // A refused save that leaves a field invalid is the one thing on screen
+    // that matters, and on a long form the field can be several screens above
+    // the submit button — a failed submit that never moves the viewport reads
+    // as nothing happened. `FormField` already marks every field it was given
+    // an error for with `aria-invalid`, on every control kind, so this needs
+    // no per-field wiring of its own — it just goes looking for the first one
+    // once a submit attempt finishes.
+    // `usePrefersReducedMotion`, not CSS `scroll-behavior: smooth`: this is JS
+    // motion driven by an explicit `behavior` argument, which CSS cannot reach.
+    const reduceMotion = usePrefersReducedMotion();
+    const wasBusy = React.useRef(false);
+    React.useEffect(() => {
+        if (wasBusy.current && !busy) {
+            const invalid = formRef.current?.querySelector('[aria-invalid="true"]');
+            if (invalid) {
+                invalid.scrollIntoView({
+                    block: "center",
+                    ...(reduceMotion
+                        ? { behavior: "auto" }
+                        : { behavior: "smooth" }),
+                });
+                invalid.focus({ preventScroll: true });
+            }
+        }
+        wasBusy.current = Boolean(busy);
+    }, [busy, reduceMotion]);
+    // Attached to the document, not the form: a portaled Popover (a
+    // DatePicker's calendar, a Select's listbox) renders outside the <form>
+    // element in the DOM, and a person pressing the shortcut while one of
+    // those is open should still submit the dialog it belongs to.
+    React.useEffect(() => {
+        if (!createMode)
+            return;
+        const onKeyDown = (e) => {
+            if (busy)
+                return;
+            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                formRef.current?.requestSubmit();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [createMode, busy]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Dialog, { open: true, onOpenChange: (open) => !open && requestClose(), title: title, width: size ?? (wide ? 760 : 640), className: formdialogRecipe({ className }), ...rest, children: [_jsxs(DialogBody, { children: [_jsx(OptionalLabelsContext.Provider, { value: createMode, children: _jsx("form", { ref: formRef, id: formId, className: "crisp-formdialog-form", onSubmit: (e) => {
+                                        e.preventDefault();
+                                        onSubmit(createMore);
+                                    }, onChange: markDirty, onInput: markDirty, onClick: markDirty, children: children }) }), error != null && _jsx("p", { className: "crisp-formdialog-error", children: error })] }), _jsx(DialogFooter, { children: createMode ? (_jsxs("div", { className: "crisp-formdialog-createfoot", children: [_jsxs("span", { className: "crisp-dialog-more", children: [_jsx(Switch, { id: switchId, checked: createMore, onCheckedChange: setCreateMore, "aria-label": createMoreLabel }), _jsx("label", { className: "crisp-formdialog-more-label", htmlFor: switchId, children: createMoreLabel })] }), _jsxs("button", { type: "submit", form: formId, className: "crisp-dialog-submit", disabled: busy, children: [createRecordLabel, _jsxs("span", { className: "crisp-dialog-submit-key", "aria-hidden": "true", children: [_jsx("kbd", { children: "\u2318" }), _jsx("kbd", { children: "\u21B5" })] })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", intent: "neutral", onClick: requestClose, children: cancelLabel }), _jsx(Button, { type: "submit", form: formId, intent: "primary", loading: busy, children: submitLabel })] })) })] }), _jsx(Dialog, { open: confirmingDiscard, onOpenChange: (open) => !open && setConfirmingDiscard(false), title: discardTitle, width: 400, children: _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", intent: "neutral", onClick: () => setConfirmingDiscard(false), children: discardCancelLabel }), _jsx(Button, { type: "button", intent: "danger", onClick: () => {
+                                setConfirmingDiscard(false);
+                                onClose();
+                            }, children: discardConfirmLabel })] }) })] }));
+}
+FormDialog.displayName = "FormDialog";

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

@@ -0,0 +1,23 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The createMode footer's switch+button cluster — measured live off Attio's
+// own "New Company" create dialog (crisp#548): a 16px gap between the
+// "Create more" switch group and the submit button, different from
+// `.crisp-dialog-footer`'s own 12px (the gap every OTHER dialog's
+// Cancel/Save pair uses). One wrapper carries the 16px itself rather than
+// widening the shared token, so it doesn't stretch to the footer's full
+// width — `.crisp-dialog-footer`'s `justify-content: flex-end` still pushes
+// the whole cluster to the right edge as one snug group.
+const config = defineRecipe({
+    name: "formdialog",
+    base: `& .crisp-formdialog-createfoot { display: flex; align-items: center; gap: ${c.space["4"]}; }
+    & .crisp-formdialog-more-label { font-size: ${c.text.md}; color: ${c.fgMuted}; cursor: pointer; }
+    & .crisp-formdialog-error { font-size: ${c.text.md}; color: ${c.fgDanger}; margin: 0; }
+    & .crisp-formdialog-form { display: grid; gap: ${c.space["3"]}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const formdialogRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { FormDialog, useFormDialogOptional, } from "./formdialog.js";
+export { formdialogRecipe } from "./formdialog.recipe.js";