@hero-design/rn 8.75.0 → 8.76.0

package/types/components/Toolbar/StyledToolbar.d.ts

@@ -1,6 +1,7 @@
-import { TouchableOpacity, View } from 'react-native';
+import { TextInput, TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 import { BodyProps } from '../Typography/Body';
+export declare type ToolbarMessageState = 'default' | 'filled' | 'disabled' | 'readonly';
 declare const ToolbarWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -37,4 +38,34 @@ declare const StyledLabel: import("@emotion/native").StyledComponent<BodyProps &
 } & {
     intent: Exclude<BodyProps['intent'], undefined>;
 }, {}, {}>;
-export { ToolbarWrapper, ToolbarGroupWrapper, ToolbarItemWrapper, IconButtonWrapper, IconButtonLabel, StyledLabel, };
+declare const ToolbarMessageWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledInputContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledInput: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TextInput> | undefined;
+}>;
+export declare const StyledPrefix: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledSuffix: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { ToolbarWrapper, ToolbarGroupWrapper, ToolbarItemWrapper, IconButtonWrapper, IconButtonLabel, StyledLabel, ToolbarMessageWrapper, };

package/types/components/Toolbar/ToolbarMessage.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { TextInput as RNTextInput } from 'react-native';
+import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { ToolbarMessageState } from './StyledToolbar';
+export declare type ToolbarMessageHandles = Pick<RNTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
+export interface ToolbarMessageProps extends NativeTextInputProps {
+    /**
+     * Element to render on the left side of the input, before the user's cursor.
+     */
+    prefix?: React.ReactNode;
+    /**
+     * Element to render on the right side of the input.
+     */
+    suffix?: React.ReactNode;
+    /**
+     * Additional wrapper style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Input text style.
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Accessibility label for the input (Android).
+     */
+    accessibilityLabelledBy?: string;
+    /**
+     *  Placeholder text to display.
+     * */
+    placeholder?: string;
+    /**
+     * Whether the input is editable.
+     * */
+    editable?: boolean;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The max length of the input.
+     * If the max length is set, the input will display the current length and the max length.
+     * */
+    maxLength?: number;
+    /**
+     * Component ref.
+     */
+    ref?: React.Ref<ToolbarMessageHandles>;
+}
+export declare const getState: ({ disabled, editable, isEmptyValue, }: {
+    disabled?: boolean | undefined;
+    editable?: boolean | undefined;
+    isEmptyValue?: boolean | undefined;
+}) => ToolbarMessageState;
+declare const ToolbarMessage: React.ForwardRefExoticComponent<Omit<ToolbarMessageProps, "ref"> & React.RefAttributes<ToolbarMessageHandles>>;
+export default ToolbarMessage;

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

@@ -9,5 +9,6 @@ export interface ToolbarProps extends Omit<ViewProps, 'style'> {
 }
 declare const _default: (({ children, ...rest }: ToolbarProps) => React.JSX.Element) & {
     Group: ({ align, items }: import("./ToolbarGroup").ToolbarGroupProps) => React.JSX.Element;
+    Message: React.ForwardRefExoticComponent<Omit<import("./ToolbarMessage").ToolbarMessageProps, "ref"> & React.RefAttributes<import("./ToolbarMessage").ToolbarMessageHandles>>;
 };
 export default _default;

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

@@ -11,21 +11,37 @@ declare const getToolbarTheme: (theme: GlobalTheme) => {
         error: string;
         disabled: string;
         iconButtonBackground: string;
+        inputContainerBackground: string;
     };
     space: {
         verticalPadding: number;
         horizontalPadding: number;
         iconButtonLabelMarginLeft: number;
         iconButtonWrapperPadding: number;
+        messageWrapperMarginHorizontal: number;
+        messageWrapperPaddingVertical: number;
+        messageWrapperPaddingHorizontal: number;
+        messageInputPaddingHorizontal: number;
+        messageInputPaddingVertical: number;
+        affixInnerMargin: number;
     };
     borderWidths: {
         default: number;
     };
     sizes: {
         itemWrapperHeight: number;
+        messageWrapperHeight: number;
+        messageInputHeight: number;
     };
     radii: {
         iconButtonWrapperBorderRadius: number;
+        messageContainer: number;
+    };
+    fontSizes: {
+        text: number;
+    };
+    fonts: {
+        text: string;
     };
 };
 export default getToolbarTheme;