@3fn/core 14.1.0 → 15.0.0

package/src/components/core/Input-Text-Password/stateManagement.ts

@@ -1,244 +0,0 @@
-/**
- * Input-Text-Password State Management
- * 
- * Extends Input-Text-Base state management with password-specific functionality.
- * Handles password visibility toggle and validation on blur.
- * 
- * Stemma System: Form Inputs Family
- * Component Type: Semantic (inherits from Input-Text-Base)
- * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-Password
- * 
- * State Machine (extends Input-Text-Base):
- * - All Input-Text-Base states apply
- * - Password visibility toggles between masked and visible
- * - Password validation triggers on blur
- * - Error state set when password doesn't meet requirements
- * 
- * Behavioral Contracts:
- * - provides_secure_input: Masks password input by default
- * - supports_password_toggle: Show/hide password functionality
- * - provides_password_autocomplete: Enables browser password autofill
- * - inherits_all_input_text_base_contracts: All base contracts apply
- * 
- * Requirements: R4.4
- */
-
-import { 
-  InputTextPasswordProps, 
-  InputTextPasswordState, 
-  PasswordRequirements,
-  PasswordValidationDetails 
-} from './types';
-import { 
-  validatePassword, 
-  createDefaultValidationDetails,
-  DEFAULT_INVALID_PASSWORD_MESSAGE 
-} from './validation';
-import {
-  createInitialState as createBaseInitialState,
-  handleFocus as handleBaseFocus,
-  handleBlur as handleBaseBlur,
-  handleValueChange as handleBaseValueChange
-} from '../Input-Text-Base/stateManagement';
-
-/**
- * Create Initial State for Input-Text-Password
- * 
- * Creates the initial component state based on props.
- * Extends Input-Text-Base initial state with password-specific fields.
- * 
- * @param props - Component props
- * @returns Initial state
- */
-export function createInitialState(props: InputTextPasswordProps): InputTextPasswordState {
-  const autocomplete = props.isNewPassword ? 'new-password' : 'current-password';
-  const type = props.showPassword ? 'text' : 'password';
-  
-  const baseState = createBaseInitialState({
-    ...props,
-    type,
-    autocomplete
-  });
-  
-  return {
-    ...baseState,
-    isPasswordVisible: props.showPassword || false,
-    isPasswordValid: true, // Assume valid until validated
-    hasBeenValidated: false,
-    validationDetails: createDefaultValidationDetails()
-  };
-}
-
-/**
- * Handle Focus Event
- * 
- * Updates state when input receives focus.
- * Delegates to Input-Text-Base focus handler.
- * 
- * @param currentState - Current component state
- * @returns Updated state
- */
-export function handleFocus(currentState: InputTextPasswordState): InputTextPasswordState {
-  const baseState = handleBaseFocus(currentState);
-  
-  return {
-    ...currentState,
-    ...baseState
-  };
-}
-
-/**
- * Handle Blur Event with Password Validation
- * 
- * Updates state when input loses focus.
- * Triggers password validation on blur.
- * 
- * @param currentState - Current component state
- * @param value - Current input value
- * @param requirements - Password requirements configuration
- * @param customValidator - Optional custom validation function
- * @param invalidPasswordMessage - Optional custom error message
- * @returns Updated state with validation result
- */
-export function handleBlur(
-  currentState: InputTextPasswordState,
-  value: string,
-  requirements: PasswordRequirements = {},
-  customValidator?: (password: string) => boolean,
-  invalidPasswordMessage?: string
-): InputTextPasswordState {
-  const baseState = handleBaseBlur(currentState);
-  
-  // Validate password on blur
-  const validationResult = validatePassword(
-    value, 
-    requirements, 
-    customValidator, 
-    invalidPasswordMessage
-  );
-  
-  return {
-    ...currentState,
-    ...baseState,
-    isPasswordValid: validationResult.isValid,
-    hasBeenValidated: true,
-    validationDetails: validationResult.details,
-    hasError: !validationResult.isValid || currentState.hasError
-  };
-}
-
-/**
- * Handle Value Change
- * 
- * Updates state when input value changes.
- * Clears validation error when user starts typing again.
- * 
- * @param currentState - Current component state
- * @param newValue - New input value
- * @returns Updated state
- */
-export function handleValueChange(
-  currentState: InputTextPasswordState,
-  newValue: string
-): InputTextPasswordState {
-  const baseState = handleBaseValueChange(currentState, newValue);
-  
-  // Clear password validation error when user starts typing
-  // (will be re-validated on blur)
-  return {
-    ...currentState,
-    ...baseState,
-    // Keep hasBeenValidated but clear the error state while typing
-    hasError: false,
-    isPasswordValid: true,
-    validationDetails: createDefaultValidationDetails()
-  };
-}
-
-/**
- * Handle Password Visibility Toggle
- * 
- * Toggles password visibility between masked and visible.
- * 
- * @param currentState - Current component state
- * @returns Updated state with toggled visibility
- */
-export function handleToggleVisibility(
-  currentState: InputTextPasswordState
-): InputTextPasswordState {
-  return {
-    ...currentState,
-    isPasswordVisible: !currentState.isPasswordVisible
-  };
-}
-
-/**
- * Set Password Visibility
- * 
- * Sets password visibility to a specific value.
- * 
- * @param currentState - Current component state
- * @param visible - Whether password should be visible
- * @returns Updated state
- */
-export function setPasswordVisibility(
-  currentState: InputTextPasswordState,
-  visible: boolean
-): InputTextPasswordState {
-  return {
-    ...currentState,
-    isPasswordVisible: visible
-  };
-}
-
-/**
- * Get Password Error Message
- * 
- * Returns the appropriate error message based on validation state.
- * 
- * @param state - Current component state
- * @param propsErrorMessage - Error message from props (takes precedence)
- * @param invalidPasswordMessage - Custom invalid password message
- * @returns Error message to display, or undefined if no error
- */
-export function getPasswordErrorMessage(
-  state: InputTextPasswordState,
-  propsErrorMessage?: string,
-  invalidPasswordMessage?: string
-): string | undefined {
-  // Props error message takes precedence
-  if (propsErrorMessage) {
-    return propsErrorMessage;
-  }
-  
-  // Show password validation error if validated and invalid
-  if (state.hasBeenValidated && !state.isPasswordValid) {
-    return invalidPasswordMessage || DEFAULT_INVALID_PASSWORD_MESSAGE;
-  }
-  
-  return undefined;
-}
-
-/**
- * Get Input Type Based on Visibility
- * 
- * Returns 'text' if password is visible, 'password' if masked.
- * 
- * @param state - Current component state
- * @returns Input type string
- */
-export function getInputType(state: InputTextPasswordState): 'password' | 'text' {
-  return state.isPasswordVisible ? 'text' : 'password';
-}
-
-/**
- * Get Autocomplete Value
- * 
- * Returns the appropriate autocomplete value based on isNewPassword.
- * 
- * @param isNewPassword - Whether this is for a new password
- * @returns Autocomplete attribute value
- */
-export function getAutocompleteValue(isNewPassword: boolean): 'current-password' | 'new-password' {
-  return isNewPassword ? 'new-password' : 'current-password';
-}

package/src/components/core/Input-Text-Password/tokens.ts

@@ -1,32 +0,0 @@
-/**
- * Input-Text-Password Component Token References
- * 
- * Inherits all tokens from Input-Text-Base.
- * Password-specific components use the same visual tokens as the base component.
- * 
- * Stemma System: Form Inputs Family
- * Component Type: Semantic (inherits from Input-Text-Base)
- * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-Password
- * 
- * Token Inheritance:
- * Input-Text-Password inherits ALL tokens from Input-Text-Base.
- * No additional tokens are required for password-specific functionality.
- * 
- * This file re-exports Input-Text-Base tokens for consistency and
- * to allow future password-specific token additions if needed.
- */
-
-// Re-export all tokens from Input-Text-Base
-export {
-  typographyTokens,
-  colorTokens,
-  spacingTokens,
-  motionTokens,
-  borderTokens,
-  accessibilityTokens,
-  blendTokens,
-  inputTextBaseTokens
-} from '../Input-Text-Base/tokens';
-
-// Alias for semantic naming
-export { inputTextBaseTokens as inputTextPasswordTokens } from '../Input-Text-Base/tokens';

package/src/components/core/Input-Text-Password/types.ts

@@ -1,177 +0,0 @@
-/**
- * Input-Text-Password Component Types
- * 
- * Defines the public API and internal state interfaces for the Input-Text-Password component
- * across all platforms (web, iOS, Android).
- * 
- * Stemma System: Form Inputs Family
- * Component Type: Semantic (inherits from Input-Text-Base)
- * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-Password
- */
-
-import { InputTextBaseProps, InputTextBaseState } from '../Input-Text-Base/types';
-
-/**
- * Password validation requirements configuration
- */
-export interface PasswordRequirements {
-  /** Minimum password length */
-  minLength?: number;
-  
-  /** Maximum password length */
-  maxLength?: number;
-  
-  /** Require at least one uppercase letter */
-  requireUppercase?: boolean;
-  
-  /** Require at least one lowercase letter */
-  requireLowercase?: boolean;
-  
-  /** Require at least one number */
-  requireNumber?: boolean;
-  
-  /** Require at least one special character */
-  requireSpecialChar?: boolean;
-}
-
-/**
- * Input-Text-Password Component Props
- * 
- * Extends Input-Text-Base props with password-specific functionality.
- * The type property toggles between 'password' and 'text' for visibility.
- */
-export interface InputTextPasswordProps extends Omit<InputTextBaseProps, 'type' | 'autocomplete'> {
-  /** 
-   * Input type toggles between 'password' (masked) and 'text' (visible).
-   * Controlled by showPassword prop or internal state.
-   */
-  readonly type?: 'password' | 'text';
-  
-  /** 
-   * Autocomplete type for password autofill support.
-   * Use 'current-password' for login forms, 'new-password' for registration/change.
-   */
-  readonly autocomplete?: 'current-password' | 'new-password';
-  
-  /**
-   * Whether password is currently visible.
-   * Can be controlled externally or managed internally.
-   */
-  showPassword?: boolean;
-  
-  /**
-   * Callback when password visibility is toggled.
-   * Receives the new visibility state.
-   */
-  onToggleVisibility?: (visible: boolean) => void;
-  
-  /**
-   * Whether to show the password visibility toggle button.
-   * Defaults to true.
-   */
-  showToggle?: boolean;
-  
-  /**
-   * Whether this is for a new password (registration/change).
-   * Affects autocomplete attribute.
-   */
-  isNewPassword?: boolean;
-  
-  /**
-   * Minimum password length for validation.
-   */
-  minLength?: number;
-  
-  /**
-   * Require at least one uppercase letter.
-   */
-  requireUppercase?: boolean;
-  
-  /**
-   * Require at least one lowercase letter.
-   */
-  requireLowercase?: boolean;
-  
-  /**
-   * Require at least one number.
-   */
-  requireNumber?: boolean;
-  
-  /**
-   * Require at least one special character.
-   */
-  requireSpecialChar?: boolean;
-  
-  /**
-   * Custom password validation function.
-   * If not provided, uses the default validation based on requirements.
-   * Return true if valid, false if invalid.
-   */
-  customValidator?: (password: string) => boolean;
-  
-  /**
-   * Custom error message for invalid password.
-   * If not provided, uses the default "Password does not meet requirements".
-   */
-  invalidPasswordMessage?: string;
-}
-
-/**
- * Input-Text-Password State
- * 
- * Extends Input-Text-Base state with password-specific state.
- */
-export interface InputTextPasswordState extends InputTextBaseState {
-  /** Whether the password is currently visible */
-  isPasswordVisible: boolean;
-  
-  /** Whether the password meets requirements */
-  isPasswordValid: boolean;
-  
-  /** Whether validation has been triggered (on blur) */
-  hasBeenValidated: boolean;
-  
-  /** Detailed validation results for each requirement */
-  validationDetails: PasswordValidationDetails;
-}
-
-/**
- * Password Validation Details
- * 
- * Detailed results for each password requirement.
- */
-export interface PasswordValidationDetails {
-  /** Whether minimum length is met */
-  meetsMinLength: boolean;
-  
-  /** Whether maximum length is met */
-  meetsMaxLength: boolean;
-  
-  /** Whether uppercase requirement is met */
-  hasUppercase: boolean;
-  
-  /** Whether lowercase requirement is met */
-  hasLowercase: boolean;
-  
-  /** Whether number requirement is met */
-  hasNumber: boolean;
-  
-  /** Whether special character requirement is met */
-  hasSpecialChar: boolean;
-}
-
-/**
- * Password Validation Result
- * 
- * Result of password validation including validity, error message, and details.
- */
-export interface PasswordValidationResult {
-  /** Whether the password is valid */
-  isValid: boolean;
-  
-  /** Error message if invalid, undefined if valid */
-  errorMessage?: string;
-  
-  /** Detailed validation results */
-  details: PasswordValidationDetails;
-}

package/src/components/core/Input-Text-Password/validation.ts

@@ -1,207 +0,0 @@
-/**
- * Input-Text-Password Validation
- * 
- * Password validation logic for the Input-Text-Password component.
- * Implements configurable password strength validation.
- * 
- * Stemma System: Form Inputs Family
- * Component Type: Semantic (inherits from Input-Text-Base)
- * Naming Convention: [Family]-[Type]-[Variant] = Input-Text-Password
- * 
- * Behavioral Contracts:
- * - provides_secure_input: Masks password input by default
- * - supports_password_toggle: Show/hide password functionality
- * - provides_password_autocomplete: Enables browser password autofill
- * - inherits_all_input_text_base_contracts: All base contracts apply
- * 
- * Requirements: R4.4 (Input-Text-Password secure input and toggle)
- */
-
-import { 
-  PasswordRequirements, 
-  PasswordValidationResult, 
-  PasswordValidationDetails 
-} from './types';
-
-/**
- * Default error message for invalid password.
- */
-export const DEFAULT_INVALID_PASSWORD_MESSAGE = 'Password does not meet requirements';
-
-/**
- * Regex patterns for password validation
- */
-export const PASSWORD_PATTERNS = {
-  uppercase: /[A-Z]/,
-  lowercase: /[a-z]/,
-  number: /[0-9]/,
-  specialChar: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/
-};
-
-/**
- * Create default validation details (all passing)
- */
-export function createDefaultValidationDetails(): PasswordValidationDetails {
-  return {
-    meetsMinLength: true,
-    meetsMaxLength: true,
-    hasUppercase: true,
-    hasLowercase: true,
-    hasNumber: true,
-    hasSpecialChar: true
-  };
-}
-
-/**
- * Validate password against requirements.
- * 
- * @param password - The password to validate
- * @param requirements - Password requirements configuration
- * @returns PasswordValidationDetails with results for each requirement
- * 
- * Requirements: R4.4
- */
-export function validatePasswordRequirements(
-  password: string,
-  requirements: PasswordRequirements
-): PasswordValidationDetails {
-  const {
-    minLength,
-    maxLength,
-    requireUppercase = false,
-    requireLowercase = false,
-    requireNumber = false,
-    requireSpecialChar = false
-  } = requirements;
-  
-  return {
-    meetsMinLength: minLength === undefined || password.length >= minLength,
-    meetsMaxLength: maxLength === undefined || password.length <= maxLength,
-    hasUppercase: !requireUppercase || PASSWORD_PATTERNS.uppercase.test(password),
-    hasLowercase: !requireLowercase || PASSWORD_PATTERNS.lowercase.test(password),
-    hasNumber: !requireNumber || PASSWORD_PATTERNS.number.test(password),
-    hasSpecialChar: !requireSpecialChar || PASSWORD_PATTERNS.specialChar.test(password)
-  };
-}
-
-/**
- * Check if all validation details pass.
- * 
- * @param details - Validation details to check
- * @returns true if all requirements are met
- */
-export function allRequirementsMet(details: PasswordValidationDetails): boolean {
-  return (
-    details.meetsMinLength &&
-    details.meetsMaxLength &&
-    details.hasUppercase &&
-    details.hasLowercase &&
-    details.hasNumber &&
-    details.hasSpecialChar
-  );
-}
-
-/**
- * Validate password and return a result object with validity, error message, and details.
- * 
- * @param password - The password to validate
- * @param requirements - Password requirements configuration
- * @param customValidator - Optional custom validation function
- * @param invalidPasswordMessage - Optional custom error message
- * @returns PasswordValidationResult with isValid, errorMessage, and details
- * 
- * Requirements: R4.4
- */
-export function validatePassword(
-  password: string,
-  requirements: PasswordRequirements = {},
-  customValidator?: (password: string) => boolean,
-  invalidPasswordMessage?: string
-): PasswordValidationResult {
-  // Empty strings are valid (use required prop for empty validation)
-  if (!password || password.length === 0) {
-    return { 
-      isValid: true, 
-      details: createDefaultValidationDetails() 
-    };
-  }
-  
-  // Use custom validator if provided
-  if (customValidator) {
-    const isValid = customValidator(password);
-    return {
-      isValid,
-      errorMessage: isValid ? undefined : (invalidPasswordMessage || DEFAULT_INVALID_PASSWORD_MESSAGE),
-      details: createDefaultValidationDetails() // Custom validator doesn't provide details
-    };
-  }
-  
-  // Validate against requirements
-  const details = validatePasswordRequirements(password, requirements);
-  const isValid = allRequirementsMet(details);
-  
-  return {
-    isValid,
-    errorMessage: isValid ? undefined : (invalidPasswordMessage || DEFAULT_INVALID_PASSWORD_MESSAGE),
-    details
-  };
-}
-
-/**
- * Generate a human-readable error message based on validation details.
- * 
- * @param details - Validation details
- * @param requirements - Password requirements configuration
- * @returns Human-readable error message
- */
-export function generateDetailedErrorMessage(
-  details: PasswordValidationDetails,
-  requirements: PasswordRequirements
-): string {
-  const errors: string[] = [];
-  
-  if (!details.meetsMinLength && requirements.minLength) {
-    errors.push(`at least ${requirements.minLength} characters`);
-  }
-  
-  if (!details.meetsMaxLength && requirements.maxLength) {
-    errors.push(`no more than ${requirements.maxLength} characters`);
-  }
-  
-  if (!details.hasUppercase && requirements.requireUppercase) {
-    errors.push('one uppercase letter');
-  }
-  
-  if (!details.hasLowercase && requirements.requireLowercase) {
-    errors.push('one lowercase letter');
-  }
-  
-  if (!details.hasNumber && requirements.requireNumber) {
-    errors.push('one number');
-  }
-  
-  if (!details.hasSpecialChar && requirements.requireSpecialChar) {
-    errors.push('one special character');
-  }
-  
-  if (errors.length === 0) {
-    return DEFAULT_INVALID_PASSWORD_MESSAGE;
-  }
-  
-  if (errors.length === 1) {
-    return `Password must contain ${errors[0]}`;
-  }
-  
-  const lastError = errors.pop();
-  return `Password must contain ${errors.join(', ')} and ${lastError}`;
-}
-
-/**
- * Check if password has any content (for determining if validation should run)
- * 
- * @param password - The password to check
- * @returns true if password has content
- */
-export function hasPasswordContent(password: string): boolean {
-  return password.length > 0;
-}