react-native-platform-components 1.3.0 → 1.5.0

package/lib/module/web/shared.js

@@ -0,0 +1,179 @@
+"use strict";
+
+// web/shared.ts
+//
+// Helpers shared by the web implementations. The web entry point renders
+// through react-native-web: `style` and the rest of the view props go on a
+// `View`, and the browser's own controls (`<button>`, `<input>`, `<select>`,
+// `<dialog>`) are rendered inside it.
+import { useSyncExternalStore } from 'react';
+
+/** A CSS style object for a DOM element. */
+
+/** The Material 3 baseline primary color, used until a theme is set. */
+const DEFAULT_PRIMARY = '#6750A4';
+let themePrimary;
+const themeListeners = new Set();
+
+/** Sets the brand color the web components use; `undefined` restores the default. */
+export function setThemePrimary(primary) {
+  if (primary === themePrimary) return;
+  themePrimary = primary;
+  themeListeners.forEach(listener => listener());
+}
+function subscribeTheme(listener) {
+  themeListeners.add(listener);
+  return () => {
+    themeListeners.delete(listener);
+  };
+}
+function getThemePrimary() {
+  return themePrimary ?? DEFAULT_PRIMARY;
+}
+
+/** The current brand color, from `setNativeTheme` / `useNativeTheme`. */
+export function usePrimaryColor() {
+  return useSyncExternalStore(subscribeTheme, getThemePrimary, getThemePrimary);
+}
+
+/**
+ * A color prop as CSS. `PlatformColor` and `DynamicColorIOS` have no web
+ * equivalent and fall back to the default.
+ */
+export function cssColor(color) {
+  return typeof color === 'string' ? color : undefined;
+}
+
+/** A label font as CSS. */
+export function cssFont(labelStyle) {
+  if (!labelStyle) return {};
+  return {
+    fontFamily: labelStyle.fontFamily,
+    fontSize: labelStyle.fontSize,
+    fontWeight: labelStyle.fontWeight,
+    fontStyle: labelStyle.fontStyle
+  };
+}
+
+/**
+ * The image to draw for an icon on web. Only `{ type: 'image' }` sources
+ * render: SF Symbols and Android drawables don't exist in a browser.
+ */
+export function webIcon(icon) {
+  if (icon === undefined || typeof icon === 'string') return undefined;
+  const candidates = 'type' in icon ? [icon] : [icon.ios, icon.android];
+  for (const source of candidates) {
+    if (source && typeof source !== 'string' && source.type === 'image') {
+      return {
+        source: source.source,
+        tinted: source.tinted !== false
+      };
+    }
+  }
+  return undefined;
+}
+const warned = new Set();
+function isDev() {
+  if (typeof __DEV__ !== 'undefined') return __DEV__;
+  return typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production';
+}
+
+/** Logs a development warning once per key. */
+export function warnOnce(key, message) {
+  if (warned.has(key) || !isDev()) return;
+  warned.add(key);
+  console.warn(`react-native-platform-components: ${message}`);
+}
+
+/** Resets `warnOnce`; for tests. */
+export function resetWarnings() {
+  warned.clear();
+}
+
+/** The value of the form control that fired a DOM event. */
+export function eventValue(event) {
+  return event.target.value;
+}
+
+/** Styles for the variants shared by Button and ButtonGroup. */
+export function buttonColors(variant, primary, color, tintColor) {
+  switch (variant) {
+    // Glass is an iOS 26 material; browsers get the Android mapping.
+    case 'tonal':
+    case 'glass':
+    case 'clearGlass':
+      return {
+        backgroundColor: color ?? `color-mix(in srgb, ${primary} 18%, Canvas)`,
+        color: tintColor ?? 'CanvasText',
+        border: 'none'
+      };
+    case 'outlined':
+      return {
+        backgroundColor: color ?? 'transparent',
+        color: tintColor ?? primary,
+        border: '1px solid color-mix(in srgb, CanvasText 30%, transparent)'
+      };
+    case 'text':
+      return {
+        backgroundColor: color ?? 'transparent',
+        color: tintColor ?? primary,
+        border: 'none'
+      };
+    case 'elevated':
+      return {
+        backgroundColor: color ?? 'Canvas',
+        color: tintColor ?? primary,
+        border: 'none',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.3)'
+      };
+    default:
+      return {
+        backgroundColor: color ?? primary,
+        color: tintColor ?? '#fff',
+        border: 'none'
+      };
+  }
+}
+
+/** Height and horizontal padding for each button size. */
+export const BUTTON_SIZES = {
+  xsmall: {
+    height: 32,
+    padding: 12,
+    fontSize: 14
+  },
+  small: {
+    height: 40,
+    padding: 16,
+    fontSize: 14
+  },
+  medium: {
+    height: 56,
+    padding: 24,
+    fontSize: 16
+  },
+  large: {
+    height: 96,
+    padding: 48,
+    fontSize: 24
+  },
+  xlarge: {
+    height: 136,
+    padding: 64,
+    fontSize: 32
+  }
+};
+
+/** Base style of a `<button>` rendered by these components. */
+export const BUTTON_BASE = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 8,
+  boxSizing: 'border-box',
+  fontFamily: 'inherit',
+  fontWeight: 500,
+  cursor: 'pointer',
+  whiteSpace: 'nowrap'
+};
+//# sourceMappingURL=shared.js.map

package/lib/module/web/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useSyncExternalStore","DEFAULT_PRIMARY","themePrimary","themeListeners","Set","setThemePrimary","primary","forEach","listener","subscribeTheme","add","delete","getThemePrimary","usePrimaryColor","cssColor","color","undefined","cssFont","labelStyle","fontFamily","fontSize","fontWeight","fontStyle","webIcon","icon","candidates","ios","android","source","type","tinted","warned","isDev","__DEV__","process","env","NODE_ENV","warnOnce","key","message","has","console","warn","resetWarnings","clear","eventValue","event","target","value","buttonColors","variant","tintColor","backgroundColor","border","boxShadow","BUTTON_SIZES","xsmall","height","padding","small","medium","large","xlarge","BUTTON_BASE","display","alignItems","justifyContent","gap","boxSizing","cursor","whiteSpace"],"sourceRoot":"../../../src","sources":["web/shared.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/webComponents.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=webComponents.js.map

package/lib/module/webComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["webComponents.ts"],"mappings":"","ignoreList":[]}

package/lib/typescript/commonjs/docs/sidebars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebars.d.ts","sourceRoot":"","sources":["../../../../docs/sidebars.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEtE,QAAA,MAAM,QAAQ,EAAE,cAwBf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"sidebars.d.ts","sourceRoot":"","sources":["../../../../docs/sidebars.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEtE,QAAA,MAAM,QAAQ,EAAE,cAsCf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/typescript/commonjs/src/Button.d.ts

@@ -0,0 +1,184 @@
+import React from 'react';
+import type { ColorValue, ViewProps } from 'react-native';
+import { type PlatformIcon } from './icons';
+import { type LabelStyle } from './labelStyle';
+import { type ContextMenuAction } from './menuItems';
+import type { Haptics } from './haptics';
+import type { AndroidMaterialStyle } from './sharedTypes';
+/**
+ * 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()`                      |
+ * | `glass`    | Filled tonal button             | `.glass()` (iOS 26+), else `.gray()` |
+ * | `prominentGlass` | Filled button             | `.prominentGlass()` (iOS 26+), else `.filled()` |
+ * | `clearGlass` | Filled tonal button           | `.clearGlass()` (iOS 26+), else `.gray()` |
+ * | `prominentClearGlass` | Filled button        | `.prominentClearGlass()` (iOS 26+), else `.filled()` |
+ *
+ * The glass variants are the iOS 26 Liquid Glass buttons; `color` tints
+ * the prominent glass and `tintColor` colors the label and icon. Clear glass
+ * is more transparent, for buttons over photos and other rich content.
+ */
+export type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'text' | 'elevated' | 'glass' | 'prominentGlass' | 'clearGlass' | 'prominentClearGlass';
+/**
+ * Button size. Material 3 Expressive defines five sizes; iOS maps them onto
+ * `UIButton.Configuration.Size` (`xsmall` → mini, `xlarge` → large).
+ */
+export type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+/**
+ * Corner shape. `round` is a pill; `square` keeps rounded corners. Unset
+ * means the platform default (round on Android, dynamic on iOS).
+ */
+export type ButtonShape = 'round' | 'square';
+/** Where the icon sits relative to the label. */
+export type ButtonIconPosition = 'leading' | 'trailing' | 'top' | 'bottom';
+/**
+ * An animated SF Symbol effect (iOS 17+). `wiggle`, `rotate` and `breathe`
+ * need iOS 18; on earlier versions they do nothing.
+ */
+export type ButtonSymbolEffect = 'bounce' | 'pulse' | 'variableColor' | 'wiggle' | 'rotate' | 'breathe';
+export interface ButtonProps extends ViewProps {
+    /** Button text. Omit for an icon-only button. */
+    label?: string;
+    /** Icon shown next to the label, or alone when there is no label. */
+    icon?: PlatformIcon;
+    /**
+     * Where the icon sits relative to the label. Default: `'leading'`.
+     * iOS: `imagePlacement`. Android: `iconGravity` (`textEnd` for trailing,
+     * `textTop` for top). Material has no bottom gravity, so `'bottom'` puts the
+     * icon on top on Android.
+     */
+    iconPosition?: ButtonIconPosition;
+    /** Emphasis. Default: `'filled'`. See {@link ButtonVariant}. */
+    variant?: ButtonVariant;
+    /** Size. Default: `'small'`, the Material 3 default. */
+    size?: ButtonSize;
+    /** Corner shape. Default: platform default. */
+    shape?: ButtonShape;
+    /**
+     * Corner radius in points (dp). Overrides `shape` when set.
+     * iOS: `background.cornerRadius` with the fixed corner style. Android: the
+     * `shapeAppearanceModel` corner size (the press morph is turned off).
+     */
+    cornerRadius?: number;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+    /**
+     * Shows a native spinner in place of the label and icon, keeping the
+     * button's size, and ignores presses. Sets `accessibilityState.busy`.
+     * iOS: `UIButton.Configuration.showsActivityIndicator`. Android: a Material
+     * circular progress indicator drawn as the button icon.
+     */
+    loading?: boolean;
+    /**
+     * Container (background) color.
+     * Android: `backgroundTint`. iOS: `baseBackgroundColor`.
+     */
+    color?: ColorValue;
+    /**
+     * Label and icon color.
+     * Android: text color and `iconTint`. iOS: `baseForegroundColor`.
+     */
+    tintColor?: ColorValue;
+    /**
+     * Container color while disabled. Unset keeps the platform's disabled look.
+     * iOS: a `configurationUpdateHandler` on `isEnabled`. Android: the disabled
+     * state of the `backgroundTint` color state list.
+     */
+    disabledColor?: ColorValue;
+    /**
+     * Label and icon color while disabled. Unset keeps the platform's disabled
+     * look. iOS: a `configurationUpdateHandler` on `isEnabled`. Android: the
+     * disabled state of the text color and `iconTint` color state lists.
+     */
+    disabledTintColor?: ColorValue;
+    /** Label font. */
+    labelStyle?: LabelStyle;
+    /**
+     * Largest scale the label's font can reach with the system text size
+     * (Dynamic Type / font scale), as on `Text`: `undefined` or `0` means no
+     * cap; values of 1 or more cap it.
+     */
+    maxFontSizeMultiplier?: number;
+    /** Screen-reader label. Defaults to `label`. */
+    accessibilityLabel?: string;
+    /**
+     * Haptic played when the user presses the button, flips a toggle or
+     * picks a menu item (not when a menu button opens its menu); not while
+     * `loading` or disabled. Default: none, like the native buttons. See
+     * {@link Haptics}.
+     */
+    haptics?: Haptics;
+    /**
+     * Called when the button is pressed. A button with a `menu` opens the menu
+     * instead.
+     */
+    onPress?: () => void;
+    /**
+     * Makes the button a toggle, with this as its controlled state. A press
+     * calls `onSelectedChange` with the opposite value; the button shows the
+     * new state once `selected` changes, and goes back if it doesn't.
+     *
+     * iOS: `changesSelectionAsPrimaryAction` and `isSelected`, with the
+     * configuration's selected look. Android: a checkable `MaterialButton`
+     * (`isChecked`), with the Material toggle button colors and shape.
+     */
+    selected?: boolean;
+    /** Called when a toggle button is pressed, with the state it asks for. */
+    onSelectedChange?: (selected: boolean) => void;
+    /**
+     * A menu the button opens when pressed, in place of `onPress`. Same items
+     * as ContextMenu: submenus, sections, icons, states and attributes.
+     *
+     * iOS: `UIButton.menu` with `showsMenuAsPrimaryAction`. Android: a
+     * `PopupMenu` anchored to the button.
+     */
+    menu?: readonly ContextMenuAction[];
+    /** Called when a menu item is picked, with its id and title. */
+    onMenuSelect?: (id: string, title: string) => void;
+    /** Called when the menu opens. */
+    onMenuOpen?: () => void;
+    /** Called when the menu closes. */
+    onMenuClose?: () => void;
+    /**
+     * iOS-specific configuration
+     */
+    ios?: {
+        /**
+         * Animates the SF Symbol icon (`UIImageView.addSymbolEffect`, iOS 17+;
+         * `wiggle`, `rotate` and `breathe` need iOS 18). Without
+         * `symbolEffectTrigger` the effect repeats until it is unset. Ignored
+         * for image icons and on Android.
+         */
+        symbolEffect?: ButtonSymbolEffect;
+        /**
+         * Plays `symbolEffect` once each time this value changes, instead of
+         * repeating it. The first value doesn't play.
+         */
+        symbolEffectTrigger?: number | string;
+    };
+    /**
+     * Android-specific configuration
+     */
+    android?: {
+        /** Ripple color shown while pressing. */
+        rippleColor?: ColorValue;
+        /** Outline color (outlined variant). */
+        strokeColor?: ColorValue;
+        /**
+         * Material style: Material 3 Expressive (default), or the classic
+         * Material 3 button, which has one size and shape (`size` and `shape`
+         * are ignored).
+         */
+        material?: AndroidMaterialStyle;
+    };
+    /** Test identifier */
+    testID?: string;
+}
+export declare function Button(props: ButtonProps): React.ReactElement;
+//# sourceMappingURL=Button.d.ts.map

package/lib/typescript/commonjs/src/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/Button.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/commonjs/src/ButtonGroup.d.ts

@@ -0,0 +1,117 @@
+import React from 'react';
+import type { ColorValue, ViewProps } from 'react-native';
+import type { ButtonShape, ButtonSize, ButtonVariant } from './Button';
+import { type PlatformIcon } from './icons';
+import { type LabelStyle } from './labelStyle';
+import type { Haptics } from './haptics';
+import type { AndroidMaterialStyle } from './sharedTypes';
+/**
+ * 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.
+ */
+export type ButtonGroupSelection = 'none' | 'single' | 'multiple';
+/**
+ * What happens to buttons that don't fit the group's width.
+ *
+ * - `none` (default): they are clipped.
+ * - `menu`: the trailing ones move into an overflow menu. Android: the
+ *   `MaterialButtonGroup` overflow menu. iOS: a "…" button with a `UIMenu`.
+ * - `wrap`: they wrap onto more rows (Android only; iOS clips them).
+ */
+export type ButtonGroupOverflow = 'none' | 'menu' | 'wrap';
+export interface ButtonGroupButtonProps {
+    /** Button text. Omit for an icon-only button. */
+    label?: string;
+    /** Unique value identifier for the button */
+    value: string;
+    /** Whether this specific button is disabled */
+    disabled?: boolean;
+    /** Optional icon. See {@link PlatformIcon}. */
+    icon?: PlatformIcon;
+    /** Screen-reader label. Defaults to `label`. */
+    accessibilityLabel?: string;
+}
+export interface ButtonGroupProps extends ViewProps {
+    /** Buttons to display */
+    buttons: readonly ButtonGroupButtonProps[];
+    /** Emphasis of every button. Default: `'outlined'`. */
+    variant?: ButtonVariant;
+    /** Size of every button. Default: `'small'`. */
+    size?: ButtonSize;
+    /** Corner shape of every button. Default: platform default. */
+    shape?: ButtonShape;
+    /**
+     * Connected group: the buttons share one outline with small inner corners
+     * (Material 3 "connected button group"). Default: `true` when `selection`
+     * is `'single'` or `'multiple'`, `false` otherwise.
+     */
+    connected?: boolean;
+    /** Gap between buttons in points. Default: the platform's group spacing. */
+    spacing?: number;
+    /** Selection behavior. Default: `'none'`. See {@link ButtonGroupSelection}. */
+    selection?: ButtonGroupSelection;
+    /**
+     * Values of the selected buttons (controlled). Only the first value is
+     * used with `selection: 'single'`.
+     */
+    selectedValues?: readonly string[];
+    /**
+     * Whether at least one button must stay selected. Default: `true` for
+     * `single`, `false` for `multiple`.
+     */
+    selectionRequired?: boolean;
+    /** Whether the entire group is disabled */
+    disabled?: boolean;
+    /** Container (background) color of the buttons. */
+    color?: ColorValue;
+    /** Label and icon color of the buttons. */
+    tintColor?: ColorValue;
+    /** Label font. */
+    labelStyle?: LabelStyle;
+    /**
+     * What happens to buttons that don't fit the group's width. Default:
+     * `'none'`. See {@link ButtonGroupOverflow}. A pick from the overflow menu
+     * counts as a press of its button (`onPress`, and the selection).
+     */
+    overflow?: ButtonGroupOverflow;
+    /**
+     * Haptic played when a button is pressed, in every selection mode.
+     * Default: none, like the native buttons. See {@link Haptics}.
+     */
+    haptics?: Haptics;
+    /**
+     * Called when a button is pressed, in every selection mode.
+     * @param value - The button's value
+     * @param index - The button's index
+     */
+    onPress?: (value: string, index: number) => void;
+    /**
+     * Called when the selection changes (`single` / `multiple` selection).
+     * @param values - Values of the selected buttons, in button order
+     */
+    onSelectionChange?: (values: string[]) => void;
+    /**
+     * Android-specific configuration
+     */
+    android?: {
+        /** @deprecated Use the cross-platform `overflow` prop. */
+        overflow?: ButtonGroupOverflow;
+        /** Ripple color shown while pressing a button. */
+        rippleColor?: ColorValue;
+        /** Outline color (outlined variant). */
+        strokeColor?: ColorValue;
+        /**
+         * Material style: Material 3 Expressive (default), or the classic
+         * Material 3 group, which has one size and shape (`size` and `shape`
+         * are ignored).
+         */
+        material?: AndroidMaterialStyle;
+    };
+    /** Test identifier */
+    testID?: string;
+}
+export declare function ButtonGroup(props: ButtonGroupProps): React.ReactElement;
+//# sourceMappingURL=ButtonGroup.d.ts.map

package/lib/typescript/commonjs/src/ButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../../src/ButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAMvE,OAAO,EAAe,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAuB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAE1D;;;;;;GAMG;AACH,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAElE;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,sBAAsB;IACrC,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IAEd,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,yBAAyB;IACzB,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAE3C,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB,gDAAgD;IAChD,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,WAAW,CAAC;IAEpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAEjC;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAEnC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,kBAAkB;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAE/B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAE/C;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,0DAA0D;QAC1D,QAAQ,CAAC,EAAE,mBAAmB,CAAC;QAE/B,kDAAkD;QAClD,WAAW,CAAC,EAAE,UAAU,CAAC;QAEzB,wCAAwC;QACxC,WAAW,CAAC,EAAE,UAAU,CAAC;QAEzB;;;;WAIG;QACH,QAAQ,CAAC,EAAE,oBAAoB,CAAC;KACjC,CAAC;IAEF,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAkGvE"}

package/lib/typescript/commonjs/src/ButtonGroupNativeComponent.d.ts

@@ -0,0 +1,154 @@
+import type { ColorValue, HostComponent, ViewProps } 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;
+    value: string;
+    disabled: string;
+    iconType: string;
+    iconName: string;
+    iconRequest: string;
+    iconUri: string;
+    iconScale: Double;
+    iconTinted: string;
+    accessibilityLabel: string;
+}>;
+/**
+ * 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. */
+    values: string[];
+}>;
+/**
+ * Label font. Empty strings / 0 mean "platform default".
+ */
+export type ButtonGroupLabelStyleProps = Readonly<{
+    fontFamily?: string;
+    fontSize?: Double;
+    fontWeight?: string;
+    fontStyle?: string;
+}>;
+/**
+ * One item of the split button's menu, the shape of `ContextMenuItem` (see
+ * menuItems.ts). Every field is set; empty strings mean "none" and flags are
+ * 'true' | 'false'.
+ */
+export type ButtonGroupMenuItem = Readonly<{
+    id: string;
+    title: string;
+    subtitle: string;
+    /** Index of the parent submenu or section; -1 at the top level */
+    parent: Int32;
+    /** 'action' | 'menu' | 'section' */
+    kind: string;
+    /** '' | 'sfSymbol' | 'drawable' | 'image' */
+    iconType: string;
+    iconName: string;
+    iconRequest: string;
+    iconUri: string;
+    iconScale: Double;
+    iconTinted: string;
+    imageColor: string;
+    destructive: string;
+    disabled: string;
+    keepsMenuPresented: string;
+    /** '' | 'off' | 'on' | 'mixed' */
+    state: string;
+    /** The action's own haptics; '' = the component's */
+    haptics: string;
+}>;
+/** Event emitted when a split button menu item is picked. */
+export type ButtonGroupMenuSelectEvent = Readonly<{
+    id: string;
+    title: string;
+}>;
+/**
+ * Android-specific configuration.
+ */
+export type ButtonGroupAndroidProps = Readonly<{
+    /** Material style: 'm3' | 'expressive' */
+    material?: string;
+}>;
+export interface ButtonGroupNativeProps extends ViewProps {
+    /** Buttons to display. */
+    buttons: ReadonlyArray<ButtonGroupButton>;
+    /**
+     * 'filled' | 'tonal' | 'outlined' | 'text' | 'elevated' | 'glass' |
+     * 'prominentGlass' | 'clearGlass' | 'prominentClearGlass'
+     */
+    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;
+    /**
+     * What happens to buttons that don't fit: 'none' | 'menu' | 'wrap'
+     * ('wrap' is Android only)
+     */
+    overflow?: string;
+    /**
+     * 'true' | 'false': a split button, the first button joined to a trailing
+     * button that opens `menu` (SplitButton).
+     */
+    split?: string;
+    /** The split button's menu, flattened (see ButtonGroupMenuItem). */
+    menu?: ReadonlyArray<ButtonGroupMenuItem>;
+    /** Screen-reader label of the split button's menu button. */
+    menuAccessibilityLabel?: string;
+    /**
+     * Haptic played when a button is pressed: '' (none added) | 'none' | 'selection' |
+     * 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error'
+     */
+    haptics?: string;
+    /** 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>;
+    /** Fired when a split button menu item is picked. */
+    onMenuSelect?: BubblingEventHandler<ButtonGroupMenuSelectEvent>;
+    /** Fired when the split button's menu opens. */
+    onMenuOpen?: BubblingEventHandler<Readonly<{}>>;
+    /** Fired when the split button's menu closes. */
+    onMenuClose?: BubblingEventHandler<Readonly<{}>>;
+    android?: ButtonGroupAndroidProps;
+}
+declare const _default: HostComponent<ButtonGroupNativeProps>;
+export default _default;
+//# sourceMappingURL=ButtonGroupNativeComponent.d.ts.map