@smwb/ui-solid 0.13.0 → 1.0.0

package/dist/components/navigation/appBar/appBar.js

@@ -1,25 +1,27 @@
-import { createComponent as l, Dynamic as u, mergeProps as h, insert as r, effect as w, className as $, template as d } from "solid-js/web";
+import { createComponent as p, Dynamic as h, mergeProps as $, insert as r, memo as v, effect as g, className as C, template as a } from "solid-js/web";
 import '../../../assets/styles/less/components/appBar/appBar.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import { mergeProps as v, splitProps as C, children as p, Show as m } from "solid-js";
+import { mergeProps as A, splitProps as P, children as m, Show as _ } from "solid-js";
 import c from "clsx";
-import { mergeRefs as A } from "../../../primitives/mergeRefs.js";
-var P = /* @__PURE__ */ d("<div class=smwb-appbar__left__title>"), x = /* @__PURE__ */ d("<div class=smwb-appbar__inner><div class=smwb-appbar__left></div><div></div><div class=smwb-appbar__right>");
-function R(f) {
-  const b = v({
+import { mergeRefs as x } from "../../../primitives/mergeRefs.js";
+var y = /* @__PURE__ */ a("<div class=smwb-appbar__inner><div class=smwb-appbar__left></div><div></div><div class=smwb-appbar__right>"), S = /* @__PURE__ */ a("<h1 class=smwb-appbar__left__title>"), k = /* @__PURE__ */ a("<h2 class=smwb-appbar__left__title>"), B = /* @__PURE__ */ a("<h3 class=smwb-appbar__left__title>"), D = /* @__PURE__ */ a("<h4 class=smwb-appbar__left__title>"), N = /* @__PURE__ */ a("<h5 class=smwb-appbar__left__title>"), R = /* @__PURE__ */ a("<h6 class=smwb-appbar__left__title>"), j = /* @__PURE__ */ a("<div class=smwb-appbar__left__title>");
+function I(d) {
+  const w = A({
     position: "static",
     placement: "top",
     midContentAlign: "middle",
+    variant: "default",
+    windowControls: "auto",
     color: "default"
-  }, f), [t, g] = C(b, ["class", "children", "dense", "position", "placement", "leftContent", "midContent", "midContentAlign", "rightContent", "title", "color", "ref", "data-testid"]), i = p(() => t.children), a = p(() => i() ? void 0 : t.title);
-  return l(u, h({
+  }, d), [t, b] = P(w, ["class", "children", "dense", "position", "placement", "leftContent", "midContent", "midContentAlign", "variant", "windowControls", "rightContent", "title", "titleAs", "color", "ref", "data-testid"]), i = m(() => t.children), n = m(() => i() ? void 0 : t.title);
+  return p(h, $({
     get component() {
       return t.placement === "top" ? "header" : "footer";
     }
-  }, g, {
-    ref(n) {
-      var e = A(t.ref);
-      typeof e == "function" && e(n);
+  }, b, {
+    ref(s) {
+      var l = x(t.ref);
+      typeof l == "function" && l(s);
     },
     get "data-testid"() {
       return t["data-testid"] ?? "app-bar";
@@ -27,25 +29,61 @@ function R(f) {
     get class() {
       return c("smwb-appbar", t.class, `smwb-${t.position}`, `smwb-${t.placement}`, {
         "smwb-dense": t.dense
-      }, t.color !== "default" && `smwb-appbar_color-${t.color}`);
+      }, t.color !== "default" && `smwb-appbar_color-${t.color}`, t.variant === "window" && "smwb-appbar_variant-window", t.variant === "window" && t.windowControls !== "auto" && `smwb-appbar_window-controls-${t.windowControls}`);
     },
     get children() {
-      return l(m, {
+      return p(_, {
         get when() {
           return i();
         },
         get fallback() {
           return (() => {
-            var n = x(), e = n.firstChild, o = e.nextSibling, _ = o.nextSibling;
-            return r(e, l(m, {
+            var s = y(), l = s.firstChild, o = l.nextSibling, u = o.nextSibling;
+            return r(l, p(_, {
+              keyed: !0,
               get when() {
-                return a();
+                return v(() => !!n())() && (t.titleAs ?? "div");
               },
-              get children() {
-                var s = P();
-                return r(s, a), s;
+              children: (f) => {
+                switch (f) {
+                  case "h1":
+                    return (() => {
+                      var e = S();
+                      return r(e, n), e;
+                    })();
+                  case "h2":
+                    return (() => {
+                      var e = k();
+                      return r(e, n), e;
+                    })();
+                  case "h3":
+                    return (() => {
+                      var e = B();
+                      return r(e, n), e;
+                    })();
+                  case "h4":
+                    return (() => {
+                      var e = D();
+                      return r(e, n), e;
+                    })();
+                  case "h5":
+                    return (() => {
+                      var e = N();
+                      return r(e, n), e;
+                    })();
+                  case "h6":
+                    return (() => {
+                      var e = R();
+                      return r(e, n), e;
+                    })();
+                  default:
+                    return (() => {
+                      var e = j();
+                      return r(e, n), e;
+                    })();
+                }
               }
-            }), null), r(e, () => t.leftContent, null), r(o, () => t.midContent), r(_, () => t.rightContent), w(() => $(o, c("smwb-appbar__mid", `smwb-${t.midContentAlign}`))), n;
+            }), null), r(l, () => t.leftContent, null), r(o, () => t.midContent), r(u, () => t.rightContent), g(() => C(o, c("smwb-appbar__mid", `smwb-${t.midContentAlign}`))), s;
           })();
         },
         get children() {
@@ -56,6 +94,6 @@ function R(f) {
   }));
 }
 export {
-  R as AppBar
+  I as AppBar
 };
 //# sourceMappingURL=appBar.js.map

package/dist/components/navigation/appBar/appBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"appBar.js","sources":["../../../../src/components/navigation/appBar/appBar.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type AppBarColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface AppBarProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  dense?: boolean;\n  position?: \"relative\" | \"static\" | \"absolute\" | \"sticky\" | \"fixed\";\n  placement?: \"top\" | \"bottom\";\n  leftContent?: JSX.Element;\n  midContent?: JSX.Element;\n  rightContent?: JSX.Element;\n  title?: JSX.Element | string;\n  midContentAlign?: \"middle\" | \"left\" | \"right\";\n  /** Semantic background color. */\n  color?: AppBarColor;\n  /** Test id of the root (`<header>`, or `<footer>` at the bottom); `app-bar` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function AppBar(props: ParentProps<AppBarProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      position: \"static\" as const,\n      placement: \"top\" as const,\n      midContentAlign: \"middle\" as const,\n      color: \"default\" as AppBarColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"dense\",\n    \"position\",\n    \"placement\",\n    \"leftContent\",\n    \"midContent\",\n    \"midContentAlign\",\n    \"rightContent\",\n    \"title\",\n    \"color\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const content = children(() => local.children);\n  // The title is drawn only without children, so it is read only then.\n  const title = children(() => (content() ? undefined : local.title));\n\n  return (\n    <Dynamic\n      component={local.placement === \"top\" ? \"header\" : \"footer\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"app-bar\"}\n      class={cn(\n        \"smwb-appbar\",\n        local.class,\n        `smwb-${local.position}`,\n        `smwb-${local.placement}`,\n        { \"smwb-dense\": local.dense },\n        local.color !== \"default\" && `smwb-appbar_color-${local.color}`\n      )}\n    >\n      <Show\n        when={content()}\n        fallback={\n          <div class=\"smwb-appbar__inner\">\n            <div class=\"smwb-appbar__left\">\n              <Show when={title()}>\n                <div class=\"smwb-appbar__left__title\">{title()}</div>\n              </Show>\n              {local.leftContent}\n            </div>\n            <div class={cn(\"smwb-appbar__mid\", `smwb-${local.midContentAlign}`)}>{local.midContent}</div>\n            <div class=\"smwb-appbar__right\">{local.rightContent}</div>\n          </div>\n        }\n      >\n        {content()}\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport default AppBar;\n"],"names":["AppBar","props","merged","mergeProps","position","placement","midContentAlign","color","local","rest","splitProps","content","children","title","undefined","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","dense","Show","when","fallback","_el$","_tmpl$2","_el$2","firstChild","_el$4","nextSibling","_el$5","_$insert","_el$3","_tmpl$","leftContent","midContent","rightContent","_$effect","_$className"],"mappings":";;;;;;;AAyBO,SAASA,EAAOC,GAA8C;AACnE,QAAMC,IAASC,EACb;AAAA,IACEC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,iBAAiB;AAAA,IACjBC,OAAO;AAAA,EAAA,GAETN,CACF,GACM,CAACO,GAAOC,CAAI,IAAIC,EAAWR,GAAQ,CACvC,SACA,YACA,SACA,YACA,aACA,eACA,cACA,mBACA,gBACA,SACA,SACA,OACA,aAAa,CACd,GAIKS,IAAUC,EAAS,MAAMJ,EAAMI,QAAQ,GAEvCC,IAAQD,EAAS,MAAOD,MAAYG,SAAYN,EAAMK,KAAM;AAElE,SAAAE,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEV,EAAMH,cAAc,QAAQ,WAAW;AAAA,IAAQ;AAAA,EAAA,GACtDI,GAAI;AAAA,IAAAU,IAAAC,GAAA;AAAA,UAAAC,IACHC,EAAUd,EAAMW,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IAAA,gBAAA;AAAA,aACZZ,EAAM,aAAa,KAAK;AAAA,IAAS;AAAA,IAAA,IAAA,QAAA;AAAA,aACvCe,EACL,eACAf,EAAMgB,OACN,QAAQhB,EAAMJ,QAAQ,IACtB,QAAQI,EAAMH,SAAS,IACvB;AAAA,QAAE,cAAcG,EAAMiB;AAAAA,MAAAA,GACtBjB,EAAMD,UAAU,aAAa,qBAAqBC,EAAMD,KAAK,EAC/D;AAAA,IAAC;AAAA,IAAA,IAAAK,WAAA;AAAA,aAAAG,EAEAW,GAAI;AAAA,QAAA,IACHC,OAAI;AAAA,iBAAEhB,EAAAA;AAAAA,QAAS;AAAA,QAAA,IACfiB,WAAQ;AAAA,kBAAA,MAAA;AAAA,gBAAAC,IAAAC,KAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IAAAF,EAAAC;AAAAE,mBAAAA,EAAAL,GAAAhB,EAGDW,GAAI;AAAA,cAAA,IAACC,OAAI;AAAA,uBAAEd,EAAAA;AAAAA,cAAO;AAAA,cAAA,IAAAD,WAAA;AAAA,oBAAAyB,IAAAC,EAAAA;AAAAF,uBAAAA,EAAAC,GACsBxB,CAAK,GAAAwB;AAAAA,cAAA;AAAA,YAAA,CAAA,GAAA,IAAA,GAAAD,EAAAL,GAAA,MAE7CvB,EAAM+B,aAAW,IAAA,GAAAH,EAAAH,GAAA,MAEkDzB,EAAMgC,UAAU,GAAAJ,EAAAD,GAAA,MACrD3B,EAAMiC,YAAY,GAAAC,EAAA,MAAAC,EAAAV,GADvCV,EAAG,oBAAoB,QAAQf,EAAMF,eAAe,EAAE,CAAC,CAAA,GAAAuB;AAAAA,UAAA,GAAA;AAAA,QAAA;AAAA,QAAA,IAAAjB,WAAA;AAAA,iBAKtED,EAAAA;AAAAA,QAAS;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAIlB;"}
+{"version":3,"file":"appBar.js","sources":["../../../../src/components/navigation/appBar/appBar.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type AppBarColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface AppBarProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  dense?: boolean;\n  position?: \"relative\" | \"static\" | \"absolute\" | \"sticky\" | \"fixed\";\n  placement?: \"top\" | \"bottom\";\n  leftContent?: JSX.Element;\n  midContent?: JSX.Element;\n  rightContent?: JSX.Element;\n  title?: JSX.Element | string;\n  /**\n   * Tag the `title` is rendered in: a `div` (default) or a heading, `h1`–`h6`,\n   * for the page's main heading. Only the tag changes — a heading is drawn with\n   * the bar's own font size, weight and no margins, so it looks exactly like the\n   * div. The heading's text is the `title` itself, so pass a string or plain\n   * markup rather than a `Typography` heading.\n   */\n  titleAs?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  midContentAlign?: \"middle\" | \"left\" | \"right\";\n  /**\n   * `window`: the bar is the title bar of a desktop app window (Electron, Tauri, an installed PWA with Window\n   * Controls Overlay). The bar drags the window; buttons, links, fields and other controls in it stay clickable,\n   * and room is left for the OS window buttons (`windowControls`). In a plain browser tab it looks like `default`.\n   */\n  variant?: \"default\" | \"window\";\n  /**\n   * With `variant=\"window\"`: where the OS window buttons are, so the bar's content keeps clear of them.\n   * `auto` (default) takes the area from the shell's `env(titlebar-area-*)` (Window Controls Overlay, Electron\n   * `titleBarOverlay`) and reserves nothing without it; `left` is macOS (traffic lights, `titleBarStyle: \"hiddenInset\"`),\n   * `right` is Windows/Linux caption buttons drawn by the OS; `none` reserves nothing. The reserved width is\n   * the `--smui-appBarWindowControlsWidth` custom property (64px on the left, 138px on the right by default).\n   */\n  windowControls?: \"auto\" | \"left\" | \"right\" | \"none\";\n  /** Semantic background color. */\n  color?: AppBarColor;\n  /** Test id of the root (`<header>`, or `<footer>` at the bottom); `app-bar` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function AppBar(props: ParentProps<AppBarProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      position: \"static\" as const,\n      placement: \"top\" as const,\n      midContentAlign: \"middle\" as const,\n      variant: \"default\" as const,\n      windowControls: \"auto\" as const,\n      color: \"default\" as AppBarColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"dense\",\n    \"position\",\n    \"placement\",\n    \"leftContent\",\n    \"midContent\",\n    \"midContentAlign\",\n    \"variant\",\n    \"windowControls\",\n    \"rightContent\",\n    \"title\",\n    \"titleAs\",\n    \"color\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const content = children(() => local.children);\n  // The title is drawn only without children, so it is read only then.\n  const title = children(() => (content() ? undefined : local.title));\n\n  return (\n    <Dynamic\n      component={local.placement === \"top\" ? \"header\" : \"footer\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"app-bar\"}\n      class={cn(\n        \"smwb-appbar\",\n        local.class,\n        `smwb-${local.position}`,\n        `smwb-${local.placement}`,\n        { \"smwb-dense\": local.dense },\n        local.color !== \"default\" && `smwb-appbar_color-${local.color}`,\n        local.variant === \"window\" && \"smwb-appbar_variant-window\",\n        local.variant === \"window\" &&\n          local.windowControls !== \"auto\" &&\n          `smwb-appbar_window-controls-${local.windowControls}`\n      )}\n    >\n      <Show\n        when={content()}\n        fallback={\n          <div class=\"smwb-appbar__inner\">\n            <div class=\"smwb-appbar__left\">\n              <Show keyed when={title() && (local.titleAs ?? \"div\")}>\n                {(tag) => {\n                  // Headings go through literal templates too: `Dynamic` would add a hydration level to the\n                  // default `div` and a trailing space to the class on the server.\n                  switch (tag) {\n                    case \"h1\":\n                      return <h1 class=\"smwb-appbar__left__title\">{title()}</h1>;\n                    case \"h2\":\n                      return <h2 class=\"smwb-appbar__left__title\">{title()}</h2>;\n                    case \"h3\":\n                      return <h3 class=\"smwb-appbar__left__title\">{title()}</h3>;\n                    case \"h4\":\n                      return <h4 class=\"smwb-appbar__left__title\">{title()}</h4>;\n                    case \"h5\":\n                      return <h5 class=\"smwb-appbar__left__title\">{title()}</h5>;\n                    case \"h6\":\n                      return <h6 class=\"smwb-appbar__left__title\">{title()}</h6>;\n                    default:\n                      return <div class=\"smwb-appbar__left__title\">{title()}</div>;\n                  }\n                }}\n              </Show>\n              {local.leftContent}\n            </div>\n            <div class={cn(\"smwb-appbar__mid\", `smwb-${local.midContentAlign}`)}>{local.midContent}</div>\n            <div class=\"smwb-appbar__right\">{local.rightContent}</div>\n          </div>\n        }\n      >\n        {content()}\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport default AppBar;\n"],"names":["AppBar","props","merged","mergeProps","position","placement","midContentAlign","variant","windowControls","color","local","rest","splitProps","content","children","title","undefined","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","class","dense","Show","when","fallback","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_$insert","keyed","_$memo","titleAs","tag","_el$5","_tmpl$2","_el$6","_tmpl$3","_el$7","_tmpl$4","_el$8","_tmpl$5","_el$9","_tmpl$6","_el$0","_tmpl$7","_el$1","_tmpl$8","leftContent","midContent","rightContent","_$effect","_$className"],"mappings":"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"}

package/dist/components/navigation/commandPalette/commandPalette.d.ts

@@ -0,0 +1,126 @@
+import { type JSX } from "solid-js";
+import type { Ref } from "../../../primitives/mergeRefs";
+import type { CommandPaletteFilter, CommandPaletteGroup, CommandPaletteItem, CommandPaletteSource } from "./commandPaletteTypes";
+export interface CommandPaletteProps {
+    /**
+     * Whether the palette is open. Any value but `undefined` makes it controlled: the palette then
+     * shows this and only asks to change it through `onOpenChange`. While it is `undefined`, the
+     * palette keeps its own state, starting from `defaultOpen`.
+     */
+    open?: boolean | undefined;
+    /** Open state to start from while uncontrolled; `false` by default. */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Called for every request to open or close: Escape, a backdrop click, and choosing an item while
+     * `closeOnSelect`. Called in both the controlled and the uncontrolled mode.
+     */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** The groups to search in, filtered locally by `filter`; empty by default. */
+    groups?: CommandPaletteGroup[] | undefined;
+    /**
+     * Recently used items, kept by the app (its local storage, its server, per user) and updated from
+     * `onSelect`. Shown as the first group while the query is empty, unfiltered, and hidden while
+     * the user searches.
+     */
+    recent?: CommandPaletteItem[] | undefined;
+    /** Heading of the recent group; `"Recent"` by default. */
+    recentLabel?: string | undefined;
+    /**
+     * The text in the search field. Any value but `undefined` makes it controlled: the field shows
+     * this and only reports edits through `onQueryChange`.
+     */
+    query?: string | undefined;
+    /** Text to start from while uncontrolled, and to reset to each time the palette opens; `""`. */
+    defaultQuery?: string | undefined;
+    /** Called for every edit of the field, in both the controlled and the uncontrolled mode. */
+    onQueryChange?: ((query: string) => void) | undefined;
+    /**
+     * Decides which of `groups` an edit keeps; {@link commandPaletteFilter} by default. `false` shows
+     * `groups` as given, for an app that filters them itself or gets them filtered from a server.
+     * Never applied to `recent` or to the results of `source`.
+     */
+    filter?: CommandPaletteFilter | false | undefined;
+    /**
+     * Loads results for the trimmed query, after `debounce` ms of quiet typing. Its `signal` is
+     * aborted when a newer query, a close or an unmount makes the answer useless, and an answer that
+     * arrives for an older query is dropped. Appended after `groups`.
+     */
+    source?: CommandPaletteSource | undefined;
+    /** Milliseconds of quiet typing before `source` is called; `200` by default. */
+    debounce?: number | undefined;
+    /**
+     * `source` is called only when the trimmed query has at least this many characters; `1` by
+     * default. `0` also loads for the empty query.
+     */
+    minQueryLength?: number | undefined;
+    /**
+     * App-driven loading: shows the skeleton like a pending `source` does, for an app that loads
+     * itself with a controlled `query`; `false` by default.
+     */
+    loading?: boolean | undefined;
+    /**
+     * Called for every chosen item, after the item's own `onSelect`. The place for the app to move the
+     * item to the top of its `recent` list.
+     */
+    onSelect?: ((item: CommandPaletteItem, group: CommandPaletteGroup) => void) | undefined;
+    /** Ask to close when an item is chosen; `true` by default. */
+    closeOnSelect?: boolean | undefined;
+    /** Placeholder of the field; `"Type a command or search…"` by default. It is not its name. */
+    placeholder?: string | undefined;
+    /** Accessible name of the field and, through `aria-labelledby`, of the listbox; `"Search commands"`. */
+    searchLabel?: string | undefined;
+    /** Shown and announced when nothing matches; `"No results"` by default. */
+    noResultsText?: string | undefined;
+    /** Shown and announced when `source` rejects; `"Couldn't load results"` by default. */
+    errorText?: string | undefined;
+    /**
+     * Text of the polite announcement after a search settles; `"1 result"` or `"N results"` by
+     * default. Not used for zero results, which announce `noResultsText`.
+     */
+    resultsAnnouncement?: ((count: number) => string) | undefined;
+    /**
+     * Slot under the results, for key hints built with `Kbd`. Drawn only when given:
+     * `<>Press <Kbd keys={["Enter"]} /> to run</>`.
+     */
+    footer?: JSX.Element | undefined;
+    /** Added to the dialog element, after `smwb-command-palette`. */
+    class?: string | undefined;
+    /** Name of the dialog; `"Command palette"` by default. Not set when `aria-labelledby` is given. */
+    "aria-label"?: string | undefined;
+    /** Id of the element that names the dialog; replaces the default `aria-label`. */
+    "aria-labelledby"?: string | undefined;
+    /** Ids of the elements that describe the dialog. */
+    "aria-describedby"?: string | undefined;
+    /** Test id of the dialog element; `"command-palette"` unless given. */
+    "data-testid"?: string | undefined;
+    /** Ref of the dialog element. */
+    ref?: Ref<HTMLDivElement> | undefined;
+}
+/**
+ * Search and actions on ⌘K: a modal dialog with one search field and grouped results, for reaching
+ * pages and running commands from the keyboard alone. Built on {@link Modal}, so it portals into the
+ * body, traps the focus, closes on Escape only when it is the topmost overlay, and renders nothing on
+ * the server.
+ *
+ * Results come from three places, drawn in this order: `recent` while the query is empty, `groups`
+ * filtered locally by `filter`, and the answer of `source` for the current query. ArrowUp, ArrowDown,
+ * PageUp and PageDown move the active option, Enter runs it, and Escape closes the palette. The first
+ * enabled option is active as soon as the palette opens, so Enter runs the top hit.
+ *
+ * The palette does not bind Mod+K itself: the app does, with {@link createKeyboardShortcut}, so one
+ * binding serves any opener and the same key list draws the hint.
+ *
+ * ```tsx
+ * const [open, setOpen] = createSignal(false);
+ * createKeyboardShortcut({ keys: ["Mod", "K"], onTrigger: () => setOpen(!open()) });
+ * <Button onClick={() => setOpen(true)}>
+ *   Search <Kbd keys={["Mod", "K"]} />
+ * </Button>
+ * <CommandPalette open={open()} onOpenChange={setOpen} groups={groups} recent={recent()} onSelect={pick} />
+ * ```
+ *
+ * Filtering is linear and the results are not virtualized, so an app that expects thousands of items
+ * should cap each group (50 is a good start) or search on a server through `source`.
+ */
+export declare function CommandPalette(props: CommandPaletteProps): JSX.Element;
+export default CommandPalette;