@crisp-ui-kit/crisp 0.55.6 → 0.56.0

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.statusdotRecipe = exports.StatusDot = void 0;
+var statusdot_1 = require("./statusdot");
+Object.defineProperty(exports, "StatusDot", { enumerable: true, get: function () { return statusdot_1.StatusDot; } });
+var statusdot_recipe_1 = require("./statusdot.recipe");
+Object.defineProperty(exports, "statusdotRecipe", { enumerable: true, get: function () { return statusdot_recipe_1.statusdotRecipe; } });

package/dist/cjs/components/statusdot/statusdot.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusDot = StatusDot;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const statusdot_recipe_1 = require("./statusdot.recipe");
+/**
+ * A standalone coloured status/stage dot — a stage-column header's own
+ * colour swatch, a status field's leading indicator. Not a Badge: no pill,
+ * no text pairing required. Pass `children` (e.g. a label) alongside it in
+ * your own flex row; this renders only the dot.
+ */
+function StatusDot({ color, className, style, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, statusdot_recipe_1.statusdotRecipe)({ className }), style: { backgroundColor: color, ...style }, ...rest }));
+}
+StatusDot.displayName = "StatusDot";

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spec = exports.statusdotRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A standalone status/stage dot — measured live on Attio's Deals Pipeline
+// board (crisp#859): each stage-column header (Lead / In Progress / Won /
+// Lost) renders a free-standing 12x12 circle before its label, no border, no
+// box-shadow. Distinct from Badge's own `dot` prop, which is a smaller 6px
+// dot rendered INSIDE a text pill in `currentColor` (tied to the badge's own
+// tone). This one stands on its own next to plain text.
+//
+// Its fill is a per-instance prop, not a fixed tone variant: the four
+// stage colours measured live (blue #266df0, pink #fa4b94, green #00d17e,
+// red #ff5454) don't match crisp's existing success/warning/danger tokens
+// (green600 #1f9d57, red600 #e5484d) at all — Attio lets a workspace assign
+// an arbitrary colour per stage from its own picker, so this component takes
+// a raw CSS colour rather than guessing at the rest of that picker's palette
+// from four samples.
+const spec = (0, core_1.defineSpec)({
+    name: "statusdot",
+    base: {
+        display: "inline-block",
+        boxSizing: "border-box",
+        flexShrink: 0,
+        width: "12px",
+        height: "12px",
+        borderRadius: tokens_1.contract.radius.full,
+    },
+});
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.statusdotRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -34,6 +34,16 @@ const spec = (0, core_1.defineSpec)({
         tone: {
             default: { color: tokens_1.contract.fgPrimary },
             muted: { color: tokens_1.contract.fgNeutralMuted },
+            // #858: no new measurement -- both reuse tokens already measured
+            // against Attio for the same colours in a different arrangement.
+            // `brand` is `textlink`'s own reused brand-text colour (`bgBrandSolid`,
+            // the same alias GRC's own `--color-fg-brand` resolves to). `danger`
+            // is `fgDanger` ("solid critical/destructive TEXT... an overdue
+            // due-date, a destructive menu item's label" -- see its own doc in
+            // tokens/semantic.ts), not `fgDangerSoft` (that one's a soft Badge
+            // pill's text, a different measured hex).
+            brand: { color: tokens_1.contract.bgBrandSolid },
+            danger: { color: tokens_1.contract.fgDanger },
         },
     },
     defaultVariants: { tone: "default" },

package/dist/cjs/index.js

@@ -67,6 +67,7 @@ __exportStar(require("./components/slider"), exports);
 __exportStar(require("./components/spinner"), exports);
 __exportStar(require("./components/stagebar"), exports);
 __exportStar(require("./components/statcard"), exports);
+__exportStar(require("./components/statusdot"), exports);
 __exportStar(require("./components/switch"), exports);
 __exportStar(require("./components/table"), exports);
 __exportStar(require("./components/tabletoolbar"), exports);

package/dist/cjs/tokens/scale.js

@@ -56,8 +56,15 @@ exports.size = {
 // Typography — the measured UI runs entirely on Inter. Sizes measured in the sidebar
 // collapse onto 11/12/13/14/16 (lg = 14px is the default body/label size);
 // weights are 400/500/600 with 500 the UI default.
+//
+// `"VK Sans Display"` leads the stack: an owner override (your-moon/crisp#857),
+// not a remeasure of Attio. It only ever matches an INSTALLED copy of the font
+// via the `local()`-only `@font-face` rules in dist/tokens.css (see
+// build/generate-fonts.mjs for why — VK Sans Display's license has no
+// redistribution grant, so crisp never ships the font files). Everywhere it
+// isn't installed, this falls straight through to Inter, unchanged.
 exports.font = {
-    sans: '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif',
+    sans: '"VK Sans Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif',
 };
 exports.text = {
     xs: "11px",

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

@@ -0,0 +1,2 @@
+export { StatusDot } from "./statusdot.js";
+export { statusdotRecipe } from "./statusdot.recipe.js";

package/dist/esm/components/statusdot/statusdot.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { statusdotRecipe } from "./statusdot.recipe.js";
+/**
+ * A standalone coloured status/stage dot — a stage-column header's own
+ * colour swatch, a status field's leading indicator. Not a Badge: no pill,
+ * no text pairing required. Pass `children` (e.g. a label) alongside it in
+ * your own flex row; this renders only the dot.
+ */
+export function StatusDot({ color, className, style, ...rest }) {
+    return (_jsx("span", { className: statusdotRecipe({ className }), style: { backgroundColor: color, ...style }, ...rest }));
+}
+StatusDot.displayName = "StatusDot";

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

@@ -0,0 +1,31 @@
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A standalone status/stage dot — measured live on Attio's Deals Pipeline
+// board (crisp#859): each stage-column header (Lead / In Progress / Won /
+// Lost) renders a free-standing 12x12 circle before its label, no border, no
+// box-shadow. Distinct from Badge's own `dot` prop, which is a smaller 6px
+// dot rendered INSIDE a text pill in `currentColor` (tied to the badge's own
+// tone). This one stands on its own next to plain text.
+//
+// Its fill is a per-instance prop, not a fixed tone variant: the four
+// stage colours measured live (blue #266df0, pink #fa4b94, green #00d17e,
+// red #ff5454) don't match crisp's existing success/warning/danger tokens
+// (green600 #1f9d57, red600 #e5484d) at all — Attio lets a workspace assign
+// an arbitrary colour per stage from its own picker, so this component takes
+// a raw CSS colour rather than guessing at the rest of that picker's palette
+// from four samples.
+const spec = defineSpec({
+    name: "statusdot",
+    base: {
+        display: "inline-block",
+        boxSizing: "border-box",
+        flexShrink: 0,
+        width: "12px",
+        height: "12px",
+        borderRadius: c.radius.full,
+    },
+});
+const config = specToRecipe(spec);
+export const statusdotRecipe = resolveRecipe(config);
+export { spec };
+export default config;

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

@@ -31,6 +31,16 @@ const spec = defineSpec({
         tone: {
             default: { color: c.fgPrimary },
             muted: { color: c.fgNeutralMuted },
+            // #858: no new measurement -- both reuse tokens already measured
+            // against Attio for the same colours in a different arrangement.
+            // `brand` is `textlink`'s own reused brand-text colour (`bgBrandSolid`,
+            // the same alias GRC's own `--color-fg-brand` resolves to). `danger`
+            // is `fgDanger` ("solid critical/destructive TEXT... an overdue
+            // due-date, a destructive menu item's label" -- see its own doc in
+            // tokens/semantic.ts), not `fgDangerSoft` (that one's a soft Badge
+            // pill's text, a different measured hex).
+            brand: { color: c.bgBrandSolid },
+            danger: { color: c.fgDanger },
         },
     },
     defaultVariants: { tone: "default" },

package/dist/esm/index.js

@@ -51,6 +51,7 @@ export * from "./components/slider/index.js";
 export * from "./components/spinner/index.js";
 export * from "./components/stagebar/index.js";
 export * from "./components/statcard/index.js";
+export * from "./components/statusdot/index.js";
 export * from "./components/switch/index.js";
 export * from "./components/table/index.js";
 export * from "./components/tabletoolbar/index.js";

package/dist/esm/tokens/scale.js

@@ -53,8 +53,15 @@ export const size = {
 // Typography — the measured UI runs entirely on Inter. Sizes measured in the sidebar
 // collapse onto 11/12/13/14/16 (lg = 14px is the default body/label size);
 // weights are 400/500/600 with 500 the UI default.
+//
+// `"VK Sans Display"` leads the stack: an owner override (your-moon/crisp#857),
+// not a remeasure of Attio. It only ever matches an INSTALLED copy of the font
+// via the `local()`-only `@font-face` rules in dist/tokens.css (see
+// build/generate-fonts.mjs for why — VK Sans Display's license has no
+// redistribution grant, so crisp never ships the font files). Everywhere it
+// isn't installed, this falls straight through to Inter, unchanged.
 export const font = {
-    sans: '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif',
+    sans: '"VK Sans Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif',
 };
 export const text = {
     xs: "11px",

package/dist/native/tokens.js

@@ -271,7 +271,7 @@ export const tokens = {
     "xl": 16
   },
   "font": {
-    "sans": "\"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif"
+    "sans": "\"VK Sans Display\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif"
   },
   "weight": {
     "regular": "400",

package/dist/statusdot.css

@@ -0,0 +1,3 @@
+.crisp-statusdot {
+  display: inline-block; box-sizing: border-box; flex-shrink: 0; width: 12px; height: 12px; border-radius: var(--crisp-radius-full);
+}

package/dist/statusdot.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface StatusdotVariants {
+
+}
+
+export declare const statusdotRecipe: RecipeFn<{  }>;

package/dist/statusdot.layered.css

@@ -0,0 +1,5 @@
+@layer crisp-components {
+.crisp-statusdot {
+  display: inline-block; box-sizing: border-box; flex-shrink: 0; width: 12px; height: 12px; border-radius: var(--crisp-radius-full);
+}
+}

package/dist/styles.css

@@ -1,3 +1,31 @@
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display Regular");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display Medium");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display DemiBold");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display Bold");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
 :root {
   --crisp-bg-brand-solid: #266df0;
   --crisp-bg-brand-solid-pressed: #1f5fd6;
@@ -151,7 +179,7 @@
   --crisp-weight-medium: 500;
   --crisp-weight-semibold: 600;
   --crisp-weight-bold: 700;
-  --crisp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --crisp-font-sans: "VK Sans Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
 }
 
 .crisp-accordion {
@@ -1865,6 +1893,10 @@
   
 }
 
+.crisp-statusdot {
+  display: inline-block; box-sizing: border-box; flex-shrink: 0; width: 12px; height: 12px; border-radius: var(--crisp-radius-full);
+}
+
 .crisp-switch {
   display: inline-flex; align-items: center; flex-shrink: 0; width: 24px; height: 16px; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent;
     & .crisp-switch-thumb { width: 12px; height: 12px; margin: 0 2px; border-radius: var(--crisp-radius-full); background: #fff; box-shadow: 0 0 0 1px var(--crisp-ring-switch); transition: transform .2s ease; }
@@ -2170,6 +2202,12 @@
 .crisp-text--tone_muted {
   color: var(--crisp-fg-neutral-muted);
 }
+.crisp-text--tone_brand {
+  color: var(--crisp-bg-brand-solid);
+}
+.crisp-text--tone_danger {
+  color: var(--crisp-fg-danger);
+}
 
 .crisp-textarea {
   position: relative; display: block; width: 100%; font-family: var(--crisp-font-sans);

package/dist/styles.layered.css

@@ -1,3 +1,31 @@
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display Regular");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display Medium");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display DemiBold");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display Bold");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
 :root {
   --crisp-bg-brand-solid: #266df0;
   --crisp-bg-brand-solid-pressed: #1f5fd6;
@@ -151,7 +179,7 @@
   --crisp-weight-medium: 500;
   --crisp-weight-semibold: 600;
   --crisp-weight-bold: 700;
-  --crisp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --crisp-font-sans: "VK Sans Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
 }
 
 @layer crisp-components {
@@ -1866,6 +1894,10 @@
   
 }
 
+.crisp-statusdot {
+  display: inline-block; box-sizing: border-box; flex-shrink: 0; width: 12px; height: 12px; border-radius: var(--crisp-radius-full);
+}
+
 .crisp-switch {
   display: inline-flex; align-items: center; flex-shrink: 0; width: 24px; height: 16px; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent;
     & .crisp-switch-thumb { width: 12px; height: 12px; margin: 0 2px; border-radius: var(--crisp-radius-full); background: #fff; box-shadow: 0 0 0 1px var(--crisp-ring-switch); transition: transform .2s ease; }
@@ -2171,6 +2203,12 @@
 .crisp-text--tone_muted {
   color: var(--crisp-fg-neutral-muted);
 }
+.crisp-text--tone_brand {
+  color: var(--crisp-bg-brand-solid);
+}
+.crisp-text--tone_danger {
+  color: var(--crisp-fg-danger);
+}
 
 .crisp-textarea {
   position: relative; display: block; width: 100%; font-family: var(--crisp-font-sans);

package/dist/text.css

@@ -7,3 +7,9 @@
 .crisp-text--tone_muted {
   color: var(--crisp-fg-neutral-muted);
 }
+.crisp-text--tone_brand {
+  color: var(--crisp-bg-brand-solid);
+}
+.crisp-text--tone_danger {
+  color: var(--crisp-fg-danger);
+}

package/dist/text.d.ts

@@ -1,7 +1,7 @@
 import type { RecipeFn } from "../core/types";
 
 export interface TextVariants {
-  tone?: "default" | "muted";
+  tone?: "default" | "muted" | "brand" | "danger";
 }
 
-export declare const textRecipe: RecipeFn<{ tone: { default: string; muted: string } }>;
+export declare const textRecipe: RecipeFn<{ tone: { default: string; muted: string; brand: string; danger: string } }>;

package/dist/text.layered.css

@@ -8,4 +8,10 @@
 .crisp-text--tone_muted {
   color: var(--crisp-fg-neutral-muted);
 }
+.crisp-text--tone_brand {
+  color: var(--crisp-bg-brand-solid);
+}
+.crisp-text--tone_danger {
+  color: var(--crisp-fg-danger);
+}
 }

package/dist/tokens.css

@@ -1,3 +1,31 @@
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display Regular");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display Medium");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display DemiBold");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "VK Sans Display";
+  src: local("VK Sans Display Bold");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
 :root {
   --crisp-bg-brand-solid: #266df0;
   --crisp-bg-brand-solid-pressed: #1f5fd6;
@@ -151,5 +179,5 @@
   --crisp-weight-medium: 500;
   --crisp-weight-semibold: 600;
   --crisp-weight-bold: 700;
-  --crisp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --crisp-font-sans: "VK Sans Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
 }

package/dist/tokens.json

@@ -268,7 +268,7 @@
     "xl": 16
   },
   "font": {
-    "sans": "\"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif"
+    "sans": "\"VK Sans Display\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif"
   },
   "weight": {
     "regular": "400",

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

@@ -0,0 +1,2 @@
+export { StatusDot, type StatusDotProps } from "./statusdot";
+export { statusdotRecipe } from "./statusdot.recipe";

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

@@ -0,0 +1,21 @@
+import type * as React from "react";
+export type StatusDotProps = React.ComponentPropsWithoutRef<"span"> & {
+    /**
+     * The dot's fill — any CSS colour. Attio assigns an arbitrary colour per
+     * stage/status from its own picker (measured values aren't a fixed enum;
+     * see the recipe's doc), so this takes a colour directly rather than a
+     * `tone` name.
+     */
+    color: string;
+    className?: string;
+};
+/**
+ * A standalone coloured status/stage dot — a stage-column header's own
+ * colour swatch, a status field's leading indicator. Not a Badge: no pill,
+ * no text pairing required. Pass `children` (e.g. a label) alongside it in
+ * your own flex row; this renders only the dot.
+ */
+export declare function StatusDot({ color, className, style, ...rest }: StatusDotProps): React.JSX.Element;
+export declare namespace StatusDot {
+    var displayName: string;
+}

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

@@ -0,0 +1,15 @@
+declare const spec: {
+    readonly name: "statusdot";
+    readonly base: {
+        readonly display: "inline-block";
+        readonly boxSizing: "border-box";
+        readonly flexShrink: 0;
+        readonly width: "12px";
+        readonly height: "12px";
+        readonly borderRadius: `var(--${string})`;
+    };
+};
+declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
+export declare const statusdotRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+export { spec };
+export default config;

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

@@ -19,12 +19,16 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.DetailedHT
     readonly tone: {
         readonly default: string;
         readonly muted: string;
+        readonly brand: string;
+        readonly danger: string;
     };
 }> & {
     config: import("../..").RecipeConfig<{
         readonly tone: {
             readonly default: string;
             readonly muted: string;
+            readonly brand: string;
+            readonly danger: string;
         };
     }>;
 }> & {

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

@@ -11,6 +11,12 @@ declare const spec: {
             muted: {
                 color: `var(--${string})`;
             };
+            brand: {
+                color: `var(--${string})`;
+            };
+            danger: {
+                color: `var(--${string})`;
+            };
         };
     };
     readonly defaultVariants: {
@@ -21,18 +27,24 @@ declare const config: import("../..").RecipeConfig<{
     readonly tone: {
         readonly default: string;
         readonly muted: string;
+        readonly brand: string;
+        readonly danger: string;
     };
 }>;
 export declare const textRecipe: import("../..").RecipeFn<{
     readonly tone: {
         readonly default: string;
         readonly muted: string;
+        readonly brand: string;
+        readonly danger: string;
     };
 }> & {
     config: import("../..").RecipeConfig<{
         readonly tone: {
             readonly default: string;
             readonly muted: string;
+            readonly brand: string;
+            readonly danger: string;
         };
     }>;
 };

package/dist/types/index.d.ts

@@ -47,6 +47,7 @@ export * from "./components/slider";
 export * from "./components/spinner";
 export * from "./components/stagebar";
 export * from "./components/statcard";
+export * from "./components/statusdot";
 export * from "./components/switch";
 export * from "./components/table";
 export * from "./components/tabletoolbar";

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

@@ -32,7 +32,7 @@ export declare const size: {
     readonly calendarPill: "32px";
 };
 export declare const font: {
-    readonly sans: '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif';
+    readonly sans: '"VK Sans Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif';
 };
 export declare const text: {
     readonly xs: "11px";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.55.6",
+  "version": "0.56.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -278,6 +278,11 @@
       "import": "./dist/esm/components/statcard/index.js",
       "require": "./dist/cjs/components/statcard/index.js"
     },
+    "./statusdot": {
+      "types": "./dist/types/components/statusdot/index.d.ts",
+      "import": "./dist/esm/components/statusdot/index.js",
+      "require": "./dist/cjs/components/statusdot/index.js"
+    },
     "./switch": {
       "types": "./dist/types/components/switch/index.d.ts",
       "import": "./dist/esm/components/switch/index.js",