@crisp-ui-kit/crisp 0.57.2 → 0.57.4

package/dist/cjs/product/recordpicker/recordpicker.js

@@ -0,0 +1,100 @@
+"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.RecordPicker = RecordPicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const select_1 = require("../../components/select");
+const spinner_1 = require("../../components/spinner");
+const core_1 = require("../../core");
+const recordpicker_recipe_1 = require("./recordpicker.recipe");
+/**
+ * The record-search picker behind a task's "Add record" chip -- measured
+ * live on app.attio.com's Tasks page ("Edit task" -> "Add record"): a
+ * "Search..." row, then a FLAT list mixed across every object type (a
+ * person result sat first, ahead of several companies, with no section
+ * headers -- unlike the mention picker's own grouped Users/Records shape,
+ * crisp#646). Attio's own live search took a moment to resolve, showing a
+ * centred spinner + "Loading..." row meanwhile; not independently
+ * re-measured against a second empty-results case, so `emptyLabel`'s
+ * default copy ("No records") is inferred by symmetry with
+ * `AssigneePicker`'s own measured "No users", not itself pixel-measured.
+ */
+function RecordPicker({ records, loading = false, onSelect, query: queryProp, onQueryChange, searchLabel: searchLabelProp, loadingLabel: loadingLabelProp, emptyLabel: emptyLabelProp, className, ...rest }) {
+    const searchLabel = (0, core_1.useCrispMessage)(searchLabelProp, "Search...");
+    const loadingLabel = (0, core_1.useCrispMessage)(loadingLabelProp, "Loading...");
+    // crisp/#471: `emptyLabel` is typed `React.ReactNode`, so it resolves by
+    // hand rather than through `useCrispMessage`, which is string-only --
+    // same reasoning as `Inbox`'s own `emptyTitle`/`emptySubtitle`.
+    const crispMessages = (0, core_1.useCrispMessages)();
+    const emptyLabel = emptyLabelProp ?? crispMessages["No records"] ?? "No records";
+    const [internalQuery, setInternalQuery] = React.useState("");
+    const query = queryProp ?? internalQuery;
+    const setQuery = (q) => {
+        if (queryProp === undefined)
+            setInternalQuery(q);
+        onQueryChange?.(q);
+    };
+    const [highlight, setHighlight] = React.useState(0);
+    const autoId = React.useId();
+    const listboxId = `${autoId}-listbox`;
+    const optionId = (i) => `${autoId}-opt-${i}`;
+    const select = (r) => {
+        onSelect?.(r);
+    };
+    const { onKeyDown } = (0, select_1.useListboxKeyboard)({
+        enabledIndexes: records.map((_, i) => i),
+        highlight,
+        setHighlight,
+        commit: () => {
+            const r = records[highlight];
+            if (r)
+                select(r);
+        },
+        close: () => { },
+        dismiss: () => { },
+    });
+    const activeId = !loading && highlight >= 0 && highlight < records.length
+        ? optionId(highlight)
+        : undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpicker_recipe_1.recordpickerRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpicker-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: "crisp-recordpicker-search-input", placeholder: searchLabel, value: query, onChange: (e) => {
+                            setQuery(e.target.value);
+                            setHighlight(0);
+                        }, onKeyDown: onKeyDown, role: "combobox", "aria-expanded": "true", "aria-controls": listboxId, "aria-activedescendant": activeId, 
+                        // biome-ignore lint/a11y/noAutofocus: focus the search field the moment its enclosing popover opens
+                        autoFocus: true })] }), loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpicker-loading", children: [(0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 16 }), loadingLabel] })) : records.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpicker-empty", children: emptyLabel })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpicker-list", role: "listbox", id: listboxId, children: records.map((r, i) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", tabIndex: -1, "aria-selected": i === highlight, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-recordpicker-option", onMouseEnter: () => setHighlight(i), onClick: () => select(r), children: [r.icon, r.name] }, r.id))) }))] }));
+}
+RecordPicker.displayName = "RecordPicker";

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.recordpickerRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The record picker behind a task's "Add record" chip -- measured live on
+// app.attio.com's Tasks page ("Edit task" -> "Add record" -> its own
+// sub-popover, same measured 350px width as `AssigneePicker`'s): a
+// borderless "Search..." row, then a flat list mixed across every object
+// type (not grouped into sections -- that's the *mention* picker's own
+// shape, crisp#646, a different, still-ungrouped-by-default surface here),
+// each row a consumer-supplied type icon + the record's name. A "Loading..."
+// row appears while results are in flight (the same measured centred
+// Spinner + text DataTable's own #826 loading state already uses).
+const config = (0, core_1.defineRecipe)({
+    name: "recordpicker",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 350px; font-family: ${tokens_1.contract.font.sans};
+
+    & .crisp-recordpicker-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 36px; padding: 0 ${tokens_1.contract.space["3"]}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpicker-search svg { flex-shrink: 0; }
+    & .crisp-recordpicker-search-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 20px; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-recordpicker-search-input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+
+    & .crisp-recordpicker-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 20px; }
+    & .crisp-recordpicker-empty { padding: ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["3"]}; text-align: center; 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-recordpicker-list { display: flex; flex-direction: column; margin: 0; padding: ${tokens_1.contract.space["1"]}; list-style: none; max-height: 280px; overflow-y: auto; }
+    & .crisp-recordpicker-option { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; box-sizing: border-box; height: 32px; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; text-align: start; cursor: pointer; }
+    & .crisp-recordpicker-option svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-recordpicker-option:hover, & .crisp-recordpicker-option[data-highlighted] { background: ${tokens_1.contract.bgRaised}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.recordpickerRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.savedviewsRecipe = exports.SavedViews = void 0;
+exports.savedviewsRecipe = exports.SavedViewsSaveBar = exports.SavedViews = void 0;
 var savedviews_1 = require("./savedviews");
 Object.defineProperty(exports, "SavedViews", { enumerable: true, get: function () { return savedviews_1.SavedViews; } });
+Object.defineProperty(exports, "SavedViewsSaveBar", { enumerable: true, get: function () { return savedviews_1.SavedViewsSaveBar; } });
 var savedviews_recipe_1 = require("./savedviews.recipe");
 Object.defineProperty(exports, "savedviewsRecipe", { enumerable: true, get: function () { return savedviews_recipe_1.savedviewsRecipe; } });

package/dist/cjs/product/savedviews/savedviews.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SavedViews = SavedViews;
+exports.SavedViewsSaveBar = SavedViewsSaveBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
@@ -236,3 +237,24 @@ function SavedViews({ label, icon, views, activeId, onSelect, onCreate, onRename
                             }, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-label", children: createLabel })] })] }) }))] }));
 }
 SavedViews.displayName = "SavedViews";
+/**
+ * The "unsaved changes" bar for a currently loaded saved view — Attio's own
+ * "Discard changes" + a split "Save for everyone ▾" button, measured live
+ * (app.attio.com, a saved Companies view with its sort changed). Not a part
+ * of `SavedViews`' own trigger/panel: Attio renders this in the page
+ * toolbar's own trailing slot, replacing whatever sits there at rest
+ * (Import/Export, "+ New …") — the same slot `TableToolbar`'s own
+ * `children` prop already documents ("Right-aligned actions after the
+ * count"). A consumer swaps this in for that slot's usual content once its
+ * own dirty check (live filters/sort/columns vs. the loaded view's
+ * snapshot) is true, and swaps it back out once it's false — this
+ * component itself carries no dirty state or visibility toggle.
+ */
+function SavedViewsSaveBar({ onSave, onDiscard, onSaveAsNew, discardLabel: discardLabelProp, saveLabel: saveLabelProp, saveAsNewLabel: saveAsNewLabelProp, saveOptionsLabel: saveOptionsLabelProp, className, ...rest }) {
+    const discardLabel = (0, core_1.useCrispMessage)(discardLabelProp, "Discard changes");
+    const saveLabel = (0, core_1.useCrispMessage)(saveLabelProp, "Save for everyone");
+    const saveAsNewLabel = (0, core_1.useCrispMessage)(saveAsNewLabelProp, "Save as new view");
+    const saveOptionsLabel = (0, core_1.useCrispMessage)(saveOptionsLabelProp, "More save options");
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, core_1.cx)("crisp-savedviews-savebar", className), ...rest, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-savedviews-savebar-discard", onClick: onDiscard, children: discardLabel }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-savedviews-savebar-save-group", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-savedviews-savebar-save", onClick: onSave, children: saveLabel }), onSaveAsNew && ((0, jsx_runtime_1.jsx)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-savedviews-savebar-save-chevron", "aria-label": saveOptionsLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75 }) }), children: (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: onSaveAsNew, children: saveAsNewLabel }) }))] })] }));
+}
+SavedViewsSaveBar.displayName = "SavedViewsSaveBar";

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

@@ -123,6 +123,53 @@ const config = (0, core_1.defineRecipe)({
       font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium};
       color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent);
     }
+
+    /* crisp#568: the "Discard changes" / "Save for everyone ▾" bar a
+       consumer swaps into its own toolbar's trailing slot (TableToolbar's
+       own children prop already documents "right-aligned actions after the
+       count") while the loaded view is dirty -- measured live on
+       app.attio.com replacing that exact slot's usual Import/Export + New
+       button. Not rendered inside SavedViews' own trigger/panel, which
+       stays untouched; this is its own export, SavedViewsSaveBar. */
+    .crisp-savedviews-savebar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; }
+    /* Rest-state color is a 55% color-mix of fgPrimary -- measured
+       identical to recordpanel's own ".crisp-recordpanel-section-action"
+       (its own comment: "measured 10px/400, a lighter mix..." -- font size
+       there was the SAME outer-vs-inner-div miss #688 corrected; the 55%
+       mix itself checks out independently here). Hover repeats crisp's own
+       already-measured Button ghost intent exactly (bgRaised + fgPrimary),
+       confirmed live (hover bg rgba(0,0,0,.04) + ink text matches bgRaised
+       + fgPrimary bit for bit) -- reused, not re-derived. */
+    .crisp-savedviews-savebar-discard {
+      box-sizing: border-box; display: inline-flex; align-items: center; height: 28px;
+      margin: 0; padding-inline: ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md};
+      background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium};
+      color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); cursor: pointer;
+      transition: background-color .12s ease, color .12s ease;
+    }
+    .crisp-savedviews-savebar-discard:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    /* the split "Save for everyone ▾" pill -- two adjacent buttons sharing
+       one visual pill (measured: label half rounds only its outer/left
+       corners, the chevron half only its outer/right corners, seamless
+       between). Fill is crisp's OWN measured bgBrandContrast, not Attio's
+       own literal button blue -- the owner's directive is Attio structure/
+       sizing, seed-identity color (crisp direction doc). Hover/active reuse
+       Button's own already-measured primary-intent brightness filter
+       (crisp#910) rather than Attio's own literal darker fill, for the
+       same reason. */
+    .crisp-savedviews-savebar-save-group { display: flex; }
+    .crisp-savedviews-savebar-save, .crisp-savedviews-savebar-save-chevron {
+      box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      height: 28px; margin: 0; border: none; background: ${tokens_1.contract.bgBrandContrast}; color: ${tokens_1.contract.fgOnBrand};
+      cursor: pointer; transition: filter .2s;
+    }
+    .crisp-savedviews-savebar-save:hover, .crisp-savedviews-savebar-save-chevron:hover { filter: brightness(0.96); }
+    .crisp-savedviews-savebar-save:active, .crisp-savedviews-savebar-save-chevron:active { filter: brightness(0.92); }
+    .crisp-savedviews-savebar-save {
+      padding-inline: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1.5"]}; border-radius: ${tokens_1.contract.radius.md} 0 0 ${tokens_1.contract.radius.md};
+      font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium};
+    }
+    .crisp-savedviews-savebar-save-chevron { width: 28px; padding: 0; border-radius: 0 ${tokens_1.contract.radius.md} ${tokens_1.contract.radius.md} 0; }
   `,
     variants: {},
     defaultVariants: {},

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shareRecipe = exports.SharePopover = void 0;
+var share_1 = require("./share");
+Object.defineProperty(exports, "SharePopover", { enumerable: true, get: function () { return share_1.SharePopover; } });
+var share_recipe_1 = require("./share.recipe");
+Object.defineProperty(exports, "shareRecipe", { enumerable: true, get: function () { return share_recipe_1.shareRecipe; } });

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);