@vvedantb/native-ui 0.2.1 → 0.3.13

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

package/src/Select.tsx

@@ -9,7 +9,16 @@ import {
   SelectValue,
 } from "./primitives/select";
 import { cn } from "./cn";
+import {
+  MIN_TOUCH_TARGET,
+  fieldStyle,
+  fieldTextStyle,
+  touchSlop,
+  typeStyle,
+} from "./controlStyles";
+import { palette } from "./palette";
 import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
 
 interface SelectOption<TValue = string | number | null> {
   label: string;
@@ -27,6 +36,8 @@ interface SelectProps<TValue = string | number | null> {
   triggerClassName?: string;
   contentClassName?: string;
   testID?: string;
+  /** Names the field for VoiceOver and TalkBack, which otherwise read only the value or placeholder. */
+  accessibilityLabel?: string;
 }
 
 const NULL_SENTINEL = "__null__";
@@ -62,8 +73,10 @@ function Select<TValue = string | number | null>({
   triggerClassName,
   contentClassName,
   testID,
+  accessibilityLabel,
 }: SelectProps<TValue>) {
   const largerText = useLargerText();
+  const scheme = useScheme();
   const primitiveValue = toPrimitiveValue(value, options);
 
   return (
@@ -89,19 +102,32 @@ function Select<TValue = string | number | null>({
     >
       <SelectTrigger
         testID={testID}
+        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)}
         className={cn(
-          "h-14 w-full rounded-lg border-0 bg-secondary px-4 py-0 shadow-none",
-          largerText && "h-16",
+          // The web trigger: h-10 px-3.5, 16 px type (its phone size). 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",
+          largerText && "min-h-16 px-4",
           triggerClassName,
           className,
         )}
+        style={fieldStyle(scheme)}
       >
         <SelectValue
           placeholder={placeholder ?? "Select option"}
-          className={cn(
-            "font-instrument-sans-medium text-foreground",
-            largerText ? "text-xl" : "text-lg",
-          )}
+          className={
+            largerText ? "font-instrument-sans-medium text-xl" : "font-instrument-sans text-base"
+          }
+          style={[
+            primitiveValue
+              ? fieldTextStyle(scheme)
+              : { color: palette.fieldPlaceholder[scheme] },
+            largerText ? typeStyle("medium") : null,
+          ]}
         />
       </SelectTrigger>
       <SelectContent className={cn("w-full", contentClassName)}>

package/src/Separator.tsx

@@ -0,0 +1,38 @@
+import { StyleSheet, View, type ViewProps } from "react-native";
+import { cn } from "./cn";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+export type SeparatorProps = ViewProps & {
+  /** Default `"horizontal"`. */
+  orientation?: "horizontal" | "vertical";
+  /** Hidden from assistive tech. Default `true`, as on the web. */
+  decorative?: boolean;
+  className?: string;
+};
+
+/** Hairline in `tokens.color.separator`. Vertical separators stretch to the row height. */
+export function Separator({
+  orientation = "horizontal",
+  decorative = true,
+  className,
+  style,
+  ...props
+}: SeparatorProps) {
+  const scheme = useScheme();
+  return (
+    <View
+      accessibilityElementsHidden={decorative}
+      importantForAccessibility={decorative ? "no-hide-descendants" : "auto"}
+      className={cn("shrink-0", className)}
+      style={[
+        orientation === "horizontal"
+          ? { height: StyleSheet.hairlineWidth, width: "100%" }
+          : { width: StyleSheet.hairlineWidth, alignSelf: "stretch" },
+        { backgroundColor: tokens.color.separator[scheme] },
+        style,
+      ]}
+      {...props}
+    />
+  );
+}

package/src/Sheet.tsx

@@ -0,0 +1,107 @@
+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";
+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 {
+  OverlayClose,
+  OverlayModal,
+  OverlayRoot,
+  OverlayTrigger,
+  type OverlayPressableProps,
+  type OverlayRootProps,
+} from "./primitives/overlay";
+
+const SHEET_RADIUS = tokens.radius.card;
+
+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.
+ */
+export function Sheet(props: SheetProps) {
+  return <OverlayRoot {...props} />;
+}
+
+export function SheetTrigger(props: OverlayPressableProps) {
+  return <OverlayTrigger part="SheetTrigger" {...props} />;
+}
+
+export function SheetClose(props: OverlayPressableProps) {
+  return <OverlayClose part="SheetClose" {...props} />;
+}
+
+export type SheetContentProps = ViewProps & {
+  className?: string;
+  /** Close on a backdrop tap. Default `true`. */
+  dismissible?: boolean;
+  /** Grab handle above the content. Default `true`. */
+  showHandle?: boolean;
+};
+
+/**
+ * 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.
+ */
+export function SheetContent({
+  children,
+  className,
+  dismissible = true,
+  showHandle = true,
+  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>
+  );
+}
+
+export function SheetHandle({ className, style, ...props }: ViewProps & { className?: string }) {
+  const scheme = useScheme();
+  return (
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      className={cn("h-1.5 w-10 self-center rounded-full", className)}
+      style={[{ backgroundColor: withAlpha(tokens.color.muted[scheme], 0.4) }, style]}
+      {...props}
+    />
+  );
+}
+
+export function SheetHeader({ className, ...props }: ViewProps & { className?: string }) {
+  return <View className={cn("gap-1.5", className)} {...props} />;
+}
+
+export const SheetTitle = DialogTitle;
+export const SheetDescription = DialogDescription;
+export const SheetBody = DialogBody;
+/** Buttons stack full width, the last child on top: the web footer on a phone. */
+export function SheetFooter({ className, ...props }: ViewProps & { className?: string }) {
+  return <View className={cn("flex-col-reverse gap-2", className)} {...props} />;
+}

package/src/Skeleton.tsx

@@ -1,5 +1,6 @@
-import { View } from "react-native";
+import { View, type ViewProps } from "react-native";
 import Animated, {
+  cancelAnimation,
   useAnimatedStyle,
   useSharedValue,
   withRepeat,
@@ -7,13 +8,27 @@ import Animated, {
 } from "react-native-reanimated";
 import { useEffect } from "react";
 import { cn } from "./cn";
+import { cardStyle } from "./controlStyles";
+import { useReduceMotion } from "./useReduceMotion";
+import { useScheme } from "./useScheme";
 
-export function Skeleton({ className }: { className?: string }) {
+/** Pulsing placeholder block. Holds still with Reduce Motion. Size it with `className` (for example `h-4 w-32`). */
+export function Skeleton({
+  className,
+  style,
+  ...props
+}: ViewProps & { className?: string }) {
+  const reduceMotion = useReduceMotion();
   const opacity = useSharedValue(0.4);
 
   useEffect(() => {
+    if (reduceMotion) {
+      opacity.value = 0.7;
+      return;
+    }
     opacity.value = withRepeat(withTiming(1, { duration: 800 }), -1, true);
-  }, [opacity]);
+    return () => cancelAnimation(opacity);
+  }, [opacity, reduceMotion]);
 
   const animatedStyle = useAnimatedStyle(() => ({
     opacity: opacity.value,
@@ -21,15 +36,20 @@ export function Skeleton({ className }: { className?: string }) {
 
   return (
     <Animated.View
-      style={animatedStyle}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      {...props}
+      style={[animatedStyle, style]}
       className={cn("bg-neutral-200 dark:bg-neutral-700 rounded-lg", className)}
     />
   );
 }
 
+/** A `Card`-shaped placeholder: the flat card fill and radius. */
 export function CardSkeleton() {
+  const scheme = useScheme();
   return (
-    <View className="rounded-lg bg-surface p-5 gap-3">
+    <View className="gap-3 p-5" style={cardStyle(scheme)}>
       <Skeleton className="h-4 w-32" />
       <Skeleton className="h-16 w-full" />
     </View>

package/src/Spinner.tsx

@@ -0,0 +1,92 @@
+import {
+  ActivityIndicator,
+  Platform,
+  View,
+  type ActivityIndicatorProps,
+  type ViewProps,
+} from "react-native";
+import { cn } from "./cn";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+export type SpinnerProps = Omit<ActivityIndicatorProps, "size" | "color"> & {
+  /** `sm` is 16, the web `sm` and the `Button` loading ring. `md` is the small system spinner (20), `lg` the large one. A number sets the size on Android; iOS picks small below 30. Default `"md"`. */
+  size?: "sm" | "md" | "lg" | number;
+  /** `"muted"` (default) uses the muted text colour, `"inherit"` the foreground. Native has no `currentColor`. */
+  tone?: "muted" | "inherit";
+  /** Overrides `tone`. */
+  color?: string;
+  /** Hide from assistive tech, for example inside a labelled button. Default `false`. */
+  decorative?: boolean;
+};
+
+/** The system `"small"` spinner box on iOS, Android and React Native Web. */
+const SYSTEM_SMALL = 20;
+/** Web `size-4`. No platform has a 16 spinner, so `sm` is the small one scaled down in a 16 box. */
+const SM = 16;
+
+function systemSize(size: NonNullable<SpinnerProps["size"]>) {
+  if (typeof size === "number") {
+    return Platform.OS === "android" ? size : size >= 30 ? "large" : "small";
+  }
+  return size === "lg" ? "large" : "small";
+}
+
+/**
+ * The platform `ActivityIndicator` with the web `Spinner` size and tone names.
+ * The web `mark`, `circle` and `ring` variants (animated SVG strokes) are not ported.
+ */
+export function Spinner({
+  size = "md",
+  tone = "muted",
+  color,
+  decorative = false,
+  accessibilityLabel,
+  style,
+  ...props
+}: SpinnerProps) {
+  const scheme = useScheme();
+  const small = size === "sm";
+  const indicator = (
+    <ActivityIndicator
+      size={systemSize(size)}
+      color={
+        color ??
+        (tone === "muted"
+          ? tokens.color.muted[scheme]
+          : tokens.color.foreground[scheme])
+      }
+      accessibilityElementsHidden={decorative}
+      importantForAccessibility={decorative ? "no-hide-descendants" : "auto"}
+      accessibilityRole={decorative ? undefined : "progressbar"}
+      accessibilityLabel={decorative ? undefined : (accessibilityLabel ?? "Loading")}
+      style={small ? { transform: [{ scale: SM / SYSTEM_SMALL }] } : style}
+      {...props}
+    />
+  );
+  if (!small) return indicator;
+  return (
+    <View
+      style={[{ width: SM, height: SM, alignItems: "center", justifyContent: "center" }, style]}
+    >
+      {indicator}
+    </View>
+  );
+}
+
+/** A `Spinner` centred in whatever box it is given. `label` names it for assistive tech. */
+export function CenteredSpinner({
+  label,
+  className,
+  ...props
+}: ViewProps & { label: string; className?: string }) {
+  return (
+    <View
+      accessibilityState={{ busy: true }}
+      className={cn("min-h-0 w-full flex-1 items-center justify-center p-6", className)}
+      {...props}
+    >
+      <Spinner accessibilityLabel={label} />
+    </View>
+  );
+}

package/src/StatusDot.tsx

@@ -0,0 +1,66 @@
+import { View, type ViewProps } from "react-native";
+import { cn } from "./cn";
+import { palette, withAlpha } from "./palette";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+/** The web `StatusTone`s. */
+export type StatusTone =
+  | "progress"
+  | "business-review"
+  | "code-review"
+  | "done"
+  | "cancelled"
+  | "active"
+  | "critical"
+  | "neutral";
+
+export type StatusDotProps = ViewProps & {
+  tone: StatusTone;
+  /** `"sm"` (6) or `"md"` (8). Default `"sm"`. */
+  size?: "sm" | "md";
+  className?: string;
+};
+
+function toneColor(tone: StatusTone, scheme: "light" | "dark") {
+  switch (tone) {
+    case "progress":
+      return palette.warning[scheme];
+    case "business-review":
+      return palette.primary[scheme];
+    case "code-review":
+      return withAlpha(palette.primary[scheme], 0.7);
+    case "done":
+    case "active":
+      return palette.success[scheme];
+    case "cancelled":
+      return withAlpha(tokens.color.muted[scheme], 0.4);
+    case "critical":
+      return palette.danger[scheme];
+    default:
+      return withAlpha(tokens.color.muted[scheme], 0.6);
+  }
+}
+
+/** Small coloured dot that carries a status, so the label beside it stays neutral text. Hidden from assistive tech. */
+export function StatusDot({ tone, size = "sm", className, style, ...props }: StatusDotProps) {
+  const scheme = useScheme();
+  const diameter = size === "md" ? 8 : 6;
+  return (
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      className={cn("shrink-0", className)}
+      style={[
+        {
+          width: diameter,
+          height: diameter,
+          borderRadius: diameter / 2,
+          backgroundColor: toneColor(tone, scheme),
+        },
+        style,
+      ]}
+      {...props}
+    />
+  );
+}

package/src/Switch.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import { Switch as PrimitiveSwitch } from "./primitives/switch";
 import { cn } from "./cn";
+import { switchColors, switchSize, touchSlop } from "./controlStyles";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
 
 type SwitchProps = Omit<
   React.ComponentPropsWithoutRef<typeof PrimitiveSwitch>,
@@ -10,13 +13,19 @@ type SwitchProps = Omit<
   checked?: boolean;
   onValueChange?: (value: boolean) => void;
   onCheckedChange?: (value: boolean) => void;
+  /** Track fill when on or off, in place of the `palette` colours. */
+  onColor?: string;
+  offColor?: string;
 };
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof PrimitiveSwitch>,
   SwitchProps
->(({ value, checked, onValueChange, onCheckedChange, ...props }, ref) => {
+>(({ value, checked, onValueChange, onCheckedChange, onColor, offColor, ...props }, ref) => {
   const resolvedValue = checked ?? value ?? false;
+  const colors = switchColors(resolvedValue, useScheme());
+  const trackColor = resolvedValue ? onColor : offColor;
+  const size = switchSize(useLargerText());
 
   const handleCheckedChange = (nextValue: boolean) => {
     onCheckedChange?.(nextValue);
@@ -28,13 +37,21 @@ const Switch = React.forwardRef<
       ref={ref}
       checked={resolvedValue}
       onCheckedChange={handleCheckedChange}
-      hitSlop={12}
-      className="h-8 w-14"
-      thumbClassName={cn(
-        "h-7 w-7",
-        resolvedValue ? "translate-x-6" : "translate-x-0",
-      )}
+      // The web size on screen, a 44 target to touch.
+      hitSlop={touchSlop(size.width, size.height)}
+      accessibilityRole="switch"
+      className={cn(size.track, "justify-center")}
+      trackStyle={
+        trackColor ? { backgroundColor: trackColor, borderColor: trackColor } : colors.track
+      }
+      thumbStyle={colors.thumb}
+      thumbClassName={cn(size.thumb, resolvedValue ? size.on : "translate-x-0")}
       {...props}
+      accessibilityState={{
+        ...props.accessibilityState,
+        checked: resolvedValue,
+        disabled: Boolean(props.disabled),
+      }}
     />
   );
 });