@hero-design/rn 8.22.0 → 8.24.0-alpha.0

package/types/components/TextInput/StyledTextInput.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { TextInput, View } from 'react-native';
-export declare type Variant = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
+export declare type State = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
+declare type Variant = 'text' | 'textarea';
 declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -17,17 +18,19 @@ declare const StyledLabel: import("@emotion/native").StyledComponent<import("../
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeVariant: Variant;
+    themeState: State;
 }, {}, {}>;
 declare const StyledAsteriskLabel: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeVariant: Variant;
+    themeState: State;
 }, {}, {}>;
 declare const StyledLabelContainerInsideTextInput: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: Variant;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
@@ -35,13 +38,13 @@ declare const StyledLabelInsideTextInput: import("@emotion/native").StyledCompon
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeVariant: Variant;
+    themeState: State;
 }, {}, {}>;
 declare const StyledAsteriskLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeVariant: Variant;
+    themeState: State;
 }, {}, {}>;
 declare const StyledErrorContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -57,7 +60,7 @@ declare const StyledMaxLengthMessage: import("@emotion/native").StyledComponent<
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeVariant: Variant;
+    themeState: State;
 }, {}, {}>;
 declare const StyledHelperText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -66,6 +69,8 @@ declare const StyledHelperText: import("@emotion/native").StyledComponent<import
 declare const StyledTextInput: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: Variant;
 }, {}, {
     ref?: import("react").Ref<TextInput> | undefined;
 }>;
@@ -73,7 +78,7 @@ declare const StyledBorderBackDrop: import("@emotion/native").StyledComponent<im
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeVariant: Variant;
+    themeState: State;
     themeFocused: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextInput as RNTextInput } from 'react-native';
 import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import type { Variant } from './StyledTextInput';
+import type { State } from './StyledTextInput';
 import type { IconName } from '../Icon';
 export declare type TextInputHandles = Pick<RNTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
 export interface TextInputProps extends NativeTextInputProps {
@@ -62,6 +62,10 @@ export interface TextInputProps extends NativeTextInputProps {
      * If the max length is set, the input will display the current length and the max length.
      * */
     maxLength?: number;
+    /**
+     * Whether to hide the character count.
+     * */
+    hideCharacterCount?: boolean;
     /**
      * The helper text to display.
      */
@@ -74,14 +78,18 @@ export interface TextInputProps extends NativeTextInputProps {
      * Component ref.
      */
     ref?: React.Ref<TextInputHandles>;
+    /**
+     * Component variant.
+     */
+    variant?: 'text' | 'textarea';
 }
-export declare const getVariant: ({ disabled, error, editable, loading, isEmptyValue, }: {
+export declare const getState: ({ disabled, error, editable, loading, isEmptyValue, }: {
     disabled?: boolean | undefined;
     error?: string | undefined;
     editable?: boolean | undefined;
     loading: boolean;
     isFocused?: boolean | undefined;
     isEmptyValue?: boolean | undefined;
-}) => Variant;
-declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "children" | "label" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "value" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "allowFontScaling" | "numberOfLines" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "loading" | "accessibilityLabelledBy" | "textAlign" | "error" | "textAlignVertical" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "onChange" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "keyboardType" | "maxLength" | "multiline" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onKeyPress" | "placeholder" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "autoComplete" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "prefix" | "suffix" | "textStyle" | "required" | "helpText" | "renderInputValue"> & React.RefAttributes<TextInputHandles>>;
+}) => State;
+declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "children" | "label" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "value" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "allowFontScaling" | "numberOfLines" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "loading" | "accessibilityLabelledBy" | "textAlign" | "variant" | "error" | "textAlignVertical" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "onChange" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "keyboardType" | "maxLength" | "multiline" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onKeyPress" | "placeholder" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "autoComplete" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "prefix" | "suffix" | "textStyle" | "required" | "hideCharacterCount" | "helpText" | "renderInputValue"> & React.RefAttributes<TextInputHandles>>;
 export default TextInput;

package/types/index.d.ts

@@ -33,6 +33,7 @@ import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
 import Select from './components/Select';
 import Skeleton from './components/Skeleton';
+import Success from './components/Success';
 import Switch from './components/Switch';
 import Tabs from './components/Tabs';
 import Tag from './components/Tag';
@@ -44,5 +45,5 @@ import Typography from './components/Typography';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, PinInput, Progress, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, PinInput, Progress, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
 export * from './types';

package/types/theme/components/success.d.ts

@@ -0,0 +1,32 @@
+import type { GlobalTheme } from '../global';
+declare const getSuccessTheme: (theme: GlobalTheme) => {
+    fontSizes: {
+        title: number;
+        description: number;
+    };
+    colors: {
+        title: string;
+        description: string;
+        fullScreenBackground: string;
+        inPageBackground: string;
+    };
+    sizes: {
+        image: number;
+    };
+    space: {
+        titleMarginBottom: number;
+        imageMarginBottom: number;
+        wrapperPadding: number;
+        button: {
+            wrapperHorizontalPadding: number;
+            wrapperVerticalPadding: number;
+            margin: number;
+            padding: number;
+        };
+    };
+    fonts: {
+        title: string;
+        description: string;
+    };
+};
+export default getSuccessTheme;

package/types/theme/components/textInput.d.ts

@@ -55,6 +55,9 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
         containerMarginTop: number;
         labelInsideTextInputMarginTop: number;
     };
+    fonts: {
+        text: string;
+    };
     fontSizes: {
         text: number;
         labelInsideTextInput: number;
@@ -73,6 +76,8 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
     };
     sizes: {
         errorAndHelpTextContainerHeight: number;
+        textareaHeight: number;
+        textInputMaxHeight: number;
     };
 };
 export default getTextInputTheme;

package/types/theme/getTheme.d.ts

@@ -32,6 +32,7 @@ import getSelectTheme from './components/select';
 import getSkeletonTheme from './components/skeleton';
 import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
+import getSuccessTheme from './components/success';
 import getSwipeableTheme from './components/swipeable';
 import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
@@ -78,6 +79,7 @@ declare type Theme = GlobalTheme & {
         skeleton: ReturnType<typeof getSkeletonTheme>;
         slider: ReturnType<typeof getSliderTheme>;
         spinner: ReturnType<typeof getSpinnerTheme>;
+        success: ReturnType<typeof getSuccessTheme>;
         swipeable: ReturnType<typeof getSwipeableTheme>;
         switch: ReturnType<typeof getSwitchTheme>;
         tabs: ReturnType<typeof getTabsTheme>;