@crisp-ui-kit/crisp 0.2.0 → 0.7.0

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

@@ -0,0 +1,27 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// A side sheet — a focus-trapped panel that slides in from the right or left,
+// over a scrim. Shares the Dialog header/body/footer language.
+const config = defineRecipe({
+    name: "drawer",
+    base: `display: contents; font-family: ${c.font.sans};
+    & .drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, ${c.fgPrimary} 18%, transparent); opacity: 1; transition: opacity 0.2s ease; @starting-style { opacity: 0; } }
+    & .drawer-positioner { position: fixed; inset: 0; z-index: 61; display: flex; box-sizing: border-box; padding: ${c.space["2"]}; }
+    & .drawer-positioner[data-side="right"] { justify-content: flex-end; }
+    & .drawer-positioner[data-side="left"] { justify-content: flex-start; }
+    & .drawer-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; width: 420px; max-width: 100%; height: 100%; background: ${c.bgSurface}; border-radius: ${c.radius.xl}; box-shadow: ${e.floating}; transform: none; transition: transform 0.24s cubic-bezier(.32,.72,0,1); }
+    & .drawer-positioner[data-side="right"] .drawer-content { @starting-style { transform: translateX(calc(100% + ${c.space["2"]})); } }
+    & .drawer-positioner[data-side="left"] .drawer-content { @starting-style { transform: translateX(calc(-100% - ${c.space["2"]})); } }
+    & .drawer-header { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .drawer-header svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .drawer-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .drawer-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .drawer-close:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: ${c.space["4"]}; }
+    & .drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${c.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const drawerRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { Drawer, DrawerBody, DrawerFooter } from "./drawer.js";
+export { drawerRecipe } from "./drawer.recipe.js";

package/dist/esm/components/emptystate/emptystate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { emptystateRecipe } from "./emptystate.recipe.js";
+/** A centred empty-state panel — icon, title, description, optional action. */
+export function EmptyState({ icon, title, description, action, variant, className, ...rest }) {
+    return (_jsxs("div", { className: emptystateRecipe({ variant, className }), ...rest, children: [icon && _jsx("span", { className: "emptystate-icon", children: icon }), _jsx("div", { className: "emptystate-title", children: title }), description != null && (_jsx("div", { className: "emptystate-desc", children: description })), action && _jsx("div", { className: "emptystate-action", children: action })] }));
+}
+EmptyState.displayName = "EmptyState";

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

@@ -0,0 +1,31 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// An empty-state panel — icon + title + description + optional action.
+const config = defineRecipe({
+    name: "emptystate",
+    base: `display: flex; flex-direction: column; align-items: center; justify-content: center; gap: ${c.space["1.5"]}; box-sizing: border-box; padding: ${c.space["8"]} ${c.space["4"]}; text-align: center; font-family: ${c.font.sans};
+    & .emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: color-mix(in srgb, ${c.fgPrimary} 5%, transparent); color: ${c.fgMuted}; }
+    & .emptystate-title { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .emptystate-desc { max-width: 320px; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .emptystate-action { margin-top: ${c.space["2"]}; }`,
+    variants: {
+        variant: {
+            // compact icon tile (default)
+            default: ``,
+            // a large icon on a dotted-grid backdrop — Attio's Developers/Reports empty state
+            illustrated: `& .emptystate-icon { width: 132px; height: 96px; margin-bottom: ${c.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${c.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${c.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }`,
+            // Attio's full-view empty state (measured from a filtered-to-zero records table):
+            // a 45px ringed circle icon, a 20/24 semibold heading, a 14/20 medium muted body,
+            // then a primary action. Gaps are 16 / 8 / 16 (icon→title→desc→action).
+            page: `gap: ${c.space["2"]};
+    & .emptystate-icon { width: 45px; height: 45px; margin-bottom: ${c.space["2"]}; border-radius: ${c.radius.full}; border: 1px solid ${c.borderSubtle}; background: none; color: ${c.fgMuted}; }
+    & .emptystate-title { font-size: 20px; line-height: 24px; }
+    & .emptystate-desc { max-width: 266px; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; line-height: 20px; }
+    & .emptystate-action { margin-top: ${c.space["2"]}; }`,
+        },
+    },
+    defaultVariants: { variant: "default" },
+    compoundVariants: [],
+});
+export const emptystateRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { EmptyState } from "./emptystate.js";
+export { emptystateRecipe } from "./emptystate.recipe.js";

package/dist/esm/components/formfield/formfield.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { formfieldRecipe } from "./formfield.recipe.js";
+/**
+ * A labelled form field — measured from Attio's Settings forms. A muted label
+ * above any control, with an optional description or error line below. When
+ * `error` is set, it replaces the description and gets `aria-describedby` wiring.
+ */
+export function FormField({ label, htmlFor, required, optional, description, error, children, className, ...rest }) {
+    const descId = React.useId();
+    const hasMsg = error != null || description != null;
+    return (_jsxs("div", { className: formfieldRecipe({ className }), ...rest, children: [_jsxs("label", { className: "formfield-label", htmlFor: htmlFor, children: [label, required && (_jsx("span", { className: "formfield-required", "aria-hidden": "true", children: "*" })), optional && !required && (_jsx("span", { className: "formfield-optional", children: optional === true ? "(optional)" : optional }))] }), children, error != null ? (_jsx("span", { className: "formfield-error", id: hasMsg ? descId : undefined, children: error })) : description != null ? (_jsx("span", { className: "formfield-desc", id: hasMsg ? descId : undefined, children: description })) : null] }));
+}
+FormField.displayName = "FormField";

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

@@ -0,0 +1,19 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A labelled form field — measured from Attio's Settings forms: a 12px/500 muted
+// label above the control, with an optional description or danger error line
+// below. Wraps any control (Input, Select, Textarea…).
+const config = defineRecipe({
+    name: "formfield",
+    base: `display: flex; flex-direction: column; gap: ${c.space["1.5"]}; box-sizing: border-box; font-family: ${c.font.sans};
+    & .formfield-label { display: inline-flex; align-items: center; gap: ${c.space["1"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .formfield-required { color: ${c.bgDanger}; }
+    & .formfield-optional { color: color-mix(in srgb, ${c.fgPrimary} 40%, transparent); font-weight: ${c.weight.regular}; }
+    & .formfield-desc { font-size: ${c.text.sm}; line-height: 16px; color: ${c.fgMuted}; }
+    & .formfield-error { font-size: ${c.text.sm}; line-height: 16px; color: ${c.bgDanger}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const formfieldRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { FormField } from "./formfield.js";
+export { formfieldRecipe } from "./formfield.recipe.js";

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

@@ -0,0 +1,2 @@
+export { Input } from "./input.js";
+export { inputRecipe } from "./input.recipe.js";

package/dist/esm/components/input/input.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { inputRecipe } from "./input.recipe.js";
+export const Input = React.forwardRef(({ size, invalid, className, style, ...props }, ref) => {
+    // The wrapper exists only to host the ::after focus ring — an <input> is a
+    // replaced element and cannot have one. Everything the consumer passes
+    // still lands on the <input> itself, so `id`, `name`, `onChange`, form
+    // association and every native attribute behave exactly as before.
+    return (_jsx("span", { className: inputRecipe({ size, invalid, className }), style: style, children: _jsx("input", { ref: ref, className: "input-value", "aria-invalid": invalid === true || undefined, ...props }) }));
+});
+Input.displayName = "Input";

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

@@ -0,0 +1,56 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// Geometry is Attio's, measured: 32/36px tall, r8/r10, 10/12px side padding.
+// The FOCUS TREATMENT is seed-design's, measured from @seed-design/css: a 2px
+// ring on an ::after overlay that is present-but-transparent at rest, so
+// focusing cannot shift layout the way a width change would, and animates
+// `border-color` over 100ms. The ring colour is a high-contrast neutral rather
+// than the brand hue — it reads as "this field has focus", not as a state.
+//
+// The ring needs the ::after, and ::after needs a non-replaced element, so
+// Input renders a wrapper around the <input>. The wrapper is presentational:
+// every consumer prop still goes to the <input>, which is what `id`, `name`,
+// `onChange` and form semantics require.
+const config = defineRecipe({
+    name: "input",
+    base: `
+    position: relative; box-sizing: border-box; display: inline-flex; align-items: center;
+    width: 100%; background: ${c.bgSurface}; box-shadow: ${e.field};
+    font-family: ${c.font.sans}; font-size: ${c.text.lg}; line-height: 20px;
+
+    &::after {
+      content: ""; position: absolute; inset: 0; border-radius: inherit;
+      border: 2px solid transparent; transition: border-color .1s ease;
+      pointer-events: none;
+    }
+    &:focus-within::after { border-color: ${c.strokeFieldFocus}; }
+
+    & .input-value {
+      box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%;
+      align-self: stretch; margin: 0; border: none; background: none; outline: none;
+      font: inherit; color: ${c.fgPrimary};
+    }
+    & .input-value::placeholder { color: ${c.fgMuted}; }
+    & .input-value:disabled { opacity: 0.5; cursor: not-allowed; }
+    &:has(.input-value:disabled) { opacity: 1; }
+  `,
+    variants: {
+        size: {
+            medium: `height: 32px; border-radius: ${c.radius.md}; & .input-value { padding-inline: ${c.space["2.5"]}; }`,
+            large: `height: 36px; border-radius: 10px; & .input-value { padding-inline: ${c.space["3"]}; }`,
+        },
+        invalid: {
+            // critical outranks focus: a field that is wrong stays visibly wrong
+            // while you are correcting it, which is seed's behaviour too
+            true: `&::after { border-color: ${c.bgDanger}; } &:focus-within::after { border-color: ${c.bgDanger}; }`,
+            false: ``,
+        },
+    },
+    defaultVariants: { size: "medium", invalid: false },
+    compoundVariants: [],
+});
+export const inputRecipe = Object.assign(resolveRecipe(config), {
+    config,
+    meta: { medium: { height: "32px", borderRadius: "8px", fontSize: "14px" } },
+});
+export default config;

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

@@ -0,0 +1,2 @@
+export { Kbd } from "./kbd.js";
+export { kbdRecipe } from "./kbd.recipe.js";

package/dist/esm/components/kbd/kbd.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { kbdRecipe } from "./kbd.recipe.js";
+export const Kbd = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    return (_jsx(Primitive.span, { ref: ref, asChild: asChild, className: kbdRecipe({ className }), ...props }));
+});
+Kbd.displayName = "Kbd";

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

@@ -0,0 +1,20 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+const config = defineRecipe({
+    name: "kbd",
+    base: `box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: ${c.space["0.5"]}; min-width: 20px; height: 20px; padding-inline: ${c.space["1"]}; border-radius: ${c.radius.sm}; font-family: ${c.font.sans}; font-size: ${c.text.xs}; font-weight: ${c.weight.regular}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 6%, transparent);`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const kbdRecipe = Object.assign(resolveRecipe(config), {
+    config,
+    meta: {
+        chip: {
+            height: "20px",
+            borderRadius: "6px",
+            fontSize: "11px",
+        },
+    },
+});
+export default config;

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

@@ -0,0 +1,2 @@
+export { LineChart } from "./linechart.js";
+export { linechartRecipe } from "./linechart.recipe.js";

package/dist/esm/components/linechart/linechart.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { contract as c } from "../../tokens/index.js";
+import { linechartRecipe } from "./linechart.recipe.js";
+function niceNum(raw) {
+    if (raw <= 0)
+        return 1;
+    const mag = 10 ** Math.floor(Math.log10(raw));
+    const norm = raw / mag;
+    const step = norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 5 ? 5 : 10;
+    return step * mag;
+}
+/**
+ * A responsive line chart — measured from Attio's Reports historical charts.
+ * A stretched SVG line/area (non-scaling stroke keeps it crisp) over dashed
+ * gridlines; dots are HTML so they stay round. `role="img"` with a summary.
+ */
+export function LineChart({ data, height = 240, max, ticks = 5, color, area = true, dots = true, format = (n) => n.toLocaleString(), yAxisWidth, xAxisTitle, "aria-label": ariaLabel, className, ...rest }) {
+    const rawMax = Math.max(1, ...data.map((d) => d.value));
+    const step = max ? max / (ticks - 1) : niceNum(rawMax / (ticks - 1));
+    const top = step * (ticks - 1);
+    const tickValues = Array.from({ length: ticks }, (_, i) => step * i);
+    // The value-axis gutter must fit whatever `format` actually returns — a
+    // hardcoded width fits "4.0k" but not "4,000,000₮". `ch` is the width of
+    // "0" in the current font, so sizing off the longest formatted tick tracks
+    // the real label width without measuring the DOM (works during SSR, no
+    // ResizeObserver). `yAxisWidth` lets a caller pin the gutter instead.
+    const longestTickChars = Math.max(0, ...tickValues.map((t) => format(t).length));
+    const yAxisWidthValue = yAxisWidth != null
+        ? `${yAxisWidth}px`
+        : `max(34px, ${longestTickChars}ch + ${c.space["4"]})`;
+    // points in a 0..100 viewBox (y inverted: 0 at top)
+    const n = data.length;
+    const pts = data.map((d, i) => {
+        const x = n === 1 ? 50 : (i / (n - 1)) * 100;
+        const frac = Math.max(0, Math.min(1, d.value / top));
+        return { x, y: 100 - frac * 100, frac };
+    });
+    const line = pts.map((p) => `${p.x},${p.y}`).join(" ");
+    const areaPath = pts.length > 1
+        ? `M ${pts[0].x},100 ${pts.map((p) => `L ${p.x},${p.y}`).join(" ")} L ${pts[pts.length - 1].x},100 Z`
+        : "";
+    const summary = ariaLabel ??
+        `Line chart: ${data.map((d) => `${d.label} ${format(d.value)}`).join(", ")}`;
+    return (_jsxs("div", { className: linechartRecipe({ className }), ...rest, style: {
+            height,
+            "--linechart-yaxis-width": yAxisWidthValue,
+        }, role: "img", "aria-label": summary, children: [_jsxs("div", { className: "linechart-body", children: [_jsx("div", { className: "linechart-yaxis", children: tickValues.map((t) => (_jsx("span", { className: "linechart-ytick", style: { bottom: `${(t / top) * 100}%` }, children: format(t) }, t))) }), _jsxs("div", { className: "linechart-plot", children: [tickValues.map((t) => (_jsx("div", { className: "linechart-grid", style: { bottom: `${(t / top) * 100}%` } }, t))), pts.length > 1 && (_jsxs("svg", { className: "linechart-svg", viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [area && _jsx("path", { className: "linechart-area", d: areaPath }), _jsx("polyline", { className: "linechart-line", points: line, style: { stroke: color } })] })), dots &&
+                                pts.map((p, i) => (_jsx("span", { className: "linechart-dot-html", style: {
+                                        left: `${p.x}%`,
+                                        bottom: `${p.frac * 100}%`,
+                                        borderColor: color,
+                                    }, title: `${data[i].label}: ${format(data[i].value)}` }, i)))] })] }), _jsx("div", { className: "linechart-xaxis", children: data.map((d) => (_jsx("span", { className: "linechart-xlabel", children: d.label }, d.label))) }), xAxisTitle != null && (_jsx("div", { className: "linechart-axis-title", children: xAxisTitle }))] }));
+}
+LineChart.displayName = "LineChart";

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

@@ -0,0 +1,32 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A responsive line chart — measured from Attio's Reports historical charts: a
+// brand line with a soft area fill over dashed horizontal gridlines, a value
+// axis on the left, and category labels below. The plot is an SVG stretched to
+// its box (non-scaling stroke keeps the line crisp); axes are HTML.
+const config = defineRecipe({
+    name: "linechart",
+    // --linechart-yaxis-width is the one source of truth for the value-axis
+    // gutter: the component sets it (auto-sized to the longest tick label, or
+    // pinned via `yAxisWidth`) on the root element, and it inherits down to the
+    // x-axis padding and axis title so they never drift out of alignment. 34px
+    // is only the pre-JS fallback (e.g. if `linechartRecipe` is used bare).
+    base: `display: flex; flex-direction: column; box-sizing: border-box; font-family: ${c.font.sans}; --linechart-yaxis-width: 34px;
+    & .linechart-body { display: flex; flex: 1; min-height: 0; }
+    & .linechart-yaxis { position: relative; flex-shrink: 0; width: var(--linechart-yaxis-width); }
+    & .linechart-ytick { position: absolute; inset-inline-end: ${c.space["2"]}; transform: translateY(50%); font-size: ${c.text.xs}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .linechart-plot { position: relative; flex: 1; min-width: 0; border-bottom: 1px solid ${c.borderDefault}; }
+    & .linechart-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed ${c.borderSubtle}; pointer-events: none; }
+    & .linechart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+    & .linechart-area { fill: color-mix(in srgb, ${c.bgBrandSolid} 12%, transparent); stroke: none; }
+    & .linechart-line { fill: none; stroke: ${c.bgBrandSolid}; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
+    & .linechart-dot-html { position: absolute; width: 8px; height: 8px; box-sizing: border-box; border-radius: ${c.radius.full}; background: ${c.bgSurface}; border: 2px solid ${c.bgBrandSolid}; transform: translate(-50%, 50%); pointer-events: auto; }
+    & .linechart-xaxis { display: flex; margin-top: ${c.space["1.5"]}; padding-inline-start: var(--linechart-yaxis-width); }
+    & .linechart-xlabel { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .linechart-axis-title { margin-top: ${c.space["1"]}; padding-inline-start: var(--linechart-yaxis-width); text-align: center; font-size: ${c.text.sm}; color: ${c.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const linechartRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,3 @@
+export { Menu, MenuCheckboxItem, MenuItem, MenuLabel, MenuSeparator, } from "./menu.js";
+export { menuRecipe } from "./menu.recipe.js";
+export { MENU_ITEM_SELECTOR, useMenuKeyboard, } from "./menu-keyboard.js";

package/dist/esm/components/menu/menu-keyboard.js

@@ -0,0 +1,80 @@
+import * as React from "react";
+/**
+ * The elements a `role="menu"` may own, minus the disabled ones. Kept here so
+ * every menu surface in crisp agrees on what counts as an item.
+ */
+export const MENU_ITEM_SELECTOR = [
+    '[role="menuitem"]',
+    '[role="menuitemcheckbox"]',
+    '[role="menuitemradio"]',
+]
+    // a disabled item is not focusable, so leaving it in the list would strand
+    // the roving focus on it — both spellings have to go
+    .map((role) => `${role}:not([data-disabled]):not(:disabled)`)
+    .join(",");
+/**
+ * The WAI-ARIA menu keyboard model: focus the first item on open, ↑/↓ to move
+ * (wrapping), Home/End to jump, printable characters for typeahead, Esc to
+ * close, Tab to dismiss. Returns the `onKeyDown` to put on the menu element.
+ *
+ * Extracted from `Menu` so the table surfaces, which build their own popovers
+ * against measured positions, get the identical model instead of a second
+ * partial one.
+ */
+export function useMenuKeyboard({ open, close, dismiss = close, contentRef, }) {
+    const typeahead = React.useRef("");
+    const typeaheadTimer = React.useRef(undefined);
+    const items = React.useCallback(() => Array.from(contentRef.current?.querySelectorAll(MENU_ITEM_SELECTOR) ??
+        []), [contentRef]);
+    // focus the first item when the menu opens
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const id = requestAnimationFrame(() => contentRef.current
+            ?.querySelector(MENU_ITEM_SELECTOR)
+            ?.focus());
+        return () => cancelAnimationFrame(id);
+    }, [open, contentRef]);
+    React.useEffect(() => () => clearTimeout(typeaheadTimer.current), []);
+    const onKeyDown = (e) => {
+        const list = items();
+        const idx = list.indexOf(document.activeElement);
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            list[(idx + 1) % list.length]?.focus();
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            list[(idx - 1 + list.length) % list.length]?.focus();
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            list[0]?.focus();
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            list[list.length - 1]?.focus();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            close();
+        }
+        else if (e.key === "Tab") {
+            dismiss();
+        }
+        else if (e.key.length === 1 && /\S/.test(e.key)) {
+            // typeahead: jump to the next item starting with the typed run
+            typeahead.current += e.key.toLowerCase();
+            clearTimeout(typeaheadTimer.current);
+            typeaheadTimer.current = setTimeout(() => {
+                typeahead.current = "";
+            }, 500);
+            const match = list.find((el) => (el.textContent ?? "")
+                .trim()
+                .toLowerCase()
+                .startsWith(typeahead.current));
+            match?.focus();
+        }
+    };
+    return { onKeyDown, items };
+}

package/dist/esm/components/menu/menu.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import * as React from "react";
+import { menuRecipe } from "./menu.recipe.js";
+import { useMenuKeyboard } from "./menu-keyboard.js";
+const MenuContext = React.createContext(null);
+/**
+ * A dropdown menu — the ⋯ / sort / filter menu surface, on Attio's measured
+ * popover. Give it a `trigger` element and Menu items as children. Opens on
+ * click / ↓ / Enter; roving-focus keyboard model (↑/↓ move, Home/End jump,
+ * typeahead, Enter/Space select, Esc closes and returns focus to the trigger);
+ * closes on outside click. Flips up / right-aligns when space is tight.
+ */
+export function Menu({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, className, "aria-label": ariaLabel, }) {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const open = openProp ?? internalOpen;
+    const setOpen = React.useCallback((next) => {
+        if (openProp === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [openProp, onOpenChange]);
+    const [up, setUp] = React.useState(false);
+    const [pos, setPos] = React.useState({});
+    const rootRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    // Position the (fixed) menu against the trigger so it escapes any overflow
+    // clip; flip up / right-align when there isn't room. Runs on every open,
+    // not just a click, so a controlled consumer gets the same placement.
+    const place = () => {
+        const rect = triggerRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        const gap = 4;
+        const flipUp = window.innerHeight - rect.bottom < 280;
+        const style = flipUp
+            ? { bottom: window.innerHeight - rect.top + gap }
+            : { top: rect.bottom + gap };
+        if (align === "end")
+            style.right = window.innerWidth - rect.right;
+        else
+            style.left = rect.left;
+        setUp(flipUp);
+        setPos(style);
+    };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reposition each time it opens
+    React.useLayoutEffect(() => {
+        if (open)
+            place();
+    }, [open]);
+    const close = React.useCallback(() => {
+        setOpen(false);
+        triggerRef.current?.focus?.();
+    }, [setOpen]);
+    // close on outside pointer-down
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            if (!rootRef.current?.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("pointerdown", onDown);
+        return () => document.removeEventListener("pointerdown", onDown);
+    }, [open, setOpen]);
+    const { onKeyDown: onContentKeyDown } = useMenuKeyboard({
+        open,
+        close,
+        dismiss: () => setOpen(false),
+        contentRef,
+    });
+    const triggerEl = React.cloneElement(trigger, {
+        ref: triggerRef,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (e) => {
+            trigger.props.onClick?.(e);
+            setOpen(!open);
+        },
+    });
+    return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(MenuContext.Provider, { value: { close }, children: _jsx("div", { ref: contentRef, className: "menu-content", role: "menu", "aria-label": ariaLabel, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: children }) }))] }));
+}
+Menu.displayName = "Menu";
+export function MenuItem({ children, icon, shortcut, danger, disabled, onSelect, closeOnSelect = true, }) {
+    const ctx = React.useContext(MenuContext);
+    return (_jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: `menu-item${danger ? " menu-item--danger" : ""}`, onClick: () => {
+            onSelect?.();
+            if (closeOnSelect)
+                ctx?.close();
+        }, children: [icon, _jsx("span", { className: "menu-item-label", children: children }), shortcut && _jsx("span", { className: "menu-item-shortcut", children: shortcut })] }));
+}
+MenuItem.displayName = "MenuItem";
+export function MenuCheckboxItem({ children, checked, onCheckedChange, disabled, }) {
+    return (_jsxs("button", { type: "button", role: "menuitemcheckbox", "aria-checked": checked, tabIndex: -1, disabled: disabled, "data-disabled": disabled ? "" : undefined, className: "menu-item", onClick: () => onCheckedChange?.(!checked), children: [checked ? (_jsx(Check, { className: "menu-item-check", size: 15, strokeWidth: 2 })) : (_jsx("span", { className: "menu-item-check--placeholder" })), _jsx("span", { className: "menu-item-label", children: children })] }));
+}
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+export function MenuSeparator() {
+    return _jsx("hr", { className: "menu-sep" });
+}
+MenuSeparator.displayName = "MenuSeparator";
+export function MenuLabel({ children }) {
+    return _jsx("div", { className: "menu-label", children: children });
+}
+MenuLabel.displayName = "MenuLabel";

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

@@ -0,0 +1,51 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// A dropdown menu — same popover surface Attio uses for its ⋯ / sort / filter
+// menus (measured from the app's listboxes): radius 12, 4px padding, a layered
+// soft shadow, over 32px items (radius 8, icon + label + optional shortcut /
+// check). The content is rendered inside this relative root so it keeps these
+// nested styles while escaping the trigger's own box.
+const config = defineRecipe({
+    name: "menu",
+    base: `
+    position: relative; display: inline-flex; font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .menu-content {
+      position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
+      min-width: 200px; max-height: 360px; overflow-y: auto; padding: ${c.space["1"]};
+      border-radius: ${c.radius.xl}; background: ${c.bgPopover};
+      box-shadow: ${e.floating};
+      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+    }
+    & .menu-content[data-align="end"] { transform-origin: top right; }
+    & .menu-content[data-up] { transform-origin: bottom left; }
+    & .menu-content[data-up][data-align="end"] { transform-origin: bottom right; }
+    & .menu-content { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+
+    & .menu-item {
+      box-sizing: border-box; display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: ${c.size.menuRow}; flex-shrink: 0;
+      margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; border-radius: ${c.radius.md};
+      font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: start; cursor: pointer; white-space: nowrap;
+    }
+    & .menu-item svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .menu-item:focus { outline: none; }
+    & .menu-item:hover:not([data-disabled]), & .menu-item:focus-visible:not([data-disabled]), & .menu-item[data-highlighted]:not([data-disabled]) { background: ${c.bgRaised}; }
+    & .menu-item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+    & .menu-item--danger { color: ${c.bgDanger}; }
+    & .menu-item--danger svg { color: ${c.bgDanger}; }
+    & .menu-item--danger:hover, & .menu-item--danger:focus-visible, & .menu-item--danger[data-highlighted] { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }
+    & .menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .menu-item-shortcut { flex-shrink: 0; margin-inline-start: ${c.space["3"]}; font-size: ${c.text.sm}; color: ${c.fgMuted}; letter-spacing: 0.02em; }
+    & .menu-item-check { flex-shrink: 0; color: ${c.bgBrandSolid}; }
+    & .menu-item-check--placeholder { width: 15px; }
+
+    & .menu-sep { height: 1px; flex-shrink: 0; border: none; margin: ${c.space["1"]} calc(-1 * ${c.space["1"]}); background: ${c.borderSubtle}; }
+    & .menu-label { padding: ${c.space["1.5"]} ${c.space["2"]} ${c.space["0.5"]}; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const menuRecipe = Object.assign(resolveRecipe(config), { config });
+export default config;

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

@@ -0,0 +1,2 @@
+export { MultiSelect, } from "./multiselect.js";
+export { multiselectRecipe } from "./multiselect.recipe.js";