@crisp-ui-kit/crisp 0.57.0 → 0.57.1

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

@@ -5,15 +5,27 @@ export type ProgressProps = React.ComponentPropsWithoutRef<"div"> & {
     max?: number;
     /** Render as N discrete segments (a step bar) instead of a continuous fill. */
     segments?: number;
+    /**
+     * `"linear"` (default) or `"circular"` — a small ring, measured live on
+     * Attio's own Settings > Profile character-counter (crisp#634).
+     */
+    variant?: "linear" | "circular";
+    /**
+     * Circular only: outer diameter in px. Default 18 is Attio's own measured
+     * size; `strokeWidth` scales proportionally at other sizes (18px's own
+     * 1.6px ratio) since only the one size was ever measured.
+     */
+    size?: number;
     "aria-label"?: string;
     className?: string;
 };
 /**
- * A progress bar — a continuous brand fill, or a segmented row of pills when
- * `segments` is set (the "Getting started 3/6" pattern). Reports its state via
- * `role="progressbar"` and the ARIA value attributes.
+ * A progress bar — a continuous brand fill, a segmented row of pills when
+ * `segments` is set (the "Getting started 3/6" pattern), or a small ring
+ * (`variant="circular"`, a character-counter's own progress). Reports its
+ * state via `role="progressbar"` and the ARIA value attributes.
  */
-export declare function Progress({ value, max, segments, "aria-label": ariaLabel, className, ...rest }: ProgressProps): import("react").JSX.Element;
+export declare function Progress({ value, max, segments, variant, size, "aria-label": ariaLabel, className, ...rest }: ProgressProps): import("react").JSX.Element;
 export declare namespace Progress {
     var displayName: string;
 }

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

@@ -42,6 +42,28 @@ declare const spec: {
         readonly decls: {
             background: `var(--${string})`;
         };
+    }, {
+        readonly selector: "&[data-variant=\"circular\"]";
+        readonly decls: {
+            readonly display: "inline-flex";
+            readonly height: "auto";
+            readonly borderRadius: "0";
+            readonly background: "transparent";
+            readonly overflow: "visible";
+        };
+    }, {
+        readonly slot: "circleTrack";
+        readonly selector: "& .crisp-progress-circle-track";
+        readonly decls: {
+            readonly stroke: `color-mix(in srgb, var(--${string}) 14%, transparent)`;
+        };
+    }, {
+        readonly slot: "circleFill";
+        readonly selector: "& .crisp-progress-circle-fill";
+        readonly decls: {
+            readonly stroke: `var(--${string})`;
+            readonly transition: "stroke-dashoffset 0.25s ease";
+        };
     }];
 };
 declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;

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

@@ -56,12 +56,13 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
     /** `full` (default) fills its container; `auto` sizes to content. */
     width?: "full" | "auto";
     /**
-     * seed-design's two Select sizes (crisp/#867): `medium` (default, 40px
-     * trigger) for general use, `large` (52px) where the surrounding layout
-     * calls for it. Purely visual — everything else about the control is
-     * identical between the two.
+     * `small` (default, crisp/#889) is Attio's own 32px trigger height — lines
+     * up with `Input`'s own size, since the two sit side by side in every
+     * form. `medium`/`large` are seed-design's own 40px/52px (crisp/#867),
+     * opt-in where the surrounding layout calls for a bigger control. Purely
+     * visual — the listbox/item chrome is identical across all three.
      */
-    size?: "medium" | "large";
+    size?: "small" | "medium" | "large";
     /**
      * Answered and locked, not editable — unlike `disabled`, the trigger stays
      * focusable and its text stays full-strength ink (crisp/#867, seed-design's

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

@@ -4,6 +4,7 @@ declare const config: import("../..").RecipeConfig<{
         auto: string;
     };
     size: {
+        small: string;
         medium: string;
         large: string;
     };
@@ -22,6 +23,7 @@ export declare const selectRecipe: import("../..").RecipeFn<{
         auto: string;
     };
     size: {
+        small: string;
         medium: string;
         large: string;
     };
@@ -40,6 +42,7 @@ export declare const selectRecipe: import("../..").RecipeFn<{
             auto: string;
         };
         size: {
+            small: string;
             medium: string;
             large: string;
         };

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

@@ -2,6 +2,14 @@ import * as React from "react";
 export type TextareaProps = React.ComponentPropsWithoutRef<"textarea"> & {
     /** Show a "N / maxLength" counter bottom-right (also caps input at maxLength). */
     showCount?: boolean;
+    /**
+     * Pair the counter with a small circular progress ring (crisp#634),
+     * measured live on Attio's own Settings > Profile "Personal context"
+     * field. Only meaningful alongside `showCount`+`maxLength` — not every
+     * counted textarea in Attio has one, so this is opt-in rather than tied
+     * to `showCount` itself.
+     */
+    showProgress?: boolean;
     /** Extra class on the wrapper. */
     wrapperClassName?: string;
 };
@@ -13,6 +21,14 @@ export type TextareaProps = React.ComponentPropsWithoutRef<"textarea"> & {
 export declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
     /** Show a "N / maxLength" counter bottom-right (also caps input at maxLength). */
     showCount?: boolean;
+    /**
+     * Pair the counter with a small circular progress ring (crisp#634),
+     * measured live on Attio's own Settings > Profile "Personal context"
+     * field. Only meaningful alongside `showCount`+`maxLength` — not every
+     * counted textarea in Attio has one, so this is opt-in rather than tied
+     * to `showCount` itself.
+     */
+    showProgress?: boolean;
     /** Extra class on the wrapper. */
     wrapperClassName?: string;
 } & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./components/accentpicker";
 export * from "./components/accordion";
 export * from "./components/avatar";
 export * from "./components/avatargroup";

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

@@ -1,5 +1,6 @@
 import { type LucideIcon } from "lucide-react";
 import * as React from "react";
+import { type CommentAuthor, type CommentThread } from "../comments";
 import { type Column, type Row } from "./column";
 export type RecordPageNote = {
     id: string;
@@ -143,6 +144,29 @@ export type RecordPageProps = Omit<React.ComponentPropsWithoutRef<"div">, "child
      * the built-in CRM set.
      */
     highlights?: RecordPageHighlight[] | false;
+    /**
+     * Wires the header's Comments entry point (#864) to crisp's own,
+     * already-closed `product/comments` panel (#625) — the gap #864 found
+     * wasn't the comments feature itself, only that `RecordPage` never
+     * opened it. Controlled the same way `notes`/`tasks` are: supply this
+     * (even `[]`) and `onPostComment` to own the data yourself; omit both to
+     * let `RecordPage` keep a small self-contained thread list, same as its
+     * default Notes/Tasks behaviour.
+     */
+    comments?: CommentThread[];
+    onPostComment?: (text: string, threadId: string | null) => void;
+    /**
+     * Attributes a self-managed comment's `author` (id/name/avatar) — has no
+     * effect when `comments` is controlled, since then every thread's author
+     * is already the caller's own data. Defaults to a synthetic "You", same
+     * as Notes/Tasks already show for a comment-less consumer.
+     */
+    currentUser?: CommentAuthor;
+    /** Called when the header's Share button is clicked. Renders regardless
+     *  (matching Compose email/Add to list's own no-op-until-wired
+     *  convention) — Attio's own Share opens a dialog crisp has no measured
+     *  content for; only the entry point is in scope here (#864). */
+    onShare?: () => void;
 };
 /**
  * Every chrome string RecordPage renders. Supplied as a PARTIAL map, so
@@ -161,6 +185,14 @@ export type RecordPageLabels = {
     addToFavourites: string;
     removeFromFavourites: string;
     copyRecordLink: string;
+    /** "…" record actions menu (#621): configure the record page's layout. */
+    configurePage: string;
+    /** "…" record actions menu (#621): copy this page's own URL. */
+    copyPageUrl: string;
+    /** "…" record actions menu (#621): copy the record's raw id. */
+    copyRecordId: string;
+    /** "…" record actions menu (#621): merge this record into another. */
+    mergeRecords: string;
     deleteRecord: string;
     linkRecords: string;
     logANote: string;
@@ -172,6 +204,10 @@ export type RecordPageLabels = {
     composeEmail: string;
     askAttio: string;
     addToList: string;
+    /** The header's text-only Share button (#864, measured: no icon). */
+    share: string;
+    /** aria-label on the header's Comments icon button (#864). */
+    comments: string;
     /** Empty state under the Lists panel. */
     noLists: string;
     highlights: string;
@@ -268,7 +304,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, quickActions: quickActionsProp, ...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, comments: commentsProp, onPostComment, currentUser, onShare, ...rest }: RecordPageProps): React.JSX.Element;
 export declare namespace RecordPage {
     var displayName: string;
 }

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

@@ -3,6 +3,8 @@ export type Theme = "light" | "dark";
 export declare const contract: MapLeafNodes<{
     bgBrandSolid: "brand600";
     bgBrandSolidPressed: "brand700";
+    bgBrandContrast: "brandContrast";
+    fgBrandContrast: "brandContrast";
     fgOnBrand: "white";
     fgOnTone: "ink";
     bgSurface: "gray00";
@@ -43,6 +45,7 @@ export declare const contract: MapLeafNodes<{
     strokeFocusRing: "focusRing";
     bgSuccess: "green600";
     bgWarning: "amber600";
+    bgWarningSolid: "amberSolid";
     bgOrange: "orange600";
     bgCyan: "cyan600";
     bgPurple: "purple600";
@@ -68,7 +71,7 @@ export declare const contract: MapLeafNodes<{
     shadowSelect: "selectShadow";
 }, `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})`>;
+    radius: Record<"2xl" | "3xl" | "chip" | "full" | "lg" | "md" | "sm" | "xl" | "xs", `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})`>;

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

@@ -12,7 +12,7 @@ export declare const palette: {
         readonly dark: "#101112";
     };
     readonly gray50: {
-        readonly light: "#f4f4f5";
+        readonly light: "#f7f8f9";
         readonly dark: "#101112";
     };
     readonly gray900: {
@@ -20,7 +20,7 @@ export declare const palette: {
         readonly dark: "#f5f5f5";
     };
     readonly line200: {
-        readonly light: "#e4e4e7";
+        readonly light: "#dcdee3";
         readonly dark: "#212224";
     };
     readonly line100: {
@@ -108,23 +108,27 @@ export declare const palette: {
         readonly dark: "#9a9aa2";
     };
     readonly brand600: {
-        readonly light: "#266df0";
-        readonly dark: "#266df0";
+        readonly light: "#0298d9";
+        readonly dark: "#0298d9";
     };
     readonly brand700: {
-        readonly light: "#1f5fd6";
-        readonly dark: "#1f5fd6";
+        readonly light: "#0283bb";
+        readonly dark: "#0283bb";
+    };
+    readonly brandContrast: {
+        readonly light: "#0278ac";
+        readonly dark: "#0278ac";
     };
     readonly red600: {
-        readonly light: "#e5484d";
+        readonly light: "#fa342c";
         readonly dark: "#ff5a5f";
     };
     readonly red700: {
-        readonly light: "#ba2525";
+        readonly light: "#ca1d13";
         readonly dark: "#ba2525";
     };
     readonly red500: {
-        readonly light: "#eb3b3b";
+        readonly light: "#fa342c";
         readonly dark: "#ff5a5f";
     };
     readonly fieldFocus: {
@@ -160,11 +164,15 @@ export declare const palette: {
         readonly dark: "#5e98fe";
     };
     readonly green600: {
-        readonly light: "#1f9d57";
+        readonly light: "#079171";
         readonly dark: "#2ea968";
     };
     readonly amber600: {
-        readonly light: "#b5730f";
+        readonly light: "#9b7821";
+        readonly dark: "#e0982a";
+    };
+    readonly amberSolid: {
+        readonly light: "#fbdc65";
         readonly dark: "#e0982a";
     };
     readonly orange600: {

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

@@ -13,6 +13,7 @@ export declare const space: {
     readonly "8": "32px";
 };
 export declare const radius: {
+    readonly xs: "4px";
     readonly chip: "7px";
     readonly sm: "6px";
     readonly md: "8px";

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

@@ -1,6 +1,17 @@
 export declare const semantic: {
     bgBrandSolid: "brand600";
     bgBrandSolidPressed: "brand700";
+    /** your-moon/crisp#897: the AA-safe darker sibling of `bgBrandSolid` — a
+     * SOLID fill carrying white text (Button primary, Badge solid+brand,
+     * Avatar's brand tone). `bgBrandSolid` itself stays the exact brand
+     * accent (focus rings, selected states, icons, tints), unpaired with
+     * white text anywhere that matters for contrast. */
+    bgBrandContrast: "brandContrast";
+    /** your-moon/crisp#897: brand-coloured TEXT sitting on a white page
+     * (TextLink/Text's `brand` tone) — same value as `bgBrandContrast`,
+     * named separately because one's a background and one's a foreground,
+     * matching every other fg/bg pair in this file. */
+    fgBrandContrast: "brandContrast";
     fgOnBrand: "white";
     fgOnTone: "ink";
     bgSurface: "gray00";
@@ -60,6 +71,10 @@ export declare const semantic: {
     strokeFocusRing: "focusRing";
     bgSuccess: "green600";
     bgWarning: "amber600";
+    /** A SOLID warning fill (Badge's `variant="solid" tone="warning"`) — seed's
+     * own warning-solid is a distinct, paler yellow, not `bgWarning` tinted
+     * lighter. See `amberSolid` in palette.ts. */
+    bgWarningSolid: "amberSolid";
     bgOrange: "orange600";
     bgCyan: "cyan600";
     bgPurple: "purple600";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.57.0",
+  "version": "0.57.1",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -33,6 +33,11 @@
     "./styles.css": "./dist/styles.css",
     "./styles.layered.css": "./dist/styles.layered.css",
     "./base.css": "./dist/base.css",
+    "./accentpicker": {
+      "types": "./dist/types/components/accentpicker/index.d.ts",
+      "import": "./dist/esm/components/accentpicker/index.js",
+      "require": "./dist/cjs/components/accentpicker/index.js"
+    },
     "./accordion": {
       "types": "./dist/types/components/accordion/index.d.ts",
       "import": "./dist/esm/components/accordion/index.js",