@webority-technologies/mobile 0.0.9 → 0.0.10

package/lib/commonjs/components/Input/Input.js

@@ -59,7 +59,8 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     leftIcon,
     rightIcon,
     size = 'md',
-    variant = 'outlined',
+    variant: variantProp,
+    labelMode: labelModeProp,
     required = false,
     maxLength,
     format,
@@ -80,13 +81,20 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     ...sizeMap[size],
     ...(theme.components.input?.[size] ?? {})
   };
+
+  // Per-call-site prop wins; otherwise theme defaults; otherwise library defaults.
+  const variant = variantProp ?? theme.components.input?.defaultVariant ?? 'outlined';
+  const labelMode = labelModeProp ?? theme.components.input?.defaultLabelMode ?? 'float';
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [isPasswordVisible, setIsPasswordVisible] = (0, _react.useState)(false);
   const hasValue = typeof value === 'string' && value.length > 0;
   const hasError = typeof error === 'string' && error.length > 0;
   const isEditable = !disabled && editable !== false;
   const shouldFloat = isFocused || hasValue;
-  const showFloatingLabel = Boolean(label) && !multiline;
+  // Floating label only when explicitly opted into via labelMode='float' AND the
+  // field is single-line. labelMode='top' OR multiline both force a static label
+  // above the field — the staticLabel branch below handles both.
+  const showFloatingLabel = Boolean(label) && !multiline && labelMode === 'float';
 
   // Animations
   const focusAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;

package/lib/module/components/Input/Input.js

@@ -52,7 +52,8 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     leftIcon,
     rightIcon,
     size = 'md',
-    variant = 'outlined',
+    variant: variantProp,
+    labelMode: labelModeProp,
     required = false,
     maxLength,
     format,
@@ -73,13 +74,20 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     ...sizeMap[size],
     ...(theme.components.input?.[size] ?? {})
   };
+
+  // Per-call-site prop wins; otherwise theme defaults; otherwise library defaults.
+  const variant = variantProp ?? theme.components.input?.defaultVariant ?? 'outlined';
+  const labelMode = labelModeProp ?? theme.components.input?.defaultLabelMode ?? 'float';
   const [isFocused, setIsFocused] = useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const hasValue = typeof value === 'string' && value.length > 0;
   const hasError = typeof error === 'string' && error.length > 0;
   const isEditable = !disabled && editable !== false;
   const shouldFloat = isFocused || hasValue;
-  const showFloatingLabel = Boolean(label) && !multiline;
+  // Floating label only when explicitly opted into via labelMode='float' AND the
+  // field is single-line. labelMode='top' OR multiline both force a static label
+  // above the field — the staticLabel branch below handles both.
+  const showFloatingLabel = Boolean(label) && !multiline && labelMode === 'float';
 
   // Animations
   const focusAnim = useRef(createAnimatedValue(0)).current;

package/lib/typescript/commonjs/components/Input/Input.d.ts

@@ -3,6 +3,7 @@ import { TextInput } from 'react-native';
 import type { BlurEvent, FocusEvent, StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
 export type InputSize = 'sm' | 'md' | 'lg';
 export type InputVariant = 'outlined' | 'filled';
+export type InputLabelMode = 'float' | 'top';
 export interface InputProps extends Omit<TextInputProps, 'style'> {
     label?: string;
     placeholder?: string;
@@ -18,6 +19,15 @@ export interface InputProps extends Omit<TextInputProps, 'style'> {
     rightIcon?: React.ReactNode;
     size?: InputSize;
     variant?: InputVariant;
+    /**
+     * - `'float'` (default): Material-Design floating label that animates from
+     *   inside the field to the top border on focus / when there's a value.
+     * - `'top'`: classic static label rendered above the field with no animation.
+     *   Use for forms that want the label permanently visible.
+     *
+     * Theme override: `theme.components.input.defaultLabelMode`.
+     */
+    labelMode?: InputLabelMode;
     required?: boolean;
     maxLength?: number;
     /**

package/lib/typescript/commonjs/theme/types.d.ts

@@ -295,9 +295,15 @@ export interface RadioTokens extends Partial<Record<ComponentSizeKey, RadioSizeT
     borderWidth?: number;
     labelGap?: number;
 }
+export interface InputComponentTokens extends Partial<Record<ComponentSizeKey, InputSizeTokens>> {
+    /** Default `variant` when caller doesn't pass one. Library default: 'outlined'. */
+    defaultVariant?: 'outlined' | 'filled';
+    /** Default `labelMode` when caller doesn't pass one. Library default: 'float'. */
+    defaultLabelMode?: 'float' | 'top';
+}
 export interface ComponentTokens {
     button?: Partial<Record<ComponentSizeKey, ButtonSizeTokens>>;
-    input?: Partial<Record<ComponentSizeKey, InputSizeTokens>>;
+    input?: InputComponentTokens;
     searchBar?: Partial<Record<ComponentSizeKey, SearchBarSizeTokens>> & {
         cancelButtonWidth?: number;
     };

package/lib/typescript/module/components/Input/Input.d.ts

@@ -3,6 +3,7 @@ import { TextInput } from 'react-native';
 import type { BlurEvent, FocusEvent, StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
 export type InputSize = 'sm' | 'md' | 'lg';
 export type InputVariant = 'outlined' | 'filled';
+export type InputLabelMode = 'float' | 'top';
 export interface InputProps extends Omit<TextInputProps, 'style'> {
     label?: string;
     placeholder?: string;
@@ -18,6 +19,15 @@ export interface InputProps extends Omit<TextInputProps, 'style'> {
     rightIcon?: React.ReactNode;
     size?: InputSize;
     variant?: InputVariant;
+    /**
+     * - `'float'` (default): Material-Design floating label that animates from
+     *   inside the field to the top border on focus / when there's a value.
+     * - `'top'`: classic static label rendered above the field with no animation.
+     *   Use for forms that want the label permanently visible.
+     *
+     * Theme override: `theme.components.input.defaultLabelMode`.
+     */
+    labelMode?: InputLabelMode;
     required?: boolean;
     maxLength?: number;
     /**

package/lib/typescript/module/theme/types.d.ts

@@ -295,9 +295,15 @@ export interface RadioTokens extends Partial<Record<ComponentSizeKey, RadioSizeT
     borderWidth?: number;
     labelGap?: number;
 }
+export interface InputComponentTokens extends Partial<Record<ComponentSizeKey, InputSizeTokens>> {
+    /** Default `variant` when caller doesn't pass one. Library default: 'outlined'. */
+    defaultVariant?: 'outlined' | 'filled';
+    /** Default `labelMode` when caller doesn't pass one. Library default: 'float'. */
+    defaultLabelMode?: 'float' | 'top';
+}
 export interface ComponentTokens {
     button?: Partial<Record<ComponentSizeKey, ButtonSizeTokens>>;
-    input?: Partial<Record<ComponentSizeKey, InputSizeTokens>>;
+    input?: InputComponentTokens;
     searchBar?: Partial<Record<ComponentSizeKey, SearchBarSizeTokens>> & {
         cancelButtonWidth?: number;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority-technologies/mobile",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Beautiful, animated, accessible React Native components plus API/auth/logging/network/storage utilities for Webority projects.",
   "keywords": [
     "react-native",