@ramonclaudio/create-vexpo 0.1.0 → 0.1.2

package/dist/templates/default/src/components/auth/segmented-toggle.tsx

@@ -0,0 +1,71 @@
+import { Picker, Text } from "@expo/ui/swift-ui";
+import {
+  accessibilityLabel,
+  controlSize,
+  dynamicTypeSize,
+  frame,
+  pickerStyle,
+  tag,
+} from "@expo/ui/swift-ui/modifiers";
+
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { Button as ButtonTokens } from "@/constants/layout";
+import { DynamicType } from "@/constants/ui";
+import { haptics } from "@/lib/haptics";
+
+export type SegmentedOption<T extends string> = {
+  value: T;
+  label: string;
+};
+
+type Props<T extends string> = {
+  value: T;
+  options: SegmentedOption<T>[];
+  onChange: (value: T) => void;
+  // Group label spoken by VoiceOver before the segments. Required because a
+  // bare segmented Picker reads only the segment labels and would otherwise
+  // leave the user without context for what the group controls.
+  accessibilityLabel: string;
+  testID?: string;
+};
+
+export function SegmentedToggle<T extends string>({
+  value,
+  options,
+  onChange,
+  accessibilityLabel: a11yLabel,
+  testID,
+}: Props<T>) {
+  const dfont = useDynamicFont();
+  return (
+    <Picker
+      testID={testID}
+      modifiers={[
+        pickerStyle("segmented"),
+        controlSize("large"),
+        frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
+        // upstream expo/expo#46540: the two segments sit side by side and can't
+        // reflow, so cap Dynamic Type before the labels overflow at AX sizes.
+        dynamicTypeSize({ max: DynamicType.control }),
+        accessibilityLabel(a11yLabel),
+      ]}
+      selection={value}
+      onSelectionChange={(selection) => {
+        const next = selection as T;
+        if (next === value) return;
+        haptics.selection();
+        onChange(next);
+      }}
+    >
+      {options.map((opt) => (
+        <Text
+          key={opt.value}
+          testID={testID ? `${testID}-${opt.value}` : undefined}
+          modifiers={[tag(opt.value), dfont({ size: 14, weight: "medium" })]}
+        >
+          {opt.label}
+        </Text>
+      ))}
+    </Picker>
+  );
+}

package/dist/templates/default/src/components/ui/content-unavailable.tsx

@@ -0,0 +1,81 @@
+import { Platform } from "react-native";
+import { ContentUnavailableView, Image, Text, VStack } from "@expo/ui/swift-ui";
+import {
+  accessibilityHidden,
+  foregroundStyle,
+  frame,
+  multilineTextAlignment,
+  padding,
+} from "@expo/ui/swift-ui/modifiers";
+import type { SFSymbol } from "sf-symbols-typescript";
+
+import { useColors } from "@/hooks/use-theme";
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { useSymbolSize } from "@/lib/dynamic-symbol-size";
+
+// `@expo/ui`'s ContentUnavailableView wraps SwiftUI's iOS 17+ view with no
+// `else`, so it renders blank on the iOS 16.4-16.7 deployment floor. Branch to
+// a hand-built layout there so every empty state still shows; iOS 17+ keeps the
+// native view.
+const NATIVE = Platform.OS === "ios" && Number.parseInt(String(Platform.Version), 10) >= 17;
+
+type Props = {
+  title: string;
+  systemImage: SFSymbol;
+  description?: string;
+  testID?: string;
+};
+
+export function ContentUnavailable({ title, systemImage, description, testID }: Props) {
+  if (NATIVE) {
+    return (
+      <ContentUnavailableView
+        testID={testID}
+        title={title}
+        systemImage={systemImage}
+        description={description}
+      />
+    );
+  }
+  return (
+    <Fallback title={title} systemImage={systemImage} description={description} testID={testID} />
+  );
+}
+
+function Fallback({ title, systemImage, description, testID }: Props) {
+  const dfont = useDynamicFont();
+  const symbolSize = useSymbolSize();
+  const colors = useColors();
+  return (
+    <VStack
+      spacing={8}
+      alignment="center"
+      modifiers={[frame({ maxWidth: Infinity }), padding({ vertical: 40, horizontal: 24 })]}
+    >
+      <Image
+        systemName={systemImage}
+        size={symbolSize(40)}
+        color={colors.mutedForeground as string}
+        modifiers={[accessibilityHidden(true)]}
+      />
+      <Text
+        testID={description ? undefined : testID}
+        modifiers={[dfont({ size: 17, weight: "semibold" }), multilineTextAlignment("center")]}
+      >
+        {title}
+      </Text>
+      {description ? (
+        <Text
+          testID={testID}
+          modifiers={[
+            dfont({ size: 14 }),
+            foregroundStyle(colors.mutedForeground as string),
+            multilineTextAlignment("center"),
+          ]}
+        >
+          {description}
+        </Text>
+      ) : null}
+    </VStack>
+  );
+}

package/dist/templates/default/src/components/ui/convex-error.tsx

@@ -0,0 +1,21 @@
+import { ConvexError } from "convex/values";
+
+import { ErrorText } from "./status-text";
+
+export function formatError(err: unknown): string {
+  if (err instanceof ConvexError) {
+    const data = err.data as unknown;
+    if (typeof data === "object" && data !== null && "message" in data) {
+      const msg = (data as { message?: unknown }).message;
+      if (typeof msg === "string" && msg.length > 0) return msg;
+    }
+    return err.message;
+  }
+  if (err instanceof Error) return err.message;
+  return "An unexpected error occurred";
+}
+
+export function ConvexErrorView({ error, testID }: { error: unknown; testID?: string }) {
+  if (error === undefined || error === null) return null;
+  return <ErrorText testID={testID}>{formatError(error)}</ErrorText>;
+}

package/dist/templates/default/src/components/ui/error-boundary.tsx

@@ -0,0 +1,89 @@
+import { useEffect } from "react";
+import { AccessibilityInfo } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { router, type ErrorBoundaryProps } from "expo-router";
+import { Host, VStack, Text, Button, Image, Spacer } from "@expo/ui/swift-ui";
+import {
+  accessibilityHidden,
+  foregroundStyle,
+  buttonStyle,
+  frame,
+  padding,
+  multilineTextAlignment,
+  tint,
+} from "@expo/ui/swift-ui/modifiers";
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { useSymbolSize } from "@/lib/dynamic-symbol-size";
+import { ProminentButton } from "@/components/ui/prominent-button";
+import { useColors } from "@/hooks/use-theme";
+import { TouchTarget } from "@/constants/layout";
+
+export function AppErrorBoundary({
+  error,
+  retry,
+  testID,
+}: ErrorBoundaryProps & { testID?: string }) {
+  const dfont = useDynamicFont();
+  const symbolSize = useSymbolSize();
+  const colors = useColors();
+  const insets = useSafeAreaInsets();
+
+  // VoiceOver users won't notice the visual change to a destructive surface
+  // unless we explicitly announce. Fires once on mount per crash. Logging the
+  // error here too keeps it off the render path: a mounted boundary re-renders
+  // on theme/fontScale changes, and a render-body log would re-fire each time.
+  useEffect(() => {
+    if (__DEV__) console.error("[ErrorBoundary]", error);
+    AccessibilityInfo.announceForAccessibility("Error: something went wrong");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Host style={{ flex: 1 }}>
+      <VStack
+        spacing={20}
+        alignment="center"
+        modifiers={[
+          padding({ horizontal: 24, top: insets.top + 32, bottom: insets.bottom + 32 }),
+          tint(colors.primary as string),
+        ]}
+      >
+        <Spacer />
+        <Image
+          systemName="exclamationmark.triangle"
+          size={symbolSize(72)}
+          color={colors.destructive as string}
+          modifiers={[accessibilityHidden(true)]}
+        />
+        <Text modifiers={[dfont({ size: 28, weight: "bold" }), multilineTextAlignment("center")]}>
+          Something went wrong
+        </Text>
+        <Text
+          testID={testID}
+          modifiers={[
+            dfont({ size: 16 }),
+            foregroundStyle(colors.mutedForeground as string),
+            multilineTextAlignment("center"),
+          ]}
+        >
+          Don&apos;t worry. Let&apos;s get you back on track.
+        </Text>
+        <VStack spacing={12} modifiers={[frame({ maxWidth: Infinity })]}>
+          <ProminentButton testID="error-boundary-retry" label="Try Again" onPress={retry} />
+          <Button
+            testID="error-boundary-home"
+            label="Go Home"
+            modifiers={[
+              buttonStyle("plain"),
+              dfont({ size: 16, weight: "medium" }),
+              foregroundStyle(colors.mutedForeground as string),
+              frame({ minHeight: TouchTarget.min }),
+            ]}
+            onPress={() => router.replace("/")}
+          />
+        </VStack>
+        <Spacer />
+      </VStack>
+    </Host>
+  );
+}

package/dist/templates/default/{components → src/components}/ui/loading-screen.tsx

@@ -1,15 +1,16 @@
 import { Image as ExpoImage } from "expo-image";
 import { Host, ProgressView, Spacer, VStack, RNHostView } from "@expo/ui/swift-ui";
-import { progressViewStyle, tint } from "@expo/ui/swift-ui/modifiers";
+import { accessibilityLabel, progressViewStyle, tint } from "@expo/ui/swift-ui/modifiers";
 
 import { assets } from "@/lib/assets";
 import { useColors, useThemedAsset } from "@/hooks/use-theme";
 
-export function LoadingScreen() {
+export function LoadingScreen({ testID }: { testID?: string } = {}) {
   const colors = useColors();
   const brandIcon = useThemedAsset(assets.brandIconLight, assets.brandIconDark);
   return (
     <Host
+      testID={testID}
       style={{ flex: 1, backgroundColor: colors.background as string }}
       useViewportSizeMeasurement
     >
@@ -20,10 +21,10 @@ export function LoadingScreen() {
             source={brandIcon}
             style={{ width: 80, height: 80 }}
             contentFit="contain"
-            accessibilityLabel="App icon"
+            accessibilityLabel=""
           />
         </RNHostView>
-        <ProgressView modifiers={[progressViewStyle("circular")]} />
+        <ProgressView modifiers={[progressViewStyle("circular"), accessibilityLabel("Loading")]} />
         <Spacer />
       </VStack>
     </Host>

package/dist/templates/default/{components → src/components}/ui/material.tsx

@@ -1,14 +1,28 @@
 import type { ReactNode } from "react";
-import { StyleSheet, View, type ViewStyle } from "react-native";
+import { StyleSheet, View, type ViewProps } from "react-native";
 import { BlurView, type BlurTint } from "expo-blur";
-import { GlassView, isLiquidGlassAvailable, type GlassStyle } from "expo-glass-effect";
+import {
+  GlassView,
+  isGlassEffectAPIAvailable,
+  isLiquidGlassAvailable,
+  type GlassStyle,
+} from "expo-glass-effect";
+
+import { useReduceTransparency } from "@/hooks/use-reduce-transparency";
 
 /**
- * HIG-aware translucent surface. Picks the right backing per OS:
+ * HIG-aware translucent surface. Picks the right backing per OS and
+ * accessibility state:
+ *
+ *   Reduce Transparency on  -> solid `tintColor` background (no blur)
+ *   iOS 26+                  -> `GlassView` (true Liquid Glass via UIVisualEffectView)
+ *   iOS 16.4-25              -> `BlurView` (UIVisualEffectView blur + tint overlay)
+ *   anything else            -> solid `tintColor` fallback
  *
- *   iOS 26+        -> `GlassView` (true Liquid Glass via UIVisualEffectView)
- *   iOS 16.4-25    -> `BlurView` (UIVisualEffectView blur + tint overlay)
- *   anything else  -> solid `tintColor` fallback
+ * iOS 26 `GlassView` honors Reduce Transparency natively, so the explicit
+ * check only changes the iOS 16.4-25 path. But we route both through the
+ * same solid-fallback for consistency and so the iOS 26 path stays cheap
+ * when the user has opted out of blur.
  *
  * Apple's HIG reserves materials for the navigation layer that floats above
  * content: tab bars, navigation bars, toolbars, sheets, popovers, alerts,
@@ -49,23 +63,42 @@ const GLASS_STYLE: Record<MaterialVariant, GlassStyle> = {
 
 const TINT_OVERLAY_OPACITY = 0.35;
 
+export type MaterialProps = ViewProps & {
+  children?: ReactNode;
+  variant?: MaterialVariant;
+  tintColor?: string;
+  isInteractive?: boolean;
+};
+
 export function Material({
   children,
-  style,
   variant = "regular",
   tintColor,
   isInteractive = false,
-}: {
-  children?: ReactNode;
-  style?: ViewStyle;
-  variant?: MaterialVariant;
-  tintColor?: string;
-  isInteractive?: boolean;
-}) {
-  if (isLiquidGlassAvailable()) {
+  ...viewProps
+}: MaterialProps) {
+  const reduceTransparency = useReduceTransparency();
+
+  if (reduceTransparency) {
+    return (
+      <View
+        {...viewProps}
+        style={[viewProps.style, { backgroundColor: tintColor ?? "rgba(0,0,0,0.85)" }]}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  // `isLiquidGlassAvailable()` confirms the SDK + Info.plist support Liquid
+  // Glass; `isGlassEffectAPIAvailable()` confirms the runtime device actually
+  // has the API. Some iOS 26 beta builds pass the version check without the
+  // runtime API and crash on GlassView. Both must be true. See
+  // https://github.com/expo/expo/issues/40911.
+  if (isLiquidGlassAvailable() && isGlassEffectAPIAvailable()) {
     return (
       <GlassView
-        style={style}
+        {...viewProps}
         glassEffectStyle={GLASS_STYLE[variant]}
         tintColor={tintColor}
         isInteractive={isInteractive}
@@ -76,7 +109,7 @@ export function Material({
   }
 
   return (
-    <BlurView style={style} intensity={BLUR_INTENSITY[variant]} tint={BLUR_TINT[variant]}>
+    <BlurView {...viewProps} intensity={BLUR_INTENSITY[variant]} tint={BLUR_TINT[variant]}>
       {tintColor ? (
         <View
           style={[

package/dist/templates/default/src/components/ui/offline-banner.tsx

@@ -0,0 +1,59 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Host, Text } from "@expo/ui/swift-ui";
+import { foregroundStyle } from "@expo/ui/swift-ui/modifiers";
+
+import { Material } from "@/components/ui/material";
+import { useNetwork } from "@/hooks/use-network";
+import { Spacing, FontSize } from "@/constants/layout";
+import { Radius } from "@/constants/theme";
+import { ZIndex } from "@/constants/ui";
+import { useColors } from "@/hooks/use-theme";
+import { useDynamicFont } from "@/lib/dynamic-font";
+
+// HIG: notification banners overlay the navigation layer with a translucent
+// material so context behind the alert remains visible. `Material` carries
+// positioning, the live-region announcement, and the chrome surface in one
+// shot. The visible label renders through `Host` so it uses SwiftUI's text
+// system and respects Dynamic Type.
+export function OfflineBanner({ testID }: { testID?: string } = {}) {
+  const { isOffline } = useNetwork();
+  const insets = useSafeAreaInsets();
+  const colors = useColors();
+  const dfont = useDynamicFont();
+
+  if (!isOffline) return null;
+
+  return (
+    <Material
+      accessibilityLiveRegion="assertive"
+      accessibilityRole="alert"
+      accessibilityLabel="You're offline"
+      variant="chrome"
+      tintColor={colors.destructive as string}
+      style={{
+        position: "absolute",
+        top: insets.top + Spacing.xs,
+        left: Spacing.md,
+        right: Spacing.md,
+        zIndex: ZIndex.offlineBanner,
+        borderRadius: Radius.full,
+        overflow: "hidden",
+        paddingVertical: Spacing.sm,
+        paddingHorizontal: Spacing.lg,
+        alignItems: "center",
+      }}
+    >
+      <Host matchContents>
+        <Text
+          testID={testID}
+          modifiers={[
+            dfont({ size: FontSize["3xl"], weight: "bold" }),
+            foregroundStyle(colors.destructiveForeground as string),
+          ]}
+        >
+          You&apos;re offline
+        </Text>
+      </Host>
+    </Material>
+  );
+}

package/dist/templates/default/{components → src/components}/ui/prominent-button.tsx

@@ -13,9 +13,6 @@ 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
@@ -28,28 +25,28 @@ import { useColors } from "@/hooks/use-theme";
 // 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.
+// The value is `Infinity` (SwiftUI's `.frame(maxWidth: .infinity)` fill idiom);
+// it survives the @expo/ui modifier bridge intact and is what Expo ships in its
+// own ScrollView/BottomSheet and documents in tabview.mdx.
 export function ProminentButton({
   label,
   onPress,
   disabled,
+  testID,
 }: {
   label: string;
   onPress: () => void;
   disabled?: boolean;
+  testID?: string;
 }) {
   const dfont = useDynamicFont();
   const colors = useColors();
   return (
     <Button
+      testID={testID}
       modifiers={[
         buttonStyle("plain"),
-        frame({ maxWidth: 10000 }),
+        frame({ maxWidth: Infinity }),
         background(colors.primary as string),
         clipShape("capsule"),
         disabledModifier(disabled ?? false),
@@ -58,7 +55,7 @@ export function ProminentButton({
     >
       <Text
         modifiers={[
-          frame({ maxWidth: 10000, height: ButtonTokens.height }),
+          frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
           multilineTextAlignment("center"),
           dfont({ size: ButtonTokens.fontSize, weight: ButtonTokens.fontWeight }),
           foregroundStyle(colors.primaryForeground as string),

package/dist/templates/default/{components → src/components}/ui/skeleton.tsx

@@ -1,5 +1,12 @@
 import { VStack, HStack, Spacer, Text } from "@expo/ui/swift-ui";
-import { background, clipShape, cornerRadius, frame, padding } from "@expo/ui/swift-ui/modifiers";
+import {
+  accessibilityHidden,
+  background,
+  clipShape,
+  cornerRadius,
+  frame,
+  padding,
+} from "@expo/ui/swift-ui/modifiers";
 
 import { Spacing } from "@/constants/layout";
 import { useColors } from "@/hooks/use-theme";
@@ -7,8 +14,11 @@ 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.
+// per-tick opacity tweens, and static skeletons satisfy the Reduce Motion
+// accessibility setting trivially (nothing to suppress). The whitespace
+// `Text` inside each bar forces SwiftUI to render the framed VStack with
+// its background fill, and the placeholders use `accessibilityHidden(true)`
+// (shipped upstream in expo/expo#46579) to drop them from the spoken hierarchy.
 
 type BarProps = {
   width: number | "fill";
@@ -24,9 +34,10 @@ function Bar({ width, height, radius = 6 }: BarProps): React.ReactNode {
         frame(width === "fill" ? { maxWidth: Infinity, height } : { width, height }),
         background(colors.muted as string),
         cornerRadius(radius),
+        accessibilityHidden(true),
       ]}
     >
-      <Text> </Text>
+      <Text modifiers={[accessibilityHidden(true)]}> </Text>
     </VStack>
   );
 }
@@ -39,18 +50,22 @@ function Circle({ size }: { size: number }): React.ReactNode {
         frame({ width: size, height: size }),
         background(colors.muted as string),
         clipShape("circle"),
+        accessibilityHidden(true),
       ]}
     >
-      <Text> </Text>
+      <Text modifiers={[accessibilityHidden(true)]}> </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 {
+export function SkeletonProfile({ testID }: { testID?: string } = {}): React.ReactNode {
   return (
-    <VStack alignment="leading" spacing={Spacing.xl} modifiers={[padding({ all: 24 })]}>
+    <VStack
+      testID={testID}
+      alignment="leading"
+      spacing={Spacing.xl}
+      modifiers={[padding({ all: 24 })]}
+    >
       <HStack spacing={Spacing.lg}>
         <Circle size={72} />
         <VStack alignment="leading" spacing={Spacing.sm}>
@@ -75,11 +90,14 @@ export function SkeletonProfile(): React.ReactNode {
   );
 }
 
-// Sessions screen skeleton. Three placeholder rows mirroring the
-// device-by-device shape in `app/(app)/sessions.tsx`.
-export function SkeletonSessions(): React.ReactNode {
+export function SkeletonSessions({ testID }: { testID?: string } = {}): React.ReactNode {
   return (
-    <VStack alignment="leading" spacing={Spacing.md} modifiers={[padding({ all: 24 })]}>
+    <VStack
+      testID={testID}
+      alignment="leading"
+      spacing={Spacing.md}
+      modifiers={[padding({ all: 24 })]}
+    >
       <SkeletonSessionRow />
       <SkeletonSessionRow />
       <SkeletonSessionRow />

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

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