@xsolla/xui-b2c-top-navigation 0.0.0-stage → 0.223.0

package/README.md

@@ -1,3 +1,3 @@
-# Temporary Holding Version
+# @xsolla/xui-b2c-top-navigation
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+B2C desktop top navigation. Logo on the left; links, a currencies chip and avatar on the right. The Windows variant keeps the logo and adds back, breadcrumbs and window controls.

package/native/index.d.mts

@@ -0,0 +1,120 @@
+import React$1, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type TopNavigationPlatform = "web" | "windows";
+/**
+ * A link in the navigation bar. Pass `children` to turn the entry into a
+ * dropdown trigger; its children render as context-menu entries.
+ */
+interface TopNavigationItemData {
+    key: string;
+    label: string;
+    href?: string;
+    disabled?: boolean;
+    /**
+     * Leading icon (20px). Shown only while this item is the active page,
+     * matching the Figma Active menu point.
+     */
+    icon?: ReactNode;
+    /** Menu entries — when present the item renders as a dropdown trigger. */
+    children?: TopNavigationItemData[];
+    accessibilityLabel?: string;
+    testID?: string;
+    onPress?: () => void;
+}
+interface TopNavigationBreadcrumb {
+    key: string;
+    label: string;
+    href?: string;
+    onPress?: () => void;
+}
+/**
+ * One balance inside the currencies chip. The bar shows up to two, side by
+ * side, matching Figma `.currencies_profile`.
+ */
+interface TopNavigationCurrency {
+    /** Formatted balance, e.g. `"300"` or `"2k"`. */
+    amount: string;
+    /** Currency icon rendered at 18px before the amount. */
+    icon?: ReactNode;
+    /** Accessible name. Falls back to `amount`. */
+    accessibilityLabel?: string;
+    onPress?: () => void;
+}
+interface TopNavigationUser {
+    name: string;
+    /** Photo URL. Takes priority over `text` and `icon`. */
+    src?: string;
+    /**
+     * Initials, at most two characters. Used when there is no `src`.
+     * When both `src` and `text` are omitted, the user icon is shown.
+     */
+    text?: string;
+    /** Replaces the default user icon when there is no photo or initials. */
+    icon?: ReactNode;
+    onPress?: () => void;
+}
+interface TopNavigationWindowControls {
+    onMinimize?: () => void;
+    onMaximize?: () => void;
+    onClose?: () => void;
+}
+interface TopNavigationLinkProps {
+    item: TopNavigationItemData;
+    href?: string;
+    isActive: boolean;
+    disabled?: boolean;
+    onPress: () => void;
+    testID?: string;
+    children: ReactNode;
+}
+interface TopNavigationLogoContext {
+    /** True when the resolved theme is a dark theme. */
+    isDark: boolean;
+}
+interface TopNavigationProps extends ThemeOverrideProps {
+    /**
+     * `web` is logo plus the right-hand menu. `windows` keeps the logo, adds a
+     * back control and breadcrumbs beside it, and window controls on the right.
+     */
+    platform?: TopNavigationPlatform;
+    /**
+     * Logo slot, shown on both platforms. Pass a node, or a function that
+     * receives `{ isDark }` so the logo colour can follow the theme.
+     */
+    logo?: ReactNode | ((context: TopNavigationLogoContext) => ReactNode);
+    /** Primary navigation links. Items with `children` render as dropdowns. */
+    items?: TopNavigationItemData[];
+    /**
+     * Links rendered after a vertical divider (Figma "Extra Links").
+     * Dropdown entries are allowed here too.
+     */
+    extraItems?: TopNavigationItemData[];
+    /**
+     * Key of the active page. Only that item is drawn in the Active style.
+     * A dropdown trigger stays Non Active after an entry is chosen.
+     */
+    activeKey?: string;
+    onItemClick?: (item: TopNavigationItemData) => void;
+    linkComponent?: React.ComponentType<TopNavigationLinkProps>;
+    /** Show the links area. Defaults to `true`. */
+    showMenu?: boolean;
+    /** Balances inside the currencies chip. */
+    currencies?: TopNavigationCurrency[];
+    /** Account avatar beside the currencies chip. */
+    user?: TopNavigationUser;
+    /** Show the currencies chip and avatar. Defaults to `true`. */
+    showAccount?: boolean;
+    /** Windows platform: breadcrumb trail. The last entry is the current page. */
+    breadcrumbs?: TopNavigationBreadcrumb[];
+    /** Windows platform: back control beside the breadcrumbs. Hidden when omitted. */
+    onBack?: () => void;
+    /** Windows platform: window controls. Hidden when omitted. */
+    windowControls?: TopNavigationWindowControls;
+    "aria-label"?: string;
+    testID?: string;
+}
+
+declare const TopNavigation: React$1.FC<TopNavigationProps>;
+
+export { TopNavigation, type TopNavigationBreadcrumb, type TopNavigationCurrency, type TopNavigationItemData, type TopNavigationLinkProps, type TopNavigationLogoContext, type TopNavigationPlatform, type TopNavigationProps, type TopNavigationUser, type TopNavigationWindowControls };

package/native/index.d.ts

@@ -0,0 +1,120 @@
+import React$1, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type TopNavigationPlatform = "web" | "windows";
+/**
+ * A link in the navigation bar. Pass `children` to turn the entry into a
+ * dropdown trigger; its children render as context-menu entries.
+ */
+interface TopNavigationItemData {
+    key: string;
+    label: string;
+    href?: string;
+    disabled?: boolean;
+    /**
+     * Leading icon (20px). Shown only while this item is the active page,
+     * matching the Figma Active menu point.
+     */
+    icon?: ReactNode;
+    /** Menu entries — when present the item renders as a dropdown trigger. */
+    children?: TopNavigationItemData[];
+    accessibilityLabel?: string;
+    testID?: string;
+    onPress?: () => void;
+}
+interface TopNavigationBreadcrumb {
+    key: string;
+    label: string;
+    href?: string;
+    onPress?: () => void;
+}
+/**
+ * One balance inside the currencies chip. The bar shows up to two, side by
+ * side, matching Figma `.currencies_profile`.
+ */
+interface TopNavigationCurrency {
+    /** Formatted balance, e.g. `"300"` or `"2k"`. */
+    amount: string;
+    /** Currency icon rendered at 18px before the amount. */
+    icon?: ReactNode;
+    /** Accessible name. Falls back to `amount`. */
+    accessibilityLabel?: string;
+    onPress?: () => void;
+}
+interface TopNavigationUser {
+    name: string;
+    /** Photo URL. Takes priority over `text` and `icon`. */
+    src?: string;
+    /**
+     * Initials, at most two characters. Used when there is no `src`.
+     * When both `src` and `text` are omitted, the user icon is shown.
+     */
+    text?: string;
+    /** Replaces the default user icon when there is no photo or initials. */
+    icon?: ReactNode;
+    onPress?: () => void;
+}
+interface TopNavigationWindowControls {
+    onMinimize?: () => void;
+    onMaximize?: () => void;
+    onClose?: () => void;
+}
+interface TopNavigationLinkProps {
+    item: TopNavigationItemData;
+    href?: string;
+    isActive: boolean;
+    disabled?: boolean;
+    onPress: () => void;
+    testID?: string;
+    children: ReactNode;
+}
+interface TopNavigationLogoContext {
+    /** True when the resolved theme is a dark theme. */
+    isDark: boolean;
+}
+interface TopNavigationProps extends ThemeOverrideProps {
+    /**
+     * `web` is logo plus the right-hand menu. `windows` keeps the logo, adds a
+     * back control and breadcrumbs beside it, and window controls on the right.
+     */
+    platform?: TopNavigationPlatform;
+    /**
+     * Logo slot, shown on both platforms. Pass a node, or a function that
+     * receives `{ isDark }` so the logo colour can follow the theme.
+     */
+    logo?: ReactNode | ((context: TopNavigationLogoContext) => ReactNode);
+    /** Primary navigation links. Items with `children` render as dropdowns. */
+    items?: TopNavigationItemData[];
+    /**
+     * Links rendered after a vertical divider (Figma "Extra Links").
+     * Dropdown entries are allowed here too.
+     */
+    extraItems?: TopNavigationItemData[];
+    /**
+     * Key of the active page. Only that item is drawn in the Active style.
+     * A dropdown trigger stays Non Active after an entry is chosen.
+     */
+    activeKey?: string;
+    onItemClick?: (item: TopNavigationItemData) => void;
+    linkComponent?: React.ComponentType<TopNavigationLinkProps>;
+    /** Show the links area. Defaults to `true`. */
+    showMenu?: boolean;
+    /** Balances inside the currencies chip. */
+    currencies?: TopNavigationCurrency[];
+    /** Account avatar beside the currencies chip. */
+    user?: TopNavigationUser;
+    /** Show the currencies chip and avatar. Defaults to `true`. */
+    showAccount?: boolean;
+    /** Windows platform: breadcrumb trail. The last entry is the current page. */
+    breadcrumbs?: TopNavigationBreadcrumb[];
+    /** Windows platform: back control beside the breadcrumbs. Hidden when omitted. */
+    onBack?: () => void;
+    /** Windows platform: window controls. Hidden when omitted. */
+    windowControls?: TopNavigationWindowControls;
+    "aria-label"?: string;
+    testID?: string;
+}
+
+declare const TopNavigation: React$1.FC<TopNavigationProps>;
+
+export { TopNavigation, type TopNavigationBreadcrumb, type TopNavigationCurrency, type TopNavigationItemData, type TopNavigationLinkProps, type TopNavigationLogoContext, type TopNavigationPlatform, type TopNavigationProps, type TopNavigationUser, type TopNavigationWindowControls };