@webority/ui-react 0.25.0 → 0.26.1

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

@@ -20,42 +20,154 @@ export type NavItemShape = {
      */
     trailingIcon?: string | import('react').ReactNode;
     /**
-     * The current page — takes the brand tint + aria-current.
+     * Unset: decided from `currentPath`. true / false force it.
      */
     active?: boolean;
+    /**
+     * How `href` is matched against `currentPath` (default prefix).
+     */
+    match?: 'prefix' | 'exact';
+    /**
+     * Extra path prefixes that also make this item the current page.
+     */
+    matchAlso?: string[];
+    /**
+     * Also show this item in the phone bottom tab bar.
+     */
+    tab?: boolean;
+    /**
+     * A shorter label for the tab bar.
+     */
+    tabLabel?: string;
     /**
      * Sub-items — the row becomes an expandable parent.
      */
     children?: NavItemShape[];
 };
-/**
- * @typedef {object} NavItemShape
- * @property {string} [key]
- * @property {string} label
- * @property {string|import('react').ReactNode} [icon] library icon name, or a node, so a
- *   product with its own content-icon set (iconsax behind a product `Icon` seam) can use it.
- * @property {string} href
- * @property {import('react').ReactNode} [badge] A count or short status at the row's end.
- * @property {'danger'|'success'|'warning'} [badgeTone] Tints the badge for an alert count.
- * @property {string|import('react').ReactNode} [trailingIcon] A right-aligned secondary glyph (lock, external arrow, new dot).
- * @property {boolean} [active] The current page — takes the brand tint + aria-current.
- * @property {NavItemShape[]} [children] Sub-items — the row becomes an expandable parent.
- */
+export type UserMenuShape = {
+    /**
+     * The person's full name; the avatar's initials come from it.
+     */
+    name: string;
+    /**
+     * A second line: job title or signed-in role.
+     */
+    role?: string;
+    /**
+     * Profile photo URL.
+     */
+    photo?: string;
+    profileHref?: string;
+    /**
+     * Default "My profile".
+     */
+    profileLabel?: string;
+    /**
+     * Sign-out handler (a button).
+     */
+    onLogout?: () => void;
+    /**
+     * Or a URL a sign-out form POSTs to.
+     */
+    logoutAction?: string;
+    /**
+     * Default "Sign out".
+     */
+    logoutLabel?: string;
+    items?: {
+        key: string;
+        label?: string;
+        icon?: string;
+        href?: string;
+        onClick?: () => void;
+        divider?: true;
+    }[];
+};
+export type NotificationsShape = {
+    /**
+     * Unread count on the bell (99+ above 99).
+     */
+    unread?: number;
+    /**
+     * The list; undefined until loaded.
+     */
+    items?: {
+        id?: string;
+        title: string;
+        time?: string;
+        href?: string;
+        read?: boolean;
+        icon?: string;
+    }[];
+    loading?: boolean;
+    /**
+     * Called as the panel opens: load or refresh `items` here.
+     */
+    onOpen?: () => void;
+    /**
+     * Shows "Mark all read".
+     */
+    onMarkAllRead?: () => void;
+    viewAllHref?: string;
+    /**
+     * Default "Notifications".
+     */
+    label?: string;
+    /**
+     * Default "You are all caught up.".
+     */
+    emptyText?: string;
+};
+export type SearchShape = {
+    /**
+     * Controlled text.
+     */
+    value: string;
+    onChange: (value: string) => void;
+    /**
+     * Suggestion groups; null hides the list.
+     */
+    results?: {
+        label?: string;
+        hits: {
+            title: string;
+            href: string;
+            subtitle?: string;
+            icon?: string;
+        }[];
+    }[] | null;
+    loading?: boolean;
+    /**
+     * A suggestion was picked; preventDefault the event to route yourself.
+     */
+    onSelect?: (hit: object, event: Event) => void;
+    /**
+     * Enter with no suggestion chosen.
+     */
+    onSubmit?: (value: string) => void;
+    /**
+     * Default "Search"; also the field's accessible name.
+     */
+    placeholder?: string;
+};
 /**
  * The persistent frame every authenticated portal sits inside — a sidebar of
- * navigation, a sticky topbar, the routed content, and an optional footer.
+ * navigation, a sticky topbar, the routed content, an optional footer, and on a phone
+ * a bottom tab bar.
  *
  * Slot-based, not copy-own: what every product shares is the *structure* — the
  * breakpoint the sidebar collapses at, the drawer and its scrim, the 72px topbar,
- * the icon rail. What differs is only the content, which arrives as props. A
- * product that forked this would re-derive the responsive behaviour and drift.
+ * the icon rail, the tab bar. What differs is only the content, which arrives as props.
+ * The Razor `<app-shell>` renders the same markup and classes.
  *
  * Router-agnostic: pass `linkComponent` (react-router's `Link`) and nav items get
- * `to`; without it they render as plain `<a href>`, which is what Razor emits.
+ * `to`; without it they render as plain `<a href>`, which is what Razor emits. Pass
+ * `currentPath` (the router location) to let the shell pick the active item; without it
+ * each item's `active` decides, as before.
  *
  * @param {object} props
  * @param {{ label?: string, items: NavItemShape[] }[]} props.groups Nav groups, in order.
- *   Groups after the first are separated by a rule.
+ *   Groups after the first are separated by a rule. A group left with no items is not rendered.
  * @param {import('react').ReactNode} [props.brand] The logo row at the top of the sidebar.
  * @param {import('react').ReactNode} [props.sidebarStart] Between the brand row and the nav —
  *   a workspace/tenant switcher, an environment badge. Hidden on the collapsed rail.
@@ -65,16 +177,24 @@ export type NavItemShape = {
  *   to keep today's behaviour (nothing in that slot when collapsed).
  * @param {import('react').ReactNode} [props.sidebarFooter] Pinned below the scrolling nav.
  * @param {import('react').ReactNode} [props.topbarStart] Leading topbar slot — page title, crumbs.
- * @param {import('react').ReactNode} [props.topbarEnd] Trailing topbar slot — search, account menu.
+ * @param {import('react').ReactNode} [props.topbarEnd] Trailing topbar slot — page actions; the bell and account menu follow it.
  * @param {import('react').ReactNode} [props.footer]
  * @param {import('react').ReactNode} props.children The routed page.
  * @param {boolean} [props.collapsed] Controlled rail state. Omit to let the shell own it.
  * @param {(collapsed: boolean) => void} [props.onCollapsedChange]
- * @param {boolean} [props.noSidebar=false] Full-width, no side nav — a focused wizard.
+ * @param {boolean} [props.noSidebar=false] Full-width, no side nav — a focused wizard. No tab bar either.
  * @param {string} [props.navLabel='Main navigation']
+ * @param {string} [props.currentPath] The current location; items without `active` are matched against it.
+ * @param {boolean} [props.rememberCollapsed=false] Remember the uncontrolled rail state in a cookie.
+ * @param {string} [props.collapsedCookie='wui-shell-collapsed'] The cookie `rememberCollapsed` uses.
+ * @param {string} [props.tabBarLabel='Quick navigation'] Accessible name of the phone tab bar.
+ * @param {string} [props.moreLabel='More'] Label of the tab bar button that opens the drawer.
+ * @param {UserMenuShape} [props.userMenu] The account menu at the end of the topbar.
+ * @param {NotificationsShape} [props.notifications] The notification bell.
+ * @param {SearchShape} [props.search] The topbar search.
  * @param {string} [props.className]
  */
-export default function AppShell({ groups, brand, sidebarStart, sidebarStartCompact, sidebarFooter, topbarStart, topbarEnd, footer, children, collapsed, onCollapsedChange, noSidebar, navLabel, linkComponent: Link, className, ...rest }: {
+export default function AppShell({ groups, brand, sidebarStart, sidebarStartCompact, sidebarFooter, topbarStart, topbarEnd, footer, children, collapsed, onCollapsedChange, noSidebar, navLabel, linkComponent: Link, currentPath, rememberCollapsed, collapsedCookie, tabBarLabel, moreLabel, userMenu, notifications, search, className, ...rest }: {
     groups: {
         label?: string;
         items: NavItemShape[];
@@ -91,5 +211,13 @@ export default function AppShell({ groups, brand, sidebarStart, sidebarStartComp
     onCollapsedChange?: (collapsed: boolean) => void;
     noSidebar?: boolean;
     navLabel?: string;
+    currentPath?: string;
+    rememberCollapsed?: boolean;
+    collapsedCookie?: string;
+    tabBarLabel?: string;
+    moreLabel?: string;
+    userMenu?: UserMenuShape;
+    notifications?: NotificationsShape;
+    search?: SearchShape;
     className?: string;
 }): import("react").JSX.Element;

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

@@ -1,8 +1,19 @@
+/**
+ * Status pill. Decoupled: the caller supplies the display `label` + `tone` (an app maps
+ * its own status enum to these); the library owns only the presentation. Renders an
+ * em-dash when there is no label.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} [props.label]
+ * @param {string} [props.tone] Tone class suffix (e.g. success | warning | danger | info | neutral).
+ * @param {string} [props.className]
+ * @param {string} [props.tooltip] A collision-aware hover/focus tooltip (via AppTooltip / Popper) — flips to stay on-screen. Useful to spell out a terse status pill's full meaning.
+ * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.tooltipPlacement="auto"] Preferred tooltip side; `auto` picks the side with the most room.
+ */
 export default function AppStatusBadge({ label, tone, className, tooltip, tooltipPlacement, ...rest }: {
-    [x: string]: any;
-    className?: string;
-    label: any;
+    label?: import('react').ReactNode;
     tone?: string;
-    tooltip: any;
-    tooltipPlacement: any;
+    className?: string;
+    tooltip?: string;
+    tooltipPlacement?: "auto" | "top" | "bottom" | "start" | "end";
 }): any;

package/dist/types/components/iconCatalogFull/bold/a.g.d.ts

@@ -1,7 +1,5 @@
 export declare const FULL_VARIANT_GLYPHS: {
     aave: string;
-    add: string;
-    "add-circle": string;
     "add-square": string;
     additem: string;
     airdrop: string;
@@ -45,9 +43,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "arrow-down-3": string;
     "arrow-forward": string;
     "arrow-forward-square": string;
-    "arrow-left-2": string;
     "arrow-left-3": string;
-    "arrow-right-2": string;
     "arrow-right-3": string;
     "arrow-rotate-left": string;
     "arrow-rotate-right": string;
@@ -56,7 +52,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "arrow-square-left": string;
     "arrow-square-right": string;
     "arrow-square-up": string;
-    "arrow-swap-horizontal": string;
     "arrow-swap-vertical": string;
     "arrow-up-2": string;
     "arrow-up-3": string;

package/dist/types/components/iconCatalogFull/bold/c.g.d.ts

@@ -1,13 +1,9 @@
 export declare const FULL_VARIANT_GLYPHS: {
-    cake: string;
-    "calendar-1": string;
     "calendar-2": string;
-    "calendar-add": string;
     "calendar-circle": string;
     "calendar-edit": string;
     "calendar-remove": string;
     "calendar-search": string;
-    "calendar-tick": string;
     call: string;
     "call-add": string;
     "call-calling": string;
@@ -55,9 +51,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "clipboard-close": string;
     "clipboard-export": string;
     "clipboard-import": string;
-    "clipboard-text": string;
-    "clipboard-tick": string;
-    "close-circle": string;
     "close-square": string;
     "cloud-add": string;
     "cloud-change": string;
@@ -72,9 +65,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "cloud-remove": string;
     "cloud-snow": string;
     "cloud-sunny": string;
-    code: string;
     "code-1": string;
-    "code-circle": string;
     coffee: string;
     coin: string;
     "coin-1": string;
@@ -93,7 +84,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "copy-success": string;
     copyright: string;
     courthouse: string;
-    cpu: string;
     "cpu-charge": string;
     "cpu-setting": string;
     "creative-commons": string;

package/dist/types/components/iconCatalogFull/bold/d.g.d.ts

@@ -1,6 +1,5 @@
 export declare const FULL_VARIANT_GLYPHS: {
     dai: string;
-    danger: string;
     dash: string;
     data: string;
     "data-2": string;
@@ -28,19 +27,16 @@ export declare const FULL_VARIANT_GLYPHS: {
     "discount-shape": string;
     discover: string;
     dislike: string;
-    document: string;
     "document-cloud": string;
     "document-code": string;
     "document-code-2": string;
     "document-copy": string;
-    "document-download": string;
     "document-favorite": string;
     "document-filter": string;
     "document-forward": string;
     "document-like": string;
     "document-previous": string;
     "document-sketch": string;
-    "document-text": string;
     "document-text-1": string;
     "document-upload": string;
     "dollar-circle": string;

package/dist/types/components/iconCatalogFull/bold/e.g.d.ts

@@ -1,5 +1,4 @@
 export declare const FULL_VARIANT_GLYPHS: {
-    "edit-2": string;
     educare: string;
     electricity: string;
     element: string;
@@ -24,7 +23,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "eraser-square": string;
     ethereum: string;
     "ethereum-classic": string;
-    export: string;
     "export-circle": string;
     "export-curve": string;
     "export-square": string;

package/dist/types/components/iconCatalogFull/bold/f.g.d.ts

@@ -13,11 +13,9 @@ export declare const FULL_VARIANT_GLYPHS: {
     "finger-scan": string;
     firstline: string;
     "flag-2": string;
-    flash: string;
     "flash-circle": string;
     "flash-slash": string;
     flashy: string;
-    "folder-2": string;
     "folder-add": string;
     "folder-cloud": string;
     "folder-connection": string;

package/dist/types/components/iconCatalogFull/bold/h.g.d.ts

@@ -6,9 +6,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "hashtag-down": string;
     "hashtag-square": string;
     "hashtag-up": string;
-    headphone: string;
     headphones: string;
-    health: string;
     "heart-add": string;
     "heart-circle": string;
     "heart-edit": string;
@@ -18,14 +16,12 @@ export declare const FULL_VARIANT_GLYPHS: {
     "heart-tick": string;
     "hedera-hashgraph": string;
     hex: string;
-    hierarchy: string;
     "hierarchy-2": string;
     "hierarchy-3": string;
     "hierarchy-square": string;
     "hierarchy-square-2": string;
     "hierarchy-square-3": string;
     home: string;
-    "home-2": string;
     "home-3": string;
     "home-hashtag": string;
     "home-trend-down": string;

package/dist/types/components/iconCatalogFull/bold/k.g.d.ts

@@ -1,5 +1,4 @@
 export declare const FULL_VARIANT_GLYPHS: {
-    kanban: string;
     "key-square": string;
     keyboard: string;
     "keyboard-open": string;

package/dist/types/components/iconCatalogFull/bold/l.g.d.ts

@@ -5,7 +5,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "lamp-slash": string;
     "language-circle": string;
     "language-square": string;
-    layer: string;
     "layout-maximize": string;
     level: string;
     lifebuoy: string;
@@ -28,12 +27,9 @@ export declare const FULL_VARIANT_GLYPHS: {
     "location-minus": string;
     "location-slash": string;
     "location-tick": string;
-    "lock-1": string;
     "lock-circle": string;
     "lock-slash": string;
-    login: string;
     "login-curve": string;
-    logout: string;
     "logout-curve": string;
     lovely: string;
 };

package/dist/types/components/iconCatalogFull/bold/m.g.d.ts

@@ -28,10 +28,8 @@ export declare const FULL_VARIANT_GLYPHS: {
     "message-minus": string;
     "message-notif": string;
     "message-programming": string;
-    "message-question": string;
     "message-remove": string;
     "message-search": string;
-    "message-text": string;
     "message-text-1": string;
     "message-tick": string;
     "message-time": string;
@@ -67,7 +65,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "money-tick": string;
     "money-time": string;
     moneys: string;
-    monitor: string;
     "monitor-mobbile": string;
     "monitor-recorder": string;
     more: string;

package/dist/types/components/iconCatalogFull/bold/n.g.d.ts

@@ -12,7 +12,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "note-text": string;
     notepad: string;
     "notepad-2": string;
-    notification: string;
     "notification-1": string;
     "notification-bing": string;
     "notification-circle": string;

package/dist/types/components/iconCatalogFull/bold/p.g.d.ts

@@ -12,7 +12,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "pen-close": string;
     "pen-remove": string;
     "pen-tool-2": string;
-    people: string;
     "percentage-circle": string;
     "percentage-square": string;
     personalcard: string;
@@ -34,7 +33,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     profile: string;
     "profile-2-user": string;
     "profile-add": string;
-    "profile-circle": string;
     "profile-delete": string;
     "profile-remove": string;
     "profile-tick": string;

package/dist/types/components/iconCatalogFull/bold/r.g.d.ts

@@ -5,7 +5,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     ram: string;
     "ram-2": string;
     rank: string;
-    ranking: string;
     "receipt-1": string;
     "receipt-2": string;
     "receipt-21": string;
@@ -24,7 +23,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     record: string;
     "record-circle": string;
     "recovery-convert": string;
-    refresh: string;
     "refresh-2": string;
     "refresh-circle": string;
     "refresh-left-square": string;

package/dist/types/components/iconCatalogFull/bold/s.g.d.ts

@@ -14,7 +14,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     scroll: string;
     "search-favorite": string;
     "search-favorite-1": string;
-    "search-normal": string;
     "search-normal-1": string;
     "search-status": string;
     "search-status-1": string;
@@ -29,7 +28,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "security-user": string;
     "send-2": string;
     setting: string;
-    "setting-2": string;
     "setting-3": string;
     "setting-4": string;
     "setting-5": string;
@@ -40,7 +38,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "shield-search": string;
     "shield-security": string;
     "shield-slash": string;
-    "shield-tick": string;
     ship: string;
     "shop-add": string;
     "shop-remove": string;

package/dist/types/components/iconCatalogFull/bold/t.g.d.ts

@@ -5,8 +5,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "tag-cross": string;
     "tag-right": string;
     "tag-user": string;
-    task: string;
-    "task-square": string;
     teacher: string;
     tenx: string;
     tether: string;
@@ -23,7 +21,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "the-graph": string;
     theta: string;
     thorchain: string;
-    "tick-circle": string;
     "tick-square": string;
     ticket: string;
     "ticket-2": string;
@@ -44,7 +41,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     transmit: string;
     "transmit-sqaure-2": string;
     "transmit-square": string;
-    trash: string;
     tree: string;
     trello: string;
     "trend-down": string;

package/dist/types/components/iconCatalogFull/bold/u.g.d.ts

@@ -5,7 +5,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "usd-coin": string;
     "user-add": string;
     "user-cirlce-add": string;
-    "user-edit": string;
     "user-octagon": string;
     "user-remove": string;
     "user-search": string;

package/dist/types/components/iconCatalogFull/bold/v.g.d.ts

@@ -20,6 +20,5 @@ export declare const FULL_VARIANT_GLYPHS: {
     "volume-cross": string;
     "volume-low": string;
     "volume-low-1": string;
-    "volume-slash": string;
     "volume-up": string;
 };

package/dist/types/components/iconCatalogFull/bold/w.g.d.ts

@@ -12,7 +12,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "wallet-search": string;
     wanchain: string;
     "wanchain-1": string;
-    "warning-2": string;
     watch: string;
     "watch-status": string;
     weight: string;

package/dist/types/components/iconCatalogFull/broken/a.g.d.ts

@@ -1,7 +1,5 @@
 export declare const FULL_VARIANT_GLYPHS: {
     aave: string;
-    add: string;
-    "add-circle": string;
     "add-square": string;
     additem: string;
     airdrop: string;
@@ -45,9 +43,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "arrow-down-3": string;
     "arrow-forward": string;
     "arrow-forward-square": string;
-    "arrow-left-2": string;
     "arrow-left-3": string;
-    "arrow-right-2": string;
     "arrow-right-3": string;
     "arrow-rotate-left": string;
     "arrow-rotate-right": string;
@@ -56,7 +52,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "arrow-square-left": string;
     "arrow-square-right": string;
     "arrow-square-up": string;
-    "arrow-swap-horizontal": string;
     "arrow-swap-vertical": string;
     "arrow-up-2": string;
     "arrow-up-3": string;

package/dist/types/components/iconCatalogFull/broken/c.g.d.ts

@@ -1,13 +1,9 @@
 export declare const FULL_VARIANT_GLYPHS: {
-    cake: string;
-    "calendar-1": string;
     "calendar-2": string;
-    "calendar-add": string;
     "calendar-circle": string;
     "calendar-edit": string;
     "calendar-remove": string;
     "calendar-search": string;
-    "calendar-tick": string;
     call: string;
     "call-add": string;
     "call-calling": string;
@@ -55,9 +51,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "clipboard-close": string;
     "clipboard-export": string;
     "clipboard-import": string;
-    "clipboard-text": string;
-    "clipboard-tick": string;
-    "close-circle": string;
     "close-square": string;
     "cloud-add": string;
     "cloud-change": string;
@@ -72,9 +65,7 @@ export declare const FULL_VARIANT_GLYPHS: {
     "cloud-remove": string;
     "cloud-snow": string;
     "cloud-sunny": string;
-    code: string;
     "code-1": string;
-    "code-circle": string;
     coffee: string;
     coin: string;
     "coin-1": string;
@@ -93,7 +84,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "copy-success": string;
     copyright: string;
     courthouse: string;
-    cpu: string;
     "cpu-charge": string;
     "cpu-setting": string;
     "creative-commons": string;

package/dist/types/components/iconCatalogFull/broken/d.g.d.ts

@@ -1,6 +1,5 @@
 export declare const FULL_VARIANT_GLYPHS: {
     dai: string;
-    danger: string;
     dash: string;
     data: string;
     "data-2": string;
@@ -28,19 +27,16 @@ export declare const FULL_VARIANT_GLYPHS: {
     "discount-shape": string;
     discover: string;
     dislike: string;
-    document: string;
     "document-cloud": string;
     "document-code": string;
     "document-code-2": string;
     "document-copy": string;
-    "document-download": string;
     "document-favorite": string;
     "document-filter": string;
     "document-forward": string;
     "document-like": string;
     "document-previous": string;
     "document-sketch": string;
-    "document-text": string;
     "document-text-1": string;
     "document-upload": string;
     "dollar-circle": string;

package/dist/types/components/iconCatalogFull/broken/e.g.d.ts

@@ -1,5 +1,4 @@
 export declare const FULL_VARIANT_GLYPHS: {
-    "edit-2": string;
     educare: string;
     electricity: string;
     element: string;
@@ -24,7 +23,6 @@ export declare const FULL_VARIANT_GLYPHS: {
     "eraser-square": string;
     ethereum: string;
     "ethereum-classic": string;
-    export: string;
     "export-circle": string;
     "export-curve": string;
     "export-square": string;