@vvedantb/native-ui 0.2.1 → 0.3.12

package/src/primitives/native-only-animated-view.tsx

@@ -1,5 +1,6 @@
 import { Platform, View, type ViewProps } from "react-native";
 import Animated, { type AnimatedProps } from "react-native-reanimated";
+import { useReduceMotion } from "../useReduceMotion";
 
 type NativeOnlyAnimatedViewProps = ViewProps & {
   entering?: AnimatedProps<ViewProps>["entering"];
@@ -7,6 +8,11 @@ type NativeOnlyAnimatedViewProps = ViewProps & {
   layout?: AnimatedProps<ViewProps>["layout"];
 };
 
+/**
+ * `Animated.View` with layout animations on iOS and Android, a plain `View`
+ * on web. With Reduce Motion on, it drops the animations: sheets, toasts and
+ * the `Select` popover appear and leave in place.
+ */
 function NativeOnlyAnimatedView({
   children,
   entering,
@@ -14,15 +20,16 @@ function NativeOnlyAnimatedView({
   layout,
   ...props
 }: NativeOnlyAnimatedViewProps) {
+  const reduceMotion = useReduceMotion();
   if (Platform.OS === "web") {
     return <View {...props}>{children}</View>;
   }
 
   return (
     <Animated.View
-      entering={entering}
-      exiting={exiting}
-      layout={layout}
+      entering={reduceMotion ? undefined : entering}
+      exiting={reduceMotion ? undefined : exiting}
+      layout={reduceMotion ? undefined : layout}
       {...props}
     >
       {children}

package/src/primitives/overlay.tsx

@@ -0,0 +1,179 @@
+import * as Slot from "@rn-primitives/slot";
+import {
+  createContext,
+  useContext,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Pressable,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { palette } from "../palette";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { useControllableState } from "./use-controllable-state";
+
+type OverlayContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+};
+
+const OverlayContext = createContext<OverlayContextValue | null>(null);
+
+export function useOverlay(part: string): OverlayContextValue {
+  const context = useContext(OverlayContext);
+  if (!context) {
+    throw new Error(`${part} must be inside its Dialog, AlertDialog or Sheet root.`);
+  }
+  return context;
+}
+
+export type OverlayRootProps = {
+  /** Open state when the parent controls it. */
+  open?: boolean;
+  /** Initial open state when `open` is not set. Default `false`. */
+  defaultOpen?: boolean;
+  /** Called with the next open state (trigger, close, backdrop, Android back). */
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+};
+
+/** Root shared by `Dialog`, `AlertDialog` and `Sheet`: holds the open state, renders no view. */
+export function OverlayRoot({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+}: OverlayRootProps) {
+  const [value, setValue] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+  return (
+    <OverlayContext.Provider value={{ open: value, setOpen: setValue }}>
+      {children}
+    </OverlayContext.Provider>
+  );
+}
+
+export type OverlayPressableProps = ComponentPropsWithoutRef<typeof Pressable> & {
+  /** Merge the press handler into the single child (for example a `Button`) instead of wrapping it. */
+  asChild?: boolean;
+};
+
+function OverlayPressable({
+  asChild,
+  next,
+  part,
+  onPress,
+  ...props
+}: OverlayPressableProps & { next: boolean; part: string }) {
+  const { setOpen } = useOverlay(part);
+  const Component = asChild ? Slot.Pressable : Pressable;
+  return (
+    <Component
+      accessibilityRole="button"
+      {...props}
+      onPress={(event: GestureResponderEvent) => {
+        onPress?.(event);
+        setOpen(next);
+      }}
+    />
+  );
+}
+
+export function OverlayTrigger(props: OverlayPressableProps & { part: string }) {
+  return <OverlayPressable {...props} next />;
+}
+
+export function OverlayClose(props: OverlayPressableProps & { part: string }) {
+  return <OverlayPressable {...props} next={false} />;
+}
+
+/**
+ * RN `Modal` with a tinted backdrop, safe-area padding and keyboard avoidance.
+ * `placement="center"` centres the child (dialogs) inside the insets on every
+ * side; `"bottom"` pins it to the bottom edge (sheets), which pad their own
+ * bottom inset. The backdrop closes the overlay only when `dismissible`;
+ * Android back and the VoiceOver escape gesture always close it, as Escape
+ * does on the web. With Reduce Motion on, the fade is off.
+ */
+export function OverlayModal({
+  part,
+  placement,
+  dismissible,
+  children,
+}: {
+  part: string;
+  placement: "center" | "bottom";
+  dismissible: boolean;
+  children: ReactNode;
+}) {
+  const { open, setOpen } = useOverlay(part);
+  const scheme = useScheme();
+  const insets = useSafeAreaInsets();
+  const reduceMotion = useReduceMotion();
+  const close = () => setOpen(false);
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType={reduceMotion ? "none" : "fade"}
+      statusBarTranslucent
+      onRequestClose={close}
+    >
+      {/* Android too: a modal window with `statusBarTranslucent` may not
+          resize for the keyboard, which then covers the fields. The padding
+          is the measured overlap, so it drops to 0 where the window does
+          resize. */}
+      <KeyboardAvoidingView behavior="padding" style={styles.fill}>
+        <Pressable
+          testID={`${part}-backdrop`}
+          accessible={dismissible}
+          accessibilityRole="button"
+          accessibilityLabel="Close"
+          disabled={!dismissible}
+          onPress={close}
+          style={[StyleSheet.absoluteFill, { backgroundColor: palette.backdrop[scheme] }]}
+        />
+        <View
+          pointerEvents="box-none"
+          onAccessibilityEscape={close}
+          style={[
+            styles.fill,
+            placement === "bottom"
+              ? {
+                  justifyContent: "flex-end",
+                  paddingTop: insets.top + 16,
+                  paddingLeft: insets.left,
+                  paddingRight: insets.right,
+                }
+              : {
+                  justifyContent: "center",
+                  paddingTop: insets.top + 16,
+                  paddingBottom: insets.bottom + 16,
+                  paddingLeft: insets.left + 16,
+                  paddingRight: insets.right + 16,
+                },
+          ]}
+        >
+          {children}
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+});

package/src/primitives/select.tsx

@@ -6,13 +6,16 @@ import {
   ChevronUpIcon,
 } from "lucide-react-native";
 import * as React from "react";
-import { Platform, ScrollView, StyleSheet, View } from "react-native";
+import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
 import { FadeIn, FadeOut } from "react-native-reanimated";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { NativeOnlyAnimatedView } from "./native-only-animated-view";
 import { TextClassContext } from "./text";
 import { LiquidGlass } from "../LiquidGlass";
 import { cn } from "../cn";
+import { textStyle, typeStyle } from "../controlStyles";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
 
 type Option = SelectPrimitive.Option;
 
@@ -30,14 +33,18 @@ type SelectValueProps = React.ComponentPropsWithoutRef<
 const SelectValue = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Value>,
   SelectValueProps
->(({ className, ...props }, ref) => {
-  return (
-    <SelectPrimitive.Value
-      ref={ref}
-      className={cn("line-clamp-1 text-sm text-foreground", className)}
-      {...props}
-    />
-  );
+>(({ className, style, ...props }, ref) => {
+  const classes = cn("line-clamp-1 text-sm text-foreground", className);
+  if (Platform.OS === "web") {
+    // Radix `Select.Value` drops `className` and `style`, so the placeholder
+    // took the page colour. Its span inherits them from this Text instead.
+    return (
+      <Text className={classes} style={style}>
+        <SelectPrimitive.Value ref={ref} {...props} />
+      </Text>
+    );
+  }
+  return <SelectPrimitive.Value ref={ref} className={classes} style={style} {...props} />;
 });
 
 type SelectTriggerProps = React.ComponentPropsWithoutRef<
@@ -51,6 +58,7 @@ const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   SelectTriggerProps
 >(({ className, children, size = "default", disabled, ...props }, ref) => {
+  const scheme = useScheme();
   return (
     <SelectPrimitive.Trigger
       ref={ref}
@@ -64,7 +72,7 @@ const SelectTrigger = React.forwardRef<
       {...props}
     >
       <>{children}</>
-      <ChevronDown size={16} color="#737373" />
+      <ChevronDown size={16} color={tokens.color.muted[scheme]} />
     </SelectPrimitive.Trigger>
   );
 });
@@ -155,6 +163,7 @@ const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   SelectItemProps
 >(({ className, disabled, ...props }, ref) => {
+  const scheme = useScheme();
   return (
     <SelectPrimitive.Item
       ref={ref}
@@ -168,10 +177,14 @@ const SelectItem = React.forwardRef<
     >
       <View className="absolute right-2 size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
-          <Check size={16} color="#737373" />
+          <Check size={16} color={tokens.color.muted[scheme]} />
         </SelectPrimitive.ItemIndicator>
       </View>
-      <SelectPrimitive.ItemText className="select-none text-sm font-instrument-sans-medium text-foreground" />
+      <SelectPrimitive.ItemText
+        className="select-none text-sm font-instrument-sans-medium"
+        // One object: on web the item text is a Radix slot, which drops arrays.
+        style={{ ...textStyle("foreground", scheme), ...typeStyle("medium") }}
+      />
     </SelectPrimitive.Item>
   );
 });

package/src/primitives/switch.tsx

@@ -1,6 +1,6 @@
 import * as SwitchPrimitives from "@rn-primitives/switch";
 import * as React from "react";
-import { Platform } from "react-native";
+import { Platform, type ViewStyle } from "react-native";
 import { cn } from "../cn";
 
 type SwitchProps = React.ComponentPropsWithoutRef<
@@ -8,8 +8,12 @@ type SwitchProps = React.ComponentPropsWithoutRef<
 > & {
   className?: string;
   thumbClassName?: string;
-  onColor?: string;
-  offColor?: string;
+  /**
+   * Track and thumb colours. Flat objects: on web each part is a Radix slot,
+   * which spreads `style`, so these are the only styles applied there.
+   */
+  trackStyle?: ViewStyle;
+  thumbStyle?: ViewStyle;
 };
 
 const Switch = React.forwardRef<
@@ -20,8 +24,8 @@ const Switch = React.forwardRef<
     {
       className,
       thumbClassName,
-      onColor,
-      offColor,
+      trackStyle,
+      thumbStyle,
       checked,
       style,
       disabled,
@@ -30,16 +34,10 @@ const Switch = React.forwardRef<
     ref,
   ) => {
     const isChecked = Boolean(checked);
-    const trackColor =
-      Platform.OS !== "web" && (onColor || offColor)
-        ? { backgroundColor: isChecked ? onColor : offColor }
-        : null;
     const resolvedStyle =
       Platform.OS === "web" || typeof style === "function"
-        ? undefined
-        : trackColor
-          ? [trackColor, style]
-          : style;
+        ? trackStyle
+        : [trackStyle, style];
 
     return (
       <SwitchPrimitives.Root
@@ -59,6 +57,7 @@ const Switch = React.forwardRef<
         {...props}
       >
         <SwitchPrimitives.Thumb
+          style={thumbStyle}
           className={cn(
             "h-4 w-4 rounded-full bg-background transition-transform",
             isChecked

package/src/primitives/use-controllable-state.ts

@@ -0,0 +1,24 @@
+import { useCallback, useState } from "react";
+
+/** `value` when the parent controls it, else local state seeded by `defaultValue`. `onChange` fires either way. */
+export function useControllableState<T>({
+  value,
+  defaultValue,
+  onChange,
+}: {
+  value: T | undefined;
+  defaultValue: T;
+  onChange?: (next: T) => void;
+}) {
+  const [local, setLocal] = useState(defaultValue);
+  const controlled = value !== undefined;
+  const current = controlled ? value : local;
+  const setValue = useCallback(
+    (next: T) => {
+      if (!controlled) setLocal(next);
+      onChange?.(next);
+    },
+    [controlled, onChange],
+  );
+  return [current, setValue] as const;
+}

package/src/settings/SettingsField.tsx

@@ -1,4 +1,6 @@
 import { View, Text } from "react-native";
+import { textStyle, typeStyle } from "../controlStyles";
+import { useScheme } from "../useScheme";
 
 export function SettingsField({
   label,
@@ -9,10 +11,14 @@ export function SettingsField({
   description?: React.ReactNode;
   children: React.ReactNode;
 }) {
+  const scheme = useScheme();
   return (
     <View>
       {typeof label === "string" ? (
-        <Text className="mb-2 text-base font-instrument-sans-semibold text-foreground">
+        <Text
+          className="mb-2 text-base font-instrument-sans-semibold"
+          style={[textStyle("foreground", scheme), typeStyle("semibold")]}
+        >
           {label}
         </Text>
       ) : (
@@ -21,7 +27,10 @@ export function SettingsField({
       {children}
       {description != null ? (
         typeof description === "string" ? (
-          <Text className="mt-1.5 text-sm font-instrument-sans text-muted-foreground">
+          <Text
+            className="mt-1.5 text-sm font-instrument-sans"
+            style={textStyle("muted", scheme)}
+          >
             {description}
           </Text>
         ) : (

package/src/settings/SettingsSection.tsx

@@ -1,6 +1,8 @@
 import { View, Text } from "react-native";
 import { cn } from "../cn";
-import { FloatingSurface } from "../FloatingSurface";
+import { cardStyle, textStyle, typeStyle } from "../controlStyles";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
 
 type SettingsSectionBodyVariant = "form" | "list" | "compact";
 
@@ -21,6 +23,7 @@ export function SettingsSection({
   bodyVariant?: SettingsSectionBodyVariant;
   className?: string;
 }) {
+  const scheme = useScheme();
   const hasBody = children != null;
   const hasCard = hasBody || footer != null;
 
@@ -29,7 +32,11 @@ export function SettingsSection({
       <View className="flex-row items-start justify-between gap-4 px-4">
         <View className="min-w-0 flex-1">
           {typeof title === "string" ? (
-            <Text className="text-lg font-instrument-sans-bold text-foreground">
+            <Text
+              accessibilityRole="header"
+              className="text-lg font-instrument-sans-semibold"
+              style={[textStyle("foreground", scheme), typeStyle("semibold")]}
+            >
               {title}
             </Text>
           ) : (
@@ -37,7 +44,10 @@ export function SettingsSection({
           )}
           {description != null ? (
             typeof description === "string" ? (
-              <Text className="mt-0.5 text-base font-instrument-sans text-muted-foreground">
+              <Text
+                className="mt-0.5 text-base font-instrument-sans"
+                style={textStyle("muted", scheme)}
+              >
                 {description}
               </Text>
             ) : (
@@ -49,7 +59,8 @@ export function SettingsSection({
       </View>
 
       {hasCard ? (
-        <FloatingSurface>
+        // The web section card (`rounded-lg bg-surface-card`): flat, no shadow.
+        <View className="overflow-hidden" style={cardStyle(scheme)}>
           {hasBody ? (
             <View
               className={
@@ -64,11 +75,14 @@ export function SettingsSection({
             </View>
           ) : null}
           {footer != null ? (
-            <View className="flex-row items-center justify-end gap-2 bg-background px-4 py-3">
+            <View
+              className="flex-row items-center justify-end gap-2 px-4 py-3"
+              style={{ backgroundColor: tokens.color.surfaceSecondary[scheme] }}
+            >
               {footer}
             </View>
           ) : null}
-        </FloatingSurface>
+        </View>
       ) : null}
     </View>
   );

package/src/settings/SettingsToggleRow.tsx

@@ -1,6 +1,8 @@
 import { View, Text } from "react-native";
 import { cn } from "../cn";
+import { textStyle, typeStyle } from "../controlStyles";
 import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
 
 export function SettingsToggleRow({
   title,
@@ -14,6 +16,7 @@ export function SettingsToggleRow({
   className?: string;
 }) {
   const largerText = useLargerText();
+  const scheme = useScheme();
   return (
     <View
       className={cn(
@@ -26,9 +29,10 @@ export function SettingsToggleRow({
         {typeof title === "string" ? (
           <Text
             className={cn(
-              "font-instrument-sans-semibold text-foreground",
+              "font-instrument-sans-semibold",
               largerText ? "text-xl" : "text-lg",
             )}
+            style={[textStyle("foreground", scheme), typeStyle("semibold")]}
           >
             {title}
           </Text>
@@ -39,9 +43,10 @@ export function SettingsToggleRow({
           typeof description === "string" ? (
             <Text
               className={cn(
-                "mt-1 font-instrument-sans text-muted-foreground",
+                "mt-1 font-instrument-sans",
                 largerText ? "text-lg" : "text-base",
               )}
+              style={textStyle("muted", scheme)}
             >
               {description}
             </Text>

package/src/tabBarRoutes.ts

@@ -0,0 +1,52 @@
+// Which routes `FloatingTabBar` draws. No React Native runtime import, so the
+// tests can load this file.
+import type { ReactNode } from "react";
+import type { ColorValue, StyleProp, ViewStyle } from "react-native";
+
+/**
+ * The fields `FloatingTabBar` reads from a route's options (React
+ * Navigation's `BottomTabNavigationOptions`, and Expo Router's `href`).
+ */
+export type FloatingTabOptions = {
+  title?: string;
+  tabBarLabel?: string | ((props: never) => ReactNode);
+  tabBarIcon?: (props: {
+    focused: boolean;
+    color: ColorValue;
+    size: number;
+  }) => ReactNode;
+  tabBarActiveTintColor?: ColorValue;
+  tabBarInactiveTintColor?: ColorValue;
+  tabBarButtonTestID?: string;
+  tabBarAccessibilityLabel?: string;
+  /** Expo Router's `href`. `null` hides the tab. */
+  href?: string | null;
+  /** Only `display: "none"` is read: it hides the tab, as in React Navigation's own bar. */
+  tabBarItemStyle?: StyleProp<ViewStyle>;
+};
+
+/** The `display` a style resolves to: in an array the last one set wins, as in `StyleSheet.flatten`. */
+function displayOf(style: unknown): unknown {
+  if (Array.isArray(style)) {
+    let display: unknown;
+    for (const item of style) {
+      const value = displayOf(item);
+      if (value !== undefined) display = value;
+    }
+    return display;
+  }
+  return style && typeof style === "object" ? (style as { display?: unknown }).display : undefined;
+}
+
+/**
+ * Whether `FloatingTabBar` draws a tab for a route with these options. A route
+ * without a descriptor has none. Apps hide a tab with Expo Router's
+ * `options={{ href: null }}`. Expo Router's `Tabs` can drop `href` and pass
+ * `tabBarItemStyle: { display: "none" }` in its place, so both hide the tab.
+ * Hiding is display-only: `state.index` still counts every route.
+ */
+export function isTabBarRouteVisible(
+  options: FloatingTabOptions | undefined,
+): options is FloatingTabOptions {
+  return options !== undefined && options.href !== null && displayOf(options.tabBarItemStyle) !== "none";
+}