@vvedantb/native-ui 0.3.15 → 0.3.16

package/README.md

@@ -50,6 +50,8 @@ To hide a tab, give its screen Expo Router's `href: null`. From 0.3.9 `FloatingT
 </Tabs>
 ```
 
+From 0.3.16 the focused tab sits on a rounded pill in the web segmented pill fill (`tabColors("segmented", …)`: `--tabs-pill-bg`, `palette.segment`, with the `TabsTrigger` pills outline), with the foreground label and icon; the other tabs are muted. A route's `tabBarActiveTintColor` and `tabBarInactiveTintColor` still override the label and icon colours. The pill is one tab wide, inset 4 from the bar on every side, and slides to a newly focused tab over the web `--tabs-dur` (200 ms) and `--tabs-ease`. It counts only the tabs drawn, and there is none while a hidden route is focused.
+
 ## Entry points
 
 The root entry exports everything. It still imports `BottomSheetContainer` and `DateTimeField`, so Metro resolves `@gorhom/bottom-sheet`, `@react-native-community/datetimepicker` and `dayjs` for any import from it. Apps without those peers, such as V Store, should import from the smaller entries below. Between them, they export every name the root exports.
@@ -59,7 +61,7 @@ The root entry exports everything. It still imports `BottomSheetContainer` and `
 | `@vvedantb/native-ui/tab-bar` | `FloatingTabBar`, `FloatingTabBarProps`, `FLOATING_INSET`, `FLOATING_TAB_BAR_HEIGHT`, `FLOATING_TAB_BAR_HEIGHT_LARGE`, `tabBarReserve` | `expo-blur`, `expo-haptics` (loaders) |
 | `@vvedantb/native-ui/brand` | `AppMark`, `AppWordmark`, `GoogleMark` (from 0.3.15), `APP_ICONS`, `IconVibot` and the other `Icon*`, the SVG helpers (`APP_MARKS`, `appMarkSvg`, `appTileSvg` and the rest), `FAMILY_APPS`, `familyApp`, `V_PRO_APP_BENEFITS` | none |
 | `@vvedantb/native-ui/button` | `Button`, `ButtonProps`, `ButtonSize`, `ButtonVariant` | none |
-| `@vvedantb/native-ui/primitives` | `Button`, `Input`, `SearchInput`, `Textarea`, `Label`, `Select`, `Switch`, `LabeledSwitchRow`, `Checkbox`, `Card` and its parts, `Badge`, `StatusDot`, `Avatar`, `Separator`, `Progress`, `Spinner`, `Skeleton`, `EmptyState`, `ListRow`, `Chip`, `HeaderIconButton`, `Tabs`, `PillTabs`, `Dialog`, `AlertDialog`, `ConfirmDialog`, `Sheet`, `toast`, `Toaster` | `expo-blur`, `expo-haptics` (loaders) |
+| `@vvedantb/native-ui/primitives` | `Button`, `Input`, `SearchInput`, `Textarea`, `Label`, `Select`, `Switch`, `LabeledSwitchRow`, `Checkbox`, `Card` and its parts, `Badge`, `StatusDot`, `Avatar`, `Separator`, `Progress`, `Spinner`, `Skeleton`, `EmptyState`, `ListRow`, `Chip`, `HeaderIconButton`, `ThemeToggle` (from 0.3.16), `Tabs`, `PillTabs`, `Dialog`, `AlertDialog`, `ConfirmDialog`, `Sheet`, `toast`, `Toaster` | `expo-blur`, `expo-haptics` (loaders) |
 | `@vvedantb/native-ui/search-input` | `SearchInput`, `SearchInputProps` | none |
 | `@vvedantb/native-ui/page-title` | `PageTitle`, `PageHeader`, `PageTitleProps`, `PageHeaderProps` (from 0.3.13) | none |
 | `@vvedantb/native-ui/toast` | `toast`, `Toaster`, `ToastOptions`, `ToastVariant` | none (from 0.3.12) |
@@ -135,7 +137,7 @@ import { NativeUiProvider, Button, Card } from "@vvedantb/native-ui";
 | --- | --- |
 | Actions and fields | `Button` (`default`/`primary`, `secondary`, `outline`, `destructive`, `ghost`, `link`, `tinted`; `sm`/`small`, `default`/`medium`, `lg`/`large`, `icon`), `Input`, `SearchInput` (0.3.9), `Textarea`, `Label`, `Select`, `Switch`, `Checkbox`, `LabeledSwitchRow`, `DateTimeField` |
 | Display | `Card` (+ `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`), `Badge`, `StatusDot`, `Avatar` (+ `AvatarImage`, `AvatarFallback`, `initials()`), `Separator`, `Progress`, `Spinner`, `CenteredSpinner`, `Skeleton`, `EmptyState` (+ `EmptyState.Root` and parts), `ListRow`, `Chip` |
-| Navigation | `Tabs` (+ `TabsList`, `TabsTrigger`, `TabsContent`), `PillTabs`, `FloatingTabBar`, `FloatingFAB`, `HeaderIconButton` |
+| Navigation | `Tabs` (+ `TabsList`, `TabsTrigger`, `TabsContent`), `PillTabs`, `FloatingTabBar`, `FloatingFAB`, `HeaderIconButton`, `ThemeToggle` (0.3.16) |
 | Overlays | `Dialog`, `AlertDialog`, `ConfirmDialog`, `Sheet` (RN `Modal`, each with the web part names), `BottomSheetContainer` (`@gorhom/bottom-sheet`) |
 | Feedback | `toast()` and `<Toaster />` |
 | Brand and upgrade | `APP_ICONS`, `IconVibot` and the other `Icon*`, `AppMark`, `AppWordmark`, `GoogleMark` (0.3.15), `FAMILY_APPS`, `V_PRO_APP_BENEFITS`, `UpgradeToProCard`, `PricingModal` |
@@ -195,10 +197,12 @@ From 0.3.12 a toast looks like the web `SonnerToaster` at its default density wi
 
 The components keep the web sizes on screen and reach a 44 pt touch target with `hitSlop` (`touchSlop` in `src/controlStyles.ts`): `Checkbox` (16), `Switch` (36 × 20), tab triggers (30 high), the `Select` trigger (40 high), the `SearchInput` clear button (24), the `UpgradeToProCard` pill (32 high, slop 8) and `Button` (the slop brings each size to at least 48). Controls set their role and state for VoiceOver and TalkBack: `Button` (`disabled`, `busy` while loading), `Checkbox` (`checked`, `mixed`), `Switch` (`checked`), `Tabs` and `PillTabs` (`tablist`, `tab`, `selected`) and the `Select` trigger (`combobox`, with an `accessibilityLabel` prop). Give a `Button` with no text child an `accessibilityLabel`.
 
-Text scales with the system font size. Labelled controls have minimum heights, so a large Dynamic Type size grows them instead of clipping the label (the `SearchInput` lock grows with the font scale); only the `FloatingTabBar` labels are capped (1.5×), to fit the fixed bar. With Reduce Motion on, dialogs, sheets, toasts, the `Select` popover, `PricingModal`, `Progress` and `Skeleton` do not animate. Dialogs, sheets, toasts, `FloatingTabBar` and `FloatingFAB` stay inside the safe-area insets, and dialog and sheet fields stay above the keyboard on iOS and Android.
+Text scales with the system font size. Labelled controls have minimum heights, so a large Dynamic Type size grows them instead of clipping the label (the `SearchInput` lock grows with the font scale); only the `FloatingTabBar` labels are capped (1.5×), to fit the fixed bar. With Reduce Motion on, dialogs, sheets, toasts, the `Select` popover, `PricingModal`, `Progress`, `Skeleton` and the `FloatingTabBar` pill do not animate. Dialogs, sheets, toasts, `FloatingTabBar` and `FloatingFAB` stay inside the safe-area insets, and dialog and sheet fields stay above the keyboard on iOS and Android.
 
 The brand marks (`APP_ICONS`, the `Icon*` exports, `AppMark` and `GoogleMark`) are images named by `title`, and hidden from assistive tech without one. From 0.3.14 they set the props each platform reads: `accessibilityRole="image"` and `accessibilityLabel` on iOS and Android, `role="img"` and `aria-label` on web. Without a title they set `accessibilityElementsHidden` and `importantForAccessibility="no-hide-descendants"` on native and `aria-hidden` on web. `testID` is `data-testid` on web. On web `react-native-svg` passes its props straight to the DOM `<svg>`, and React Native Web does not map `accessible`, the `accessibility*` props or `testID` there. So do not put them on an `Svg` or on a Tabler icon: put them on the parent `View` or `Pressable`. The package draws no Lucide icon, as a Lucide icon always sets `testID` on its `Svg`. On web the `Select` options are Radix DOM nodes, so from 0.3.14 they take their name and test id as `aria-label` and `data-testid` there, and as `accessibilityLabel` and `testID` on iOS and Android.
 
+`ThemeToggle` (from 0.3.16) is a `HeaderIconButton` that switches between light and dark with NativeWind's `setColorScheme`, the scheme every component reads through `useColorScheme`. It shows and names the scheme it switches to: a moon and "Switch to dark mode" in light, a sun and "Switch to light mode" in dark. It stores nothing: to restore the choice on the next launch, store `useColorScheme().colorScheme` in the app. It takes `testID`.
+
 `GoogleMark` (from 0.3.15) is the four-colour Google "G", 18 by default, for a "Continue with Google" button: `<Button variant="outline" leftIcon={<GoogleMark />}>Continue with Google</Button>`. Its colours are fixed, so it takes no `color`. Leave it without a `title` there, as the label names the button.
 
 ## Floating UI / Android shadows

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "license": "MIT",
   "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar and the family app marks.",
   "type": "module",

package/src/FloatingTabBar.tsx

@@ -1,10 +1,19 @@
+import { 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 { typeStyle } from "./controlStyles";
+import { tabColors, typeStyle } from "./controlStyles";
 import { selectionHaptic } from "./haptics";
 import { FloatingSurface } from "./FloatingSurface";
 import { isTabBarRouteVisible, type FloatingTabOptions } from "./tabBarRoutes";
 import { useLargerText } from "./theme";
+import { useReduceMotion } from "./useReduceMotion";
+import { useScheme } from "./useScheme";
 import {
   FLOATING_INSET,
   FLOATING_PILL_RADIUS,
@@ -12,6 +21,15 @@ import {
   FLOATING_TAB_BAR_HEIGHT_LARGE,
 } 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
@@ -35,9 +53,12 @@ export type FloatingTabBarProps = {
 
 /**
  * The floating pill tab bar, for the `tabBar` prop of Expo Router's `Tabs`.
- * 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 tab sits on a pill in the web segmented pill fill
+ * (`tabColors`), 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.
  */
 export function FloatingTabBar({
   state,
@@ -46,9 +67,17 @@ export function FloatingTabBar({
 }: FloatingTabBarProps) {
   const insets = useSafeAreaInsets();
   const largerText = useLargerText();
+  const scheme = useScheme();
   const height = largerText
     ? FLOATING_TAB_BAR_HEIGHT_LARGE
     : FLOATING_TAB_BAR_HEIGHT;
+  // The pill counts only the tabs drawn. No pill while a hidden route is focused.
+  const visible = state.routes.filter((route) =>
+    isTabBarRouteVisible(descriptors[route.key]?.options),
+  );
+  const active = visible.findIndex(
+    (route) => route.key === state.routes[state.index]?.key,
+  );
 
   return (
     <View
@@ -62,9 +91,12 @@ export function FloatingTabBar({
       }}
     >
       <FloatingSurface radius={FLOATING_PILL_RADIUS}>
+        {active >= 0 ? (
+          <ActiveTabPill index={active} count={visible.length} />
+        ) : null}
         <View
-          className="flex-row items-center justify-around px-2"
-          style={{ height }}
+          className="flex-row items-center justify-around"
+          style={{ height, paddingHorizontal: TAB_BAR_PADDING }}
           accessibilityRole="tablist"
         >
           {state.routes.map((route, index) => {
@@ -80,9 +112,11 @@ export function FloatingTabBar({
                 : typeof options.title === "string"
                   ? options.title
                   : route.name;
-            const color = focused
-              ? options.tabBarActiveTintColor
-              : options.tabBarInactiveTintColor;
+            const color =
+              (focused
+                ? options.tabBarActiveTintColor
+                : options.tabBarInactiveTintColor) ??
+              tabColors("segmented", focused, scheme).color;
             const onPress = () => {
               const event = navigation.emit({
                 type: "tabPress",
@@ -109,7 +143,7 @@ export function FloatingTabBar({
                 {options.tabBarIcon
                   ? options.tabBarIcon({
                       focused,
-                      color: color ?? "#737373",
+                      color,
                       size: largerText ? 28 : 24,
                     })
                   : null}
@@ -133,3 +167,54 @@ export function FloatingTabBar({
     </View>
   );
 }
+
+/**
+ * The pill behind tab `index` of `count` drawn tabs: one tab wide (they share
+ * the row equally), `TAB_BAR_PADDING` inside the bar, in the web segmented
+ * pill fill (`tabColors`, `--tabs-pill-bg`) 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({ index, count }: { index: number; count: number }) {
+  const scheme = useScheme();
+  const reduceMotion = useReduceMotion();
+  const left = (100 * index) / count;
+  const offset = useSharedValue(left);
+
+  useEffect(() => {
+    offset.value = reduceMotion ? left : withTiming(left, PILL_SLIDE);
+  }, [left, reduceMotion, offset]);
+
+  const slide = useAnimatedStyle(() => ({
+    left: `${offset.value}%` as const,
+  }));
+
+  return (
+    <View
+      pointerEvents="none"
+      style={{
+        position: "absolute",
+        top: TAB_BAR_PADDING,
+        bottom: TAB_BAR_PADDING,
+        left: TAB_BAR_PADDING,
+        right: TAB_BAR_PADDING,
+      }}
+    >
+      <Animated.View
+        className="border border-white/40 dark:border-white/10"
+        style={[
+          {
+            position: "absolute",
+            top: 0,
+            bottom: 0,
+            width: `${100 / count}%` as const,
+            borderRadius: FLOATING_PILL_RADIUS,
+            backgroundColor: tabColors("segmented", true, scheme).backgroundColor,
+          },
+          slide,
+        ]}
+      />
+    </View>
+  );
+}

package/src/ThemeToggle.tsx

@@ -0,0 +1,36 @@
+import { IconMoon, IconSun } from "@tabler/icons-react-native";
+import { useColorScheme } from "nativewind";
+import { HeaderIconButton } from "./HeaderIconButton";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+export type ThemeToggleProps = {
+  testID?: string;
+};
+
+/**
+ * A `HeaderIconButton` that switches between light and dark with NativeWind's
+ * `setColorScheme`, the scheme `useScheme` reads. It shows and names the
+ * scheme it switches to: a moon and "Switch to dark mode" in light, a sun and
+ * "Switch to light mode" in dark. The choice lasts only as long as NativeWind
+ * keeps it; an app that restores it on the next launch stores
+ * `useColorScheme().colorScheme` itself.
+ */
+export function ThemeToggle({ testID }: ThemeToggleProps) {
+  const { setColorScheme } = useColorScheme();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const next = scheme === "dark" ? "light" : "dark";
+  const Icon = next === "dark" ? IconMoon : IconSun;
+
+  return (
+    <HeaderIconButton
+      label={`Switch to ${next} mode`}
+      testID={testID}
+      onPress={() => setColorScheme(next)}
+    >
+      <Icon size={largerText ? 26 : 22} color={tokens.color.foreground[scheme]} />
+    </HeaderIconButton>
+  );
+}

package/src/entries/primitives.ts

@@ -44,6 +44,8 @@ export type {
 } from "../Tabs";
 export { ListRow } from "../ListRow";
 export { HeaderIconButton } from "../HeaderIconButton";
+export { ThemeToggle } from "../ThemeToggle";
+export type { ThemeToggleProps } from "../ThemeToggle";
 export {
   Card,
   CardHeader,

package/src/examples/ParityGallery.tsx

@@ -71,6 +71,7 @@ import {
   TabsList,
   TabsTrigger,
   Textarea,
+  ThemeToggle,
   Toaster,
   UpgradeToProCard,
   initials,
@@ -203,6 +204,8 @@ function GalleryScreen() {
               </Button>
             }
           />
+          {/* A header icon action: switches the gallery between light and dark. */}
+          <PageHeader title="Settings" safeTop={false} className="px-0" action={<ThemeToggle />} />
         </Section>
 
         <Section title="Brand">

package/src/index.ts

@@ -80,6 +80,8 @@ export type {
 } from "./Tabs";
 export { ListRow } from "./ListRow";
 export { HeaderIconButton } from "./HeaderIconButton";
+export { ThemeToggle } from "./ThemeToggle";
+export type { ThemeToggleProps } from "./ThemeToggle";
 export {
   Card,
   CardHeader,