@sigmela/router 0.0.14 → 0.0.15

package/lib/module/web/TransitionStack.js

@@ -0,0 +1,227 @@
+"use strict";
+
+function whichChild(elem, countNonElements) {
+  if (!elem?.parentNode) {
+    return -1;
+  }
+  if (countNonElements) {
+    return Array.from(elem.parentNode.childNodes).indexOf(elem);
+  }
+  let i = 0;
+  let current = elem;
+  while ((current = current.previousElementSibling) !== null) ++i;
+  return i;
+}
+function makeTranslate(x, y) {
+  return `translate3d(${x}px, ${y}px, 0)`;
+}
+function makeTransitionFunction(options) {
+  return options;
+}
+const slideModal = makeTransitionFunction({
+  callback: (tabContent, prevTabContent, toRight) => {
+    const height = prevTabContent.getBoundingClientRect().height;
+    const elements = [tabContent, prevTabContent];
+    if (toRight) elements.reverse();
+    elements[0].style.filter = `brightness(80%)`;
+    elements[1].style.transform = makeTranslate(0, height);
+    tabContent.classList.add('active');
+    // eslint-disable-next-line no-void
+    void tabContent.offsetHeight; // reflow
+
+    tabContent.style.transform = '';
+    tabContent.style.filter = '';
+    return () => {
+      prevTabContent.style.transform = prevTabContent.style.filter = '';
+    };
+  },
+  animateFirst: false
+});
+const slideNavigation = makeTransitionFunction({
+  callback: (tabContent, prevTabContent, toRight) => {
+    const width = prevTabContent.getBoundingClientRect().width;
+    const elements = [tabContent, prevTabContent];
+    if (toRight) elements.reverse();
+    elements[0].style.filter = `brightness(80%)`;
+    elements[0].style.transform = makeTranslate(-width * 0.25, 0);
+    elements[1].style.transform = makeTranslate(width, 0);
+    tabContent.classList.add('active');
+    // eslint-disable-next-line no-void
+    void tabContent.offsetWidth; // reflow
+
+    tabContent.style.transform = '';
+    tabContent.style.filter = '';
+    return () => {
+      prevTabContent.style.transform = prevTabContent.style.filter = '';
+    };
+  },
+  animateFirst: false
+});
+const transitions = {
+  navigation: slideNavigation,
+  modal: slideModal
+};
+const TransitionStack = options => {
+  let {
+    animateFirst = false
+  } = options;
+  const {
+    type: t,
+    content,
+    withAnimationListener = true,
+    transitionTime,
+    onTransitionEnd,
+    onTransitionStart,
+    onTransitionStartAfter,
+    once = false
+  } = options;
+  const type = t;
+
+  // Set initial animation type on container; will be overridden per transition based on target's data-presentation
+  content.dataset.animation = type;
+  const onTransitionEndCallbacks = new Map();
+  let from = null;
+  if (withAnimationListener) {
+    const listenerName = 'transitionend';
+    const onEndEvent = e => {
+      // @ts-expect-error - e is TransitionEvent | AnimationEvent
+      e = e.originalEvent || e;
+      try {
+        if (e.stopPropagation) e.stopPropagation();
+        if (e.preventDefault) e.preventDefault();
+        e.returnValue = false;
+        e.cancelBubble = true;
+      } catch {
+        /* empty */
+      }
+      if (e.target.parentElement !== content) {
+        return;
+      }
+      const callback = onTransitionEndCallbacks.get(e.target);
+      callback?.();
+      if (e.target !== from) {
+        return;
+      }
+      onTransitionEnd?.(transition.prevId());
+      content.classList.remove('animating', 'backwards', 'disable-hover');
+      if (once) {
+        content.removeEventListener(listenerName, onEndEvent);
+        from = undefined;
+        onTransitionEndCallbacks.clear();
+      }
+    };
+    content.addEventListener(listenerName, onEndEvent);
+  }
+  function transition(id, animate = true, overrideFrom) {
+    if (overrideFrom) {
+      from = overrideFrom;
+    }
+    const targetIndex = id instanceof HTMLElement ? whichChild(id) : id;
+    const prevId = transition.prevId();
+    if (targetIndex === prevId) return;
+    onTransitionStart?.(targetIndex);
+    const to = content.children[targetIndex];
+
+    // Determine direction and pick animation source
+    const goingBack = prevId > targetIndex;
+    const sourcePresentation = from?.dataset.presentation || '';
+    const targetPresentation = to?.dataset.presentation || '';
+    const chosenPresentation = goingBack ? sourcePresentation : targetPresentation;
+    const effectiveType = chosenPresentation === 'modal' ? 'modal' : 'navigation';
+
+    // Update container dataset to drive CSS timing variants
+    content.dataset.animation = effectiveType;
+    const transitionSpec = transitions[effectiveType];
+    const animationFunction = transitionSpec?.callback;
+    const animateFirstLocal = (transitionSpec?.animateFirst !== undefined ? transitionSpec?.animateFirst : animateFirst) ?? false;
+    if (prevId === -1 && !animateFirstLocal) {
+      animate = false;
+    }
+    if (!withAnimationListener) {
+      const timeout = content.dataset.timeout;
+      if (timeout !== undefined) {
+        clearTimeout(+timeout);
+      }
+      delete content.dataset.timeout;
+    }
+    if (!animate) {
+      if (from) from.classList.remove('active', 'to', 'from');else if (to) {
+        const callback = onTransitionEndCallbacks.get(to);
+        callback?.();
+      }
+      if (to) {
+        to.classList.remove('to', 'from');
+        to.classList.add('active');
+      }
+      content.classList.remove('animating', 'backwards', 'disable-hover');
+      from = to;
+      onTransitionEnd?.(targetIndex);
+      return;
+    }
+    if (!withAnimationListener) {
+      content.dataset.timeout = '' + window.setTimeout(() => {
+        to?.classList.remove('to');
+        from?.classList.remove('from');
+        content.classList.remove('animating', 'backwards', 'disable-hover');
+        delete content.dataset.timeout;
+      }, transitionTime);
+    }
+    if (from) {
+      from.classList.remove('to');
+      from.classList.add('from');
+    }
+    content.classList.add('animating');
+    const toRight = prevId < targetIndex;
+    content.classList.toggle('backwards', !toRight);
+    let onTransitionEndCallback;
+    if (!to) {
+      // prevTabContent.classList.remove('active');
+    } else {
+      if (animationFunction) {
+        onTransitionEndCallback = animationFunction(to, from, toRight);
+      } else {
+        to.classList.add('active');
+      }
+      onTransitionStartAfter?.(targetIndex);
+      to.classList.remove('from');
+      to.classList.add('to');
+    }
+    if (to) {
+      const transitionTimeout = to.dataset.transitionTimeout;
+      if (transitionTimeout) {
+        clearTimeout(+transitionTimeout);
+      }
+      onTransitionEndCallbacks.set(to, () => {
+        to.classList.remove('to');
+        onTransitionEndCallbacks.delete(to);
+      });
+    }
+    if (from) {
+      let timeout;
+      const _from = from;
+      const callback = () => {
+        clearTimeout(timeout);
+        _from.classList.remove('active', 'from');
+        onTransitionEndCallback?.();
+        onTransitionEndCallbacks.delete(_from);
+      };
+      if (to) {
+        timeout = window.setTimeout(callback, transitionTime + 100);
+        onTransitionEndCallbacks.set(_from, callback);
+      } else {
+        timeout = window.setTimeout(callback, transitionTime + 100);
+        onTransitionEndCallbacks.set(_from, () => {
+          clearTimeout(timeout);
+          onTransitionEndCallbacks.delete(_from);
+        });
+      }
+      _from.dataset.transitionTimeout = '' + timeout;
+    }
+    from = to;
+  }
+  transition.prevId = () => from ? whichChild(from) : -1;
+  transition.getFrom = () => from;
+  transition.setFrom = _from => from = _from;
+  return transition;
+};
+export default TransitionStack;

package/lib/typescript/src/Navigation.d.ts

@@ -1,8 +1,9 @@
 import type { NavigationAppearance } from './types';
 import { Router } from './Router';
-export interface NavigationProps {
+interface NavigationProps {
     router: Router;
     appearance?: NavigationAppearance;
 }
 export declare const Navigation: import("react").NamedExoticComponent<NavigationProps>;
+export {};
 //# sourceMappingURL=Navigation.d.ts.map

package/lib/typescript/src/Router.d.ts

@@ -30,7 +30,7 @@ export declare class Router {
     private rootTransition?;
     constructor(config: RouterConfig);
     navigate: (path: string) => void;
-    replace: (path: string) => void;
+    replace: (path: string, dedupe?: boolean) => void;
     goBack: () => void;
     onTabIndexChange: (index: number) => void;
     setActiveTabIndex: (index: number) => void;
@@ -65,6 +65,20 @@ export declare class Router {
     private getTopForTarget;
     private mergeOptions;
     private findStackById;
+    private isWebEnv;
+    private getCurrentUrl;
+    private readIndex;
+    private getHistoryIndex;
+    private ensureHistoryIndex;
+    private pushUrl;
+    private replaceUrl;
+    private patchHistoryOnce;
+    private lastBrowserIndex;
+    private pendingReplaceDedupe;
+    private setupBrowserHistory;
+    private popOnce;
+    private tryPopActiveStack;
+    private parse;
 }
 export {};
 //# sourceMappingURL=Router.d.ts.map

package/lib/typescript/src/ScreenStack/ScreenStack.native.d.ts

@@ -0,0 +1,2 @@
+export { ScreenStack } from 'react-native-screens';
+//# sourceMappingURL=ScreenStack.native.d.ts.map

package/lib/typescript/src/ScreenStack/ScreenStack.web.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import { type TransitionStackType } from '../web/TransitionStack';
+type ScreenStackProps = {
+    children: ReactNode;
+    transitionTime?: number;
+    type?: TransitionStackType;
+    animated?: boolean;
+};
+export declare const ScreenStack: import("react").NamedExoticComponent<ScreenStackProps>;
+export {};
+//# sourceMappingURL=ScreenStack.web.d.ts.map

package/lib/typescript/src/ScreenStack/index.d.ts

@@ -0,0 +1,2 @@
+export { ScreenStack } from './ScreenStack';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/ScreenStackItem/ScreenStackItem.d.ts

@@ -0,0 +1,3 @@
+import type { ScreenStackItemProps } from './ScreenStackItem.types';
+export declare const ScreenStackItem: import("react").NamedExoticComponent<ScreenStackItemProps>;
+//# sourceMappingURL=ScreenStackItem.d.ts.map

package/lib/typescript/src/ScreenStackItem/ScreenStackItem.types.d.ts

@@ -0,0 +1,10 @@
+import type { HistoryItem, NavigationAppearance, ScreenOptions } from '../types';
+export type ScreenStackItemPhase = 'active' | 'exiting';
+export interface ScreenStackItemProps {
+    item: HistoryItem;
+    stackId?: string;
+    stackAnimation?: ScreenOptions['stackAnimation'];
+    appearance?: NavigationAppearance;
+    phase?: ScreenStackItemPhase;
+}
+//# sourceMappingURL=ScreenStackItem.types.d.ts.map

package/lib/typescript/src/ScreenStackItem/ScreenStackItem.web.d.ts

@@ -0,0 +1,3 @@
+import type { ScreenStackItemProps } from './ScreenStackItem.types';
+export declare const ScreenStackItem: import("react").MemoExoticComponent<({ phase, item, appearance }: ScreenStackItemProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=ScreenStackItem.web.d.ts.map

package/lib/typescript/src/ScreenStackItem/index.d.ts

@@ -0,0 +1,3 @@
+export { ScreenStackItem } from './ScreenStackItem';
+export type { ScreenStackItemProps } from './ScreenStackItem.types';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/TabBar/RenderTabBar.native.d.ts

@@ -0,0 +1,8 @@
+import type { TabBar } from './TabBar';
+import type { NavigationAppearance } from '../types';
+export interface RenderTabBarProps {
+    tabBar: TabBar;
+    appearance?: NavigationAppearance;
+}
+export declare const RenderTabBar: import("react").NamedExoticComponent<RenderTabBarProps>;
+//# sourceMappingURL=RenderTabBar.native.d.ts.map

package/lib/typescript/src/TabBar/{RenderTabBar.d.ts → RenderTabBar.web.d.ts}

@@ -5,4 +5,4 @@ export interface RenderTabBarProps {
     appearance?: NavigationAppearance;
 }
 export declare const RenderTabBar: import("react").NamedExoticComponent<RenderTabBarProps>;
-//# sourceMappingURL=RenderTabBar.d.ts.map
+//# sourceMappingURL=RenderTabBar.web.d.ts.map

package/lib/typescript/src/TabBar/TabBar.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
+import type { ImageSourcePropType } from 'react-native';
 import { NavigationStack } from '../NavigationStack';
+import type { ComponentType } from 'react';
 import type { TabItem } from '../types';
-import type { ImageSourcePropType } from 'react-native';
+import React from 'react';
 type IOSIconShape = {
     sfSymbolName: string;
 } | {
@@ -10,13 +11,20 @@ type IOSIconShape = {
     templateSource: ImageSourcePropType;
 };
 type ExtendedIcon = ImageSourcePropType | IOSIconShape;
-type InternalTabItem = Omit<TabItem, 'icon' | 'selectedIcon'> & {
+export type InternalTabItem = Omit<TabItem, 'icon' | 'selectedIcon'> & {
     icon?: ExtendedIcon;
     selectedIcon?: ExtendedIcon;
+    badgeValue?: string;
+};
+export type TabBarProps = {
+    onTabPress: (index: number) => void;
+    tabs: InternalTabItem[];
+    activeIndex: number;
 };
 type TabBarConfig = Omit<InternalTabItem, 'tabKey' | 'key'> & {
     stack?: NavigationStack;
     screen?: React.ComponentType<any>;
+    component?: ComponentType<TabBarProps>;
 };
 export declare class TabBar {
     screens: Record<string, React.ComponentType<any>>;

package/lib/typescript/src/TabBar/TabIcon.web.d.ts

@@ -0,0 +1,7 @@
+import { type ImageSourcePropType } from 'react-native';
+export interface TabIconProps {
+    source: ImageSourcePropType;
+    tintColor?: string;
+}
+export declare const TabIcon: import("react").MemoExoticComponent<({ source, tintColor }: TabIconProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=TabIcon.web.d.ts.map

package/lib/typescript/src/TabBar/index.d.ts

@@ -0,0 +1,2 @@
+export { RenderTabBar } from './RenderTabBar';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts

@@ -1,6 +1,6 @@
 export { useTabBar } from './TabBar/useTabBar';
 export { TabBar } from './TabBar/TabBar';
-export type { NavigationProps } from './Navigation';
+export type { TabBarProps } from './TabBar/TabBar';
 export type { NavigationAppearance } from './types';
 /**
  * Navigation System

package/lib/typescript/src/types.d.ts

@@ -1,13 +1,20 @@
 import type { ColorValue, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import type { BottomTabsScreenAppearance, BottomTabsScreenProps, ScreenProps as RNSScreenProps, ScreenStackHeaderConfigProps, TabBarItemLabelVisibilityMode, TabBarMinimizeBehavior } from 'react-native-screens';
+import type { BottomTabsScreenProps, ScreenProps as RNSScreenProps, ScreenStackHeaderConfigProps, TabBarItemLabelVisibilityMode, TabBarMinimizeBehavior } from 'react-native-screens';
 export type TabItem = Omit<BottomTabsScreenProps, 'isFocused' | 'children'>;
 export type NavigationState<Route extends TabItem> = {
     index: number;
     routes: Route[];
 };
 export type Scope = 'global' | 'tab' | 'root';
+export type TabBarIcon = {
+    sfSymbolName?: string;
+} | string;
 export type ScreenOptions = Partial<RNSScreenProps> & {
     header?: ScreenStackHeaderConfigProps;
+    /**
+     * Tab bar icon source for this route (used on web renderer, optional on native).
+     */
+    tabBarIcon?: TabBarIcon;
 };
 export type HistoryItem = {
     key: string;
@@ -72,173 +79,25 @@ export type TabBarConfig = {
 };
 export interface NavigationAppearance {
     tabBar?: {
-        /**
-         * @summary Specifies the standard tab bar appearance.
-         *
-         * Allows to customize the appearance depending on the tab bar item layout (stacked,
-         * inline, compact inline) and state (normal, selected, focused, disabled).
-         *
-         * @platform ios
-         */
-        standardAppearance?: BottomTabsScreenAppearance;
-        /**
-         * @summary Specifies the tab bar appearace when edge of scrollable content aligns
-         * with the edge of the tab bar.
-         *
-         * Allows to customize the appearance depending on the tab bar item layout (stacked,
-         * inline, compact inline) and state (normal, selected, focused, disabled).
-         *
-         * If this property is `undefined`, UIKit uses `standardAppearance`, modified to
-         * have a transparent background.
-         *
-         * @platform ios
-         */
-        scrollEdgeAppearance?: BottomTabsScreenAppearance;
-        /**
-         * @summary Specifies the background color for the entire tab bar.
-         *
-         * @platform android
-         */
         backgroundColor?: ColorValue;
-        tabBarItemStyle?: {
-            /**
-             * @summary Specifies the font family used for the title of each tab bar item.
-             *
-             * @platform android
-             */
-            titleFontFamily?: TextStyle['fontFamily'];
-            /**
-             * @summary Specifies the font size used for the title of each tab bar item.
-             *
-             * The size is represented in scale-independent pixels (sp).
-             *
-             * @platform android
-             */
-            titleFontSize?: TextStyle['fontSize'];
-            /**
-             * @summary Specifies the font size used for the title of each tab bar item in active state.
-             *
-             * The size is represented in scale-independent pixels (sp).
-             *
-             * @platform android
-             */
-            titleFontSizeActive?: TextStyle['fontSize'];
-            /**
-             * @summary Specifies the font weight used for the title of each tab bar item.
-             *
-             * @platform android
-             */
-            titleFontWeight?: TextStyle['fontWeight'];
-            /**
-             * @summary Specifies the font style used for the title of each tab bar item.
-             *
-             * @platform android
-             */
-            titleFontStyle?: TextStyle['fontStyle'];
-            /**
-             * @summary Specifies the font color used for the title of each tab bar item.
-             *
-             * @platform android
-             */
-            titleFontColor?: TextStyle['color'];
-            /**
-             * @summary Specifies the font color used for the title of each tab bar item in active state.
-             *
-             * If not provided, `tabBarItemTitleFontColor` is used.
-             *
-             * @platform android
-             */
-            titleFontColorActive?: TextStyle['color'];
-            /**
-             * @summary Specifies the icon color for each tab bar item.
-             *
-             * @platform android
-             */
-            iconColor?: ColorValue;
-            /**
-             * @summary Specifies the icon color for each tab bar item in active state.
-             *
-             * If not provided, `tabBarItemIconColor` is used.
-             *
-             * @platform android
-             */
-            iconColorActive?: ColorValue;
-            /**
-             * @summary Specifies the background color of the active indicator.
-             *
-             * @platform android
-             */
-            activeIndicatorColor?: ColorValue;
-            /**
-             * @summary Specifies if the active indicator should be used.
-             *
-             * @default true
-             *
-             * @platform android
-             */
-            activeIndicatorEnabled?: boolean;
-            /**
-             * @summary Specifies the color of each tab bar item's ripple effect.
-             *
-             * @platform android
-             */
-            rippleColor?: ColorValue;
-            /**
-             * @summary Specifies the label visibility mode.
-             *
-             * The label visibility mode defines when the labels of each item bar should be displayed.
-             *
-             * The following values are available:
-             * - `auto` - the label behaves as in “labeled” mode when there are 3 items or less, or as in “selected” mode when there are 4 items or more
-             * - `selected` - the label is only shown on the selected navigation item
-             * - `labeled` - the label is shown on all navigation items
-             * - `unlabeled` - the label is hidden for all navigation items
-             *
-             * The supported values correspond to the official Material Components documentation:
-             * @see {@link https://github.com/material-components/material-components-android/blob/master/docs/components/BottomNavigation.md#making-navigation-bar-accessible|Material Components documentation}
-             *
-             * @default auto
-             * @platform android
-             */
-            labelVisibilityMode?: TabBarItemLabelVisibilityMode;
+        badgeBackgroundColor?: ColorValue;
+        iconColor?: ColorValue;
+        iconColorActive?: ColorValue;
+        androidActiveIndicatorEnabled?: boolean;
+        androidActiveIndicatorColor?: ColorValue;
+        androidRippleColor?: ColorValue;
+        labelVisibilityMode?: TabBarItemLabelVisibilityMode;
+        iOSShadowColor?: ColorValue;
+        title: {
+            fontFamily?: TextStyle['fontFamily'];
+            fontSize?: TextStyle['fontSize'];
+            fontWeight?: TextStyle['fontWeight'];
+            fontStyle?: TextStyle['fontStyle'];
+            color?: TextStyle['color'];
+            activeColor?: TextStyle['color'];
         };
-        /**
-         * @summary Specifies the color used for selected tab's text and icon color.
-         *
-         * Starting from iOS 26, it also impacts glow of Liquid Glass tab
-         * selection view.
-         *
-         * `tabBarItemTitleFontColor` and `tabBarItemIconColor` defined on
-         * BottomTabsScreen component override this color.
-         *
-         * @platform ios
-         */
-        tintColor?: ColorValue;
-        /**
-         * @summary Experimental prop for changing container control.
-         *
-         * If set to true, tab screen changes need to be handled by JS using
-         * onNativeFocusChange callback (controlled/programatically-driven).
-         *
-         * If set to false, tab screen change will not be prevented by the
-         * native side (managed/natively-driven).
-         *
-         * On iOS, some features are not fully implemented for managed tabs
-         * (e.g. overrideScrollViewContentInsetAdjustmentBehavior).
-         *
-         * On Android, only controlled tabs are currently supported.
-         *
-         * @default Defaults to `false`.
-         *
-         * @platform android, ios
-         */
-        experimentalControlNavigationStateInJS?: boolean;
     };
-    screenStyle?: StyleProp<ViewStyle>;
-    /**
-     * Global header appearance applied to all screens with visible headers.
-     * Per-screen header options override these.
-     */
+    screen?: StyleProp<ViewStyle>;
     header?: ScreenStackHeaderConfigProps;
 }
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/web/TransitionStack.d.ts

@@ -0,0 +1,21 @@
+export type TransitionStackType = 'modal' | 'navigation';
+export type TransitionStackOptions = {
+    content: HTMLElement;
+    type: TransitionStackType;
+    transitionTime: number;
+    onTransitionStart?: (id: number) => void;
+    onTransitionStartAfter?: (id: number) => void;
+    onTransitionEnd?: (id: number) => void;
+    isHeavy?: boolean;
+    once?: boolean;
+    withAnimationListener?: boolean;
+    animateFirst?: boolean;
+};
+declare const TransitionStack: (options: TransitionStackOptions) => {
+    (id: number | HTMLElement, animate?: boolean, overrideFrom?: HTMLElement | null | undefined): void;
+    prevId(): number;
+    getFrom(): HTMLElement | null | undefined;
+    setFrom(_from: HTMLElement): HTMLElement;
+};
+export default TransitionStack;
+//# sourceMappingURL=TransitionStack.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigmela/router",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -10,7 +10,8 @@
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./styles.css": "./src/styles.css"
   },
   "files": [
     "lib",