From d7915dc45088f3bfa4206d3a2167b87c51eb1588 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 25 Jan 2024 20:34:29 +0800
Subject: [PATCH] Verification code input - Added new input include in input
 demo page

---
 apps/pink/src/pages/elements/input-field.mdx  | 49 +++++++++++++++++++
 .../ui/src/6-elements/form/_text-inputs.scss  | 12 +++++
 2 files changed, 61 insertions(+)

diff --git a/apps/pink/src/pages/elements/input-field.mdx b/apps/pink/src/pages/elements/input-field.mdx
index b593014c4c..dc75f66543 100644
--- a/apps/pink/src/pages/elements/input-field.mdx
+++ b/apps/pink/src/pages/elements/input-field.mdx
@@ -436,6 +436,55 @@ Dropdown is made with ```drop-list```. To hide items use the ```u-hide``` class.
   </form>
 </Preview>
 
+
+## Verification code input
+
+| Input Type                    | Type      |                                                                                                       |
+| ----------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
+| `verification-code-input`     | character | Usualy used for code with numbers, but can use with amy type of input, limited for one char per textbox |
+
+<Preview center>
+    <form class="form u-width-full-line u-max-width-500">
+        <ul class="form-list">
+            <li class="form-item">
+                <label class="label">Enter Code</label>
+                <ol class="u-flex u-gap-16">
+                    <li><input type="text" class="verification-code-input u-remove-input-number-buttons" maxlength="1" /></li>
+                    <li><input type="text" class="verification-code-input u-remove-input-number-buttons" maxlength="1" /></li>
+                    <li><input type="text" class="verification-code-input u-remove-input-number-buttons" maxlength="1" /></li>
+                    <li><input type="text" class="verification-code-input u-remove-input-number-buttons" maxlength="1" /></li>
+                    <li><input type="text" class="verification-code-input u-remove-input-number-buttons" maxlength="1" /></li>
+                    <li><input type="text" class="verification-code-input u-remove-input-number-buttons" maxlength="1" /></li>
+                </ol>
+            </li>
+        </ul>
+    </form>
+</Preview>
+
+State large for verification code input:
+
+| Class             | Type     |                                                                                                                          |
+| ----------------- | -------- | ------------------------------------------------------------------------------------------------------------------------ |
+| is-large          | size     | inrease size to 60px width & height                                                                                      |
+
+<Preview center>
+    <form class="form u-width-full-line u-max-width-500">
+        <ul class="form-list">
+            <li class="form-item">
+                <label class="label">Enter Code</label>
+                <ol class="u-flex u-gap-16">
+                    <li><input type="text" class="verification-code-input is-large u-remove-input-number-buttons" maxlength="1" /></li>
+                    <li><input type="text" class="verification-code-input is-large u-remove-input-number-buttons" maxlength="1" /></li>
+                    <li><input type="text" class="verification-code-input is-large u-remove-input-number-buttons" maxlength="1" /></li>
+                    <li><input type="text" class="verification-code-input is-large u-remove-input-number-buttons" maxlength="1" /></li>
+                    <li><input type="text" class="verification-code-input is-large u-remove-input-number-buttons" maxlength="1" /></li>
+                    <li><input type="text" class="verification-code-input is-large u-remove-input-number-buttons" maxlength="1" /></li>
+                </ol>
+            </li>
+        </ul>
+    </form>
+</Preview>
+
 ## States
 
 States can be applied to all inputs fields:
diff --git a/packages/ui/src/6-elements/form/_text-inputs.scss b/packages/ui/src/6-elements/form/_text-inputs.scss
index 47be52de65..68dbd9e7f0 100644
--- a/packages/ui/src/6-elements/form/_text-inputs.scss
+++ b/packages/ui/src/6-elements/form/_text-inputs.scss
@@ -330,4 +330,16 @@ input[type="datetime-local" i]::-webkit-calendar-picker-indicator {
     --tag-bg-color: var(--color-neutral-80);
     --tag-text-color: var(--color-neutral-20);
   }
+}
+.verification-code-input {
+  --p-input-size: var(--input-size, #{pxToRem(40)});
+  inline-size: var(--p-input-size);
+  block-size: var(--p-input-size);
+  font-size: pxToRem(20);
+  text-align: center;
+
+  &.is-large {
+    --input-size: #{pxToRem(60)};
+    font-size: pxToRem(30);
+  }
 }
\ No newline at end of file