From 894f331e07e58f9a10cbda5cf0bcc63cc8d1ea34 Mon Sep 17 00:00:00 2001
From: saran13raj <saran13raj@gmail.com>
Date: Fri, 20 Sep 2024 10:17:51 +0530
Subject: [PATCH 1/7] feat: add toggle component

---
 src/components/Toggle.astro       | 124 ++++++++++++++++++++++++++++++
 src/content/pages/base/toggle.mdx |  33 ++++++++
 2 files changed, 157 insertions(+)
 create mode 100644 src/components/Toggle.astro
 create mode 100644 src/content/pages/base/toggle.mdx

diff --git a/src/components/Toggle.astro b/src/components/Toggle.astro
new file mode 100644
index 00000000..98927d03
--- /dev/null
+++ b/src/components/Toggle.astro
@@ -0,0 +1,124 @@
+---
+import type { Polymorphic } from 'astro/types'
+import Icon from 'fulldev-ui/components/Icon.astro'
+import Root from 'fulldev-ui/components/Root.astro'
+
+type Props<As extends 'div'> = Polymorphic<{ as: As }> & {
+  radius?: 'none' | 'auto' | 'full'
+  icon?: string
+  html?: string
+  text?: string
+  toggled: boolean
+}
+
+const {
+  as = 'div',
+  radius = 'auto',
+  name,
+  toggled,
+  icon,
+  html,
+  text,
+
+  ...rest
+} = Astro.props
+---
+
+<Root
+  class:list="toggle"
+  {as}
+  {radius}
+  {...rest}
+>
+  <label class="toggle-element">
+    <input
+      checked={toggled}
+      type="checkbox"
+      class="checkbox"
+    />
+    <div class="toggled">
+      <Icon name={icon} />
+      <slot>
+        <Fragment set:html={html} />
+        <Fragment set:text={text} />
+      </slot>
+    </div>
+  </label>
+</Root>
+
+<style is:global lang="scss">
+  .toggle {
+    .toggle-element {
+      position: relative;
+      align-items: center;
+      cursor: pointer;
+      border-radius: inherit;
+      color: var(--base-12);
+
+      .checkbox {
+        position: absolute;
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+
+      .toggled {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: var(--transition);
+        border-radius: inherit;
+        background-color: var(--base-1);
+        padding: 0 var(--space-4);
+        height: calc(var(--text-2) + 2 * var(--space-4));
+        line-height: 1;
+
+        .icon {
+          transition: inherit;
+          margin-right: var(--space-2);
+          color: var(--base-12);
+        }
+      }
+
+      .checkbox:hover ~ .toggled,
+      .checkbox:checked ~ .toggled {
+        background-color: var(--color-5);
+      }
+
+      .checkbox:checked ~ .toggled {
+        color: var(--base-12);
+      }
+
+      .checkbox:checked ~ .toggled .icon {
+        color: var(--base-12);
+      }
+
+      .checkbox:hover:not(:checked) ~ .toggled .icon {
+        color: var(--base-9);
+      }
+
+      &:hover {
+        background-color: var(--color-5);
+        color: var(--base-9);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+
+    &.radius-none {
+      border-radius: 0;
+    }
+
+    &.radius-auto {
+      border-radius: var(--radius-1);
+    }
+
+    &.radius-full {
+      border-radius: 9999px;
+    }
+  }
+</style>
diff --git a/src/content/pages/base/toggle.mdx b/src/content/pages/base/toggle.mdx
new file mode 100644
index 00000000..340ef56d
--- /dev/null
+++ b/src/content/pages/base/toggle.mdx
@@ -0,0 +1,33 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Toggle
+---
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle set:html="A" toggled={true} />
+<Toggle set:html="B" />
+```
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle icon={'code'} set:html="Auto save" toggled={true} />
+```
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle radius="none" set:html="Format on save" />
+<Toggle radius="auto" set:html="Format on save" />
+<Toggle radius="full" set:html="Format on save" />
+```

From 758e2e92124d19f0489bd71272c38ef31d07f60d Mon Sep 17 00:00:00 2001
From: saran13raj <saran13raj@gmail.com>
Date: Fri, 20 Sep 2024 10:33:13 +0530
Subject: [PATCH 2/7] fix: toggle classname & toggle.mdx content

---
 src/components/Toggle.astro       | 14 +++++++-------
 src/content/pages/base/toggle.mdx | 10 ++++++++++
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/Toggle.astro b/src/components/Toggle.astro
index 98927d03..7284c985 100644
--- a/src/components/Toggle.astro
+++ b/src/components/Toggle.astro
@@ -36,7 +36,7 @@ const {
       type="checkbox"
       class="checkbox"
     />
-    <div class="toggled">
+    <div class="toggle-content">
       <Icon name={icon} />
       <slot>
         <Fragment set:html={html} />
@@ -62,7 +62,7 @@ const {
         height: 0;
       }
 
-      .toggled {
+      .toggle-content {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -80,20 +80,20 @@ const {
         }
       }
 
-      .checkbox:hover ~ .toggled,
-      .checkbox:checked ~ .toggled {
+      .checkbox:hover ~ .toggle-content,
+      .checkbox:checked ~ .toggle-content {
         background-color: var(--color-5);
       }
 
-      .checkbox:checked ~ .toggled {
+      .checkbox:checked ~ .toggle-content {
         color: var(--base-12);
       }
 
-      .checkbox:checked ~ .toggled .icon {
+      .checkbox:checked ~ .toggle-content .icon {
         color: var(--base-12);
       }
 
-      .checkbox:hover:not(:checked) ~ .toggled .icon {
+      .checkbox:hover:not(:checked) ~ .toggle-content .icon {
         color: var(--base-9);
       }
 
diff --git a/src/content/pages/base/toggle.mdx b/src/content/pages/base/toggle.mdx
index 340ef56d..ab133eca 100644
--- a/src/content/pages/base/toggle.mdx
+++ b/src/content/pages/base/toggle.mdx
@@ -5,6 +5,10 @@ settings: components
 title: Toggle
 ---
 
+# Toggle
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
 ```astro live
 ---
 import Toggle from 'fulldev-ui/components/Toggle.astro'
@@ -14,6 +18,12 @@ import Toggle from 'fulldev-ui/components/Toggle.astro'
 <Toggle set:html="B" />
 ```
 
+## Props
+
+<PropsTable />
+
+## Examples
+
 ```astro live
 ---
 import Toggle from 'fulldev-ui/components/Toggle.astro'

From 04f815b7d1d2bce049701c620212562b4a0630ee Mon Sep 17 00:00:00 2001
From: saran13raj <saran13raj@gmail.com>
Date: Sat, 21 Sep 2024 22:03:37 +0530
Subject: [PATCH 3/7] style: add layer to toggle component

---
 src/components/Toggle.astro | 119 ++++++++++++++++++------------------
 1 file changed, 60 insertions(+), 59 deletions(-)

diff --git a/src/components/Toggle.astro b/src/components/Toggle.astro
index 7284c985..2513802e 100644
--- a/src/components/Toggle.astro
+++ b/src/components/Toggle.astro
@@ -19,7 +19,6 @@ const {
   icon,
   html,
   text,
-
   ...rest
 } = Astro.props
 ---
@@ -47,78 +46,80 @@ const {
 </Root>
 
 <style is:global lang="scss">
-  .toggle {
-    .toggle-element {
-      position: relative;
-      align-items: center;
-      cursor: pointer;
-      border-radius: inherit;
-      color: var(--base-12);
-
-      .checkbox {
-        position: absolute;
-        opacity: 0;
-        width: 0;
-        height: 0;
-      }
-
-      .toggle-content {
-        display: flex;
-        justify-content: center;
+  @layer fulldev {
+    .toggle {
+      .toggle-element {
+        position: relative;
         align-items: center;
-        transition: var(--transition);
+        cursor: pointer;
         border-radius: inherit;
-        background-color: var(--base-1);
-        padding: 0 var(--space-4);
-        height: calc(var(--text-2) + 2 * var(--space-4));
-        line-height: 1;
-
-        .icon {
-          transition: inherit;
-          margin-right: var(--space-2);
+        color: var(--base-12);
+
+        .checkbox {
+          position: absolute;
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+
+        .toggle-content {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          transition: var(--transition);
+          border-radius: inherit;
+          background-color: var(--base-1);
+          padding: 0 var(--space-4);
+          height: calc(var(--text-2) + 2 * var(--space-4));
+          line-height: 1;
+
+          .icon {
+            transition: inherit;
+            margin-right: var(--space-2);
+            color: var(--base-12);
+          }
+        }
+
+        .checkbox:hover ~ .toggle-content,
+        .checkbox:checked ~ .toggle-content {
+          background-color: var(--color-5);
+        }
+
+        .checkbox:checked ~ .toggle-content {
           color: var(--base-12);
         }
-      }
 
-      .checkbox:hover ~ .toggle-content,
-      .checkbox:checked ~ .toggle-content {
-        background-color: var(--color-5);
-      }
+        .checkbox:checked ~ .toggle-content .icon {
+          color: var(--base-12);
+        }
 
-      .checkbox:checked ~ .toggle-content {
-        color: var(--base-12);
-      }
+        .checkbox:hover:not(:checked) ~ .toggle-content .icon {
+          color: var(--base-9);
+        }
 
-      .checkbox:checked ~ .toggle-content .icon {
-        color: var(--base-12);
-      }
+        &:hover {
+          background-color: var(--color-5);
+          color: var(--base-9);
+        }
 
-      .checkbox:hover:not(:checked) ~ .toggle-content .icon {
-        color: var(--base-9);
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+          pointer-events: none;
+        }
       }
 
-      &:hover {
-        background-color: var(--color-5);
-        color: var(--base-9);
+      &.radius-none {
+        border-radius: 0;
       }
 
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        pointer-events: none;
+      &.radius-auto {
+        border-radius: var(--radius-1);
       }
-    }
-
-    &.radius-none {
-      border-radius: 0;
-    }
 
-    &.radius-auto {
-      border-radius: var(--radius-1);
-    }
-
-    &.radius-full {
-      border-radius: 9999px;
+      &.radius-full {
+        border-radius: 9999px;
+      }
     }
   }
 </style>

From a3acdf99916293ec99097e3351541460c5afd290 Mon Sep 17 00:00:00 2001
From: Jeremy Bosma <jectaunscripted@gmail.com>
Date: Tue, 15 Oct 2024 14:09:45 +0200
Subject: [PATCH 4/7] toggle component fix

---
 src/components/Toggle.astro | 105 +++++++++++++++++-------------------
 1 file changed, 50 insertions(+), 55 deletions(-)

diff --git a/src/components/Toggle.astro b/src/components/Toggle.astro
index 2513802e..2bd198fc 100644
--- a/src/components/Toggle.astro
+++ b/src/components/Toggle.astro
@@ -3,7 +3,7 @@ import type { Polymorphic } from 'astro/types'
 import Icon from 'fulldev-ui/components/Icon.astro'
 import Root from 'fulldev-ui/components/Root.astro'
 
-type Props<As extends 'div'> = Polymorphic<{ as: As }> & {
+type Props<As extends 'label'> = Polymorphic<{ as: As }> & {
   radius?: 'none' | 'auto' | 'full'
   icon?: string
   html?: string
@@ -12,7 +12,6 @@ type Props<As extends 'div'> = Polymorphic<{ as: As }> & {
 }
 
 const {
-  as = 'div',
   radius = 'auto',
   name,
   toggled,
@@ -24,82 +23,78 @@ const {
 ---
 
 <Root
-  class:list="toggle"
-  {as}
+  class:list={['toggle toggle-element']}
+  as="label"
   {radius}
   {...rest}
 >
-  <label class="toggle-element">
-    <input
-      checked={toggled}
-      type="checkbox"
-      class="checkbox"
-    />
-    <div class="toggle-content">
-      <Icon name={icon} />
-      <slot>
-        <Fragment set:html={html} />
-        <Fragment set:text={text} />
-      </slot>
-    </div>
-  </label>
+  <input
+    checked={toggled}
+    type="checkbox"
+    class="toggle-input"
+  />
+  <Icon name={icon} />
+  <slot>
+    <Fragment set:html={html} />
+    <Fragment set:text={text} />
+  </slot>
 </Root>
 
+<script>
+  document.querySelectorAll('.toggle-element').forEach((toggle) => {
+    const input = toggle.querySelector(
+      '.toggle-input'
+    ) as HTMLInputElement | null
+    if (input) {
+      input.addEventListener('change', () => {
+        toggle.classList.toggle('checked', input.checked)
+      })
+      toggle.classList.toggle('checked', input.checked)
+    }
+  })
+</script>
+
 <style is:global lang="scss">
   @layer fulldev {
     .toggle {
-      .toggle-element {
+      &.toggle-element {
+        display: flex;
         position: relative;
         align-items: center;
+        transition: var(--transition);
+        will-change: background-color, color;
         cursor: pointer;
         border-radius: inherit;
+        background-color: var(--base-1);
+        padding: 0 var(--space-4);
+        height: calc(var(--text-2) + 2 * var(--space-4));
         color: var(--base-12);
+        line-height: 1;
 
-        .checkbox {
-          position: absolute;
-          opacity: 0;
-          width: 0;
-          height: 0;
-        }
-
-        .toggle-content {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          transition: var(--transition);
-          border-radius: inherit;
-          background-color: var(--base-1);
-          padding: 0 var(--space-4);
-          height: calc(var(--text-2) + 2 * var(--space-4));
-          line-height: 1;
-
-          .icon {
-            transition: inherit;
-            margin-right: var(--space-2);
-            color: var(--base-12);
-          }
+        .icon {
+          transition: inherit;
+          margin-right: var(--space-2);
+          color: var(--base-12);
         }
 
-        .checkbox:hover ~ .toggle-content,
-        .checkbox:checked ~ .toggle-content {
+        &:hover {
           background-color: var(--color-5);
+          color: var(--base-11);
         }
 
-        .checkbox:checked ~ .toggle-content {
-          color: var(--base-12);
-        }
-
-        .checkbox:checked ~ .toggle-content .icon {
+        &.checked {
+          background-color: var(--color-5);
           color: var(--base-12);
-        }
 
-        .checkbox:hover:not(:checked) ~ .toggle-content .icon {
-          color: var(--base-9);
+          .icon {
+            color: var(--base-12);
+          }
         }
 
-        &:hover {
-          background-color: var(--color-5);
-          color: var(--base-9);
+        &:hover:not(.checked) {
+          .icon {
+            color: var(--base-11);
+          }
         }
 
         &:disabled {

From 8924792a8498066f4825da382a37f6d3187eb91a Mon Sep 17 00:00:00 2001
From: Jeremy Bosma <jectaunscripted@gmail.com>
Date: Tue, 15 Oct 2024 14:13:54 +0200
Subject: [PATCH 5/7] fix checkbox styling

---
 src/components/Toggle.astro | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/Toggle.astro b/src/components/Toggle.astro
index 2bd198fc..c17cb3b2 100644
--- a/src/components/Toggle.astro
+++ b/src/components/Toggle.astro
@@ -71,6 +71,13 @@ const {
         color: var(--base-12);
         line-height: 1;
 
+        input {
+          position: absolute;
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+
         .icon {
           transition: inherit;
           margin-right: var(--space-2);

From ae853f1fa1476704d3475eb8db740b194eb6e822 Mon Sep 17 00:00:00 2001
From: Jeremy Bosma <jectaunscripted@gmail.com>
Date: Tue, 15 Oct 2024 14:23:35 +0200
Subject: [PATCH 6/7] fix toggle examples

---
 src/content/pages/base/toggle.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/pages/base/toggle.mdx b/src/content/pages/base/toggle.mdx
index ab133eca..e90135f9 100644
--- a/src/content/pages/base/toggle.mdx
+++ b/src/content/pages/base/toggle.mdx
@@ -14,8 +14,8 @@ import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
 import Toggle from 'fulldev-ui/components/Toggle.astro'
 ---
 
-<Toggle set:html="A" toggled={true} />
-<Toggle set:html="B" />
+<Toggle text="A" toggled={true} />
+<Toggle text="B" />
 ```
 
 ## Props
@@ -29,7 +29,7 @@ import Toggle from 'fulldev-ui/components/Toggle.astro'
 import Toggle from 'fulldev-ui/components/Toggle.astro'
 ---
 
-<Toggle icon={'code'} set:html="Auto save" toggled={true} />
+<Toggle icon={'code'} text="Auto save" toggled={true} />
 ```
 
 ```astro live
@@ -37,7 +37,7 @@ import Toggle from 'fulldev-ui/components/Toggle.astro'
 import Toggle from 'fulldev-ui/components/Toggle.astro'
 ---
 
-<Toggle radius="none" set:html="Format on save" />
-<Toggle radius="auto" set:html="Format on save" />
-<Toggle radius="full" set:html="Format on save" />
+<Toggle radius="none" text="Format on save" />
+<Toggle radius="auto" text="Format on save" />
+<Toggle radius="full" text="Format on save" />
 ```

From d3a17aae2cf0b0221d4da5f6d33aa36edd966f23 Mon Sep 17 00:00:00 2001
From: Sil <silveltman@gmail.com>
Date: Tue, 15 Oct 2024 23:34:50 +0200
Subject: [PATCH 7/7] toggle finished

---
 src/components/Button.astro       |   6 +-
 src/components/Toggle.astro       | 137 ++++++------------------------
 src/content/pages/base/toggle.mdx |  13 +--
 3 files changed, 31 insertions(+), 125 deletions(-)

diff --git a/src/components/Button.astro b/src/components/Button.astro
index 5cd329b6..65532fa3 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -37,10 +37,8 @@ const {
 >
   <Avatar src={avatar} />
   <Icon name={icon} />
-  <slot>
-    <Fragment set:html={html} />
-    <Fragment set:text={text} />
-  </slot>
+  <Fragment set:html={html} />
+  <Fragment set:text={text} />
 </Root>
 
 <style is:global lang="scss">
diff --git a/src/components/Toggle.astro b/src/components/Toggle.astro
index c17cb3b2..744639a9 100644
--- a/src/components/Toggle.astro
+++ b/src/components/Toggle.astro
@@ -1,126 +1,45 @@
 ---
 import type { Polymorphic } from 'astro/types'
-import Icon from 'fulldev-ui/components/Icon.astro'
-import Root from 'fulldev-ui/components/Root.astro'
+import { uid } from 'radash'
+import Button from './Button.astro'
 
 type Props<As extends 'label'> = Polymorphic<{ as: As }> & {
-  radius?: 'none' | 'auto' | 'full'
-  icon?: string
-  html?: string
-  text?: string
-  toggled: boolean
+  color?: 'base' | 'brand' | undefined
+  id?: string | undefined
+  name?: string | undefined
+  icon?: string | undefined
+  html?: string | undefined
+  text?: string | undefined
+  toggled: boolean | undefined
 }
 
-const {
-  radius = 'auto',
-  name,
-  toggled,
-  icon,
-  html,
-  text,
-  ...rest
-} = Astro.props
+const { id = uid(7), toggled, name, ...rest } = Astro.props
 ---
 
-<Root
-  class:list={['toggle toggle-element']}
+<input
+  class="toggle-checkbox"
+  checked={toggled}
+  type="checkbox"
+  id={id}
+  name={name ?? id}
+/>
+
+<Button
+  class:list="toggle"
+  variant="tertiary"
   as="label"
-  {radius}
+  for={id}
   {...rest}
->
-  <input
-    checked={toggled}
-    type="checkbox"
-    class="toggle-input"
-  />
-  <Icon name={icon} />
-  <slot>
-    <Fragment set:html={html} />
-    <Fragment set:text={text} />
-  </slot>
-</Root>
-
-<script>
-  document.querySelectorAll('.toggle-element').forEach((toggle) => {
-    const input = toggle.querySelector(
-      '.toggle-input'
-    ) as HTMLInputElement | null
-    if (input) {
-      input.addEventListener('change', () => {
-        toggle.classList.toggle('checked', input.checked)
-      })
-      toggle.classList.toggle('checked', input.checked)
-    }
-  })
-</script>
+/>
 
 <style is:global lang="scss">
   @layer fulldev {
-    .toggle {
-      &.toggle-element {
-        display: flex;
-        position: relative;
-        align-items: center;
-        transition: var(--transition);
-        will-change: background-color, color;
-        cursor: pointer;
-        border-radius: inherit;
-        background-color: var(--base-1);
-        padding: 0 var(--space-4);
-        height: calc(var(--text-2) + 2 * var(--space-4));
-        color: var(--base-12);
-        line-height: 1;
-
-        input {
-          position: absolute;
-          opacity: 0;
-          width: 0;
-          height: 0;
-        }
-
-        .icon {
-          transition: inherit;
-          margin-right: var(--space-2);
-          color: var(--base-12);
-        }
-
-        &:hover {
-          background-color: var(--color-5);
-          color: var(--base-11);
-        }
-
-        &.checked {
-          background-color: var(--color-5);
-          color: var(--base-12);
-
-          .icon {
-            color: var(--base-12);
-          }
-        }
+    .toggle-checkbox {
+      display: none;
 
-        &:hover:not(.checked) {
-          .icon {
-            color: var(--base-11);
-          }
-        }
-
-        &:disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-          pointer-events: none;
-        }
-      }
-
-      &.radius-none {
-        border-radius: 0;
-      }
-
-      &.radius-auto {
-        border-radius: var(--radius-1);
-      }
-
-      &.radius-full {
-        border-radius: 9999px;
+      &:checked + .toggle {
+        background-color: var(--color-5);
+        color: var(--base-12);
       }
     }
   }
diff --git a/src/content/pages/base/toggle.mdx b/src/content/pages/base/toggle.mdx
index e90135f9..c389a2f2 100644
--- a/src/content/pages/base/toggle.mdx
+++ b/src/content/pages/base/toggle.mdx
@@ -14,8 +14,7 @@ import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
 import Toggle from 'fulldev-ui/components/Toggle.astro'
 ---
 
-<Toggle text="A" toggled={true} />
-<Toggle text="B" />
+<Toggle text="Click me" icon="click" />
 ```
 
 ## Props
@@ -31,13 +30,3 @@ import Toggle from 'fulldev-ui/components/Toggle.astro'
 
 <Toggle icon={'code'} text="Auto save" toggled={true} />
 ```
-
-```astro live
----
-import Toggle from 'fulldev-ui/components/Toggle.astro'
----
-
-<Toggle radius="none" text="Format on save" />
-<Toggle radius="auto" text="Format on save" />
-<Toggle radius="full" text="Format on save" />
-```