@hero-design/rn 8.128.0 → 8.128.2

package/package.json

@@ -1,10 +1,17 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.128.0",
+  "version": "8.128.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "locales/*": [
+        "types/locales/*"
+      ]
+    }
+  },
   "react-native": "src/index.ts",
   "scripts": {
     "lint": "eslint src --quiet",

package/src/components/DatePicker/DatePicker.tsx

@@ -3,36 +3,17 @@ import { Platform } from 'react-native';
 import DatePickerAndroid from './DatePickerAndroid';
 import DatePickerCalendar from './DatePickerCalendar';
 import DatePickerIOS from './DatePickerIOS';
-import type { InternalDatePickerProps } from './types';
-import TextInput from '../TextInput';
+import type { DatePickerProps } from './types';
 
-const DatePicker = ({
-  variant = 'default',
-  TextInputComponent = TextInput,
-  ...props
-}: InternalDatePickerProps) => {
+const DatePicker = ({ variant = 'default', ...props }: DatePickerProps) => {
   if (variant === 'calendar') {
-    return (
-      <DatePickerCalendar {...props} TextInputComponent={TextInputComponent} />
-    );
+    return <DatePickerCalendar {...props} />;
   }
   if (Platform.OS === 'ios') {
-    return (
-      <DatePickerIOS
-        {...props}
-        variant={variant}
-        TextInputComponent={TextInputComponent}
-      />
-    );
+    return <DatePickerIOS {...props} variant={variant} />;
   }
 
-  return (
-    <DatePickerAndroid
-      {...props}
-      variant={variant}
-      TextInputComponent={TextInputComponent}
-    />
-  );
+  return <DatePickerAndroid {...props} variant={variant} />;
 };
 
 export default DatePicker;

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -1,15 +1,14 @@
 import React, { useState, useCallback } from 'react';
-import { View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 
 import TextInput from '../TextInput';
 import AndroidDatePickerDialog from './Dialog/AndroidDialog';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
-import { StyledTouchableOpacity } from './StyledDatePicker';
-import type { InternalDatePickerProps } from './types';
+import type { DatePickerProps } from './types';
 
 type DatePickerAndroidProps = Omit<
-  InternalDatePickerProps,
+  DatePickerProps,
   'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
 > & {
   variant?: 'default' | 'month-year';
@@ -31,9 +30,6 @@ const DatePickerAndroid = ({
   variant = 'default',
   renderSelectedValue,
   locale,
-  TextInputComponent,
-  inputProps,
-  groupStyleEnabled = false,
 }: DatePickerAndroidProps) => {
   const [open, setOpen] = useState(false);
 
@@ -45,23 +41,18 @@ const DatePickerAndroid = ({
 
   useCalculateDate({ minDate, maxDate, onChange, value });
 
-  const InputComponent = TextInputComponent || TextInput;
-
   const onPress = useCallback(() => {
     setOpen(true);
   }, []);
 
   return (
-    <StyledTouchableOpacity
+    <TouchableOpacity
       onPress={onPress}
       disabled={disabled}
-      themeGroupStyleEnabled={groupStyleEnabled}
-      themeHasError={!!error}
       testID="date-picker-android-touchable-opacity"
     >
       <View pointerEvents="none" testID="datePickerInputAndroid">
-        <InputComponent
-          {...inputProps}
+        <TextInput
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
@@ -74,13 +65,13 @@ const DatePickerAndroid = ({
           testID={testID}
           renderInputValue={
             renderSelectedValue !== undefined && !!value
-              ? (props) =>
+              ? (inputProps) =>
                   renderSelectedValue(
                     {
                       date: value,
                       formattedDateString: displayValue,
                     },
-                    props
+                    inputProps
                   )
               : undefined
           }
@@ -95,7 +86,7 @@ const DatePickerAndroid = ({
         onChange={onChange}
         variant={variant}
       />
-    </StyledTouchableOpacity>
+    </TouchableOpacity>
   );
 };
 

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { Platform, ScrollView, View } from 'react-native';
+import { Platform, ScrollView, TouchableOpacity, View } from 'react-native';
 
 import BottomSheet from '../BottomSheet';
 import Button from '../Button';
@@ -8,8 +8,7 @@ import type { CalendarProps } from '../Calendar/types';
 import TextInput from '../TextInput';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
-import { StyledTouchableOpacity } from './StyledDatePicker';
-import type { InternalDatePickerProps } from './types';
+import type { DatePickerProps } from './types';
 
 const InternalCalendar = ({
   minDate,
@@ -82,10 +81,7 @@ const DatePickerCalendar = ({
   supportedOrientations = ['portrait'],
   renderSelectedValue,
   locale,
-  TextInputComponent,
-  inputProps,
-  groupStyleEnabled = false,
-}: Omit<InternalDatePickerProps, 'variant'>) => {
+}: Omit<DatePickerProps, 'variant'>) => {
   const [open, setOpen] = useState(false);
   const [monthPickerVisible, setMonthPickerVisible] = useState(false);
   const shouldHideToolbar = Platform.OS === 'ios' && monthPickerVisible;
@@ -100,23 +96,18 @@ const DatePickerCalendar = ({
 
   useCalculateDate({ minDate, maxDate, onChange, value });
 
-  const InputComponent = TextInputComponent || TextInput;
-
   const onPress = useCallback(() => {
     setOpen(true);
   }, []);
 
   return (
-    <StyledTouchableOpacity
+    <TouchableOpacity
       onPress={onPress}
       disabled={disabled}
-      themeGroupStyleEnabled={groupStyleEnabled}
-      themeHasError={!!error}
       testID="date-picker-calendar-touchable-opacity"
     >
       <View pointerEvents="none" testID="datePickerCalendar">
-        <InputComponent
-          {...inputProps}
+        <TextInput
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
@@ -129,13 +120,13 @@ const DatePickerCalendar = ({
           style={style}
           renderInputValue={
             renderSelectedValue !== undefined && !!value
-              ? (props) =>
+              ? (inputProps) =>
                   renderSelectedValue(
                     {
                       date: value,
                       formattedDateString: displayValue,
                     },
-                    props
+                    inputProps
                   )
               : undefined
           }
@@ -173,7 +164,7 @@ const DatePickerCalendar = ({
           />
         </ScrollView>
       </BottomSheet>
-    </StyledTouchableOpacity>
+    </TouchableOpacity>
   );
 };
 

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -1,16 +1,15 @@
 import React, { useState, useCallback } from 'react';
-import { View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 
 import { useLocale } from '../LocaleProvider/hooks';
 import TextInput from '../TextInput';
 import IOSDatePickerDialog from './Dialog/IOSDialog';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
-import { StyledTouchableOpacity } from './StyledDatePicker';
-import type { InternalDatePickerProps } from './types';
+import type { DatePickerProps } from './types';
 
 type DatePickerIOSProps = Omit<
-  InternalDatePickerProps,
+  DatePickerProps,
   'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
 > & {
   variant?: 'default' | 'month-year';
@@ -34,9 +33,6 @@ const DatePickerIOS = ({
   variant = 'default',
   locale,
   renderSelectedValue,
-  TextInputComponent,
-  inputProps,
-  groupStyleEnabled = false,
 }: DatePickerIOSProps) => {
   const [open, setOpen] = useState(false);
   const { lang: defaultLocale } = useLocale();
@@ -48,23 +44,18 @@ const DatePickerIOS = ({
 
   useCalculateDate({ minDate, maxDate, onChange, value });
 
-  const InputComponent = TextInputComponent || TextInput;
-
   const onPress = useCallback(() => {
     setOpen(true);
   }, []);
 
   return (
-    <StyledTouchableOpacity
+    <TouchableOpacity
       onPress={onPress}
       disabled={disabled}
-      themeGroupStyleEnabled={groupStyleEnabled}
-      themeHasError={!!error}
       testID="date-picker-ios-touchable-opacity"
     >
       <View pointerEvents="none" testID="datePickerInputIOS">
-        <InputComponent
-          {...inputProps}
+        <TextInput
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
@@ -77,13 +68,13 @@ const DatePickerIOS = ({
           style={style}
           renderInputValue={
             renderSelectedValue !== undefined && !!value
-              ? (props) =>
+              ? (inputProps) =>
                   renderSelectedValue(
                     {
                       date: value,
                       formattedDateString: displayValue,
                     },
-                    props
+                    inputProps
                   )
               : undefined
           }
@@ -102,7 +93,7 @@ const DatePickerIOS = ({
         minDate={minDate}
         maxDate={maxDate}
       />
-    </StyledTouchableOpacity>
+    </TouchableOpacity>
   );
 };
 

package/src/components/DatePicker/StyledDatePicker.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { View, TouchableOpacity } from 'react-native';
+import { View } from 'react-native';
 import type { ViewProps } from 'react-native';
 
 const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
@@ -7,21 +7,4 @@ const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
   alignItems: 'center',
 }));
 
-const getZIndexByState = ({ themeHasError }: { themeHasError: boolean }) => {
-  if (themeHasError) {
-    return 1;
-  }
-
-  return 0;
-};
-
-const StyledTouchableOpacity = styled(TouchableOpacity)<{
-  themeGroupStyleEnabled: boolean;
-  themeHasError: boolean;
-}>(({ themeGroupStyleEnabled, themeHasError }) => ({
-  ...(themeGroupStyleEnabled && {
-    zIndex: getZIndexByState({ themeHasError }),
-  }),
-}));
-
-export { StyledPickerWrapper, StyledTouchableOpacity };
+export { StyledPickerWrapper };

package/src/components/DatePicker/types.ts

@@ -3,7 +3,6 @@ import type {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import type { TextInputProps } from '../TextInput';
 
 export interface DatePickerProps {
   /**
@@ -101,19 +100,3 @@ export interface DatePickerProps {
     props?: NativeTextInputProps
   ) => React.ReactNode;
 }
-
-// Add an internal prop type for TextInputComponent, not exported
-export interface InternalDatePickerProps extends DatePickerProps {
-  /**
-   * Props that are passed to TextInput.
-   */
-  inputProps?: Pick<TextInputProps, 'loading' | 'numberOfLines'>;
-  /**
-   * Whether the component is used within a FormGroup for styling purposes.
-   */
-  groupStyleEnabled?: boolean;
-  /**
-   * Input component to use instead of the default TextInput.
-   */
-  TextInputComponent?: React.ComponentType<TextInputProps>;
-}

package/src/components/FAB/FAB.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import {
   Animated,
   LayoutAnimation,
@@ -67,6 +67,11 @@ export interface FABProps {
   testID?: string;
 }
 
+// Extends FABProps with internal-only props. Not part of the public API.
+type InternalFABProps = FABProps & {
+  titleStyle?: StyleProp<TextStyle>;
+};
+
 const IconOnlyContent = ({
   icon,
   animated,
@@ -98,15 +103,17 @@ const IconOnlyContent = ({
 const IconWithTextContent = ({
   icon,
   title,
+  titleStyle,
 }: {
   icon: IconName;
   title?: string;
+  titleStyle?: StyleProp<TextStyle>;
 }) => (
   <>
     <StyledIconContainer>
       <StyledFABIcon size="xsmall" icon={icon} testID="styled-fab-icon" />
     </StyledIconContainer>
-    <StyledFABText>{title}</StyledFABText>
+    <StyledFABText style={titleStyle}>{title}</StyledFABText>
   </>
 );
 
@@ -120,9 +127,20 @@ const animateWidth = () => {
   });
 };
 
-const FAB = forwardRef<FABHandles, FABProps>(
+// Full implementation — accepts InternalFABProps including titleStyle.
+// Exported as FABInternal for use by sibling HD components (e.g. FAB.Pair).
+const FABWithTitleStyle = forwardRef<FABHandles, InternalFABProps>(
   (
-    { onPress, title, icon, animated: iconAnimated, testID, active, style },
+    {
+      onPress,
+      title,
+      icon,
+      animated: iconAnimated,
+      testID,
+      active,
+      style,
+      titleStyle,
+    },
     ref
   ) => {
     const theme = useTheme();
@@ -237,6 +255,7 @@ const FAB = forwardRef<FABHandles, FABProps>(
         }
         activeOpacity={0.8}
         onPress={onPress}
+        themeIconOnly={isIconOnly}
         style={[
           style,
           {
@@ -276,7 +295,11 @@ const FAB = forwardRef<FABHandles, FABProps>(
               icon={active ? 'add' : icon}
             />
           ) : (
-            <IconWithTextContent icon={icon} title={title} />
+            <IconWithTextContent
+              icon={icon}
+              title={title}
+              titleStyle={titleStyle}
+            />
           )}
         </Animated.View>
       </StyledFAB>
@@ -284,6 +307,15 @@ const FAB = forwardRef<FABHandles, FABProps>(
   }
 );
 
+FABWithTitleStyle.displayName = 'FAB';
+
+// Public export — clean FABProps, no internal props exposed.
+// Docgen reads this component and sees only FABProps.
+const FAB = forwardRef<FABHandles, FABProps>((props, ref) => (
+  <FABWithTitleStyle {...props} ref={ref} />
+));
+
 FAB.displayName = 'FAB';
 
+export { FABWithTitleStyle as FABInternal };
 export default FAB;

package/src/components/FAB/Pair/StyledFAB.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import FAB from '../FAB';
+import { FABInternal } from '../FAB';
 import Box from '../../Box';
 
 const StyledFABPairWrapper = styled(Box)({
@@ -8,7 +8,7 @@ const StyledFABPairWrapper = styled(Box)({
   alignItems: 'center',
 });
 
-const StyledFAB = styled(FAB)<{ iconOnly?: boolean; isLast?: boolean }>(
+const StyledFAB = styled(FABInternal)<{ iconOnly?: boolean; isLast?: boolean }>(
   ({ theme, iconOnly = false, isLast = false }) => ({
     height: theme.__hd__.fab.sizes.fabPairHeight,
     width: iconOnly ? theme.__hd__.fab.sizes.fabPairIconOnlyWidth : undefined,

package/src/components/FAB/Pair/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { ViewProps } from 'react-native';
+import { useTheme } from '../../../theme';
 import type { FABProps } from '../FAB';
 import { StyledFAB, StyledFABPairWrapper } from './StyledFAB';
 
@@ -21,6 +22,7 @@ export interface FABPairProps extends ViewProps {
 
 const Pair = ({ fabConfig, onCancel, ...props }: FABPairProps) => {
   const { icon, title, onPress, testID } = fabConfig;
+  const theme = useTheme();
 
   return (
     <StyledFABPairWrapper {...props}>
@@ -38,6 +40,10 @@ const Pair = ({ fabConfig, onCancel, ...props }: FABPairProps) => {
         testID={testID}
         iconOnly={!title}
         isLast
+        titleStyle={{
+          fontSize: theme.fontSizes.medium,
+          fontFamily: theme.fonts.neutral.regular,
+        }}
       />
     </StyledFABPairWrapper>
   );

package/src/components/FAB/StyledFAB.tsx

@@ -11,7 +11,8 @@ const AnimatedTouchableHighlight =
 
 const StyledFAB = styled(AnimatedTouchableHighlight)<{
   themeActive?: boolean;
-}>(({ theme, themeActive }) => ({
+  themeIconOnly?: boolean;
+}>(({ theme, themeActive, themeIconOnly }) => ({
   backgroundColor: themeActive
     ? theme.__hd__.fab.colors.buttonActiveBackground
     : theme.__hd__.fab.colors.buttonBackground,
@@ -22,6 +23,7 @@ const StyledFAB = styled(AnimatedTouchableHighlight)<{
   padding: theme.__hd__.fab.space.containerPadding,
   flexDirection: 'row',
   height: theme.__hd__.fab.sizes.height,
+  ...(themeIconOnly && { width: theme.__hd__.fab.sizes.width }),
   ...theme.__hd__.fab.shadows.default,
 }));
 

package/src/components/Select/MultiSelect/index.tsx

@@ -3,7 +3,7 @@ import type {
   TextInputProps as NativeTextInputProps,
   SectionList,
 } from 'react-native';
-import { View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { useKeyboard } from '../../../utils/helpers';
 import BottomSheet from '../../BottomSheet';
 import Box from '../../Box';
@@ -11,7 +11,7 @@ import type { TextInputProps } from '../../TextInput';
 import TextInput from '../../TextInput';
 import Footer from '../Footer';
 import { getScrollParams, toFlatOptions, toSections } from '../helpers';
-import { StyledSearchBar, StyledTouchableOpacity } from '../StyledSelect';
+import { StyledSearchBar } from '../StyledSelect';
 import type { SectionType, SelectOptionType, SelectProps } from '../types';
 import OptionList from './OptionList';
 import { isOptionSelected } from './utils';
@@ -53,15 +53,6 @@ export interface MultiSelectProps<
   supportedOrientations?: ('portrait' | 'landscape')[];
 }
 
-// Add an internal prop type for TextInputComponent, not exported
-export interface InternalMultiSelectProps<
-  V,
-  T extends SelectOptionType<V> = SelectOptionType<V>
-> extends MultiSelectProps<V, T> {
-  TextInputComponent?: React.ComponentType<TextInputProps>;
-  groupStyleEnabled?: boolean;
-}
-
 function MultiSelect<V, T extends SelectOptionType<V>>({
   footerLabel,
   label,
@@ -84,9 +75,7 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
   value,
   supportedOrientations = ['portrait'],
   bottomSheetConfig = {},
-  groupStyleEnabled = false,
-  ...rest
-}: InternalMultiSelectProps<V, T>) {
+}: MultiSelectProps<V, T>) {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
   const [selectingValue, setSelectingValue] = useState(value);
@@ -101,8 +90,6 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
   const { variant: bottomSheetVariant, header: bottomSheetHeader } =
     bottomSheetConfig;
 
-  const TextInputComponent = rest.TextInputComponent || TextInput;
-
   const onPress = useCallback(() => {
     setOpen(true);
   }, []);
@@ -122,17 +109,15 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
           !editable || disabled || inputProps?.loading ? 'none' : 'auto'
         }
       >
-        <StyledTouchableOpacity
+        <TouchableOpacity
           onPress={onPress}
-          themeGroupStyleEnabled={groupStyleEnabled}
-          themeHasError={!!error}
           testID="multi-select-touchable-opacity"
         >
           {
             // prevent users from focusing TextInput
           }
           <View pointerEvents="none">
-            <TextInputComponent
+            <TextInput
               {...inputProps}
               label={label}
               value={renderSelectedValue ? rawValue : displayedValue}
@@ -147,12 +132,13 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
               testID={testID}
               renderInputValue={
                 renderSelectedValue !== undefined && rawValue?.length > 0
-                  ? (props) => renderSelectedValue(value, props)
+                  ? (nativeInputProps) =>
+                      renderSelectedValue(value, nativeInputProps)
                   : undefined
               }
             />
           </View>
-        </StyledTouchableOpacity>
+        </TouchableOpacity>
       </View>
       <BottomSheet
         variant={bottomSheetVariant || 'fixed'}
@@ -193,7 +179,7 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
       >
         {onQueryChange && (
           <StyledSearchBar>
-            <TextInputComponent
+            <TextInput
               editable
               placeholder="Search"
               suffix="search-outlined"