@vvedantb/native-ui 0.2.1 → 0.3.13

package/src/FloatingTabBar.tsx

@@ -1,9 +1,9 @@
-import type { ComponentProps } from "react";
 import { Pressable, Text, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Tabs } from "expo-router";
+import { typeStyle } from "./controlStyles";
 import { selectionHaptic } from "./haptics";
 import { FloatingSurface } from "./FloatingSurface";
+import { isTabBarRouteVisible, type FloatingTabOptions } from "./tabBarRoutes";
 import { useLargerText } from "./theme";
 import {
   FLOATING_INSET,
@@ -12,15 +12,38 @@ import {
   FLOATING_TAB_BAR_HEIGHT_LARGE,
 } from "./floating";
 
-type TabBarProps = Parameters<
-  NonNullable<ComponentProps<typeof Tabs>["tabBar"]>
->[0];
+/**
+ * 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`.
+ */
+export type FloatingTabBarProps = {
+  state: {
+    index: number;
+    routes: readonly { key: string; name: string; params?: object }[];
+  };
+  descriptors: Record<string, { options: FloatingTabOptions }>;
+  navigation: {
+    emit(event: {
+      type: "tabPress";
+      target: string;
+      canPreventDefault: true;
+    }): { defaultPrevented: boolean };
+    navigate(name: string, params?: object): void;
+  };
+};
 
+/**
+ * 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.
+ */
 export function FloatingTabBar({
   state,
   descriptors,
   navigation,
-}: TabBarProps) {
+}: FloatingTabBarProps) {
   const insets = useSafeAreaInsets();
   const largerText = useLargerText();
   const height = largerText
@@ -30,10 +53,11 @@ export function FloatingTabBar({
   return (
     <View
       pointerEvents="box-none"
+      // Inside the home indicator and, in landscape, the notch.
       style={{
         position: "absolute",
-        left: FLOATING_INSET,
-        right: FLOATING_INSET,
+        left: insets.left + FLOATING_INSET,
+        right: insets.right + FLOATING_INSET,
         bottom: FLOATING_INSET + Math.max(insets.bottom, 8),
       }}
     >
@@ -44,11 +68,12 @@ export function FloatingTabBar({
           accessibilityRole="tablist"
         >
           {state.routes.map((route, index) => {
-            const focused = state.index === index;
             const options = descriptors[route.key]?.options;
-            if (!options) {
+            if (!isTabBarRouteVisible(options)) {
               return null;
             }
+            // `index` counts hidden routes too, as `state.index` does.
+            const focused = state.index === index;
             const label =
               typeof options.tabBarLabel === "string"
                 ? options.tabBarLabel
@@ -90,10 +115,13 @@ export function FloatingTabBar({
                   : null}
                 <Text
                   numberOfLines={1}
+                  // The bar has a fixed height (`tabBarReserve`), so labels
+                  // scale with Dynamic Type only up to what fits in it.
+                  maxFontSizeMultiplier={1.5}
                   className={`font-instrument-sans-semibold ${
                     largerText ? "text-base" : "text-sm"
                   }`}
-                  style={{ color }}
+                  style={[{ color }, typeStyle("semibold")]}
                 >
                   {label}
                 </Text>

package/src/Input.tsx

@@ -1,7 +1,10 @@
 import * as React from "react";
 import { Input as PrimitiveInput } from "./primitives/input";
 import { cn } from "./cn";
+import { fieldStyle, fieldTextStyle, typeStyle } from "./controlStyles";
+import { palette } from "./palette";
 import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
 
 type InputProps = React.ComponentPropsWithoutRef<typeof PrimitiveInput> & {
   className?: string;
@@ -10,17 +13,25 @@ type InputProps = React.ComponentPropsWithoutRef<typeof PrimitiveInput> & {
 const Input = React.forwardRef<
   React.ElementRef<typeof PrimitiveInput>,
   InputProps
->(({ className, placeholderTextColor, ...props }, ref) => {
+>(({ className, placeholderTextColor, style, ...props }, ref) => {
   const largerText = useLargerText();
+  const scheme = useScheme();
   return (
     <PrimitiveInput
       ref={ref}
-      placeholderTextColor={placeholderTextColor ?? "#737373"}
+      placeholderTextColor={placeholderTextColor ?? palette.fieldPlaceholder[scheme]}
       className={cn(
-        "min-h-14 rounded-full border border-white/40 bg-secondary px-4 py-3 text-lg font-instrument-sans-medium text-foreground dark:border-white/10",
-        largerText && "min-h-16 py-4 text-xl",
+        // The web field: h-10 px-3.5 py-2, 16 px type (its phone size).
+        "min-h-10 border px-3.5 py-2 text-base font-instrument-sans",
+        largerText && "min-h-16 px-4 py-4 text-xl font-instrument-sans-medium",
         className,
       )}
+      style={[
+        fieldStyle(scheme),
+        fieldTextStyle(scheme),
+        largerText ? typeStyle("medium") : null,
+        style,
+      ]}
       {...props}
     />
   );

package/src/Label.tsx

@@ -0,0 +1,31 @@
+import { Text, type TextProps } from "react-native";
+import { cn } from "./cn";
+import { sizeStyle, textStyle, typeStyle } from "./controlStyles";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+
+export type LabelProps = TextProps & {
+  className?: string;
+  /** Dims the label (the web `peer-disabled` style). */
+  disabled?: boolean;
+};
+
+/**
+ * Field label, the web `Label` type: `text-sm` medium (14 / 500), `text-lg`
+ * with larger text. Link it to a field with
+ * `nativeID` here and `accessibilityLabelledBy` on the field (Android), or
+ * give the field its own `accessibilityLabel`. The colour is a style that
+ * follows the colour scheme; recolour with `style`.
+ */
+export function Label({ className, disabled, style, ...props }: LabelProps) {
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const size = largerText ? "text-lg" : "text-sm";
+  return (
+    <Text
+      className={cn("font-instrument-sans-medium", size, disabled && "opacity-70", className)}
+      style={[textStyle("foreground", scheme), sizeStyle(size), typeStyle("medium"), style]}
+      {...props}
+    />
+  );
+}

package/src/LabeledSwitchRow.tsx

@@ -0,0 +1,96 @@
+import type { ReactNode } from "react";
+import { Pressable, Text, View } from "react-native";
+import { cn } from "./cn";
+import { textStyle, typeStyle } from "./controlStyles";
+import { Switch } from "./Switch";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+
+export type LabeledSwitchRowProps = {
+  label: string;
+  description?: string;
+  checked: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  icon?: ReactNode;
+  /** Replaces the switch. */
+  trailing?: ReactNode;
+  className?: string;
+  testID?: string;
+};
+
+/**
+ * Label, optional description and a `Switch`, as the web `LabeledSwitchRow`.
+ * The text toggles the switch too (the web `<label htmlFor>`). Use
+ * `SettingsToggleRow` inside a `SettingsSection` list instead.
+ */
+export function LabeledSwitchRow({
+  label,
+  description,
+  checked,
+  onCheckedChange,
+  disabled,
+  icon,
+  trailing,
+  className,
+  testID,
+}: LabeledSwitchRowProps) {
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const toggle = () => onCheckedChange?.(!checked);
+  return (
+    <View className={cn("flex-row items-center justify-between gap-3", className)}>
+      <Pressable
+        testID={testID}
+        accessibilityRole={trailing ? undefined : "switch"}
+        accessibilityLabel={label}
+        accessibilityHint={description}
+        accessibilityState={
+          trailing ? undefined : { checked, disabled: Boolean(disabled) }
+        }
+        disabled={disabled || trailing != null}
+        onPress={toggle}
+        className="min-w-0 flex-1 flex-row items-start gap-2"
+      >
+        {icon ? <View className="mt-0.5 shrink-0">{icon}</View> : null}
+        <View className="min-w-0 flex-1">
+          <Text
+            className={cn(
+              "font-instrument-sans-semibold",
+              largerText ? "text-xl" : "text-lg",
+              disabled && "opacity-70",
+            )}
+            style={[textStyle("foreground", scheme), typeStyle("semibold")]}
+          >
+            {label}
+          </Text>
+          {description ? (
+            <Text
+              className={cn(
+                "mt-1 font-instrument-sans",
+                largerText ? "text-lg" : "text-base",
+              )}
+              style={textStyle("muted", scheme)}
+            >
+              {description}
+            </Text>
+          ) : null}
+        </View>
+      </Pressable>
+      {trailing ?? (
+        // The row above is the accessible switch, so this one is hidden from assistive tech.
+        <View
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          className="min-h-12 shrink-0 items-center justify-center"
+        >
+          <Switch
+            checked={checked}
+            onCheckedChange={onCheckedChange}
+            disabled={disabled}
+          />
+        </View>
+      )}
+    </View>
+  );
+}

package/src/LiquidGlass.tsx

@@ -1,14 +1,6 @@
-import type { ReactNode } from "react";
-
 export {
   FloatingSurface as LiquidGlass,
   GlassSheetBackground,
 } from "./FloatingSurface";
-
-export function GlassBlurProvider({ children }: { children: ReactNode }) {
-  return children;
-}
-
-export function GlassBlurTarget({ children }: { children: ReactNode }) {
-  return children;
-}
+export { GlassBlurProvider, GlassBlurTarget } from "./glassBlur";
+export type { GlassBlurTargetProps } from "./glassBlur";

package/src/ListRow.tsx

@@ -3,8 +3,10 @@ import { Pressable, Text, View } from "react-native";
 import type { IconProps } from "@tabler/icons-react-native";
 import { NEUTRAL_500 } from "./colors";
 import { cn } from "./cn";
+import { textStyle, typeStyle } from "./controlStyles";
 import { FLOATING_ROW_RADIUS } from "./floating";
 import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
 
 export function ListRow({
   title,
@@ -28,6 +30,7 @@ export function ListRow({
   testID?: string;
 }) {
   const largerText = useLargerText();
+  const scheme = useScheme();
   const content = (
     <>
       {Icon ? <Icon size={largerText ? 30 : 26} color={iconColor} /> : null}
@@ -35,18 +38,20 @@ export function ListRow({
         <Text
           numberOfLines={2}
           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>
         {meta ? (
           <Text
             className={cn(
-              "font-instrument-sans text-muted-foreground",
+              "font-instrument-sans",
               largerText ? "text-lg" : "text-base",
             )}
+            style={textStyle("muted", scheme)}
           >
             {meta}
           </Text>

package/src/PageTitle.tsx

@@ -0,0 +1,81 @@
+import type { ReactNode } from "react";
+import { Text, View, type TextProps, type ViewProps } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { cn } from "./cn";
+import {
+  PAGE_HEADER_HEIGHT,
+  PAGE_TITLE_CLASS,
+  pageTitleStyle,
+  textStyle,
+} from "./controlStyles";
+import { useScheme } from "./useScheme";
+
+export type PageTitleProps = TextProps & { className?: string };
+
+/**
+ * The web page title (`Breadcrumb`: `text-xl font-semibold leading-tight
+ * tracking-tight`): Instrument Sans 600 at 20 / 25 with -0.5 letter spacing,
+ * in the scheme's foreground. A header for VoiceOver and TalkBack. One line,
+ * cut off at the end as the web `truncate`; pass `numberOfLines={0}` to wrap.
+ * It scales with the system font size.
+ */
+export function PageTitle({ className, style, ...props }: PageTitleProps) {
+  const scheme = useScheme();
+  return (
+    <Text
+      accessibilityRole="header"
+      numberOfLines={1}
+      className={cn(PAGE_TITLE_CLASS, className)}
+      style={[textStyle("foreground", scheme), pageTitleStyle(), style]}
+      {...props}
+    />
+  );
+}
+
+export type PageHeaderProps = Omit<ViewProps, "children"> & {
+  /** The page title, drawn with `PageTitle`. */
+  title: string;
+  /**
+   * Content at the end of the row, such as an "Update all" `Button` (pass it
+   * `fullWidth={false}`). It keeps its width; a long title is cut off instead.
+   */
+  action?: ReactNode;
+  /**
+   * Pad the top by the safe-area inset. Default `true`, for a header at the top
+   * of a screen with no navigation header. Pass `false` under a native header
+   * or inside a view that already pads the inset.
+   */
+  safeTop?: boolean;
+  className?: string;
+  /** Classes on the title. */
+  titleClassName?: string;
+};
+
+/**
+ * A screen's title row: `PageTitle` at the start and an optional `action` at
+ * the end, with the `ScreenContainer` side padding (`px-4`). The row is at
+ * least `PAGE_HEADER_HEIGHT` (56) high below the top inset, so tab roots with
+ * and without an action put their titles at the same height.
+ */
+export function PageHeader({
+  title,
+  action,
+  safeTop = true,
+  className,
+  titleClassName,
+  style,
+  ...props
+}: PageHeaderProps) {
+  const insets = useSafeAreaInsets();
+  const top = safeTop ? insets.top : 0;
+  return (
+    <View
+      className={cn("flex-row items-center justify-between gap-3 px-4", className)}
+      style={[{ paddingTop: top, minHeight: top + PAGE_HEADER_HEIGHT }, style]}
+      {...props}
+    >
+      <PageTitle className={cn("min-w-0 flex-1", titleClassName)}>{title}</PageTitle>
+      {action ? <View className="shrink-0">{action}</View> : null}
+    </View>
+  );
+}

package/src/PillTabs.tsx

@@ -1,6 +1,19 @@
 import { View, Text, Pressable } from "react-native";
+import { cn } from "./cn";
+import {
+  MIN_TOUCH_TARGET,
+  tabColors,
+  tabTriggerSize,
+  touchSlop,
+  typeStyle,
+} from "./controlStyles";
 import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
 
+/**
+ * A row of pill tabs from an options array: the `pills` `TabsList` look and
+ * size (30 high, `text-sm` medium), as wide as its pills, at the start.
+ */
 export function PillTabs<T extends string>({
   options,
   value,
@@ -11,10 +24,16 @@ export function PillTabs<T extends string>({
   onChange: (id: T) => void;
 }) {
   const largerText = useLargerText();
+  const scheme = useScheme();
+  const trigger = tabTriggerSize("pills", "default", largerText);
   return (
-    <View className="flex-row gap-2">
+    <View
+      accessibilityRole="tablist"
+      className="max-w-full flex-row flex-wrap gap-1.5 self-start"
+    >
       {options.map((tab) => {
         const isSelected = value === tab.id;
+        const colors = tabColors("pills", isSelected, scheme);
 
         return (
           <Pressable
@@ -24,22 +43,17 @@ export function PillTabs<T extends string>({
             onPress={() => onChange(tab.id)}
             accessibilityRole="tab"
             accessibilityState={{ selected: isSelected }}
-            className={`flex-1 justify-center rounded-full border border-white/40 px-3 dark:border-white/10 ${
-              largerText ? "min-h-16 py-3" : "min-h-14 py-3"
-            } ${
-              isSelected ? "bg-pink-100 dark:bg-pink-900/40" : "bg-secondary"
-            }`}
-            style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
+            hitSlop={touchSlop(MIN_TOUCH_TARGET, trigger.minHeight)}
+            className={cn(
+              "shrink justify-center rounded-full border border-white/40 active:opacity-70 dark:border-white/10",
+              trigger.className,
+            )}
+            style={{ backgroundColor: colors.backgroundColor, minHeight: trigger.minHeight }}
           >
             <Text
               numberOfLines={1}
-              className={`text-center font-instrument-sans-semibold ${
-                largerText ? "text-xl" : "text-lg"
-              } ${
-                isSelected
-                  ? "text-pink-700 dark:text-pink-300"
-                  : "text-muted-foreground"
-              }`}
+              className={cn("text-center font-instrument-sans-medium", trigger.textClassName)}
+              style={[{ color: colors.color }, typeStyle("medium")]}
             >
               {tab.label}
             </Text>

package/src/Progress.tsx

@@ -0,0 +1,67 @@
+import { useEffect } from "react";
+import { View, type ViewProps } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { cn } from "./cn";
+import { palette } from "./palette";
+import { useAccentColor } from "./theme";
+import { useReduceMotion } from "./useReduceMotion";
+import { useScheme } from "./useScheme";
+
+export type ProgressProps = ViewProps & {
+  /** Current value, 0 to `max`. Default 0. */
+  value?: number | null;
+  /** Default 100. */
+  max?: number;
+  /** Indicator fill. Default the theme accent. */
+  indicatorColor?: string;
+  className?: string;
+};
+
+/** Determinate bar: 10 high, rounded, `palette.default` track. The fill eases over 300 ms (instant with Reduce Motion). */
+export function Progress({
+  value,
+  max = 100,
+  indicatorColor,
+  className,
+  style,
+  ...props
+}: ProgressProps) {
+  const scheme = useScheme();
+  const accent = useAccentColor();
+  const reduceMotion = useReduceMotion();
+  const percent = Math.min(100, Math.max(0, ((value ?? 0) / max) * 100));
+  const width = useSharedValue(percent);
+
+  useEffect(() => {
+    width.value = reduceMotion
+      ? percent
+      : withTiming(percent, {
+          duration: 300,
+          easing: Easing.bezier(0.22, 1, 0.36, 1),
+        });
+  }, [percent, reduceMotion, width]);
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    width: `${width.value}%` as const,
+  }));
+
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityValue={{ min: 0, max, now: value ?? 0 }}
+      className={cn("h-2.5 w-full overflow-hidden rounded-full", className)}
+      style={[{ backgroundColor: palette.default[scheme] }, style]}
+      {...props}
+    >
+      <Animated.View
+        className="h-full rounded-full"
+        style={[{ backgroundColor: indicatorColor ?? accent }, indicatorStyle]}
+      />
+    </View>
+  );
+}