@expo/ui 55.0.1 → 55.0.3

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 };

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

@@ -5,7 +5,7 @@ import { createViewModifierEventListener } from '../modifiers/utils';
 
 export type SpacerProps = {
   /**
-   * Modifiers for the component. Use weight() modifier to make the spacer flexible.
+   * Modifiers for the component. Use `weight()` modifier to make the spacer flexible.
    */
   modifiers?: ExpoModifier[];
 };
@@ -27,7 +27,7 @@ function transformProps(props: SpacerProps): NativeSpacerProps {
 
 /**
  * A spacer component that fills available space.
- * Use with the weight() modifier to create flexible spacing in Row or Column layouts.
+ * Use with the `weight()` modifier to create flexible spacing in `Row` or `Column` layouts.
  *
  * @example
  * ```tsx

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

@@ -1,32 +1,30 @@
 import { requireNativeView } from 'expo';
 import { NativeSyntheticEvent, type ColorValue } from 'react-native';
 
-import { ExpoModifier } from '../../types';
+import { type ModifierConfig } from '../../types';
 import { ExpoUIModule } from '../ExpoUIModule';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-// @docsMissing
 /**
- * Only for switch.
+ * Colors for switch core elements.
  */
-type SwitchElementColors = {
+export type SwitchColors = {
   checkedThumbColor?: ColorValue;
   checkedTrackColor?: ColorValue;
+  checkedBorderColor?: ColorValue;
+  checkedIconColor?: ColorValue;
   uncheckedThumbColor?: ColorValue;
   uncheckedTrackColor?: ColorValue;
-};
-
-// @docsMissing
-/**
- * Only for checkbox.
- */
-type CheckboxElementColors = {
-  checkedColor?: ColorValue;
-  disabledCheckedColor?: ColorValue;
-  uncheckedColor?: ColorValue;
-  disabledUncheckedColor?: ColorValue;
-  checkmarkColor?: ColorValue;
-  disabledIndeterminateColor?: ColorValue;
+  uncheckedBorderColor?: ColorValue;
+  uncheckedIconColor?: ColorValue;
+  disabledCheckedThumbColor?: ColorValue;
+  disabledCheckedTrackColor?: ColorValue;
+  disabledCheckedBorderColor?: ColorValue;
+  disabledCheckedIconColor?: ColorValue;
+  disabledUncheckedThumbColor?: ColorValue;
+  disabledUncheckedTrackColor?: ColorValue;
+  disabledUncheckedBorderColor?: ColorValue;
+  disabledUncheckedIconColor?: ColorValue;
 };
 
 export type SwitchProps = {
@@ -35,64 +33,32 @@ export type SwitchProps = {
    */
   value: boolean;
   /**
-   * Label for the switch.
-   *
-   * > On Android, the label has an effect only when the `Switch` is used inside a `ContextMenu`.
-   */
-  label?: string;
-
-  /**
-   * Type of the switch component. Can be `'checkbox'`, `'switch'`, or `'button'`.
-   * @default 'switch'
+   * Whether the switch is enabled.
+   * @default true
    */
-  variant?: 'checkbox' | 'switch' | 'button';
+  enabled?: boolean;
   /**
    * Callback function that is called when the checked state changes.
    */
-  onValueChange?: (value: boolean) => void;
-
+  onCheckedChange?: (value: boolean) => void;
   /**
-   * Picker color.
+   * Colors for switch core elements.
    */
-  color?: ColorValue;
-
+  colors?: SwitchColors;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
-
+  modifiers?: ModifierConfig[];
   /**
    * Children containing ThumbContent slot.
    * @platform android
    */
   children?: React.ReactNode;
-} & (SwitchSwitchVariantProps | SwitchCheckboxVariantProps | SwitchButtonVariantProps);
-
-export type SwitchSwitchVariantProps = {
-  variant?: 'switch';
-  /**
-   * Colors for switch's core elements.
-   * @platform android
-   */
-  elementColors?: SwitchElementColors;
 };
 
-export type SwitchCheckboxVariantProps = {
-  variant: 'checkbox';
-  /**
-   * Colors for checkbox core elements.
-   * @platform android
-   */
-  elementColors?: CheckboxElementColors;
-};
-
-export type SwitchButtonVariantProps = {
-  variant: 'button';
-  elementColors?: undefined;
-};
-
-type NativeSwitchProps = Omit<SwitchProps, 'onValueChange'> & {
-  onValueChange: (event: NativeSyntheticEvent<{ value: boolean }>) => void;
+type NativeSwitchProps = Omit<SwitchProps, 'onCheckedChange' | 'children'> & {
+  children?: React.ReactNode;
+  onCheckedChange: (event: NativeSyntheticEvent<{ value: boolean }>) => void;
 };
 
 type NativeSlotViewProps = {
@@ -122,39 +88,21 @@ export function SwitchThumbContent(props: ThumbContentProps) {
   return <SlotNativeView slotName="thumbContent">{props.children}</SlotNativeView>;
 }
 
-function getElementColors(props: SwitchProps) {
-  if (props.variant === 'button') {
-    return undefined;
-  }
-  if (!props.elementColors) {
-    if (props.variant === 'switch') {
-      return {
-        checkedTrackColor: props.color,
-      };
-    } else {
-      return {
-        checkedColor: props.color,
-      };
-    }
-  }
-  return props.elementColors;
-}
-
 function transformSwitchProps(props: SwitchProps): Omit<NativeSwitchProps, 'children'> {
-  const { modifiers, children, ...restProps } = props;
+  const { modifiers, children, onCheckedChange, ...restProps } = props;
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-    variant: props.variant ?? 'switch',
-    elementColors: getElementColors(props),
-    color: props.color,
-    onValueChange: ({ nativeEvent: { value } }) => {
-      props?.onValueChange?.(value);
+    onCheckedChange: ({ nativeEvent: { value } }) => {
+      onCheckedChange?.(value);
     },
-  } as Omit<NativeSwitchProps, 'children'>;
+  };
 }
 
+/**
+ * A switch component.
+ */
 function SwitchComponent(props: SwitchProps) {
   return <SwitchNativeView {...transformSwitchProps(props)}>{props.children}</SwitchNativeView>;
 }

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

@@ -1,83 +1,107 @@
 import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
-import { type ExpoModifier, type ViewEvent } from '../../types';
+import type { ModifierConfig, ViewEvent } from '../../types';
 import { ExpoUIModule } from '../ExpoUIModule';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+/**
+ * Colors for toggle button elements.
+ */
+export type ToggleButtonColors = {
+  containerColor?: ColorValue;
+  contentColor?: ColorValue;
+  checkedContainerColor?: ColorValue;
+  checkedContentColor?: ColorValue;
+  disabledContainerColor?: ColorValue;
+  disabledContentColor?: ColorValue;
+};
+
 export type ToggleButtonProps = {
   /**
    * Whether the toggle button is checked.
    */
   checked: boolean;
   /**
-   * Text to display in the button.
-   */
-  text?: string;
-  /**
-   * The variant of the toggle button.
-   * - `'default'` - Material 3 ToggleButton
-   * - `'icon'` - Icon toggle button
-   * - `'filledIcon'` - Filled icon toggle button
-   * - `'outlinedIcon'` - Outlined icon toggle button
-   * @default 'default'
-   */
-  variant?: 'default' | 'icon' | 'filledIcon' | 'outlinedIcon';
-  /**
-   * The color of the toggle button when checked.
+   * Callback that is called when the checked state changes.
    */
-  color?: ColorValue;
+  onCheckedChange?: (checked: boolean) => void;
   /**
-   * Whether the button is disabled.
+   * Whether the button is enabled for user interaction.
+   * @default true
    */
-  disabled?: boolean;
+  enabled?: boolean;
   /**
-   * Callback that is called when the checked state changes.
+   * Colors for toggle button elements.
    */
-  onCheckedChange?: (checked: boolean) => void;
+  colors?: ToggleButtonColors;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
-
+  modifiers?: ModifierConfig[];
   /**
-   * The content to display inside the toggle button.
+   * Content to display inside the toggle button.
    */
-  children?: React.ReactNode;
+  children: React.ReactNode;
 };
 
-type NativeToggleButtonProps = Omit<ToggleButtonProps, 'onCheckedChange'> &
-  ViewEvent<'onCheckedChange', { checked: boolean }>;
-
-const ToggleButtonNativeView: React.ComponentType<NativeToggleButtonProps> = requireNativeView(
-  'ExpoUI',
-  'ToggleButtonView'
-);
+type NativeToggleButtonProps = Omit<ToggleButtonProps, 'onCheckedChange' | 'children'> & {
+  children?: React.ReactNode;
+} & ViewEvent<'onCheckedChange', { checked: boolean }>;
 
-function transformProps(props: ToggleButtonProps): Omit<NativeToggleButtonProps, 'children'> {
-  const { modifiers, onCheckedChange, children, ...restProps } = props;
+/**
+ * @hidden
+ */
+export function transformToggleButtonProps(
+  props: Omit<ToggleButtonProps, 'children'>
+): NativeToggleButtonProps {
+  const { onCheckedChange, modifiers, ...restProps } = props;
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
+    enabled: props.enabled ?? true,
     onCheckedChange: onCheckedChange
       ? ({ nativeEvent: { checked } }) => onCheckedChange(checked)
       : undefined,
   };
 }
+
+function createToggleButtonComponent(name: string) {
+  const NativeView: React.ComponentType<NativeToggleButtonProps> = requireNativeView(
+    'ExpoUI',
+    name
+  );
+
+  function Component(props: ToggleButtonProps) {
+    const { children, ...restProps } = props;
+    return <NativeView {...transformToggleButtonProps(restProps)}>{children}</NativeView>;
+  }
+  Component.displayName = name;
+  return Component;
+}
+
 /**
  * A toggle button component that can be toggled on and off.
- *
- * When `text` prop is provided, it displays the text.
- * Otherwise, custom children can be passed to render custom content.
  */
-function ToggleButton(props: ToggleButtonProps) {
-  const { children } = props;
+const ToggleButton = Object.assign(createToggleButtonComponent('ToggleButton'), {
+  DefaultIconSpacing: ExpoUIModule.ToggleButtonIconSpacing as number,
+  DefaultIconSize: ExpoUIModule.ToggleButtonIconSize as number,
+});
 
-  return <ToggleButtonNativeView {...transformProps(props)}>{children}</ToggleButtonNativeView>;
-}
+/**
+ * An icon toggle button with no background.
+ */
+const IconToggleButton = createToggleButtonComponent('IconToggleButton');
 
-ToggleButton.DefaultIconSpacing = ExpoUIModule.ToggleButtonIconSpacing;
-ToggleButton.DefaultIconSize = ExpoUIModule.ToggleButtonIconSize;
+/**
+ * A filled icon toggle button with a solid background.
+ */
+const FilledIconToggleButton = createToggleButtonComponent('FilledIconToggleButton');
+
+/**
+ * An outlined icon toggle button with a border and no fill.
+ */
+const OutlinedIconToggleButton = createToggleButtonComponent('OutlinedIconToggleButton');
 
-export { ToggleButton };
+export { ToggleButton, IconToggleButton, FilledIconToggleButton, OutlinedIconToggleButton };

package/src/jetpack-compose/index.ts

@@ -3,24 +3,23 @@ import './MaterialSymbolsAssetsTransformer.fx';
 export * from './AlertDialog';
 export * from './BasicAlertDialog';
 export * from './Card';
+export * from './Checkbox';
 export * from './Chip';
-export * from './FilterChip';
 export * from './Button';
 export * from './Icon';
 export * from './IconButton';
-export * from './ContextMenu';
+export * from './DropdownMenu';
 export * from './Divider';
 export * from './Host';
 export * from './LazyColumn';
 export * from './ListItem';
 export * from './RNHostView';
 export * from './DatePicker';
-export * from './Picker';
+export * from './SegmentedButton';
 export * from './Progress';
 export * from './Slider';
 export * from './Spacer';
 export * from './Switch';
-export * from './TextButton';
 export * from './TextInput';
 export * from './ToggleButton';
 export * from './Shape';
@@ -29,11 +28,13 @@ export * from './Carousel';
 export * from './SearchBar';
 export * from './DockedSearchBar';
 export * from './HorizontalFloatingToolbar';
+export * from './FloatingActionButton';
 export * from './PullToRefreshBox';
 export * from './RadioButton';
 export * from './Surface';
 export * from './Text';
 
+export * from './AnimatedVisibility';
 export * from './Box';
 export * from './Row';
 export * from './Column';