@elmethis/core 1.0.0-alpha.16 → 1.0.0-alpha.160

package/dist/components/typography/ElmBulletedList.vue.d.ts

@@ -1,16 +1,19 @@
 export interface ElmBulletedListProps {
 }
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
     refs: {
         target: HTMLUListElement;
     };
-    attrs: Partial<{}>;
+    rootEl: HTMLUListElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ElmBulletedListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmBulletedListProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<ElmBulletedListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmBulletedListProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: HTMLUListElement;
+}, HTMLUListElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/typography/ElmBulletedList.vue.mjs

@@ -0,0 +1,27 @@
+import { defineComponent, ref, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmBulletedList",
+  setup(__props) {
+    const target = ref(null);
+    const targetIsVisible = ref(false);
+    useIntersectionObserver(target, ([{ isIntersecting }], _) => {
+      targetIsVisible.value = isIntersecting;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("ul", {
+        ref_key: "target",
+        ref: target,
+        class: "elmethis-bulleted-list",
+        style: normalizeStyle({
+          "--opacity": targetIsVisible.value ? 1 : 0
+        })
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/typography/ElmBulletedList.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./ElmBulletedList.vue.mjs";
+/* empty css                      */
+export {
+  _sfc_main as default
+};

package/dist/components/typography/ElmCallout.css

@@ -0,0 +1,33 @@
+._callout_s5qh4_1 {
+  z-index: 1;
+  margin-block: 2rem;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-left: solid 4px var(--border-color);
+}
+._callout_s5qh4_1::after {
+  position: absolute;
+  content: "";
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--bg-color);
+  transition: transform 800ms;
+  transform: scaleX(var(--scale));
+  transform-origin: left;
+}
+._header_s5qh4_25 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+._icon_s5qh4_31 {
+  width: 20px;
+  height: 20px;
+  color: var(--icon-color);
+}

package/dist/components/typography/ElmCallout.vue.d.ts

@@ -6,18 +6,21 @@ export interface ElmCalloutProps {
     type?: AlertType;
 }
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
     refs: {
         target: HTMLElement;
     };
-    attrs: Partial<{}>;
+    rootEl: HTMLElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<ElmCalloutProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmCalloutProps> & Readonly<{}>, {
     type: AlertType;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: HTMLElement;
+}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/typography/ElmCallout.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmCallout.vue2.mjs";
+import style0 from "./ElmCallout.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmCallout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmCallout as default
+};

package/dist/components/typography/ElmCallout.vue2.mjs

@@ -0,0 +1,57 @@
+import { defineComponent, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, createVNode, renderSlot } from "vue";
+import { Icon } from "@iconify/vue";
+import ElmInlineText from "../inline/ElmInlineText.vue.mjs";
+import { rgba } from "polished";
+import { useIntersectionObserver } from "@vueuse/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmCallout",
+  props: {
+    type: { default: "note" }
+  },
+  setup(__props) {
+    const colors = {
+      note: { code: "#6987b8", icon: "mdi:information-slab-box-outline" },
+      tip: { code: "#59b57c", icon: "heroicons:light-bulb" },
+      important: { code: "#9771bd", icon: "heroicons:shield-exclamation" },
+      warning: { code: "#b8a36e", icon: "heroicons:exclamation-triangle" },
+      caution: { code: "#b36472", icon: "heroicons:x-circle" }
+    };
+    const target = ref(null);
+    const targetIsVisible = ref(false);
+    useIntersectionObserver(target, ([{ isIntersecting }], _) => {
+      targetIsVisible.value = isIntersecting;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("aside", {
+        ref_key: "target",
+        ref: target,
+        class: normalizeClass(_ctx.$style.callout),
+        style: normalizeStyle({
+          "--border-color": colors[_ctx.type].code,
+          "--bg-color": unref(rgba)(colors[_ctx.type].code, 0.1),
+          "--scale": targetIsVisible.value ? 1 : 0
+        })
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.header)
+        }, [
+          createVNode(unref(Icon), {
+            icon: colors[_ctx.type].icon,
+            class: normalizeClass(_ctx.$style.icon),
+            style: normalizeStyle({ "--icon-color": colors[_ctx.type].code })
+          }, null, 8, ["icon", "class", "style"]),
+          createVNode(ElmInlineText, {
+            text: _ctx.type.toUpperCase(),
+            color: colors[_ctx.type].code
+          }, null, 8, ["text", "color"])
+        ], 2),
+        createElementVNode("div", null, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/typography/ElmCallout.vue3.mjs

@@ -0,0 +1,14 @@
+const callout = "_callout_s5qh4_1";
+const header = "_header_s5qh4_25";
+const icon = "_icon_s5qh4_31";
+const style0 = {
+  callout,
+  header,
+  icon
+};
+export {
+  callout,
+  style0 as default,
+  header,
+  icon
+};

package/dist/components/typography/ElmDivider.css

@@ -0,0 +1,40 @@
+._divider_z5wle_1 {
+  margin-block: var(--margin-block);
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow: visible;
+  border: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  transform: scaleX(var(--scale));
+  transition: transform 1200ms;
+}
+[data-theme=dark] ._divider_z5wle_1 {
+  border-bottom-color: rgba(255, 255, 255, 0.3);
+}
+._divider_z5wle_1::before {
+  position: absolute;
+  content: "";
+  height: 5px;
+  width: 5px;
+  top: -2px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.6);
+  left: 0;
+}
+[data-theme=dark] ._divider_z5wle_1::before {
+  background-color: rgba(255, 255, 255, 0.6);
+}
+._divider_z5wle_1::after {
+  position: absolute;
+  content: "";
+  height: 5px;
+  width: 5px;
+  top: -2px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.6);
+  right: 0;
+}
+[data-theme=dark] ._divider_z5wle_1::after {
+  background-color: rgba(255, 255, 255, 0.6);
+}

package/dist/components/typography/ElmDivider.vue.d.ts

@@ -1,4 +1,11 @@
+import { Property } from 'csstype';
 export interface ElmDividerProps {
+    /**
+     * The margin of the divider.
+     */
+    margin?: Property.MarginBlock;
 }
-declare const _default: import('vue').DefineComponent<ElmDividerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmDividerProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: import('vue').DefineComponent<ElmDividerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmDividerProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: HTMLHRElement;
+}, HTMLHRElement>;
 export default _default;

package/dist/components/typography/ElmDivider.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmDivider.vue2.mjs";
+import style0 from "./ElmDivider.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmDivider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmDivider as default
+};

package/dist/components/typography/ElmDivider.vue2.mjs

@@ -0,0 +1,29 @@
+import { defineComponent, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmDivider",
+  props: {
+    margin: {}
+  },
+  setup(__props) {
+    const target = ref(null);
+    const targetIsVisible = ref(false);
+    useIntersectionObserver(target, ([{ isIntersecting }], _) => {
+      targetIsVisible.value = isIntersecting;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("hr", {
+        ref_key: "target",
+        ref: target,
+        class: normalizeClass(_ctx.$style.divider),
+        style: normalizeStyle({
+          "--scale": targetIsVisible.value ? 1 : 0,
+          "--margin-block": _ctx.margin
+        })
+      }, null, 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/typography/ElmDivider.vue3.mjs

@@ -0,0 +1,8 @@
+const divider = "_divider_z5wle_1";
+const style0 = {
+  divider
+};
+export {
+  style0 as default,
+  divider
+};

package/dist/components/typography/ElmListItem.css

@@ -0,0 +1,3 @@
+._li_s1eaw_1 {
+  margin-block: 1.5rem;
+}

package/dist/components/typography/ElmListItem.vue.d.ts

@@ -1,14 +1,15 @@
 export interface ElmListItemProps {
 }
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLLIElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ElmListItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmListItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<ElmListItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmListItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLIElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/typography/ElmListItem.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmListItem.vue2.mjs";
+import style0 from "./ElmListItem.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmListItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmListItem as default
+};

package/dist/components/typography/ElmListItem.vue2.mjs

@@ -0,0 +1,16 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmListItem",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", {
+        class: normalizeClass(_ctx.$style.li)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/typography/ElmListItem.vue3.mjs

@@ -0,0 +1,8 @@
+const li = "_li_s1eaw_1";
+const style0 = {
+  li
+};
+export {
+  style0 as default,
+  li
+};

package/dist/components/typography/ElmNumberedList.css

@@ -0,0 +1,26 @@
+.elmethis-numbered-list {
+  margin-block: 2rem;
+  opacity: var(--opacity);
+  transition: opacity 800ms;
+  box-sizing: border-box;
+  padding-left: 1.25rem;
+}
+.elmethis-numbered-list li {
+  box-sizing: border-box;
+  padding-left: 0.25rem;
+  margin-block: 0.75rem;
+  margin-left: 0.25rem;
+  list-style-type: decimal;
+}
+.elmethis-numbered-list li::marker {
+  color: #9771bd;
+}
+.elmethis-numbered-list li ol li {
+  list-style-type: lower-alpha;
+}
+.elmethis-numbered-list li ol li ol li {
+  list-style-type: lower-roman;
+}
+.elmethis-numbered-list li ol li ol li ol li {
+  list-style-type: lower-greek;
+}

package/dist/components/typography/ElmNumberedList.vue.d.ts

@@ -1,16 +1,19 @@
 export interface ElmNumberedListProps {
 }
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
     refs: {
         target: HTMLOListElement;
     };
-    attrs: Partial<{}>;
+    rootEl: HTMLOListElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ElmNumberedListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmNumberedListProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<ElmNumberedListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmNumberedListProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: HTMLOListElement;
+}, HTMLOListElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/typography/ElmNumberedList.vue.mjs

@@ -0,0 +1,27 @@
+import { defineComponent, ref, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmNumberedList",
+  setup(__props) {
+    const target = ref(null);
+    const targetIsVisible = ref(false);
+    useIntersectionObserver(target, ([{ isIntersecting }], _) => {
+      targetIsVisible.value = isIntersecting;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("ol", {
+        ref_key: "target",
+        ref: target,
+        class: "elmethis-numbered-list",
+        style: normalizeStyle({
+          "--opacity": targetIsVisible.value ? 1 : 0
+        })
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/typography/ElmNumberedList.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./ElmNumberedList.vue.mjs";
+/* empty css                      */
+export {
+  _sfc_main as default
+};

package/dist/components/typography/ElmParagraph.css

@@ -0,0 +1,25 @@
+._paragraph_19lcl_1 {
+  margin-block: 2rem;
+  opacity: var(--opacity);
+  transition: opacity 800ms;
+  color: rgba(0, 0, 0, 0.7);
+}
+._paragraph_19lcl_1::-moz-selection {
+  color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(0, 0, 0, 0.7);
+}
+._paragraph_19lcl_1::selection {
+  color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(0, 0, 0, 0.7);
+}
+[data-theme=dark] ._paragraph_19lcl_1 {
+  color: rgba(255, 255, 255, 0.7);
+}
+[data-theme=dark] ._paragraph_19lcl_1::-moz-selection {
+  color: rgba(0, 0, 0, 0.7);
+  background-color: rgba(255, 255, 255, 0.7);
+}
+[data-theme=dark] ._paragraph_19lcl_1::selection {
+  color: rgba(0, 0, 0, 0.7);
+  background-color: rgba(255, 255, 255, 0.7);
+}

package/dist/components/typography/ElmParagraph.vue.d.ts

@@ -1,16 +1,19 @@
 export interface ElmParagraphProps {
 }
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
     refs: {
         target: HTMLParagraphElement;
     };
-    attrs: Partial<{}>;
+    rootEl: HTMLParagraphElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ElmParagraphProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmParagraphProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<ElmParagraphProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmParagraphProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: HTMLParagraphElement;
+}, HTMLParagraphElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/typography/ElmParagraph.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmParagraph.vue2.mjs";
+import style0 from "./ElmParagraph.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmParagraph = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmParagraph as default
+};

package/dist/components/typography/ElmParagraph.vue2.mjs

@@ -0,0 +1,27 @@
+import { defineComponent, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, renderSlot } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmParagraph",
+  setup(__props) {
+    const target = ref(null);
+    const targetIsVisible = ref(false);
+    useIntersectionObserver(target, ([{ isIntersecting }], _) => {
+      targetIsVisible.value = isIntersecting;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("p", {
+        ref_key: "target",
+        ref: target,
+        class: normalizeClass(_ctx.$style.paragraph),
+        style: normalizeStyle({
+          "--opacity": targetIsVisible.value ? 1 : 0
+        })
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/typography/ElmParagraph.vue3.mjs

@@ -0,0 +1,8 @@
+const paragraph = "_paragraph_19lcl_1";
+const style0 = {
+  paragraph
+};
+export {
+  style0 as default,
+  paragraph
+};

package/dist/hooks/useElmethisTheme.d.ts

@@ -0,0 +1,4 @@
+export declare function useElmethisTheme(): {
+    isDarkTheme: import('vue').Ref<boolean, boolean>;
+    toggleTheme: () => void;
+};

package/dist/hooks/useElmethisTheme.mjs

@@ -0,0 +1,43 @@
+import { ref, watch, onMounted } from "vue";
+const LOCAL_STORAGE_KEY = "elmethis-theme";
+function useElmethisTheme() {
+  const isDarkTheme = ref(false);
+  const toggleTheme = () => {
+    isDarkTheme.value = !isDarkTheme.value;
+  };
+  watch(isDarkTheme, () => {
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute(
+        "data-theme",
+        isDarkTheme.value ? "dark" : "light"
+      );
+      const body = document.querySelector("body");
+      if (body != null) {
+        body.style.colorScheme = isDarkTheme.value ? "dark" : "light";
+      }
+      if (localStorage != null) {
+        localStorage.setItem(
+          LOCAL_STORAGE_KEY,
+          isDarkTheme.value ? "dark" : "light"
+        );
+      }
+    }
+  });
+  onMounted(() => {
+    if (typeof document !== "undefined") {
+      const currentTheme = document.documentElement.getAttribute("data-theme");
+      if (currentTheme != null) {
+        isDarkTheme.value = currentTheme === "dark";
+      } else {
+        const localStorageTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
+        if (localStorageTheme != null) {
+          isDarkTheme.value = localStorageTheme === "dark";
+        }
+      }
+    }
+  });
+  return { isDarkTheme, toggleTheme };
+}
+export {
+  useElmethisTheme
+};

package/dist/hooks/useTyping.d.ts

@@ -0,0 +1,17 @@
+interface Target {
+    char: string;
+    status: 'typed' | 'incorrect' | 'current' | 'default';
+}
+export declare function useTyping(): {
+    start: (target: string) => void;
+    targetArray: import('vue').Ref<{
+        char: string;
+        status: "typed" | "incorrect" | "current" | "default";
+    }[], Target[] | {
+        char: string;
+        status: "typed" | "incorrect" | "current" | "default";
+    }[]>;
+    isFinished: import('vue').Ref<boolean, boolean>;
+    mistakes: import('vue').Ref<number, number>;
+};
+export {};