@histoire/controls 0.17.15 → 0.17.17

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as et, openBlock as D, createElementBlock as K, normalizeClass as dt, renderSlot as ht, createBlock as Q, resolveDynamicComponent as ma, withCtx as G, withDirectives as Et, createTextVNode as se, toDisplayString as Dt, unref as Ct, createElementVNode as B, computed as nt, Fragment as ge, renderList as Ve, watch as as, ref as rt, withKeys as Ue, withModifiers as Ye, createVNode as Ts, normalizeStyle as Pt, mergeProps as He, onUnmounted as wa, vModelText as qn, createCommentVNode as te, onMounted as ya, watchEffect as ba } from "@histoire/vendors/vue";
+import { defineComponent as et, openBlock as D, createElementBlock as K, normalizeClass as dt, renderSlot as ht, createBlock as Q, resolveDynamicComponent as ma, withCtx as G, withDirectives as Et, createTextVNode as se, toDisplayString as Dt, unref as Ct, createElementVNode as B, computed as nt, Fragment as ge, renderList as Ve, watch as as, ref as lt, withKeys as Ue, withModifiers as Ye, createVNode as Ts, normalizeStyle as Pt, mergeProps as He, onUnmounted as wa, vModelText as qn, createCommentVNode as te, onMounted as ya, watchEffect as ba } from "@histoire/vendors/vue";
 import { VTooltip as me, Dropdown as ka } from "@histoire/vendors/floating-vue";
 import { Icon as Gn } from "@histoire/vendors/iconify";
 import { useClipboard as xa } from "@histoire/vendors/vue-use";
@@ -121,7 +121,7 @@ const va = {
     as(() => e.modelValue, () => {
       a.value = !0;
     });
-    const r = rt(), o = rt(0), l = nt(() => e.modelValue ? 1 : 0), h = nt(() => (1 - l.value) * o.value), a = rt(!1);
+    const r = lt(), o = lt(0), l = nt(() => e.modelValue ? 1 : 0), h = nt(() => (1 - l.value) * o.value), a = lt(!1);
     return as(r, () => {
       var c, f;
       o.value = ((f = (c = r.value).getTotalLength) == null ? void 0 : f.call(c)) ?? 21.21;
@@ -253,7 +253,7 @@ const va = {
     "update:modelValue": (n) => !0
   },
   setup(n, { emit: t }) {
-    const e = t, i = rt();
+    const e = t, i = lt();
     return (s, r) => (D(), Q(Vt, {
       title: s.title,
       class: dt(["histoire-text htw-cursor-text htw-items-center", s.$attrs.class]),
@@ -295,18 +295,18 @@ const va = {
       set: (d) => {
         i("update:modelValue", d);
       }
-    }), r = rt();
+    }), r = lt();
     function o() {
       r.value.focus(), r.value.select();
     }
-    const l = rt(!1);
+    const l = lt(!1);
     let h, a;
     function c(d) {
       l.value = !0, h = d.clientX, a = s.value, window.addEventListener("mousemove", f), window.addEventListener("mouseup", u);
     }
     function f(d) {
-      let p = parseFloat(r.value.step);
-      isNaN(p) && (p = 1), s.value = a + Math.round((d.clientX - h) / 10 / p) * p;
+      let p = Number.parseFloat(r.value.step);
+      Number.isNaN(p) && (p = 1), s.value = a + Math.round((d.clientX - h) / 10 / p) * p;
     }
     function u() {
       l.value = !1, window.removeEventListener("mousemove", f), window.removeEventListener("mouseup", u);
@@ -365,13 +365,13 @@ const va = {
     "update:modelValue": (n) => !0
   },
   setup(n, { emit: t }) {
-    const e = n, i = t, s = rt(!1), r = rt(null), o = nt({
+    const e = n, i = t, s = lt(!1), r = lt(null), o = nt({
       get: () => e.modelValue,
       set: (a) => {
         i("update:modelValue", a);
       }
     }), l = nt(() => (e.modelValue - e.min) / (e.max - e.min)), h = nt(() => r.value ? {
-      left: 8 + (r.value.clientWidth - 16) * l.value + "px"
+      left: `${8 + (r.value.clientWidth - 16) * l.value}px`
     } : {});
     return (a, c) => (D(), Q(Vt, {
       class: dt(["histoire-slider htw-items-center", a.$attrs.class]),
@@ -423,7 +423,7 @@ const va = {
     "update:modelValue": (n) => !0
   },
   setup(n, { emit: t }) {
-    const e = t, i = rt();
+    const e = t, i = lt();
     return (s, r) => (D(), Q(Vt, {
       title: s.title,
       class: dt(["histoire-textarea htw-cursor-text", s.$attrs.class]),
@@ -532,10 +532,11 @@ const va = {
     content: { type: [String, Function] }
   },
   setup(n) {
-    const t = n, { copy: e, copied: i } = xa(), s = async () => {
+    const t = n, { copy: e, copied: i } = xa();
+    async function s() {
       const r = typeof t.content == "function" ? await t.content() : t.content;
       e(r);
-    };
+    }
     return (r, o) => Et((D(), Q(Ct(Gn), {
       icon: "carbon:copy-file",
       class: "htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer",
@@ -563,10 +564,14 @@ const va = {
     search: {}
   },
   setup(n) {
-    const t = n, e = (o, l = "") => Object.entries(o).reduce((h, [a, c]) => {
-      const f = l ? a === "DEFAULT" ? l : `${l}-${a}` : a, u = typeof c == "object" ? e(c, f) : { [f]: c };
-      return { ...h, ...u };
-    }, {}), i = nt(() => {
+    const t = n;
+    function e(o, l = "") {
+      return Object.entries(o).reduce((h, [a, c]) => {
+        const f = l ? a === "DEFAULT" ? l : `${l}-${a}` : a, u = typeof c == "object" ? e(c, f) : { [f]: c };
+        return { ...h, ...u };
+      }, {});
+    }
+    const i = nt(() => {
       const o = t.shades, l = t.getName, h = e(o);
       return Object.entries(h).map(([a, c]) => {
         const f = l ? l(a, c) : a;
@@ -583,7 +588,7 @@ const va = {
         o = o.filter(({ name: h }) => l.test(h));
       }
       return o;
-    }), r = rt(null);
+    }), r = lt(null);
     return (o, l) => s.value.length ? (D(), K("div", oc, [
       (D(!0), K(ge, null, Ve(s.value, (h) => (D(), K("div", {
         key: h.key,
@@ -649,7 +654,7 @@ const va = {
           value: typeof l == "number" ? l.toString() : l
         };
       });
-    }), i = rt(null);
+    }), i = lt(null);
     return (s, r) => (D(!0), K(ge, null, Ve(e.value, (o) => (D(), K("div", {
       key: o.key,
       class: "histoire-token-list htw-flex htw-flex-col htw-gap-2 htw-my-8",
@@ -697,7 +702,7 @@ const va = {
           value: typeof h == "number" ? h.toString() : h
         };
       });
-    }), i = nt(() => `${t.colSize}px`), s = rt(null);
+    }), i = nt(() => `${t.colSize}px`), s = lt(null);
     return (r, o) => (D(), K("div", {
       class: "histoire-token-grid htw-bind-col-size htw-grid htw-gap-4 htw-m-4",
       style: Pt({
@@ -755,7 +760,7 @@ const va = {
     function r(l) {
       s("update:modelValue", l), o.value = !0;
     }
-    const o = rt(!1);
+    const o = lt(!1);
     return (l, h) => (D(), Q(Vt, {
       role: "group",
       title: l.title,
@@ -3627,12 +3632,12 @@ var ye = {
   221: "}",
   222: '"'
 }, Xc = typeof navigator < "u" && /Mac/.test(navigator.platform), Zc = typeof navigator < "u" && /MSIE \d|Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent);
-for (var lt = 0; lt < 10; lt++)
-  ye[48 + lt] = ye[96 + lt] = String(lt);
-for (var lt = 1; lt <= 24; lt++)
-  ye[lt + 111] = "F" + lt;
-for (var lt = 65; lt <= 90; lt++)
-  ye[lt] = String.fromCharCode(lt + 32), yi[lt] = String.fromCharCode(lt);
+for (var ot = 0; ot < 10; ot++)
+  ye[48 + ot] = ye[96 + ot] = String(ot);
+for (var ot = 1; ot <= 24; ot++)
+  ye[ot + 111] = "F" + ot;
+for (var ot = 65; ot <= 90; ot++)
+  ye[ot] = String.fromCharCode(ot + 32), yi[ot] = String.fromCharCode(ot);
 for (var $s in ye)
   yi.hasOwnProperty($s) || (yi[$s] = ye[$s]);
 function tf(n) {
@@ -6689,7 +6694,7 @@ class xt extends oh {
   }
   replace(t, e, i) {
     let s = i[0];
-    return i.length == 1 && (s instanceof xt || s instanceof ot && s.flags & 4) && Math.abs(this.length - s.length) < 10 ? (s instanceof ot ? s = new xt(s.length, this.height) : s.height = this.height, this.outdated || (s.outdated = !1), s) : pt.of(i);
+    return i.length == 1 && (s instanceof xt || s instanceof rt && s.flags & 4) && Math.abs(this.length - s.length) < 10 ? (s instanceof rt ? s = new xt(s.length, this.height) : s.height = this.height, this.outdated || (s.outdated = !1), s) : pt.of(i);
   }
   updateHeight(t, e = 0, i = !1, s) {
     return s && s.from <= e && s.more ? this.setHeight(t, s.heights[s.index++]) : (i || this.outdated) && this.setHeight(t, Math.max(this.widgetHeight, t.heightForLine(this.length - this.collapsed)) + this.breaks * t.lineHeight), this.outdated = !1, this;
@@ -6698,7 +6703,7 @@ class xt extends oh {
     return `line(${this.length}${this.collapsed ? -this.collapsed : ""}${this.widgetHeight ? ":" + this.widgetHeight : ""})`;
   }
 }
-class ot extends pt {
+class rt extends pt {
   constructor(t) {
     super(t, 0);
   }
@@ -6748,25 +6753,25 @@ class ot extends pt {
     let s = this.length - e;
     if (s > 0) {
       let r = i[i.length - 1];
-      r instanceof ot ? i[i.length - 1] = new ot(r.length + s) : i.push(null, new ot(s - 1));
+      r instanceof rt ? i[i.length - 1] = new rt(r.length + s) : i.push(null, new rt(s - 1));
     }
     if (t > 0) {
       let r = i[0];
-      r instanceof ot ? i[0] = new ot(t + r.length) : i.unshift(new ot(t - 1), null);
+      r instanceof rt ? i[0] = new rt(t + r.length) : i.unshift(new rt(t - 1), null);
     }
     return pt.of(i);
   }
   decomposeLeft(t, e) {
-    e.push(new ot(t - 1), null);
+    e.push(new rt(t - 1), null);
   }
   decomposeRight(t, e) {
-    e.push(null, new ot(this.length - t - 1));
+    e.push(null, new rt(this.length - t - 1));
   }
   updateHeight(t, e = 0, i = !1, s) {
     let r = e + this.length;
     if (s && s.from <= e + this.length && s.more) {
       let o = [], l = Math.max(e, s.from), h = -1;
-      for (s.from > e && o.push(new ot(s.from - e - 1).updateHeight(t, e)); l <= r && s.more; ) {
+      for (s.from > e && o.push(new rt(s.from - e - 1).updateHeight(t, e)); l <= r && s.more; ) {
         let c = t.doc.lineAt(l).length;
         o.length && o.push(null);
         let f = s.heights[s.index++];
@@ -6774,7 +6779,7 @@ class ot extends pt {
         let u = new xt(c, f);
         u.outdated = !1, o.push(u), l += c + 1;
       }
-      l <= r && o.push(null, new ot(r - l).updateHeight(t, l));
+      l <= r && o.push(null, new rt(r - l).updateHeight(t, l));
       let a = pt.of(o);
       return (h < 0 || Math.abs(a.height - this.height) >= is || Math.abs(h - this.heightMetrics(t, e).perLine) >= is) && (t.heightChanged = !0), a;
     } else
@@ -6854,7 +6859,7 @@ class ou extends pt {
 }
 function io(n, t) {
   let e, i;
-  n[t] == null && (e = n[t - 1]) instanceof ot && (i = n[t + 1]) instanceof ot && n.splice(t - 1, 3, new ot(e.length + 1 + i.length));
+  n[t] == null && (e = n[t - 1]) instanceof rt && (i = n[t + 1]) instanceof rt && n.splice(t - 1, 3, new rt(e.length + 1 + i.length));
 }
 const lu = 5;
 class sr {
@@ -6888,7 +6893,7 @@ class sr {
     this.lineStart = t, this.lineEnd = e, this.writtenTo < t && ((this.writtenTo < t - 1 || this.nodes[this.nodes.length - 1] == null) && this.nodes.push(this.blankContent(this.writtenTo, t - 1)), this.nodes.push(null)), this.pos > t && this.nodes.push(new xt(this.pos - t, -1)), this.writtenTo = this.pos;
   }
   blankContent(t, e) {
-    let i = new ot(e - t);
+    let i = new rt(e - t);
     return this.oracle.doc.lineAt(t).to == e && (i.flags |= 4), i;
   }
   ensureLine() {
@@ -15388,7 +15393,7 @@ const Gg = /* @__PURE__ */ T.baseTheme({
     tag: w.invalid,
     color: Jg
   }
-]), ga = rt(!1);
+]), ga = lt(!1);
 window.__hst_controls_dark || (window.__hst_controls_dark = []);
 window.__hst_controls_dark.push(ga);
 var Xo;
@@ -15408,7 +15413,7 @@ const rm = {
   setup(n, { emit: t }) {
     const e = n, i = t;
     let s;
-    const r = rt(""), o = rt(!1), l = rt(), h = {
+    const r = lt(""), o = lt(!1), l = lt(), h = {
       light: [T.baseTheme({}), Do(ap)],
       dark: [sm, Do(nm)]
     }, a = new Ai(), c = [
@@ -15486,7 +15491,7 @@ const rm = {
   for (const [i, s] of t)
     e[i] = s;
   return e;
-}, hm = /* @__PURE__ */ lm(om, [["__scopeId", "data-v-9f3f2832"]]), am = { class: "htw-flex htw-flex-row htw-gap-1" }, cm = ["value"], fm = {
+}, hm = /* @__PURE__ */ lm(om, [["__scopeId", "data-v-935458a7"]]), am = { class: "htw-flex htw-flex-row htw-gap-1" }, cm = ["value"], fm = {
   name: "HstColorSelect",
   inheritAttrs: !1
 }, um = /* @__PURE__ */ et({
@@ -15499,55 +15504,52 @@ const rm = {
     "update:modelValue": (n) => !0
   },
   setup(n, { emit: t }) {
-    const e = n, i = t, s = rt(null), r = nt({
+    const e = n, i = t, s = nt({
       get: () => e.modelValue,
-      set: (a) => {
-        i("update:modelValue", a);
+      set: (h) => {
+        i("update:modelValue", h);
       }
     });
-    function o(a, c = 15) {
-      let f = !1, u;
-      const d = () => {
-        u == null ? f = !1 : (a(...u), u = null, setTimeout(d, c));
+    function r(h, a = 15) {
+      let c = !1, f;
+      const u = () => {
+        f == null ? c = !1 : (h(...f), f = null, setTimeout(u, a));
       };
-      return (...p) => {
-        if (f) {
-          u = p;
+      return (...d) => {
+        if (c) {
+          f = d;
           return;
         }
-        a(...p), f = !0, setTimeout(d, c);
+        h(...d), c = !0, setTimeout(u, a);
       };
     }
-    const l = o((a) => {
-      i("update:modelValue", a);
+    const o = r((h) => {
+      i("update:modelValue", h);
     });
-    function h(a) {
-      l(a);
+    function l(h) {
+      o(h);
     }
-    return (a, c) => (D(), Q(Vt, {
-      title: a.title,
-      class: dt(["histoire-select htw-cursor-text htw-items-center", a.$attrs.class]),
-      style: Pt(a.$attrs.style)
+    return (h, a) => (D(), Q(Vt, {
+      title: h.title,
+      class: dt(["histoire-select htw-cursor-text htw-items-center", h.$attrs.class]),
+      style: Pt(h.$attrs.style)
     }, {
       actions: G(() => [
-        ht(a.$slots, "actions")
+        ht(h.$slots, "actions")
       ]),
       default: G(() => [
         B("div", am, [
-          Et(B("input", He({
-            ref_key: "input",
-            ref: s
-          }, { ...a.$attrs, class: null, style: null }, {
-            "onUpdate:modelValue": c[0] || (c[0] = (f) => r.value = f),
+          Et(B("input", He({ ...h.$attrs, class: null, style: null }, {
+            "onUpdate:modelValue": a[0] || (a[0] = (c) => s.value = c),
             type: "text",
             class: "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm"
           }), null, 16), [
-            [qn, r.value]
+            [qn, s.value]
           ]),
           B("input", {
             type: "color",
-            value: a.modelValue,
-            onInput: c[1] || (c[1] = (f) => h(f.target.value))
+            value: h.modelValue,
+            onInput: a[1] || (a[1] = (c) => l(c.target.value))
           }, null, 40, cm)
         ])
       ]),

package/dist/style.css

@@ -1 +1 @@
-.htw-range-input::-webkit-slider-thumb{height:.75rem;width:.75rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}:is(.htw-dark .htw-range-input)::-webkit-slider-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-webkit-slider-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.htw-range-input::-moz-range-thumb{height:.75rem;width:.75rem;-moz-appearance:none;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}:is(.htw-dark .htw-range-input)::-moz-range-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-moz-range-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}.__histoire-json-code[data-v-9f3f2832] .cm-editor{height:100%;min-width:280px}
+.htw-range-input::-webkit-slider-thumb{height:.75rem;width:.75rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}:is(.htw-dark .htw-range-input)::-webkit-slider-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-webkit-slider-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.htw-range-input::-moz-range-thumb{height:.75rem;width:.75rem;-moz-appearance:none;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}:is(.htw-dark .htw-range-input)::-moz-range-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-moz-range-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}.__histoire-json-code[data-v-935458a7] .cm-editor{height:100%;min-width:280px}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@histoire/controls",
-  "version": "0.17.15",
+  "type": "module",
+  "version": "0.17.17",
   "description": "Prebuilt controls components",
-  "license": "MIT",
   "author": {
     "name": "Guillaume Chau"
   },
+  "license": "MIT",
   "repository": {
     "url": "https://github.com/Akryum/histoire.git",
     "type": "git",
@@ -14,7 +15,11 @@
   "publishConfig": {
     "access": "public"
   },
-  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.postcss",
+    "*.vue"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -25,11 +30,6 @@
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
-  "sideEffects": [
-    "*.css",
-    "*.postcss",
-    "*.vue"
-  ],
   "dependencies": {
     "@codemirror/commands": "^6.3.0",
     "@codemirror/lang-json": "^6.0.1",
@@ -38,8 +38,8 @@
     "@codemirror/state": "^6.3.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.22.0",
-    "@histoire/shared": "^0.17.15",
-    "@histoire/vendors": "^0.17.15"
+    "@histoire/shared": "^0.17.17",
+    "@histoire/vendors": "^0.17.17"
   },
   "devDependencies": {
     "@types/node": "^18.11.9",
@@ -54,11 +54,11 @@
     "postcss": "^8.4.31",
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.3.5",
-    "typescript": "^4.9.5",
+    "typescript": "^5.4.4",
     "vite": "^5.0.11",
     "vitest": "^0.34.6",
     "vue": "^3.3.8",
-    "vue-tsc": "^1.8.22"
+    "vue-tsc": "^2.0.11"
   },
   "scripts": {
     "build": "rimraf dist && pnpm run build:css && vite build && pnpm run build:types",

package/src/components/HstCopyIcon.vue

@@ -16,7 +16,7 @@ const props = defineProps<{
 
 const { copy, copied } = useClipboard()
 
-const action = async () => {
+async function action() {
   const content = typeof props.content === 'function' ? await props.content() : props.content
   copy(content)
 }

package/src/components/HstWrapper.vue

@@ -15,7 +15,6 @@ withDefaults(defineProps<{
   title: undefined,
   tag: 'label',
 })
-
 </script>
 
 <template>

package/src/components/button/HstButton.story.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import HstButton from './HstButton.vue'
 
-const variants: Array<{name: string, bind?: unknown}> = [
+const variants: Array<{ name: string, bind?: unknown }> = [
   { name: 'Default' },
   { name: 'Primary', bind: { color: 'primary' } },
   { name: 'Flat', bind: { color: 'flat' } },

package/src/components/button/HstButtonGroup.story.vue

@@ -15,7 +15,7 @@ const objectOptions = Object.keys(options).map(key => ({
   value: key,
 }))
 
-function initState () {
+function initState() {
   return {
     speed: flatOptions[0],
   }
@@ -72,7 +72,7 @@ const count = ref('0')
       <pre>{{ { count } }}</pre>
       <HstButtonGroup
         v-model="count"
-        :options="[{label: 'Low', value: '-25'},{label: 'Regular', value: '0'},{label: 'High', value: '200'}]"
+        :options="[{ label: 'Low', value: '-25' }, { label: 'Regular', value: '0' }, { label: 'High', value: '200' }]"
       />
     </Variant>
   </Story>

package/src/components/button/HstButtonGroup.vue

@@ -5,9 +5,10 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ComputedRef } from 'vue'
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
-import { HstControlOption } from '../../types'
+import type { HstControlOption } from '../../types'
 import HstButton from './HstButton.vue'
 
 const props = defineProps<{
@@ -21,11 +22,13 @@ const formattedOptions: ComputedRef<HstControlOption[]> = computed(() => {
     return props.options.map((value: string | number | HstControlOption) => {
       if (typeof value === 'string' || typeof value === 'number') {
         return { value, label: String(value) }
-      } else {
+      }
+      else {
         return value
       }
     })
-  } else {
+  }
+  else {
     return Object.keys(props.options).map((value: string) => ({
       value,
       label: props.options[value],
@@ -37,7 +40,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void
 }>()
 
-function selectOption (value: string) {
+function selectOption(value: string) {
   emit('update:modelValue', value)
 }
 </script>

package/src/components/checkbox/HstCheckbox.spec.ts

@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils'
 import HstCheckbox from './HstCheckbox.vue'
 
-describe('HstCheckbox', () => {
-  test('toggle to checked', async () => {
+describe('hstCheckbox', () => {
+  it('toggle to checked', async () => {
     const wrapper = mount(HstCheckbox, {
       props: {
         modelValue: false,
@@ -14,7 +14,7 @@ describe('HstCheckbox', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  test('toggle to unchecked', async () => {
+  it('toggle to unchecked', async () => {
     const wrapper = mount(HstCheckbox, {
       props: {
         modelValue: true,

package/src/components/checkbox/HstCheckbox.story.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import HstCheckbox from './HstCheckbox.vue'
 
-function initState () {
+function initState() {
   return {
     booleanChecked: false,
     stringChecked: 'false',

package/src/components/checkbox/HstCheckbox.vue

@@ -5,9 +5,9 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
 import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
-import { computed } from 'vue'
 
 type Booleanish = boolean | 'true' | 'false'
 
@@ -20,7 +20,7 @@ const emit = defineEmits({
   'update:modelValue': (newValue: Booleanish) => true,
 })
 
-function toggle () {
+function toggle() {
   if (typeof props.modelValue === 'string') {
     emit('update:modelValue', props.modelValue === 'false' ? 'true' : 'false')
     return

package/src/components/checkbox/HstCheckboxList.story.vue

@@ -12,7 +12,7 @@ const objectOptions = Object.keys(options).map(key => ({
   value: key,
 }))
 
-function initState () {
+function initState() {
   return {
     characters: [],
   }

package/src/components/checkbox/HstCheckboxList.vue

@@ -5,9 +5,10 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ComputedRef } from 'vue'
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
-import { HstControlOption } from '../../types'
+import type { HstControlOption } from '../../types'
 import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
 
 const props = defineProps<{
@@ -21,7 +22,8 @@ const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
     return Object.fromEntries(props.options.map((value: string | HstControlOption) => {
       if (typeof value === 'string') {
         return [value, value]
-      } else {
+      }
+      else {
         return [value.value, value.label]
       }
     }))
@@ -33,10 +35,11 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: Array<string>): void
 }>()
 
-function toggleOption (value: string) {
+function toggleOption(value: string) {
   if (props.modelValue.includes(value)) {
     emit('update:modelValue', props.modelValue.filter(element => element !== value))
-  } else {
+  }
+  else {
     emit('update:modelValue', [...props.modelValue, value])
   }
 }
@@ -52,7 +55,7 @@ function toggleOption (value: string) {
   >
     <div class="-htw-my-1">
       <template
-        v-for="( label, value ) in formattedOptions"
+        v-for="(label, value) in formattedOptions"
         :key="value"
       >
         <label

package/src/components/checkbox/HstSimpleCheckbox.story.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
 
-function initState () {
+function initState() {
   return {
     checked: true,
   }

package/src/components/checkbox/HstSimpleCheckbox.vue

@@ -16,7 +16,7 @@ const emit = defineEmits({
   'update:modelValue': (newValue: boolean) => true,
 })
 
-function toggle () {
+function toggle() {
   if (!props.withToggle) {
     return
   }
@@ -46,7 +46,7 @@ watch(path, () => {
 <template>
   <div
     class="histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative"
-    :class="{'htw-cursor-pointer': withToggle}"
+    :class="{ 'htw-cursor-pointer': withToggle }"
     @click="toggle"
   >
     <div

package/src/components/checkbox/__snapshots__/HstCheckbox.spec.ts.snap

@@ -3,3 +3,7 @@
 exports[`HstCheckbox > toggle to checked 1`] = `"<label class=\\"histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center\\" role=\\"checkbox\\" tabindex=\\"0\\"><span class=\\"htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip\\">Label</span><span class=\\"htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1\\"><span class=\\"htw-block htw-grow htw-max-w-full\\"><div class=\\"histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative\\"><div class=\\"htw-border htw-border-solid 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 group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-black/25 dark:htw-border-white/25 htw-delay-150\\"></div><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 24 24\\" class=\\"htw-relative htw-z-10\\"><path d=\\"m 4 12 l 5 5 l 10 -10\\" fill=\\"none\\" class=\\"htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-none\\" stroke-dasharray=\\"21.21\\" stroke-dashoffset=\\"21.21\\"></path></svg></div></span></span></label>"`;
 
 exports[`HstCheckbox > toggle to unchecked 1`] = `"<label class=\\"histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center\\" role=\\"checkbox\\" tabindex=\\"0\\"><span class=\\"htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip\\">Label</span><span class=\\"htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1\\"><span class=\\"htw-block htw-grow htw-max-w-full\\"><div class=\\"histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative\\"><div class=\\"htw-border htw-border-solid 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 group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-primary-500 htw-border-8\\"></div><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 24 24\\" class=\\"htw-relative htw-z-10\\"><path d=\\"m 4 12 l 5 5 l 10 -10\\" fill=\\"none\\" class=\\"htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-none htw-delay-150\\" stroke-dasharray=\\"21.21\\" stroke-dashoffset=\\"0\\"></path></svg></div></span></span></label>"`;
+
+exports[`hstCheckbox > toggle to checked 1`] = `"<label class=\\"histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center\\" role=\\"checkbox\\" tabindex=\\"0\\"><span class=\\"htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip\\">Label</span><span class=\\"htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1\\"><span class=\\"htw-block htw-grow htw-max-w-full\\"><div class=\\"histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative\\"><div class=\\"htw-border htw-border-solid 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 group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-black/25 dark:htw-border-white/25 htw-delay-150\\"></div><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 24 24\\" class=\\"htw-relative htw-z-10\\"><path d=\\"m 4 12 l 5 5 l 10 -10\\" fill=\\"none\\" class=\\"htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-none\\" stroke-dasharray=\\"21.21\\" stroke-dashoffset=\\"21.21\\"></path></svg></div></span></span></label>"`;
+
+exports[`hstCheckbox > toggle to unchecked 1`] = `"<label class=\\"histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center\\" role=\\"checkbox\\" tabindex=\\"0\\"><span class=\\"htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip\\">Label</span><span class=\\"htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1\\"><span class=\\"htw-block htw-grow htw-max-w-full\\"><div class=\\"histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative\\"><div class=\\"htw-border htw-border-solid 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 group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-primary-500 htw-border-8\\"></div><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 24 24\\" class=\\"htw-relative htw-z-10\\"><path d=\\"m 4 12 l 5 5 l 10 -10\\" fill=\\"none\\" class=\\"htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-none htw-delay-150\\" stroke-dasharray=\\"21.21\\" stroke-dashoffset=\\"0\\"></path></svg></div></span></span></label>"`;