better switch

Author: QuentinGab

resources/css/components/switch.css

@@ -1,15 +1,40 @@
 @layer components {
     .el-switch {
-        @apply appearance-none w-10 cursor-pointer inline-block border-0 h-3
-                before:absolute before:top-0 before:inline-block before:rounded-xl before:outline-offset-2 before:w-10 before:h-full before:shadow-[inset_0_0_#000]
+        @apply appearance-none cursor-pointer inline-block border-0 w-10 h-lh relative rounded-xl align-text-bottom
+                before:absolute before:top-0 before:inline-block before:outline-offset-2 before:w-full before:h-full before:shadow-[inset_0_0_#000]
                 dark:before:bg-gray-600
-                after:absolute after:top-0 after:block after:rounded-xl after:w-5 after:h-[calc(100%-4px)] after:mt-0.5 after:ml-0.5 after:shadow-md after:duration-100 after:bg-white
+                after:absolute after:top-0 after:block after:w-1/2 after:m-0.5 after:shadow-md after:duration-100 after:bg-white
                 dark:after:bg-gray-50
-                checked:after:duration-300 checked:after:translate-x-4
+                checked:after:duration-300
                 disabled:cursor-not-allowed disabled:opacity-50
                 focus:ring-offset-transparent focus:ring-transparent focus-within:ring-0 focus:shadow-none focus:before:outline-2
                 dark:border-0 dark:focus:ring-offset-transparent dark:focus:ring-transparent dark:focus-within:ring-0 dark:focus:shadow-none;
 
+        &::before {
+            border-radius: inherit;
+        }
+
+        &::after {
+            border-radius: inherit;
+            height: calc(100% - calc(var(--spacing)));
+        }
+
+        &:checked::after {
+            transform: translateX(calc(100% - calc(var(--spacing))));
+        }
+
+        &.rounded::after {
+            @apply rounded-xs;
+        }
+
+        &.rounded-md::after {
+            @apply rounded;
+        }
+
+        &.rounded-lg::after {
+            @apply rounded-md;
+        }
+
         &[data-color="white"] {
             @apply before:bg-gray-300 checked:before:bg-white dark:before:bg-gray-600 dark:checked:before:bg-black;
         }

resources/views/components/switch/base.blade.php

@@ -1,13 +1,9 @@
 @props([
-    'class' => null,
-    'style' => null,
-    'id' => null,
+    'disabled' => false,
+    'checked' => false,
+    'required' => false,
+    'color' => 'emerald',
 ])
 
-<label @class(['flex items-start gap-2 cursor-pointer', $class]) @style($style)
-    @if ($id) for="{{ $id }}" @endif>
-    <span class="relative">
-        <x-kit::switch.base :attributes="$attributes" :id="$id" />
-    </span>
-    {{ $slot }}
-</label>
+<input {!! $attributes->class(['el-switch']) !!} data-color="{{ $color }}" type="checkbox" @disabled($disabled)
+    @checked($checked) @required($required)>

resources/views/components/switch/index.blade.php

@@ -355,16 +355,25 @@ class="rounded ring-1 ring-inset">
             <div class="p-3">
                 <h1 class="font-semibold">Switch</h1>
             </div>
-            <div class="flex grow items-center justify-center border-b border-gray-200">
-                <x-kit::switch>
-                    Switch
-                </x-kit::switch>
-                <x-kit::switch class="text-sm">
-                    Switch
-                </x-kit::switch>
-                <x-kit::switch>
-                    Switch
-                </x-kit::switch>
+            <div class="flex grow flex-col items-center justify-center gap-3 border-b border-gray-200">
+                <div>
+                    <x-kit::switch class="" checked />
+                    <x-kit::switch class="" checked disabled />
+                    <x-kit::switch class="" disabled />
+                </div>
+                <div>
+                    <x-kit::switch class="rounded" />
+                    <x-kit::switch class="rounded-md" />
+                    <x-kit::switch class="rounded-lg" />
+                    <x-kit::switch class="" />
+
+                </div>
+                <div>
+                    <x-kit::switch class="text-xs" />
+                    <x-kit::switch class="text-sm" />
+                    <x-kit::switch class="text-base" />
+                    <x-kit::switch class="text-lg" />
+                </div>
             </div>
         </div>
 
@@ -373,9 +382,10 @@ class="rounded ring-1 ring-inset">
                 <h1 class="font-semibold">Disabled Switch</h1>
             </div>
             <div class="flex grow items-center justify-center border-b border-gray-200">
-                <x-kit::switch disabled checked>
+                <label class="">
+                    <x-kit::switch checked class="text-sm" />
                     Switch
-                </x-kit::switch>
+                </label>
             </div>
         </div>