@webority-technologies/mobile 0.0.1

package/lib/module/components/Banner/Banner.js

@@ -0,0 +1,272 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Banner = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    title,
+    message,
+    variant = 'info',
+    icon,
+    actions,
+    dismissible = false,
+    onDismiss,
+    visible = true,
+    animateMount = true,
+    accessibilityLabel,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const tint = useMemo(() => tintFor(theme, variant), [theme, variant]);
+  const translateY = useRef(new Animated.Value(animateMount && visible ? -20 : 0)).current;
+  const opacity = useRef(new Animated.Value(animateMount && visible ? 0 : visible ? 1 : 0)).current;
+  const [mounted, setMounted] = useState(visible);
+  const isFirstRun = useRef(true);
+  useEffect(() => {
+    // Skip running an animation on first mount if animateMount is false.
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+      if (!animateMount) return;
+    }
+    if (visible) {
+      setMounted(true);
+      Animated.parallel([Animated.timing(translateY, {
+        toValue: 0,
+        duration: theme.motion.duration.normal,
+        useNativeDriver: true
+      }), Animated.timing(opacity, {
+        toValue: 1,
+        duration: theme.motion.duration.normal,
+        useNativeDriver: true
+      })]).start();
+    } else if (mounted) {
+      Animated.parallel([Animated.timing(translateY, {
+        toValue: -20,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      }), Animated.timing(opacity, {
+        toValue: 0,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      })]).start(() => {
+        setMounted(false);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+  if (!mounted) return null;
+  const renderIcon = () => {
+    if (icon === false) return null;
+    if (icon) return /*#__PURE__*/_jsx(View, {
+      style: styles.iconWrap,
+      children: icon
+    });
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.iconCircle, {
+        backgroundColor: tint.bar + '22'
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.iconGlyph, {
+          color: tint.glyphColor
+        }],
+        accessible: false,
+        children: tint.glyph
+      })
+    });
+  };
+  const messageString = typeof message === 'string' ? message : '';
+  const builtA11y = accessibilityLabel ?? (title ? `${title}. ${messageString}` : messageString || undefined);
+  const liveRegion = variant === 'error' ? 'assertive' : 'polite';
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    ref: ref,
+    accessibilityRole: 'alert',
+    accessibilityLiveRegion: liveRegion,
+    accessibilityLabel: builtA11y,
+    testID: testID,
+    style: [styles.container, {
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: theme.radius.md,
+      padding: theme.spacing.md,
+      opacity,
+      transform: [{
+        translateY
+      }]
+    }, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.tintBar, {
+        backgroundColor: tint.bar
+      }]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [renderIcon(), /*#__PURE__*/_jsxs(View, {
+        style: styles.textBlock,
+        children: [title ? /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: theme.colors.text.primary,
+            fontSize: theme.typography.fontSize.base,
+            fontWeight: theme.typography.fontWeight.semibold,
+            lineHeight: 20
+          },
+          numberOfLines: 2,
+          children: title
+        }) : null, typeof message === 'string' ? /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: theme.colors.text.secondary,
+            fontSize: theme.typography.fontSize.sm,
+            lineHeight: 18,
+            marginTop: title ? 2 : 0
+          },
+          children: message
+        }) : /*#__PURE__*/_jsx(View, {
+          style: {
+            marginTop: title ? 2 : 0
+          },
+          children: message
+        })]
+      }), dismissible ? /*#__PURE__*/_jsx(Pressable, {
+        accessibilityRole: "button",
+        accessibilityLabel: "Dismiss banner",
+        onPress: onDismiss,
+        hitSlop: 8,
+        style: ({
+          pressed
+        }) => [styles.closeBtn, {
+          backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: theme.colors.text.secondary,
+            fontSize: 18,
+            fontWeight: theme.typography.fontWeight.bold,
+            lineHeight: 18
+          },
+          accessible: false,
+          children: "\xD7"
+        })
+      }) : null]
+    }), actions && actions.length > 0 ? /*#__PURE__*/_jsx(View, {
+      style: styles.actionsRow,
+      children: actions.map((action, idx) => {
+        const isPrimary = (action.tone ?? 'primary') === 'primary';
+        return /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: action.label,
+          onPress: action.onPress,
+          style: ({
+            pressed
+          }) => [styles.actionBtn, {
+            backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: {
+              color: isPrimary ? tint.glyphColor : theme.colors.text.secondary,
+              fontSize: theme.typography.fontSize.sm,
+              fontWeight: theme.typography.fontWeight.semibold
+            },
+            numberOfLines: 1,
+            children: action.label
+          })
+        }, `${action.label}-${idx}`);
+      })
+    }) : null]
+  });
+});
+Banner.displayName = 'Banner';
+const tintFor = (theme, variant) => {
+  switch (variant) {
+    case 'success':
+      return {
+        bar: theme.colors.success,
+        glyphColor: theme.colors.success,
+        glyph: '✓'
+      };
+    case 'warning':
+      return {
+        bar: theme.colors.warning,
+        glyphColor: theme.colors.warning,
+        glyph: '⚠'
+      };
+    case 'error':
+      return {
+        bar: theme.colors.error,
+        glyphColor: theme.colors.error,
+        glyph: '✗'
+      };
+    case 'neutral':
+      return {
+        bar: theme.colors.text.tertiary,
+        glyphColor: theme.colors.text.secondary,
+        glyph: 'i'
+      };
+    case 'info':
+    default:
+      return {
+        bar: theme.colors.primary,
+        glyphColor: theme.colors.primary,
+        glyph: 'i'
+      };
+  }
+};
+const buildStyles = _theme => StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    paddingLeft: 16
+  },
+  tintBar: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    width: 4
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-start'
+  },
+  iconWrap: {
+    marginRight: 12
+  },
+  iconCircle: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12
+  },
+  iconGlyph: {
+    fontSize: 15,
+    fontWeight: '700',
+    lineHeight: 17
+  },
+  textBlock: {
+    flex: 1,
+    paddingRight: 8
+  },
+  closeBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 4
+  },
+  actionsRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 8,
+    gap: 4
+  },
+  actionBtn: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 8
+  }
+});
+export { Banner };
+export default Banner;
+//# sourceMappingURL=Banner.js.map

package/lib/module/components/Banner/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Banner, default } from "./Banner.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/BottomNavigation/BottomNavigation.js

@@ -0,0 +1,284 @@
+"use strict";
+
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_SIZE = 24;
+const PILL_HEIGHT = 36;
+const UNDERLINE_HEIGHT = 3;
+const formatBadge = value => {
+  if (value === null || value === undefined || value === false) return null;
+  if (value === true || value === '·') return {
+    text: '',
+    isDot: true
+  };
+  if (typeof value === 'number') {
+    if (value <= 0) return null;
+    return {
+      text: value > 99 ? '99+' : String(value),
+      isDot: false
+    };
+  }
+  if (typeof value === 'string') {
+    if (value.length === 0) return null;
+    return {
+      text: value,
+      isDot: false
+    };
+  }
+  return null;
+};
+const badgeAccessibilitySuffix = value => {
+  if (value === null || value === undefined || value === false) return '';
+  if (typeof value === 'number') {
+    return value > 0 ? `, ${value} unread` : '';
+  }
+  if (value === true || value === '·') return ', new updates';
+  if (typeof value === 'string' && value.length > 0) return `, ${value}`;
+  return '';
+};
+const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    tabs,
+    activeTab,
+    onTabPress,
+    haptic = 'selection',
+    showLabels = true,
+    variant = 'pill',
+    style,
+    indicatorStyle,
+    labelStyle,
+    testID
+  } = props;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const activeIndex = Math.max(0, tabs.findIndex(tab => tab.key === activeTab));
+  const [tabWidth, setTabWidth] = React.useState(0);
+  const indicatorTranslateX = useRef(new Animated.Value(0)).current;
+  const iconScales = useRef({});
+
+  // Ensure each tab has a persistent scale value
+  tabs.forEach(tab => {
+    if (!iconScales.current[tab.key]) {
+      iconScales.current[tab.key] = new Animated.Value(1);
+    }
+  });
+
+  // Animate indicator when active tab changes or layout settles
+  useEffect(() => {
+    if (tabWidth <= 0) return;
+    Animated.spring(indicatorTranslateX, {
+      toValue: activeIndex * tabWidth,
+      tension: 120,
+      friction: 14,
+      useNativeDriver: true
+    }).start();
+  }, [activeIndex, tabWidth, indicatorTranslateX]);
+  const handleLayout = e => {
+    const total = e.nativeEvent.layout.width;
+    if (tabs.length > 0) {
+      setTabWidth(total / tabs.length);
+    }
+  };
+  const handlePress = tab => {
+    if (tab.key !== activeTab && haptic !== false) {
+      triggerHaptic(haptic);
+    }
+    const scale = iconScales.current[tab.key];
+    if (scale) {
+      Animated.sequence([Animated.timing(scale, {
+        toValue: 1.15,
+        duration: 120,
+        useNativeDriver: true
+      }), Animated.spring(scale, {
+        toValue: 1,
+        tension: 200,
+        friction: 8,
+        useNativeDriver: true
+      })]).start();
+    }
+    onTabPress(tab.key);
+  };
+  const paddingBottom = Math.max(8, insets.bottom);
+
+  // Pill width is intrinsic; we compute its rendered offset to keep it centered
+  // within each tab cell when it animates.
+  const pillWidth = tabWidth > 0 ? Math.min(tabWidth - 16, 120) : 0;
+  const pillOffset = tabWidth > 0 ? (tabWidth - pillWidth) / 2 : 0;
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    testID: testID,
+    accessibilityRole: "tablist",
+    style: [styles.container, theme.shadows.lg, {
+      backgroundColor: theme.colors.background.elevated,
+      borderTopColor: theme.colors.border.primary,
+      paddingBottom
+    }, style],
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.tabRow,
+      onLayout: handleLayout,
+      children: [variant === 'pill' && pillWidth > 0 ? /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [styles.pill, {
+          width: pillWidth,
+          height: PILL_HEIGHT,
+          backgroundColor: theme.colors.primaryMuted,
+          borderRadius: theme.radius.full,
+          transform: [{
+            translateX: Animated.add(indicatorTranslateX, new Animated.Value(pillOffset))
+          }]
+        }, indicatorStyle]
+      }) : null, tabs.map((tab, index) => {
+        const isActive = tab.key === activeTab;
+        const color = isActive ? theme.colors.primary : theme.colors.text.tertiary;
+        const renderIcon = isActive && tab.activeIcon ? tab.activeIcon : tab.icon;
+        const scale = iconScales.current[tab.key];
+        const badge = formatBadge(tab.badge ?? null);
+        const a11ySuffix = badgeAccessibilitySuffix(tab.badge ?? null);
+        return /*#__PURE__*/_jsxs(Pressable, {
+          onPress: () => handlePress(tab),
+          accessibilityRole: "tab",
+          accessibilityState: {
+            selected: isActive
+          },
+          accessibilityLabel: `${tab.label}${a11ySuffix}`,
+          accessibilityHint: `Switches to ${tab.label}`,
+          hitSlop: {
+            top: 6,
+            bottom: 6,
+            left: 6,
+            right: 6
+          },
+          style: ({
+            pressed
+          }) => [styles.tab, pressed ? {
+            opacity: 0.85
+          } : null],
+          testID: testID ? `${testID}-tab-${tab.key}` : undefined,
+          children: [/*#__PURE__*/_jsxs(Animated.View, {
+            style: [styles.iconWrap, {
+              transform: [{
+                scale
+              }]
+            }],
+            children: [renderIcon({
+              color,
+              size: ICON_SIZE,
+              focused: isActive
+            }), badge ? /*#__PURE__*/_jsx(View, {
+              style: [badge.isDot ? styles.badgeDot : styles.badgePill, {
+                backgroundColor: theme.colors.error,
+                borderColor: theme.colors.background.elevated
+              }],
+              children: badge.isDot ? null : /*#__PURE__*/_jsx(Text, {
+                style: [styles.badgeText, {
+                  color: theme.colors.text.inverse
+                }],
+                numberOfLines: 1,
+                children: badge.text
+              })
+            }) : null]
+          }), showLabels ? /*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            style: [styles.label, {
+              color,
+              fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.normal
+            }, labelStyle],
+            children: tab.label
+          }) : null]
+        }, tab.key);
+      }), variant === 'underline' && tabWidth > 0 ? /*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [styles.underline, {
+          width: tabWidth,
+          backgroundColor: theme.colors.primary,
+          transform: [{
+            translateX: indicatorTranslateX
+          }]
+        }, indicatorStyle]
+      }) : null]
+    })
+  });
+});
+BottomNavigation.displayName = 'BottomNavigation';
+const buildStyles = theme => StyleSheet.create({
+  container: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    paddingTop: 6,
+    paddingHorizontal: 4
+  },
+  tabRow: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    position: 'relative'
+  },
+  tab: {
+    flex: 1,
+    minHeight: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 6,
+    gap: 2
+  },
+  iconWrap: {
+    width: ICON_SIZE + 8,
+    height: ICON_SIZE + 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  label: {
+    fontSize: theme.typography.fontSize.xs,
+    lineHeight: theme.typography.fontSize.xs * theme.typography.lineHeight.tight,
+    textAlign: 'center'
+  },
+  pill: {
+    position: 'absolute',
+    top: 4,
+    left: 0
+  },
+  underline: {
+    position: 'absolute',
+    bottom: -6,
+    left: 0,
+    height: UNDERLINE_HEIGHT,
+    borderTopLeftRadius: 2,
+    borderTopRightRadius: 2
+  },
+  badgePill: {
+    position: 'absolute',
+    top: -4,
+    right: -8,
+    minWidth: 18,
+    height: 18,
+    borderRadius: 9,
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5
+  },
+  badgeDot: {
+    position: 'absolute',
+    top: -2,
+    right: -2,
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    borderWidth: 1.5
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: '700',
+    lineHeight: 12,
+    textAlign: 'center',
+    includeFontPadding: false
+  }
+});
+export { BottomNavigation };
+export default BottomNavigation;
+//# sourceMappingURL=BottomNavigation.js.map

package/lib/module/components/BottomNavigation/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { BottomNavigation, default } from "./BottomNavigation.js";
+//# sourceMappingURL=index.js.map