@vvedantb/native-ui 0.2.1 → 0.3.13

package/src/examples/ParityGallery.tsx

@@ -0,0 +1,513 @@
+// Reference screen for the components that mirror `@vvedantb/ui`. Render it in
+// an Expo route to compare against the web: it needs the same NativeWind setup
+// as the rest of the package and a `SafeAreaProvider` above it. It always
+// renders the default sizes (larger text off), as the web does. Prices below
+// are placeholders, not real plan prices.
+import { useState, type ReactNode } from "react";
+import { ScrollView, Text, View, type TextProps } from "react-native";
+import { IconInbox } from "@tabler/icons-react-native";
+import {
+  APP_ICONS,
+  APP_NAMES,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AppMark,
+  AppWordmark,
+  Avatar,
+  AvatarFallback,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  CenteredSpinner,
+  Checkbox,
+  ConfirmDialog,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  EmptyState,
+  Input,
+  Label,
+  LabeledSwitchRow,
+  NativeUiProvider,
+  PageHeader,
+  PageTitle,
+  PricingModal,
+  Progress,
+  SearchInput,
+  Select,
+  Separator,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  Skeleton,
+  Spinner,
+  StatusDot,
+  Switch,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  Toaster,
+  UpgradeToProCard,
+  initials,
+  toast,
+  tokens,
+  useNativeUi,
+  type BadgeVariant,
+  type ButtonVariant,
+  type PricingPlan,
+  type StatusTone,
+} from "../index";
+import { typeStyle } from "../controlStyles";
+import { useScheme } from "../useScheme";
+
+const BUTTON_VARIANTS: ButtonVariant[] = [
+  "default",
+  "secondary",
+  "outline",
+  "destructive",
+  "ghost",
+  "link",
+];
+
+const BADGE_VARIANTS: BadgeVariant[] = [
+  "default",
+  "secondary",
+  "destructive",
+  "destructive-soft",
+  "outline",
+  "success",
+  "warning",
+];
+
+const STATUS_TONES: StatusTone[] = [
+  "progress",
+  "business-review",
+  "code-review",
+  "done",
+  "cancelled",
+  "active",
+  "critical",
+  "neutral",
+];
+
+// Space after the last section, so Card, Upgrade and Overlays can scroll to the
+// top of an 844-tall phone for screenshot crops.
+const GALLERY_END_SPACE = 720;
+
+const PLANS: PricingPlan[] = [
+  {
+    id: "free",
+    name: "Free",
+    price: { month: "£0", year: "£0" },
+    current: true,
+    benefits: [{ label: "Core features" }],
+  },
+  {
+    id: "pro",
+    name: "V Pro",
+    price: { month: "£X", year: "£Y" },
+    featured: true,
+    intro: "Everything in Free, and:",
+  },
+];
+
+/** Body text in the scheme's foreground (a style, so it reads in dark mode too). */
+function GalleryText({ className, style, ...props }: TextProps & { className?: string }) {
+  const scheme = useScheme();
+  return (
+    <Text
+      className={className ?? "font-instrument-sans text-base"}
+      style={[{ color: tokens.color.foreground[scheme] }, style]}
+      {...props}
+    />
+  );
+}
+
+function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <View className="gap-3">
+      <GalleryText
+        accessibilityRole="header"
+        className="font-instrument-sans-semibold text-lg"
+        style={typeStyle("semibold")}
+      >
+        {title}
+      </GalleryText>
+      {children}
+    </View>
+  );
+}
+
+export function ParityGallery() {
+  const { accentColor } = useNativeUi();
+  return (
+    <NativeUiProvider largerText={false} accentColor={accentColor}>
+      <GalleryScreen />
+    </NativeUiProvider>
+  );
+}
+
+function GalleryScreen() {
+  const [checked, setChecked] = useState<boolean | "indeterminate">("indeterminate");
+  const [switchOn, setSwitchOn] = useState(true);
+  const [colour, setColour] = useState<string | null | undefined>(undefined);
+  const [emptySearch, setEmptySearch] = useState("");
+  const [search, setSearch] = useState("Pink");
+  const [progress, setProgress] = useState(40);
+  const [pricingOpen, setPricingOpen] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  return (
+    <View className="flex-1">
+      <ScrollView
+        // So the SearchInput clear button takes the first tap while the keyboard is up.
+        keyboardShouldPersistTaps="handled"
+        contentContainerClassName="gap-8 px-4 pt-4"
+        contentContainerStyle={{ paddingBottom: GALLERY_END_SPACE }}
+      >
+        <Section title="Page title">
+          <PageTitle>Updates</PageTitle>
+          {/* `safeTop={false}` and `px-0`: here the header is not at the top of the screen, and the scroll view pads the sides. */}
+          <PageHeader
+            title="Apps"
+            safeTop={false}
+            className="px-0"
+            action={
+              <Button variant="ghost" size="sm" fullWidth={false} onPress={() => toast("Updating all apps")}>
+                Update all
+              </Button>
+            }
+          />
+        </Section>
+
+        <Section title="Brand">
+          {(["vibot", "verve", "velth", "vmem", "vhub"] as const).map((app) => (
+            <AppWordmark key={app} app={app} />
+          ))}
+          <View className="flex-row flex-wrap items-center gap-3">
+            {APP_NAMES.map((app) => {
+              const Icon = APP_ICONS[app];
+              return <Icon key={app} size={28} />;
+            })}
+            <AppMark app="vibot" variant="tile" size={40} />
+            <AppMark app="vibot" variant="tile-light" size={40} />
+          </View>
+        </Section>
+
+        <Section title="Button">
+          {/* The web gallery: a full-width column of variants, then the sm row. */}
+          <View className="gap-2">
+            {BUTTON_VARIANTS.map((variant) => (
+              <Button key={variant} variant={variant} onPress={() => toast(variant)}>
+                {variant}
+              </Button>
+            ))}
+            <View className="flex-row gap-2">
+              <Button size="sm" fullWidth={false} loading>
+                Saving
+              </Button>
+              <Button size="sm" fullWidth={false} disabled>
+                Disabled
+              </Button>
+            </View>
+          </View>
+          <View className="flex-row flex-wrap items-center gap-2">
+            <Button size="sm" fullWidth={false}>
+              Small
+            </Button>
+            <Button fullWidth={false}>Default</Button>
+            <Button size="lg" fullWidth={false}>
+              Large
+            </Button>
+          </View>
+        </Section>
+
+        <Section title="Badge">
+          <View className="flex-row flex-wrap gap-2">
+            {BADGE_VARIANTS.map((variant) => (
+              <Badge key={variant} variant={variant}>
+                {variant}
+              </Badge>
+            ))}
+          </View>
+        </Section>
+
+        <Section title="StatusDot">
+          <View className="flex-row flex-wrap items-center gap-3">
+            {STATUS_TONES.map((tone) => (
+              <StatusDot key={tone} tone={tone} size="md" />
+            ))}
+          </View>
+        </Section>
+
+        <Section title="Fields">
+          <View className="gap-2">
+            <Label nativeID="gallery-name">Name</Label>
+            <Input placeholder="Your name" accessibilityLabel="Name" />
+          </View>
+          {/* Empty (`sm`: icon and placeholder) and filled (`md`: the clear button). */}
+          <SearchInput value={emptySearch} onChange={setEmptySearch} />
+          <SearchInput value={search} onChange={setSearch} size="md" label="Search colours" />
+          <Textarea placeholder="Notes" accessibilityLabel="Notes" />
+          <Select
+            value={colour}
+            onValueChange={setColour}
+            placeholder="Pick a colour"
+            options={[
+              { label: "Pink", value: "pink" },
+              { label: "None", value: null },
+            ]}
+          />
+          <View className="flex-row items-center gap-3">
+            <Checkbox
+              checked={checked}
+              onCheckedChange={setChecked}
+              accessibilityLabel="Remember me"
+            />
+            <Label nativeID="gallery-remember">Remember me</Label>
+            <Switch checked={switchOn} onCheckedChange={setSwitchOn} />
+          </View>
+          <LabeledSwitchRow
+            label="Reminders"
+            description="A daily nudge at 9:00."
+            checked={switchOn}
+            onCheckedChange={setSwitchOn}
+          />
+        </Section>
+
+        <Section title="Tabs">
+          <Tabs defaultValue="one">
+            <TabsList variant="segmented">
+              <TabsTrigger value="one">One</TabsTrigger>
+              <TabsTrigger value="two">Two</TabsTrigger>
+              <TabsTrigger value="three" disabled>
+                Three
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent value="one">
+              <GalleryText>First panel</GalleryText>
+            </TabsContent>
+            <TabsContent value="two">
+              <GalleryText>Second panel</GalleryText>
+            </TabsContent>
+          </Tabs>
+        </Section>
+
+        <Section title="Avatar, Progress, Spinner, Skeleton">
+          <View className="flex-row items-center gap-3">
+            <Avatar>
+              <AvatarFallback>{initials("Ada Lovelace")}</AvatarFallback>
+            </Avatar>
+            <Avatar size={56}>
+              <AvatarFallback>{initials("vibot")}</AvatarFallback>
+            </Avatar>
+            <Spinner />
+            <Spinner size="lg" />
+          </View>
+          <Progress value={progress} />
+          <Button
+            variant="secondary"
+            size="sm"
+            onPress={() => setProgress((value) => (value + 20) % 120)}
+          >
+            Step progress
+          </Button>
+          <Skeleton className="h-4 w-32" />
+          <Separator />
+          <View className="h-24">
+            <CenteredSpinner label="Loading list" />
+          </View>
+        </Section>
+
+        <Section title="Card">
+          <Card title="Today" description="Card props, as before.">
+            <GalleryText>Body</GalleryText>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Composed</CardTitle>
+              <CardDescription>Web part names inside the native card.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <GalleryText>Content</GalleryText>
+            </CardContent>
+            <CardFooter>
+              <Button size="sm" fullWidth={false} variant="secondary">
+                Later
+              </Button>
+              <Button size="sm" fullWidth={false}>
+                Save
+              </Button>
+            </CardFooter>
+          </Card>
+        </Section>
+
+        <Section title="Upgrade">
+          <UpgradeToProCard onUpgrade={() => setPricingOpen(true)} />
+          <UpgradeToProCard collapsed onUpgrade={() => setPricingOpen(true)} />
+        </Section>
+
+        <Section title="Overlays and toast">
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="secondary">Open dialog</Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Rename list</DialogTitle>
+                <DialogDescription>Pick a short name.</DialogDescription>
+              </DialogHeader>
+              <DialogBody>
+                <Input placeholder="Name" accessibilityLabel="List name" />
+              </DialogBody>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button variant="secondary" shadowType="flat" fullWidth={false}>
+                    Cancel
+                  </Button>
+                </DialogClose>
+                <DialogClose asChild>
+                  <Button
+                    shadowType="flat"
+                    fullWidth={false}
+                    onPress={() => toast.success("Renamed")}
+                  >
+                    Save
+                  </Button>
+                </DialogClose>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="secondary">Open alert dialog</Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Delete this list?</AlertDialogTitle>
+                <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction variant="destructive" onPress={() => toast.error("Deleted")}>
+                  Delete
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+
+          <Button variant="secondary" onPress={() => setConfirmOpen(true)}>
+            Open confirm dialog
+          </Button>
+          <ConfirmDialog
+            open={confirmOpen}
+            onOpenChange={setConfirmOpen}
+            title="Sign out?"
+            description="You can sign back in at any time."
+            confirmLabel="Sign out"
+            variant="destructive"
+            onConfirm={() => toast.success("Signed out")}
+          />
+
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button variant="secondary">Open sheet</Button>
+            </SheetTrigger>
+            <SheetContent>
+              <SheetHeader>
+                <SheetTitle>Filters</SheetTitle>
+                <SheetDescription>Narrow the list.</SheetDescription>
+              </SheetHeader>
+              <LabeledSwitchRow
+                label="Done items"
+                checked={switchOn}
+                onCheckedChange={setSwitchOn}
+              />
+              <SheetFooter>
+                <Button shadowType="flat">Apply</Button>
+              </SheetFooter>
+            </SheetContent>
+          </Sheet>
+
+          <View className="flex-row flex-wrap gap-2">
+            <Button size="sm" fullWidth={false} onPress={() => toast.success("Saved")}>
+              Success
+            </Button>
+            <Button size="sm" fullWidth={false} onPress={() => toast.warning("Offline")}>
+              Warning
+            </Button>
+            <Button
+              size="sm"
+              fullWidth={false}
+              onPress={() => {
+                const id = toast.loading("Syncing");
+                setTimeout(() => toast.success("Synced", { id }), 1500);
+              }}
+            >
+              Loading
+            </Button>
+            <Button
+              size="sm"
+              fullWidth={false}
+              onPress={() =>
+                toast("Archived", {
+                  description: "Moved to the archive.",
+                  action: { label: "Undo", onPress: () => toast.info("Restored") },
+                })
+              }
+            >
+              Action
+            </Button>
+          </View>
+        </Section>
+
+        <Section title="EmptyState">
+          <EmptyState title="Nothing yet" description="Items you add show here." compact />
+          <EmptyState.Root variant="panel">
+            <EmptyState.Icon icon={IconInbox} />
+            <EmptyState.Title>No messages</EmptyState.Title>
+            <EmptyState.Description>New messages land here.</EmptyState.Description>
+          </EmptyState.Root>
+        </Section>
+      </ScrollView>
+
+      <PricingModal
+        open={pricingOpen}
+        onClose={() => setPricingOpen(false)}
+        title="Upgrade to V Pro"
+        apps={["vibot", "verve", "velth", "vmem", "vhub"]}
+        currentApp="vibot"
+        headline="One plan. Every V app."
+        plans={PLANS}
+        finePrint="Placeholder prices for the gallery."
+        onCheckout={(plan, period) => toast(`${plan.name} (${period})`)}
+      />
+      <Toaster />
+    </View>
+  );
+}

package/src/floating.ts

@@ -5,7 +5,11 @@ export const FLOATING_INSET = tokens.spacing.unit;
 export const FLOATING_TAB_BAR_HEIGHT = 64;
 export const FLOATING_TAB_BAR_HEIGHT_LARGE = 72;
 export const FLOATING_RADIUS = tokens.radius.card;
-export const FLOATING_ROW_RADIUS = tokens.radius.field;
+/**
+ * List rows: 20, the field radius before 0.3.3 (web fields are 10). Toasts
+ * used it until 0.3.12 and the upgrade card until 0.3.8; both are 16 now.
+ */
+export const FLOATING_ROW_RADIUS = 20;
 export const FLOATING_PILL_RADIUS = tokens.radius.pill;
 
 const FLOATING_BOX_SHADOW = "0px 8px 24px rgba(10, 10, 10, 0.12)";

package/src/glassBlur.tsx

@@ -0,0 +1,95 @@
+import {
+  createContext,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type Dispatch,
+  type ReactNode,
+  type RefObject,
+  type SetStateAction,
+} from "react";
+import { StyleSheet, View, type ViewProps } from "react-native";
+import { loadBlur } from "./blur";
+
+type BlurTargetRef = RefObject<ComponentRef<typeof View> | null>;
+
+type GlassBlurContextValue = {
+  target: BlurTargetRef | null;
+  setTarget: Dispatch<SetStateAction<BlurTargetRef | null>> | null;
+};
+
+const NO_TARGET: GlassBlurContextValue = { target: null, setTarget: null };
+
+const GlassBlurContext = createContext<GlassBlurContextValue>(NO_TARGET);
+
+/**
+ * The mounted `GlassBlurTarget` that floating glass blurs on Android, or
+ * `null` outside a `GlassBlurProvider` and inside the target itself.
+ */
+export function useGlassBlurTarget() {
+  return useContext(GlassBlurContext).target;
+}
+
+export function GlassBlurProvider({ children }: { children: ReactNode }) {
+  const [target, setTarget] = useState<BlurTargetRef | null>(null);
+  const value = useMemo(() => ({ target, setTarget }), [target]);
+
+  return (
+    <GlassBlurContext.Provider value={value}>{children}</GlassBlurContext.Provider>
+  );
+}
+
+export type GlassBlurTargetProps = ViewProps & {
+  /** Set `false` while the content is hidden, such as an unfocused tab. */
+  active?: boolean;
+};
+
+/**
+ * Content that floating glass blurs on Android (an expo-blur
+ * `BlurTargetView`). Render the floating chrome outside it, inside the same
+ * `GlassBlurProvider`: a blur view must not sit inside its own target, so
+ * surfaces in here get no target. The last active target wins.
+ */
+export function GlassBlurTarget({
+  active = true,
+  style,
+  children,
+  ...props
+}: GlassBlurTargetProps) {
+  const { setTarget } = useContext(GlassBlurContext);
+  const ref = useRef<ComponentRef<typeof View>>(null);
+  const BlurTargetView = loadBlur()?.BlurTargetView;
+
+  // Publish the ref only once it is attached: expo-blur compares
+  // `blurTarget.current` between renders to pick up a new target.
+  useLayoutEffect(() => {
+    if (!setTarget || !active) {
+      return;
+    }
+    setTarget(ref);
+    return () => setTarget((current) => (current === ref ? null : current));
+  }, [setTarget, active]);
+
+  const content = (
+    <GlassBlurContext.Provider value={NO_TARGET}>{children}</GlassBlurContext.Provider>
+  );
+
+  return BlurTargetView ? (
+    <BlurTargetView ref={ref} style={[styles.fill, style]} {...props}>
+      {content}
+    </BlurTargetView>
+  ) : (
+    <View ref={ref} style={[styles.fill, style]} {...props}>
+      {content}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+});

package/src/gradient.ts

@@ -0,0 +1,21 @@
+import type * as ExpoLinearGradient from "expo-linear-gradient";
+
+export type ExpoLinearGradientModule = typeof ExpoLinearGradient;
+
+let expoLinearGradient: ExpoLinearGradientModule | null | undefined;
+
+/**
+ * `expo-linear-gradient`, 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 loadLinearGradient(): ExpoLinearGradientModule | null {
+  if (expoLinearGradient === undefined) {
+    try {
+      expoLinearGradient = require("expo-linear-gradient") as ExpoLinearGradientModule;
+    } catch {
+      expoLinearGradient = null;
+    }
+  }
+  return expoLinearGradient;
+}

package/src/haptics.ts

@@ -1,9 +1,29 @@
 import { Platform } from "react-native";
-import * as Haptics from "expo-haptics";
+import type * as ExpoHaptics from "expo-haptics";
+
+export type ExpoHapticsModule = typeof ExpoHaptics;
+
+let expoHaptics: ExpoHapticsModule | null | undefined;
+
+/**
+ * `expo-haptics`, 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 loadHaptics(): ExpoHapticsModule | null {
+  if (expoHaptics === undefined) {
+    try {
+      expoHaptics = require("expo-haptics") as ExpoHapticsModule;
+    } catch {
+      expoHaptics = null;
+    }
+  }
+  return expoHaptics;
+}
 
 export function selectionHaptic() {
   if (Platform.OS === "web") {
     return;
   }
-  void Haptics.selectionAsync();
+  void loadHaptics()?.selectionAsync();
 }