@crisp-ui-kit/crisp 0.54.1 → 0.54.3

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

@@ -0,0 +1,55 @@
+import * as React from "react";
+export type SavedView = {
+    id: string;
+    name: React.ReactNode;
+    /** Leading 16×16 icon, coloured per-view (an emoji, a Lucide icon, …). */
+    icon?: React.ReactNode;
+    /** Renders a small shared-view indicator next to the name. */
+    shared?: boolean;
+};
+export type SavedViewsProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onSelect"> & {
+    /** The trigger's label when no view is active (Attio's "All Companies"). */
+    label: React.ReactNode;
+    /** The trigger's own leading icon when no view is active. */
+    icon?: React.ReactNode;
+    views: SavedView[];
+    /** The currently active view, or `null` for the unfiltered/default state. */
+    activeId: string | null;
+    onSelect: (id: string | null) => void;
+    /** "Create new view" — always the trailing row. */
+    onCreate: () => void;
+    onRename: (id: string) => void;
+    onDuplicate: (id: string) => void;
+    onDelete: (id: string) => void;
+    /** "Add to favorites" — the menu item is omitted when this isn't given. */
+    onToggleFavorite?: (id: string) => void;
+    createLabel?: string;
+    renameLabel?: string;
+    duplicateLabel?: string;
+    deleteLabel?: string;
+    favoriteLabel?: string;
+    /** aria-label for each row's kebab trigger. */
+    viewOptionsLabel?: string;
+    /** aria-label for the panel itself (defaults to the resolved trigger label). */
+    "aria-label"?: string;
+    className?: string;
+};
+/**
+ * A saved-view switcher — measured from Attio's "All Companies ▾" menu. A
+ * chip trigger opens a popover listing every saved view as a `role="option"`
+ * row (leading coloured icon, name, a hover-revealed kebab of
+ * rename/duplicate/delete), plus a trailing "Create new view" row. The
+ * active view is marked `aria-selected`/`aria-current="page"` and mirrored
+ * onto the trigger's own icon/label.
+ *
+ * Keyboard: while the trigger has focus and the panel is open, ↑/↓ move a
+ * virtual highlight (`aria-activedescendant`, the same "focus stays on the
+ * trigger" model `Select`/`MultiSelect` use without a search field), Enter
+ * chooses the highlighted row, Escape closes — deferring to a still-open
+ * kebab submenu first (`hasOpenFloatingLayer`), so Escape closes one layer
+ * at a time.
+ */
+export declare function SavedViews({ label, icon, views, activeId, onSelect, onCreate, onRename, onDuplicate, onDelete, onToggleFavorite, createLabel: createLabelProp, renameLabel: renameLabelProp, duplicateLabel: duplicateLabelProp, deleteLabel: deleteLabelProp, favoriteLabel: favoriteLabelProp, viewOptionsLabel: viewOptionsLabelProp, className, "aria-label": ariaLabel, ...rest }: SavedViewsProps): React.JSX.Element;
+export declare namespace SavedViews {
+    var displayName: string;
+}

package/dist/types/product/savedviews/savedviews.recipe.d.ts

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const savedviewsRecipe: import("../..").RecipeFn<{}>;
+export default config;

package/dist/types/product/taskstable/index.d.ts

@@ -0,0 +1,2 @@
+export { TasksTable, type TasksTableColumn, type TasksTableGroup, type TasksTableProps, type TasksTableRow, } from "./taskstable";
+export { taskstableRecipe } from "./taskstable.recipe";

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

@@ -0,0 +1,54 @@
+import type * as React from "react";
+export type TasksTableColumn = {
+    key: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    /** Flex ratio for this column's header cell and every row's matching cell
+     * (matched by `key`). Defaults to 1. */
+    flex?: number;
+};
+export type TasksTableRow = {
+    id: string;
+    title: React.ReactNode;
+    done?: boolean;
+    onToggle?: (done: boolean) => void;
+    due?: {
+        label: React.ReactNode;
+        overdue?: boolean;
+    };
+    /** A record-chip slot, consumer-supplied — crisp has no generic "record
+     * chip" component, so this stays a plain node. */
+    record?: React.ReactNode;
+    /** A person-chip slot, same reasoning as `record`. */
+    assignee?: React.ReactNode;
+};
+export type TasksTableGroup = {
+    id: string;
+    label: React.ReactNode;
+    count: number;
+    rows: TasksTableRow[];
+};
+export type TasksTableProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
+    columns: TasksTableColumn[];
+    groups: TasksTableGroup[];
+    /** Toolbar leading slot (Sort/Filter) — Attio's own Tasks page reference
+     * is `TableToolbar` with `columns`/`sortColumns`/`filterColumns`. */
+    leading?: React.ReactNode;
+    /** Toolbar trailing slot (View settings, "New task"). */
+    trailing?: React.ReactNode;
+    emptyLabel?: React.ReactNode;
+    completeLabel?: string;
+    incompleteLabel?: string;
+    className?: string;
+};
+/**
+ * A grouped due-date table pattern — Attio's Tasks page. Composes
+ * `ListPage`'s toolbar and group-row chrome (both class-compatible; see
+ * taskstable.recipe.ts) with a typed column/cell layer: a title+checkbox
+ * row grouped into due-date sections, a due-date cell that goes red past
+ * due, and consumer-supplied record/assignee chip slots.
+ */
+export declare function TasksTable({ columns, groups, leading, trailing, emptyLabel: emptyLabelProp, completeLabel: completeLabelProp, incompleteLabel: incompleteLabelProp, className, ...rest }: TasksTableProps): React.JSX.Element;
+export declare namespace TasksTable {
+    var displayName: string;
+}

package/dist/types/product/taskstable/taskstable.recipe.d.ts

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const taskstableRecipe: import("../..").RecipeFn<{}>;
+export default config;

package/dist/types/product/themepicker/index.d.ts

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

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

@@ -0,0 +1,21 @@
+import type * as React from "react";
+export type ThemePickerValue = "light" | "dark" | "system";
+export type ThemePickerProps = Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "role"> & {
+    value: ThemePickerValue;
+    onChange: (value: ThemePickerValue) => void;
+    /** Override one or more of the three option labels. Each falls back to
+     *  its English default, translated through `CrispMessagesProvider` if
+     *  one is mounted. */
+    labels?: Partial<Record<ThemePickerValue, string>>;
+    className?: string;
+};
+/**
+ * A light/dark/system theme picker — three cards, each a small preview of
+ * what that option looks like, radio-selectable. See the recipe's own doc
+ * comment for the live Attio measurement (crisp#462 gap 4) and for why the
+ * preview swatch colours are literal rather than `var(--crisp-*)` tokens.
+ */
+export declare function ThemePicker({ value, onChange, labels, className, ...rest }: ThemePickerProps): React.JSX.Element;
+export declare namespace ThemePicker {
+    var displayName: string;
+}

package/dist/types/product/themepicker/themepicker.recipe.d.ts

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const themepickerRecipe: import("../..").RecipeFn<{}>;
+export default config;

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

@@ -9,6 +9,7 @@ export declare const contract: MapLeafNodes<{
     bgRaised: "gray50";
     borderDefault: "line200";
     borderSubtle: "line100";
+    borderDropzone: "line150";
     ringNeutral: "ringNeutral";
     ringField: "ringField";
     ringSwitch: "ringSwitch";
@@ -27,6 +28,7 @@ export declare const contract: MapLeafNodes<{
     fgMuted: "gray400";
     bgDanger: "red600";
     bgDangerSolid: "red700";
+    fgDanger: "red500";
     strokeFieldFocus: "fieldFocus";
     fgDisabled: "disabledFg";
     bgNeutralWeak: "neutralWeak";

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

@@ -27,6 +27,10 @@ export declare const palette: {
         readonly light: "#eeeff1";
         readonly dark: "#1c1d1f";
     };
+    readonly line150: {
+        readonly light: "#e6e7ea";
+        readonly dark: "#212224";
+    };
     readonly ringNeutral: {
         readonly light: "transparent";
         readonly dark: "#212224";
@@ -103,6 +107,10 @@ export declare const palette: {
         readonly light: "#ba2525";
         readonly dark: "#ba2525";
     };
+    readonly red500: {
+        readonly light: "#eb3b3b";
+        readonly dark: "#ff5a5f";
+    };
     readonly fieldFocus: {
         readonly light: "#1a1c20";
         readonly dark: "#f3f4f5";
@@ -181,15 +189,15 @@ export declare const palette: {
     };
     readonly purpleTint: {
         readonly light: "#f5f0ff";
-        readonly dark: "#f5f0ff";
+        readonly dark: "#2f1e5a";
     };
     readonly softPurpleText: {
         readonly light: "#6238b5";
-        readonly dark: "#6238b5";
+        readonly dark: "#d8c4ff";
     };
     readonly purpleRing: {
         readonly light: "#e8ddfe";
-        readonly dark: "#e8ddfe";
+        readonly dark: "#45297d";
     };
 };
 export type PaletteKey = keyof typeof palette;

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

@@ -7,6 +7,8 @@ export declare const semantic: {
     bgRaised: "gray50";
     borderDefault: "line200";
     borderSubtle: "line100";
+    /** ImportDialog's dashed dropzone border — see palette.ts's `line150`. */
+    borderDropzone: "line150";
     ringNeutral: "ringNeutral";
     ringField: "ringField";
     ringSwitch: "ringSwitch";
@@ -26,6 +28,10 @@ export declare const semantic: {
     bgDanger: "red600";
     /** Fill for a SOLID destructive control that carries white text. */
     bgDangerSolid: "red700";
+    /** Solid critical/destructive TEXT (not a fill) — an overdue due-date, a
+     * destructive menu item's label. Distinct from `bgDanger` (a fill colour)
+     * and `fgDangerSoft` (a soft badge pill's text, a different measured hex). */
+    fgDanger: "red500";
     /** The 2px ring a text field shows while focused. */
     strokeFieldFocus: "fieldFocus";
     /** Unavailable/disabled content: unselected wheel rows, unpickable dates. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.54.1",
+  "version": "0.54.3",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -188,6 +188,11 @@
       "import": "./dist/esm/components/linechart/index.js",
       "require": "./dist/cjs/components/linechart/index.js"
     },
+    "./mentionchip": {
+      "types": "./dist/types/components/mentionchip/index.d.ts",
+      "import": "./dist/esm/components/mentionchip/index.js",
+      "require": "./dist/cjs/components/mentionchip/index.js"
+    },
     "./menu": {
       "types": "./dist/types/components/menu/index.d.ts",
       "import": "./dist/esm/components/menu/index.js",
@@ -203,6 +208,11 @@
       "import": "./dist/esm/components/multiselect/index.js",
       "require": "./dist/cjs/components/multiselect/index.js"
     },
+    "./personchip": {
+      "types": "./dist/types/components/personchip/index.d.ts",
+      "import": "./dist/esm/components/personchip/index.js",
+      "require": "./dist/cjs/components/personchip/index.js"
+    },
     "./popover": {
       "types": "./dist/types/components/popover/index.d.ts",
       "import": "./dist/esm/components/popover/index.js",
@@ -288,6 +298,11 @@
       "import": "./dist/esm/components/tabs/index.js",
       "require": "./dist/cjs/components/tabs/index.js"
     },
+    "./text": {
+      "types": "./dist/types/components/text/index.d.ts",
+      "import": "./dist/esm/components/text/index.js",
+      "require": "./dist/cjs/components/text/index.js"
+    },
     "./textarea": {
       "types": "./dist/types/components/textarea/index.d.ts",
       "import": "./dist/esm/components/textarea/index.js",
@@ -358,11 +373,21 @@
       "import": "./dist/esm/product/flowcanvas/index.js",
       "require": "./dist/cjs/product/flowcanvas/index.js"
     },
+    "./formdialog": {
+      "types": "./dist/types/product/formdialog/index.d.ts",
+      "import": "./dist/esm/product/formdialog/index.js",
+      "require": "./dist/cjs/product/formdialog/index.js"
+    },
     "./headerbar": {
       "types": "./dist/types/product/headerbar/index.d.ts",
       "import": "./dist/esm/product/headerbar/index.js",
       "require": "./dist/cjs/product/headerbar/index.js"
     },
+    "./importdialog": {
+      "types": "./dist/types/product/importdialog/index.d.ts",
+      "import": "./dist/esm/product/importdialog/index.js",
+      "require": "./dist/cjs/product/importdialog/index.js"
+    },
     "./inbox": {
       "types": "./dist/types/product/inbox/index.d.ts",
       "import": "./dist/esm/product/inbox/index.js",
@@ -403,6 +428,11 @@
       "import": "./dist/esm/product/richtext/index.js",
       "require": "./dist/cjs/product/richtext/index.js"
     },
+    "./savedviews": {
+      "types": "./dist/types/product/savedviews/index.d.ts",
+      "import": "./dist/esm/product/savedviews/index.js",
+      "require": "./dist/cjs/product/savedviews/index.js"
+    },
     "./settingssection": {
       "types": "./dist/types/product/settingssection/index.d.ts",
       "import": "./dist/esm/product/settingssection/index.js",
@@ -428,6 +458,16 @@
       "import": "./dist/esm/product/tasklist/index.js",
       "require": "./dist/cjs/product/tasklist/index.js"
     },
+    "./taskstable": {
+      "types": "./dist/types/product/taskstable/index.d.ts",
+      "import": "./dist/esm/product/taskstable/index.js",
+      "require": "./dist/cjs/product/taskstable/index.js"
+    },
+    "./themepicker": {
+      "types": "./dist/types/product/themepicker/index.d.ts",
+      "import": "./dist/esm/product/themepicker/index.js",
+      "require": "./dist/cjs/product/themepicker/index.js"
+    },
     "./trialbanner": {
       "types": "./dist/types/product/trialbanner/index.d.ts",
       "import": "./dist/esm/product/trialbanner/index.js",