@crisp-ui-kit/crisp 0.36.0 → 0.38.0

package/dist/tokens.json

@@ -39,7 +39,12 @@
       "bgCyan": "#00b9eb",
       "bgPurple": "#9b69ff",
       "bgSidebar": "#fbfbfb",
-      "bgSubtle": "#fbfbfb"
+      "bgSubtle": "#fbfbfb",
+      "fgBrandSoft": "#2057bd",
+      "fgSuccessSoft": "#186b3d",
+      "fgWarningSoft": "#80520d",
+      "fgDangerSoft": "#a33539",
+      "fgNeutralSoft": "#686870"
     },
     "dark": {
       "bgBrandSolid": "#266df0",
@@ -80,7 +85,12 @@
       "bgCyan": "#00b9eb",
       "bgPurple": "#9b69ff",
       "bgSidebar": "#0e0f10",
-      "bgSubtle": "#0e0f10"
+      "bgSubtle": "#0e0f10",
+      "fgBrandSoft": "#568df3",
+      "fgSuccessSoft": "#2ea968",
+      "fgWarningSoft": "#e0982a",
+      "fgDangerSoft": "#ff5a5f",
+      "fgNeutralSoft": "#9a9aa2"
     }
   },
   "palette": {
@@ -122,7 +132,12 @@
       "orange600": "#f97514",
       "cyan600": "#00b9eb",
       "purple600": "#9b69ff",
-      "graySidebar": "#fbfbfb"
+      "graySidebar": "#fbfbfb",
+      "softBrandText": "#2057bd",
+      "softSuccessText": "#186b3d",
+      "softWarningText": "#80520d",
+      "softDangerText": "#a33539",
+      "softNeutralText": "#686870"
     },
     "dark": {
       "gray00": "#0a0a0a",
@@ -162,7 +177,12 @@
       "orange600": "#f97514",
       "cyan600": "#00b9eb",
       "purple600": "#9b69ff",
-      "graySidebar": "#0e0f10"
+      "graySidebar": "#0e0f10",
+      "softBrandText": "#568df3",
+      "softSuccessText": "#2ea968",
+      "softWarningText": "#e0982a",
+      "softDangerText": "#ff5a5f",
+      "softNeutralText": "#9a9aa2"
     }
   },
   "space": {

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

@@ -21,4 +21,4 @@ export type FileUploadProps = UseFileUploadProps & Omit<React.ComponentPropsWith
  * is theirs by construction. Controlled or uncontrolled, the same way every
  * other crisp component is.
  */
-export declare function FileUpload({ className, labels, "aria-label": ariaLabel, accept, disabled: disabledProp, required, invalid: invalidProp, readOnly, maxFiles, maxFileSize, minFileSize, name, validate, preventDocumentDrop, onFileReject, onFileAccept, acceptedFileEntries: acceptedFileEntriesProp, defaultAcceptedFileEntries, onAcceptedFileEntriesChange, ...rest }: FileUploadProps): React.JSX.Element;
+export declare function FileUpload({ className, labels, "aria-label": ariaLabel, id, accept, disabled: disabledProp, required, invalid: invalidProp, readOnly, maxFiles, maxFileSize, minFileSize, name, validate, preventDocumentDrop, onFileReject, onFileAccept, acceptedFileEntries: acceptedFileEntriesProp, defaultAcceptedFileEntries, onAcceptedFileEntriesChange, ...rest }: FileUploadProps): React.JSX.Element;

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

@@ -37,6 +37,8 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
     /** Shown when the search matches nothing. */
     emptyLabel?: string;
     disabled?: boolean;
+    /** Red ring + `aria-invalid`, matching `Input`'s and `Select`'s. */
+    invalid?: boolean;
     className?: string;
     "aria-label"?: string;
 };
@@ -46,7 +48,7 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, required, id, placeholder, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
+export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, required, id, placeholder, searchable, searchPlaceholder, emptyLabel, disabled, invalid, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
 export declare namespace MultiSelect {
     var displayName: string;
 }

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

@@ -1,5 +1,20 @@
-declare const config: import("../..").RecipeConfig<{}>;
-export declare const multiselectRecipe: import("../..").RecipeFn<{}> & {
-    config: import("../..").RecipeConfig<{}>;
+declare const config: import("../..").RecipeConfig<{
+    invalid: {
+        true: string;
+        false: string;
+    };
+}>;
+export declare const multiselectRecipe: import("../..").RecipeFn<{
+    invalid: {
+        true: string;
+        false: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        invalid: {
+            true: string;
+            false: string;
+        };
+    }>;
 };
 export default config;

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

@@ -42,6 +42,9 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
     /** Shown when the search matches nothing. */
     emptyLabel?: string;
     disabled?: boolean;
+    /** Red ring + `aria-invalid`, matching `Input`'s. Outranks the open/focus
+     * ring — a field being corrected stays visibly wrong while it is. */
+    invalid?: boolean;
     className?: string;
     "aria-label"?: string;
     id?: string;
@@ -53,7 +56,7 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export declare function Select({ options, value, defaultValue, onValueChange, name, required, placeholder, variant, width, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
+export declare function Select({ options, value, defaultValue, onValueChange, name, required, placeholder, variant, width, searchable, searchPlaceholder, emptyLabel, disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
 export declare namespace Select {
     var displayName: string;
 }

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

@@ -7,6 +7,10 @@ declare const config: import("../..").RecipeConfig<{
         full: string;
         auto: string;
     };
+    invalid: {
+        true: string;
+        false: string;
+    };
 }>;
 export declare const selectRecipe: import("../..").RecipeFn<{
     variant: {
@@ -17,6 +21,10 @@ export declare const selectRecipe: import("../..").RecipeFn<{
         full: string;
         auto: string;
     };
+    invalid: {
+        true: string;
+        false: string;
+    };
 }> & {
     config: import("../..").RecipeConfig<{
         variant: {
@@ -27,6 +35,10 @@ export declare const selectRecipe: import("../..").RecipeFn<{
             full: string;
             auto: string;
         };
+        invalid: {
+            true: string;
+            false: string;
+        };
     }>;
 };
 export default config;

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

@@ -8,18 +8,27 @@ export type ToolbarSort = {
     key: string;
     dir: SortDir;
 };
-export type ToolbarFilterOp = "contains" | "is" | "isnot" | "empty" | "notempty";
+export type ToolbarFilterOp = "contains" | "is" | "isnot" | "isanyof" | "empty" | "notempty";
 export type ToolbarFilter = {
     id: string;
     key: string;
     op: ToolbarFilterOp;
     value: string;
+    /** Selected values for `"isanyof"` — ignored by every other op. */
+    values?: string[];
 };
 export type TableToolbarColumn = {
     key: string;
     label: string;
     /** Leading field-type icon, shown in the field pickers. */
     icon?: IconType;
+    /**
+     * This column's distinct values (a status/select field's option set, e.g.).
+     * Supplying it adds `"isanyof"` — a searchable checkbox list, Attio's
+     * faceted multi-select filter — to the column's condition picker. Omit it
+     * for a free-text column; there is nothing to check off.
+     */
+    values?: string[];
 };
 export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
     /** The fields that can be sorted and filtered on. */

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

@@ -0,0 +1,25 @@
+import type * as React from "react";
+/**
+ * Portals a floating layer (a `position: fixed` listbox/menu/popover
+ * content) to `document.body` — exactly what Tooltip already did with a
+ * bare `createPortal` call, pulled out so `Select`, `MultiSelect`, `Menu`,
+ * `Popover` and `ContextMenu` share the one implementation (#339).
+ *
+ * Needed because a `position: fixed` box resolves against the nearest
+ * ancestor that establishes a containing block for it — not necessarily the
+ * viewport. `transform` (even the identity `scale(1)`), `filter` and
+ * `backdrop-filter` all qualify, and `Dialog`'s own measured surface sets
+ * both a resting `transform: scale(1)` (so its `@starting-style` entrance
+ * has something to animate from) and `backdrop-filter: blur(15px)` (Attio's
+ * frosted-glass modal). A floating layer opened from a trigger inside a
+ * `Dialog` was rendering offset by the dialog's own box instead of anchored
+ * to its trigger.
+ *
+ * Every caller renders this conditionally on its own `open` state, which
+ * starts `false` and is driven only by client interaction — never a prop a
+ * fixture sets true at mount (unlike Dialog/Drawer/Command) — so this never
+ * touches `document` during SSR, the same safety Tooltip already had.
+ */
+export declare function FloatingPortal({ children, }: {
+    children: React.ReactNode;
+}): React.ReactPortal;

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

@@ -0,0 +1,13 @@
+/** Call when a layer opens; call the returned cleanup when it closes. */
+export declare function registerFloatingLayer(el: HTMLElement): () => void;
+/**
+ * True when `target` sits inside a layer that was registered strictly after
+ * `self` — a layer that could only have been spawned from inside `self`,
+ * directly or through further nesting.
+ *
+ * Pass `null` for `self` when the caller is a hand-rolled dropdown that
+ * doesn't register itself on this stack (RecordsTable's and TableToolbar's
+ * own popovers, e.g.) — every registered layer then counts, which is the
+ * right query for "was this click inside some floating child I opened".
+ */
+export declare function isInsideLaterFloatingLayer(target: Node, self: HTMLElement | null): boolean;

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

@@ -3,6 +3,8 @@ export { cx } from "./cx";
 export { defineRecipe } from "./define";
 export { withDescribedBy } from "./dialog-description";
 export { isRtlElement } from "./direction";
+export { FloatingPortal } from "./floating-portal";
+export { isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack";
 export { formValueStyle } from "./form-value";
 export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
 export { Primitive } from "./primitive";

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

@@ -1,2 +1,2 @@
-export { ATTIO_SIDEBAR_CHATS_SECTION, ATTIO_SIDEBAR_FOOTER, ATTIO_SIDEBAR_ITEMS, ATTIO_SIDEBAR_LISTS_SECTION, ATTIO_SIDEBAR_RECORDS_SECTION, ATTIO_SIDEBAR_WORKSPACE, Sidebar, type SidebarFooter, type SidebarListsSection, type SidebarNavItem, type SidebarProps, type SidebarRecordItem, type SidebarRecordsSection, type SidebarSection, type SidebarWorkspace, } from "./sidebar";
+export { ATTIO_SIDEBAR_CHATS_SECTION, ATTIO_SIDEBAR_FOOTER, ATTIO_SIDEBAR_ITEMS, ATTIO_SIDEBAR_LISTS_SECTION, ATTIO_SIDEBAR_RECORDS_SECTION, ATTIO_SIDEBAR_WORKSPACE, Sidebar, type SidebarFooter, type SidebarListsSection, type SidebarNavGroup, type SidebarNavGroupItem, type SidebarNavItem, type SidebarProps, type SidebarRecordItem, type SidebarRecordsSection, type SidebarSection, type SidebarWorkspace, } from "./sidebar";
 export { sidebarRecipe } from "./sidebar.recipe";

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

@@ -40,6 +40,11 @@ export declare const contract: MapLeafNodes<{
     bgPurple: "purple600";
     bgSidebar: "graySidebar";
     bgSubtle: "graySidebar";
+    fgBrandSoft: "softBrandText";
+    fgSuccessSoft: "softSuccessText";
+    fgWarningSoft: "softWarningText";
+    fgDangerSoft: "softDangerText";
+    fgNeutralSoft: "softNeutralText";
 }, `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

@@ -151,5 +151,25 @@ export declare const palette: {
         readonly light: "#fbfbfb";
         readonly dark: "#0e0f10";
     };
+    readonly softBrandText: {
+        readonly light: "#2057bd";
+        readonly dark: "#568df3";
+    };
+    readonly softSuccessText: {
+        readonly light: "#186b3d";
+        readonly dark: "#2ea968";
+    };
+    readonly softWarningText: {
+        readonly light: "#80520d";
+        readonly dark: "#e0982a";
+    };
+    readonly softDangerText: {
+        readonly light: "#a33539";
+        readonly dark: "#ff5a5f";
+    };
+    readonly softNeutralText: {
+        readonly light: "#686870";
+        readonly dark: "#9a9aa2";
+    };
 };
 export type PaletteKey = keyof typeof palette;

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

@@ -46,5 +46,12 @@ export declare const semantic: {
     bgPurple: "purple600";
     bgSidebar: "graySidebar";
     bgSubtle: "graySidebar";
+    /** Soft Badge's text colour (#323) — see palette.ts's comment on the
+     * soft*Text entries for the Attio measurement this is derived from. */
+    fgBrandSoft: "softBrandText";
+    fgSuccessSoft: "softSuccessText";
+    fgWarningSoft: "softWarningText";
+    fgDangerSoft: "softDangerText";
+    fgNeutralSoft: "softNeutralText";
 };
 export type Tokens = typeof semantic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.36.0",
+  "version": "0.38.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",