@expo/ui 55.0.2 → 55.0.4

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/Switch/index.tsx

@@ -1,15 +1,14 @@
 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;
@@ -28,89 +27,38 @@ type SwitchElementColors = {
   disabledUncheckedIconColor?: ColorValue;
 };
 
-// @docsMissing
-/**
- * Only for checkbox.
- */
-type CheckboxElementColors = {
-  checkedColor?: ColorValue;
-  disabledCheckedColor?: ColorValue;
-  uncheckedColor?: ColorValue;
-  disabledUncheckedColor?: ColorValue;
-  checkmarkColor?: ColorValue;
-  disabledIndeterminateColor?: ColorValue;
-};
-
 export type SwitchProps = {
   /**
    * Indicates whether the switch is checked.
    */
   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'
-   */
-  variant?: 'checkbox' | 'switch' | 'button';
   /**
    * Whether the switch is enabled.
    * @default true
-   * @platform android
    */
   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 = {
@@ -140,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/TextInput/index.tsx

@@ -13,6 +13,8 @@ export type TextInputRef = {
   setText: (newText: string) => Promise<void>;
 };
 
+export type TextInputVariant = 'filled' | 'outlined';
+
 export type TextInputProps = {
   /**
    * Can be used for imperatively setting text on the TextInput component.
@@ -22,6 +24,14 @@ export type TextInputProps = {
    * Initial value that the TextInput displays when being mounted. As the TextInput is an uncontrolled component, change the key prop if you need to change the text value.
    */
   defaultValue?: string;
+  /**
+   * The visual style of the text input field.
+   * - `filled` - A text field with a filled background (default).
+   * - `outlined` - A text field with a transparent background and a border outline.
+   * @default filled
+   * @platform android
+   */
+  variant?: TextInputVariant;
   /**
    * A callback triggered when user types in text into the TextInput.
    */

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

package/src/jetpack-compose/modifiers/index.ts

@@ -262,9 +262,33 @@ export const clickable = (handler: () => void, options?: { indication?: boolean
  * Makes the view selectable, like a radio button row.
  * @param selected - Whether the item is currently selected.
  * @param handler - Function to call when the item is clicked.
+ * @param role - Optional semantic role for accessibility: 'radioButton', 'checkbox', 'switch', or 'tab'.
  */
-export const selectable = (selected: boolean, handler: () => void) =>
-  createModifierWithEventListener('selectable', handler, { selected });
+export const selectable = (
+  selected: boolean,
+  handler: () => void,
+  role?: 'radioButton' | 'checkbox' | 'switch' | 'tab'
+) => createModifierWithEventListener('selectable', handler, { selected, role });
+
+/**
+ * Marks a column/row as a selectable group for accessibility.
+ * Screen readers will treat the children as a group of selectable items.
+ */
+export const selectableGroup = () => createModifier('selectableGroup');
+
+/**
+ * Makes the view toggleable with accessibility semantics.
+ * Use this to make a row containing a checkbox or switch tappable as a whole.
+ * @param value - The current toggle state.
+ * @param handler - Function to call when toggled.
+ * @param options - Optional configuration.
+ * @param options.role - The semantic role for accessibility: `'checkbox'`, `'radioButton'`, `'switch'`, or `'tab'`.
+ */
+export const toggleable = (
+  value: boolean,
+  handler: () => void,
+  options?: { role?: 'checkbox' | 'radioButton' | 'switch' | 'tab' }
+) => createModifierWithEventListener('toggleable', handler, { value, role: options?.role });
 
 // =============================================================================
 // Utility Modifiers

package/src/swift-ui/Link/index.tsx

@@ -0,0 +1,52 @@
+import { requireNativeView } from 'expo';
+
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export type LinkProps = {
+  /**
+   * The text label for the Link. Use this for simple text links.
+   */
+  label?: string;
+  /**
+   * The URL for the link.
+   */
+  destination: string;
+  /**
+   * Custom content for the link label. Use this for custom label views.
+   * Only nested elements are supported, not plain strings.
+   */
+  children?: React.ReactElement | React.ReactElement[];
+} & CommonViewModifierProps;
+
+const LinkNativeView: React.ComponentType<LinkProps> = requireNativeView('ExpoUI', 'LinkView');
+
+/**
+ * Displays a native link component.
+ *
+ * @example
+ * ```tsx
+ * import { Link } from '@expo/ui/swift-ui';
+ * import { foregroundStyle, font } from '@expo/ui/swift-ui/modifiers';
+ *
+ * <Link
+ *   label="Open"
+ *   destination="https://expo.dev"
+ *   modifiers={[
+ *     foregroundStyle('red'),
+ *     font({ size: 24, weight: 'bold' })
+ *   ]}
+ * />
+ * ```
+ */
+export function Link(props: LinkProps) {
+  const { children, modifiers, ...restProps } = props;
+
+  const baseProps = {
+    ...restProps,
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+  };
+
+  return <LinkNativeView {...baseProps}>{children}</LinkNativeView>;
+}

package/src/swift-ui/ProgressView/index.tsx

@@ -1,9 +1,7 @@
 import { requireNativeView } from 'expo';
 
 import { createViewModifierEventListener } from '../modifiers/utils';
-import { type CommonViewModifierProps } from '../types';
-
-export type ClosedRangeDate = { lower: Date; upper: Date };
+import { type ClosedRangeDate, type CommonViewModifierProps } from '../types';
 
 export type ProgressViewProps = {
   /**

package/src/swift-ui/Stepper/index.tsx

@@ -10,9 +10,9 @@ export type StepperProps = {
    */
   label: string;
   /**
-   * The initial/default value of the stepper.
+   * The current value of the stepper.
    */
-  defaultValue?: number;
+  value?: number;
   /**
    * The step value for increment/decrement operations.
    */
@@ -28,11 +28,11 @@ export type StepperProps = {
   /**
    * Called when the stepper value changes.
    */
-  onValueChanged: (value: number) => void;
+  onValueChange: (value: number) => void;
 } & CommonViewModifierProps;
 
-type NativeStepperProps = Omit<StepperProps, 'onValueChanged'> &
-  ViewEvent<'onValueChanged', { value: number }>;
+type NativeStepperProps = Omit<StepperProps, 'onValueChange'> &
+  ViewEvent<'onValueChange', { value: number }>;
 
 const StepperNativeView: React.ComponentType<NativeStepperProps> = requireNativeView(
   'ExpoUI',
@@ -45,8 +45,8 @@ function transformStepperProps(props: StepperProps): NativeStepperProps {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-    onValueChanged: ({ nativeEvent: { value } }) => {
-      props.onValueChanged(value);
+    onValueChange: ({ nativeEvent: { value } }) => {
+      props.onValueChange(value);
     },
   };
 }