@ohos-ports/histoire-app 1.0.0-beta.0

package/dist/bundled/components/HomeView.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./HomeView.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/HomeView.vue2.js

@@ -0,0 +1,66 @@
+import { defineComponent, computed, createElementBlock, openBlock, createElementVNode, createVNode } from "@histoire/vendors/vue";
+import HistoireLogo from "../assets/histoire.svg.js";
+import { useStoryStore } from "../stores/story.js";
+import { customLogos, histoireConfig } from "../util/config.js";
+import "./app/HomeCounter.vue.js";
+import _sfc_main$1 from "./app/HomeCounter.vue2.js";
+"use strict";
+const _hoisted_1 = { class: "histoire-home-view htw-flex md:htw-flex-col htw-gap-12 htw-items-center htw-justify-center htw-h-full" };
+const _hoisted_2 = ["src"];
+const _hoisted_3 = { class: "htw-flex !md:htw-flex-col htw-flex-wrap htw-justify-evenly htw-gap-2 htw-px-4 htw-py-2 htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded htw-border htw-border-gray-500/30" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HomeView",
+  setup(__props) {
+    const logoUrl = computed(() => histoireConfig.theme?.logo?.square ? customLogos.square : HistoireLogo);
+    const storyStore = useStoryStore();
+    const stats = computed(() => {
+      let storyCount = 0;
+      let variantCount = 0;
+      let docsCount = 0;
+      (storyStore.stories || []).forEach((story) => {
+        if (story.docsOnly) {
+          docsCount++;
+        } else {
+          storyCount++;
+          if (story.variants) {
+            variantCount += story.variants.length;
+          }
+        }
+      });
+      return {
+        storyCount,
+        variantCount,
+        docsCount
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("img", {
+          src: logoUrl.value,
+          alt: "Logo",
+          class: "htw-w-64 htw-h-64 htw-opacity-25 htw-mb-8 htw-hidden md:htw-block"
+        }, null, 8, _hoisted_2),
+        createElementVNode("div", _hoisted_3, [
+          createVNode(_sfc_main$1, {
+            title: "Stories",
+            icon: "carbon:cube",
+            count: stats.value.storyCount
+          }, null, 8, ["count"]),
+          createVNode(_sfc_main$1, {
+            title: "Variants",
+            icon: "carbon:cube-view",
+            count: stats.value.variantCount
+          }, null, 8, ["count"]),
+          createVNode(_sfc_main$1, {
+            title: "Documents",
+            icon: "carbon:document-blank",
+            count: stats.value.docsCount
+          }, null, 8, ["count"])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/app/AppHeader.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./AppHeader.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/app/AppHeader.vue2.js

@@ -0,0 +1,71 @@
+import { defineComponent, computed, resolveDirective, createElementBlock, openBlock, createElementVNode, unref, createVNode, withDirectives, createCommentVNode } from "@histoire/vendors/vue";
+import { Icon } from "@histoire/vendors/iconify";
+import { histoireConfig } from "../../util/config.js";
+import { isDark, toggleDark } from "../../util/dark.js";
+import { onKeyboardShortcut } from "../../util/keyboard.js";
+import { makeTooltip } from "../../util/tooltip.js";
+import "./AppLogo.vue.js";
+import _sfc_main$1 from "./AppLogo.vue2.js";
+"use strict";
+const _hoisted_1 = { class: "histoire-app-header htw-px-4 htw-h-16 htw-flex htw-items-center htw-gap-2" };
+const _hoisted_2 = { class: "htw-py-3 sm:htw-py-4 htw-flex-1 htw-h-full htw-flex htw-items-center htw-pr-2" };
+const _hoisted_3 = ["href"];
+const _hoisted_4 = { class: "htw-ml-auto htw-flex-none htw-flex" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AppHeader",
+  emits: {
+    search: () => true
+  },
+  setup(__props) {
+    const themeIcon = computed(() => {
+      return isDark.value ? "carbon:moon" : "carbon:sun";
+    });
+    onKeyboardShortcut(["ctrl+shift+d", "meta+shift+d"], (event) => {
+      event.preventDefault();
+      toggleDark();
+    });
+    return (_ctx, _cache) => {
+      const _directive_tooltip = resolveDirective("tooltip");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("a", {
+            href: unref(histoireConfig).theme?.logoHref,
+            target: "_blank",
+            class: "htw-w-full htw-h-full htw-flex htw-items-center"
+          }, [
+            createVNode(_sfc_main$1, { class: "htw-max-w-full htw-max-h-full" })
+          ], 8, _hoisted_3)
+        ]),
+        createElementVNode("div", _hoisted_4, [
+          withDirectives((openBlock(), createElementBlock("a", {
+            class: "htw-p-2 sm:htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100",
+            "data-test-id": "search-btn",
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("search"))
+          }, [
+            createVNode(unref(Icon), {
+              icon: "carbon:search",
+              class: "htw-w-6 htw-h-6 sm:htw-w-4 sm:htw-h-4"
+            })
+          ])), [
+            [_directive_tooltip, unref(makeTooltip)("Search", ({ isMac }) => isMac ? "meta+k" : "ctrl+k")]
+          ]),
+          !unref(histoireConfig).theme.hideColorSchemeSwitch ? withDirectives((openBlock(), createElementBlock("a", {
+            key: 0,
+            class: "htw-p-2 sm:htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100",
+            onClick: _cache[1] || (_cache[1] = ($event) => unref(toggleDark)())
+          }, [
+            createVNode(unref(Icon), {
+              icon: themeIcon.value,
+              class: "htw-w-6 htw-h-6 sm:htw-w-4 sm:htw-h-4"
+            }, null, 8, ["icon"])
+          ])), [
+            [_directive_tooltip, unref(makeTooltip)("Toggle dark mode", ({ isMac }) => isMac ? "meta+shift+d" : "ctrl+shift+d")]
+          ]) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/app/AppLogo.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./AppLogo.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/app/AppLogo.vue2.js

@@ -0,0 +1,29 @@
+import { defineComponent, computed, createElementBlock, openBlock } from "@histoire/vendors/vue";
+import HistoireLogoDark from "../../assets/histoire-text-dark.svg.js";
+import HistoireLogoLight from "../../assets/histoire-text.svg.js";
+import { customLogos, histoireConfig } from "../../util/config.js";
+import { isDark } from "../../util/dark.js";
+"use strict";
+const _hoisted_1 = ["src", "alt"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AppLogo",
+  setup(__props) {
+    const logoUrl = computed(() => {
+      if (isDark.value) {
+        return histoireConfig.theme.logo?.dark ? customLogos.dark : HistoireLogoDark;
+      }
+      return histoireConfig.theme.logo?.light ? customLogos.light : HistoireLogoLight;
+    });
+    const altText = computed(() => `${histoireConfig.theme.title} logo`);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("img", {
+        class: "histoire-app-logo",
+        src: logoUrl.value,
+        alt: altText.value
+      }, null, 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/app/Breadcrumb.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./Breadcrumb.vue2.js";
+/* empty css                */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+"use strict";
+const Breadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d15ecb89"]]);
+export {
+  Breadcrumb as default
+};

package/dist/bundled/components/app/Breadcrumb.vue2.js

@@ -0,0 +1,91 @@
+import { defineComponent, useCssVars, computed, ref, watch, createElementBlock, openBlock, Fragment, createElementVNode, createVNode, renderList, toDisplayString, createTextVNode, unref, normalizeClass, withCtx } from "@histoire/vendors/vue";
+import { Icon } from "@histoire/vendors/iconify";
+import { useStoryStore } from "../../stores/story.js";
+import "../tree/StoryList.vue.js";
+import "./MobileOverlay.vue.js";
+import _sfc_main$1 from "./MobileOverlay.vue2.js";
+import _sfc_main$2 from "../tree/StoryList.vue2.js";
+"use strict";
+const _hoisted_1 = { class: "histoire-breadcrumb" };
+const _hoisted_2 = { class: "htw-flex htw-items-center htw-gap-2" };
+const _hoisted_3 = { class: "htw-opacity-40 htw-text-sm" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Breadcrumb",
+  props: {
+    tree: {},
+    stories: {}
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "a3f02f4e": story.value?.iconColor
+    }));
+    const storyStore = useStoryStore();
+    const story = computed(() => storyStore.currentStory);
+    const folders = computed(() => {
+      return story.value.file.path.slice(0, -1);
+    });
+    const isMenuOpened = ref(false);
+    function openMenu() {
+      isMenuOpened.value = true;
+    }
+    function closeMenu() {
+      isMenuOpened.value = false;
+    }
+    watch(story, () => {
+      isMenuOpened.value = false;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("a", {
+            class: "htw-px-6 htw-h-12 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-flex htw-gap-2 htw-flex-wrap htw-w-full htw-items-center",
+            onClick: openMenu
+          }, [
+            story.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(folders.value, (file, key) => {
+                return openBlock(), createElementBlock(Fragment, { key }, [
+                  createElementVNode("span", null, toDisplayString(file), 1),
+                  _cache[0] || (_cache[0] = createElementVNode("span", { class: "htw-opacity-40" }, " / ", -1))
+                ], 64);
+              }), 128)),
+              createElementVNode("span", _hoisted_2, [
+                createVNode(unref(Icon), {
+                  icon: story.value.icon ?? "carbon:cube",
+                  class: normalizeClass(["htw-w-5 htw-h-5 htw-flex-none", {
+                    "htw-text-primary-500": !story.value.iconColor,
+                    "bind-icon-color": story.value.iconColor
+                  }])
+                }, null, 8, ["icon", "class"]),
+                createTextVNode(" " + toDisplayString(story.value.title) + " ", 1),
+                createElementVNode("span", _hoisted_3, toDisplayString(story.value.variants.length), 1)
+              ])
+            ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createTextVNode(" Select a story... ")
+            ], 64)),
+            createVNode(unref(Icon), {
+              icon: "carbon:chevron-sort",
+              class: "htw-w-5 htw-h-5 htw-shrink-0 htw-ml-auto"
+            })
+          ])
+        ]),
+        createVNode(_sfc_main$1, {
+          title: "Select a story",
+          opened: isMenuOpened.value,
+          onClose: closeMenu
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$2, {
+              tree: __props.tree,
+              stories: __props.stories,
+              class: "htw-flex-1 htw-overflow-y-scroll"
+            }, null, 8, ["tree", "stories"])
+          ]),
+          _: 1
+        }, 8, ["opened"])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/app/HomeCounter.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./HomeCounter.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/app/HomeCounter.vue2.js

@@ -0,0 +1,42 @@
+import { defineComponent, createElementBlock, openBlock, createVNode, createElementVNode, unref, toDisplayString } from "@histoire/vendors/vue";
+import { Icon } from "@histoire/vendors/iconify";
+"use strict";
+const _hoisted_1 = { class: "htw-p-2 htw-flex htw-items-center htw-gap-x-2" };
+const _hoisted_2 = { class: "htw-flex htw-flex-col htw-leading-none" };
+const _hoisted_3 = { class: "htw-text-primary-500 htw-min-w-[80px] htw-font-bold" };
+const _hoisted_4 = { class: "htw-text-sm htw-text-gray-900 dark:htw-text-gray-100" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HomeCounter",
+  props: {
+    icon: {
+      type: String,
+      default: "carbon:cube"
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    count: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(Icon), {
+          icon: props.icon,
+          class: "htw-text-2xl htw-text-gray-700 dark:htw-text-gray-300 htw-flex-none"
+        }, null, 8, ["icon"]),
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("span", _hoisted_3, toDisplayString(__props.count), 1),
+          createElementVNode("span", _hoisted_4, toDisplayString(__props.title), 1)
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/app/InitialLoading.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./InitialLoading.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/app/InitialLoading.vue2.js

@@ -0,0 +1,51 @@
+import { defineComponent, reactive, createElementBlock, openBlock, createVNode, Transition, withCtx, createCommentVNode, normalizeStyle, Fragment, renderList, createElementVNode, normalizeClass } from "@histoire/vendors/vue";
+"use strict";
+const _hoisted_1 = { class: "histoire-initial-loading htw-fixed htw-inset-0 htw-bg-white dark:htw-bg-gray-700 htw-flex htw-flex-col htw-gap-6 htw-items-center htw-justify-center" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "InitialLoading",
+  setup(__props) {
+    const progress = reactive({
+      loaded: 0,
+      total: 0
+    });
+    const maxCols = window.innerWidth / 20;
+    if (import.meta.hot) {
+      import.meta.hot.on("histoire:stories-loading-progress", (data) => {
+        progress.loaded = data.loadedFileCount;
+        progress.total = data.totalFileCount;
+      });
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(Transition, { name: "__histoire-fade" }, {
+          default: withCtx(() => [
+            progress.total > 0 ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "htw-grid htw-gap-2",
+              style: normalizeStyle({
+                gridTemplateColumns: `repeat(${Math.min(Math.ceil(Math.sqrt(progress.total)), maxCols)}, minmax(0, 1fr))`
+              })
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(progress.total, (n) => {
+                return openBlock(), createElementBlock("div", {
+                  key: n,
+                  class: "htw-bg-primary-500/10 htw-rounded-full"
+                }, [
+                  createElementVNode("div", {
+                    class: normalizeClass(["htw-w-3 htw-h-3 htw-bg-primary-500 htw-rounded-full htw-duration-150 htw-ease-out", {
+                      "htw-transition-transform htw-scale-0": n >= progress.loaded
+                    }])
+                  }, null, 2)
+                ]);
+              }), 128))
+            ], 4)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/app/MobileOverlay.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./MobileOverlay.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/app/MobileOverlay.vue2.js

@@ -0,0 +1,45 @@
+import { defineComponent, createBlock, openBlock, Transition, withCtx, createElementBlock, createCommentVNode, createElementVNode, renderSlot, toDisplayString, createVNode, unref } from "@histoire/vendors/vue";
+import { Icon } from "@histoire/vendors/iconify";
+"use strict";
+const _hoisted_1 = {
+  key: 0,
+  class: "histoire-mobile-overlay htw-absolute htw-z-10 htw-bg-white dark:htw-bg-gray-700 htw-w-screen htw-h-screen htw-inset-0 htw-overflow-hidden htw-flex htw-flex-col"
+};
+const _hoisted_2 = { class: "htw-p-4 htw-h-16 htw-flex htw-border-b htw-border-gray-100 dark:htw-border-gray-800 htw-items-center htw-place-content-between" };
+const _hoisted_3 = { class: "htw-text-gray-500" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MobileOverlay",
+  props: {
+    title: {},
+    opened: { type: Boolean }
+  },
+  emits: ["close"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, { name: "__histoire-fade-bottom" }, {
+        default: withCtx(() => [
+          __props.opened ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("span", _hoisted_3, toDisplayString(__props.title), 1),
+              createElementVNode("a", {
+                class: "htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer",
+                onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
+              }, [
+                createVNode(unref(Icon), {
+                  icon: "carbon:close",
+                  class: "htw-w-8 htw-h-8 htw-shrink-0"
+                })
+              ])
+            ]),
+            renderSlot(_ctx.$slots, "default")
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/base/BaseButton.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./BaseButton.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/base/BaseButton.vue2.js

@@ -0,0 +1,39 @@
+import { defineComponent, computed, createBlock, openBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from "@histoire/vendors/vue";
+import { RouterLink } from "@histoire/vendors/vue-router";
+"use strict";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "BaseButton",
+  props: {
+    to: {},
+    href: {},
+    color: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const comp = computed(() => {
+      if (props.to) {
+        return RouterLink;
+      }
+      if (props.href) {
+        return "a";
+      }
+      return "button";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(comp.value), {
+        class: normalizeClass(["histoire-base-button htw-rounded htw-cursor-pointer", {
+          "htw-bg-primary-200 dark:htw-bg-primary-800 hover:htw-bg-primary-300 dark:hover:htw-bg-primary-700": __props.color === "primary" || !__props.color,
+          "htw-bg-grey-100 dark:htw-bg-grey-900 hover:htw-bg-grey-200 dark:hover:htw-bg-grey-800": __props.color === "grey"
+        }])
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/base/BaseCheckbox.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./BaseCheckbox.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/base/BaseCheckbox.vue2.js

@@ -0,0 +1,78 @@
+import { defineComponent, ref, computed, watch, createElementBlock, openBlock, withKeys, withModifiers, createElementVNode, renderSlot, normalizeClass } from "@histoire/vendors/vue";
+"use strict";
+const _hoisted_1 = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
+const _hoisted_2 = {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  class: "htw-relative htw-z-10"
+};
+const _hoisted_3 = ["stroke-dasharray", "stroke-dashoffset"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "BaseCheckbox",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    "update:modelValue": (_newValue) => true
+  },
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    function toggle() {
+      emit("update:modelValue", !props.modelValue);
+      animationEnabled.value = true;
+    }
+    const path = ref();
+    const dasharray = ref(0);
+    const progress = computed(() => props.modelValue ? 1 : 0);
+    const dashoffset = computed(() => (1 - progress.value) * dasharray.value);
+    const animationEnabled = ref(false);
+    watch(path, () => {
+      dasharray.value = path.value.getTotalLength?.() ?? 21.21;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        role: "checkbox",
+        tabindex: "0",
+        class: "histoire-base-checkbox htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700",
+        onClick: _cache[0] || (_cache[0] = ($event) => toggle()),
+        onKeydown: [
+          _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["enter"])),
+          _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["space"]))
+        ]
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", {
+            class: normalizeClass(["htw-border group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out", [
+              __props.modelValue ? "htw-border-primary-500 htw-border-8" : "htw-border-black/25 dark:htw-border-white/25 htw-delay-150"
+            ]])
+          }, null, 2),
+          (openBlock(), createElementBlock("svg", _hoisted_2, [
+            createElementVNode("path", {
+              ref_key: "path",
+              ref: path,
+              d: "m 4 12 l 5 5 l 10 -10",
+              fill: "none",
+              class: normalizeClass(["htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out", [
+                animationEnabled.value ? "htw-transition-all" : "htw-transition-none",
+                {
+                  "htw-delay-150": __props.modelValue
+                }
+              ]]),
+              "stroke-dasharray": dasharray.value,
+              "stroke-dashoffset": dashoffset.value
+            }, null, 10, _hoisted_3)
+          ]))
+        ]),
+        renderSlot(_ctx.$slots, "default")
+      ], 32);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/base/BaseEmpty.vue.js

@@ -0,0 +1,14 @@
+import { createElementBlock, openBlock, renderSlot } from "@histoire/vendors/vue";
+/* empty css               */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {};
+const _hoisted_1 = { class: "histoire-base-empty htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400 htw-text-lg" };
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    renderSlot(_ctx.$slots, "default", {}, void 0, true)
+  ]);
+}
+const BaseEmpty = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c5ecfead"]]);
+export {
+  BaseEmpty as default
+};

package/dist/bundled/components/base/BaseIcon.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./BaseIcon.vue2.js";
+/* empty css              */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+"use strict";
+const BaseIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2114f510"]]);
+export {
+  BaseIcon as default
+};

package/dist/bundled/components/base/BaseIcon.vue2.js

@@ -0,0 +1,29 @@
+import { defineComponent, computed, createElementBlock, createBlock, openBlock, unref } from "@histoire/vendors/vue";
+import { Icon } from "@histoire/vendors/iconify";
+"use strict";
+const _hoisted_1 = ["src", "alt"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "BaseIcon",
+  props: {
+    icon: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const isUrl = computed(() => props.icon.startsWith("http") || props.icon.startsWith("data:image") || props.icon.startsWith(".") || props.icon.startsWith("/"));
+    return (_ctx, _cache) => {
+      return isUrl.value ? (openBlock(), createElementBlock("img", {
+        key: 0,
+        src: __props.icon,
+        alt: __props.icon,
+        class: "histoire-base-icon"
+      }, null, 8, _hoisted_1)) : (openBlock(), createBlock(unref(Icon), {
+        key: 1,
+        icon: __props.icon,
+        class: "histoire-base-icon"
+      }, null, 8, ["icon"]));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/base/BaseKeyboardShortcut.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./BaseKeyboardShortcut.vue2.js";
+"use strict";
+export {
+  _sfc_main as default
+};

package/dist/bundled/components/base/BaseKeyboardShortcut.vue2.js

@@ -0,0 +1,20 @@
+import { defineComponent, computed, createElementBlock, openBlock, toDisplayString } from "@histoire/vendors/vue";
+import { formatKey } from "../../util/keyboard.js";
+"use strict";
+const _hoisted_1 = { class: "histoire-base-keyboard-shortcut htw-border htw-border-current htw-opacity-50 htw-px-1 htw-rounded-sm" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "BaseKeyboardShortcut",
+  props: {
+    shortcut: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const formatted = computed(() => props.shortcut.split("+").map((k) => formatKey(k.trim())).join(" "));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(formatted.value), 1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};