@catalystsoftware/ui 1.0.5 → 1.0.7

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

@@ -1,981 +0,0 @@
-'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>
-  )
-} */
-
-
-
-
-
-
-