@crisp-ui-kit/crisp 0.57.3 → 0.57.4

package/dist/cjs/product/assigneepicker/assigneepicker.js

@@ -0,0 +1,127 @@
+"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.AssigneePicker = AssigneePicker;
+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 personchip_1 = require("../../components/personchip");
+const select_1 = require("../../components/select");
+const core_1 = require("../../core");
+const assigneepicker_recipe_1 = require("./assigneepicker.recipe");
+// Same five hashed avatar tones as `PersonChip`'s own (transcribed, not
+// imported -- PersonChip's are private to that file, and this is the same
+// one-line pure function `personchip.tsx` itself transcribes from
+// `datatable.tsx`'s `TAG_TONES` rather than sharing an import; see its own
+// comment for why that's fine here).
+const HASH_TONES = ["brand", "orange", "cyan", "purple", "green"];
+function hashTone(name) {
+    let h = 0;
+    for (let i = 0; i < name.length; i++)
+        h = (h * 31 + name.charCodeAt(i)) >>> 0;
+    return HASH_TONES[h % HASH_TONES.length];
+}
+function initials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return "?";
+    return (parts[0][0] + (parts[1]?.[0] ?? "")).toUpperCase();
+}
+/**
+ * The picker behind a task's "Assigned to" chip -- measured live on
+ * app.attio.com's Tasks page ("Edit task" -> "Assigned to You" -> its own
+ * sub-popover, `Popover`-sized at the same measured 350px): a "Find a
+ * user..." search, the current assignee as a removable pill, then a plain
+ * option list, or "No users" when nothing matches. Attio's task assignment
+ * is single-user (one pill, replaced by picking another), unlike a
+ * multi-value field.
+ */
+function AssigneePicker({ users, assignee = null, onAssigneeChange, query: queryProp, onQueryChange, searchLabel: searchLabelProp, removeLabel: removeLabelProp, emptyLabel: emptyLabelProp, className, ...rest }) {
+    const searchLabel = (0, core_1.useCrispMessage)(searchLabelProp, "Find a user...");
+    const removeLabel = (0, core_1.useCrispMessage)(removeLabelProp, "Remove assignee");
+    // 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 users"] ?? "No users";
+    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 q = query.trim().toLowerCase();
+    const candidates = users.filter((u) => u.id !== assignee?.id);
+    const filtered = q
+        ? candidates.filter((u) => u.name.toLowerCase().includes(q))
+        : candidates;
+    const select = (u) => {
+        onAssigneeChange?.(u);
+        setQuery("");
+        setHighlight(0);
+    };
+    // crisp's shared popup-listbox model (#198), same as Select/MultiSelect --
+    // arrows, Home/End and wrapping, instead of a second hand-rolled one.
+    const { onKeyDown } = (0, select_1.useListboxKeyboard)({
+        enabledIndexes: filtered.map((_, i) => i),
+        highlight,
+        setHighlight,
+        commit: () => {
+            const u = filtered[highlight];
+            if (u)
+                select(u);
+        },
+        // Escape/Tab are for the enclosing Popover to handle (it owns open/close
+        // here, this picker has no floating state of its own).
+        close: () => { },
+        dismiss: () => { },
+    });
+    const activeId = highlight >= 0 && highlight < filtered.length
+        ? optionId(highlight)
+        : undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, assigneepicker_recipe_1.assigneepickerRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-assigneepicker-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-assigneepicker-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 })] }), assignee != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-assigneepicker-pill", children: (0, jsx_runtime_1.jsx)(personchip_1.PersonChip, { name: assignee.name, avatar: assignee.avatar, trailing: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-assigneepicker-remove", "aria-label": removeLabel, onClick: () => onAssigneeChange?.(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 10, strokeWidth: 2 }) }) }) })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-assigneepicker-empty", children: emptyLabel })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-assigneepicker-list", role: "listbox", id: listboxId, children: filtered.map((u, 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-assigneepicker-option", onMouseEnter: () => setHighlight(i), onClick: () => select(u), children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "circle", tone: u.avatar ? "neutral" : hashTone(u.name), style: { flexShrink: 0, marginInlineEnd: 8 }, children: u.avatar ? (0, jsx_runtime_1.jsx)("img", { src: u.avatar, alt: "" }) : initials(u.name) }), u.name] }, u.id))) }))] }));
+}
+AssigneePicker.displayName = "AssigneePicker";

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assigneepickerRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The assignee picker behind a task's "Assigned to" chip -- measured live on
+// app.attio.com's Tasks page (Edit task -> "Assigned to You" -> its own
+// sub-popover): a borderless 14px/500 "Find a user..." search row, the
+// current assignee as a removable pill below it, then a plain option list
+// (32px rows, radius 8, the same measured hover crisp's other listboxes
+// share -- see menu.recipe.ts's own comment) or a centred "No users" line.
+// The popover shell itself (radius/shadow/width) is `Popover`'s own --
+// this is only the 350px-wide content Attio's own picker measured at.
+const config = (0, core_1.defineRecipe)({
+    name: "assigneepicker",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 350px; font-family: ${tokens_1.contract.font.sans};
+
+    & .crisp-assigneepicker-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-assigneepicker-search svg { flex-shrink: 0; }
+    & .crisp-assigneepicker-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-assigneepicker-search-input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+
+    & .crisp-assigneepicker-pill { display: flex; padding: 0 ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; }
+    & .crisp-assigneepicker-remove { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; margin: 0; padding: 0; border: none; background: none; color: inherit; font-family: inherit; cursor: pointer; }
+
+    & .crisp-assigneepicker-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-assigneepicker-list { display: flex; flex-direction: column; margin: 0; padding: ${tokens_1.contract.space["1"]}; list-style: none; }
+    & .crisp-assigneepicker-option { display: flex; align-items: center; 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; text-align: start; cursor: pointer; }
+    & .crisp-assigneepicker-option:hover, & .crisp-assigneepicker-option[data-highlighted] { background: ${tokens_1.contract.bgRaised}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.assigneepickerRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assigneepickerRecipe = exports.AssigneePicker = void 0;
+var assigneepicker_1 = require("./assigneepicker");
+Object.defineProperty(exports, "AssigneePicker", { enumerable: true, get: function () { return assigneepicker_1.AssigneePicker; } });
+var assigneepicker_recipe_1 = require("./assigneepicker.recipe");
+Object.defineProperty(exports, "assigneepickerRecipe", { enumerable: true, get: function () { return assigneepicker_recipe_1.assigneepickerRecipe; } });

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.notesgalleryRecipe = exports.NotesGallery = void 0;
+var notesgallery_1 = require("./notesgallery");
+Object.defineProperty(exports, "NotesGallery", { enumerable: true, get: function () { return notesgallery_1.NotesGallery; } });
+var notesgallery_recipe_1 = require("./notesgallery.recipe");
+Object.defineProperty(exports, "notesgalleryRecipe", { enumerable: true, get: function () { return notesgallery_recipe_1.notesgalleryRecipe; } });

package/dist/cjs/product/notesgallery/notesgallery.js

@@ -0,0 +1,80 @@
+"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.NotesGallery = NotesGallery;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const tabs_1 = require("../../components/tabs");
+const core_1 = require("../../core");
+const entitycard_1 = require("../entitycard");
+const notesgallery_recipe_1 = require("./notesgallery.recipe");
+function NoteCard({ note }) {
+    return ((0, jsx_runtime_1.jsx)(entitycard_1.EntityCard, { author: note.linkedRecord, title: note.title, excerpt: note.excerpt, footer: note.author, date: note.date, onClick: note.onClick }));
+}
+/**
+ * The standalone Notes gallery -- measured live on app.attio.com's Notes
+ * page: "Notes N"/"Templates N" sub-tabs, a toolbar (Sort/View
+ * toggle/settings/New note, all consumer-composed), a dashed "Favorites"
+ * region, and date-grouped card sections. The card itself is `EntityCard`
+ * (crisp#474's own "measured from a Notes grid" component) — this shell
+ * only adds the gallery chrome around it.
+ */
+function NotesGallery({ notesCount, templatesCount, activeTab: activeTabProp, defaultActiveTab = "notes", onActiveTabChange, notesLabel: notesLabelProp, templatesLabel: templatesLabelProp, leading, trailing, favoritesLabel: favoritesLabelProp, favorites, favoritesEmptyLabel: favoritesEmptyLabelProp, groups, emptyLabel: emptyLabelProp, className, ...rest }) {
+    const notesLabel = (0, core_1.useCrispMessage)(notesLabelProp, "Notes");
+    const templatesLabel = (0, core_1.useCrispMessage)(templatesLabelProp, "Templates");
+    const favoritesLabel = (0, core_1.useCrispMessage)(favoritesLabelProp, "Favorites");
+    const favoritesEmptyLabel = (0, core_1.useCrispMessage)(favoritesEmptyLabelProp, "Notes that you favorite will appear here");
+    // crisp/#471: `emptyLabel` is typed `React.ReactNode`, so it resolves by
+    // hand rather than through `useCrispMessage`, which is string-only.
+    const crispMessages = (0, core_1.useCrispMessages)();
+    const emptyLabel = emptyLabelProp ?? crispMessages["No notes"] ?? "No notes";
+    const [internalTab, setInternalTab] = React.useState(defaultActiveTab);
+    const activeTab = activeTabProp ?? internalTab;
+    const setActiveTab = (v) => {
+        if (activeTabProp === undefined)
+            setInternalTab(v);
+        onActiveTabChange?.(v);
+    };
+    const total = groups.reduce((s, g) => s + g.notes.length, 0);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, notesgallery_recipe_1.notesgalleryRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-tabs", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: [
+                        { value: "notes", label: notesLabel, badge: notesCount },
+                        {
+                            value: "templates",
+                            label: templatesLabel,
+                            badge: templatesCount,
+                        },
+                    ], value: activeTab, onValueChange: setActiveTab }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-notesgallery-toolbar", children: [leading, trailing != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-toolbar-trail", children: trailing }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-notesgallery-favorites-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-favorites-label", children: favoritesLabel }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-favorites", children: favorites != null && favorites.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-grid", children: favorites.map((n) => ((0, jsx_runtime_1.jsx)(NoteCard, { note: n }, n.id))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-favorites-empty", children: favoritesEmptyLabel })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-body", children: total === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-empty", children: emptyLabel })) : (groups.map((g) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-notesgallery-group", children: [g.label, (0, jsx_runtime_1.jsx)("span", { className: "crisp-notesgallery-group-count", children: g.count })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-notesgallery-grid", children: g.notes.map((n) => ((0, jsx_runtime_1.jsx)(NoteCard, { note: n }, n.id))) })] }, g.id)))) })] }));
+}
+NotesGallery.displayName = "NotesGallery";

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.notesgalleryRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The standalone Notes gallery -- measured live on app.attio.com's Notes
+// page: a toolbar (leading Sort control, trailing view toggle/View
+// settings/New note, both consumer-composed slots -- crisp doesn't own the
+// exact button set, same reasoning as `ListPage`'s own leading/trailing), a
+// dashed "Favorites" region, then date-grouped sections (a group header +
+// count badge, transcribed from `ListPage`'s own already-measured values
+// rather than re-deriving them -- this IS the same Attio pattern, applied
+// above a card grid instead of a row list) holding a responsive card grid of
+// `EntityCard`s.
+//
+// The grid itself: a single real note card measured 356px wide -- with only
+// one note in the workspace there was no second card to read a column gap or
+// count from, so this uses a responsive `auto-fill` grid at that measured
+// per-card width instead of inventing a fixed column count or gap.
+const config = (0, core_1.defineRecipe)({
+    name: "notesgallery",
+    base: `display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; color: ${tokens_1.contract.fgPrimary};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    & .crisp-notesgallery-tabs { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 44px; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; }
+
+    & .crisp-notesgallery-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.header}; flex-shrink: 0; padding: 0 ${tokens_1.contract.space["3"]}; }
+    & .crisp-notesgallery-toolbar-trail { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; margin-inline-start: auto; }
+
+    & .crisp-notesgallery-favorites-section { background: ${tokens_1.contract.bgSubtle}; box-shadow: inset 0 -1px 0 ${tokens_1.contract.borderSubtle}; }
+    & .crisp-notesgallery-favorites-label { padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["4"]} 0; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-notesgallery-favorites { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: ${tokens_1.contract.space["6"]}; }
+    & .crisp-notesgallery-favorites-empty { box-sizing: border-box; width: 100%; padding: ${tokens_1.contract.space["6"]}; border: 1px dashed ${tokens_1.contract.borderDefault}; border-radius: ${tokens_1.contract.radius.xl}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+
+    & .crisp-notesgallery-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["3"]}; }
+    & .crisp-notesgallery-group { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.menuRow}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-notesgallery-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); font-size: ${tokens_1.contract.text.xs}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-notesgallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: ${tokens_1.contract.space["4"]}; padding-bottom: ${tokens_1.contract.space["4"]}; }
+
+    & .crisp-notesgallery-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; text-align: center; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.notesgalleryRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/product/objectpagemenu/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("./objectpagemenu"), exports);

package/dist/cjs/product/objectpagemenu/objectpagemenu.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectPageMenu = ObjectPageMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const button_1 = require("../../components/button");
+const menu_1 = require("../../components/menu");
+const core_1 = require("../../core");
+/**
+ * The page-level "…" menu on Attio's object page: Object settings / Manage
+ * attributes / a Notifications submenu ("Connect Slack workspace") — crisp
+ * parity checklist rows G-020/P-005 (crisp#616). Live-measured on
+ * app.attio.com/techpartners/companies: 208×114 popover (12px radius, 4px
+ * padding, 32px rows), a hairline separator before Notifications, and its
+ * submenu opening flush against the item with no gap, flipping side when
+ * the measured width doesn't fit (`placeSubmenu`, core/place-floating.ts).
+ */
+function ObjectPageMenu({ trigger, onObjectSettings, onManageAttributes, onConnectSlack, objectSettingsLabel, manageAttributesLabel, notificationsLabel, connectSlackLabel, "aria-label": ariaLabelProp, align = "end", }) {
+    const objectSettings = (0, core_1.useCrispMessage)(objectSettingsLabel, "Object settings");
+    const manageAttributes = (0, core_1.useCrispMessage)(manageAttributesLabel, "Manage attributes");
+    const notifications = (0, core_1.useCrispMessage)(notificationsLabel, "Notifications");
+    const connectSlack = (0, core_1.useCrispMessage)(connectSlackLabel, "Connect Slack workspace");
+    const ariaLabel = (0, core_1.useCrispMessage)(ariaLabelProp, "Show menu");
+    return ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: align, "aria-label": ariaLabel, trigger: trigger ?? ((0, jsx_runtime_1.jsx)(button_1.Button, { intent: "ghost", size: "md", shape: "icon", "aria-label": ariaLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 16, strokeWidth: 1.75 }), onSelect: onObjectSettings, children: objectSettings }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { size: 16, strokeWidth: 1.75 }), onSelect: onManageAttributes, children: manageAttributes }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.Menu, { placement: "submenu", "aria-label": notifications, trigger: (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 16, strokeWidth: 1.75 }), trailingIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75 }), closeOnSelect: false, children: notifications }), children: (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { size: 16, strokeWidth: 1.75 }), onSelect: onConnectSlack, children: connectSlack }) })] }));
+}
+ObjectPageMenu.displayName = "ObjectPageMenu";

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.objectpagemenuRecipe = void 0;
+const core_1 = require("../../core");
+/**
+ * `ObjectPageMenu` owns no styling of its own — every visible pixel is
+ * `Menu`/`MenuItem`'s own already-measured recipe. The one thing it DOES
+ * need is the RTL mirror for its Notifications submenu chevron (crisp#616):
+ * that icon is the first direction-bearing one ever passed as a `MenuItem`
+ * `trailingIcon`, so nothing already mirrors it.
+ *
+ * Not written as `${rtlFlipCss}` (core/rtl.ts): that string relies on native
+ * CSS nesting's `&` resolving to an ENCLOSING rule, which is exactly what
+ * `Menu`'s own recipe deliberately avoids for its portaled content (see its
+ * own doc comment) — nesting this under a `.crisp-objectpagemenu` root would
+ * need a root class this component doesn't have. A plain absolute selector,
+ * matching `Menu`'s own pattern for the identical reason.
+ */
+const config = (0, core_1.defineRecipe)({
+    name: "objectpagemenu",
+    base: "",
+    globalCss: `
+    [dir="rtl"] .crisp-menu-item svg[data-rtl-flip] { transform: scaleX(-1); }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.objectpagemenuRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/product/objectsettings/objectsettings.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ATTRIBUTE_AI_AUTOFILL_OPTIONS = exports.ATTRIBUTE_TYPE_OPTIONS = void 0;
+exports.CURRENCY_GROUPING_OPTIONS = exports.CURRENCY_DECIMAL_PLACES_OPTIONS = exports.CURRENCY_DISPLAY_OPTIONS = exports.ATTRIBUTE_AI_AUTOFILL_OPTIONS = exports.ATTRIBUTE_TYPE_OPTIONS = void 0;
 exports.ObjectsList = ObjectsList;
 exports.ObjectDetailPage = ObjectDetailPage;
 exports.ObjectGeneralSection = ObjectGeneralSection;
@@ -204,7 +204,7 @@ ObjectAppearanceSection.displayName = "ObjectAppearanceSection";
  * measures 40px here — a real, small divergence left to DataTable's owner
  * rather than patched locally (see the PR).
  */
-function AttributesTable({ attributes, onOpenAttribute, onEditAttribute, onArchiveAttribute, onReorder, onCreateAttribute, title: titleProp, subtitle: subtitleProp, createLabel: createLabelProp, searchPlaceholder: searchPlaceholderProp, filterLabel: filterLabelProp, nameColumnLabel: nameColumnLabelProp, dataTypeColumnLabel: dataTypeColumnLabelProp, constraintsColumnLabel: constraintsColumnLabelProp, propertiesColumnLabel: propertiesColumnLabelProp, systemLabel: systemLabelProp, enrichedLabel: enrichedLabelProp, editLabel: editLabelProp, archiveLabel: archiveLabelProp, rowActions, emptyLabel, }) {
+function AttributesTable({ attributes, onOpenAttribute, onEditAttribute, onDuplicateAttribute, onCopyId, onCopySlug, onChangeSlug, onArchiveAttribute, onReorder, onCreateAttribute, title: titleProp, subtitle: subtitleProp, createLabel: createLabelProp, searchPlaceholder: searchPlaceholderProp, filterLabel: filterLabelProp, nameColumnLabel: nameColumnLabelProp, dataTypeColumnLabel: dataTypeColumnLabelProp, constraintsColumnLabel: constraintsColumnLabelProp, propertiesColumnLabel: propertiesColumnLabelProp, systemLabel: systemLabelProp, enrichedLabel: enrichedLabelProp, editLabel: editLabelProp, duplicateLabel: duplicateLabelProp, copyIdLabel: copyIdLabelProp, copySlugLabel: copySlugLabelProp, changeSlugLabel: changeSlugLabelProp, archiveLabel: archiveLabelProp, rowActions, emptyLabel, }) {
     const title = (0, core_1.useCrispMessage)(titleProp, "Attributes");
     const subtitle = (0, core_1.useCrispMessage)(subtitleProp, "Modify and add object attributes");
     const createLabel = (0, core_1.useCrispMessage)(createLabelProp, "Create attribute");
@@ -216,8 +216,37 @@ function AttributesTable({ attributes, onOpenAttribute, onEditAttribute, onArchi
     const propertiesColumnLabel = (0, core_1.useCrispMessage)(propertiesColumnLabelProp, "Properties");
     const systemLabel = (0, core_1.useCrispMessage)(systemLabelProp, "System");
     const enrichedLabel = (0, core_1.useCrispMessage)(enrichedLabelProp, "Enriched");
-    const editLabel = (0, core_1.useCrispMessage)(editLabelProp, "Edit");
-    const archiveLabel = (0, core_1.useCrispMessage)(archiveLabelProp, "Archive");
+    // crisp#673, G-107 (verbatim): "Edit attribute, Duplicate attribute, Copy
+    // ID, Copy slug, Change slug, Archive attribute" — corrects this
+    // component's former "Edit"/"Archive" defaults, which were a paraphrase
+    // from an earlier, less precise measurement.
+    const editLabel = (0, core_1.useCrispMessage)(editLabelProp, "Edit attribute");
+    const duplicateLabel = (0, core_1.useCrispMessage)(duplicateLabelProp, "Duplicate attribute");
+    const copyIdLabel = (0, core_1.useCrispMessage)(copyIdLabelProp, "Copy ID");
+    const copySlugLabel = (0, core_1.useCrispMessage)(copySlugLabelProp, "Copy slug");
+    const changeSlugLabel = (0, core_1.useCrispMessage)(changeSlugLabelProp, "Change slug");
+    const archiveLabel = (0, core_1.useCrispMessage)(archiveLabelProp, "Archive attribute");
+    // Default-with-override (same shape as `CommentsPanel`'s `onCopyLink`):
+    // a consumer that only wants to know a copy happened (a toast, analytics)
+    // gets it for free; one that needs the real copy still owns it.
+    // `useCallback`, not a plain closure: the `columns` memo below references
+    // these, not `onCopyId`/`onCopySlug` directly, so their own identity has
+    // to track those props for the memo to stay correct without re-listing
+    // props it never mentions by name.
+    const copyId = React.useCallback((id) => {
+        if (onCopyId) {
+            onCopyId(id);
+            return;
+        }
+        navigator.clipboard?.writeText(id).catch(() => { });
+    }, [onCopyId]);
+    const copySlug = React.useCallback((slug) => {
+        if (onCopySlug) {
+            onCopySlug(slug);
+            return;
+        }
+        navigator.clipboard?.writeText(slug).catch(() => { });
+    }, [onCopySlug]);
     const [query, setQuery] = React.useState("");
     const filtered = React.useMemo(() => {
         if (!query.trim())
@@ -258,7 +287,7 @@ function AttributesTable({ attributes, onOpenAttribute, onEditAttribute, onArchi
                         cursor: "pointer",
                         color: "inherit",
                         padding: 4,
-                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16 }) }), children: rowActions ? (rowActions(row)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onEditAttribute?.(row.id), children: editLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { danger: true, onSelect: () => onArchiveAttribute?.(row.id), children: archiveLabel })] })) })),
+                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16 }) }), children: rowActions ? (rowActions(row)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onEditAttribute?.(row.id), children: editLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onDuplicateAttribute?.(row.id), children: duplicateLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => copyId(row.id), children: copyIdLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { disabled: !row.slug, onSelect: () => row.slug && copySlug(row.slug), children: copySlugLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onChangeSlug?.(row.id), children: changeSlugLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { danger: true, onSelect: () => onArchiveAttribute?.(row.id), children: archiveLabel })] })) })),
         },
     ], [
         nameColumnLabel,
@@ -268,8 +297,16 @@ function AttributesTable({ attributes, onOpenAttribute, onEditAttribute, onArchi
         systemLabel,
         enrichedLabel,
         editLabel,
+        duplicateLabel,
+        copyIdLabel,
+        copySlugLabel,
+        changeSlugLabel,
         archiveLabel,
         onEditAttribute,
+        onDuplicateAttribute,
+        copyId,
+        copySlug,
+        onChangeSlug,
         onArchiveAttribute,
         rowActions,
     ]);
@@ -330,26 +367,82 @@ function AttributeTypeSelect({ value, onValueChange, options = exports.ATTRIBUTE
     return ((0, jsx_runtime_1.jsx)(select_1.Select, { id: id, options: selectOptions, value: value, onValueChange: onValueChange, searchable: true, searchPlaceholder: searchPlaceholder, width: "full" }));
 }
 AttributeTypeSelect.displayName = "AttributeTypeSelect";
+/* ── Currency's own extra required fields (crisp#673, G-104) ──────────
+ * Attio's Create-attribute dialog isn't a fixed layout: choosing "Currency"
+ * inserts four required selects between Description and the AI-autofill
+ * row (Text/Number/Checkbox/Date/Phone Number/Location/User add none).
+ * Display, Decimal Places and Grouping are Attio's own small fixed UI
+ * vocabulary (verified live, `app.attio.com` Companies object) and ship as
+ * defaults below; Currency is real reference data (ISO 4217, ~150+
+ * entries) that crisp doesn't own, so it has no default of its own — a
+ * consumer supplies its own list, the same "GRC need: later" boundary
+ * `aiAutofillTypeOptions` already draws. Each option's own live-formatted
+ * preview (e.g. "Code — USD 1,200.50") is deliberately not modelled: it
+ * needs real number-formatting logic, a separate, bigger piece of work. */
+exports.CURRENCY_DISPLAY_OPTIONS = [
+    { value: "code", label: "Code" },
+    { value: "name", label: "Name" },
+    { value: "narrow-symbol", label: "Narrow symbol" },
+    { value: "symbol", label: "Symbol" },
+];
+exports.CURRENCY_DECIMAL_PLACES_OPTIONS = [
+    { value: "2", label: "2 decimals" },
+    { value: "0", label: "No decimals" },
+];
+exports.CURRENCY_GROUPING_OPTIONS = [
+    { value: "default", label: "Default" },
+    { value: "none", label: "No groups" },
+];
 /**
- * "Create attribute" (crisp#637, P-125, verified live): Attribute Type
- * select (defaults to Text) + Name (autofocused) + Description (optional)
- * + an AI-autofill switch row, footer Cancel/Create. Built on `FormDialog`
- * in its plain (non-`createMode`) shape — Attio's own footer here has a
- * real Cancel button, unlike the record-create dialog `createMode` models
- * (crisp#548), so `createMode` would be the wrong fit even though the
- * button carries the same ⌘↵ hint; that hint is rendered locally instead.
+ * "Create attribute" (crisp#637/#673, P-125, verified live): Attribute Type
+ * select (defaults to Text, type-ahead search built in via `Select`'s own
+ * `searchable`) + Name (autofocused on open, and again after picking a type
+ * — G-106) + Description (optional) + Currency's own four extra required
+ * fields when `type === "currency"` (G-104) + an AI-autofill switch row,
+ * footer Cancel/Create. Built on `FormDialog` in its plain (non-`createMode`)
+ * shape — Attio's own footer here has a real Cancel button, unlike the
+ * record-create dialog `createMode` models (crisp#548), so `createMode`
+ * would be the wrong fit even though the button carries the same ⌘↵ hint;
+ * that hint is rendered locally instead. The outside-click/Escape
+ * "Discard changes" confirm gated on dirty state (G-105) needed no work
+ * here at all — `FormDialog` already tracks dirtiness generically and shows
+ * it, so this dialog inherited it for free; `CreateAttributeDialog`'s own
+ * tests below just pin the behaviour to this component specifically.
  */
-function CreateAttributeDialog({ type, onTypeChange, typeOptions, aiAutofillTypeOptions, name, onNameChange, description, onDescriptionChange, aiAutofillEnabled = false, onAiAutofillChange, onSubmit, onClose, busy, error, title: titleProp, attributeTypeLabel: attributeTypeLabelProp, nameLabel: nameLabelProp, descriptionLabel: descriptionLabelProp, descriptionPlaceholder: descriptionPlaceholderProp, aiAutofillLabel: aiAutofillLabelProp, setUpAiAutofillLabel: setUpAiAutofillLabelProp, createLabel: createLabelProp, }) {
+function CreateAttributeDialog({ type, onTypeChange, typeOptions, aiAutofillTypeOptions, name, onNameChange, description, onDescriptionChange, currency, onCurrencyChange, currencyOptions, display, onDisplayChange, displayOptions = exports.CURRENCY_DISPLAY_OPTIONS, decimalPlaces, onDecimalPlacesChange, decimalPlacesOptions = exports.CURRENCY_DECIMAL_PLACES_OPTIONS, grouping, onGroupingChange, groupingOptions = exports.CURRENCY_GROUPING_OPTIONS, currencyFieldLabel: currencyFieldLabelProp, displayFieldLabel: displayFieldLabelProp, decimalPlacesFieldLabel: decimalPlacesFieldLabelProp, groupingFieldLabel: groupingFieldLabelProp, aiAutofillEnabled = false, onAiAutofillChange, onSubmit, onClose, busy, error, title: titleProp, attributeTypeLabel: attributeTypeLabelProp, nameLabel: nameLabelProp, descriptionLabel: descriptionLabelProp, descriptionPlaceholder: descriptionPlaceholderProp, aiAutofillLabel: aiAutofillLabelProp, setUpAiAutofillLabel: setUpAiAutofillLabelProp, createLabel: createLabelProp, }) {
     const title = (0, core_1.useCrispMessage)(titleProp, "Create attribute");
     const attributeTypeLabel = (0, core_1.useCrispMessage)(attributeTypeLabelProp, "Attribute Type");
     const nameLabel = (0, core_1.useCrispMessage)(nameLabelProp, "Name");
     const descriptionLabel = (0, core_1.useCrispMessage)(descriptionLabelProp, "Description");
     const descriptionPlaceholder = (0, core_1.useCrispMessage)(descriptionPlaceholderProp, "Add a description for this attribute");
+    // Attio's own copy for these four is the label plus a literal "(required)"
+    // suffix (not `FormField`'s asterisk convention) — the same "(optional)"-
+    // as-label-text shape `descriptionLabel` above already uses, so these are
+    // plain overridable strings rather than a new `FormField` capability.
+    const currencyFieldLabel = (0, core_1.useCrispMessage)(currencyFieldLabelProp, "Currency (required)");
+    const displayFieldLabel = (0, core_1.useCrispMessage)(displayFieldLabelProp, "Display (required)");
+    const decimalPlacesFieldLabel = (0, core_1.useCrispMessage)(decimalPlacesFieldLabelProp, "Decimal Places (required)");
+    const groupingFieldLabel = (0, core_1.useCrispMessage)(groupingFieldLabelProp, "Grouping (required)");
     const aiAutofillLabel = (0, core_1.useCrispMessage)(aiAutofillLabelProp, "AI autofill");
     const setUpAiAutofillLabel = (0, core_1.useCrispMessage)(setUpAiAutofillLabelProp, "Set up AI autofill");
     const createLabel = (0, core_1.useCrispMessage)(createLabelProp, "Create attribute");
     const switchId = React.useId();
     const nameId = React.useId();
-    return ((0, jsx_runtime_1.jsxs)(formdialog_1.FormDialog, { title: title, submitLabel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [createLabel, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-objectsettings-kbd", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("kbd", { children: "\u2318" }), (0, jsx_runtime_1.jsx)("kbd", { children: "\u21B5" })] })] }), onSubmit: onSubmit, onClose: onClose, busy: busy, error: error, size: 520, className: (0, objectsettings_recipe_1.objectsettingsRecipe)(), children: [(0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: attributeTypeLabel, children: (0, jsx_runtime_1.jsx)(AttributeTypeSelect, { value: type, onValueChange: onTypeChange, options: typeOptions, aiAutofillOptions: aiAutofillTypeOptions }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: nameLabel, htmlFor: nameId, children: (0, jsx_runtime_1.jsx)(input_1.Input, { id: nameId, autoFocus: true, value: name, onChange: (e) => onNameChange(e.target.value) }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: descriptionLabel, optional: true, children: (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { placeholder: descriptionPlaceholder, value: description, onChange: (e) => onDescriptionChange(e.target.value) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-aiautofill", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-objectsettings-aiautofill-label", children: aiAutofillLabel }), (0, jsx_runtime_1.jsxs)("label", { className: "crisp-objectsettings-aiautofill-row", htmlFor: switchId, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14 }), (0, jsx_runtime_1.jsx)("span", { children: setUpAiAutofillLabel }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { id: switchId, checked: aiAutofillEnabled, onCheckedChange: onAiAutofillChange })] })] })] }));
+    // G-106: selecting a type via the keyboard (filter to one match, Enter)
+    // auto-focuses Name right after — measured live. `Select`'s own
+    // `onValueChange` fires identically for a keyboard Enter and a mouse
+    // click (both go through its one `pick()`), so this can't distinguish
+    // input modality; only the keyboard path was independently re-measured,
+    // but there is no second code path to special-case even if there were
+    // one. The `requestAnimationFrame` wins the same race `Select`'s own
+    // `searchable` variant and `SavedViews`'s search box already schedule
+    // focus against (Select returns focus to its trigger synchronously on
+    // pick; this runs after that paint and wins).
+    const nameRef = React.useRef(null);
+    const handleTypeChange = (value) => {
+        onTypeChange(value);
+        requestAnimationFrame(() => nameRef.current?.focus({ preventScroll: true }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(formdialog_1.FormDialog, { title: title, submitLabel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [createLabel, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-objectsettings-kbd", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("kbd", { children: "\u2318" }), (0, jsx_runtime_1.jsx)("kbd", { children: "\u21B5" })] })] }), onSubmit: onSubmit, onClose: onClose, busy: busy, error: error, size: 520, className: (0, objectsettings_recipe_1.objectsettingsRecipe)(), children: [(0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: attributeTypeLabel, children: (0, jsx_runtime_1.jsx)(AttributeTypeSelect, { value: type, onValueChange: handleTypeChange, options: typeOptions, aiAutofillOptions: aiAutofillTypeOptions }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: nameLabel, htmlFor: nameId, children: (0, jsx_runtime_1.jsx)(input_1.Input, { ref: nameRef, id: nameId, autoFocus: true, value: name, onChange: (e) => onNameChange(e.target.value) }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: descriptionLabel, optional: true, children: (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { placeholder: descriptionPlaceholder, value: description, onChange: (e) => onDescriptionChange(e.target.value) }) }), type === "currency" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-fieldrow", children: [(0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: currencyFieldLabel, children: (0, jsx_runtime_1.jsx)(select_1.Select, { options: currencyOptions ?? [], value: currency ?? "", onValueChange: onCurrencyChange, searchable: true }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: displayFieldLabel, children: (0, jsx_runtime_1.jsx)(select_1.Select, { options: displayOptions, value: display ?? displayOptions[0]?.value, onValueChange: onDisplayChange }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-fieldrow", children: [(0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: decimalPlacesFieldLabel, children: (0, jsx_runtime_1.jsx)(select_1.Select, { options: decimalPlacesOptions, value: decimalPlaces ?? decimalPlacesOptions[0]?.value, onValueChange: onDecimalPlacesChange }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: groupingFieldLabel, children: (0, jsx_runtime_1.jsx)(select_1.Select, { options: groupingOptions, value: grouping ?? groupingOptions[0]?.value, onValueChange: onGroupingChange }) })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-aiautofill", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-objectsettings-aiautofill-label", children: aiAutofillLabel }), (0, jsx_runtime_1.jsxs)("label", { className: "crisp-objectsettings-aiautofill-row", htmlFor: switchId, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14 }), (0, jsx_runtime_1.jsx)("span", { children: setUpAiAutofillLabel }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { id: switchId, checked: aiAutofillEnabled, onCheckedChange: onAiAutofillChange })] })] })] }));
 }
 CreateAttributeDialog.displayName = "CreateAttributeDialog";