@crisp-ui-kit/crisp 0.54.1 → 0.54.2

package/dist/tokens.css

@@ -7,6 +7,7 @@
   --crisp-bg-raised: #f4f4f5;
   --crisp-border-default: #e4e4e7;
   --crisp-border-subtle: #eeeff1;
+  --crisp-border-dropzone: #e6e7ea;
   --crisp-ring-neutral: transparent;
   --crisp-ring-field: rgba(0,0,0,0.06);
   --crisp-ring-switch: #d9dade;
@@ -25,6 +26,7 @@
   --crisp-fg-muted: #71717a;
   --crisp-bg-danger: #e5484d;
   --crisp-bg-danger-solid: #ba2525;
+  --crisp-fg-danger: #eb3b3b;
   --crisp-stroke-field-focus: #1a1c20;
   --crisp-fg-disabled: #d1d3d8;
   --crisp-bg-neutral-weak: #f3f4f5;
@@ -59,6 +61,7 @@
   --crisp-bg-raised: #101112;
   --crisp-border-default: #212224;
   --crisp-border-subtle: #1c1d1f;
+  --crisp-border-dropzone: #212224;
   --crisp-ring-neutral: #212224;
   --crisp-ring-field: #212224;
   --crisp-ring-switch: #212224;
@@ -77,6 +80,7 @@
   --crisp-fg-muted: #9a9aa2;
   --crisp-bg-danger: #ff5a5f;
   --crisp-bg-danger-solid: #ba2525;
+  --crisp-fg-danger: #ff5a5f;
   --crisp-stroke-field-focus: #f3f4f5;
   --crisp-fg-disabled: #5b606a;
   --crisp-bg-neutral-weak: #1d2025;
@@ -97,9 +101,9 @@
   --crisp-fg-warning-soft: #e0982a;
   --crisp-fg-danger-soft: #ff5a5f;
   --crisp-fg-neutral-soft: #9a9aa2;
-  --crisp-bg-purple-soft: #f5f0ff;
-  --crisp-fg-purple-soft: #6238b5;
-  --crisp-ring-purple-soft: #e8ddfe;
+  --crisp-bg-purple-soft: #2f1e5a;
+  --crisp-fg-purple-soft: #d8c4ff;
+  --crisp-ring-purple-soft: #45297d;
 }
 
 :root {

package/dist/tokens.json

@@ -9,6 +9,7 @@
       "bgRaised": "#f4f4f5",
       "borderDefault": "#e4e4e7",
       "borderSubtle": "#eeeff1",
+      "borderDropzone": "#e6e7ea",
       "ringNeutral": "transparent",
       "ringField": "rgba(0,0,0,0.06)",
       "ringSwitch": "#d9dade",
@@ -27,6 +28,7 @@
       "fgMuted": "#71717a",
       "bgDanger": "#e5484d",
       "bgDangerSolid": "#ba2525",
+      "fgDanger": "#eb3b3b",
       "strokeFieldFocus": "#1a1c20",
       "fgDisabled": "#d1d3d8",
       "bgNeutralWeak": "#f3f4f5",
@@ -60,6 +62,7 @@
       "bgRaised": "#101112",
       "borderDefault": "#212224",
       "borderSubtle": "#1c1d1f",
+      "borderDropzone": "#212224",
       "ringNeutral": "#212224",
       "ringField": "#212224",
       "ringSwitch": "#212224",
@@ -78,6 +81,7 @@
       "fgMuted": "#9a9aa2",
       "bgDanger": "#ff5a5f",
       "bgDangerSolid": "#ba2525",
+      "fgDanger": "#ff5a5f",
       "strokeFieldFocus": "#f3f4f5",
       "fgDisabled": "#5b606a",
       "bgNeutralWeak": "#1d2025",
@@ -98,9 +102,9 @@
       "fgWarningSoft": "#e0982a",
       "fgDangerSoft": "#ff5a5f",
       "fgNeutralSoft": "#9a9aa2",
-      "bgPurpleSoft": "#f5f0ff",
-      "fgPurpleSoft": "#6238b5",
-      "ringPurpleSoft": "#e8ddfe"
+      "bgPurpleSoft": "#2f1e5a",
+      "fgPurpleSoft": "#d8c4ff",
+      "ringPurpleSoft": "#45297d"
     }
   },
   "palette": {
@@ -112,6 +116,7 @@
       "gray900": "#101112",
       "line200": "#e4e4e7",
       "line100": "#eeeff1",
+      "line150": "#e6e7ea",
       "ringNeutral": "transparent",
       "ringField": "rgba(0,0,0,0.06)",
       "ringSwitch": "#d9dade",
@@ -131,6 +136,7 @@
       "brand700": "#1f5fd6",
       "red600": "#e5484d",
       "red700": "#ba2525",
+      "red500": "#eb3b3b",
       "fieldFocus": "#1a1c20",
       "disabledFg": "#d1d3d8",
       "neutralWeak": "#f3f4f5",
@@ -162,6 +168,7 @@
       "gray900": "#f5f5f5",
       "line200": "#212224",
       "line100": "#1c1d1f",
+      "line150": "#212224",
       "ringNeutral": "#212224",
       "ringField": "#212224",
       "ringSwitch": "#212224",
@@ -181,6 +188,7 @@
       "brand700": "#1f5fd6",
       "red600": "#ff5a5f",
       "red700": "#ba2525",
+      "red500": "#ff5a5f",
       "fieldFocus": "#f3f4f5",
       "disabledFg": "#5b606a",
       "neutralWeak": "#1d2025",
@@ -200,9 +208,9 @@
       "softWarningText": "#e0982a",
       "softDangerText": "#ff5a5f",
       "softNeutralText": "#9a9aa2",
-      "purpleTint": "#f5f0ff",
-      "softPurpleText": "#6238b5",
-      "purpleRing": "#e8ddfe"
+      "purpleTint": "#2f1e5a",
+      "softPurpleText": "#d8c4ff",
+      "purpleRing": "#45297d"
     }
   },
   "space": {

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

@@ -220,6 +220,17 @@ export type DataTableProps<T extends {
      * direction like `stickyFirst` does: it pins to the trailing edge, which is
      * the left edge under `dir="rtl"` (#288). */
     stickyLast?: boolean;
+    /** Props on the scroll element itself (`style`/`className`/other div
+     * attributes) -- for bounding the grid's height so its sticky header and
+     * calc footer (#554) pin the way Attio's own grid does, the same
+     * `scrollProps` shape `Table` already takes directly (its own doc comment
+     * on #554 assumes this -- `DataTable` didn't actually expose it, #569).
+     * e.g. `scrollProps={{ style: { maxHeight: "calc(100vh - 220px)" } }}`.
+     * `ref` and `onScroll` are owned internally (this component tracks its own
+     * sticky-column scroll shadows) and are dropped if passed. `className`
+     * merges with the internal `crisp-table-scroll` class the same way
+     * `Table`'s own `scrollProps` does. */
+    scrollProps?: Omit<React.ComponentPropsWithoutRef<"div">, "ref" | "onScroll">;
     /** BCP 47 locale for the built-in `date`/`number`/`currency` renderers
      * (default "en-US"). Formats the date and groups the number the way that
      * locale's readers expect — e.g. "mn-MN" renders a date as "2026.09.12"
@@ -254,7 +265,7 @@ export type DataTableProps<T extends {
 };
 export declare function DataTable<T extends {
     id: string;
-}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst, stickyLast, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount, countLabel, toolbar, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }: DataTableProps<T>): React.JSX.Element;
+}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst, stickyLast, scrollProps, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount, countLabel, toolbar, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var displayName: string;
 }

package/dist/types/components/mentionchip/index.d.ts

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

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+export type MentionChipProps = React.ComponentPropsWithoutRef<"span"> & {
+    asChild?: boolean;
+};
+/**
+ * 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 declare const MentionChip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,18 @@
+declare const spec: {
+    readonly name: "mention-chip";
+    readonly base: {
+        readonly display: "inline";
+        readonly borderRadius: `var(--${string})`;
+        readonly paddingInline: `var(--${string})`;
+        readonly background: `color-mix(in srgb, var(--${string}) 14%, transparent)`;
+        readonly color: `color-mix(in srgb, var(--${string}) 82%, var(--${string}))`;
+        readonly fontWeight: `var(--${string})`;
+        readonly cursor: "default";
+    };
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const mentionChipRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>> & {
+    config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+};
+export { spec };
+export default config;

package/dist/types/core/floating-stack.d.ts

@@ -11,6 +11,20 @@ export declare function registerFloatingLayer(el: HTMLElement): () => void;
  * right query for "was this click inside some floating child I opened".
  */
 export declare function isInsideLaterFloatingLayer(target: Node, self: HTMLElement | null): boolean;
+/**
+ * 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 declare function hasNestedFloatingLayer(self: HTMLElement | null): boolean;
 /**
  * True when at least one `Select`/`MultiSelect`/`Menu`/`Popover`/
  * `ContextMenu` is currently open, anywhere (#361).

package/dist/types/core/index.d.ts

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

package/dist/types/index.d.ts

@@ -29,6 +29,7 @@ export * from "./components/heatmapchart";
 export * from "./components/input";
 export * from "./components/kbd";
 export * from "./components/linechart";
+export * from "./components/mentionchip";
 export * from "./components/menu";
 export * from "./components/middletruncate";
 export * from "./components/multiselect";
@@ -64,7 +65,9 @@ export * from "./product/board";
 export * from "./product/command";
 export * from "./product/entitycard";
 export * from "./product/flowcanvas";
+export * from "./product/formdialog";
 export * from "./product/headerbar";
+export * from "./product/importdialog";
 export * from "./product/inbox";
 export * from "./product/listpage";
 export * from "./product/navitem";
@@ -73,11 +76,14 @@ export * from "./product/recordpage";
 export * from "./product/recordpanel";
 export * from "./product/recordstable";
 export * from "./product/richtext";
+export * from "./product/savedviews";
 export * from "./product/settingssection";
 export * from "./product/settingsshell";
 export * from "./product/sidebar";
 export * from "./product/statlist";
 export * from "./product/tasklist";
+export * from "./product/taskstable";
+export * from "./product/themepicker";
 export * from "./product/trialbanner";
 export * from "./product/viewtoggle";
 export * from "./tokens";

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

@@ -0,0 +1,57 @@
+import * as React from "react";
+/** See `OptionalLabelsContext`. Call from a field wrapper as
+ *  `optional={useFormDialogOptional(required)}`. */
+export declare function useFormDialogOptional(required: boolean): boolean;
+export type FormDialogProps = Omit<React.ComponentPropsWithoutRef<"div">, "title" | "children" | "onSubmit" | "onClose"> & {
+    title: React.ReactNode;
+    /** The primary button's label on an edit dialog ("Save"). Ignored when
+     *  `createMode` is set — Attio's own button always reads "Create record",
+     *  never the object's name (measured live: "New Company"'s dialog still
+     *  says "Create record", not "Create company"). */
+    submitLabel: React.ReactNode;
+    /** Called on submit — click, Enter in a field, or (in `createMode`)
+     *  Cmd/Ctrl+Enter — with whether the "Create more" switch was on at that
+     *  moment. An edit dialog (no switch, always `false`) can ignore it. */
+    onSubmit: (createMore: boolean) => void;
+    onClose: () => void;
+    busy?: boolean;
+    /** Anything the server rejected that belongs to no one field. */
+    error?: React.ReactNode;
+    children: React.ReactNode;
+    /** Widens the dialog for a form with more columns to hold. */
+    wide?: boolean;
+    /** Dialog content width in px, overrides `wide`. */
+    size?: number;
+    /** Bundles Attio's whole "New Company" create-dialog chrome (crisp#548,
+     *  measured live): "(optional)" on every non-required field (via
+     *  `useFormDialogOptional`); a footer of a "Create more" switch and a
+     *  single "Create record ⌘↵" button with NO Cancel — Attio's dialog
+     *  closes only from the header's ×; and Cmd/Ctrl+Enter submitting from
+     *  anywhere inside the dialog, including a portaled Select/DatePicker
+     *  popover. Only ever set by a create dialog — an edit dialog keeps
+     *  Cancel + `submitLabel`, unmeasured territory the audit never touched. */
+    createMode?: boolean;
+    createMoreLabel?: string;
+    cancelLabel?: string;
+    discardTitle?: string;
+    discardConfirmLabel?: string;
+    discardCancelLabel?: string;
+};
+/**
+ * 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 declare function FormDialog({ title, submitLabel, onSubmit, onClose, busy, error, children, wide, size, createMode, createMoreLabel: createMoreLabelProp, cancelLabel: cancelLabelProp, discardTitle: discardTitleProp, discardConfirmLabel: discardConfirmLabelProp, discardCancelLabel: discardCancelLabelProp, className, ...rest }: FormDialogProps): React.JSX.Element;
+export declare namespace FormDialog {
+    var displayName: string;
+}

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

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

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

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

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

@@ -0,0 +1,86 @@
+import type { FileRejection, UseFileUploadProps } from "@seed-design/react-file-upload";
+import * as React from "react";
+export type { FileRejection };
+export type ImportDialogStep = {
+    /** Stable id, compared against `activeStep`. */
+    id: string;
+    label: React.ReactNode;
+};
+/**
+ * Root props land on the DIALOG SURFACE — same convention as `Dialog`/
+ * `Drawer` (#223): the element a consumer actually wants to reach (for
+ * `aria-describedby`, a `data-testid`, a `style`) is the panel, not the
+ * portal wrapper.
+ */
+export type ImportDialogProps = Omit<React.ComponentPropsWithoutRef<"div">, "title" | "children"> & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Header title (default "Import"). */
+    title?: React.ReactNode;
+    /** The fixed step header — id + label pairs, in order. */
+    steps: ImportDialogStep[];
+    /** Which step's id is current — drives both the header pill and, when a
+     * consumer wires `onStepClick`, which row gets `aria-current`. */
+    activeStep: string;
+    /** Fired when an earlier step's pill is clicked. Omit to make the header
+     * display-only (Attio's own back-navigation between steps wasn't part of
+     * this measurement pass). */
+    onStepClick?: (id: string) => void;
+    /** The active step's body. */
+    children?: React.ReactNode;
+    /** Primary action label (e.g. "Next", "Import 40 rows"). Default "Next". */
+    primaryLabel?: React.ReactNode;
+    onPrimary?: () => void;
+    primaryDisabled?: boolean;
+    "aria-label"?: string;
+    /** aria-label on the close button (default "Close"). */
+    closeLabel?: string;
+};
+/**
+ * A full-viewport step wizard — Attio's own CSV import flow (measured live:
+ * `1584x871` filling a ~1600x900 viewport, `border-radius: 0`, no shadow,
+ * opaque white). Composes Zag's dialog machine for focus-trap/scroll-lock/
+ * Escape exactly like `Dialog`/`Drawer`, with its own recipe for the
+ * full-bleed chrome neither of those two share (see importdialog.recipe.ts).
+ *
+ * The step header and footer are generic — the wizard doesn't know about
+ * CSV. Step 1's body is typically `ImportDialogDropzone`; steps 2-4
+ * (map columns / review values / preview import) are consumer-supplied
+ * `children`, since Attio's own column-mapping UI wasn't part of this
+ * measurement pass.
+ */
+export declare function ImportDialog({ open, onOpenChange, title, steps, activeStep, onStepClick, children, primaryLabel, onPrimary, primaryDisabled, "aria-label": ariaLabel, closeLabel: closeLabelProp, className, style, "aria-describedby": describedBy, ...rest }: ImportDialogProps): React.JSX.Element | null;
+export declare namespace ImportDialog {
+    var displayName: string;
+}
+export type ImportDialogDropzoneProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onDrop"> & {
+    /** Accepted file type(s), e.g. ".csv" (the default) or "text/csv". */
+    accept?: UseFileUploadProps["accept"];
+    disabled?: boolean;
+    maxFileSize?: number;
+    /** Fired with the accepted file. One file per drop/pick — a CSV import
+     * has exactly one source file, unlike the generic `FileUpload` list. */
+    onFileAccept?: (file: File) => void;
+    onFileReject?: (rejections: FileRejection[]) => void;
+    dropLabel?: React.ReactNode;
+    orLabel?: React.ReactNode;
+    chooseLabel?: React.ReactNode;
+    learnMoreHref?: string;
+    learnMoreLabel?: React.ReactNode;
+};
+/**
+ * The step-1 drop target — measured chrome (`border: 1px dashed
+ * rgb(230,231,234)`, `border-radius: 20px`, `background: rgb(251,251,251)`)
+ * over the SAME headless drag/drop + file-picker engine `FileUpload` uses
+ * (`@seed-design/react-file-upload`'s `useFileUpload`), rather than a fork
+ * of it. `FileUpload`'s own rendered markup (a single button carrying one
+ * title + one hint) can't host this dropzone's four separate pieces of copy
+ * — a title, an "or" divider, a "Choose a .CSV file" trigger, and a "Learn
+ * more" link that needs its own `<a href>` — so this composes the hook
+ * directly instead of wrapping `<FileUpload>`, and the engine (not this
+ * file) still owns every bit of drag-state/accept/reject behaviour.
+ */
+export declare function ImportDialogDropzone({ accept, disabled, maxFileSize, onFileAccept, onFileReject, dropLabel, orLabel, chooseLabel, learnMoreHref, learnMoreLabel, className, id, ...rest }: ImportDialogDropzoneProps): React.JSX.Element;
+export declare namespace ImportDialogDropzone {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+export * from "./importdialog";
+export * from "./importdialog.recipe";

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

@@ -0,0 +1,2 @@
+export { type SavedView, SavedViews, type SavedViewsProps, } from "./savedviews";
+export { savedviewsRecipe } from "./savedviews.recipe";

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";