From ba6d4e52b143238f69aecfc7145cba46fea0b874 Mon Sep 17 00:00:00 2001
From: Albin Wrebo <78490851+beforeAW@users.noreply.github.com>
Date: Thu, 6 Feb 2025 15:10:24 +0100
Subject: [PATCH 1/6] feat:input checkbox

---
 resources/views/admin/dashboard.blade.php     |  1 +
 .../views/components/input/checkbox.blade.php | 58 +++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 resources/views/components/input/checkbox.blade.php

diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
index f750188c..42a24244 100644
--- a/resources/views/admin/dashboard.blade.php
+++ b/resources/views/admin/dashboard.blade.php
@@ -1,3 +1,4 @@
 <x-layout>
     <h1>Admin</h1>
+    <x-input.checkbox name="admin" label="Is admin:" checked="true"></x-checkbox>
 </x-layout>
diff --git a/resources/views/components/input/checkbox.blade.php b/resources/views/components/input/checkbox.blade.php
new file mode 100644
index 00000000..f8db5998
--- /dev/null
+++ b/resources/views/components/input/checkbox.blade.php
@@ -0,0 +1,58 @@
+@props([
+    'name',
+    'label',
+    'checked' => false,
+])
+
+<div class="float-left flex flex-col gap-1">
+    <!-- Label Text (Clickable) -->
+
+    <label
+        for="{{ $name }}"
+        class="cursor-pointer text-sm font-medium text-slate-50"
+    >
+        {{ $label }}
+    </label>
+
+    <!-- Hidden Checkbox Input (Starts Unchecked) -->
+    <input
+        type="checkbox"
+        id="{{ $name }}"
+        name="{{ $name }}"
+        @if($checked) checked @endif
+        class="peer hidden"
+    />
+
+    <!-- Custom Visual Checkbox -->
+    <span
+        tabindex="0"
+        role="checkbox"
+        aria-checked="{{ $checked ? 'true' : 'false' }}"
+        class="h-6 w-6 cursor-pointer justify-center rounded border-2 border-slate-50 bg-indigo-400 peer-checked:border-indigo-400 peer-checked:bg-slate-50"
+        onclick="toggleCheckbox('{{ $name }}')"
+        onkeydown="handleKeyPress(event, '{{ $name }}')"
+    >
+        <x-lucide-check class="h-5 w-5 text-slate-50" />
+    </span>
+</div>
+
+<script>
+    function toggleCheckbox(checkboxId) {
+        const checkbox = document.getElementById(checkboxId)
+        const visualCheckbox = checkbox.nextElementSibling // Get the <span>
+
+        checkbox.checked = !checkbox.checked // Toggle checkbox state
+        visualCheckbox.setAttribute(
+            'aria-checked',
+            checkbox.checked ? 'true' : 'false',
+        ) // Update aria-checked
+        checkbox.dispatchEvent(new Event('change')) // Fire change event for Livewire/Vue if needed
+    }
+
+    function handleKeyPress(event, checkboxId) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault() // Prevent scrolling on Space key
+            toggleCheckbox(checkboxId)
+        }
+    }
+</script>

From ea8d44e95fbee31002fdc065169fec854d539b03 Mon Sep 17 00:00:00 2001
From: Albin Wrebo <78490851+beforeAW@users.noreply.github.com>
Date: Thu, 6 Feb 2025 15:17:52 +0100
Subject: [PATCH 2/6] fix:prettier

---
 resources/views/admin/dashboard.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
index 42a24244..c4ca2f0a 100644
--- a/resources/views/admin/dashboard.blade.php
+++ b/resources/views/admin/dashboard.blade.php
@@ -1,4 +1,4 @@
 <x-layout>
     <h1>Admin</h1>
-    <x-input.checkbox name="admin" label="Is admin:" checked="true"></x-checkbox>
+    <x-input.checkbox name="admin" label="Is admin:" checked="true" />
 </x-layout>

From 4c5d2898f86b49bce595fe552deb76484531eaf5 Mon Sep 17 00:00:00 2001
From: Albin Wrebo <78490851+beforeAW@users.noreply.github.com>
Date: Sat, 8 Feb 2025 12:37:31 +0100
Subject: [PATCH 3/6] refactor: comment changes

---
 .../views/components/input/checkbox.blade.php | 31 ++++++++-----------
 resources/views/home.blade.php                |  1 +
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/resources/views/components/input/checkbox.blade.php b/resources/views/components/input/checkbox.blade.php
index f8db5998..d8ef969b 100644
--- a/resources/views/components/input/checkbox.blade.php
+++ b/resources/views/components/input/checkbox.blade.php
@@ -4,55 +4,50 @@
     'checked' => false,
 ])
 
-<div class="float-left flex flex-col gap-1">
-    <!-- Label Text (Clickable) -->
+<div class="flex flex-col gap-1">
 
-    <label
-        for="{{ $name }}"
-        class="cursor-pointer text-sm font-medium text-slate-50"
-    >
+    <x-input.label for="{{ $name }}">
         {{ $label }}
-    </label>
+    </x-input.label>
 
-    <!-- Hidden Checkbox Input (Starts Unchecked) -->
     <input
         type="checkbox"
         id="{{ $name }}"
         name="{{ $name }}"
-        @if($checked) checked @endif
+        :checked="$checked"
         class="peer hidden"
     />
 
-    <!-- Custom Visual Checkbox -->
     <span
         tabindex="0"
         role="checkbox"
-        aria-checked="{{ $checked ? 'true' : 'false' }}"
-        class="h-6 w-6 cursor-pointer justify-center rounded border-2 border-slate-50 bg-indigo-400 peer-checked:border-indigo-400 peer-checked:bg-slate-50"
+        :aria-checked="$checked"
+        class="size-5 cursor-pointer justify-center rounded border-2 border-indigo-400 bg-slate-50 peer-checked:border-indigo-400 peer-checked:bg-indigo-400"
         onclick="toggleCheckbox('{{ $name }}')"
         onkeydown="handleKeyPress(event, '{{ $name }}')"
     >
-        <x-lucide-check class="h-5 w-5 text-slate-50" />
+        <x-lucide-check class="size-4 text-slate-50" />
     </span>
 </div>
 
 <script>
     function toggleCheckbox(checkboxId) {
         const checkbox = document.getElementById(checkboxId)
-        const visualCheckbox = checkbox.nextElementSibling // Get the <span>
+        const visualCheckbox = checkbox.nextElementSibling
 
-        checkbox.checked = !checkbox.checked // Toggle checkbox state
+        checkbox.checked = !checkbox.checked
         visualCheckbox.setAttribute(
             'aria-checked',
             checkbox.checked ? 'true' : 'false',
-        ) // Update aria-checked
-        checkbox.dispatchEvent(new Event('change')) // Fire change event for Livewire/Vue if needed
+        )
     }
 
     function handleKeyPress(event, checkboxId) {
         if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault() // Prevent scrolling on Space key
+            event.preventDefault()
             toggleCheckbox(checkboxId)
         }
     }
 </script>
+
+</div>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 94737e94..2570ec37 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -80,4 +80,5 @@ class="w-40"
             class="w-40"
         />
     </div>
+    <x-input.checkbox name="admin" label="Is admin:" checked="false" />
 </x-layout>

From 107d1867bffefaa35c045c7fdb9419715f196714 Mon Sep 17 00:00:00 2001
From: Albin Wrebo <78490851+beforeAW@users.noreply.github.com>
Date: Sat, 8 Feb 2025 13:15:11 +0100
Subject: [PATCH 4/6] fix: prettier div

---
 resources/views/components/input/checkbox.blade.php | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/resources/views/components/input/checkbox.blade.php b/resources/views/components/input/checkbox.blade.php
index d8ef969b..649d6fdb 100644
--- a/resources/views/components/input/checkbox.blade.php
+++ b/resources/views/components/input/checkbox.blade.php
@@ -5,7 +5,6 @@
 ])
 
 <div class="flex flex-col gap-1">
-
     <x-input.label for="{{ $name }}">
         {{ $label }}
     </x-input.label>
@@ -29,7 +28,6 @@ class="size-5 cursor-pointer justify-center rounded border-2 border-indigo-400 b
         <x-lucide-check class="size-4 text-slate-50" />
     </span>
 </div>
-
 <script>
     function toggleCheckbox(checkboxId) {
         const checkbox = document.getElementById(checkboxId)
@@ -49,5 +47,3 @@ function handleKeyPress(event, checkboxId) {
         }
     }
 </script>
-
-</div>

From e1bc8ec6e84babca24b038a348e55e979f09dda6 Mon Sep 17 00:00:00 2001
From: Albin Wrebo <78490851+beforeAW@users.noreply.github.com>
Date: Mon, 10 Feb 2025 15:07:54 +0100
Subject: [PATCH 5/6] fix: checkbox show null on input when not checked

---
 resources/views/components/input/checkbox.blade.php | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/resources/views/components/input/checkbox.blade.php b/resources/views/components/input/checkbox.blade.php
index 649d6fdb..bd49120e 100644
--- a/resources/views/components/input/checkbox.blade.php
+++ b/resources/views/components/input/checkbox.blade.php
@@ -13,27 +13,30 @@
         type="checkbox"
         id="{{ $name }}"
         name="{{ $name }}"
-        :checked="$checked"
         class="peer hidden"
     />
 
     <span
         tabindex="0"
         role="checkbox"
-        :aria-checked="$checked"
-        class="size-5 cursor-pointer justify-center rounded border-2 border-indigo-400 bg-slate-50 peer-checked:border-indigo-400 peer-checked:bg-indigo-400"
+        aria-checked="{{ $checked ? 'true' : 'false' }}"
+        class="flex size-5 cursor-pointer items-center justify-center rounded border-1 border-indigo-400 bg-slate-50 peer-checked:border-indigo-400 peer-checked:bg-indigo-400"
         onclick="toggleCheckbox('{{ $name }}')"
         onkeydown="handleKeyPress(event, '{{ $name }}')"
     >
-        <x-lucide-check class="size-4 text-slate-50" />
+        <x-lucide-check class="size-5 text-slate-50" />
     </span>
 </div>
 <script>
     function toggleCheckbox(checkboxId) {
         const checkbox = document.getElementById(checkboxId)
-        const visualCheckbox = checkbox.nextElementSibling
 
         checkbox.checked = !checkbox.checked
+        checkbox.setAttribute('checked', checkbox.checked ? 'checked' : null)
+
+        const visualCheckbox = document.querySelector(
+            `[aria-checked][role="checkbox"][tabindex="0"]`,
+        )
         visualCheckbox.setAttribute(
             'aria-checked',
             checkbox.checked ? 'true' : 'false',

From c84dd8f7f86fc5a627064678484441ce7004db1e Mon Sep 17 00:00:00 2001
From: Albin Wrebo <78490851+beforeAW@users.noreply.github.com>
Date: Mon, 10 Feb 2025 15:09:13 +0100
Subject: [PATCH 6/6] fix: remove from homepage

---
 resources/views/home.blade.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 2570ec37..94737e94 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -80,5 +80,4 @@ class="w-40"
             class="w-40"
         />
     </div>
-    <x-input.checkbox name="admin" label="Is admin:" checked="false" />
 </x-layout>