@crisp-ui-kit/crisp 0.57.3 → 0.57.4

package/dist/cjs/product/share/share.js

@@ -0,0 +1,179 @@
+"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.SharePopover = SharePopover;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const avatar_1 = require("../../components/avatar");
+const input_1 = require("../../components/input");
+const select_1 = require("../../components/select");
+const tabs_1 = require("../../components/tabs");
+const core_1 = require("../../core");
+const share_recipe_1 = require("./share.recipe");
+/**
+ * A Share/permissions popover — measured live on app.attio.com (both an
+ * object table's and a List's own "Share" trigger, techpartners workspace):
+ * Members/Automations pill tabs, a "Workspace access" row (avatar + label +
+ * a `Read and write ⌄`-style role select), an optional plan-gated upsell
+ * slot, a "Clear permissions" action, an "Individual members" list (one row
+ * per member, its own role select), and — on the Automations tab — a
+ * search box + role select + "Add" row. Both tabs share a trailing "Learn
+ * more about permissions" link.
+ *
+ * Its own floating shell (not the generic `Popover`): the measured surface
+ * is 440px wide, past `Popover`'s 360px content cap. See share.recipe.ts.
+ */
+function SharePopover({ trigger, align = "end", open: openProp, defaultOpen, onOpenChange, tab: tabProp, defaultTab = "members", onTabChange, membersTabLabel: membersTabLabelProp, automationsTabLabel: automationsTabLabelProp, workspaceIcon, workspaceAccessLabel: workspaceAccessLabelProp, workspaceAccessValue, workspaceAccessOptions, onWorkspaceAccessChange, advancedSharing, onClearPermissions, clearPermissionsLabel: clearPermissionsLabelProp, members, membersSectionLabel: membersSectionLabelProp, memberRoleOptions, onMemberAccessChange, automationSearchValue, defaultAutomationSearchValue, onAutomationSearchChange, automationSearchPlaceholder: automationSearchPlaceholderProp, automationRoleValue, automationRoleOptions, onAutomationRoleChange, onAddAutomation, addAutomationDisabled, addAutomationLabel: addAutomationLabelProp, learnMoreHref, learnMoreLabel: learnMoreLabelProp, "aria-label": ariaLabel, className, ...rest }) {
+    const membersTabLabel = (0, core_1.useCrispMessage)(membersTabLabelProp, "Members");
+    const automationsTabLabel = (0, core_1.useCrispMessage)(automationsTabLabelProp, "Automations");
+    const workspaceAccessLabel = (0, core_1.useCrispMessage)(workspaceAccessLabelProp, "Workspace access");
+    const clearPermissionsLabel = (0, core_1.useCrispMessage)(clearPermissionsLabelProp, "Clear permissions");
+    const membersSectionLabel = (0, core_1.useCrispMessage)(membersSectionLabelProp, "Individual members");
+    const automationSearchPlaceholder = (0, core_1.useCrispMessage)(automationSearchPlaceholderProp, "Search...");
+    const addAutomationLabel = (0, core_1.useCrispMessage)(addAutomationLabelProp, "Add");
+    const learnMoreLabel = (0, core_1.useCrispMessage)(learnMoreLabelProp, "Learn more about permissions");
+    const surfaceId = React.useId();
+    const triggerId = trigger.props.id ?? `${surfaceId}-trigger`;
+    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 [internalTab, setInternalTab] = React.useState(defaultTab);
+    const activeTab = tabProp ?? internalTab;
+    const selectTab = (t) => {
+        if (tabProp === undefined)
+            setInternalTab(t);
+        onTabChange?.(t);
+    };
+    const [internalSearch, setInternalSearch] = React.useState(defaultAutomationSearchValue ?? "");
+    const searchValue = automationSearchValue ?? internalSearch;
+    const setSearch = (q) => {
+        if (automationSearchValue === undefined)
+            setInternalSearch(q);
+        onAutomationSearchChange?.(q);
+    };
+    const rootRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const [pos, setPos] = React.useState({});
+    const [up, setUp] = React.useState(false);
+    const place = () => {
+        const el = triggerRef.current;
+        if (!el)
+            return;
+        const { style, up: flipUp } = (0, core_1.placeFloating)({
+            rect: el.getBoundingClientRect(),
+            align,
+            gap: 6,
+            flipBelow: 320,
+            anchor: el,
+        });
+        setUp(flipUp);
+        setPos(style);
+    };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reposition each time it opens
+    React.useLayoutEffect(() => {
+        if (open)
+            place();
+    }, [open]);
+    React.useEffect(() => {
+        if (!open || !contentRef.current)
+            return;
+        return (0, core_1.registerFloatingLayer)(contentRef.current);
+    }, [open]);
+    const close = React.useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            const target = e.target;
+            if (rootRef.current?.contains(target))
+                return;
+            if (contentRef.current?.contains(target))
+                return;
+            if ((0, core_1.isInsideLaterFloatingLayer)(target, contentRef.current))
+                return;
+            close();
+        };
+        document.addEventListener("pointerdown", onDown);
+        return () => document.removeEventListener("pointerdown", onDown);
+    }, [open, close]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key !== "Escape")
+                return;
+            if ((0, core_1.hasNestedFloatingLayer)(contentRef.current))
+                return;
+            close();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
+    const triggerEl = React.cloneElement(trigger, {
+        ref: triggerRef,
+        id: triggerId,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-controls": open ? surfaceId : undefined,
+        onClick: (e) => {
+            trigger.props.onClick?.(e);
+            setOpen(!open);
+        },
+    });
+    const tablistRef = React.useRef(null);
+    const tabEntries = React.useMemo(() => [{ value: "members" }, { value: "automations" }], []);
+    const { onKeyDown: onTabKeyDown, tabIndexFor } = (0, tabs_1.useTablistKeyboard)({
+        tabs: tabEntries,
+        active: activeTab,
+        select: (v) => selectTab(v),
+        listRef: tablistRef,
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, share_recipe_1.shareRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, className: "crisp-share-content", role: "dialog", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-up": up ? "" : undefined, style: pos, ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { ref: tablistRef, className: "crisp-share-tabs", role: "tablist", onKeyDown: onTabKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", "data-value": "members", "aria-selected": activeTab === "members", tabIndex: tabIndexFor("members"), className: "crisp-share-tab", onClick: () => selectTab("members"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Users, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), membersTabLabel] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", "data-value": "automations", "aria-selected": activeTab === "automations", tabIndex: tabIndexFor("automations"), className: "crisp-share-tab", onClick: () => selectTab("automations"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), automationsTabLabel] })] }), activeTab === "members" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-share-row", children: [workspaceIcon ?? ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", tone: "brand", children: typeof workspaceAccessLabel === "string"
+                                                ? workspaceAccessLabel.charAt(0)
+                                                : null })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-share-row-label", children: workspaceAccessLabel }), (0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", width: "auto", options: workspaceAccessOptions, value: workspaceAccessValue, onValueChange: onWorkspaceAccessChange, "aria-label": workspaceAccessLabel })] }), advancedSharing, onClearPermissions && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-share-clear", onClick: onClearPermissions, children: clearPermissionsLabel })), members && members.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "crisp-share-section-label", children: membersSectionLabel }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-share-members", children: members.map((m) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-share-member", children: [m.avatar ?? ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", tone: "brand", children: typeof m.name === "string"
+                                                            ? m.name.charAt(0).toUpperCase()
+                                                            : null })), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-share-member-text", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-share-member-name", children: m.name }), m.email && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-share-member-email", children: m.email }))] }), (0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", width: "auto", options: memberRoleOptions, value: m.access, disabled: m.accessDisabled, onValueChange: (v) => onMemberAccessChange?.(m.id, v), "aria-label": typeof m.name === "string"
+                                                            ? `${m.name}'s access`
+                                                            : undefined })] }, m.id))) })] }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-share-automations-row", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { value: searchValue, onChange: (e) => setSearch(e.target.value), placeholder: automationSearchPlaceholder, "aria-label": automationSearchPlaceholder }), (0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", width: "auto", options: automationRoleOptions, value: automationRoleValue, onValueChange: onAutomationRoleChange, "aria-label": automationsTabLabel }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-share-add", disabled: addAutomationDisabled, onClick: onAddAutomation, children: addAutomationLabel })] })), (0, jsx_runtime_1.jsxs)("a", { className: "crisp-share-learnmore", href: learnMoreHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.HelpCircle, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), learnMoreLabel] })] }) }))] }));
+}
+SharePopover.displayName = "SharePopover";

package/dist/cjs/product/share/share.recipe.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shareRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// SharePopover's shell — measured live on app.attio.com (both the object
+// table's and a List's own "Share" trigger, techpartners workspace,
+// 2026-09-27): a 440px-wide floating panel, radius 12 (xl), the same
+// layered popover shadow every other floating surface uses (`e.floating`
+// matched the measured box-shadow's four layers exactly, so no new shadow
+// literal was needed).
+//
+// This is its own floating shell rather than a reuse of the generic
+// `Popover` (components/popover): that recipe caps its content at
+// `min(360px, 92vw)`, and 440px measured wider than that on every sample.
+// `product/savedviews` already sets the precedent for a product surface
+// owning its own portaled shell over the generic one when the measured
+// geometry doesn't fit it.
+//
+// Three muted-text alphas were measured that don't match any existing
+// color token: the workspace-access/role value text (`rgba(0,0,0,.55)`),
+// the "Individual members" section label (`rgba(0,0,0,.5)`), and the
+// inactive-tab/footer-link text (`rgba(0,0,0,.63)` — this one incidentally
+// equals `fgAlertDescription`'s light value, but that token is Dialog's own
+// alert-description colour, a different surface, so it is not reused here).
+// Rather than add new palette entries for three one-off alphas (tokens/**
+// is another lane's file), each is expressed as `color-mix(in srgb,
+// fgPrimary N%, transparent)` — the same idiom `segmented`'s own track
+// background already uses for its 5% tint — so the value is theme-reactive
+// (it scales with fgPrimary's dark value too) without a new token or a
+// flat literal that would go stale in dark mode.
+const mutedText = (pct) => `color-mix(in srgb, ${tokens_1.contract.fgPrimary} ${pct}%, transparent)`;
+const config = (0, core_1.defineRecipe)({
+    name: "share",
+    base: `display: contents; font-family: ${tokens_1.contract.font.sans};`,
+    globalCss: `
+    .crisp-share-content {
+      font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box;
+      width: 440px; max-width: 92vw;
+      padding: ${tokens_1.contract.space["3"]}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["3"]};
+      border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover}; color: ${tokens_1.contract.fgPrimary};
+      box-shadow: ${tokens_1.elevation.floating};
+      opacity: 1; transform: none; transform-origin: top right;
+      transition: opacity 0.08s ease, transform 0.08s ease;
+      @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); }
+    }
+    .crisp-share-content[data-up] { transform-origin: bottom right; }
+
+    .crisp-share-tabs { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; }
+    .crisp-share-tab {
+      box-sizing: border-box; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]};
+      height: ${tokens_1.contract.size.row}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md};
+      background: transparent; color: ${mutedText(63)};
+      font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.07px;
+      cursor: pointer; transition: background-color .12s ease, color .12s ease;
+    }
+    .crisp-share-tab svg { flex-shrink: 0; }
+    .crisp-share-tab:hover { color: ${tokens_1.contract.fgPrimary}; }
+    .crisp-share-tab[aria-selected="true"] { background: ${tokens_1.contract.bgSurfaceMuted}; color: ${tokens_1.contract.fgPrimary}; }
+
+    .crisp-share-row { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; min-height: 34px; }
+    .crisp-share-row-label { flex: 1; min-width: 0; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; letter-spacing: -0.07px; }
+    .crisp-share-row .crisp-select { flex-shrink: 0; }
+    .crisp-share-row .crisp-select .crisp-select-value,
+    .crisp-share-row .crisp-select .crisp-select-chevron { color: ${mutedText(55)}; }
+
+    .crisp-share-clear {
+      align-self: flex-start; margin: 0; padding: 0; border: none; background: none;
+      font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium};
+      color: ${mutedText(63)}; cursor: pointer;
+    }
+    .crisp-share-clear:hover { color: ${tokens_1.contract.fgPrimary}; text-decoration: underline; }
+
+    .crisp-share-section-label {
+      margin: 0; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${mutedText(50)};
+    }
+    .crisp-share-members { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; }
+    .crisp-share-member { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; }
+    .crisp-share-member-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: ${tokens_1.contract.space["1.5"]}; overflow: hidden; }
+    .crisp-share-member-name { flex-shrink: 0; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; letter-spacing: -0.07px; }
+    .crisp-share-member-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${mutedText(55)}; letter-spacing: -0.07px; }
+    .crisp-share-member .crisp-select { flex-shrink: 0; }
+    .crisp-share-member .crisp-select .crisp-select-value,
+    .crisp-share-member .crisp-select .crisp-select-chevron { color: ${mutedText(55)}; }
+
+    .crisp-share-automations-row { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; }
+    .crisp-share-automations-row .crisp-input { flex: 1; min-width: 0; }
+    .crisp-share-automations-row .crisp-select { flex-shrink: 0; }
+
+    .crisp-share-add {
+      flex-shrink: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      height: 32px; padding: 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.lg};
+      background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand};
+      font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.07px;
+      cursor: pointer; transition: background-color .12s ease, opacity .12s ease;
+    }
+    .crisp-share-add:hover:not(:disabled) { background: ${tokens_1.contract.bgBrandSolidPressed}; }
+    .crisp-share-add:disabled { opacity: 0.4; cursor: not-allowed; }
+
+    .crisp-share-learnmore {
+      display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]};
+      font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${mutedText(63)};
+      text-decoration: none;
+    }
+    .crisp-share-learnmore:hover { color: ${tokens_1.contract.fgPrimary}; }
+    .crisp-share-learnmore svg { flex-shrink: 0; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.shareRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/product/shortcutssheet/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./shortcutssheet"), exports);

package/dist/cjs/product/shortcutssheet/shortcutssheet.js

@@ -0,0 +1,125 @@
+"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.defaultShortcutSections = void 0;
+exports.ShortcutsSheet = ShortcutsSheet;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const drawer_1 = require("../../components/drawer");
+const kbd_1 = require("../../components/kbd");
+const core_1 = require("../../core");
+/** The physical Enter/Return key's printed glyph — not a reading-direction
+ *  indicator (a real keyboard prints the same ↵ shape under any locale), so
+ *  unlike `LogOut` elsewhere it is deliberately left unmirrored (excused in
+ *  `build/spec-check.mjs`'s own RTL icon-mirroring ALLOW list). */
+const enterKey = () => (0, jsx_runtime_1.jsx)(lucide_react_1.CornerDownLeft, { size: 16, strokeWidth: 1.75 });
+/**
+ * Attio's own canonical keyboard-shortcut list (crisp#615), live-measured
+ * off app.attio.com/techpartners' "Keyboard shortcuts" panel (Help →
+ * "Shortcuts") — 34 rows across 4 sections. The issue's own quoted table
+ * collapsed a few of these ("Navigate to the cell above/right/below/left",
+ * "Go to next/previous cell") into one row each; the live panel renders
+ * them as separate rows, which is what this list follows.
+ */
+exports.defaultShortcutSections = [
+    {
+        label: "General",
+        rows: [
+            { description: "Open quick actions", steps: [["⌘", "K"]] },
+            { description: "Open search", steps: [["/"]] },
+            { description: "Create a new note", steps: [["N"]] },
+            { description: "Create a new entry", steps: [["E"]] },
+            { description: "Create a new task", steps: [["T"]] },
+            { description: "Create a new email", steps: [["C"]] },
+            { description: "Go to home page", steps: [["G"], ["H"]] },
+            { description: "Go to tasks page", steps: [["G"], ["T"]] },
+            { description: "Go to all notes page", steps: [["G"], ["N"]] },
+            { description: "Go to all people page", steps: [["G"], ["P"]] },
+            { description: "Go to all companies page", steps: [["G"], ["C"]] },
+            { description: "Go to email drafts page", steps: [["G"], ["E"]] },
+            { description: "Toggle sidebar", steps: [["⌘", "."]] },
+            { description: "Navigate up", steps: [["↑"]] },
+            { description: "Navigate down", steps: [["↓"]] },
+        ],
+    },
+    {
+        label: "Record page",
+        rows: [
+            { description: "Go to next tab", steps: [["⌥", "→"]] },
+            { description: "Go to previous tab", steps: [["⌥", "←"]] },
+        ],
+    },
+    {
+        label: "Table view",
+        rows: [
+            { description: "Navigate to the cell above", steps: [["↑"]] },
+            { description: "Navigate to the cell to the right", steps: [["→"]] },
+            { description: "Navigate to the cell below", steps: [["↓"]] },
+            { description: "Navigate to the cell to the left", steps: [["←"]] },
+            { description: "Jump to bottom", steps: [["⌘", "↓"]] },
+            { description: "Jump to top", steps: [["⌘", "↑"]] },
+            { description: "Select/deselect current row", steps: [["⇧", "␣"]] },
+            { description: "Group select rows up", steps: [["⇧", "↑"]] },
+            { description: "Group select rows down", steps: [["⇧", "↓"]] },
+            { description: "Group select to top", steps: [["⌘", "⇧", "↑"]] },
+            { description: "Group select to bottom", steps: [["⌘", "⇧", "↓"]] },
+            {
+                description: "Open record page for current entry",
+                steps: [["⌘", enterKey()]],
+            },
+            { description: "Select/deselect all rows", steps: [["⌘", "A"]] },
+            { description: "Go to next cell", steps: [["⇥"]] },
+            { description: "Go to previous cell", steps: [["⇧", "⇥"]] },
+            { description: "Edit cell / go to next cell", steps: [[enterKey()]] },
+        ],
+    },
+    {
+        label: "Help",
+        rows: [{ description: "Open help drawer", steps: [["?"]] }],
+    },
+];
+/**
+ * Attio's "Keyboard shortcuts" panel (crisp#615, parity row P-106) — a
+ * `Drawer` narrowed to the measured 360px (Drawer's own default is 420px),
+ * listing `sections` grouped with a hairline-free 10px row rhythm and a
+ * 20px gap before each new section label.
+ */
+function ShortcutsSheet({ open, onOpenChange, sections = exports.defaultShortcutSections, title: titleProp, thenLabel: thenLabelProp, closeLabel, className, ...rest }) {
+    const title = (0, core_1.useCrispMessage)(titleProp, "Keyboard shortcuts");
+    const thenLabel = (0, core_1.useCrispMessage)(thenLabelProp, "then");
+    return ((0, jsx_runtime_1.jsx)(drawer_1.Drawer, { open: open, onOpenChange: onOpenChange, title: title, closeLabel: closeLabel, className: (0, core_1.cx)("crisp-shortcutssheet-panel", className), ...rest, children: (0, jsx_runtime_1.jsx)(drawer_1.DrawerBody, { children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-shortcutssheet-body", children: sections.map((section) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-shortcutssheet-section-label", children: section.label }), section.rows.map((row) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-shortcutssheet-row", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-shortcutssheet-desc", children: row.description }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-shortcutssheet-keys", children: row.steps.map((step, stepIndex) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [stepIndex > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-shortcutssheet-then", children: thenLabel })), step.map((glyph, glyphIndex) => ((0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: glyph }, glyphIndex)))] }, stepIndex))) })] }, String(row.description))))] }, String(section.label)))) }) }) }));
+}
+ShortcutsSheet.displayName = "ShortcutsSheet";

package/dist/cjs/product/shortcutssheet/shortcutssheet.recipe.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shortcutssheetRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// Attio's "Keyboard shortcuts" panel (crisp#615), live-measured off
+// app.attio.com/techpartners — a second overlay reached from Help →
+// "Shortcuts": 360px wide (narrower than Drawer's own 420px default, hence
+// the width override below), 16px body padding (already Drawer's own
+// `crisp-drawer-body`, unchanged), rows 10px apart, a 20px gap before a new
+// section (expressed as the flex column's own 10px `gap` plus another 10px
+// on every section label but the first, rather than a second gap value),
+// section labels 12px/500, row descriptions 14px/500 — both the SAME
+// `color-mix(fgPrimary, 63%)` muted-text tint RecordPage's own notes already
+// established (crisp#871), and the "then" connector between a sequential
+// shortcut's two steps at 11px/500 in Kbd's own 50%-fgPrimary tint (the
+// same de-emphasis, on the same kind of supporting glyph).
+const config = (0, core_1.defineRecipe)({
+    name: "shortcutssheet",
+    base: "",
+    globalCss: `
+    /* Overrides Drawer's own 420px default (specificity: .crisp-drawer
+       .crisp-drawer-content.crisp-shortcutssheet-panel, higher than
+       Drawer's .crisp-drawer .crisp-drawer-content regardless of which
+       chunk of dist/styles.css concatenates first). */
+    .crisp-drawer .crisp-drawer-content.crisp-shortcutssheet-panel { width: 360px; }
+
+    .crisp-shortcutssheet-body { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2.5"]}; }
+    .crisp-shortcutssheet-section-label {
+      font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium};
+      color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent);
+    }
+    .crisp-shortcutssheet-section-label:not(:first-child) { margin-top: ${tokens_1.contract.space["2.5"]}; }
+    .crisp-shortcutssheet-row { display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["1"]}; }
+    .crisp-shortcutssheet-desc {
+      font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium};
+      color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent);
+    }
+    .crisp-shortcutssheet-keys { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; flex-shrink: 0; }
+    .crisp-shortcutssheet-then {
+      font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium};
+      color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent);
+    }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.shortcutssheetRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/product/taskeditpopover/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.taskeditpopoverRecipe = exports.TaskEditPopover = void 0;
+var taskeditpopover_1 = require("./taskeditpopover");
+Object.defineProperty(exports, "TaskEditPopover", { enumerable: true, get: function () { return taskeditpopover_1.TaskEditPopover; } });
+var taskeditpopover_recipe_1 = require("./taskeditpopover.recipe");
+Object.defineProperty(exports, "taskeditpopoverRecipe", { enumerable: true, get: function () { return taskeditpopover_recipe_1.taskeditpopoverRecipe; } });