@expo/ui 56.0.18 → 56.0.20

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@expo/ui",
-  "version": "56.0.18",
+  "version": "56.0.20",
   "description": "A collection of UI components",
   "sideEffects": [
-    "*.fx.js"
+    "*.fx.js",
+    "*.fx.ts"
   ],
   "exports": {
     "./package.json": "./package.json",
@@ -93,9 +94,8 @@
     "@types/babel__core": "^7.20.5",
     "@types/node": "^22.14.0",
     "@types/react": "~19.2.0",
-    "react-native-reanimated": "4.3.1",
     "react-native-worklets": "0.8.3",
-    "expo": "56.0.12",
+    "expo": "56.0.14",
     "expo-module-scripts": "56.0.3"
   },
   "jest": {
@@ -107,7 +107,6 @@
     "react": "*",
     "react-dom": "*",
     "react-native": "*",
-    "react-native-reanimated": "*",
     "react-native-worklets": "*"
   },
   "peerDependenciesMeta": {
@@ -117,14 +116,11 @@
     "react-dom": {
       "optional": true
     },
-    "react-native-reanimated": {
-      "optional": true
-    },
     "react-native-worklets": {
       "optional": true
     }
   },
-  "gitHead": "812dc007aefed0c432c0439fdfe05ee2f4f21da2",
+  "gitHead": "b2e161a54f90a778ab7e5560c0c8f021bbfcaae2",
   "scripts": {
     "build": "expo-module build",
     "clean": "expo-module clean",

package/plugin/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/babel-plugin.ts"],"version":"6.0.3"}

package/src/State/index.fx.ts

@@ -61,11 +61,10 @@ function registerSharedObjectSerializer(): void {
 }
 
 try {
-  // reanimated import is needed to initialise __WORKLET_RUNTIME global, which is required by the installOnUIRuntime
-  require('react-native-reanimated');
-
-  installOnUIRuntime();
-  registerSharedObjectSerializer();
+  if (worklets) {
+    installOnUIRuntime(worklets.getUIRuntimeHolder());
+    registerSharedObjectSerializer();
+  }
 } catch {
   // Fail silently as worklet support is currently optional in Expo UI
 }

package/src/community/bottom-sheet/BottomSheet.android.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState
 import { StyleSheet, useWindowDimensions, View } from 'react-native';
 
 import { BottomSheetContext, BottomSheetInternalContext } from './context';
+import { SheetScrollContextReset } from './scrollContextReset';
 import type { BottomSheetMethods, BottomSheetProps } from './types';
 import { parseSnapPoint } from './types';
 import { Host } from '../../jetpack-compose/Host';
@@ -199,7 +200,11 @@ export function BottomSheet(props: BottomSheetProps) {
               shouldDismissOnClickOutside: enablePanDownToClose,
             }}>
             <RNHostView matchContents={fitToContents}>
-              <View style={fitToContents ? undefined : { flex: 1 }}>{children}</View>
+              {/* flexGrow:1 + height:0 (flex-basis 0) fills RNHostView's measured height without
+                  inheriting the scrollable child's content height, which would block scrolling to the end. */}
+              <View style={fitToContents ? undefined : { flexGrow: 1, height: 0 }}>
+                <SheetScrollContextReset>{children}</SheetScrollContextReset>
+              </View>
             </RNHostView>
           </ModalBottomSheet>
         </Host>

package/src/community/bottom-sheet/BottomSheet.ios.tsx

@@ -3,6 +3,7 @@ import { useWindowDimensions, View, StyleSheet } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import { BottomSheetContext, BottomSheetInternalContext } from './context';
+import { SheetScrollContextReset } from './scrollContextReset';
 import type { BottomSheetMethods, BottomSheetProps } from './types';
 import { parseSnapPoint } from './types';
 import { BottomSheet as NativeBottomSheet } from '../../swift-ui/BottomSheet';
@@ -15,6 +16,7 @@ import {
   presentationBackground,
   presentationDetents,
   presentationDragIndicator,
+  presentationSizing,
 } from '../../swift-ui/modifiers/presentationModifiers';
 
 export { useBottomSheet } from './context';
@@ -206,7 +208,8 @@ export function BottomSheet(props: BottomSheetProps) {
     const bg = extractBackgroundColor(backgroundStyle);
     return [
       ...(fitToContents
-        ? []
+        ? // Makes the iPad sheet size to that content instead of opening near full height.
+          [presentationSizing('fitted')]
         : [
             presentationDetents(detents, {
               selection: selectedDetent,
@@ -238,15 +241,16 @@ export function BottomSheet(props: BottomSheetProps) {
             <Group modifiers={modifiers}>
               <RNHostView matchContents={fitToContents}>
                 {/* paddingTop compensates for tighter spacing between native drag indicator and content
-                    compared to gorhom's handle. flex:1 fills snap point height; omitted for fitToContents
+                    compared to gorhom's handle. flexGrow:1 + height:0 (flex-basis 0) fills the snap-point
+                    height without inheriting the scrollable child's intrinsic content height. Omitted for fitToContents
                     so RNHostView can measure natural content height. */}
                 <View
                   style={
                     fitToContents
                       ? { paddingTop: handleComponent !== null ? 16 : 0 }
-                      : { flex: 1, paddingTop: handleComponent !== null ? 16 : 0 }
+                      : { flexGrow: 1, height: 0, paddingTop: handleComponent !== null ? 16 : 0 }
                   }>
-                  {children}
+                  <SheetScrollContextReset>{children}</SheetScrollContextReset>
                 </View>
               </RNHostView>
             </Group>

package/src/community/bottom-sheet/scrollContextReset.tsx

@@ -0,0 +1,24 @@
+import type { Context, ReactNode } from 'react';
+import { ScrollView, VirtualizedList } from 'react-native';
+
+const VirtualizedListContext = (VirtualizedList as unknown as { contextType?: Context<unknown> })
+  .contextType;
+const ScrollViewContext = (ScrollView as unknown as { Context?: Context<unknown> }).Context;
+
+// When a virtualised list (RN Flatlist) is nested within another Flatlist,
+// it renders a regular View as Scroll component https://github.com/react/react-native/blob/5c197fb303ed0d975482757fefb7ed38349601b6/packages/virtualized-lists/Lists/VirtualizedList.js#L1291
+// which breaks scrolling.
+// Nested same direction FlatLists are generally considered bad
+// but the react context check it is doing to identify nesting can break some genuine cases
+// e.g. User has a FlatList with a button child that opens bottomsheet with a Flatlist.
+// RN Modal uses similar pattern as below
+export function SheetScrollContextReset({ children }: { children: ReactNode }) {
+  let node: ReactNode = children;
+  if (ScrollViewContext) {
+    node = <ScrollViewContext.Provider value={null}>{node}</ScrollViewContext.Provider>;
+  }
+  if (VirtualizedListContext) {
+    node = <VirtualizedListContext.Provider value={null}>{node}</VirtualizedListContext.Provider>;
+  }
+  return <>{node}</>;
+}

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

@@ -54,6 +54,11 @@ export function DateTimePicker(props: DateTimePickerProps) {
 
   const pickerStyle = displayToDatePickerStyle(display);
 
+  // The compact style hugs its content, so the Host must match it
+  // on both axes, otherwise it collapses to 0 width under a non-stretch parent like
+  // `alignItems: 'center'` https://github.com/expo/expo/issues/46904.
+  const isCompactStyle = pickerStyle === 'compact' || pickerStyle === 'automatic';
+
   const modifiers: ModifierConfig[] = [datePickerStyle(pickerStyle)];
   if (accentColor) {
     modifiers.push(tint(accentColor));
@@ -87,7 +92,10 @@ export function DateTimePicker(props: DateTimePickerProps) {
   };
 
   return (
-    <Host matchContents={{ vertical: true }} style={style} ignoreSafeArea="all">
+    <Host
+      matchContents={isCompactStyle ? true : { vertical: true }}
+      style={style}
+      ignoreSafeArea="all">
       <DatePicker {...iosProps} />
     </Host>
   );

package/src/community/datetime-picker/types.tsx

@@ -24,7 +24,7 @@ export type DateTimePickerChangeEvent = {
   };
 };
 
-export type DateTimePickerProps = {
+export interface DateTimePickerProps extends Pick<ViewProps, 'style'> {
   /**
    * The current date value (controlled).
    */
@@ -123,7 +123,7 @@ export type DateTimePickerProps = {
    * @platform android
    */
   negativeButton?: { label?: string };
-} & Pick<ViewProps, 'style'>;
+}
 
 // -- Helpers ---------------------------------------------------------------
 

package/src/community/masked-view/MaskedView.android.tsx

@@ -19,16 +19,19 @@ const MaskNativeView: React.ComponentType<{
  */
 export function MaskedView(props: MaskedViewProps) {
   const { maskElement, children, style, ...viewProps } = props;
+  // `style` is applied only to the outer container. Re-applying it inside the
+  // Host/MaskView wrappers used to double offsets (`translateX`, `marginLeft`, …)
+  // and transforms because the inner views inherit layout from `absoluteFill`.
   return (
     <View {...viewProps} style={style}>
       <Host style={StyleSheet.absoluteFill}>
         <MaskNativeView alignment="topStart" modifiers={[fillMaxSize()]}>
           <RNHostView modifiers={[fillMaxSize()]}>
-            <View style={[StyleSheet.absoluteFill, style]}>{children}</View>
+            <View style={StyleSheet.absoluteFill}>{children}</View>
           </RNHostView>
           <Slot slotName="content">
             <RNHostView modifiers={[fillMaxSize()]}>
-              <View style={[StyleSheet.absoluteFill, style]}>{maskElement}</View>
+              <View style={StyleSheet.absoluteFill}>{maskElement}</View>
             </RNHostView>
           </Slot>
         </MaskNativeView>

package/src/community/masked-view/MaskedView.ios.tsx

@@ -11,16 +11,19 @@ import { RNHostView } from '../../swift-ui/RNHostView';
  */
 export function MaskedView(props: MaskedViewProps) {
   const { maskElement, children, style, ...viewProps } = props;
+  // `style` is applied only to the outer container. Re-applying it inside the
+  // Host/Mask wrappers used to double offsets (`translateX`, `marginLeft`, …)
+  // and transforms because the inner views inherit layout from `absoluteFill`.
   return (
     <View {...viewProps} style={style}>
       <Host style={StyleSheet.absoluteFill}>
         <Mask alignment="topLeading">
           <RNHostView>
-            <View style={[StyleSheet.absoluteFill, style]}>{children}</View>
+            <View style={StyleSheet.absoluteFill}>{children}</View>
           </RNHostView>
           <Mask.Content>
             <RNHostView>
-              <View style={[StyleSheet.absoluteFill, style]}>{maskElement}</View>
+              <View style={StyleSheet.absoluteFill}>{maskElement}</View>
             </RNHostView>
           </Mask.Content>
         </Mask>

package/src/community/menu/types.tsx

@@ -118,7 +118,7 @@ export type NativeActionEvent = {
  * Props for the `MenuView` component.
  * Drop-in compatible with `@react-native-menu/menu`.
  */
-export type MenuComponentProps = {
+export interface MenuComponentProps {
   /**
    * Menu title shown at the top of the menu.
    * @platform ios
@@ -168,4 +168,4 @@ export type MenuComponentProps = {
    * Trigger view. Long-pressing or tapping (per `shouldOpenOnLongPress`) opens the menu.
    */
   children?: ReactNode;
-};
+}

package/src/community/pager-view/types.tsx

@@ -40,7 +40,7 @@ export const wrapNativeEvent = <T,>(nativeEvent: T): NativeSyntheticEvent<T> =>
  * Props for the `PagerView` component.
  * Compatible with `react-native-pager-view`.
  */
-export type PagerViewProps = ViewProps & {
+export interface PagerViewProps extends ViewProps {
   /**
    * Ref handle exposing imperative `setPage`, `setPageWithoutAnimation`,
    * and `setScrollEnabled` methods.
@@ -104,7 +104,7 @@ export type PagerViewProps = ViewProps & {
    * stretched to fill the pager. Each child should have a stable `key`.
    */
   children?: ReactNode;
-};
+}
 
 /**
  * Ref handle for the `PagerView` component.

package/src/community/segmented-control/types.tsx

@@ -18,7 +18,7 @@ export type NativeSegmentedControlChangeEvent = {
  */
 export type NativeSegmentedControlIOSChangeEvent = NativeSegmentedControlChangeEvent;
 
-export type SegmentedControlProps = {
+export interface SegmentedControlProps {
   /**
    * The labels for the control's segment buttons, in order.
    */
@@ -52,7 +52,7 @@ export type SegmentedControlProps = {
   appearance?: 'dark' | 'light';
   style?: StyleProp<ViewStyle>;
   testID?: string;
-};
+}
 
 /**
  * Builds a synthetic `onChange` event matching the community library shape.

package/src/community/slider/types.tsx

@@ -4,7 +4,7 @@ import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
  * Props for the `Slider` community drop-in component.
  * Compatible with `@react-native-community/slider`.
  */
-export type SliderProps = {
+export interface SliderProps {
   /**
    * Initial / current value of the slider.
    * Behaves like the community lib: passing a new value updates the thumb,
@@ -72,4 +72,4 @@ export type SliderProps = {
    * Used to style and layout the Slider.
    */
   style?: StyleProp<ViewStyle>;
-};
+}

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;