impact-nova 1.5.6 → 1.5.7

package/dist/components/ui/command-palette/command-palette.js

@@ -1,12 +1,12 @@
-import { jsx as e, jsxs as d, Fragment as J } from "react/jsx-runtime";
+import { jsx as e, jsxs as m, Fragment as ae } from "react/jsx-runtime";
 import * as r from "react";
-import * as k from "@radix-ui/react-dialog";
-import { Search as D } from "lucide-react";
-import { cn as i } from "../../../lib/utils.js";
-import { useCommandPalette as W } from "./command-palette-context.js";
-import { Kbd as v } from "./kbd.js";
-import { fuzzyFilter as X, keybindingToSymbols as Y } from "./utils.js";
-const O = r.createContext({
+import * as v from "@radix-ui/react-dialog";
+import { Search as $ } from "lucide-react";
+import { cn as d } from "../../../lib/utils.js";
+import { useCommandPalette as ne } from "./command-palette-context.js";
+import { Kbd as P } from "./kbd.js";
+import { fuzzyFilter as se, keybindingToSymbols as re } from "./utils.js";
+const E = r.createContext({
   query: "",
   setQuery: () => {
   },
@@ -17,114 +17,142 @@ const O = r.createContext({
   onExecute: () => {
   }
 });
-function Z({
-  className: s,
+function oe({
+  className: o,
   children: a,
-  commands: o,
-  placeholder: u = "Type a command or search...",
-  onCommandExecute: f,
-  onOpenChange: y
+  commands: n,
+  placeholder: i = "Type a command or search...",
+  emptyTitle: c = "No results found",
+  emptyDescription: h = "Try a different search term",
+  recentGroupLabel: x = "Recently Used",
+  defaultGroupLabel: g = "Commands",
+  navigateLabel: R = "Navigate",
+  runLabel: S = "Run",
+  closeLabel: z = "Close",
+  onCommandExecute: M,
+  onOpenChange: J
 }) {
-  const { open: h, setOpen: P, getPaletteCommands: T, getEffectiveKeybinding: B, registry: C } = W(), [b, I] = r.useState(""), [N, g] = r.useState(0), E = r.useRef(null), R = r.useRef(null), S = r.useMemo(() => o ?? T(), [o, h]), z = r.useMemo(() => {
-    const t = X(
-      S,
+  const { open: I, setOpen: W, getPaletteCommands: X, getEffectiveKeybinding: Y, registry: N } = ne(), [b, D] = r.useState(""), [w, C] = r.useState(0), O = r.useRef(null), A = r.useRef(null), F = r.useMemo(() => n ?? X(), [n, I]), j = r.useMemo(() => {
+    const t = se(
+      F,
       b,
-      (n) => `${n.category ? n.category + ": " : ""}${n.label}${n.description ? " " + n.description : ""}`
+      (s) => `${s.category ? s.category + ": " : ""}${s.label}${s.description ? " " + s.description : ""}`
     );
     if (!b.trim()) {
-      const n = C.getRecentCommandIds(), x = new Set(n), l = [], m = [];
+      const s = N.getRecentCommandIds(), y = new Set(s), l = [], u = [];
       for (const p of t)
-        x.has(p.item.id) ? l.push(p) : m.push(p);
-      return l.sort((p, _) => n.indexOf(p.item.id) - n.indexOf(_.item.id)), [...l, ...m];
+        y.has(p.item.id) ? l.push(p) : u.push(p);
+      return l.sort((p, te) => s.indexOf(p.item.id) - s.indexOf(te.item.id)), [...l, ...u];
     }
     return t;
-  }, [S, b, C]), c = r.useMemo(() => z.map((t) => t.item), [z]), Q = r.useMemo(() => {
-    const t = /* @__PURE__ */ new Map(), n = new Set(C.getRecentCommandIds());
+  }, [F, b, N]), f = r.useMemo(() => j.map((t) => t.item), [j]), Z = r.useMemo(() => {
+    const t = /* @__PURE__ */ new Map(), s = new Set(N.getRecentCommandIds());
     if (b.trim())
-      for (const x of c) {
-        const l = x.category || "Commands";
-        t.has(l) || t.set(l, []), t.get(l).push(x);
+      for (const y of f) {
+        const l = y.category || g;
+        t.has(l) || t.set(l, []), t.get(l).push(y);
       }
     else {
-      const x = c.filter((m) => n.has(m.id));
-      x.length > 0 && t.set("Recently Used", x);
-      const l = c.filter((m) => !n.has(m.id));
-      for (const m of l) {
-        const p = m.category || "Commands";
-        t.has(p) || t.set(p, []), t.get(p).push(m);
+      const y = f.filter((u) => s.has(u.id));
+      y.length > 0 && t.set(x, y);
+      const l = f.filter((u) => !s.has(u.id));
+      for (const u of l) {
+        const p = u.category || g;
+        t.has(p) || t.set(p, []), t.get(p).push(u);
       }
     }
     return t;
-  }, [c, b, C]);
+  }, [f, b, N, x, g]);
   r.useEffect(() => {
-    h && (I(""), g(0), requestAnimationFrame(() => {
-      E.current?.focus();
+    I && (D(""), C(0), requestAnimationFrame(() => {
+      O.current?.focus();
     }));
-  }, [h]);
-  const M = (t) => {
-    P(t), y?.(t);
-  }, w = r.useCallback((t) => {
-    t.handler(), C.addRecentCommand(t.id), f?.(t), M(!1);
-  }, [C, f]), U = r.useCallback((t) => {
+  }, [I]);
+  const q = (t) => {
+    W(t), J?.(t);
+  }, k = r.useCallback((t) => {
+    t.handler(), N.addRecentCommand(t.id), M?.(t), q(!1);
+  }, [N, M]), G = r.useCallback((t) => {
     switch (t.key) {
       case "ArrowDown": {
-        t.preventDefault(), g((n) => Math.min(n + 1, c.length - 1));
+        t.preventDefault(), C((s) => Math.min(s + 1, f.length - 1));
         break;
       }
       case "ArrowUp": {
-        t.preventDefault(), g((n) => Math.max(n - 1, 0));
+        t.preventDefault(), C((s) => Math.max(s - 1, 0));
         break;
       }
       case "Enter": {
         t.preventDefault();
-        const n = c[N];
-        n && w(n);
+        const s = f[w];
+        s && k(s);
         break;
       }
       case "Home": {
-        t.preventDefault(), g(0);
+        t.preventDefault(), C(0);
         break;
       }
       case "End": {
-        t.preventDefault(), g(Math.max(c.length - 1, 0));
+        t.preventDefault(), C(Math.max(f.length - 1, 0));
         break;
       }
     }
-  }, [c, N, w]);
+  }, [f, w, k]);
   r.useEffect(() => {
-    g(0);
+    C(0);
   }, [b]), r.useEffect(() => {
-    const t = R.current;
+    const t = A.current;
     if (!t) return;
-    const n = t.querySelector('[data-selected="true"]');
-    n && n.scrollIntoView({ block: "nearest" });
-  }, [N]);
-  const H = r.useMemo(
+    const s = t.querySelector('[data-selected="true"]');
+    s && s.scrollIntoView({ block: "nearest" });
+  }, [w]);
+  const L = r.useMemo(
     () => ({
       query: b,
-      setQuery: I,
-      selectedIndex: N,
-      setSelectedIndex: g,
-      flatItems: c,
-      onExecute: w
+      setQuery: D,
+      selectedIndex: w,
+      setSelectedIndex: C,
+      flatItems: f,
+      onExecute: k,
+      placeholder: i,
+      emptyTitle: c,
+      emptyDescription: h,
+      recentGroupLabel: x,
+      defaultGroupLabel: g,
+      navigateLabel: R,
+      runLabel: S,
+      closeLabel: z
     }),
-    [b, N, c, w]
-  ), V = r.Children.count(a) > 0;
-  return /* @__PURE__ */ e(k.Root, { open: h, onOpenChange: M, children: /* @__PURE__ */ d(k.Portal, { children: [
+    [
+      b,
+      w,
+      f,
+      k,
+      i,
+      c,
+      h,
+      x,
+      g,
+      R,
+      S,
+      z
+    ]
+  ), ee = r.Children.count(a) > 0;
+  return /* @__PURE__ */ e(v.Root, { open: I, onOpenChange: q, children: /* @__PURE__ */ m(v.Portal, { children: [
     /* @__PURE__ */ e(
-      k.Overlay,
+      v.Overlay,
       {
         className: "fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
       }
     ),
-    /* @__PURE__ */ d(
-      k.Content,
+    /* @__PURE__ */ m(
+      v.Content,
       {
         "aria-describedby": void 0,
         "data-command-palette": !0,
         "data-component": "command-palette",
-        onKeyDown: U,
-        className: i(
+        onKeyDown: G,
+        className: d(
           "fixed left-[50%] top-[20%] z-50 w-full max-w-[640px] -translate-x-1/2",
           "rounded-xl border border-[#d1d5db] bg-white shadow-2xl overflow-hidden",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -133,78 +161,78 @@ function Z({
           // Pin translate-x at -50% during animation so it stays centered (no horizontal slide)
           "data-[state=open]:slide-in-from-left-1/2 data-[state=closed]:slide-out-to-left-1/2",
           "duration-150",
-          s
+          o
         ),
         style: { transformOrigin: "top center" },
         children: [
-          /* @__PURE__ */ e(k.Title, { className: "sr-only", children: "Command Palette" }),
-          /* @__PURE__ */ e(O.Provider, { value: H, children: V ? a : /* @__PURE__ */ d(J, { children: [
+          /* @__PURE__ */ e(v.Title, { className: "sr-only", children: "Command Palette" }),
+          /* @__PURE__ */ e(E.Provider, { value: L, children: ee ? a : /* @__PURE__ */ m(ae, { children: [
             /* @__PURE__ */ e(
-              A,
+              K,
               {
-                ref: E,
-                placeholder: u
+                ref: O,
+                placeholder: i
               }
             ),
-            /* @__PURE__ */ e(F, { ref: R, children: c.length === 0 ? /* @__PURE__ */ e(G, {}) : Array.from(Q.entries()).map(([t, n], x) => /* @__PURE__ */ d(r.Fragment, { children: [
-              x > 0 && /* @__PURE__ */ e(K, {}),
-              /* @__PURE__ */ e(j, { heading: t, children: n.map((l) => {
-                const m = c.indexOf(l), p = B(l.id);
+            /* @__PURE__ */ e(T, { ref: A, children: f.length === 0 ? /* @__PURE__ */ e(H, {}) : Array.from(Z.entries()).map(([t, s], y) => /* @__PURE__ */ m(r.Fragment, { children: [
+              y > 0 && /* @__PURE__ */ e(V, {}),
+              /* @__PURE__ */ e(B, { heading: t, children: s.map((l) => {
+                const u = f.indexOf(l), p = Y(l.id);
                 return /* @__PURE__ */ e(
-                  q,
+                  Q,
                   {
                     command: l,
-                    isSelected: m === N,
-                    onSelect: () => w(l),
-                    onMouseEnter: () => g(m),
+                    isSelected: u === w,
+                    onSelect: () => k(l),
+                    onMouseEnter: () => C(u),
                     keybinding: p
                   },
                   l.id
                 );
               }) })
             ] }, t)) }),
-            /* @__PURE__ */ e(L, {})
+            /* @__PURE__ */ e(_, {})
           ] }) })
         ]
       }
     )
   ] }) });
 }
-Z.displayName = "CommandPalette";
-const A = r.forwardRef(
-  ({ className: s, placeholder: a, onValueChange: o, ...u }, f) => {
-    const { query: y, setQuery: h } = r.useContext(O);
-    return /* @__PURE__ */ d(
+oe.displayName = "CommandPalette";
+const K = r.forwardRef(
+  ({ className: o, placeholder: a, onValueChange: n, ...i }, c) => {
+    const { query: h, setQuery: x } = r.useContext(E);
+    return /* @__PURE__ */ m(
       "div",
       {
-        className: i(
+        className: d(
           "flex items-center gap-3 border-b border-[#e5e7eb] px-4",
-          s
+          o
         ),
         "data-command-palette-input": !0,
         children: [
-          /* @__PURE__ */ e(D, { className: "h-4 w-4 shrink-0 text-[#9ca3af]" }),
+          /* @__PURE__ */ e($, { className: "h-4 w-4 shrink-0 text-[#9ca3af]" }),
           /* @__PURE__ */ e(
             "input",
             {
-              ref: f,
-              value: y,
-              onChange: (P) => {
-                h(P.target.value), o?.(P.target.value);
+              ref: c,
+              value: h,
+              onChange: (g) => {
+                x(g.target.value), n?.(g.target.value);
               },
               placeholder: a,
               autoComplete: "off",
               autoCorrect: "off",
               spellCheck: !1,
-              className: i(
+              className: d(
                 "flex h-12 w-full bg-transparent py-3 text-sm font-medium outline-none",
                 "placeholder:text-[#9ca3af]"
               ),
-              ...u
+              ...i
             }
           ),
           /* @__PURE__ */ e(
-            v,
+            P,
             {
               keybinding: { key: "Escape" },
               size: "sm",
@@ -217,186 +245,188 @@ const A = r.forwardRef(
     );
   }
 );
-A.displayName = "CommandPaletteInput";
-const F = r.forwardRef(({ className: s, children: a, ...o }, u) => /* @__PURE__ */ e(
+K.displayName = "CommandPaletteInput";
+const T = r.forwardRef(({ className: o, children: a, ...n }, i) => /* @__PURE__ */ e(
   "div",
   {
-    ref: u,
+    ref: i,
     role: "listbox",
     "data-command-palette-list": !0,
-    className: i(
+    className: d(
       "max-h-[360px] overflow-y-auto overscroll-contain py-1",
-      s
+      o
     ),
-    ...o,
+    ...n,
     children: a
   }
 ));
-F.displayName = "CommandPaletteList";
-const j = r.forwardRef(
-  ({ className: s, heading: a, children: o, ...u }, f) => /* @__PURE__ */ d(
+T.displayName = "CommandPaletteList";
+const B = r.forwardRef(
+  ({ className: o, heading: a, children: n, ...i }, c) => /* @__PURE__ */ m(
     "div",
     {
-      ref: f,
+      ref: c,
       role: "group",
       "aria-label": a,
       "data-command-palette-group": !0,
-      className: i("py-1", s),
-      ...u,
+      className: d("py-1", o),
+      ...i,
       children: [
         a && /* @__PURE__ */ e("div", { className: "px-4 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-[#9ca3af]", children: a }),
-        o
+        n
       ]
     }
   )
 );
-j.displayName = "CommandPaletteGroup";
-const ee = {
+B.displayName = "CommandPaletteGroup";
+const ie = {
   browser: "Browser",
   "ag-grid": "AG Grid",
   system: "System"
 };
-function te({ source: s, isSelected: a }) {
-  if (!s || s === "user") return null;
-  const o = ee[s];
-  return o ? /* @__PURE__ */ e(
+function le({ source: o, isSelected: a }) {
+  if (!o || o === "user") return null;
+  const n = ie[o];
+  return n ? /* @__PURE__ */ e(
     "span",
     {
-      className: i(
+      className: d(
         "shrink-0 rounded px-1.5 py-px text-[9px] font-medium leading-tight tracking-wide",
         a ? "text-white/50" : "text-[#9ca3af] border border-[#e5e7eb]"
       ),
-      children: o
+      children: n
     }
   ) : null;
 }
-const q = r.forwardRef(
-  ({ className: s, command: a, isSelected: o, onSelect: u, keybinding: f, ...y }, h) => /* @__PURE__ */ d(
+const Q = r.forwardRef(
+  ({ className: o, command: a, isSelected: n, onSelect: i, keybinding: c, ...h }, x) => /* @__PURE__ */ m(
     "div",
     {
-      ref: h,
+      ref: x,
       role: "option",
-      "aria-selected": o,
-      "data-selected": o,
+      "aria-selected": n,
+      "data-selected": n,
       "data-command-palette-item": !0,
       "data-command-id": a.id,
-      onClick: u,
-      className: i(
+      onClick: i,
+      className: d(
         "flex items-center gap-3 cursor-pointer px-4 py-2 text-sm",
         "transition-colors duration-75",
-        o ? "bg-[#4259ee] text-white" : "text-[#374151] hover:bg-[#f3f4f6]",
-        s
+        n ? "bg-[#4259ee] text-white" : "text-[#374151] hover:bg-[#f3f4f6]",
+        o
       ),
-      ...y,
+      ...h,
       children: [
-        a.icon && /* @__PURE__ */ e("span", { className: i(
+        a.icon && /* @__PURE__ */ e("span", { className: d(
           "flex h-4 w-4 shrink-0 items-center justify-center",
-          o ? "text-white" : "text-[#6b7280]"
+          n ? "text-white" : "text-[#6b7280]"
         ), children: a.icon }),
-        /* @__PURE__ */ d("div", { className: "flex flex-1 flex-col min-w-0", children: [
+        /* @__PURE__ */ m("div", { className: "flex flex-1 flex-col min-w-0", children: [
           /* @__PURE__ */ e("span", { className: "truncate font-medium", children: a.label }),
-          a.description && /* @__PURE__ */ e("span", { className: i(
+          a.description && /* @__PURE__ */ e("span", { className: d(
             "truncate text-xs",
-            o ? "text-white/70" : "text-[#9ca3af]"
+            n ? "text-white/70" : "text-[#9ca3af]"
           ), children: a.description })
         ] }),
-        /* @__PURE__ */ e(te, { source: a.source, isSelected: o }),
-        f && /* @__PURE__ */ e($, { keybinding: f, isSelected: o })
+        /* @__PURE__ */ e(le, { source: a.source, isSelected: n }),
+        c && /* @__PURE__ */ e(U, { keybinding: c, isSelected: n })
       ]
     }
   )
 );
-q.displayName = "CommandPaletteItem";
-function $({ keybinding: s, isSelected: a, className: o, ...u }) {
-  const f = Y(s);
+Q.displayName = "CommandPaletteItem";
+function U({ keybinding: o, isSelected: a, className: n, ...i }) {
+  const c = re(o);
   return /* @__PURE__ */ e(
     "span",
     {
-      className: i("ml-auto flex items-center gap-0.5 shrink-0", o),
+      className: d("ml-auto flex items-center gap-0.5 shrink-0", n),
       "data-command-palette-shortcut": !0,
-      ...u,
-      children: f.map((y, h) => /* @__PURE__ */ e(
+      ...i,
+      children: c.map((h, x) => /* @__PURE__ */ e(
         "kbd",
         {
-          className: i(
+          className: d(
             "inline-flex min-w-[20px] items-center justify-center rounded px-1 h-[20px] text-[10px] font-mono leading-none",
             a ? "bg-white/20 text-white border border-white/30" : "bg-[#f4f5f7] text-[#6b7280] border border-[#d1d5db]"
           ),
-          children: y
+          children: h
         },
-        `${y}-${h}`
+        `${h}-${x}`
       ))
     }
   );
 }
-$.displayName = "CommandPaletteShortcut";
-function G({ className: s, ...a }) {
-  return /* @__PURE__ */ d(
+U.displayName = "CommandPaletteShortcut";
+function H({ className: o, ...a }) {
+  const { emptyTitle: n, emptyDescription: i } = r.useContext(E);
+  return /* @__PURE__ */ m(
     "div",
     {
       "data-command-palette-empty": !0,
-      className: i(
+      className: d(
         "flex flex-col items-center justify-center py-12 text-center text-sm text-[#9ca3af]",
-        s
+        o
       ),
       ...a,
       children: [
-        /* @__PURE__ */ e(D, { className: "h-8 w-8 mb-3 text-[#d1d5db]" }),
-        /* @__PURE__ */ e("p", { className: "font-medium", children: "No results found" }),
-        /* @__PURE__ */ e("p", { className: "text-xs mt-1", children: "Try a different search term" })
+        /* @__PURE__ */ e($, { className: "h-8 w-8 mb-3 text-[#d1d5db]" }),
+        /* @__PURE__ */ e("p", { className: "font-medium", children: n }),
+        /* @__PURE__ */ e("p", { className: "text-xs mt-1", children: i })
       ]
     }
   );
 }
-G.displayName = "CommandPaletteEmpty";
-function K({ className: s, ...a }) {
+H.displayName = "CommandPaletteEmpty";
+function V({ className: o, ...a }) {
   return /* @__PURE__ */ e(
     "div",
     {
       "data-command-palette-separator": !0,
-      className: i("h-px bg-[#e5e7eb] mx-2", s),
+      className: d("h-px bg-[#e5e7eb] mx-2", o),
       ...a
     }
   );
 }
-K.displayName = "CommandPaletteSeparator";
-function L({ className: s, ...a }) {
-  return /* @__PURE__ */ d(
+V.displayName = "CommandPaletteSeparator";
+function _({ className: o, ...a }) {
+  const { navigateLabel: n, runLabel: i, closeLabel: c } = r.useContext(E);
+  return /* @__PURE__ */ m(
     "div",
     {
       "data-command-palette-footer": !0,
-      className: i(
+      className: d(
         "flex items-center gap-4 border-t border-[#e5e7eb] px-4 py-2 text-[11px] text-[#9ca3af]",
-        s
+        o
       ),
       ...a,
       children: [
-        /* @__PURE__ */ d("span", { className: "inline-flex items-center gap-1", children: [
-          /* @__PURE__ */ e(v, { keys: ["↑"], size: "sm", variant: "muted" }),
-          /* @__PURE__ */ e(v, { keys: ["↓"], size: "sm", variant: "muted" }),
-          /* @__PURE__ */ e("span", { children: "Navigate" })
+        /* @__PURE__ */ m("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ e(P, { keys: ["↑"], size: "sm", variant: "muted" }),
+          /* @__PURE__ */ e(P, { keys: ["↓"], size: "sm", variant: "muted" }),
+          /* @__PURE__ */ e("span", { children: n })
         ] }),
-        /* @__PURE__ */ d("span", { className: "inline-flex items-center gap-1", children: [
-          /* @__PURE__ */ e(v, { keys: ["↵"], size: "sm", variant: "muted" }),
-          /* @__PURE__ */ e("span", { children: "Run" })
+        /* @__PURE__ */ m("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ e(P, { keys: ["↵"], size: "sm", variant: "muted" }),
+          /* @__PURE__ */ e("span", { children: i })
         ] }),
-        /* @__PURE__ */ d("span", { className: "inline-flex items-center gap-1", children: [
-          /* @__PURE__ */ e(v, { keys: ["Escape"], size: "sm", variant: "muted" }),
-          /* @__PURE__ */ e("span", { children: "Close" })
+        /* @__PURE__ */ m("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ e(P, { keys: ["Escape"], size: "sm", variant: "muted" }),
+          /* @__PURE__ */ e("span", { children: c })
         ] })
       ]
     }
   );
 }
-L.displayName = "CommandPaletteFooter";
+_.displayName = "CommandPaletteFooter";
 export {
-  Z as CommandPalette,
-  G as CommandPaletteEmpty,
-  L as CommandPaletteFooter,
-  j as CommandPaletteGroup,
-  A as CommandPaletteInput,
-  q as CommandPaletteItem,
-  F as CommandPaletteList,
-  K as CommandPaletteSeparator,
-  $ as CommandPaletteShortcut
+  oe as CommandPalette,
+  H as CommandPaletteEmpty,
+  _ as CommandPaletteFooter,
+  B as CommandPaletteGroup,
+  K as CommandPaletteInput,
+  Q as CommandPaletteItem,
+  T as CommandPaletteList,
+  V as CommandPaletteSeparator,
+  U as CommandPaletteShortcut
 };

package/dist/components/ui/command-palette/shortcut-settings.d.ts

@@ -19,9 +19,20 @@ export interface ShortcutSettingsProps extends Omit<React.HTMLAttributes<HTMLDiv
     sources?: Array<'system' | 'user' | 'ag-grid' | 'browser'>;
     /** Optional render prop to hoist the recording indicator/conflict message up to a parent toolbar */
     renderStatus?: (node: React.ReactNode | null) => React.ReactNode;
+    /** Label shown during recording mode */
+    recordingLabel?: string;
+    /** Instruction for recording a shortcut */
+    pressShortcutLabel?: string;
+    /** Label for adding a new shortcut */
+    addShortcutLabel?: string;
+    /** Warning message for shortcut conflicts */
+    conflictWarnLabel?: string;
+    /** Warning message for browser-reserved shortcuts */
+    reservedWarnLabel?: string;
+    /** Detailed instruction for recording state */
+    recordingInstruction?: string;
 }
-declare function ShortcutSettings({ className, scopes, sources, renderStatus, ...props }: ShortcutSettingsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ShortcutSettings {
+export declare function ShortcutSettings({ className, scopes, sources, renderStatus, recordingLabel, pressShortcutLabel, addShortcutLabel, conflictWarnLabel, reservedWarnLabel, recordingInstruction, ...props }: ShortcutSettingsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ShortcutSettings {
     var displayName: string;
 }
-export { ShortcutSettings };