rn-inputforge 0.3.1 → 0.5.0

package/src/components/FieldFlowDraftBanner/FieldFlowDraftBanner.tsx

@@ -0,0 +1,169 @@
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet, Text, View, type TextStyle, type ViewStyle } from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { renderFieldFlowIcon } from '../../icons/renderIcon';
+import type { DeepPartial, FieldFlowTheme } from '../../types';
+
+export interface FieldFlowDraftBannerProps {
+  visible: boolean;
+  /** Epoch ms when the draft was saved — used for relative time copy. */
+  savedAt?: number | null;
+  title?: string;
+  subtitle?: string;
+  resumeLabel?: string;
+  discardLabel?: string;
+  onResume: () => void;
+  onDiscard: () => void;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  subtitleStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+function formatRelativeTime(savedAt: number): string {
+  const delta = Math.max(0, Date.now() - savedAt);
+  const minutes = Math.floor(delta / 60000);
+  if (minutes < 1) return 'just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+/**
+ * Themed “Resume where you left off?” banner for `useFieldFlowDraft`.
+ */
+export function FieldFlowDraftBanner({
+  visible,
+  savedAt,
+  title = 'Resume your draft?',
+  subtitle,
+  resumeLabel = 'Resume',
+  discardLabel = 'Discard',
+  onResume,
+  onDiscard,
+  containerStyle,
+  titleStyle,
+  subtitleStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowDraftBannerProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const resolvedSubtitle =
+    subtitle ??
+    (savedAt ? `Saved ${formatRelativeTime(savedAt)}. Pick up where you left off.` : 'Pick up where you left off.');
+
+  if (!visible) return null;
+
+  return (
+    <View
+      style={[styles.banner, containerStyle]}
+      testID={testID}
+      accessibilityRole="summary"
+      accessibilityLabel={`${title}. ${resolvedSubtitle}`}
+    >
+      <View style={styles.iconWrap}>
+        {renderFieldFlowIcon('file', theme.colors.borderFocused, 18)}
+      </View>
+      <View style={styles.copy}>
+        <Text style={[styles.title, titleStyle]}>{title}</Text>
+        <Text style={[styles.subtitle, subtitleStyle]}>{resolvedSubtitle}</Text>
+      </View>
+      <View style={styles.actions}>
+        <Pressable
+          onPress={onDiscard}
+          hitSlop={6}
+          accessibilityRole="button"
+          accessibilityLabel={discardLabel}
+          style={styles.ghostBtn}
+        >
+          <Text style={styles.ghostText}>{discardLabel}</Text>
+        </Pressable>
+        <Pressable
+          onPress={onResume}
+          hitSlop={6}
+          accessibilityRole="button"
+          accessibilityLabel={resumeLabel}
+          style={styles.primaryBtn}
+        >
+          <Text style={styles.primaryText}>{resumeLabel}</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme) {
+  return StyleSheet.create({
+    banner: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      gap: theme.spacing.gap,
+      padding: theme.spacing.paddingHorizontal,
+      marginBottom: theme.spacing.gap * 2,
+      borderRadius: theme.spacing.borderRadius,
+      borderWidth: theme.spacing.borderWidth,
+      borderColor: theme.colors.borderFocused,
+      backgroundColor: theme.colors.background,
+    },
+    iconWrap: {
+      width: 32,
+      height: 32,
+      borderRadius: 8,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.backgroundDisabled,
+    },
+    copy: {
+      flex: 1,
+      minWidth: 140,
+    },
+    title: {
+      fontSize: theme.typography.fontSize,
+      fontWeight: '600',
+      color: theme.colors.text,
+      fontFamily: theme.typography.fontFamily,
+    },
+    subtitle: {
+      marginTop: 2,
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+      fontFamily: theme.typography.fontFamily,
+    },
+    actions: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.spacing.gap,
+    },
+    ghostBtn: {
+      paddingHorizontal: 10,
+      paddingVertical: 8,
+    },
+    ghostText: {
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label,
+      fontWeight: '500',
+    },
+    primaryBtn: {
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      borderRadius: theme.spacing.borderRadius,
+      backgroundColor: theme.colors.borderFocused,
+    },
+    primaryText: {
+      fontSize: theme.typography.helperFontSize,
+      color: '#FFFFFF',
+      fontWeight: '600',
+    },
+  });
+}

package/src/components/FieldFlowDraftBanner/index.ts

@@ -0,0 +1,2 @@
+export { FieldFlowDraftBanner } from './FieldFlowDraftBanner';
+export type { FieldFlowDraftBannerProps } from './FieldFlowDraftBanner';

package/src/components/FieldFlowDropdown/FieldFlowDropdown.tsx

@@ -13,6 +13,7 @@ import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
 import { defaultTheme } from '../../theme/defaultTheme';
 import { useFieldState } from '../../hooks/useFieldState';
 import { FieldFlowIcon } from '../../icons/Icon';
+import { renderFieldFlowIcon } from '../../icons/renderIcon';
 import { createDropdownStyles } from './styles';
 import type { FieldFlowDropdownProps } from './types';
 import type { FieldFlowOption } from '../../types';
@@ -35,6 +36,9 @@ export function FieldFlowDropdown(props: FieldFlowDropdownProps) {
     emptyText = 'No options found',
     maxModalHeight,
     clearable,
+    leftIcon,
+    rightIcon,
+    iconSize = 16,
     containerStyle,
     triggerStyle,
     labelStyle,
@@ -165,6 +169,11 @@ export function FieldFlowDropdown(props: FieldFlowDropdownProps) {
         disabled={item.disabled}
         style={styles.optionRow}
       >
+        {item.icon ? (
+          <View style={{ marginRight: 10, marginTop: 2 }}>
+            {renderFieldFlowIcon(item.icon, theme.colors.icon, 18)}
+          </View>
+        ) : null}
         <View style={{ flex: 1 }}>
           <Text
             style={[
@@ -253,20 +262,21 @@ export function FieldFlowDropdown(props: FieldFlowDropdownProps) {
           disabled={disabled}
           style={[styles.trigger, triggerStyle]}
         >
+          {leftIcon ? (
+            <View style={{ marginRight: 8 }}>
+              {renderFieldFlowIcon(leftIcon, theme.colors.icon, iconSize)}
+            </View>
+          ) : null}
           {triggerLabel ? (
-            <Text style={styles.triggerText} numberOfLines={1}>
+            <Text style={[styles.triggerText, { flex: 1 }]} numberOfLines={1}>
               {triggerLabel}
             </Text>
           ) : (
-            <Text style={styles.placeholderText} numberOfLines={1}>
+            <Text style={[styles.placeholderText, { flex: 1 }]} numberOfLines={1}>
               {placeholder}
             </Text>
           )}
-          <FieldFlowIcon
-            name="chevronDown"
-            size={16}
-            color={theme.colors.icon}
-          />
+          {renderFieldFlowIcon(rightIcon ?? 'chevronDown', theme.colors.icon, iconSize)}
         </Pressable>
       </View>
 

package/src/components/FieldFlowDropdown/types.ts

@@ -1,5 +1,6 @@
 import type { ViewStyle, TextStyle } from 'react-native';
-import type { DeepPartial, FieldFlowOption, FieldFlowTheme } from '../../types';
+import type { DeepPartial, FieldFlowOption, FieldFlowTheme, FieldFlowVariant } from '../../types';
+import type { FieldFlowIconSource } from '../../icons';
 
 export type FieldFlowDropdownPresentation = 'bottomSheet' | 'popup' | 'inline';
 
@@ -26,6 +27,12 @@ interface BaseDropdownProps {
   maxModalHeight?: number;
   clearable?: boolean;
 
+  /** Built-in icon name or custom React node on the trigger. */
+  leftIcon?: FieldFlowIconSource;
+  rightIcon?: FieldFlowIconSource;
+  iconSize?: number;
+  variant?: FieldFlowVariant;
+
   containerStyle?: ViewStyle;
   triggerStyle?: ViewStyle;
   labelStyle?: TextStyle;

package/src/components/FieldFlowInput/FieldFlowInput.tsx

@@ -1,29 +1,33 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Pressable, Text, TextInput, View } from 'react-native';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Animated, Pressable, Text, TextInput, View } from 'react-native';
 import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
 import { defaultTheme } from '../../theme/defaultTheme';
 import { useFieldState } from '../../hooks/useFieldState';
 import { resolveFieldConfig, implicitRulesForType } from '../../utils/keyboardTypes';
 import { sanitizeNumeric, sanitizePhone, truncate } from '../../utils/formatters';
 import { runRules } from '../../validation/validators';
-import { FieldFlowIcon } from '../../icons/Icon';
-import { createStyles, iconColorFor } from './styles';
+import { renderFieldFlowIcon } from '../../icons/renderIcon';
+import { useFieldMotion } from '../../motion/useFieldMotion';
+import { FieldFlowAffordance } from '../FieldFlowAffordance';
+import { FieldFlowPasswordStrength } from '../FieldFlowPasswordStrength';
+import {
+  affordanceKindFromFieldType,
+  type FieldFlowAffordanceKind,
+} from '../../utils/affordance';
+import { createStyles, iconColorFor, labelColorFor } from './styles';
 import type { FieldFlowInputProps } from './types';
 
-function renderIconNode(
-  icon: FieldFlowInputProps['leftIcon'],
-  color: string,
-): React.ReactNode {
-  if (!icon) return null;
-  if (typeof icon === 'string') {
-    return <FieldFlowIcon name={icon as any} color={color} size={18} />;
-  }
-  return icon;
-}
+const DEFAULT_ICONS: Partial<Record<NonNullable<FieldFlowInputProps['type']>, FieldFlowInputProps['leftIcon']>> = {
+  search: 'search',
+  email: 'mail',
+  phone: 'phone',
+  password: 'lock',
+};
 
 export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(function FieldFlowInput(
   {
     type = 'text',
+    variant = 'outlined',
     label,
     helperText,
     errorText,
@@ -46,16 +50,26 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
     rightIcon,
     onLeftIconPress,
     onRightIconPress,
+    iconSize = 18,
     clearable,
+    suggestions,
+    suggestionsAlwaysVisible = false,
+    showStrength,
+    prefix,
+    suffix,
+    motion = true,
     maxLength,
     showCharacterCount,
     onSubmitEditing,
     containerStyle,
+    inputContainerStyle,
     inputStyle,
     labelStyle,
     helperStyle,
+    errorStyle,
     theme: themeOverride,
     testID,
+    placeholder,
     ...rest
   },
   forwardedRef,
@@ -94,11 +108,32 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
   });
 
   const styles = useMemo(
-    () => createStyles(theme, state, fieldConfig.multiline && type !== 'chat'),
-    [theme, state, fieldConfig.multiline, type],
+    () => createStyles(theme, state, fieldConfig.multiline && type !== 'chat', variant),
+    [theme, state, fieldConfig.multiline, type, variant],
   );
   const iconColor = iconColorFor(theme, state);
 
+  const fieldMotion = useFieldMotion({
+    enabled: motion,
+    isFocused,
+    hasError: Boolean(hasError || resolvedError),
+    isSuccess: Boolean(isSuccess || successText),
+    duration: theme.animation.duration,
+  });
+
+  const isFloating = variant === 'floating';
+  const floatUp = isFocused || currentValue.length > 0;
+  const floatAnim = useRef(new Animated.Value(floatUp ? 1 : 0)).current;
+
+  useEffect(() => {
+    if (!isFloating) return;
+    Animated.timing(floatAnim, {
+      toValue: floatUp ? 1 : 0,
+      duration: theme.animation.duration,
+      useNativeDriver: false,
+    }).start();
+  }, [floatAnim, floatUp, isFloating, theme.animation.duration]);
+
   const runValidation = useCallback(
     (nextValue: string) => {
       const result = runRules(nextValue, effectiveRules);
@@ -124,17 +159,34 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
     [type, maxLength, isControlled, onChangeText, validateOnChange, runValidation],
   );
 
+  const blurHideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const handleFocus = useCallback(() => {
+    if (blurHideTimer.current) {
+      clearTimeout(blurHideTimer.current);
+      blurHideTimer.current = null;
+    }
     setIsFocused(true);
     onFocus?.();
   }, [onFocus]);
 
   const handleBlur = useCallback(() => {
-    setIsFocused(false);
+    // Delay hiding suggestion chips so a chip press can register first
+    blurHideTimer.current = setTimeout(() => {
+      setIsFocused(false);
+      blurHideTimer.current = null;
+    }, 180);
     runValidation(currentValue);
     onBlur?.();
   }, [runValidation, currentValue, onBlur]);
 
+  useEffect(
+    () => () => {
+      if (blurHideTimer.current) clearTimeout(blurHideTimer.current);
+    },
+    [],
+  );
+
   const handleClear = useCallback(() => {
     if (!isControlled) setInternalValue('');
     onChangeText?.('');
@@ -144,11 +196,12 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
   const isClearable = clearable ?? type === 'search';
   const showClearButton = isClearable && currentValue.length > 0 && !disabled && !readOnly && !loading;
 
-  const resolvedLeftIcon = leftIcon ?? (type === 'search' ? 'search' : undefined);
-  let resolvedRightIcon = rightIcon;
+  const resolvedLeftIcon = leftIcon === null ? undefined : leftIcon !== undefined ? leftIcon : DEFAULT_ICONS[type];
+  let resolvedRightIcon: FieldFlowInputProps['rightIcon'] | undefined =
+    rightIcon === null ? undefined : rightIcon;
   let rightIconPress = onRightIconPress;
 
-  if (!resolvedRightIcon) {
+  if (rightIcon === undefined) {
     if (loading) {
       resolvedRightIcon = 'spinner';
     } else if (type === 'password') {
@@ -164,68 +217,179 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
     }
   }
 
+  const floatingLabelStyle = {
+    top: floatAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [
+        theme.spacing.paddingVertical + (theme.typography.fontSize - theme.typography.labelFontSize) / 2 + 2,
+        -theme.typography.labelFontSize / 2 - 2,
+      ],
+    }),
+    fontSize: floatAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [theme.typography.fontSize, theme.typography.labelFontSize],
+    }),
+    color: labelColorFor(theme, state),
+    left: theme.spacing.paddingHorizontal + (resolvedLeftIcon ? iconSize + theme.spacing.gap : 0),
+  };
+
+  const showExternalLabel = Boolean(label) && !isFloating;
+
+  const affordanceConfig = useMemo(() => {
+    if (!suggestions) return null;
+    if (suggestions === true) {
+      const kind = affordanceKindFromFieldType(type);
+      return kind ? { kind, chips: undefined as undefined } : null;
+    }
+    if (typeof suggestions === 'string') {
+      return { kind: suggestions as FieldFlowAffordanceKind, chips: undefined as undefined };
+    }
+    return { kind: 'custom' as FieldFlowAffordanceKind, chips: suggestions };
+  }, [suggestions, type]);
+
+  const showAffordance =
+    Boolean(affordanceConfig) &&
+    !disabled &&
+    !readOnly &&
+    (suggestionsAlwaysVisible || isFocused);
+
+  const renderAffix = (affix: string | React.ReactNode | undefined, side: 'left' | 'right') => {
+    if (affix == null || affix === false) return null;
+    if (typeof affix === 'string') {
+      return (
+        <Text
+          style={[
+            styles.affixText,
+            side === 'left' ? styles.iconSlotLeft : styles.iconSlotRight,
+          ]}
+          numberOfLines={1}
+        >
+          {affix}
+        </Text>
+      );
+    }
+    return <View style={side === 'left' ? styles.iconSlotLeft : styles.iconSlotRight}>{affix}</View>;
+  };
+
   return (
     <View style={[styles.wrapper, containerStyle]} testID={testID}>
-      {label ? (
+      {showExternalLabel ? (
         <Text style={[styles.label, labelStyle]}>
           {label}
           {required ? ' *' : ''}
         </Text>
       ) : null}
 
-      <View style={styles.inputContainer}>
-        {resolvedLeftIcon ? (
-          <Pressable
-            onPress={onLeftIconPress}
-            disabled={!onLeftIconPress}
-            style={[styles.iconSlot, styles.iconSlotLeft]}
-            hitSlop={8}
-          >
-            {renderIconNode(resolvedLeftIcon, iconColor)}
-          </Pressable>
-        ) : null}
-
-        <TextInput
-          ref={innerRef}
+      <Animated.View style={fieldMotion.containerStyle}>
+        <View style={[styles.inputContainer, inputContainerStyle]}>
+          {motion ? (
+            <Animated.View
+              pointerEvents="none"
+              style={[
+                styles.focusGlow,
+                {
+                  opacity: fieldMotion.glowOpacity.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, 0.22],
+                  }),
+                  borderColor: theme.colors.borderFocused,
+                  borderRadius: theme.spacing.borderRadius + 2,
+                },
+              ]}
+            />
+          ) : null}
+
+          {isFloating && label ? (
+            <Animated.Text style={[styles.floatingLabel, floatingLabelStyle, labelStyle]} pointerEvents="none">
+              {label}
+              {required ? ' *' : ''}
+            </Animated.Text>
+          ) : null}
+
+          {resolvedLeftIcon ? (
+            <Pressable
+              onPress={onLeftIconPress}
+              disabled={!onLeftIconPress}
+              style={[styles.iconSlot, styles.iconSlotLeft]}
+              hitSlop={8}
+              accessibilityRole={onLeftIconPress ? 'button' : undefined}
+            >
+              {renderFieldFlowIcon(resolvedLeftIcon, iconColor, iconSize)}
+            </Pressable>
+          ) : null}
+
+          {renderAffix(prefix, 'left')}
+
+          <TextInput
+            ref={innerRef}
+            value={currentValue}
+            onChangeText={handleChangeText}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onSubmitEditing={onSubmitEditing}
+            editable={!disabled && !readOnly && !loading}
+            placeholder={isFloating ? (floatUp ? placeholder : undefined) : placeholder}
+            placeholderTextColor={theme.colors.placeholder}
+            keyboardType={fieldConfig.keyboardType}
+            secureTextEntry={fieldConfig.secureTextEntry && !showPassword}
+            autoCapitalize={fieldConfig.autoCapitalize}
+            autoCorrect={fieldConfig.autoCorrect}
+            multiline={fieldConfig.multiline && type !== 'chat'}
+            maxLength={maxLength}
+            returnKeyType={fieldConfig.multiline ? 'default' : 'done'}
+            style={[styles.input, inputStyle]}
+            {...rest}
+          />
+
+          {renderAffix(suffix, 'right')}
+
+          {resolvedRightIcon ? (
+            <Animated.View style={{ transform: [{ scale: fieldMotion.successScale }] }}>
+              <Pressable
+                onPress={rightIconPress}
+                disabled={!rightIconPress}
+                style={[styles.iconSlot, styles.iconSlotRight]}
+                hitSlop={8}
+                accessibilityRole={rightIconPress ? 'button' : undefined}
+              >
+                {renderFieldFlowIcon(resolvedRightIcon, iconColor, iconSize)}
+              </Pressable>
+            </Animated.View>
+          ) : null}
+        </View>
+      </Animated.View>
+
+      {showAffordance && affordanceConfig ? (
+        <FieldFlowAffordance
+          kind={affordanceConfig.kind}
+          chips={affordanceConfig.chips}
           value={currentValue}
-          onChangeText={handleChangeText}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onSubmitEditing={onSubmitEditing}
-          editable={!disabled && !readOnly && !loading}
-          placeholderTextColor={theme.colors.placeholder}
-          keyboardType={fieldConfig.keyboardType}
-          secureTextEntry={fieldConfig.secureTextEntry && !showPassword}
-          autoCapitalize={fieldConfig.autoCapitalize}
-          autoCorrect={fieldConfig.autoCorrect}
-          multiline={fieldConfig.multiline && type !== 'chat'}
-          maxLength={maxLength}
-          returnKeyType={fieldConfig.multiline ? 'default' : 'done'}
-          style={[styles.input, inputStyle]}
-          {...rest}
+          onSelect={next => {
+            handleChangeText(next);
+            innerRef.current?.focus();
+          }}
+          theme={themeOverride}
         />
+      ) : null}
 
-        {resolvedRightIcon ? (
-          <Pressable
-            onPress={rightIconPress}
-            disabled={!rightIconPress}
-            style={[styles.iconSlot, styles.iconSlotRight]}
-            hitSlop={8}
-          >
-            {renderIconNode(resolvedRightIcon, iconColor)}
-          </Pressable>
-        ) : null}
-      </View>
+      {type === 'password' && showStrength ? (
+        <FieldFlowPasswordStrength
+          password={currentValue}
+          showRules={typeof showStrength === 'object' ? showStrength.showRules : true}
+          rules={typeof showStrength === 'object' ? showStrength.rules : undefined}
+          theme={themeOverride}
+        />
+      ) : null}
 
       {(helperText || resolvedError || successText || (showCharacterCount && maxLength)) && (
-        <View style={styles.footerRow}>
+        <Animated.View style={[styles.footerRow, { opacity: fieldMotion.messageOpacity }]}>
           <View style={{ flex: 1 }}>
             {resolvedError ? (
-              <Text style={styles.errorText}>{resolvedError}</Text>
+              <Text style={[styles.errorText, errorStyle, helperStyle]}>{resolvedError}</Text>
             ) : successText ? (
-              <Text style={styles.successText}>{successText}</Text>
+              <Text style={[styles.successText, helperStyle]}>{successText}</Text>
             ) : helperText ? (
-              <Text style={styles.helperText}>{helperText}</Text>
+              <Text style={[styles.helperText, helperStyle]}>{helperText}</Text>
             ) : null}
           </View>
           {showCharacterCount && maxLength ? (
@@ -233,7 +397,7 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
               {currentValue.length}/{maxLength}
             </Text>
           ) : null}
-        </View>
+        </Animated.View>
       )}
     </View>
   );