@vvedantb/native-ui 0.2.1 → 0.3.13

package/src/index.ts

@@ -8,6 +8,9 @@ export {
   DEFAULT_ACCENT,
 } from "./theme";
 export type { NativeUiTheme } from "./theme";
+export { palette, withAlpha } from "./palette";
+export type { Palette } from "./palette";
+export { fontClass } from "./typography";
 export {
   FLOATING_INSET,
   FLOATING_TAB_BAR_HEIGHT,
@@ -29,30 +32,126 @@ export {
   GlassBlurProvider,
   GlassBlurTarget,
 } from "./LiquidGlass";
+export type { GlassBlurTargetProps } from "./LiquidGlass";
 export { AmbientBackground } from "./AmbientBackground";
 export { FloatingTabBar } from "./FloatingTabBar";
+export type { FloatingTabBarProps } from "./FloatingTabBar";
 export { FloatingFAB } from "./FloatingFAB";
 export { Button } from "./Button";
-export type { ButtonProps } 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 } from "./Card";
+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";
 export { DateTimeField } from "./DateTimeField";
 export { BottomSheetContainer } from "./BottomSheetContainer";
 export { SafeAreaContainer } from "./SafeAreaContainer";
 export { ScreenContainer } from "./ScreenContainer";
+export { PageTitle, PageHeader } from "./PageTitle";
+export type { PageTitleProps, PageHeaderProps } from "./PageTitle";
 export { SettingsSection } from "./settings/SettingsSection";
 export { SettingsField } from "./settings/SettingsField";
 export { SettingsToggleRow } from "./settings/SettingsToggleRow";
 export { SettingsStack } from "./settings/SettingsStack";
 export { PINK_50, PINK_100, PINK_600, PINK_700, NEUTRAL_100, NEUTRAL_500, NEUTRAL_900, Colors } from "./colors";
+// Family app marks and their pure data (copied from `@vvedantb/ui/brand`).
+export * from "./brand";
+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/initials.ts

@@ -0,0 +1,10 @@
+/** Up to `max` uppercase initials from a name: "Ada Lovelace" → "AL", "  cher " → "C". Empty for a blank name. */
+export function initials(name: string, max = 2): string {
+  return name
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, max)
+    .map((word) => Array.from(word)[0]!.toUpperCase())
+    .join("");
+}

package/src/marketing/PricingModal.tsx

@@ -0,0 +1,410 @@
+import type { ReactElement, ReactNode } from "react";
+import {
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconCheck, IconX } from "@tabler/icons-react-native";
+import { APP_ICONS, IconProjectV } from "../brand/AppIcons";
+import type { ProductAppName } from "../brand/AppWordmark";
+import { familyApp } from "../brand/familyApps";
+import type { AppName } from "../brand/svg";
+import { Button } from "../Button";
+import { cn } from "../cn";
+import { typeStyle } from "../controlStyles";
+import { palette, withAlpha } from "../palette";
+import { tokens } from "../tokens";
+import { useLargerText } from "../theme";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { useControllableState } from "../primitives/use-controllable-state";
+import {
+  isEmphasised,
+  planAppBenefits,
+  planButton,
+  sortAppBenefits,
+  type PricingModalPeriod,
+  type PricingPlan,
+} from "./pricing";
+
+export type PricingModalProps = {
+  open: boolean;
+  /** Called by the close button and Android back (and an iOS swipe-down). */
+  onClose: () => void;
+  /** Accessible title, read first. Not visible. */
+  title: string;
+  /** Accessible description. Not visible. */
+  description?: string;
+  /** Cards, top to bottom. */
+  plans: readonly PricingPlan[];
+  /** App marks at the top left. */
+  apps?: readonly AppName[];
+  /** App the modal is shown in. Its `appBenefits` group comes first. */
+  currentApp?: ProductAppName;
+  /** Centred headline, for example "One plan. Every V app." */
+  headline?: ReactNode;
+  /** Small print under the cards. */
+  finePrint?: ReactNode;
+  billingPeriod?: PricingModalPeriod;
+  onBillingPeriodChange?: (period: PricingModalPeriod) => void;
+  /** Default `"month"`. */
+  defaultBillingPeriod?: PricingModalPeriod;
+  /** Called by a plan's button. Not called for the `current` plan. Route it to the store's purchase flow. */
+  onCheckout?: (plan: PricingPlan, period: PricingModalPeriod) => void;
+  /** Wraps each plan's button (the web `renderCheckout`). The button already calls `onCheckout`. Not called for the `current` plan. */
+  renderCheckout?: (
+    button: ReactElement,
+    plan: PricingPlan,
+    period: PricingModalPeriod,
+  ) => ReactNode;
+  /** Called when an app mark is pressed. Without it the marks are not pressable. */
+  onAppPress?: (app: AppName, url: string) => void;
+  testID?: string;
+};
+
+/**
+ * Upgrade sheet, the native counterpart of the web `PricingModal` multi-plan
+ * layout: a page sheet on iOS (full screen on Android) with a Monthly / Annual
+ * switch and stacked plan cards. The web single-plan layout (logo URLs and a
+ * Michroma wordmark) is not ported: pass one plan instead.
+ */
+export function PricingModal({
+  open,
+  onClose,
+  title,
+  description,
+  plans,
+  apps,
+  currentApp,
+  headline,
+  finePrint,
+  billingPeriod,
+  onBillingPeriodChange,
+  defaultBillingPeriod = "month",
+  onCheckout,
+  renderCheckout,
+  onAppPress,
+  testID,
+}: PricingModalProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const insets = useSafeAreaInsets();
+  const reduceMotion = useReduceMotion();
+  const [period, setPeriod] = useControllableState({
+    value: billingPeriod,
+    defaultValue: defaultBillingPeriod,
+    onChange: onBillingPeriodChange,
+  });
+  const fg = tokens.color.foreground[scheme];
+  const muted = tokens.color.muted[scheme];
+
+  return (
+    <Modal
+      visible={open}
+      animationType={reduceMotion ? "none" : "slide"}
+      presentationStyle="pageSheet"
+      onRequestClose={onClose}
+      testID={testID}
+    >
+      <View
+        className="flex-1"
+        style={{
+          backgroundColor: tokens.color.background[scheme],
+          paddingBottom: insets.bottom,
+        }}
+      >
+        {/* The web `sr-only` DialogTitle: a visually hidden header. */}
+        <View
+          accessible
+          accessibilityRole="header"
+          accessibilityLabel={title}
+          accessibilityHint={description}
+          style={styles.srOnly}
+        />
+        <View className="flex-row items-center justify-between gap-3 px-4 pb-3 pt-4">
+          <View className="flex-row items-center gap-3">
+            {apps?.map((app) => {
+              const Icon = APP_ICONS[app];
+              const { name, url } = familyApp(app);
+              return onAppPress ? (
+                <Pressable
+                  key={app}
+                  accessibilityRole="link"
+                  accessibilityLabel={name}
+                  hitSlop={8}
+                  onPress={() => onAppPress(app, url)}
+                  className="active:opacity-70"
+                >
+                  <Icon size={22} color={fg} />
+                </Pressable>
+              ) : (
+                <Icon key={app} size={22} color={fg} title={name} />
+              );
+            })}
+          </View>
+          <View className="flex-row items-center gap-2">
+            <View
+              accessibilityLabel="Billing period"
+              className="flex-row rounded-full p-0.5"
+              style={{ backgroundColor: palette.surfaceTertiary[scheme] }}
+            >
+              {(["month", "year"] as const).map((value) => {
+                const selected = period === value;
+                return (
+                  <Pressable
+                    key={value}
+                    testID={testID ? `${testID}-period-${value}` : undefined}
+                    accessibilityRole="button"
+                    accessibilityState={{ selected }}
+                    hitSlop={6}
+                    onPress={() => setPeriod(value)}
+                    className="rounded-full px-3 py-1.5"
+                    style={selected ? { backgroundColor: palette.segment[scheme] } : null}
+                  >
+                    <Text
+                      className={cn(
+                        "font-instrument-sans-medium",
+                        largerText ? "text-base" : "text-sm",
+                      )}
+                      style={[
+                        { color: selected ? palette.segmentForeground[scheme] : muted },
+                        typeStyle("medium"),
+                      ]}
+                    >
+                      {value === "month" ? "Monthly" : "Annual"}
+                    </Text>
+                  </Pressable>
+                );
+              })}
+            </View>
+            <Pressable
+              testID={testID ? `${testID}-close` : undefined}
+              accessibilityRole="button"
+              accessibilityLabel="Close"
+              hitSlop={8}
+              onPress={onClose}
+              className="h-10 w-10 items-center justify-center rounded-full active:opacity-70"
+            >
+              <IconX size={22} color={muted} />
+            </Pressable>
+          </View>
+        </View>
+
+        <ScrollView
+          className="flex-1"
+          contentContainerClassName="gap-3 px-4 pb-6"
+          showsVerticalScrollIndicator={false}
+        >
+          {headline ? (
+            <Text
+              className={cn(
+                "pb-2 text-center font-instrument-sans-medium",
+                largerText ? "text-3xl" : "text-2xl",
+              )}
+              style={[{ color: fg }, typeStyle("medium")]}
+            >
+              {headline}
+            </Text>
+          ) : null}
+
+          {plans.map((plan) => (
+            <PlanCard
+              key={plan.id}
+              plan={plan}
+              period={period}
+              currentApp={currentApp}
+              onCheckout={onCheckout}
+              renderCheckout={renderCheckout}
+            />
+          ))}
+
+          {finePrint ? (
+            <Text className="px-1 pt-1 font-instrument-sans text-sm" style={{ color: muted }}>
+              {finePrint}
+            </Text>
+          ) : null}
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+}
+
+function PlanCard({
+  plan,
+  period,
+  currentApp,
+  onCheckout,
+  renderCheckout,
+}: {
+  plan: PricingPlan;
+  period: PricingModalPeriod;
+  currentApp?: ProductAppName;
+  onCheckout: PricingModalProps["onCheckout"];
+  renderCheckout: PricingModalProps["renderCheckout"];
+}) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const fg = tokens.color.foreground[scheme];
+  const muted = tokens.color.muted[scheme];
+  const separator = tokens.color.separator[scheme];
+  const emphasised = isEmphasised(plan);
+  const appBenefits = planAppBenefits(plan);
+  const cta = planButton(plan);
+  const bodyText = largerText ? "text-lg" : "text-base";
+
+  const button = (
+    <Button
+      variant={cta.variant}
+      disabled={cta.disabled}
+      shadowType="flat"
+      onPress={() => onCheckout?.(plan, period)}
+    >
+      {cta.label}
+    </Button>
+  );
+
+  return (
+    <View
+      className="p-5"
+      style={{
+        borderRadius: tokens.radius.card,
+        borderWidth: 1,
+        borderColor: emphasised ? withAlpha(fg, 0.25) : separator,
+        backgroundColor: tokens.color.surfaceSecondary[scheme],
+      }}
+    >
+      <View className="flex-row items-center gap-2">
+        {emphasised ? <IconProjectV size={16} color={fg} /> : null}
+        <Text
+          accessibilityRole="header"
+          className={cn("font-instrument-sans-medium", bodyText)}
+          style={[{ color: fg }, typeStyle("medium")]}
+        >
+          {plan.name}
+        </Text>
+      </View>
+
+      <View className="mt-4 flex-row items-baseline gap-1">
+        <Text
+          className="font-instrument-sans-medium"
+          style={[
+            {
+              color: fg,
+              fontSize: 48,
+              lineHeight: 52,
+              letterSpacing: -0.5,
+              fontVariant: ["tabular-nums"],
+            },
+            typeStyle("medium"),
+          ]}
+        >
+          {plan.price[period]}
+        </Text>
+        <Text className={cn("font-instrument-sans", bodyText)} style={{ color: muted }}>
+          {plan.periodSuffix ?? "/month"}
+        </Text>
+      </View>
+
+      <View className="mt-5">
+        {plan.current || !renderCheckout ? button : renderCheckout(button, plan, period)}
+      </View>
+
+      {plan.intro ? (
+        <Text className={cn("mt-6 font-instrument-sans", bodyText)} style={{ color: muted }}>
+          {plan.intro}
+        </Text>
+      ) : null}
+
+      {plan.highlight ? (
+        <View className="mt-3">
+          <Text
+            className="font-instrument-sans-medium text-2xl"
+            style={[{ color: fg }, typeStyle("medium")]}
+          >
+            {plan.highlight.title}
+          </Text>
+          <Text className={cn("font-instrument-sans", bodyText)} style={{ color: fg }}>
+            {plan.highlight.description}
+          </Text>
+        </View>
+      ) : null}
+
+      {plan.benefits?.length ? (
+        <View
+          className="mt-5 gap-2.5 pt-4"
+          style={{ borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: separator }}
+        >
+          {plan.benefits.map((benefit, index) => {
+            const BenefitIcon =
+              benefit.icon && benefit.icon !== "check" ? APP_ICONS[benefit.icon] : null;
+            return (
+              <View key={index} className="flex-row items-start gap-2.5">
+                <View className="mt-1 h-4 w-5 items-center justify-center">
+                  {BenefitIcon ? (
+                    <BenefitIcon size={14} color={benefit.muted ? muted : fg} />
+                  ) : (
+                    <IconCheck size={16} strokeWidth={2} color={benefit.muted ? muted : fg} />
+                  )}
+                </View>
+                <Text
+                  className={cn("min-w-0 flex-1 font-instrument-sans", bodyText)}
+                  style={{ color: benefit.muted ? muted : fg }}
+                >
+                  {benefit.label}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+      ) : null}
+
+      {appBenefits?.length ? (
+        <View
+          className="mt-4 gap-3 pt-3"
+          style={{ borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: separator }}
+        >
+          {sortAppBenefits(appBenefits, currentApp).map((group) => {
+            const GroupIcon = APP_ICONS[group.app];
+            return (
+              <View key={group.app}>
+                <View className="flex-row items-center gap-2">
+                  <GroupIcon size={14} color={fg} />
+                  <Text
+                    className="font-instrument-sans-medium text-sm"
+                    style={[{ color: fg }, typeStyle("medium")]}
+                  >
+                    {familyApp(group.app).name}
+                  </Text>
+                </View>
+                <View className="mt-1 gap-0.5 pl-[22px]">
+                  {group.items.map((item, index) => (
+                    <Text
+                      key={index}
+                      className={cn("font-instrument-sans", bodyText)}
+                      style={{ color: fg }}
+                    >
+                      {item}
+                    </Text>
+                  ))}
+                </View>
+              </View>
+            );
+          })}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  srOnly: {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    opacity: 0,
+  },
+});

package/src/marketing/UpgradeToProCard.tsx

@@ -0,0 +1,103 @@
+import { Pressable, Text, View } from "react-native";
+import { cn } from "../cn";
+import { sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { tokens } from "../tokens";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+
+/** Web `rounded-2xl` (16) on the card. */
+const RADIUS = tokens.radius.lg;
+
+// The web `Button` `sm` (`h-8 px-3 text-xs`) uses `max-sm:hit-target`, 8 on
+// each side: 32 + 16 = 48, as the native `Button` `small`.
+const HIT_SLOP = 8;
+
+export type UpgradeToProCardProps = {
+  /** Opens the app's `PricingModal`. */
+  onUpgrade: () => void;
+  /**
+   * A "Pro" pill (labelled with `title`) instead of the full card. Like the
+   * web `Button` it stretches across a column and fits its label in a row.
+   * Default `false`.
+   */
+  collapsed?: boolean;
+  /** Default "Upgrade to Pro". */
+  title?: string;
+  /** Default "Upgrade". */
+  ctaLabel?: string;
+  className?: string;
+  testID?: string;
+};
+
+/**
+ * Upgrade prompt, the native `SidebarUpgradeCard`: the title and an "Upgrade"
+ * pill on a secondary surface, with no mark. It does not check the plan; the
+ * app hides it when the user is already on Pro.
+ */
+export function UpgradeToProCard({
+  onUpgrade,
+  collapsed = false,
+  title = "Upgrade to Pro",
+  ctaLabel = "Upgrade",
+  className,
+  testID,
+}: UpgradeToProCardProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  // Each class is also set as a style (`sizeStyle`): web `text-sm` is 14 / 20.
+  const titleSize = largerText ? "text-lg" : "text-sm";
+  const ctaSize = largerText ? "text-base" : "text-xs";
+  // The web pill is a `Button` `sm` (`font-medium`) in `bg-foreground text-background`.
+  const pill = (label: string, accessibilityLabel?: string) => (
+    <Pressable
+      testID={testID ? `${testID}-cta` : undefined}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      onPress={onUpgrade}
+      hitSlop={HIT_SLOP}
+      className={cn(
+        "shrink-0 items-center justify-center rounded-full active:opacity-80",
+        largerText ? "min-h-12 px-4" : "min-h-8 px-3",
+      )}
+      style={{ backgroundColor: tokens.color.foreground[scheme] }}
+    >
+      <Text
+        className={cn("font-instrument-sans-medium", ctaSize)}
+        style={[
+          { color: tokens.color.background[scheme] },
+          sizeStyle(ctaSize),
+          typeStyle("medium"),
+        ]}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+
+  if (collapsed) {
+    return (
+      <View testID={testID} className={className}>
+        {pill("Pro", title)}
+      </View>
+    );
+  }
+  return (
+    <View
+      testID={testID}
+      className={cn(
+        "flex-row items-center justify-between gap-3 bg-surface-secondary px-3 py-2.5",
+        className,
+      )}
+      style={{ borderRadius: RADIUS }}
+    >
+      <Text
+        numberOfLines={1}
+        className={cn("min-w-0 flex-1 font-instrument-sans-semibold", titleSize)}
+        style={[textStyle("foreground", scheme), sizeStyle(titleSize), typeStyle("semibold")]}
+      >
+        {title}
+      </Text>
+      {pill(ctaLabel)}
+    </View>
+  );
+}