sapo-components-ui-rn 1.0.0

package/dist/components/TextInput/Adornment/TextInputAffix.d.ts

@@ -0,0 +1,72 @@
+import React from "react";
+import { Animated, DimensionValue, GestureResponderEvent, LayoutChangeEvent, StyleProp, TextStyle } from "react-native";
+import { AdornmentSide } from "./enums";
+import type { ThemeProp } from "../../../types";
+export type Props = {
+    /**
+     * Text to show.
+     */
+    text: string;
+    onLayout?: (event: LayoutChangeEvent) => void;
+    /**
+     * Function to execute on press.
+     */
+    onPress?: (e: GestureResponderEvent) => void;
+    /**
+     * Accessibility label for the affix. This is read by the screen reader when the user taps the affix.
+     */
+    accessibilityLabel?: string;
+    /**
+     * Style that is passed to the Text element.
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+type ContextState = {
+    topPosition: number | null;
+    onLayout?: (event: LayoutChangeEvent) => void;
+    visible?: Animated.Value;
+    textStyle?: StyleProp<TextStyle>;
+    side: AdornmentSide;
+    paddingHorizontal?: DimensionValue;
+    maxFontSizeMultiplier?: number | undefined | null;
+    testID?: string;
+    disabled?: boolean;
+};
+declare const AffixAdornment: React.FunctionComponent<{
+    affix: React.ReactNode;
+    testID: string;
+} & ContextState>;
+/**
+ * A component to render a leading / trailing text in the TextInput
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextInput } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState('');
+ *
+ *   return (
+ *     <TextInput
+ *       mode="outlined"
+ *       label="Outlined input"
+ *       placeholder="Type something"
+ *       right={<TextInput.Affix text="/100" />}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+declare const TextInputAffix: {
+    ({ text, textStyle: labelStyle, theme: themeOverrides, onLayout: onTextLayout, onPress, accessibilityLabel, }: Props): React.JSX.Element;
+    displayName: string;
+};
+export default TextInputAffix;
+export { TextInputAffix, AffixAdornment };

package/dist/components/TextInput/Adornment/enums.d.ts

@@ -0,0 +1,12 @@
+export declare enum AdornmentType {
+    Icon = "icon",
+    Affix = "affix"
+}
+export declare enum AdornmentSide {
+    Right = "right",
+    Left = "left"
+}
+export declare enum InputMode {
+    Outlined = "outlined",
+    Flat = "flat"
+}

package/dist/components/TextInput/Adornment/types.d.ts

@@ -0,0 +1,11 @@
+import type { AdornmentSide, AdornmentType } from './enums';
+export type AdornmentConfig = {
+    side: AdornmentSide;
+    type: AdornmentType;
+};
+export type AdornmentStyleAdjustmentForNativeInput = {
+    adornmentStyleAdjustmentForNativeInput: Array<{
+        paddingRight: number;
+        paddingLeft: number;
+    } | {}>;
+};

package/dist/components/TextInput/Adornment/utils.d.ts

@@ -0,0 +1,11 @@
+import type { InternalTheme } from '../../../types';
+type BaseProps = {
+    theme: InternalTheme;
+    disabled?: boolean;
+};
+export declare function getTextColor({ theme, disabled }: BaseProps): string;
+export declare function getIconColor({ theme, isTextInputFocused, disabled, customColor, }: BaseProps & {
+    isTextInputFocused: boolean;
+    customColor?: ((isTextInputFocused: boolean) => string | undefined) | string;
+}): string | undefined;
+export {};

package/dist/components/TextInput/Label/InputLabel.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { InputLabelProps } from "../types";
+declare const _default: React.MemoExoticComponent<(props: InputLabelProps) => React.JSX.Element>;
+export default _default;

package/dist/components/TextInput/Label/LabelBackground.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { LabelBackgroundProps } from '../types';
+declare const LabelBackground: ({ labeled, labelLayoutWidth, labelLayoutHeight, placeholderStyle, baseLabelTranslateX, topPosition, backgroundColor, roundness, labelStyle, maxFontSizeMultiplier, testID, }: LabelBackgroundProps) => (React.JSX.Element | null)[];
+export default LabelBackground;

package/dist/components/TextInput/TextInput.d.ts

@@ -0,0 +1,171 @@
+import React from "react";
+import { StyleProp, TextInput as NativeTextInput, TextStyle, ViewStyle } from "react-native";
+import { Props as TextInputAffixProps } from "./Adornment/TextInputAffix";
+import type { RenderProps, TextInputLabelProp } from "./types";
+import type { ThemeProp } from "../../types";
+export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
+    mode?: "flat" | "default";
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    /**
+     * If true, user won't be able to interact with the component.
+     */
+    disabled?: boolean;
+    /**
+     * The text or component to use for the floating label.
+     */
+    label?: TextInputLabelProp;
+    /**
+     * Placeholder for the input.
+     */
+    placeholder?: string;
+    /**
+     * Whether to style the TextInput with error style.
+     */
+    error?: boolean;
+    /**
+     * Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.
+     */
+    onChangeText?: Function;
+    /**
+     * Selection color of the input. On iOS, it sets both the selection color and cursor color.
+     * On Android, it sets only the selection color.
+     */
+    selectionColor?: string;
+    /**
+     * @platform Android only
+     * Cursor (or "caret") color of the input on Android.
+     * This property has no effect on iOS.
+     */
+    cursorColor?: string;
+    /**
+     * Inactive underline color of the input.
+     */
+    underlineColor?: string;
+    /**
+     * Active underline color of the input.
+     */
+    activeUnderlineColor?: string;
+    /**
+     * Inactive outline color of the input.
+     */
+    outlineColor?: string;
+    /**
+     * Active outline color of the input.
+     */
+    activeOutlineColor?: string;
+    /**
+     * Color of the text in the input.
+     */
+    textColor?: string;
+    placeholderTextColor?: string;
+    /**
+     * Sets min height with densed layout. For `TextInput` in `flat` mode
+     * height is `64dp` or in dense layout - `52dp` with label or `40dp` without label.
+     * For `TextInput` in `outlined` mode
+     * height is `56dp` or in dense layout - `40dp` regardless of label.
+     * When you apply `height` prop in style the `dense` prop affects only `paddingVertical` inside `TextInput`
+     */
+    dense?: boolean;
+    /**
+     * Whether the input can have multiple lines.
+     */
+    multiline?: boolean;
+    /**
+     * @platform Android only
+     * The number of lines to show in the input (Android only).
+     */
+    numberOfLines?: number;
+    /**
+     * Callback that is called when the text input is focused.
+     */
+    onFocus?: (args: any) => void;
+    /**
+     * Callback that is called when the text input is blurred.
+     */
+    onBlur?: (args: any) => void;
+    /**
+     *
+     * Callback to render a custom input component such as `react-native-text-input-mask`
+     * instead of the default `TextInput` component from `react-native`.
+     *
+     * Example:
+     * ```js
+     * <TextInput
+     *   label="Phone number"
+     *   render={props =>
+     *     <TextInputMask
+     *       {...props}
+     *       mask="+[00] [000] [000] [000]"
+     *     />
+     *   }
+     * />
+     * ```
+     */
+    render?: (props: RenderProps) => React.ReactNode;
+    /**
+     * Value of the text input.
+     */
+    value?: string;
+    /**
+     * Pass `fontSize` prop to modify the font size inside `TextInput`.
+     * Pass `height` prop to set `TextInput` height. When `height` is passed,
+     * `dense` prop will affect only input's `paddingVertical`.
+     * Pass `paddingHorizontal` to modify horizontal padding.
+     * This can be used to get MD Guidelines v1 TextInput look.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+    /**
+     * testID to be used on tests.
+     */
+    testID?: string;
+    /**
+     * Pass custom style directly to the input itself.
+     * Overrides input style
+     * Example: `paddingLeft`, `backgroundColor`
+     */
+    contentStyle?: StyleProp<TextStyle>;
+    /**
+     * Pass style to override the default style of outlined wrapper.
+     * Overrides style when mode is set to `outlined`
+     * Example: `borderRadius`, `borderColor`
+     */
+    underlineStyle?: StyleProp<ViewStyle>;
+    minHeight?: number;
+    clearButton?: boolean;
+};
+interface CompoundedComponent extends React.ForwardRefExoticComponent<Props & React.RefAttributes<TextInputHandles>> {
+    Affix: React.FunctionComponent<Partial<TextInputAffixProps>>;
+}
+type TextInputHandles = Pick<NativeTextInput, "focus" | "clear" | "blur" | "isFocused" | "setNativeProps">;
+/**
+ * A component to allow users to input text.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextInput } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState("");
+ *
+ *   return (
+ *     <TextInput
+ *       label="Email"
+ *       value={text}
+ *       onChangeText={text => setText(text)}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends TextInput props https://reactnative.dev/docs/textinput#props
+ */
+declare const TextInput: CompoundedComponent;
+export default TextInput;

package/dist/components/TextInput/TextInputDefault.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { ChildTextInputProps } from "./types";
+declare const TextInputDefault: ({ disabled, editable, label, error, selectionColor: customSelectionColor, cursorColor, outlineColor: customOutlineColor, activeOutlineColor, outlineStyle, textColor, dense, style, theme, render, multiline, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayout, left, right, placeholderTextColor, clearButton, contentStyle, value, ...rest }: ChildTextInputProps) => React.JSX.Element;
+export default TextInputDefault;

package/dist/components/TextInput/TextInputFlat.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { ChildTextInputProps } from "./types";
+declare const TextInputFlat: ({ disabled, editable, label, error, selectionColor: customSelectionColor, cursorColor, underlineColor, underlineStyle, activeUnderlineColor, textColor, dense, style, theme, render, multiline, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayoutAnimatedText, onLabelTextLayout, onLeftAffixLayoutChange, onRightAffixLayoutChange, onInputLayout, left, right, placeholderTextColor, clearButton, contentStyle, scaledLabel, outlineStyle, outlineColor, value, ...rest }: ChildTextInputProps) => React.JSX.Element;
+export default TextInputFlat;

package/dist/components/TextInput/constants.d.ts

@@ -0,0 +1,31 @@
+export declare const MAXIMIZED_LABEL_FONT_SIZE = 14;
+export declare const MINIMIZED_LABEL_FONT_SIZE = 12;
+export declare const LABEL_WIGGLE_X_OFFSET = 4;
+export declare const ADORNMENT_SIZE = 24;
+export declare const MIN_WIDTH = 100;
+export declare const MD2_AFFIX_OFFSET = 12;
+export declare const MD3_AFFIX_OFFSET = 16;
+export declare const ICON_SIZE = 24;
+export declare const MD2_ICON_OFFSET = 12;
+export declare const MD3_ICON_OFFSET = 16;
+export declare const MD2_MIN_HEIGHT = 64;
+export declare const MD3_MIN_HEIGHT = 56;
+export declare const MD3_ADORNMENT_OFFSET = 16;
+export declare const MD2_ADORNMENT_OFFSET = 12;
+export declare const LABEL_PADDING_TOP_DENSE = 24;
+export declare const LABEL_PADDING_TOP = 8;
+export declare const MD2_LABEL_PADDING_TOP = 30;
+export declare const MD3_LABEL_PADDING_TOP = 26;
+export declare const MD2_LABEL_PADDING_HORIZONTAL = 12;
+export declare const MD3_LABEL_PADDING_HORIZONTAL = 16;
+export declare const MD2_FLAT_INPUT_OFFSET = 8;
+export declare const MD3_FLAT_INPUT_OFFSET = 16;
+export declare const MINIMIZED_LABEL_Y_OFFSET = -18;
+export declare const MIN_DENSE_HEIGHT_WL = 52;
+export declare const MIN_DENSE_HEIGHT = 40;
+export declare const MD2_INPUT_PADDING_HORIZONTAL = 14;
+export declare const MD3_INPUT_PADDING_HORIZONTAL = 16;
+export declare const MD2_OUTLINED_INPUT_OFFSET = 8;
+export declare const MD3_OUTLINED_INPUT_OFFSET = 16;
+export declare const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -6;
+export declare const MIN_DENSE_HEIGHT_OUTLINED = 48;

package/dist/components/TextInput/helpers.d.ts

@@ -0,0 +1,95 @@
+import type { AdornmentConfig } from "./Adornment/types";
+import type { TextInputLabelProp } from "./types";
+import type { InternalTheme } from "../../types";
+type PaddingProps = {
+    height: number | null;
+    labelHalfHeight: number;
+    multiline: boolean | null;
+    dense: boolean | null;
+    topPosition: number;
+    fontSize: number;
+    lineHeight?: number;
+    label?: TextInputLabelProp | null;
+    scale: number;
+    offset: number;
+    isAndroid: boolean;
+    styles: {
+        paddingTop: number;
+        paddingBottom: number;
+    };
+};
+type AdjProps = PaddingProps & {
+    pad: number;
+};
+export type Padding = {
+    paddingTop: number;
+    paddingBottom: number;
+};
+export declare const calculateLabelTopPosition: (labelHeight: number, height?: number, optionalPadding?: number) => number;
+export declare const calculateInputHeight: (labelHeight: number, height: any | undefined, minHeight: number) => number;
+export declare const calculatePadding: (props: PaddingProps) => number;
+export declare const adjustPaddingOut: ({ pad, multiline, label, scale, height, fontSize, lineHeight, dense, offset, isAndroid, }: AdjProps) => Padding;
+export declare const adjustPaddingFlat: ({ pad, scale, multiline, label, height, offset, dense, fontSize, isAndroid, styles, }: AdjProps) => Padding;
+export declare function calculateFlatAffixTopPosition({ height, paddingTop, paddingBottom, affixHeight, }: {
+    height: number;
+    paddingTop: number;
+    paddingBottom: number;
+    affixHeight: number;
+}): number;
+export declare function calculateOutlinedIconAndAffixTopPosition({ height, affixHeight, labelYOffset, }: {
+    height: number;
+    affixHeight: number;
+    labelYOffset: number;
+}): number;
+export declare const calculateFlatInputHorizontalPadding: ({ adornmentConfig, }: {
+    adornmentConfig: AdornmentConfig[];
+}) => {
+    paddingLeft: number;
+    paddingRight: number;
+};
+export declare const getFlatInputColors: ({ underlineColor, activeUnderlineColor, customSelectionColor, textColor, disabled, error, theme, }: {
+    underlineColor?: string;
+    activeUnderlineColor?: string;
+    customSelectionColor?: string;
+    textColor?: string;
+    disabled?: boolean;
+    error?: boolean;
+    theme: InternalTheme;
+}) => {
+    inputTextColor: string;
+    activeColor: string;
+    underlineColorCustom: string;
+    placeholderColor: string;
+    selectionColor: string;
+    errorColor: string;
+    backgroundColor: string;
+};
+export declare const getOutlinedInputColors: ({ activeOutlineColor, customOutlineColor, customSelectionColor, textColor, disabled, error, theme, }: {
+    activeOutlineColor?: string;
+    customOutlineColor?: string;
+    customSelectionColor?: string;
+    textColor?: string;
+    disabled?: boolean;
+    error?: boolean;
+    theme: InternalTheme;
+}) => {
+    inputTextColor: string;
+    activeColor: string;
+    outlineColor: string;
+    placeholderColor: string;
+    selectionColor: string;
+    errorColor: string;
+};
+export declare const getConstants: () => {
+    AFFIX_OFFSET: number;
+    ICON_OFFSET: number;
+    LABEL_PADDING_TOP: number;
+    LABEL_PADDING_HORIZONTAL: number;
+    FLAT_INPUT_OFFSET: number;
+    MIN_HEIGHT: number;
+    INPUT_PADDING_HORIZONTAL: number;
+    ADORNMENT_OFFSET: number;
+    OUTLINED_INPUT_OFFSET: number;
+    MIN_WIDTH: number;
+};
+export {};

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

@@ -0,0 +1,154 @@
+import * as React from "react";
+import type { TextInput as NativeTextInput, Animated, TextStyle, LayoutChangeEvent, ColorValue, StyleProp, ViewProps, ViewStyle, NativeSyntheticEvent, TextLayoutEventData } from "react-native";
+import type { $Omit, InternalTheme, ThemeProp } from "./../../types";
+export type TextInputLabelProp = string | React.ReactElement;
+type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
+    mode?: "flat" | "outlined";
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    disabled?: boolean;
+    label?: TextInputLabelProp;
+    placeholder?: string;
+    error?: boolean;
+    onChangeText?: Function;
+    selectionColor?: string;
+    cursorColor?: string;
+    underlineColor?: string;
+    activeUnderlineColor?: string;
+    outlineColor?: string;
+    activeOutlineColor?: string;
+    textColor?: string;
+    dense?: boolean;
+    multiline?: boolean;
+    numberOfLines?: number;
+    onFocus?: (args: any) => void;
+    onBlur?: (args: any) => void;
+    render?: (props: RenderProps) => React.ReactNode;
+    value?: string;
+    style?: StyleProp<TextStyle>;
+    theme?: ThemeProp;
+    testID?: string;
+    contentStyle?: StyleProp<TextStyle>;
+    outlineStyle?: StyleProp<ViewStyle>;
+    underlineStyle?: StyleProp<ViewStyle>;
+    scaledLabel?: boolean;
+};
+export type RenderProps = {
+    ref: (a?: NativeTextInput | null) => void;
+    onChangeText?: (a: string) => void;
+    placeholder?: string;
+    placeholderTextColor?: ColorValue;
+    editable?: boolean;
+    selectionColor?: string;
+    cursorColor?: string;
+    onFocus?: (args: any) => void;
+    onBlur?: (args: any) => void;
+    underlineColorAndroid?: string;
+    onLayout?: (args: any) => void;
+    style: any;
+    multiline?: boolean;
+    numberOfLines?: number;
+    value?: string;
+    adjustsFontSizeToFit?: boolean;
+    testID?: string;
+};
+type TextInputTypesWithoutMode = $Omit<TextInputProps, "mode">;
+export type State = {
+    labeled: Animated.Value;
+    error: Animated.Value;
+    focused: boolean;
+    displayPlaceholder: boolean;
+    value?: string;
+    labelTextLayout: {
+        width: number;
+    };
+    labelLayout: {
+        measured: boolean;
+        width: number;
+        height: number;
+    };
+    leftLayout: {
+        height: number | null;
+        width: number | null;
+    };
+    rightLayout: {
+        height: number | null;
+        width: number | null;
+    };
+    inputContainerLayout: {
+        width: number;
+    };
+    contentStyle?: StyleProp<ViewProps>;
+};
+export type ChildTextInputProps = {
+    parentState: State;
+    innerRef: (ref?: NativeTextInput | null) => void;
+    onFocus?: (args: any) => void;
+    onBlur?: (args: any) => void;
+    forceFocus: () => void;
+    onChangeText?: (value: string) => void;
+    onInputLayout: (event: LayoutChangeEvent) => void;
+    onLayoutAnimatedText: (args: any) => void;
+    onLabelTextLayout: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
+    onLeftAffixLayoutChange: (event: LayoutChangeEvent) => void;
+    onRightAffixLayoutChange: (event: LayoutChangeEvent) => void;
+    clearButton?: boolean;
+} & $Omit<TextInputTypesWithoutMode, "theme"> & {
+    theme: InternalTheme;
+};
+export type LabelProps = {
+    mode?: "flat" | "outlined";
+    placeholderStyle: any;
+    placeholderOpacity: number | Animated.Value | Animated.AnimatedInterpolation<number>;
+    baseLabelTranslateX: number;
+    baseLabelTranslateY: number;
+    wiggleOffsetX: number;
+    labelScale: number;
+    fontSize: number;
+    lineHeight?: number | undefined;
+    fontWeight: TextStyle["fontWeight"];
+    font: any;
+    topPosition: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    labelTranslationXOffset?: number;
+    placeholderColor: string | null;
+    backgroundColor?: ColorValue;
+    label?: TextInputLabelProp | null;
+    hasActiveOutline?: boolean | null;
+    activeColor: string;
+    errorColor?: string;
+    labelError?: boolean | null;
+    onLayoutAnimatedText: (args: any) => void;
+    onLabelTextLayout: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
+    roundness: number;
+    maxFontSizeMultiplier?: number | undefined | null;
+    testID?: string;
+    contentStyle?: StyleProp<ViewProps>;
+    theme?: ThemeProp;
+};
+export type InputLabelProps = {
+    labeled: Animated.Value;
+    error: Animated.Value;
+    focused: boolean;
+    wiggle: boolean;
+    opacity: number;
+    labelLayoutMeasured: boolean;
+    labelLayoutWidth: number;
+    labelLayoutHeight: number;
+    inputContainerLayout: {
+        width: number;
+    };
+    labelBackground?: any;
+    maxFontSizeMultiplier?: number | undefined | null;
+    scaledLabel?: boolean;
+} & LabelProps;
+export type LabelBackgroundProps = {
+    labelStyle: any;
+    labeled: Animated.Value;
+    labelLayoutWidth: number;
+    labelLayoutHeight: number;
+    maxFontSizeMultiplier?: number | undefined | null;
+    theme?: ThemeProp;
+} & LabelProps;
+export {};

package/dist/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+interface ToastRef {
+    show: (params: {
+        message: string;
+        duration?: number;
+        position?: "top" | "bottom";
+        type?: "success" | "fail";
+        onPress?: () => void;
+        title?: string;
+    }) => void;
+}
+interface ToastProviderProps {
+    children: React.ReactNode;
+    /**
+     * Nếu ứng dụng đã có SafeAreaProvider, set wrapSafeArea = false
+     * @default true
+     */
+    wrapSafeArea?: boolean;
+}
+declare const ToastProvider: React.ForwardRefExoticComponent<ToastProviderProps & React.RefAttributes<ToastRef>>;
+export default ToastProvider;

package/dist/components/Toast/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Toast: React.NamedExoticComponent<React.RefAttributes<unknown>>;
+export default Toast;

package/dist/components/Typography/AnimatedText.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Animated, StyleProp, TextStyle, Text } from "react-native";
+import type { VariantProp } from "./types";
+import type { ThemeProp } from "../../types";
+type Props<T> = React.ComponentPropsWithRef<typeof Animated.Text> & {
+    /**
+     * Variant defines appropriate text styles for type role and its size.
+     * Available variants:
+     *
+     *  Display: `displayLarge`, `displayMedium`, `displaySmall`
+     *
+     *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
+     *
+     *  Title: `titleLarge`, `titleMedium`, `titleSmall`
+     *
+     *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
+     *
+     *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
+     */
+    variant?: VariantProp<T>;
+    style?: StyleProp<TextStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+/**
+ * Animated text component which follows styles from the theme.
+ *
+ * @extends Text props https://reactnative.dev/docs/text#props
+ */
+declare const AnimatedText: import("../../utils/forwardRef").ForwardRefComponent<Text & HTMLElement, Props<never>>;
+export declare const customAnimatedText: <T>() => (props: Props<T>) => JSX.Element;
+export default AnimatedText;

package/dist/components/Typography/StyledText.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { StyleProp, TextStyle } from "react-native";
+import Text from "./Text";
+import type { ThemeProp } from "../../types";
+type Props = React.ComponentProps<typeof Text> & {
+    alpha?: number;
+    family: "regular" | "medium" | "light" | "thin";
+    style?: StyleProp<TextStyle>;
+    theme?: ThemeProp;
+};
+declare const StyledText: ({ alpha, family, style, theme: themeOverrides, ...rest }: Props) => React.JSX.Element;
+export default StyledText;