feat: css shorthands for generic select toggle

src/client/src/css/main.css

@@ -184,6 +184,55 @@
     @apply text-xs text-gray-500 dark:text-neutral-500;
 }
 
+/* Normal Select */
+
+.cj-select-toggle {
+    @apply form-select hs-select-disabled:pointer-events-none
+    hs-select-disabled:opacity-50 relative py-2 px-3 pe-9 flex text-nowrap w-full
+    cursor-pointer border rounded-lg text-start text-sm shadow-xs
+    focus:outline-hidden before:absolute before:inset-0 before:z-1
+    text-gray-800
+    bg-white
+    border-gray-200
+    /* hover:bg-gray-50
+    focus:bg-gray-50 */
+    dark:text-neutral-200
+    dark:bg-neutral-900
+    dark:border-neutral-700
+    /* dark:hover:bg-neutral-800
+    dark:focus:bg-neutral-800; */
+    peer-invalid:group-[.submitted]:border-red-500
+    peer-invalid:group-[.submitted]:ring-red-500
+}
+
+.cj-select-option {
+    @apply py-2 px-3 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100
+    rounded-lg focus:outline-hidden focus:bg-gray-100 dark:bg-neutral-900
+    dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800;
+}
+
+.cj-select-dropdown {
+    @apply
+        z-80
+        w-full
+        min-h-[100px]
+        max-h-72
+        p-1.5
+        space-y-0.5
+        bg-white
+        border
+        border-gray-200 rounded-lg overflow-hidden
+        overflow-y-auto
+        [&::-webkit-scrollbar]:w-2
+        [&::-webkit-scrollbar-thumb]:rounded-full
+        [&::-webkit-scrollbar-track]:rounded-full
+        [&::-webkit-scrollbar-track]:bg-gray-100
+        [&::-webkit-scrollbar-thumb]:bg-gray-300
+        dark:[&::-webkit-scrollbar-track]:bg-neutral-700
+        dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500
+        dark:bg-neutral-900
+        dark:border-neutral-700;
+}
 
 
 /* Layout Sidebar */
@@ -236,4 +285,32 @@
 
 .text-input-help {
     @apply mt-2 text-sm text-gray-500 dark:text-neutral-500
+}
+
+.select-input {
+    @apply
+        relative
+        py-3
+        ps-4
+        pe-9
+        flex
+        gap-x-2
+        text-nowrap
+        w-full
+        cursor-pointer
+        bg-white
+        border
+        border-gray-200
+        rounded-lg
+        text-start
+        text-sm
+        focus:outline-hidden
+        focus:ring-2
+        focus:ring-blue-500
+        dark:bg-neutral-900
+        dark:border-neutral-700
+        dark:text-neutral-400
+        dark:focus:outline-hidden
+        dark:focus:ring-1
+        dark:focus:ring-neutral-600
 }