@webority-technologies/mobile-ui 0.0.1

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Banner", {
+  enumerable: true,
+  get: function () {
+    return _Banner.Banner;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Banner.default;
+  }
+});
+var _Banner = _interopRequireWildcard(require("./Banner.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/BottomNavigation/BottomNavigation.js

@@ -0,0 +1,336 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BottomNavigation = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const DEFAULT_ICON_SIZE = 24;
+const DEFAULT_PILL_HEIGHT = 36;
+const DEFAULT_PILL_MAX_WIDTH = 120;
+const DEFAULT_PILL_INSET = 16;
+const DEFAULT_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 = exports.BottomNavigation = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    tabs,
+    activeTab,
+    onChange,
+    haptic = 'selection',
+    showLabels = true,
+    variant = 'pill',
+    indicatorPosition = 'bottom',
+    style,
+    indicatorStyle,
+    labelStyle,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const tokens = theme.components.bottomNavigation;
+  const iconSize = tokens?.iconSize ?? DEFAULT_ICON_SIZE;
+  const pillHeight = tokens?.pillHeight ?? DEFAULT_PILL_HEIGHT;
+  const pillMaxWidth = tokens?.pillMaxWidth ?? DEFAULT_PILL_MAX_WIDTH;
+  const pillInset = tokens?.pillInset ?? DEFAULT_PILL_INSET;
+  const activeIndex = Math.max(0, tabs.findIndex(tab => tab.key === activeTab));
+  const [tabWidth, setTabWidth] = _react.default.useState(0);
+
+  // Single Animated.Value holds the pill's absolute pixel offset (active index
+  // × tab width + half the gap between tab edge and pill edge). Folding the
+  // offset into the same value avoids creating a fresh Animated.Value +
+  // Animated.add node on every render — earlier code did that and slowly
+  // leaked addition nodes as the user pressed tabs.
+  const indicatorTranslateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const iconScales = (0, _react.useRef)({});
+
+  // Ensure each tab has a persistent scale value
+  tabs.forEach(tab => {
+    if (!iconScales.current[tab.key]) {
+      iconScales.current[tab.key] = new _reactNative.Animated.Value(1);
+    }
+  });
+
+  // Pill width is intrinsic; we compute its rendered offset to keep it
+  // centered within each tab cell. The offset is applied to the pill itself
+  // (NOT folded into the shared indicatorTranslateX) so the underline indicator
+  // — which spans the full tab cell — stays aligned with the tab boundary
+  // instead of being shifted by the pill-centering math.
+  const pillWidth = tabWidth > 0 ? Math.min(tabWidth - pillInset, pillMaxWidth) : 0;
+  const pillOffset = tabWidth > 0 ? (tabWidth - pillWidth) / 2 : 0;
+
+  // Animate indicator to the active tab's cell edge. Pill mode applies the
+  // centering offset via a static `left` style below; underline mode uses
+  // this value directly.
+  (0, _react.useEffect)(() => {
+    if (tabWidth <= 0) {
+      return;
+    }
+    const anim = _reactNative.Animated.spring(indicatorTranslateX, {
+      toValue: activeIndex * tabWidth,
+      tension: 120,
+      friction: 14,
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [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) {
+      (0, _index2.triggerHaptic)(haptic);
+    }
+    const scale = iconScales.current[tab.key];
+    if (scale) {
+      _reactNative.Animated.sequence([_reactNative.Animated.timing(scale, {
+        toValue: 1.15,
+        duration: 120,
+        useNativeDriver: true
+      }), _reactNative.Animated.spring(scale, {
+        toValue: 1,
+        tension: 200,
+        friction: 8,
+        useNativeDriver: true
+      })]).start();
+    }
+    onChange(tab.key);
+  };
+  const paddingBottom = Math.max(8, insets.bottom);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.tabRow,
+      onLayout: handleLayout,
+      children: [variant === 'pill' && pillWidth > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        pointerEvents: "none",
+        style: [styles.pill, {
+          width: pillWidth,
+          height: pillHeight,
+          left: pillOffset,
+          backgroundColor: theme.colors.primaryMuted,
+          borderRadius: theme.radius.full,
+          transform: [{
+            translateX: indicatorTranslateX
+          }]
+        }, indicatorStyle]
+      }) : null, tabs.map(tab => {
+        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__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+            style: [styles.iconWrap, {
+              width: iconSize + 8,
+              height: iconSize + 8,
+              transform: [{
+                scale
+              }]
+            }],
+            children: [renderIcon({
+              color,
+              size: iconSize,
+              focused: isActive
+            }), badge ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [badge.isDot ? styles.badgeDot : styles.badgePill, {
+                backgroundColor: theme.colors.error,
+                borderColor: theme.colors.background.elevated
+              }],
+              children: badge.isDot ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.badgeText, {
+                  color: theme.colors.text.inverse
+                }],
+                numberOfLines: 1,
+                children: badge.text
+              })
+            }) : null]
+          }), showLabels ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        pointerEvents: "none",
+        style: [styles.underline, indicatorPosition === 'top' ? styles.underlineTop : styles.underlineBottom, {
+          width: tabWidth,
+          height: tokens?.underlineHeight ?? DEFAULT_UNDERLINE_HEIGHT,
+          backgroundColor: theme.colors.primary,
+          transform: [{
+            translateX: indicatorTranslateX
+          }]
+        }, indicatorStyle]
+      }) : null]
+    })
+  });
+});
+BottomNavigation.displayName = 'BottomNavigation';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  container: {
+    borderTopWidth: _reactNative.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: DEFAULT_ICON_SIZE + 8,
+    height: DEFAULT_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',
+    left: 0,
+    height: DEFAULT_UNDERLINE_HEIGHT
+  },
+  underlineBottom: {
+    bottom: -6,
+    borderTopLeftRadius: 2,
+    borderTopRightRadius: 2
+  },
+  underlineTop: {
+    top: -6,
+    borderBottomLeftRadius: 2,
+    borderBottomRightRadius: 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
+  }
+});
+var _default = exports.default = BottomNavigation;
+//# sourceMappingURL=BottomNavigation.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BottomNavigation", {
+  enumerable: true,
+  get: function () {
+    return _BottomNavigation.BottomNavigation;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _BottomNavigation.default;
+  }
+});
+var _BottomNavigation = _interopRequireWildcard(require("./BottomNavigation.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map