@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/FloatingSurface.jsx

@@ -0,0 +1,226 @@
+import { c as _c } from "react/compiler-runtime";
+import { Platform, StyleSheet, View } from "react-native";
+import { glassMode, loadBlur } from "./blur";
+import { cn } from "./cn";
+import { hasDefiniteHeight } from "./definiteSize";
+import { floatingFill, floatingHairline, floatingShadow, floatingSolidFill, FLOATING_RADIUS } from "./floating";
+import { useGlassBlurTarget } from "./glassBlur";
+import { useReduceTransparency } from "./useReduceTransparency";
+import { useScheme } from "./useScheme";
+export function FloatingSurface(t0) {
+  const $ = _c(50);
+  let children;
+  let className;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      children,
+      radius: t1,
+      blur: t2,
+      elevated: t3,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = style;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    style = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+  }
+  const radius = t1 === undefined ? FLOATING_RADIUS : t1;
+  const blur = t2 === undefined ? true : t2;
+  const elevated = t3 === undefined ? true : t3;
+  const colorScheme = useScheme();
+  const reduceTransparency = useReduceTransparency();
+  const blurTarget = useGlassBlurTarget();
+  const BlurView = loadBlur()?.BlurView;
+  let t4;
+  if ($[8] !== blur || $[9] !== reduceTransparency) {
+    t4 = glassMode({
+      os: Platform.OS,
+      blur,
+      reduceTransparency,
+      hasBlurView: BlurView != null
+    });
+    $[8] = blur;
+    $[9] = reduceTransparency;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  const mode = t4;
+  const isDark = colorScheme === "dark";
+  const opaqueFill = isDark ? floatingSolidFill.dark : floatingSolidFill.light;
+  const translucentFill = isDark ? floatingFill.dark : floatingFill.light;
+  const border = isDark ? floatingHairline.dark : floatingHairline.light;
+  const fill = mode === "solid" ? opaqueFill : translucentFill;
+  let t5;
+  if ($[11] !== className) {
+    t5 = cn(className);
+    $[11] = className;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== radius) {
+    t6 = {
+      borderRadius: radius
+    };
+    $[13] = radius;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  const t7 = elevated ? floatingShadow : null;
+  let t8;
+  if ($[15] !== fill) {
+    t8 = {
+      backgroundColor: fill
+    };
+    $[15] = fill;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  let t9;
+  if ($[17] !== style || $[18] !== t6 || $[19] !== t7 || $[20] !== t8) {
+    t9 = [t6, t7, style, t8];
+    $[17] = style;
+    $[18] = t6;
+    $[19] = t7;
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  const t10 = mode === "blur" ? "transparent" : fill;
+  let t11;
+  if ($[22] !== border || $[23] !== radius || $[24] !== t10) {
+    t11 = {
+      borderRadius: radius,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: border,
+      backgroundColor: t10
+    };
+    $[22] = border;
+    $[23] = radius;
+    $[24] = t10;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  const t12 = hasDefiniteHeight(style) ? styles.fill : null;
+  let t13;
+  if ($[26] !== t11 || $[27] !== t12) {
+    t13 = [styles.clip, t11, Platform.OS === "ios" ? styles.continuous : null, t12];
+    $[26] = t11;
+    $[27] = t12;
+    $[28] = t13;
+  } else {
+    t13 = $[28];
+  }
+  let t14;
+  if ($[29] !== blurTarget || $[30] !== isDark || $[31] !== mode) {
+    t14 = mode === "blur" && BlurView ? <BlurView pointerEvents="none" tint={isDark ? "systemMaterialDark" : "systemMaterialLight"} intensity={70} experimentalBlurMethod={Platform.OS === "android" ? "dimezisBlurView" : undefined} blurMethod="dimezisBlurView" blurReductionFactor={3} blurTarget={blurTarget ?? undefined} style={StyleSheet.absoluteFill} /> : null;
+    $[29] = blurTarget;
+    $[30] = isDark;
+    $[31] = mode;
+    $[32] = t14;
+  } else {
+    t14 = $[32];
+  }
+  let t15;
+  if ($[33] !== mode || $[34] !== translucentFill) {
+    t15 = mode === "blur" && Platform.OS === "android" ? <View pointerEvents="none" style={[StyleSheet.absoluteFill, {
+      backgroundColor: translucentFill
+    }]} /> : null;
+    $[33] = mode;
+    $[34] = translucentFill;
+    $[35] = t15;
+  } else {
+    t15 = $[35];
+  }
+  let t16;
+  if ($[36] !== mode || $[37] !== translucentFill) {
+    t16 = mode === "backdrop" ? <View pointerEvents="none" className="absolute inset-0 backdrop-blur-xl" style={{
+      backgroundColor: translucentFill
+    }} /> : null;
+    $[36] = mode;
+    $[37] = translucentFill;
+    $[38] = t16;
+  } else {
+    t16 = $[38];
+  }
+  let t17;
+  if ($[39] !== children || $[40] !== t13 || $[41] !== t14 || $[42] !== t15 || $[43] !== t16) {
+    t17 = <View style={t13}>{t14}{t15}{t16}{children}</View>;
+    $[39] = children;
+    $[40] = t13;
+    $[41] = t14;
+    $[42] = t15;
+    $[43] = t16;
+    $[44] = t17;
+  } else {
+    t17 = $[44];
+  }
+  let t18;
+  if ($[45] !== props || $[46] !== t17 || $[47] !== t5 || $[48] !== t9) {
+    t18 = <View className={t5} {...props} style={t9}>{t17}</View>;
+    $[45] = props;
+    $[46] = t17;
+    $[47] = t5;
+    $[48] = t9;
+    $[49] = t18;
+  } else {
+    t18 = $[49];
+  }
+  return t18;
+}
+export function GlassSheetBackground(t0) {
+  const $ = _c(3);
+  const {
+    style,
+    pointerEvents
+  } = t0;
+  let t1;
+  if ($[0] !== pointerEvents || $[1] !== style) {
+    t1 = <FloatingSurface style={style} pointerEvents={pointerEvents} radius={20} className="rounded-t-[20px]" />;
+    $[0] = pointerEvents;
+    $[1] = style;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+const styles = StyleSheet.create({
+  clip: {
+    overflow: "hidden",
+    // A surface held shorter than its content (a sheet in a short window)
+    // shrinks the clip with it, so a scroll view inside can scroll.
+    flexShrink: 1
+  },
+  fill: {
+    flex: 1
+  },
+  continuous: {
+    borderCurve: "continuous"
+  }
+});

package/dist/FloatingTabBar.jsx

@@ -0,0 +1,403 @@
+import { c as _c } from "react/compiler-runtime";
+import { memo, useEffect } from "react";
+import { Pressable, Text, View } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { floatingTabPillColors, tabColors, typeStyle } from "./controlStyles";
+import { selectionHaptic } from "./haptics";
+import { FloatingSurface } from "./FloatingSurface";
+import { isTabBarHidden, isTabBarRouteVisible } from "./tabBarRoutes";
+import { useLargerText } from "./theme";
+import { useReduceMotion } from "./useReduceMotion";
+import { useScheme } from "./useScheme";
+import { FLOATING_PILL_RADIUS, tabBarHeight, tabBarSlotStyle } from "./floating";
+
+/**
+ * Space between the bar edge and the tabs, on every side of the active pill,
+ * in points. The same all round, so the pill follows the bar's curve.
+ */
+const TAB_BAR_PADDING = 4;
+
+/** The web `--tabs-dur` (200ms) and `--tabs-ease` (`tokens.css`). */
+const PILL_SLIDE = {
+  duration: 200,
+  easing: Easing.bezier(0.22, 1, 0.36, 1)
+};
+
+/**
+ * The fields this bar reads from the props Expo Router's `Tabs` passes to
+ * `tabBar` (React Navigation's `BottomTabBarProps`, Expo SDK 57). Declared
+ * here so the tab bar does not import `expo-router`.
+ */
+
+/**
+ * The floating pill tab bar, for the `tabBar` prop of Expo Router's `Tabs`.
+ * The focused tab sits on a pill (`floatingTabPillColors`), with the
+ * foreground label; the others are muted. A route's
+ * `tabBarActiveTintColor` and `tabBarInactiveTintColor` override the label
+ * and icon colours. Hide a tab with `options={{ href: null }}` on its
+ * `Tabs.Screen`: the bar draws no tab for it (`isTabBarRouteVisible`), and
+ * the other tabs keep their focus and navigation. The focused route hides the
+ * whole bar with `tabBarStyle: { display: "none" }` (`isTabBarHidden`).
+ */
+export function FloatingTabBar(t0) {
+  const $ = _c(40);
+  const {
+    state,
+    descriptors,
+    navigation
+  } = t0;
+  const insets = useSafeAreaInsets();
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  let t1;
+  if ($[0] !== largerText) {
+    t1 = tabBarHeight(largerText);
+    $[0] = largerText;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const height = t1;
+  const focusedRoute = state.routes[state.index];
+  if (focusedRoute && isTabBarHidden(descriptors[focusedRoute.key]?.options)) {
+    return null;
+  }
+  let t2;
+  let visible;
+  if ($[2] !== descriptors || $[3] !== focusedRoute?.key || $[4] !== state.routes) {
+    let t3;
+    if ($[7] !== descriptors) {
+      t3 = route => isTabBarRouteVisible(descriptors[route.key]?.options);
+      $[7] = descriptors;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
+    }
+    visible = state.routes.filter(t3);
+    let t4;
+    if ($[9] !== focusedRoute?.key) {
+      t4 = route_0 => route_0.key === focusedRoute?.key;
+      $[9] = focusedRoute?.key;
+      $[10] = t4;
+    } else {
+      t4 = $[10];
+    }
+    t2 = visible.findIndex(t4);
+    $[2] = descriptors;
+    $[3] = focusedRoute?.key;
+    $[4] = state.routes;
+    $[5] = t2;
+    $[6] = visible;
+  } else {
+    t2 = $[5];
+    visible = $[6];
+  }
+  const active = t2;
+  let t3;
+  if ($[11] !== insets) {
+    t3 = tabBarSlotStyle(insets);
+    $[11] = insets;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  let t4;
+  if ($[13] !== active || $[14] !== visible) {
+    t4 = active >= 0 ? <ActiveTabPill index={active} count={visible.length} /> : null;
+    $[13] = active;
+    $[14] = visible;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  let t5;
+  if ($[16] !== height) {
+    t5 = {
+      height,
+      paddingHorizontal: TAB_BAR_PADDING
+    };
+    $[16] = height;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  let t6;
+  if ($[18] !== descriptors || $[19] !== largerText || $[20] !== navigation || $[21] !== scheme || $[22] !== state.index || $[23] !== state.routes) {
+    let t7;
+    if ($[25] !== descriptors || $[26] !== largerText || $[27] !== navigation || $[28] !== scheme || $[29] !== state.index) {
+      t7 = (route_1, index) => {
+        const options = descriptors[route_1.key]?.options;
+        if (!isTabBarRouteVisible(options)) {
+          return null;
+        }
+        const focused = state.index === index;
+        const label = typeof options.tabBarLabel === "string" ? options.tabBarLabel : typeof options.title === "string" ? options.title : route_1.name;
+        const color = (focused ? options.tabBarActiveTintColor : options.tabBarInactiveTintColor) ?? tabColors("segmented", focused, scheme).color;
+        return <TabBarItem key={route_1.key} route={route_1} navigation={navigation} focused={focused} label={label} color={color} largerText={largerText} renderIcon={options.tabBarIcon} testID={options.tabBarButtonTestID} accessibilityLabel={options.tabBarAccessibilityLabel ?? label} />;
+      };
+      $[25] = descriptors;
+      $[26] = largerText;
+      $[27] = navigation;
+      $[28] = scheme;
+      $[29] = state.index;
+      $[30] = t7;
+    } else {
+      t7 = $[30];
+    }
+    t6 = state.routes.map(t7);
+    $[18] = descriptors;
+    $[19] = largerText;
+    $[20] = navigation;
+    $[21] = scheme;
+    $[22] = state.index;
+    $[23] = state.routes;
+    $[24] = t6;
+  } else {
+    t6 = $[24];
+  }
+  let t7;
+  if ($[31] !== t5 || $[32] !== t6) {
+    t7 = <View className="flex-row items-center justify-around" style={t5} accessibilityRole="tablist">{t6}</View>;
+    $[31] = t5;
+    $[32] = t6;
+    $[33] = t7;
+  } else {
+    t7 = $[33];
+  }
+  let t8;
+  if ($[34] !== t4 || $[35] !== t7) {
+    t8 = <FloatingSurface radius={FLOATING_PILL_RADIUS}>{t4}{t7}</FloatingSurface>;
+    $[34] = t4;
+    $[35] = t7;
+    $[36] = t8;
+  } else {
+    t8 = $[36];
+  }
+  let t9;
+  if ($[37] !== t3 || $[38] !== t8) {
+    t9 = <View pointerEvents="box-none" style={t3}>{t8}</View>;
+    $[37] = t3;
+    $[38] = t8;
+    $[39] = t9;
+  } else {
+    t9 = $[39];
+  }
+  return t9;
+}
+/**
+ * One tab. Memoised: a switch re-renders the bar, and without it every tab
+ * and its SVG icon re-rendered too (the kit is not built with React
+ * Compiler). Now only the two tabs whose focus changed render. The props are
+ * stable between switches: `route` and `navigation` keep their identity, and
+ * `tabBarIcon` is the caller's function.
+ */
+const TabBarItem = memo(function TabBarItem(t0) {
+  const $ = _c(29);
+  const {
+    route,
+    navigation,
+    focused,
+    label,
+    color,
+    largerText,
+    renderIcon,
+    testID,
+    accessibilityLabel
+  } = t0;
+  let t1;
+  if ($[0] !== focused || $[1] !== navigation || $[2] !== route.key || $[3] !== route.name || $[4] !== route.params) {
+    t1 = () => {
+      const event = navigation.emit({
+        type: "tabPress",
+        target: route.key,
+        canPreventDefault: true
+      });
+      if (!focused && !event.defaultPrevented) {
+        selectionHaptic();
+        navigation.navigate(route.name, route.params);
+      }
+    };
+    $[0] = focused;
+    $[1] = navigation;
+    $[2] = route.key;
+    $[3] = route.name;
+    $[4] = route.params;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const onPress = t1;
+  let t2;
+  if ($[6] !== focused) {
+    t2 = {
+      selected: focused
+    };
+    $[6] = focused;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] !== color || $[9] !== focused || $[10] !== largerText || $[11] !== renderIcon) {
+    t3 = renderIcon ? renderIcon({
+      focused,
+      color,
+      size: largerText ? 28 : 24
+    }) : null;
+    $[8] = color;
+    $[9] = focused;
+    $[10] = largerText;
+    $[11] = renderIcon;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  const t4 = `font-instrument-sans-semibold ${largerText ? "text-base" : "text-sm"}`;
+  let t5;
+  if ($[13] !== color) {
+    t5 = {
+      color
+    };
+    $[13] = color;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = typeStyle("semibold");
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== t5) {
+    t7 = [t5, t6];
+    $[16] = t5;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] !== label || $[19] !== t4 || $[20] !== t7) {
+    t8 = <Text numberOfLines={1} maxFontSizeMultiplier={1.5} className={t4} style={t7}>{label}</Text>;
+    $[18] = label;
+    $[19] = t4;
+    $[20] = t7;
+    $[21] = t8;
+  } else {
+    t8 = $[21];
+  }
+  let t9;
+  if ($[22] !== accessibilityLabel || $[23] !== onPress || $[24] !== t2 || $[25] !== t3 || $[26] !== t8 || $[27] !== testID) {
+    t9 = <Pressable testID={testID} accessibilityRole="tab" accessibilityState={t2} accessibilityLabel={accessibilityLabel} onPress={onPress} className="min-h-12 min-w-12 flex-1 items-center justify-center gap-1" style={_temp}>{t3}{t8}</Pressable>;
+    $[22] = accessibilityLabel;
+    $[23] = onPress;
+    $[24] = t2;
+    $[25] = t3;
+    $[26] = t8;
+    $[27] = testID;
+    $[28] = t9;
+  } else {
+    t9 = $[28];
+  }
+  return t9;
+});
+
+/**
+ * The pill behind tab `index` of `count` drawn tabs: one tab wide (they share
+ * the row equally), `TAB_BAR_PADDING` inside the bar, in
+ * `floatingTabPillColors` (the muted `--default` in light, `--segment` in
+ * dark, so it shows on the glass bar) and the `TabsTrigger` pills outline.
+ * It slides to a newly focused tab, as the web segmented pill does,
+ * and moves at once with Reduce Motion. Behind the tablist, so assistive tech
+ * reads only the tabs.
+ */
+function ActiveTabPill(t0) {
+  const $ = _c(14);
+  const {
+    index,
+    count
+  } = t0;
+  const scheme = useScheme();
+  const reduceMotion = useReduceMotion();
+  const left = 100 * index / count;
+  const offset = useSharedValue(left);
+  let t1;
+  let t2;
+  if ($[0] !== left || $[1] !== offset || $[2] !== reduceMotion) {
+    t1 = () => {
+      offset.set(reduceMotion ? left : withTiming(left, PILL_SLIDE));
+    };
+    t2 = [left, reduceMotion, offset];
+    $[0] = left;
+    $[1] = offset;
+    $[2] = reduceMotion;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t1 = $[3];
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  const slide = useAnimatedStyle(() => ({
+    left: `${offset.get()}%`
+  }));
+  let t3;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      position: "absolute",
+      top: TAB_BAR_PADDING,
+      bottom: TAB_BAR_PADDING,
+      left: TAB_BAR_PADDING,
+      right: TAB_BAR_PADDING
+    };
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const t4 = `${100 / count}%`;
+  let t5;
+  if ($[6] !== scheme) {
+    t5 = floatingTabPillColors(scheme);
+    $[6] = scheme;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== t4 || $[9] !== t5.backgroundColor) {
+    t6 = {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      width: t4,
+      borderRadius: FLOATING_PILL_RADIUS,
+      backgroundColor: t5.backgroundColor
+    };
+    $[8] = t4;
+    $[9] = t5.backgroundColor;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== slide || $[12] !== t6) {
+    t7 = <View pointerEvents="none" style={t3}><Animated.View className="border border-white/40 dark:border-white/10" style={[t6, slide]} /></View>;
+    $[11] = slide;
+    $[12] = t6;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  return t7;
+}
+function _temp(t0) {
+  const {
+    pressed
+  } = t0;
+  return {
+    opacity: pressed ? 0.7 : 1
+  };
+}

package/dist/HeaderIconButton.jsx

@@ -0,0 +1,53 @@
+import { c as _c } from "react/compiler-runtime";
+import { TouchableOpacity } from "react-native";
+import { withAlpha } from "./palette";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+/**
+ * Fill and border of `HeaderIconButton`: the surface with a white hairline
+ * (40%) in light and, in dark, the glass `tokens.color.hairline` of the
+ * floating tab bar, so `configureTheme` sets both. Styles, not `bg-surface`,
+ * which an app theme that nests `dark` under `surface` keeps white in dark mode.
+ */
+export function headerIconButtonColors(scheme) {
+  return {
+    backgroundColor: tokens.color.surface[scheme],
+    borderColor: scheme === "dark" ? tokens.color.hairline.dark : withAlpha(tokens.color.white, 0.4)
+  };
+}
+export function HeaderIconButton(t0) {
+  const $ = _c(9);
+  const {
+    onPress,
+    label,
+    testID,
+    children
+  } = t0;
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const t1 = `${largerText ? "h-14 w-14" : "h-12 w-12"} items-center justify-center rounded-full border`;
+  let t2;
+  if ($[0] !== scheme) {
+    t2 = headerIconButtonColors(scheme);
+    $[0] = scheme;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== children || $[3] !== label || $[4] !== onPress || $[5] !== t1 || $[6] !== t2 || $[7] !== testID) {
+    t3 = <TouchableOpacity testID={testID} className={t1} style={t2} onPress={onPress} accessibilityRole="button" accessibilityLabel={label} hitSlop={8} activeOpacity={0.7}>{children}</TouchableOpacity>;
+    $[2] = children;
+    $[3] = label;
+    $[4] = onPress;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = testID;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  return t3;
+}