Merge pull request #8 from sadegh19b/rtl

Add rtl option for the inputs container

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

@@ -16,6 +16,7 @@
     $isAutofocused = $isAutofocused();
     $inputType = $getType();
     $autocomplete = $getAutocomplete();
+    $isRtl = $getInputsContainerDirection();
 @endphp
 
 <x-dynamic-component
@@ -25,6 +26,7 @@
     :label-sr-only="$isLabelHidden()"
     :helper-text="$getHelperText()"
     :hint="$getHint()"
+    :hint-actions="$getHintActions()"
     :hint-icon="$getHintIcon()"
     :required="$isRequired()"
     :state-path="$getStatePath()"
@@ -80,7 +82,7 @@
                 e.preventDefault();
             },
         }">
-        <div class="flex justify-between gap-6 fi-otp-input-container">
+        <div class="flex justify-between gap-6 fi-otp-input-container" dir="{{ $isRtl ? 'rtl' : 'ltr' }}">
 
             @foreach(range(1, $numberInput) as $column)
 

src/Components/OtpInput.php

@@ -23,10 +23,10 @@ class OtpInput extends Field implements Contracts\CanBeLengthConstrained, Contra
 
     protected int | \Closure | null $numberInput = 4;
 
+    protected bool | \Closure | null $isRtl = false;
 
     protected string | \Closure | null $type = 'number';
 
-
     public function numberInput(int | \Closure $number = 4):static
     {
         $this->numberInput = $number;
@@ -42,12 +42,14 @@ public function getNumberInput():int
     public function password(): static
     {
         $this->type = 'password';
+
         return $this;
     }
 
     public function text(): static
     {
         $this->type = 'text';
+
         return $this;
     }
 
@@ -56,4 +58,15 @@ public function getType(): string
         return $this->evaluate($this->type);
     }
 
+    public function rtl(bool|\Closure $condition = false): static
+    {
+        $this->isRtl = $condition;
+
+        return $this;
+    }
+
+    public function getInputsContainerDirection(): string
+    {
+        return $this->evaluate($this->isRtl);
+    }
 }