@crisp-ui-kit/crisp 0.5.0 → 0.7.0

package/dist/cjs/components/card/card.js

@@ -0,0 +1,54 @@
+"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.Card = void 0;
+exports.CardHeader = CardHeader;
+exports.CardBody = CardBody;
+exports.CardFooter = CardFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const card_recipe_1 = require("./card.recipe");
+/** A bordered surface card. Compose with CardHeader / CardBody / CardFooter. */
+exports.Card = React.forwardRef(({ raised, interactive, className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, card_recipe_1.cardRecipe)({ raised, interactive, className }), ...props })));
+exports.Card.displayName = "Card";
+function CardHeader({ children, icon, action, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "card-header", children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "card-title", children: children }), action] }));
+}
+function CardBody({ children, className, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: className ? `card-body ${className}` : "card-body", children: children }));
+}
+function CardFooter({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: "card-footer", children: children });
+}

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A bordered surface card — the recurring container behind kanban cards, chart
+// cards, workflow nodes, and highlight cells. `raised` adds a soft float shadow;
+// `interactive` adds a hover affordance.
+const config = (0, core_1.defineRecipe)({
+    name: "card",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; font-family: ${tokens_1.contract.font.sans}; color: ${tokens_1.contract.fgPrimary};
+    & .card-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["4"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; }
+    & .card-header svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .card-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .card-body { flex: 1; min-height: 0; padding: ${tokens_1.contract.space["4"]}; }
+    & .card-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["4"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }`,
+    variants: {
+        raised: {
+            true: `box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}, 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px -4px rgba(28,40,64,0.08);`,
+            false: "",
+        },
+        interactive: {
+            true: `cursor: pointer; transition: box-shadow 0.12s ease; &:hover { box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}, 0 1px 2px rgba(0,0,0,0.04), 0 6px 16px -6px rgba(28,40,64,0.12); }`,
+            false: "",
+        },
+    },
+    defaultVariants: { raised: false, interactive: false },
+    compoundVariants: [],
+});
+exports.cardRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardRecipe = exports.CardHeader = exports.CardFooter = exports.CardBody = exports.Card = void 0;
+var card_1 = require("./card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return card_1.Card; } });
+Object.defineProperty(exports, "CardBody", { enumerable: true, get: function () { return card_1.CardBody; } });
+Object.defineProperty(exports, "CardFooter", { enumerable: true, get: function () { return card_1.CardFooter; } });
+Object.defineProperty(exports, "CardHeader", { enumerable: true, get: function () { return card_1.CardHeader; } });
+var card_recipe_1 = require("./card.recipe");
+Object.defineProperty(exports, "cardRecipe", { enumerable: true, get: function () { return card_recipe_1.cardRecipe; } });

package/dist/cjs/components/checkbox/checkbox.js

@@ -0,0 +1,56 @@
+"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.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const checkbox_recipe_1 = require("./checkbox.recipe");
+/**
+ * A native `<input type="checkbox">` styled to Attio's grid checkbox (16px,
+ * r6, brand fill + white check). Native on purpose: keyboard, focus, and form
+ * semantics come for free. `indeterminate` is a DOM-only property, so it is
+ * applied via ref rather than an attribute.
+ */
+exports.Checkbox = React.forwardRef(({ className, indeterminate = false, asChild, ...props }, ref) => {
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    React.useEffect(() => {
+        if (innerRef.current)
+            innerRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    return ((0, jsx_runtime_1.jsx)(core_1.Primitive.input, { ref: innerRef, asChild: asChild, type: "checkbox", className: (0, checkbox_recipe_1.checkboxRecipe)({ className }), ...props }));
+});
+exports.Checkbox.displayName = "Checkbox";

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkboxRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A 16px square checkbox measured from Attio's record grid: r6, a subtle 1px
+// inset ring when empty, brand fill + white check when on. The check is a
+// data-URI SVG background so it renders reliably (input pseudo-content doesn't).
+const CHECK = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E\")";
+const config = (0, core_1.defineRecipe)({
+    name: "checkbox",
+    base: `appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${tokens_1.contract.radius.sm}
+  ; background: ${tokens_1.contract.bgSurface}
+  ; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary}
+  9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; &:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 30%, transparent); }
+  &:checked, &:indeterminate { background: ${tokens_1.contract.bgBrandSolid} center / 10px no-repeat; box-shadow: none; }
+  &:checked { background-image: ${CHECK}; }
+  &:indeterminate { background-image: linear-gradient(${tokens_1.contract.fgOnBrand}, ${tokens_1.contract.fgOnBrand}); background-size: 8px 2px; }
+  &:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 1px; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.checkboxRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+    meta: {
+        box: {
+            size: "16px",
+            borderRadius: "6px",
+        },
+    },
+});
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkboxRecipe = exports.Checkbox = void 0;
+var checkbox_1 = require("./checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return checkbox_1.Checkbox; } });
+var checkbox_recipe_1 = require("./checkbox.recipe");
+Object.defineProperty(exports, "checkboxRecipe", { enumerable: true, get: function () { return checkbox_recipe_1.checkboxRecipe; } });

package/dist/cjs/components/columncalc/columncalc.js

@@ -0,0 +1,139 @@
+"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.CALC_LABEL = exports.NUMERIC_CALCS = exports.UNIVERSAL_CALCS = void 0;
+exports.isEmptyValue = isEmptyValue;
+exports.computeCalc = computeCalc;
+exports.ColumnCalc = ColumnCalc;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const menu_1 = require("../menu");
+const columncalc_recipe_1 = require("./columncalc.recipe");
+/** The four Attio offers on every column, in its order. */
+exports.UNIVERSAL_CALCS = [
+    "countEmpty",
+    "countFilled",
+    "percentEmpty",
+    "percentFilled",
+];
+/** The four Attio adds for numeric columns, in its order. */
+exports.NUMERIC_CALCS = ["sum", "average", "min", "max"];
+exports.CALC_LABEL = {
+    none: "None",
+    countEmpty: "Count empty",
+    countFilled: "Count filled",
+    percentEmpty: "Percent empty",
+    percentFilled: "Percent filled",
+    sum: "Sum",
+    average: "Average",
+    min: "Min",
+    max: "Max",
+};
+/** A value counts as empty when it is null/undefined, "" or an empty array. */
+function isEmptyValue(v) {
+    if (v == null)
+        return true;
+    if (typeof v === "string")
+        return v.trim() === "";
+    if (Array.isArray(v))
+        return v.length === 0;
+    return false;
+}
+/**
+ * Pure so the arithmetic is testable without rendering. Returns `null` for
+ * "none" and for numeric ops with no numbers to work on — a caller renders
+ * nothing rather than a misleading 0.
+ */
+function computeCalc(values, op) {
+    if (op === "none")
+        return null;
+    const total = values.length;
+    const empty = values.filter(isEmptyValue).length;
+    const filled = total - empty;
+    switch (op) {
+        case "countEmpty":
+            return empty;
+        case "countFilled":
+            return filled;
+        case "percentEmpty":
+            return total === 0 ? 0 : (empty / total) * 100;
+        case "percentFilled":
+            return total === 0 ? 0 : (filled / total) * 100;
+        default:
+            break;
+    }
+    const nums = values
+        .filter((v) => !isEmptyValue(v))
+        .map((v) => (typeof v === "number" ? v : Number(v)))
+        .filter((n) => Number.isFinite(n));
+    if (nums.length === 0)
+        return null;
+    switch (op) {
+        case "sum":
+            return nums.reduce((a, b) => a + b, 0);
+        case "average":
+            return nums.reduce((a, b) => a + b, 0) / nums.length;
+        case "min":
+            return Math.min(...nums);
+        case "max":
+            return Math.max(...nums);
+        default:
+            return null;
+    }
+}
+const defaultFormat = (n, op) => op === "percentEmpty" || op === "percentFilled"
+    ? `${Math.round(n)}%`
+    : n.toLocaleString(undefined, { maximumFractionDigits: 2 });
+function ColumnCalc({ rows, value, numeric = false, defaultOp = "none", op: opProp, onOpChange, format = defaultFormat, align, opLabels, className, ...rest }) {
+    // a partial override, so a consumer can translate one op without
+    // restating all nine
+    const labelFor = (o) => opLabels?.[o] ?? exports.CALC_LABEL[o];
+    const [internal, setInternal] = React.useState(defaultOp);
+    const op = opProp ?? internal;
+    const setOp = (next) => {
+        if (opProp === undefined)
+            setInternal(next);
+        onOpChange?.(next);
+    };
+    const values = React.useMemo(() => rows.map(value), [rows, value]);
+    const result = React.useMemo(() => computeCalc(values, op), [values, op]);
+    const ops = [
+        ...exports.UNIVERSAL_CALCS,
+        ...(numeric ? exports.NUMERIC_CALCS : []),
+        "none",
+    ];
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, columncalc_recipe_1.columncalcRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)(menu_1.Menu, { trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "columncalc-trigger", "data-align": align === "right" ? "right" : undefined, children: op === "none" || result === null ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 12, strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("span", { className: "columncalc-placeholder", children: "Add calculation" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "columncalc-value", children: format(result, op) }), (0, jsx_runtime_1.jsx)("span", { className: "columncalc-op", children: labelFor(op) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 12, strokeWidth: 2 })] })) }), children: [(0, jsx_runtime_1.jsx)("div", { className: "columncalc-section", children: "Aggregations" }), ops.map((o) => ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => setOp(o), children: labelFor(o) }, o)))] }) }));
+}

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.columncalcRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// Attio's column footer calculation. The summary row is 36px and sticky at the
+// grid's bottom edge; each cell holds a quiet trigger that reads "Add
+// calculation" until an aggregation is chosen, then shows the value with its
+// operation name beside it.
+const config = (0, core_1.defineRecipe)({
+    name: "columncalc",
+    base: `display: flex; align-items: stretch; width: 100%; height: 100%; font-family: ${tokens_1.contract.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. */
+    & .menu { width: 100%; height: 100%; }
+        /* Attio's hit target is the WHOLE summary cell -- measured 246x37 with
+       padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
+       opens the aggregation menu. */
+    & .columncalc-trigger { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; height: 100%; min-height: ${tokens_1.contract.size.tableRow}; margin: 0; padding: 0 ${tokens_1.contract.space["3"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .columncalc-trigger:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
+    & .columncalc-trigger[data-align="right"] { justify-content: flex-end; }
+    & .columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
+    & .columncalc-value { color: ${tokens_1.contract.fgPrimary}; font-variant-numeric: tabular-nums; }
+    & .columncalc-op { color: ${tokens_1.contract.fgMuted}; }
+    & .columncalc-section { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.columncalcRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNIVERSAL_CALCS = exports.NUMERIC_CALCS = exports.isEmptyValue = exports.computeCalc = exports.ColumnCalc = exports.CALC_LABEL = void 0;
+var columncalc_1 = require("./columncalc");
+Object.defineProperty(exports, "CALC_LABEL", { enumerable: true, get: function () { return columncalc_1.CALC_LABEL; } });
+Object.defineProperty(exports, "ColumnCalc", { enumerable: true, get: function () { return columncalc_1.ColumnCalc; } });
+Object.defineProperty(exports, "computeCalc", { enumerable: true, get: function () { return columncalc_1.computeCalc; } });
+Object.defineProperty(exports, "isEmptyValue", { enumerable: true, get: function () { return columncalc_1.isEmptyValue; } });
+Object.defineProperty(exports, "NUMERIC_CALCS", { enumerable: true, get: function () { return columncalc_1.NUMERIC_CALCS; } });
+Object.defineProperty(exports, "UNIVERSAL_CALCS", { enumerable: true, get: function () { return columncalc_1.UNIVERSAL_CALCS; } });

package/dist/cjs/components/contextmenu/contextmenu.js

@@ -0,0 +1,78 @@
+"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.ContextMenu = ContextMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const contextmenu_recipe_1 = require("./contextmenu.recipe");
+/**
+ * A right-click context menu — the popover surface positioned at the cursor.
+ * Wrap the target; right-clicking it opens the menu (flipping at the viewport
+ * edges), closing on select, outside pointer-down, and Escape.
+ */
+function ContextMenu({ children, items, className }) {
+    const rootRef = React.useRef(null);
+    const [pos, setPos] = React.useState(null);
+    const open = (e) => {
+        e.preventDefault();
+        // flip so the menu stays on-screen near the right/bottom edges
+        const x = Math.min(e.clientX, window.innerWidth - 220);
+        const y = Math.min(e.clientY, window.innerHeight - 12 - items.length * 34);
+        setPos({ x: Math.max(8, x), y: Math.max(8, y) });
+    };
+    const close = React.useCallback(() => setPos(null), []);
+    React.useEffect(() => {
+        if (!pos)
+            return;
+        const onDown = (e) => {
+            if (!rootRef.current?.contains(e.target))
+                close();
+        };
+        const onKey = (e) => e.key === "Escape" && close();
+        document.addEventListener("pointerdown", onDown);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("pointerdown", onDown);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [pos, close]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, contextmenu_recipe_1.contextmenuRecipe)({ className }), children: [(0, jsx_runtime_1.jsx)("div", { onContextMenu: open, children: children }), pos && ((0, jsx_runtime_1.jsx)("div", { className: "contextmenu-content", role: "menu", style: { left: pos.x, top: pos.y }, children: items.map((item, i) => item.separator ? ((0, jsx_runtime_1.jsx)("hr", { className: "contextmenu-sep" }, i)) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
+                        ? "contextmenu-item contextmenu-item--danger"
+                        : "contextmenu-item", onClick: () => {
+                        item.onSelect?.();
+                        close();
+                    }, children: [item.icon, item.label, item.shortcut && ((0, jsx_runtime_1.jsx)("span", { className: "contextmenu-shortcut", children: item.shortcut }))] }, i))) }))] }));
+}
+ContextMenu.displayName = "ContextMenu";

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contextmenuRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A right-click menu on the measured popover surface, positioned at the cursor.
+const config = (0, core_1.defineRecipe)({
+    name: "contextmenu",
+    base: `display: contents; font-family: ${tokens_1.contract.font.sans};
+    & .contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; box-shadow: ${tokens_1.elevation.floating}; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .contextmenu-item { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; height: ${tokens_1.contract.size.menuRow}; box-sizing: border-box; padding: 0 ${tokens_1.contract.space["2"]}; margin: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; text-align: start; white-space: nowrap; cursor: pointer; }
+    & .contextmenu-item svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .contextmenu-item:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); }
+    & .contextmenu-item--danger { color: ${tokens_1.contract.bgDanger}; }
+    & .contextmenu-item--danger svg { color: ${tokens_1.contract.bgDanger}; }
+    & .contextmenu-item--danger:hover { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 10%, transparent); }
+    & .contextmenu-shortcut { margin-inline-start: auto; padding-inline-start: ${tokens_1.contract.space["3"]}; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.sm}; }
+    & .contextmenu-sep { height: 1px; margin: ${tokens_1.contract.space["1"]} 0; border: none; background: ${tokens_1.contract.borderSubtle}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.contextmenuRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contextmenuRecipe = exports.ContextMenu = void 0;
+var contextmenu_1 = require("./contextmenu");
+Object.defineProperty(exports, "ContextMenu", { enumerable: true, get: function () { return contextmenu_1.ContextMenu; } });
+var contextmenu_recipe_1 = require("./contextmenu.recipe");
+Object.defineProperty(exports, "contextmenuRecipe", { enumerable: true, get: function () { return contextmenu_recipe_1.contextmenuRecipe; } });