react-native-tinyui 0.4.0 → 1.0.0

package/src/index.tsx

@@ -1,6 +1,18 @@
 export { Menu } from './Menu';
+export { TipKit } from './TipKit';
+export type {
+  TipAction,
+  TipDisplayFrequency,
+  TipError,
+  TipInvalidationReason,
+  TipPopoverProps,
+  TipKitConfiguration,
+  TipStatus,
+} from './TipKit';
 export type {
   MenuActionOption,
+  MenuActionPressEvent,
+  MenuActionPressEventData,
   MenuDividerOption,
   MenuItemState,
   MenuOption,
@@ -9,6 +21,24 @@ export type {
   MenuSubmenuOption,
 } from './Menu';
 
+export { Stepper } from './Stepper';
+export type { StepperProps } from './Stepper';
+
+export { ConcentricView } from './ConcentricView';
+export type { ConcentricViewProps } from './ConcentricView';
+
+export { SFSymbol } from './SFSymbol';
+export type {
+  SFSymbolContentTransition,
+  SFSymbolEffect,
+  SFSymbolEffectOptions,
+  SFSymbolProps,
+  SFSymbolRenderingMode,
+  SFSymbolScale,
+  SFSymbolTextStyle,
+  SFSymbolWeight,
+} from './SFSymbol';
+
 export { Popover, PopoverClose } from './Popover';
 export type {
   PopoverArrowEdge,
@@ -24,10 +54,8 @@ export type { TinyuiComponent } from './utils';
 
 export { LiquidGlassText } from './LiquidGlassText';
 export type {
-  LiquidGlassTextFont,
   LiquidGlassTextFontDesign,
-  LiquidGlassTextFontStyle,
-  LiquidGlassTextFontWeight,
-  LiquidGlassTextGlass,
+  LiquidGlassTextEffect,
   LiquidGlassTextProps,
+  LiquidGlassTextStyle,
 } from './LiquidGlassText';

package/src/utils/getNativeTinyui.ts

@@ -1,6 +1,13 @@
 import NativeTinyui, { type Spec } from '../NativeTinyui';
 
-export type TinyuiComponent = 'Menu' | 'Popover' | 'LiquidGlassText';
+export type TinyuiComponent =
+  | 'Menu'
+  | 'Popover'
+  | 'LiquidGlassText'
+  | 'Stepper'
+  | 'ConcentricView'
+  | 'SFSymbol'
+  | 'TipKit';
 
 let nativeTinyui: Spec | null | undefined;
 let enabledComponents: ReadonlySet<string> | undefined;

package/ios/Core/TinyuiHostingHelpers.swift

@@ -1,74 +0,0 @@
-import SwiftUI
-import UIKit
-
-/**
- * Identifiable wrapper used to render React Native views (UIView) inside
- * SwiftUI. Modeled after react-native-pager-view's bridge.
- */
-struct IdentifiablePlatformView: Identifiable, Equatable {
-  let id = UUID()
-  let view: UIView
-
-  init(_ view: UIView) {
-    self.view = view
-  }
-}
-
-/**
- * Renders a UIView inside SwiftUI. Uses UIViewControllerRepresentable so the
- * hosted React view keeps a valid view-controller hierarchy.
- */
-struct RepresentableView: UIViewControllerRepresentable {
-  var view: UIView
-
-  func makeUIViewController(context: Context) -> PlatformChildViewController {
-    let viewController = PlatformChildViewController()
-    viewController.wrappedView = view
-    return viewController
-  }
-
-  func updateUIViewController(
-    _ uiViewController: PlatformChildViewController,
-    context: Context
-  ) {
-    if uiViewController.wrappedView !== view {
-      uiViewController.wrappedView = view
-    }
-  }
-}
-
-class PlatformChildViewController: UIViewController {
-  var wrappedView: UIView? {
-    didSet {
-      guard oldValue !== wrappedView else { return }
-      oldValue?.removeFromSuperview()
-      if isViewLoaded {
-        mountWrappedView()
-      }
-    }
-  }
-
-  override func viewDidLoad() {
-    super.viewDidLoad()
-    view.backgroundColor = .clear
-    mountWrappedView()
-  }
-
-  private func mountWrappedView() {
-    guard let wrappedView else { return }
-    view.addSubview(wrappedView)
-    wrappedView.translatesAutoresizingMaskIntoConstraints = false
-    wrappedView.pinEdges(to: view)
-  }
-}
-
-extension UIView {
-  func pinEdges(to other: UIView) {
-    NSLayoutConstraint.activate([
-      leadingAnchor.constraint(equalTo: other.leadingAnchor),
-      trailingAnchor.constraint(equalTo: other.trailingAnchor),
-      topAnchor.constraint(equalTo: other.topAnchor),
-      bottomAnchor.constraint(equalTo: other.bottomAnchor),
-    ])
-  }
-}

package/ios/Menu/TinyuiMenuViewSwift.swift

@@ -1,408 +0,0 @@
-import SwiftUI
-import UIKit
-
-/**
- * Observable props shared between the Objective-C++ component view and the
- * SwiftUI `Menu` implementation. Mirror of `TinyuiMenuProps` in codegen.
- */
-class TinyuiMenuProps: ObservableObject {
-  @Published var menuConfig: String = "{}"
-  @Published var title: String = ""
-  @Published var disabled: Bool = false
-  @Published var hasPrimaryAction: Bool = false
-  @Published var triggerView: UIView?
-}
-
-/**
- * SwiftUI `Menu` backed by UIKit's UIMenu, matching expo-ui's MenuView.
- *
- * The React Native trigger (a UIView) is embedded as the menu label through
- * `RepresentableView`, so the tap target remains the native RN subtree while
- * the menu content is built natively from the JSON config.
- *
- * Named distinctly from the Fabric component view `TinyuiMenuView`.
- */
-struct TinyuiMenuSwiftUIView: View {
-  @ObservedObject var props: TinyuiMenuProps
-  weak var delegate: TinyuiMenuViewDelegate?
-
-  var body: some View {
-    Group {
-      if let triggerView = props.triggerView {
-        if props.hasPrimaryAction {
-          Menu {
-            menuContent
-          } label: {
-            RepresentableView(view: triggerView)
-          } primaryAction: {
-            delegate?.onPrimaryAction()
-          }
-          .disabled(props.disabled)
-        } else {
-          Menu {
-            menuContent
-          } label: {
-            RepresentableView(view: triggerView)
-          }
-          .disabled(props.disabled)
-        }
-      } else {
-        // No trigger mounted yet; render an empty view until the RN child
-        // is attached to the provider.
-        Color.clear
-      }
-    }
-  }
-
-  @ViewBuilder
-  private var menuContent: some View {
-    if props.title.isEmpty {
-      elementsContent
-    } else {
-      Section {
-        elementsContent
-      } header: {
-        Text(props.title)
-      }
-    }
-  }
-
-  @ViewBuilder
-  private var elementsContent: some View {
-    ForEach(buildElements(from: props.menuConfig)) { element in
-      element.buildView(delegate: delegate)
-    }
-  }
-
-  /// Parses the JSON menu config into a list of SwiftUI element builders.
-  private func buildElements(from json: String) -> [TinyuiMenuElement] {
-    guard
-      let data = json.data(using: .utf8),
-      let root = try? JSONSerialization.jsonObject(with: data) as? [String: Any],
-      let items = root["items"] as? [[String: Any]]
-    else {
-      return []
-    }
-    return items.map { TinyuiMenuElement(dictionary: $0) }
-  }
-}
-
-/**
- * Lightweight representation of a single UIMenu element parsed from the JSON
- * config. Used to build SwiftUI menu content without resolving all elements
- * eagerly. Returns `AnyView` to avoid recursive opaque return type errors.
- */
-struct TinyuiMenuElement: Identifiable {
-  let id = UUID()
-  private let dictionary: [String: Any]
-
-  init(dictionary: [String: Any]) {
-    self.dictionary = dictionary
-  }
-
-  func buildView(
-    delegate: TinyuiMenuViewDelegate?,
-    inheritedDestructive: Bool = false
-  ) -> AnyView {
-    if dictionary["hidden"] as? Bool ?? false {
-      return AnyView(EmptyView())
-    }
-
-    switch dictionary["type"] as? String {
-    case "action":
-      let destructive = inheritedDestructive || (dictionary["destructive"] as? Bool ?? false)
-      let keepOpen = dictionary["keepOpen"] as? Bool ?? false
-      let id = dictionary["id"] as? String ?? ""
-      let state = dictionary["state"] as? String ?? "off"
-
-      // `on`/`off` use SwiftUI's native `Toggle` support inside `Menu`,
-      // which renders the system checkmark. `mixed` has no native SwiftUI
-      // equivalent, so it falls back to the minus indicator.
-      if state == "on" || state == "off" {
-        let isOn = Binding<Bool>(
-          get: { state == "on" },
-          set: { _ in delegate?.onItemPress(id: id) }
-        )
-        return AnyView(
-          Toggle(isOn: isOn) {
-            TinyuiMenuLabel(
-              dictionary: dictionary,
-              destructive: destructive,
-              showsState: false
-            )
-          }
-          .disabled(dictionary["disabled"] as? Bool ?? false)
-        )
-      }
-
-      return AnyView(
-        Button(role: destructive ? .destructive : nil) {
-          delegate?.onItemPress(id: id)
-        } label: {
-          TinyuiMenuLabel(
-            dictionary: dictionary,
-            destructive: destructive,
-            showsState: true
-          )
-        }
-        .disabled(dictionary["disabled"] as? Bool ?? false)
-        .menuActionDismissBehavior(keepOpen ? .disabled : .automatic)
-      )
-
-    case "submenu":
-      let children = (dictionary["children"] as? [[String: Any]] ?? [])
-        .map { TinyuiMenuElement(dictionary: $0) }
-      let destructive = inheritedDestructive || (dictionary["destructive"] as? Bool ?? false)
-      let disabled = dictionary["disabled"] as? Bool ?? false
-
-      if dictionary["displayInline"] as? Bool ?? false {
-        return AnyView(
-          Section {
-            ForEach(children) { child in
-              child.buildView(
-                delegate: delegate,
-                inheritedDestructive: destructive
-              )
-            }
-          } header: {
-            TinyuiMenuLabel(
-              dictionary: dictionary,
-              destructive: destructive,
-              showsState: false
-            )
-          }
-          .disabled(disabled)
-        )
-      }
-
-      return AnyView(
-        Menu {
-          ForEach(children) { child in
-            child.buildView(
-              delegate: delegate,
-              inheritedDestructive: destructive
-            )
-          }
-        } label: {
-          TinyuiMenuLabel(
-            dictionary: dictionary,
-            destructive: destructive,
-            showsState: false
-          )
-        }
-        .disabled(disabled)
-      )
-
-    case "section":
-      let children = (dictionary["children"] as? [[String: Any]] ?? [])
-        .map { TinyuiMenuElement(dictionary: $0) }
-      return AnyView(
-        Section {
-          ForEach(children) { child in
-            child.buildView(
-              delegate: delegate,
-              inheritedDestructive: inheritedDestructive
-            )
-          }
-        } header: {
-          if let title = dictionary["title"] as? String, !title.isEmpty {
-            Text(title)
-          }
-        }
-      )
-
-    case "separator":
-      return AnyView(Divider())
-
-    default:
-      return AnyView(EmptyView())
-    }
-  }
-}
-
-/** Label content shared by actions and submenus. */
-private struct TinyuiMenuLabel: View {
-  let dictionary: [String: Any]
-  let destructive: Bool
-  let showsState: Bool
-
-  var body: some View {
-    // SwiftUI only extracts a proper title from a menu Button's label when
-    // the label is a single `Text` (optionally with an icon). Rendering the
-    // title through a computed @ViewBuilder property or wrapping it in
-    // nested containers breaks that extraction, so the title must be a
-    // direct `Text` in the label hierarchy.
-    HStack(spacing: 6) {
-      menuIcon
-      title
-      if showsState {
-        stateIndicator
-      }
-    }
-  }
-
-  private var stateIndicator: some View {
-    // Only `mixed` reaches here; `on`/`off` are handled natively by `Toggle`.
-    // UIKit's menu system renders "mixed" state with a minus/dash mark.
-    if dictionary["state"] as? String == "mixed" {
-      return AnyView(
-        Image(systemName: "minus")
-          .font(.system(size: 13, weight: .semibold))
-      )
-    }
-    return AnyView(EmptyView())
-  }
-
-  private var title: Text {
-    let title = dictionary["title"] as? String ?? ""
-    let subtitle = (dictionary["subtitle"] as? String).flatMap {
-      $0.isEmpty ? nil : $0
-    }
-    let text = subtitle.map { subtitle in
-      Text("\(title)\n\(subtitle)")
-    } ?? Text(title)
-
-    if destructive {
-      return text.foregroundColor(.red)
-    } else if let color = TinyuiMenuColor.uiColor(from: dictionary["titleColor"]) {
-      return text.foregroundColor(Color(uiColor: color))
-    } else {
-      return text
-    }
-  }
-
-  @ViewBuilder
-  private var menuIcon: some View {
-    let iconColor = TinyuiMenuColor.uiColor(from: dictionary["iconColor"])
-
-    if let icon = dictionary["icon"] as? String, !icon.isEmpty {
-      if let image = UIImage(named: icon) {
-        if let iconColor {
-          Image(
-            uiImage: image.withTintColor(
-              iconColor,
-              renderingMode: .alwaysOriginal
-            )
-          )
-        } else {
-          Image(uiImage: image.withRenderingMode(.alwaysTemplate))
-        }
-      }
-    } else if let systemImage = dictionary["systemImage"] as? String,
-              !systemImage.isEmpty {
-      if let iconColor {
-        Image(systemName: systemImage)
-          .foregroundStyle(Color(uiColor: iconColor))
-      } else {
-        Image(systemName: systemImage)
-      }
-    }
-  }
-}
-
-/** Converts React Native's processed ColorValue JSON into a dynamic UIColor. */
-private enum TinyuiMenuColor {
-  static func uiColor(from value: Any?) -> UIColor? {
-    if let number = value as? NSNumber {
-      let argb = number.uint32Value
-      return UIColor(
-        red: CGFloat((argb >> 16) & 0xff) / 255,
-        green: CGFloat((argb >> 8) & 0xff) / 255,
-        blue: CGFloat(argb & 0xff) / 255,
-        alpha: CGFloat((argb >> 24) & 0xff) / 255
-      )
-    }
-
-    guard let object = value as? [String: Any] else {
-      return nil
-    }
-
-    if let semanticNames = object["semantic"] as? [String] {
-      for name in semanticNames {
-        if let color = semanticColor(named: name) {
-          return color
-        }
-      }
-    }
-
-    if let dynamic = object["dynamic"] as? [String: Any] {
-      return UIColor { traits in
-        let highContrast = traits.accessibilityContrast == .high
-        let dark = traits.userInterfaceStyle == .dark
-        let preferredKey: String
-
-        switch (dark, highContrast) {
-        case (true, true):
-          preferredKey = "highContrastDark"
-        case (false, true):
-          preferredKey = "highContrastLight"
-        case (true, false):
-          preferredKey = "dark"
-        case (false, false):
-          preferredKey = "light"
-        }
-
-        return uiColor(from: dynamic[preferredKey])
-          ?? uiColor(from: dynamic[dark ? "dark" : "light"])
-          ?? UIColor.clear
-      }
-    }
-
-    return nil
-  }
-
-  private static func semanticColor(named name: String) -> UIColor? {
-    if let color = UIColor(named: name) {
-      return color
-    }
-
-    let normalizedName = name.hasSuffix("Color")
-      ? String(name.dropLast("Color".count))
-      : name
-
-    switch normalizedName {
-    case "label": return .label
-    case "secondaryLabel": return .secondaryLabel
-    case "tertiaryLabel": return .tertiaryLabel
-    case "quaternaryLabel": return .quaternaryLabel
-    case "placeholderText": return .placeholderText
-    case "separator": return .separator
-    case "opaqueSeparator": return .opaqueSeparator
-    case "link": return .link
-    case "systemBackground": return .systemBackground
-    case "secondarySystemBackground": return .secondarySystemBackground
-    case "tertiarySystemBackground": return .tertiarySystemBackground
-    case "systemGroupedBackground": return .systemGroupedBackground
-    case "secondarySystemGroupedBackground": return .secondarySystemGroupedBackground
-    case "tertiarySystemGroupedBackground": return .tertiarySystemGroupedBackground
-    case "systemFill": return .systemFill
-    case "secondarySystemFill": return .secondarySystemFill
-    case "tertiarySystemFill": return .tertiarySystemFill
-    case "quaternarySystemFill": return .quaternarySystemFill
-    case "systemRed": return .systemRed
-    case "systemOrange": return .systemOrange
-    case "systemYellow": return .systemYellow
-    case "systemGreen": return .systemGreen
-    case "systemMint": return .systemMint
-    case "systemTeal": return .systemTeal
-    case "systemCyan": return .systemCyan
-    case "systemBlue": return .systemBlue
-    case "systemIndigo": return .systemIndigo
-    case "systemPurple": return .systemPurple
-    case "systemPink": return .systemPink
-    case "systemBrown": return .systemBrown
-    case "systemGray": return .systemGray
-    case "systemGray2": return .systemGray2
-    case "systemGray3": return .systemGray3
-    case "systemGray4": return .systemGray4
-    case "systemGray5": return .systemGray5
-    case "systemGray6": return .systemGray6
-    default: return nil
-    }
-  }
-}
-
-@objc public protocol TinyuiMenuViewDelegate {
-  func onItemPress(id: String)
-  func onPrimaryAction()
-}

package/ios/Popover/TinyuiPopoverViewSwift.swift

@@ -1,88 +0,0 @@
-import SwiftUI
-import UIKit
-
-/**
- * Observable props shared between the Objective-C++ component view and the
- * SwiftUI `Popover` implementation. Mirror of `TinyuiPopoverProps` in codegen.
- */
-class TinyuiPopoverProps: ObservableObject {
-  @Published var isPresented: Bool = false
-  @Published var attachmentAnchor: String = "center"
-  @Published var arrowEdge: String = "none"
-  @Published var triggerView: UIView?
-  @Published var contentView: UIView?
-}
-
-/**
- * SwiftUI `popover` backed by UIPopoverPresentationController, matching
- * expo-ui's PopoverView. The RN trigger is embedded as the anchor view and the
- * RN content view is presented inside the popover.
- *
- * Named distinctly from the Fabric component view `TinyuiPopoverView`.
- */
-struct TinyuiPopoverSwiftUIView: View {
-  @ObservedObject var props: TinyuiPopoverProps
-  weak var delegate: TinyuiPopoverViewDelegate?
-
-  @State private var isPresented: Bool = false
-
-  var body: some View {
-    if let triggerView = props.triggerView {
-      RepresentableView(view: triggerView)
-        .popover(
-          isPresented: $isPresented,
-          attachmentAnchor: attachmentAnchorValue,
-          arrowEdge: arrowEdgeValue
-        ) {
-          if #available(iOS 16.4, *) {
-            popoverContent
-              .presentationCompactAdaptation(.popover)
-          } else {
-            popoverContent
-          }
-        }
-        .onChange(of: isPresented) { newValue in
-          delegate?.onIsPresentedChange(isPresented: newValue)
-        }
-        .onChange(of: props.isPresented) { newValue in
-          isPresented = newValue
-        }
-        .onAppear {
-          isPresented = props.isPresented
-        }
-    } else {
-      Color.clear
-    }
-  }
-
-  private var attachmentAnchorValue: PopoverAttachmentAnchor {
-    switch props.attachmentAnchor {
-    case "top": return .point(.top)
-    case "bottom": return .point(.bottom)
-    case "leading": return .point(.leading)
-    case "trailing": return .point(.trailing)
-    default: return .point(.center)
-    }
-  }
-
-  private var arrowEdgeValue: Edge? {
-    switch props.arrowEdge {
-    case "top": return .top
-    case "bottom": return .bottom
-    case "leading": return .leading
-    case "trailing": return .trailing
-    default: return nil
-    }
-  }
-
-  @ViewBuilder
-  private var popoverContent: some View {
-    if let contentView = props.contentView {
-      RepresentableView(view: contentView)
-    }
-  }
-}
-
-@objc public protocol TinyuiPopoverViewDelegate {
-  func onIsPresentedChange(isPresented: Bool)
-}