expo-bbase 1.2.0 → 1.3.1

package/dist/index.js

@@ -2520,267 +2520,594 @@ var flashlist_default = flashlistModule;
 var uiReusablesModule = {
   id: "ui-reusables",
   name: "reactnative.reusables UI",
-  description: "\u9884\u7F6E UI \u7EC4\u4EF6",
+  description: "\u9884\u7F6E UI \u7EC4\u4EF6 (Button, AlertDialog, Card, Input, Label, Text, Separator)",
   defaultChecked: false,
   dependencies: {
-    "reactnative.reusables": "^0.1.0",
-    "react-native-svg": "^15.8.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0",
     "@rn-primitives/slot": "^1.1.0",
-    "@rn-primitives/types": "^1.1.0"
+    "@rn-primitives/types": "^1.1.0",
+    "@rn-primitives/label": "^1.1.0",
+    "@rn-primitives/separator": "^1.1.0",
+    "@rn-primitives/alert-dialog": "^1.1.0",
+    "react-native-svg": "^15.8.0"
   },
   devDependencies: {},
   files: [
+    // ─── lib/utils.ts ────────────────────────────────────────────────────
     {
-      path: "src/components/ui/button.tsx",
+      path: "src/lib/utils.ts",
       content: lines(
-        'import React from "react";',
-        'import { Text, Pressable, type PressableProps, type StyleProp, type ViewStyle, type TextStyle } from "react-native";',
-        'import { Slot } from "@rn-primitives/slot";',
-        "",
-        'type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";',
-        'type ButtonSize = "default" | "sm" | "lg" | "icon";',
+        'import { type ClassValue, clsx } from "clsx";',
+        'import { twMerge } from "tailwind-merge";',
         "",
-        "interface ButtonProps extends PressableProps {",
-        "  variant?: ButtonVariant;",
-        "  size?: ButtonSize;",
-        "  asChild?: boolean;",
-        "  style?: StyleProp<ViewStyle>;",
-        "  textStyle?: StyleProp<TextStyle>;",
-        "  children: React.ReactNode;",
+        "export function cn(...inputs: ClassValue[]) {",
+        "  return twMerge(clsx(inputs));",
         "}",
+        ""
+      )
+    },
+    // ─── components/ui/text.tsx ──────────────────────────────────────────
+    {
+      path: "src/components/ui/text.tsx",
+      content: lines(
+        'import { cn } from "@/src/lib/utils";',
+        'import { Slot } from "@rn-primitives/slot";',
+        'import { cva, type VariantProps } from "class-variance-authority";',
+        'import * as React from "react";',
+        'import { Platform, Text as RNText, type Role } from "react-native";',
+        "",
+        "const textVariants = cva(",
+        "  cn(",
+        '    "text-foreground text-base",',
+        "    Platform.select({",
+        '      web: "select-text",',
+        "    })",
+        "  ),",
+        "  {",
+        "    variants: {",
+        "      variant: {",
+        '        default: "",',
+        "        h1: cn(",
+        '          "text-center text-4xl font-extrabold tracking-tight",',
+        '          Platform.select({ web: "scroll-m-20 text-balance" })',
+        "        ),",
+        "        h2: cn(",
+        '          "border-border border-b pb-2 text-3xl font-semibold tracking-tight",',
+        '          Platform.select({ web: "scroll-m-20 first:mt-0" })',
+        "        ),",
+        "        h3: cn(",
+        '          "text-2xl font-semibold tracking-tight",',
+        '          Platform.select({ web: "scroll-m-20" })',
+        "        ),",
+        "        h4: cn(",
+        '          "text-xl font-semibold tracking-tight",',
+        '          Platform.select({ web: "scroll-m-20" })',
+        "        ),",
+        '        p: "mt-3 leading-7 sm:mt-6",',
+        '        blockquote: "mt-4 border-l-2 pl-3 italic sm:mt-6 sm:pl-6",',
+        "        code: cn(",
+        '          "bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"',
+        "        ),",
+        '        lead: "text-muted-foreground text-xl",',
+        '        large: "text-lg font-semibold",',
+        '        small: "text-sm font-medium leading-none",',
+        '        muted: "text-muted-foreground text-sm",',
+        "      },",
+        "    },",
+        "    defaultVariants: {",
+        '      variant: "default",',
+        "    },",
+        "  }",
+        ");",
         "",
-        "const variantStyles: Record<ButtonVariant, ViewStyle> = {",
-        '  default: { backgroundColor: "#0f172a" },',
-        '  destructive: { backgroundColor: "#ef4444" },',
-        '  outline: { backgroundColor: "transparent", borderWidth: 1, borderColor: "#d4d4d8" },',
-        '  secondary: { backgroundColor: "#f4f4f5" },',
-        '  ghost: { backgroundColor: "transparent" },',
-        '  link: { backgroundColor: "transparent" },',
-        "};",
+        "type TextVariantProps = VariantProps<typeof textVariants>;",
         "",
-        "const variantTextStyles: Record<ButtonVariant, TextStyle> = {",
-        '  default: { color: "#fafafa" },',
-        '  destructive: { color: "#fafafa" },',
-        '  outline: { color: "#18181b" },',
-        '  secondary: { color: "#18181b" },',
-        '  ghost: { color: "#18181b" },',
-        '  link: { color: "#2563eb", textDecorationLine: "underline" },',
-        "};",
+        'type TextVariant = NonNullable<TextVariantProps["variant"]>;',
         "",
-        "const sizeStyles: Record<ButtonSize, ViewStyle> = {",
-        "  default: { height: 44, paddingHorizontal: 16 },",
-        "  sm: { height: 36, paddingHorizontal: 12 },",
-        "  lg: { height: 52, paddingHorizontal: 24 },",
-        "  icon: { height: 44, width: 44 },",
+        "const ROLE: Partial<Record<TextVariant, Role>> = {",
+        '  h1: "heading",',
+        '  h2: "heading",',
+        '  h3: "heading",',
+        '  h4: "heading",',
+        '  blockquote: Platform.select({ web: "blockquote" as Role }),',
+        '  code: Platform.select({ web: "code" as Role }),',
         "};",
         "",
-        "const sizeTextStyles: Record<ButtonSize, TextStyle> = {",
-        "  default: { fontSize: 16 },",
-        "  sm: { fontSize: 14 },",
-        "  lg: { fontSize: 18 },",
-        "  icon: { fontSize: 16 },",
+        "const ARIA_LEVEL: Partial<Record<TextVariant, string>> = {",
+        '  h1: "1",',
+        '  h2: "2",',
+        '  h3: "3",',
+        '  h4: "4",',
         "};",
         "",
-        "export function Button({",
-        '  variant = "default",',
-        '  size = "default",',
+        "const TextClassContext = React.createContext<string | undefined>(undefined);",
+        "",
+        "function Text({",
+        "  className,",
         "  asChild = false,",
-        "  style,",
-        "  textStyle,",
-        "  children,",
-        "  ...rest",
-        "}: ButtonProps) {",
-        "  const containerStyle: StyleProp<ViewStyle> = [",
-        "    {",
-        "      borderRadius: 8,",
-        '      flexDirection: "row",',
-        '      alignItems: "center",',
-        '      justifyContent: "center",',
-        "    },",
-        "    variantStyles[variant],",
-        "    sizeStyles[size],",
-        "    style,",
-        "  ];",
+        '  variant = "default",',
+        "  ...props",
+        "}: React.ComponentProps<typeof RNText> &",
+        "  React.RefAttributes<typeof RNText> &",
+        "  TextVariantProps & { asChild?: boolean }) {",
+        "  const textClass = React.useContext(TextClassContext);",
+        "  const Component = asChild ? Slot : RNText;",
+        "  return (",
+        "    <Component",
+        "      className={cn(textVariants({ variant }), textClass, className)}",
+        "      role={variant ? ROLE[variant] : undefined}",
+        "      aria-level={variant ? ARIA_LEVEL[variant] : undefined}",
+        "      {...props}",
+        "    />",
+        "  );",
+        "}",
         "",
-        "  const textStyling: StyleProp<TextStyle> = [",
-        "    {",
-        '      fontWeight: "600",',
-        '      textAlign: "center",',
+        "export { Text, TextClassContext };",
+        ""
+      )
+    },
+    // ─── components/ui/button.tsx ────────────────────────────────────────
+    {
+      path: "src/components/ui/button.tsx",
+      content: lines(
+        'import { TextClassContext } from "@/src/components/ui/text";',
+        'import { cn } from "@/src/lib/utils";',
+        'import { cva, type VariantProps } from "class-variance-authority";',
+        'import { Platform, Pressable } from "react-native";',
+        "",
+        "const buttonVariants = cva(",
+        "  cn(",
+        '    "group shrink-0 flex-row items-center justify-center gap-2 rounded-md shadow-none",',
+        "    Platform.select({",
+        `      web: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",`,
+        "    })",
+        "  ),",
+        "  {",
+        "    variants: {",
+        "      variant: {",
+        "        default: cn(",
+        '          "bg-primary active:bg-primary/90 shadow-sm shadow-black/5",',
+        '          Platform.select({ web: "hover:bg-primary/90" })',
+        "        ),",
+        "        destructive: cn(",
+        '          "bg-destructive active:bg-destructive/90 dark:bg-destructive/60 shadow-sm shadow-black/5",',
+        "          Platform.select({",
+        '            web: "hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",',
+        "          })",
+        "        ),",
+        "        outline: cn(",
+        '          "border-border bg-background active:bg-accent dark:bg-input/30 dark:border-input dark:active:bg-input/50 border shadow-sm shadow-black/5",',
+        "          Platform.select({",
+        '            web: "hover:bg-accent dark:hover:bg-input/50",',
+        "          })",
+        "        ),",
+        "        secondary: cn(",
+        '          "bg-secondary active:bg-secondary/80 shadow-sm shadow-black/5",',
+        '          Platform.select({ web: "hover:bg-secondary/80" })',
+        "        ),",
+        "        ghost: cn(",
+        '          "active:bg-accent dark:active:bg-accent/50",',
+        '          Platform.select({ web: "hover:bg-accent dark:hover:bg-accent/50" })',
+        "        ),",
+        '        link: "",',
+        "      },",
+        "      size: {",
+        "        default: cn(",
+        '          "h-10 px-4 py-2 sm:h-9",',
+        '          Platform.select({ web: "has-[>svg]:px-3" })',
+        "        ),",
+        "        sm: cn(",
+        '          "h-9 gap-1.5 rounded-md px-3 sm:h-8",',
+        '          Platform.select({ web: "has-[>svg]:px-2.5" })',
+        "        ),",
+        "        lg: cn(",
+        '          "h-11 rounded-md px-6 sm:h-10",',
+        '          Platform.select({ web: "has-[>svg]:px-4" })',
+        "        ),",
+        '        icon: "h-10 w-10 sm:h-9 sm:w-9",',
+        "      },",
+        "    },",
+        "    defaultVariants: {",
+        '      variant: "default",',
+        '      size: "default",',
         "    },",
-        "    variantTextStyles[variant],",
-        "    sizeTextStyles[size],",
-        "    textStyle,",
-        "  ];",
+        "  }",
+        ");",
         "",
-        "  if (asChild && React.isValidElement(children)) {",
-        "    return (",
-        "      <Pressable style={containerStyle} {...rest}>",
-        "        <Slot>{children}</Slot>",
-        "      </Pressable>",
-        "    );",
+        "const buttonTextVariants = cva(",
+        "  cn(",
+        '    "text-foreground text-sm font-medium",',
+        '    Platform.select({ web: "pointer-events-none transition-colors" })',
+        "  ),",
+        "  {",
+        "    variants: {",
+        "      variant: {",
+        '        default: "text-primary-foreground",',
+        '        destructive: "text-white",',
+        "        outline: cn(",
+        '          "group-active:text-accent-foreground",',
+        '          Platform.select({ web: "group-hover:text-accent-foreground" })',
+        "        ),",
+        '        secondary: "text-secondary-foreground",',
+        '        ghost: "group-active:text-accent-foreground",',
+        "        link: cn(",
+        '          "text-primary group-active:underline",',
+        '          Platform.select({ web: "underline-offset-4 hover:underline group-hover:underline" })',
+        "        ),",
+        "      },",
+        "      size: {",
+        '        default: "",',
+        '        sm: "",',
+        '        lg: "",',
+        '        icon: "",',
+        "      },",
+        "    },",
+        "    defaultVariants: {",
+        '      variant: "default",',
+        '      size: "default",',
+        "    },",
         "  }",
+        ");",
+        "",
+        "type ButtonProps = React.ComponentProps<typeof Pressable> &",
+        "  React.RefAttributes<typeof Pressable> &",
+        "  VariantProps<typeof buttonVariants>;",
         "",
+        "function Button({ className, variant, size, ...props }: ButtonProps) {",
         "  return (",
-        "    <Pressable style={containerStyle} {...rest}>",
-        '      {typeof children === "string" ? (',
-        "        <Text style={textStyling}>{children}</Text>",
-        "      ) : (",
-        "        children",
-        "      )}",
-        "    </Pressable>",
+        "    <TextClassContext.Provider value={buttonTextVariants({ variant, size })}>",
+        "      <Pressable",
+        '        className={cn(props.disabled && "opacity-50", buttonVariants({ variant, size }), className)}',
+        '        role="button"',
+        "        {...props}",
+        "      />",
+        "    </TextClassContext.Provider>",
         "  );",
         "}",
         "",
-        "export default Button;"
+        "export { Button, buttonTextVariants, buttonVariants };",
+        "export type { ButtonProps };",
+        ""
       )
     },
+    // ─── components/ui/input.tsx ──────────────────────────────────────────
     {
       path: "src/components/ui/input.tsx",
       content: lines(
-        'import React, { forwardRef } from "react";',
-        "import {",
-        "  TextInput,",
-        "  type TextInputProps,",
-        "  type StyleProp,",
-        "  type ViewStyle,",
-        "  type TextStyle,",
-        "  View,",
-        "  Text,",
-        '} from "react-native";',
-        "",
-        "interface InputProps extends TextInputProps {",
-        "  label?: string;",
-        "  error?: string;",
-        "  containerStyle?: StyleProp<ViewStyle>;",
-        "  inputStyle?: StyleProp<TextStyle>;",
-        "}",
-        "",
-        "export const Input = forwardRef<TextInput, InputProps>(",
-        "  ({ label, error, containerStyle, inputStyle, ...rest }, ref) => {",
-        "    return (",
-        "      <View style={containerStyle}>",
-        "        {label && <Text style={styles.label}>{label}</Text>}",
-        "        <TextInput",
-        "          ref={ref}",
-        "          style={[",
-        "            styles.input,",
-        "            error && styles.inputError,",
-        "            inputStyle,",
-        "          ]}",
-        '          placeholderTextColor="#a1a1aa"',
-        "          {...rest}",
-        "        />",
-        "        {error && <Text style={styles.errorText}>{error}</Text>}",
-        "      </View>",
-        "    );",
-        "  }",
-        ");",
+        'import { cn } from "@/src/lib/utils";',
+        'import { Platform, TextInput } from "react-native";',
+        "",
+        "function Input({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof TextInput> & React.RefAttributes<TextInput>) {",
+        "  return (",
+        "    <TextInput",
+        "      className={cn(",
+        '        "dark:bg-input/30 border-input bg-background text-foreground flex h-10 w-full min-w-0 flex-row items-center rounded-md border px-3 py-1 text-base leading-5 shadow-sm shadow-black/5 sm:h-9",',
+        "        props.editable === false &&",
+        "          cn(",
+        '            "opacity-50",',
+        '            Platform.select({ web: "disabled:pointer-events-none disabled:cursor-not-allowed" })',
+        "          ),",
+        "        Platform.select({",
+        "          web: cn(",
+        '            "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground outline-none transition-[color,box-shadow] md:text-sm",',
+        '            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",',
+        '            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"',
+        "          ),",
+        '          native: "placeholder:text-muted-foreground/50",',
+        "        }),",
+        "        className",
+        "      )}",
+        "      {...props}",
+        "    />",
+        "  );",
+        "}",
         "",
-        'Input.displayName = "Input";',
+        "export { Input };",
+        ""
+      )
+    },
+    // ─── components/ui/label.tsx ─────────────────────────────────────────
+    {
+      path: "src/components/ui/label.tsx",
+      content: lines(
+        'import { cn } from "@/src/lib/utils";',
+        'import * as LabelPrimitive from "@rn-primitives/label";',
+        'import { Platform } from "react-native";',
         "",
-        "const styles = {",
-        "  label: {",
-        "    fontSize: 14,",
-        '    fontWeight: "500",',
-        '    color: "#18181b",',
-        "    marginBottom: 6,",
-        "  } as TextStyle,",
-        "  input: {",
-        "    height: 44,",
-        "    borderWidth: 1,",
-        '    borderColor: "#d4d4d8",',
-        "    borderRadius: 8,",
-        "    paddingHorizontal: 12,",
-        "    fontSize: 16,",
-        '    color: "#18181b",',
-        '    backgroundColor: "#ffffff",',
-        "  } as TextStyle,",
-        "  inputError: {",
-        '    borderColor: "#ef4444",',
-        "  } as TextStyle,",
-        "  errorText: {",
-        "    fontSize: 12,",
-        '    color: "#ef4444",',
-        "    marginTop: 4,",
-        "  } as TextStyle,",
-        "};",
+        "function Label({",
+        "  className,",
+        "  onPress,",
+        "  onLongPress,",
+        "  onPressIn,",
+        "  onPressOut,",
+        "  disabled,",
+        "  ...props",
+        "}: React.ComponentProps<typeof LabelPrimitive.Text>) {",
+        "  return (",
+        "    <LabelPrimitive.Root",
+        "      className={cn(",
+        '        "flex select-none flex-row items-center gap-2",',
+        "        Platform.select({",
+        '          web: "cursor-default leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",',
+        "        }),",
+        '        disabled && "opacity-50"',
+        "      )}",
+        "      onPress={onPress}",
+        "      onLongPress={onLongPress}",
+        "      onPressIn={onPressIn}",
+        "      onPressOut={onPressOut}",
+        "      disabled={disabled}",
+        "    >",
+        "      <LabelPrimitive.Text",
+        "        className={cn(",
+        '          "text-foreground text-sm font-medium",',
+        '          Platform.select({ web: "leading-none" }),',
+        "          className",
+        "        )}",
+        "        {...props}",
+        "      />",
+        "    </LabelPrimitive.Root>",
+        "  );",
+        "}",
         "",
-        "export default Input;"
+        "export { Label };",
+        ""
       )
     },
+    // ─── components/ui/card.tsx ──────────────────────────────────────────
     {
       path: "src/components/ui/card.tsx",
       content: lines(
-        'import React from "react";',
-        'import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from "react-native";',
+        'import { Text, TextClassContext } from "@/src/components/ui/text";',
+        'import { cn } from "@/src/lib/utils";',
+        'import { View } from "react-native";',
+        "",
+        "function Card({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {",
+        "  return (",
+        '    <TextClassContext.Provider value="text-card-foreground">',
+        "      <View",
+        "        className={cn(",
+        '          "bg-card border-border flex flex-col gap-6 rounded-xl border py-6 shadow-sm shadow-black/5",',
+        "          className",
+        "        )}",
+        "        {...props}",
+        "      />",
+        "    </TextClassContext.Provider>",
+        "  );",
+        "}",
         "",
-        "interface CardProps {",
-        "  title?: string;",
-        "  description?: string;",
-        "  children: React.ReactNode;",
-        "  style?: StyleProp<ViewStyle>;",
-        "  titleStyle?: StyleProp<TextStyle>;",
-        "  descriptionStyle?: StyleProp<TextStyle>;",
-        '  padding?: "none" | "sm" | "md" | "lg";',
+        "function CardHeader({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {",
+        "  return (",
+        '    <View className={cn("flex flex-col gap-1.5 px-6", className)} {...props} />',
+        "  );",
         "}",
         "",
-        'const paddingMap: Record<NonNullable<CardProps["padding"]>, number> = {',
-        "  none: 0,",
-        "  sm: 8,",
-        "  md: 16,",
-        "  lg: 24,",
-        "};",
+        "function CardTitle({",
+        "  className,",
+        "  ref,",
+        "  ...props",
+        "}: React.ComponentProps<typeof Text> & React.RefAttributes<typeof Text>) {",
+        "  return (",
+        "    <Text",
+        "      ref={ref}",
+        '      role="heading"',
+        "      aria-level={3}",
+        '      className={cn("font-semibold leading-none", className)}',
+        "      {...props}",
+        "    />",
+        "  );",
+        "}",
         "",
-        "export function Card({",
-        "  title,",
-        "  description,",
-        "  children,",
-        "  style,",
-        "  titleStyle,",
-        "  descriptionStyle,",
-        '  padding = "md",',
-        "}: CardProps) {",
+        "function CardDescription({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof Text> & React.RefAttributes<typeof Text>) {",
         "  return (",
-        "    <View",
-        "      style={[",
-        "        {",
-        '          backgroundColor: "#ffffff",',
-        "          borderRadius: 12,",
-        "          borderWidth: 1,",
-        '          borderColor: "#e4e4e7",',
-        "          padding: paddingMap[padding],",
-        "        },",
-        "        style,",
-        "      ]}",
-        "    >",
-        "      {title && (",
-        "        <Text style={[styles.title, titleStyle]}>{title}</Text>",
+        '    <Text className={cn("text-muted-foreground text-sm", className)} {...props} />',
+        "  );",
+        "}",
+        "",
+        "function CardContent({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {",
+        "  return (",
+        '    <View className={cn("px-6", className)} {...props} />',
+        "  );",
+        "}",
+        "",
+        "function CardFooter({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {",
+        "  return (",
+        '    <View className={cn("flex flex-row items-center px-6", className)} {...props} />',
+        "  );",
+        "}",
+        "",
+        "export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };",
+        ""
+      )
+    },
+    // ─── components/ui/separator.tsx ──────────────────────────────────────
+    {
+      path: "src/components/ui/separator.tsx",
+      content: lines(
+        'import { cn } from "@/src/lib/utils";',
+        'import * as SeparatorPrimitive from "@rn-primitives/separator";',
+        "",
+        "function Separator({",
+        "  className,",
+        '  orientation = "horizontal",',
+        "  decorative = true,",
+        "  ...props",
+        "}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {",
+        "  return (",
+        "    <SeparatorPrimitive.Root",
+        "      decorative={decorative}",
+        "      orientation={orientation}",
+        "      className={cn(",
+        '        "bg-border shrink-0",',
+        '        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",',
+        "        className",
         "      )}",
-        "      {description && (",
-        "        <Text style={[styles.description, descriptionStyle]}>",
-        "          {description}",
-        "        </Text>",
+        "      {...props}",
+        "    />",
+        "  );",
+        "}",
+        "",
+        "export { Separator };",
+        ""
+      )
+    },
+    // ─── components/ui/alert-dialog.tsx ──────────────────────────────────
+    {
+      path: "src/components/ui/alert-dialog.tsx",
+      content: lines(
+        'import { buttonTextVariants, buttonVariants } from "@/src/components/ui/button";',
+        'import { TextClassContext } from "@/src/components/ui/text";',
+        'import { cn } from "@/src/lib/utils";',
+        'import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";',
+        'import * as React from "react";',
+        'import { Platform, View, type ViewProps } from "react-native";',
+        "",
+        "const AlertDialog = AlertDialogPrimitive.Root;",
+        "",
+        "const AlertDialogTrigger = AlertDialogPrimitive.Trigger;",
+        "",
+        "const AlertDialogPortal = AlertDialogPrimitive.Portal;",
+        "",
+        "function AlertDialogOverlay({",
+        "  className,",
+        "  ...props",
+        '}: Omit<React.ComponentProps<typeof AlertDialogPrimitive.Overlay>, "asChild"> & {',
+        "  children?: React.ReactNode;",
+        "}) {",
+        "  return (",
+        "    <AlertDialogPrimitive.Overlay",
+        "      className={cn(",
+        '        "absolute bottom-0 left-0 right-0 top-0 z-50 flex items-center justify-center bg-black/50 p-2",',
+        "        Platform.select({",
+        '          web: "animate-in fade-in-0 fixed",',
+        "        }),",
+        "        className",
         "      )}",
-        "      {children}",
-        "    </View>",
+        "      {...props}",
+        "    />",
         "  );",
         "}",
         "",
-        "const styles = {",
-        "  title: {",
-        "    fontSize: 18,",
-        '    fontWeight: "600",',
-        '    color: "#18181b",',
-        "    marginBottom: 4,",
-        "  } as TextStyle,",
-        "  description: {",
-        "    fontSize: 14,",
-        '    color: "#71717a",',
-        "    marginBottom: 12,",
-        "  } as TextStyle,",
-        "};",
+        "function AlertDialogContent({",
+        "  className,",
+        "  portalHost,",
+        "  ...props",
+        "}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {",
+        "  portalHost?: string;",
+        "}) {",
+        "  return (",
+        "    <AlertDialogPortal hostName={portalHost}>",
+        "      <AlertDialogOverlay>",
+        "        <AlertDialogPrimitive.Content",
+        "          className={cn(",
+        '            "bg-background border-border z-50 flex w-full max-w-[calc(100%-2rem)] flex-col gap-4 rounded-lg border p-6 shadow-lg shadow-black/5 sm:max-w-lg",',
+        "            Platform.select({",
+        '              web: "animate-in fade-in-0 zoom-in-95 duration-200",',
+        "            }),",
+        "            className",
+        "          )}",
+        "          {...props}",
+        "        />",
+        "      </AlertDialogOverlay>",
+        "    </AlertDialogPortal>",
+        "  );",
+        "}",
         "",
-        "export default Card;"
+        "function AlertDialogHeader({ className, ...props }: ViewProps) {",
+        "  return (",
+        '    <TextClassContext.Provider value="text-center sm:text-left">',
+        '      <View className={cn("flex flex-col gap-2", className)} {...props} />',
+        "    </TextClassContext.Provider>",
+        "  );",
+        "}",
+        "",
+        "function AlertDialogFooter({ className, ...props }: ViewProps) {",
+        "  return (",
+        '    <View className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props} />',
+        "  );",
+        "}",
+        "",
+        "function AlertDialogTitle({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {",
+        "  return (",
+        "    <AlertDialogPrimitive.Title",
+        '      className={cn("text-foreground text-lg font-semibold", className)}',
+        "      {...props}",
+        "    />",
+        "  );",
+        "}",
+        "",
+        "function AlertDialogDescription({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {",
+        "  return (",
+        "    <AlertDialogPrimitive.Description",
+        '      className={cn("text-muted-foreground text-sm", className)}',
+        "      {...props}",
+        "    />",
+        "  );",
+        "}",
+        "",
+        "function AlertDialogAction({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {",
+        "  return (",
+        "    <TextClassContext.Provider value={buttonTextVariants({ className })}>",
+        "      <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />",
+        "    </TextClassContext.Provider>",
+        "  );",
+        "}",
+        "",
+        "function AlertDialogCancel({",
+        "  className,",
+        "  ...props",
+        "}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {",
+        "  return (",
+        '    <TextClassContext.Provider value={buttonTextVariants({ className, variant: "outline" })}>',
+        "      <AlertDialogPrimitive.Cancel",
+        '          className={cn(buttonVariants({ variant: "outline" }), className)} {...props} />',
+        "    </TextClassContext.Provider>",
+        "  );",
+        "}",
+        "",
+        "export {",
+        "  AlertDialog,",
+        "  AlertDialogAction,",
+        "  AlertDialogCancel,",
+        "  AlertDialogContent,",
+        "  AlertDialogDescription,",
+        "  AlertDialogFooter,",
+        "  AlertDialogHeader,",
+        "  AlertDialogOverlay,",
+        "  AlertDialogPortal,",
+        "  AlertDialogTitle,",
+        "  AlertDialogTrigger,",
+        "};",
+        ""
       )
     }
   ]
@@ -2826,7 +3153,8 @@ function generateBaseTemplates(projectName) {
     // ─── app/_layout.tsx ────────────────────────────────────────────────
     {
       path: "app/_layout.tsx",
-      content: `import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native";
+      content: `import "../global.css";
+import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native";
 import { useFonts } from "expo-font";
 import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
@@ -3187,10 +3515,8 @@ export {};
     "slug": "${projectName}",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
     "splash": {
-      "image": "./assets/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
@@ -3199,15 +3525,8 @@ export {};
       "bundleIdentifier": "com.${projectName}.app"
     },
     "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
-      },
       "package": "com.${projectName}.app"
     },
-    "web": {
-      "favicon": "./assets/favicon.png"
-    },
     "plugins": [
       "expo-router",
       "expo-splash-screen"
@@ -3251,8 +3570,45 @@ module.exports = {
     "./app/**/*.{js,jsx,ts,tsx}",
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
+  presets: [require("nativewind/preset")],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+    },
   },
   plugins: [],
 };
@@ -3262,10 +3618,11 @@ module.exports = {
     {
       path: "metro.config.js",
       content: `const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
 
 const config = getDefaultConfig(__dirname);
 
-module.exports = config;
+module.exports = withNativeWind(config, { input: "./global.css" });
 `
     },
     // ─── babel.config.js ─────────────────────────────────────────────────
@@ -3274,10 +3631,67 @@ module.exports = config;
       content: `module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ["babel-preset-expo"],
-    plugins: ["nativewind/babel"],
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+    plugins: [],
   };
 };
+`
+    },
+    // ─── global.css (NativeWind CSS variables for rnr components) ─────────
+    {
+      path: "global.css",
+      content: `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
 `
     },
     // ─── .gitignore ─────────────────────────────────────────────────────
@@ -3326,6 +3740,392 @@ expo-env.d.ts
   ];
 }
 
+// src/templates/login-tabs.ts
+function generateLoginTabsTemplates(projectName) {
+  return [
+    // ─── app/_layout.tsx (overwrite base) ────────────────────────────────
+    {
+      path: "app/_layout.tsx",
+      content: lines(
+        'import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native";',
+        'import { useFonts } from "expo-font";',
+        'import { Stack } from "expo-router";',
+        'import * as SplashScreen from "expo-splash-screen";',
+        'import { useEffect } from "react";',
+        'import { useColorScheme } from "react-native";',
+        "",
+        'import { Colors } from "@/src/constants/Colors";',
+        "",
+        "SplashScreen.preventAutoHideAsync();",
+        "",
+        "export default function RootLayout() {",
+        "  const colorScheme = useColorScheme();",
+        "  const [loaded] = useFonts({",
+        '    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),',
+        "  });",
+        "",
+        "  useEffect(() => {",
+        "    if (loaded) {",
+        "      SplashScreen.hideAsync();",
+        "    }",
+        "  }, [loaded]);",
+        "",
+        "  if (!loaded) {",
+        "    return null;",
+        "  }",
+        "",
+        "  return (",
+        '    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>',
+        "      <Stack>",
+        '        <Stack.Screen name="login" options={{ headerShown: false }} />',
+        '        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />',
+        '        <Stack.Screen name="+not-found" />',
+        "      </Stack>",
+        "    </ThemeProvider>",
+        "  );",
+        "}",
+        ""
+      )
+    },
+    // ─── app/login.tsx ───────────────────────────────────────────────────
+    {
+      path: "app/login.tsx",
+      content: lines(
+        'import { SignInForm } from "@/src/components/SignInForm";',
+        'import { View } from "react-native";',
+        "",
+        "export default function LoginScreen() {",
+        "  return (",
+        '    <View className="flex-1 items-center justify-center p-4">',
+        "      <SignInForm />",
+        "    </View>",
+        "  );",
+        "}",
+        ""
+      )
+    },
+    // ─── app/(tabs)/_layout.tsx (overwrite base) ───────────────────────
+    {
+      path: "app/(tabs)/_layout.tsx",
+      content: lines(
+        'import { Tabs } from "expo-router";',
+        'import { Platform } from "react-native";',
+        "",
+        'import { Colors } from "@/src/constants/Colors";',
+        'import { useColorScheme } from "@/src/hooks/useColorScheme";',
+        "",
+        "export default function TabLayout() {",
+        "  const colorScheme = useColorScheme();",
+        "",
+        "  return (",
+        "    <Tabs",
+        "      screenOptions={{",
+        '        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,',
+        "        headerStyle: {",
+        '          backgroundColor: Colors[colorScheme ?? "light"].background,',
+        "        },",
+        "        headerShadowVisible: false,",
+        "        tabBarStyle: Platform.select({",
+        "          ios: {",
+        '            position: "absolute",',
+        "          },",
+        "          default: {},",
+        "        }),",
+        "      }}",
+        "    >",
+        "      <Tabs.Screen",
+        '        name="home"',
+        "        options={{",
+        '          title: "Home",',
+        "          tabBarIcon: () => null,",
+        "        }}",
+        "      />",
+        "      <Tabs.Screen",
+        '        name="list"',
+        "        options={{",
+        '          title: "List",',
+        "          tabBarIcon: () => null,",
+        "        }}",
+        "      />",
+        "      <Tabs.Screen",
+        '        name="mine"',
+        "        options={{",
+        '          title: "Mine",',
+        "          tabBarIcon: () => null,",
+        "        }}",
+        "      />",
+        "    </Tabs>",
+        "  );",
+        "}",
+        ""
+      )
+    },
+    // ─── app/(tabs)/home.tsx ────────────────────────────────────────────
+    {
+      path: "app/(tabs)/home.tsx",
+      content: lines(
+        'import { Button } from "@/src/components/ui/button";',
+        "import {",
+        "  AlertDialog,",
+        "  AlertDialogAction,",
+        "  AlertDialogCancel,",
+        "  AlertDialogContent,",
+        "  AlertDialogDescription,",
+        "  AlertDialogFooter,",
+        "  AlertDialogHeader,",
+        "  AlertDialogTitle,",
+        "  AlertDialogTrigger,",
+        '} from "@/src/components/ui/alert-dialog";',
+        'import { Text } from "@/src/components/ui/text";',
+        'import { View } from "react-native";',
+        "",
+        "export default function HomeScreen() {",
+        "  return (",
+        '    <View className="flex-1 gap-6 p-6">',
+        '      <Text variant="h3">UI Components</Text>',
+        '      <Text variant="muted">React Native Reusables components showcase</Text>',
+        "",
+        "      {/* Button variants */}",
+        '      <View className="gap-3">',
+        '        <Text variant="large">Buttons</Text>',
+        '        <View className="flex-row flex-wrap gap-2">',
+        "          <Button onPress={() => {}}>",
+        "            <Text>Default</Text>",
+        "          </Button>",
+        '          <Button variant="secondary" onPress={() => {}}>',
+        "            <Text>Secondary</Text>",
+        "          </Button>",
+        '          <Button variant="destructive" onPress={() => {}}>',
+        "            <Text>Destructive</Text>",
+        "          </Button>",
+        '          <Button variant="outline" onPress={() => {}}>',
+        "            <Text>Outline</Text>",
+        "          </Button>",
+        '          <Button variant="ghost" onPress={() => {}}>',
+        "            <Text>Ghost</Text>",
+        "          </Button>",
+        '          <Button variant="link" onPress={() => {}}>',
+        "            <Text>Link</Text>",
+        "          </Button>",
+        "        </View>",
+        "      </View>",
+        "",
+        "      {/* AlertDialog */}",
+        '      <View className="gap-3">',
+        '        <Text variant="large">Alert Dialog</Text>',
+        "        <AlertDialog>",
+        "          <AlertDialogTrigger asChild>",
+        '            <Button variant="outline">',
+        "              <Text>Show Alert</Text>",
+        "            </Button>",
+        "          </AlertDialogTrigger>",
+        "          <AlertDialogContent>",
+        "            <AlertDialogHeader>",
+        "              <AlertDialogTitle>Are you sure?</AlertDialogTitle>",
+        "              <AlertDialogDescription>",
+        "                This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
+        "              </AlertDialogDescription>",
+        "            </AlertDialogHeader>",
+        "            <AlertDialogFooter>",
+        "              <AlertDialogCancel>",
+        "                <Text>Cancel</Text>",
+        "              </AlertDialogCancel>",
+        "              <AlertDialogAction>",
+        "                <Text>Continue</Text>",
+        "              </AlertDialogAction>",
+        "            </AlertDialogFooter>",
+        "          </AlertDialogContent>",
+        "        </AlertDialog>",
+        "      </View>",
+        "    </View>",
+        "  );",
+        "}",
+        ""
+      )
+    },
+    // ─── app/(tabs)/list.tsx ────────────────────────────────────────────
+    {
+      path: "app/(tabs)/list.tsx",
+      content: lines(
+        'import { Text } from "@/src/components/ui/text";',
+        'import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/src/components/ui/card";',
+        'import { View, ScrollView } from "react-native";',
+        "",
+        "const ITEMS = Array.from({ length: 20 }, (_, i) => ({",
+        "  id: String(i + 1),",
+        "  title: `Item ${i + 1}`,",
+        "  description: `Description for item ${i + 1}`,",
+        "}));",
+        "",
+        "export default function ListScreen() {",
+        "  return (",
+        '    <ScrollView className="flex-1 p-4">',
+        '      <Text variant="h3" className="mb-4">List</Text>',
+        '      <View className="gap-3">',
+        "        {ITEMS.map((item) => (",
+        "          <Card key={item.id}>",
+        "            <CardHeader>",
+        "              <CardTitle>{item.title}</CardTitle>",
+        "              <CardDescription>{item.description}</CardDescription>",
+        "            </CardHeader>",
+        "            <CardContent />",
+        "          </Card>",
+        "        ))}",
+        "      </View>",
+        "    </ScrollView>",
+        "  );",
+        "}",
+        ""
+      )
+    },
+    // ─── app/(tabs)/mine.tsx ────────────────────────────────────────────
+    {
+      path: "app/(tabs)/mine.tsx",
+      content: lines(
+        'import { Button } from "@/src/components/ui/button";',
+        'import { Card, CardContent, CardHeader, CardTitle } from "@/src/components/ui/card";',
+        'import { Text } from "@/src/components/ui/text";',
+        'import { View } from "react-native";',
+        'import { router } from "expo-router";',
+        "",
+        "export default function MineScreen() {",
+        "  return (",
+        '    <View className="flex-1 p-6">',
+        '      <Text variant="h3" className="mb-6">Mine</Text>',
+        "",
+        '      <Card className="mb-6">',
+        "        <CardHeader>",
+        "          <CardTitle>Profile</CardTitle>",
+        "        </CardHeader>",
+        "        <CardContent>",
+        '          <View className="gap-2">',
+        '            <Text variant="muted">User Name</Text>',
+        "            <Text>user@example.com</Text>",
+        "          </View>",
+        "        </CardContent>",
+        "      </Card>",
+        "",
+        "      <Button",
+        '        variant="destructive"',
+        '        className="w-full"',
+        "        onPress={() => {",
+        '          router.replace("/login");',
+        "        }}",
+        "      >",
+        "        <Text>Sign Out</Text>",
+        "      </Button>",
+        "    </View>",
+        "  );",
+        "}",
+        ""
+      )
+    },
+    // ─── src/components/SignInForm.tsx ───────────────────────────────────
+    {
+      path: "src/components/SignInForm.tsx",
+      content: lines(
+        'import { Button } from "@/src/components/ui/button";',
+        "import {",
+        "  Card,",
+        "  CardContent,",
+        "  CardDescription,",
+        "  CardHeader,",
+        "  CardTitle,",
+        '} from "@/src/components/ui/card";',
+        'import { Input } from "@/src/components/ui/input";',
+        'import { Label } from "@/src/components/ui/label";',
+        'import { Separator } from "@/src/components/ui/separator";',
+        'import { Text } from "@/src/components/ui/text";',
+        'import * as React from "react";',
+        'import { Pressable, type TextInput, View } from "react-native";',
+        'import { router } from "expo-router";',
+        "",
+        "export function SignInForm() {",
+        "  const passwordInputRef = React.useRef<TextInput>(null);",
+        "",
+        "  function onEmailSubmitEditing() {",
+        "    passwordInputRef.current?.focus();",
+        "  }",
+        "",
+        "  function onSubmit() {",
+        "    // TODO: Submit form and navigate to protected screen if successful",
+        '    router.replace("/(tabs)/home");',
+        "  }",
+        "",
+        "  return (",
+        '    <View className="gap-6 w-full max-w-sm">',
+        '      <Card className="shadow-none sm:shadow-sm sm:shadow-black/5">',
+        "        <CardHeader>",
+        '          <CardTitle className="text-center text-xl sm:text-left">Sign in to your app</CardTitle>',
+        '          <CardDescription className="text-center sm:text-left">',
+        "            Welcome back! Please sign in to continue",
+        "          </CardDescription>",
+        "        </CardHeader>",
+        '        <CardContent className="gap-6">',
+        '          <View className="gap-6">',
+        '            <View className="gap-1.5">',
+        '              <Label nativeID="email">Email</Label>',
+        "              <Input",
+        '                placeholder="m@example.com"',
+        '                keyboardType="email-address"',
+        '                autoComplete="email"',
+        '                autoCapitalize="none"',
+        "                onSubmitEditing={onEmailSubmitEditing}",
+        '                returnKeyType="next"',
+        '                submitBehavior="submit"',
+        "              />",
+        "            </View>",
+        '            <View className="gap-1.5">',
+        '              <View className="flex-row items-center">',
+        '                <Label nativeID="password">Password</Label>',
+        "                <Button",
+        '                  variant="link"',
+        '                  size="sm"',
+        '                  className="ml-auto h-4 px-1 py-0 sm:h-4"',
+        "                  onPress={() => {",
+        "                    // TODO: Navigate to forgot password screen",
+        "                  }}",
+        "                >",
+        '                  <Text className="font-normal leading-4">Forgot your password?</Text>',
+        "                </Button>",
+        "              </View>",
+        "              <Input",
+        "                ref={passwordInputRef}",
+        "                secureTextEntry",
+        '                returnKeyType="send"',
+        "                onSubmitEditing={onSubmit}",
+        "              />",
+        "            </View>",
+        '            <Button className="w-full" onPress={onSubmit}>',
+        "              <Text>Continue</Text>",
+        "            </Button>",
+        "          </View>",
+        '          <Text className="text-center text-sm">',
+        '            Don&apos;t have an account?{" "}',
+        "            <Pressable",
+        "              onPress={() => {",
+        "                // TODO: Navigate to sign up screen",
+        "              }}",
+        "            >",
+        '              <Text className="text-sm underline underline-offset-4">Sign up</Text>',
+        "            </Pressable>",
+        "          </Text>",
+        '          <View className="flex-row items-center">',
+        '            <Separator className="flex-1" />',
+        '            <Text className="text-muted-foreground px-4 text-sm">or</Text>',
+        '            <Separator className="flex-1" />',
+        "          </View>",
+        "        </CardContent>",
+        "      </Card>",
+        "    </View>",
+        "  );",
+        "}",
+        ""
+      )
+    }
+  ];
+}
+
 // src/utils/file.ts
 var import_fs_extra = __toESM(require("fs-extra"));
 var import_path = __toESM(require("path"));
@@ -3388,7 +4188,8 @@ function generateBasePackageJson(projectName) {
       "react-native-safe-area-context": "~5.6.0",
       "react-native-screens": "~4.16.0",
       nativewind: "^4.1.0",
-      tailwindcss: "^3.4.0"
+      tailwindcss: "^3.4.0",
+      "react-native-svg": "^15.8.0"
     },
     devDependencies: {
       "@types/react": "~19.1.0",
@@ -3399,7 +4200,7 @@ function generateBasePackageJson(projectName) {
 
 // src/index.ts
 var import_execa = require("execa");
-var CLI_VERSION = "1.2.0";
+var CLI_VERSION = "1.3.1";
 var CONFIG_FILE = ".expo-bbase.json";
 async function run() {
   const program = new import_commander.Command();
@@ -3440,10 +4241,34 @@ async function createProject(projectName) {
     import_chalk.default.bold.cyan("  \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D")
   );
   console.log();
+  const { uiTemplate } = await (0, import_prompts.default)({
+    type: "select",
+    name: "uiTemplate",
+    message: "Choose a UI template",
+    choices: [
+      {
+        title: `${import_chalk.default.bold("Login + Tabs")} \u2014 Login page, Home/List/Mine tabs with rnr components`,
+        value: "login-tabs",
+        description: "Pre-built login form, 3-tab layout with Button & AlertDialog demos"
+      },
+      {
+        title: `${import_chalk.default.bold("Default")} \u2014 Blank tabs (Home + Explore)`,
+        value: "default",
+        description: "Minimal starter with basic tab navigation"
+      }
+    ],
+    initial: 0
+  });
+  if (uiTemplate === void 0) {
+    console.log(import_chalk.default.yellow("\nCancelled."));
+    process.exit(0);
+  }
+  const isLoginTabs = uiTemplate === "login-tabs";
   const choices = modules.map((m) => ({
     title: `${import_chalk.default.bold(m.name)} \u2014 ${import_chalk.default.gray(m.description)}`,
     value: m.id,
-    selected: m.defaultChecked
+    // Auto-select ui-reusables when login-tabs template is chosen
+    selected: isLoginTabs && m.id === "ui-reusables" ? true : m.defaultChecked
   }));
   const { selectedModules } = await (0, import_prompts.default)({
     type: "multiselect",
@@ -3457,11 +4282,20 @@ async function createProject(projectName) {
     console.log(import_chalk.default.yellow("\nCancelled."));
     process.exit(0);
   }
-  const selectedModuleDefs = getModulesByIds(selectedModules);
+  let finalModuleIds = selectedModules;
+  if (isLoginTabs && !finalModuleIds.includes("ui-reusables")) {
+    finalModuleIds = ["ui-reusables", ...finalModuleIds];
+  }
+  const selectedModuleDefs = getModulesByIds(finalModuleIds);
   const targetDir = import_path2.default.resolve(process.cwd(), projectName);
   console.log();
   console.log(import_chalk.default.white(`  \u{1F4E6} Project: ${import_chalk.default.bold(projectName)}`));
   console.log(import_chalk.default.white(`  \u{1F4C2} Path:    ${import_chalk.default.gray(targetDir)}`));
+  console.log(
+    import_chalk.default.white(
+      `  \u{1F3A8} Template: ${import_chalk.default.green(isLoginTabs ? "Login + Tabs" : "Default")}`
+    )
+  );
   console.log(
     import_chalk.default.white(
       `  \u{1F9E9} Modules: ${import_chalk.default.green(selectedModuleDefs.map((m) => m.name).join(", ") || "none")}`
@@ -3484,6 +4318,15 @@ async function createProject(projectName) {
         await writeFile(filePath, content);
       }
     }
+    if (isLoginTabs) {
+      spinner.text = "Writing UI template files...";
+      const loginTabsTemplates = generateLoginTabsTemplates(projectName);
+      for (const file of loginTabsTemplates) {
+        const filePath = import_path2.default.join(targetDir, file.path);
+        const content = replaceTemplateVars(file.content, { projectName });
+        await writeFile(filePath, content);
+      }
+    }
     spinner.text = "Generating package.json...";
     const pkgJson = generateBasePackageJson(projectName);
     const allDeps = {};
@@ -3507,8 +4350,9 @@ async function createProject(projectName) {
     await updateLayoutFile(targetDir, selectedModuleDefs);
     await writeProjectConfig(targetDir, {
       projectName,
-      selectedModules,
-      cliVersion: CLI_VERSION
+      selectedModules: finalModuleIds,
+      cliVersion: CLI_VERSION,
+      uiTemplate: isLoginTabs ? "login-tabs" : "default"
     });
     spinner.text = "Installing dependencies (yarn install)...";
     try {
@@ -3527,6 +4371,9 @@ async function createProject(projectName) {
     console.log(import_chalk.default.bold("  \u{1F389} Next steps:"));
     console.log(import_chalk.default.white(`     cd ${projectName}`));
     console.log(import_chalk.default.white("     npx expo start"));
+    if (isLoginTabs) {
+      console.log(import_chalk.default.gray("     \u2192 App starts at login page, sign in to see tabs"));
+    }
     console.log();
     if (selectedModuleDefs.length > 0) {
       console.log(import_chalk.default.bold("  \u{1F4CB} Selected modules:"));