@webority/ui-react 0.14.0 → 0.15.0

package/dist/types/components/AppCommandPalette.d.ts

@@ -0,0 +1,62 @@
+import "@webority/ui-elements";
+/**
+ * App-wide "search and jump": a top-anchored dialog with a search input over a grouped list
+ * of results. Pair it with `useCommandPaletteShortcut` to open it on Ctrl+K / Cmd+K.
+ *
+ * The overlay is `AppModal`, so the backdrop, Escape, the focus trap and returning focus to
+ * whatever was focused before it opened all come from there. The list behaviour (the active
+ * result, ArrowUp / ArrowDown across groups with wrap-around, Enter, the pointer, scrolling the
+ * active result into view) is the shared `<wui-command-palette>` element, the same one the
+ * Razor `<app-command-palette>` uses.
+ *
+ * You own the search: `query` is controlled, and `groups` is whatever your search returned
+ * for it. The palette does not filter. Selecting a result calls its `onSelect`, then `onClose`.
+ *
+ * @param {object} props
+ * @param {boolean} props.open
+ * @param {() => void} props.onClose Called on Escape, a backdrop click, and after a selection.
+ * @param {string} [props.query=''] The search text (controlled).
+ * @param {(value: string) => void} [props.onQueryChange] Called with the new text as the user types.
+ * @param {string} [props.placeholder='Search…']
+ * @param {{ key: string, label: import('react').ReactNode, items: { key: string,
+ *   label: import('react').ReactNode, description?: import('react').ReactNode,
+ *   icon?: string | import('react').ReactNode, meta?: import('react').ReactNode,
+ *   onSelect?: () => void }[] }[]} [props.groups=[]] Results, rendered in order under
+ *   their group headings. Keys must be unique within their group; groups with no items are
+ *   left out. `icon` is a library icon name or a node; `meta` is short trailing text or a node.
+ * @param {boolean} [props.loading=false] Shows the library spinner in the input.
+ * @param {import('react').ReactNode} [props.emptyText='No results'] Shown when the query is
+ *   not blank, nothing is loading, and no group has items.
+ * @param {import('react').ReactNode} [props.footer] Content under the list, such as key hints.
+ * @param {string} [props.ariaLabel='Search'] Accessible name of the dialog and its input.
+ * @param {boolean} [props.highlight=true] Bold the query inside each string label,
+ *   case-insensitively. A label given as a node renders as it is.
+ * @param {string} [props.id] Seeds the result and heading ids; defaults to a generated id.
+ * @param {string} [props.className] Extra classes on the dialog card.
+ */
+export default function AppCommandPalette({ open, onClose, query, onQueryChange, placeholder, groups, loading, emptyText, footer, ariaLabel, highlight, id, className, ...rest }: {
+    open: boolean;
+    onClose: () => void;
+    query?: string;
+    onQueryChange?: (value: string) => void;
+    placeholder?: string;
+    groups?: {
+        key: string;
+        label: import('react').ReactNode;
+        items: {
+            key: string;
+            label: import('react').ReactNode;
+            description?: import('react').ReactNode;
+            icon?: string | import('react').ReactNode;
+            meta?: import('react').ReactNode;
+            onSelect?: () => void;
+        }[];
+    }[];
+    loading?: boolean;
+    emptyText?: import('react').ReactNode;
+    footer?: import('react').ReactNode;
+    ariaLabel?: string;
+    highlight?: boolean;
+    id?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/components/AppConfirmDialog.d.ts

@@ -14,7 +14,7 @@
  *   1024px PNG and a 64px one land identically. Decorative like the tone artwork: it renders
  *   aria-hidden with an empty alt, and the title plus message carry the meaning.
  * @param {number} [props.iconSize] Width and height of the illustration in px, for the tone
- *   artwork and a custom `image` alike. Unset, it is 80px with a message and 56px without.
+ *   artwork and a custom `image` alike. Unset, it is 120px with a message and 84px without.
  * @param {string} [props.confirmPhrase]
  * @param {() => void} props.onConfirm
  * @param {string} [props.cancelLabel="Cancel"]

package/dist/types/components/AppSegmented.d.ts

@@ -1,44 +1,13 @@
-/**
- * A segmented control — 2–4 mutually-exclusive options shown side by side, all
- * visible at once. The canonical use is a theme switch (Light / Dark / System)
- * or a compact view/range toggle above a chart.
- *
- * Past four options the row runs out of width — reach for `AppSelect` instead.
- * For a boolean use `AppSwitch`; for a filter that can be off use `AppChoiceChip`.
- *
- * Built on real `<input type="radio">` elements inside labels, so arrow-key
- * navigation, the single tab stop, and the "2 of 3" screen-reader announcement all
- * come from the browser rather than hand-written key handling — and the control
- * posts inside a plain form with no JavaScript.
- *
- * @param {object} props
- * @param {{ value: string, label: string, note?: string, icon?: string, disabled?: boolean }[]} props.options
- *   `note` renders as a smaller, muted sub-line under the label — a supporting detail
- *   ("Last 7 days") without shrinking the label itself. Optional; segments without one are
- *   unaffected.
- * @param {string} props.value The selected option's value.
- * @param {(value: string) => void} props.onChange
- * @param {string} props.label Accessible name for the group.
- * @param {string} [props.name] Field name. Defaults to a generated one.
- * @param {'sm'|'md'|'lg'} [props.size='md']
- * @param {boolean} [props.fullWidth=false] Segments share the row equally, filling the container.
- * @param {boolean} [props.disabled=false] Disables the whole control.
- * @param {string} [props.className]
- */
-export default function AppSegmented({ options, value, onChange, label, name, size, fullWidth, disabled, className, ...rest }: {
-    options: {
-        value: string;
-        label: string;
-        note?: string;
-        icon?: string;
-        disabled?: boolean;
-    }[];
-    value: string;
-    onChange: (value: string) => void;
-    label: string;
-    name?: string;
-    size?: 'sm' | 'md' | 'lg';
-    fullWidth?: boolean;
-    disabled?: boolean;
+export default function AppSegmented({ options, value, onChange, label, name, size, fullWidth, bordered, disabled, className, ...rest }: {
+    [x: string]: any;
+    bordered?: boolean;
     className?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    label: any;
+    name: any;
+    onChange: any;
+    options?: any[];
+    size?: string;
+    value: any;
 }): import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -15,6 +15,7 @@ export { default as AppChip } from "./components/AppChip.jsx";
 export { default as AppChoiceCard } from "./components/AppChoiceCard.jsx";
 export { default as AppChoiceChip } from "./components/AppChoiceChip.jsx";
 export { default as AppColorField } from "./components/AppColorField.jsx";
+export { default as AppCommandPalette } from "./components/AppCommandPalette.jsx";
 export { default as AppCompareTable } from "./components/AppCompareTable.jsx";
 export { default as AppConfirmDialog } from "./components/AppConfirmDialog.jsx";
 export { default as AppConsentBanner } from "./components/AppConsentBanner.jsx";
@@ -83,4 +84,5 @@ export { default as AppWizard } from "./components/AppWizard.jsx";
 export { default as AppWorkspaceSwitcher } from "./components/AppWorkspaceSwitcher.jsx";
 export { MODAL_ICONS } from "./components/ModalIcons.jsx";
 export { dismissAll, errorToast, toast } from "./components/toast.js";
+export { useCommandPaletteShortcut } from "./lib/useCommandPaletteShortcut.js";
 export { usePagination } from "./lib/usePagination.js";

package/dist/types/lib/useCommandPaletteShortcut.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Calls `onOpen` when the user presses Ctrl+K (Windows, Linux) or Cmd+K (macOS) anywhere on
+ * the page, and stops the browser's own use of the chord (Ctrl+K focuses the address bar in
+ * some browsers). Pair it with `AppCommandPalette`:
+ *
+ *     const [open, setOpen] = useState(false);
+ *     useCommandPaletteShortcut(() => setOpen(true));
+ *
+ * Kept deliberately simple: it fires whatever has focus, including a text field or another
+ * open dialog, and it ignores a held key's auto-repeat. A chord with Alt or Shift held is left
+ * alone, so Ctrl+Shift+K stays available to the page. The listener is removed on unmount, and
+ * a new `onOpen` each render is fine: the latest one is always called.
+ *
+ * @param {() => void} onOpen Called on the chord.
+ * @param {{ key?: string }} [options] `key` is the letter to pair with Ctrl / Cmd (default `k`),
+ *   matched case-insensitively.
+ */
+export declare function useCommandPaletteShortcut(onOpen: () => void, { key }?: {
+    key?: string;
+}): void;