@expokit/cli 0.0.0-stage → 0.2.0

package/registry/kit.json

@@ -0,0 +1,11 @@
+{
+  "name": "kit",
+  "type": "lib",
+  "title": "Kit theme",
+  "description": "Design tokens, KitProvider and motion presets shared by every ExpoKit component.",
+  "tier": "free",
+  "dependencies": [],
+  "registryDependencies": [],
+  "sharedFiles": [],
+  "filesDir": "kit/files"
+}

package/registry/kpi-card/files/src/components/charts/kpi-card.tsx

@@ -0,0 +1,45 @@
+import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
+import { Sparkline, useChartTheme } from "expo-charts";
+
+export interface KpiCardProps {
+  label: string;
+  value: string;
+  /** Percentage change, e.g. 12.4 or -3.1. */
+  delta?: number;
+  /** Recent values for the sparkline (oldest first). */
+  trend?: number[];
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Big number + trend badge + sparkline. Colours follow <ChartProvider>. */
+export function KpiCard({ label, value, delta, trend, style }: KpiCardProps) {
+  const theme = useChartTheme();
+  const up = (delta ?? 0) >= 0;
+  const tone = up ? theme.positive : theme.negative;
+  return (
+    <View style={[styles.card, { backgroundColor: theme.card, borderColor: theme.border }, style]}>
+      <View style={styles.row}>
+        <Text style={[styles.label, { color: theme.mutedForeground }]}>{label}</Text>
+        {delta !== undefined ? (
+          <View style={[styles.badge, { borderColor: tone }]}>
+            <Text style={[styles.badgeText, { color: tone }]}>
+              {up ? "+" : ""}
+              {delta.toFixed(1)}%
+            </Text>
+          </View>
+        ) : null}
+      </View>
+      <Text style={[styles.value, { color: theme.foreground }]}>{value}</Text>
+      {trend && trend.length > 1 ? <Sparkline data={trend} height={40} color={tone} /> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: { borderRadius: 16, borderWidth: StyleSheet.hairlineWidth, padding: 16, gap: 6 },
+  row: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
+  label: { fontSize: 13, fontWeight: "400" },
+  badge: { borderWidth: StyleSheet.hairlineWidth, borderRadius: 999, paddingHorizontal: 8, paddingVertical: 2 },
+  badgeText: { fontSize: 11, fontWeight: "400", fontVariant: ["tabular-nums"] },
+  value: { fontSize: 28, fontWeight: "400", letterSpacing: -0.5, fontVariant: ["tabular-nums"] },
+});

package/registry/kpi-card.json

@@ -0,0 +1,14 @@
+{
+  "name": "kpi-card",
+  "type": "chart",
+  "title": "KPI card",
+  "description": "Big number, trend badge and an animated sparkline. Built on expo-charts.",
+  "tier": "free",
+  "dependencies": [
+    "expo-charts",
+    "react-native-svg"
+  ],
+  "registryDependencies": [],
+  "sharedFiles": [],
+  "filesDir": "kpi-card/files"
+}

package/registry/like-button.json

@@ -0,0 +1,18 @@
+{
+  "name": "like-button",
+  "type": "component",
+  "title": "Like Button",
+  "description": "Heart, star or bookmark that pops, throws a ring and a burst of coloured particles when liked, with an optional counter that rolls to the new number.",
+  "tier": "pro",
+  "dependencies": [
+    "react-native-svg",
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": null
+}

package/registry/liquidglass-tab/files/src/app/(tabs)/_layout.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { DynamicColorIOS, Platform } from 'react-native';
+import { Tabs } from 'expo-router/js-tabs';
+// SDK 54–57 path. On SDK 58+ change this to 'expo-router/native-tabs'.
+import { NativeTabs } from 'expo-router/unstable-native-tabs';
+
+import { GlassTabBar } from '@/components/GlassTabBar';
+import { USE_NATIVE_TABS } from '@/lib/tab-bar';
+import {
+  asFamily,
+  resolveIconLibrary,
+  resolveIconNames,
+  TAB_BAR,
+  TABS,
+  type TabItem,
+} from '@/lib/tabs';
+
+type IconProps = React.ComponentProps<typeof NativeTabs.Trigger.Icon>;
+
+function dynamicColor(pair: { light: string; dark: string }) {
+  return Platform.OS === 'ios' ? DynamicColorIOS(pair) : pair.light;
+}
+
+/** Vector-font icon rasterised for the native bar (Android, or iOS when no SF Symbol is set). */
+function vectorSrc(tab: TabItem) {
+  const library = resolveIconLibrary(tab);
+  const { name, selected } = resolveIconNames(tab);
+  if (!library || !name) return undefined;
+
+  const family = asFamily(library);
+  const icon = <NativeTabs.Trigger.VectorIcon family={family} name={name} />;
+  if (!selected) return icon;
+  return { default: icon, selected: <NativeTabs.Trigger.VectorIcon family={family} name={selected} /> };
+}
+
+/**
+ * Returns the Icon element itself (not a wrapper component): NativeTabs reads its
+ * children by type, so <NativeTabs.Trigger.Icon> must be a direct child of the Trigger.
+ */
+function nativeIcon(tab: TabItem, tint: IconProps['selectedColor']) {
+  const src = tab.src ?? vectorSrc(tab);
+  if (!tab.sf && !src) return null;
+  // sf wins on iOS, src is used on Android.
+  const props = { sf: tab.sf, src, selectedColor: tint } as IconProps;
+  return <NativeTabs.Trigger.Icon {...props} />;
+}
+
+function NativeTabLayout() {
+  const tint = dynamicColor(TAB_BAR.colors.tint);
+  const inactive = dynamicColor(TAB_BAR.colors.inactive);
+  const { fontSize, fontWeight, selectedFontWeight } = TAB_BAR.labelStyle;
+
+  return (
+    <NativeTabs
+      tintColor={tint}
+      iconColor={inactive}
+      labelVisibilityMode={TAB_BAR.labelVisibilityMode}
+      minimizeBehavior={TAB_BAR.minimizeBehavior}
+      labelStyle={{ color: inactive, fontSize, fontWeight }}
+      {...(TAB_BAR.backgroundColor != null ? { backgroundColor: TAB_BAR.backgroundColor } : null)}
+    >
+      {TABS.map((tab) => (
+        <NativeTabs.Trigger key={tab.name} name={tab.name} hidden={tab.hidden}>
+          {nativeIcon(tab, tint)}
+          <NativeTabs.Trigger.Label
+            hidden={tab.hiddenLabel}
+            selectedStyle={{ color: tint, fontSize, fontWeight: selectedFontWeight }}
+          >
+            {tab.title}
+          </NativeTabs.Trigger.Label>
+          {tab.badge ? <NativeTabs.Trigger.Badge>{tab.badge}</NativeTabs.Trigger.Badge> : null}
+        </NativeTabs.Trigger>
+      ))}
+    </NativeTabs>
+  );
+}
+
+function GlassTabLayout() {
+  return (
+    <Tabs
+      tabBar={(props) => <GlassTabBar {...props} />}
+      screenOptions={{ headerShown: false, animation: 'fade' }}
+    >
+      {TABS.map((tab) => (
+        <Tabs.Screen
+          key={tab.name}
+          name={tab.name}
+          options={{ title: tab.title, href: tab.hidden ? null : undefined }}
+        />
+      ))}
+    </Tabs>
+  );
+}
+
+export default function TabLayout() {
+  return USE_NATIVE_TABS ? <NativeTabLayout /> : <GlassTabLayout />;
+}

package/registry/liquidglass-tab/files/src/app/(tabs)/alerts.tsx

@@ -0,0 +1,5 @@
+import { TabScreenFromConfig } from '@/components/TabScreen';
+
+export default function AlertsScreen() {
+  return <TabScreenFromConfig tabName="alerts" />;
+}

package/registry/liquidglass-tab/files/src/app/(tabs)/explore.tsx

@@ -0,0 +1,5 @@
+import { TabScreenFromConfig } from '@/components/TabScreen';
+
+export default function ExploreScreen() {
+  return <TabScreenFromConfig tabName="explore" />;
+}

package/registry/liquidglass-tab/files/src/app/(tabs)/index.tsx

@@ -0,0 +1,5 @@
+import { TabScreenFromConfig } from '@/components/TabScreen';
+
+export default function HomeScreen() {
+  return <TabScreenFromConfig tabName="index" />;
+}

package/registry/liquidglass-tab/files/src/app/(tabs)/profile.tsx

@@ -0,0 +1,5 @@
+import { TabScreenFromConfig } from '@/components/TabScreen';
+
+export default function ProfileScreen() {
+  return <TabScreenFromConfig tabName="profile" />;
+}

package/registry/liquidglass-tab/files/src/app/_layout.tsx

@@ -0,0 +1,33 @@
+import 'react-native-gesture-handler';
+import React, { useEffect } from 'react';
+import { StyleSheet, useColorScheme } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+// SDK 56+: navigation themes come from expo-router itself. Using @react-navigation/native's
+// ThemeProvider here does nothing (expo-router ships its own copy) and causes a white flash.
+import { DarkTheme, DefaultTheme, Slot, ThemeProvider } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
+
+SplashScreen.preventAutoHideAsync();
+
+export default function RootLayout() {
+  const isDark = useColorScheme() === 'dark';
+
+  useEffect(() => {
+    SplashScreen.hideAsync();
+  }, []);
+
+  return (
+    <GestureHandlerRootView style={styles.root}>
+      <SafeAreaProvider>
+        <ThemeProvider value={isDark ? DarkTheme : DefaultTheme}>
+          <Slot />
+        </ThemeProvider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+});

package/registry/liquidglass-tab/files/src/components/GlassTabBar.tsx

@@ -0,0 +1,259 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  useColorScheme,
+  useWindowDimensions,
+  type ColorValue,
+  type ImageSourcePropType,
+} from 'react-native';
+import { BlurView } from 'expo-blur';
+import * as Haptics from 'expo-haptics';
+import type { BottomTabBarProps } from 'expo-router/js-tabs';
+
+import { GLASS_BAR_HEIGHT, setTabBarCollapsed, tabBarCollapse } from '@/lib/tab-bar';
+import { getTab, resolveIconLibrary, resolveIconNames, TAB_BAR, type TabItem } from '@/lib/tabs';
+
+/**
+ * Liquid-Glass look-alike for devices without the real thing (iOS 18 and older, Android, web).
+ * A floating blur pill with a sliding selection bubble. On scroll it collapses into a single
+ * glass circle holding the active tab — tap the circle to expand it again, like iOS 26.
+ */
+export function GlassTabBar({ state, navigation, insets }: BottomTabBarProps) {
+  const isDark = useColorScheme() === 'dark';
+  const { width: screenW } = useWindowDimensions();
+  const tint = isDark ? TAB_BAR.colors.tint.dark : TAB_BAR.colors.tint.light;
+  const inactive = isDark ? TAB_BAR.colors.inactive.dark : TAB_BAR.colors.inactive.light;
+
+  const routes = state.routes.filter((r) => !getTab(r.name)?.hidden);
+  const activeKey = state.routes[state.index]?.key;
+  const activeIndex = Math.max(0, routes.findIndex((r) => r.key === activeKey));
+  const activeTab = getTab(routes[activeIndex]?.name ?? '');
+
+  const fullW = Math.min(screenW - 32, 520);
+  const itemW = fullW / Math.max(routes.length, 1);
+  const bubbleX = useRef(new Animated.Value(activeIndex * itemW)).current;
+  const [collapsed, setCollapsed] = useState(false);
+
+  useEffect(() => {
+    Animated.spring(bubbleX, {
+      toValue: activeIndex * itemW,
+      useNativeDriver: true,
+      damping: 18,
+      stiffness: 240,
+      mass: 0.8,
+    }).start();
+    setTabBarCollapsed(false);
+  }, [activeIndex, itemW, bubbleX]);
+
+  useEffect(() => {
+    const id = tabBarCollapse.addListener(({ value }) => setCollapsed(value > 0.5));
+    return () => tabBarCollapse.removeListener(id);
+  }, []);
+
+  const width = tabBarCollapse.interpolate({ inputRange: [0, 1], outputRange: [fullW, GLASS_BAR_HEIGHT] });
+  const rowOpacity = tabBarCollapse.interpolate({ inputRange: [0, 0.45], outputRange: [1, 0], extrapolate: 'clamp' });
+  const dotOpacity = tabBarCollapse.interpolate({ inputRange: [0.55, 1], outputRange: [0, 1], extrapolate: 'clamp' });
+  const dotScale = tabBarCollapse.interpolate({ inputRange: [0.55, 1], outputRange: [0.6, 1], extrapolate: 'clamp' });
+
+  return (
+    <View pointerEvents="box-none" style={[styles.host, { bottom: Math.max(insets.bottom, 12) }]}>
+      <Animated.View style={[styles.shadow, { width }]}>
+        <View style={[styles.glass, { borderColor: isDark ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.7)' }]}>
+          <BlurView
+            intensity={Platform.OS === 'ios' ? 70 : 40}
+            tint={isDark ? 'dark' : 'light'}
+            style={StyleSheet.absoluteFill}
+          />
+          <View
+            style={[
+              StyleSheet.absoluteFill,
+              { backgroundColor: isDark ? 'rgba(28,28,34,0.55)' : 'rgba(255,255,255,0.55)' },
+            ]}
+          />
+          {/* Specular rim along the top edge. */}
+          <View style={[styles.rim, { backgroundColor: isDark ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.95)' }]} />
+
+          <Animated.View
+            pointerEvents={collapsed ? 'none' : 'auto'}
+            style={[styles.row, { width: fullW, opacity: rowOpacity }]}
+          >
+            <Animated.View
+              style={[
+                styles.bubble,
+                {
+                  width: itemW - 8,
+                  backgroundColor: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.06)',
+                  transform: [{ translateX: bubbleX }],
+                },
+              ]}
+            />
+            {routes.map((route) => {
+              const tab = getTab(route.name);
+              const focused = route.key === activeKey;
+              const color = focused ? tint : inactive;
+              const onPress = () => {
+                const event = navigation.emit({ type: 'tabPress', target: route.key, canPreventDefault: true });
+                if (!focused && !event.defaultPrevented) {
+                  Haptics.selectionAsync().catch(() => {});
+                  navigation.navigate(route.name, route.params);
+                }
+              };
+              return (
+                <TabButton
+                  key={route.key}
+                  tab={tab}
+                  title={tab?.title ?? route.name}
+                  focused={focused}
+                  color={color}
+                  width={itemW}
+                  onPress={onPress}
+                />
+              );
+            })}
+          </Animated.View>
+
+          <Animated.View
+            pointerEvents={collapsed ? 'auto' : 'none'}
+            style={[styles.dot, { opacity: dotOpacity, transform: [{ scale: dotScale }] }]}
+          >
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Show tabs"
+              onPress={() => {
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {});
+                setTabBarCollapsed(false);
+              }}
+              style={styles.dotPress}
+            >
+              <TabIcon tab={activeTab} focused color={tint} size={26} />
+            </Pressable>
+          </Animated.View>
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+function TabButton({
+  tab,
+  title,
+  focused,
+  color,
+  width,
+  onPress,
+}: {
+  tab?: TabItem;
+  title: string;
+  focused: boolean;
+  color: ColorValue;
+  width: number;
+  onPress: () => void;
+}) {
+  const press = useRef(new Animated.Value(1)).current;
+  const to = (v: number) =>
+    Animated.spring(press, { toValue: v, useNativeDriver: true, speed: 40, bounciness: 10 }).start();
+
+  return (
+    <Pressable
+      accessibilityRole="tab"
+      accessibilityState={{ selected: focused }}
+      accessibilityLabel={title}
+      onPress={onPress}
+      onPressIn={() => to(0.86)}
+      onPressOut={() => to(1)}
+      style={[styles.item, { width }]}
+    >
+      <Animated.View style={{ alignItems: 'center', transform: [{ scale: press }] }}>
+        <View>
+          <TabIcon tab={tab} focused={focused} color={color} size={23} />
+          {tab?.badge ? (
+            <View style={styles.badge}>
+              <Text style={styles.badgeText}>{tab.badge}</Text>
+            </View>
+          ) : null}
+        </View>
+        {tab?.hiddenLabel ||
+        TAB_BAR.labelVisibilityMode === 'unlabeled' ||
+        (TAB_BAR.labelVisibilityMode === 'selected' && !focused) ? null : (
+          <Text
+            numberOfLines={1}
+            style={[
+              styles.label,
+              {
+                color,
+                fontSize: TAB_BAR.labelStyle.fontSize,
+                fontWeight: focused ? TAB_BAR.labelStyle.selectedFontWeight : TAB_BAR.labelStyle.fontWeight,
+              },
+            ]}
+          >
+            {title}
+          </Text>
+        )}
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+type IconComponent = React.ComponentType<{ name: string; size: number; color: ColorValue }>;
+
+/** Same icon config as the native bar: `src` image, or a vector-icon set / custom icon font. */
+function TabIcon({ tab, focused, color, size }: { tab?: TabItem; focused: boolean; color: ColorValue; size: number }) {
+  if (tab?.src) {
+    const src = tab.src as ImageSourcePropType | { default: ImageSourcePropType; selected: ImageSourcePropType };
+    const pair = typeof src === 'object' && src !== null && 'selected' in src ? src : null;
+    const source = pair ? (focused ? pair.selected : pair.default) : (src as ImageSourcePropType);
+    return <Image source={source} style={{ width: size, height: size, tintColor: color as string }} />;
+  }
+  const library = tab ? resolveIconLibrary(tab) : undefined;
+  const { name, selected } = tab ? resolveIconNames(tab) : {};
+  if (typeof library === 'function' && name) {
+    const Icon = library as IconComponent;
+    return <Icon name={focused && selected ? selected : name} size={size} color={color} />;
+  }
+  return <View style={{ width: size * 0.4, height: size * 0.4, borderRadius: size, backgroundColor: color, margin: size * 0.3 }} />;
+}
+
+const styles = StyleSheet.create({
+  host: { position: 'absolute', left: 16, right: 16, alignItems: 'flex-start' },
+  shadow: {
+    height: GLASS_BAR_HEIGHT,
+    borderRadius: GLASS_BAR_HEIGHT / 2,
+    shadowColor: '#000',
+    shadowOpacity: 0.18,
+    shadowRadius: 22,
+    shadowOffset: { width: 0, height: 10 },
+    elevation: 12,
+  },
+  glass: {
+    flex: 1,
+    borderRadius: GLASS_BAR_HEIGHT / 2,
+    overflow: 'hidden',
+    borderWidth: StyleSheet.hairlineWidth,
+  },
+  rim: { position: 'absolute', top: 0, left: 24, right: 24, height: StyleSheet.hairlineWidth * 2, borderRadius: 1 },
+  row: { position: 'absolute', top: 0, bottom: 0, left: 0, flexDirection: 'row', alignItems: 'center' },
+  bubble: { position: 'absolute', top: 5, bottom: 5, left: 4, borderRadius: (GLASS_BAR_HEIGHT - 10) / 2 },
+  item: { height: GLASS_BAR_HEIGHT, alignItems: 'center', justifyContent: 'center' },
+  label: { marginTop: 3, letterSpacing: 0.1 },
+  badge: {
+    position: 'absolute',
+    top: -4,
+    right: -10,
+    minWidth: 17,
+    height: 17,
+    paddingHorizontal: 4,
+    borderRadius: 9,
+    backgroundColor: '#FF3B30',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeText: { color: '#fff', fontSize: 10, fontWeight: '400' },
+  dot: { position: 'absolute', top: 0, left: 0, width: GLASS_BAR_HEIGHT, height: GLASS_BAR_HEIGHT },
+  dotPress: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});

package/registry/liquidglass-tab/files/src/components/TabScreen.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  useColorScheme,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useTabBarInset, useTabBarScroll, USE_NATIVE_TABS } from '@/lib/tab-bar';
+import { getTab } from '@/lib/tabs';
+
+interface TabScreenProps {
+  title: string;
+  description: string;
+  accent: string;
+}
+
+export function TabScreen({ title, description, accent }: TabScreenProps) {
+  const isDark = useColorScheme() === 'dark';
+  const insets = useSafeAreaInsets();
+  const onScroll = useTabBarScroll();
+  const bottomInset = useTabBarInset();
+  const bg = isDark ? '#0f0f1a' : '#f2f2f7';
+  const text = isDark ? '#fff' : '#1c1c1e';
+  const sub = isDark ? '#9898a8' : '#6c6c70';
+
+  return (
+    <View collapsable={false} style={styles.root}>
+      <ScrollView
+        style={{ flex: 1, backgroundColor: bg }}
+        contentContainerStyle={[
+          styles.scroll,
+          { paddingTop: USE_NATIVE_TABS ? 12 : insets.top + 12, paddingBottom: bottomInset },
+        ]}
+        showsVerticalScrollIndicator={false}
+        // Native tabs inset content for the system bars; the glass fallback pads it manually.
+        contentInsetAdjustmentBehavior={USE_NATIVE_TABS ? 'automatic' : 'never'}
+        scrollEventThrottle={16}
+        onScroll={onScroll}
+      >
+        <View style={[styles.hero, { backgroundColor: accent }]}>
+          <Text style={styles.heroTitle}>{title}</Text>
+          <Text style={styles.heroHint}>
+            {USE_NATIVE_TABS ? 'Liquid Glass · scroll down to collapse' : 'Glass fallback · scroll down to collapse'}
+          </Text>
+        </View>
+        <Text style={[styles.title, { color: text }]}>{title}</Text>
+        <Text style={[styles.subtitle, { color: sub }]}>{description}</Text>
+
+        {SECTIONS.map((n) => (
+          <View
+            key={n}
+            style={[
+              styles.card,
+              { backgroundColor: isDark ? '#1c1c2e' : '#ffffff' },
+            ]}
+          >
+            <Text style={[styles.cardTitle, { color: text }]}>Section {n}</Text>
+            <Text style={[styles.cardSub, { color: sub }]}>
+              iOS 26+ gets the system Liquid Glass bar. Older iOS, Android and web get the
+              blur glass fallback — both merge into a glass circle when you scroll down.
+            </Text>
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+export function TabScreenFromConfig({ tabName }: { tabName: string }) {
+  const tab = getTab(tabName);
+  if (!tab) {
+    return null;
+  }
+
+  return (
+    <TabScreen
+      title={tab.title}
+      description={
+        tab.description ??
+        'Scroll to test native tab bar minimize behavior on iOS 26+.'
+      }
+      accent={tab.accent ?? '#6366f1'}
+    />
+  );
+}
+
+const SECTIONS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  scroll: { paddingHorizontal: 20 },
+  hero: {
+    height: 140,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 20,
+  },
+  heroTitle: {
+    color: '#fff',
+    fontSize: 28,
+    fontWeight: '400',
+  },
+  heroHint: {
+    color: 'rgba(255,255,255,0.75)',
+    fontSize: 13,
+    marginTop: 6,
+    fontWeight: '400',
+  },
+  title: { fontSize: 34, fontWeight: '400', letterSpacing: -0.5 },
+  subtitle: { fontSize: 15, marginTop: 8, marginBottom: 20, lineHeight: 22 },
+  card: {
+    borderRadius: 14,
+    padding: 16,
+    marginBottom: 10,
+  },
+  cardTitle: { fontSize: 17, fontWeight: '400' },
+  cardSub: { fontSize: 14, marginTop: 4, lineHeight: 20 },
+});