rn-inputforge 0.4.0 → 0.5.0

package/src/components/FieldFlowInput/FieldFlowInput.tsx

@@ -7,6 +7,13 @@ import { resolveFieldConfig, implicitRulesForType } from '../../utils/keyboardTy
 import { sanitizeNumeric, sanitizePhone, truncate } from '../../utils/formatters';
 import { runRules } from '../../validation/validators';
 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';
 
@@ -45,6 +52,12 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
     onRightIconPress,
     iconSize = 18,
     clearable,
+    suggestions,
+    suggestionsAlwaysVisible = false,
+    showStrength,
+    prefix,
+    suffix,
+    motion = true,
     maxLength,
     showCharacterCount,
     onSubmitEditing,
@@ -100,6 +113,14 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
   );
   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;
@@ -138,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?.('');
@@ -197,6 +235,42 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
 
   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}>
       {showExternalLabel ? (
@@ -206,62 +280,109 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
         </Text>
       ) : null}
 
-      <View style={[styles.inputContainer, inputContainerStyle]}>
-        {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}
-
-        <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}
-          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}
+          onSelect={next => {
+            handleChangeText(next);
+            innerRef.current?.focus();
+          }}
+          theme={themeOverride}
         />
+      ) : null}
 
-        {resolvedRightIcon ? (
-          <Pressable
-            onPress={rightIconPress}
-            disabled={!rightIconPress}
-            style={[styles.iconSlot, styles.iconSlotRight]}
-            hitSlop={8}
-            accessibilityRole={rightIconPress ? 'button' : undefined}
-          >
-            {renderFieldFlowIcon(resolvedRightIcon, iconColor, iconSize)}
-          </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, errorStyle, helperStyle]}>{resolvedError}</Text>
@@ -276,7 +397,7 @@ export const FieldFlowInput = forwardRef<TextInput, FieldFlowInputProps>(functio
               {currentValue.length}/{maxLength}
             </Text>
           ) : null}
-        </View>
+        </Animated.View>
       )}
     </View>
   );

package/src/components/FieldFlowInput/styles.ts

@@ -47,6 +47,8 @@ export function createStyles(
       fontFamily: theme.typography.fontFamily,
     },
     inputContainer: {
+      position: 'relative',
+      overflow: 'visible',
       flexDirection: 'row',
       alignItems: multiline ? 'flex-start' : 'center',
       backgroundColor: state === 'disabled'
@@ -67,6 +69,20 @@ export function createStyles(
         : theme.spacing.paddingVertical * 2 + theme.typography.fontSize + 6 + (isFloating ? 6 : 0),
       paddingTop: isFloating && !multiline ? theme.spacing.paddingVertical + 6 : undefined,
     },
+    focusGlow: {
+      position: 'absolute',
+      top: -3,
+      left: -3,
+      right: -3,
+      bottom: -3,
+      borderWidth: 3,
+    },
+    affixText: {
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.label,
+      fontFamily: theme.typography.fontFamily,
+      fontWeight: '500',
+    },
     floatingLabel: {
       position: 'absolute',
       left: theme.spacing.paddingHorizontal,

package/src/components/FieldFlowInput/types.ts

@@ -1,6 +1,9 @@
+import type React from 'react';
 import type { TextInputProps, ViewStyle, TextStyle } from 'react-native';
 import type { FieldFlowFieldType, FieldFlowRules, FieldFlowVariant, DeepPartial, FieldFlowTheme } from '../../types';
 import type { FieldFlowIconSource } from '../../icons';
+import type { FieldFlowAffordanceChip, FieldFlowAffordanceKind } from '../../utils/affordance';
+import type { PasswordStrengthRule } from '../../utils/passwordStrength';
 
 export interface FieldFlowInputProps
   extends Omit<TextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'onSubmitEditing'> {
@@ -56,6 +59,36 @@ export interface FieldFlowInputProps
   /** Shows an "x" clear button when there's text (defaults to true for `search`, false otherwise). */
   clearable?: boolean;
 
+  /**
+   * Smart suggestion chips shown while the field is focused.
+   * - `true` — infer from `type` (email → domains, phone → dial codes, number/decimal → currency)
+   * - `'email' | 'phone' | 'currency'` — force a preset
+   * - `string[]` / chip objects — fully custom list
+   */
+  suggestions?: boolean | FieldFlowAffordanceKind | FieldFlowAffordanceChip[] | string[];
+  /** Keep suggestion chips visible even when blurred. Default: false. */
+  suggestionsAlwaysVisible?: boolean;
+
+  /**
+   * Show a password strength meter under the field (only meaningful for `type="password"`).
+   * Pass `true` for defaults, or `{ showRules?: boolean; rules?: PasswordStrengthRule[] }`.
+   */
+  showStrength?: boolean | { showRules?: boolean; rules?: PasswordStrengthRule[] };
+
+  /**
+   * Text or node rendered inside the field before the value (e.g. `+92`, `$`, `https://`).
+   * Shown in addition to `leftIcon` when both are set.
+   */
+  prefix?: string | React.ReactNode;
+  /** Text or node rendered inside the field after the value (e.g. `kg`, `.com`). */
+  suffix?: string | React.ReactNode;
+
+  /**
+   * Micro-interactions: focus glow, error shake, message fade, success pop.
+   * Respects OS Reduce Motion. Default: true.
+   */
+  motion?: boolean;
+
   maxLength?: number;
   showCharacterCount?: boolean;
 

package/src/components/FieldFlowNumberStepper/FieldFlowNumberStepper.tsx

@@ -0,0 +1,156 @@
+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 FieldFlowNumberStepperProps {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  required?: boolean;
+  formatValue?: (value: number) => string;
+  /** Custom − button content. */
+  renderDecrease?: (ctx: { disabled: boolean; onPress: () => void }) => React.ReactNode;
+  /** Custom + button content. */
+  renderIncrease?: (ctx: { disabled: boolean; onPress: () => void }) => React.ReactNode;
+  /** Custom center value display. */
+  renderValue?: (value: number) => React.ReactNode;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+export function FieldFlowNumberStepper({
+  value,
+  onChange,
+  min = 0,
+  max = 99,
+  step = 1,
+  label,
+  helperText,
+  errorText,
+  disabled,
+  required,
+  formatValue,
+  renderDecrease,
+  renderIncrease,
+  renderValue,
+  containerStyle,
+  labelStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowNumberStepperProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme, Boolean(errorText), Boolean(disabled)), [theme, errorText, disabled]);
+
+  const dec = () => {
+    if (disabled) return;
+    onChange(Math.max(min, Number((value - step).toFixed(6))));
+  };
+  const inc = () => {
+    if (disabled) return;
+    onChange(Math.min(max, Number((value + step).toFixed(6))));
+  };
+
+  return (
+    <View style={[styles.wrap, containerStyle]} testID={testID}>
+      {label ? (
+        <Text style={[styles.label, labelStyle]}>
+          {label}
+          {required ? ' *' : ''}
+        </Text>
+      ) : null}
+
+      <View style={styles.row}>
+        {renderDecrease ? (
+          renderDecrease({ disabled: Boolean(disabled) || value <= min, onPress: dec })
+        ) : (
+          <Pressable
+            style={[styles.btn, value <= min && styles.btnDisabled]}
+            onPress={dec}
+            disabled={disabled || value <= min}
+            accessibilityLabel="Decrease"
+          >
+            {renderFieldFlowIcon('minus', theme.colors.text, 16)}
+          </Pressable>
+        )}
+        {renderValue ? (
+          renderValue(value)
+        ) : (
+          <Text style={styles.value}>{formatValue ? formatValue(value) : String(value)}</Text>
+        )}
+        {renderIncrease ? (
+          renderIncrease({ disabled: Boolean(disabled) || value >= max, onPress: inc })
+        ) : (
+          <Pressable
+            style={[styles.btn, value >= max && styles.btnDisabled]}
+            onPress={inc}
+            disabled={disabled || value >= max}
+            accessibilityLabel="Increase"
+          >
+            {renderFieldFlowIcon('plus', theme.colors.text, 16)}
+          </Pressable>
+        )}
+      </View>
+
+      {errorText ? (
+        <Text style={styles.error}>{errorText}</Text>
+      ) : helperText ? (
+        <Text style={styles.helper}>{helperText}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme, hasError: boolean, disabled: boolean) {
+  return StyleSheet.create({
+    wrap: { marginBottom: theme.spacing.gap * 2, opacity: disabled ? 0.6 : 1 },
+    label: {
+      fontSize: theme.typography.labelFontSize,
+      marginBottom: theme.spacing.gap,
+      color: hasError ? theme.colors.error : theme.colors.label,
+      fontWeight: '500',
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      borderWidth: hasError ? theme.spacing.borderWidthFocused : theme.spacing.borderWidth,
+      borderColor: hasError ? theme.colors.borderError : theme.colors.border,
+      borderRadius: theme.spacing.borderRadius,
+      overflow: 'hidden',
+      backgroundColor: theme.colors.background,
+    },
+    btn: {
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.backgroundDisabled,
+    },
+    btnDisabled: { opacity: 0.4 },
+    value: {
+      minWidth: 56,
+      textAlign: 'center',
+      fontSize: theme.typography.fontSize,
+      fontWeight: '600',
+      color: theme.colors.text,
+      paddingHorizontal: 8,
+    },
+    helper: { marginTop: 6, fontSize: theme.typography.helperFontSize, color: theme.colors.label },
+    error: { marginTop: 6, fontSize: theme.typography.helperFontSize, color: theme.colors.error },
+  });
+}

package/src/components/FieldFlowNumberStepper/index.ts

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

package/src/components/FieldFlowPasswordStrength/FieldFlowPasswordStrength.tsx

@@ -0,0 +1,148 @@
+import React, { useMemo } from 'react';
+import { 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';
+import {
+  DEFAULT_PASSWORD_RULES,
+  evaluatePasswordStrength,
+  PASSWORD_STRENGTH_COLORS,
+  type PasswordStrengthLevel,
+  type PasswordStrengthRule,
+} from '../../utils/passwordStrength';
+
+export interface FieldFlowPasswordStrengthProps {
+  password: string;
+  /** Override the default rule checklist. */
+  rules?: PasswordStrengthRule[];
+  /** Show the checklist under the bar. Default: true. */
+  showRules?: boolean;
+  /** Hide entirely when password is empty. Default: true. */
+  hideWhenEmpty?: boolean;
+  /** Override bar colors per level. */
+  colors?: Partial<Record<Exclude<PasswordStrengthLevel, 'empty'>, string>>;
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  ruleStyle?: TextStyle;
+  theme?: DeepPartial<FieldFlowTheme>;
+  testID?: string;
+}
+
+/**
+ * Password strength meter + optional rule checklist.
+ * Pair with `FieldFlowInput type="password"` or use via `showStrength` on the input.
+ */
+export function FieldFlowPasswordStrength({
+  password,
+  rules,
+  showRules = true,
+  hideWhenEmpty = true,
+  colors,
+  containerStyle,
+  labelStyle,
+  ruleStyle,
+  theme: themeOverride,
+  testID,
+}: FieldFlowPasswordStrengthProps) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(
+    () => (themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme),
+    [contextTheme, themeOverride],
+  );
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const result = useMemo(() => evaluatePasswordStrength(password, rules), [password, rules]);
+
+  if (hideWhenEmpty && result.level === 'empty') return null;
+
+  const barColor =
+    result.level === 'empty'
+      ? theme.colors.border
+      : colors?.[result.level] ?? PASSWORD_STRENGTH_COLORS[result.level];
+
+  return (
+    <View style={[styles.wrapper, containerStyle]} testID={testID} accessibilityRole="summary">
+      <View style={styles.header}>
+        <View style={styles.track}>
+          <View style={[styles.fill, { width: `${Math.round(result.progress * 100)}%`, backgroundColor: barColor }]} />
+        </View>
+        {result.label ? (
+          <Text style={[styles.levelLabel, { color: barColor }, labelStyle]}>{result.label}</Text>
+        ) : null}
+      </View>
+
+      {showRules ? (
+        <View style={styles.rules}>
+          {(rules ?? DEFAULT_PASSWORD_RULES).map(rule => {
+            const ok = result.passed.some(p => p.id === rule.id);
+            return (
+              <View key={rule.id} style={styles.ruleRow}>
+                {renderFieldFlowIcon(ok ? 'check' : 'clear', ok ? theme.colors.success : theme.colors.placeholder, 12)}
+                <Text
+                  style={[
+                    styles.ruleText,
+                    ok ? styles.rulePassed : styles.ruleFailed,
+                    ruleStyle,
+                  ]}
+                >
+                  {rule.label}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function createStyles(theme: FieldFlowTheme) {
+  return StyleSheet.create({
+    wrapper: {
+      marginTop: theme.spacing.gap,
+      marginBottom: theme.spacing.gap,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.spacing.gap,
+    },
+    track: {
+      flex: 1,
+      height: 6,
+      borderRadius: 3,
+      backgroundColor: theme.colors.border,
+      overflow: 'hidden',
+    },
+    fill: {
+      height: '100%',
+      borderRadius: 3,
+    },
+    levelLabel: {
+      fontSize: theme.typography.helperFontSize,
+      fontWeight: '600',
+      minWidth: 48,
+      textAlign: 'right',
+      fontFamily: theme.typography.fontFamily,
+    },
+    rules: {
+      marginTop: theme.spacing.gap,
+      gap: 4,
+    },
+    ruleRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+    },
+    ruleText: {
+      fontSize: theme.typography.helperFontSize,
+      fontFamily: theme.typography.fontFamily,
+    },
+    rulePassed: {
+      color: theme.colors.success,
+    },
+    ruleFailed: {
+      color: theme.colors.placeholder,
+    },
+  });
+}

package/src/components/FieldFlowPasswordStrength/index.ts

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