@xleddyl/443-components-native 0.0.0-stage → 0.1.0

package/lib/module/components/navigation/Header.js

@@ -0,0 +1,216 @@
+"use strict";
+
+import { useState } from 'react';
+import { View } from 'react-native';
+import Animated, { interpolate, useAnimatedStyle } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet } from 'react-native-unistyles';
+import { hiddenFromAccessibility } from "../../utils/a11y.js";
+import { absoluteFill } from "../../utils/styles.js";
+import { Text } from "../core/Text.js";
+import { BackButton } from "./BackButton.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const borderFadeDistance = 12;
+const headerHeight = theme => theme.components.header?.height ?? theme.sizes.control.lg + theme.space(0.5);
+export const Header = ({
+  ref,
+  title,
+  subtitle,
+  headerLeft,
+  headerRight,
+  onBack,
+  backLabel = 'Back',
+  large = false,
+  align = 'center',
+  scrollY,
+  collapseDistance,
+  transparent = false,
+  border = true,
+  safeArea = true,
+  children,
+  style,
+  styles
+}) => {
+  const insets = useSafeAreaInsets();
+  const [largeHeight, setLargeHeight] = useState(null);
+  const collapseAt = collapseDistance ?? largeHeight ?? 48;
+  const hasScroll = !!scrollY;
+  const leading = headerLeft ?? (onBack ? /*#__PURE__*/_jsx(BackButton, {
+    accessibilityLabel: backLabel,
+    onPress: onBack,
+    variant: "plain"
+  }) : null);
+  const backgroundStyle = useAnimatedStyle(() => {
+    if (!transparent) {
+      return {
+        opacity: 1
+      };
+    }
+    const offset = scrollY?.value ?? 0;
+    return {
+      opacity: interpolate(offset, [0, borderFadeDistance * 2], [0, 1], 'clamp')
+    };
+  });
+  const borderStyle = useAnimatedStyle(() => {
+    if (!border) {
+      return {
+        opacity: 0
+      };
+    }
+    if (!hasScroll) {
+      return {
+        opacity: 1
+      };
+    }
+    const offset = scrollY?.value ?? 0;
+    const start = large ? collapseAt - borderFadeDistance : 0;
+    return {
+      opacity: interpolate(offset, [start, start + borderFadeDistance], [0, 1], 'clamp')
+    };
+  });
+  const compactTitleStyle = useAnimatedStyle(() => {
+    if (!large) {
+      return {
+        opacity: 1
+      };
+    }
+    const offset = scrollY?.value ?? 0;
+    return {
+      opacity: interpolate(offset, [collapseAt * 0.6, collapseAt], [0, 1], 'clamp')
+    };
+  });
+  const largeTitleStyle = useAnimatedStyle(() => {
+    const offset = scrollY?.value ?? 0;
+    const scale = interpolate(offset, [-120, 0], [1.12, 1], 'clamp');
+    if (largeHeight === null) {
+      return {
+        transform: [{
+          scale
+        }]
+      };
+    }
+    return {
+      height: interpolate(offset, [0, largeHeight], [largeHeight, 0], 'clamp'),
+      opacity: interpolate(offset, [0, largeHeight * 0.7], [1, 0], 'clamp'),
+      transform: [{
+        scale
+      }]
+    };
+  });
+  const handleLargeLayout = event => {
+    if (largeHeight === null) {
+      setLargeHeight(Math.ceil(event.nativeEvent.layout.height));
+    }
+  };
+  const centered = align === 'center' && !large;
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [stylesheet.container(safeArea ? insets.top : 0), style, styles?.container],
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [stylesheet.background, backgroundStyle, styles?.background]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [stylesheet.row, styles?.row],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [stylesheet.side(centered, 'left'), styles?.left],
+        children: leading
+      }), /*#__PURE__*/_jsxs(Animated.View, {
+        style: [stylesheet.center(centered), compactTitleStyle, styles?.center],
+        ...hiddenFromAccessibility(large),
+        children: [title ? /*#__PURE__*/_jsx(Text, {
+          variant: large ? 'label' : 'heading',
+          weight: "semibold",
+          numberOfLines: 1,
+          align: centered ? 'center' : 'left',
+          accessibilityRole: large ? undefined : 'header',
+          style: styles?.title,
+          children: title
+        }) : null, subtitle && !large ? /*#__PURE__*/_jsx(Text, {
+          variant: "caption",
+          tone: "muted",
+          numberOfLines: 1,
+          align: centered ? 'center' : 'left',
+          style: styles?.subtitle,
+          children: subtitle
+        }) : null]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [stylesheet.side(centered, 'right'), styles?.right],
+        children: headerRight
+      })]
+    }), large && title ? /*#__PURE__*/_jsx(Animated.View, {
+      style: [stylesheet.largeWrapper, largeTitleStyle],
+      children: /*#__PURE__*/_jsxs(View, {
+        onLayout: handleLargeLayout,
+        style: stylesheet.largeContent,
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "display",
+          accessibilityRole: "header",
+          numberOfLines: 2,
+          style: styles?.largeTitle,
+          children: title
+        }), subtitle ? /*#__PURE__*/_jsx(Text, {
+          tone: "muted",
+          style: styles?.subtitle,
+          children: subtitle
+        }) : null]
+      })
+    }) : null, children ? /*#__PURE__*/_jsx(View, {
+      style: stylesheet.extra,
+      children: children
+    }) : null, /*#__PURE__*/_jsx(Animated.View, {
+      style: [stylesheet.border, borderStyle, styles?.border]
+    })]
+  });
+};
+const paddingX = theme => theme.components.header?.paddingX ?? theme.space(2);
+const stylesheet = StyleSheet.create(theme => ({
+  container: topInset => ({
+    paddingTop: topInset,
+    zIndex: 1
+  }),
+  background: {
+    ...absoluteFill,
+    backgroundColor: theme.components.header?.background ?? theme.colors.background
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.space(1),
+    minHeight: headerHeight(theme),
+    paddingHorizontal: paddingX(theme)
+  },
+  side: (centered, edge) => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: edge === 'left' ? 'flex-start' : 'flex-end',
+    gap: theme.space(0.5),
+    flex: centered ? 1 : undefined,
+    minWidth: centered ? theme.sizes.minTouchTarget : undefined
+  }),
+  center: centered => ({
+    flex: centered ? 2 : 1,
+    alignItems: centered ? 'center' : 'flex-start',
+    justifyContent: 'center'
+  }),
+  largeWrapper: {
+    overflow: 'hidden',
+    transformOrigin: 'left top'
+  },
+  largeContent: {
+    gap: theme.space(0.25),
+    paddingHorizontal: paddingX(theme),
+    paddingBottom: theme.space(1.5)
+  },
+  extra: {
+    paddingHorizontal: paddingX(theme),
+    paddingBottom: theme.space(1.5)
+  },
+  border: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: theme.sizes.borderWidth,
+    backgroundColor: theme.components.header?.borderColor ?? theme.colors.border
+  }
+}));
+//# sourceMappingURL=Header.js.map

package/lib/module/components/navigation/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","View","Animated","interpolate","useAnimatedStyle","useSafeAreaInsets","StyleSheet","hiddenFromAccessibility","absoluteFill","Text","BackButton","jsx","_jsx","jsxs","_jsxs","borderFadeDistance","headerHeight","theme","components","header","height","sizes","control","lg","space","Header","ref","title","subtitle","headerLeft","headerRight","onBack","backLabel","large","align","scrollY","collapseDistance","transparent","border","safeArea","children","style","styles","insets","largeHeight","setLargeHeight","collapseAt","hasScroll","leading","accessibilityLabel","onPress","variant","backgroundStyle","opacity","offset","value","borderStyle","start","compactTitleStyle","largeTitleStyle","scale","transform","handleLargeLayout","event","Math","ceil","nativeEvent","layout","centered","stylesheet","container","top","background","row","side","left","center","weight","numberOfLines","accessibilityRole","undefined","tone","right","largeWrapper","onLayout","largeContent","largeTitle","extra","paddingX","create","topInset","paddingTop","zIndex","backgroundColor","colors","flexDirection","alignItems","gap","minHeight","paddingHorizontal","edge","justifyContent","flex","minWidth","minTouchTarget","overflow","transformOrigin","paddingBottom","position","bottom","borderWidth","borderColor"],"sourceRoot":"../../../../src","sources":["components/navigation/Header.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/navigation/TabBar.js

@@ -0,0 +1,165 @@
+"use strict";
+
+import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { useItemLayouts, useSlidingIndicator } from "../../hooks/useSlidingIndicator.js";
+import { floatingShadow } from "../../utils/styles.js";
+import { renderIcon } from "../core/Icon.js";
+import { setTabBarHeight } from "./tabBarStore.js";
+import { TabBarItem } from "./TabBarItem.js";
+import { iconFor, isDefaultPrevented, isHiddenItemStyle, tabBarActiveColor, tabBarItemColor } from "./tabBarUtils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const barHeight = theme => theme.components.tabBar?.height ?? theme.space(7);
+export const TabBar = ({
+  ref,
+  state,
+  descriptors,
+  navigation,
+  insets: navigatorInsets,
+  variant = 'attached',
+  indicator = 'pill',
+  icons,
+  labels,
+  badges,
+  showLabels = true,
+  hiddenRoutes,
+  haptic = 'selection',
+  renderItem,
+  style,
+  styles
+}) => {
+  const {
+    theme
+  } = useUnistyles();
+  const safeInsets = useSafeAreaInsets();
+  const insets = navigatorInsets ?? safeInsets;
+  const [layouts, handleItemLayout] = useItemLayouts();
+  const focusedKey = state.routes[state.index]?.key;
+  const indicatorStyle = useSlidingIndicator(focusedKey ? layouts[focusedKey] : undefined);
+  const visibleRoutes = state.routes.filter(route => !hiddenRoutes?.includes(route.name) && !isHiddenItemStyle(descriptors[route.key]?.options.tabBarItemStyle));
+  const handleContainerLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    setTabBarHeight(variant === 'floating' ? height + insets.bottom + theme.space(1) : height);
+  };
+  const items = visibleRoutes.map((route, index) => {
+    const options = descriptors[route.key]?.options ?? {};
+    const focused = route.key === focusedKey;
+    const color = tabBarItemColor(theme, focused);
+    const iconSize = theme.sizes.icon.lg;
+    const iconSet = icons?.[route.name];
+    const onPress = () => {
+      const event = navigation.emit({
+        type: 'tabPress',
+        target: route.key,
+        canPreventDefault: true
+      });
+      if (!focused && !isDefaultPrevented(event)) {
+        navigation.navigate(route.name, route.params);
+      }
+    };
+    const item = {
+      route,
+      index,
+      focused,
+      label: labels?.[route.name] ?? (typeof options.tabBarLabel === 'string' ? options.tabBarLabel : undefined) ?? options.title ?? route.name,
+      badge: badges?.[route.name] ?? options.tabBarBadge,
+      color,
+      icon: iconSet ? renderIcon(iconFor(iconSet, focused), {
+        size: iconSize,
+        color
+      }) : options.tabBarIcon?.({
+        focused,
+        color,
+        size: iconSize
+      }) ?? null,
+      onPress,
+      onLongPress: () => navigation.emit({
+        type: 'tabLongPress',
+        target: route.key
+      })
+    };
+    return {
+      item,
+      options
+    };
+  });
+  const floating = variant === 'floating';
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    onLayout: handleContainerLayout,
+    style: [stylesheet.container(variant, insets), style, styles?.container],
+    children: /*#__PURE__*/_jsxs(View, {
+      accessibilityRole: "tablist",
+      style: [stylesheet.bar(variant), styles?.bar],
+      children: [indicator !== 'none' ? /*#__PURE__*/_jsx(Animated.View, {
+        style: [stylesheet.indicator(indicator, floating), indicatorStyle, styles?.indicator]
+      }) : null, items.map(({
+        item,
+        options
+      }) => /*#__PURE__*/_jsx(TabBarItem, {
+        item: item,
+        accessibilityLabel: options.tabBarAccessibilityLabel,
+        testID: options.tabBarButtonTestID,
+        showLabel: showLabels && options.tabBarShowLabel !== false,
+        haptic: haptic,
+        renderItem: renderItem,
+        onLayout: event => handleItemLayout(item.route.key, event),
+        styles: styles
+      }, item.route.key))]
+    })
+  });
+};
+const floatingInset = theme => theme.components.tabBar?.floatingInset ?? theme.space(2);
+const stylesheet = StyleSheet.create(theme => ({
+  container: (variant, insets) => ({
+    ...(variant === 'floating' ? {
+      position: 'absolute',
+      left: insets.left + floatingInset(theme),
+      right: insets.right + floatingInset(theme),
+      bottom: insets.bottom + theme.space(1),
+      borderRadius: theme.components.tabBar?.radius ?? theme.radius.full,
+      backgroundColor: theme.components.tabBar?.background ?? theme.colors.surfaceRaised,
+      borderWidth: theme.sizes.borderWidth,
+      borderColor: theme.colors.border,
+      boxShadow: floatingShadow(theme, 'overlay')
+    } : {
+      paddingLeft: insets.left,
+      paddingRight: insets.right,
+      paddingBottom: insets.bottom,
+      backgroundColor: theme.components.tabBar?.background ?? theme.colors.surface,
+      borderTopWidth: theme.sizes.borderWidth,
+      borderTopColor: theme.colors.border
+    })
+  }),
+  bar: variant => ({
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    minHeight: barHeight(theme),
+    padding: variant === 'floating' ? theme.space(0.75) : theme.space(0.5)
+  }),
+  indicator: (kind, floating) => ({
+    ...(kind === 'line' ? {
+      position: 'absolute',
+      pointerEvents: 'none',
+      left: 0,
+      top: floating ? undefined : 0,
+      bottom: floating ? theme.space(0.5) : undefined,
+      height: theme.space(0.375),
+      borderRadius: theme.radius.full,
+      backgroundColor: theme.components.tabBar?.indicatorColor ?? tabBarActiveColor(theme)
+    } : {
+      position: 'absolute',
+      pointerEvents: 'none',
+      left: 0,
+      top: floating ? theme.space(0.75) : theme.space(0.5),
+      bottom: floating ? theme.space(0.75) : theme.space(0.5),
+      borderRadius: floating ? theme.radius.full : theme.radius.lg,
+      backgroundColor: theme.components.tabBar?.indicatorColor ?? theme.colors.primarySoft
+    })
+  })
+}));
+//# sourceMappingURL=TabBar.js.map

package/lib/module/components/navigation/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Animated","useSafeAreaInsets","StyleSheet","useUnistyles","useItemLayouts","useSlidingIndicator","floatingShadow","renderIcon","setTabBarHeight","TabBarItem","iconFor","isDefaultPrevented","isHiddenItemStyle","tabBarActiveColor","tabBarItemColor","jsx","_jsx","jsxs","_jsxs","barHeight","theme","components","tabBar","height","space","TabBar","ref","state","descriptors","navigation","insets","navigatorInsets","variant","indicator","icons","labels","badges","showLabels","hiddenRoutes","haptic","renderItem","style","styles","safeInsets","layouts","handleItemLayout","focusedKey","routes","index","key","indicatorStyle","undefined","visibleRoutes","filter","route","includes","name","options","tabBarItemStyle","handleContainerLayout","event","nativeEvent","layout","bottom","items","map","focused","color","iconSize","sizes","icon","lg","iconSet","onPress","emit","type","target","canPreventDefault","navigate","params","item","label","tabBarLabel","title","badge","tabBarBadge","size","tabBarIcon","onLongPress","floating","onLayout","stylesheet","container","children","accessibilityRole","bar","accessibilityLabel","tabBarAccessibilityLabel","testID","tabBarButtonTestID","showLabel","tabBarShowLabel","floatingInset","create","position","left","right","borderRadius","radius","full","backgroundColor","background","colors","surfaceRaised","borderWidth","borderColor","border","boxShadow","paddingLeft","paddingRight","paddingBottom","surface","borderTopWidth","borderTopColor","flexDirection","alignItems","minHeight","padding","kind","pointerEvents","top","indicatorColor","primarySoft"],"sourceRoot":"../../../../src","sources":["components/navigation/TabBar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/navigation/TabBarItem.js

@@ -0,0 +1,96 @@
+"use strict";
+
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Text } from "../core/Text.js";
+import { Touchable } from "../core/Touchable.js";
+import { badgeText, hasBadge, tabBarItemColor } from "./tabBarUtils.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const TabBarItem = ({
+  item,
+  accessibilityLabel,
+  testID,
+  showLabel,
+  haptic,
+  renderItem,
+  onLayout,
+  styles
+}) => {
+  const badge = hasBadge(item.badge) ? badgeText(item.badge) : '';
+  return /*#__PURE__*/_jsx(Touchable, {
+    feedback: "scale",
+    haptic: item.focused ? false : haptic,
+    accessibilityRole: "tab",
+    accessibilityLabel: accessibilityLabel ?? item.label,
+    accessibilityState: {
+      selected: item.focused
+    },
+    accessibilityValue: badge ? {
+      text: badge
+    } : undefined,
+    testID: testID,
+    onPress: item.onPress,
+    onLongPress: item.onLongPress,
+    onLayout: onLayout,
+    style: [stylesheet.item, styles?.item],
+    children: renderItem ? renderItem(item) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [item.icon ? /*#__PURE__*/_jsxs(View, {
+        style: [stylesheet.icon, styles?.icon],
+        children: [item.icon, hasBadge(item.badge) ? /*#__PURE__*/_jsx(View, {
+          style: [stylesheet.badge(badge.length > 0), styles?.badge],
+          children: badge ? /*#__PURE__*/_jsx(Text, {
+            variant: "caption",
+            weight: "bold",
+            style: [stylesheet.badgeLabel, styles?.badgeLabel],
+            children: badge
+          }) : null
+        }) : null]
+      }) : null, showLabel ? /*#__PURE__*/_jsx(Text, {
+        variant: "caption",
+        weight: item.focused ? 'semibold' : 'medium',
+        numberOfLines: 1,
+        style: [stylesheet.label(item.focused), styles?.label],
+        children: item.label
+      }) : null]
+    })
+  });
+};
+const stylesheet = StyleSheet.create(theme => ({
+  item: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.space(0.25),
+    minHeight: theme.sizes.minTouchTarget,
+    paddingVertical: theme.space(0.5),
+    paddingHorizontal: theme.space(0.5)
+  },
+  icon: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  label: focused => ({
+    color: tabBarItemColor(theme, focused)
+  }),
+  badge: withText => ({
+    position: 'absolute',
+    top: withText ? -theme.space(0.75) : -theme.space(0.25),
+    left: '100%',
+    marginLeft: withText ? -theme.space(1.25) : -theme.space(0.75),
+    minWidth: withText ? theme.space(2.25) : theme.space(1.25),
+    height: withText ? theme.space(2.25) : theme.space(1.25),
+    paddingHorizontal: withText ? theme.space(0.5) : 0,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.colors.danger,
+    borderWidth: 2,
+    borderColor: theme.components.tabBar?.background ?? theme.colors.surface,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }),
+  badgeLabel: {
+    color: theme.colors.onDanger,
+    fontSize: theme.typography.variants.caption.fontSize - 2,
+    lineHeight: theme.typography.variants.caption.lineHeight - 2
+  }
+}));
+//# sourceMappingURL=TabBarItem.js.map

package/lib/module/components/navigation/TabBarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","StyleSheet","Text","Touchable","badgeText","hasBadge","tabBarItemColor","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","TabBarItem","item","accessibilityLabel","testID","showLabel","haptic","renderItem","onLayout","styles","badge","feedback","focused","accessibilityRole","label","accessibilityState","selected","accessibilityValue","text","undefined","onPress","onLongPress","style","stylesheet","children","icon","length","variant","weight","badgeLabel","numberOfLines","create","theme","flex","alignItems","justifyContent","gap","space","minHeight","sizes","minTouchTarget","paddingVertical","paddingHorizontal","color","withText","position","top","left","marginLeft","minWidth","height","borderRadius","radius","full","backgroundColor","colors","danger","borderWidth","borderColor","components","tabBar","background","surface","onDanger","fontSize","typography","variants","caption","lineHeight"],"sourceRoot":"../../../../src","sources":["components/navigation/TabBarItem.tsx"],"mappings":"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","ignoreList":[]}