[FIX] Style inner spin button

Author: hasan-ahani

README.md

@@ -6,6 +6,8 @@
 [![License](https://img.shields.io/github/license/hasan-ahani/filament-otp-input?style=flat-square)](https://github.com/hasan-ahani/filament-otp-input/blob/main/LICENSE.md)
 
 ![Preview](preview.png)
+
+
 `filament-otp-input` is a package built for [Filament](https://filamentphp.com) that provides an enhanced password input form component that offers you the ability to add the following
 features to your password inputs:
 
@@ -26,7 +28,6 @@ You can install the package via composer:
 composer require hasan-ahani/filament-otp-input
 ```
 
-
 ## Usage
 Inside a form schema, you can use the Otp input like this:
 ```php
@@ -44,7 +45,8 @@ public function form(Form $form): Form
 }
 ```
 The code above will render a otp input inside the form.
-![Otp input](docs/otp.png)
+
+ ![Otp input](docs/otp.png)
 
 ## Number input
 If you want to change number input, The following code will render the inputs of use number:
@@ -64,6 +66,7 @@ public function form(Form $form): Form
 }
 ```
 The code above will render a otp input  inside the form.
+
 ![Otp input number](docs/otp-number.png)
 
 ## Number input

resources/views/components/otp-input.blade.php

@@ -106,7 +106,7 @@
                         maxlength="1"
                         x-ref="{{$column}}"
                         required
-                        class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 text-center"
+                        class="fi-input fi-otp-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3 text-center"
                         x-on:input="handleInput($event, {{$column}})"
                         x-on:paste="handlePaste($event)"
                         x-on:keydown.backspace="handleBackspace($event)"
@@ -116,85 +116,19 @@ class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transiti
             @endforeach
 
         </div>
-
-
-        <script>
-            function pinHandler() {
-                return {
-                    length: 5,
-                    value: '',
-                    validation: /\d/g,
-                    updateValue() {
-                        this.value = Array.from({length: this.length}, (empty, index) => {
-                            return this.$refs[index].value || ' '
-                        }).join('')
-                    },
-                    handleInput(pin) {
-                        const value = pin.value.match(this.validation)
-                        // if the input doesn't match our needs, don't do anything
-                        if (!value || !value.length) {
-                            pin.value = ''
-                            return
-                        }
-
-                        // TODO: We could check here if the value.length = length then check against a database
-
-                        pin.value = value
-                        this.updateValue()
-                        this.focusNextRef(pin.getAttribute('x-ref'))
-                    },
-                    handlePaste(event) {
-                        // TODO: this validation might not be what your app requires (this one is numbers only)
-                        const text = event.clipboardData.getData('Text').match(this.validation)
-                        if (!text || !text.length) return
-                        // Get the starting input
-                        const pastedFrom = parseInt(event.target.getAttribute('x-ref'), 10)
-                        // This filters only numbers, then slices based on how many inputs remain
-                        const remainingInputs = this.length - pastedFrom
-                        const value = text.slice(0, remainingInputs).join('')
-                        // Figure out what inputs we need to update
-                        const inputsToUpdate = Array.from(Array(remainingInputs), (empty, index) => {
-                            return index + pastedFrom
-                        }).splice(0, value.length)
-                        // Update the values
-                        inputsToUpdate.forEach((ref, i) => {
-                            this.$refs[ref].value = value[i]
-                        })
-                        // Focus the last input we updated
-                        this.focusNextRef(inputsToUpdate.pop())
-                        this.updateValue()
-                    },
-                    focusNextRef(current) {
-                        const next = parseInt(current, 10) + 1
-                        if (!this.$refs[next]) {
-                            // If next doesn't exist, focus the last. A real app might auto check the database or focus a button
-                            this.$refs[parseInt(this.length, 10) - 1].focus()
-                            this.$refs[parseInt(this.length, 10) - 1].select()
-                            return
-                        }
-                        this.$refs[next].focus()
-                        this.$refs[next].select()
-                    },
-                    focusPreviousRef(current) {
-                        const previous = parseInt(current, 10) - 1
-                        this.$refs[previous] && this.$refs[previous].focus()
-                        this.$refs[previous] && this.$refs[previous].select()
-                    },
-                }
-            }
-        </script>
     </div>
 </x-dynamic-component>
 
 <style>
-    input[type=number] {
+    input.fi-otp-input[type=number] {
         -webkit-appearance: textfield;
         -moz-appearance: textfield;
         appearance: textfield;
         overflow: visible;
     }
 
-    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
+    input.fi-otp-input[type=number]::-webkit-inner-spin-button,
+    input.fi-otp-input[type=number]::-webkit-outer-spin-button {
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;