@vvedantb/native-ui 0.2.0 → 0.3.12

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

package/src/Tabs.tsx

@@ -0,0 +1,190 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { Pressable, Text, View, type ViewProps } from "react-native";
+import { cn } from "./cn";
+import {
+  MIN_TOUCH_TARGET,
+  tabColors,
+  tabTrackStyle,
+  tabTriggerSize,
+  touchSlop,
+  typeStyle,
+  type TabsSize,
+  type TabsVariant,
+} from "./controlStyles";
+import { selectionHaptic } from "./haptics";
+import { useControllableState } from "./primitives/use-controllable-state";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+
+/** `pills` (default): separate pills, the `PillTabs` look. `segmented`: one track with the active segment raised. `soft`: wrapping pills, the active one filled. `pills` and `segmented` are as wide as their tabs, at the start, as on the web. */
+export type TabsListVariant = TabsVariant;
+
+const TabsContext = createContext<{
+  value: string;
+  setValue: (value: string) => void;
+} | null>(null);
+
+const TabsListContext = createContext<{
+  variant: TabsListVariant;
+  size: TabsSize;
+}>({ variant: "pills", size: "default" });
+
+function useTabs(part: string) {
+  const context = useContext(TabsContext);
+  if (!context) throw new Error(`${part} must be inside Tabs.`);
+  return context;
+}
+
+export type TabsProps = ViewProps & {
+  /** Active tab when the parent controls it. */
+  value?: string;
+  /** Initial tab when `value` is not set. */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+};
+
+/** Composable tabs with the web part names (`Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`). For a flat options array use `PillTabs`. */
+export function Tabs({
+  value,
+  defaultValue = "",
+  onValueChange,
+  className,
+  ...props
+}: TabsProps) {
+  const [current, setValue] = useControllableState({
+    value,
+    defaultValue,
+    onChange: onValueChange,
+  });
+  return (
+    <TabsContext.Provider value={{ value: current, setValue }}>
+      <View className={cn("gap-3", className)} {...props} />
+    </TabsContext.Provider>
+  );
+}
+
+export type TabsListProps = ViewProps & {
+  variant?: TabsListVariant;
+  /** `sm` makes the triggers smaller. */
+  size?: TabsSize;
+  className?: string;
+};
+
+export function TabsList({
+  variant = "pills",
+  size = "default",
+  className,
+  style,
+  ...props
+}: TabsListProps) {
+  const scheme = useScheme();
+  return (
+    <TabsListContext.Provider value={{ variant, size }}>
+      <View
+        accessibilityRole="tablist"
+        className={cn(
+          "flex-row",
+          // The web lists: `segmented` and `pills` are `inline-flex` (as wide
+          // as their tabs), `soft` a full-width row of centred, wrapping pills.
+          // Pills wrap rather than run off a phone screen.
+          variant === "segmented"
+            ? "max-w-full gap-[3px] self-start rounded-full p-[3px]"
+            : variant === "soft"
+              ? "flex-wrap items-center justify-center gap-1.5"
+              : "max-w-full flex-wrap gap-1.5 self-start",
+          className,
+        )}
+        style={variant === "segmented" ? [tabTrackStyle(scheme), style] : style}
+        {...props}
+      />
+    </TabsListContext.Provider>
+  );
+}
+
+export type TabsTriggerProps = {
+  value: string;
+  children: ReactNode;
+  disabled?: boolean;
+  className?: string;
+  testID?: string;
+  accessibilityLabel?: string;
+};
+
+export function TabsTrigger({
+  value,
+  children,
+  disabled,
+  className,
+  testID,
+  accessibilityLabel,
+}: TabsTriggerProps) {
+  const { value: current, setValue } = useTabs("TabsTrigger");
+  const { variant, size } = useContext(TabsListContext);
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const selected = current === value;
+  // Fill and label are styles from `tabColors`: apps' `bg-secondary` and
+  // `bg-surface` can stay light in dark mode, under a light label.
+  const colors = tabColors(variant, selected, scheme);
+  const trigger = tabTriggerSize(variant, size, largerText);
+  // The web `.t-tab` is `font-medium`; the soft trigger is regular.
+  const medium = variant !== "soft";
+
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="tab"
+      accessibilityLabel={
+        accessibilityLabel ?? (typeof children === "string" ? children : undefined)
+      }
+      accessibilityState={{ selected, disabled: Boolean(disabled) }}
+      // The web height (30) on screen, a 44 target to touch.
+      hitSlop={touchSlop(MIN_TOUCH_TARGET, trigger.minHeight)}
+      disabled={disabled}
+      onPress={() => {
+        if (selected) return;
+        selectionHaptic();
+        setValue(value);
+      }}
+      className={cn(
+        "shrink items-center justify-center rounded-full",
+        trigger.className,
+        variant === "pills" && "border border-white/40 dark:border-white/10",
+        disabled ? "opacity-50" : "active:opacity-70",
+        className,
+      )}
+      // A plain object: NativeWind puts the class styles and `style` in an
+      // array, where a `({ pressed }) => ...` style is dropped.
+      style={{ backgroundColor: colors.backgroundColor, minHeight: trigger.minHeight }}
+    >
+      {typeof children === "string" || typeof children === "number" ? (
+        <Text
+          numberOfLines={1}
+          className={cn(
+            "text-center",
+            medium ? "font-instrument-sans-medium" : "font-instrument-sans",
+            trigger.textClassName,
+          )}
+          style={[{ color: colors.color }, medium ? typeStyle("medium") : null]}
+        >
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}
+
+export type TabsContentProps = ViewProps & {
+  value: string;
+  className?: string;
+};
+
+/** Renders only while its tab is active. */
+export function TabsContent({ value, className, ...props }: TabsContentProps) {
+  const { value: current } = useTabs("TabsContent");
+  if (current !== value) return null;
+  return <View className={className} {...props} />;
+}