@vvedantb/native-ui 0.3.17 → 0.5.0

package/src/DateTimeField.tsx

@@ -4,26 +4,65 @@ import DateTimePicker, {
   type DateTimePickerEvent,
 } from "@react-native-community/datetimepicker";
 import dayjs from "dayjs";
-import { textStyle, typeStyle } from "./controlStyles";
+import { IconX } from "@tabler/icons-react-native";
+import { MIN_TOUCH_TARGET, textStyle, typeStyle } from "./controlStyles";
+import { palette } from "./palette";
 import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
 import { useScheme } from "./useScheme";
 
 type PickerMode = "date" | "time";
 type PickerButton = { mode: PickerMode; label: string };
 
+export type DateTimeFieldProps = {
+  /** `null` shows `placeholder` until a date is picked (from 0.5.0). */
+  value: Date | null;
+  onChange: (value: Date) => void;
+  /** Date and time buttons (default), the time button only, or the date button only. */
+  mode?: "datetime" | "time" | "date";
+  maximumDate?: Date;
+  /** Shown on each button while `value` is `null`. Default "Select date" or "Select time". */
+  placeholder?: string;
+  /** Shows a clear button while `value` is set. It calls this; `onChange` is not called. */
+  onClear?: () => void;
+  /** Names the clear button. Default "Clear time" in `time` mode, "Clear date" otherwise. */
+  clearLabel?: string;
+  testID?: string;
+};
+
+const DEFAULT_PLACEHOLDER: Record<PickerMode, string> = {
+  date: "Select date",
+  time: "Select time",
+};
+
+/**
+ * The date the picker opens on: `value`, or with no value `now`, held back to
+ * `maximumDate` when that is earlier.
+ */
+export function pickerSeed(value: Date | null, maximumDate?: Date, now: Date = new Date()): Date {
+  if (value) return value;
+  return maximumDate && maximumDate.getTime() < now.getTime() ? maximumDate : now;
+}
+
+/**
+ * Date and time buttons that open the system picker below them. `mode="date"`
+ * shows the date button only. A `null` value shows `placeholder` in the field
+ * placeholder colour, and the picker opens on today (or `maximumDate`, if
+ * earlier); picking calls `onChange`. With `onClear`, a 44 clear button
+ * follows the buttons while there is a value. On iOS the spinner sets the
+ * value when it is turned. The buttons have the web `bg-secondary` fill
+ * (`palette.default`) as a style, so it follows the scheme.
+ */
 export function DateTimeField({
   value,
   onChange,
   mode = "datetime",
   maximumDate,
+  placeholder,
+  onClear,
+  clearLabel,
   testID,
-}: {
-  value: Date;
-  onChange: (value: Date) => void;
-  mode?: "datetime" | "time";
-  maximumDate?: Date;
-  testID?: string;
-}) {
+}: DateTimeFieldProps) {
   const largerText = useLargerText();
   const scheme = useScheme();
   const [picker, setPicker] = useState<PickerMode | null>(null);
@@ -33,18 +72,19 @@ export function DateTimeField({
     if (event.type === "set" && next) onChange(next);
   };
 
-  const timeButton: PickerButton = {
-    mode: "time",
-    label: dayjs(value).format("HH:mm"),
-  };
+  const label = (button: PickerMode, format: string) =>
+    value ? dayjs(value).format(format) : (placeholder ?? DEFAULT_PLACEHOLDER[button]);
+  const dateButton: PickerButton = { mode: "date", label: label("date", "D MMM YYYY") };
+  const timeButton: PickerButton = { mode: "time", label: label("time", "HH:mm") };
   const buttons: PickerButton[] =
-    mode === "datetime"
-      ? [{ mode: "date", label: dayjs(value).format("D MMM YYYY") }, timeButton]
-      : [timeButton];
+    mode === "datetime" ? [dateButton, timeButton] : mode === "date" ? [dateButton] : [timeButton];
+  const textColor = value
+    ? textStyle("foreground", scheme)
+    : { color: palette.fieldPlaceholder[scheme] };
 
   return (
     <View className="gap-2">
-      <View className="flex-row gap-3">
+      <View className="flex-row items-center gap-3">
         {buttons.map((button) => (
           <Pressable
             key={button.mode}
@@ -56,20 +96,36 @@ export function DateTimeField({
                 current === button.mode ? null : button.mode,
               )
             }
-            className={`${largerText ? "min-h-16" : "min-h-14"} flex-1 justify-center rounded-lg bg-secondary px-4 py-2 active:opacity-70`}
+            className={`${largerText ? "min-h-16" : "min-h-14"} flex-1 justify-center rounded-lg px-4 py-2 active:opacity-70`}
+            style={{ backgroundColor: palette.default[scheme] }}
           >
             <Text
               className={`${largerText ? "text-xl" : "text-lg"} font-instrument-sans-semibold`}
-              style={[textStyle("foreground", scheme), typeStyle("semibold")]}
+              style={[textColor, typeStyle("semibold")]}
             >
               {button.label}
             </Text>
           </Pressable>
         ))}
+        {onClear && value ? (
+          <Pressable
+            testID={testID ? `${testID}-clear` : undefined}
+            accessibilityRole="button"
+            accessibilityLabel={clearLabel ?? (mode === "time" ? "Clear time" : "Clear date")}
+            onPress={() => {
+              setPicker(null);
+              onClear();
+            }}
+            className="items-center justify-center rounded-full active:opacity-70"
+            style={{ width: MIN_TOUCH_TARGET, height: MIN_TOUCH_TARGET }}
+          >
+            <IconX size={largerText ? 24 : 20} color={tokens.color.muted[scheme]} />
+          </Pressable>
+        ) : null}
       </View>
       {picker ? (
         <DateTimePicker
-          value={value}
+          value={pickerSeed(value, maximumDate)}
           mode={picker}
           is24Hour
           maximumDate={picker === "date" ? maximumDate : undefined}

package/src/HeaderIconButton.tsx

@@ -1,5 +1,20 @@
 import { TouchableOpacity } from "react-native";
+import { withAlpha } from "./palette";
 import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+/**
+ * Fill and border of `HeaderIconButton`: the surface with a white hairline
+ * (40% in light, 10% in dark). Styles, not `bg-surface`, which an app theme
+ * that nests `dark` under `surface` keeps white in dark mode.
+ */
+export function headerIconButtonColors(scheme: "light" | "dark") {
+  return {
+    backgroundColor: tokens.color.surface[scheme],
+    borderColor: withAlpha(tokens.color.white, scheme === "dark" ? 0.1 : 0.4),
+  };
+}
 
 export function HeaderIconButton({
   onPress,
@@ -13,10 +28,12 @@ export function HeaderIconButton({
   children: React.ReactNode;
 }) {
   const largerText = useLargerText();
+  const scheme = useScheme();
   return (
     <TouchableOpacity
       testID={testID}
-      className={`${largerText ? "h-14 w-14" : "h-12 w-12"} items-center justify-center rounded-full border border-white/40 bg-surface dark:border-white/10`}
+      className={`${largerText ? "h-14 w-14" : "h-12 w-12"} items-center justify-center rounded-full border`}
+      style={headerIconButtonColors(scheme)}
       onPress={onPress}
       accessibilityRole="button"
       accessibilityLabel={label}

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