@tensor_1/react 2.26.2 → 2.27.0

package/dist/components/Dialogs.js

@@ -1,10 +1,55 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { Button } from "./Button.js";
 import { Input } from "./Input.js";
 import { Modal } from "./Modal.js";
-function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, closeLabel, onConfirm, onCancel, pending, destructive }) {
+import { Popover } from "./Popover.js";
+import { fillLabel } from "../fill-label.js";
+import { resolveAnchor } from "../hooks/useAnchoredPosition.js";
+import { useUixLabels } from "../labels-context.js";
+function ConfirmDialog({
+  open,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  closeLabel,
+  onConfirm,
+  onCancel,
+  pending,
+  destructive,
+  children,
+  error,
+  initialFocus,
+  tertiaryLabel,
+  onTertiary,
+  typeToConfirm,
+  typeToConfirmLabel: typeToConfirmLabelProp,
+  compensation,
+  compensationLabel: compensationLabelProp
+}) {
+  const uixLabels = useUixLabels();
+  const typeToConfirmLabel = typeToConfirmLabelProp ?? uixLabels.confirmDialog?.typeToConfirm ?? "Type {value} to confirm";
+  const compensationLabel = compensationLabelProp ?? uixLabels.confirmDialog?.compensation ?? "How to undo this";
+  const id = useId();
+  const bodyId = `${id}-body`;
+  const typedId = `${id}-typed`;
+  const cancelRef = useRef(null);
+  const confirmRef = useRef(null);
+  const typedRef = useRef(null);
+  const [typed, setTyped] = useState("");
+  const typedMatches = typeToConfirm == null || typed === typeToConfirm;
+  const hasBody = description != null || children != null || compensation != null;
+  useEffect(() => {
+    if (open) setTyped("");
+  }, [open, typeToConfirm]);
+  useEffect(() => {
+    if (!open) return;
+    const focus = initialFocus ?? (destructive ? "cancel" : void 0);
+    const target = typeToConfirm != null ? typedRef.current : focus === "cancel" ? cancelRef.current : focus === "confirm" ? confirmRef.current : null;
+    target?.focus();
+  }, [open, initialFocus, destructive, typeToConfirm]);
   return /* @__PURE__ */ jsx(
     Modal,
     {
@@ -13,11 +58,126 @@ function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, cl
       title,
       closeLabel,
       role: "alertdialog",
+      "aria-describedby": hasBody ? bodyId : void 0,
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { type: "button", onClick: onCancel, disabled: pending, children: cancelLabel }),
-        /* @__PURE__ */ jsx(Button, { type: "button", variant: destructive ? "danger" : "primary", onClick: () => void onConfirm(), loading: pending, children: confirmLabel })
+        tertiaryLabel != null && onTertiary && /* @__PURE__ */ jsx(Button, { type: "button", className: "uix-confirm__tertiary", onClick: () => void onTertiary(), disabled: pending, children: tertiaryLabel }),
+        /* @__PURE__ */ jsx(Button, { ref: cancelRef, type: "button", onClick: onCancel, disabled: pending, children: cancelLabel }),
+        /* @__PURE__ */ jsx(Button, { ref: confirmRef, type: "button", variant: destructive ? "danger" : "primary", onClick: () => {
+          if (typedMatches) void onConfirm();
+        }, loading: pending, disabled: !typedMatches, children: confirmLabel })
       ] }),
-      children: description
+      children: /* @__PURE__ */ jsxs("div", { className: "uix-confirm", children: [
+        hasBody && /* @__PURE__ */ jsxs("div", { id: bodyId, className: "uix-confirm__body", children: [
+          description != null && /* @__PURE__ */ jsx("div", { children: description }),
+          children,
+          compensation != null && /* @__PURE__ */ jsxs("div", { className: "uix-confirm__compensation", children: [
+            /* @__PURE__ */ jsx("strong", { className: "uix-confirm__compensation-title", children: compensationLabel }),
+            /* @__PURE__ */ jsx("div", { children: compensation })
+          ] })
+        ] }),
+        typeToConfirm != null && /* @__PURE__ */ jsxs("div", { className: "uix-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: typedId, children: fillLabel(typeToConfirmLabel, { value: typeToConfirm }) }),
+          /* @__PURE__ */ jsx(Input, { ref: typedRef, id: typedId, value: typed, autoComplete: "off", spellCheck: false, onChange: (event) => setTyped(event.currentTarget.value) })
+        ] }),
+        error != null && /* @__PURE__ */ jsx("div", { className: "uix-confirm__error", role: "alert", children: error })
+      ] })
+    }
+  );
+}
+function Popconfirm({
+  open,
+  anchor,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  onConfirm,
+  onCancel,
+  pending,
+  destructive,
+  compensation,
+  compensationLabel: compensationLabelProp,
+  placement = "bottom-start"
+}) {
+  const uixLabels = useUixLabels();
+  const compensationLabel = compensationLabelProp ?? uixLabels.confirmDialog?.compensation ?? "How to undo this";
+  const id = useId();
+  const panelId = `${id}-popconfirm`;
+  const cancelRef = useRef(null);
+  const onCancelRef = useRef(onCancel);
+  onCancelRef.current = onCancel;
+  const hasBody = description != null || compensation != null;
+  useEffect(() => {
+    const panel = document.getElementById(panelId);
+    if (!panel) return;
+    const shown = () => {
+      try {
+        return panel.matches(":popover-open");
+      } catch {
+        return false;
+      }
+    };
+    if (!open) {
+      if (shown()) {
+        const focusInside = panel.contains(document.activeElement);
+        try {
+          panel.hidePopover();
+        } catch {
+        }
+        if (focusInside) resolveAnchor(anchor)?.focus();
+      }
+      return;
+    }
+    if (!shown()) {
+      try {
+        panel.showPopover();
+      } catch {
+      }
+    }
+    cancelRef.current?.focus();
+    const onKey = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      onCancelRef.current();
+    };
+    const onPointer = (event) => {
+      const target = event.target;
+      if (panel.contains(target) || resolveAnchor(anchor)?.contains(target)) return;
+      onCancelRef.current();
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onPointer, true);
+    return () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onPointer, true);
+    };
+  }, [open, anchor, panelId]);
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      id: panelId,
+      popover: "manual",
+      anchor,
+      placement,
+      role: "dialog",
+      "aria-labelledby": `${id}-title`,
+      "aria-describedby": hasBody ? `${id}-body` : void 0,
+      className: "uix-popconfirm",
+      children: [
+        /* @__PURE__ */ jsx("div", { id: `${id}-title`, className: "uix-popconfirm__title", children: title }),
+        hasBody && /* @__PURE__ */ jsxs("div", { id: `${id}-body`, className: "uix-popconfirm__body", children: [
+          description != null && /* @__PURE__ */ jsx("div", { children: description }),
+          compensation != null && /* @__PURE__ */ jsxs("div", { className: "uix-confirm__compensation", children: [
+            /* @__PURE__ */ jsx("strong", { className: "uix-confirm__compensation-title", children: compensationLabel }),
+            /* @__PURE__ */ jsx("div", { children: compensation })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "uix-popconfirm__actions", children: [
+          /* @__PURE__ */ jsx(Button, { ref: cancelRef, type: "button", size: "sm", onClick: onCancel, disabled: pending, children: cancelLabel }),
+          /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: destructive ? "danger" : "primary", onClick: () => void onConfirm(), loading: pending, children: confirmLabel })
+        ] })
+      ]
     }
   );
 }
@@ -40,7 +200,7 @@ function PromptDialog({ open, title, description, inputLabel, defaultValue = "",
   };
   return /* @__PURE__ */ jsx(Modal, { open, onClose: onCancel, title, closeLabel, children: /* @__PURE__ */ jsxs("form", { className: "uix-prompt", onSubmit: handleSubmit, children: [
     description != null && /* @__PURE__ */ jsx("div", { children: description }),
-    /* @__PURE__ */ jsx("label", { className: "uix-label", htmlFor: inputId, children: inputLabel }),
+    /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: inputId, children: inputLabel }),
     /* @__PURE__ */ jsx(Input, { id: inputId, value, placeholder, "aria-describedby": error ? errorId : void 0, invalid: error != null, onChange: (event) => setValue(event.currentTarget.value), autoFocus: true }),
     error != null && /* @__PURE__ */ jsx("div", { id: errorId, className: "uix-field__error", role: "alert", children: error }),
     /* @__PURE__ */ jsxs("div", { className: "uix-dialog__footer uix-prompt__actions", children: [
@@ -51,5 +211,6 @@ function PromptDialog({ open, title, description, inputLabel, defaultValue = "",
 }
 export {
   ConfirmDialog,
+  Popconfirm,
   PromptDialog
 };

package/dist/components/Drawer.d.ts

@@ -12,10 +12,15 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
      * can't discard it; Escape and the close button still close. Default `true`.
      */
     dismissOnBackdrop?: boolean;
+    /**
+     * Edge the drawer slides from (HAR-1351). `end` (default) is the side sheet; `start` is
+     * the phone navigation drawer; `bottom` is a bottom sheet capped at 85% of the viewport.
+     */
+    side?: 'end' | 'start' | 'bottom';
     title?: ReactNode;
     children?: ReactNode;
     footer?: ReactNode;
 }
-declare function Drawer({ open, onClose, dismissOnBackdrop, title, children, footer, closeLabel, className, onClick, ...rest }: DrawerProps): react.JSX.Element;
+declare function Drawer({ open, onClose, dismissOnBackdrop, side, title, children, footer, closeLabel: closeLabelProp, className, onClick, ...rest }: DrawerProps): react.JSX.Element;
 
 export { Drawer, type DrawerProps };

package/dist/components/Drawer.js

@@ -2,13 +2,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
 import { useDialog } from "../hooks/useDialog.js";
 import { backdropDismiss } from "../hooks/backdropDismiss.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Drawer({ open, onClose, dismissOnBackdrop = true, title, children, footer, closeLabel = "Close drawer", className, onClick, ...rest }) {
+function Drawer({ open, onClose, dismissOnBackdrop = true, side = "end", title, children, footer, closeLabel: closeLabelProp, className, onClick, ...rest }) {
+  const uixLabels = useUixLabels();
+  const closeLabel = closeLabelProp ?? uixLabels.drawer?.close ?? "Close drawer";
   const ref = useDialog(open, onClose);
   const titleId = useId();
-  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-drawer", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: backdropDismiss(onClose, onClick, dismissOnBackdrop), children: [
+  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-drawer", side !== "end" && `uix-drawer--${side}`, className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: backdropDismiss(onClose, onClick, dismissOnBackdrop), children: [
     (title != null || onClose) && /* @__PURE__ */ jsxs("div", { className: "uix-drawer__header", children: [
       title && /* @__PURE__ */ jsx("h2", { id: titleId, style: { fontWeight: 600, fontSize: "var(--uix-text-h3)", fontFamily: "inherit", letterSpacing: "inherit", lineHeight: "inherit" }, children: title }),
       onClose && /* @__PURE__ */ jsx(

package/dist/components/EmojiPicker.d.ts

@@ -54,6 +54,9 @@ declare const EMOJI_GRID_COLUMNS = 8;
  * Emoji picker in a native popover: search, quick picks, recently used and the
  * Unicode categories, with names in English or German. The emoji dataset loads on
  * first open. The grid is one tab stop; arrow keys, Home and End move within it.
+ * The picker is one size in every state (loading, searching, failed), so it keeps the
+ * side it opened on; it stays attached to its trigger while the page scrolls and
+ * closes once the trigger is scrolled out of view.
  */
 declare function EmojiPicker({ onSelect, trigger, labels: labelOverrides, locale, quickPicks, loadData, recentStorageKey, placement, onOpenChange, className, emojiImageBaseUrl, }: EmojiPickerProps): react.JSX.Element;
 

package/dist/components/EmojiPicker.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cloneElement, isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { cloneElement, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { Popover } from "./Popover.js";
 import {
@@ -23,6 +23,14 @@ const DEFAULT_EMOJI_PICKER_LABELS = {
   loadFailed: "Emoji could not be loaded."
 };
 const EMOJI_GRID_COLUMNS = 8;
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+function revealInGrid(grid, cell) {
+  const g = grid.getBoundingClientRect();
+  const c = cell.getBoundingClientRect();
+  const top = g.top + (parseFloat(getComputedStyle(grid).scrollPaddingTop) || 0);
+  if (c.top < top) grid.scrollTop -= top - c.top;
+  else if (c.bottom > g.bottom) grid.scrollTop += c.bottom - g.bottom;
+}
 function EmojiPicker({
   onSelect,
   trigger,
@@ -44,6 +52,8 @@ function EmojiPicker({
   const searchRef = useRef(null);
   const gridRef = useRef(null);
   const pointerWasOpen = useRef(null);
+  const closedByAnchor = useRef(false);
+  const pendingJump = useRef(null);
   const [open, setOpen] = useState(false);
   const [data, setData] = useState(null);
   const [failed, setFailed] = useState(false);
@@ -67,10 +77,14 @@ function EmojiPicker({
       setOpen(nowOpen);
       onOpenChange?.(nowOpen);
       if (nowOpen) {
+        closedByAnchor.current = false;
+        pendingJump.current = null;
         setRecent(readRecentEmoji(recentStorageKey));
         setQuery("");
         setActive(0);
-        requestAnimationFrame(() => searchRef.current?.focus());
+        requestAnimationFrame(() => searchRef.current?.focus({ preventScroll: true }));
+      } else if (closedByAnchor.current) {
+        closedByAnchor.current = false;
       } else if (el.contains(document.activeElement) || document.activeElement === document.body) {
         focusTrigger();
       }
@@ -102,10 +116,7 @@ function EmojiPicker({
     const el = popoverEl();
     if (el && isOpen(el)) el.hidePopover();
   };
-  const sections = useMemo(() => {
-    if (query.trim()) {
-      return data ? [{ key: "results", title: labels.search, emojis: searchEmoji(data, query).map((e) => e.emoji) }] : [];
-    }
+  const browseSections = useMemo(() => {
     const list = [];
     if (quickPicks?.length) list.push({ key: "quick", title: labels.quickPicks, emojis: [...new Set(quickPicks)] });
     if (recent.length) list.push({ key: "recent", title: labels.recent, emojis: recent });
@@ -115,7 +126,11 @@ function EmojiPicker({
       });
     }
     return list;
-  }, [query, data, quickPicks, recent, labels.search, labels.quickPicks, labels.recent]);
+  }, [data, quickPicks, recent, labels.quickPicks, labels.recent]);
+  const sections = useMemo(() => {
+    if (!query.trim()) return browseSections;
+    return data ? [{ key: "results", title: labels.search, emojis: searchEmoji(data, query).map((e) => e.emoji) }] : [];
+  }, [query, data, browseSections, labels.search]);
   const flat = useMemo(() => sections.flatMap((s) => s.emojis), [sections]);
   const sectionStart = useMemo(() => {
     const starts = /* @__PURE__ */ new Map();
@@ -132,13 +147,43 @@ function EmojiPicker({
     onSelect(emoji);
     hide();
   };
-  const focusCell = useCallback((index) => {
+  const focusCell = useCallback((index, reveal = true) => {
     setActive(index);
     const find = () => gridRef.current?.querySelector(`[data-emoji-index="${index}"]`);
+    const move = (cell2) => {
+      cell2.focus({ preventScroll: true });
+      if (reveal && gridRef.current) revealInGrid(gridRef.current, cell2);
+    };
     const cell = find();
-    if (cell) cell.focus();
-    else requestAnimationFrame(() => find()?.focus());
+    if (cell) move(cell);
+    else requestAnimationFrame(() => {
+      const later = find();
+      if (later) move(later);
+    });
   }, []);
+  const showSection = (key) => {
+    const grid = gridRef.current;
+    const section = grid?.querySelector(`[data-section="${key}"]`);
+    if (!grid || !section) return;
+    grid.scrollTop += section.getBoundingClientRect().top - grid.getBoundingClientRect().top;
+    const start = sectionStart.get(key);
+    if (start !== void 0) focusCell(start, false);
+  };
+  const onCategory = (key) => {
+    if (!query.trim()) {
+      showSection(key);
+      return;
+    }
+    pendingJump.current = key;
+    setQuery("");
+    setActive(0);
+  };
+  useIsomorphicLayoutEffect(() => {
+    const key = pendingJump.current;
+    if (key === null || query.trim()) return;
+    pendingJump.current = null;
+    showSection(key);
+  }, [query, sections]);
   const onGridKeyDown = (event) => {
     const target = event.target;
     const index = Number(target.dataset.emojiIndex ?? -1);
@@ -146,7 +191,7 @@ function EmojiPicker({
     const next = emojiGridMove(index, event.key, flat.length, EMOJI_GRID_COLUMNS);
     if (event.key === "ArrowUp" && next === null) {
       event.preventDefault();
-      searchRef.current?.focus();
+      searchRef.current?.focus({ preventScroll: true });
       return;
     }
     if (next === null) return;
@@ -202,6 +247,10 @@ function EmojiPicker({
         className: "uix-emoji-picker-popover",
         role: "dialog",
         "aria-label": labels.dialog,
+        closeWhenAnchorHidden: true,
+        onAnchorHidden: () => {
+          closedByAnchor.current = true;
+        },
         children: open ? /* @__PURE__ */ jsxs("div", { className: "uix-emoji-picker uix-emoji-picker--full", lang: locale, children: [
           /* @__PURE__ */ jsx(
             "input",
@@ -221,50 +270,56 @@ function EmojiPicker({
               spellCheck: false
             }
           ),
-          data && !query.trim() ? /* @__PURE__ */ jsx("div", { className: "uix-emoji-picker__nav", role: "group", "aria-label": labels.categories, children: sections.map((section) => /* @__PURE__ */ jsx(
-            "button",
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              type: "button",
-              className: "uix-emoji-picker__nav-btn",
-              "aria-label": section.title,
-              title: section.title,
-              onClick: () => {
-                const start = section.emojis.length ? sectionStart.get(section.key) ?? -1 : -1;
-                gridRef.current?.querySelector(`[data-section="${section.key}"]`)?.scrollIntoView({ block: "start" });
-                if (start >= 0) focusCell(start);
-              },
-              children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: section.emojis[0] ? renderEmoji(section.emojis[0]) : null })
-            },
-            section.key
-          )) }) : null,
-          /* @__PURE__ */ jsx("div", { className: "uix-emoji-picker__grid", ref: gridRef, onKeyDown: onGridKeyDown, children: sections.map((section) => {
-            const start = offset;
-            offset += section.emojis.length;
-            if (!section.emojis.length) return null;
-            const headingId = `${id}-${section.key}`;
-            return /* @__PURE__ */ jsxs("section", { className: "uix-emoji-picker__section", "data-section": section.key, "aria-labelledby": headingId, children: [
-              /* @__PURE__ */ jsx("h3", { id: headingId, className: "uix-emoji-picker__heading", children: section.title }),
-              /* @__PURE__ */ jsx("div", { className: "uix-emoji-picker__cells", role: "group", "aria-labelledby": headingId, children: section.emojis.map((emoji, i) => {
-                const index = start + i;
-                return /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "uix-emoji-picker__btn",
-                    "data-emoji-index": index,
-                    tabIndex: index === activeIndex ? 0 : -1,
-                    "aria-label": names?.get(emoji) ?? emoji,
-                    title: names?.get(emoji),
-                    onClick: () => choose(emoji),
-                    onFocus: () => setActive(index),
-                    children: renderEmoji(emoji)
-                  },
-                  `${section.key}-${emoji}`
-                );
-              }) })
-            ] }, section.key);
-          }) }),
-          /* @__PURE__ */ jsx("p", { className: "uix-emoji-picker__status", role: "status", children: status })
+              className: "uix-emoji-picker__nav",
+              role: data ? "group" : void 0,
+              "aria-label": data ? labels.categories : void 0,
+              children: data ? browseSections.map((section) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "uix-emoji-picker__nav-btn",
+                  "aria-label": section.title,
+                  title: section.title,
+                  onClick: () => onCategory(section.key),
+                  children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: section.emojis[0] ? renderEmoji(section.emojis[0]) : null })
+                },
+                section.key
+              )) : null
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "uix-emoji-picker__grid", ref: gridRef, onKeyDown: onGridKeyDown, children: [
+            sections.map((section) => {
+              const start = offset;
+              offset += section.emojis.length;
+              if (!section.emojis.length) return null;
+              const headingId = `${id}-${section.key}`;
+              return /* @__PURE__ */ jsxs("section", { className: "uix-emoji-picker__section", "data-section": section.key, "aria-labelledby": headingId, children: [
+                /* @__PURE__ */ jsx("h3", { id: headingId, className: "uix-emoji-picker__heading", children: section.title }),
+                /* @__PURE__ */ jsx("div", { className: "uix-emoji-picker__cells", role: "group", "aria-labelledby": headingId, children: section.emojis.map((emoji, i) => {
+                  const index = start + i;
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "uix-emoji-picker__btn",
+                      "data-emoji-index": index,
+                      tabIndex: index === activeIndex ? 0 : -1,
+                      "aria-label": names?.get(emoji) ?? emoji,
+                      title: names?.get(emoji),
+                      onClick: () => choose(emoji),
+                      onFocus: () => setActive(index),
+                      children: renderEmoji(emoji)
+                    },
+                    `${section.key}-${emoji}`
+                  );
+                }) })
+              ] }, section.key);
+            }),
+            /* @__PURE__ */ jsx("p", { className: "uix-emoji-picker__status", role: "status", children: status })
+          ] })
         ] }) : null
       }
     )

package/dist/components/Kbd.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface KbdProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+/** One keyboard key over `.uix-kbd` (HAR-1361; TENSOR C14, MOTUS B-A16). */
+declare function Kbd({ className, children, ...props }: KbdProps): react.JSX.Element;
+type KbdPlatform = 'mac' | 'other';
+interface KbdComboProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /**
+     * Keys in order, e.g. `['Mod', 'K']`. `Mod` is ⌘ on Apple and Ctrl elsewhere; `Shift`,
+     * `Alt`, `Enter`, `Escape`, `Backspace`, `Tab` and the arrows get platform glyphs.
+     */
+    keys: string[];
+    /** Fix the platform (tests, docs). Default: detected after mount; the server renders `other`. */
+    platform?: KbdPlatform;
+    /** Spoken names for keys, e.g. `{ Mod: 'Steuerung' }`; the glyphs stay. */
+    keyLabels?: Partial<Record<string, string>>;
+}
+/**
+ * A shortcut such as ⌘K / Ctrl+K. Screen readers hear the key names ("Command+K"), not the
+ * glyphs. The platform is resolved at display time, after mount, so server and client agree.
+ */
+declare function KbdCombo({ keys, platform, keyLabels, className, ...props }: KbdComboProps): react.JSX.Element;
+
+export { Kbd, KbdCombo, type KbdComboProps, type KbdPlatform, type KbdProps };

package/dist/components/Kbd.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cx } from "../cx.js";
+function Kbd({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("kbd", { className: cx("uix-kbd", className), ...props, children });
+}
+const KEYS = {
+  Mod: { mac: ["\u2318", "Command"], other: ["Ctrl", "Control"] },
+  Ctrl: { mac: ["\u2303", "Control"], other: ["Ctrl", "Control"] },
+  Shift: { mac: ["\u21E7", "Shift"], other: ["Shift", "Shift"] },
+  Alt: { mac: ["\u2325", "Option"], other: ["Alt", "Alt"] },
+  Enter: { mac: ["\u21B5", "Enter"], other: ["Enter", "Enter"] },
+  Escape: { mac: ["Esc", "Escape"], other: ["Esc", "Escape"] },
+  Backspace: { mac: ["\u232B", "Backspace"], other: ["Backspace", "Backspace"] },
+  Tab: { mac: ["\u21E5", "Tab"], other: ["Tab", "Tab"] },
+  ArrowUp: { mac: ["\u2191", "Up arrow"], other: ["\u2191", "Up arrow"] },
+  ArrowDown: { mac: ["\u2193", "Down arrow"], other: ["\u2193", "Down arrow"] },
+  ArrowLeft: { mac: ["\u2190", "Left arrow"], other: ["\u2190", "Left arrow"] },
+  ArrowRight: { mac: ["\u2192", "Right arrow"], other: ["\u2192", "Right arrow"] }
+};
+const detectPlatform = () => {
+  if (typeof navigator === "undefined") return "other";
+  const nav = navigator;
+  return /mac|iphone|ipad|ipod/i.test(nav.userAgentData?.platform ?? navigator.platform ?? "") ? "mac" : "other";
+};
+function KbdCombo({ keys, platform, keyLabels, className, ...props }) {
+  const [detected, setDetected] = useState("other");
+  useEffect(() => {
+    if (!platform) setDetected(detectPlatform());
+  }, [platform]);
+  const active = platform ?? detected;
+  const parts = keys.map((key) => {
+    const known = KEYS[key]?.[active];
+    return { glyph: known?.[0] ?? key, spoken: keyLabels?.[key] ?? known?.[1] ?? key };
+  });
+  return /* @__PURE__ */ jsxs("span", { className: cx("uix-kbd-combo", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: parts.map((p) => p.spoken).join("+") }),
+    /* @__PURE__ */ jsx("span", { className: "uix-kbd-combo__keys", "aria-hidden": "true", children: parts.map((p, i) => /* @__PURE__ */ jsx("kbd", { className: "uix-kbd", children: p.glyph }, `${keys[i]}-${i}`)) })
+  ] });
+}
+export {
+  Kbd,
+  KbdCombo
+};

package/dist/components/Menu.d.ts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { ReactElement, ReactNode } from 'react';
+import { UixRenderLink } from '../link.js';
+import { Placement } from '../overlay-position.js';
+
+interface MenuProps {
+    /**
+     * The menu button, usually a `Button`. It receives `aria-haspopup="menu"`,
+     * `aria-expanded`, `aria-controls` and the open/keyboard handlers.
+     */
+    trigger: ReactElement;
+    /** `MenuItem`, `MenuGroup` and `MenuSeparator`. */
+    children?: ReactNode;
+    /** Controlled open state; pair with `onOpenChange`. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Accessible name of the menu. Default: labelled by the trigger. */
+    label?: string;
+    placement?: Placement;
+    className?: string;
+}
+/**
+ * A menu button with an APG menu (HAR-1359; TENSOR C1, MOTUS B-A14): ↓/↑ move, Home/End,
+ * type-to-find, Enter/Space activate, Esc and Tab close, focus returns to the trigger.
+ * The surface is the kit `Popover`, so it escapes clipping containers.
+ */
+declare function Menu({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, label, placement, className }: MenuProps): react.JSX.Element;
+interface MenuItemProps {
+    children?: ReactNode;
+    /** Runs on click, Enter or Space; the menu then closes and focus returns to the trigger. */
+    onSelect?: () => void;
+    /** A link item; it navigates instead of running `onSelect`. */
+    href?: string;
+    renderLink?: UixRenderLink;
+    icon?: ReactNode;
+    /** Shortcut hint at the end of the row, e.g. `<KbdCombo keys={['Mod', 'D']} />`. */
+    shortcut?: ReactNode;
+    tone?: 'default' | 'danger';
+    disabled?: boolean;
+    className?: string;
+}
+declare function MenuItem({ children, onSelect, href, renderLink, icon, shortcut, tone, disabled, className }: MenuItemProps): react.JSX.Element;
+interface MenuGroupProps {
+    label: ReactNode;
+    children?: ReactNode;
+}
+declare function MenuGroup({ label, children }: MenuGroupProps): react.JSX.Element;
+declare function MenuSeparator(): react.JSX.Element;
+
+export { Menu, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator };