MyCuppa

iOS Components Reference

Complete API reference for all Cuppa iOS components and utilities.

Core Components

CuppaButton

A versatile button component with multiple styles and states.

Props:

| Property | Type | Default | Description | |----------|------|---------|-------------| | title | String | required | Button label text | | style | ButtonStyle | .primary | Visual style | | size | ButtonSize | .medium | Button size | | isLoading | Bool | false | Show loading indicator | | isDisabled | Bool | false | Disable button | | icon | Image? | nil | Optional icon | | action | () -> Void | required | Tap handler |

Styles:

  • .primary - Filled button with primary color
  • .secondary - Filled button with secondary color
  • .outlined - Border-only button
  • .ghost - Text-only button
  • .destructive - Destructive action styling

Example:

CuppaButton(
    title: "Submit",
    style: .primary,
    size: .large,
    icon: Image(systemName: "checkmark"),
    action: { handleSubmit() }
)

CuppaTextField

Text input field with validation and formatting.

Props:

| Property | Type | Default | Description | |----------|------|---------|-------------| | text | Binding<String> | required | Text binding | | placeholder | String | "" | Placeholder text | | label | String? | nil | Field label | | keyboardType | UIKeyboardType | .default | Keyboard type | | validation | Validation? | nil | Validation rules | | leadingIcon | Image? | nil | Leading icon | | trailingIcon | Image? | nil | Trailing icon | | isDisabled | Bool | false | Disable input |

Validation Types:

  • .email - Email format
  • .phone - Phone number
  • .url - URL format
  • .required - Non-empty
  • .minLength(Int) - Minimum length
  • .maxLength(Int) - Maximum length
  • .pattern(String) - Regex pattern

Example:

@State private var email = ""

CuppaTextField(
    text: $email,
    placeholder: "Enter your email",
    label: "Email Address",
    keyboardType: .emailAddress,
    validation: .email,
    leadingIcon: Image(systemName: "envelope")
)

CuppaList

Enhanced list with search, refresh, and empty states.

Props:

| Property | Type | Default | Description | |----------|------|---------|-------------| | data | [T] | required | List items | | selection | Binding<T?>? | nil | Selected item | | emptyState | () -> View | nil | Empty state view | | content | (T) -> View | required | Row content |

Example:

CuppaList(
    items,
    selection: $selectedItem,
    emptyState: {
        Text("No items found")
    }
) { item in
    ItemRow(item: item)
}
.refreshable {
    await reload()
}

CuppaCard

Container with elevation and rounded corners.

Props:

| Property | Type | Default | Description | |----------|------|---------|-------------| | content | () -> View | required | Card content | | padding | EdgeInsets | .all(16) | Inner padding | | cornerRadius | CGFloat | 12 | Corner radius | | shadow | ShadowStyle | .medium | Shadow style |

Example:

CuppaCard(
    padding: .all(20),
    cornerRadius: 16,
    shadow: .large
) {
    VStack {
        Text("Card Title")
        Text("Card content")
    }
}

Layout Components

CuppaGrid

Responsive grid layout.

Props:

| Property | Type | Default | Description | |----------|------|---------|-------------| | items | [T] | required | Grid items | | columns | Int | 2 | Number of columns | | spacing | CGFloat | 16 | Item spacing | | content | (T) -> View | required | Item content |

Example:

CuppaGrid(
    items: products,
    columns: 3,
    spacing: 12
) { product in
    ProductCard(product: product)
}

CuppaStack

Flexible stack layout with spacing controls.

Example:

CuppaVStack(spacing: 16, alignment: .leading) {
    Text("Title")
    Text("Description")
}

CuppaHStack(spacing: 8) {
    Icon()
    Text("Label")
}

Navigation Components

CuppaNavigationStack

Navigation container with routing.

Example:

CuppaNavigationStack {
    HomeView()
        .cuppaRoute("/")

    DetailView()
        .cuppaRoute("/detail/:id")
}

CuppaTabView

Bottom tab navigation.

Example:

CuppaTabView {
    HomeView()
        .cuppaTab(
            title: "Home",
            icon: "house",
            badge: notificationCount
        )

    ProfileView()
        .cuppaTab(title: "Profile", icon: "person")
}

Modal Components

Bottom Sheet

Modifier:

.cuppaBottomSheet(
    isPresented: $showSheet,
    detents: [.medium, .large],
    content: { SheetContent() }
)

Modal

Modifier:

.cuppaModal(
    isPresented: $showModal,
    style: .fullScreen,
    content: { ModalView() }
)

Utilities

CuppaBridge

TypeScript ↔ Swift bridge.

Methods:

// Call TypeScript function
let result = try await CuppaBridge.call(
    function: "functionName",
    args: ["key": value]
)

// Register Swift function
CuppaBridge.register("nativeFunction") { args in
    // Handle call from TypeScript
    return result
}

CuppaStorage

Persistent storage utilities.

Methods:

// Save data
try await CuppaStorage.set(key: "user", value: userData)

// Read data
let data: User? = try await CuppaStorage.get(key: "user")

// Delete data
try await CuppaStorage.remove(key: "user")

// Clear all
try await CuppaStorage.clear()

CuppaRouter

Navigation and routing.

Methods:

// Navigate to route
CuppaRouter.push("/detail/123")

// Go back
CuppaRouter.pop()

// Replace current route
CuppaRouter.replace("/login")

// Get route params
let id = CuppaRouter.params["id"]

Theme

CuppaTheme

Customize appearance.

Properties:

struct CuppaTheme {
    var primaryColor: Color
    var secondaryColor: Color
    var backgroundColor: Color
    var textColor: Color
    var borderColor: Color

    var fontFamily: String
    var fontSize: CGFloat

    var cornerRadius: CGFloat
    var spacing: CGFloat
    var padding: CGFloat

    var shadowOpacity: Double
    var shadowRadius: CGFloat
}

Usage:

ContentView()
    .cuppaTheme(myCustomTheme)

Next Steps