@catalystsoftware/ui 1.0.0

package/components/catalyst-ui/x/input-mask-x.tsx

@@ -0,0 +1,981 @@
+'use client'
+
+import React, { useId } from 'react'
+import { withMask } from 'use-mask-input'
+import { cva } from 'class-variance-authority'
+import { CreditCard } from 'lucide-react'
+import { cn } from '~/components/catalyst-ui'
+import { Input, useValidateCreditCard } from '~/components/catalyst-ui'
+import { Field, FieldLabel, FieldDescription, FieldError } from '~/components/catalyst-ui'
+
+/**
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ InputMaskX Component ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ★ ━━━━ ☆ ━━━━  ━━━━ ☆ ━━━━ ★
+* InputMaskX: A collection of input components with various masking patterns for structured data entry
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Basic Input Mask ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* // Default input
+* <InputMaskX label="Default Input" placeholder="Enter text" />
+* 
+* // Custom mask pattern
+* <InputMaskX 
+*   inputMask="WithMask"
+*   label="License Plate"
+*   mask="AA99 AAA"
+*   placeholder="AB12 CDE"
+* />
+* 
+* // Time input with mask
+* <InputMaskX 
+*   inputMask="Time"
+*   label="Time"
+*   placeholder="HH:MM:SS"
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Credit Card Inputs ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* // Card number with auto-detection
+* <InputMaskX 
+*   inputMask="CardNumber"
+*   label="Credit Card Number"
+*   placeholder="1234 5678 9012 3456"
+* />
+* 
+* // Expiry date
+* <InputMaskX 
+*   inputMask="ExpiryDate"
+*   label="Expiration Date"
+*   placeholder="MM/YY"
+* />
+* 
+* // CVC code
+* <InputMaskX 
+*   inputMask="CVCCode"
+*   label="CVC"
+*   placeholder="123"
+* />
+* 
+* // Complete card form
+* <InputMaskX 
+*   inputMask="CardDetails"
+*   label="Card Information"
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Custom Mask Patterns ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* // Phone number
+* <InputMaskX 
+*   inputMask="WithMask"
+*   label="Phone Number"
+*   mask="(999) 999-9999"
+*   placeholder="(123) 456-7890"
+* />
+* 
+* // Social Security Number
+* <InputMaskX 
+*   inputMask="WithMask"
+*   label="SSN"
+*   mask="999-99-9999"
+*   placeholder="123-45-6789"
+* />
+* 
+* // Postal/ZIP Code
+* <InputMaskX 
+*   inputMask="WithMask"
+*   label="ZIP Code"
+*   mask="99999-9999"
+*   placeholder="12345-6789"
+* />
+* 
+* // Date
+* <InputMaskX 
+*   inputMask="WithMask"
+*   label="Date"
+*   mask="99/99/9999"
+*   placeholder="MM/DD/YYYY"
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Custom Styling Variations ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* // Filled variant
+* <InputMaskX 
+*   inputMask="CardNumber"
+*   variant="filled"
+*   label="Card Number"
+* />
+* 
+* // Small size
+* <InputMaskX 
+*   inputMask="CVCCode"
+*   size="sm"
+*   label="CVC"
+* />
+* 
+* // Large size
+* <InputMaskX 
+*   inputMask="ExpiryDate"
+*   size="lg"
+*   label="Expiry"
+* />
+* 
+* // Error state
+* <InputMaskX 
+*   inputMask="CardNumber"
+*   state="error"
+*   label="Invalid Card"
+*   error="Please enter a valid card number"
+* />
+* 
+* // Success state
+* <InputMaskX 
+*   inputMask="CardNumber"
+*   state="success"
+*   label="Valid Card"
+* />
+* 
+* // Rounded variants
+* <InputMaskX 
+*   inputMask="WithMask"
+*   rounded="lg"
+*   label="Rounded Input"
+*   mask="AAA-999"
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ With Icons and Visuals ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* // Card number with icon
+* <InputMaskX 
+*   inputMask="CardNumber"
+*   label="Card Number"
+*   // Shows card type icon (Visa, Mastercard, etc.) automatically
+* />
+* 
+* // Custom icon placement
+* <div className="relative">
+*   <InputMaskX 
+*     inputMask="WithMask"
+*     label="Phone"
+*     mask="(999) 999-9999"
+*     className="pl-10" // Space for icon
+*   />
+*   <Phone className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+* </div>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Complete Payment Form ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* function PaymentForm() {
+*   const [cardNumber, setCardNumber] = useState('')
+*   const [expiry, setExpiry] = useState('')
+*   const [cvc, setCVC] = useState('')
+*   
+*   return (
+*     <div className="space-y-4 max-w-md">
+*       <InputMaskX 
+*         inputMask="CardNumber"
+*         label="Card Number"
+*         value={cardNumber}
+*         onChange={(e) => setCardNumber(e.target.value)}
+*       />
+*       
+*       <div className="grid grid-cols-2 gap-4">
+*         <InputMaskX 
+*           inputMask="ExpiryDate"
+*           label="Expiry Date"
+*           value={expiry}
+*           onChange={(e) => setExpiry(e.target.value)}
+*         />
+*         <InputMaskX 
+*           inputMask="CVCCode"
+*           label="CVC"
+*           value={cvc}
+*           onChange={(e) => setCVC(e.target.value)}
+*         />
+*       </div>
+*       
+*       <button className="w-full bg-blue-600 text-white py-2 rounded">
+*         Pay Now
+*       </button>
+*     </div>
+*   )
+* }
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Available Input Mask Types ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* 1. **default** - Regular input without mask
+* 2. **WithMask** - Custom mask pattern
+* 3. **Time** - Time input (HH:MM:SS format)
+* 4. **CardNumber** - Credit card number with validation
+* 5. **ExpiryDate** - Card expiry date (MM/YY)
+* 6. **CVCCode** - Card security code
+* 7. **CardDetails** - Combined card form (number + expiry + CVC)
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Mask Pattern Syntax ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* // Common mask patterns
+* <InputMaskX 
+*   inputMask="WithMask"
+*   mask="999-999-9999" // Numbers only
+* />
+* 
+* <InputMaskX 
+*   inputMask="WithMask"
+*   mask="AAA-999" // Letters then numbers
+* />
+* 
+* <InputMaskX 
+*   inputMask="WithMask"
+*   mask="**** **** **** 9999" // Fixed characters with numbers
+* />
+* 
+* // Date/time patterns
+* <InputMaskX 
+*   inputMask="Time"
+*   // Automatically uses HH:MM:SS format
+* />
+* 
+* // Custom datetime
+* <InputMaskX 
+*   inputMask="WithMask"
+*   mask="datetime"
+*   // Additional props: inputFormat, outputFormat
+* />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Props Reference ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* - **Common Props**:
+* - `inputMask`: string - Type of mask to apply
+* - `label`: string - Input field label
+* - `description`: string - Helper text
+* - `error`: string - Error message
+* - `placeholder`: string - Placeholder text
+* - `value`: string - Controlled value
+* - `onChange`: (e: React.ChangeEvent) => void - Change handler
+* 
+* - **WithMask Specific Props**:
+* - `mask`: string - Mask pattern (e.g., "999-999-9999")
+* - `showMaskOnHover`: boolean - Show mask on hover
+* 
+* - **Time Specific Props**:
+* - `inputFormat`: string - Input format (default: "HH:MM:ss")
+* - `outputFormat`: string - Output format (default: "HH:MM:ss")
+* 
+* - **Styling Props** (via inputMaskVariants):
+* - `variant`: 'default' | 'filled' | 'ghost'
+* - `size`: 'sm' | 'default' | 'lg'
+* - `rounded`: 'sm' | 'default' | 'lg' | 'full' | 'none'
+* - `state`: 'default' | 'error' | 'success'
+* - `className`: string - Additional CSS classes
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Validation Features ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* // Card number validation
+* <InputMaskX 
+*   inputMask="CardNumber"
+*   label="Card Number"
+*   // Automatically validates: Luhn algorithm, card type detection
+* />
+* 
+* // Expiry date validation
+* <InputMaskX 
+*   inputMask="ExpiryDate"
+*   label="Expiry"
+*   // Validates: Not expired, valid month/year format
+* />
+* 
+* // Custom validation
+* function CustomValidationExample() {
+*   const [value, setValue] = useState('')
+*   const [error, setError] = useState('')
+*   
+*   const validate = (input: string) => {
+*     if (!input.match(/^AB\d{2} CDE$/)) {
+*       setError('Invalid format')
+*     } else {
+*       setError('')
+*     }
+*   }
+*   
+*   return (
+*     <InputMaskX 
+*       inputMask="WithMask"
+*       label="Custom Pattern"
+*       mask="AB99 CDE"
+*       value={value}
+*       onChange={(e) => {
+*         setValue(e.target.value)
+*         validate(e.target.value)
+*       }}
+*       error={error}
+*     />
+*   )
+* }
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Accessibility Features ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* - **Auto IDs**: Automatic ID generation for label association
+* - **Screen Reader**: All labels and descriptions accessible
+* - **Keyboard Navigation**: Full keyboard support
+* - **Focus Management**: Clear focus indicators
+* - **ARIA Attributes**: Proper role and state attributes
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Usage Examples ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* // Registration form
+* function RegistrationForm() {
+*   return (
+*     <div className="space-y-4">
+*       <InputMaskX label="Full Name" placeholder="John Doe" />
+*       <InputMaskX 
+*         inputMask="WithMask"
+*         label="Phone"
+*         mask="(999) 999-9999"
+*         placeholder="(123) 456-7890"
+*       />
+*       <InputMaskX 
+*         inputMask="WithMask"
+*         label="SSN"
+*         mask="999-99-9999"
+*         placeholder="123-45-6789"
+*       />
+*     </div>
+*   )
+* }
+* 
+* // Booking system
+* function BookingForm() {
+*   return (
+*     <div className="space-y-4">
+*       <InputMaskX 
+*         inputMask="WithMask"
+*         label="Booking Reference"
+*         mask="AAA-9999"
+*         placeholder="ABC-1234"
+*       />
+*       <InputMaskX 
+*         inputMask="Time"
+*         label="Check-in Time"
+*         placeholder="14:00:00"
+*       />
+*       <InputMaskX 
+*         inputMask="CardDetails"
+*         label="Payment Information"
+*       />
+*     </div>
+*   )
+* }
+* 
+* // Settings form
+* function SettingsForm() {
+*   return (
+*     <div className="space-y-4">
+*       <InputMaskX 
+*         inputMask="WithMask"
+*         label="API Key"
+*         mask="****-****-****-****"
+*         placeholder="••••-••••-••••-••••"
+*       />
+*       <InputMaskX 
+*         inputMask="Time"
+*         label="Schedule Time"
+*         placeholder="09:00:00"
+*       />
+*       <InputMaskX 
+*         variant="filled"
+*         size="sm"
+*         label="Short Code"
+*         placeholder="ABC123"
+*       />
+*     </div>
+*   )
+* }
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Integration with Form Libraries ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* // With React Hook Form
+* import { useForm } from 'react-hook-form'
+* 
+* function HookFormExample() {
+*   const { register, handleSubmit } = useForm()
+*   
+*   return (
+*     <form onSubmit={handleSubmit(data => console.log(data))}>
+*       <InputMaskX 
+*         inputMask="CardNumber"
+*         label="Card Number"
+*         {...register('cardNumber', { required: true })}
+*       />
+*       <InputMaskX 
+*         inputMask="ExpiryDate"
+*         label="Expiry"
+*         {...register('expiry', { required: true })}
+*       />
+*       <button type="submit">Submit</button>
+*     </form>
+*   )
+* }
+* 
+* // With Formik
+* import { useField } from 'formik'
+* 
+* function FormikField({ label, ...props }) {
+*   const [field, meta] = useField(props)
+*   
+*   return (
+*     <InputMaskX 
+*       label={label}
+*       {...field}
+*       error={meta.touched && meta.error ? meta.error : ''}
+*       {...props}
+*     />
+*   )
+* }
+* ```
+* 
+*/
+
+// #region CVA VARIANTS
+export const inputMaskVariants = cva(
+  'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: '',
+        filled: 'bg-muted border-transparent shadow-none',
+        ghost: 'border-transparent shadow-none',
+      },
+      size: {
+        sm: 'h-8 text-xs',
+        default: 'h-10',
+        lg: 'h-12 text-base',
+      },
+      rounded: {
+        default: 'rounded-md',
+        sm: 'rounded-sm',
+        lg: 'rounded-lg',
+        full: 'rounded-full',
+        none: 'rounded-none',
+      },
+      state: {
+        default: '',
+        error: 'border-destructive focus-visible:ring-destructive',
+        success: 'border-green-500 focus-visible:ring-green-500',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+      rounded: 'default',
+      state: 'default',
+    },
+  }
+)
+// #endregion
+
+// #region PARENT FUNCTION
+export function InputMaskX({ inputMask = 'default', ...props }: any) {
+  switch (inputMask) {
+    case 'WithMask':
+      return <WithMask {...props} />
+    case 'Time':
+      return <Time {...props} />
+    case 'CardNumber':
+      return <CardNumber {...props} />
+    case 'ExpiryDate':
+      return <ExpiryDate {...props} />
+    case 'CVCCode':
+      return <CVCCode {...props} />
+    case 'CardDetails':
+      return <CardDetails {...props} />
+    default:
+      return <DefaultInputMask {...props} />
+  }
+}
+// #endregion
+
+// #region SUPPORTING FUNCTIONS
+const DefaultInputMask = ({ label, description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      {label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
+      <Input 
+        id={id}
+        className={cn(inputMaskVariants({ variant, size, rounded, state }), className)} 
+        {...props} 
+      />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+
+const WithMask = ({ label = 'Input with mask', description, error, variant, size, rounded, state, className, mask = 'AA99 AAA', placeholder = 'AB12 CDE', ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <Input
+        id={id}
+        type='text'
+        placeholder={placeholder}
+        ref={withMask(mask, {
+          placeholder: '_',
+          showMaskOnHover: false
+        })}
+        className={cn(inputMaskVariants({ variant, size, rounded, state }), className)}
+        {...props}
+      />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+      <p className='text-muted-foreground text-xs'>
+        Built with{' '}
+        <a
+          className='hover:text-foreground underline'
+          href='https://github.com/eduardoborges/use-mask-input'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          use-mask-input
+        </a>
+      </p>
+    </Field>
+  )
+}
+
+const Time = ({ label = 'Input time', description, error, variant, size, rounded, state, className, placeholder = '00:00:00', ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <Input
+        id={id}
+        type='text'
+        placeholder={placeholder}
+        ref={withMask('datetime', {
+          placeholder: '_',
+          inputFormat: 'HH:MM:ss',
+          outputFormat: 'HH:MM:ss',
+          showMaskOnHover: false
+        })}
+        className={cn(inputMaskVariants({ variant, size, rounded, state }), className)}
+        {...props}
+      />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+      <p className='text-muted-foreground text-xs'>
+        Built with{' '}
+        <a
+          className='hover:text-foreground underline'
+          href='https://github.com/eduardoborges/use-mask-input'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          use-mask-input
+        </a>
+      </p>
+    </Field>
+  )
+}
+
+const CardNumber = ({ label = 'Card number', description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const id = useId()
+  const { getCardNumberProps, getCardIcon } = useValidateCreditCard()
+  const CardIcon = getCardIcon()
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <div className='relative'>
+        <Input 
+          {...getCardNumberProps()} 
+          id={id} 
+          className={cn(inputMaskVariants({ variant, size, rounded, state }), 'peer pr-11', className)}
+          {...props}
+        />
+        <div className='text-muted-foreground pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50'>
+          <CardIcon className='size-6' />
+          <span className='sr-only'>Card Provider</span>
+        </div>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+      <p className='text-muted-foreground text-xs'>
+        Built with custom validation
+      </p>
+    </Field>
+  )
+}
+
+const ExpiryDate = ({ label = 'Expiry date', description, error, variant, size, rounded, state, className, placeholder = 'MM/YY', ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <Input
+        id={id}
+        type='text'
+        placeholder={placeholder}
+        ref={withMask('99/99', {
+          placeholder: '_',
+          showMaskOnHover: false
+        })}
+        className={cn(inputMaskVariants({ variant, size, rounded, state }), className)}
+        {...props}
+      />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+
+const CVCCode = ({ label = 'CVC code', description, error, variant, size, rounded, state, className, placeholder = '123', ...props }: any) => {
+  const id = useId()
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <Input
+        id={id}
+        type='text'
+        placeholder={placeholder}
+        ref={withMask('999', {
+          placeholder: '_',
+          showMaskOnHover: false
+        })}
+        className={cn(inputMaskVariants({ variant, size, rounded, state }), className)}
+        {...props}
+      />
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  )
+}
+
+const CardDetails = ({ label = 'Card details', description, error, variant, size, rounded, state, className, ...props }: any) => {
+  const id = useId()
+  const { getCardNumberProps, getCardIcon } = useValidateCreditCard()
+  const CardIcon = getCardIcon()
+
+  return (
+    <Field className='w-full max-w-xs space-y-2'>
+      <FieldLabel>{label}</FieldLabel>
+      <div>
+        <div className='relative focus-within:z-1'>
+          <Input 
+            {...getCardNumberProps()} 
+            id={`number-${id}`} 
+            className={cn(inputMaskVariants({ variant, size, rounded, state }), 'peer rounded-b-none pr-9 shadow-none', className)}
+            {...props}
+          />
+          <div className='text-muted-foreground pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50'>
+            <CardIcon className='size-6' />
+            <span className='sr-only'>Card Provider</span>
+          </div>
+        </div>
+        <div className='-mt-px flex'>
+          <div className='min-w-0 flex-1 focus-within:z-1'>
+            <Input
+              type='text'
+              placeholder='MM/YY'
+              ref={withMask('99/99', {
+                placeholder: '_',
+                showMaskOnHover: false
+              })}
+              id={`expiry-${id}`}
+              className={cn(inputMaskVariants({ variant, size, rounded, state }), 'rounded-t-none rounded-r-none shadow-none')}
+            />
+          </div>
+          <div className='-ms-px min-w-0 flex-1 focus-within:z-1'>
+            <Input 
+              type='text'
+              placeholder='123'
+              ref={withMask('999', {
+                placeholder: '_',
+                showMaskOnHover: false
+              })}
+              id={`cvc-${id}`} 
+              className={cn(inputMaskVariants({ variant, size, rounded, state }), 'rounded-t-none rounded-l-none shadow-none')}
+            />
+          </div>
+        </div>
+      </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+      {error && <FieldError>{error}</FieldError>}
+      <p className='text-muted-foreground text-xs'>
+        Built with custom validation
+      </p>
+    </Field>
+  )
+}
+// #endregion
+
+// #region DEMO
+export function InputMaskXDemo() {
+  return (
+    <div className='space-y-12 p-6 max-w-3xl mx-auto'>
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Default</h3>
+        <InputMaskX label='Default Input' placeholder='Enter text' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>With Mask</h3>
+        <InputMaskX inputMask='WithMask' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Time Input</h3>
+        <InputMaskX inputMask='Time' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Card Number</h3>
+        <InputMaskX inputMask='CardNumber' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Expiry Date</h3>
+        <InputMaskX inputMask='ExpiryDate' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>CVC Code</h3>
+        <InputMaskX inputMask='CVCCode' />
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Card Details (Combined)</h3>
+        <InputMaskX inputMask='CardDetails' />
+      </div>
+    </div>
+  )
+}
+// #endregion
+
+
+/**
+
+
+
+
+
+
+export function InputMaskX({ inputMask = 'default', children, ...props }: any) {
+    switch (inputMask) {
+        case 'Closable':
+            break
+        default:
+            break;
+    }
+}
+
+const InputWithMaskDemo = () => {
+  const id = useId()
+
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor={id}>Input with mask</Label>
+      <Input
+        id={id}
+        type='text'
+        placeholder='AB12 CDE'
+        ref={withMask('AA99 AAA', {
+          placeholder: '_',
+          showMaskOnHover: false
+        })}
+      />
+      <p className='text-muted-foreground text-xs'>
+        Built with{' '}
+        <a
+          className='hover:text-foreground underline'
+          href='https://github.com/eduardoborges/use-mask-input'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          use-mask-input
+        </a>
+      </p>
+    </div>
+  )
+}
+
+const InputTimeDemo = () => {
+  const id = useId()
+
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor={id}>Input time</Label>
+      <Input
+        id={id}
+        type='text'
+        placeholder='00:00:00'
+        ref={withMask('datetime', {
+          placeholder: '_',
+          inputFormat: 'HH:MM:ss',
+          outputFormat: 'HH:MM:ss',
+          showMaskOnHover: false
+        })}
+      />
+      <p className='text-muted-foreground text-xs'>
+        Built with{' '}
+        <a
+          className='hover:text-foreground underline'
+          href='https://github.com/eduardoborges/use-mask-input'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          use-mask-input
+        </a>
+      </p>
+    </div>
+  )
+}
+
+const InputCardNumberDemo = () => {
+  const id = useId()
+  const { meta, getCardNumberProps, getCardImageProps } = usePaymentInputs()
+
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor={id}>Card number</Label>
+      <div className='relative'>
+        <Input {...getCardNumberProps()} id={id} className='peer pr-11' />
+        <div className='text-muted-foreground pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50'>
+          {meta.cardType ? (
+            <svg
+              className='w-6 overflow-hidden'
+              {...getCardImageProps({
+                images: images as unknown as CardImages
+              })}
+            />
+          ) : (
+            <CreditCardIcon className='size-4' />
+          )}
+          <span className='sr-only'>Card Provider</span>
+        </div>
+      </div>
+      <p className='text-muted-foreground text-xs'>
+        Built with{' '}
+        <a
+          className='hover:text-foreground underline'
+          href='https://github.com/medipass/react-payment-inputs'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          React Payment Inputs
+        </a>
+      </p>
+    </div>
+  )
+}
+
+const InputExpiryDateDemo = () => {
+  const id = useId()
+  const { getExpiryDateProps } = usePaymentInputs()
+
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor={id}>Expiry date</Label>
+      <Input {...getExpiryDateProps()} id={id} />
+      <p className='text-muted-foreground text-xs'>
+        Built with{' '}
+        <a
+          className='hover:text-foreground underline'
+          href='https://github.com/medipass/react-payment-inputs'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          React Payment Inputs
+        </a>
+      </p>
+    </div>
+  )
+}
+
+const InputCVCCodeDemo = () => {
+  const id = useId()
+  const { getCVCProps } = usePaymentInputs()
+
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label htmlFor={id}>CVC code</Label>
+      <Input {...getCVCProps()} id={id} />
+      <p className='text-muted-foreground text-xs'>
+        Built with{' '}
+        <a
+          className='hover:text-foreground underline'
+          href='https://github.com/medipass/react-payment-inputs'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          React Payment Inputs
+        </a>
+      </p>
+    </div>
+  )
+}
+
+const InputCardDetailsDemo = () => {
+  const id = useId()
+  const { meta, getCardNumberProps, getExpiryDateProps, getCVCProps, getCardImageProps } = usePaymentInputs()
+
+  return (
+    <div className='w-full max-w-xs space-y-2'>
+      <Label>Card details</Label>
+      <div>
+        <div className='relative focus-within:z-1'>
+          <Input {...getCardNumberProps()} id={`number-${id}`} className='peer rounded-b-none pr-9 shadow-none' />
+          <div className='text-muted-foreground pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50'>
+            {meta.cardType ? (
+              <svg
+                className='w-6 overflow-hidden'
+                {...getCardImageProps({
+                  images: images as unknown as CardImages
+                })}
+              />
+            ) : (
+              <CreditCardIcon className='size-4' />
+            )}
+            <span className='sr-only'>Card Provider</span>
+          </div>
+        </div>
+        <div className='-mt-px flex'>
+          <div className='min-w-0 flex-1 focus-within:z-1'>
+            <Input
+              {...getExpiryDateProps()}
+              id={`expiry-${id}`}
+              className='rounded-t-none rounded-r-none shadow-none'
+            />
+          </div>
+          <div className='-ms-px min-w-0 flex-1 focus-within:z-1'>
+            <Input {...getCVCProps()} id={`cvc-${id}`} className='rounded-t-none rounded-l-none shadow-none' />
+          </div>
+        </div>
+      </div>
+      <p className='text-muted-foreground text-xs'>
+        Built with{' '}
+        <a
+          className='hover:text-foreground underline'
+          href='https://github.com/medipass/react-payment-inputs'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          React Payment Inputs
+        </a>
+      </p>
+    </div>
+  )
+} */
+
+
+
+
+
+
+