final touches

app/src/components/aside.gleam

@@ -36,7 +36,7 @@ fn item(route: Pages, page: Page) -> Element(a) {
         h3([], [
           a(
             [
-              class("pl-6 border-l-2 py-2"),
+              class("pl-6 border-l py-1.5"),
               active_variant(is_active(route, page.path)),
               active_border(is_active(route, page.path)),
               href(page.path),

app/src/components/header/header.gleam

@@ -13,7 +13,7 @@ pub fn header(route: Pages) -> Element(a) {
     [
       class(
         [
-          "sticky top-0 container py-4 bg-background z-30",
+          "sticky top-0 container py-4 bg-background/50 backdrop-blur-md z-30",
           "flex gap-4 items-center justify-between",
         ]
         |> string.join(" "),

app/src/components/markdown.gleam

@@ -1,8 +1,8 @@
+import components/prose.{prose}
+import gleam/string
 import kirala/markdown/html_renderer
 import lustre/attribute.{attribute, class}
 import lustre/element.{type Element}
-import components/prose.{prose}
-import gleam/string
 
 pub fn from_text(text: String) -> Element(a) {
   text
@@ -17,8 +17,5 @@ fn parse(md: String) -> String {
 }
 
 fn dangerous_unescaped_html(content: String) -> Element(a) {
-  prose(
-    [attribute("dangerous-unescaped-html", content), class("w-full")],
-    [],
-  )
+  prose([attribute("dangerous-unescaped-html", content), class("w-full")], [])
 }

app/src/components/nav.gleam

@@ -17,7 +17,7 @@ pub fn nav(route: Pages) -> Element(a) {
       item(route, route.components),
       item(route, route.docs),
       // item(route, route.blog),
-      // item(route, route.demo),
+    // item(route, route.demo),
     ]),
   ])
 }

app/src/components/ui/chip.gleam

@@ -13,7 +13,10 @@ pub type Colors {
   Danger
 }
 
-pub fn chip(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a) {
+pub fn chip(
+  attributes: List(Attribute(a)),
+  children: List(Element(a)),
+) -> Element(a) {
   div(
     [
       class(
@@ -38,7 +41,7 @@ pub fn solid(color: Colors) -> Attribute(a) {
   |> class
 }
 
-pub fn outline(color: Colors) -> Attribute(a) {
+pub fn outlined(color: Colors) -> Attribute(a) {
   case color {
     Neutral -> "outline-neutral text-neutral"
     Primary -> "outline-primary text-primary"

app/src/components/ui/link.gleam

@@ -13,7 +13,10 @@ pub type Colors {
   Danger
 }
 
-pub fn a(attributes: List(Attribute(a)), children: List(Element(a))) -> Element(a) {
+pub fn a(
+  attributes: List(Attribute(a)),
+  children: List(Element(a)),
+) -> Element(a) {
   html.a(
     [
       class(

app/src/components/ui/switch.gleam

@@ -0,0 +1,126 @@
+import gleam/string
+import lustre/attribute.{type Attribute, class, type_}
+import lustre/element.{type Element}
+import lustre/element/html.{div, input, label}
+
+pub type Colors {
+  Neutral
+  Primary
+  Secondary
+  Success
+  Info
+  Warning
+  Danger
+}
+
+pub fn switch(
+  attributes: List(Attribute(a)),
+  children: List(Element(a)),
+) -> Element(a) {
+  label(
+    [
+      class(
+        "inline-flex items-center gap-4 cursor-pointer has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
+      ),
+    ],
+    [
+      input([type_("checkbox"), class("sr-only peer"), ..attributes]),
+      div(
+        [
+          class(
+            [
+              "relative rounded-full",
+              "peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full",
+              "after:absolute after:top-0.5 after:start-0.5 after:rounded-full after:transition-all",
+            ]
+            |> string.join(" "),
+          ),
+        ],
+        [],
+      ),
+      ..children
+    ],
+  )
+}
+
+pub fn solid(color: Colors) -> Attribute(a) {
+  case color {
+    Neutral ->
+      "[&:checked+div]:bg-neutral [&:checked+div]:after:bg-neutral-foreground"
+    Primary ->
+      "[&:checked+div]:bg-primary [&:checked+div]:after:bg-primary-foreground"
+    Secondary ->
+      "[&:checked+div]:bg-secondary [&:checked+div]:after:bg-secondary-foreground"
+    Success ->
+      "[&:checked+div]:bg-success [&:checked+div]:after:bg-success-foreground"
+    Info -> "[&:checked+div]:bg-info [&:checked+div]:after:bg-info-foreground"
+    Warning ->
+      "[&:checked+div]:bg-warning [&:checked+div]:after:bg-warning-foreground"
+    Danger ->
+      "[&:checked+div]:bg-danger [&:checked+div]:after:bg-danger-foreground"
+  }
+  |> string.append(" [&+div]:bg-neutral [&+div]:after:bg-neutral-foreground")
+  |> class
+}
+
+pub fn outlined(color: Colors) -> Attribute(a) {
+  case color {
+    Neutral ->
+      "[&:checked+div]:outline-neutral [&:checked+div]:after:bg-neutral"
+    Primary ->
+      "[&:checked+div]:outline-primary [&:checked+div]:after:bg-primary"
+    Secondary ->
+      "[&:checked+div]:outline-secondary [&:checked+div]:after:bg-secondary"
+    Success ->
+      "[&:checked+div]:outline-success [&:checked+div]:after:bg-success"
+    Info -> "[&:checked+div]:outline-info [&:checked+div]:after:bg-info"
+    Warning ->
+      "[&:checked+div]:outline-warning [&:checked+div]:after:bg-warning"
+    Danger -> "[&:checked+div]:outline-danger [&:checked+div]:after:bg-danger"
+  }
+  |> string.append(
+    " [&+div]:outline [&+div]:outline-2 [&+div]:outline-neutral [&+div]:bg-neutral-foreground [&+div]:after:bg-neutral",
+  )
+  |> class
+}
+
+pub fn ghost(color: Colors) -> Attribute(a) {
+  case color {
+    Neutral ->
+      "[&:checked+div]:ring-neutral [&:checked+div]:bg-neutral [&:checked+div]:after:bg-neutral-foreground"
+    Primary ->
+      "[&:checked+div]:ring-primary [&:checked+div]:bg-primary [&:checked+div]:after:bg-primary-foreground"
+    Secondary ->
+      "[&:checked+div]:ring-secondary [&:checked+div]:bg-secondary [&:checked+div]:after:bg-secondary-foreground"
+    Success ->
+      "[&:checked+div]:ring-success [&:checked+div]:bg-success [&:checked+div]:after:bg-success-foreground"
+    Info ->
+      "[&:checked+div]:ring-info [&:checked+div]:bg-info [&:checked+div]:after:bg-info-foreground"
+    Warning ->
+      "[&:checked+div]:ring-warning [&:checked+div]:bg-warning [&:checked+div]:after:bg-warning-foreground"
+    Danger ->
+      "[&:checked+div]:ring-danger [&:checked+div]:bg-danger [&:checked+div]:after:bg-danger-foreground"
+  }
+  |> string.append(
+    " [&+div]:ring [&+div]:ring-2 [&+div]:ring-neutral [&+div]:bg-neutral-foreground [&+div]:after:bg-neutral [&+div]:after:bg-neutral",
+  )
+  |> class
+}
+
+pub fn sm() -> Attribute(a) {
+  class(
+    "[&+div]:text-sm [&+div]:w-9 [&+div]:h-5 [&+div]:after:h-4 [&+div]:after:w-4 [&:enabled+div]:hover:after:w-5 [&:checked:enabled+div]:hover:after:w-4",
+  )
+}
+
+pub fn md() -> Attribute(a) {
+  class(
+    "[&+div]:text-md [&+div]:w-11 [&+div]:h-6 [&+div]:after:h-5 [&+div]:after:w-5 [&:enabled+div]:hover:after:w-6 [&:checked:enabled+div]:hover:after:w-5",
+  )
+}
+
+pub fn lg() -> Attribute(a) {
+  class(
+    "[&+div]:text-lg [&+div]:w-[3.25rem] [&+div]:h-7 [&+div]:after:h-6 [&+div]:after:w-6 [&:enabled+div]:hover:after:w-7 [&:checked:enabled+div]:hover:after:w-6",
+  )
+}

app/src/gleez_ui.gleam

@@ -1,4 +1,5 @@
 import components/aside.{aside}
+import components/barbecue.{barbecue}
 import components/header/header.{header}
 import gleam/dynamic
 import gleam/option.{type Option, None, Some}
@@ -9,11 +10,10 @@ import lustre/effect.{type Effect, batch}
 import lustre/element.{type Element}
 import lustre/element/html.{div}
 import lustre_http.{type HttpError}
+import model/repo.{type Repo, Repo}
+import model/route.{type Pages}
 import modem
 import pages/page
-import model/route.{type Pages}
-import model/repo.{type Repo, Repo}
-import components/barbecue.{barbecue}
 
 pub fn main() {
   let app = lustre.application(init, update, view)
@@ -22,7 +22,7 @@ pub fn main() {
 
 fn init(_) -> #(Model, Effect(Msg)) {
   #(
-    Model(page: route.Intro, repo: None),
+    Model(page: route.Home, repo: None),
     batch([fetch_stargazers_count(), modem.init(on_url_change), on_load()]),
   )
 }
@@ -44,6 +44,7 @@ fn on_url_change(uri: Uri) -> Msg {
     ["docs", "components", "avatar"] -> OnRouteChange(route.Avatar)
     ["docs", "components", "badge"] -> OnRouteChange(route.Badge)
     ["docs", "components", "breadcrumbs"] -> OnRouteChange(route.Breadcrumbs)
+    ["docs", "components", "switch"] -> OnRouteChange(route.Switch)
     _ -> OnRouteChange(route.Home)
   }
 }
@@ -129,6 +130,7 @@ fn with_aside(model: Model) -> Element(Msg) {
         route.Avatar -> page.avatar()
         route.Badge -> page.badge()
         route.Breadcrumbs -> page.breadcrumbs()
+        route.Switch -> page.switch()
         _ -> page.home()
       },
     ]),

app/src/model/route.gleam

@@ -20,6 +20,7 @@ pub type Pages {
   Avatar
   Badge
   Breadcrumbs
+  Switch
 }
 
 pub const home = "/"
@@ -56,14 +57,7 @@ pub const badge = "/docs/components/badge"
 
 pub const breadcrumbs = "/docs/components/breadcrumbs"
 
-// TODO:
-pub const alert = "/docs/components/alert"
-
-pub const textarea = "/docs/components/textarea"
-
-pub const code = "/docs/components/code"
-
-pub const skeleton = "/docs/components/skeleton"
+pub const switch = "/docs/components/switch"
 
 pub type Page {
   Page(path: String, sub_pages: List(Page))
@@ -84,6 +78,7 @@ pub fn pages() -> List(Page) {
         Page(avatar, []),
         Page(badge, []),
         Page(breadcrumbs, []),
+        Page(switch, []),
       ]
         |> sort_pages,
     ),
@@ -108,6 +103,7 @@ pub fn to_path(page: Pages) -> String {
     Installation -> installation
     Badge -> badge
     Breadcrumbs -> breadcrumbs
+    Switch -> switch
   }
 }
 

app/src/pages/demo/demo.gleam

@@ -1,22 +1,18 @@
-import components/ui/breadcrumbs.{breadcrumbs}
-import components/ui/link.{a}
-import lustre/attribute.{class}
+import components/ui/switch.{switch}
+import lustre/attribute.{class, disabled}
 import lustre/element.{type Element, text}
 import lustre/element/html.{div}
-import lustre/ui/icon
 
 pub fn demo() -> Element(a) {
-  div([class("flex flex-col items-center gap-4")], [
-    breadcrumbs(
-      [breadcrumbs.light(breadcrumbs.Neutral), breadcrumbs.md()],
-      icon.chevron_right([class("w-4")]),
-      [
-        a([], [icon.home([class("w-4")]), text("Home")]),
-        a([], [icon.input([class("w-4")]), text("Music")]),
-        a([], [icon.person([class("w-4")]), text("Artist")]),
-        a([], [icon.card_stack_minus([class("w-4")]), text("Album")]),
-        a([], [icon.heart([class("w-4")]), text("Songs")]),
-      ],
-    ),
+  div([class("flex flex-wrap gap-4 items-center justify-center w-full")], [
+    switch([switch.solid(switch.Neutral), switch.sm(), disabled(True)], [
+      text("Disabled"),
+    ]),
+    switch([switch.outlined(switch.Neutral), switch.sm(), disabled(True)], [
+      text("Disabled"),
+    ]),
+    switch([switch.ghost(switch.Neutral), switch.sm(), disabled(True)], [
+      text("Disabled"),
+    ]),
   ])
 }

app/src/pages/docs/components/avatar/avatar.gleam

@@ -1,8 +1,8 @@
 import components/prose.{prose}
 import lustre/element.{type Element}
 import pages/docs/components/avatar/attributes.{attributes}
-import pages/docs/components/avatar/variants.{variants}
 import pages/docs/components/avatar/examples.{examples}
+import pages/docs/components/avatar/variants.{variants}
 import pages/docs/sections/section
 
 pub fn docs() -> Element(a) {

app/src/pages/docs/components/badge/variants.gleam

@@ -48,7 +48,7 @@ pub fn variants() -> Element(a) {
       solid_code(),
     ),
     section.variant(
-      "Outline",
+      "Outlined",
       "",
       [
         badge(

app/src/pages/docs/components/breadcrumbs/breadcrumbs.gleam

@@ -1,8 +1,8 @@
 import components/prose.{prose}
 import lustre/element.{type Element}
 import pages/docs/components/breadcrumbs/attributes.{attributes}
-import pages/docs/components/breadcrumbs/variants.{variants}
 import pages/docs/components/breadcrumbs/examples.{examples}
+import pages/docs/components/breadcrumbs/variants.{variants}
 import pages/docs/sections/section
 
 pub fn docs() -> Element(a) {

app/src/pages/docs/components/breadcrumbs/examples.gleam

@@ -1,10 +1,7 @@
-import components/ui/avatar.{avatar}
 import components/ui/breadcrumbs.{breadcrumbs}
-import components/ui/button.{button}
 import components/ui/link.{a}
-import components/ui/tooltip.{tooltip}
-import lustre/attribute.{class, disabled, src}
-import lustre/element.{type Element, fragment, text}
+import lustre/attribute.{class}
+import lustre/element.{type Element, text}
 import lustre/ui/icon
 import pages/docs/sections/section
 

app/src/pages/docs/components/button/button.gleam

@@ -1,9 +1,9 @@
+import components/prose.{prose}
 import lustre/element.{type Element}
 import pages/docs/components/button/attributes.{attributes}
 import pages/docs/components/button/examples.{examples}
 import pages/docs/components/button/variants.{variants}
 import pages/docs/sections/section
-import components/prose.{prose}
 
 pub fn docs() -> Element(a) {
   prose([], [