@hero-design/rn 8.131.1 → 8.131.3

package/src/components/Spinner/index.tsx

@@ -4,7 +4,7 @@ import type { ViewProps } from 'react-native';
 import { StyledSpinnerContainer, StyledView } from './StyledSpinner';
 import { AnimatedSpinner } from './AnimatedSpinner';
 
-interface SpinnerProps extends ViewProps {
+export interface SpinnerProps extends ViewProps {
   /**
    * Size of Spinner.
    */

package/src/components/Tabs/ScrollableTabsHeader/hooks/useIndicatorAnimation.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Animated } from 'react-native';
+import { Animated, PixelRatio } from 'react-native';
 import type { LayoutChangeEvent } from 'react-native';
 
 type Layout = { x: number; width: number };
@@ -9,9 +9,9 @@ type Layout = { x: number; width: number };
  *
  *  Layer 1 — bottom border / underline  (indicatorStyle)
  *  ─────────────────────────────────────────────────────
- *  Uses the "width:1 + scaleX" trick: the element has a fixed stylesheet
- *  width of 1px and scaleX is set to the target pixel width, giving a visual
- *  width of 1 × scaleX pixels without touching any layout property.
+ *  Uses the "width:1/PixelRatio + scaleX" trick: the element has a stylesheet
+ *  width of 1 physical pixel (1/PixelRatio dp) and scaleX is set to
+ *  targetWidth * PixelRatio, giving a visual width of targetWidth dp.
  *  Both translateX and scaleX are transform properties → native driver.
  *  Caveat: scaleX also scales border-radius, so this layer has no border-radius.
  *
@@ -21,27 +21,43 @@ type Layout = { x: number; width: number };
  *  border-radius is never distorted by scale:
  *
  *    ┌──────────────────────────────────────────────────────┐
- *    │  [cap-left 8px]  [body width-1 + scaleX]  [cap-right 8px]  │
+ *    │  [cap-left cap]  [body 1px + scaleX]  [cap-right cap]  │
  *    └──────────────────────────────────────────────────────┘
  *
- *    cap-left  — fixed 8px wide, borderTopLeftRadius:8,  translateX = pillX
- *    body      — width:1 + scaleX trick (scaleX = tabWidth - 16),
- *                transformOrigin 'left center',
- *                translateX = pillX + 8  (via Animated.add)
- *    cap-right — fixed 8px wide, borderTopRightRadius:8,
- *                translateX = pillX + tabWidth - 8  (via Animated.add)
- *
- *  All four animated values use the native driver (translateX and scaleX are
- *  transform properties). `width` is never animated, so no JS driver needed.
+ *    cap-left  — fixed pillCapWidth dp, borderTopLeftRadius,  translateX = pillX
+ *    body      — 1px + scaleX trick (scaleX = (tabWidth - 2*cap) * PixelRatio),
+ *                translateX = pillX + pillCapWidth  (via Animated.add)
+ *    cap-right — fixed pillCapWidth dp, borderTopRightRadius,
+ *                translateX = pillX + rightOffset  (via Animated.add)
  *
  *  Driver summary:
- *    indicatorX        native  translateX — slides the bottom border
- *    indicatorScaleX   native  scaleX     — stretches the bottom border
- *    pillX             native  translateX — slides all three pill pieces
- *    pillBodyScaleX    native  scaleX     — stretches the pill body
- *    pillRightOffsetX  native  translateX — positions the right cap
- *                                          (Animated.add: pillX + tabWidth - 8)
+ *    indicatorX      native  translateX — slides the bottom border
+ *    indicatorScaleX native  scaleX     — stretches the bottom border
+ *    pillX           native  translateX — slides all three pill pieces
+ *    pillBodyScaleX  native  scaleX     — stretches the pill body
+ *    pillRightOffset native  translateX — positions the right cap
  */
+
+type AnimValues = {
+  indicatorX: number;
+  indicatorScaleX: number;
+  pillX: number;
+  pillBodyScaleX: number;
+  pillRightOffset: number;
+};
+
+/** Centralised calculation for all animated values given a tab layout. */
+const computeValues = (layout: Layout, pillCapWidth: number): AnimValues => {
+  const pr = PixelRatio.get();
+  return {
+    indicatorX: layout.x,
+    indicatorScaleX: layout.width * pr,
+    pillX: layout.x,
+    pillBodyScaleX: Math.max(layout.width - pillCapWidth * 2, 0) * pr,
+    pillRightOffset: Math.max(layout.width - pillCapWidth, 0),
+  };
+};
+
 const useIndicatorAnimation = ({
   selectedIndex,
   tabsLength,
@@ -57,9 +73,6 @@ const useIndicatorAnimation = ({
   const indicatorScaleX = React.useRef(new Animated.Value(1)).current;
 
   // Layer 2 — native driver (pill background, three-piece split).
-  // pillX: left edge of the pill (shared by all three pieces as base).
-  // pillBodyScaleX: scaleX for the body piece (tabWidth - 2 * CAP_WIDTH).
-  // pillRightOffset: additional x offset for the right cap (tabWidth - CAP_WIDTH).
   const pillX = React.useRef(new Animated.Value(0)).current;
   const pillBodyScaleX = React.useRef(new Animated.Value(1)).current;
   const pillRightOffset = React.useRef(new Animated.Value(0)).current;
@@ -86,51 +99,37 @@ const useIndicatorAnimation = ({
       runningAnimRef.current?.stop();
       runningAnimRef.current = null;
 
-      // Layer 1: bottom-border element has width:1, so scaleX = pixel width.
-      const indicatorScaleXValue = layout.width;
-      // Layer 2 body: width:1 element, scaleX fills space between the two caps.
-      const bodyScaleX = Math.max(layout.width - pillCapWidth * 2, 0);
-      // Layer 2 right cap: offset from pillX to reach the right edge.
-      // Clamped to 0 so the right cap never slides left of the pill's origin
-      // when the tab is narrower than one cap width.
-      const rightOffset = Math.max(layout.width - pillCapWidth, 0);
+      const values = computeValues(layout, pillCapWidth);
 
       if (!animate || !initializedRef.current) {
-        // First render — snap all values immediately without animation.
-        indicatorX.setValue(layout.x);
-        indicatorScaleX.setValue(indicatorScaleXValue);
-        pillX.setValue(layout.x);
-        pillBodyScaleX.setValue(bodyScaleX);
-        pillRightOffset.setValue(rightOffset);
+        indicatorX.setValue(values.indicatorX);
+        indicatorScaleX.setValue(values.indicatorScaleX);
+        pillX.setValue(values.pillX);
+        pillBodyScaleX.setValue(values.pillBodyScaleX);
+        pillRightOffset.setValue(values.pillRightOffset);
         initializedRef.current = true;
         return;
       }
 
-      // All five animations run on the native driver (UI thread):
-      //   indicatorX        — slides the bottom border
-      //   indicatorScaleX   — stretches the bottom border
-      //   pillX             — slides all three pill pieces together
-      //   pillBodyScaleX    — resizes the body piece to fill between caps
-      //   pillRightOffset   — keeps the right cap at the pill's right edge
       const anim = Animated.parallel([
         Animated.timing(indicatorX, {
-          toValue: layout.x,
+          toValue: values.indicatorX,
           useNativeDriver: true,
         }),
         Animated.timing(indicatorScaleX, {
-          toValue: indicatorScaleXValue,
+          toValue: values.indicatorScaleX,
           useNativeDriver: true,
         }),
         Animated.timing(pillX, {
-          toValue: layout.x,
+          toValue: values.pillX,
           useNativeDriver: true,
         }),
         Animated.timing(pillBodyScaleX, {
-          toValue: bodyScaleX,
+          toValue: values.pillBodyScaleX,
           useNativeDriver: true,
         }),
         Animated.timing(pillRightOffset, {
-          toValue: rightOffset,
+          toValue: values.pillRightOffset,
           useNativeDriver: true,
         }),
       ]);
@@ -155,7 +154,6 @@ const useIndicatorAnimation = ({
     if (layoutsRef.current[selectedIndex]) {
       animateTo(selectedIndex, initializedRef.current);
     } else {
-      // Layout not yet measured — store as pending and resolve in onTabLayout.
       pendingIndexRef.current = selectedIndex;
     }
   }, [selectedIndex, animateTo]);
@@ -169,7 +167,10 @@ const useIndicatorAnimation = ({
 
   const onTabLayout = React.useCallback(
     (index: number, event: LayoutChangeEvent) => {
-      const { x, width } = event.nativeEvent.layout;
+      const x = PixelRatio.roundToNearestPixel(event.nativeEvent.layout.x);
+      const width = PixelRatio.roundToNearestPixel(
+        event.nativeEvent.layout.width
+      );
       const prev = layoutsRef.current[index];
       // Skip if layout hasn't meaningfully changed (sub-pixel tolerance).
       if (
@@ -181,39 +182,44 @@ const useIndicatorAnimation = ({
       }
       layoutsRef.current[index] = { x, width };
 
-      // Animate if this tab is the selected one (covers the pending case where
-      // selectedIndex was set before the layout was measured).
       if (index === selectedIndex || index === pendingIndexRef.current) {
         if (index === pendingIndexRef.current)
           pendingIndexRef.current = undefined;
         animateTo(index, initializedRef.current);
       }
 
-      // If no tab is selected yet, snap indicators to tab 0 on its first
-      // layout so they appear at a sensible default position.
+      // If no tab is selected yet, snap indicators to tab 0 on its first layout.
       if (
         !initializedRef.current &&
         index === 0 &&
         selectedIndex === undefined
       ) {
-        indicatorScaleX.setValue(width);
-        pillX.setValue(x);
-        pillBodyScaleX.setValue(Math.max(width - pillCapWidth * 2, 0));
-        pillRightOffset.setValue(Math.max(width - pillCapWidth, 0));
+        const values = computeValues({ x, width }, pillCapWidth);
+        indicatorX.setValue(values.indicatorX);
+        indicatorScaleX.setValue(values.indicatorScaleX);
+        pillX.setValue(values.pillX);
+        pillBodyScaleX.setValue(values.pillBodyScaleX);
+        pillRightOffset.setValue(values.pillRightOffset);
         initializedRef.current = true;
       }
     },
-    [animateTo, selectedIndex, pillCapWidth]
+    [
+      selectedIndex,
+      animateTo,
+      pillCapWidth,
+      indicatorX,
+      indicatorScaleX,
+      pillX,
+      pillBodyScaleX,
+      pillRightOffset,
+    ]
   );
 
-  // Layer 1: transformOrigin 'left center' pins scaleX expansion to left edge.
   const indicatorStyle = {
     transformOrigin: 'left center',
     transform: [{ translateX: indicatorX }, { scaleX: indicatorScaleX }],
   } as const;
 
-  // Layer 2: three pieces, all absolutely positioned, all native driver.
-  // Animated.add computes derived positions without creating JS-driver nodes.
   const pillLeftStyle = {
     transform: [{ translateX: pillX }],
   } as const;

package/src/components/Tabs/StyledScrollableTabs.tsx

@@ -1,4 +1,4 @@
-import { Animated, Platform, View } from 'react-native';
+import { Animated, PixelRatio, Platform, View } from 'react-native';
 import styled from '@emotion/native';
 
 // Checks if the platform is Android 7x and 8.x, i.e., API levels 24 to 27 (Android 7.0 to 8.1),
@@ -67,7 +67,7 @@ const HeaderTabPillBody = styled(Animated.View)(({ theme }) => ({
   top: 0,
   bottom: 0,
   left: 0,
-  width: 1,
+  width: 1 / PixelRatio.get(),
   backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBackground,
 }));
 
@@ -84,7 +84,7 @@ const HeaderTabPillRight = styled(Animated.View)(({ theme }) => ({
 const HeaderTabItemActiveBorder = styled(Animated.View)(({ theme }) => ({
   position: 'absolute',
   bottom: 0,
-  width: 1,
+  width: 1 / PixelRatio.get(),
   height: theme.__hd__.tabs.borderWidths.highlightedActiveBorder,
   backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBorder,
 }));
@@ -99,7 +99,7 @@ const HeaderTabItemWrapper = styled(View)(({ theme }) => ({
 }));
 
 const HeaderTabItemIndicator = styled(Animated.View)(({ theme }) => ({
-  width: 1,
+  width: 1 / PixelRatio.get(),
   height: theme.__hd__.tabs.sizes.indicator,
   position: 'absolute',
   bottom: theme.__hd__.tabs.space.tabIndicatorBottom,

package/src/components/Tag/index.tsx

@@ -5,7 +5,7 @@ import { StyledText, StyledView, StyledTagIcon } from './StyledTag';
 import { useDeprecation } from '../../utils/hooks';
 import type { IconName } from '../Icon';
 
-interface TagProps extends ViewProps {
+export interface TagProps extends ViewProps {
   /**
    * Content of the Tag.
    */

package/src/types.ts

@@ -1,119 +1,119 @@
-import type { BottomNavigationTabType } from './components/BottomNavigation';
-import type { IconName, IconProps } from './components/Icon';
-import type { SingleSelectProps, MultiSelectProps } from './components/Select';
-import type { TabType } from './components/Tabs';
-import type { TextInputProps, TextInputHandles } from './components/TextInput';
-import type {
+export type {
+  BottomNavigationTabType,
+  BottomNavigationProps,
+} from './components/BottomNavigation';
+export type { IconName, IconProps } from './components/Icon';
+export type { SingleSelectProps, MultiSelectProps } from './components/Select';
+export type { TabType, TabsHeaderProps, TabsProps } from './components/Tabs';
+export type { TextInputProps, TextInputHandles } from './components/TextInput';
+export type {
   RichTextEditorRef,
   RichTextEditorProps,
 } from './components/RichTextEditor';
-import type { Theme } from './theme';
-import type {
+export type { Theme } from './theme';
+export type {
   ListRenderOptionInfo,
   SectionListRenderOptionInfo,
   SelectOptionType,
 } from './components/Select/types';
-import type { SwipeableProps } from './components/Swipeable';
-import type { TextProps } from './components/Typography/Text';
-import type { CardCarouselHandles } from './components/Carousel/CardCarousel';
-import type { FABHandles } from './components/FAB/FAB';
-import type {
+export type { SwipeableProps } from './components/Swipeable';
+export type { TextProps } from './components/Typography/Text';
+export type {
+  CardCarouselHandles,
+  CardCarouselProps,
+} from './components/Carousel/CardCarousel';
+export type { FABHandles, FABProps } from './components/FAB/FAB';
+export type {
   ActionGroupHandles,
   ActionGroupProps,
 } from './components/FAB/ActionGroup';
-import type { ActionItemProps } from './components/FAB/ActionGroup/ActionItem';
-import type { SliderRangeValue } from './components/Slider/RangeSlider';
-import type { CalendarDateRange } from './components/Calendar/CalendarRange';
-import type {
+export type { ActionItemProps } from './components/FAB/ActionGroup/ActionItem';
+export type { SliderRangeValue } from './components/Slider/RangeSlider';
+export type { CalendarDateRange } from './components/Calendar/CalendarRange';
+export type {
   LocaleCode,
   LocaleValues,
   DateTimeFormats,
 } from './locales/types';
-import type { ColumnChartProps } from './components/Chart/ColumnChart';
-import type { LineChartProps } from './components/Chart/Line';
-import type { Scale, SystemPalette } from './theme/global';
-import type {
+export type { ColumnChartProps } from './components/Chart/ColumnChart';
+export type { LineChartProps } from './components/Chart/Line';
+export type { Scale, SystemPalette } from './theme/global';
+export type {
   BrandSystemPalette,
   GlobalSystemPalette,
 } from './theme/global/colors/types';
-import type { ToolbarItemProps } from './components/Toolbar/ToolbarItem';
-import type { CheckboxProps } from './components/Checkbox';
-import type { SwitchOptionType } from './components/Switch/SelectorSwitch';
-import type { BoxProps } from './components/Box';
-import type { BodyProps } from './components/Typography/Body';
-import type { ToolbarButtonName } from './components/RichTextEditor/types';
-import type { ListItemProps } from './components/List/ListItem';
-import type { IconButtonProps } from './components/Button/IconButton';
-import type { BadgeProps } from './components/Badge';
-import type { ToastProps } from './components/Toast/types';
-import type { Space } from './theme/global/space';
-import type { CaptionProps } from './components/Typography/Caption';
-import type { Radii } from './theme/global/borders';
-import type { TitleProps } from './components/Typography/Title';
-import type {
-  CarouselData,
-  CarouselImageProps,
-} from './components/Carousel/types';
-import type { PinInputHandler } from './components/PinInput';
-import type { ThemeScale } from './components/Box/types';
-import type { TimePickerProps } from './components/TimePicker/types';
-import type { DatePickerProps } from './components/DatePicker/types';
-import type { SegmentedControlItemConfig } from './components/SegmentedControl/types';
-import type { ProgressSegmentedBarProps } from './components/Progress/SegmentedBar/types';
-
+export type { ToolbarItemProps } from './components/Toolbar/ToolbarItem';
+export type { CheckboxProps } from './components/Checkbox';
+export type { SwitchOptionType } from './components/Switch/SelectorSwitch';
+export type { BoxProps } from './components/Box';
+export type { BodyProps } from './components/Typography/Body';
+export type { ToolbarButtonName } from './components/RichTextEditor/types';
+export type { ListItemProps } from './components/List/ListItem';
+export type { IconButtonProps } from './components/Button/IconButton';
+export type { BadgeProps } from './components/Badge';
+export type {
+  ToastProps,
+  ToastContainerProps,
+  ToastItemProps,
+} from './components/Toast/types';
+export type { Space } from './theme/global/space';
+export type { CaptionProps } from './components/Typography/Caption';
+export type { Radii } from './theme/global/borders';
+export type { TitleProps } from './components/Typography/Title';
 export type {
-  Space,
-  CaptionProps,
-  Radii,
-  TitleProps,
   CarouselData,
   CarouselImageProps,
-  PinInputHandler,
-  ThemeScale,
-  ToastProps,
-  ActionGroupProps,
-  ToolbarItemProps,
-  BottomNavigationTabType,
-  IconName,
-  SingleSelectProps,
-  MultiSelectProps,
-  ListRenderOptionInfo,
-  SectionListRenderOptionInfo,
-  SelectOptionType,
-  SwipeableProps,
-  RichTextEditorProps,
-  RichTextEditorRef,
-  TabType,
-  TextInputProps,
-  TextProps,
-  TextInputHandles,
-  Theme,
-  CardCarouselHandles,
-  FABHandles,
-  ActionGroupHandles,
-  ActionItemProps,
-  SliderRangeValue,
-  CalendarDateRange,
-  LocaleCode,
-  LocaleValues,
-  DateTimeFormats,
-  ColumnChartProps,
-  LineChartProps,
-  Scale,
-  SystemPalette,
-  BrandSystemPalette,
-  GlobalSystemPalette,
-  IconProps,
-  CheckboxProps,
-  SwitchOptionType,
-  BoxProps,
-  BodyProps,
-  ToolbarButtonName,
-  ListItemProps,
-  IconButtonProps,
-  BadgeProps,
-  TimePickerProps,
-  DatePickerProps,
-  SegmentedControlItemConfig,
-  ProgressSegmentedBarProps,
-};
+} from './components/Carousel/types';
+export type { PinInputHandler, PinInputProps } from './components/PinInput';
+export type { ThemeScale } from './components/Box/types';
+export type { TimePickerProps } from './components/TimePicker/types';
+export type { DatePickerProps } from './components/DatePicker/types';
+export type { SegmentedControlItemConfig } from './components/SegmentedControl/types';
+export type { ProgressSegmentedBarProps } from './components/Progress/SegmentedBar/types';
+export type { DragableDrawerProps } from './components/Drawer/DragableDrawer';
+export type { DragableScrollViewProps } from './components/Drawer/DragableDrawer/DragableScrollView';
+export type { PortalHostProps } from './components/Portal/PortalHost';
+export type { PortalProviderProps } from './components/Portal/PortalProvider';
+export type { ToolbarGroupProps } from './components/Toolbar/ToolbarGroup';
+export type { InlineCheckboxProps } from './components/Checkbox/InlineCheckBox';
+export type { EditorToolbarProps } from './components/RichTextEditor/EditorToolbar';
+export type { RichTextEditorInputProps } from './components/RichTextEditor/RichTextEditorInput';
+export type { AccordionProps } from './components/Accordion';
+export type { AlertProps } from './components/Alert';
+export type { AppCueProps } from './components/AppCue';
+export type { AttachmentProps } from './components/Attachment';
+export type { AvatarProps } from './components/Avatar/Avatar';
+export type { AvatarStackProps } from './components/Avatar/AvatarStack';
+export type { BottomSheetProps } from './components/BottomSheet';
+export type { ButtonProps } from './components/Button/Button';
+export type { CalendarProps } from './components/Calendar/types';
+export type { CardProps } from './components/Card';
+export type { CarouselProps } from './components/Carousel';
+export type { ChipProps } from './components/Chip';
+export type { CollapseProps } from './components/Collapse';
+export type { ContentNavigatorProps } from './components/ContentNavigator';
+export type { DividerProps } from './components/Divider';
+export type { DrawerProps } from './components/Drawer';
+export type { FilterTriggerProps } from './components/FilterTrigger';
+export type { FloatingIslandProps } from './components/FloatingIsland';
+export type { HeroDesignProviderProps } from './components/HeroDesignProvider';
+export type { ImageProps } from './components/Image';
+export type { InlineLoaderProps } from './components/InlineLoader';
+export type { LabelProps } from './components/Typography/Label';
+export type { LocaleProviderProps } from './components/LocaleProvider';
+export type { MapPinProps } from './components/MapPin/types';
+export type { ModalProps } from './components/Modal';
+export type { PageControlProps } from './components/PageControl';
+export type { ProgressBarProps } from './components/Progress/ProgressBar';
+export type { ProgressCircleProps } from './components/Progress/ProgressCircle';
+export type { ProgressStepProps } from './components/Progress/ProgressStep';
+export type { RadioGroupProps } from './components/Radio/RadioGroup';
+export type { RateProps } from './components/Rate';
+export type { RefreshControlProps } from './components/RefreshControl';
+export type { SectionHeadingProps } from './components/SectionHeading';
+export type { SegmentedControlProps } from './components/SegmentedControl';
+export type { SingleSliderProps } from './components/Slider/SingleSlider';
+export type { SkeletonProps } from './components/Skeleton';
+export type { SpinnerProps } from './components/Spinner';
+export type { SwitchProps } from './components/Switch';
+export type { TagProps } from './components/Tag';

package/types/components/Alert/index.d.ts

@@ -52,7 +52,7 @@ interface BasicAlertProps {
      */
     actionLabel?: string;
 }
-type AlertProps = (BasicAlertProps & {
+export type AlertProps = (BasicAlertProps & {
     actionLabel?: undefined;
 }) | (BasicAlertProps & {
     onClose: () => void;

package/types/components/AppCue/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { Placement } from './StyledAppCue';
-interface AppCueProps {
+export interface AppCueProps {
     content: string | React.ReactElement;
     target: React.ReactElement<{
         onPress?: () => void;

package/types/components/Attachment/index.d.ts

@@ -3,7 +3,7 @@ import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconProps } from '../Icon';
 import type { ImageProps } from '../Image';
-interface AttachmentProps {
+export interface AttachmentProps {
     /**
      * Attachment filename.
      */

package/types/components/BottomNavigation/StyledBottomNavigation.d.ts

@@ -44,7 +44,7 @@ declare const BottomBarItem: import("@emotion/native").StyledComponent<import("r
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../Typography/Label").LabelProps & {
+declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../..").LabelProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;

package/types/components/BottomNavigation/index.d.ts

@@ -19,7 +19,7 @@ export type BottomNavigationTabType = {
         testID?: string;
     };
 };
-interface BottomNavigationProps extends ViewProps {
+export interface BottomNavigationProps extends ViewProps {
     /**
      * Callback which is called on tab press, receiving key of upcoming active Tab.
      */

package/types/components/Carousel/index.d.ts

@@ -2,7 +2,7 @@ import type { Dispatch, ReactElement, SetStateAction } from 'react';
 import React from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import type { CarouselData } from './types';
-interface CarouselProps extends ViewProps {
+export interface CarouselProps extends ViewProps {
     /**
      * Additional style.
      */

package/types/components/Chip/index.d.ts

@@ -7,7 +7,7 @@ import type { IconName } from '../Icon';
  */
 type DeprecatedVariant = 'outlined' | 'filled';
 type ValidVariant = 'selection' | 'filter' | 'compact' | 'compact-outlined';
-interface ChipProps extends ViewProps {
+export interface ChipProps extends ViewProps {
     /**
      * The label of the chip.
      */

package/types/components/ContentNavigator/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-interface ContentNavigatorProps {
+export interface ContentNavigatorProps {
     /**
      * The navigator's content value.
      */

package/types/components/Divider/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
-interface DividerProps extends ViewProps {
+export interface DividerProps extends ViewProps {
     /**
      * Horizontal margin size. There is no margin by default.
      */

package/types/components/Drawer/index.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode } from 'react';
-interface DrawerProps {
+export interface DrawerProps {
     /**
      * Drawer's visibility.
      */

package/types/components/FloatingIsland/index.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import type { TouchableOpacityProps } from 'react-native';
 import type { IconName } from '../Icon';
-interface FloatingIslandProps extends TouchableOpacityProps {
+export interface FloatingIslandProps extends TouchableOpacityProps {
     /**
      * Callback that is called when the floating island is pressed.
      */

package/types/components/HeroDesignProvider/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ThemeProviderProps } from '../../theme/ThemeProvider';
 import type { LocaleValues } from '../../locales/types';
-interface HeroDesignProviderProps extends ThemeProviderProps {
+export interface HeroDesignProviderProps extends ThemeProviderProps {
     locale?: LocaleValues;
 }
 declare const HeroDesignProvider: ({ theme, locale, children, }: HeroDesignProviderProps) => React.JSX.Element;

package/types/components/Icon/index.d.ts

@@ -5,8 +5,6 @@ export type IconName = typeof IconList[number];
 export interface IconProps extends AccessibilityProps {
     /**
      * Name of the Icon.
-     *
-     * icon['carat-*'] - @deprecated Icons starting with 'carat' are deprecated and will be removed in the next major release, please use 'caret' instead.
      */
     icon: IconName;
     /**

package/types/components/LocaleProvider/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { LocaleValues } from '../../locales/types';
-interface LocaleProviderProps {
+export interface LocaleProviderProps {
     locale: LocaleValues;
 }
 declare const LocaleProvider: (props: React.PropsWithChildren<LocaleProviderProps>) => React.JSX.Element;