@expo/ui 55.0.1 → 55.0.3

package/src/jetpack-compose/FloatingActionButton/index.tsx

@@ -0,0 +1,207 @@
+import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
+
+import { ModifierConfig, ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+type SlotChildProps = {
+  children: React.ReactNode;
+};
+
+type NativeSlotViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+/**
+ * Props shared by all `FloatingActionButton` variants.
+ */
+export type FloatingActionButtonProps = {
+  /**
+   * Slot-based children (use `.Icon` sub-component).
+   */
+  children: React.ReactNode;
+
+  /**
+   * The background color of the button container.
+   * Defaults to `FloatingActionButtonDefaults.containerColor` (primary container).
+   */
+  containerColor?: ColorValue;
+
+  /**
+   * Callback invoked when the button is clicked.
+   */
+  onClick?: () => void;
+
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+};
+
+/**
+ * Props for the `SmallFloatingActionButton` component.
+ * Same as {@link FloatingActionButtonProps}.
+ */
+export type SmallFloatingActionButtonProps = FloatingActionButtonProps;
+
+/**
+ * Props for the `LargeFloatingActionButton` component.
+ * Same as {@link FloatingActionButtonProps}.
+ */
+export type LargeFloatingActionButtonProps = FloatingActionButtonProps;
+
+/**
+ * Props for the `ExtendedFloatingActionButton` component.
+ */
+export type ExtendedFloatingActionButtonProps = FloatingActionButtonProps & {
+  /**
+   * Slot-based children (use `.Icon` and `.Text` sub-components).
+   */
+  children: React.ReactNode;
+
+  /**
+   * Controls whether the label is shown (expanded) or hidden (collapsed).
+   * @default true
+   */
+  expanded?: boolean;
+};
+
+/**
+ * @hidden
+ */
+type NativeFloatingActionButtonProps = Omit<FloatingActionButtonProps, 'onClick'> &
+  ViewEvent<'onButtonPressed', void> & {
+    variant: string;
+    expanded?: boolean;
+  };
+
+const FloatingActionButtonNativeView: React.ComponentType<NativeFloatingActionButtonProps> =
+  requireNativeView('ExpoUI', 'FloatingActionButtonView');
+
+const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+function FABIcon(props: SlotChildProps) {
+  return <SlotNativeView slotName="icon">{props.children}</SlotNativeView>;
+}
+
+function FABText(props: SlotChildProps) {
+  return <SlotNativeView slotName="text">{props.children}</SlotNativeView>;
+}
+
+function transformProps(
+  props: FloatingActionButtonProps & { variant: string; expanded?: boolean }
+): NativeFloatingActionButtonProps {
+  const { children, onClick, modifiers, ...restProps } = props;
+
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    children,
+    onButtonPressed: onClick,
+  };
+}
+
+/**
+ * Renders a Material Design 3 small `FloatingActionButton`.
+ *
+ * Wraps [`SmallFloatingActionButton`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SmallFloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)).
+ *
+ * @example
+ * ```tsx
+ * import { SmallFloatingActionButton, Host, Icon } from '@expo/ui/jetpack-compose';
+ *
+ * <Host matchContents>
+ *   <SmallFloatingActionButton onClick={() => console.log('pressed')}>
+ *     <SmallFloatingActionButton.Icon>
+ *       <Icon source={require('./assets/add.xml')} />
+ *     </SmallFloatingActionButton.Icon>
+ *   </SmallFloatingActionButton>
+ * </Host>
+ * ```
+ */
+function SmallFloatingActionButtonComponent(props: SmallFloatingActionButtonProps) {
+  return <FloatingActionButtonNativeView {...transformProps({ ...props, variant: 'small' })} />;
+}
+SmallFloatingActionButtonComponent.Icon = FABIcon;
+export { SmallFloatingActionButtonComponent as SmallFloatingActionButton };
+
+/**
+ * Renders a Material Design 3 standard `FloatingActionButton`.
+ *
+ * Wraps [`FloatingActionButton`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)).
+ *
+ * @example
+ * ```tsx
+ * import { FloatingActionButton, Host, Icon } from '@expo/ui/jetpack-compose';
+ *
+ * <Host matchContents>
+ *   <FloatingActionButton onClick={() => console.log('pressed')}>
+ *     <FloatingActionButton.Icon>
+ *       <Icon source={require('./assets/add.xml')} />
+ *     </FloatingActionButton.Icon>
+ *   </FloatingActionButton>
+ * </Host>
+ * ```
+ */
+function FloatingActionButtonComponent(props: FloatingActionButtonProps) {
+  return <FloatingActionButtonNativeView {...transformProps({ ...props, variant: 'medium' })} />;
+}
+FloatingActionButtonComponent.Icon = FABIcon;
+export { FloatingActionButtonComponent as FloatingActionButton };
+
+/**
+ * Renders a Material Design 3 large `FloatingActionButton`.
+ *
+ * Wraps [`LargeFloatingActionButton`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LargeFloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)).
+ *
+ * @example
+ * ```tsx
+ * import { LargeFloatingActionButton, Host, Icon } from '@expo/ui/jetpack-compose';
+ *
+ * <Host matchContents>
+ *   <LargeFloatingActionButton onClick={() => console.log('pressed')}>
+ *     <LargeFloatingActionButton.Icon>
+ *       <Icon source={require('./assets/add.xml')} />
+ *     </LargeFloatingActionButton.Icon>
+ *   </LargeFloatingActionButton>
+ * </Host>
+ * ```
+ */
+function LargeFloatingActionButtonComponent(props: LargeFloatingActionButtonProps) {
+  return <FloatingActionButtonNativeView {...transformProps({ ...props, variant: 'large' })} />;
+}
+LargeFloatingActionButtonComponent.Icon = FABIcon;
+export { LargeFloatingActionButtonComponent as LargeFloatingActionButton };
+
+/**
+ * Renders a Material Design 3 `ExtendedFloatingActionButton` with animated label expansion.
+ *
+ * Wraps [`ExtendedFloatingActionButton`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ExtendedFloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)).
+ *
+ * @example
+ * ```tsx
+ * import { ExtendedFloatingActionButton, Host, Icon, Text } from '@expo/ui/jetpack-compose';
+ *
+ * <Host matchContents>
+ *   <ExtendedFloatingActionButton expanded={true} onClick={() => console.log('pressed')}>
+ *     <ExtendedFloatingActionButton.Icon>
+ *       <Icon source={require('./assets/edit.xml')} />
+ *     </ExtendedFloatingActionButton.Icon>
+ *     <ExtendedFloatingActionButton.Text>
+ *       <Text>Edit</Text>
+ *     </ExtendedFloatingActionButton.Text>
+ *   </ExtendedFloatingActionButton>
+ * </Host>
+ * ```
+ */
+function ExtendedFloatingActionButtonComponent(props: ExtendedFloatingActionButtonProps) {
+  return <FloatingActionButtonNativeView {...transformProps({ ...props, variant: 'extended' })} />;
+}
+ExtendedFloatingActionButtonComponent.Icon = FABIcon;
+ExtendedFloatingActionButtonComponent.Text = FABText;
+export { ExtendedFloatingActionButtonComponent as ExtendedFloatingActionButton };

package/src/jetpack-compose/HorizontalFloatingToolbar/index.tsx

@@ -21,7 +21,7 @@ export type HorizontalFloatingToolbarProps = {
   modifiers?: ExpoModifier[];
 };
 
-export type FloatingActionButtonProps = {
+export type HorizontalFloatingToolbarFloatingActionButtonProps = {
   /**
    * A callback that is called when the button is pressed.
    */
@@ -54,7 +54,9 @@ const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeVi
  * FloatingActionButton component for HorizontalFloatingToolbar.
  * This component marks its children to be rendered in the FAB slot.
  */
-export function HorizontalFloatingToolbarFloatingActionButton(props: FloatingActionButtonProps) {
+export function HorizontalFloatingToolbarFloatingActionButton(
+  props: HorizontalFloatingToolbarFloatingActionButtonProps
+) {
   return (
     <SlotNativeView slotName="floatingActionButton" onSlotEvent={props.onPress}>
       {props.children}

package/src/jetpack-compose/IconButton/index.tsx

@@ -1,88 +1,81 @@
 import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
-import { ExpoModifier, ViewEvent } from '../../types';
-import { ButtonElementColors } from '../Button';
-import { parseJSXShape, ShapeJSXElement, ShapeRecordProps } from '../Shape';
-import { createViewModifierEventListener } from '../modifiers/utils';
+import type { ModifierConfig, ViewEvent } from '../../types';
+import { transformButtonProps } from '../Button';
+import { type ShapeJSXElement, type ShapeRecordProps } from '../Shape';
 
 /**
- * The built-in button styles available on Android.
- * - `outlined` - A button with an outline.
- * - `elevated` - A filled button with a shadow.
+ * Colors for icon button elements.
  */
-export type IconButtonVariant = 'default' | 'bordered' | 'outlined';
+export type IconButtonColors = {
+  containerColor?: ColorValue;
+  contentColor?: ColorValue;
+  disabledContainerColor?: ColorValue;
+  disabledContentColor?: ColorValue;
+};
 
 export type IconButtonProps = {
   /**
-   * A callback that is called when the button is pressed.
-   */
-  onPress?: () => void;
-  /**
-   * The button variant.
+   * Callback that is called when the icon button is clicked.
    */
-  variant?: IconButtonVariant;
+  onClick?: () => void;
   /**
-   * The text to display inside the button.
+   * Whether the icon button is enabled for user interaction.
+   * @default true
    */
-  children?: React.JSX.Element;
+  enabled?: boolean;
   /**
-   * Colors for button's core elements.
+   * Colors for icon button elements.
    * @platform android
    */
-  elementColors?: ButtonElementColors;
+  colors?: IconButtonColors;
   /**
-   * Button color.
+   * The shape of the icon button.
    */
-  color?: ColorValue;
   shape?: ShapeJSXElement;
   /**
-   * Disabled state of the button.
+   * Modifiers for the component.
    */
-  disabled?: boolean;
-
+  modifiers?: ModifierConfig[];
   /**
-   * Modifiers for the component.
+   * Content to display inside the icon button.
    */
-  modifiers?: ExpoModifier[];
+  children: React.ReactNode;
 };
 
-/**
- * @hidden
- */
-export type NativeIconButtonProps = Omit<IconButtonProps, 'role' | 'onPress' | 'shape'> & {
+type NativeIconButtonProps = Omit<IconButtonProps, 'onClick' | 'shape' | 'children'> & {
   shape?: ShapeRecordProps;
+  children?: React.ReactNode;
 } & ViewEvent<'onButtonPressed', void>;
 
-// We have to work around the `role` and `onPress` props being reserved by React Native.
-const IconButtonNativeView: React.ComponentType<NativeIconButtonProps> = requireNativeView(
-  'ExpoUI',
-  'IconButton'
-);
+function createIconButtonComponent(name: string) {
+  const NativeView: React.ComponentType<NativeIconButtonProps> = requireNativeView('ExpoUI', name);
 
-function transformIconButtonProps(props: IconButtonProps): NativeIconButtonProps {
-  const { children, onPress, shape, modifiers, ...restProps } = props;
-
-  return {
-    modifiers,
-    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
-    ...restProps,
-    children,
-    shape: parseJSXShape(shape),
-    onButtonPressed: onPress,
-    elementColors: props.elementColors
-      ? props.elementColors
-      : props.color
-        ? {
-            containerColor: props.color,
-          }
-        : undefined,
-  };
+  function Component(props: IconButtonProps) {
+    const { children, ...restProps } = props;
+    return <NativeView {...transformButtonProps(restProps)}>{children}</NativeView>;
+  }
+  Component.displayName = name;
+  return Component;
 }
 
 /**
- * Displays a native button component.
+ * A standard icon button with no background.
  */
-export function IconButton(props: IconButtonProps) {
-  return <IconButtonNativeView {...transformIconButtonProps(props)} />;
-}
+export const IconButton = createIconButtonComponent('IconButton');
+
+/**
+ * A filled icon button with a solid background.
+ */
+export const FilledIconButton = createIconButtonComponent('FilledIconButton');
+
+/**
+ * A filled tonal icon button with a muted background.
+ */
+export const FilledTonalIconButton = createIconButtonComponent('FilledTonalIconButton');
+
+/**
+ * An outlined icon button with a border and no fill.
+ */
+export const OutlinedIconButton = createIconButtonComponent('OutlinedIconButton');

package/src/jetpack-compose/MultiChoiceSegmentedButtonRow/index.tsx

@@ -0,0 +1,34 @@
+import { requireNativeView } from 'expo';
+
+import { type ModifierConfig } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type MultiChoiceSegmentedButtonRowProps = {
+  /**
+   * SegmentedButton children.
+   */
+  children: React.ReactNode;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+};
+
+const MultiChoiceSegmentedButtonRowNativeView: React.ComponentType<MultiChoiceSegmentedButtonRowProps> =
+  requireNativeView('ExpoUI', 'MultiChoiceSegmentedButtonRowView');
+
+/**
+ * A row container for multi-choice `SegmentedButton` children.
+ * Maps to Material 3 `MultiChoiceSegmentedButtonRow`.
+ */
+export function MultiChoiceSegmentedButtonRow(props: MultiChoiceSegmentedButtonRowProps) {
+  const { children, modifiers, ...restProps } = props;
+  return (
+    <MultiChoiceSegmentedButtonRowNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}>
+      {children}
+    </MultiChoiceSegmentedButtonRowNativeView>
+  );
+}

package/src/jetpack-compose/Progress/index.tsx

@@ -1,102 +1,160 @@
 import { requireNativeView } from 'expo';
-import { ColorValue } from 'react-native';
+import { type ColorValue } from 'react-native';
 
-import { ExpoModifier } from '../../types';
+import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type ProgressElementColors = {
-  /**
-   * Track color.
-   *
-   * @platform android
-   */
-  trackColor?: ColorValue;
-};
+/**
+ * Stroke cap style for progress indicators.
+ */
+export type StrokeCap = 'round' | 'butt' | 'square';
 
-export type CircularProgressProps = {
+/**
+ * Common props shared by all progress indicator variants.
+ */
+type BaseProgressProps = {
   /**
-   * The current progress value of the slider. This is a number between `0` and `1`.
+   * The current progress value between `0` and `1`. Omit for indeterminate.
    */
   progress?: number | null;
   /**
-   * Progress color.
+   * Progress indicator color.
    */
   color?: ColorValue;
   /**
-   * Colors for switch's core elements.
-   * @platform android
+   * Track (background) color.
    */
-  elementColors?: ProgressElementColors;
+  trackColor?: ColorValue;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
-export type LinearProgressProps = {
-  /**
-   * The current progress value of the slider. This is a number between `0` and `1`.
-   */
-  progress?: number | null;
+function transformProps<T extends BaseProgressProps>(props: T): T {
+  const { modifiers, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+  } as T;
+}
+
+function createProgressComponent<P extends BaseProgressProps>(
+  viewName: string
+): React.ComponentType<P> {
+  const NativeView: React.ComponentType<P> = requireNativeView('ExpoUI', viewName);
+  return function ProgressComponent(props: P) {
+    return <NativeView {...transformProps(props)} />;
+  };
+}
+
+// region LinearProgressIndicator
+
+/**
+ * Configuration for the stop indicator dot at the end of the determinate linear progress track.
+ * When provided, draws a stop indicator with the given options. Omit to use the Compose default.
+ */
+export type DrawStopIndicatorConfig = {
   /**
-   * Progress color.
+   * Color of the stop indicator. Defaults to the indicator's color.
    */
   color?: ColorValue;
   /**
-   * Colors for switch's core elements.
-   * @platform android
+   * Stroke cap style for the stop indicator. Defaults to the indicator's strokeCap.
    */
-  elementColors?: ProgressElementColors;
+  strokeCap?: StrokeCap;
   /**
-   * Modifiers for the component.
+   * Size of the stop indicator in dp. Defaults to the Material 3 default.
    */
-  modifiers?: ExpoModifier[];
+  stopSize?: number;
 };
 
-type NativeProgressProps =
-  | CircularProgressProps
-  | (LinearProgressProps & {
-      variant: 'linear' | 'circular' | 'linearWavy' | 'circularWavy';
-    });
+export type LinearProgressIndicatorProps = BaseProgressProps & {
+  /**
+   * Stroke cap style for the indicator ends.
+   * @default 'round'
+   */
+  strokeCap?: StrokeCap;
+  /**
+   * Gap size between the indicator and track in dp.
+   */
+  gapSize?: number;
+  /**
+   * Configuration for the stop indicator dot at the end of the determinate progress track.
+   */
+  drawStopIndicator?: DrawStopIndicatorConfig;
+};
 
-const NativeProgressView: React.ComponentType<NativeProgressProps> = requireNativeView(
-  'ExpoUI',
-  'ProgressView'
+/**
+ * A linear progress indicator that displays progress in a horizontal bar.
+ *
+ * Matches the Jetpack Compose `LinearProgressIndicator`.
+ */
+export const LinearProgressIndicator = createProgressComponent<LinearProgressIndicatorProps>(
+  'LinearProgressIndicatorView'
 );
 
-function transformProps(props: CircularProgressProps | LinearProgressProps): NativeProgressProps {
-  const { modifiers, ...restProps } = props;
-  return {
-    modifiers,
-    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
-    ...restProps,
-  };
-}
+// endregion
 
-/**
- * Renders a `CircularProgress` component.
- */
-export function CircularProgress(props: CircularProgressProps) {
-  return <NativeProgressView {...transformProps(props)} variant="circular" />;
-}
+// region CircularProgressIndicator
+
+export type CircularProgressIndicatorProps = BaseProgressProps & {
+  /**
+   * Width of the circular stroke in dp.
+   */
+  strokeWidth?: number;
+  /**
+   * Stroke cap style for the indicator ends.
+   * @default 'round'
+   */
+  strokeCap?: StrokeCap;
+  /**
+   * Gap size between the indicator and track in dp.
+   */
+  gapSize?: number;
+};
 
 /**
- * Renders a `LinearProgress` component.
+ * A circular progress indicator that displays progress in a circular format.
+ *
+ * Matches the Jetpack Compose `CircularProgressIndicator`.
  */
-export function LinearProgress(props: LinearProgressProps) {
-  return <NativeProgressView {...transformProps(props)} variant="linear" />;
-}
+export const CircularProgressIndicator = createProgressComponent<CircularProgressIndicatorProps>(
+  'CircularProgressIndicatorView'
+);
+
+// endregion
+
+// region LinearWavyProgressIndicator
+
+export type LinearWavyProgressIndicatorProps = BaseProgressProps & {
+  /**
+   * Size of the stop indicator in dp at the end of the determinate progress track.
+   */
+  stopSize?: number;
+};
 
 /**
- * Renders a `CircularWavyProgress` component with wavy animation.
+ * A linear progress indicator with wavy animation style.
+ *
+ * Matches the Jetpack Compose `LinearWavyProgressIndicator`.
  */
-export function CircularWavyProgress(props: CircularProgressProps) {
-  return <NativeProgressView {...transformProps(props)} variant="circularWavy" />;
-}
+export const LinearWavyProgressIndicator =
+  createProgressComponent<LinearWavyProgressIndicatorProps>('LinearWavyProgressIndicatorView');
+
+// endregion
+
+// region CircularWavyProgressIndicator
+
+export type CircularWavyProgressIndicatorProps = BaseProgressProps;
 
 /**
- * Renders a `LinearWavyProgress` component with wavy animation.
+ * A circular progress indicator with wavy animation style.
+ *
+ * Matches the Jetpack Compose `CircularWavyProgressIndicator`.
  */
-export function LinearWavyProgress(props: LinearProgressProps) {
-  return <NativeProgressView {...transformProps(props)} variant="linearWavy" />;
-}
+export const CircularWavyProgressIndicator =
+  createProgressComponent<CircularWavyProgressIndicatorProps>('CircularWavyProgressIndicatorView');
+
+// endregion

package/src/jetpack-compose/RadioButton/index.tsx

@@ -1,6 +1,6 @@
 import { requireNativeView } from 'expo';
 
-import { type ExpoModifier, type ViewEvent } from '../../types';
+import { type ModifierConfig, type ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
 export type RadioButtonProps = {
@@ -15,12 +15,13 @@ export type RadioButtonProps = {
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
-type NativeRadioButtonProps = Omit<RadioButtonProps, 'onClick'> & {
-  nativeClickable: boolean;
-} & ViewEvent<'onNativeClick', void>;
+type NativeRadioButtonProps = Omit<RadioButtonProps, 'onClick'> &
+  ViewEvent<'onButtonPressed', void> & {
+    clickable: boolean;
+  };
 
 const RadioButtonNativeView: React.ComponentType<NativeRadioButtonProps> = requireNativeView(
   'ExpoUI',
@@ -33,10 +34,8 @@ function transformProps(props: RadioButtonProps): NativeRadioButtonProps {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-    nativeClickable: onClick != null,
-    onNativeClick: () => {
-      onClick?.();
-    },
+    clickable: onClick != null,
+    onButtonPressed: () => onClick?.(),
   };
 }