@elmethis/vue 0.1.0

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

@@ -0,0 +1,158 @@
+import { defineComponent, useCssModule, useSlots, resolveComponent, createBlock, openBlock, withCtx, createElementBlock, normalizeClass, createElementVNode, createCommentVNode, unref, toDisplayString, resolveDynamicComponent, h } from "vue";
+import { getLuminance } from "polished";
+import ElmInlineIcon from "../icon/ElmInlineIcon.vue.mjs";
+import ElmMdiIcon from "../icon/ElmMdiIcon.vue.mjs";
+import { mdiOpenInNew } from "@mdi/js";
+import textStyle from "../../styles/text.module.scss.mjs";
+import ElmTooltip from "../containments/ElmTooltip.vue.mjs";
+import ElmImage from "../media/ElmImage.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmInlineText",
+  props: {
+    text: {},
+    color: {},
+    size: { default: "1em" },
+    bold: { type: Boolean, default: false },
+    italic: { type: Boolean, default: false },
+    underline: { type: Boolean, default: false },
+    strikethrough: { type: Boolean, default: false },
+    code: { type: Boolean, default: false },
+    kbd: { type: Boolean },
+    backgroundColor: {},
+    ruby: {},
+    href: {},
+    favicon: {},
+    ogp: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const style = useCssModule();
+    const slots = useSlots();
+    const renderLink = () => {
+      const children = [];
+      if (props.favicon) {
+        children.push(h(ElmInlineIcon, { src: props.favicon, alt: "favicon" }));
+      }
+      if (slots.default) {
+        children.push(h(slots.default));
+      } else {
+        children.push(h("span", {}, props.text ?? props.href));
+      }
+      children.push(
+        h(ElmMdiIcon, {
+          d: mdiOpenInNew,
+          size: "0.8em",
+          color: "gray",
+          style: { opacity: 0.75 }
+        })
+      );
+      return h(
+        "a",
+        {
+          class: style.link,
+          href: props.href,
+          style: { "--font-size": props.size },
+          target: "_blank",
+          rel: "noopener noreferrer"
+        },
+        children
+      );
+    };
+    const render = () => {
+      const backgroundColor = props.backgroundColor != null ? getLuminance(props.backgroundColor) < 0.5 ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)" : void 0;
+      let vnode = slots.default ? h(
+        "span",
+        {
+          class: [style.text, textStyle.text],
+          style: {
+            "--color": props.color ?? backgroundColor,
+            "--font-size": props.size,
+            "--background-color": props.backgroundColor
+          }
+        },
+        { default: slots.default }
+      ) : h(
+        "span",
+        {
+          class: [style.text, textStyle.text],
+          style: {
+            "--color": props.color ?? backgroundColor,
+            "--font-size": props.size,
+            "--background-color": props.backgroundColor
+          }
+        },
+        props.text
+      );
+      if (props.kbd) {
+        vnode = h("kbd", { class: style.kbd }, vnode);
+      }
+      if (props.strikethrough) {
+        vnode = h("del", {}, vnode);
+      }
+      if (props.italic) {
+        vnode = h("em", {}, vnode);
+      }
+      if (props.underline) {
+        vnode = h("ins", {}, vnode);
+      }
+      if (props.bold) {
+        vnode = h("strong", {}, vnode);
+      }
+      if (props.code) {
+        vnode = h("code", { class: style.code }, vnode);
+      }
+      if (props.ruby) {
+        vnode = h(
+          "ruby",
+          {
+            class: style.text,
+            style: {
+              "--color": props.color ?? backgroundColor,
+              "--font-size": props.size,
+              "--background-color": props.backgroundColor
+            }
+          },
+          [h("span", {}, vnode), h("rt", {}, props.ruby)]
+        );
+      }
+      return vnode;
+    };
+    return (_ctx, _cache) => {
+      const _component_ElmInlineText = resolveComponent("ElmInlineText", true);
+      return __props.href && __props.ogp ? (openBlock(), createBlock(ElmTooltip, { key: 0 }, {
+        original: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(renderLink())))
+        ]),
+        tooltip: withCtx(() => [
+          __props.ogp ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style.ogp)
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["ogp-text"])
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass([unref(textStyle).text, _ctx.$style["ogp-title"]])
+              }, toDisplayString(__props.ogp.title), 3),
+              __props.ogp.description ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass([unref(textStyle).text, _ctx.$style["ogp-description"]])
+              }, toDisplayString(__props.ogp.description), 3)) : createCommentVNode("", true)
+            ], 2),
+            __props.ogp.image ? (openBlock(), createBlock(ElmImage, {
+              key: 0,
+              src: __props.ogp.image
+            }, null, 8, ["src"])) : createCommentVNode("", true)
+          ], 2)) : (openBlock(), createBlock(_component_ElmInlineText, {
+            key: 1,
+            text: __props.href
+          }, null, 8, ["text"]))
+        ]),
+        _: 1
+      })) : __props.href ? (openBlock(), createBlock(resolveDynamicComponent(renderLink()), { key: 1 })) : (openBlock(), createBlock(resolveDynamicComponent(render()), { key: 2 }));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,35 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode('._text_xfybp_1{padding:0;margin:0;white-space:pre-line;font-size:1em;font-size:var(--font-size, 1em);line-height:1em;line-height:var(--font-size, 1em);background-color:var(--background-color);transition:color .2s}._code_xfybp_11{margin-inline:.25rem;padding:2px .5em;font-size:calc(1em - 2px);border-radius:.125rem;background-color:#00000013;font-family:"Source Code Pro" monospace}._kbd_xfybp_20{padding:.125rem .25rem;position:relative;border-radius:.125rem;background-color:#e6e6e6}[data-theme=dark] ._kbd_xfybp_20{background-color:#404040}._kbd_xfybp_20:before{z-index:-1;position:absolute;content:"";bottom:-.25em;left:0;height:100%;width:100%;background-color:#ccc;border-radius:0 0 .125rem .125rem;box-shadow:0 0 .125em #00000080}[data-theme=dark] ._kbd_xfybp_20:before{background-color:#595959;box-shadow:0 0 .125em #ffffff80}._link_xfybp_46{all:unset;box-sizing:border-box;padding:0 .25rem;font-size:var(--font-size);display:inline-flex;align-items:center;gap:.25rem;cursor:pointer;color:#6987b8;border-radius:.125rem;transition:background-color .2s,color .2s,opacity .2s}._link_xfybp_46:hover{background-color:#6987b833}._link_xfybp_46:active{opacity:.5}._link_xfybp_46:visited{color:#9771bd;border-bottom:dashed 1px #9771bd}._link_xfybp_46:visited:hover{background-color:#9771bd33}._ogp_xfybp_73{display:flex;flex-direction:column;gap:.25rem;overflow:hidden;border-radius:.25rem;box-shadow:0 0 .125rem #0000004d;background-color:#fffc}[data-theme=dark] ._ogp_xfybp_73{background-color:#ffffff1a}._ogp-text_xfybp_86{box-sizing:border-box;padding:.5rem}._ogp-title_xfybp_91{box-sizing:border-box;font-weight:700;padding-block-end:.25rem}._ogp-description_xfybp_97{opacity:.7;padding:.25rem}'));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const text = "_text_xfybp_1";
+const code = "_code_xfybp_11";
+const kbd = "_kbd_xfybp_20";
+const link = "_link_xfybp_46";
+const ogp = "_ogp_xfybp_73";
+const style0 = {
+  text,
+  code,
+  kbd,
+  link,
+  ogp,
+  "ogp-text": "_ogp-text_xfybp_86",
+  "ogp-title": "_ogp-title_xfybp_91",
+  "ogp-description": "_ogp-description_xfybp_97"
+};
+export {
+  code,
+  style0 as default,
+  kbd,
+  link,
+  ogp,
+  text
+};

package/dist/components/typography/ElmList.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/vue3-vite';
+import { default as ElmList } from './ElmList.vue';
+declare const meta: Meta<typeof ElmList>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Unordered: Story;
+export declare const Ordered: Story;
+export declare const Nested: Story;

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

@@ -0,0 +1,31 @@
+export interface ElmListProps {
+    /**
+     * The type of list to render.
+     * - `unordered` `<ul/>` for a **bulleted** list
+     * - `ordered` `<ol/>`  for a **numbered** list
+     */
+    listStyle: "unordered" | "ordered";
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        target: unknown;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ElmListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmListProps> & Readonly<{}>, {
+    listStyle: "unordered" | "ordered";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: unknown;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,36 @@
+import { defineComponent, ref, createBlock, openBlock, resolveDynamicComponent, normalizeStyle, normalizeClass, withCtx, renderSlot } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmList",
+  props: {
+    listStyle: { default: "unordered" }
+  },
+  setup(__props) {
+    const target = ref(null);
+    const targetIsVisible = ref(false);
+    useIntersectionObserver(target, ([{ isIntersecting }], _) => {
+      targetIsVisible.value = isIntersecting;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.listStyle === "unordered" ? "ul" : "ol"), {
+        ref_key: "target",
+        ref: target,
+        class: normalizeClass([
+          "elmethis-list-common",
+          __props.listStyle === "unordered" ? "elmethis-bulleted-list" : "elmethis-numbered-list"
+        ]),
+        style: normalizeStyle({
+          "--opacity": targetIsVisible.value ? 1 : 0
+        })
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "style"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,17 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode(".elmethis-list-common{margin-block:1rem;opacity:var(--opacity);transition:opacity .8s;box-sizing:border-box;padding-left:1.25rem}.elmethis-bulleted-list li{box-sizing:border-box;padding-left:.5rem;margin-block:.75rem}.elmethis-bulleted-list li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMTYgMTYnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICA+CiAgICA8cGF0aAogICAgICBmaWxsPScjNDQ5NzYzJwogICAgICBvcGFjaXR5PScwLjgnCiAgICAgIGQ9J00zIDMuNzMyYTEuNSAxLjUgMCAwIDEgMi4zMDUtMS4yNjVsNi43MDYgNC4yNjdhMS41IDEuNSAwIDAgMSAwIDIuNTMxbC02LjcwNiA0LjI2OEExLjUgMS41IDAgMCAxIDMgMTIuMjY3VjMuNzMyWicKICAgIC8+CiAgPC9zdmc+)}.elmethis-bulleted-list li ul li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjQgMjQnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9J3RyYW5zcGFyZW50JwogID4KICAgIDxwYXRoCiAgICAgIHN0cm9rZUxpbmVjYXA9J3JvdW5kJwogICAgICBzdHJva2VMaW5lam9pbj0ncm91bmQnCiAgICAgIGQ9J001LjI1IDUuNjUzYzAtLjg1Ni45MTctMS4zOTggMS42NjctLjk4NmwxMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMSAwIDEuOTcybC0xMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMS0xLjY2Ny0uOTg2VjUuNjUzWicKICAgIC8+CiAgPC9zdmc+)}.elmethis-bulleted-list li ul li ul li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjAgMjAnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9JyM0NDk3NjMnCiAgPgogICAgPHBhdGgKICAgICAgZmlsbFJ1bGU9J2V2ZW5vZGQnCiAgICAgIGQ9J004LjIyIDUuMjJhLjc1Ljc1IDAgMCAxIDEuMDYgMGw0LjI1IDQuMjVhLjc1Ljc1IDAgMCAxIDAgMS4wNmwtNC4yNSA0LjI1YS43NS43NSAwIDAgMS0xLjA2LTEuMDZMMTEuOTQgMTAgOC4yMiA2LjI4YS43NS43NSAwIDAgMSAwLTEuMDZaJwogICAgICBjbGlwUnVsZT0nZXZlbm9kZCcKICAgIC8+CiAgPC9zdmc+)}.elmethis-numbered-list li{box-sizing:border-box;padding-left:.25rem;margin-block:.75rem;margin-left:.25rem;list-style-type:decimal}.elmethis-numbered-list li::marker{font-weight:700;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}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+import _sfc_main from "./ElmList.vue.mjs";
+
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3-vite';
+import { default as ElmParagraph } from './ElmParagraph.vue';
+declare const meta: Meta<typeof ElmParagraph>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

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

@@ -0,0 +1,23 @@
+export interface ElmParagraphProps {
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        target: HTMLParagraphElement;
+    };
+    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, {
+    target: HTMLParagraphElement;
+}, HTMLParagraphElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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,20 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._paragraph_19lcl_1{margin-block:2rem;opacity:var(--opacity);transition:opacity .8s;color:#000000b3}._paragraph_19lcl_1::-moz-selection{color:#ffffffb3;background-color:#000000b3}._paragraph_19lcl_1::selection{color:#ffffffb3;background-color:#000000b3}[data-theme=dark] ._paragraph_19lcl_1{color:#ffffffb3}[data-theme=dark] ._paragraph_19lcl_1::-moz-selection{color:#000000b3;background-color:#ffffffb3}[data-theme=dark] ._paragraph_19lcl_1::selection{color:#000000b3;background-color:#ffffffb3}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const paragraph = "_paragraph_19lcl_1";
+const style0 = {
+  paragraph
+};
+export {
+  style0 as default,
+  paragraph
+};

package/dist/components/typography/ElmTypingAnimation.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3-vite';
+import { default as ElmTypingAnimation } from './ElmTypingAnimation.vue';
+declare const meta: Meta<typeof ElmTypingAnimation>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

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

@@ -0,0 +1,21 @@
+import { Property } from 'csstype';
+export interface ElmTypingAnimationProps {
+    /**
+     * The texts to display.
+     */
+    texts: string[];
+    /**
+     * The interval between each text.
+     */
+    interval?: number;
+    /**
+     * The font size of the text.
+     */
+    fontSize: Property.FontSize<string | number>;
+}
+declare const _default: import('vue').DefineComponent<ElmTypingAnimationProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTypingAnimationProps> & Readonly<{}>, {
+    texts: string[];
+    interval: number;
+    fontSize: Property.FontSize<string | number>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

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

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

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

@@ -0,0 +1,49 @@
+import { defineComponent, ref, onMounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, createTextVNode, createElementVNode, toDisplayString } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmTypingAnimation",
+  props: {
+    texts: { default: () => [] },
+    interval: { default: 3e3 },
+    fontSize: { default: "1rem" }
+  },
+  setup(__props) {
+    const props = __props;
+    const sleep = (duration) => {
+      return new Promise((resolve) => {
+        setTimeout(resolve, duration);
+      });
+    };
+    const display = ref("");
+    onMounted(async () => {
+      while (true) {
+        for (const text of props.texts) {
+          for (const char of text) {
+            await sleep(75);
+            display.value += char;
+          }
+          await sleep(props.interval);
+          while (true) {
+            if (display.value === "") break;
+            display.value = display.value.slice(0, -1);
+            await sleep(25);
+          }
+          await sleep(200);
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(_ctx.$style.text),
+        style: normalizeStyle({ fontSize: __props.fontSize })
+      }, [
+        createTextVNode(toDisplayString(display.value), 1),
+        createElementVNode("span", {
+          class: normalizeClass(_ctx.$style.cursor)
+        }, " ", 2)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,26 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._text_kfz2u_1{font-family:monospace;color:#000c;-webkit-user-select:none;-moz-user-select:none;user-select:none}._text_kfz2u_1::-moz-selection{color:#fffc;background-color:#000c}._text_kfz2u_1::selection{color:#fffc;background-color:#000c}[data-theme=dark] ._text_kfz2u_1{color:#fffc}[data-theme=dark] ._text_kfz2u_1::-moz-selection{color:#000c;background-color:#fffc}[data-theme=dark] ._text_kfz2u_1::selection{color:#000c;background-color:#fffc}@keyframes _blink_kfz2u_1{0%{opacity:0}to{opacity:1}}._cursor_kfz2u_26{margin-inline:1px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:#3e434b80}[data-theme=dark] ._cursor_kfz2u_26{background-color:#cccfd540}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const text = "_text_kfz2u_1";
+const cursor = "_cursor_kfz2u_26";
+const blink = "_blink_kfz2u_1";
+const style0 = {
+  text,
+  cursor,
+  blink
+};
+export {
+  blink,
+  cursor,
+  style0 as default,
+  text
+};

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 {};

package/dist/hooks/useTyping.mjs

@@ -0,0 +1,37 @@
+import { onKeyStroke } from "@vueuse/core";
+import { ref } from "vue";
+function useTyping() {
+  const targetString = ref(null);
+  const targetArray = ref([]);
+  const currentCharIndex = ref(0);
+  const mistakes = ref(0);
+  const isFinished = ref(false);
+  const start = (target) => {
+    isFinished.value = false;
+    currentCharIndex.value = 0;
+    targetString.value = target;
+    targetArray.value = target.split("").map((char) => ({ char, status: "default" }));
+    targetArray.value[0].status = "current";
+  };
+  onKeyStroke((event) => {
+    if (targetArray.value[currentCharIndex.value] != null && !isFinished.value && event.key.length === 1) {
+      if (event.key === targetArray.value[currentCharIndex.value].char) {
+        targetArray.value[currentCharIndex.value].status = "typed";
+        if (currentCharIndex.value === targetArray.value.length - 1) {
+          isFinished.value = true;
+        } else {
+          currentCharIndex.value += 1;
+          targetArray.value[currentCharIndex.value] = targetArray.value[currentCharIndex.value];
+          targetArray.value[currentCharIndex.value].status = "current";
+        }
+      } else {
+        mistakes.value += 1;
+        targetArray.value[currentCharIndex.value].status = "incorrect";
+      }
+    }
+  });
+  return { start, targetArray, isFinished, mistakes };
+}
+export {
+  useTyping
+};