@crisp-ui-kit/crisp 0.54.2 → 0.54.3

package/dist/emptystate.css

@@ -3,7 +3,16 @@
     & .crisp-emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); color: var(--crisp-fg-muted); }
     & .crisp-emptystate-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
     & .crisp-emptystate-desc { max-width: 320px; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    & .crisp-emptystate-action { margin-top: var(--crisp-space-2); }
+    /* #603: measured 8px gap between "Import CSV"/"Connect data source" -- inline-flex so one action (the common case) or several lay out the same way, wrapping if the container is narrow. */
+    & .crisp-emptystate-action { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--crisp-space-2); margin-top: var(--crisp-space-2); }
+    /* #603: Attio's zero-records "Learn more" card -- a label above a
+       clickable icon+title tile. Left/start-aligned, unlike the rest of
+       this centred panel, so it overrides the base text-align. */
+    & .crisp-emptystate-learnmore { display: flex; flex-direction: column; align-items: stretch; gap: var(--crisp-space-2); margin-top: var(--crisp-space-6); text-align: start; }
+    & .crisp-emptystate-learnmore-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
+    & .crisp-emptystate-learnmore-card { display: flex; align-items: center; gap: var(--crisp-space-2); padding: var(--crisp-space-2) var(--crisp-space-3) var(--crisp-space-2) var(--crisp-space-2); margin: 0; border: 1px solid var(--crisp-border-subtle); border-radius: 18px; background: var(--crisp-bg-surface); font: inherit; text-align: start; text-decoration: none; color: inherit; cursor: pointer; }
+    & .crisp-emptystate-learnmore-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--crisp-radius-xl); background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); color: var(--crisp-fg-muted); }
+    & .crisp-emptystate-learnmore-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
 }
 .crisp-emptystate--variant_default {
   
@@ -18,3 +27,8 @@
     & .crisp-emptystate-desc { max-width: 266px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
     & .crisp-emptystate-action { margin-top: var(--crisp-space-2); }
 }
+.crisp-emptystate--variant_records {
+  & .crisp-emptystate-icon { width: 138px; height: 138px; margin-bottom: var(--crisp-space-2); border-radius: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--crisp-fg-primary) 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-desc { max-width: 266px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
+}

package/dist/emptystate.d.ts

@@ -1,7 +1,7 @@
 import type { RecipeFn } from "../core/types";
 
 export interface EmptystateVariants {
-  variant?: "default" | "illustrated" | "page";
+  variant?: "default" | "illustrated" | "page" | "records";
 }
 
-export declare const emptystateRecipe: RecipeFn<{ variant: { default: string; illustrated: string; page: string } }>;
+export declare const emptystateRecipe: RecipeFn<{ variant: { default: string; illustrated: string; page: string; records: string } }>;

package/dist/emptystate.layered.css

@@ -4,7 +4,16 @@
     & .crisp-emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); color: var(--crisp-fg-muted); }
     & .crisp-emptystate-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
     & .crisp-emptystate-desc { max-width: 320px; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    & .crisp-emptystate-action { margin-top: var(--crisp-space-2); }
+    /* #603: measured 8px gap between "Import CSV"/"Connect data source" -- inline-flex so one action (the common case) or several lay out the same way, wrapping if the container is narrow. */
+    & .crisp-emptystate-action { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--crisp-space-2); margin-top: var(--crisp-space-2); }
+    /* #603: Attio's zero-records "Learn more" card -- a label above a
+       clickable icon+title tile. Left/start-aligned, unlike the rest of
+       this centred panel, so it overrides the base text-align. */
+    & .crisp-emptystate-learnmore { display: flex; flex-direction: column; align-items: stretch; gap: var(--crisp-space-2); margin-top: var(--crisp-space-6); text-align: start; }
+    & .crisp-emptystate-learnmore-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
+    & .crisp-emptystate-learnmore-card { display: flex; align-items: center; gap: var(--crisp-space-2); padding: var(--crisp-space-2) var(--crisp-space-3) var(--crisp-space-2) var(--crisp-space-2); margin: 0; border: 1px solid var(--crisp-border-subtle); border-radius: 18px; background: var(--crisp-bg-surface); font: inherit; text-align: start; text-decoration: none; color: inherit; cursor: pointer; }
+    & .crisp-emptystate-learnmore-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--crisp-radius-xl); background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); color: var(--crisp-fg-muted); }
+    & .crisp-emptystate-learnmore-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
 }
 .crisp-emptystate--variant_default {
   
@@ -19,4 +28,9 @@
     & .crisp-emptystate-desc { max-width: 266px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
     & .crisp-emptystate-action { margin-top: var(--crisp-space-2); }
 }
+.crisp-emptystate--variant_records {
+  & .crisp-emptystate-icon { width: 138px; height: 138px; margin-bottom: var(--crisp-space-2); border-radius: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--crisp-fg-primary) 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-desc { max-width: 266px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
+}
 }

package/dist/esm/components/chip/chip.js

@@ -16,7 +16,8 @@ import { chipRecipe } from "./chip.recipe.js";
  * that surface can be measured; don't guess the icon, its hit target, or its
  * spacing from the label.
  */
-export const Chip = React.forwardRef(({ tone, className, asChild, children, ...props }, ref) => {
-    return (_jsx(Primitive.span, { ref: ref, asChild: asChild, className: chipRecipe({ tone, className }), ...props, children: children }));
+export const Chip = React.forwardRef(({ tone, truncate, className, asChild, children, ...props }, ref) => {
+    const content = truncate && !asChild && typeof children === "string" ? (_jsx("span", { className: "crisp-chip-label", children: children })) : (children);
+    return (_jsx(Primitive.span, { ref: ref, asChild: asChild, className: chipRecipe({ tone, truncate, className }), ...props, children: content }));
 });
 Chip.displayName = "Chip";

package/dist/esm/components/chip/chip.recipe.js

@@ -17,7 +17,16 @@ const spec = defineSpec({
     base: {
         display: "inline-flex",
         alignItems: "center",
+        // Measured on Attio's own multi-child chip (Tasks page, "Assigned to"
+        // column: a 16px avatar + name in a neutral chip) -- the 3px gap between
+        // them. A single plain-text child (the only case before PersonChip) is
+        // unaffected, since `gap` does nothing with one flex child.
+        gap: "3px",
         height: c.size.chip,
+        // Lets the chip shrink below its content width inside a flex/grid cell
+        // -- `inline-flex` items don't by default -- which `truncate` below
+        // depends on and any consumer constraining a Chip's width already needs.
+        minWidth: 0,
         paddingInline: c.space["1"],
         borderRadius: c.radius.chip,
         fontSize: c.text.lg,
@@ -26,6 +35,33 @@ const spec = defineSpec({
         whiteSpace: "nowrap",
     },
     variants: {
+        truncate: {
+            // Ellipsis + `min-width: 0`, the same convention crisp's own
+            // `.crisp-datatable-entity-name`/`.crisp-datatable-th-label` already
+            // use for cramped text -- there is no single-overflowing-chip pattern
+            // to measure from Attio itself (its multi-value fields show a "+N"
+            // badge instead of truncating one chip's own text: Categories,
+            // Companies). Targets `.crisp-chip-label`, the inner span `Chip`
+            // wraps its string children in when `truncate` is set, not the root
+            // -- the root stays a flex row so a leading icon/avatar never shrinks
+            // alongside the text.
+            true: {
+                decls: {},
+                parts: [
+                    {
+                        selector: "& .crisp-chip-label",
+                        decls: {
+                            minWidth: 0,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            display: "block",
+                        },
+                    },
+                ],
+            },
+            false: {},
+        },
         tone: {
             neutral: {
                 background: soft(c.fgPrimary, 6),
@@ -69,7 +105,7 @@ const spec = defineSpec({
             },
         },
     },
-    defaultVariants: { tone: "neutral" },
+    defaultVariants: { tone: "neutral", truncate: false },
 });
 const config = specToRecipe(spec);
 export const chipRecipe = Object.assign(resolveRecipe(config), { config });