@webority/ui-react 0.13.5 → 0.15.0

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

@@ -10,6 +10,9 @@
  *
  * @param {object} props
  * @param {string|import('react').ReactNode} props.icon    glyph name (see Icon), or a custom node (e.g. an iconsax glyph)
+ * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant='linear'] iconsax
+ *   style of a NAMED icon (AppIcon's `variant`). A node passed as `icon` is the caller's own glyph
+ *   and is not restyled.
  * @param {string} props.label   accessible name + collision-aware hover/focus tooltip
  * @param {'auto'|'top'|'bottom'|'start'|'end'} [props.tooltipPlacement='auto']  which side the
  *   tooltip prefers. `auto` (default) lets Popper pick the side with the most room; a named side
@@ -25,8 +28,9 @@
  *   wrapper must use `forwardRef` (the tooltip still opens without it, but may be mispositioned).
  * @param {string} [props.href]           sets an anchor without needing `as`.
  */
-export default function AppActionIcon({ icon, label, tooltipPlacement, danger, disabled, size, onClick, className, as, href, ...rest }: {
+export default function AppActionIcon({ icon, iconVariant, label, tooltipPlacement, danger, disabled, size, onClick, className, as, href, ...rest }: {
     icon: string | import('react').ReactNode;
+    iconVariant?: 'linear' | 'outline' | 'bold' | 'bulk' | 'broken' | 'twotone';
     label: string;
     tooltipPlacement?: 'auto' | 'top' | 'bottom' | 'start' | 'end';
     danger?: boolean;

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

@@ -1,8 +1,15 @@
 /**
- * The shared status banner — wraps react-bootstrap <Alert> (same `.alert` /
+ * The shared tinted banner — wraps react-bootstrap <Alert> (same `.alert` /
  * `.alert-{variant}` classes Bootstrap + the theme already style). Screens must
  * use this instead of raw `className="alert alert-…"`.
  *
+ * It does two jobs, and `role` is what tells them apart for assistive technology:
+ * - REPORT a state ("we couldn't save", "your trial ends in 3 days"): keep the default
+ *   `role="alert"`, or `"status"` for a notice that must not interrupt.
+ * - EXPLAIN part of the page (how a figure is worked out, what happens next): pass
+ *   `role="none"` so a screen reader reads it as ordinary content instead of breaking in.
+ *   `accent` adds the thick left edge that marks such an aside.
+ *
  * @param {object} props
  * @param {"info"|"success"|"warning"|"danger"} [props.variant="info"]
  * @param {import('react').ReactNode} props.children The alert body.
@@ -10,22 +17,32 @@
  * @param {string|import('react').ReactNode} [props.icon] A leading glyph — a semantic icon name or a node. Defaults to the variant's badge glyph; pass `null` for none.
  * @param {string} [props.image] A custom image URL shown in the badge instead of the icon glyph (fills the circle).
  * @param {string} [props.imageAlt] Alt text for the custom image.
+ * @param {number} [props.imageSize] Width and height of the image badge in px. Unset, it follows `size`.
  * @param {string} [props.className]
  * @param {() => void} [props.onClose] Called when dismissed
  * @param {boolean} [props.dismissible] Show the close button (defaults to true when onClose is set)
  * @param {boolean} [props.bordered=true] Draw the soft variant border. `false` keeps only the tint fill.
- * @param {"alert"|"status"} [props.role="alert"] Use "status" for non-assertive notices
+ * @param {boolean} [props.accent=false] A thick variant-coloured left edge, marking the alert as an aside.
+ * @param {"sm"|"md"|"lg"} [props.size="md"] `sm` is a compact single line; `lg` is roomier, with a larger
+ *   heading, body and badge.
+ * @param {import('react').ReactNode} [props.action] A trailing action pinned to the right — usually an `AppButton`.
+ * @param {"alert"|"status"|"none"} [props.role="alert"] "status" for non-assertive notices; "none" for
+ *   explanatory page content, which must not interrupt a screen reader.
  */
-export default function AppAlert({ variant, children, title, icon, image, imageAlt, className, onClose, dismissible, bordered, role, ...rest }: {
+export default function AppAlert({ variant, children, title, icon, image, imageAlt, imageSize, className, onClose, dismissible, bordered, accent, size, action, role, ...rest }: {
     variant?: "info" | "success" | "warning" | "danger";
     children: import('react').ReactNode;
     title?: import('react').ReactNode;
     icon?: string | import('react').ReactNode;
     image?: string;
     imageAlt?: string;
+    imageSize?: number;
     className?: string;
     onClose?: () => void;
     dismissible?: boolean;
     bordered?: boolean;
-    role?: "alert" | "status";
+    accent?: boolean;
+    size?: "sm" | "md" | "lg";
+    action?: import('react').ReactNode;
+    role?: "alert" | "status" | "none";
 }): import("react").JSX.Element;

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

@@ -7,9 +7,10 @@
  * @param {string} props.value
  * @param {boolean} props.checked
  * @param {(e: import('react').ChangeEvent<HTMLInputElement>) => void} props.onChange
- * @param {string} [props.icon]
+ * @param {string} [props.icon] Icon name. Renders linear, and switches to the solid (bold) style
+ *   while the card is checked so the selected card reads at a glance.
  * @param {import('react').ReactNode} [props.iconNode]
- * @param {number} [props.iconSize=18]
+ * @param {number} [props.iconSize] Icon glyph size in px. Defaults to the card size: 16 (sm), 18 (md), 22 (lg).
  * @param {string} [props.image] Image URL — renders an image-forward card (overrides `icon`).
  * @param {string} [props.imageAlt]
  * @param {import('react').ReactNode} [props.children] Custom body, overriding title/description.
@@ -17,12 +18,18 @@
  * @param {import('react').ReactNode} [props.description]
  * @param {string} [props.checkIcon="check"]
  * @param {number} [props.checkSize=18]
+ * @param {boolean} [props.hideCheck=false] Render no selected tick. Selection then reads from the
+ *   card's border and fill alone, and the card sheds the top/bottom room the tick needed.
+ * @param {'sm'|'md'|'lg'} [props.size='md'] Card size: padding, gap, icon disc, type and the
+ *   tick offset step together.
+ * @param {'inline'|'stacked'} [props.layout='inline'] `inline` puts the icon beside the text;
+ *   `stacked` puts the icon on its own line with the title and description below it.
  * @param {string} [props.className]
  */
 export default function AppChoiceCard({ name, multiple, value, checked, onChange, icon, iconNode, // custom icon element; overrides the `icon` name when provided
 iconSize, image, // image URL — renders an image-forward card (overrides icon)
 imageAlt, children, // custom body template — overrides title/description when provided
-title, description, checkIcon, checkSize, className, ...rest }: {
+title, description, checkIcon, checkSize, hideCheck, size, layout, className, ...rest }: {
     name: string;
     multiple?: boolean;
     value: string;
@@ -38,5 +45,8 @@ title, description, checkIcon, checkSize, className, ...rest }: {
     description?: import('react').ReactNode;
     checkIcon?: string;
     checkSize?: number;
+    hideCheck?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    layout?: 'inline' | 'stacked';
     className?: string;
 }): import("react").JSX.Element;

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

@@ -13,6 +13,8 @@
  *   badge occupies (and to the same reduced footprint when the dialog has no message), so a
  *   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 120px with a message and 84px without.
  * @param {string} [props.confirmPhrase]
  * @param {() => void} props.onConfirm
  * @param {string} [props.cancelLabel="Cancel"]
@@ -28,7 +30,7 @@
  *   a preset, or an exact max-width in px for a custom size.
  * @param {string} [props.className] Merged with the dialog's own wui-confirm class.
  */
-export default function AppConfirmDialog({ open, title, message, confirmLabel, cancelLabel, danger, tone, image, confirmPhrase, onConfirm, onClose, loading, staticBackdrop, placement, size, className, ...rest }: {
+export default function AppConfirmDialog({ open, title, message, confirmLabel, cancelLabel, danger, tone, image, iconSize, confirmPhrase, onConfirm, onClose, loading, staticBackdrop, placement, size, className, ...rest }: {
     open: boolean;
     title: string;
     message?: import('react').ReactNode;
@@ -36,6 +38,7 @@ export default function AppConfirmDialog({ open, title, message, confirmLabel, c
     danger?: boolean;
     tone?: string;
     image?: string;
+    iconSize?: number;
     confirmPhrase?: string;
     onConfirm: () => void;
     cancelLabel?: string;

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

@@ -0,0 +1,14 @@
+import "@webority/ui-elements";
+/**
+ * @param {object} props
+ * @param {string} [props.value] Selected ISO 3166-1 alpha-2 code, e.g. "IN".
+ * @param {(value: string) => void} [props.onChange] Called with the chosen ISO code.
+ * @param {string[]} [props.countries] Limit the list to these ISO codes (alphabetical by name).
+ *   Omitted, every country is listed.
+ * @param {boolean} [props.searchable=true] Show the search box in the menu.
+ * @param {'sm'|'md'|'lg'} [props.size='md'] Control size, same as AppInput.
+ * @param {string} [props.className] Class to apply to the control element.
+ * @param {string} [props.fieldClassName] Class to apply to the wrapper field div.
+ */
+declare const AppCountrySelect: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export default AppCountrySelect;

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

@@ -1,7 +1,8 @@
-export default function AppInfoTip({ label, children, placement, className, ...rest }: {
+export default function AppInfoTip({ label, children, placement, width, className, ...rest }: {
     [x: string]: any;
     children: any;
     className?: string;
     label: any;
     placement?: string;
+    width?: string;
 }): import("react").JSX.Element;

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

@@ -21,6 +21,8 @@
  * @param {() => void} props.onAdd
  * @param {(index: number) => void} [props.onRemove] Omit to make rows non-removable.
  * @param {string} [props.addLabel='Add another']
+ * @param {string} [props.addVariant='secondary'] The add button's AppButton variant
+ *   (primary, outline, ghost, …); an unknown value warns in dev, same as AppButton.
  * @param {string} [props.removeLabel='Remove row']
  * @param {string} [props.emptyText] Shown in place of the rows when there are none.
  * @param {number} [props.min=0] Rows at or below this count cannot be removed.
@@ -28,7 +30,7 @@
  * @param {boolean} [props.numbered=true] Show the row index.
  * @param {string} [props.className]
  */
-export default function AppRepeater({ rows, renderRow, rowLabel, onAdd, onRemove, addLabel, removeLabel, emptyText, min, max, numbered, className, ...rest }: {
+export default function AppRepeater({ rows, renderRow, rowLabel, onAdd, onRemove, addLabel, addVariant, removeLabel, emptyText, min, max, numbered, className, ...rest }: {
     rows: {
         id?: string | number;
     }[];
@@ -37,6 +39,7 @@ export default function AppRepeater({ rows, renderRow, rowLabel, onAdd, onRemove
     onAdd: () => void;
     onRemove?: (index: number) => void;
     addLabel?: string;
+    addVariant?: string;
     removeLabel?: string;
     emptyText?: string;
     min?: number;

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/components/AppSelect.d.ts

@@ -3,6 +3,9 @@ import "@webority/ui-elements";
  * @param {object} props
  * @param {string} [props.className] Class to apply to the control element.
  * @param {string} [props.fieldClassName] Class to apply to the wrapper field div.
+ * @param {import('react').ReactNode} [props.prefix] A bordered box before the select (e.g. "+91", "Tag"),
+ *   the same shell as AppInput's prefix. Not combined with floatingLabel.
+ * @param {import('react').ReactNode} [props.suffix] A bordered box after the select, as AppInput's suffix.
  */
 declare const AppSelect: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
 export default AppSelect;

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

@@ -14,6 +14,9 @@ export declare const InfoIcon: ({ size }: {
 export declare const DeleteIcon: ({ size }: {
     size?: number;
 }) => import("react").JSX.Element;
+export declare const PrimaryIcon: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
 export declare const MODAL_ICONS: {
     success: ({ size }: {
         size?: number;
@@ -30,4 +33,7 @@ export declare const MODAL_ICONS: {
     delete: ({ size }: {
         size?: number;
     }) => import("react").JSX.Element;
+    primary: ({ size }: {
+        size?: number;
+    }) => import("react").JSX.Element;
 };

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

@@ -1,9 +1,11 @@
 /**
  * @param {string | import('react').ReactNode} icon A Bootstrap-Icons name, or a node rendered as-is.
- * @param {{ size?: number, className?: string }} [options]
+ * @param {{ size?: number, className?: string, variant?: string }} [options] `variant` is the iconsax
+ *   style for a NAMED icon; a node is the caller's own glyph and renders untouched.
  * @returns {import('react').ReactNode | null}
  */
-export default function renderIconProp(icon: string | import('react').ReactNode, { size, className }?: {
+export default function renderIconProp(icon: string | import('react').ReactNode, { size, className, variant }?: {
     size?: number;
     className?: string;
+    variant?: string;
 }): import('react').ReactNode | null;

package/dist/types/index.d.ts

@@ -9,17 +9,18 @@ export { default as AppBadge } from "./components/AppBadge.jsx";
 export { default as AppBanner } from "./components/AppBanner.jsx";
 export { default as AppBreadcrumbs } from "./components/AppBreadcrumbs.jsx";
 export { default as AppButton } from "./components/AppButton.jsx";
-export { default as AppCallout } from "./components/AppCallout.jsx";
 export { default as AppCard } from "./components/AppCard.jsx";
 export { default as AppCheckbox } from "./components/AppCheckbox.jsx";
 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";
 export { default as AppCopyButton } from "./components/AppCopyButton.jsx";
+export { default as AppCountrySelect } from "./components/AppCountrySelect.jsx";
 export { default as AppDataTable } from "./components/AppDataTable.jsx";
 export { default as AppDatePicker } from "./components/AppDatePicker.jsx";
 export { default as AppDateRangePicker } from "./components/AppDateRangePicker.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;