flikkui 0.1.0-beta.8 → 0.2.0-beta.1

package/dist/components/forms/Input/Input.theme.js

@@ -4,51 +4,62 @@ import { formsBaseTheme } from '../forms.theme.js';
  * Default theme for the Input component - Clean & Organized
  * Uses flat structure with design tokens
  */
-var inputTheme = {
+const inputTheme = {
     // Base container styles
     wrapperStyle: formsBaseTheme.wrapperStyle,
     // Input group styles with design tokens
     inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
     // Base input styles - extends common form control with design tokens
-    baseStyle: "".concat(formsBaseTheme.controlBaseStyle, " py-2 px-3"),
-    // Size variants - organized by component size
+    baseStyle: `${formsBaseTheme.controlBaseStyle} py-2 px-3`,
+    // Size variants - composed from atomic tokens
     sizes: {
-        sm: formsBaseTheme.sizes.sm.base,
-        md: formsBaseTheme.sizes.md.base,
-        lg: formsBaseTheme.sizes.lg.base,
+        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
+        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.height}`,
+        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
     },
     // State variants using design tokens
     states: formsBaseTheme.states,
     // Helper text styles with state handling
     helperText: formsBaseTheme.helperText,
     // Icon positioning styles
-    leftIconStyle: formsBaseTheme.iconStyles.left,
-    rightIconStyle: formsBaseTheme.iconStyles.right,
+    iconStartStyle: formsBaseTheme.iconStyles.left,
+    iconEndStyle: formsBaseTheme.iconStyles.right,
     // Icon padding configuration
     iconPadding: formsBaseTheme.iconStyles.padding,
-    // Addon styles - prefix/suffix content
-    addonStyle: "flex items-center px-3 text-text-muted shrink-0",
-    addonPrefixStyle: "pr-0",
-    addonSuffixStyle: "pl-0",
+    // Content styles - prefix/suffix content with size-aware font sizes
+    contentStyle: {
+        sm: `flex items-center px-3 ${formsBaseTheme.sizes.sm.text} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`,
+        md: `flex items-center px-3 ${formsBaseTheme.sizes.md.text} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`,
+        lg: `flex items-center px-3 ${formsBaseTheme.sizes.lg.text} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`,
+    },
+    contentStartStyle: "pr-0",
+    contentEndStyle: "pl-0",
     // Keyboard shortcut display
-    keyboardShortcutStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted z-10",
+    keyboardShortcutStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-text-muted)] z-10 " +
+        "dark:text-[var(--color-neutral-500)]",
     // Password toggle button with hover states
-    passwordToggleStyle: "absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer text-text-muted hover:text-text-primary transition-colors z-10",
+    passwordToggleStyle: "absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer " +
+        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors z-10 " +
+        "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)]",
     // Number input controls
     numberButtonsContainerStyle: "absolute inset-y-0 right-0 flex flex-row items-center pr-2 z-10 gap-1",
-    numberButtonStyle: "bg-surface-elevated flex items-center justify-center text-text-muted hover:bg-surface-hover hover:text-text-primary cursor-pointer size-6 rounded-sm transition-colors",
+    numberButtonStyle: "bg-[var(--color-background-secondary)] flex items-center justify-center " +
+        "text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] " +
+        "hover:text-[var(--color-text-primary)] cursor-pointer size-6 rounded-sm transition-colors " +
+        "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-500)] " +
+        "dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)]",
     // Type-specific styles organized by input type
     typeStyles: {
         password: {
-            toggleIconActive: "size-5 text-text-primary",
-            toggleIconInactive: "size-5 text-text-muted",
+            toggleIconActive: "size-5 text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
+            toggleIconInactive: "size-5 text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
         },
         search: {
-            iconStyle: "text-text-muted",
+            iconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
         },
         number: {
-            incrementIconStyle: "text-text-muted",
-            decrementIconStyle: "text-text-muted",
+            incrementIconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
+            decrementIconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
         },
     },
     // Password strength indicator with design tokens
@@ -57,26 +68,26 @@ var inputTheme = {
         labelStyle: "text-xs font-semibold mr-1",
         dotStyle: "size-1.5 rounded-full",
         dotActiveStyle: "bg-current",
-        dotInactiveStyle: "bg-border",
+        dotInactiveStyle: "bg-[var(--color-border)] dark:bg-[var(--color-neutral-700)]",
         strengthStyles: {
             weak: {
                 label: "Weak",
-                color: "text-[var(--color-danger)]",
+                color: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
             },
             moderate: {
                 label: "Moderate",
-                color: "text-[var(--color-warning)]",
+                color: "text-[var(--color-warning)] dark:text-[var(--color-warning-400)]",
             },
             strong: {
                 label: "Strong",
-                color: "text-[var(--color-success)]",
+                color: "text-[var(--color-success)] dark:text-[var(--color-success-400)]",
             },
             "very-strong": {
                 label: "Very Strong",
-                color: "text-[var(--color-success)]",
+                color: "text-[var(--color-success)] dark:text-[var(--color-success-400)]",
             },
         },
     },
 };
 
-export { inputTheme as default, inputTheme };
+export { inputTheme };

package/dist/components/forms/Input/Input.types.d.ts

@@ -5,8 +5,8 @@ import React from 'react';
  * @property {InputState} state - The state of the input (default, disabled, invalid)
  * @property {string} label - Optional label text for the input
  * @property {string} helperText - Optional helper text displayed below the input
- * @property {React.ReactNode} leftIcon - Icon to display before the input
- * @property {React.ReactNode} rightIcon - Icon to display after the input
+ * @property {React.ReactNode} iconStart - Icon to display before the input
+ * @property {React.ReactNode} iconEnd - Icon to display after the input
  * @property {React.ReactNode} addonPrefix - Content to display as a prefix
  * @property {React.ReactNode} addonSuffix - Content to display as a suffix
  * @property {React.ReactNode} keyboardShortcut - Keyboard shortcut to display on the right side
@@ -33,13 +33,21 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     label?: string;
     /** Optional helper text displayed below the input */
     helperText?: string;
-    /** Icon to display before the input */
-    leftIcon?: React.ReactNode;
-    /** Icon to display after the input */
-    rightIcon?: React.ReactNode;
-    /** Content to display as a prefix */
+    /** Icon to display before the input (small decorative) */
+    iconStart?: React.ReactNode;
+    /** Icon to display after the input (small decorative) */
+    iconEnd?: React.ReactNode;
+    /** Content to display before the input (larger structural) */
+    contentStart?: React.ReactNode;
+    /** Content to display after the input (larger structural) */
+    contentEnd?: React.ReactNode;
+    /**
+     * @deprecated Use contentStart instead. Will be removed in v0.2.0
+     */
     addonPrefix?: React.ReactNode;
-    /** Content to display as a suffix */
+    /**
+     * @deprecated Use contentEnd instead. Will be removed in v0.2.0
+     */
     addonSuffix?: React.ReactNode;
     /** Keyboard shortcut to display on the right side */
     keyboardShortcut?: React.ReactNode;
@@ -99,15 +107,15 @@ export interface InputTheme {
     sizes: Record<InputSize, string>;
     states: Record<InputState, string>;
     helperText: string;
-    leftIconStyle: string;
-    rightIconStyle: string;
+    iconStartStyle: string;
+    iconEndStyle: string;
     iconPadding: {
         left: string;
         right: string;
     };
-    addonStyle: string;
-    addonPrefixStyle: string;
-    addonSuffixStyle: string;
+    contentStyle: Record<InputSize, string>;
+    contentStartStyle: string;
+    contentEndStyle: string;
     keyboardShortcutStyle: string;
     passwordToggleStyle: string;
     numberButtonsContainerStyle: string;

package/dist/components/forms/Input/inputMasks.d.ts

@@ -32,6 +32,21 @@ export declare const formatPhoneNumber: (value: string) => string;
  * @returns The formatted SSN
  */
 export declare const formatSSN: (value: string) => string;
+/**
+ * Format date input as MM/DD/YYYY, DD/MM/YYYY, or YYYY/MM/DD
+ * WITH REAL-TIME VALIDATION - prevents invalid month/day values as user types
+ * @param value The raw input value
+ * @param format The date format to use (default: MM/DD/YYYY)
+ * @returns The formatted date string (only valid digits are kept)
+ */
+export declare const formatDateInput: (value: string, format?: "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY/MM/DD") => string;
+/**
+ * Validate if a date string is a valid date
+ * @param value The formatted date string
+ * @param format The date format being used
+ * @returns Whether the date is valid
+ */
+export declare const isValidDateInput: (value: string, format?: "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY/MM/DD") => boolean;
 /**
  * Format currency input (adds commas for thousands and limits decimal places)
  * @param value The raw input value

package/dist/components/forms/Input/inputMasks.js

@@ -7,11 +7,11 @@
  * @param value The raw input value
  * @returns The formatted credit card number
  */
-var formatCreditCard = function (value) {
+const formatCreditCard = (value) => {
     // Remove all non-digit characters
-    var digitsOnly = value.replace(/\D/g, '');
+    const digitsOnly = value.replace(/\D/g, '');
     // Add hyphen after every 4 digits
-    var formatted = digitsOnly.replace(/(\d{4})(?=\d)/g, '$1-');
+    const formatted = digitsOnly.replace(/(\d{4})(?=\d)/g, '$1-');
     // Limit to 16 digits + hyphens (19 chars total)
     return formatted.slice(0, 19);
 };
@@ -20,24 +20,24 @@ var formatCreditCard = function (value) {
  * @param value The raw input value
  * @returns The formatted expiry date
  */
-var formatExpiryDate = function (value) {
+const formatExpiryDate = (value) => {
     // Remove all non-digit characters
-    var digitsOnly = value.replace(/\D/g, '');
+    const digitsOnly = value.replace(/\D/g, '');
     // Format based on length
     if (digitsOnly.length <= 2) {
         return digitsOnly;
     }
     // Add slash after month
-    return "".concat(digitsOnly.slice(0, 2), "/").concat(digitsOnly.slice(2, 4));
+    return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2, 4)}`;
 };
 /**
  * Validate month (01-12) in expiry date
  * @param value The current input value
  * @returns Whether the month is valid
  */
-var isValidMonth = function (value) {
+const isValidMonth = (value) => {
     // Extract month portion
-    var month = parseInt(value.slice(0, 2), 10);
+    const month = parseInt(value.slice(0, 2), 10);
     // Check if it's a valid month (1-12)
     return month >= 1 && month <= 12;
 };
@@ -46,18 +46,18 @@ var isValidMonth = function (value) {
  * @param value The raw input value
  * @returns The formatted phone number
  */
-var formatPhoneNumber = function (value) {
+const formatPhoneNumber = (value) => {
     // Remove all non-digit characters
-    var digitsOnly = value.replace(/\D/g, '');
+    const digitsOnly = value.replace(/\D/g, '');
     // Format based on length
     if (digitsOnly.length <= 3) {
-        return "(".concat(digitsOnly);
+        return `(${digitsOnly}`;
     }
     else if (digitsOnly.length <= 6) {
-        return "(".concat(digitsOnly.slice(0, 3), ") ").concat(digitsOnly.slice(3));
+        return `(${digitsOnly.slice(0, 3)}) ${digitsOnly.slice(3)}`;
     }
     else {
-        return "(".concat(digitsOnly.slice(0, 3), ") ").concat(digitsOnly.slice(3, 6), "-").concat(digitsOnly.slice(6, 10));
+        return `(${digitsOnly.slice(0, 3)}) ${digitsOnly.slice(3, 6)}-${digitsOnly.slice(6, 10)}`;
     }
 };
 /**
@@ -65,43 +65,196 @@ var formatPhoneNumber = function (value) {
  * @param value The raw input value
  * @returns The formatted SSN
  */
-var formatSSN = function (value) {
+const formatSSN = (value) => {
     // Remove all non-digit characters
-    var digitsOnly = value.replace(/\D/g, '');
+    const digitsOnly = value.replace(/\D/g, '');
     // Format based on length
     if (digitsOnly.length <= 3) {
         return digitsOnly;
     }
     else if (digitsOnly.length <= 5) {
-        return "".concat(digitsOnly.slice(0, 3), "-").concat(digitsOnly.slice(3));
+        return `${digitsOnly.slice(0, 3)}-${digitsOnly.slice(3)}`;
     }
     else {
-        return "".concat(digitsOnly.slice(0, 3), "-").concat(digitsOnly.slice(3, 5), "-").concat(digitsOnly.slice(5, 9));
+        return `${digitsOnly.slice(0, 3)}-${digitsOnly.slice(3, 5)}-${digitsOnly.slice(5, 9)}`;
     }
 };
+/**
+ * Format date input as MM/DD/YYYY, DD/MM/YYYY, or YYYY/MM/DD
+ * WITH REAL-TIME VALIDATION - prevents invalid month/day values as user types
+ * @param value The raw input value
+ * @param format The date format to use (default: MM/DD/YYYY)
+ * @returns The formatted date string (only valid digits are kept)
+ */
+const formatDateInput = (value, format = 'MM/DD/YYYY') => {
+    // Remove all non-digit characters
+    const digitsOnly = value.replace(/\D/g, '');
+    // Format based on length and format type
+    if (format === 'YYYY/MM/DD') {
+        // Year first: YYYY/MM/DD
+        // Year validation: 1900-2099 (but allow typing any 4 digits for UX)
+        if (digitsOnly.length < 4) {
+            return digitsOnly;
+        }
+        if (digitsOnly.length === 4) {
+            return `${digitsOnly}/`;
+        }
+        // Month validation (01-12)
+        if (digitsOnly.length === 5) {
+            const monthDigit = parseInt(digitsOnly[4], 10);
+            if (monthDigit > 1)
+                return digitsOnly.slice(0, 4); // First digit of month can't be > 1
+            return `${digitsOnly.slice(0, 4)}/${digitsOnly.slice(4)}`;
+        }
+        if (digitsOnly.length === 6) {
+            const month = parseInt(digitsOnly.slice(4, 6), 10);
+            if (month < 1 || month > 12)
+                return `${digitsOnly.slice(0, 4)}/${digitsOnly.slice(4, 5)}`; // Invalid month
+            return `${digitsOnly.slice(0, 4)}/${digitsOnly.slice(4)}/`;
+        }
+        // Day validation (01-31)
+        if (digitsOnly.length === 7) {
+            parseInt(digitsOnly.slice(4, 6), 10);
+            const dayDigit = parseInt(digitsOnly[6], 10);
+            if (dayDigit > 3)
+                return `${digitsOnly.slice(0, 4)}/${digitsOnly.slice(4, 6)}/`; // First digit of day can't be > 3
+            return `${digitsOnly.slice(0, 4)}/${digitsOnly.slice(4, 6)}/${digitsOnly.slice(6)}`;
+        }
+        if (digitsOnly.length >= 8) {
+            parseInt(digitsOnly.slice(4, 6), 10);
+            const day = parseInt(digitsOnly.slice(6, 8), 10);
+            if (day < 1 || day > 31)
+                return `${digitsOnly.slice(0, 4)}/${digitsOnly.slice(4, 6)}/${digitsOnly.slice(6, 7)}`; // Invalid day
+            return `${digitsOnly.slice(0, 4)}/${digitsOnly.slice(4, 6)}/${digitsOnly.slice(6, 8)}`;
+        }
+        return digitsOnly;
+    }
+    else {
+        // Month/Day first: MM/DD/YYYY or DD/MM/YYYY
+        if (digitsOnly.length === 0)
+            return '';
+        // First part validation (month or day)
+        if (digitsOnly.length === 1) {
+            const firstDigit = parseInt(digitsOnly[0], 10);
+            // First digit of month can't be > 1, first digit of day can't be > 3
+            const maxFirstDigit = format === 'MM/DD/YYYY' ? 1 : 3;
+            if (firstDigit > maxFirstDigit)
+                return ''; // Reject invalid first digit
+            return digitsOnly;
+        }
+        if (digitsOnly.length === 2) {
+            const firstPart = parseInt(digitsOnly.slice(0, 2), 10);
+            if (format === 'MM/DD/YYYY') {
+                // Validate month (01-12)
+                if (firstPart < 1 || firstPart > 12)
+                    return digitsOnly.slice(0, 1); // Reject 2nd digit
+            }
+            else {
+                // Validate day (01-31)
+                if (firstPart < 1 || firstPart > 31)
+                    return digitsOnly.slice(0, 1); // Reject 2nd digit
+            }
+            return `${digitsOnly}/`;
+        }
+        // Second part validation (day or month)
+        if (digitsOnly.length === 3) {
+            parseInt(digitsOnly.slice(0, 2), 10);
+            const secondDigit = parseInt(digitsOnly[2], 10);
+            // Second part: if MM/DD, second is day (max first digit 3); if DD/MM, second is month (max first digit 1)
+            const maxSecondDigit = format === 'MM/DD/YYYY' ? 3 : 1;
+            if (secondDigit > maxSecondDigit)
+                return `${digitsOnly.slice(0, 2)}/`; // Reject invalid digit
+            return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2)}`;
+        }
+        if (digitsOnly.length === 4) {
+            parseInt(digitsOnly.slice(0, 2), 10);
+            const secondPart = parseInt(digitsOnly.slice(2, 4), 10);
+            if (format === 'MM/DD/YYYY') {
+                // Second part is day (01-31)
+                if (secondPart < 1 || secondPart > 31)
+                    return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2, 3)}`; // Reject 4th digit
+            }
+            else {
+                // Second part is month (01-12)
+                if (secondPart < 1 || secondPart > 12)
+                    return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2, 3)}`; // Reject 4th digit
+            }
+            return `${digitsOnly.slice(0, 2)}/${digitsOnly.slice(2)}/`;
+        }
+        // Year part (no validation needed during typing)
+        if (digitsOnly.length >= 5) {
+            const firstPart = digitsOnly.slice(0, 2);
+            const secondPart = digitsOnly.slice(2, 4);
+            const yearPart = digitsOnly.slice(4, 8);
+            return `${firstPart}/${secondPart}/${yearPart}`;
+        }
+        return digitsOnly;
+    }
+};
+/**
+ * Validate if a date string is a valid date
+ * @param value The formatted date string
+ * @param format The date format being used
+ * @returns Whether the date is valid
+ */
+const isValidDateInput = (value, format = 'MM/DD/YYYY') => {
+    const parts = value.split('/');
+    if (parts.length !== 3)
+        return false;
+    let month, day, year;
+    switch (format) {
+        case 'MM/DD/YYYY':
+            month = parseInt(parts[0], 10);
+            day = parseInt(parts[1], 10);
+            year = parseInt(parts[2], 10);
+            break;
+        case 'DD/MM/YYYY':
+            day = parseInt(parts[0], 10);
+            month = parseInt(parts[1], 10);
+            year = parseInt(parts[2], 10);
+            break;
+        case 'YYYY/MM/DD':
+            year = parseInt(parts[0], 10);
+            month = parseInt(parts[1], 10);
+            day = parseInt(parts[2], 10);
+            break;
+        default:
+            return false;
+    }
+    if (isNaN(month) || isNaN(day) || isNaN(year))
+        return false;
+    if (month < 1 || month > 12)
+        return false;
+    if (day < 1 || day > 31)
+        return false;
+    if (year < 1900 || year > 2099)
+        return false;
+    // Check if day is valid for the month
+    const date = new Date(year, month - 1, day);
+    return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
+};
 /**
  * Format currency input (adds commas for thousands and limits decimal places)
  * @param value The raw input value
  * @param decimalPlaces Number of decimal places (default: 2)
  * @returns The formatted currency value
  */
-var formatCurrency = function (value, decimalPlaces) {
-    if (decimalPlaces === void 0) { decimalPlaces = 2; }
+const formatCurrency = (value, decimalPlaces = 2) => {
     // Handle special case of just a decimal point
     if (value === '.') {
         return '0.';
     }
     // Remove all characters except digits and decimal point
-    var sanitized = value.replace(/[^\d.]/g, '');
+    const sanitized = value.replace(/[^\d.]/g, '');
     // Ensure only one decimal point
-    var parts = sanitized.split('.');
-    var integerPart = parts[0];
-    var decimalPart = parts.length > 1 ? parts[1] : '';
+    const parts = sanitized.split('.');
+    const integerPart = parts[0];
+    const decimalPart = parts.length > 1 ? parts[1] : '';
     // Format integer part with commas
-    var formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    // Add decimal part if it exists
-    if (decimalPart) {
-        return "".concat(formattedInteger, ".").concat(decimalPart.slice(0, decimalPlaces));
+    const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    // Add decimal part if decimal point was present (even if empty)
+    if (parts.length > 1) {
+        return `${formattedInteger}.${decimalPart.slice(0, decimalPlaces)}`;
     }
     return formattedInteger;
 };
@@ -112,7 +265,7 @@ var formatCurrency = function (value, decimalPlaces) {
  * @param options Additional options for formatting
  * @returns The masked/formatted value
  */
-var applyInputMask = function (value, type, options) {
+const applyInputMask = (value, type, options) => {
     switch (type) {
         case 'creditCard':
             return formatCreditCard(value);
@@ -134,7 +287,7 @@ var applyInputMask = function (value, type, options) {
  * @param value The current value
  * @returns Whether the value is valid or not
  */
-var validateMaskedInput = function (type, value) {
+const validateMaskedInput = (type, value) => {
     switch (type) {
         case 'expiryDate':
             // Only validate once we have at least 2 digits
@@ -154,11 +307,20 @@ var validateMaskedInput = function (type, value) {
  * @param previousPosition Previous cursor position
  * @returns The new cursor position
  */
-var getAdjustedCursorPosition = function (previousValue, currentValue, previousPosition) {
+const getAdjustedCursorPosition = (previousValue, currentValue, previousPosition) => {
     // If values are the same, don't move cursor
     if (previousValue === currentValue) {
         return previousPosition;
     }
+    // For currency formatting with commas
+    // Count how many commas are before the cursor position in both values
+    const prevCommasBefore = (previousValue.slice(0, previousPosition).match(/,/g) || []).length;
+    const currCommasBefore = (currentValue.slice(0, previousPosition).match(/,/g) || []).length;
+    // If commas were added or removed, adjust position
+    if (prevCommasBefore !== currCommasBefore) {
+        const commaDiff = currCommasBefore - prevCommasBefore;
+        return previousPosition + commaDiff;
+    }
     // For credit card formatting with hyphens
     if (previousValue.length < currentValue.length) {
         // Check if we're at a position where a separator was added
@@ -175,13 +337,13 @@ var getAdjustedCursorPosition = function (previousValue, currentValue, previousP
         }
     }
     // Check if digits were added at the end
-    var prevDigits = previousValue.replace(/\D/g, '');
-    var currDigits = currentValue.replace(/\D/g, '');
+    const prevDigits = previousValue.replace(/\D/g, '');
+    const currDigits = currentValue.replace(/\D/g, '');
     if (currDigits.length > prevDigits.length) {
         // For credit card groups (after 4, 8, 12 digits)
         if (currDigits.length === 4 || currDigits.length === 8 || currDigits.length === 12) {
             // Find position after the hyphen that was just added
-            var hyphenPos = currentValue.indexOf('-', previousPosition - 1);
+            const hyphenPos = currentValue.indexOf('-', previousPosition - 1);
             if (hyphenPos !== -1) {
                 return hyphenPos + 1;
             }
@@ -189,10 +351,10 @@ var getAdjustedCursorPosition = function (previousValue, currentValue, previousP
     }
     // Default cursor adjustment when something was added
     if (currentValue.length > previousValue.length) {
-        var addedChars = currentValue.length - previousValue.length;
+        const addedChars = currentValue.length - previousValue.length;
         return previousPosition + addedChars;
     }
     return previousPosition;
 };
 
-export { applyInputMask, formatCreditCard, formatCurrency, formatExpiryDate, formatPhoneNumber, formatSSN, getAdjustedCursorPosition, isValidMonth, validateMaskedInput };
+export { applyInputMask, formatCreditCard, formatCurrency, formatDateInput, formatExpiryDate, formatPhoneNumber, formatSSN, getAdjustedCursorPosition, isValidDateInput, isValidMonth, validateMaskedInput };