@webority/ui-react 0.13.4 → 0.14.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/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 80px with a message and 56px 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/AppDataTable.d.ts

@@ -14,7 +14,10 @@
  * @param {number} [props.sourceCount]
  * @param {(row: object) => import('react').ReactNode} [props.rowActions]
  * @param {string} [props.rowActionsLabel]
- * @param {object} [props.pagination]
+ * @param {object} [props.pagination] The footer's state, usually straight from usePagination:
+ *   `{ page, totalPages, pageSize, total, firstRow, lastRow, setPage, setPageSize }`, plus the
+ *   optional `pageSizes` and `mode` that AppTablePagination takes. The footer shows once `total`
+ *   is above 0 and stays in place while `loading`, so the table does not jump between pages.
  * @param {string} [props.ariaLabel]
  * @param {string} [props.className] Extra classes on the <table> (column/table styling).
  * @param {string} [props.wrapperClassName] Extra classes on the `.table-wrap` outer div — the

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

@@ -17,7 +17,8 @@
  * @param {boolean} [props.multiple=false]
  * @param {number} [props.maxFiles] Cap on total files in multiple mode.
  * @param {string} [props.accept=".jpg,.jpeg,.png"] Accepted file types (the `accept` attribute).
- * @param {number} [props.maxSizeMb] Defaults to the shared DEFAULT_MAX_SIZE_MB.
+ * @param {number} [props.maxSizeMb] Defaults to the shared DEFAULT_MAX_SIZE_MB. 0 means no size
+ *   limit: nothing is rejected for its size, and the hint names no size.
  * @param {boolean} [props.required]
  * @param {string} [props.error]
  * @param {string} [props.hint] Helper text below the control; an error (the caller's or a rejected

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/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,7 +9,6 @@ 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";
@@ -20,6 +19,7 @@ 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";