@ramonclaudio/create-vexpo 0.1.0

package/dist/templates/default/components/ui/prominent-button.tsx

@@ -0,0 +1,71 @@
+import { Button, Text } from "@expo/ui/swift-ui";
+import {
+  background,
+  buttonStyle,
+  clipShape,
+  disabled as disabledModifier,
+  foregroundStyle,
+  frame,
+  multilineTextAlignment,
+} from "@expo/ui/swift-ui/modifiers";
+
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { Button as ButtonTokens } from "@/constants/layout";
+import { useColors } from "@/hooks/use-theme";
+
+// Full-width prominent action button. Capsule shape, shadcn `primary` fill,
+// `primaryForeground` Geist bold label.
+//
+// Why this isn't `buttonStyle("borderedProminent")`:
+// SwiftUI's borderedProminent paints the bg with the tint color but hardcodes
+// the label foreground to `.white`. Our shadcn `primary` is near-white in dark
+// mode (n200) and near-black in light mode (n900). Pairing borderedProminent
+// with that tint gives white-on-white in dark mode. To honor the shadcn
+// neutral palette in both schemes we paint the bg ourselves and set the label
+// to `primaryForeground` (the true contrast color).
+//
+// Why frame is on the Text, not the Button:
+// SwiftUI's Button label is content-sized. `frame(maxWidth:.infinity)` on the
+// Button itself wraps the styled button in an invisible flex frame without
+// expanding it. Putting the frame on the LABEL inside the button is the fix.
+//
+// Why 10000 instead of Infinity:
+// `Infinity` serialized through the @expo/ui modifier bridge gets ignored by
+// the SwiftUI button's content-sizing logic, leaving the button content-sized.
+// A large finite number behaves as effectively infinite (capped by the parent
+// VStack's available width) and is honored by the bridge.
+export function ProminentButton({
+  label,
+  onPress,
+  disabled,
+}: {
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+}) {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  return (
+    <Button
+      modifiers={[
+        buttonStyle("plain"),
+        frame({ maxWidth: 10000 }),
+        background(colors.primary as string),
+        clipShape("capsule"),
+        disabledModifier(disabled ?? false),
+      ]}
+      onPress={onPress}
+    >
+      <Text
+        modifiers={[
+          frame({ maxWidth: 10000, height: ButtonTokens.height }),
+          multilineTextAlignment("center"),
+          dfont({ size: ButtonTokens.fontSize, weight: ButtonTokens.fontWeight }),
+          foregroundStyle(colors.primaryForeground as string),
+        ]}
+      >
+        {label}
+      </Text>
+    </Button>
+  );
+}

package/dist/templates/default/components/ui/skeleton.tsx

@@ -0,0 +1,107 @@
+import { VStack, HStack, Spacer, Text } from "@expo/ui/swift-ui";
+import { background, clipShape, cornerRadius, frame, padding } from "@expo/ui/swift-ui/modifiers";
+
+import { Spacing } from "@/constants/layout";
+import { useColors } from "@/hooks/use-theme";
+
+// Skeleton placeholders for initial query loads. SwiftUI-native: filled
+// muted-color boxes laid out in the shape of the screen they're standing
+// in for. No animation. SwiftUI's `Host` doesn't ergonomically support
+// per-tick opacity tweens, and static skeletons satisfy the
+// Reduce Motion accessibility setting automatically.
+
+type BarProps = {
+  width: number | "fill";
+  height: number;
+  radius?: number;
+};
+
+function Bar({ width, height, radius = 6 }: BarProps): React.ReactNode {
+  const colors = useColors();
+  return (
+    <VStack
+      modifiers={[
+        frame(width === "fill" ? { maxWidth: Infinity, height } : { width, height }),
+        background(colors.muted as string),
+        cornerRadius(radius),
+      ]}
+    >
+      <Text> </Text>
+    </VStack>
+  );
+}
+
+function Circle({ size }: { size: number }): React.ReactNode {
+  const colors = useColors();
+  return (
+    <VStack
+      modifiers={[
+        frame({ width: size, height: size }),
+        background(colors.muted as string),
+        clipShape("circle"),
+      ]}
+    >
+      <Text> </Text>
+    </VStack>
+  );
+}
+
+// Profile screen skeleton. Mirrors the layout of `app/(app)/profile.tsx`:
+// avatar row + display-name row + email row + sign-in-method row.
+export function SkeletonProfile(): React.ReactNode {
+  return (
+    <VStack alignment="leading" spacing={Spacing.xl} modifiers={[padding({ all: 24 })]}>
+      <HStack spacing={Spacing.lg}>
+        <Circle size={72} />
+        <VStack alignment="leading" spacing={Spacing.sm}>
+          <Bar width={160} height={20} />
+          <Bar width={120} height={14} />
+        </VStack>
+        <Spacer />
+      </HStack>
+      <VStack alignment="leading" spacing={Spacing.md}>
+        <Bar width={80} height={14} />
+        <Bar width="fill" height={44} radius={22} />
+      </VStack>
+      <VStack alignment="leading" spacing={Spacing.md}>
+        <Bar width={80} height={14} />
+        <Bar width="fill" height={44} radius={22} />
+      </VStack>
+      <VStack alignment="leading" spacing={Spacing.md}>
+        <Bar width={120} height={14} />
+        <Bar width="fill" height={44} radius={22} />
+      </VStack>
+    </VStack>
+  );
+}
+
+// Sessions screen skeleton. Three placeholder rows mirroring the
+// device-by-device shape in `app/(app)/sessions.tsx`.
+export function SkeletonSessions(): React.ReactNode {
+  return (
+    <VStack alignment="leading" spacing={Spacing.md} modifiers={[padding({ all: 24 })]}>
+      <SkeletonSessionRow />
+      <SkeletonSessionRow />
+      <SkeletonSessionRow />
+    </VStack>
+  );
+}
+
+function SkeletonSessionRow(): React.ReactNode {
+  const colors = useColors();
+  return (
+    <VStack
+      alignment="leading"
+      spacing={Spacing.md}
+      modifiers={[padding({ all: 16 }), background(colors.card as string), cornerRadius(12)]}
+    >
+      <HStack spacing={Spacing.md}>
+        <Bar width={140} height={18} />
+        <Spacer />
+        <Bar width={60} height={14} />
+      </HStack>
+      <Bar width={200} height={14} />
+      <Bar width={180} height={14} />
+    </VStack>
+  );
+}

package/dist/templates/default/components/ui/status-text.tsx

@@ -0,0 +1,49 @@
+import { useEffect } from "react";
+import { AccessibilityInfo } from "react-native";
+import { HStack, Image, Text } from "@expo/ui/swift-ui";
+import { foregroundStyle } from "@expo/ui/swift-ui/modifiers";
+
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { Colors } from "@/constants/theme";
+
+type Props = { children: string; size?: number };
+
+function announce(prefix: string, message: string) {
+  AccessibilityInfo.announceForAccessibility(`${prefix}: ${message}`);
+}
+
+export function ErrorText({ children, size = 14 }: Props) {
+  const dfont = useDynamicFont();
+  useEffect(() => {
+    announce("Error", children);
+  }, [children]);
+
+  return (
+    <HStack spacing={6} alignment="center">
+      <Image
+        systemName="exclamationmark.triangle.fill"
+        size={size}
+        color={Colors.destructive as string}
+      />
+      <Text modifiers={[dfont({ size }), foregroundStyle(Colors.destructive as string)]}>
+        {children}
+      </Text>
+    </HStack>
+  );
+}
+
+export function SuccessText({ children, size = 14 }: Props) {
+  const dfont = useDynamicFont();
+  useEffect(() => {
+    announce("Success", children);
+  }, [children]);
+
+  return (
+    <HStack spacing={6} alignment="center">
+      <Image systemName="checkmark.circle.fill" size={size} color={Colors.success as string} />
+      <Text modifiers={[dfont({ size }), foregroundStyle(Colors.success as string)]}>
+        {children}
+      </Text>
+    </HStack>
+  );
+}

package/dist/templates/default/components/ui/update-banner.tsx

@@ -0,0 +1,82 @@
+import { Pressable, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { Material } from "@/components/ui/material";
+import { useAppUpdates } from "@/hooks/use-updates";
+import { Spacing, FontSize, FontFamily } from "@/constants/layout";
+import { Radius } from "@/constants/theme";
+import { ZIndex } from "@/constants/ui";
+import { useColors } from "@/hooks/use-theme";
+
+// In-app surface for the EAS Update lifecycle. Mirrors the OfflineBanner
+// pattern (translucent material overlaying the nav layer per HIG) and is
+// only visible while the update state machine is doing something the user
+// would want to see:
+//
+//   - downloading      progress %, no tap target. auto-applies on finish
+//   - download failed  tap to retry
+//   - check failed     silent unless the user previously asked for an update
+//
+// `isUpdatePending` (downloaded, awaiting reload) is handled by the
+// `useAppUpdates` hook (auto-reload with reload screen), so we don't
+// surface it here. the splash-screen overlay does the visual work.
+export function UpdateBanner() {
+  const updates = useAppUpdates();
+  const insets = useSafeAreaInsets();
+  const colors = useColors();
+
+  const showProgress = updates.isDownloading;
+  const showError = !!updates.downloadError;
+  if (!showProgress && !showError) return null;
+
+  const tint = showError ? (colors.destructive as string) : (colors.primary as string);
+  const fg = showError
+    ? (colors.destructiveForeground as string)
+    : (colors.primaryForeground as string);
+  const pct =
+    showProgress && updates.downloadProgress != null
+      ? ` ${Math.round(updates.downloadProgress * 100)}%`
+      : "";
+  const label = showError ? "Update failed. Tap to retry." : `Updating${pct}`;
+
+  return (
+    <View
+      accessibilityLiveRegion="polite"
+      accessibilityRole="alert"
+      style={{
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: ZIndex.updateBanner,
+        paddingBottom: insets.bottom,
+      }}
+    >
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        accessibilityHint={showError ? "Re-attempts the update download" : undefined}
+        disabled={!showError}
+        onPress={showError ? () => updates.downloadAndApply() : undefined}
+      >
+        <Material
+          variant="chrome"
+          tintColor={tint}
+          style={{
+            marginHorizontal: Spacing.md,
+            marginBottom: Spacing.xs,
+            borderRadius: Radius.full,
+            overflow: "hidden",
+            paddingVertical: Spacing.sm,
+            paddingHorizontal: Spacing.lg,
+            alignItems: "center",
+          }}
+        >
+          <Text style={{ fontSize: FontSize.md, fontFamily: FontFamily.semiBold, color: fg }}>
+            {label}
+          </Text>
+        </Material>
+      </Pressable>
+    </View>
+  );
+}

package/dist/templates/default/constants/layout.ts

@@ -0,0 +1,102 @@
+export const Spacing = {
+  xxs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 32,
+  "4xl": 40,
+} as const;
+
+export const TouchTarget = {
+  min: 44,
+} as const;
+
+export const HitSlop = {
+  sm: 8,
+  md: 10,
+  lg: 12,
+} as const;
+
+export const FontSize = {
+  xs: 11,
+  sm: 12,
+  md: 13,
+  base: 14,
+  lg: 15,
+  xl: 16,
+  "2xl": 17,
+  "3xl": 18,
+  "4xl": 20,
+  "5xl": 24,
+  "6xl": 28,
+  "7xl": 30,
+} as const;
+
+export const LineHeight = {
+  tight: 18,
+  base: 20,
+  relaxed: 22,
+  loose: 24,
+  "2xl": 26,
+  "3xl": 34,
+  "4xl": 38,
+} as const;
+
+export const MaxWidth = {
+  form: 440,
+  content: 600,
+  wide: 800,
+} as const;
+
+export const Breakpoint = {
+  phone: 428,
+  tablet: 768,
+  desktop: 1024,
+} as const;
+
+export const TAB_BAR_HEIGHT = 80;
+export const TAB_BAR_CLEARANCE = TAB_BAR_HEIGHT + Spacing.lg;
+
+// Single source of truth for prominent action buttons across the auth flow,
+// onboarding, error states, and OTP. Keeps Sign In, Sign Up, Send Reset
+// Code, Reset Password, Verify, Try Again, and Sign in with Apple visually
+// identical: same height, same capsule corner radius, same Geist label
+// size and weight. Color comes from the shadcn palette (`primary` /
+// `primaryForeground`), never hardcoded.
+export const Button = {
+  height: 50,
+  cornerRadius: 25,
+  fontSize: 17,
+  fontWeight: "semibold",
+  secondaryFontWeight: "medium",
+} as const;
+
+export const IconSize = {
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  "2xl": 22,
+  "3xl": 24,
+  "4xl": 32,
+  "5xl": 48,
+  "6xl": 64,
+} as const;
+
+export const FontFamily = {
+  thin: "Geist-Thin",
+  extraLight: "Geist-ExtraLight",
+  light: "Geist-Light",
+  regular: "Geist-Regular",
+  medium: "Geist-Medium",
+  semiBold: "Geist-SemiBold",
+  bold: "Geist-Bold",
+  extraBold: "Geist-ExtraBold",
+  black: "Geist-Black",
+  mono: "GeistMono-Regular",
+  monoMedium: "GeistMono-Medium",
+  monoBold: "GeistMono-Bold",
+} as const;