@expo/ui 56.0.18 → 56.0.19

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

@@ -26,7 +26,7 @@ export type AlertDialogColors = {
   textContentColor?: ColorValue;
 };
 
-export type AlertDialogProps = {
+export interface AlertDialogProps {
   /**
    * Colors for the alert dialog.
    */
@@ -54,7 +54,7 @@ export type AlertDialogProps = {
    * `AlertDialog.ConfirmButton`, `AlertDialog.DismissButton`, `AlertDialog.Icon`).
    */
   children?: React.ReactNode;
-};
+}
 
 type NativeAlertDialogProps = Omit<AlertDialogProps, 'onDismissRequest'> &
   ViewEvent<'onDismissRequest', { onDismissRequest?: () => void }>;

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

@@ -163,7 +163,7 @@ export const ExitTransition = {
     createExitTransition([{ type: 'scaleOut', ...params }]),
 };
 
-export type AnimatedVisibilityProps = {
+export interface AnimatedVisibilityProps extends PrimitiveBaseProps {
   children?: React.ReactNode;
   /**
    * Whether the content is visible. When changed, the content will animate in or out.
@@ -181,7 +181,7 @@ export type AnimatedVisibilityProps = {
    * Defaults to Compose's `fadeOut + shrinkOut` when not specified.
    */
   exitTransition?: ExitTransitionType;
-} & PrimitiveBaseProps;
+}
 
 type AnimatedVisibilityNativeProps = Omit<
   AnimatedVisibilityProps,

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

@@ -4,7 +4,7 @@ import { type ColorValue } from 'react-native';
 import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type BadgeProps = {
+export interface BadgeProps {
   /**
    * Background color of the badge.
    * @default BadgeDefaults.containerColor
@@ -24,7 +24,7 @@ export type BadgeProps = {
    * When omitted, renders as a small indicator dot.
    */
   children?: React.ReactNode;
-};
+}
 
 const BadgeNativeView: React.ComponentType<BadgeProps> = requireNativeView('ExpoUI', 'BadgeView');
 

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

@@ -3,7 +3,7 @@ import { requireNativeView } from 'expo';
 import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type BadgedBoxProps = {
+export interface BadgedBoxProps {
   /**
    * Modifiers for the component.
    */
@@ -12,7 +12,7 @@ export type BadgedBoxProps = {
    * Children containing the main content and a `BadgedBox.Badge` slot.
    */
   children?: React.ReactNode;
-};
+}
 
 type SlotProps = {
   slotName: string;

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

@@ -3,7 +3,7 @@ import { requireNativeView } from 'expo';
 import { type ViewEvent, type ModifierConfig, type DialogProperties } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type BasicAlertDialogProps = {
+export interface BasicAlertDialogProps {
   /**
    * The content to display inside the dialog.
    */
@@ -21,7 +21,7 @@ export type BasicAlertDialogProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 type NativeBasicAlertDialogProps = Omit<BasicAlertDialogProps, 'onDismissRequest'> &
   ViewEvent<

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

@@ -7,7 +7,7 @@ import {
   transformProps,
 } from '../layout-types';
 
-export type BoxProps = {
+export interface BoxProps extends PrimitiveBaseProps {
   children?: React.ReactNode;
   /**
    * Alignment of children within the box.
@@ -17,7 +17,7 @@ export type BoxProps = {
    * Scroll behavior for the floating toolbar exit.
    */
   floatingToolbarExitAlwaysScrollBehavior?: FloatingToolbarExitAlwaysScrollBehavior;
-} & PrimitiveBaseProps;
+}
 
 const BoxNativeView: React.ComponentType<BoxProps> = requireNativeView('ExpoUI', 'BoxView');
 

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

@@ -26,7 +26,7 @@ export type ButtonContentPadding = {
   bottom?: number;
 };
 
-export type ButtonProps = {
+export interface ButtonProps {
   /**
    * Callback that is called when the button is clicked.
    */
@@ -57,7 +57,7 @@ export type ButtonProps = {
    * Content to display inside the button.
    */
   children: React.ReactNode;
-};
+}
 
 type NativeButtonProps = Omit<ButtonProps, 'onClick' | 'shape' | 'children'> & {
   shape?: ShapeRecordProps;

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

@@ -49,7 +49,7 @@ function createCardComponent<P extends { modifiers?: ModifierConfig[] }>(
 
 // region Card
 
-export type CardProps = {
+export interface CardProps {
   /**
    * The content to display inside the card.
    */
@@ -70,7 +70,7 @@ export type CardProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 /**
  * A card component that renders a filled card surface for content.
@@ -81,7 +81,7 @@ export const Card = createCardComponent<CardProps>('CardView');
 
 // region ElevatedCard
 
-export type ElevatedCardProps = {
+export interface ElevatedCardProps {
   /**
    * The content to display inside the card.
    */
@@ -98,7 +98,7 @@ export type ElevatedCardProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 /**
  * An elevated card component that provides a raised surface for content.
@@ -109,7 +109,7 @@ export const ElevatedCard = createCardComponent<ElevatedCardProps>('ElevatedCard
 
 // region OutlinedCard
 
-export type OutlinedCardProps = {
+export interface OutlinedCardProps {
   /**
    * The content to display inside the card.
    */
@@ -130,7 +130,7 @@ export type OutlinedCardProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 /**
  * An outlined card component that provides a bordered surface for content.

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

@@ -71,7 +71,7 @@ function createCarouselComponent<P extends { modifiers?: ModifierConfig[] }>(
 
 // region HorizontalCenteredHeroCarousel
 
-export type HorizontalCenteredHeroCarouselProps = CarouselCommonConfig & {
+export interface HorizontalCenteredHeroCarouselProps extends CarouselCommonConfig {
   /**
    * Maximum width of the hero item in dp.
    * When unspecified, the hero item will be as wide as possible.
@@ -87,7 +87,7 @@ export type HorizontalCenteredHeroCarouselProps = CarouselCommonConfig & {
    * @default CarouselDefaults.MaxSmallItemSize
    */
   maxSmallItemWidth?: number;
-};
+}
 
 /**
  * A hero carousel that centers one large item between two small peek items,
@@ -102,7 +102,7 @@ export const HorizontalCenteredHeroCarousel =
 
 // region HorizontalMultiBrowseCarousel
 
-export type HorizontalMultiBrowseCarouselProps = CarouselCommonConfig & {
+export interface HorizontalMultiBrowseCarouselProps extends CarouselCommonConfig {
   /**
    * The preferred width of the large item in dp.
    */
@@ -117,7 +117,7 @@ export type HorizontalMultiBrowseCarouselProps = CarouselCommonConfig & {
    * @default CarouselDefaults.MaxSmallItemSize
    */
   maxSmallItemWidth?: number;
-};
+}
 
 /**
  * A carousel that shows a large item alongside smaller peek items,
@@ -130,12 +130,12 @@ export const HorizontalMultiBrowseCarousel =
 
 // region HorizontalUncontainedCarousel
 
-export type HorizontalUncontainedCarouselProps = CarouselCommonConfig & {
+export interface HorizontalUncontainedCarouselProps extends CarouselCommonConfig {
   /**
    * The width of each item in dp.
    */
   itemWidth: number;
-};
+}
 
 /**
  * A carousel where each item has a fixed width with free-form scrolling,

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

@@ -16,7 +16,7 @@ export type CheckboxColors = {
   disabledIndeterminateColor?: ColorValue;
 };
 
-export type CheckboxProps = {
+export interface CheckboxProps {
   /**
    * Indicates whether the checkbox is checked.
    */
@@ -38,7 +38,7 @@ export type CheckboxProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 type NativeCheckboxProps = Omit<CheckboxProps, 'onCheckedChange'> & {
   nativeClickable: boolean;
@@ -75,7 +75,7 @@ export function Checkbox(props: CheckboxProps) {
  */
 export type ToggleableState = 'on' | 'off' | 'indeterminate';
 
-export type TriStateCheckboxProps = {
+export interface TriStateCheckboxProps {
   /**
    * The toggleable state of the checkbox: `'on'`, `'off'`, or `'indeterminate'`.
    */
@@ -97,7 +97,7 @@ export type TriStateCheckboxProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 type NativeTriStateCheckboxProps = Omit<TriStateCheckboxProps, 'onClick'> & {
   nativeClickable: boolean;

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

@@ -81,7 +81,7 @@ const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeVi
 
 // region AssistChip
 
-export type AssistChipProps = {
+export interface AssistChipProps {
   /**
    * Whether the chip is enabled and can be clicked.
    * @default true
@@ -111,7 +111,7 @@ export type AssistChipProps = {
    * Children containing Label, LeadingIcon, and TrailingIcon slots.
    */
   children: React.ReactNode;
-};
+}
 
 type NativeAssistChipProps = Omit<AssistChipProps, 'onClick'> & {
   onNativeClick?: () => void;
@@ -170,7 +170,7 @@ export { AssistChipComponent as AssistChip };
 
 // region FilterChip
 
-export type FilterChipProps = {
+export interface FilterChipProps {
   /**
    * Whether the chip is currently selected.
    */
@@ -203,7 +203,7 @@ export type FilterChipProps = {
    * Children containing Label, LeadingIcon, and TrailingIcon slots.
    */
   children: React.ReactNode;
-};
+}
 
 type NativeFilterChipProps = Omit<FilterChipProps, 'onClick'> & {
   onNativeClick?: () => void;
@@ -262,7 +262,7 @@ export { FilterChipComponent as FilterChip };
 
 // region InputChip
 
-export type InputChipProps = {
+export interface InputChipProps {
   /**
    * Whether the chip is enabled and can be interacted with.
    * @default true
@@ -297,7 +297,7 @@ export type InputChipProps = {
    * Children containing Label, Avatar, and TrailingIcon slots.
    */
   children: React.ReactNode;
-};
+}
 
 type NativeInputChipProps = Omit<InputChipProps, 'onClick'> & {
   onNativeClick?: () => void;
@@ -356,7 +356,7 @@ export { InputChipComponent as InputChip };
 
 // region SuggestionChip
 
-export type SuggestionChipProps = {
+export interface SuggestionChipProps {
   /**
    * Whether the chip is enabled and can be clicked.
    * @default true
@@ -386,7 +386,7 @@ export type SuggestionChipProps = {
    * Children containing Label and Icon slots.
    */
   children: React.ReactNode;
-};
+}
 
 type NativeSuggestionChipProps = Omit<SuggestionChipProps, 'onClick'> & {
   onNativeClick?: () => void;

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

@@ -9,7 +9,7 @@ import {
   transformProps,
 } from '../layout-types';
 
-export type ColumnProps = {
+export interface ColumnProps extends PrimitiveBaseProps {
   children?: React.ReactNode;
   /**
    * Horizontal arrangement of children.
@@ -27,7 +27,7 @@ export type ColumnProps = {
    * Vertical alignment of children.
    */
   verticalAlignment?: VerticalAlignment;
-} & PrimitiveBaseProps;
+}
 
 const ColumnNativeView: React.ComponentType<ColumnProps> = requireNativeView(
   'ExpoUI',

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

@@ -98,7 +98,7 @@ export type TimePickerElementColors = {
   timeSelectorUnselectedContentColor?: ColorValue;
 };
 
-export type DateTimePickerProps = {
+export interface DateTimePickerProps {
   /**
    * The initial date to display on the picker.
    */
@@ -154,7 +154,7 @@ export type DateTimePickerProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 type NativeDatePickerProps = Omit<
   DateTimePickerProps,
@@ -212,7 +212,7 @@ export function DateTimePicker(props: DateTimePickerProps) {
 
 // -- Dialog views (used internally by the compat layer) ---------------------
 
-export type DatePickerDialogProps = {
+export interface DatePickerDialogProps {
   initialDate?: string | null;
   variant?: AndroidVariant;
   showVariantToggle?: boolean;
@@ -223,7 +223,7 @@ export type DatePickerDialogProps = {
   selectableDates?: { start?: Date; end?: Date };
   onDateSelected?: (date: Date) => void;
   onDismissRequest: () => void;
-};
+}
 
 type NativeDatePickerDialogProps = Omit<
   DatePickerDialogProps,
@@ -260,7 +260,7 @@ export function DatePickerDialog(props: DatePickerDialogProps) {
   return <DatePickerDialogNativeView {...nativeProps} />;
 }
 
-export type TimePickerDialogProps = {
+export interface TimePickerDialogProps {
   initialDate?: string | null;
   is24Hour?: boolean;
   confirmButtonLabel?: string;
@@ -269,7 +269,7 @@ export type TimePickerDialogProps = {
   elementColors?: DatePickerElementColors & TimePickerElementColors;
   onDateSelected?: (date: Date) => void;
   onDismissRequest: () => void;
-};
+}
 
 type NativeTimePickerDialogProps = Omit<
   TimePickerDialogProps,

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

@@ -3,7 +3,7 @@ import { requireNativeView } from 'expo';
 import { type ExpoModifier, type ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type DockedSearchBarProps = {
+export interface DockedSearchBarProps {
   /**
    * Callback function that is called when the search query changes.
    */
@@ -18,7 +18,7 @@ export type DockedSearchBarProps = {
    * The children of the component.
    */
   children?: React.ReactNode;
-};
+}
 
 type PlaceholderProps = {
   children: React.ReactNode;

package/src/jetpack-compose/DropdownMenu/DropdownMenuItem.tsx

@@ -31,7 +31,7 @@ export type DropdownMenuItemElementColors = {
 /**
  * Props of the `DropdownMenuItem` component.
  */
-export type DropdownMenuItemProps = {
+export interface DropdownMenuItemProps {
   /**
    * Whether the menu item is enabled.
    * @default true
@@ -53,7 +53,7 @@ export type DropdownMenuItemProps = {
    * Slot children for text, leading/trailing icons.
    */
   children?: React.ReactNode;
-};
+}
 
 type NativeDropdownMenuItemProps = Omit<DropdownMenuItemProps, 'onClick' | 'children'> &
   ViewEvent<'onItemPressed', void> & { children?: React.ReactNode };

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

@@ -19,7 +19,7 @@ const SlotNativeView: React.ComponentType<{
 /**
  * Props of the `DropdownMenu` component.
  */
-export type DropdownMenuProps = {
+export interface DropdownMenuProps {
   /**
    * The contents of the submenu are used as an anchor for the dropdown menu.
    * The children will be wrapped in a pressable element, which triggers opening of the dropdown menu.
@@ -51,7 +51,7 @@ export type DropdownMenuProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 type NativeMenuProps = {
   expanded?: boolean;

package/src/jetpack-compose/ExposedDropdownMenuBox/ExposedDropdownMenu.tsx

@@ -13,7 +13,7 @@ const NativeView: React.ComponentType<ExposedDropdownMenuProps> = requireNativeV
 /**
  * Props for the `ExposedDropdownMenu` component.
  */
-export type ExposedDropdownMenuProps = {
+export interface ExposedDropdownMenuProps {
   /**
    * Whether the dropdown menu is expanded (visible).
    */
@@ -34,7 +34,7 @@ export type ExposedDropdownMenuProps = {
    * Children should be `DropdownMenuItem` components.
    */
   children?: ReactNode;
-};
+}
 
 /**
  * A Material 3 `ExposedDropdownMenu` that displays menu items in a dropdown.

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

@@ -10,7 +10,7 @@ const NativeView: React.ComponentType<NativeExposedDropdownMenuBoxProps> = requi
   'ExposedDropdownMenuBoxView'
 );
 
-export type ExposedDropdownMenuBoxProps = {
+export interface ExposedDropdownMenuBoxProps {
   /**
    * Whether the dropdown menu is expanded (visible).
    */
@@ -28,7 +28,7 @@ export type ExposedDropdownMenuBoxProps = {
    * and an `ExposedDropdownMenu` with `DropdownMenuItem` children.
    */
   children?: ReactNode;
-};
+}
 
 type NativeExposedDropdownMenuBoxProps = Omit<
   ExposedDropdownMenuBoxProps,

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

@@ -16,7 +16,7 @@ type NativeSlotViewProps = {
 /**
  * Props shared by all `FloatingActionButton` variants.
  */
-export type FloatingActionButtonProps = {
+export interface FloatingActionButtonProps {
   /**
    * Slot-based children (use `.Icon` sub-component).
    */
@@ -37,24 +37,24 @@ export type FloatingActionButtonProps = {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 /**
  * Props for the `SmallFloatingActionButton` component.
  * Same as {@link FloatingActionButtonProps}.
  */
-export type SmallFloatingActionButtonProps = FloatingActionButtonProps;
+export interface SmallFloatingActionButtonProps extends FloatingActionButtonProps {}
 
 /**
  * Props for the `LargeFloatingActionButton` component.
  * Same as {@link FloatingActionButtonProps}.
  */
-export type LargeFloatingActionButtonProps = FloatingActionButtonProps;
+export interface LargeFloatingActionButtonProps extends FloatingActionButtonProps {}
 
 /**
  * Props for the `ExtendedFloatingActionButton` component.
  */
-export type ExtendedFloatingActionButtonProps = FloatingActionButtonProps & {
+export interface ExtendedFloatingActionButtonProps extends FloatingActionButtonProps {
   /**
    * Slot-based children (use `.Icon` and `.Text` sub-components).
    */
@@ -65,7 +65,7 @@ export type ExtendedFloatingActionButtonProps = FloatingActionButtonProps & {
    * @default true
    */
   expanded?: boolean;
-};
+}
 
 /**
  * @hidden

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

@@ -7,7 +7,7 @@ import {
   transformProps,
 } from '../layout-types';
 
-export type FlowRowProps = {
+export interface FlowRowProps extends PrimitiveBaseProps {
   children?: React.ReactNode;
   /**
    * Horizontal arrangement of children.
@@ -17,7 +17,7 @@ export type FlowRowProps = {
    * Vertical arrangement of children.
    */
   verticalArrangement?: VerticalArrangement;
-} & PrimitiveBaseProps;
+}
 
 const FlowRowNativeView: React.ComponentType<FlowRowProps> = requireNativeView(
   'ExpoUI',

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

@@ -26,7 +26,7 @@ export type HorizontalFloatingToolbarColors = {
   fabContentColor?: ColorValue;
 };
 
-export type HorizontalFloatingToolbarProps = {
+export interface HorizontalFloatingToolbarProps {
   /**
    * The variant of the horizontal floating toolbar.
    * @default 'standard'
@@ -48,9 +48,9 @@ export type HorizontalFloatingToolbarProps = {
    * Modifiers for the component.
    */
   modifiers?: ExpoModifier[];
-};
+}
 
-export type HorizontalFloatingToolbarFloatingActionButtonProps = {
+export interface HorizontalFloatingToolbarFloatingActionButtonProps {
   /**
    * A callback that is called when the button is pressed.
    */
@@ -60,7 +60,7 @@ export type HorizontalFloatingToolbarFloatingActionButtonProps = {
    * The children of the component.
    */
   children: React.ReactNode;
-};
+}
 
 type NativeHorizontalFloatingToolbarProps = HorizontalFloatingToolbarProps & {};
 

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

@@ -26,7 +26,7 @@ export type HorizontalPagerHandle = {
  */
 export type HorizontalPagerDragInteraction = 'start' | 'stop' | 'cancel';
 
-export type HorizontalPagerProps = {
+export interface HorizontalPagerProps {
   /**
    * Imperative handle for programmatic navigation. Mirrors the methods on
    * Compose's `PagerState`.
@@ -104,7 +104,7 @@ export type HorizontalPagerProps = {
    * Children to render as pages.
    */
   children: React.ReactNode;
-};
+}
 
 type NativeHorizontalPagerProps = Omit<
   HorizontalPagerProps,

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

@@ -12,7 +12,7 @@ import {
 import { getMaterialColors, HostPaletteContext } from '../colors';
 import { type PrimitiveBaseProps } from '../layout';
 
-export type HostProps = {
+export interface HostProps extends PrimitiveBaseProps {
   /**
    * When true, the host view will update its size in the React Native view tree to match the content's layout from Jetpack Compose.
    * Can be only set once on mount.
@@ -65,7 +65,7 @@ export type HostProps = {
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
-} & PrimitiveBaseProps;
+}
 
 type NativeHostProps = Omit<HostProps, 'colorScheme'> & {
   matchContentsVertical?: boolean;

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

@@ -9,7 +9,7 @@ import {
 import type { ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-export type IconProps = {
+export interface IconProps {
   /**
    * The source of the icon. Can be a URI string or the result of `require()`.
    * On Android, supports XML vector drawables loaded via Metro bundler.
@@ -81,7 +81,7 @@ export type IconProps = {
    * ```
    */
   modifiers?: ModifierConfig[];
-};
+}
 
 /**
  * @hidden

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

@@ -15,7 +15,7 @@ export type IconButtonColors = {
   disabledContentColor?: ColorValue;
 };
 
-export type IconButtonProps = {
+export interface IconButtonProps {
   /**
    * Callback that is called when the icon button is clicked.
    */
@@ -42,7 +42,7 @@ export type IconButtonProps = {
    * Content to display inside the icon button.
    */
   children: React.ReactNode;
-};
+}
 
 type NativeIconButtonProps = Omit<IconButtonProps, 'onClick' | 'shape' | 'children'> & {
   shape?: ShapeRecordProps;