From 05c62d410a92f7c844e8769534b6fc95bfb63664 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 9 Oct 2024 09:17:30 +0300
Subject: [PATCH] Add toggle and selectbutton

---
 assets/styles/presets/aura/components.css   |  2 +
 assets/styles/presets/aura/selectbutton.css | 23 +++++++++
 assets/styles/presets/aura/togglebutton.css | 55 +++++++++++++++++++++
 3 files changed, 80 insertions(+)
 create mode 100644 assets/styles/presets/aura/selectbutton.css
 create mode 100644 assets/styles/presets/aura/togglebutton.css

diff --git a/assets/styles/presets/aura/components.css b/assets/styles/presets/aura/components.css
index 38dd5625..b2786eb8 100644
--- a/assets/styles/presets/aura/components.css
+++ b/assets/styles/presets/aura/components.css
@@ -7,7 +7,9 @@
 @import './knob';
 @import './radiobutton';
 @import './rating';
+@import './selectbutton';
 @import './slider';
+@import './togglebutton';
 @import './toggleswitch';
 
 /* Panel */
diff --git a/assets/styles/presets/aura/selectbutton.css b/assets/styles/presets/aura/selectbutton.css
new file mode 100644
index 00000000..c7ebb56e
--- /dev/null
+++ b/assets/styles/presets/aura/selectbutton.css
@@ -0,0 +1,23 @@
+.p-selectbutton {
+    @apply inline-flex select-none rounded-md
+}
+
+.p-selectbutton .p-togglebutton {
+    @apply rounded-none border-y border-r border-l-0
+}
+
+.p-selectbutton .p-togglebutton:focus-visible {
+    @apply relative z-10
+}
+
+.p-selectbutton .p-togglebutton:first-child {
+    @apply border-l rounded-l-md
+}
+
+.p-selectbutton .p-togglebutton:last-child {
+    @apply rounded-r-md
+}
+
+.p-selectbutton.p-invalid {
+    @apply outline outline-offset-0 outline-red-400 dark:outline-red-300
+}
\ No newline at end of file
diff --git a/assets/styles/presets/aura/togglebutton.css b/assets/styles/presets/aura/togglebutton.css
new file mode 100644
index 00000000..0ed908f7
--- /dev/null
+++ b/assets/styles/presets/aura/togglebutton.css
@@ -0,0 +1,55 @@
+.p-togglebutton {
+    @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none
+        border border-surface-100 dark:border-surface-950 rounded-md
+        bg-surface-100 dark:bg-surface-950
+        text-surface-500 dark:text-surface-400 text-base font-medium
+        px-4 py-2
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        disabled:opacity-100 disabled:cursor-default 
+        disabled:bg-surface-200 disabled:border-surface-200 disabled:text-surface-500
+        disabled:dark:bg-surface-700 disabled:dark:border-surface-700 disabled:dark:text-surface-400
+        transition-colors duration-300
+        before:bg-transparent before:absolute before:left-1 before:top-1 before:rounded-md before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)]
+        before:transition-colors before:duration-200
+}
+
+.p-togglebutton-content {
+    @apply relative inline-flex items-center justify-center gap-2
+}
+
+.p-togglebutton-label,
+.p-togglebutton-icon {
+    @apply relative transition-none
+}
+
+.p-togglebutton.p-togglebutton-checked::before {
+    @apply bg-surface-0 dark:bg-surface-800 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]
+}
+
+.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
+    @apply bg-surface-100 dark:bg-surface-950 text-surface-700 dark:text-surface-300
+}
+
+.p-togglebutton.p-togglebutton-checked {
+    @apply bg-surface-100 dark:bg-surface-950 border-surface-100 dark:border-surface-950 text-surface-900 dark:text-surface-0
+}
+
+.p-togglebutton.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-togglebutton-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {
+    @apply text-surface-700 dark:text-surface-300
+}
+
+.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {
+    @apply text-surface-900 dark:text-surface-0
+}
+
+.p-togglebutton:disabled .p-togglebutton-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
\ No newline at end of file