fulldotdev · silveltman · Oct 15, 2024 · Sep 20, 2024 · Sep 20, 2024 · Sep 21, 2024
@@ -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">

@@ -0,0 +1,46 @@
+---
+import type { Polymorphic } from 'astro/types'
+import { uid } from 'radash'
+import Button from './Button.astro'
+
+type Props<As extends 'label'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand' | undefined
+  id?: string | undefined
+  name?: string | undefined
+  icon?: string | undefined
+  html?: string | undefined
+  text?: string | undefined
+  toggled: boolean | undefined
+}
+
+const { id = uid(7), toggled, name, ...rest } = Astro.props
+---
+
+<input
+  class="toggle-checkbox"
+  checked={toggled}
+  type="checkbox"
+  id={id}
+  name={name ?? id}
+/>
+
+<Button
+  class:list="toggle"
+  variant="tertiary"
+  as="label"
+  for={id}
+  {...rest}
+/>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .toggle-checkbox {
+      display: none;
+
+      &:checked + .toggle {
+        background-color: var(--color-5);
+        color: var(--base-12);
+      }
+    }
+  }
+</style>
@@ -0,0 +1,32 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Toggle
+---
+
+# Toggle
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle text="Click me" icon="click" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle icon={'code'} text="Auto save" toggled={true} />
+```