@natsuneko-laboratory/react-native-desktop-navigation 0.1.0-alpha.12

package/dist/core/types.d.ts

@@ -0,0 +1,155 @@
+import type React from 'react';
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { ParamListBase, RouteName, RouteArgs, NavigationRoute, NavigationState, NavigationAction, RootNavigationState } from '../routers';
+import type { NavigationEvent, NavigationEventType } from './store';
+export interface Navigation<P extends ParamListBase = ParamListBase> {
+    navigate(...args: RouteArgs<P>): void;
+    goBack(): void;
+    goForward(): void;
+    canGoBack(): boolean;
+    canGoForward(): boolean;
+    dispatch(action: NavigationAction): void;
+    getState(): NavigationState;
+    getParent(): Navigation | undefined;
+    isFocused(): boolean;
+    addListener(type: NavigationEventType, listener: (event: NavigationEvent) => void): () => void;
+}
+export interface StackNavigation<P extends ParamListBase = ParamListBase> extends Navigation<P> {
+    push(...args: RouteArgs<P>): void;
+    replace(...args: RouteArgs<P>): void;
+    pop(count?: number): void;
+    popTo(...args: RouteArgs<P>): void;
+    popToRoot(): void;
+}
+export interface SidebarNavigation<P extends ParamListBase = ParamListBase> extends Navigation<P> {
+    select(name: RouteName<P>): void;
+    collapseSidebar(): void;
+    expandSidebar(): void;
+    toggleSidebar(): void;
+}
+export interface TabNavigation<P extends ParamListBase = ParamListBase> extends Navigation<P> {
+    select(name: RouteName<P>): void;
+    nextTab(): void;
+    previousTab(): void;
+}
+export type StackScreenProps<P extends ParamListBase, N extends RouteName<P>> = {
+    navigation: StackNavigation<P>;
+    route: NavigationRoute<N, P[N]>;
+};
+export type SidebarScreenProps<P extends ParamListBase, N extends RouteName<P>> = {
+    navigation: SidebarNavigation<P>;
+    route: NavigationRoute<N, P[N]>;
+};
+export type TabScreenProps<P extends ParamListBase, N extends RouteName<P>> = {
+    navigation: TabNavigation<P>;
+    route: NavigationRoute<N, P[N]>;
+};
+export type FocusBehavior = 'none' | 'first' | 'restore';
+export interface CommonScreenOptions {
+    title?: string;
+    focusBehavior?: FocusBehavior;
+    inactiveBehavior?: 'keep' | 'unmount';
+    contentStyle?: StyleProp<ViewStyle>;
+    sceneStyle?: StyleProp<ViewStyle>;
+}
+export interface HeaderActionProps {
+    navigation: StackNavigation;
+    route: NavigationRoute;
+    canGoBack: boolean;
+}
+export interface HeaderProps extends HeaderActionProps {
+    options: StackScreenOptions;
+}
+export type StackAnimation = 'default' | 'none' | 'fade' | 'slide-horizontal' | 'slide-vertical';
+export interface StackScreenOptions extends CommonScreenOptions {
+    headerShown?: boolean;
+    headerStyle?: StyleProp<ViewStyle>;
+    headerTitleStyle?: StyleProp<TextStyle>;
+    headerLeftContainerStyle?: StyleProp<ViewStyle>;
+    headerRightContainerStyle?: StyleProp<ViewStyle>;
+    headerBackButtonStyle?: StyleProp<ViewStyle>;
+    headerBackTitleStyle?: StyleProp<TextStyle>;
+    headerBackTitle?: string;
+    headerTintColor?: string;
+    overlayStyle?: StyleProp<ViewStyle>;
+    dialogStyle?: StyleProp<ViewStyle>;
+    header?: React.ReactNode | ((props: HeaderProps) => React.ReactNode);
+    headerLeft?: React.ReactNode | ((props: HeaderActionProps) => React.ReactNode);
+    headerRight?: React.ReactNode | ((props: HeaderActionProps) => React.ReactNode);
+    animation?: StackAnimation;
+    presentation?: 'card' | 'modal' | 'dialog';
+}
+export interface NavigationItemState {
+    selected: boolean;
+    /** Keyboard/native focus, independent of selection. */
+    focused: boolean;
+    pressed: boolean;
+    hovered: boolean;
+    disabled: boolean;
+    collapsed: boolean;
+}
+export type NavigationItemStyle<T extends ViewStyle | TextStyle> = StyleProp<T> | ((state: NavigationItemState) => StyleProp<T>);
+export interface NavigationItemContentProps extends NavigationItemState {
+    route: NavigationRoute;
+    label: string;
+    /** Default icon, label, and badge, with their configured styles. */
+    children: React.ReactNode;
+}
+export interface SidebarFooterProps {
+    collapsed: boolean;
+    collapseSidebar(): void;
+    expandSidebar(): void;
+    toggleSidebar(): void;
+    /** The complete default collapse button, or null when it is hidden. */
+    children: React.ReactNode;
+}
+export interface SidebarSectionOptions {
+    title?: string;
+    style?: StyleProp<ViewStyle>;
+    titleStyle?: StyleProp<TextStyle>;
+    renderTitle?: (props: {
+        title: string;
+    }) => React.ReactNode;
+}
+export interface SidebarScreenOptions extends CommonScreenOptions {
+    itemStyle?: NavigationItemStyle<ViewStyle>;
+    labelStyle?: NavigationItemStyle<TextStyle>;
+    iconContainerStyle?: NavigationItemStyle<ViewStyle>;
+    badgeStyle?: NavigationItemStyle<TextStyle>;
+    renderItemContent?: (props: NavigationItemContentProps) => React.ReactNode;
+    label?: string;
+    icon?: React.ReactNode | ((props: {
+        focused: boolean;
+        disabled: boolean;
+    }) => React.ReactNode);
+    badge?: React.ReactNode;
+    hidden?: boolean;
+    disabled?: boolean;
+}
+export interface TabScreenOptions extends SidebarScreenOptions {
+}
+export interface NavigationTheme {
+    dark: boolean;
+    colors: {
+        background: string;
+        surface: string;
+        text: string;
+        mutedText: string;
+        border: string;
+        accent: string;
+        selectedBackground: string;
+    };
+}
+export interface NavigationRef<P extends ParamListBase> {
+    current: NavigationRefHandle<P> | null;
+    isReady(): boolean;
+    navigate(...args: RouteArgs<P>): void;
+    goBack(): void;
+    goForward(): void;
+    canGoBack(): boolean;
+    canGoForward(): boolean;
+    dispatch(action: NavigationAction): void;
+    getRootState(): RootNavigationState | undefined;
+}
+export interface NavigationRefHandle<P extends ParamListBase> extends Omit<NavigationRef<P>, 'current'> {
+}

package/dist/core/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export { NavigationContainer, type NavigationContainerProps, type KeyboardShortcutOptions, } from './core/NavigationContainer';
+export { createNavigationRef } from './core/navigation';
+export { useNavigation, useRoute, useNavigationState, useFocusEffect, useIsFocused, } from './core/hooks';
+export { NavigationFocusable, type FocusTarget } from './core/focus';
+export { DefaultTheme, useNavigationTheme } from './core/context';
+export { NavigationStore, serializeNavigationState, restoreNavigationState, type NavigationEvent, type NavigationEventType, } from './core/store';
+export * from './core/types';
+export * from './routers';
+export * from './stack';
+export * from './sidebar';
+export * from './tabs';
+export * from './split';
+export { macosAdapter } from './platform/macos';
+export { windowsAdapter } from './platform/windows';
+export { type NavigationPlatformAdapter, type KeyboardShortcut, type DesktopKeyEvent, type TransitionPreset, } from './platform';

package/dist/index.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.windowsAdapter = exports.macosAdapter = exports.restoreNavigationState = exports.serializeNavigationState = exports.NavigationStore = exports.useNavigationTheme = exports.DefaultTheme = exports.NavigationFocusable = exports.useIsFocused = exports.useFocusEffect = exports.useNavigationState = exports.useRoute = exports.useNavigation = exports.createNavigationRef = exports.NavigationContainer = void 0;
+var NavigationContainer_1 = require("./core/NavigationContainer");
+Object.defineProperty(exports, "NavigationContainer", { enumerable: true, get: function () { return NavigationContainer_1.NavigationContainer; } });
+var navigation_1 = require("./core/navigation");
+Object.defineProperty(exports, "createNavigationRef", { enumerable: true, get: function () { return navigation_1.createNavigationRef; } });
+var hooks_1 = require("./core/hooks");
+Object.defineProperty(exports, "useNavigation", { enumerable: true, get: function () { return hooks_1.useNavigation; } });
+Object.defineProperty(exports, "useRoute", { enumerable: true, get: function () { return hooks_1.useRoute; } });
+Object.defineProperty(exports, "useNavigationState", { enumerable: true, get: function () { return hooks_1.useNavigationState; } });
+Object.defineProperty(exports, "useFocusEffect", { enumerable: true, get: function () { return hooks_1.useFocusEffect; } });
+Object.defineProperty(exports, "useIsFocused", { enumerable: true, get: function () { return hooks_1.useIsFocused; } });
+var focus_1 = require("./core/focus");
+Object.defineProperty(exports, "NavigationFocusable", { enumerable: true, get: function () { return focus_1.NavigationFocusable; } });
+var context_1 = require("./core/context");
+Object.defineProperty(exports, "DefaultTheme", { enumerable: true, get: function () { return context_1.DefaultTheme; } });
+Object.defineProperty(exports, "useNavigationTheme", { enumerable: true, get: function () { return context_1.useNavigationTheme; } });
+var store_1 = require("./core/store");
+Object.defineProperty(exports, "NavigationStore", { enumerable: true, get: function () { return store_1.NavigationStore; } });
+Object.defineProperty(exports, "serializeNavigationState", { enumerable: true, get: function () { return store_1.serializeNavigationState; } });
+Object.defineProperty(exports, "restoreNavigationState", { enumerable: true, get: function () { return store_1.restoreNavigationState; } });
+__exportStar(require("./core/types"), exports);
+__exportStar(require("./routers"), exports);
+__exportStar(require("./stack"), exports);
+__exportStar(require("./sidebar"), exports);
+__exportStar(require("./tabs"), exports);
+__exportStar(require("./split"), exports);
+var macos_1 = require("./platform/macos");
+Object.defineProperty(exports, "macosAdapter", { enumerable: true, get: function () { return macos_1.macosAdapter; } });
+var windows_1 = require("./platform/windows");
+Object.defineProperty(exports, "windowsAdapter", { enumerable: true, get: function () { return windows_1.windowsAdapter; } });

package/dist/native/host.d.ts

@@ -0,0 +1,100 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle, type LayoutChangeEvent } from 'react-native';
+import type { ResolvedNativeIcon } from './icons';
+export interface NativeAppearance {
+    /**
+     * Hex colors, e.g. #202124 or #202124ff. Native controls retain OS interaction states.
+     * `null` skips the Container theme and uses the OS default (e.g. the macOS
+     * sidebar material, the system accent color, or the adaptive label color).
+     */
+    backgroundColor?: string | null;
+    foregroundColor?: string | null;
+    accentColor?: string | null;
+    sidebarBackgroundColor?: string | null;
+}
+export interface NativeItem {
+    key: string;
+    title: string;
+    disabled?: boolean;
+    hidden?: boolean;
+    section?: string;
+    icon?: ResolvedNativeIcon;
+    badge?: string;
+}
+export interface NativeColumn {
+    key: string;
+    width: number;
+    minWidth: number;
+    maxWidth?: number;
+}
+export interface NativeConfiguration {
+    mode: 'stack' | 'sidebar' | 'split';
+    items: NativeItem[];
+    activeKey: string;
+    appearance?: NativeAppearance;
+    headerShown?: boolean;
+    canGoBack?: boolean;
+    backTitle?: string;
+    collapsed?: boolean;
+    paneWidth?: number;
+    /** Height reserved below the sidebar list for a React footer. */
+    footerHeight?: number;
+    columns?: NativeColumn[];
+}
+export type NativeRequest = {
+    type: 'back';
+} | {
+    type: 'pop';
+    count: number;
+} | {
+    type: 'select';
+    key: string;
+} | {
+    type: 'collapse';
+    collapsed: boolean;
+} | {
+    type: 'resize';
+    key: string;
+    width: number;
+};
+export interface NativeRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface NativeIconFrame {
+    frame: NativeRect;
+    clip: NativeRect;
+}
+interface LayoutEvent {
+    type: 'layout';
+    revision: number;
+    frames: Record<string, NativeRect>;
+    iconFrames?: Record<string, NativeIconFrame>;
+    footerFrame?: NativeRect;
+}
+export declare function parseNativeEvent(payload: string): (NativeRequest & {
+    revision: number;
+}) | LayoutEvent | null;
+export interface NativeSurfaceProps {
+    configuration: NativeConfiguration;
+    slots: {
+        key: string;
+        visible: boolean;
+        content: React.ReactNode | ((ready: boolean) => React.ReactNode);
+    }[];
+    icons?: {
+        key: string;
+        content: React.ReactElement;
+    }[];
+    /** Interactive React content placed in the native footer region. */
+    footer?: React.ReactNode;
+    onFooterHeight?: (height: number) => void;
+    style?: StyleProp<ViewStyle>;
+    onRequest: (request: NativeRequest) => void;
+    onLayout?: (event: LayoutChangeEvent) => void;
+    onMeasurements?: (frames: Record<string, NativeRect>) => void;
+}
+export declare function NativeSurface({ configuration, slots, icons, footer, onFooterHeight, style, onRequest, onLayout, onMeasurements, }: NativeSurfaceProps): React.JSX.Element;
+export {};

package/dist/native/host.js

@@ -0,0 +1,190 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseNativeEvent = parseNativeEvent;
+exports.NativeSurface = NativeSurface;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const DesktopNavigationHostNativeComponent_1 = __importDefault(require("./specs/DesktopNavigationHostNativeComponent"));
+const context_1 = require("../core/context");
+function isRect(frame) {
+    return (!!frame &&
+        ['x', 'y', 'width', 'height'].every((key) => typeof frame[key] === 'number' && Number.isFinite(frame[key])) &&
+        frame.width >= 0 &&
+        frame.height >= 0);
+}
+// Keep native event payloads at this boundary. Native UI requests changes; the
+// Store decides whether to accept them. Never restore a native state snapshot.
+function parseNativeEvent(payload) {
+    let value;
+    try {
+        value = JSON.parse(payload);
+    }
+    catch {
+        return null;
+    }
+    if (!value ||
+        typeof value !== 'object' ||
+        !Number.isSafeInteger(value.revision))
+        return null;
+    switch (value.type) {
+        case 'back':
+            return value;
+        case 'pop':
+            return Number.isSafeInteger(value.count) && value.count > 0
+                ? value
+                : null;
+        case 'select':
+            return typeof value.key === 'string' ? value : null;
+        case 'collapse':
+            return typeof value.collapsed === 'boolean' ? value : null;
+        case 'resize':
+            return typeof value.key === 'string' &&
+                Number.isFinite(value.width) &&
+                value.width >= 0
+                ? value
+                : null;
+        case 'layout':
+            if (!Number.isSafeInteger(value.revision) ||
+                !value.frames ||
+                typeof value.frames !== 'object' ||
+                Array.isArray(value.frames))
+                return null;
+            if (!Object.values(value.frames).every(isRect))
+                return null;
+            if (value.iconFrames !== undefined &&
+                (!value.iconFrames ||
+                    typeof value.iconFrames !== 'object' ||
+                    Array.isArray(value.iconFrames) ||
+                    !Object.values(value.iconFrames).every((entry) => entry && isRect(entry.frame) && isRect(entry.clip))))
+                return null;
+            if (value.footerFrame !== undefined && !isRect(value.footerFrame))
+                return null;
+            return value;
+        default:
+            return null;
+    }
+}
+function NativeSurface({ configuration, slots, icons = [], footer, onFooterHeight, style, onRequest, onLayout, onMeasurements, }) {
+    if (react_native_1.Platform.OS !== 'macos' && react_native_1.Platform.OS !== 'windows')
+        throw new Error('Desktop native navigation supports macOS and Windows only.');
+    if (!globalThis.nativeFabricUIManager)
+        throw new Error('Desktop native navigation requires Fabric (New Architecture).');
+    if (!react_native_1.UIManager.hasViewManagerConfig('DesktopNavigationHost'))
+        throw new Error('DesktopNavigationHost is not registered. Install the desktop native sources, enable Fabric, and rebuild the app. See the /native installation guide.');
+    const { colors } = (0, context_1.useNavigationTheme)();
+    // Omitted keys fall back to OS defaults natively, so `null` is simply dropped.
+    const appearance = Object.fromEntries(Object.entries({
+        backgroundColor: colors.background,
+        foregroundColor: colors.text,
+        accentColor: colors.accent,
+        sidebarBackgroundColor: colors.surface,
+        ...configuration.appearance,
+    }).filter(([, color]) => color != null));
+    configuration = { ...configuration, appearance };
+    for (const color of Object.values(appearance)) {
+        if (typeof color !== 'string' ||
+            !/^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(color))
+            throw new Error('Native navigation appearance requires #RRGGBB or #RRGGBBAA colors.');
+    }
+    const [acknowledgement, acknowledge] = react_1.default.useReducer((n) => n + 1, 0);
+    const serialized = JSON.stringify(configuration);
+    const version = react_1.default.useRef({ serialized, acknowledgement, revision: 0 });
+    if (version.current.serialized !== serialized ||
+        version.current.acknowledgement !== acknowledgement) {
+        version.current = {
+            serialized,
+            acknowledgement,
+            revision: version.current.revision + 1,
+        };
+    }
+    const revision = version.current.revision;
+    const [layout, setLayout] = react_1.default.useState(null);
+    const footerFrame = layout?.footerFrame;
+    const footerPlaced = !!footerFrame && footerFrame.width > 0;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, style], onLayout: onLayout, children: [(0, jsx_runtime_1.jsx)(DesktopNavigationHostNativeComponent_1.default, { style: react_native_1.StyleSheet.absoluteFillObject, configuration: JSON.stringify({ ...configuration, revision }), onNavigationEvent: (event) => {
+                    const message = parseNativeEvent(event.nativeEvent.payload);
+                    if (!message || message.revision !== revision)
+                        return;
+                    if (message.type === 'layout') {
+                        onMeasurements?.(message.frames);
+                        setLayout((previous) => JSON.stringify(previous) === JSON.stringify(message)
+                            ? previous
+                            : message);
+                    }
+                    else {
+                        onRequest(message);
+                        // Also send an acknowledgement after vetoed/no-op actions so that
+                        // optimistic native selection/open state is rolled back.
+                        acknowledge();
+                    }
+                } }), (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", style: react_native_1.StyleSheet.absoluteFillObject, children: slots.map((slot) => {
+                    const frame = layout?.frames[slot.key];
+                    const visible = slot.visible && !!frame && frame.width > 0 && frame.height > 0;
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { collapsable: false, pointerEvents: visible ? 'auto' : 'none', accessibilityElementsHidden: !visible, importantForAccessibility: visible ? 'auto' : 'no-hide-descendants', style: [
+                            styles.slot,
+                            frame && {
+                                left: frame.x,
+                                top: frame.y,
+                                width: frame.width,
+                                height: frame.height,
+                            },
+                            !visible && styles.hidden,
+                        ], children: typeof slot.content === 'function'
+                            ? slot.content(visible)
+                            : slot.content }, slot.key));
+                }) }), footer != null && footer !== false && (
+            // Measured at its natural height so native can reserve exactly that
+            // much space; kept invisible until native reports the reserved frame.
+            (0, jsx_runtime_1.jsx)(react_native_1.View, { collapsable: false, pointerEvents: footerPlaced ? 'box-none' : 'none', accessibilityElementsHidden: !footerPlaced, importantForAccessibility: footerPlaced ? 'auto' : 'no-hide-descendants', onLayout: (event) => onFooterHeight?.(event.nativeEvent.layout.height), style: [
+                    styles.footer,
+                    footerPlaced
+                        ? {
+                            left: footerFrame.x,
+                            top: footerFrame.y,
+                            width: footerFrame.width,
+                        }
+                        : {
+                            left: 0,
+                            top: 0,
+                            width: configuration.paneWidth ?? 240,
+                            opacity: 0,
+                        },
+                ], children: footer })), (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", accessible: false, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: react_native_1.StyleSheet.absoluteFillObject, children: icons.map((icon) => {
+                    // Never display a removed/resized icon at a previous revision's position.
+                    const geometry = layout?.revision === revision
+                        ? layout.iconFrames?.[icon.key]
+                        : undefined;
+                    if (!geometry ||
+                        geometry.clip.width <= 0 ||
+                        geometry.clip.height <= 0)
+                        return null;
+                    const { frame, clip } = geometry;
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { collapsable: false, pointerEvents: "none", style: [
+                            styles.slot,
+                            {
+                                left: clip.x,
+                                top: clip.y,
+                                width: clip.width,
+                                height: clip.height,
+                            },
+                        ], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: {
+                                position: 'absolute',
+                                left: frame.x - clip.x,
+                                top: frame.y - clip.y,
+                                width: frame.width,
+                                height: frame.height,
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: icon.content }) }, icon.key));
+                }) })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1, overflow: 'hidden' },
+    slot: { position: 'absolute', overflow: 'hidden' },
+    footer: { position: 'absolute' },
+    hidden: { display: 'none' },
+});

package/dist/native/icons.d.ts

@@ -0,0 +1,56 @@
+import { type ReactElement } from 'react';
+/** Serializable alternatives to React elements inside native menu controls. */
+export type NativeSidebarIcon = (({
+    type: 'system';
+} & ({
+    /** SF Symbols name. */
+    macos: string;
+    /** Unicode glyph; fontFamily defaults to WinUI's system icon font. */
+    windows?: {
+        glyph: string;
+        fontFamily?: string;
+    };
+} | {
+    macos?: string;
+    windows: {
+        glyph: string;
+        fontFamily?: string;
+    };
+})) | {
+    type: 'image';
+    /** Metro require('./icon.png') or a native-readable image URI. */
+    source: number | {
+        uri: string;
+    };
+    /** Tint the image as a monochrome template (default: false). */
+    template?: boolean;
+}) & {
+    /** Logical points / DIPs, default 16. */
+    size?: number;
+    /** #RRGGBB or #RRGGBBAA; omitted colors follow native item styling. */
+    color?: string;
+};
+export interface NativeSidebarIconState {
+    /** Selected route, matching the JS Sidebar's icon callback. */
+    focused: boolean;
+    disabled: boolean;
+}
+export type NativeSidebarIconOption = NativeSidebarIcon | ReactElement | null | ((state: NativeSidebarIconState) => NativeSidebarIcon | ReactElement | null);
+export type ResolvedNativeIcon = ({
+    type: 'react';
+} | {
+    type: 'symbol';
+    name: string;
+} | {
+    type: 'font';
+    glyph: string;
+    fontFamily?: string;
+} | {
+    type: 'image';
+    uri: string;
+    template: boolean;
+}) & {
+    size: number;
+    color?: string;
+};
+export declare function resolveNativeIcon(option: NativeSidebarIconOption | undefined, state: NativeSidebarIconState, reactSize?: number): ResolvedNativeIcon | undefined;

package/dist/native/icons.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveNativeIcon = resolveNativeIcon;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+function resolveNativeIcon(option, state, reactSize = 24) {
+    const icon = typeof option === 'function' ? option(state) : option;
+    if (icon == null)
+        return undefined;
+    const element = (0, react_1.isValidElement)(icon);
+    const size = element ? reactSize : (icon.size ?? 16);
+    if (!Number.isFinite(size) || size <= 0)
+        throw new Error('Native sidebar icon size must be a positive finite number.');
+    if (element)
+        return { type: 'react', size };
+    if (icon.color !== undefined &&
+        !/^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(icon.color))
+        throw new Error('Native sidebar icon color requires #RRGGBB or #RRGGBBAA.');
+    const style = { size, color: icon.color };
+    if (icon.type === 'system') {
+        if (react_native_1.Platform.OS === 'macos') {
+            if (icon.macos === undefined)
+                return undefined;
+            if (typeof icon.macos !== 'string' || !icon.macos.trim())
+                throw new Error('Native sidebar SF Symbols name must be a non-empty string.');
+            return { ...style, type: 'symbol', name: icon.macos };
+        }
+        if (!icon.windows)
+            return undefined;
+        if (typeof icon.windows.glyph !== 'string' || !icon.windows.glyph.trim())
+            throw new Error('Native sidebar font icon requires a Unicode glyph.');
+        return {
+            ...style,
+            type: 'font',
+            glyph: icon.windows.glyph,
+            fontFamily: icon.windows.fontFamily,
+        };
+    }
+    if (icon.type !== 'image')
+        throw new Error('Native sidebar icons must be React elements, system descriptors or image descriptors.');
+    const source = react_native_1.Image.resolveAssetSource(icon.source);
+    if (!source?.uri || typeof source.uri !== 'string')
+        throw new Error('Native sidebar image could not be resolved to a URI.');
+    const protocols = react_native_1.Platform.OS === 'macos'
+        ? /^(https?|file):\/\//i
+        : /^(https?|file|ms-appx|ms-appdata):\/\//i;
+    if (!protocols.test(source.uri))
+        throw new Error('Native sidebar images require an HTTP(S), file, or Windows ms-appx/ms-appdata URI.');
+    return {
+        ...style,
+        type: 'image',
+        uri: source.uri,
+        template: icon.template ?? false,
+    };
+}

package/dist/native/index.d.ts

@@ -0,0 +1,13 @@
+export { NavigationContainer, type NavigationContainerProps, type KeyboardShortcutOptions, } from '../core/NavigationContainer';
+export { createNavigationRef } from '../core/navigation';
+export { useNavigation, useRoute, useNavigationState, useFocusEffect, useIsFocused, } from '../core/hooks';
+export { NavigationFocusable, type FocusTarget } from '../core/focus';
+export { DefaultTheme, useNavigationTheme } from '../core/context';
+export { NavigationStore, serializeNavigationState, restoreNavigationState, type NavigationEvent, type NavigationEventType, } from '../core/store';
+export * from '../routers';
+export type { Navigation, StackNavigation, SidebarNavigation, StackScreenProps, SidebarScreenProps, SidebarFooterProps, NavigationTheme, NavigationRef, } from '../core/types';
+export { createStackNavigator, type NativeStackNavigatorProps, type NativeStackScreenOptions, } from './stack';
+export { createSidebarNavigator, type NativeSidebarNavigatorProps, type NativeSidebarScreenOptions, } from './sidebar';
+export { createSplitNavigator, type NativeSplitNavigatorProps, type NativeSplitColumnProps, } from './split';
+export type { NativeAppearance } from './host';
+export type { NativeSidebarIcon, NativeSidebarIconOption, NativeSidebarIconState, } from './icons';