react-native-tinyui 0.4.0 → 1.0.0

package/ios/SFSymbol/TinyuiSFSymbolImage.mm

@@ -0,0 +1,141 @@
+#if TINYUI_FEATURE_SF_SYMBOL
+
+#import "TinyuiSFSymbolImage.h"
+#import <React/RCTConvert.h>
+#include <cmath>
+
+static UIImageSymbolWeight symbolWeight(NSString *value)
+{
+  NSDictionary *weights = @{
+    @"ultraLight": @(UIImageSymbolWeightUltraLight), @"thin": @(UIImageSymbolWeightThin),
+    @"light": @(UIImageSymbolWeightLight), @"regular": @(UIImageSymbolWeightRegular),
+    @"medium": @(UIImageSymbolWeightMedium), @"semibold": @(UIImageSymbolWeightSemibold),
+    @"bold": @(UIImageSymbolWeightBold), @"heavy": @(UIImageSymbolWeightHeavy),
+    @"black": @(UIImageSymbolWeightBlack),
+  };
+  return (UIImageSymbolWeight)[weights[value ?: @""] integerValue];
+}
+
+static UIImageSymbolScale symbolScale(NSString *value)
+{
+  if ([value isEqual:@"small"]) return UIImageSymbolScaleSmall;
+  if ([value isEqual:@"medium"]) return UIImageSymbolScaleMedium;
+  if ([value isEqual:@"large"]) return UIImageSymbolScaleLarge;
+  if ([value isEqual:@"unspecified"]) return UIImageSymbolScaleUnspecified;
+  return UIImageSymbolScaleDefault;
+}
+
+static UIFontTextStyle textStyle(NSString *value)
+{
+  return @{
+    @"extraLargeTitle": UIFontTextStyleExtraLargeTitle,
+    @"extraLargeTitle2": UIFontTextStyleExtraLargeTitle2,
+    @"largeTitle": UIFontTextStyleLargeTitle, @"title1": UIFontTextStyleTitle1,
+    @"title2": UIFontTextStyleTitle2, @"title3": UIFontTextStyleTitle3,
+    @"headline": UIFontTextStyleHeadline, @"subheadline": UIFontTextStyleSubheadline,
+    @"body": UIFontTextStyleBody, @"callout": UIFontTextStyleCallout,
+    @"footnote": UIFontTextStyleFootnote, @"caption1": UIFontTextStyleCaption1,
+    @"caption2": UIFontTextStyleCaption2,
+  }[value ?: @""];
+}
+
+UIImage *TinyuiSFSymbolImage(NSDictionary *configuration, BOOL includeColors)
+{
+  if (![configuration isKindOfClass:NSDictionary.class]) return nil;
+  NSString *name = configuration[@"name"];
+  if (![name isKindOfClass:NSString.class] || name.length == 0) return nil;
+
+  CGFloat size = [configuration[@"size"] doubleValue];
+  if (!std::isfinite(size) || size <= 0) size = 17;
+  UIImageSymbolWeight weight = symbolWeight(configuration[@"weight"]);
+  UIImageSymbolScale scale = symbolScale(configuration[@"scale"]);
+  UIFontTextStyle style = textStyle(configuration[@"textStyle"]);
+  if (style != nil) {
+    // RN supplies the scale explicitly; use unscaled metrics here to avoid
+    // applying Dynamic Type twice and to keep Yoga and UIKit in agreement.
+    UITraitCollection *traits = [UITraitCollection
+        traitCollectionWithPreferredContentSizeCategory:UIContentSizeCategoryLarge];
+    UIFont *font = [UIFont preferredFontForTextStyle:style compatibleWithTraitCollection:traits];
+    size = font.pointSize;
+    if (weight == UIImageSymbolWeightUnspecified) {
+      NSNumber *fontWeight = font.fontDescriptor.fontAttributes[UIFontDescriptorTraitsAttribute][UIFontWeightTrait];
+      weight = UIImageSymbolWeightForFontWeight(fontWeight.doubleValue);
+    }
+  }
+  double fontScale = [configuration[@"fontScale"] doubleValue];
+  if (std::isfinite(fontScale) && fontScale > 0) size *= fontScale;
+
+  UIImageSymbolConfiguration *symbol = [UIImageSymbolConfiguration
+      configurationWithPointSize:size weight:weight scale:scale];
+  NSString *family = configuration[@"fontFamily"];
+  if ([family isKindOfClass:NSString.class] && family.length > 0) {
+    UIFont *font = [UIFont fontWithName:family size:size];
+    if (font != nil) {
+      symbol = [UIImageSymbolConfiguration configurationWithFont:font scale:scale];
+      if (weight != UIImageSymbolWeightUnspecified) {
+        symbol = [symbol configurationByApplyingConfiguration:
+            [UIImageSymbolConfiguration configurationWithWeight:weight]];
+      }
+    }
+  }
+
+  if (includeColors) {
+    NSString *mode = configuration[@"renderingMode"];
+    UIColor *color = [RCTConvert UIColor:configuration[@"color"]] ?: UIColor.labelColor;
+    UIImageSymbolConfiguration *colors = nil;
+    if ([mode isEqual:@"monochrome"]) {
+      colors = UIImageSymbolConfiguration.configurationPreferringMonochrome;
+    } else if ([mode isEqual:@"multicolor"]) {
+      colors = UIImageSymbolConfiguration.configurationPreferringMulticolor;
+    } else if ([mode isEqual:@"hierarchical"]) {
+      colors = [UIImageSymbolConfiguration configurationWithHierarchicalColor:color];
+    } else if ([mode isEqual:@"palette"]) {
+      NSMutableArray<UIColor *> *palette = [NSMutableArray array];
+      id values = configuration[@"paletteColors"];
+      if ([values isKindOfClass:NSArray.class]) {
+        for (id value in values) {
+          UIColor *paletteColor = [RCTConvert UIColor:value];
+          if (paletteColor != nil && palette.count < 3) [palette addObject:paletteColor];
+        }
+      }
+      if (palette.count == 0) [palette addObject:color];
+      colors = [UIImageSymbolConfiguration configurationWithPaletteColors:palette];
+    }
+    if (colors != nil) symbol = [symbol configurationByApplyingConfiguration:colors];
+  }
+
+  if (@available(iOS 26.0, *)) {
+    NSString *variableMode = configuration[@"variableValueMode"];
+    UIImageSymbolVariableValueMode variable = UIImageSymbolVariableValueModeAutomatic;
+    if ([variableMode isEqual:@"color"]) variable = UIImageSymbolVariableValueModeColor;
+    if ([variableMode isEqual:@"draw"]) variable = UIImageSymbolVariableValueModeDraw;
+    symbol = [symbol configurationByApplyingConfiguration:
+        [UIImageSymbolConfiguration configurationWithVariableValueMode:variable]];
+
+    NSString *colorMode = configuration[@"colorRenderingMode"];
+    UIImageSymbolColorRenderingMode rendering = UIImageSymbolColorRenderingModeAutomatic;
+    if ([colorMode isEqual:@"flat"]) rendering = UIImageSymbolColorRenderingModeFlat;
+    if ([colorMode isEqual:@"gradient"]) rendering = UIImageSymbolColorRenderingModeGradient;
+    symbol = [symbol configurationByApplyingConfiguration:
+        [UIImageSymbolConfiguration configurationWithColorRenderingMode:rendering]];
+  }
+
+  BOOL asset = [configuration[@"source"] isEqual:@"asset"];
+  id variableValue = configuration[@"variableValue"];
+  UIImage *image;
+  if ([variableValue isKindOfClass:NSNumber.class]) {
+    double value = [variableValue doubleValue];
+    value = std::isfinite(value) ? fmin(1, fmax(0, value)) : 0;
+    image = asset
+        ? [UIImage imageNamed:name inBundle:NSBundle.mainBundle variableValue:value withConfiguration:symbol]
+        : [UIImage systemImageNamed:name variableValue:value withConfiguration:symbol];
+  } else {
+    image = asset
+        ? [UIImage imageNamed:name inBundle:NSBundle.mainBundle withConfiguration:symbol]
+        : [UIImage systemImageNamed:name withConfiguration:symbol];
+  }
+  // Symbol content transitions are undefined for ordinary bitmap assets.
+  return image.isSymbolImage ? image : nil;
+}
+
+#endif

package/ios/SFSymbol/TinyuiSFSymbolShadowNode.h

@@ -0,0 +1,31 @@
+#pragma once
+
+#include <react/renderer/components/TinyuiSpec/ShadowNodes.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook::react {
+
+class TinyuiSFSymbolShadowNode final
+    : public ConcreteViewShadowNode<
+          TinyuiSFSymbolViewComponentName,
+          TinyuiSFSymbolViewProps,
+          TinyuiSFSymbolViewEventEmitter> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+  static ShadowNodeTraits BaseTraits()
+  {
+    auto traits = ConcreteViewShadowNode::BaseTraits();
+    traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
+    traits.set(ShadowNodeTraits::Trait::MeasurableYogaNode);
+    return traits;
+  }
+
+  Size measureContent(
+      const LayoutContext &layoutContext,
+      const LayoutConstraints &layoutConstraints) const override;
+};
+
+using TinyuiSFSymbolComponentDescriptor = ConcreteComponentDescriptor<TinyuiSFSymbolShadowNode>;
+
+} // namespace facebook::react

package/ios/SFSymbol/TinyuiSFSymbolShadowNode.mm

@@ -0,0 +1,30 @@
+#if TINYUI_FEATURE_SF_SYMBOL
+
+#import "TinyuiSFSymbolShadowNode.h"
+#import "TinyuiSFSymbolImage.h"
+#import <react/utils/FollyConvert.h>
+#include <react/renderer/core/LayoutConstraints.h>
+#include <react/renderer/core/LayoutContext.h>
+#include <cmath>
+
+namespace facebook::react {
+
+Size TinyuiSFSymbolShadowNode::measureContent(
+    const LayoutContext &layoutContext,
+    const LayoutConstraints &layoutConstraints) const
+{
+  @autoreleasepool {
+    // UIImage and UIFont creation are safe off the main thread. No UIView or
+    // main-queue sync is needed during concurrent Fabric layout.
+    UIImage *image = TinyuiSFSymbolImage(convertFollyDynamicToId(getConcreteProps().configuration), NO);
+    CGSize size = image == nil ? CGSizeZero : image.size;
+    auto scale = layoutContext.pointScaleFactor > 0 ? layoutContext.pointScaleFactor : 1;
+    return layoutConstraints.clamp({
+        static_cast<Float>(std::ceil(size.width * scale) / scale),
+        static_cast<Float>(std::ceil(size.height * scale) / scale)});
+  }
+}
+
+} // namespace facebook::react
+
+#endif

package/ios/SFSymbol/TinyuiSFSymbolView.h

@@ -0,0 +1,4 @@
+#import <React/RCTViewComponentView.h>
+
+@interface TinyuiSFSymbolView : RCTViewComponentView
+@end

package/ios/SFSymbol/TinyuiSFSymbolView.mm

@@ -0,0 +1,173 @@
+#if TINYUI_FEATURE_SF_SYMBOL
+
+#import "TinyuiSFSymbolView.h"
+#import "TinyuiSFSymbolEffects.h"
+#import "TinyuiSFSymbolImage.h"
+#import "TinyuiSFSymbolShadowNode.h"
+#import <React/RCTConvert.h>
+#import <react/utils/FollyConvert.h>
+#import <react/renderer/components/TinyuiSpec/Props.h>
+#import <react/renderer/components/TinyuiSpec/RCTComponentViewHelpers.h>
+
+using namespace facebook::react;
+
+@interface TinyuiSFSymbolView () <RCTTinyuiSFSymbolViewViewProtocol>
+@end
+
+@implementation TinyuiSFSymbolView {
+  UIImageView *_imageView;
+  NSDictionary *_configuration;
+  NSArray<NSDictionary *> *_effects;
+  NSMutableDictionary<NSString *, NSDictionary *> *_appliedEffects;
+  BOOL _respectReduceMotion;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<TinyuiSFSymbolComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    _props = std::make_shared<const TinyuiSFSymbolViewProps>();
+    [self createImageView];
+    [NSNotificationCenter.defaultCenter addObserver:self selector:@selector(reduceMotionChanged:)
+        name:UIAccessibilityReduceMotionStatusDidChangeNotification object:nil];
+  }
+  return self;
+}
+
+- (void)createImageView
+{
+  _imageView = [UIImageView new];
+  _imageView.contentMode = UIViewContentModeCenter;
+  _imageView.isAccessibilityElement = NO;
+  self.contentView = _imageView;
+  _configuration = nil;
+  _effects = @[];
+  _appliedEffects = [NSMutableDictionary dictionary];
+  _respectReduceMotion = YES;
+}
+
+- (BOOL)reduceMotion
+{
+  return _respectReduceMotion && UIAccessibilityIsReduceMotionEnabled();
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &next = *std::static_pointer_cast<const TinyuiSFSymbolViewProps>(props);
+  BOOL changedMotion = _respectReduceMotion != next.respectReduceMotion;
+  _respectReduceMotion = next.respectReduceMotion;
+  if (changedMotion) [self clearEffects];
+
+  NSDictionary *configuration = convertFollyDynamicToId(next.configuration);
+  if (![configuration isKindOfClass:NSDictionary.class]) configuration = @{};
+  if (![_configuration isEqual:configuration]) {
+    UIImage *image = TinyuiSFSymbolImage(configuration, YES);
+    _imageView.tintColor = [RCTConvert UIColor:configuration[@"color"]] ?: UIColor.labelColor;
+    NSDictionary *transitionConfig = convertFollyDynamicToId(next.contentTransition);
+    if (![transitionConfig isKindOfClass:NSDictionary.class]) transitionConfig = @{};
+    NSSymbolContentTransition *transition = TinyuiSFSymbolTransition(transitionConfig);
+    if (image != nil && _imageView.image != nil && self.window != nil && transition != nil && !self.reduceMotion) {
+      [_imageView setSymbolImage:image withContentTransition:transition
+          options:TinyuiSFSymbolOptions(transitionConfig)];
+    } else {
+      _imageView.image = image;
+    }
+    _configuration = configuration;
+    if (image == nil) [self clearEffects];
+  }
+
+  if (next.resizeMode == "contain") _imageView.contentMode = UIViewContentModeScaleAspectFit;
+  else if (next.resizeMode == "cover") _imageView.contentMode = UIViewContentModeScaleAspectFill;
+  else if (next.resizeMode == "stretch") _imageView.contentMode = UIViewContentModeScaleToFill;
+  else _imageView.contentMode = UIViewContentModeCenter;
+
+  id effects = convertFollyDynamicToId(next.effects);
+  _effects = [effects isKindOfClass:NSArray.class] ? effects : @[];
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask
+{
+  [super finalizeUpdates:updateMask];
+  [self applyEffects];
+}
+
+- (void)clearEffects
+{
+  [_imageView removeAllSymbolEffectsWithOptions:NSSymbolEffectOptions.options animated:NO];
+  [_appliedEffects removeAllObjects];
+}
+
+- (void)applyEffects
+{
+  if (self.window == nil || _imageView.image == nil) return;
+  NSMutableDictionary<NSString *, NSDictionary *> *requested = [NSMutableDictionary dictionary];
+  for (NSDictionary *configuration in _effects) {
+    if (![configuration isKindOfClass:NSDictionary.class]) continue;
+    NSString *type = configuration[@"type"];
+    if (![type isKindOfClass:NSString.class]) continue;
+    requested[type] = configuration;
+  }
+  for (NSString *type in _appliedEffects.allKeys) {
+    NSDictionary *old = _appliedEffects[type];
+    NSDictionary *next = requested[type];
+    if (![old isEqual:next] || [next[@"active"] isEqual:@NO]) {
+      NSSymbolEffect *effect = TinyuiSFSymbolEffect(old);
+      // Reset immediately when replaying/reconfiguring, so an animated removal
+      // cannot race the replacement effect. Animate only actual deactivation.
+      BOOL reapplying = next != nil && ![next[@"active"] isEqual:@NO];
+      BOOL animated = !reapplying && !self.reduceMotion && ![(next ?: old)[@"animated"] isEqual:@NO];
+      if (effect != nil) {
+        [_imageView removeSymbolEffectOfType:effect
+            options:TinyuiSFSymbolOptions((next ?: old)[@"options"]) animated:animated];
+      }
+      [_appliedEffects removeObjectForKey:type];
+    }
+  }
+  for (NSString *type in requested) {
+    NSDictionary *configuration = requested[type];
+    if ([configuration[@"active"] isEqual:@NO] || [_appliedEffects[type] isEqual:configuration]) continue;
+    BOOL stateful = [@[@"scale", @"appear", @"disappear", @"drawOn", @"drawOff"] containsObject:type];
+    // Keep visibility/scale state under Reduce Motion, without continuous or
+    // discrete animation. Clearing those effects must still restore the state.
+    if (self.reduceMotion && !stateful) continue;
+    NSSymbolEffect *effect = TinyuiSFSymbolEffect(configuration);
+    if (effect == nil) continue;
+    [_imageView addSymbolEffect:effect options:TinyuiSFSymbolOptions(configuration[@"options"])
+        animated:!self.reduceMotion && ![configuration[@"animated"] isEqual:@NO]];
+    _appliedEffects[type] = configuration;
+  }
+}
+
+- (void)didMoveToWindow
+{
+  [super didMoveToWindow];
+  if (self.window == nil) [self clearEffects];
+  else [self applyEffects];
+}
+
+- (void)reduceMotionChanged:(NSNotification *)notification
+{
+  [self clearEffects];
+  [self applyEffects];
+}
+
+- (void)prepareForRecycle
+{
+  [self clearEffects];
+  [super prepareForRecycle];
+  [self createImageView];
+}
+
+- (void)dealloc
+{
+  [NSNotificationCenter.defaultCenter removeObserver:self];
+}
+
+@end
+
+#endif

package/ios/Stepper/TinyuiStepperShadowNode.h

@@ -0,0 +1,32 @@
+#pragma once
+
+#include <react/renderer/components/TinyuiSpec/ShadowNodes.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/core/LayoutConstraints.h>
+
+namespace facebook::react {
+
+class TinyuiStepperShadowNode final
+    : public ConcreteViewShadowNode<
+          TinyuiStepperViewComponentName,
+          TinyuiStepperViewProps,
+          TinyuiStepperViewEventEmitter> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+  static ShadowNodeTraits BaseTraits()
+  {
+    auto traits = ConcreteViewShadowNode::BaseTraits();
+    traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
+    traits.set(ShadowNodeTraits::Trait::MeasurableYogaNode);
+    return traits;
+  }
+
+  Size measureContent(
+      const LayoutContext &layoutContext,
+      const LayoutConstraints &layoutConstraints) const override;
+};
+
+using TinyuiStepperComponentDescriptor = ConcreteComponentDescriptor<TinyuiStepperShadowNode>;
+
+} // namespace facebook::react

package/ios/Stepper/TinyuiStepperShadowNode.mm

@@ -0,0 +1,28 @@
+#if TINYUI_FEATURE_STEPPER
+
+#import "TinyuiStepperShadowNode.h"
+
+#import <React/RCTUtils.h>
+#import <UIKit/UIKit.h>
+
+namespace facebook::react {
+
+Size TinyuiStepperShadowNode::measureContent(
+    const LayoutContext &layoutContext,
+    const LayoutConstraints &layoutConstraints) const
+{
+  // Match React Native's RCTSwitchSize: cache the native size and create the
+  // UIKit control on the main queue, even when Yoga measures on a worker.
+  static CGSize size;
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    RCTUnsafeExecuteOnMainQueueSync(^{
+      size = [UIStepper new].intrinsicContentSize;
+    });
+  });
+  return layoutConstraints.clamp({size.width, size.height});
+}
+
+} // namespace facebook::react
+
+#endif

package/ios/Stepper/TinyuiStepperView.h

@@ -0,0 +1,12 @@
+#if TINYUI_FEATURE_STEPPER
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface TinyuiStepperView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif

package/ios/Stepper/TinyuiStepperView.mm

@@ -0,0 +1,128 @@
+#if TINYUI_FEATURE_STEPPER
+
+#import "TinyuiStepperView.h"
+#import "TinyuiStepperShadowNode.h"
+
+#import <react/renderer/components/TinyuiSpec/EventEmitters.h>
+#import <react/renderer/components/TinyuiSpec/Props.h>
+#import <react/renderer/components/TinyuiSpec/RCTComponentViewHelpers.h>
+
+#include <algorithm>
+#include <cmath>
+
+using namespace facebook::react;
+
+@interface TinyuiStepperView () <RCTTinyuiStepperViewViewProtocol>
+@end
+
+@implementation TinyuiStepperView {
+  UIStepper *_stepper;
+  int _nativeEventCount;
+  BOOL _hasInitialValue;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<TinyuiStepperComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const TinyuiStepperViewProps>();
+    _props = defaultProps;
+    [self createStepper];
+  }
+  return self;
+}
+
+- (void)createStepper
+{
+  _stepper = [[UIStepper alloc] initWithFrame:CGRectZero];
+  [_stepper addTarget:self action:@selector(onChange:) forControlEvents:UIControlEventValueChanged];
+  self.contentView = _stepper;
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &newProps = *std::static_pointer_cast<TinyuiStepperViewProps const>(props);
+
+  // The public wrapper validates these; also guard the native boundary against
+  // invalid numbers, since UIStepper raises for nonpositive increments.
+  double minimum = std::isfinite(newProps.minimumValue) ? newProps.minimumValue : 0;
+  double maximum = std::isfinite(newProps.maximumValue) ? newProps.maximumValue : 100;
+  maximum = std::max(minimum, maximum);
+  double previousValue = _stepper.value;
+
+  // Expand the old range before shrinking it. Setting disjoint bounds in the
+  // wrong order lets UIKit change the other bound and prematurely clamp value.
+  _stepper.minimumValue = std::min(_stepper.minimumValue, minimum);
+  _stepper.maximumValue = std::max(_stepper.maximumValue, maximum);
+  _stepper.minimumValue = minimum;
+  _stepper.maximumValue = maximum;
+  _stepper.stepValue = std::isfinite(newProps.stepValue) && newProps.stepValue > 0
+      ? newProps.stepValue : 1;
+  _stepper.continuous = newProps.isContinuous;
+  _stepper.autorepeat = newProps.autorepeat;
+  _stepper.wraps = newProps.wraps;
+  _stepper.enabled = !newProps.disabled;
+
+  // Uncontrolled values stay in UIKit. Controlled values are applied only once
+  // JS has acknowledged the newest native event, avoiding autorepeat rollback.
+  double value = previousValue;
+  if (!_hasInitialValue ||
+      (newProps.controlled && newProps.mostRecentEventCount == _nativeEventCount)) {
+    value = std::isfinite(newProps.value) ? newProps.value : minimum;
+  }
+  _stepper.value = std::clamp(value, minimum, maximum);
+  _hasInitialValue = YES;
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)layoutSubviews
+{
+  [super layoutSubviews];
+  // UIKit controls keep their natural size; a larger React frame centers them.
+  CGSize size = [_stepper sizeThatFits:self.bounds.size];
+  _stepper.frame = CGRectMake(
+      (CGRectGetWidth(self.bounds) - size.width) / 2,
+      (CGRectGetHeight(self.bounds) - size.height) / 2,
+      size.width,
+      size.height);
+}
+
+- (void)onChange:(UIStepper *)sender
+{
+  if (_eventEmitter == nullptr) {
+    return;
+  }
+  _nativeEventCount += 1;
+  std::static_pointer_cast<const TinyuiStepperViewEventEmitter>(_eventEmitter)
+      ->onChange(TinyuiStepperViewEventEmitter::OnChange{
+          .value = sender.value,
+          .eventCount = _nativeEventCount});
+}
+
+// Let UIStepper expose its native accessibility controls and actions.
+- (BOOL)isAccessibilityElement
+{
+  return NO;
+}
+
+- (NSObject *)accessibilityElement
+{
+  return _stepper;
+}
+
+- (void)prepareForRecycle
+{
+  [super prepareForRecycle];
+  _nativeEventCount = 0;
+  _hasInitialValue = NO;
+  [self createStepper];
+}
+
+@end
+
+#endif

package/ios/TipKit/TinyuiTip.swift

@@ -0,0 +1,31 @@
+import SwiftUI
+import TipKit
+
+struct TinyuiTip: Tip, Sendable {
+  struct ActionContent: Equatable, Sendable {
+    let id: String
+    let title: String
+  }
+
+  let id: String
+  var titleString = ""
+  var messageString = ""
+  var symbolName = ""
+  var actionContents: [ActionContent] = []
+  var maximumDisplayCount = 0
+  var ignoresFrequency = false
+
+  var title: Text { Text(verbatim: titleString) }
+  var message: Text? { messageString.isEmpty ? nil : Text(verbatim: messageString) }
+  var image: Image? { symbolName.isEmpty ? nil : Image(systemName: symbolName) }
+  var actions: [Action] {
+    return actionContents.map { Action(id: $0.id, title: $0.title) }
+  }
+  var options: [any TipOption] {
+    var result: [any TipOption] = [Tips.IgnoresDisplayFrequency(ignoresFrequency)]
+    if maximumDisplayCount > 0 {
+      result.append(Tips.MaxDisplayCount(maximumDisplayCount))
+    }
+    return result
+  }
+}