@crisp-ui-kit/crisp 0.14.0 → 0.16.0

package/dist/cjs/components/contextmenu/contextmenu.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = ContextMenu;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const menu_1 = require("../menu");
 const contextmenu_recipe_1 = require("./contextmenu.recipe");
 /**
  * A right-click context menu — the popover surface positioned at the cursor.
@@ -63,16 +64,19 @@ function ContextMenu({ children, items, menuLabel = "Context menu", className, }
             returnFocusTo.current?.focus?.();
         returnFocusTo.current = null;
     }, []);
-    /** The items a roving focus may land on: not separators, not disabled. */
-    const enabled = React.useCallback(() => Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]:not([disabled])') ?? []), []);
     // `role="menu"` puts a screen reader in application mode, where the arrow
-    // keys are the only navigation there is — so opening has to put focus on an
-    // item, or the role is a promise the component does not keep (#188).
-    React.useEffect(() => {
-        if (!pos)
-            return;
-        enabled()[0]?.focus();
-    }, [pos, enabled]);
+    // keys are the only navigation there is (#188). The model itself is crisp's
+    // shared one (#192) — Menu and all three RecordsTable surfaces run the same
+    // hook, and a fourth hand-written copy is how typeahead, menuitemcheckbox
+    // and the `[data-disabled]` spelling get lost one surface at a time.
+    const { onKeyDown: onMenuKeyDown } = (0, menu_1.useMenuKeyboard)({
+        open: !!pos,
+        close: () => close(true),
+        // Tab: the browser is already moving focus somewhere, so pulling it back
+        // to the trigger first would land the user in the wrong place
+        dismiss: () => close(),
+        contentRef: menuRef,
+    });
     React.useEffect(() => {
         if (!pos)
             return;
@@ -88,29 +92,6 @@ function ContextMenu({ children, items, menuLabel = "Context menu", className, }
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    const onMenuKeyDown = (e) => {
-        // a menu is not a focus trap: Tab leaves, and leaving means closing
-        if (e.key === "Tab") {
-            close(true);
-            return;
-        }
-        const step = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
-        const items = enabled();
-        if (!items.length)
-            return;
-        const at = items.indexOf(document.activeElement);
-        let next = null;
-        if (step)
-            next = (at + step + items.length) % items.length;
-        else if (e.key === "Home")
-            next = 0;
-        else if (e.key === "End")
-            next = items.length - 1;
-        if (next === null)
-            return;
-        e.preventDefault();
-        items[next]?.focus();
-    };
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, contextmenu_recipe_1.contextmenuRecipe)({ className }), children: [(0, jsx_runtime_1.jsx)("div", { onContextMenu: open, children: children }), pos && ((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? ((0, jsx_runtime_1.jsx)("hr", { className: "contextmenu-sep" }, i)) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
                         ? "contextmenu-item contextmenu-item--danger"
                         : "contextmenu-item", tabIndex: -1, onClick: () => {

package/dist/cjs/components/tabs/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tabsRecipe = exports.Tabs = void 0;
+exports.useTablistKeyboard = exports.tabsRecipe = exports.Tabs = void 0;
 var tabs_1 = require("./tabs");
 Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return tabs_1.Tabs; } });
 var tabs_recipe_1 = require("./tabs.recipe");
 Object.defineProperty(exports, "tabsRecipe", { enumerable: true, get: function () { return tabs_recipe_1.tabsRecipe; } });
+var tabs_keyboard_1 = require("./tabs-keyboard");
+Object.defineProperty(exports, "useTablistKeyboard", { enumerable: true, get: function () { return tabs_keyboard_1.useTablistKeyboard; } });

package/dist/cjs/components/tabs/tabs-keyboard.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTablistKeyboard = useTablistKeyboard;
+/**
+ * The WAI-ARIA tablist keyboard model: ←/→ to move (wrapping), Home/End to
+ * jump, disabled tabs skipped, focus following selection.
+ *
+ * Extracted from `Tabs` so a surface that renders its own measured tab chrome —
+ * Inbox's flyout tabs, and whatever comes next — gets the identical model
+ * rather than a second partial one. The same reason `useMenuKeyboard` exists.
+ *
+ * Automatic activation (arrow selects, rather than arrow-then-Enter) is APG's
+ * recommendation when switching tabs is cheap, and it is what `Tabs` already
+ * did before this was extracted, so it stays the behaviour.
+ */
+function useTablistKeyboard({ tabs, active, select, listRef, }) {
+    const onKeyDown = (e) => {
+        const enabled = tabs.filter((t) => !t.disabled);
+        if (!enabled.length)
+            return;
+        const idx = enabled.findIndex((t) => t.value === active);
+        let next = -1;
+        if (e.key === "ArrowRight")
+            next = (idx + 1) % enabled.length;
+        else if (e.key === "ArrowLeft")
+            next = (idx - 1 + enabled.length) % enabled.length;
+        else if (e.key === "Home")
+            next = 0;
+        else if (e.key === "End")
+            next = enabled.length - 1;
+        if (next < 0)
+            return;
+        e.preventDefault();
+        const nextValue = enabled[next]?.value;
+        if (!nextValue)
+            return;
+        select(nextValue);
+        listRef.current
+            ?.querySelector(`[data-value="${CSS.escape(nextValue)}"]`)
+            ?.focus();
+    };
+    /**
+     * A tablist is a SINGLE tab stop: Tab enters the group and leaves it, and the
+     * arrows move within. Without this a keyboard user walks through every tab
+     * one at a time, and the number of stops grows with the tab set.
+     */
+    const tabIndexFor = (value) => (value === active ? 0 : -1);
+    return { onKeyDown, tabIndexFor };
+}

package/dist/cjs/components/tabs/tabs.js

@@ -37,6 +37,7 @@ exports.Tabs = Tabs;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const tabs_recipe_1 = require("./tabs.recipe");
+const tabs_keyboard_1 = require("./tabs-keyboard");
 /**
  * A row of text tabs over a sliding ink underline — the record-view tab bar,
  * measured from Attio. Roving-tabindex keyboard model (←/→ move + activate,
@@ -70,32 +71,15 @@ function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, cla
         ro.observe(list);
         return () => ro.disconnect();
     }, [active, tabs]);
-    const onKeyDown = (e) => {
-        const enabled = tabs.filter((t) => !t.disabled);
-        const idx = enabled.findIndex((t) => t.value === active);
-        let next = -1;
-        if (e.key === "ArrowRight")
-            next = (idx + 1) % enabled.length;
-        else if (e.key === "ArrowLeft")
-            next = (idx - 1 + enabled.length) % enabled.length;
-        else if (e.key === "Home")
-            next = 0;
-        else if (e.key === "End")
-            next = enabled.length - 1;
-        if (next < 0)
-            return;
-        e.preventDefault();
-        const nextValue = enabled[next]?.value;
-        if (!nextValue)
-            return;
-        select(nextValue);
-        listRef.current
-            ?.querySelector(`[data-value="${CSS.escape(nextValue)}"]`)
-            ?.focus();
-    };
+    const { onKeyDown, tabIndexFor } = (0, tabs_keyboard_1.useTablistKeyboard)({
+        tabs,
+        active,
+        select,
+        listRef,
+    });
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tabs_recipe_1.tabsRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { ref: listRef, className: "tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && (0, jsx_runtime_1.jsx)("span", { className: "tabs-leading", children: leading }), tabs.map((t) => {
                         const selected = t.value === active;
-                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", id: `tab-${t.value}`, "aria-selected": selected, "aria-controls": `panel-${t.value}`, tabIndex: selected ? 0 : -1, "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "tabs-tab", onClick: () => select(t.value), children: [t.icon, (0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && ((0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-badge", children: t.badge }))] }, t.value));
+                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", id: `tab-${t.value}`, "aria-selected": selected, "aria-controls": `panel-${t.value}`, tabIndex: tabIndexFor(t.value), "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "tabs-tab", onClick: () => select(t.value), children: [t.icon, (0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && ((0, jsx_runtime_1.jsx)("span", { className: "tabs-tab-badge", children: t.badge }))] }, t.value));
                     }), indicator && ((0, jsx_runtime_1.jsx)("span", { className: "tabs-indicator", style: {
                             width: indicator.width,
                             transform: `translateX(${indicator.left}px)`,

package/dist/cjs/product/inbox/inbox.js

@@ -1,8 +1,43 @@
 "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.Inbox = Inbox;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const tabs_1 = require("../../components/tabs");
 const inbox_recipe_1 = require("./inbox.recipe");
 /**
  * A notifications inbox panel — measured from Attio's notification flyout. A
@@ -10,7 +45,17 @@ const inbox_recipe_1 = require("./inbox.recipe");
  * (avatar + message + time + unread dot) or a centred empty state. Put it inside
  * a Popover for the flyout.
  */
-function Inbox({ notifications = [], title = "Notifications", tabs, activeTab, onTabChange, emptyTitle = "No notifications", emptySubtitle = "Notifications such as mentions and important updates will be displayed here.", emptyAction, className, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, inbox_recipe_1.inboxRecipe)({ className }), children: [(0, jsx_runtime_1.jsxs)("div", { className: "inbox-head", children: [(0, jsx_runtime_1.jsx)("div", { className: "inbox-title", children: title }), tabs && tabs.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "inbox-tabs", role: "tablist", children: tabs.map((t) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, className: "inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && ((0, jsx_runtime_1.jsxs)("span", { className: "inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "inbox-empty", children: [(0, jsx_runtime_1.jsx)("span", { className: "inbox-empty-icon", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "inbox-empty-title", children: emptyTitle }), emptySubtitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "inbox-empty-sub", children: emptySubtitle })), emptyAction != null && ((0, jsx_runtime_1.jsx)("div", { className: "inbox-empty-action", children: emptyAction }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "inbox-list", children: notifications.map((n) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "inbox-row", onClick: n.onClick, children: [n.avatar != null && ((0, jsx_runtime_1.jsx)("span", { className: "inbox-row-avatar", children: n.avatar })), (0, jsx_runtime_1.jsxs)("span", { className: "inbox-row-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "inbox-row-msg", children: n.message }), n.time != null && ((0, jsx_runtime_1.jsx)("span", { className: "inbox-row-time", children: n.time }))] }), n.unread && (0, jsx_runtime_1.jsx)("span", { className: "inbox-row-unread" })] }, n.id))) }))] }));
+function Inbox({ notifications = [], title = "Notifications", tabs, activeTab, onTabChange, emptyTitle = "No notifications", emptySubtitle = "Notifications such as mentions and important updates will be displayed here.", emptyAction, tabsLabel = "Notification views", className, }) {
+    const listRef = React.useRef(null);
+    // crisp's shared tablist model, the one `Tabs` runs (#195). Hand-rolling a
+    // second one is how Inbox ended up with no arrow keys, no roving tabindex
+    // and no name while `Tabs` had all three.
+    const { onKeyDown, tabIndexFor } = (0, tabs_1.useTablistKeyboard)({
+        tabs: (tabs ?? []).map((t) => ({ value: t.id, disabled: t.disabled })),
+        active: activeTab ?? "",
+        select: (id) => onTabChange?.(id),
+        listRef,
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, inbox_recipe_1.inboxRecipe)({ className }), children: [(0, jsx_runtime_1.jsxs)("div", { className: "inbox-head", children: [(0, jsx_runtime_1.jsx)("div", { className: "inbox-title", children: title }), tabs && tabs.length > 0 && ((0, jsx_runtime_1.jsx)("div", { ref: listRef, className: "inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, tabIndex: tabIndexFor(t.id), "data-value": t.id, disabled: t.disabled, className: "inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && ((0, jsx_runtime_1.jsxs)("span", { className: "inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "inbox-empty", children: [(0, jsx_runtime_1.jsx)("span", { className: "inbox-empty-icon", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "inbox-empty-title", children: emptyTitle }), emptySubtitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "inbox-empty-sub", children: emptySubtitle })), emptyAction != null && ((0, jsx_runtime_1.jsx)("div", { className: "inbox-empty-action", children: emptyAction }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "inbox-list", children: notifications.map((n) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "inbox-row", onClick: n.onClick, children: [n.avatar != null && ((0, jsx_runtime_1.jsx)("span", { className: "inbox-row-avatar", children: n.avatar })), (0, jsx_runtime_1.jsxs)("span", { className: "inbox-row-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "inbox-row-msg", children: n.message }), n.time != null && ((0, jsx_runtime_1.jsx)("span", { className: "inbox-row-time", children: n.time }))] }), n.unread && (0, jsx_runtime_1.jsx)("span", { className: "inbox-row-unread" })] }, n.id))) }))] }));
 }
 Inbox.displayName = "Inbox";

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useMenuKeyboard } from "../menu/index.js";
 import { contextmenuRecipe } from "./contextmenu.recipe.js";
 /**
  * A right-click context menu — the popover surface positioned at the cursor.
@@ -27,16 +28,19 @@ export function ContextMenu({ children, items, menuLabel = "Context menu", class
             returnFocusTo.current?.focus?.();
         returnFocusTo.current = null;
     }, []);
-    /** The items a roving focus may land on: not separators, not disabled. */
-    const enabled = React.useCallback(() => Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]:not([disabled])') ?? []), []);
     // `role="menu"` puts a screen reader in application mode, where the arrow
-    // keys are the only navigation there is — so opening has to put focus on an
-    // item, or the role is a promise the component does not keep (#188).
-    React.useEffect(() => {
-        if (!pos)
-            return;
-        enabled()[0]?.focus();
-    }, [pos, enabled]);
+    // keys are the only navigation there is (#188). The model itself is crisp's
+    // shared one (#192) — Menu and all three RecordsTable surfaces run the same
+    // hook, and a fourth hand-written copy is how typeahead, menuitemcheckbox
+    // and the `[data-disabled]` spelling get lost one surface at a time.
+    const { onKeyDown: onMenuKeyDown } = useMenuKeyboard({
+        open: !!pos,
+        close: () => close(true),
+        // Tab: the browser is already moving focus somewhere, so pulling it back
+        // to the trigger first would land the user in the wrong place
+        dismiss: () => close(),
+        contentRef: menuRef,
+    });
     React.useEffect(() => {
         if (!pos)
             return;
@@ -52,29 +56,6 @@ export function ContextMenu({ children, items, menuLabel = "Context menu", class
             document.removeEventListener("keydown", onKey);
         };
     }, [pos, close]);
-    const onMenuKeyDown = (e) => {
-        // a menu is not a focus trap: Tab leaves, and leaving means closing
-        if (e.key === "Tab") {
-            close(true);
-            return;
-        }
-        const step = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
-        const items = enabled();
-        if (!items.length)
-            return;
-        const at = items.indexOf(document.activeElement);
-        let next = null;
-        if (step)
-            next = (at + step + items.length) % items.length;
-        else if (e.key === "Home")
-            next = 0;
-        else if (e.key === "End")
-            next = items.length - 1;
-        if (next === null)
-            return;
-        e.preventDefault();
-        items[next]?.focus();
-    };
     return (_jsxs("div", { ref: rootRef, className: contextmenuRecipe({ className }), children: [_jsx("div", { onContextMenu: open, children: children }), pos && (_jsx("div", { ref: menuRef, className: "contextmenu-content", role: "menu", "aria-label": menuLabel, style: { left: pos.x, top: pos.y }, onKeyDown: onMenuKeyDown, children: items.map((item, i) => item.separator ? (_jsx("hr", { className: "contextmenu-sep" }, i)) : (_jsxs("button", { type: "button", role: "menuitem", disabled: item.disabled, className: item.danger
                         ? "contextmenu-item contextmenu-item--danger"
                         : "contextmenu-item", tabIndex: -1, onClick: () => {

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

@@ -1,2 +1,3 @@
 export { Tabs } from "./tabs.js";
 export { tabsRecipe } from "./tabs.recipe.js";
+export { useTablistKeyboard, } from "./tabs-keyboard.js";

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

@@ -0,0 +1,46 @@
+/**
+ * The WAI-ARIA tablist keyboard model: ←/→ to move (wrapping), Home/End to
+ * jump, disabled tabs skipped, focus following selection.
+ *
+ * Extracted from `Tabs` so a surface that renders its own measured tab chrome —
+ * Inbox's flyout tabs, and whatever comes next — gets the identical model
+ * rather than a second partial one. The same reason `useMenuKeyboard` exists.
+ *
+ * Automatic activation (arrow selects, rather than arrow-then-Enter) is APG's
+ * recommendation when switching tabs is cheap, and it is what `Tabs` already
+ * did before this was extracted, so it stays the behaviour.
+ */
+export function useTablistKeyboard({ tabs, active, select, listRef, }) {
+    const onKeyDown = (e) => {
+        const enabled = tabs.filter((t) => !t.disabled);
+        if (!enabled.length)
+            return;
+        const idx = enabled.findIndex((t) => t.value === active);
+        let next = -1;
+        if (e.key === "ArrowRight")
+            next = (idx + 1) % enabled.length;
+        else if (e.key === "ArrowLeft")
+            next = (idx - 1 + enabled.length) % enabled.length;
+        else if (e.key === "Home")
+            next = 0;
+        else if (e.key === "End")
+            next = enabled.length - 1;
+        if (next < 0)
+            return;
+        e.preventDefault();
+        const nextValue = enabled[next]?.value;
+        if (!nextValue)
+            return;
+        select(nextValue);
+        listRef.current
+            ?.querySelector(`[data-value="${CSS.escape(nextValue)}"]`)
+            ?.focus();
+    };
+    /**
+     * A tablist is a SINGLE tab stop: Tab enters the group and leaves it, and the
+     * arrows move within. Without this a keyboard user walks through every tab
+     * one at a time, and the number of stops grows with the tab set.
+     */
+    const tabIndexFor = (value) => (value === active ? 0 : -1);
+    return { onKeyDown, tabIndexFor };
+}

package/dist/esm/components/tabs/tabs.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { tabsRecipe } from "./tabs.recipe.js";
+import { useTablistKeyboard } from "./tabs-keyboard.js";
 /**
  * A row of text tabs over a sliding ink underline — the record-view tab bar,
  * measured from Attio. Roving-tabindex keyboard model (←/→ move + activate,
@@ -34,32 +35,15 @@ export function Tabs({ tabs, value, defaultValue, onValueChange, leading, childr
         ro.observe(list);
         return () => ro.disconnect();
     }, [active, tabs]);
-    const onKeyDown = (e) => {
-        const enabled = tabs.filter((t) => !t.disabled);
-        const idx = enabled.findIndex((t) => t.value === active);
-        let next = -1;
-        if (e.key === "ArrowRight")
-            next = (idx + 1) % enabled.length;
-        else if (e.key === "ArrowLeft")
-            next = (idx - 1 + enabled.length) % enabled.length;
-        else if (e.key === "Home")
-            next = 0;
-        else if (e.key === "End")
-            next = enabled.length - 1;
-        if (next < 0)
-            return;
-        e.preventDefault();
-        const nextValue = enabled[next]?.value;
-        if (!nextValue)
-            return;
-        select(nextValue);
-        listRef.current
-            ?.querySelector(`[data-value="${CSS.escape(nextValue)}"]`)
-            ?.focus();
-    };
+    const { onKeyDown, tabIndexFor } = useTablistKeyboard({
+        tabs,
+        active,
+        select,
+        listRef,
+    });
     return (_jsxs("div", { className: tabsRecipe({ className }), ...rest, children: [_jsxs("div", { ref: listRef, className: "tabs-list", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, children: [leading && _jsx("span", { className: "tabs-leading", children: leading }), tabs.map((t) => {
                         const selected = t.value === active;
-                        return (_jsxs("button", { type: "button", role: "tab", id: `tab-${t.value}`, "aria-selected": selected, "aria-controls": `panel-${t.value}`, tabIndex: selected ? 0 : -1, "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "tabs-tab", onClick: () => select(t.value), children: [t.icon, _jsx("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && (_jsx("span", { className: "tabs-tab-badge", children: t.badge }))] }, t.value));
+                        return (_jsxs("button", { type: "button", role: "tab", id: `tab-${t.value}`, "aria-selected": selected, "aria-controls": `panel-${t.value}`, tabIndex: tabIndexFor(t.value), "data-value": t.value, "data-selected": selected ? "" : undefined, disabled: t.disabled, className: "tabs-tab", onClick: () => select(t.value), children: [t.icon, _jsx("span", { className: "tabs-tab-label", children: t.label }), t.badge != null && (_jsx("span", { className: "tabs-tab-badge", children: t.badge }))] }, t.value));
                     }), indicator && (_jsx("span", { className: "tabs-indicator", style: {
                             width: indicator.width,
                             transform: `translateX(${indicator.left}px)`,

package/dist/esm/product/inbox/inbox.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Bell } from "lucide-react";
+import * as React from "react";
+import { useTablistKeyboard } from "../../components/tabs/index.js";
 import { inboxRecipe } from "./inbox.recipe.js";
 /**
  * A notifications inbox panel — measured from Attio's notification flyout. A
@@ -7,7 +9,17 @@ import { inboxRecipe } from "./inbox.recipe.js";
  * (avatar + message + time + unread dot) or a centred empty state. Put it inside
  * a Popover for the flyout.
  */
-export function Inbox({ notifications = [], title = "Notifications", tabs, activeTab, onTabChange, emptyTitle = "No notifications", emptySubtitle = "Notifications such as mentions and important updates will be displayed here.", emptyAction, className, }) {
-    return (_jsxs("div", { className: inboxRecipe({ className }), children: [_jsxs("div", { className: "inbox-head", children: [_jsx("div", { className: "inbox-title", children: title }), tabs && tabs.length > 0 && (_jsx("div", { className: "inbox-tabs", role: "tablist", children: tabs.map((t) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, className: "inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && (_jsxs("span", { className: "inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? (_jsxs("div", { className: "inbox-empty", children: [_jsx("span", { className: "inbox-empty-icon", children: _jsx(Bell, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "inbox-empty-title", children: emptyTitle }), emptySubtitle != null && (_jsx("div", { className: "inbox-empty-sub", children: emptySubtitle })), emptyAction != null && (_jsx("div", { className: "inbox-empty-action", children: emptyAction }))] })) : (_jsx("div", { className: "inbox-list", children: notifications.map((n) => (_jsxs("button", { type: "button", className: "inbox-row", onClick: n.onClick, children: [n.avatar != null && (_jsx("span", { className: "inbox-row-avatar", children: n.avatar })), _jsxs("span", { className: "inbox-row-body", children: [_jsx("span", { className: "inbox-row-msg", children: n.message }), n.time != null && (_jsx("span", { className: "inbox-row-time", children: n.time }))] }), n.unread && _jsx("span", { className: "inbox-row-unread" })] }, n.id))) }))] }));
+export function Inbox({ notifications = [], title = "Notifications", tabs, activeTab, onTabChange, emptyTitle = "No notifications", emptySubtitle = "Notifications such as mentions and important updates will be displayed here.", emptyAction, tabsLabel = "Notification views", className, }) {
+    const listRef = React.useRef(null);
+    // crisp's shared tablist model, the one `Tabs` runs (#195). Hand-rolling a
+    // second one is how Inbox ended up with no arrow keys, no roving tabindex
+    // and no name while `Tabs` had all three.
+    const { onKeyDown, tabIndexFor } = useTablistKeyboard({
+        tabs: (tabs ?? []).map((t) => ({ value: t.id, disabled: t.disabled })),
+        active: activeTab ?? "",
+        select: (id) => onTabChange?.(id),
+        listRef,
+    });
+    return (_jsxs("div", { className: inboxRecipe({ className }), children: [_jsxs("div", { className: "inbox-head", children: [_jsx("div", { className: "inbox-title", children: title }), tabs && tabs.length > 0 && (_jsx("div", { ref: listRef, className: "inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, tabIndex: tabIndexFor(t.id), "data-value": t.id, disabled: t.disabled, className: "inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && (_jsxs("span", { className: "inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? (_jsxs("div", { className: "inbox-empty", children: [_jsx("span", { className: "inbox-empty-icon", children: _jsx(Bell, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "inbox-empty-title", children: emptyTitle }), emptySubtitle != null && (_jsx("div", { className: "inbox-empty-sub", children: emptySubtitle })), emptyAction != null && (_jsx("div", { className: "inbox-empty-action", children: emptyAction }))] })) : (_jsx("div", { className: "inbox-list", children: notifications.map((n) => (_jsxs("button", { type: "button", className: "inbox-row", onClick: n.onClick, children: [n.avatar != null && (_jsx("span", { className: "inbox-row-avatar", children: n.avatar })), _jsxs("span", { className: "inbox-row-body", children: [_jsx("span", { className: "inbox-row-msg", children: n.message }), n.time != null && (_jsx("span", { className: "inbox-row-time", children: n.time }))] }), n.unread && _jsx("span", { className: "inbox-row-unread" })] }, n.id))) }))] }));
 }
 Inbox.displayName = "Inbox";

package/dist/types/components/tabs/index.d.ts

@@ -1,2 +1,3 @@
 export { type TabItem, Tabs, type TabsProps } from "./tabs";
 export { tabsRecipe } from "./tabs.recipe";
+export { type TablistEntry, type UseTablistKeyboardOptions, useTablistKeyboard, } from "./tabs-keyboard";

package/dist/types/components/tabs/tabs-keyboard.d.ts

@@ -0,0 +1,35 @@
+import type * as React from "react";
+/**
+ * One entry in a tablist, as far as the keyboard model cares. Callers pass
+ * whatever richer shape they render — only these two fields are read.
+ */
+export type TablistEntry = {
+    value: string;
+    disabled?: boolean;
+};
+export type UseTablistKeyboardOptions<T extends TablistEntry> = {
+    /** Every tab, in rendered order, including the disabled ones. */
+    tabs: T[];
+    /** The selected tab's value. */
+    active: string;
+    /** Select a tab. Arrow keys activate immediately, as APG's automatic mode. */
+    select: (value: string) => void;
+    /** The element carrying `role="tablist"`; used to move focus. */
+    listRef: React.RefObject<HTMLElement | null>;
+};
+/**
+ * The WAI-ARIA tablist keyboard model: ←/→ to move (wrapping), Home/End to
+ * jump, disabled tabs skipped, focus following selection.
+ *
+ * Extracted from `Tabs` so a surface that renders its own measured tab chrome —
+ * Inbox's flyout tabs, and whatever comes next — gets the identical model
+ * rather than a second partial one. The same reason `useMenuKeyboard` exists.
+ *
+ * Automatic activation (arrow selects, rather than arrow-then-Enter) is APG's
+ * recommendation when switching tabs is cheap, and it is what `Tabs` already
+ * did before this was extracted, so it stays the behaviour.
+ */
+export declare function useTablistKeyboard<T extends TablistEntry>({ tabs, active, select, listRef, }: UseTablistKeyboardOptions<T>): {
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    tabIndexFor: (value: string) => -1 | 0;
+};

package/dist/types/product/inbox/inbox.d.ts

@@ -1,4 +1,4 @@
-import type * as React from "react";
+import * as React from "react";
 export type InboxNotification = {
     id: string;
     /** Leading avatar or icon. */
@@ -14,6 +14,7 @@ export type InboxTab = {
     id: string;
     label: React.ReactNode;
     count?: number;
+    disabled?: boolean;
 };
 export type InboxProps = {
     notifications?: InboxNotification[];
@@ -27,6 +28,8 @@ export type InboxProps = {
     emptySubtitle?: React.ReactNode;
     /** Optional action under the empty state (e.g. a Settings button). */
     emptyAction?: React.ReactNode;
+    /** Accessible name for the tab list. */
+    tabsLabel?: string;
     className?: string;
 };
 /**
@@ -35,7 +38,7 @@ export type InboxProps = {
  * (avatar + message + time + unread dot) or a centred empty state. Put it inside
  * a Popover for the flyout.
  */
-export declare function Inbox({ notifications, title, tabs, activeTab, onTabChange, emptyTitle, emptySubtitle, emptyAction, className, }: InboxProps): React.JSX.Element;
+export declare function Inbox({ notifications, title, tabs, activeTab, onTabChange, emptyTitle, emptySubtitle, emptyAction, tabsLabel, className, }: InboxProps): React.JSX.Element;
 export declare namespace Inbox {
     var displayName: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",