@vvedantb/native-ui 0.4.0 → 0.5.0

package/src/IconButton.tsx

@@ -0,0 +1,87 @@
+import type { ComponentType } from "react";
+import { Pressable } from "react-native";
+import type { IconProps } from "@tabler/icons-react-native";
+import { cn } from "./cn";
+import { touchSlop } from "./controlStyles";
+import { withAlpha } from "./palette";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+export type IconButtonVariant = "default" | "overlay";
+export type IconButtonSize = "sm" | "md" | "lg";
+
+export type IconButtonProps = {
+  icon: ComponentType<IconProps>;
+  /** Names the button for VoiceOver and TalkBack; it has no text. */
+  label: string;
+  onPress?: () => void;
+  disabled?: boolean;
+  /** `overlay` is for camera chrome over a live preview. Default `default`. */
+  variant?: IconButtonVariant;
+  /** `sm` 32, `md` 40, `lg` 48 across. Default `md`. */
+  size?: IconButtonSize;
+  testID?: string;
+  /** Default: the foreground in `default`, white in `overlay`. */
+  iconColor?: string;
+};
+
+/** Diameter and icon size per size, a step up with larger text. */
+const METRICS = {
+  regular: { sm: [32, 16], md: [40, 20], lg: [48, 24] },
+  larger: { sm: [44, 20], md: [48, 24], lg: [56, 28] },
+} as const;
+
+/** Fill, border and icon colour per variant. */
+export function iconButtonColors(variant: IconButtonVariant, scheme: "light" | "dark") {
+  return variant === "overlay"
+    ? {
+        backgroundColor: withAlpha(tokens.color.black, 0.35),
+        borderColor: withAlpha(tokens.color.white, 0.2),
+        color: tokens.color.white,
+      }
+    : {
+        backgroundColor: tokens.color.surface[scheme],
+        borderColor: tokens.color.border[scheme],
+        color: tokens.color.foreground[scheme],
+      };
+}
+
+/**
+ * A round icon-only button. `default` is a bordered surface, like
+ * `HeaderIconButton` in `tokens` colours. `overlay` is a translucent black
+ * circle with a white icon, the same in light and dark, for camera chrome over
+ * a live preview (close, flash, flip). Sizes are the web icon buttons (`sm`
+ * 32, `md` 40) and 48, each reaching 44 with its hit slop. Not the AI chat
+ * `ChatIconButton`.
+ */
+export function IconButton({
+  icon: Icon,
+  label,
+  onPress,
+  disabled = false,
+  variant = "default",
+  size = "md",
+  testID,
+  iconColor,
+}: IconButtonProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const [diameter, iconSize] = METRICS[largerText ? "larger" : "regular"][size];
+  const { color, ...frame } = iconButtonColors(variant, scheme);
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={{ disabled }}
+      hitSlop={touchSlop(diameter)}
+      disabled={disabled}
+      onPress={onPress}
+      className={cn("items-center justify-center active:opacity-70", disabled && "opacity-50")}
+      style={{ width: diameter, height: diameter, borderRadius: diameter / 2, borderWidth: 1, ...frame }}
+    >
+      <Icon size={iconSize} color={iconColor ?? color} />
+    </Pressable>
+  );
+}

package/src/ListRow.tsx

@@ -6,45 +6,88 @@ import { cn } from "./cn";
 import { textStyle, typeStyle } from "./controlStyles";
 import { FLOATING_ROW_RADIUS } from "./floating";
 import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
 import { useScheme } from "./useScheme";
 
+export type ListRowProps = {
+  title: string;
+  meta?: string;
+  detail?: ReactNode;
+  icon?: ComponentType<IconProps>;
+  iconColor?: string;
+  /** Any node at the start, such as an `Avatar` with an unread dot. Shown in place of `icon`. */
+  leading?: ReactNode;
+  /** At the end of the title line, such as a `Badge` or a time. The title is cut off first. */
+  titleEnd?: ReactNode;
+  /** At the end of the row, inside the pressable area. */
+  right?: ReactNode;
+  /**
+   * At the end of the row, outside the pressable area, such as a `Switch`:
+   * pressing it does not call `onPress`.
+   */
+  control?: ReactNode;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  /** Names the pressable row. Default `title`. */
+  accessibilityLabel?: string;
+  onCanvas?: boolean;
+  /** On the pressable area when there is a `control`, so a test can press it. */
+  testID?: string;
+};
+
+/**
+ * A list row: an icon or `leading` node, a title with optional `titleEnd`,
+ * `meta` and `detail` lines, and `right` content. With `onPress` or
+ * `onLongPress` the row is a button named by `title`. A `control` sits beside
+ * the pressable area, not in it.
+ */
 export function ListRow({
   title,
   meta,
   detail,
   icon: Icon,
   iconColor = NEUTRAL_500,
+  leading,
+  titleEnd,
   right,
+  control,
   onPress,
+  onLongPress,
+  accessibilityLabel,
   onCanvas = false,
   testID,
-}: {
-  title: string;
-  meta?: string;
-  detail?: ReactNode;
-  icon?: ComponentType<IconProps>;
-  iconColor?: string;
-  right?: ReactNode;
-  onPress?: () => void;
-  onCanvas?: boolean;
-  testID?: string;
-}) {
+}: ListRowProps) {
   const largerText = useLargerText();
   const scheme = useScheme();
+  const titleText = (
+    <Text
+      numberOfLines={2}
+      className={cn(
+        "font-instrument-sans-semibold",
+        largerText ? "text-xl" : "text-lg",
+        titleEnd != null && "min-w-0 flex-1",
+      )}
+      style={[textStyle("foreground", scheme), typeStyle("semibold")]}
+    >
+      {title}
+    </Text>
+  );
   const content = (
     <>
-      {Icon ? <Icon size={largerText ? 30 : 26} color={iconColor} /> : null}
+      {leading != null ? (
+        <View className="shrink-0">{leading}</View>
+      ) : Icon ? (
+        <Icon size={largerText ? 30 : 26} color={iconColor} />
+      ) : null}
       <View className="min-w-0 flex-1">
-        <Text
-          numberOfLines={2}
-          className={cn(
-            "font-instrument-sans-semibold",
-            largerText ? "text-xl" : "text-lg",
-          )}
-          style={[textStyle("foreground", scheme), typeStyle("semibold")]}
-        >
-          {title}
-        </Text>
+        {titleEnd != null ? (
+          <View className="flex-row items-center gap-2">
+            {titleText}
+            <View className="shrink-0">{titleEnd}</View>
+          </View>
+        ) : (
+          titleText
+        )}
         {meta ? (
           <Text
             className={cn(
@@ -61,14 +104,44 @@ export function ListRow({
       {right}
     </>
   );
-  const className = cn(
-    "flex-row items-center gap-3 px-4",
-    largerText ? "min-h-[72px] py-4" : "min-h-16 py-3",
-    onCanvas ? "bg-surface" : "bg-surface-secondary",
-  );
-  const rowStyle = { borderRadius: FLOATING_ROW_RADIUS };
+  const pressable = Boolean(onPress || onLongPress);
+  const height = largerText ? "min-h-[72px]" : "min-h-16";
+  const paddingY = largerText ? "py-4" : "py-3";
+  // The fill is a style: an app theme that nests `dark` under `surface` keeps
+  // `bg-surface` and `bg-surface-secondary` light in dark mode.
+  const rowStyle = {
+    backgroundColor: tokens.color[onCanvas ? "surface" : "surfaceSecondary"][scheme],
+    borderRadius: FLOATING_ROW_RADIUS,
+  };
+
+  if (control != null) {
+    // The control is a sibling of the pressable area, so its presses stay its own.
+    const bodyClassName = cn("min-w-0 flex-1 flex-row items-center gap-3 self-stretch pl-4 pr-3", paddingY);
+    return (
+      <View className={cn("flex-row items-center", height)} style={rowStyle}>
+        {pressable ? (
+          <Pressable
+            testID={testID}
+            accessibilityRole="button"
+            accessibilityLabel={accessibilityLabel ?? title}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            className={cn(bodyClassName, "active:opacity-70")}
+          >
+            {content}
+          </Pressable>
+        ) : (
+          <View testID={testID} className={bodyClassName}>
+            {content}
+          </View>
+        )}
+        <View className="shrink-0 pr-4">{control}</View>
+      </View>
+    );
+  }
 
-  if (!onPress) {
+  const className = cn("flex-row items-center gap-3 px-4", height, paddingY);
+  if (!pressable) {
     return (
       <View testID={testID} className={className} style={rowStyle}>
         {content}
@@ -79,8 +152,9 @@ export function ListRow({
     <Pressable
       testID={testID}
       accessibilityRole="button"
-      accessibilityLabel={title}
+      accessibilityLabel={accessibilityLabel ?? title}
       onPress={onPress}
+      onLongPress={onLongPress}
       className={cn(className, "active:opacity-70")}
       style={rowStyle}
     >

package/src/PageIndicator.tsx

@@ -0,0 +1,87 @@
+import { Pressable, View } from "react-native";
+import { MIN_TOUCH_TARGET } from "./controlStyles";
+import { palette, withAlpha } from "./palette";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+export type PageIndicatorProps = {
+  count: number;
+  /** The current page, from 0. */
+  index: number;
+  /** Makes each dot a button that calls this with its page. */
+  onChange?: (index: number) => void;
+  testID?: string;
+};
+
+/** Dot sizes: the web `CarouselDots` (`h-1.5`, active `w-4`, `gap-1.5`), a step up with larger text. */
+export function pageDotSize(largerText: boolean) {
+  return largerText
+    ? { height: 8, active: 20, gap: 8 }
+    : { height: 6, active: 16, gap: 6 };
+}
+
+/**
+ * Page dots, as the web `CarouselDots`: the current page is a wider dot in
+ * `palette.primary`, the others muted at 30%. Nothing for a single page.
+ * Without `onChange` it is one element that reads "Page 2 of 5". With it each
+ * dot is a 44 button named "Page 2 of 5", `selected` on the current page; the
+ * dots then sit 44 apart, so each has a whole target.
+ */
+export function PageIndicator({ count, index, onChange, testID }: PageIndicatorProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  if (count <= 1) return null;
+  const current = Math.min(Math.max(index, 0), count - 1);
+  const size = pageDotSize(largerText);
+  const pageLabel = (page: number) => `Page ${page + 1} of ${count}`;
+  const dot = (page: number) => {
+    const selected = page === current;
+    return (
+      <View
+        key={page}
+        style={{
+          height: size.height,
+          width: selected ? size.active : size.height,
+          borderRadius: size.height / 2,
+          backgroundColor: selected
+            ? palette.primary[scheme]
+            : withAlpha(tokens.color.muted[scheme], 0.3),
+        }}
+      />
+    );
+  };
+  const pages = Array.from({ length: count }, (_, page) => page);
+
+  if (!onChange) {
+    return (
+      <View
+        testID={testID}
+        accessible
+        accessibilityLabel={pageLabel(current)}
+        className="flex-row items-center justify-center"
+        style={{ gap: size.gap }}
+      >
+        {pages.map((page) => dot(page))}
+      </View>
+    );
+  }
+  return (
+    <View testID={testID} className="flex-row items-center justify-center">
+      {pages.map((page) => (
+        <Pressable
+          key={page}
+          testID={testID ? `${testID}-${page}` : undefined}
+          accessibilityRole="button"
+          accessibilityLabel={pageLabel(page)}
+          accessibilityState={{ selected: page === current }}
+          onPress={() => onChange(page)}
+          className="items-center justify-center active:opacity-70"
+          style={{ minWidth: MIN_TOUCH_TARGET, height: MIN_TOUCH_TARGET }}
+        >
+          {dot(page)}
+        </Pressable>
+      ))}
+    </View>
+  );
+}

package/src/SectionLabel.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+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 SectionLabelProps = TextProps & {
+  className?: string;
+  children: ReactNode;
+  /** Capitals with the web menu label tracking (`uppercase tracking-widest`). Default `false`. */
+  uppercase?: boolean;
+};
+
+/** Letter spacing in em: slightly open, or the web `tracking-widest` (0.1em) in capitals. */
+const TRACKING = { regular: 0.02, uppercase: 0.1 } as const;
+
+/**
+ * The quiet label above a group of rows ("Today", "Library"), in the spirit of
+ * the web `sidebarSectionLabelClass`: `text-xs` medium (12 / 500), muted, with
+ * slightly open letter spacing. The web label is muted at 55% (2.1:1 on the
+ * light page); this one is the full muted colour (4.4:1). A header for
+ * VoiceOver and TalkBack. No side padding: pass `className="px-4"` to line it
+ * up with `ListRow` text. `SettingsSection` titles are the larger heading.
+ */
+export function SectionLabel({ className, uppercase = false, style, ...props }: SectionLabelProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = largerText ? "text-base" : "text-xs";
+  const { fontSize } = sizeStyle(size);
+  return (
+    <Text
+      accessibilityRole="header"
+      className={cn("font-instrument-sans-medium", size, className)}
+      style={[
+        textStyle("muted", scheme),
+        sizeStyle(size),
+        typeStyle("medium"),
+        {
+          letterSpacing: fontSize * TRACKING[uppercase ? "uppercase" : "regular"],
+          textTransform: uppercase ? "uppercase" : "none",
+        },
+        style,
+      ]}
+      {...props}
+    />
+  );
+}

package/src/SheetRow.tsx

@@ -0,0 +1,89 @@
+import type { ComponentType } from "react";
+import { Pressable, Text, View } from "react-native";
+import { IconCheck, type IconProps } from "@tabler/icons-react-native";
+import { cn } from "./cn";
+import { sizeStyle, textStyle, typeStyle } from "./controlStyles";
+import { palette } from "./palette";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+export type SheetRowProps = {
+  /** A Tabler icon at the start. */
+  icon?: ComponentType<IconProps>;
+  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. */
+  active?: boolean;
+  /** A destructive action: title and icon in `palette.danger`. */
+  danger?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+  testID?: string;
+};
+
+/**
+ * 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
+ * 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
+ * item, and ignores presses.
+ */
+export function SheetRow({
+  icon: Icon,
+  title,
+  detail,
+  active = false,
+  danger = false,
+  disabled = false,
+  onPress,
+  testID,
+}: SheetRowProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const color = danger ? palette.danger[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"
+      accessibilityLabel={title}
+      accessibilityHint={detail}
+      accessibilityState={{ disabled, selected: active }}
+      disabled={disabled}
+      onPress={onPress}
+      className={cn(
+        "flex-row items-center gap-3 px-4 py-3",
+        largerText ? "min-h-16" : "min-h-14",
+        disabled && "opacity-50",
+      )}
+      style={({ pressed }) => ({
+        borderRadius: tokens.radius.sm,
+        backgroundColor: pressed && !disabled ? palette.default[scheme] : "transparent",
+      })}
+    >
+      {Icon ? <Icon size={iconSize} color={color} /> : null}
+      <View className="min-w-0 flex-1">
+        <Text
+          className={cn("font-instrument-sans-medium", titleSize)}
+          style={[{ color }, sizeStyle(titleSize), typeStyle("medium")]}
+        >
+          {title}
+        </Text>
+        {detail ? (
+          <Text
+            className={cn("font-instrument-sans", detailSize)}
+            style={[textStyle("muted", scheme), sizeStyle(detailSize)]}
+          >
+            {detail}
+          </Text>
+        ) : null}
+      </View>
+      {active ? <IconCheck size={iconSize} color={color} strokeWidth={2} /> : null}
+    </Pressable>
+  );
+}

package/src/StackPageHeader.tsx

@@ -0,0 +1,100 @@
+import { useState, type ReactNode } from "react";
+import { Text, View } from "react-native";
+import { IconChevronLeft } from "@tabler/icons-react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { cn } from "./cn";
+import { PAGE_HEADER_HEIGHT, sizeStyle, textStyle } from "./controlStyles";
+import { HeaderIconButton } from "./HeaderIconButton";
+import { PageTitle } from "./PageTitle";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+export type StackPageHeaderProps = {
+  title: string;
+  /** Muted line under the title, up to two lines. */
+  description?: string;
+  /** Shows a back `HeaderIconButton` at the start that calls this. No button without it. */
+  onBack?: () => void;
+  /** Names the back button. Default "Back". */
+  backLabel?: string;
+  /** Actions at the end, such as a `HeaderIconButton`. */
+  headerRight?: ReactNode;
+  backTestID?: string;
+  /**
+   * Pad the top by the safe-area inset. Default `true`. Pass `false` under a
+   * native header or inside a view that already pads the inset.
+   */
+  safeTop?: boolean;
+  testID?: string;
+  className?: string;
+};
+
+/**
+ * A stack screen header with no fill, for a screen over `AmbientBackground`:
+ * a back chevron `HeaderIconButton` at the start, `headerRight` at the end and
+ * a centred `PageTitle` (Instrument Sans 600 at 20 / 25) with an optional
+ * muted description. The two sides are the same width, the wider of the back
+ * button and `headerRight`, so the title stays centred on the screen and a
+ * long one is cut off before it reaches them. The row is at least 56 high
+ * below the top inset, as `PageHeader`, with the `px-4` screen padding.
+ */
+export function StackPageHeader({
+  title,
+  description,
+  onBack,
+  backLabel = "Back",
+  headerRight,
+  backTestID,
+  safeTop = true,
+  testID,
+  className,
+}: StackPageHeaderProps) {
+  const insets = useSafeAreaInsets();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const [rightWidth, setRightWidth] = useState(0);
+  const top = safeTop ? insets.top : 0;
+  // `HeaderIconButton` is 48 across (56 with larger text).
+  const backWidth = onBack ? (largerText ? 56 : 48) : 0;
+  const side = { minWidth: Math.max(backWidth, headerRight != null ? rightWidth : 0) };
+  const descriptionSize = largerText ? "text-base" : "text-sm";
+
+  return (
+    <View
+      testID={testID}
+      className={cn("flex-row items-center gap-2 px-4", className)}
+      style={{ paddingTop: top, minHeight: top + PAGE_HEADER_HEIGHT }}
+    >
+      <View className="flex-1 flex-row items-center justify-start" style={side}>
+        {onBack ? (
+          <HeaderIconButton label={backLabel} testID={backTestID} onPress={onBack}>
+            <IconChevronLeft size={largerText ? 26 : 22} color={tokens.color.foreground[scheme]} />
+          </HeaderIconButton>
+        ) : null}
+      </View>
+      <View className="min-w-0 shrink items-center py-2">
+        <PageTitle className="text-center">{title}</PageTitle>
+        {description ? (
+          <Text
+            numberOfLines={2}
+            className={cn("text-center font-instrument-sans", descriptionSize)}
+            style={[textStyle("muted", scheme), sizeStyle(descriptionSize)]}
+          >
+            {description}
+          </Text>
+        ) : null}
+      </View>
+      <View className="flex-1 flex-row items-center justify-end" style={side}>
+        {headerRight != null ? (
+          <View
+            className="flex-row items-center gap-2"
+            onLayout={(event) => setRightWidth(event.nativeEvent.layout.width)}
+          >
+            {headerRight}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/src/StatGrid.tsx

@@ -0,0 +1,80 @@
+import { Text, View } from "react-native";
+import { cn } from "./cn";
+import { cardStyle, sizeStyle, textStyle, typeStyle } from "./controlStyles";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+
+export type StatGridItem = { label: string; value: string; testID?: string };
+
+export type StatGridProps = {
+  items: StatGridItem[];
+  /** Tiles per row. Default 2. */
+  columns?: 2 | 3;
+  testID?: string;
+};
+
+/** `items` in rows of `columns`. The last row is padded with `null`, so every tile has the same width. */
+export function statGridRows<T>(items: T[], columns: number): (T | null)[][] {
+  const rows: (T | null)[][] = [];
+  for (let start = 0; start < items.length; start += columns) {
+    const row: (T | null)[] = items.slice(start, start + columns);
+    while (row.length < columns) row.push(null);
+    rows.push(row);
+  }
+  return rows;
+}
+
+/**
+ * Label and value tiles in rows of 2 or 3, each the flat web card
+ * (`cardStyle`: `surfaceCard` fill, radius 16, no shadow) with the web
+ * `Surface` padding (`p-4`). The label is muted `text-sm`; the value is
+ * semibold `text-xl` in the foreground, with tabular figures. VoiceOver and
+ * TalkBack read each tile as one element: "Steps, 8,432".
+ */
+export function StatGrid({ items, columns = 2, testID }: StatGridProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  if (items.length === 0) return null;
+  const labelSize = largerText ? "text-base" : "text-sm";
+  const valueSize = largerText ? "text-2xl" : "text-xl";
+  return (
+    <View testID={testID} className="gap-3">
+      {statGridRows(items, columns).map((row, rowIndex) => (
+        <View key={rowIndex} className="flex-row gap-3">
+          {row.map((item, index) =>
+            item ? (
+              <View
+                key={index}
+                testID={item.testID}
+                accessible
+                accessibilityLabel={`${item.label}, ${item.value}`}
+                className="min-w-0 flex-1 gap-1 p-4"
+                style={cardStyle(scheme)}
+              >
+                <Text
+                  className={cn("font-instrument-sans", labelSize)}
+                  style={[textStyle("muted", scheme), sizeStyle(labelSize)]}
+                >
+                  {item.label}
+                </Text>
+                <Text
+                  className={cn("font-instrument-sans-semibold", valueSize)}
+                  style={[
+                    textStyle("foreground", scheme),
+                    sizeStyle(valueSize, "tight"),
+                    typeStyle("semibold"),
+                    { fontVariant: ["tabular-nums"] },
+                  ]}
+                >
+                  {item.value}
+                </Text>
+              </View>
+            ) : (
+              <View key={index} className="flex-1" />
+            ),
+          )}
+        </View>
+      ))}
+    </View>
+  );
+}