@vvedantb/native-ui 0.2.1 → 0.3.13

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

package/src/Textarea.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Input as PrimitiveInput } from "./primitives/input";
+import { cn } from "./cn";
+import { fieldStyle, fieldTextStyle, typeStyle } from "./controlStyles";
+import { palette } from "./palette";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+
+type TextareaProps = React.ComponentPropsWithoutRef<typeof PrimitiveInput> & {
+  className?: string;
+};
+
+/** Multiline `Input`: same fill, border, radius and type. Grows from 4 lines. */
+const Textarea = React.forwardRef<
+  React.ElementRef<typeof PrimitiveInput>,
+  TextareaProps
+>(({ className, placeholderTextColor, numberOfLines = 4, style, ...props }, ref) => {
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  return (
+    <PrimitiveInput
+      ref={ref}
+      multiline
+      numberOfLines={numberOfLines}
+      textAlignVertical="top"
+      placeholderTextColor={placeholderTextColor ?? palette.fieldPlaceholder[scheme]}
+      className={cn(
+        // The web textarea: min-h-20 px-3.5 py-2.5, 16 px type.
+        "min-h-20 border px-3.5 py-2.5 text-base font-instrument-sans",
+        largerText && "min-h-32 px-4 py-3 text-xl font-instrument-sans-medium",
+        className,
+      )}
+      style={[
+        fieldStyle(scheme),
+        fieldTextStyle(scheme),
+        largerText ? typeStyle("medium") : null,
+        style,
+      ]}
+      {...props}
+    />
+  );
+});
+
+Textarea.displayName = "Textarea";
+
+export { Textarea };
+export type { TextareaProps };

package/src/Toast.tsx

@@ -0,0 +1,170 @@
+import { Fragment, useEffect, useSyncExternalStore } from "react";
+import {
+  AccessibilityInfo,
+  ActivityIndicator,
+  Platform,
+  Pressable,
+  Text,
+  View,
+} from "react-native";
+import { FadeInUp, FadeOutUp, LinearTransition } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import Svg, { Path } from "react-native-svg";
+import { cn } from "./cn";
+import { sizeStyle, textStyle, typeStyle } from "./controlStyles";
+import { FLOATING_INSET } from "./floating";
+import {
+  TOAST_ICON_SIZE,
+  TOAST_ICONS,
+  toastIconColor,
+  toastShadowStyle,
+  toastSurfaceStyle,
+} from "./toastChrome";
+import { tokens } from "./tokens";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+import { NativeOnlyAnimatedView } from "./primitives/native-only-animated-view";
+import { getToasts, subscribeToasts, toast, type ToastItem } from "./toastStore";
+
+// On iOS the overlay draws above RN `Modal`s, so toasts show over dialogs (as
+// sonner does on the web). On Android a `Modal` still covers them.
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : Fragment;
+
+const toastShadow = toastShadowStyle(Platform.OS);
+
+/**
+ * Renders the `toast()` queue at the top of the screen, inside the safe-area
+ * insets. Mount once, inside `SafeAreaProvider` and after the navigator.
+ */
+export function Toaster({ offset = 8 }: { offset?: number }) {
+  const items = useSyncExternalStore(subscribeToasts, getToasts, getToasts);
+  const insets = useSafeAreaInsets();
+  if (items.length === 0) return null;
+  return (
+    <FullWindowOverlay>
+      <View
+        pointerEvents="box-none"
+        className="gap-2"
+        style={{
+          position: "absolute",
+          top: insets.top + offset,
+          left: insets.left + FLOATING_INSET,
+          right: insets.right + FLOATING_INSET,
+          zIndex: 50,
+        }}
+      >
+        {items.map((item) => (
+          <ToastCard key={item.id} item={item} />
+        ))}
+      </View>
+    </FullWindowOverlay>
+  );
+}
+
+/** The web filled 24 icons (`toastChrome`), or a spinner while loading. */
+function ToastIcon({ item }: { item: ToastItem }) {
+  const scheme = useScheme();
+  if (item.variant === "loading") {
+    return <ActivityIndicator size="small" color={tokens.color.muted[scheme]} />;
+  }
+  if (item.variant === "default") return null;
+  const { viewBox, d, evenOdd } = TOAST_ICONS[item.variant];
+  const rule = evenOdd ? "evenodd" : undefined;
+  return (
+    <Svg width={TOAST_ICON_SIZE} height={TOAST_ICON_SIZE} viewBox={viewBox}>
+      <Path
+        d={d}
+        fill={toastIconColor(item.variant, scheme)}
+        fillRule={rule}
+        clipRule={rule}
+      />
+    </Svg>
+  );
+}
+
+function ToastCard({ item }: { item: ToastItem }) {
+  const largerText = useLargerText();
+  const scheme = useScheme();
+
+  useEffect(() => {
+    if (!Number.isFinite(item.duration)) return;
+    const timer = setTimeout(() => toast.dismiss(item.id), item.duration);
+    return () => clearTimeout(timer);
+  }, [item]);
+
+  useEffect(() => {
+    AccessibilityInfo.announceForAccessibility(
+      item.description ? `${item.title}. ${item.description}` : item.title,
+    );
+  }, [item.title, item.description]);
+
+  return (
+    <NativeOnlyAnimatedView
+      entering={FadeInUp.duration(200)}
+      exiting={FadeOutUp.duration(160)}
+      layout={LinearTransition}
+    >
+      {/* The web toast: flat overlay fill, radius 16, ring and a light shadow. */}
+      <View style={[toastSurfaceStyle(scheme), toastShadow]}>
+        <Pressable
+          testID={`toast-${item.id}`}
+          // With an action, the text and the action button stay separate
+          // elements for VoiceOver and TalkBack instead of one grouped button.
+          accessible={!item.action}
+          accessibilityRole="button"
+          accessibilityHint="Closes the message"
+          onPress={() => toast.dismiss(item.id)}
+          className="flex-row items-center gap-3 px-4 py-3"
+        >
+          <ToastIcon item={item} />
+          <View className="min-w-0 flex-1">
+            {/* Web `text-sm font-medium leading-snug` (14 / 19.25, 500); `text-lg` with larger text. */}
+            <Text
+              className={cn(
+                "font-instrument-sans-medium",
+                largerText ? "text-lg" : "text-sm",
+              )}
+              style={[
+                textStyle("foreground", scheme),
+                typeStyle("medium"),
+                largerText ? sizeStyle("text-lg") : sizeStyle("text-sm", "snug"),
+              ]}
+            >
+              {item.title}
+            </Text>
+            {item.description ? (
+              <Text
+                className={cn(
+                  "font-instrument-sans",
+                  largerText ? "text-base" : "text-sm",
+                )}
+                style={textStyle("muted", scheme)}
+              >
+                {item.description}
+              </Text>
+            ) : null}
+          </View>
+          {item.action ? (
+            <Pressable
+              accessibilityRole="button"
+              hitSlop={8}
+              onPress={() => {
+                item.action?.onPress();
+                toast.dismiss(item.id);
+              }}
+              className="rounded-full bg-secondary px-3 py-1.5 active:opacity-70"
+            >
+              <Text
+                className="font-instrument-sans-semibold text-sm"
+                style={[textStyle("foreground", scheme), typeStyle("semibold")]}
+              >
+                {item.action.label}
+              </Text>
+            </Pressable>
+          ) : null}
+        </Pressable>
+      </View>
+    </NativeOnlyAnimatedView>
+  );
+}

package/src/blur.ts

@@ -0,0 +1,48 @@
+import type * as ExpoBlur from "expo-blur";
+
+export type ExpoBlurModule = typeof ExpoBlur;
+
+let expoBlur: ExpoBlurModule | null | undefined;
+
+/**
+ * `expo-blur`, or `null` when the optional peer is not installed. Metro
+ * bundles a `require` placed directly in a `try` block as an optional
+ * dependency, so a missing peer does not break the bundle.
+ */
+export function loadBlur(): ExpoBlurModule | null {
+  if (expoBlur === undefined) {
+    try {
+      expoBlur = require("expo-blur") as ExpoBlurModule;
+    } catch {
+      expoBlur = null;
+    }
+  }
+  return expoBlur;
+}
+
+export type GlassMode = "blur" | "backdrop" | "solid";
+
+/**
+ * How a floating surface draws its glass: a native `BlurView` on iOS and
+ * Android, a CSS backdrop blur on web, or the solid fill when blur is off,
+ * Reduce Transparency is on or `expo-blur` is missing.
+ */
+export function glassMode({
+  os,
+  blur,
+  reduceTransparency,
+  hasBlurView,
+}: {
+  os: string;
+  blur: boolean;
+  reduceTransparency: boolean;
+  hasBlurView: boolean;
+}): GlassMode {
+  if (!blur || reduceTransparency) {
+    return "solid";
+  }
+  if (os === "web") {
+    return "backdrop";
+  }
+  return (os === "ios" || os === "android") && hasBlurView ? "blur" : "solid";
+}

package/src/brand/AppIcons.tsx

@@ -0,0 +1,106 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import Svg, { G, Path } from "react-native-svg";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import {
+  APP_MARKS,
+  APP_MARK_VIEWBOX,
+  APP_MARK_VIEWBOX_START,
+  APP_NAMES,
+  markLinecap,
+  markStrokeWidth,
+  type AppName,
+} from "./svg";
+
+export type AppIconProps = {
+  /** Rendered width and height in points (the glyph is square). Default 24. */
+  size?: number;
+  /** Glyph colour, for fill and stroke glyphs. Default the scheme's `tokens.color.foreground`. */
+  color?: string;
+  /** Stroke width in rendered points, for stroke glyphs. Default: the glyph's own weight. Fill glyphs ignore it. */
+  stroke?: number;
+  /** Accessible name. Without it the icon is hidden from assistive tech. */
+  title?: string;
+  /** `"center"` (default) centres the glyph in its square. `"start"` left-aligns its ink, for vertical lists. */
+  align?: "center" | "start";
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+export type AppIconComponent = ((props: AppIconProps) => React.JSX.Element) & {
+  displayName?: string;
+};
+
+function viewBoxSide(app: AppName): number {
+  return Number(APP_MARK_VIEWBOX[app].split(" ")[3]);
+}
+
+function createAppIcon(app: AppName, displayName: string): AppIconComponent {
+  function Icon({
+    size = 24,
+    color,
+    stroke,
+    title,
+    align = "center",
+    testID,
+    style,
+  }: AppIconProps) {
+    const scheme = useScheme();
+    const fill = color ?? tokens.color.foreground[scheme];
+    const { kind, paths } = APP_MARKS[app];
+    const strokeWidth =
+      stroke === undefined
+        ? markStrokeWidth(app)
+        : stroke * (viewBoxSide(app) / size);
+    const glyphProps =
+      kind === "fill"
+        ? { fill }
+        : {
+            fill: "none",
+            stroke: fill,
+            strokeWidth,
+            strokeLinecap: markLinecap(app),
+            strokeLinejoin: "round" as const,
+          };
+    return (
+      <Svg
+        width={size}
+        height={size}
+        viewBox={
+          align === "start" ? APP_MARK_VIEWBOX_START[app] : APP_MARK_VIEWBOX[app]
+        }
+        preserveAspectRatio="xMidYMid meet"
+        accessible={Boolean(title)}
+        accessibilityRole={title ? "image" : undefined}
+        accessibilityLabel={title}
+        accessibilityElementsHidden={!title}
+        importantForAccessibility={title ? "auto" : "no-hide-descendants"}
+        testID={testID}
+        style={style}
+      >
+        <G {...glyphProps}>
+          {paths.map((d) => (
+            <Path key={d} d={d} />
+          ))}
+        </G>
+      </Svg>
+    );
+  }
+  Icon.displayName = displayName;
+  return Icon;
+}
+
+const iconName = (app: AppName) =>
+  `Icon${app === "projectv" ? "ProjectV" : app[0]!.toUpperCase() + app.slice(1)}`;
+
+/** Plain app glyph components by app name, for dynamic lookup. Same paths and viewBoxes as the web `APP_ICONS`. */
+export const APP_ICONS = Object.fromEntries(
+  APP_NAMES.map((app) => [app, createAppIcon(app, iconName(app))]),
+) as Record<AppName, AppIconComponent>;
+
+export const IconVibot = APP_ICONS.vibot;
+export const IconVhub = APP_ICONS.vhub;
+export const IconVmem = APP_ICONS.vmem;
+export const IconVerve = APP_ICONS.verve;
+export const IconVelth = APP_ICONS.velth;
+export const IconProjectV = APP_ICONS.projectv;

package/src/brand/AppMark.tsx

@@ -0,0 +1,83 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import Svg, { G, Path, Rect } from "react-native-svg";
+import { APP_ICONS } from "./AppIcons";
+import {
+  APP_MARKS,
+  MARK_VIEWBOX,
+  TILE_RADIUS,
+  markLinecap,
+  markStrokeWidth,
+  type AppMarkVariant,
+  type AppName,
+} from "./svg";
+
+export type AppMarkProps = {
+  /** Which family app's mark to draw. */
+  app: AppName;
+  /** `"mark"` (default): the plain `APP_ICONS` glyph. `"tile"`: white glyph on a black rounded tile. `"tile-light"`: black glyph on a white tile. */
+  variant?: AppMarkVariant;
+  /** Width and height in points. Default 24. */
+  size?: number;
+  /** Accessible name. Without it the mark is hidden from assistive tech. */
+  title?: string;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+const TILE_TONES = {
+  tile: { bg: "#000", fg: "#fff" },
+  "tile-light": { bg: "#fff", fg: "#000" },
+} as const;
+
+/**
+ * One of the six family app marks, as on the web `AppMark`. Tiles share the
+ * 1024 grid with the plain mark, so a bare glyph matches the tile glyph.
+ * Prefer `APP_ICONS[app]` for plain marks; tiles are for app icons only.
+ */
+export function AppMark({
+  app,
+  variant = "mark",
+  size = 24,
+  title,
+  testID,
+  style,
+}: AppMarkProps) {
+  if (variant === "mark") {
+    const Icon = APP_ICONS[app];
+    return <Icon size={size} title={title} testID={testID} style={style} />;
+  }
+  const { kind, paths } = APP_MARKS[app];
+  const tone = TILE_TONES[variant];
+  const glyphProps =
+    kind === "fill"
+      ? { fill: tone.fg }
+      : {
+          fill: "none",
+          stroke: tone.fg,
+          strokeWidth: markStrokeWidth(app),
+          strokeLinecap: markLinecap(app),
+          strokeLinejoin: "round" as const,
+        };
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox={MARK_VIEWBOX}
+      preserveAspectRatio="xMidYMid meet"
+      accessible={Boolean(title)}
+      accessibilityRole={title ? "image" : undefined}
+      accessibilityLabel={title}
+      accessibilityElementsHidden={!title}
+      importantForAccessibility={title ? "auto" : "no-hide-descendants"}
+      testID={testID}
+      style={style}
+    >
+      <Rect width={1024} height={1024} rx={TILE_RADIUS} fill={tone.bg} />
+      <G {...glyphProps}>
+        {paths.map((d) => (
+          <Path key={d} d={d} />
+        ))}
+      </G>
+    </Svg>
+  );
+}