@vvedantb/native-ui 0.2.0 → 0.3.12

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/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>
+  );
+}

package/src/SearchInput.tsx

@@ -0,0 +1,163 @@
+import * as React from "react";
+import { Pressable, useWindowDimensions, View } from "react-native";
+import { IconSearch, IconX } from "@tabler/icons-react-native";
+import { Input as PrimitiveInput } from "./primitives/input";
+import { cn } from "./cn";
+import {
+  fieldStyle,
+  fieldTextStyle,
+  scaledFieldHeight,
+  searchInputSize,
+  sizeStyle,
+  touchSlop,
+  typeStyle,
+  type SearchInputSize,
+} from "./controlStyles";
+import { palette } from "./palette";
+import { tokens } from "./tokens";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+
+type SearchInputProps = Omit<
+  React.ComponentPropsWithoutRef<typeof PrimitiveInput>,
+  "value" | "onChange" | "onChangeText"
+> & {
+  value: string;
+  /** Called with the new text, as the web `onChange(value)`. */
+  onChange: (value: string) => void;
+  /** Accessibility label, and the placeholder when `placeholder` is not set. Default `"Search"`. */
+  label?: string;
+  /** `sm` is 32 high (web `h-8`), `md` is 40 (web `h-10`), border included. Default `"sm"`. */
+  size?: SearchInputSize;
+  /** Called after `onChange` whenever the value becomes empty (typed away or cleared). */
+  onClear?: () => void;
+  /** Accessibility label of the clear button. Default `"Clear search"`. */
+  clearLabel?: string;
+  /** Classes for the field. */
+  className?: string;
+  /** Classes for the `View` around the field, icon and clear button. */
+  wrapperClassName?: string;
+};
+
+/** The web change rule: `onChange`, then `onClear` whenever the value becomes empty. */
+export function searchChange(onChange: (value: string) => void, onClear?: () => void) {
+  return (next: string) => {
+    onChange(next);
+    if (onClear && next.length === 0) onClear();
+  };
+}
+
+/**
+ * Search field, the web `SearchInput`: a 16 search icon at the start and,
+ * while there is text, a clear button (a 14 cross labelled "Clear search") at
+ * the end. Controlled with `value` and `onChange(text)`, as on the web. The
+ * field has the `Input` look (`fieldStyle`) at the web sizes from
+ * `searchInputSize`. The clear button is painted at the web 24 and reaches 44
+ * with its hit slop (`touchSlop`). It clears at once and leaves focus where it
+ * was, as the default web clear does after its dissolve. It is hidden when the
+ * field is not editable. Inside a `ScrollView`, set
+ * `keyboardShouldPersistTaps="handled"` so the first tap clears while the
+ * keyboard is up. The web `shortcut` hint and `toolbar` variant are not ported.
+ */
+const SearchInput = React.forwardRef<
+  React.ElementRef<typeof PrimitiveInput>,
+  SearchInputProps
+>(
+  (
+    {
+      value,
+      onChange,
+      label = "Search",
+      placeholder,
+      size = "sm",
+      onClear,
+      clearLabel = "Clear search",
+      className,
+      wrapperClassName,
+      placeholderTextColor,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const largerText = useLargerText();
+    const scheme = useScheme();
+    const { fontScale } = useWindowDimensions();
+    const metrics = searchInputSize(size, largerText);
+    const change = searchChange(onChange, onClear);
+    const filled = value.length > 0;
+    const muted = tokens.color.muted[scheme];
+    return (
+      <View className={wrapperClassName}>
+        <PrimitiveInput
+          ref={ref}
+          value={value}
+          onChangeText={change}
+          accessibilityLabel={label}
+          placeholder={placeholder ?? label}
+          placeholderTextColor={placeholderTextColor ?? palette.fieldPlaceholder[scheme]}
+          // The web `enterKeyHint="search"`.
+          returnKeyType="search"
+          className={cn(
+            "border font-instrument-sans",
+            metrics.text,
+            largerText && "font-instrument-sans-medium",
+            className,
+          )}
+          style={[
+            fieldStyle(scheme),
+            fieldTextStyle(scheme),
+            {
+              minHeight: metrics.minHeight,
+              // The web border-box height, so the class line height cannot
+              // grow the field; it still grows with the system font size.
+              height: scaledFieldHeight(metrics.height, fontScale),
+              paddingTop: metrics.paddingY,
+              paddingBottom: metrics.paddingY,
+              paddingLeft: metrics.paddingLeft,
+              paddingRight: filled ? metrics.filledPaddingRight : metrics.paddingRight,
+              // The size without its line height: on a single-line field a
+              // line height can push the text off centre on iOS.
+              fontSize: sizeStyle(metrics.text).fontSize,
+            },
+            largerText ? typeStyle("medium") : null,
+            style,
+          ]}
+          {...props}
+        />
+        <View
+          pointerEvents="none"
+          className="absolute bottom-0 top-0 justify-center"
+          style={{ left: metrics.iconLeft }}
+        >
+          <IconSearch size={metrics.icon} color={muted} />
+        </View>
+        {filled && props.editable !== false ? (
+          <View
+            pointerEvents="box-none"
+            className="absolute bottom-0 top-0 justify-center"
+            style={{ right: metrics.clearRight }}
+          >
+            <Pressable
+              testID="search-input-clear"
+              accessibilityRole="button"
+              accessibilityLabel={clearLabel}
+              hitSlop={touchSlop(metrics.clear)}
+              onPress={() => change("")}
+              className="items-center justify-center rounded-md active:opacity-70"
+              style={{ width: metrics.clear, height: metrics.clear }}
+            >
+              {/* `strokeWidth`, not the web `stroke`: here `stroke` is the colour. */}
+              <IconX size={metrics.clearIcon} color={muted} strokeWidth={1.75} />
+            </Pressable>
+          </View>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+SearchInput.displayName = "SearchInput";
+
+export { SearchInput };
+export type { SearchInputProps };