@vvedantb/native-ui 0.12.1 → 0.17.0

package/src/PillTabs.tsx

@@ -1,5 +1,13 @@
-import { View, Text, Pressable } from "react-native";
+import { Pressable } from "react-native";
+import Animated, {
+  scrollTo,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useSharedValue,
+  type SharedValue,
+} from "react-native-reanimated";
 import { cn } from "./cn";
+import { selectionHaptic } from "./haptics";
 import {
   MIN_TOUCH_TARGET,
   tabColors,
@@ -7,59 +15,161 @@ import {
   touchSlop,
   typeStyle,
 } from "./controlStyles";
+import { centredTabScroll } from "./pagerSwipe";
+import { useTabIndicator, useTabLabelStyle } from "./tabIndicator";
 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.
+ * A row of pill tabs from an options array, the web pills look tuned for a
+ * phone: 36 high pills (`px-3.5`, a `text-sm` medium label) with 4 slop above
+ * and below, so each is a 44 target. The row is one line that scrolls
+ * sideways when the pills do not fit (larger system text), and never wraps.
+ * The active pill scrolls into view, centred, each time it changes.
+ *
+ * With `progress` (a `Pager`'s), the selected fill is one indicator that
+ * slides with that value, and each label blends to the selected colour with
+ * it, so fill, label and the centred scroll follow the pages under a swipe;
+ * a press still changes `value` at once.
  */
 export function PillTabs<T extends string>({
   options,
   value,
   onChange,
+  progress,
 }: {
   options: ReadonlyArray<{ id: T; label: string; testID?: string }>;
   value: T;
   onChange: (id: T) => void;
+  /** Where the linked `Pager` is, in pages: option 0 is page 0. */
+  progress?: SharedValue<number>;
 }) {
   const largerText = useLargerText();
   const scheme = useScheme();
   const trigger = tabTriggerSize("pills", "default", largerText);
+  const slop = touchSlop(MIN_TOUCH_TARGET, trigger.minHeight);
+  const indicator = useTabIndicator(progress, options.length);
+  const { boxes } = indicator;
+  const selectedIndex = Math.max(0, options.findIndex((tab) => tab.id === value));
+  const scroll = useAnimatedRef<Animated.ScrollView>();
+  const viewport = useSharedValue(0);
+  // Keeps the active pill centred: with `progress` it follows the pages frame
+  // by frame (a swipe, or a press's slide), else it moves with `value`.
+  useAnimatedReaction(
+    () => (progress ? progress.get() : selectedIndex),
+    (at) => {
+      if (boxes.length === 0 || viewport.get() <= 0) return;
+      scrollTo(scroll, centredTabScroll(boxes, at, viewport.get()), 0, false);
+    },
+  );
+
   return (
-    <View
+    <Animated.ScrollView
+      ref={scroll}
+      horizontal
       accessibilityRole="tablist"
-      className="max-w-full flex-row flex-wrap gap-1.5 self-start"
+      showsHorizontalScrollIndicator={false}
+      // Android fades the pills out at an edge that scrolls.
+      fadingEdgeLength={16}
+      onLayout={(event) => viewport.set(event.nativeEvent.layout.width)}
+      // The slop above and below lies inside the row, where touches land; the
+      // negative margins keep the row's place in the layout.
+      style={{ flexGrow: 0, marginVertical: -slop.top }}
+      // The web pills' `gap-1.5`, as a style: the animated scroll view drops `contentContainerClassName`.
+      contentContainerStyle={{ flexDirection: "row", gap: 6, paddingVertical: slop.top }}
     >
-      {options.map((tab) => {
-        const isSelected = value === tab.id;
-        const colors = tabColors("pills", isSelected, scheme);
+      {indicator.measured ? (
+        // The selected fill, absolutely placed with no children: animating its
+        // width keeps the pill's radius, and lays out nothing else.
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            { position: "absolute", left: 0, borderRadius: 9999 },
+            { backgroundColor: tabColors("pills", true, scheme).backgroundColor },
+            indicator.style,
+          ]}
+        />
+      ) : null}
+      {options.map((tab, index) => (
+        <PillTab
+          key={tab.id}
+          label={tab.label}
+          testID={tab.testID}
+          index={index}
+          selected={value === tab.id}
+          // Until the indicator is measured, the selected pill paints its own fill.
+          filled={!indicator.measured}
+          progress={progress}
+          trigger={trigger}
+          hitSlop={slop}
+          onLayout={indicator.onLayout(index)}
+          onPress={() => onChange(tab.id)}
+        />
+      ))}
+    </Animated.ScrollView>
+  );
+}
 
-        return (
-          <Pressable
-            key={tab.id}
-            testID={tab.testID}
-            accessibilityLabel={tab.label}
-            onPress={() => onChange(tab.id)}
-            accessibilityRole="tab"
-            accessibilityState={{ selected: isSelected }}
-            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={cn("text-center font-instrument-sans-medium", trigger.textClassName)}
-              style={[{ color: colors.color }, typeStyle("medium")]}
-            >
-              {tab.label}
-            </Text>
-          </Pressable>
-        );
-      })}
-    </View>
+function PillTab({
+  label,
+  testID,
+  index,
+  selected,
+  filled,
+  progress,
+  trigger,
+  hitSlop,
+  onLayout,
+  onPress,
+}: {
+  label: string;
+  testID?: string;
+  index: number;
+  selected: boolean;
+  filled: boolean;
+  progress: SharedValue<number> | undefined;
+  trigger: ReturnType<typeof tabTriggerSize>;
+  hitSlop: ReturnType<typeof touchSlop>;
+  onLayout: ReturnType<ReturnType<typeof useTabIndicator>["onLayout"]>;
+  onPress: () => void;
+}) {
+  const scheme = useScheme();
+  const colors = tabColors("pills", selected, scheme);
+  const labelStyle = useTabLabelStyle(
+    progress,
+    index,
+    { selected: tabColors("pills", true, scheme).color, muted: tabColors("pills", false, scheme).color },
+    colors.color,
+  );
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityLabel={label}
+      onLayout={onLayout}
+      onPress={() => {
+        // A segmented choice ticking to a new value, as `TabsTrigger`.
+        if (!selected) selectionHaptic();
+        onPress();
+      }}
+      accessibilityRole="tab"
+      accessibilityState={{ selected }}
+      hitSlop={hitSlop}
+      className={cn(
+        "justify-center rounded-full border border-white/40 active:opacity-70 dark:border-white/10",
+        trigger.className,
+      )}
+      style={{
+        backgroundColor: filled ? colors.backgroundColor : "transparent",
+        minHeight: trigger.minHeight,
+      }}
+    >
+      <Animated.Text
+        numberOfLines={1}
+        className={cn("text-center font-instrument-sans-medium", trigger.textClassName)}
+        style={[typeStyle("medium"), labelStyle]}
+      >
+        {label}
+      </Animated.Text>
+    </Pressable>
   );
 }

package/src/Progress.tsx

@@ -38,16 +38,18 @@ export function Progress({
   const width = useSharedValue(percent);
 
   useEffect(() => {
-    width.value = reduceMotion
-      ? percent
-      : withTiming(percent, {
-          duration: 300,
-          easing: Easing.bezier(0.22, 1, 0.36, 1),
-        });
+    width.set(
+      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,
+    width: `${width.get()}%` as const,
   }));
 
   return (

package/src/Select.tsx

@@ -107,12 +107,12 @@ function Select<TValue = string | number | null>({
         accessibilityRole="combobox"
         accessibilityLabel={accessibilityLabel}
         accessibilityState={{ disabled: Boolean(disabled) }}
-        // 40 high on screen, as on the web; a 44 target to touch.
-        hitSlop={touchSlop(MIN_TOUCH_TARGET, largerText ? 64 : 40)}
+        // 44 high on screen, as `Input` (the web h-10 is a desktop 40): a whole touch target.
+        hitSlop={touchSlop(MIN_TOUCH_TARGET, largerText ? 64 : 44)}
         className={cn(
-          // The web trigger: h-10 px-3.5, 16 px type (its phone size). A
+          // The web trigger px-3.5 with 16 px type (its phone size), 44 high. A
           // minimum height, so a large Dynamic Type size does not clip the value.
-          "h-auto min-h-10 w-full border px-3.5 py-0 shadow-none",
+          "h-auto min-h-11 w-full border px-3.5 py-0 shadow-none",
           largerText && "min-h-16 px-4",
           triggerClassName,
           className,

package/src/Sheet.tsx

@@ -1,5 +1,4 @@
 import { View, type ViewProps } from "react-native";
-import { SlideInDown } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { FloatingSurface } from "./FloatingSurface";
 import { cn } from "./cn";
@@ -7,7 +6,7 @@ import { withAlpha } from "./palette";
 import { tokens } from "./tokens";
 import { useScheme } from "./useScheme";
 import { DialogBody, DialogDescription, DialogTitle } from "./Dialog";
-import { NativeOnlyAnimatedView } from "./primitives/native-only-animated-view";
+import { SheetDragView } from "./primitives/sheet-drag";
 import {
   OverlayClose,
   OverlayModal,
@@ -23,7 +22,7 @@ export type SheetProps = OverlayRootProps;
 
 /**
  * Bottom sheet in an RN `Modal`, with no `@gorhom/bottom-sheet`. Same open
- * state API as `Dialog`. Use `BottomSheetContainer` for drag-to-dismiss.
+ * state API as `Dialog`.
  */
 export function Sheet(props: SheetProps) {
   return <OverlayRoot {...props} />;
@@ -43,40 +42,48 @@ export type SheetContentProps = ViewProps & {
   dismissible?: boolean;
   /** Grab handle above the content. Default `true`. */
   showHandle?: boolean;
+  /** Called once the sheet is on screen: focus its field here, as `DialogContent`'s `onShow`. */
+  onShow?: () => void;
 };
 
 /**
  * Panel pinned to the bottom edge: opaque surface, top corners at the card
- * radius, safe-area bottom padding, slides in. Its bottom corners sit below the
- * screen edge, so only the top corners show.
+ * radius, safe-area bottom padding. It slides up on open and back down on
+ * close, with the backdrop fading to match (`OverlayModal`). Drag it down to
+ * close (when `dismissible`): it follows the finger, the backdrop fades, and
+ * a flick or a drag past half carries it out while a short slow one springs
+ * back (`SheetDragView`). Its bottom corners sit below the
+ * screen edge, so only the top corners show. Taller than the room (a short
+ * window, or the keyboard up), it shrinks to fit under the top inset, so a
+ * `SheetBody` or other scroll view inside scrolls and the title stays on screen.
  */
 export function SheetContent({
   children,
   className,
   dismissible = true,
   showHandle = true,
+  onShow,
   style,
   ...props
 }: SheetContentProps) {
   const insets = useSafeAreaInsets();
   return (
-    <OverlayModal part="SheetContent" placement="bottom" dismissible={dismissible}>
-      <NativeOnlyAnimatedView
-        entering={SlideInDown.duration(240)}
-        style={{ marginBottom: -SHEET_RADIUS }}
-      >
-        <FloatingSurface blur={false} radius={SHEET_RADIUS}>
-          <View
-            accessibilityViewIsModal
-            className={cn("gap-4 px-5 pt-3", className)}
-            {...props}
-            style={[{ paddingBottom: insets.bottom + 20 + SHEET_RADIUS }, style]}
-          >
-            {showHandle ? <SheetHandle /> : null}
-            {children}
-          </View>
-        </FloatingSurface>
-      </NativeOnlyAnimatedView>
+    <OverlayModal part="SheetContent" placement="bottom" dismissible={dismissible} onShow={onShow}>
+      <View style={{ marginBottom: -SHEET_RADIUS, flexShrink: 1 }}>
+        <SheetDragView enabled={dismissible} style={{ flexShrink: 1 }}>
+          <FloatingSurface blur={false} radius={SHEET_RADIUS} style={{ flexShrink: 1 }}>
+            <View
+              accessibilityViewIsModal
+              className={cn("gap-4 px-5 pt-3", className)}
+              {...props}
+              style={[{ paddingBottom: insets.bottom + 20 + SHEET_RADIUS, flexShrink: 1 }, style]}
+            >
+              {showHandle ? <SheetHandle /> : null}
+              {children}
+            </View>
+          </FloatingSurface>
+        </SheetDragView>
+      </View>
     </OverlayModal>
   );
 }

package/src/SheetRow.tsx

@@ -1,4 +1,4 @@
-import type { ComponentType } from "react";
+import type { ComponentType, ReactNode } from "react";
 import { Pressable, Text, View } from "react-native";
 import { IconCheck, type IconProps } from "@tabler/icons-react-native";
 import { cn } from "./cn";
@@ -11,13 +11,24 @@ import { useScheme } from "./useScheme";
 export type SheetRowProps = {
   /** A Tabler icon at the start. */
   icon?: ComponentType<IconProps>;
+  /** At the start in place of `icon`: a mark that is not a Tabler icon, such as `ProviderIcon`. */
+  leading?: ReactNode;
   title: string;
   /** Muted line under the title, also the accessibility hint. */
   detail?: string;
-  /** The current choice: a check at the end, and `selected` for assistive tech. */
+  /**
+   * Makes the row one choice of a picker: `true` draws a check at the end.
+   * Set (`true` or `false`) on every row of the picker, so assistive tech
+   * reads each as a `radio` (a `checkbox` with `multiple`) with `checked`.
+   * Leave it out on an action row.
+   */
   active?: boolean;
+  /** A picker where several rows can be on at once (or a single on/off row): `checkbox`, not `radio`. */
+  multiple?: boolean;
   /** A destructive action: title and icon in `palette.danger`. */
   danger?: boolean;
+  /** The web `text-warning` item (such as Archive): title and icon in `palette.warning`. */
+  warning?: boolean;
   disabled?: boolean;
   onPress?: () => void;
   testID?: string;
@@ -25,35 +36,42 @@ export type SheetRowProps = {
 
 /**
  * One action in a `Sheet` or bottom sheet, a touch size of the web menu item:
- * icon, title and optional detail, at least 56 high (64 with larger text) with
+ * icon (or another `leading` mark), title and optional detail, at least 56 high (64 with larger text) with
  * the `ListRow` padding (`px-4 py-3`). While pressed it takes the web menu
  * item highlight (`bg-default`). `danger` draws the title and icon in the
- * danger colour; `active` adds a check; `disabled` dims it to 50%, as the web
+ * danger colour, `warning` in the warning colour; `active` makes it a choice with a check; `disabled` dims it to 50%, as the web
  * item, and ignores presses.
  */
 export function SheetRow({
   icon: Icon,
+  leading,
   title,
   detail,
-  active = false,
+  active,
+  multiple = false,
   danger = false,
+  warning = false,
   disabled = false,
   onPress,
   testID,
 }: SheetRowProps) {
   const scheme = useScheme();
   const largerText = useLargerText();
-  const color = danger ? palette.danger[scheme] : tokens.color.foreground[scheme];
+  const color = danger
+    ? palette.danger[scheme]
+    : warning
+      ? palette.warning[scheme]
+      : tokens.color.foreground[scheme];
   const titleSize = largerText ? "text-xl" : "text-base";
   const detailSize = largerText ? "text-lg" : "text-sm";
   const iconSize = largerText ? 26 : 22;
   return (
     <Pressable
       testID={testID}
-      accessibilityRole="button"
+      accessibilityRole={active === undefined ? "button" : multiple ? "checkbox" : "radio"}
       accessibilityLabel={title}
       accessibilityHint={detail}
-      accessibilityState={{ disabled, selected: active }}
+      accessibilityState={active === undefined ? { disabled } : { disabled, checked: active }}
       disabled={disabled}
       onPress={onPress}
       className={cn(
@@ -66,7 +84,7 @@ export function SheetRow({
         backgroundColor: pressed && !disabled ? palette.default[scheme] : "transparent",
       })}
     >
-      {Icon ? <Icon size={iconSize} color={color} /> : null}
+      {leading ?? (Icon ? <Icon size={iconSize} color={color} /> : null)}
       <View className="min-w-0 flex-1">
         <Text
           className={cn("font-instrument-sans-medium", titleSize)}

package/src/Skeleton.tsx

@@ -1,4 +1,5 @@
-import { View, type ViewProps } from "react-native";
+import { Fragment, type ReactNode } from "react";
+import { StyleSheet, View, type ViewProps } from "react-native";
 import Animated, {
   cancelAnimation,
   useAnimatedStyle,
@@ -9,10 +10,16 @@ import Animated, {
 import { useEffect } from "react";
 import { cn } from "./cn";
 import { cardStyle } from "./controlStyles";
+import { ListDivider } from "./DividedList";
 import { useReduceMotion } from "./useReduceMotion";
 import { useScheme } from "./useScheme";
 
-/** Pulsing placeholder block. Holds still with Reduce Motion. Size it with `className` (for example `h-4 w-32`). */
+/**
+ * Pulsing placeholder block. Holds still with Reduce Motion. Size it with
+ * `className` (for example `h-4 w-32`). The classes sit on a plain `View`:
+ * NativeWind does not style a Reanimated `Animated.View`, so only the pulse
+ * (opacity) is animated, on a fill inside.
+ */
 export function Skeleton({
   className,
   style,
@@ -23,25 +30,29 @@ export function Skeleton({
 
   useEffect(() => {
     if (reduceMotion) {
-      opacity.value = 0.7;
+      opacity.set(0.7);
       return;
     }
-    opacity.value = withRepeat(withTiming(1, { duration: 800 }), -1, true);
+    opacity.set(withRepeat(withTiming(1, { duration: 800 }), -1, true));
     return () => cancelAnimation(opacity);
   }, [opacity, reduceMotion]);
 
   const animatedStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
+    opacity: opacity.get(),
   }));
 
   return (
-    <Animated.View
+    <View
       accessibilityElementsHidden
       importantForAccessibility="no-hide-descendants"
       {...props}
-      style={[animatedStyle, style]}
-      className={cn("bg-neutral-200 dark:bg-neutral-700 rounded-lg", className)}
-    />
+      style={style}
+      className={cn("overflow-hidden rounded-lg", className)}
+    >
+      <Animated.View style={[StyleSheet.absoluteFill, animatedStyle]}>
+        <View className="flex-1 bg-neutral-200 dark:bg-neutral-700" />
+      </Animated.View>
+    </View>
   );
 }
 
@@ -55,3 +66,74 @@ export function CardSkeleton() {
     </View>
   );
 }
+
+/** Title widths, row by row, so a list of placeholders does not read as one block. */
+const TITLE_WIDTHS: readonly `${number}%`[] = ["72%", "54%", "84%", "62%", "46%", "78%"];
+
+export type SkeletonRowProps = {
+  /** The row's place in its list: the title width varies with it. */
+  index?: number;
+  /** A round mark before the text, this wide (a status dot, an avatar). */
+  leading?: number;
+  /** A title only, or a title over a shorter detail line. */
+  lines?: 1 | 2;
+  /** A short block at the end, where the real row shows its age. Default on. */
+  trailing?: boolean;
+  /** The real row's height, so nothing moves when it loads. Default 56. */
+  minHeight?: number;
+  className?: string;
+};
+
+/**
+ * A list row's placeholder, shaped like the row it stands for: a round mark,
+ * a title (and a detail line), and a short trailing block, on the `px-4` row
+ * padding. Pulses as `Skeleton`; holds still with Reduce Motion.
+ */
+export function SkeletonRow({ index = 0, leading, lines = 1, trailing = true, minHeight = 56, className }: SkeletonRowProps) {
+  return (
+    <View className={cn("flex-row items-center gap-3 px-4", className)} style={{ minHeight }}>
+      {leading ? <Skeleton style={{ width: leading, height: leading, borderRadius: leading / 2 }} /> : null}
+      <View className="min-w-0 flex-1 gap-2">
+        <Skeleton className="h-3.5" style={{ width: TITLE_WIDTHS[index % TITLE_WIDTHS.length] }} />
+        {lines === 2 ? <Skeleton className="h-3 w-1/3" /> : null}
+      </View>
+      {trailing ? <Skeleton className="h-3 w-8" /> : null}
+    </View>
+  );
+}
+
+export type SkeletonListProps = {
+  /** What is loading, for assistive tech ("Loading sessions"). */
+  label: string;
+  /** Rows to draw. Default 6. */
+  count?: number;
+  /** A `ListDivider` between rows, as a `DividedList`. Default on. */
+  divided?: boolean;
+  /** One placeholder row, such as a `SkeletonRow` with this `index`. */
+  renderRow: (index: number) => ReactNode;
+  className?: string;
+};
+
+/**
+ * Placeholder rows where a list is loading, in place of a centred spinner:
+ * the screen keeps the shape it will have. Screen readers hear one busy
+ * element named `label`.
+ */
+export function SkeletonList({ label, count = 6, divided = true, renderRow, className }: SkeletonListProps) {
+  return (
+    <View
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={label}
+      accessibilityState={{ busy: true }}
+      className={cn("min-h-0 w-full flex-1 overflow-hidden", className)}
+    >
+      {Array.from({ length: count }, (_, index) => (
+        <Fragment key={index}>
+          {divided && index > 0 ? <ListDivider /> : null}
+          {renderRow(index)}
+        </Fragment>
+      ))}
+    </View>
+  );
+}