@crisp-ui-kit/crisp 0.44.0 → 0.45.0

package/dist/chip.css

@@ -0,0 +1,27 @@
+.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;
+}
+.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);
+}
+.crisp-chip--tone_brand {
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
+}
+.crisp-chip--tone_success {
+  background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
+}
+.crisp-chip--tone_warning {
+  background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 30%, transparent);
+}
+.crisp-chip--tone_danger {
+  background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
+}
+.crisp-chip--tone_purple {
+  background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent);
+}
+.crisp-chip--tone_cyan {
+  background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent);
+}
+.crisp-chip--tone_orange {
+  background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent);
+}

package/dist/chip.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface ChipVariants {
+  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 } }>;

package/dist/chip.layered.css

@@ -0,0 +1,29 @@
+@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;
+}
+.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);
+}
+.crisp-chip--tone_brand {
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
+}
+.crisp-chip--tone_success {
+  background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
+}
+.crisp-chip--tone_warning {
+  background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 30%, transparent);
+}
+.crisp-chip--tone_danger {
+  background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
+}
+.crisp-chip--tone_purple {
+  background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent);
+}
+.crisp-chip--tone_cyan {
+  background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent);
+}
+.crisp-chip--tone_orange {
+  background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent);
+}
+}

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

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const chip_recipe_1 = require("./chip.recipe");
+/**
+ * A small pill — the same measured chip RecordsTable, RecordPanel and
+ * MultiSelect already draw as `.crisp-recordstable-tag`, exported standalone
+ * for surfaces that need one without a table or a fixed option set (e.g. a
+ * free-text tag list).
+ *
+ * This ships the measured body only. Attio's removable × on a chip needs a
+ * live, populated multi-value editor to measure against, and none was
+ * reachable this round (a person's "Email addresses" field was empty on the
+ * only record checked, and "Categories" removes via a checkbox toggle, not
+ * an inline ×) — so `Chip` has no `onRemove`/remove button yet. Add one once
+ * 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.displayName = "Chip";

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

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spec = exports.chipRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The same measured pill RecordsTable/RecordPanel/MultiSelect already draw
+// as ".crisp-recordstable-tag" (product/recordstable/recordstable.tag.ts's
+// recordTagCss): 22px tall, `padding: 0 4px`, `border-radius: chip`,
+// 14px/20px at weight 500, and a 1px inset ring in the tone's colour. That
+// export is raw CSS written to be spliced under another component's own
+// `&` root (RecordsTable/RecordPanel nest it inside their own recipe), so it
+// can't be reused verbatim here — Chip's root IS the styled element, not a
+// wrapper around one. The values below are transcribed from recordTagCss,
+// not re-measured; keep the two in sync by hand if either changes.
+const ring = (v, pct) => `inset 0 0 0 1px color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const soft = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const onFg = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, ${tokens_1.contract.fgPrimary})`;
+const spec = (0, core_1.defineSpec)({
+    name: "chip",
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        height: tokens_1.contract.size.chip,
+        paddingInline: tokens_1.contract.space["1"],
+        borderRadius: tokens_1.contract.radius.chip,
+        fontSize: tokens_1.contract.text.lg,
+        lineHeight: "20px",
+        fontWeight: tokens_1.contract.weight.medium,
+        whiteSpace: "nowrap",
+    },
+    variants: {
+        tone: {
+            neutral: {
+                background: soft(tokens_1.contract.fgPrimary, 6),
+                color: soft(tokens_1.contract.fgPrimary, 82),
+                boxShadow: `inset 0 0 0 1px ${tokens_1.contract.borderSubtle}`,
+            },
+            brand: {
+                background: soft(tokens_1.contract.bgBrandSolid, 14),
+                color: onFg(tokens_1.contract.bgBrandSolid, 82),
+                boxShadow: ring(tokens_1.contract.bgBrandSolid, 30),
+            },
+            success: {
+                background: soft(tokens_1.contract.bgSuccess, 16),
+                color: onFg(tokens_1.contract.bgSuccess, 78),
+                boxShadow: ring(tokens_1.contract.bgSuccess, 30),
+            },
+            warning: {
+                background: soft(tokens_1.contract.bgWarning, 18),
+                color: onFg(tokens_1.contract.bgWarning, 82),
+                boxShadow: ring(tokens_1.contract.bgWarning, 30),
+            },
+            danger: {
+                background: soft(tokens_1.contract.bgDanger, 15),
+                color: onFg(tokens_1.contract.bgDanger, 80),
+                boxShadow: ring(tokens_1.contract.bgDanger, 30),
+            },
+            purple: {
+                background: soft(tokens_1.contract.bgPurple, 16),
+                color: onFg(tokens_1.contract.bgPurple, 80),
+                boxShadow: ring(tokens_1.contract.bgPurple, 30),
+            },
+            cyan: {
+                background: soft(tokens_1.contract.bgCyan, 18),
+                color: onFg(tokens_1.contract.bgCyan, 82),
+                boxShadow: ring(tokens_1.contract.bgCyan, 30),
+            },
+            orange: {
+                background: soft(tokens_1.contract.bgOrange, 16),
+                color: onFg(tokens_1.contract.bgOrange, 82),
+                boxShadow: ring(tokens_1.contract.bgOrange, 30),
+            },
+        },
+    },
+    defaultVariants: { tone: "neutral" },
+});
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.chipRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipRecipe = exports.Chip = void 0;
+var chip_1 = require("./chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return chip_1.Chip; } });
+var chip_recipe_1 = require("./chip.recipe");
+Object.defineProperty(exports, "chipRecipe", { enumerable: true, get: function () { return chip_recipe_1.chipRecipe; } });

package/dist/cjs/index.js

@@ -29,6 +29,7 @@ __exportStar(require("./components/button"), exports);
 __exportStar(require("./components/callout"), exports);
 __exportStar(require("./components/card"), exports);
 __exportStar(require("./components/checkbox"), exports);
+__exportStar(require("./components/chip"), exports);
 __exportStar(require("./components/columncalc"), exports);
 __exportStar(require("./components/contextmenu"), exports);
 __exportStar(require("./components/datatable"), exports);

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { chipRecipe } from "./chip.recipe.js";
+/**
+ * A small pill — the same measured chip RecordsTable, RecordPanel and
+ * MultiSelect already draw as `.crisp-recordstable-tag`, exported standalone
+ * for surfaces that need one without a table or a fixed option set (e.g. a
+ * free-text tag list).
+ *
+ * This ships the measured body only. Attio's removable × on a chip needs a
+ * live, populated multi-value editor to measure against, and none was
+ * reachable this round (a person's "Email addresses" field was empty on the
+ * only record checked, and "Categories" removes via a checkbox toggle, not
+ * an inline ×) — so `Chip` has no `onRemove`/remove button yet. Add one once
+ * 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 }));
+});
+Chip.displayName = "Chip";

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

@@ -0,0 +1,77 @@
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The same measured pill RecordsTable/RecordPanel/MultiSelect already draw
+// as ".crisp-recordstable-tag" (product/recordstable/recordstable.tag.ts's
+// recordTagCss): 22px tall, `padding: 0 4px`, `border-radius: chip`,
+// 14px/20px at weight 500, and a 1px inset ring in the tone's colour. That
+// export is raw CSS written to be spliced under another component's own
+// `&` root (RecordsTable/RecordPanel nest it inside their own recipe), so it
+// can't be reused verbatim here — Chip's root IS the styled element, not a
+// wrapper around one. The values below are transcribed from recordTagCss,
+// not re-measured; keep the two in sync by hand if either changes.
+const ring = (v, pct) => `inset 0 0 0 1px color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const soft = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, transparent)`;
+const onFg = (v, pct) => `color-mix(in srgb, ${v} ${pct}%, ${c.fgPrimary})`;
+const spec = defineSpec({
+    name: "chip",
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        height: c.size.chip,
+        paddingInline: c.space["1"],
+        borderRadius: c.radius.chip,
+        fontSize: c.text.lg,
+        lineHeight: "20px",
+        fontWeight: c.weight.medium,
+        whiteSpace: "nowrap",
+    },
+    variants: {
+        tone: {
+            neutral: {
+                background: soft(c.fgPrimary, 6),
+                color: soft(c.fgPrimary, 82),
+                boxShadow: `inset 0 0 0 1px ${c.borderSubtle}`,
+            },
+            brand: {
+                background: soft(c.bgBrandSolid, 14),
+                color: onFg(c.bgBrandSolid, 82),
+                boxShadow: ring(c.bgBrandSolid, 30),
+            },
+            success: {
+                background: soft(c.bgSuccess, 16),
+                color: onFg(c.bgSuccess, 78),
+                boxShadow: ring(c.bgSuccess, 30),
+            },
+            warning: {
+                background: soft(c.bgWarning, 18),
+                color: onFg(c.bgWarning, 82),
+                boxShadow: ring(c.bgWarning, 30),
+            },
+            danger: {
+                background: soft(c.bgDanger, 15),
+                color: onFg(c.bgDanger, 80),
+                boxShadow: ring(c.bgDanger, 30),
+            },
+            purple: {
+                background: soft(c.bgPurple, 16),
+                color: onFg(c.bgPurple, 80),
+                boxShadow: ring(c.bgPurple, 30),
+            },
+            cyan: {
+                background: soft(c.bgCyan, 18),
+                color: onFg(c.bgCyan, 82),
+                boxShadow: ring(c.bgCyan, 30),
+            },
+            orange: {
+                background: soft(c.bgOrange, 16),
+                color: onFg(c.bgOrange, 82),
+                boxShadow: ring(c.bgOrange, 30),
+            },
+        },
+    },
+    defaultVariants: { tone: "neutral" },
+});
+const config = specToRecipe(spec);
+export const chipRecipe = Object.assign(resolveRecipe(config), { config });
+export { spec };
+export default config;

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

@@ -0,0 +1,2 @@
+export { Chip } from "./chip.js";
+export { chipRecipe } from "./chip.recipe.js";

package/dist/esm/index.js

@@ -13,6 +13,7 @@ export * from "./components/button/index.js";
 export * from "./components/callout/index.js";
 export * from "./components/card/index.js";
 export * from "./components/checkbox/index.js";
+export * from "./components/chip/index.js";
 export * from "./components/columncalc/index.js";
 export * from "./components/contextmenu/index.js";
 export * from "./components/datatable/index.js";

package/dist/styles.css

@@ -428,6 +428,34 @@
   }
 }
 
+.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;
+}
+.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);
+}
+.crisp-chip--tone_brand {
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
+}
+.crisp-chip--tone_success {
+  background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
+}
+.crisp-chip--tone_warning {
+  background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 30%, transparent);
+}
+.crisp-chip--tone_danger {
+  background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
+}
+.crisp-chip--tone_purple {
+  background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent);
+}
+.crisp-chip--tone_cyan {
+  background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent);
+}
+.crisp-chip--tone_orange {
+  background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent);
+}
+
 .crisp-columncalc {
   display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }

package/dist/styles.layered.css

@@ -429,6 +429,34 @@
   }
 }
 
+.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;
+}
+.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);
+}
+.crisp-chip--tone_brand {
+  background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent);
+}
+.crisp-chip--tone_success {
+  background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent);
+}
+.crisp-chip--tone_warning {
+  background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 30%, transparent);
+}
+.crisp-chip--tone_danger {
+  background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent);
+}
+.crisp-chip--tone_purple {
+  background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent);
+}
+.crisp-chip--tone_cyan {
+  background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent);
+}
+.crisp-chip--tone_orange {
+  background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent);
+}
+
 .crisp-columncalc {
   display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+import type { VariantProps } from "../../core";
+import { chipRecipe } from "./chip.recipe";
+export type ChipProps = React.ComponentPropsWithoutRef<"span"> & VariantProps<typeof chipRecipe> & {
+    asChild?: boolean;
+};
+/**
+ * A small pill — the same measured chip RecordsTable, RecordPanel and
+ * MultiSelect already draw as `.crisp-recordstable-tag`, exported standalone
+ * for surfaces that need one without a table or a fixed option set (e.g. a
+ * free-text tag list).
+ *
+ * This ships the measured body only. Attio's removable × on a chip needs a
+ * live, populated multi-value editor to measure against, and none was
+ * reachable this round (a person's "Email addresses" field was empty on the
+ * only record checked, and "Categories" removes via a checkbox toggle, not
+ * an inline ×) — so `Chip` has no `onRemove`/remove button yet. Add one once
+ * that surface can be measured; don't guess the icon, its hit target, or its
+ * spacing from the label.
+ */
+export declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & VariantProps<import("../..").RecipeFn<{
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
+        readonly purple: string;
+        readonly cyan: string;
+        readonly orange: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        readonly tone: {
+            readonly neutral: string;
+            readonly brand: string;
+            readonly success: string;
+            readonly warning: string;
+            readonly danger: string;
+            readonly purple: string;
+            readonly cyan: string;
+            readonly orange: string;
+        };
+    }>;
+}> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,100 @@
+declare const spec: {
+    readonly name: "chip";
+    readonly base: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly height: `var(--${string})`;
+        readonly paddingInline: `var(--${string})`;
+        readonly borderRadius: `var(--${string})`;
+        readonly fontSize: `var(--${string})`;
+        readonly lineHeight: "20px";
+        readonly fontWeight: `var(--${string})`;
+        readonly whiteSpace: "nowrap";
+    };
+    readonly variants: {
+        readonly tone: {
+            readonly neutral: {
+                readonly background: string;
+                readonly color: string;
+                readonly boxShadow: `inset 0 0 0 1px var(--${string})`;
+            };
+            readonly brand: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly success: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly warning: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly danger: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly purple: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly cyan: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+            readonly orange: {
+                background: string;
+                color: string;
+                boxShadow: string;
+            };
+        };
+    };
+    readonly defaultVariants: {
+        readonly tone: "neutral";
+    };
+};
+declare const config: import("../..").RecipeConfig<{
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
+        readonly purple: string;
+        readonly cyan: string;
+        readonly orange: string;
+    };
+}>;
+export declare const chipRecipe: import("../..").RecipeFn<{
+    readonly tone: {
+        readonly neutral: string;
+        readonly brand: string;
+        readonly success: string;
+        readonly warning: string;
+        readonly danger: string;
+        readonly purple: string;
+        readonly cyan: string;
+        readonly orange: string;
+    };
+}> & {
+    config: import("../..").RecipeConfig<{
+        readonly tone: {
+            readonly neutral: string;
+            readonly brand: string;
+            readonly success: string;
+            readonly warning: string;
+            readonly danger: string;
+            readonly purple: string;
+            readonly cyan: string;
+            readonly orange: string;
+        };
+    }>;
+};
+export { spec };
+export default config;

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

@@ -0,0 +1,2 @@
+export { Chip, type ChipProps } from "./chip";
+export { chipRecipe } from "./chip.recipe";

package/dist/types/index.d.ts

@@ -9,6 +9,7 @@ export * from "./components/button";
 export * from "./components/callout";
 export * from "./components/card";
 export * from "./components/checkbox";
+export * from "./components/chip";
 export * from "./components/columncalc";
 export * from "./components/contextmenu";
 export * from "./components/datatable";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -88,6 +88,11 @@
       "import": "./dist/esm/components/checkbox/index.js",
       "require": "./dist/cjs/components/checkbox/index.js"
     },
+    "./chip": {
+      "types": "./dist/types/components/chip/index.d.ts",
+      "import": "./dist/esm/components/chip/index.js",
+      "require": "./dist/cjs/components/chip/index.js"
+    },
     "./columncalc": {
       "types": "./dist/types/components/columncalc/index.d.ts",
       "import": "./dist/esm/components/columncalc/index.js",