@crisp-ui-kit/crisp 0.54.2 → 0.54.3

package/dist/chip.css

@@ -1,5 +1,11 @@
 .crisp-chip {
-  display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding-inline: var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap;
+  display: inline-flex; align-items: center; gap: 3px; height: var(--crisp-size-chip); min-width: 0; padding-inline: var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap;
+}
+.crisp-chip--truncate_true {
+  & .crisp-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
+}
+.crisp-chip--truncate_false {
+  
 }
 .crisp-chip--tone_neutral {
   background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle);

package/dist/chip.d.ts

@@ -1,7 +1,8 @@
 import type { RecipeFn } from "../core/types";
 
 export interface ChipVariants {
+  truncate?: boolean;
   tone?: "neutral" | "brand" | "success" | "warning" | "danger" | "purple" | "cyan" | "orange";
 }
 
-export declare const chipRecipe: RecipeFn<{ tone: { neutral: string; brand: string; success: string; warning: string; danger: string; purple: string; cyan: string; orange: string } }>;
+export declare const chipRecipe: RecipeFn<{ truncate: { true: string; false: string }; tone: { neutral: string; brand: string; success: string; warning: string; danger: string; purple: string; cyan: string; orange: string } }>;

package/dist/chip.layered.css

@@ -1,6 +1,12 @@
 @layer crisp-components {
 .crisp-chip {
-  display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding-inline: var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap;
+  display: inline-flex; align-items: center; gap: 3px; height: var(--crisp-size-chip); min-width: 0; padding-inline: var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap;
+}
+.crisp-chip--truncate_true {
+  & .crisp-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
+}
+.crisp-chip--truncate_false {
+  
 }
 .crisp-chip--tone_neutral {
   background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle);

package/dist/cjs/components/chip/chip.js

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

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

@@ -20,7 +20,16 @@ const spec = (0, core_1.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: tokens_1.contract.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: tokens_1.contract.space["1"],
         borderRadius: tokens_1.contract.radius.chip,
         fontSize: tokens_1.contract.text.lg,
@@ -29,6 +38,33 @@ const spec = (0, core_1.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(tokens_1.contract.fgPrimary, 6),
@@ -72,7 +108,7 @@ const spec = (0, core_1.defineSpec)({
             },
         },
     },
-    defaultVariants: { tone: "neutral" },
+    defaultVariants: { tone: "neutral", truncate: false },
 });
 exports.spec = spec;
 const config = (0, core_1.specToRecipe)(spec);