@expo/ui 55.0.2 → 55.0.3

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?.(),
   };
 }
 

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

@@ -0,0 +1,109 @@
+import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
+
+import { type ModifierConfig, type ViewEvent } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+/**
+ * Colors for the segmented button in different states.
+ */
+export type SegmentedButtonColors = {
+  activeBorderColor?: ColorValue;
+  activeContentColor?: ColorValue;
+  inactiveBorderColor?: ColorValue;
+  inactiveContentColor?: ColorValue;
+  disabledActiveBorderColor?: ColorValue;
+  disabledActiveContentColor?: ColorValue;
+  disabledInactiveBorderColor?: ColorValue;
+  disabledInactiveContentColor?: ColorValue;
+  activeContainerColor?: ColorValue;
+  inactiveContainerColor?: ColorValue;
+  disabledActiveContainerColor?: ColorValue;
+  disabledInactiveContainerColor?: ColorValue;
+};
+
+export type SegmentedButtonProps = {
+  /**
+   * Whether the button is currently selected (used inside `SingleChoiceSegmentedButtonRow`).
+   */
+  selected?: boolean;
+  /**
+   * Callback that is called when the button is clicked (used inside `SingleChoiceSegmentedButtonRow`).
+   */
+  onClick?: () => void;
+  /**
+   * Whether the button is currently checked (used inside `MultiChoiceSegmentedButtonRow`).
+   */
+  checked?: boolean;
+  /**
+   * Callback that is called when the checked state changes (used inside `MultiChoiceSegmentedButtonRow`).
+   */
+  onCheckedChange?: (checked: boolean) => void;
+  /**
+   * Whether the button is enabled.
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Colors for the button in different states.
+   */
+  colors?: SegmentedButtonColors;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+  /**
+   * Children containing a `Label` slot.
+   */
+  children?: React.ReactNode;
+};
+
+type NativeSlotViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+type NativeSegmentedButtonProps = Omit<SegmentedButtonProps, 'onClick' | 'onCheckedChange'> &
+  ViewEvent<'onButtonPressed', void> &
+  ViewEvent<'onCheckedChange', { value: boolean }>;
+
+const SegmentedButtonNativeView: React.ComponentType<NativeSegmentedButtonProps> =
+  requireNativeView('ExpoUI', 'SegmentedButtonView');
+
+const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+/**
+ * Label slot for `SegmentedButton`.
+ */
+function SegmentedButtonLabel(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="label">{props.children}</SlotNativeView>;
+}
+
+/**
+ * A Material 3 segmented button. Must be used inside a `SingleChoiceSegmentedButtonRow`
+ * or `MultiChoiceSegmentedButtonRow`.
+ */
+function SegmentedButtonComponent(props: SegmentedButtonProps) {
+  const { children, modifiers, onClick, onCheckedChange, ...restProps } = props;
+  return (
+    <SegmentedButtonNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onButtonPressed={() => onClick?.()}
+      onCheckedChange={(e) => onCheckedChange?.(e.nativeEvent.value)}>
+      {children}
+    </SegmentedButtonNativeView>
+  );
+}
+
+SegmentedButtonComponent.Label = SegmentedButtonLabel;
+
+export { SegmentedButtonComponent as SegmentedButton };
+export { SingleChoiceSegmentedButtonRow } from '../SingleChoiceSegmentedButtonRow';
+export type { SingleChoiceSegmentedButtonRowProps } from '../SingleChoiceSegmentedButtonRow';
+export { MultiChoiceSegmentedButtonRow } from '../MultiChoiceSegmentedButtonRow';
+export type { MultiChoiceSegmentedButtonRowProps } from '../MultiChoiceSegmentedButtonRow';

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

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

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

@@ -1,14 +1,24 @@
 import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
-import { ExpoModifier, ViewEvent } from '../../types';
+import { type ModifierConfig, ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+type SlotNativeViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+const SlotNativeView: React.ComponentType<SlotNativeViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
 /**
- * Colors for slider's core elements.
+ * Colors for slider elements. Maps directly to Material3's `SliderDefaults.colors()`.
  * @platform android
  */
-export type SliderElementColors = {
+export type SliderColors = {
   thumbColor?: ColorValue;
   activeTrackColor?: ColorValue;
   inactiveTrackColor?: ColorValue;
@@ -38,35 +48,47 @@ export type SliderProps = {
    */
   max?: number;
   /**
-   * Colors for slider's core elements.
-   * @platform android
+   * Whether the slider is enabled for user interaction.
+   * @default true
    */
-  elementColors?: SliderElementColors;
+  enabled?: boolean;
   /**
-   * Slider color.
+   * Colors for slider elements. Maps to Material3's `SliderDefaults.colors()`.
+   * @platform android
    */
-  color?: ColorValue;
+  colors?: SliderColors;
   /**
    * Callback triggered on dragging along the slider.
    */
   onValueChange?: (value: number) => void;
-
+  /**
+   * Callback triggered when the user finishes changing the value (for example, lifts a finger).
+   * Maps to Material3's `onValueChangeFinished`.
+   */
+  onValueChangeFinished?: () => void;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
+  /**
+   * Slot children for custom thumb and track.
+   */
+  children?: React.ReactNode;
 };
 
-type NativeSliderProps = Omit<SliderProps, 'onValueChange'> &
-  ViewEvent<'onValueChanged', { value: number }>;
+type NativeSliderProps = Omit<SliderProps, 'onValueChange' | 'onValueChangeFinished' | 'children'> &
+  ViewEvent<'onValueChange', { value: number }> &
+  ViewEvent<'onValueChangeFinished', void> & { children?: React.ReactNode };
 
 const SliderNativeView: React.ComponentType<NativeSliderProps> = requireNativeView(
   'ExpoUI',
   'SliderView'
 );
 
-function transformSliderProps(props: SliderProps): NativeSliderProps {
-  const { modifiers, ...restProps } = props;
+function transformSliderProps(
+  props: Omit<SliderProps, 'children'>
+): Omit<NativeSliderProps, 'children'> {
+  const { modifiers, onValueChange, onValueChangeFinished, ...restProps } = props;
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
@@ -75,22 +97,47 @@ function transformSliderProps(props: SliderProps): NativeSliderProps {
     max: props.max ?? 1,
     steps: props.steps ?? 0,
     value: props.value ?? 0,
-    onValueChanged: ({ nativeEvent: { value } }) => {
-      props?.onValueChange?.(value);
-    },
-    elementColors: props.elementColors
-      ? props.elementColors
-      : props.color
-        ? {
-            thumbColor: props.color,
-            activeTrackColor: props.color,
-            activeTickColor: props.color,
-          }
-        : undefined,
-    color: props.color,
+    enabled: props.enabled ?? true,
+    onValueChange: onValueChange
+      ? ({ nativeEvent: { value } }) => {
+          onValueChange(value);
+        }
+      : undefined,
+    onValueChangeFinished: onValueChangeFinished ? () => onValueChangeFinished() : undefined,
   };
 }
 
-export function Slider(props: SliderProps) {
-  return <SliderNativeView {...transformSliderProps(props)} />;
+/**
+ * A custom thumb slot for `Slider`.
+ * Wrap any content to use as the slider's thumb indicator.
+ *
+ * @platform android
+ */
+function Thumb(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="thumb">{props.children}</SlotNativeView>;
 }
+
+/**
+ * A custom track slot for `Slider`.
+ * Wrap any content to use as the slider's track.
+ *
+ * @platform android
+ */
+function Track(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="track">{props.children}</SlotNativeView>;
+}
+
+/**
+ * A slider component that wraps Material3's `Slider`.
+ *
+ * @platform android
+ */
+function SliderComponent(props: SliderProps) {
+  const { children, ...restProps } = props;
+  return <SliderNativeView {...transformSliderProps(restProps)}>{children}</SliderNativeView>;
+}
+
+SliderComponent.Thumb = Thumb;
+SliderComponent.Track = Track;
+
+export { SliderComponent as Slider };