sapo-components-ui-rn 1.1.46 → 1.1.48

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleProp, TextInput as NativeTextInput, TextStyle, ViewStyle } from "react-native";
+import { StyleProp, TextInput as NativeTextInput, TextStyle, ViewStyle, TextProps } from "react-native";
 import { Props as TextInputAffixProps } from "./Adornment/TextInputAffix";
 import type { RenderProps, TextInputLabelProp } from "./types";
 import type { ThemeProp } from "../../types";
@@ -15,6 +15,8 @@ export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
     type?: "integer" | "float";
     formatDecimal?: 1 | 2 | 3;
     required?: boolean;
+    labelScaleValue?: number;
+    labelStyle?: StyleProp<TextProps>;
     /**
      * If true, user won't be able to interact with the component.
      */

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

@@ -1,4 +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, prefix, suffix, placeholderTextColor, clearButton, contentStyle, value, textError, required, ...rest }: ChildTextInputProps) => React.JSX.Element;
+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, prefix, suffix, placeholderTextColor, clearButton, contentStyle, labelStyle, value, textError, required, ...rest }: ChildTextInputProps) => React.JSX.Element;
 export default TextInputDefault;

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

@@ -1,4 +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, prefix, suffix, placeholderTextColor, clearButton, contentStyle, scaledLabel, outlineStyle, outlineColor, value, textError, required, ...rest }: ChildTextInputProps) => React.JSX.Element;
+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, prefix, suffix, placeholderTextColor, clearButton, contentStyle, scaledLabel, outlineStyle, outlineColor, value, textError, required, labelScaleValue, ...rest }: ChildTextInputProps) => React.JSX.Element;
 export default TextInputFlat;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { TextInput as NativeTextInput, Animated, TextStyle, LayoutChangeEvent, ColorValue, StyleProp, ViewProps, ViewStyle, NativeSyntheticEvent, TextLayoutEventData } from "react-native";
+import type { TextInput as NativeTextInput, Animated, TextStyle, LayoutChangeEvent, ColorValue, StyleProp, ViewProps, ViewStyle, NativeSyntheticEvent, TextLayoutEventData, TextProps } from "react-native";
 import type { $Omit, InternalTheme, ThemeProp } from "./../../types";
 export type TextInputLabelProp = string | React.ReactElement;
 type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
@@ -79,6 +79,7 @@ export type State = {
         width: number;
     };
     contentStyle?: StyleProp<ViewProps>;
+    labelStyle?: StyleProp<TextProps>;
 };
 export type ChildTextInputProps = {
     parentState: State;
@@ -97,6 +98,8 @@ export type ChildTextInputProps = {
     suffix?: string;
     textError?: string;
     required?: boolean;
+    labelStyle?: StyleProp<TextProps>;
+    labelScaleValue?: number;
 } & $Omit<TextInputTypesWithoutMode, "theme"> & {
     theme: InternalTheme;
 };

package/dist/index.esm.js

@@ -5084,8 +5084,8 @@ var SvgIcon = function (_a) {
 };
 
 var TextInputFlat = function (_a) {
-    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.editable, editable = _c === void 0 ? true : _c, label = _a.label, _d = _a.error, error = _d === void 0 ? false : _d, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, underlineColor = _a.underlineColor; _a.underlineStyle; var activeUnderlineColor = _a.activeUnderlineColor, textColor = _a.textColor, dense = _a.dense, style = _a.style, theme = _a.theme, _e = _a.render, render = _e === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText, onLayoutAnimatedText = _a.onLayoutAnimatedText, onLabelTextLayout = _a.onLabelTextLayout; _a.onLeftAffixLayoutChange; _a.onRightAffixLayoutChange; var onInputLayout = _a.onInputLayout, left = _a.left, right = _a.right, prefix = _a.prefix, suffix = _a.suffix, placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, contentStyle = _a.contentStyle, scaledLabel = _a.scaledLabel, outlineStyle = _a.outlineStyle, outlineColor = _a.outlineColor, value = _a.value, textError = _a.textError, required = _a.required, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "underlineColor", "underlineStyle", "activeUnderlineColor", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayoutAnimatedText", "onLabelTextLayout", "onLeftAffixLayoutChange", "onRightAffixLayoutChange", "onInputLayout", "left", "right", "prefix", "suffix", "placeholderTextColor", "clearButton", "contentStyle", "scaledLabel", "outlineStyle", "outlineColor", "value", "textError", "required"]);
-    var _g = React$3.useState(value || ""), inputValue = _g[0], setInputValue = _g[1];
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.editable, editable = _c === void 0 ? true : _c, label = _a.label, _d = _a.error, error = _d === void 0 ? false : _d, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, underlineColor = _a.underlineColor; _a.underlineStyle; var activeUnderlineColor = _a.activeUnderlineColor, textColor = _a.textColor, dense = _a.dense, style = _a.style, theme = _a.theme, _e = _a.render, render = _e === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _e, _f = _a.multiline, multiline = _f === void 0 ? false : _f, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText, onLayoutAnimatedText = _a.onLayoutAnimatedText, onLabelTextLayout = _a.onLabelTextLayout; _a.onLeftAffixLayoutChange; _a.onRightAffixLayoutChange; var onInputLayout = _a.onInputLayout, left = _a.left, right = _a.right, prefix = _a.prefix, suffix = _a.suffix, placeholderTextColor = _a.placeholderTextColor, clearButton = _a.clearButton, contentStyle = _a.contentStyle, scaledLabel = _a.scaledLabel, outlineStyle = _a.outlineStyle, outlineColor = _a.outlineColor, value = _a.value, textError = _a.textError, required = _a.required, _g = _a.labelScaleValue, labelScaleValue = _g === void 0 ? MINIMIZED_LABEL_FONT_SIZE : _g, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "underlineColor", "underlineStyle", "activeUnderlineColor", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayoutAnimatedText", "onLabelTextLayout", "onLeftAffixLayoutChange", "onRightAffixLayoutChange", "onInputLayout", "left", "right", "prefix", "suffix", "placeholderTextColor", "clearButton", "contentStyle", "scaledLabel", "outlineStyle", "outlineColor", "value", "textError", "required", "labelScaleValue"]);
+    var _h = React$3.useState(value || ""), inputValue = _h[0], setInputValue = _h[1];
     React$3.useEffect(function () {
         if (value === undefined) {
             setInputValue("");
@@ -5107,8 +5107,8 @@ var TextInputFlat = function (_a) {
     var roundness = theme.roundness;
     var font = theme.fonts.bodyLarge;
     var hasActiveOutline = parentState.focused || error;
-    var _h = getConstants(), LABEL_PADDING_TOP = _h.LABEL_PADDING_TOP, FLAT_INPUT_OFFSET = _h.FLAT_INPUT_OFFSET, MIN_HEIGHT = _h.MIN_HEIGHT;
-    var _j = (StyleSheet.flatten(style) || {}), fontSizeStyle = _j.fontSize, lineHeightStyle = _j.lineHeight, fontWeight = _j.fontWeight, height = _j.height, paddingHorizontal = _j.paddingHorizontal; _j.textAlign; __rest(_j, ["fontSize", "lineHeight", "fontWeight", "height", "paddingHorizontal", "textAlign"]);
+    var _j = getConstants(), LABEL_PADDING_TOP = _j.LABEL_PADDING_TOP, FLAT_INPUT_OFFSET = _j.FLAT_INPUT_OFFSET, MIN_HEIGHT = _j.MIN_HEIGHT;
+    var _k = (StyleSheet.flatten(style) || {}), fontSizeStyle = _k.fontSize, lineHeightStyle = _k.lineHeight, fontWeight = _k.fontWeight, height = _k.height, paddingHorizontal = _k.paddingHorizontal; _k.textAlign; __rest(_k, ["fontSize", "lineHeight", "fontWeight", "height", "paddingHorizontal", "textAlign"]);
     var fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
     var lineHeight = lineHeightStyle || (Platform.OS === "web" ? fontSize * 1.2 : undefined);
     var isPaddingHorizontalPassed = paddingHorizontal !== undefined && typeof paddingHorizontal === "number";
@@ -5116,14 +5116,14 @@ var TextInputFlat = function (_a) {
         left: left,
         right: right,
     });
-    var _k = calculateFlatInputHorizontalPadding({
+    var _l = calculateFlatInputHorizontalPadding({
         adornmentConfig: adornmentConfig,
-    }), paddingLeft = _k.paddingLeft, paddingRight = _k.paddingRight;
+    }), paddingLeft = _l.paddingLeft, paddingRight = _l.paddingRight;
     if (isPaddingHorizontalPassed) {
         paddingLeft = paddingHorizontal;
         paddingRight = paddingHorizontal;
     }
-    var _l = getFlatInputColors({
+    var _m = getFlatInputColors({
         underlineColor: underlineColor,
         activeUnderlineColor: activeUnderlineColor,
         customSelectionColor: customSelectionColor,
@@ -5131,13 +5131,13 @@ var TextInputFlat = function (_a) {
         disabled: disabled,
         error: error,
         theme: theme,
-    }), inputTextColor = _l.inputTextColor, activeColor = _l.activeColor, placeholderColor = _l.placeholderColor, errorColor = _l.errorColor, backgroundColor = _l.backgroundColor, selectionColor = _l.selectionColor;
+    }), inputTextColor = _m.inputTextColor, activeColor = _m.activeColor, placeholderColor = _m.placeholderColor, errorColor = _m.errorColor, backgroundColor = _m.backgroundColor, selectionColor = _m.selectionColor;
     ({
         backgroundColor: backgroundColor,
         borderTopLeftRadius: theme.roundness,
         borderTopRightRadius: theme.roundness,
     });
-    var labelScale = MINIMIZED_LABEL_FONT_SIZE / fontSize;
+    var labelScale = labelScaleValue / fontSize;
     var fontScale = MAXIMIZED_LABEL_FONT_SIZE / fontSize;
     var labelWidth = parentState.labelLayout.width;
     var labelHeight = parentState.labelLayout.height;
@@ -5396,7 +5396,7 @@ var styles$e = StyleSheet.create({
 
 var TextInputDefault = function (_a) {
     var _b, _c;
-    var _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.editable, editable = _e === void 0 ? true : _e, label = _a.label, _f = _a.error, error = _f === void 0 ? false : _f, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, customOutlineColor = _a.outlineColor, activeOutlineColor = _a.activeOutlineColor; _a.outlineStyle; var textColor = _a.textColor; _a.dense; var style = _a.style, theme = _a.theme, _g = _a.render, render = _g === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _g, _h = _a.multiline, multiline = _h === void 0 ? false : _h, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText; _a.onLayout; var left = _a.left, right = _a.right, prefix = _a.prefix, suffix = _a.suffix, placeholderTextColor = _a.placeholderTextColor, _j = _a.clearButton, clearButton = _j === void 0 ? false : _j, contentStyle = _a.contentStyle, _k = _a.value, value = _k === void 0 ? "" : _k, textError = _a.textError, required = _a.required, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "outlineColor", "activeOutlineColor", "outlineStyle", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayout", "left", "right", "prefix", "suffix", "placeholderTextColor", "clearButton", "contentStyle", "value", "textError", "required"]);
+    var _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.editable, editable = _e === void 0 ? true : _e, label = _a.label, _f = _a.error, error = _f === void 0 ? false : _f, customSelectionColor = _a.selectionColor, cursorColor = _a.cursorColor, customOutlineColor = _a.outlineColor, activeOutlineColor = _a.activeOutlineColor; _a.outlineStyle; var textColor = _a.textColor; _a.dense; var style = _a.style, theme = _a.theme, _g = _a.render, render = _g === void 0 ? function (props) { return React$3.createElement(TextInput$1, __assign({}, props)); } : _g, _h = _a.multiline, multiline = _h === void 0 ? false : _h, parentState = _a.parentState, innerRef = _a.innerRef, onFocus = _a.onFocus; _a.forceFocus; var onBlur = _a.onBlur, onChangeText = _a.onChangeText; _a.onLayout; var left = _a.left, right = _a.right, prefix = _a.prefix, suffix = _a.suffix, placeholderTextColor = _a.placeholderTextColor, _j = _a.clearButton, clearButton = _j === void 0 ? false : _j, contentStyle = _a.contentStyle, labelStyle = _a.labelStyle, _k = _a.value, value = _k === void 0 ? "" : _k, textError = _a.textError, required = _a.required, rest = __rest(_a, ["disabled", "editable", "label", "error", "selectionColor", "cursorColor", "outlineColor", "activeOutlineColor", "outlineStyle", "textColor", "dense", "style", "theme", "render", "multiline", "parentState", "innerRef", "onFocus", "forceFocus", "onBlur", "onChangeText", "onLayout", "left", "right", "prefix", "suffix", "placeholderTextColor", "clearButton", "contentStyle", "labelStyle", "value", "textError", "required"]);
     var colors = theme.colors;
     var font = theme.fonts.bodyLarge;
     var _l = (StyleSheet.flatten(style) || {}), fontSizeStyle = _l.fontSize, fontWeight = _l.fontWeight, lineHeightStyle = _l.lineHeight, height = _l.height, _m = _l.backgroundColor; _m === void 0 ? colors === null || colors === void 0 ? void 0 : colors.backgroundPrimary : _m; var textAlign = _l.textAlign; _l.minHeight; var viewStyle = __rest(_l, ["fontSize", "fontWeight", "lineHeight", "height", "backgroundColor", "textAlign", "minHeight"]);
@@ -5451,6 +5451,9 @@ var TextInputDefault = function (_a) {
         if (disabled) {
             return theme.colors.textSecondary;
         }
+        else if (error) {
+            return theme.colors.textErrorDefault;
+        }
         else if (parentState.focused) {
             return activeColor;
         }
@@ -5469,9 +5472,9 @@ var TextInputDefault = function (_a) {
         }
         else if (((_b = parentState.value) === null || _b === void 0 ? void 0 : _b.toString()) == "") {
             return (React$3.createElement(View, { paddingTop: CONSTANTS.SPACE_12 },
-                React$3.createElement(Text$1, { color: getLabelColor(), style: [contentStyle] },
+                React$3.createElement(Text$1, { color: getLabelColor(), style: [labelStyle] },
                     label,
-                    required && (React$3.createElement(Text$1, { style: [contentStyle], color: theme.colors.textErrorDefault },
+                    required && (React$3.createElement(Text$1, { style: [labelStyle], color: theme.colors.textErrorDefault },
                         " ",
                         "*")))));
         }