react-native-platform-components 1.3.0 → 1.4.0

package/lib/commonjs/Button.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = Button;
+var _react = _interopRequireWildcard(require("react"));
+var _ButtonNativeComponent = _interopRequireDefault(require("./ButtonNativeComponent"));
+var _icons = require("./icons");
+var _labelStyle = require("./labelStyle");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Button.tsx
+
+/**
+ * Emphasis of the button, from highest to lowest.
+ *
+ * | Variant    | Android (Material 3 Expressive) | iOS (`UIButton.Configuration`) |
+ * | ---------- | ------------------------------- | ------------------------------ |
+ * | `filled`   | Filled button                   | `.filled()`                    |
+ * | `tonal`    | Filled tonal button             | `.tinted()`                    |
+ * | `outlined` | Outlined button                 | `.bordered()`                  |
+ * | `text`     | Text button                     | `.plain()`                     |
+ * | `elevated` | Elevated button                 | `.gray()`                      |
+ */
+
+/**
+ * Button size. Material 3 Expressive defines five sizes; iOS maps them onto
+ * `UIButton.Configuration.Size` (`xsmall` → mini, `xlarge` → large).
+ */
+
+/**
+ * Corner shape. `round` is a pill; `square` keeps rounded corners. Unset
+ * means the platform default (round on Android, dynamic on iOS).
+ */
+
+function Button(props) {
+  const {
+    label,
+    icon,
+    variant,
+    size,
+    shape,
+    disabled,
+    color,
+    tintColor,
+    labelStyle,
+    accessibilityLabel,
+    onPress,
+    android,
+    ...viewProps
+  } = props;
+  const nativeIcon = (0, _react.useMemo)(() => (0, _icons.resolveIcon)(icon), [icon]);
+  const nativeLabelStyle = (0, _react.useMemo)(() => (0, _labelStyle.normalizeLabelStyle)(labelStyle), [labelStyle]);
+  const handlePress = (0, _react.useCallback)(() => {
+    onPress?.();
+  }, [onPress]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonNativeComponent.default, {
+    label: label ?? '',
+    icon: nativeIcon,
+    variant: variant ?? 'filled',
+    size: size ?? 'small',
+    shape: shape ?? '',
+    interactivity: disabled ? 'disabled' : 'enabled',
+    color: color,
+    foregroundColor: tintColor,
+    androidRippleColor: android?.rippleColor,
+    androidStrokeColor: android?.strokeColor,
+    androidMaterial: android?.material ?? 'expressive',
+    labelStyle: nativeLabelStyle,
+    spokenLabel: accessibilityLabel ?? '',
+    onButtonPress: onPress ? handlePress : undefined,
+    ...viewProps
+  });
+}
+//# sourceMappingURL=Button.js.map

package/lib/commonjs/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_ButtonNativeComponent","_interopRequireDefault","_icons","_labelStyle","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Button","props","label","icon","variant","size","shape","disabled","color","tintColor","labelStyle","accessibilityLabel","onPress","android","viewProps","nativeIcon","useMemo","resolveIcon","nativeLabelStyle","normalizeLabelStyle","handlePress","useCallback","jsx","interactivity","foregroundColor","androidRippleColor","rippleColor","androidStrokeColor","strokeColor","androidMaterial","material","spokenLabel","onButtonPress","undefined"],"sourceRoot":"../../src","sources":["Button.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ButtonGroup.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonGroup = ButtonGroup;
+var _react = _interopRequireWildcard(require("react"));
+var _ButtonGroupNativeComponent = _interopRequireDefault(require("./ButtonGroupNativeComponent"));
+var _icons = require("./icons");
+var _labelStyle = require("./labelStyle");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// ButtonGroup.tsx
+
+/**
+ * Selection behavior of the group.
+ *
+ * - `none` (default): the buttons are plain actions.
+ * - `single`: at most one button is selected at a time.
+ * - `multiple`: any number of buttons can be selected.
+ */
+
+/** What happens to buttons that don't fit the group's width (Android). */
+
+function ButtonGroup(props) {
+  const {
+    buttons,
+    variant,
+    size,
+    shape,
+    connected,
+    spacing,
+    selection,
+    selectedValues,
+    selectionRequired,
+    disabled,
+    color,
+    tintColor,
+    labelStyle,
+    onPress,
+    onSelectionChange,
+    android,
+    ...viewProps
+  } = props;
+  const selectionMode = selection ?? 'none';
+  const nativeButtons = (0, _react.useMemo)(() => {
+    return buttons.map(button => ({
+      label: button.label ?? '',
+      value: button.value,
+      disabled: button.disabled ? 'disabled' : 'enabled',
+      accessibilityLabel: button.accessibilityLabel ?? '',
+      ...(0, _icons.resolveIcon)(button.icon)
+    }));
+  }, [buttons]);
+  const nativeSelectedValues = (0, _react.useMemo)(() => {
+    if (selectionMode === 'none' || !selectedValues) return [];
+    return selectionMode === 'single' ? selectedValues.slice(0, 1) : [...selectedValues];
+  }, [selectionMode, selectedValues]);
+  const nativeLabelStyle = (0, _react.useMemo)(() => (0, _labelStyle.normalizeLabelStyle)(labelStyle), [labelStyle]);
+  const handlePress = (0, _react.useCallback)(e => {
+    const {
+      index,
+      value
+    } = e.nativeEvent;
+    onPress?.(value, index);
+  }, [onPress]);
+  const handleSelectionChange = (0, _react.useCallback)(e => {
+    onSelectionChange?.([...e.nativeEvent.values]);
+  }, [onSelectionChange]);
+  const nativeAndroid = (0, _react.useMemo)(() => ({
+    overflow: android?.overflow ?? 'none',
+    material: android?.material ?? 'expressive'
+  }), [android]);
+  const isConnected = connected ?? selectionMode !== 'none';
+  const isSelectionRequired = selectionRequired ?? (selectionMode === 'single' ? true : false);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroupNativeComponent.default, {
+    buttons: nativeButtons,
+    variant: variant ?? 'outlined',
+    size: size ?? 'small',
+    shape: shape ?? '',
+    connected: isConnected ? 'true' : 'false',
+    spacing: spacing ?? -1,
+    selection: selectionMode,
+    selectedValues: nativeSelectedValues,
+    selectionRequired: isSelectionRequired ? 'true' : 'false',
+    interactivity: disabled ? 'disabled' : 'enabled',
+    color: color,
+    foregroundColor: tintColor,
+    androidRippleColor: android?.rippleColor,
+    androidStrokeColor: android?.strokeColor,
+    labelStyle: nativeLabelStyle,
+    onButtonPress: onPress ? handlePress : undefined,
+    onGroupSelectionChange: onSelectionChange ? handleSelectionChange : undefined,
+    android: nativeAndroid,
+    ...viewProps
+  });
+}
+//# sourceMappingURL=ButtonGroup.js.map

package/lib/commonjs/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_ButtonGroupNativeComponent","_interopRequireDefault","_icons","_labelStyle","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ButtonGroup","props","buttons","variant","size","shape","connected","spacing","selection","selectedValues","selectionRequired","disabled","color","tintColor","labelStyle","onPress","onSelectionChange","android","viewProps","selectionMode","nativeButtons","useMemo","map","button","label","value","accessibilityLabel","resolveIcon","icon","nativeSelectedValues","slice","nativeLabelStyle","normalizeLabelStyle","handlePress","useCallback","index","nativeEvent","handleSelectionChange","values","nativeAndroid","overflow","material","isConnected","isSelectionRequired","jsx","interactivity","foregroundColor","androidRippleColor","rippleColor","androidStrokeColor","strokeColor","onButtonPress","undefined","onGroupSelectionChange"],"sourceRoot":"../../src","sources":["ButtonGroup.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ButtonGroupNativeComponent.ts

@@ -0,0 +1,121 @@
+// ButtonGroupNativeComponent.ts
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+import type { BubblingEventHandler, Double, Int32 } from './codegenTypes';
+
+/**
+ * A single button in the group. Icons are pre-resolved on the JS side (see
+ * icons.ts) so native only deals with flat strings.
+ */
+export type ButtonGroupButton = Readonly<{
+  label: string; // Empty for an icon-only button
+  value: string;
+  disabled: string; // 'enabled' | 'disabled'
+  iconType: string; // '' | 'sfSymbol' | 'drawable' | 'image'
+  iconName: string; // SF Symbol (iOS) or drawable resource name (Android)
+  iconUri: string; // Resolved image URI when iconType === 'image'
+  iconScale: Double; // Resolved image scale when iconType === 'image'
+  iconTinted: string; // 'true' | 'false' — draw the image as a tinted template
+  accessibilityLabel: string; // Screen-reader label, empty = use label
+}>;
+
+/**
+ * Event emitted when a button is pressed.
+ */
+export type ButtonGroupPressEvent = Readonly<{
+  index: Int32;
+  value: string;
+}>;
+
+/**
+ * Event emitted when the selection changes (single / multiple selection).
+ */
+export type ButtonGroupSelectionEvent = Readonly<{
+  /** Values of the selected buttons, in button order. */
+  // Codegen only understands the `T[]` array form in event payloads.
+  values: string[];
+}>;
+
+/**
+ * Label font. Empty strings / 0 mean "platform default".
+ */
+export type ButtonGroupLabelStyleProps = Readonly<{
+  fontFamily?: string;
+  fontSize?: Double;
+  fontWeight?: string; // 'normal' | 'bold' | '100'..'900'
+  fontStyle?: string; // 'normal' | 'italic'
+}>;
+
+/**
+ * Android-specific configuration.
+ */
+export type ButtonGroupAndroidProps = Readonly<{
+  /** What happens to buttons that don't fit: 'none' | 'menu' | 'wrap' */
+  overflow?: string;
+
+  /** Material style: 'm3' | 'expressive' */
+  material?: string;
+}>;
+
+export interface ButtonGroupNativeProps extends ViewProps {
+  /** Buttons to display. */
+  buttons: ReadonlyArray<ButtonGroupButton>;
+
+  /** 'filled' | 'tonal' | 'outlined' | 'text' | 'elevated' */
+  variant?: string;
+
+  /** 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' */
+  size?: string;
+
+  /** '' (platform default) | 'round' | 'square' */
+  shape?: string;
+
+  /** 'true' | 'false': connected group (shared outline, small inner corners) */
+  connected?: string;
+
+  /** Gap between buttons in points; negative means the platform default. */
+  spacing?: Double;
+
+  /** 'none' | 'single' | 'multiple' */
+  selection?: string;
+
+  /** Values of the selected buttons (single / multiple selection). */
+  selectedValues?: ReadonlyArray<string>;
+
+  /** 'true' | 'false': whether at least one button must stay selected */
+  selectionRequired?: string;
+
+  /** 'enabled' | 'disabled' */
+  interactivity?: string;
+
+  /** Container (background) color of the buttons. */
+  color?: ColorValue;
+
+  /** Label and icon color of the buttons. */
+  foregroundColor?: ColorValue;
+
+  /** Android: ripple color shown while pressing a button. */
+  androidRippleColor?: ColorValue;
+
+  /** Android: outline color (outlined variant). */
+  androidStrokeColor?: ColorValue;
+
+  /** Label font. */
+  labelStyle?: ButtonGroupLabelStyleProps;
+
+  /** Fired when a button is pressed. */
+  onButtonPress?: BubblingEventHandler<ButtonGroupPressEvent>;
+
+  /**
+   * Fired when the selection changes. Not `onSelectionChange`: React Native's
+   * TextInput registers `topSelectionChange` as a direct event, and an event
+   * name can't be both direct and bubbling.
+   */
+  onGroupSelectionChange?: BubblingEventHandler<ButtonGroupSelectionEvent>;
+
+  android?: ButtonGroupAndroidProps;
+}
+
+export default codegenNativeComponent<ButtonGroupNativeProps>(
+  'PCButtonGroup'
+) as HostComponent<ButtonGroupNativeProps>;

package/lib/commonjs/ButtonNativeComponent.ts

@@ -0,0 +1,76 @@
+// ButtonNativeComponent.ts
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+import type { BubblingEventHandler, Double } from './codegenTypes';
+
+/**
+ * Icon fields, pre-resolved on the JS side (see icons.ts).
+ */
+export type ButtonIconProps = Readonly<{
+  iconType: string; // '' | 'sfSymbol' | 'drawable' | 'image'
+  iconName: string; // SF Symbol (iOS) or drawable resource name (Android)
+  iconUri: string; // Resolved image URI when iconType === 'image'
+  iconScale: Double; // Resolved image scale when iconType === 'image'
+  iconTinted: string; // 'true' | 'false' — draw the image as a tinted template
+}>;
+
+/**
+ * Label font. Empty strings / 0 mean "platform default".
+ */
+export type ButtonLabelStyleProps = Readonly<{
+  fontFamily?: string;
+  fontSize?: Double;
+  fontWeight?: string; // 'normal' | 'bold' | '100'..'900'
+  fontStyle?: string; // 'normal' | 'italic'
+}>;
+
+export interface ButtonNativeProps extends ViewProps {
+  /** Button text. Empty for an icon-only button. */
+  label?: string;
+
+  /** Icon shown before the label, or alone when there is no label. */
+  icon?: ButtonIconProps;
+
+  /** 'filled' | 'tonal' | 'outlined' | 'text' | 'elevated' */
+  variant?: string;
+
+  /** 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' */
+  size?: string;
+
+  /** '' (platform default) | 'round' | 'square' */
+  shape?: string;
+
+  /** 'enabled' | 'disabled' */
+  interactivity?: string;
+
+  /** Container (background) color. */
+  color?: ColorValue;
+
+  /** Label and icon color. */
+  foregroundColor?: ColorValue;
+
+  /** Android: ripple color shown while pressing. */
+  androidRippleColor?: ColorValue;
+
+  /** Android: outline color (outlined variant). */
+  androidStrokeColor?: ColorValue;
+
+  /** Android: Material style, 'm3' | 'expressive' */
+  androidMaterial?: string;
+
+  /** Label font. */
+  labelStyle?: ButtonLabelStyleProps;
+
+  /**
+   * Screen-reader label, applied to the native button rather than the host
+   * view. Empty means "use the label".
+   */
+  spokenLabel?: string;
+
+  /** Fired when the button is pressed. */
+  onButtonPress?: BubblingEventHandler<Readonly<{}>>;
+}
+
+export default codegenNativeComponent<ButtonNativeProps>(
+  'PCButton'
+) as HostComponent<ButtonNativeProps>;

package/lib/commonjs/FloatingToolbar.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingToolbar = FloatingToolbar;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _FloatingToolbarNativeComponent = _interopRequireDefault(require("./FloatingToolbarNativeComponent"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// FloatingToolbar.tsx
+
+/** Glass effect style of the toolbar on iOS 26. */
+
+/** Material 3 color variant of the toolbar on Android. */
+
+function FloatingToolbar(props) {
+  const {
+    style,
+    orientation,
+    color,
+    ios,
+    android,
+    children,
+    ...viewProps
+  } = props;
+  const nativeIos = (0, _react.useMemo)(() => {
+    if (_reactNative.Platform.OS !== 'ios' || !ios) return undefined;
+    return {
+      effect: ios.effect ?? 'regular'
+    };
+  }, [ios]);
+  const nativeAndroid = (0, _react.useMemo)(() => {
+    if (_reactNative.Platform.OS !== 'android' || !android) return undefined;
+    return {
+      variant: android.variant ?? 'standard'
+    };
+  }, [android]);
+  const mergedStyle = (0, _react.useMemo)(() => [styles.toolbar, orientation === 'vertical' ? styles.vertical : styles.horizontal, style], [orientation, style]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingToolbarNativeComponent.default, {
+    style: mergedStyle,
+    color: color,
+    ios: nativeIos,
+    android: nativeAndroid,
+    ...viewProps,
+    children: children
+  });
+}
+
+// Material 3 floating toolbar: 8dp container padding, 4dp between actions.
+// The capsule shape comes from native.
+const styles = _reactNative.StyleSheet.create({
+  toolbar: {
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8,
+    gap: 4
+  },
+  horizontal: {
+    flexDirection: 'row'
+  },
+  vertical: {
+    flexDirection: 'column'
+  }
+});
+//# sourceMappingURL=FloatingToolbar.js.map

package/lib/commonjs/FloatingToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_FloatingToolbarNativeComponent","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FloatingToolbar","props","style","orientation","color","ios","android","children","viewProps","nativeIos","useMemo","Platform","OS","undefined","effect","nativeAndroid","variant","mergedStyle","styles","toolbar","vertical","horizontal","jsx","StyleSheet","create","alignSelf","alignItems","justifyContent","padding","gap","flexDirection"],"sourceRoot":"../../src","sources":["FloatingToolbar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/FloatingToolbarNativeComponent.ts

@@ -0,0 +1,31 @@
+// FloatingToolbarNativeComponent.ts
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+/**
+ * iOS-specific configuration.
+ */
+export type FloatingToolbarIOSProps = Readonly<{
+  /** Glass effect style on iOS 26: 'regular' | 'clear' */
+  effect?: string;
+}>;
+
+/**
+ * Android-specific configuration.
+ */
+export type FloatingToolbarAndroidProps = Readonly<{
+  /** Material color variant: 'standard' | 'vibrant' */
+  variant?: string;
+}>;
+
+export interface FloatingToolbarNativeProps extends ViewProps {
+  /** Container color. Default: the platform's toolbar material. */
+  color?: ColorValue;
+
+  ios?: FloatingToolbarIOSProps;
+  android?: FloatingToolbarAndroidProps;
+}
+
+export default codegenNativeComponent<FloatingToolbarNativeProps>(
+  'PCFloatingToolbar'
+) as HostComponent<FloatingToolbarNativeProps>;

package/lib/commonjs/SegmentedControl.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SegmentedControl = SegmentedControl;
-exports.resolveSegmentIcon = resolveSegmentIcon;
+exports.resolveSegmentIcon = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _SegmentedControlNativeComponent = _interopRequireDefault(require("./SegmentedControlNativeComponent"));
+var _icons = require("./icons");
+var _labelStyle = require("./labelStyle");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -18,22 +20,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // so we apply a minHeight that matches Material design touch target guidelines.
 const ANDROID_MIN_HEIGHT = 48;
 
-/**
- * A single icon source.
- *
- * - `string`: shorthand for an SF Symbol name on iOS and a drawable resource
- *   name on Android (the original API).
- * - `{ type: 'sfSymbol' }`: an SF Symbol. iOS only; ignored on Android.
- * - `{ type: 'drawable' }`: a drawable from the app's `res/drawable`.
- *   Android only; ignored on iOS.
- * - `{ type: 'image' }`: an image asset (`require('./icon.png')`) or a
- *   `{ uri }` source. Works on both platforms. Images are drawn as tinted
- *   templates unless `tinted` is `false`.
- */
+/** A single icon source. Alias of {@link PlatformIconSource}. */
 
 /**
  * An icon for a segment: a single source used on both platforms, or a
- * per-platform pair so callers don't need to branch on `Platform.OS`.
+ * per-platform pair. Alias of {@link PlatformIcon}.
  */
 
 /**
@@ -46,72 +37,14 @@ const ANDROID_MIN_HEIGHT = 48;
  *   their label. Screen readers still announce the label on both platforms.
  */
 
-/**
- * Font for segment labels. Each field falls back to the platform default.
- */
+/** Font for segment labels. Alias of {@link LabelStyle}. */
 
 /**
  * Badge colors. Both default to the platform look (red with white text).
  */
 
-const NO_ICON = {
-  iconType: '',
-  iconName: '',
-  iconUri: '',
-  iconScale: 1,
-  iconTinted: 'true'
-};
-function pickIconSource(icon) {
-  if (icon === undefined || typeof icon === 'string' || 'type' in icon) {
-    return icon;
-  }
-  return _reactNative.Platform.OS === 'ios' ? icon.ios : icon.android;
-}
-
-/**
- * Flattens the public icon shape into the strings native expects, dropping
- * sources that don't apply to the current platform.
- */
-function resolveSegmentIcon(icon) {
-  const source = pickIconSource(icon);
-  if (source === undefined) return NO_ICON;
-  if (typeof source === 'string') {
-    if (source.length === 0) return NO_ICON;
-    return {
-      ...NO_ICON,
-      iconType: _reactNative.Platform.OS === 'ios' ? 'sfSymbol' : 'drawable',
-      iconName: source
-    };
-  }
-  switch (source.type) {
-    case 'sfSymbol':
-      return _reactNative.Platform.OS === 'ios' ? {
-        ...NO_ICON,
-        iconType: 'sfSymbol',
-        iconName: source.name
-      } : NO_ICON;
-    case 'drawable':
-      return _reactNative.Platform.OS === 'android' ? {
-        ...NO_ICON,
-        iconType: 'drawable',
-        iconName: source.name
-      } : NO_ICON;
-    case 'image':
-      {
-        const resolved = _reactNative.Image.resolveAssetSource(source.source);
-        if (!resolved?.uri) return NO_ICON;
-        return {
-          iconType: 'image',
-          iconName: '',
-          iconUri: resolved.uri,
-          iconScale: resolved.scale > 0 ? resolved.scale : 1,
-          iconTinted: source.tinted === false ? 'false' : 'true'
-        };
-      }
-    default:
-      return NO_ICON;
-  }
-}
+/** Flattens a segment icon for native. Alias of {@link resolveIcon}. */
+const resolveSegmentIcon = exports.resolveSegmentIcon = _icons.resolveIcon;
 function normalizeSelectedValue(selected) {
   return selected ?? '';
 }
@@ -172,21 +105,14 @@ function SegmentedControl(props) {
   const nativeSelectedSegmentColor = selectedSegmentColor ?? (_reactNative.Platform.OS === 'ios' ? ios?.selectedSegmentTintColor : undefined);
 
   // Normalize the label font; empty / 0 means platform default
-  const nativeLabelStyle = (0, _react.useMemo)(() => {
-    if (!labelStyle) return undefined;
-    return {
-      fontFamily: labelStyle.fontFamily ?? '',
-      fontSize: labelStyle.fontSize ?? 0,
-      fontWeight: labelStyle.fontWeight === undefined ? '' : String(labelStyle.fontWeight),
-      fontStyle: labelStyle.fontStyle ?? ''
-    };
-  }, [labelStyle]);
+  const nativeLabelStyle = (0, _react.useMemo)(() => (0, _labelStyle.normalizeLabelStyle)(labelStyle), [labelStyle]);
 
   // Normalize Android props
   const nativeAndroid = (0, _react.useMemo)(() => {
     if (!android) return undefined;
     return {
-      selectionRequired: android.selectionRequired === false ? 'false' : 'true'
+      selectionRequired: android.selectionRequired === false ? 'false' : 'true',
+      material: android.material ?? 'expressive'
     };
   }, [android]);