@hero-design/rn 8.76.1 → 8.77.0

package/types/components/Search/SearchCompound.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { TextInputProps as NativeTextInputProps, TextInput as RNTextInput, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { State } from './StyledSearch';
+import { IconName } from '../Icon';
+export declare type SearchCompoundHandles = Pick<RNTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
+interface SearchCompoundProps extends NativeTextInputProps {
+    /**
+     * Name of Icon or ReactElement to render on the left side of the input, before the user's cursor.
+     */
+    prefix?: IconName | React.ReactElement;
+    /**
+     * Name of Icon or ReactElement to render on the right side of the input.
+     */
+    suffix?: IconName | React.ReactElement;
+    /**
+     * 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;
+    /**
+     * Whether to hide the character count.
+     * */
+    renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+}
+export declare const getState: ({ disabled, editable, isEmptyValue, }: {
+    disabled?: boolean | undefined;
+    editable?: boolean | undefined;
+    isFocused?: boolean | undefined;
+    isEmptyValue?: boolean | undefined;
+}) => State;
+declare const SearchCompound: React.ForwardRefExoticComponent<SearchCompoundProps & React.RefAttributes<SearchCompoundHandles>>;
+export default SearchCompound;

package/types/components/Tabs/ScrollableTabsHeader.d.ts

@@ -0,0 +1,35 @@
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { TabType } from '.';
+export interface ScrollableTabHeaderProps extends ViewProps {
+    /**
+     * Callback which is called on tab press, receiving key of upcoming active Tab.
+     */
+    onTabPress: (key: string) => void;
+    /**
+     * Current selected tab key.
+     */
+    selectedIndex?: number;
+    /**
+     * List of Tabs to be rendered. Each Tab must have an unique key.
+     */
+    tabs: TabType[];
+    /**
+     * Style for the tab navigation bar.
+     */
+    barStyle?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * component insets
+     */
+    insets?: {
+        top: number;
+        bottom: number;
+        right: number;
+        left: number;
+    };
+}
+declare const ScrollableTabHeader: ({ onTabPress, selectedIndex, tabs, barStyle, testID, insets, }: ScrollableTabHeaderProps) => JSX.Element;
+export default ScrollableTabHeader;

package/types/theme/ThemeSwitcher.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-declare type ThemeName = 'swag' | 'swagDark' | 'work' | 'jobs' | 'wallet' | 'eBens';
+declare type ThemeName = 'swag' | 'swagDark' | 'swagLight' | 'work' | 'jobs' | 'wallet' | 'eBens';
 declare const ThemeSwitcher: ({ name, children, }: {
     name?: ThemeName | undefined;
     children: React.ReactNode;

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

@@ -0,0 +1,36 @@
+import type { GlobalTheme } from '../global';
+declare const getCompoundSearchTheme: (theme: GlobalTheme) => {
+    colors: {
+        containerBackground: string;
+        surfixBackground: string;
+        text: string;
+        borders: string;
+    };
+    space: {
+        containerHorizontalPadding: number;
+        containerVerticalPadding: number;
+        inputHorizontalMargin: number;
+        prefixHorizontalPadding: number;
+        surfixPadding: number;
+    };
+    fonts: {
+        text: string;
+    };
+    fontSizes: {
+        text: number;
+    };
+    borderWidths: {
+        container: {
+            normal: number;
+            focused: number;
+        };
+    };
+    radii: {
+        container: number;
+        surfix: number;
+    };
+    sizes: {
+        surfixSize: number;
+    };
+};
+export default getCompoundSearchTheme;