@expo/ui 55.0.3 → 55.0.4

package/src/datetime-picker/DateTimePicker.tsx

@@ -0,0 +1,94 @@
+import { buildEvent, buildChangeEvent, type DateTimePickerProps } from './types';
+import { DatePicker, type DatePickerProps } from '../swift-ui/DatePicker';
+import { Host } from '../swift-ui/Host';
+import { disabled as disabledModifier, ModifierConfig, tint } from '../swift-ui/modifiers';
+import { datePickerStyle } from '../swift-ui/modifiers/datePickerStyle';
+import { environment } from '../swift-ui/modifiers/environment';
+
+type DatePickerStyleType = 'automatic' | 'compact' | 'graphical' | 'wheel';
+
+function modeToDisplayedComponents(
+  mode: DateTimePickerProps['mode']
+): DatePickerProps['displayedComponents'] {
+  switch (mode) {
+    case 'time':
+      return ['hourAndMinute'];
+    case 'datetime':
+      return ['date', 'hourAndMinute'];
+    case 'date':
+    default:
+      return ['date'];
+  }
+}
+
+function displayToDatePickerStyle(display: DateTimePickerProps['display']): DatePickerStyleType {
+  switch (display) {
+    case 'spinner':
+      return 'wheel';
+    case 'compact':
+      return 'compact';
+    case 'inline':
+      return 'graphical';
+    default:
+      return 'automatic';
+  }
+}
+
+export function DateTimePicker(props: DateTimePickerProps) {
+  const {
+    value,
+    onChange,
+    onValueChange,
+    mode = 'date',
+    minimumDate,
+    maximumDate,
+    display = 'default',
+    testID,
+    style,
+    accentColor,
+    disabled,
+    locale,
+    themeVariant,
+    timeZoneName,
+  } = props;
+
+  const pickerStyle = displayToDatePickerStyle(display);
+
+  const modifiers: ModifierConfig[] = [datePickerStyle(pickerStyle)];
+  if (accentColor) {
+    modifiers.push(tint(accentColor));
+  }
+  if (disabled != null) {
+    modifiers.push(disabledModifier(disabled));
+  }
+  if (locale) {
+    modifiers.push(environment('locale', locale));
+  }
+  if (themeVariant) {
+    modifiers.push(environment('colorScheme', themeVariant));
+  }
+  if (timeZoneName) {
+    modifiers.push(environment('timeZone', timeZoneName));
+  }
+
+  const iosProps: DatePickerProps = {
+    selection: value,
+    displayedComponents: modeToDisplayedComponents(mode),
+    range: minimumDate || maximumDate ? { start: minimumDate, end: maximumDate } : undefined,
+    onDateChange: (date: Date) => {
+      if (onValueChange) {
+        onValueChange(buildChangeEvent(date), date);
+      } else {
+        onChange?.(buildEvent(date), date);
+      }
+    },
+    modifiers,
+    testID,
+  };
+
+  return (
+    <Host matchContents={{ vertical: true }} style={style}>
+      <DatePicker {...iosProps} />
+    </Host>
+  );
+}

package/src/datetime-picker/DateTimePicker.web.tsx

@@ -0,0 +1,5 @@
+import type { DateTimePickerProps } from './types';
+
+export function DateTimePicker(_props: DateTimePickerProps) {
+  return null;
+}

package/src/datetime-picker/index.tsx

@@ -0,0 +1,11 @@
+import { DateTimePicker } from './DateTimePicker';
+
+export {
+  type DateTimePickerEvent,
+  type DateTimePickerChangeEvent,
+  type DateTimePickerProps,
+} from './types';
+
+export default DateTimePicker;
+// named export needed for docs generator
+export { DateTimePicker };

package/src/datetime-picker/types.tsx

@@ -0,0 +1,147 @@
+import type { ViewProps } from 'react-native';
+
+// -- Public types matching @react-native-community/datetimepicker ----------
+
+/**
+ * @deprecated used with the deprecated `onChange` prop
+ * */
+export type DateTimePickerEvent = {
+  /**
+   * `'set'` when the user selects a date. `'dismissed'` when the user cancels
+   * an Android dialog picker. iOS never fires `'dismissed'`.
+   */
+  type: 'set' | 'dismissed';
+  nativeEvent: {
+    timestamp: number;
+    utcOffset: number;
+  };
+};
+
+export type DateTimePickerChangeEvent = {
+  nativeEvent: {
+    timestamp: number;
+    utcOffset: number;
+  };
+};
+
+export type DateTimePickerProps = {
+  /**
+   * The current date value (controlled).
+   */
+  value: Date;
+  /**
+   * @deprecated Use `onValueChange` and `onDismiss` instead.
+   *
+   * Called when the user changes the date/time or dismisses the picker.
+   * The event type is encoded in `event.type`.
+   * If the new specific listeners are provided, they take precedence.
+   */
+  onChange?: (event: DateTimePickerEvent, date?: Date) => void;
+  /**
+   * Called when the user selects a date or time.
+   */
+  onValueChange?: (event: DateTimePickerChangeEvent, date: Date) => void;
+  /**
+   * Called when the picker is dismissed without selecting a value.
+   * @platform android
+   */
+  onDismiss?: () => void;
+  /**
+   * The picker mode.
+   * @default 'date'
+   */
+  mode?: 'date' | 'time' | 'datetime';
+  /**
+   * The earliest selectable date.
+   */
+  minimumDate?: Date;
+  /**
+   * The latest selectable date.
+   */
+  maximumDate?: Date;
+  /**
+   * A test ID forwarded to the native view.
+   * Note: on Android dialog presentation, the test ID is not forwarded.
+   */
+  testID?: string;
+  /**
+   * Display style. Android supports `'default' | 'spinner'` — `'spinner'` shows a text input
+   * rather than a scroll wheel (Material 3 does not have a wheel-style picker).
+   * iOS supports `'default' | 'spinner' | 'compact' | 'inline'`.
+   * @default 'default'
+   */
+  display?: 'default' | 'spinner' | 'compact' | 'inline' | 'calendar' | 'clock';
+  /**
+   * Use 24-hour format.
+   * @platform android
+   */
+  is24Hour?: boolean;
+  /**
+   * Accent/tint color applied to the picker.
+   * Maps to `color` on Android and `tint` on iOS.
+   */
+  accentColor?: string;
+  /**
+   * Whether the picker is disabled.
+   * @platform ios
+   */
+  disabled?: boolean;
+  /**
+   * Locale identifier (e.g. 'en_US', 'fr_FR') for the picker display.
+   * @platform ios
+   */
+  locale?: string;
+  /**
+   * Force a specific color scheme on the picker.
+   * @platform ios
+   */
+  themeVariant?: 'dark' | 'light';
+  /**
+   * IANA time zone name (e.g. 'America/New_York') for the picker display.
+   * @platform ios
+   */
+  timeZoneName?: string;
+  /**
+   * How the picker is presented.
+   * - `'inline'` renders the picker directly in the view hierarchy.
+   * - `'dialog'` shows a modal dialog that opens on mount. Fires `onValueChange` on confirmation, `onDismiss` on cancel. The caller should
+   *   unmount the component in response.
+   *
+   * On iOS this prop is accepted but ignored (always inline).
+   * On Android the default is `'dialog'`.
+   * @default 'dialog'
+   * @platform android
+   */
+  presentation?: 'inline' | 'dialog';
+  /**
+   * Set the positive (confirm) button label.
+   * @platform android
+   */
+  positiveButton?: { label?: string };
+  /**
+   * Set the negative (cancel) button label.
+   * @platform android
+   */
+  negativeButton?: { label?: string };
+} & Pick<ViewProps, 'style'>;
+
+// -- Helpers ---------------------------------------------------------------
+
+export function buildEvent(date: Date): DateTimePickerEvent {
+  return {
+    type: 'set',
+    nativeEvent: {
+      timestamp: date.getTime(),
+      utcOffset: -date.getTimezoneOffset(),
+    },
+  };
+}
+
+export function buildChangeEvent(date: Date): DateTimePickerChangeEvent {
+  return {
+    nativeEvent: {
+      timestamp: date.getTime(),
+      utcOffset: -date.getTimezoneOffset(),
+    },
+  };
+}

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

@@ -1,16 +1,54 @@
 import { requireNativeView } from 'expo';
-import React from 'react';
+import React, { Ref } from 'react';
+import { type ColorValue } from 'react-native';
 
-import { type ExpoModifier, type ViewEvent } from '../../types';
+import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+type SlotNativeViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+const SlotNativeView: React.ComponentType<SlotNativeViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+export type ModalBottomSheetRef = {
+  /**
+   * Programmatically hides the bottom sheet with an animation.
+   * The returned promise resolves after the dismiss animation completes.
+   */
+  hide: () => Promise<void>;
+};
+
+export type ModalBottomSheetProperties = {
+  /**
+   * Whether the bottom sheet can be dismissed by pressing the back button.
+   * @default true
+   */
+  shouldDismissOnBackPress?: boolean;
+  /**
+   * Whether the bottom sheet can be dismissed by clicking outside (on the scrim).
+   * @default true
+   */
+  shouldDismissOnClickOutside?: boolean;
+};
+
 export type ModalBottomSheetProps = {
   /**
    * The children of the `ModalBottomSheet` component.
+   * Can include a `ModalBottomSheet.DragHandle` slot for a custom drag handle.
    */
   children: React.ReactNode;
   /**
-   * Callback function that is called when the bottom sheet is dismissed.
+   * Can be used to imperatively hide the bottom sheet with an animation.
+   */
+  ref?: Ref<ModalBottomSheetRef>;
+  /**
+   * Callback function that is called when the user dismisses the bottom sheet
+   * (via swipe, back press, or tapping outside the scrim).
    */
   onDismissRequest: () => void;
   /**
@@ -18,14 +56,42 @@ export type ModalBottomSheetProps = {
    * @default false
    */
   skipPartiallyExpanded?: boolean;
+  /**
+   * The background color of the bottom sheet.
+   */
+  containerColor?: ColorValue;
+  /**
+   * The preferred color of the content inside the bottom sheet.
+   */
+  contentColor?: ColorValue;
+  /**
+   * The color of the scrim overlay behind the bottom sheet.
+   */
+  scrimColor?: ColorValue;
+  /**
+   * Whether to show the default drag handle at the top of the bottom sheet.
+   * Ignored if a custom `ModalBottomSheet.DragHandle` slot is provided.
+   * @default true
+   */
+  showDragHandle?: boolean;
+  /**
+   * Whether gestures (swipe to dismiss) are enabled on the bottom sheet.
+   * @default true
+   */
+  sheetGesturesEnabled?: boolean;
+  /**
+   * Properties for the modal window behavior.
+   */
+  properties?: ModalBottomSheetProperties;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
+  modifiers?: ModifierConfig[];
 };
 
-type NativeModalBottomSheetProps = Omit<ModalBottomSheetProps, 'onDismissRequest'> &
-  ViewEvent<'onDismissRequest', void>;
+type NativeModalBottomSheetProps = Omit<ModalBottomSheetProps, 'onDismissRequest'> & {
+  onDismissRequest: () => void;
+};
 
 const ModalBottomSheetNativeView: React.ComponentType<NativeModalBottomSheetProps> =
   requireNativeView('ExpoUI', 'ModalBottomSheetView');
@@ -44,18 +110,22 @@ function transformProps(props: ModalBottomSheetProps): NativeModalBottomSheetPro
 }
 
 /**
- * A Material Design modal bottom sheet.
+ * A custom drag handle slot for `ModalBottomSheet`.
+ * Wrap any content to use as the sheet's drag handle.
+ *
+ * @platform android
  */
-export function ModalBottomSheet(props: ModalBottomSheetProps) {
-  return <ModalBottomSheetNativeView {...transformProps(props)} />;
+function DragHandle(props: { children: React.ReactNode }) {
+  return <SlotNativeView slotName="dragHandle">{props.children}</SlotNativeView>;
 }
 
 /**
- * @deprecated Use `ModalBottomSheet` instead.
+ * A Material Design modal bottom sheet.
  */
-export const BottomSheet = ModalBottomSheet;
+function ModalBottomSheetComponent(props: ModalBottomSheetProps) {
+  return <ModalBottomSheetNativeView {...transformProps(props)} />;
+}
 
-/**
- * @deprecated Use `ModalBottomSheetProps` instead.
- */
-export type BottomSheetProps = ModalBottomSheetProps;
+ModalBottomSheetComponent.DragHandle = DragHandle;
+
+export const ModalBottomSheet = ModalBottomSheetComponent;

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

@@ -40,4 +40,5 @@ export * from './Shapes';
 export * from './Popover';
 export * from './Grid';
 export * from './RNHostView';
+export * from './Link';
 export { type CommonViewModifierProps } from './types';

package/src/swift-ui/modifiers/environment.ts

@@ -1,10 +1,23 @@
 import { createModifier } from './createModifier';
 
+export type EnvironmentConfig =
+  | { key: 'editMode'; value: 'active' | 'inactive' | 'transient' }
+  | { key: 'colorScheme'; value: 'light' | 'dark' }
+  | { key: 'locale'; value: string }
+  | { key: 'timeZone'; value: string };
+
 /**
  * Sets a SwiftUI environment value.
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/environment(_:_:)).
  */
-export const environment = (
-  key: 'editMode' | 'colorScheme',
-  value: 'active' | 'inactive' | 'transient' | 'light' | 'dark'
-) => createModifier('environment', { key, value });
+export function environment(config: EnvironmentConfig): ReturnType<typeof createModifier>;
+export function environment(
+  key: EnvironmentConfig['key'],
+  value: string
+): ReturnType<typeof createModifier>;
+export function environment(configOrKey: EnvironmentConfig | string, value?: string) {
+  if (typeof configOrKey === 'string') {
+    return createModifier('environment', { key: configOrKey, value });
+  }
+  return createModifier('environment', configOrKey);
+}

package/src/swift-ui/modifiers/index.ts

@@ -15,6 +15,7 @@ import { environment } from './environment';
 import { gaugeStyle } from './gaugeStyle';
 import { progressViewStyle } from './progressViewStyle';
 import type { Color } from './types';
+import { widgetAccentedRenderingMode, widgetURL } from './widgets';
 
 const ExpoUI = requireNativeModule('ExpoUI');
 
@@ -1056,15 +1057,6 @@ export const resizable = (
   resizingMode?: 'stretch' | 'tile'
 ) => createModifier('resizable', { ...capInsets, resizingMode });
 
-/**
- * Specifies the how to render an Image when using the WidgetKit/WidgetRenderingMode/accented mode.
- * @param renderingMode - A constant describing how the Image should be rendered.
- * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/image/widgetaccentedrenderingmode(_:)).
- */
-export const widgetAccentedRenderingMode = (
-  renderingMode: 'fullColor' | 'accented' | 'desaturated' | 'accentedDesaturated'
-) => createModifier('widgetAccentedRenderingMode', { renderingMode });
-
 // =============================================================================
 // Type Definitions
 // =============================================================================
@@ -1169,7 +1161,8 @@ export type BuiltInModifier =
   | ReturnType<typeof listStyle>
   | ReturnType<typeof contentTransition>
   | ReturnType<typeof resizable>
-  | ReturnType<typeof widgetAccentedRenderingMode>;
+  | ReturnType<typeof widgetAccentedRenderingMode>
+  | ReturnType<typeof widgetURL>;
 
 /**
  * Main ViewModifier type that supports both built-in and 3rd party modifiers.
@@ -1214,6 +1207,7 @@ export * from './progressViewStyle';
 export * from './gaugeStyle';
 export * from './presentationModifiers';
 export * from './environment';
+export * from './widgets';
 export type {
   TimingAnimationParams,
   SpringAnimationParams,

package/src/swift-ui/modifiers/widgets.ts

@@ -0,0 +1,18 @@
+import { createModifier } from './createModifier';
+
+/**
+ * Specifies the how to render an Image when using the WidgetKit/WidgetRenderingMode/accented mode.
+ * @param renderingMode - A constant describing how the Image should be rendered.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/image/widgetaccentedrenderingmode(_:)).
+ */
+export const widgetAccentedRenderingMode = (
+  renderingMode: 'fullColor' | 'accented' | 'desaturated' | 'accentedDesaturated'
+) => createModifier('widgetAccentedRenderingMode', { renderingMode });
+
+/**
+ * Sets the URL to open in the containing app when the user clicks the widget.
+ * Widgets support one widgetURL modifier in their view hierarchy. If multiple views have widgetURL modifiers, the behavior is undefined.
+ * @param url - The URL to open in the containing app.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/SwiftUI/View/widgetURL(_:)).
+ */
+export const widgetURL = (url: string) => createModifier('widgetURL', { url });

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3-sources.jar.md5

@@ -1 +0,0 @@
-0a032184d0eac4ef04d3f10fe2ee4bbd

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3-sources.jar.sha1

@@ -1 +0,0 @@
-946e37bf3649dc1cd162039cb8a8f09dda746589

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3-sources.jar.sha256

@@ -1 +0,0 @@
-c57afb701286b9952b45654e012a91a385a29294de33d0513f8d198f304e2469

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3-sources.jar.sha512

@@ -1 +0,0 @@
-17c66704e0a4a36020c483c7fa57c36e3a00859c0ec6a021f4c05d265d211fc861c7181e5ae44d2982418c3e463da8b3bec84ecd26da1361513712e77b5ba479

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3.aar.md5

@@ -1 +0,0 @@
-e71e2dd13981dbfb7885feb0b0bfe390

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3.aar.sha1

@@ -1 +0,0 @@
-cfdba1b98a6054184b39f6b71d33c18f385c26d2

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3.aar.sha256

@@ -1 +0,0 @@
-b28fefc8ae185432f8d8988a2701d0f38bab89a15eebeb60a3e27462ad814be6

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3.aar.sha512

@@ -1 +0,0 @@
-1cadb83d41093807cf37e093484e7f8206f11e856e6eebb3d77c679800b75b9ad8dbfa074cc2f4ff75c60b9de7cba4099d76c37c11158a7551fb827b4808e615

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3.module.md5

@@ -1 +0,0 @@
-fc4fc4dd0ecfb0dc5b0541f32d7c4219

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3.module.sha1

@@ -1 +0,0 @@
-4d309366193fb9e93dfc2f528d842ef199d9356f

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3.module.sha256

@@ -1 +0,0 @@
-8538fc44dce117d85e63175555983fbe9c41be3e21c0c1a38bd8284538348cfb

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3.module.sha512

@@ -1 +0,0 @@
-9b945333e9fabb773714dc66ccfd5556156ad6804aa63126a4d8db3351df53287def6a225bda7c5822ed780b7aaddbd36cac41fd31094df091b99b2c4cc75780

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3.pom.md5

@@ -1 +0,0 @@
-a3df23f7e9d010b71fdfe87e96789d6d

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3.pom.sha1

@@ -1 +0,0 @@
-3296958fe9f35c69d8d5c4b2557dc5a71c45935f

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3.pom.sha256

@@ -1 +0,0 @@
-7c81267db605b109cc861c92c6c76b415dd5c7387766652b399877e6cd485481

package/local-maven-repo/expo/modules/ui/expo.modules.ui/55.0.3/expo.modules.ui-55.0.3.pom.sha512

@@ -1 +0,0 @@
-20a8aefc780090feeeffd634b020ce55a5288bd2c12ba66ef0c19e81b78633cb13916d8dd5fea9b4cf1b3a07c00dbeb0599c4f283800bfe7bf44c90570841e07