@elmethis/qwik 0.0.22 → 0.0.23

package/lib/index.qwik.mjs

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "@builder.io/qwik/jsx-runtime";
-import { component$, Slot, useSignal, useTask$, $, useComputed$, useId, useOnDocument, useVisibleTask$, useContextProvider, createContextId, useContext, Fragment as Fragment$1 } from "@builder.io/qwik";
-import { mdiCodeTags, mdiClipboardCheckMultipleOutline, mdiClipboardMultipleOutline, mdiChevronRight, mdiPlus, mdiMagnify, mdiLinkVariant, mdiArchive, mdiTag, mdiEarth, mdiKey, mdiLock, mdiAccount, mdiEmail, mdiPen, mdiText, mdiEyeOutline, mdiEyeOffOutline, mdiBackspaceOutline, mdiMessageImageOutline, mdiFile, mdiDownload, mdiHome, mdiApplicationOutline, mdiFolderOpen, mdiFormatQuoteOpen, mdiFormatQuoteClose, mdiAlertOctagram, mdiAlert, mdiShieldAlert, mdiLightbulbOn, mdiInformation } from "@mdi/js";
+import { component$, Slot, useSignal, useTask$, $, useComputed$, useOnDocument, useId, useVisibleTask$, useContextProvider, createContextId, useContext, Fragment as Fragment$1 } from "@builder.io/qwik";
+import { mdiCodeTags, mdiClipboardCheckMultipleOutline, mdiClipboardMultipleOutline, mdiChevronRight, mdiPlus, mdiArrowDownDropCircleOutline, mdiMenuDown, mdiMagnify, mdiLinkVariant, mdiArchive, mdiTag, mdiEarth, mdiKey, mdiLock, mdiAccount, mdiEmail, mdiPen, mdiText, mdiEyeOutline, mdiEyeOffOutline, mdiBackspaceOutline, mdiCheckCircle, mdiCheckCircleOutline, mdiMessageImageOutline, mdiFile, mdiDownload, mdiHome, mdiApplicationOutline, mdiFolderOpen, mdiFormatQuoteOpen, mdiFormatQuoteClose, mdiAlertOctagram, mdiAlert, mdiShieldAlert, mdiLightbulbOn, mdiInformation } from "@mdi/js";
 import { codeToHtml } from "shiki";
 import { renderToString } from "katex";
 import { kebabCase } from "lodash-es";
@@ -8,7 +8,7 @@ import { marked } from "marked";
 const caption$1 = "_caption_1j0ec_27";
 const divider = "_divider_1j0ec_50";
 const code$2 = "_code_1j0ec_1";
-const styles$u = {
+const styles$z = {
   "code-block": "_code-block_1j0ec_1",
   "language-icon": "_language-icon_1j0ec_22",
   caption: caption$1,
@@ -68,7 +68,7 @@ const Typescript = component$(({ size = 24, ...props }) => {
   });
 });
 const path = "_path_1ccs2_1";
-const styles$t = {
+const styles$y = {
   path
 };
 const Bash = component$(({ size = 24, ...props }) => {
@@ -84,7 +84,7 @@ const Bash = component$(({ size = 24, ...props }) => {
         d: "M4.24 4.24h119.53v119.53H4.24z"
       }),
       /* @__PURE__ */ jsx("path", {
-        class: styles$t.path,
+        class: styles$y.path,
         d: "M109.01 28.64L71.28 6.24c-2.25-1.33-4.77-2-7.28-2s-5.03.67-7.28 2.01l-37.74 22.4c-4.5 2.67-7.28 7.61-7.28 12.96v44.8c0 5.35 2.77 10.29 7.28 12.96l37.73 22.4c2.25 1.34 4.76 2 7.28 2c2.51 0 5.03-.67 7.28-2l37.74-22.4c4.5-2.67 7.28-7.62 7.28-12.96V41.6c0-5.34-2.77-10.29-7.28-12.96M79.79 98.59l.06 3.22c0 .39-.25.83-.55.99l-1.91 1.1c-.3.15-.56-.03-.56-.42l-.03-3.17c-1.63.68-3.29.84-4.34.42c-.2-.08-.29-.37-.21-.71l.69-2.91c.06-.23.18-.46.34-.6c.06-.06.12-.1.18-.13c.11-.06.22-.07.31-.03c1.14.38 2.59.2 3.99-.5c1.78-.9 2.97-2.72 2.95-4.52c-.02-1.64-.9-2.31-3.05-2.33c-2.74.01-5.3-.53-5.34-4.57c-.03-3.32 1.69-6.78 4.43-8.96l-.03-3.25c0-.4.24-.84.55-1l1.85-1.18c.3-.15.56.04.56.43l.03 3.25c1.36-.54 2.54-.69 3.61-.44c.23.06.34.38.24.75l-.72 2.88c-.06.22-.18.44-.33.58a.8.8 0 0 1-.19.14c-.1.05-.19.06-.28.05c-.49-.11-1.65-.36-3.48.56c-1.92.97-2.59 2.64-2.58 3.88c.02 1.48.77 1.93 3.39 1.97c3.49.06 4.99 1.58 5.03 5.09c.05 3.44-1.79 7.15-4.61 9.41m26.34-60.5l-35.7 22.05c-4.45 2.6-7.73 5.52-7.74 10.89v43.99c0 3.21 1.3 5.29 3.29 5.9c-.65.11-1.32.19-1.98.19c-2.09 0-4.15-.57-5.96-1.64l-37.73-22.4c-3.69-2.19-5.98-6.28-5.98-10.67V41.6c0-4.39 2.29-8.48 5.98-10.67l37.74-22.4c1.81-1.07 3.87-1.64 5.96-1.64s4.15.57 5.96 1.64l37.74 22.4c3.11 1.85 5.21 5.04 5.8 8.63c-1.27-2.67-4.09-3.39-7.38-1.47"
       }),
       /* @__PURE__ */ jsx("path", {
@@ -525,12 +525,12 @@ const C = component$(({ size = 24, ...props }) => {
   });
 });
 const icon$4 = "_icon_1gvln_1";
-const styles$s = {
+const styles$x = {
   icon: icon$4
 };
 const ElmMdiIcon = component$(({ d, size = "1em", color, lightColor, darkColor }) => {
   return /* @__PURE__ */ jsx("svg", {
-    class: styles$s.icon,
+    class: styles$x.icon,
     style: {
       "--color": lightColor ?? color,
       "--dark-color": darkColor ?? color
@@ -639,7 +639,7 @@ const text$3 = "_text_1gswr_1";
 const code$1 = "_code_1gswr_12";
 const kbd = "_kbd_1gswr_21";
 const link$1 = "_link_1gswr_47";
-const styles$r = {
+const styles$w = {
   text: text$3,
   code: code$1,
   kbd,
@@ -650,16 +650,16 @@ const textStyles = {
   text: text$2
 };
 const icon$3 = "_icon_19g82_1";
-const styles$q = {
+const styles$v = {
   icon: icon$3
 };
 const ElmInlineIcon = component$(({ src, alt }) => {
   return /* @__PURE__ */ jsx("span", {
-    class: styles$q.icon,
+    class: styles$v.icon,
     children: /* @__PURE__ */ jsx("img", {
       src,
       alt,
-      class: styles$q.icon
+      class: styles$v.icon
     })
   });
 });
@@ -670,7 +670,7 @@ const ElmInlineText = component$((props) => {
   }) : /* @__PURE__ */ jsx(Slot, {});
   if (props.kbd) {
     vnode = /* @__PURE__ */ jsx("kbd", {
-      class: styles$r.kbd,
+      class: styles$w.kbd,
       children: vnode
     });
   }
@@ -696,13 +696,13 @@ const ElmInlineText = component$((props) => {
   }
   if (code2) {
     vnode = /* @__PURE__ */ jsx("code", {
-      class: styles$r.code,
+      class: styles$w.code,
       children: vnode
     });
   }
   if (props.ruby) {
     vnode = /* @__PURE__ */ jsxs("ruby", {
-      class: styles$r.text,
+      class: styles$w.text,
       children: [
         /* @__PURE__ */ jsx("span", {
           children: vnode
@@ -715,7 +715,7 @@ const ElmInlineText = component$((props) => {
   }
   const wrappedVnode = /* @__PURE__ */ jsx("span", {
     class: [
-      styles$r.text,
+      styles$w.text,
       textStyles.text
     ],
     style: {
@@ -727,7 +727,7 @@ const ElmInlineText = component$((props) => {
   });
   if (props.href) {
     return /* @__PURE__ */ jsxs("a", {
-      class: styles$r.link,
+      class: styles$w.link,
       href: props.href,
       style: {
         "--font-size": size
@@ -745,7 +745,7 @@ const ElmInlineText = component$((props) => {
   return wrappedVnode;
 });
 const code = "_code_1sw1e_1";
-const styles$p = {
+const styles$u = {
   code
 };
 const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
@@ -770,7 +770,7 @@ const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
     }
   });
   return /* @__PURE__ */ jsx("pre", {
-    class: styles$p.code,
+    class: styles$u.code,
     dangerouslySetInnerHTML: rawHtml.value
   });
 });
@@ -789,19 +789,19 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
     }
   });
   return /* @__PURE__ */ jsxs("figure", {
-    class: styles$u["code-block"],
+    class: styles$z["code-block"],
     style: {
       margin
     },
     children: [
       /* @__PURE__ */ jsx("span", {
-        class: styles$u["language-icon"],
+        class: styles$z["language-icon"],
         children: /* @__PURE__ */ jsx(ElmLanguageIcon, {
           language
         })
       }),
       /* @__PURE__ */ jsx("span", {
-        class: styles$u.caption,
+        class: styles$z.caption,
         children: /* @__PURE__ */ jsxs(ElmInlineText, {
           children: [
             caption2 || language,
@@ -810,7 +810,7 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$u["copy-icon"],
+        class: styles$z["copy-icon"],
         onClick$: copyToClipboard,
         children: /* @__PURE__ */ jsx(ElmMdiIcon, {
           size: "1.25rem",
@@ -819,10 +819,10 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
         })
       }),
       /* @__PURE__ */ jsx("hr", {
-        class: styles$u.divider
+        class: styles$z.divider
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$u.code,
+        class: styles$z.code,
         children: /* @__PURE__ */ jsx(ElmShikiHighlighter, {
           code: code2,
           language
@@ -842,7 +842,7 @@ const ElmKatex = component$(({ expression, block = false }) => {
   });
 });
 const parallax = "_parallax_1kb0k_1";
-const styles$o = {
+const styles$t = {
   "parallax-watcher": "_parallax-watcher_1kb0k_1",
   parallax
 };
@@ -851,13 +851,13 @@ const ElmParallax = component$(({ images }) => {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$o["parallax-watcher"],
+        class: styles$t["parallax-watcher"],
         "window:onScroll$": () => {
           y.value = window.scrollY;
         }
       }),
       images.map((image2, index) => /* @__PURE__ */ jsx("div", {
-        class: styles$o.parallax,
+        class: styles$t.parallax,
         style: {
           backgroundImage: `url(${image2})`,
           transform: `scale(1.2) translateY(${y.value / (1e3 * (index + 1))}%)`,
@@ -871,7 +871,7 @@ const toggle = "_toggle_1nxqa_1";
 const summary = "_summary_1nxqa_14";
 const content$2 = "_content_1nxqa_60";
 const footer = "_footer_1nxqa_80";
-const styles$n = {
+const styles$s = {
   toggle,
   "toggle-closed": "_toggle-closed_1nxqa_7",
   "toggle-open": "_toggle-open_1nxqa_10",
@@ -899,29 +899,29 @@ const ElmToggle = component$(({ summary: summary2 }) => {
   });
   return /* @__PURE__ */ jsxs("div", {
     class: [
-      styles$n.toggle,
+      styles$s.toggle,
       {
-        [styles$n["toggle-open"]]: isOpen.value,
-        [styles$n["toggle-closed"]]: !isOpen.value
+        [styles$s["toggle-open"]]: isOpen.value,
+        [styles$s["toggle-closed"]]: !isOpen.value
       }
     ],
     children: [
       /* @__PURE__ */ jsxs("div", {
         class: [
-          styles$n.summary,
+          styles$s.summary,
           {
-            [styles$n["summary-open"]]: isOpen.value,
-            [styles$n["summary-closed"]]: !isOpen.value
+            [styles$s["summary-open"]]: isOpen.value,
+            [styles$s["summary-closed"]]: !isOpen.value
           }
         ],
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsx("span", {
             class: [
-              styles$n["chevron-icon"],
+              styles$s["chevron-icon"],
               {
-                [styles$n["chevron-icon-open"]]: isOpen.value,
-                [styles$n["chevron-icon-closed"]]: !isOpen.value
+                [styles$s["chevron-icon-open"]]: isOpen.value,
+                [styles$s["chevron-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -929,17 +929,17 @@ const ElmToggle = component$(({ summary: summary2 }) => {
             })
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$n["summary-text"],
+            class: styles$s["summary-text"],
             children: summary2 ? summary2 : /* @__PURE__ */ jsx(Slot, {
               name: "summary"
             })
           }),
           /* @__PURE__ */ jsx("span", {
             class: [
-              styles$n["plus-icon"],
+              styles$s["plus-icon"],
               {
-                [styles$n["plus-icon-open"]]: isOpen.value,
-                [styles$n["plus-icon-closed"]]: !isOpen.value
+                [styles$s["plus-icon-open"]]: isOpen.value,
+                [styles$s["plus-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -952,30 +952,30 @@ const ElmToggle = component$(({ summary: summary2 }) => {
       }),
       /* @__PURE__ */ jsx("div", {
         class: [
-          styles$n.content,
+          styles$s.content,
           {
-            [styles$n["content-open"]]: isOpen.value,
-            [styles$n["content-closed"]]: !isOpen.value
+            [styles$s["content-open"]]: isOpen.value,
+            [styles$s["content-closed"]]: !isOpen.value
           }
         ],
         children: /* @__PURE__ */ jsx(Slot, {})
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: styles$n.footer,
+        class: styles$s.footer,
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsx("span", {
-            class: styles$n["footer-chevron-icon"],
+            class: styles$s["footer-chevron-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiChevronRight,
               color: "gray"
             })
           }),
           /* @__PURE__ */ jsx("hr", {
-            class: styles$n["footer-line"]
+            class: styles$s["footer-line"]
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$n["footer-cross-icon"],
+            class: styles$s["footer-cross-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiPlus,
               color: "#c56565"
@@ -985,17 +985,17 @@ const ElmToggle = component$(({ summary: summary2 }) => {
             children: "CLOSE"
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$n["footer-cross-icon"],
+            class: styles$s["footer-cross-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiPlus,
               color: "#c56565"
             })
           }),
           /* @__PURE__ */ jsx("hr", {
-            class: styles$n["footer-line"]
+            class: styles$s["footer-line"]
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$n["footer-chevron-icon"],
+            class: styles$s["footer-chevron-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiChevronRight,
               color: "gray"
@@ -1006,50 +1006,50 @@ const ElmToggle = component$(({ summary: summary2 }) => {
     ]
   });
 });
-const styles$m = {
+const styles$r = {
   "block-fallback": "_block-fallback_rt986_1"
 };
-const wrapper$2 = "_wrapper_1yktj_12";
+const wrapper$3 = "_wrapper_1yktj_12";
 const dot = "_dot_1yktj_22";
-const styles$l = {
-  wrapper: wrapper$2,
+const styles$q = {
+  wrapper: wrapper$3,
   dot
 };
 const ElmDotLoadingIcon = component$(({ size = "4em", color = "#606875" }) => {
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$l.wrapper,
+    class: styles$q.wrapper,
     style: {
       "--size": size,
       "--color": color
     },
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$l.dot,
+        class: styles$q.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$l.dot,
+        class: styles$q.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$l.dot,
+        class: styles$q.dot,
         "aria-hidden": "true"
       })
     ]
   });
 });
-const styles$k = {
+const styles$p = {
   "rectangle-wave": "_rectangle-wave_hej9g_17"
 };
 const ElmRectangleWave = component$(() => {
   return /* @__PURE__ */ jsx("div", {
     "aria-hidden": "true",
-    class: styles$k["rectangle-wave"]
+    class: styles$p["rectangle-wave"]
   });
 });
 const ElmBlockFallback = component$(({ height = "16rem" }) => {
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$m["block-fallback"],
+    class: styles$r["block-fallback"],
     style: {
       "--height": height
     },
@@ -1059,6 +1059,440 @@ const ElmBlockFallback = component$(({ height = "16rem" }) => {
     ]
   });
 });
+const button = "_button_1ykfy_1";
+const normal = "_normal_1ykfy_32";
+const primary = "_primary_1ykfy_41";
+const colored = "_colored_1ykfy_50";
+const enable = "_enable_1ykfy_54";
+const flex = "_flex_1ykfy_76";
+const ripple = "_ripple_1ykfy_97";
+const styles$o = {
+  button,
+  "button-ornament": "_button-ornament_1ykfy_21",
+  normal,
+  primary,
+  colored,
+  enable,
+  flex,
+  ripple
+};
+const ElmButton = component$((props) => {
+  const clicked = useSignal(false);
+  const handleClick = $(async () => {
+    if (!props.loading && !props.disabled) {
+      if (props.onClick$) {
+        clicked.value = true;
+        setTimeout(() => clicked.value = false, 300);
+        await props.onClick$();
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs("button", {
+    onClick$: handleClick,
+    class: [
+      styles$o.button,
+      !props.loading && !props.disabled && styles$o.enable,
+      props.color && styles$o.colored,
+      !props.color && !props.primary && styles$o.normal,
+      !props.color && props.primary && styles$o.primary
+    ],
+    style: {
+      display: props.block ? "flex" : "inline-flex",
+      width: props.block ? "100%" : "auto",
+      cursor: props.disabled ? "not-allowed" : props.loading ? "progress" : "pointer",
+      "--opacity": props.disabled || props.loading ? 0.6 : void 0,
+      "--color": props.color
+    },
+    children: [
+      clicked.value && /* @__PURE__ */ jsx("div", {
+        class: styles$o.ripple
+      }),
+      props.loading ? /* @__PURE__ */ jsx(ElmDotLoadingIcon, {
+        size: "1.5rem"
+      }) : /* @__PURE__ */ jsx("span", {
+        class: styles$o.flex,
+        children: /* @__PURE__ */ jsx(Slot, {})
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: styles$o["button-ornament"]
+      })
+    ]
+  });
+});
+const container$2 = "_container_101ok_1";
+const checkbox = "_checkbox_101ok_19";
+const rect = "_rect_101ok_27";
+const loading$1 = "_loading_101ok_40";
+const styles$n = {
+  container: container$2,
+  "container--disable": "_container--disable_101ok_11",
+  checkbox,
+  rect,
+  "rect--loading": "_rect--loading_101ok_30",
+  "rect--checked": "_rect--checked_101ok_33",
+  loading: loading$1,
+  "check-line": "_check-line_101ok_56"
+};
+const ElmCheckbox = component$((props) => {
+  const internalChecked = useSignal(false);
+  const isChecked = props.checked ?? internalChecked;
+  const toggleCheck = $(() => {
+    if (!props.loading && !props.disable) {
+      isChecked.value = !isChecked.value;
+    }
+  });
+  return /* @__PURE__ */ jsx("div", {
+    class: [
+      styles$n.container,
+      props.disable && styles$n["container--disable"]
+    ],
+    onClick$: toggleCheck,
+    children: /* @__PURE__ */ jsxs("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "0.5rem"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("svg", {
+          width: "24",
+          height: "24",
+          class: styles$n.checkbox,
+          children: [
+            /* @__PURE__ */ jsxs("circle", {
+              cx: "0",
+              cy: "0",
+              r: "2",
+              class: styles$n.loading,
+              style: {
+                opacity: props.loading ? 1 : 0
+              },
+              children: [
+                /* @__PURE__ */ jsx("animate", {
+                  attributeName: "cx",
+                  values: "4; 20; 20; 4; 4",
+                  dur: "1.2s",
+                  repeatCount: "indefinite",
+                  keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
+                  calcMode: "spline"
+                }),
+                /* @__PURE__ */ jsx("animate", {
+                  attributeName: "cy",
+                  values: "4; 4; 20; 20; 4",
+                  dur: "1.2s",
+                  repeatCount: "indefinite",
+                  keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
+                  calcMode: "spline"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs("circle", {
+              cx: "20",
+              cy: "20",
+              r: "2",
+              class: styles$n.loading,
+              style: {
+                opacity: props.loading ? 1 : 0
+              },
+              children: [
+                /* @__PURE__ */ jsx("animate", {
+                  attributeName: "cx",
+                  values: "20; 4; 4; 20; 20",
+                  dur: "1.2s",
+                  repeatCount: "indefinite",
+                  keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
+                  calcMode: "spline"
+                }),
+                /* @__PURE__ */ jsx("animate", {
+                  attributeName: "cy",
+                  values: "20; 20; 4; 4; 20",
+                  dur: "1.2s",
+                  repeatCount: "indefinite",
+                  keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
+                  calcMode: "spline"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx("rect", {
+              x: "4",
+              y: "4",
+              width: "16",
+              height: "16",
+              class: [
+                styles$n.rect,
+                isChecked.value && styles$n["rect--checked"],
+                props.loading && styles$n["rect--loading"]
+              ],
+              "stroke-width": "0.8"
+            }),
+            isChecked.value && /* @__PURE__ */ jsx("polyline", {
+              class: styles$n["check-line"],
+              points: "5,12 10,17 19,8",
+              "stroke-width": "1.5",
+              fill: "transparent"
+            }),
+            /* @__PURE__ */ jsx("line", {
+              x1: "0",
+              y1: "1",
+              x2: "4",
+              y2: "1",
+              "stroke-width": "2",
+              fill: "transparent"
+            }),
+            /* @__PURE__ */ jsx("line", {
+              x1: "4",
+              y1: "0",
+              x2: "24",
+              y2: "0",
+              "stroke-width": "1",
+              fill: "transparent"
+            }),
+            /* @__PURE__ */ jsx("line", {
+              x1: "0",
+              y1: "4",
+              x2: "0",
+              y2: "16",
+              "stroke-width": "1",
+              fill: "transparent"
+            }),
+            /* @__PURE__ */ jsx("line", {
+              x1: "0",
+              y1: "18",
+              x2: "0",
+              y2: "20",
+              "stroke-width": "1",
+              fill: "transparent"
+            }),
+            /* @__PURE__ */ jsx("line", {
+              x1: "0",
+              y1: "24",
+              x2: "20",
+              y2: "24",
+              "stroke-width": "1",
+              fill: "transparent"
+            }),
+            /* @__PURE__ */ jsx("line", {
+              x1: "20",
+              y1: "23",
+              x2: "24",
+              y2: "23",
+              "stroke-width": "1.5",
+              fill: "transparent"
+            }),
+            /* @__PURE__ */ jsx("line", {
+              x1: "24",
+              y1: "4",
+              x2: "24",
+              y2: "20",
+              style: {
+                strokeWidth: "1px"
+              },
+              fill: "transparent"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx(ElmInlineText, {
+          text: props.label
+        })
+      ]
+    })
+  });
+});
+const wrapper$2 = "_wrapper_1o5x2_1";
+const active$1 = "_active_1o5x2_23";
+const header$2 = "_header_1o5x2_27";
+const label$1 = "_label_1o5x2_35";
+const body$2 = "_body_1o5x2_48";
+const select = "_select_1o5x2_57";
+const selected = "_selected_1o5x2_66";
+const fallback$1 = "_fallback_1o5x2_71";
+const pulldown = "_pulldown_1o5x2_79";
+const option = "_option_1o5x2_96";
+const description$1 = "_description_1o5x2_116";
+const styles$m = {
+  wrapper: wrapper$2,
+  active: active$1,
+  header: header$2,
+  label: label$1,
+  body: body$2,
+  select,
+  selected,
+  fallback: fallback$1,
+  pulldown,
+  option,
+  description: description$1
+};
+const ElmSelect = component$((props) => {
+  const internalSelected = useSignal(null);
+  const selectedOption = props.selectedOption ?? internalSelected;
+  const isActive = useSignal(false);
+  const containerRef = useSignal();
+  const handleToggle = $(() => {
+    if (!props.disabled && !props.loading) {
+      isActive.value = !isActive.value;
+    }
+  });
+  const handleSelect = $((id) => {
+    if (props.options) {
+      const selected2 = props.options.find((option2) => option2.id === id);
+      if (selected2) {
+        selectedOption.value = selected2;
+      }
+    }
+  });
+  useOnDocument("click", $((event) => {
+    if (isActive.value && containerRef.value) {
+      const target = event.target;
+      if (!containerRef.value.contains(target)) {
+        isActive.value = false;
+      }
+    }
+  }));
+  return /* @__PURE__ */ jsxs("div", {
+    ref: containerRef,
+    class: [
+      styles$m.wrapper,
+      isActive.value && styles$m.active
+    ],
+    style: {
+      backgroundColor: props.disabled || props.loading ? "rgba(0,0,0,0.15)" : void 0,
+      "--highlight-color": isActive.value ? "#bfa056" : void 0
+    },
+    onClick$: handleToggle,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        class: styles$m.header,
+        children: /* @__PURE__ */ jsx("span", {
+          class: [
+            styles$m.label,
+            textStyles.text
+          ],
+          children: props.label
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: styles$m.body,
+        children: /* @__PURE__ */ jsxs("div", {
+          class: styles$m.select,
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              class: [
+                styles$m.selected,
+                textStyles.text
+              ],
+              children: selectedOption.value ? /* @__PURE__ */ jsxs("div", {
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    children: selectedOption.value.label
+                  }),
+                  selectedOption.value.description && /* @__PURE__ */ jsx("span", {
+                    class: styles$m.description,
+                    children: selectedOption.value.description
+                  })
+                ]
+              }, selectedOption.value.id) : /* @__PURE__ */ jsxs("div", {
+                class: styles$m.fallback,
+                children: [
+                  /* @__PURE__ */ jsx(ElmMdiIcon, {
+                    d: mdiArrowDownDropCircleOutline
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    children: props.placeholder ?? "Select an option"
+                  })
+                ]
+              })
+            }),
+            /* @__PURE__ */ jsx(ElmMdiIcon, {
+              d: mdiMenuDown,
+              size: "1.5rem"
+            }),
+            isActive.value && /* @__PURE__ */ jsx("div", {
+              class: styles$m.pulldown,
+              children: props.options.map((option2) => /* @__PURE__ */ jsxs("div", {
+                class: [
+                  styles$m.option,
+                  textStyles.text
+                ],
+                onClick$: (e) => {
+                  e.stopPropagation();
+                  handleSelect(option2.id);
+                  isActive.value = false;
+                },
+                children: [
+                  /* @__PURE__ */ jsx(ElmMdiIcon, {
+                    d: mdiChevronRight,
+                    color: "#868e9c",
+                    size: "0.75em"
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    children: option2.label
+                  }),
+                  option2.description && /* @__PURE__ */ jsx("span", {
+                    class: styles$m.description,
+                    children: option2.description
+                  })
+                ]
+              }, option2.id))
+            })
+          ]
+        })
+      })
+    ]
+  });
+});
+const bar = "_bar_gpty5_5";
+const circle = "_circle_gpty5_25";
+const styles$l = {
+  "switch": "_switch_gpty5_1",
+  bar,
+  "bar--checked": "_bar--checked_gpty5_17",
+  "bar--disabled": "_bar--disabled_gpty5_21",
+  circle,
+  "circle--checked": "_circle--checked_gpty5_36",
+  "circle--disabled": "_circle--disabled_gpty5_39"
+};
+const ElmSwitch = component$((props) => {
+  const color = props.color ?? "#bfa056";
+  const size = props.size ?? "18px";
+  const internalChecked = useSignal(false);
+  const checked = props.checked ?? internalChecked;
+  const handleClick = $(() => {
+    if (!props.disabled) {
+      checked.value = !checked.value;
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    onClick$: handleClick,
+    style: {
+      "--color": color,
+      "--padding": "2px",
+      "--size": size,
+      "--width": "calc(var(--size) * 2 + var(--padding) * 2)"
+    },
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        class: styles$l.switch,
+        type: "checkbox",
+        checked: checked.value,
+        disabled: props.disabled
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: [
+          styles$l.bar,
+          checked.value && styles$l["bar--checked"],
+          props.disabled && styles$l["bar--disabled"]
+        ],
+        children: /* @__PURE__ */ jsx("div", {
+          class: [
+            styles$l.circle,
+            checked.value && styles$l["circle--checked"],
+            props.disabled && styles$l["circle--disabled"]
+          ]
+        })
+      })
+    ]
+  });
+});
 const loading = "_loading_1yj0v_19";
 const wrapper$1 = "_wrapper_1yj0v_33";
 const active = "_active_1yj0v_55";
@@ -1069,7 +1503,7 @@ const body$1 = "_body_1yj0v_88";
 const input = "_input_1yj0v_109";
 const icon$2 = "_icon_1yj0v_136";
 const suffix = "_suffix_1yj0v_153";
-const styles$j = {
+const styles$k = {
   loading,
   wrapper: wrapper$1,
   active,
@@ -1113,8 +1547,8 @@ const ElmTextField = component$((props) => {
   };
   return /* @__PURE__ */ jsxs("div", {
     class: [
-      styles$j.wrapper,
-      isFocused.value && styles$j.active
+      styles$k.wrapper,
+      isFocused.value && styles$k.active
     ],
     style: {
       backgroundColor: props.disabled || props.loading ? "rgba(0,0,0,0.15)" : void 0,
@@ -1122,17 +1556,17 @@ const ElmTextField = component$((props) => {
     },
     children: [
       /* @__PURE__ */ jsxs("div", {
-        class: styles$j.header,
+        class: styles$k.header,
         children: [
           /* @__PURE__ */ jsxs("label", {
             for: id,
-            class: styles$j.label,
+            class: styles$k.label,
             children: [
               /* @__PURE__ */ jsx("span", {
                 children: props.label
               }),
               props.required && /* @__PURE__ */ jsx("span", {
-                class: styles$j.requierd,
+                class: styles$k.requierd,
                 children: "*"
               })
             ]
@@ -1145,7 +1579,7 @@ const ElmTextField = component$((props) => {
         ]
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: styles$j.body,
+        class: styles$k.body,
         children: [
           props.icon && /* @__PURE__ */ jsx(ElmMdiIcon, {
             d: iconMap[props.icon],
@@ -1156,7 +1590,7 @@ const ElmTextField = component$((props) => {
             id,
             "bind:value": input2,
             type: inputType.value,
-            class: styles$j.input,
+            class: styles$k.input,
             placeholder: props.placeholder,
             onFocus$: () => isFocused.value = true,
             onBlur$: () => isFocused.value = false,
@@ -1167,16 +1601,16 @@ const ElmTextField = component$((props) => {
             "aria-required": props.required
           }),
           /* @__PURE__ */ jsxs("div", {
-            class: styles$j["icon-box"],
+            class: styles$k["icon-box"],
             children: [
               /* @__PURE__ */ jsx("span", {
-                class: styles$j.suffix,
+                class: styles$k.suffix,
                 children: props.suffix != null && /* @__PURE__ */ jsx(ElmInlineText, {
                   text: props.suffix
                 })
               }),
               /* @__PURE__ */ jsx("div", {
-                class: styles$j.icon,
+                class: styles$k.icon,
                 onClick$: handleVisibleSwitch,
                 children: /* @__PURE__ */ jsx(ElmMdiIcon, {
                   d: inputType.value === "text" ? mdiEyeOutline : mdiEyeOffOutline,
@@ -1185,7 +1619,7 @@ const ElmTextField = component$((props) => {
                 })
               }),
               /* @__PURE__ */ jsx("div", {
-                class: styles$j.icon,
+                class: styles$k.icon,
                 onClick$: handleDelete,
                 children: /* @__PURE__ */ jsx(ElmMdiIcon, {
                   d: mdiBackspaceOutline,
@@ -1198,7 +1632,7 @@ const ElmTextField = component$((props) => {
         ]
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$j.loading,
+        class: styles$k.loading,
         style: {
           opacity: props.loading ? 0.2 : 0
         }
@@ -1206,6 +1640,28 @@ const ElmTextField = component$((props) => {
     ]
   });
 });
+const validation = "_validation_r3xix_1";
+const styles$j = {
+  validation
+};
+const ElmValidation = component$(({ text: text2, validColor = "#449763", isValid }) => {
+  return /* @__PURE__ */ jsxs("div", {
+    class: styles$j.validation,
+    style: {
+      "--opacity": isValid ? 1 : 0.5
+    },
+    children: [
+      /* @__PURE__ */ jsx(ElmMdiIcon, {
+        d: isValid ? mdiCheckCircle : mdiCheckCircleOutline,
+        color: isValid ? validColor : void 0
+      }),
+      /* @__PURE__ */ jsx(ElmInlineText, {
+        text: text2,
+        color: isValid ? validColor : void 0
+      })
+    ]
+  });
+});
 const LOCAL_STORAGE_KEY = "elmethis-theme";
 function useElmethisTheme() {
   const isDarkTheme = useSignal(false);
@@ -2760,7 +3216,9 @@ export {
   ElmBlockQuote,
   ElmBookmark,
   ElmBreadcrumb,
+  ElmButton,
   ElmCallout,
+  ElmCheckbox,
   ElmCodeBlock,
   ElmDivider,
   ElmDotLoadingIcon,
@@ -2779,7 +3237,9 @@ export {
   ElmParagraph,
   ElmParallax,
   ElmRectangleWave,
+  ElmSelect,
   ElmShikiHighlighter,
+  ElmSwitch,
   ElmTable,
   ElmTableBody,
   ElmTableCell,
@@ -2787,5 +3247,6 @@ export {
   ElmTableRow,
   ElmTextField,
   ElmToggle,
-  ElmToggleTheme
+  ElmToggleTheme,
+  ElmValidation
 };