@scripso-homepad/ui 0.4.13 → 0.4.15

package/dist/index.d.cts

@@ -40,13 +40,15 @@ interface InputProps extends TextInputProps {
     /** Styles merged into the bordered field container. */
     fieldStyle?: StyleProp<ViewStyle>;
     labelClassName?: string;
+    /** Styles merged into the field label. */
+    labelStyles?: StyleProp<TextStyle>;
     inputClassName?: string;
     errorClassName?: string;
     hintClassName?: string;
     /** When `secureTextEntry` is set, show a toggleable eye icon. Pass `false` to disable. */
     showPasswordToggle?: boolean;
 }
-declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, ...props }: InputProps): react.JSX.Element;
+declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, multiline, textAlignVertical, ...props }: InputProps): react.JSX.Element;
 
 type SelectOption = {
     value: string;
@@ -96,11 +98,13 @@ interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     style?: StyleProp<TextStyle>;
     className?: string;
     labelClassName?: string;
+    /** Styles merged into the field label. */
+    labelStyles?: StyleProp<TextStyle>;
     inputClassName?: string;
     errorClassName?: string;
     hintClassName?: string;
 }
-declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, ...props }: PhoneInputProps): react.JSX.Element;
+declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, ...props }: PhoneInputProps): react.JSX.Element;
 
 type Country = {
     code: string;

package/dist/index.d.ts

@@ -40,13 +40,15 @@ interface InputProps extends TextInputProps {
     /** Styles merged into the bordered field container. */
     fieldStyle?: StyleProp<ViewStyle>;
     labelClassName?: string;
+    /** Styles merged into the field label. */
+    labelStyles?: StyleProp<TextStyle>;
     inputClassName?: string;
     errorClassName?: string;
     hintClassName?: string;
     /** When `secureTextEntry` is set, show a toggleable eye icon. Pass `false` to disable. */
     showPasswordToggle?: boolean;
 }
-declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, ...props }: InputProps): react.JSX.Element;
+declare function Input({ label, leftIcon, rightIcon, error, invalid, hint, containerStyle, style, className, fieldClassName, fieldStyle, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, secureTextEntry, showPasswordToggle, onFocus, onBlur, multiline, textAlignVertical, ...props }: InputProps): react.JSX.Element;
 
 type SelectOption = {
     value: string;
@@ -96,11 +98,13 @@ interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     style?: StyleProp<TextStyle>;
     className?: string;
     labelClassName?: string;
+    /** Styles merged into the field label. */
+    labelStyles?: StyleProp<TextStyle>;
     inputClassName?: string;
     errorClassName?: string;
     hintClassName?: string;
 }
-declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, ...props }: PhoneInputProps): react.JSX.Element;
+declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, ...props }: PhoneInputProps): react.JSX.Element;
 
 type Country = {
     code: string;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { spacing, colors, fontWeight, fontSize, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-WFMQYYH6.js';
-export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale } from './chunk-WFMQYYH6.js';
+import { spacing, colors, fontWeight, fontSize, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-3G3ZKFHX.js';
+export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale } from './chunk-3G3ZKFHX.js';
 import { createContext, useRef, useState, useMemo, useEffect, useLayoutEffect, useContext, isValidElement, cloneElement } from 'react';
 import { Platform, StyleSheet, Animated, Easing, View, Pressable, Text, Modal, ScrollView, TextInput, Dimensions } from 'react-native';
 import Svg2, { Path } from 'react-native-svg';
@@ -1093,6 +1093,7 @@ function PhoneInput({
   style,
   className,
   labelClassName,
+  labelStyles,
   inputClassName,
   errorClassName,
   hintClassName,
@@ -1125,7 +1126,15 @@ function PhoneInput({
   }
   const helperMessage = error ?? hint;
   return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles3.wrapper, containerStyle], children: [
-    label ? /* @__PURE__ */ jsx(Label, { disabled: isDisabled, className: labelClassName, children: label }) : null,
+    label ? /* @__PURE__ */ jsx(
+      Label,
+      {
+        disabled: isDisabled,
+        className: labelClassName,
+        style: labelStyles,
+        children: label
+      }
+    ) : null,
     /* @__PURE__ */ jsxs(View, { style: styles3.row, children: [
       /* @__PURE__ */ jsx(
         CountryCodeSelector,
@@ -1136,38 +1145,36 @@ function PhoneInput({
           style: styles3.countrySelector
         }
       ),
-      /* @__PURE__ */ jsxs(View, { style: styles3.phoneColumn, children: [
-        /* @__PURE__ */ jsx(View, { style: [phoneFieldStyles.outline, styles3.phoneOutline], children: /* @__PURE__ */ jsx(
-          View,
-          {
-            style: [
-              inputFieldMetrics.container,
-              phoneFieldStyles.container,
-              styles3.phoneField
-            ],
-            children: /* @__PURE__ */ jsx(
-              TextInput,
-              {
-                ref: inputRef,
-                style: [
-                  inputFieldMetrics.input,
-                  phoneFieldStyles.text,
-                  style
-                ],
-                keyboardType: "phone-pad",
-                placeholderTextColor: phoneFieldStyles.placeholder,
-                editable,
-                onFocus: handleFocus,
-                onBlur: handleBlur,
-                accessibilityState: { disabled: isDisabled },
-                ...props
-              }
-            )
-          }
-        ) }),
-        helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles3.error : styles3.hint, children: helperMessage }) : null
-      ] })
-    ] })
+      /* @__PURE__ */ jsx(View, { style: [phoneFieldStyles.outline, styles3.phoneOutline], children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: [
+            inputFieldMetrics.container,
+            phoneFieldStyles.container,
+            styles3.phoneField
+          ],
+          children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              ref: inputRef,
+              style: [
+                inputFieldMetrics.input,
+                phoneFieldStyles.text,
+                style
+              ],
+              keyboardType: "phone-pad",
+              placeholderTextColor: error ? colors.inputError : phoneFieldStyles.placeholder,
+              editable,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              accessibilityState: { disabled: isDisabled },
+              ...props
+            }
+          )
+        }
+      ) })
+    ] }),
+    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles3.error : styles3.hint, children: helperMessage }) : null
   ] });
 }
 var styles3 = StyleSheet.create({
@@ -1184,12 +1191,8 @@ var styles3 = StyleSheet.create({
     flexShrink: 0,
     alignSelf: "flex-start"
   },
-  phoneColumn: {
-    flex: 1,
-    gap: spacing.sm
-  },
   phoneOutline: {
-    width: "100%"
+    flex: 1
   },
   phoneField: {
     flex: 1