@momo-kits/native-kits 0.0.1-beta.5 → 0.0.2-alpha.1-debug

package/ios/InputMoney/InputMoney.swift

@@ -0,0 +1,405 @@
+//
+//  InputMoney.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI reimplementation of Compose `InputMoney`.
+//  The bound `text` holds RAW DIGITS only (mirrors Compose, where the
+//  field stores the numeric string and a VisualTransformation renders the
+//  thousands-separated currency). Display formatting is applied live.
+//
+
+import Foundation
+import SwiftUI
+import UIKit
+
+// MARK: - Currency formatting
+
+/// Mirrors Compose `formatNumberToMoney` exactly (group separator ".").
+/// Input is a raw-digit string; output has thousands separators + currency.
+public func formatNumberToMoney(_ digits: String, currency: String = "đ") -> String {
+    let numeric = digits.filter { $0.isNumber }
+    if numeric.isEmpty || numeric == "0" {
+        return "0" + currency
+    }
+    // Strip leading zeros to match Long parsing semantics.
+    var trimmed = String(numeric.drop(while: { $0 == "0" }))
+    if trimmed.isEmpty { trimmed = "0" }
+    if trimmed == "0" {
+        return "0" + currency
+    }
+    if trimmed.count < 3 {
+        return trimmed + currency
+    }
+    var chars: [Character] = []
+    var count = 0
+    let reversed = Array(trimmed.reversed())
+    for i in 0..<reversed.count {
+        count += 1
+        chars.append(reversed[i])
+        // i counts from the least significant digit; original index = len-1-i.
+        let originalIndex = reversed.count - 1 - i
+        if count == 3 && originalIndex >= 1 {
+            chars.append(".")
+            count = 0
+        }
+    }
+    return String(chars.reversed()) + currency
+}
+
+private func isMoneyDigit(_ char: Character) -> Bool { char.isASCII && char.isNumber }
+
+/// Applies an edit of `display[start..<end]` → `inserted` to the digits of `display`.
+/// Separators and currency are never deleted: removing a separator deletes the
+/// digit before it instead, removing only the currency leaves the digits untouched. Returns the new digits and the caret as a digit index.
+private func applyMoneyEdit(_ display: String, start: Int, end: Int, inserted: String) -> (digits: String, caretDigit: Int) {
+    let chars = Array(display)
+    let start = min(start, chars.count)
+    let end = min(max(end, start), chars.count)
+    let digits = chars.filter(isMoneyDigit)
+    var left = chars[..<start].filter(isMoneyDigit).count
+    var removed = chars[start..<end].filter(isMoneyDigit).count
+    let insertedDigits = inserted.filter(isMoneyDigit)
+    if removed == 0 && insertedDigits.isEmpty && left > 0 && chars[start..<end].contains(".") {
+        left -= 1
+        removed = 1
+    }
+    if removed == 0 && insertedDigits.isEmpty {
+        return (String(digits), left)
+    }
+    let next = String(digits[..<left]) + insertedDigits + String(digits[(left + removed)...])
+    var trimmed = String(next.drop(while: { $0 == "0" }))
+    if trimmed.isEmpty { trimmed = String(next.prefix(1)) }
+    return (trimmed, max(0, left + insertedDigits.count - (next.count - trimmed.count)))
+}
+
+/// Caret offset right after the `digitIndex`-th digit of `display`.
+private func moneyCaret(_ display: String, digitIndex: Int) -> Int {
+    var count = 0
+    for (index, char) in display.enumerated() where isMoneyDigit(char) {
+        count += 1
+        if count == digitIndex { return index + 1 }
+    }
+    return 0
+}
+
+// MARK: - InputMoney
+
+public struct InputMoney: View {
+    @Environment(\.appTheme) private var theme
+    @Environment(\.momoFontScale) private var fontScale
+    @Binding public var text: String
+
+    public var floatingValue: String
+    public var floatingValueColor: Color?
+    public var floatingIcon: String
+    public var floatingIconColor: Color?
+    public var placeholder: String
+    public var size: InputSize
+    public var error: String
+    public var errorSpacing: Bool
+    public var disabled: Bool
+    public var icon: String
+    public var iconColor: Color?
+    public var leadingIcon: String
+    public var leadingIconColor: Color?
+    public var loading: Bool
+    public var required: Bool
+    public var fontWeight: InputFontWeight
+    public var keyboardType: UIKeyboardType
+    public var onChangeText: ((String) -> Void)?
+    public var onPressIcon: (() -> Void)?
+    public var onFocus: (() -> Void)?
+    public var onBlur: (() -> Void)?
+
+    @State private var isFocused: Bool = false
+    @State private var floatingLabelHeight: CGFloat = 16
+
+    public init(
+        text: Binding<String>,
+        floatingValue: String = "",
+        floatingValueColor: Color? = nil,
+        floatingIcon: String = "",
+        floatingIconColor: Color? = nil,
+        placeholder: String = "0đ",
+        size: InputSize = .small,
+        error: String = "",
+        errorSpacing: Bool = false,
+        disabled: Bool = false,
+        icon: String = "",
+        iconColor: Color? = nil,
+        leadingIcon: String = "",
+        leadingIconColor: Color? = nil,
+        loading: Bool = false,
+        required: Bool = false,
+        fontWeight: InputFontWeight = .bold,
+        keyboardType: UIKeyboardType = .numberPad,
+        onChangeText: ((String) -> Void)? = nil,
+        onPressIcon: (() -> Void)? = nil,
+        onFocus: (() -> Void)? = nil,
+        onBlur: (() -> Void)? = nil
+    ) {
+        self._text = text
+        self.floatingValue = floatingValue
+        self.floatingValueColor = floatingValueColor
+        self.floatingIcon = floatingIcon
+        self.floatingIconColor = floatingIconColor
+        self.placeholder = placeholder
+        self.size = size
+        self.error = error
+        self.errorSpacing = errorSpacing
+        self.disabled = disabled
+        self.icon = icon
+        self.iconColor = iconColor
+        self.leadingIcon = leadingIcon
+        self.leadingIconColor = leadingIconColor
+        self.loading = loading
+        self.required = required
+        self.fontWeight = fontWeight
+        self.keyboardType = keyboardType
+        self.onChangeText = onChangeText
+        self.onPressIcon = onPressIcon
+        self.onFocus = onFocus
+        self.onBlur = onBlur
+    }
+
+    // MARK: - Body
+
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 4) {
+            ZStack(alignment: .topLeading) {
+                // Floating label
+                if !floatingValue.isEmpty || !floatingIcon.isEmpty {
+                    HStack(spacing: Spacing.XS) {
+                        MomoText(floatingValue, typography: .labelSMedium, color: floatingTitleColor)
+                        if required {
+                            MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
+                        }
+                        if !floatingIcon.isEmpty {
+                            Icon(source: floatingIcon, size: 16, color: floatingIconTintColor)
+                        }
+                    }
+                    .padding(.horizontal, Spacing.S)
+                    .background(
+                        GeometryReader { geo in
+                            Color.clear.onAppear { floatingLabelHeight = geo.size.height }
+                        }
+                    )
+                    .background(theme.colors.background.surface)
+                    // Kotlin centers the label within the box-height-tall decorationBox by
+                    // default, then applies `offsetY = -size.values.height / 2` — net effect:
+                    // the label ends up centered exactly on the box's top border. Our ZStack
+                    // anchors top-leading instead, so matching that requires offsetting by
+                    // half the label's OWN measured height, not half the box height.
+                    .offset(x: Spacing.S, y: -floatingLabelHeight / 2)
+                    .zIndex(10)
+                }
+
+                // Input container
+                HStack(alignment: .center, spacing: 0) {
+                    // Leading icon
+                    if !leadingIcon.isEmpty {
+                        Icon(source: leadingIcon, size: size == .small ? 24 : 32, color: leadingIconTintColor)
+                            .padding(.trailing, Spacing.XS)
+                    }
+
+                    // Money field
+                    ZStack(alignment: .leading) {
+                        if text.filter({ $0.isNumber }).isEmpty {
+                            MomoText(
+                                placeholder,
+                                typography: fontWeight == .bold ? .actionSBold : .bodyDefaultRegular,
+                                color: placeholderColor
+                            )
+                        }
+                        MoneyTextField(
+                            digits: $text,
+                            keyboardType: keyboardType,
+                            fontWeight: fontWeight == .bold ? .bold : .regular,
+                            textColor: UIColor(textColor),
+                            cursorColor: UIColor(theme.colors.primary),
+                            isDisabled: disabled,
+                            onFocusChange: { focused in handleFocusChange(focused) },
+                            onChangeText: onChangeText
+                        )
+                    }
+                    .frame(maxWidth: .infinity, alignment: .leading)
+
+                    // Clear button (focused + has value)
+                    if isFocused && !text.filter({ $0.isNumber }).isEmpty {
+                        SwiftUI.Button(action: {
+                            text = ""
+                            onChangeText?("")
+                        }) {
+                            Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
+                                .padding(.leading, Spacing.XS)
+                                .accessibility(identifier: "ic_clear")
+                        }
+                    }
+
+                    // Loading indicator and right icon can both render (mirrors
+                    // Compose's two independent `if` blocks, not if/else).
+                    if loading {
+                        ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                            .frame(width: 16, height: 16)
+                            .padding(.leading, Spacing.S)
+                    }
+                    if !icon.isEmpty {
+                        SwiftUI.Button(action: { onPressIcon?() }) {
+                            Icon(source: icon, size: 24, color: iconTintColor)
+                                .padding(.leading, Spacing.S)
+                        }
+                    }
+                }
+                .padding(.horizontal, Spacing.M)
+                .frame(height: fontScale(size == .small ? 48 : 56))
+                .background(
+                    RoundedRectangle(cornerRadius: Radius.S)
+                        .fill(theme.colors.background.surface)
+                )
+                .overlay(
+                    RoundedRectangle(cornerRadius: Radius.S)
+                        .stroke(borderColor, lineWidth: 1)
+                )
+            }
+
+            ErrorView(errorMessage: error, errorSpacing: errorSpacing, hintText: "")
+        }
+        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification)) { _ in
+            if isFocused {
+                DispatchQueue.main.async { handleFocusChange(false) }
+            }
+        }
+    }
+
+    // MARK: - Helpers
+
+    private func handleFocusChange(_ focused: Bool) {
+        guard isFocused != focused else { return }
+        isFocused = focused
+        if focused { onFocus?() } else { onBlur?() }
+    }
+
+    private var borderColor: Color {
+        if disabled { return theme.colors.border.disable }
+        if !error.isEmpty { return theme.colors.error.primary }
+        if isFocused { return theme.colors.primary }
+        return theme.colors.border.default
+    }
+
+    private var textColor: Color { disabled ? theme.colors.text.disable : theme.colors.text.default }
+    private var placeholderColor: Color { disabled ? theme.colors.text.disable : theme.colors.text.hint }
+    private var iconTintColor: Color { disabled ? theme.colors.text.disable : (iconColor ?? theme.colors.text.default) }
+    private var leadingIconTintColor: Color { disabled ? theme.colors.text.disable : (leadingIconColor ?? theme.colors.text.hint) }
+    private var floatingTitleColor: Color { disabled ? theme.colors.text.disable : (floatingValueColor ?? theme.colors.text.hint) }
+    private var floatingIconTintColor: Color { disabled ? theme.colors.text.disable : (floatingIconColor ?? theme.colors.text.default) }
+}
+
+// MARK: - MoneyTextField (UIViewRepresentable)
+
+/// A UITextField that shows live thousands-separated currency while the bound
+/// `digits` string holds only the raw numeric value. The caret can move freely
+/// but never past the trailing currency symbol; edits apply at the caret.
+private struct MoneyTextField: UIViewRepresentable {
+    @Binding var digits: String
+    var keyboardType: UIKeyboardType
+    var fontWeight: UIFont.Weight
+    var textColor: UIColor
+    var cursorColor: UIColor
+    var isDisabled: Bool
+    var onFocusChange: (Bool) -> Void
+    var onChangeText: ((String) -> Void)?
+
+    func makeCoordinator() -> Coordinator { Coordinator(self) }
+
+    func makeUIView(context: Context) -> UITextField {
+        let field = UITextField()
+        field.delegate = context.coordinator
+        field.keyboardType = keyboardType
+        field.font = UIFont.systemFont(ofSize: context.environment.momoFontScale(20), weight: fontWeight)
+        field.textColor = textColor
+        field.isEnabled = !isDisabled
+        field.tintColor = cursorColor
+        field.setContentHuggingPriority(.defaultLow, for: .horizontal)
+        field.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+        field.text = displayValue(digits)
+        return field
+    }
+
+    func updateUIView(_ field: UITextField, context: Context) {
+        context.coordinator.parent = self
+        // Re-applied here, not just in makeUIView, so a font-scale change reaches an existing field.
+        field.font = UIFont.systemFont(ofSize: context.environment.momoFontScale(20), weight: fontWeight)
+        field.isEnabled = !isDisabled
+        field.textColor = textColor
+        field.tintColor = cursorColor
+        let expected = displayValue(digits)
+        if field.text != expected {
+            field.text = expected
+            context.coordinator.setCaret(field, offset: moneyCaret(expected, digitIndex: expected.filter(isMoneyDigit).count))
+        }
+    }
+
+    fileprivate func displayValue(_ raw: String) -> String {
+        let numeric = raw.filter { $0.isNumber }
+        return numeric.isEmpty ? "" : formatNumberToMoney(numeric)
+    }
+
+    final class Coordinator: NSObject, UITextFieldDelegate {
+        var parent: MoneyTextField
+
+        init(_ parent: MoneyTextField) { self.parent = parent }
+
+        func textFieldDidBeginEditing(_ textField: UITextField) {
+            parent.onFocusChange(true)
+        }
+
+        func textFieldDidEndEditing(_ textField: UITextField) {
+            parent.onFocusChange(false)
+        }
+
+        func textFieldShouldReturn(_ textField: UITextField) -> Bool {
+            textField.resignFirstResponder()
+            return true
+        }
+
+        func textField(
+            _ textField: UITextField,
+            shouldChangeCharactersIn range: NSRange,
+            replacementString string: String
+        ) -> Bool {
+            let (numeric, caretDigit) = applyMoneyEdit(
+                textField.text ?? "",
+                start: range.location,
+                end: range.location + range.length,
+                inserted: string
+            )
+            let formatted = parent.displayValue(numeric)
+            textField.text = formatted
+            setCaret(textField, offset: moneyCaret(formatted, digitIndex: caretDigit))
+            if parent.digits != numeric {
+                parent.digits = numeric
+                parent.onChangeText?(numeric)
+            }
+            return false
+        }
+
+        // Keeps the caret out of the currency suffix.
+        func textFieldDidChangeSelection(_ textField: UITextField) {
+            guard let text = textField.text, !text.isEmpty,
+                  let range = textField.selectedTextRange,
+                  let limit = textField.position(from: textField.endOfDocument, offset: -1)
+            else { return }
+            let start = textField.compare(range.start, to: limit) == .orderedDescending ? limit : range.start
+            let end = textField.compare(range.end, to: limit) == .orderedDescending ? limit : range.end
+            if start != range.start || end != range.end {
+                textField.selectedTextRange = textField.textRange(from: start, to: end)
+            }
+        }
+
+        func setCaret(_ textField: UITextField, offset: Int) {
+            if let position = textField.position(from: textField.beginningOfDocument, offset: offset) {
+                textField.selectedTextRange = textField.textRange(from: position, to: position)
+            }
+        }
+    }
+}

package/ios/InputOTP/InputOTP.swift

@@ -0,0 +1,211 @@
+import Foundation
+import SwiftUI
+
+// MARK: - OTPCaret
+
+/// Blinking caret shown at the active OTP cell, mirroring Compose `OTPCaret`.
+private struct OTPCaret: View {
+    @Environment(\.appTheme) private var theme
+    @State private var visible: Bool = true
+    @Environment(\.momoFontScale) private var fontScale
+
+    var body: some View {
+        HStack(spacing: 0) {
+            Rectangle()
+                .fill(theme.colors.primary)
+                .frame(width: 1, height: fontScale(12))
+                .opacity(visible ? 1 : 0)
+                .animation(
+                    .linear(duration: 0.5).repeatForever(autoreverses: true),
+                    value: visible
+                )
+            MomoText("-", typography: .descriptionDefaultRegular, color: theme.colors.text.hint)
+        }
+        .onAppear { visible = false }
+    }
+}
+
+// MARK: - InputOTP
+
+/// Native SwiftUI port of Compose `InputOTP`.
+///
+/// A row of OTP cells driven by a hidden `TextField`. When `length` is provided
+/// it renders fixed-count slots (`-` placeholders + blinking caret); otherwise it
+/// renders the typed characters followed by a trailing caret while focused.
+public struct InputOTP: View {
+    @Environment(\.appTheme) private var theme
+    @Binding public var value: String
+
+    public var length: Int?
+    public var errorMessage: String
+    public var errorSpacing: Bool
+    public var floatingValue: String
+    public var placeholder: String
+    public var dataType: String
+    public var onChangeText: ((String) -> Void)?
+    public var onFocus: (() -> Void)?
+    public var onBlur: (() -> Void)?
+
+    @FocusState private var isFocused: Bool
+    @State private var hasBeenFocused: Bool = false
+
+    private var maxLength: Int { length ?? 10 }
+
+    public init(
+        value: Binding<String>,
+        length: Int? = nil,
+        errorMessage: String = "",
+        errorSpacing: Bool = false,
+        floatingValue: String = "Label",
+        placeholder: String = "",
+        dataType: String = "number",
+        onChangeText: ((String) -> Void)? = nil,
+        onFocus: (() -> Void)? = nil,
+        onBlur: (() -> Void)? = nil
+    ) {
+        self._value = value
+        self.length = length
+        self.errorMessage = errorMessage
+        self.errorSpacing = errorSpacing
+        self.floatingValue = floatingValue
+        self.placeholder = placeholder
+        self.dataType = dataType
+        self.onChangeText = onChangeText
+        self.onFocus = onFocus
+        self.onBlur = onBlur
+    }
+
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            ZStack {
+                // Hidden text field that owns the keyboard / cursor.
+                hiddenField
+
+                // Floating label over the border.
+                if !floatingValue.isEmpty {
+                    HStack {
+                        MomoText(floatingValue, typography: .labelSMedium, color: theme.colors.text.hint)
+                    }
+                    .padding(.horizontal, Spacing.S)
+                    .background(theme.colors.background.surface)
+                    .offset(y: -28)
+                    .zIndex(10)
+                }
+
+                // Bordered container with cells.
+                cells
+                    .frame(maxWidth: .infinity)
+                    .frame(height: 56)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: Radius.S)
+                            .stroke(borderColor, lineWidth: 1)
+                    )
+
+                // Trailing clear button.
+                HStack {
+                    Spacer()
+                    SwiftUI.Button(action: clearText) {
+                        Icon(source: "24_navigation_close_circle_full", size: 12, color: theme.colors.text.hint)
+                            .padding(.trailing, 12)
+                    }
+                }
+                .zIndex(10)
+            }
+            .frame(height: 56)
+            .contentShape(Rectangle())
+            .onTapGesture { isFocused = true }
+
+            ErrorView(errorMessage: errorMessage, errorSpacing: errorSpacing, hintText: "")
+        }
+    }
+
+    // MARK: Subviews
+
+    private var hiddenField: some View {
+        TextField("", text: Binding(
+            get: { value },
+            set: { handleChangeText($0) }
+        ))
+        .keyboardType(dataType == "number" ? .numberPad : .asciiCapable)
+        .focused($isFocused)
+        .foregroundColor(.clear)
+        .accentColor(.clear)
+        .frame(maxWidth: .infinity)
+        .frame(height: 56)
+        .opacity(0.01)
+        .onChange(of: isFocused) { focused in
+            if focused {
+                onFocus?()
+                hasBeenFocused = true
+            } else if hasBeenFocused {
+                onBlur?()
+            }
+        }
+    }
+
+    @ViewBuilder
+    private var cells: some View {
+        if let length = length {
+            HStack(spacing: Spacing.L) {
+                ForEach(0 ..< length, id: \.self) { i in
+                    cell(at: i)
+                }
+            }
+            .padding(.vertical, 8)
+        } else {
+            HStack(spacing: Spacing.L) {
+                if value.isEmpty && !isFocused && !placeholder.isEmpty {
+                    MomoText(placeholder, typography: .descriptionDefaultRegular, color: theme.colors.text.hint)
+                } else {
+                    ForEach(Array(value.enumerated()), id: \.offset) { _, ch in
+                        MomoText(String(ch), typography: .headerDefaultBold, color: theme.colors.text.default)
+                    }
+                    if isFocused && value.count != maxLength {
+                        OTPCaret()
+                    }
+                }
+            }
+            .padding(.vertical, 8)
+        }
+    }
+
+    @ViewBuilder
+    private func cell(at index: Int) -> some View {
+        if isFocused && value.count == index {
+            OTPCaret()
+        } else {
+            let chars = Array(value)
+            let filled = index < chars.count
+            MomoText(
+                filled ? String(chars[index]) : "-",
+                typography: filled ? .headerDefaultBold : .descriptionDefaultRegular,
+                color: filled ? theme.colors.text.default : theme.colors.text.hint
+            )
+        }
+    }
+
+    // MARK: Logic
+
+    private func handleChangeText(_ text: String) {
+        let validData = dataType != "number" || text.allSatisfy { $0.isNumber }
+        let changed = text.count != value.count
+        if text.count <= maxLength && validData && changed {
+            value = text
+            onChangeText?(text)
+        }
+    }
+
+    private func clearText() {
+        handleChangeText("")
+    }
+
+    private var borderColor: Color {
+        if !errorMessage.isEmpty {
+            return theme.colors.error.primary
+        }
+        if isFocused {
+            return theme.colors.primary
+        }
+        return theme.colors.border.default
+    }
+}

package/ios/Layout/GridContext.swift

@@ -0,0 +1,30 @@
+import SwiftUI
+
+/// Grid metrics published by a layout container (`SectionView`) so span-based children
+/// can size themselves. Mirrors `vn.momo.kits.layout.GridContext`.
+public struct GridContext: Equatable {
+    public let numberOfColumns: Int
+    public let gutter: CGFloat
+    public let sizePerSpan: CGFloat
+
+    public init(numberOfColumns: Int = 12, gutter: CGFloat = Spacing.M, sizePerSpan: CGFloat = 0) {
+        self.numberOfColumns = numberOfColumns
+        self.gutter = gutter
+        self.sizePerSpan = sizePerSpan
+    }
+
+    public func sizeForSpan(_ span: Int) -> CGFloat {
+        sizePerSpan * CGFloat(span) + gutter * CGFloat(span - 1)
+    }
+}
+
+private struct GridContextKey: EnvironmentKey {
+    static let defaultValue: GridContext? = nil
+}
+
+public extension EnvironmentValues {
+    var gridContext: GridContext? {
+        get { self[GridContextKey.self] }
+        set { self[GridContextKey.self] = newValue }
+    }
+}

package/ios/Layout/Item.swift

@@ -0,0 +1,42 @@
+import SwiftUI
+
+/// Span-sized cell inside a `SectionView`. Reads the grid published by its container;
+/// without one it just wraps its content. Mirrors `vn.momo.kits.layout.Item`.
+public struct ItemView<Content: View>: View {
+    // MARK: Lifecycle
+
+    public init(
+        widthSpan: Int = 12,
+        heightSpan: Int = 0,
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.widthSpan = widthSpan
+        self.heightSpan = heightSpan
+        self.content = content
+    }
+
+    // MARK: Public
+
+    public var body: some View {
+        // A VStack (not a ZStack) so multiple children flow VERTICALLY instead of stacking
+        // on top of each other — matches the React Item's flex-column content.
+        VStack(alignment: .leading, spacing: 0) { content() }
+            .frame(width: width, height: height, alignment: .topLeading)
+    }
+
+    // MARK: Private
+
+    private let widthSpan: Int
+    private let heightSpan: Int
+    private let content: () -> Content
+
+    @Environment(\.gridContext) private var grid
+
+    private var width: CGFloat? {
+        grid.map { $0.sizeForSpan(widthSpan) }
+    }
+
+    private var height: CGFloat? {
+        heightSpan > 0 ? grid.map { $0.sizeForSpan(heightSpan) } : nil
+    }
+}