react-native-tinyui 0.5.0 → 1.0.0

package/lib/typescript/src/TipKit/types.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+export type TipDisplayFrequency = 'immediate' | 'hourly' | 'daily' | 'weekly' | 'monthly';
+export interface TipKitConfiguration {
+    /** App-wide interval between new tips. Defaults to `daily`. */
+    displayFrequency?: TipDisplayFrequency;
+}
+export type TipInvalidationReason = 'actionPerformed' | 'tipClosed';
+export type TipStatus = {
+    status: 'pending' | 'available';
+} | {
+    status: 'invalidated';
+    reason: TipInvalidationReason | 'displayCountExceeded' | 'displayDurationExceeded' | 'unknown';
+};
+export interface TipAction {
+    id: string;
+    title: string;
+}
+export interface TipError {
+    code: string;
+    message: string;
+}
+export interface TipPopoverProps extends Omit<ViewProps, 'children'> {
+    /** Anchor content. Its existing touch handlers are preserved. */
+    children: ReactNode;
+    /** Stable identity used by TipKit to persist this tip's history. */
+    tipId: string;
+    title: string;
+    message?: string;
+    systemImage?: string;
+    actions?: readonly TipAction[];
+    /** Allows presentation when TipKit is also eligible. Defaults to true. */
+    enabled?: boolean;
+    /** Omit to leave the number of presentations unlimited. */
+    maxDisplayCount?: number;
+    ignoresDisplayFrequency?: boolean;
+    /** Preferred arrow edge on the bubble; UIKit may adapt to available space. */
+    arrowEdge?: 'top' | 'bottom' | 'leading' | 'trailing' | 'auto';
+    /** TipKit eligibility, independent of whether the bubble is on screen. */
+    onStatusChange?: (status: TipStatus) => void;
+    onVisibleChange?: (visible: boolean) => void;
+    /** Actions do not automatically invalidate the tip. */
+    onActionPress?: (action: TipAction) => void;
+    onError?: (error: TipError) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/TipKit/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/TipKit/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAC7B,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,GAAG,WAAW,CAAC;AAEpE,MAAM,MAAM,SAAS,GACjB;IAAE,MAAM,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,GACnC;IACE,MAAM,EAAE,aAAa,CAAC;IACtB,MAAM,EACF,qBAAqB,GACrB,sBAAsB,GACtB,yBAAyB,GACzB,SAAS,CAAC;CACf,CAAC;AAEN,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAClE,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC/B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,8EAA8E;IAC9E,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IAC/D,0EAA0E;IAC1E,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;CACrC"}

package/lib/typescript/src/TipKit/validation.d.ts

@@ -0,0 +1,4 @@
+import type { TipPopoverProps } from './types.js';
+export declare function validateTipId(tipId: string): void;
+export declare function validateTip(props: TipPopoverProps): void;
+//# sourceMappingURL=validation.d.ts.map

package/lib/typescript/src/TipKit/validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../../src/TipKit/validation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAS,CAAC;AAE/C,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAIjD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CA8BxD"}

package/lib/typescript/src/index.d.ts

@@ -1,5 +1,13 @@
 export { Menu } from './Menu/index.js';
-export type { MenuActionOption, MenuDividerOption, MenuItemState, MenuOption, MenuProps, MenuSectionOption, MenuSubmenuOption, } from './Menu/index.js';
+export { TipKit } from './TipKit/index.js';
+export type { TipAction, TipDisplayFrequency, TipError, TipInvalidationReason, TipPopoverProps, TipKitConfiguration, TipStatus, } from './TipKit/index.js';
+export type { MenuActionOption, MenuActionPressEvent, MenuActionPressEventData, MenuDividerOption, MenuItemState, MenuOption, MenuProps, MenuSectionOption, MenuSubmenuOption, } from './Menu/index.js';
+export { Stepper } from './Stepper/index.js';
+export type { StepperProps } from './Stepper/index.js';
+export { ConcentricView } from './ConcentricView/index.js';
+export type { ConcentricViewProps } from './ConcentricView/index.js';
+export { SFSymbol } from './SFSymbol/index.js';
+export type { SFSymbolContentTransition, SFSymbolEffect, SFSymbolEffectOptions, SFSymbolProps, SFSymbolRenderingMode, SFSymbolScale, SFSymbolTextStyle, SFSymbolWeight, } from './SFSymbol/index.js';
 export { Popover, PopoverClose } from './Popover/index.js';
 export type { PopoverArrowEdge, PopoverAttachmentAnchor, PopoverCloseProps, PopoverContent, PopoverContentRenderArgs, PopoverProps, } from './Popover/index.js';
 export { getNativeTinyui, assertComponentEnabled } from './utils/index.js';

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAQ,CAAC;AAC9B,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,iBAAQ,CAAC;AAEhB,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAW,CAAC;AAClD,YAAY,EACV,gBAAgB,EAChB,uBAAuB,EACvB,iBAAiB,EACjB,cAAc,EACd,wBAAwB,EACxB,YAAY,GACb,MAAM,oBAAW,CAAC;AAEnB,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,kBAAS,CAAC;AAClE,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAS,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,4BAAmB,CAAC;AACpD,YAAY,EACV,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,4BAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAU,CAAC;AAClC,YAAY,EACV,SAAS,EACT,mBAAmB,EACnB,QAAQ,EACR,qBAAqB,EACrB,eAAe,EACf,mBAAmB,EACnB,SAAS,GACV,MAAM,mBAAU,CAAC;AAClB,YAAY,EACV,gBAAgB,EAChB,oBAAoB,EACpB,wBAAwB,EACxB,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,iBAAQ,CAAC;AAEhB,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAW,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,2BAAkB,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAY,CAAC;AACtC,YAAY,EACV,yBAAyB,EACzB,cAAc,EACd,qBAAqB,EACrB,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,iBAAiB,EACjB,cAAc,GACf,MAAM,qBAAY,CAAC;AAEpB,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAW,CAAC;AAClD,YAAY,EACV,gBAAgB,EAChB,uBAAuB,EACvB,iBAAiB,EACjB,cAAc,EACd,wBAAwB,EACxB,YAAY,GACb,MAAM,oBAAW,CAAC;AAEnB,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,kBAAS,CAAC;AAClE,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAS,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,4BAAmB,CAAC;AACpD,YAAY,EACV,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,4BAAmB,CAAC"}

package/lib/typescript/src/utils/getNativeTinyui.d.ts

@@ -1,5 +1,5 @@
 import { type Spec } from '../NativeTinyui.js';
-export type TinyuiComponent = 'Menu' | 'Popover' | 'LiquidGlassText';
+export type TinyuiComponent = 'Menu' | 'Popover' | 'LiquidGlassText' | 'Stepper' | 'ConcentricView' | 'SFSymbol' | 'TipKit';
 /**
  * Returns the Tinyui TurboModule instance. The native module is always
  * compiled (Core), so this is safe to call.

package/lib/typescript/src/utils/getNativeTinyui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getNativeTinyui.d.ts","sourceRoot":"","sources":["../../../../src/utils/getNativeTinyui.ts"],"names":[],"mappings":"AAAA,OAAqB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAiB,CAAC;AAE1D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,iBAAiB,CAAC;AAKrE;;;GAGG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAStC;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,eAAe,GAAG,IAAI,CAWvE"}
+{"version":3,"file":"getNativeTinyui.d.ts","sourceRoot":"","sources":["../../../../src/utils/getNativeTinyui.ts"],"names":[],"mappings":"AAAA,OAAqB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAiB,CAAC;AAE1D,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,SAAS,GACT,iBAAiB,GACjB,SAAS,GACT,gBAAgB,GAChB,UAAU,GACV,QAAQ,CAAC;AAKb;;;GAGG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAStC;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,eAAe,GAAG,IAAI,CAWvE"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-tinyui",
-  "version": "0.5.0",
-  "description": "Dependency-free native iOS Menu, Popover and LiquidGlassText components for React Native",
+  "version": "1.0.0",
+  "description": "Dependency-free native iOS Menu, Popover, TipKit, Stepper, ConcentricView, SFSymbol and LiquidGlassText components for React Native",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
   "exports": {
@@ -20,6 +20,26 @@
       "types": "./lib/typescript/src/Popover/index.d.ts",
       "default": "./lib/module/Popover/index.js"
     },
+    "./stepper": {
+      "react-native-tinyui-source": "./src/Stepper/index.tsx",
+      "types": "./lib/typescript/src/Stepper/index.d.ts",
+      "default": "./lib/module/Stepper/index.js"
+    },
+    "./concentric-view": {
+      "react-native-tinyui-source": "./src/ConcentricView/index.tsx",
+      "types": "./lib/typescript/src/ConcentricView/index.d.ts",
+      "default": "./lib/module/ConcentricView/index.js"
+    },
+    "./sf-symbol": {
+      "react-native-tinyui-source": "./src/SFSymbol/index.tsx",
+      "types": "./lib/typescript/src/SFSymbol/index.d.ts",
+      "default": "./lib/module/SFSymbol/index.js"
+    },
+    "./tip-kit": {
+      "react-native-tinyui-source": "./src/TipKit/index.ts",
+      "types": "./lib/typescript/src/TipKit/index.d.ts",
+      "default": "./lib/module/TipKit/index.js"
+    },
     "./package.json": "./package.json",
     "./liquid-glass-text": {
       "react-native-tinyui-source": "./src/LiquidGlassText/index.tsx",
@@ -52,6 +72,7 @@
     "ios",
     "menu",
     "popover",
+    "stepper",
     "fabric",
     "liquid-glass"
   ],
@@ -78,6 +99,7 @@
     "@react-native/jest-preset": "0.85.0",
     "@release-it/conventional-changelog": "^11.0.1",
     "@types/react": "^19.2.0",
+    "@types/react-test-renderer": "^19.1.0",
     "del-cli": "^7.0.0",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
@@ -88,6 +110,7 @@
     "react": "19.2.3",
     "react-native": "0.85.0",
     "react-native-builder-bob": "^0.43.0",
+    "react-test-renderer": "19.2.3",
     "release-it": "^20.2.0",
     "turbo": "^2.9.16",
     "typescript": "^6.0.3"
@@ -137,6 +160,18 @@
         },
         "TinyuiLiquidGlassTextView": {
           "className": "TinyuiLiquidGlassTextView"
+        },
+        "TinyuiStepperView": {
+          "className": "TinyuiStepperView"
+        },
+        "TinyuiConcentricView": {
+          "className": "TinyuiConcentricView"
+        },
+        "TinyuiSFSymbolView": {
+          "className": "TinyuiSFSymbolView"
+        },
+        "TinyuiTipPopoverView": {
+          "className": "TinyuiTipPopoverView"
         }
       }
     }

package/{Tinyui.podspec → react-native-tinyui.podspec}

@@ -19,6 +19,26 @@ components = {
     :definition => "TINYUI_FEATURE_LIQUID_GLASS_TEXT=1",
     :frameworks => ["UIKit", "SwiftUI", "CoreText"],
   },
+  "Stepper" => {
+    :source_files => "ios/Stepper/**/*.{h,m,mm,swift,cpp}",
+    :definition => "TINYUI_FEATURE_STEPPER=1",
+    :frameworks => ["UIKit"],
+  },
+  "ConcentricView" => {
+    :source_files => "ios/ConcentricView/**/*.{h,m,mm,swift,cpp}",
+    :definition => "TINYUI_FEATURE_CONCENTRIC_VIEW=1",
+    :frameworks => ["UIKit"],
+  },
+  "SFSymbol" => {
+    :source_files => "ios/SFSymbol/**/*.{h,m,mm,swift,cpp}",
+    :definition => "TINYUI_FEATURE_SF_SYMBOL=1",
+    :frameworks => ["UIKit", "Symbols"],
+  },
+  "TipKit" => {
+    :source_files => "ios/TipKit/**/*.{h,m,mm,swift,cpp}",
+    :definition => "TINYUI_FEATURE_TIP_KIT=1",
+    :frameworks => ["UIKit", "SwiftUI", "TipKit"],
+  },
 }
 
 configured_components = nil
@@ -68,7 +88,8 @@ definitions = selected_components.map { |component| component[:definition] }
 frameworks = selected_components.flat_map { |component| component.fetch(:frameworks, []) }.uniq
 
 Pod::Spec.new do |s|
-  s.name         = "Tinyui"
+  s.name         = "react-native-tinyui"
+  s.module_name  = "Tinyui"
   s.version      = package["version"]
   s.summary      = package["description"]
   s.homepage     = package["homepage"]
@@ -79,7 +100,7 @@ Pod::Spec.new do |s|
   s.source       = { :git => "https://github.com/luoxuhai/react-native-tinyui.git", :tag => "#{s.version}" }
 
   s.source_files = source_files
-  s.private_header_files = ["ios/Core/**/*.h", "ios/Menu/**/*.h", "ios/Popover/**/*.h", "ios/LiquidGlassText/**/*.h"]
+  s.private_header_files = ["ios/Core/**/*.h", "ios/Menu/**/*.h", "ios/Popover/**/*.h", "ios/LiquidGlassText/**/*.h", "ios/Stepper/**/*.h", "ios/ConcentricView/**/*.h", "ios/SFSymbol/**/*.h", "ios/TipKit/**/*.h"]
   s.preserve_paths = "ios/LiquidGlassText/GlassText-LICENSE"
   s.swift_version = "5.0"
   s.frameworks = frameworks unless frameworks.empty?

package/src/ConcentricView/ConcentricViewNativeComponent.ts

@@ -0,0 +1,14 @@
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type ViewProps,
+} from 'react-native';
+
+export interface NativeConcentricViewProps extends ViewProps {
+  minimumRadius?: CodegenTypes.WithDefault<CodegenTypes.Double, 0>;
+}
+
+export default codegenNativeComponent<NativeConcentricViewProps>(
+  'TinyuiConcentricView',
+  { excludedPlatforms: ['android'] }
+);

package/src/ConcentricView/index.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { StyleSheet, type View } from 'react-native';
+
+import { assertComponentEnabled } from '../utils';
+import NativeConcentricView from './ConcentricViewNativeComponent';
+import type { ConcentricViewProps } from './types';
+
+export const ConcentricView = forwardRef<
+  ComponentRef<typeof View>,
+  ConcentricViewProps
+>(function ConcentricViewRoot({ minimumRadius = 0, style, ...viewProps }, ref) {
+  assertComponentEnabled('ConcentricView');
+
+  if (!Number.isFinite(minimumRadius) || minimumRadius < 0) {
+    throw new RangeError(
+      '[TinyUI] ConcentricView minimumRadius must be a finite, nonnegative number.'
+    );
+  }
+
+  return (
+    <NativeConcentricView
+      {...viewProps}
+      ref={ref}
+      minimumRadius={minimumRadius}
+      style={[styles.container, style]}
+    />
+  );
+});
+
+const styles = StyleSheet.create({
+  container: { overflow: 'hidden' },
+});
+
+export type { ConcentricViewProps } from './types';

package/src/ConcentricView/types.ts

@@ -0,0 +1,6 @@
+import type { ViewProps } from 'react-native';
+
+export interface ConcentricViewProps extends ViewProps {
+  /** Fixed fallback radius on iOS < 26. Defaults to 0. Ignored on iOS 26+. */
+  minimumRadius?: number;
+}

package/src/Menu/MenuNativeComponent.ts

@@ -9,9 +9,7 @@ export interface NativeMenuProps extends ViewProps {
   menuConfig: CodegenTypes.UnsafeMixed;
   title?: string;
   disabled?: boolean;
-  hasPrimaryAction?: boolean;
-  onItemPress?: DirectEventHandler<Readonly<{ id: string }>>;
-  onPrimaryAction?: DirectEventHandler<null>;
+  onActionPress?: DirectEventHandler<Readonly<{ id: string; title: string }>>;
 }
 
 export default codegenNativeComponent<NativeMenuProps>('TinyuiMenuView', {

package/src/Menu/index.tsx

@@ -11,7 +11,7 @@ const MenuRoot = forwardRef<ComponentRef<typeof View>, MenuProps>(function Menu(
     accessibilityLabel,
     children,
     disabled,
-    onPrimaryAction,
+    onActionPress,
     options,
     title,
     testID,
@@ -21,17 +21,15 @@ const MenuRoot = forwardRef<ComponentRef<typeof View>, MenuProps>(function Menu(
 ) {
   assertComponentEnabled('Menu');
 
-  const { config, callbacks } = serializeMenuOptions(options);
+  const menuConfig = serializeMenuOptions(options);
 
   return (
     <View {...viewProps} ref={ref} collapsable={false}>
       <NativeMenuView
         accessibilityLabel={accessibilityLabel}
         disabled={disabled}
-        hasPrimaryAction={onPrimaryAction != null}
-        menuConfig={config}
-        onItemPress={(event) => callbacks.get(event.nativeEvent.id)?.()}
-        onPrimaryAction={onPrimaryAction}
+        menuConfig={menuConfig}
+        onActionPress={onActionPress}
         testID={testID}
         title={title}
       >
@@ -45,6 +43,8 @@ export const Menu = MenuRoot as MenuComponent;
 
 export type {
   MenuActionOption,
+  MenuActionPressEvent,
+  MenuActionPressEventData,
   MenuDividerOption,
   MenuItemState,
   MenuOption,

package/src/Menu/options.ts

@@ -52,30 +52,18 @@ interface NativeMenuConfiguration {
   items: NativeMenuElement[];
 }
 
-export interface SerializedMenuOptions {
-  config: NativeMenuConfiguration;
-  callbacks: Map<string, () => void>;
-}
-
 function serializeColor(color: ColorValue | undefined): NativeMenuColor {
   return color === undefined ? undefined : processColor(color);
 }
 
 export function serializeMenuOptions(
   options: readonly MenuOption[]
-): SerializedMenuOptions {
-  const callbacks = new Map<string, () => void>();
-  const items = serializeOptions(options, callbacks, new Set(), 'root');
-
-  return {
-    callbacks,
-    config: { items },
-  };
+): NativeMenuConfiguration {
+  return { items: serializeOptions(options, new Set(), 'root') };
 }
 
 function serializeOptions(
   options: readonly MenuOption[],
-  callbacks: Map<string, () => void>,
   usedIds: Set<string>,
   path: string
 ): NativeMenuElement[] {
@@ -101,7 +89,6 @@ function serializeOptions(
         displayInline: option.displayInline ?? false,
         children: serializeOptions(
           option.options,
-          callbacks,
           usedIds,
           `${optionPath}.submenu`
         ),
@@ -114,7 +101,6 @@ function serializeOptions(
         title: option.title,
         children: serializeOptions(
           option.options,
-          callbacks,
           usedIds,
           `${optionPath}.section`
         ),
@@ -127,10 +113,6 @@ function serializeOptions(
     }
     usedIds.add(id);
 
-    if (option.onSelect) {
-      callbacks.set(id, option.onSelect);
-    }
-
     return {
       type: 'action',
       id,

package/src/Menu/types.ts

@@ -17,7 +17,11 @@ interface MenuOptionLabel {
   icon?: string;
   /** Tint applied to `icon` or `systemImage`. */
   iconColor?: ColorValue;
-  /** Foreground color applied to the option title. */
+  /**
+   * Retained for source compatibility. UIKit menu elements don't expose a
+   * public custom title-color API; use `destructive` for system red styling.
+   * @deprecated UIKit ignores custom menu title colors.
+   */
   titleColor?: ColorValue;
 }
 
@@ -32,7 +36,6 @@ export interface MenuActionOption extends MenuOptionLabel {
   hidden?: boolean;
   /** Keep the menu visible after selection on iOS 16 and newer. */
   keepOpen?: boolean;
-  onSelect?: () => void;
 }
 
 export interface MenuSubmenuOption extends MenuOptionLabel {
@@ -61,6 +64,17 @@ export interface MenuDividerOption {
 export type MenuOption =
   MenuActionOption | MenuSubmenuOption | MenuSectionOption | MenuDividerOption;
 
+export interface MenuActionPressEventData {
+  /** The selected action's explicit id, or its generated menu-path id. */
+  id: string;
+  /** The selected action's displayed title. */
+  title: string;
+}
+
+export type MenuActionPressEvent = Readonly<{
+  nativeEvent: Readonly<MenuActionPressEventData>;
+}>;
+
 export interface MenuProps extends Omit<ViewProps, 'children'> {
   /** The trigger element. */
   children: ReactNode;
@@ -70,8 +84,8 @@ export interface MenuProps extends Omit<ViewProps, 'children'> {
   options: readonly MenuOption[];
   /** Prevents the trigger from opening the menu. */
   disabled?: boolean;
-  /** Called on a normal tap. When set, a long press opens the menu. */
-  onPrimaryAction?: () => void;
+  /** Called whenever an enabled action is selected. */
+  onActionPress?: (event: MenuActionPressEvent) => void;
 }
 
 export interface MenuComponent extends ForwardRefExoticComponent<

package/src/NativeTinyui.ts

@@ -7,6 +7,8 @@ export interface Spec extends TurboModule {
    * based on the `react-native-tinyui.components` array in package.json.
    */
   getEnabledComponents(): ReadonlyArray<string>;
+  configureTips(displayFrequency: string): Promise<void>;
+  invalidateTip(tipId: string, reason: string): Promise<void>;
 }
 
 export default TurboModuleRegistry.get<Spec>('Tinyui');

package/src/Popover/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useCallback, useState, type ComponentRef } from 'react';
 import type { ReactNode } from 'react';
-import { PlatformColor, Pressable, StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 
 import { assertComponentEnabled } from '../utils';
 import { PopoverClose } from './PopoverClose';
@@ -59,7 +59,11 @@ const PopoverRoot = forwardRef<ComponentRef<typeof View>, PopoverProps>(
           }}
         >
           <Pressable onPress={() => setOpen(true)}>{children}</Pressable>
-          <View style={styles.content} pointerEvents="box-none">
+          <View
+            collapsable={false}
+            style={styles.content}
+            pointerEvents="box-none"
+          >
             {renderedContent}
           </View>
         </NativePopoverView>
@@ -78,7 +82,8 @@ function renderContent(
 const styles = StyleSheet.create({
   content: {
     position: 'absolute',
-    backgroundColor: PlatformColor('systemBackground'),
+    top: 0,
+    left: 0,
     overflow: 'hidden',
   },
 });

package/src/Popover/types.ts

@@ -27,6 +27,8 @@ export interface PopoverProps extends Omit<ViewProps, 'children'> {
   /**
    * Content shown inside the popover. Pass a node, or a render function that
    * receives `{ close }` to dismiss the popover from within the content.
+   * The content's layout determines the popover size, including live updates.
+   * Leave its background transparent to reveal the system popover material.
    */
   content: PopoverContent;
   /** Controlled presentation state. */

package/src/SFSymbol/SFSymbolNativeComponent.ts

@@ -0,0 +1,20 @@
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type ViewProps,
+} from 'react-native';
+
+export interface NativeSFSymbolProps extends ViewProps {
+  configuration: CodegenTypes.UnsafeMixed;
+  effects: CodegenTypes.UnsafeMixed;
+  contentTransition: CodegenTypes.UnsafeMixed;
+  resizeMode?: CodegenTypes.WithDefault<string, 'center'>;
+  respectReduceMotion?: CodegenTypes.WithDefault<boolean, true>;
+}
+
+export default codegenNativeComponent<NativeSFSymbolProps>(
+  'TinyuiSFSymbolView',
+  {
+    excludedPlatforms: ['android'],
+  }
+);

package/src/SFSymbol/index.tsx

@@ -0,0 +1,89 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { StyleSheet, useWindowDimensions, type View } from 'react-native';
+
+import { assertComponentEnabled } from '../utils';
+import NativeSFSymbolView from './SFSymbolNativeComponent';
+import { serializeSFSymbol } from './options';
+import type { SFSymbolProps } from './types';
+
+export const SFSymbol = forwardRef<ComponentRef<typeof View>, SFSymbolProps>(
+  function SFSymbolRoot(
+    {
+      name,
+      source,
+      size,
+      weight,
+      scale,
+      textStyle,
+      fontFamily,
+      allowFontScaling,
+      maxFontSizeMultiplier,
+      renderingMode,
+      color,
+      paletteColors,
+      variableValue,
+      variableValueMode,
+      colorRenderingMode,
+      effect,
+      contentTransition,
+      respectReduceMotion = true,
+      resizeMode = 'center',
+      style,
+      accessible = false,
+      accessibilityRole = 'image',
+      ...viewProps
+    },
+    ref
+  ) {
+    assertComponentEnabled('SFSymbol');
+    const { fontScale } = useWindowDimensions();
+    const serialized = serializeSFSymbol(
+      {
+        name,
+        source,
+        size,
+        weight,
+        scale,
+        textStyle,
+        fontFamily,
+        allowFontScaling,
+        maxFontSizeMultiplier,
+        renderingMode,
+        color,
+        paletteColors,
+        variableValue,
+        variableValueMode,
+        colorRenderingMode,
+        effect,
+        contentTransition,
+      },
+      fontScale
+    );
+
+    return (
+      <NativeSFSymbolView
+        {...viewProps}
+        {...serialized}
+        ref={ref}
+        accessible={accessible}
+        accessibilityRole={accessibilityRole}
+        respectReduceMotion={respectReduceMotion}
+        resizeMode={resizeMode}
+        style={[styles.symbol, style]}
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({ symbol: { alignSelf: 'flex-start' } });
+
+export type {
+  SFSymbolContentTransition,
+  SFSymbolEffect,
+  SFSymbolEffectOptions,
+  SFSymbolProps,
+  SFSymbolRenderingMode,
+  SFSymbolScale,
+  SFSymbolTextStyle,
+  SFSymbolWeight,
+} from './types';