@crisp-ui-kit/crisp 0.54.0 → 0.54.2

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";
@@ -47,6 +49,9 @@ export declare const contract: MapLeafNodes<{
     fgWarningSoft: "softWarningText";
     fgDangerSoft: "softDangerText";
     fgNeutralSoft: "softNeutralText";
+    bgPurpleSoft: "purpleTint";
+    fgPurpleSoft: "softPurpleText";
+    ringPurpleSoft: "purpleRing";
 }, `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})`>;

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";
@@ -179,5 +187,17 @@ export declare const palette: {
         readonly light: "#686870";
         readonly dark: "#9a9aa2";
     };
+    readonly purpleTint: {
+        readonly light: "#f5f0ff";
+        readonly dark: "#2f1e5a";
+    };
+    readonly softPurpleText: {
+        readonly light: "#6238b5";
+        readonly dark: "#d8c4ff";
+    };
+    readonly purpleRing: {
+        readonly light: "#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. */
@@ -55,5 +61,10 @@ export declare const semantic: {
     fgWarningSoft: "softWarningText";
     fgDangerSoft: "softDangerText";
     fgNeutralSoft: "softNeutralText";
+    /** Badge's purple/role-pill tone (crisp#506) — see palette.ts's comment
+     * on `purpleTint`/`softPurpleText`/`purpleRing` for the measurement. */
+    bgPurpleSoft: "purpleTint";
+    fgPurpleSoft: "softPurpleText";
+    ringPurpleSoft: "purpleRing";
 };
 export type Tokens = typeof semantic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.54.0",
+  "version": "0.54.2",
   "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",
@@ -323,6 +328,11 @@
       "import": "./dist/esm/components/wheelpicker/index.js",
       "require": "./dist/cjs/components/wheelpicker/index.js"
     },
+    "./activityfeed": {
+      "types": "./dist/types/product/activityfeed/index.d.ts",
+      "import": "./dist/esm/product/activityfeed/index.js",
+      "require": "./dist/cjs/product/activityfeed/index.js"
+    },
     "./appshell": {
       "types": "./dist/types/product/appshell/index.d.ts",
       "import": "./dist/esm/product/appshell/index.js",
@@ -353,11 +363,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",
@@ -398,6 +418,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",
@@ -423,6 +448,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",