@crisp-ui-kit/crisp 0.55.6 → 0.57.0

package/dist/types/components/text/text.d.ts

@@ -19,12 +19,16 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.DetailedHT
     readonly tone: {
         readonly default: string;
         readonly muted: string;
+        readonly brand: string;
+        readonly danger: string;
     };
 }> & {
     config: import("../..").RecipeConfig<{
         readonly tone: {
             readonly default: string;
             readonly muted: string;
+            readonly brand: string;
+            readonly danger: string;
         };
     }>;
 }> & {

package/dist/types/components/text/text.recipe.d.ts

@@ -11,6 +11,12 @@ declare const spec: {
             muted: {
                 color: `var(--${string})`;
             };
+            brand: {
+                color: `var(--${string})`;
+            };
+            danger: {
+                color: `var(--${string})`;
+            };
         };
     };
     readonly defaultVariants: {
@@ -21,18 +27,24 @@ declare const config: import("../..").RecipeConfig<{
     readonly tone: {
         readonly default: string;
         readonly muted: string;
+        readonly brand: string;
+        readonly danger: string;
     };
 }>;
 export declare const textRecipe: import("../..").RecipeFn<{
     readonly tone: {
         readonly default: string;
         readonly muted: string;
+        readonly brand: string;
+        readonly danger: string;
     };
 }> & {
     config: import("../..").RecipeConfig<{
         readonly tone: {
             readonly default: string;
             readonly muted: string;
+            readonly brand: string;
+            readonly danger: string;
         };
     }>;
 };

package/dist/types/components/textlink/textlink.d.ts

@@ -4,6 +4,13 @@ export type TextLinkProps = React.ComponentPropsWithoutRef<"a"> & {
      *  `"muted"` (default) — quiet until hover, then brand-coloured (an
      *  in-context reference link, e.g. a sample record under a finding). */
     tone?: "brand" | "muted";
+    /**
+     * Overrides the tone's own font-size only (colour/weight/hover stay
+     * whatever `tone` gives). Omit it and each tone keeps its existing size
+     * unchanged — `brand`'s 12px, `muted`'s 13px. `"lg"` (14px) matches a
+     * `DataTable` primary-column's own ambient size (crisp#874).
+     */
+    size?: "sm" | "md" | "lg";
     className?: string;
 };
 /**
@@ -13,7 +20,7 @@ export type TextLinkProps = React.ComponentPropsWithoutRef<"a"> & {
  * `event.preventDefault()` pairs it with client-side routing (e.g.
  * react-router's own `Link`).
  */
-export declare function TextLink({ tone, className, ...rest }: TextLinkProps): React.JSX.Element;
+export declare function TextLink({ tone, size, className, ...rest }: TextLinkProps): React.JSX.Element;
 export declare namespace TextLink {
     var displayName: string;
 }

package/dist/types/components/textlink/textlink.recipe.d.ts

@@ -3,11 +3,21 @@ declare const config: import("../..").RecipeConfig<{
         brand: string;
         muted: string;
     };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
 }>;
 export declare const textlinkRecipe: import("../..").RecipeFn<{
     tone: {
         brand: string;
         muted: string;
     };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
 }>;
 export default config;

package/dist/types/index.d.ts

@@ -47,6 +47,7 @@ export * from "./components/slider";
 export * from "./components/spinner";
 export * from "./components/stagebar";
 export * from "./components/statcard";
+export * from "./components/statusdot";
 export * from "./components/switch";
 export * from "./components/table";
 export * from "./components/tabletoolbar";

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

@@ -57,6 +57,17 @@ export type RecordPageHighlight = {
     value: React.ReactNode | null;
     empty?: React.ReactNode;
 };
+/**
+ * One icon button in the quick-action row (#865) — "New note"/"Run
+ * workflow"/"New task" in the built-in CRM set. `label` doubles as the
+ * button's `aria-label`, since these render icon-only (measured live: no
+ * visible text next to any of the three, only a native-title tooltip).
+ */
+export type RecordPageQuickAction = {
+    label: string;
+    icon: LucideIcon;
+    onSelect?: () => void;
+};
 export type RecordPageProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
     record: Row;
     columns: Column[];
@@ -90,6 +101,18 @@ export type RecordPageProps = Omit<React.ComponentPropsWithoutRef<"div">, "child
     tabs?: RecordPageTab[];
     /** Active tab id on first render, when `tabs` is supplied. Defaults to the first tab. Ignored for the built-in tab set (Overview is always first there). */
     defaultTab?: string;
+    /**
+     * Replaces the quick-action row's icon buttons (New note / Run workflow /
+     * New task) — the same "caller's own list, not a merge" choice `tabs`
+     * (#379) and `highlights` (#528) already make. Confirmed live this set
+     * varies by object type (#865): a Person record carries a 4th,
+     * unidentified icon that Company and Deal records don't, so a consumer
+     * targeting a non-CRM object supplies its own icons rather than crisp
+     * guessing at a superset. The row's two text buttons ("Compose email",
+     * "Add to list") aren't part of this override — discovery found no
+     * variance there, only in the icon set. Omit to keep the built-in three.
+     */
+    quickActions?: RecordPageQuickAction[];
     /**
      * Controlled Notes: when supplied (even as `[]`), RecordPage renders
      * this list instead of managing its own, and the composer calls
@@ -142,6 +165,7 @@ export type RecordPageLabels = {
     linkRecords: string;
     logANote: string;
     createATask: string;
+    runWorkflow: string;
     fullScreen: string;
     exitFullScreen: string;
     resizeDetails: string;
@@ -244,7 +268,7 @@ export declare namespace RecordDetails {
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-export declare function RecordPage({ record, columns, collection, labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, ...rest }: RecordPageProps): React.JSX.Element;
+export declare function RecordPage({ record, columns, collection, labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, quickActions: quickActionsProp, ...rest }: RecordPageProps): React.JSX.Element;
 export declare namespace RecordPage {
     var displayName: string;
 }

package/dist/types/tokens/contract.d.ts

@@ -56,10 +56,20 @@ export declare const contract: MapLeafNodes<{
     bgPurpleSoft: "purpleTint";
     fgPurpleSoft: "softPurpleText";
     ringPurpleSoft: "purpleRing";
+    ringBrandSoft: "ringBrandSoft";
+    fgSelectNeutral: "fieldFocus";
+    bgSelectListbox: "selectListboxBg";
+    strokeSelectTrigger: "selectTriggerStroke";
+    bgSelectPressed: "selectPressedTint";
+    bgSelectDisabled: "selectDisabledBg";
+    strokeSelectInvalid: "selectInvalidStroke";
+    strokeSelectDivider: "selectDivider";
+    fgSelectPlaceholder: "selectPlaceholder";
+    shadowSelect: "selectShadow";
 }, `var(--${string})`> & {
-    space: Record<"0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "4" | "5" | "6" | "8" | "px", `var(--${string})`>;
-    radius: Record<"2xl" | "chip" | "full" | "lg" | "md" | "sm" | "xl", `var(--${string})`>;
-    size: Record<"calendarCell" | "calendarPill" | "chip" | "header" | "icon" | "menuRow" | "row" | "tableHeader" | "tableRow", `var(--${string})`>;
+    space: Record<"0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "8" | "px", `var(--${string})`>;
+    radius: Record<"2xl" | "3xl" | "chip" | "full" | "lg" | "md" | "sm" | "xl", `var(--${string})`>;
+    size: Record<"calendarCell" | "calendarPill" | "chip" | "header" | "icon" | "menuRow" | "row" | "selectIconLg" | "selectTriggerLg" | "selectTriggerMd" | "tableHeader" | "tableRow", `var(--${string})`>;
     font: Record<"sans", `var(--${string})`>;
     text: Record<"lg" | "md" | "sm" | "xl" | "xs", `var(--${string})`>;
     weight: Record<"bold" | "medium" | "regular" | "semibold", `var(--${string})`>;

package/dist/types/tokens/elevation.d.ts

@@ -55,5 +55,12 @@ export declare const elevation: {
      * nobody measured for them.
      */
     readonly fieldNoRing: `0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04)`;
+    /**
+     * Select's own listbox shadow (crisp/#867) — seed-design's `$shadow.s3`, a
+     * single layer, NOT `floating` above. This component follows seed, not
+     * Attio, for the same reason `DatePicker` follows seed's calendar
+     * structure: an explicit owner request to match seed-design exactly.
+     */
+    readonly selectFloating: `0 4px 16px var(--${string})`;
 };
 export type ElevationKey = keyof typeof elevation;

package/dist/types/tokens/palette.d.ts

@@ -47,6 +47,10 @@ export declare const palette: {
         readonly light: "#d9dade";
         readonly dark: "#212224";
     };
+    readonly ringBrandSoft: {
+        readonly light: "#d6e5ff";
+        readonly dark: "#212224";
+    };
     readonly tileActive: {
         readonly light: "#ffffff";
         readonly dark: "#101112";
@@ -211,5 +215,37 @@ export declare const palette: {
         readonly light: "#e8ddfe";
         readonly dark: "#45297d";
     };
+    readonly selectListboxBg: {
+        readonly light: "#ffffff";
+        readonly dark: "#1d2025";
+    };
+    readonly selectTriggerStroke: {
+        readonly light: "#dcdee3";
+        readonly dark: "#393d46";
+    };
+    readonly selectPressedTint: {
+        readonly light: "#00000007";
+        readonly dark: "#ffffff0d";
+    };
+    readonly selectDisabledBg: {
+        readonly light: "#f3f4f5";
+        readonly dark: "#2b2e35";
+    };
+    readonly selectInvalidStroke: {
+        readonly light: "#fa342c";
+        readonly dark: "#ff6e60";
+    };
+    readonly selectDivider: {
+        readonly light: "#00000010";
+        readonly dark: "#ffffff17";
+    };
+    readonly selectPlaceholder: {
+        readonly light: "#b0b3ba";
+        readonly dark: "#868b94";
+    };
+    readonly selectShadow: {
+        readonly light: "#0000001f";
+        readonly dark: "#000000cc";
+    };
 };
 export type PaletteKey = keyof typeof palette;

package/dist/types/tokens/scale.d.ts

@@ -6,6 +6,7 @@ export declare const space: {
     readonly "2": "8px";
     readonly "2.5": "10px";
     readonly "3": "12px";
+    readonly "3.5": "14px";
     readonly "4": "16px";
     readonly "5": "20px";
     readonly "6": "24px";
@@ -18,6 +19,7 @@ export declare const radius: {
     readonly lg: "9px";
     readonly xl: "12px";
     readonly "2xl": "16px";
+    readonly "3xl": "20px";
     readonly full: "999px";
 };
 export declare const size: {
@@ -30,9 +32,12 @@ export declare const size: {
     readonly header: "48px";
     readonly calendarCell: "34px";
     readonly calendarPill: "32px";
+    readonly selectTriggerMd: "40px";
+    readonly selectTriggerLg: "52px";
+    readonly selectIconLg: "20px";
 };
 export declare const font: {
-    readonly sans: '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif';
+    readonly sans: '"VK Sans Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif';
 };
 export declare const text: {
     readonly xs: "11px";

package/dist/types/tokens/semantic.d.ts

@@ -77,5 +77,23 @@ export declare const semantic: {
     bgPurpleSoft: "purpleTint";
     fgPurpleSoft: "softPurpleText";
     ringPurpleSoft: "purpleRing";
+    /** Callout's bordered/banner look (crisp#869) — an opaque measured ring,
+     *  not a `color-mix` tint of `bgBrandSolid` (see palette.ts's own comment). */
+    ringBrandSoft: "ringBrandSoft";
+    /** Select rebuilt to seed-design parity (crisp/#867) — see palette.ts's
+     *  comment above `selectListboxBg` for why these are their own tokens
+     *  rather than a reuse of an Attio-measured one. */
+    /** Seed's neutral ink (gray-1000) used as TEXT/icon colour — same palette
+     *  entry as `strokeFieldFocus` (a ring), aliased separately because the
+     *  role here is content colour, not a focus ring. */
+    fgSelectNeutral: "fieldFocus";
+    bgSelectListbox: "selectListboxBg";
+    strokeSelectTrigger: "selectTriggerStroke";
+    bgSelectPressed: "selectPressedTint";
+    bgSelectDisabled: "selectDisabledBg";
+    strokeSelectInvalid: "selectInvalidStroke";
+    strokeSelectDivider: "selectDivider";
+    fgSelectPlaceholder: "selectPlaceholder";
+    shadowSelect: "selectShadow";
 };
 export type Tokens = typeof semantic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.55.6",
+  "version": "0.57.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -278,6 +278,11 @@
       "import": "./dist/esm/components/statcard/index.js",
       "require": "./dist/cjs/components/statcard/index.js"
     },
+    "./statusdot": {
+      "types": "./dist/types/components/statusdot/index.d.ts",
+      "import": "./dist/esm/components/statusdot/index.js",
+      "require": "./dist/cjs/components/statusdot/index.js"
+    },
     "./switch": {
       "types": "./dist/types/components/switch/index.d.ts",
       "import": "./dist/esm/components/switch/index.js",