<label>
    <input
      x-input-mask="{
              prefix: 'Prefix',
              delimiter: '-',
              blocks: [6, 4, 4, 7],
          }"
      class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="نام کاربری"
      type="text"
    />
  </label>

              

                
  <label>
    <input
      x-input-mask="{
              delimiters: ['.', '_', '-'],
              blocks: [3, 2, 3, 3],
              uppercase: true
          }"
      class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="xxx.xx_xxx-xxx"
      type="text"
    />
  </label>

              

                
  <label>
    <input
      x-input-mask="{
              creditCard: true
          }"
      class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="xxxx xxxx xxxx xxxx"
      type="text"
    />
  </label>

              

                
  <div>
    <span>تاریخ:</span>
    <label>
      <input
        x-input-mask="{
            date: true,
            delimiter: '-',
            datePattern: ['m', 'd','Y']
          }"
        class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
        placeholder="تاریخ را وارد کنید"
        type="text"
      />
    </label>
  </div>
  <div>
    <span>زمان:</span>
    <label>
      <input
        x-input-mask="{
            time: true,
            timePattern: ['h', 'm', 's']
          }"
        class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
        placeholder="زمان را وارد کنید"
        type="text"
      />
    </label>
  </div>
              

                
  <div>
    <span>شماره تماس:</span>
    <label class="mt-1.5 flex -space-x-px">
      <span
        class="flex shrink-0 items-center justify-center rounded-r-lg border border-slate-300 px-3.5 font-inter dark:border-navy-450"
      >
        <span>آمریکا (+1)</span>
      </span>
      <input
        x-input-mask="{
                numeric:true,
                blocks: [3, 2, 2, 2],
            }"
        class="form-input w-full rounded-l-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
        placeholder="شماره تماس را وارد کنید"
        type="text"
      />
    </label>
  </div>
                
              

                
  <div
    x-data="{
        config:{
            numeral: true,
            numeralThousandsGroupStyle: 'thousand'
        }
    }"
  >
    <label class="flex -space-x-px">
      <select
        class="form-select rounded-l-full border border-slate-300 bg-white px-3 py-2 pr-9 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
        x-model="config.numeralThousandsGroupStyle"
      >
        <option value="thousand">هزارگان</option>
        <option value="lakh">لاک هندی</option>
        <option value="wan">وان چینی</option>
      </select>

      <input
        x-input-mask="config"
        class="form-input w-full rounded-r-full border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
        placeholder="شماره تماس را وارد کنید"
        type="text"
      />
    </label>
  </div>