@crisp-ui-kit/crisp 0.2.0 → 0.7.0

package/dist/esm/components/callout/callout.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
+import { calloutRecipe } from "./callout.recipe.js";
+const DEFAULT_ICONS = {
+    neutral: Info,
+    info: Info,
+    success: CircleCheck,
+    warning: TriangleAlert,
+    danger: CircleAlert,
+};
+/**
+ * An inline callout / banner — measured from Attio's info notices. `tone` tints
+ * the background and icon; pass a `title` and/or body `children`.
+ */
+export function Callout({ tone = "neutral", icon, title, children, action, className, ...rest }) {
+    const Fallback = DEFAULT_ICONS[tone];
+    const iconNode = icon === undefined
+        ? Fallback && _jsx(Fallback, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
+        : icon;
+    return (_jsxs("div", { className: calloutRecipe({ className }), ...rest, "data-tone": tone, role: "note", children: [iconNode && _jsx("span", { className: "callout-icon", children: iconNode }), _jsxs("div", { className: "callout-body", children: [title != null && _jsx("div", { className: "callout-title", children: title }), children != null && _jsx("div", { className: "callout-desc", children: children })] }), action && _jsx("div", { className: "callout-action", children: action })] }));
+}
+Callout.displayName = "Callout";

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

@@ -0,0 +1,26 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A callout / banner — Attio's inline info notices (e.g. "Changes apply to all
+// workspaces", the trial banner). Tone tints the background + icon.
+const config = defineRecipe({
+    name: "callout",
+    base: `display: flex; align-items: flex-start; gap: ${c.space["2.5"]}; box-sizing: border-box; padding: ${c.space["3"]} ${c.space["4"]}; border-radius: ${c.radius.lg}; font-family: ${c.font.sans}; font-size: ${c.text.md}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary};
+    & .callout-icon { flex-shrink: 0; margin-top: 1px; display: inline-flex; color: ${c.fgMuted}; }
+    & .callout-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+    & .callout-title { font-weight: ${c.weight.semibold}; }
+    & .callout-desc { color: ${c.fgMuted}; }
+    & .callout-action { flex-shrink: 0; }
+    &[data-tone="info"] { background: color-mix(in srgb, ${c.bgBrandSolid} 8%, transparent); }
+    &[data-tone="info"] .callout-icon { color: ${c.bgBrandSolid}; }
+    &[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 10%, transparent); }
+    &[data-tone="success"] .callout-icon { color: ${c.bgSuccess}; }
+    &[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 12%, transparent); }
+    &[data-tone="warning"] .callout-icon { color: ${c.bgWarning}; }
+    &[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
+    &[data-tone="danger"] .callout-icon { color: ${c.bgDanger}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const calloutRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { Callout } from "./callout.js";
+export { calloutRecipe } from "./callout.recipe.js";

package/dist/esm/components/card/card.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cardRecipe } from "./card.recipe.js";
+/** A bordered surface card. Compose with CardHeader / CardBody / CardFooter. */
+export const Card = React.forwardRef(({ raised, interactive, className, ...props }, ref) => (_jsx("div", { ref: ref, className: cardRecipe({ raised, interactive, className }), ...props })));
+Card.displayName = "Card";
+export function CardHeader({ children, icon, action, }) {
+    return (_jsxs("div", { className: "card-header", children: [icon, _jsx("span", { className: "card-title", children: children }), action] }));
+}
+export function CardBody({ children, className, }) {
+    return (_jsx("div", { className: className ? `card-body ${className}` : "card-body", children: children }));
+}
+export function CardFooter({ children }) {
+    return _jsx("div", { className: "card-footer", children: children });
+}

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

@@ -0,0 +1,28 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = defineRecipe({
+    name: "card",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; font-family: ${c.font.sans}; color: ${c.fgPrimary};
+    & .card-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; padding: ${c.space["3"]} ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; }
+    & .card-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .card-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .card-body { flex: 1; min-height: 0; padding: ${c.space["4"]}; }
+    & .card-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["2"]}; flex-shrink: 0; padding: ${c.space["3"]} ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }`,
+    variants: {
+        raised: {
+            true: `box-shadow: inset 0 0 0 1px ${c.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 ${c.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: [],
+});
+export const cardRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { Card, CardBody, CardFooter, CardHeader } from "./card.js";
+export { cardRecipe } from "./card.recipe.js";

package/dist/esm/components/checkbox/checkbox.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { checkboxRecipe } from "./checkbox.recipe.js";
+/**
+ * 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.
+ */
+export const 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 (_jsx(Primitive.input, { ref: innerRef, asChild: asChild, type: "checkbox", className: checkboxRecipe({ className }), ...props }));
+});
+Checkbox.displayName = "Checkbox";

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

@@ -0,0 +1,31 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = 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: ${c.radius.sm}
+  ; background: ${c.bgSurface}
+  ; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary}
+  9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; &:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 30%, transparent); }
+  &:checked, &:indeterminate { background: ${c.bgBrandSolid} center / 10px no-repeat; box-shadow: none; }
+  &:checked { background-image: ${CHECK}; }
+  &:indeterminate { background-image: linear-gradient(${c.fgOnBrand}, ${c.fgOnBrand}); background-size: 8px 2px; }
+  &:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const checkboxRecipe = Object.assign(resolveRecipe(config), {
+    config,
+    meta: {
+        box: {
+            size: "16px",
+            borderRadius: "6px",
+        },
+    },
+});
+export default config;

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

@@ -0,0 +1,2 @@
+export { Checkbox } from "./checkbox.js";
+export { checkboxRecipe } from "./checkbox.recipe.js";

package/dist/esm/components/columncalc/columncalc.js

@@ -0,0 +1,100 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, Plus } from "lucide-react";
+import * as React from "react";
+import { Menu, MenuItem } from "../menu/index.js";
+import { columncalcRecipe } from "./columncalc.recipe.js";
+/** The four Attio offers on every column, in its order. */
+export const UNIVERSAL_CALCS = [
+    "countEmpty",
+    "countFilled",
+    "percentEmpty",
+    "percentFilled",
+];
+/** The four Attio adds for numeric columns, in its order. */
+export const NUMERIC_CALCS = ["sum", "average", "min", "max"];
+export const 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. */
+export 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.
+ */
+export 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 });
+export 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] ?? 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 = [
+        ...UNIVERSAL_CALCS,
+        ...(numeric ? NUMERIC_CALCS : []),
+        "none",
+    ];
+    return (_jsx("span", { className: columncalcRecipe({ className }), ...rest, children: _jsxs(Menu, { trigger: _jsx("button", { type: "button", className: "columncalc-trigger", "data-align": align === "right" ? "right" : undefined, children: op === "none" || result === null ? (_jsxs(_Fragment, { children: [_jsx(Plus, { size: 12, strokeWidth: 2 }), _jsx("span", { className: "columncalc-placeholder", children: "Add calculation" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "columncalc-value", children: format(result, op) }), _jsx("span", { className: "columncalc-op", children: labelFor(op) }), _jsx(ChevronDown, { size: 12, strokeWidth: 2 })] })) }), children: [_jsx("div", { className: "columncalc-section", children: "Aggregations" }), ops.map((o) => (_jsx(MenuItem, { onSelect: () => setOp(o), children: labelFor(o) }, o)))] }) }));
+}

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

@@ -0,0 +1,30 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// 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 = defineRecipe({
+    name: "columncalc",
+    base: `display: flex; align-items: stretch; width: 100%; height: 100%; font-family: ${c.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: ${c.space["1"]}; width: 100%; height: 100%; min-height: ${c.size.tableRow}; margin: 0; padding: 0 ${c.space["3"]}; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .columncalc-trigger:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.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: ${c.fgPrimary}; font-variant-numeric: tabular-nums; }
+    & .columncalc-op { color: ${c.fgMuted}; }
+    & .columncalc-section { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const columncalcRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1 @@
+export { CALC_LABEL, ColumnCalc, computeCalc, isEmptyValue, NUMERIC_CALCS, UNIVERSAL_CALCS, } from "./columncalc.js";

package/dist/esm/components/contextmenu/contextmenu.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { contextmenuRecipe } from "./contextmenu.recipe.js";
+/**
+ * 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.
+ */
+export 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 (_jsxs("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: [_jsx("div", { onContextMenu: open, children: children }), pos && (_jsx("div", { className: "contextmenu-content", role: "menu", style: { left: pos.x, top: pos.y }, children: items.map((item, i) => item.separator ? (_jsx("hr", { className: "contextmenu-sep" }, i)) : (_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 && (_jsx("span", { className: "contextmenu-shortcut", children: item.shortcut }))] }, i))) }))] }));
+}
+ContextMenu.displayName = "ContextMenu";

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

@@ -0,0 +1,21 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// A right-click menu on the measured popover surface, positioned at the cursor.
+const config = defineRecipe({
+    name: "contextmenu",
+    base: `display: contents; font-family: ${c.font.sans};
+    & .contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; box-shadow: ${e.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: ${c.space["2"]}; width: 100%; height: ${c.size.menuRow}; box-sizing: border-box; padding: 0 ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; text-align: start; white-space: nowrap; cursor: pointer; }
+    & .contextmenu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .contextmenu-item:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); }
+    & .contextmenu-item--danger { color: ${c.bgDanger}; }
+    & .contextmenu-item--danger svg { color: ${c.bgDanger}; }
+    & .contextmenu-item--danger:hover { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
+    & .contextmenu-shortcut { margin-inline-start: auto; padding-inline-start: ${c.space["3"]}; color: ${c.fgMuted}; font-size: ${c.text.sm}; }
+    & .contextmenu-sep { height: 1px; margin: ${c.space["1"]} 0; border: none; background: ${c.borderSubtle}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const contextmenuRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { ContextMenu, } from "./contextmenu.js";
+export { contextmenuRecipe } from "./contextmenu.recipe.js";