@vvedantb/native-ui 0.2.1 → 0.3.12

package/src/entries/date-time.ts

@@ -0,0 +1,3 @@
+// `@vvedantb/native-ui/date-time`. Imports
+// `@react-native-community/datetimepicker` and `dayjs`.
+export { DateTimeField } from "../DateTimeField";

package/src/entries/floating.ts

@@ -0,0 +1,24 @@
+// `@vvedantb/native-ui/floating`: floating surfaces, glass blur targets and
+// metrics. Reaches `expo-blur` only through its optional-peer loader.
+export {
+  FLOATING_INSET,
+  FLOATING_TAB_BAR_HEIGHT,
+  FLOATING_TAB_BAR_HEIGHT_LARGE,
+  FLOATING_RADIUS,
+  FLOATING_ROW_RADIUS,
+  FLOATING_PILL_RADIUS,
+  floatingShadow,
+  floatingHairline,
+  floatingFill,
+  floatingSolidFill,
+  tabBarReserve,
+} from "../floating";
+export { useReduceTransparency } from "../useReduceTransparency";
+export { FloatingSurface, GlassSheetBackground } from "../FloatingSurface";
+export {
+  LiquidGlass,
+  GlassBlurProvider,
+  GlassBlurTarget,
+} from "../LiquidGlass";
+export type { GlassBlurTargetProps } from "../LiquidGlass";
+export { FloatingFAB } from "../FloatingFAB";

package/src/entries/layout.ts

@@ -0,0 +1,7 @@
+// `@vvedantb/native-ui/layout`: screen containers and settings chrome.
+export { SafeAreaContainer } from "../SafeAreaContainer";
+export { ScreenContainer } from "../ScreenContainer";
+export { SettingsSection } from "../settings/SettingsSection";
+export { SettingsField } from "../settings/SettingsField";
+export { SettingsToggleRow } from "../settings/SettingsToggleRow";
+export { SettingsStack } from "../settings/SettingsStack";

package/src/entries/marketing.ts

@@ -0,0 +1,10 @@
+// `@vvedantb/native-ui/marketing`: the upgrade card and pricing modal.
+export { UpgradeToProCard } from "../marketing/UpgradeToProCard";
+export type { UpgradeToProCardProps } from "../marketing/UpgradeToProCard";
+export { PricingModal } from "../marketing/PricingModal";
+export type { PricingModalProps } from "../marketing/PricingModal";
+export type {
+  PricingModalPeriod,
+  PricingPlan,
+  PricingPlanBenefit,
+} from "../marketing/pricing";

package/src/entries/primitives.ts

@@ -0,0 +1,99 @@
+// `@vvedantb/native-ui/primitives`: fields, display, tabs, overlays and
+// toasts. `BottomSheetContainer`, `DateTimeField` and `AmbientBackground` are
+// not here; they have their own entries.
+export { Button } from "../Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "../Button";
+export { Input } from "../Input";
+export type { InputProps } from "../Input";
+export { SearchInput } from "../SearchInput";
+export type { SearchInputProps } from "../SearchInput";
+export { Textarea } from "../Textarea";
+export type { TextareaProps } from "../Textarea";
+export { Label } from "../Label";
+export type { LabelProps } from "../Label";
+export { Select } from "../Select";
+export type { SelectOption, SelectProps } from "../Select";
+export { Switch } from "../Switch";
+export type { SwitchProps } from "../Switch";
+export { LabeledSwitchRow } from "../LabeledSwitchRow";
+export type { LabeledSwitchRowProps } from "../LabeledSwitchRow";
+export { Checkbox } from "../Checkbox";
+export type { CheckboxProps } from "../Checkbox";
+export { Badge } from "../Badge";
+export type { BadgeProps, BadgeVariant } from "../Badge";
+export { StatusDot } from "../StatusDot";
+export type { StatusDotProps, StatusTone } from "../StatusDot";
+export { Separator } from "../Separator";
+export type { SeparatorProps } from "../Separator";
+export { Progress } from "../Progress";
+export type { ProgressProps } from "../Progress";
+export { Spinner, CenteredSpinner } from "../Spinner";
+export type { SpinnerProps } from "../Spinner";
+export { Avatar, AvatarImage, AvatarFallback } from "../Avatar";
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from "../Avatar";
+export { initials } from "../initials";
+export { Chip } from "../Chip";
+export { PillTabs } from "../PillTabs";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "../Tabs";
+export type {
+  TabsProps,
+  TabsListProps,
+  TabsListVariant,
+  TabsTriggerProps,
+  TabsContentProps,
+} from "../Tabs";
+export { ListRow } from "../ListRow";
+export { HeaderIconButton } from "../HeaderIconButton";
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "../Card";
+export { Skeleton, CardSkeleton } from "../Skeleton";
+export { EmptyState } from "../EmptyState";
+export type { EmptyStateVariant } from "../EmptyState";
+export {
+  Dialog,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogFooter,
+} from "../Dialog";
+export type { DialogProps, DialogContentProps } from "../Dialog";
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "../AlertDialog";
+export type { AlertDialogProps, AlertDialogContentProps } from "../AlertDialog";
+export { ConfirmDialog } from "../ConfirmDialog";
+export type { ConfirmDialogProps } from "../ConfirmDialog";
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHandle,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetBody,
+  SheetFooter,
+} from "../Sheet";
+export type { SheetProps, SheetContentProps } from "../Sheet";
+export { Toaster } from "../Toast";
+export { toast } from "../toastStore";
+export type { ToastOptions, ToastVariant } from "../toastStore";

package/src/entries/search-input.ts

@@ -0,0 +1,4 @@
+// `@vvedantb/native-ui/search-input`: `SearchInput` on its own. Reaches no
+// optional peer, not even a loader.
+export { SearchInput } from "../SearchInput";
+export type { SearchInputProps } from "../SearchInput";

package/src/entries/tab-bar.ts

@@ -0,0 +1,10 @@
+// `@vvedantb/native-ui/tab-bar`. Does not import `expo-router`; reaches
+// `expo-blur` and `expo-haptics` only through their optional-peer loaders.
+export { FloatingTabBar } from "../FloatingTabBar";
+export type { FloatingTabBarProps } from "../FloatingTabBar";
+export {
+  FLOATING_INSET,
+  FLOATING_TAB_BAR_HEIGHT,
+  FLOATING_TAB_BAR_HEIGHT_LARGE,
+  tabBarReserve,
+} from "../floating";

package/src/entries/theme.ts

@@ -0,0 +1,15 @@
+// `@vvedantb/native-ui/theme`: the provider, tokens and colour helpers.
+export { cn } from "../cn";
+export {
+  tokens,
+  NativeUiProvider,
+  useNativeUi,
+  useLargerText,
+  useAccentColor,
+  DEFAULT_ACCENT,
+} from "../theme";
+export type { NativeUiTheme } from "../theme";
+export { palette, withAlpha } from "../palette";
+export type { Palette } from "../palette";
+export { fontClass } from "../typography";
+export { PINK_50, PINK_100, PINK_600, PINK_700, NEUTRAL_100, NEUTRAL_500, NEUTRAL_900, Colors } from "../colors";

package/src/entries/toast.ts

@@ -0,0 +1,6 @@
+// `@vvedantb/native-ui/toast`: `toast()` and `<Toaster />`. Reaches no heavy
+// optional peer, not even a loader (the toast surface is flat from 0.3.12): no
+// `expo-blur`, bottom sheet, date picker, `dayjs` or `expo-router`.
+export { Toaster } from "../Toast";
+export { toast } from "../toastStore";
+export type { ToastOptions, ToastVariant } from "../toastStore";

package/src/examples/ParityGallery.tsx

@@ -0,0 +1,496 @@
+// 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,
+  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="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>
+  );
+}