@histoire/controls - npm Package Compare versions

Comparing version 0.11.0 to 0.11.1

dist/components/HstWrapper.vue.d.ts

@@ -1,6 +0,14 @@
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    tag?: string;
+}>, {
+    tag: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string;
-}>>>, {}>;
+    tag?: string;
+}>, {
+    tag: string;
+}>>>, {
+    tag: string;
+}>;
 export default _default;
@@ -16,1 +24,6 @@ declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 };
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

dist/index.d.ts

@@ -0,1 +1,39 @@
+export declare const HstButton: import("@histoire/vendors/vue").DefineComponent<{
+    color: {
+        type: import("@histoire/vendors/vue").PropType<"default" | "flat" | "primary">;
+    };
+}, {}, unknown, {}, {}, import("@histoire/vendors/vue").ComponentOptionsMixin, import("@histoire/vendors/vue").ComponentOptionsMixin, {}, string, import("@histoire/vendors/vue").VNodeProps & import("@histoire/vendors/vue").AllowedComponentProps & import("@histoire/vendors/vue").ComponentCustomProps, Readonly<import("@histoire/vendors/vue").ExtractPropTypes<{
+    color: {
+        type: import("@histoire/vendors/vue").PropType<"default" | "flat" | "primary">;
+    };
+}>>, {}>;
+export declare const HstButtonGroup: import("@histoire/vendors/vue").DefineComponent<{
+    title: {
+        type: import("@histoire/vendors/vue").PropType<string>;
+    };
+    modelValue: {
+        type: import("@histoire/vendors/vue").PropType<string>;
+        required: true;
+    };
+    options: {
+        type: import("@histoire/vendors/vue").PropType<import("./types").HstControlOption[]>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("@histoire/vendors/vue").ComponentOptionsMixin, import("@histoire/vendors/vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => void;
+}, string, import("@histoire/vendors/vue").VNodeProps & import("@histoire/vendors/vue").AllowedComponentProps & import("@histoire/vendors/vue").ComponentCustomProps, Readonly<import("@histoire/vendors/vue").ExtractPropTypes<{
+    title: {
+        type: import("@histoire/vendors/vue").PropType<string>;
+    };
+    modelValue: {
+        type: import("@histoire/vendors/vue").PropType<string>;
+        required: true;
+    };
+    options: {
+        type: import("@histoire/vendors/vue").PropType<import("./types").HstControlOption[]>;
+        required: true;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (value: string) => any;
+}, {}>;
 export declare const HstCheckbox: import("@histoire/vendors/vue").DefineComponent<{
@@ -22,2 +60,31 @@ modelValue: {
 }, {}>;
+export declare const HstCheckboxList: import("@histoire/vendors/vue").DefineComponent<{
+    title: {
+        type: import("@histoire/vendors/vue").PropType<string>;
+    };
+    modelValue: {
+        type: import("@histoire/vendors/vue").PropType<string[]>;
+        required: true;
+    };
+    options: {
+        type: import("@histoire/vendors/vue").PropType<import("./types").HstControlOption[]>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("@histoire/vendors/vue").ComponentOptionsMixin, import("@histoire/vendors/vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => void;
+}, string, import("@histoire/vendors/vue").VNodeProps & import("@histoire/vendors/vue").AllowedComponentProps & import("@histoire/vendors/vue").ComponentCustomProps, Readonly<import("@histoire/vendors/vue").ExtractPropTypes<{
+    title: {
+        type: import("@histoire/vendors/vue").PropType<string>;
+    };
+    modelValue: {
+        type: import("@histoire/vendors/vue").PropType<string[]>;
+        required: true;
+    };
+    options: {
+        type: import("@histoire/vendors/vue").PropType<import("./types").HstControlOption[]>;
+        required: true;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (value: string[]) => any;
+}, {}>;
 export declare const HstText: import("@histoire/vendors/vue").DefineComponent<{
@@ -267,2 +334,40 @@ title: {
 export declare const components: {
+    HstButton: import("@histoire/vendors/vue").DefineComponent<{
+        color: {
+            type: import("@histoire/vendors/vue").PropType<"default" | "flat" | "primary">;
+        };
+    }, {}, unknown, {}, {}, import("@histoire/vendors/vue").ComponentOptionsMixin, import("@histoire/vendors/vue").ComponentOptionsMixin, {}, string, import("@histoire/vendors/vue").VNodeProps & import("@histoire/vendors/vue").AllowedComponentProps & import("@histoire/vendors/vue").ComponentCustomProps, Readonly<import("@histoire/vendors/vue").ExtractPropTypes<{
+        color: {
+            type: import("@histoire/vendors/vue").PropType<"default" | "flat" | "primary">;
+        };
+    }>>, {}>;
+    HstButtonGroup: import("@histoire/vendors/vue").DefineComponent<{
+        title: {
+            type: import("@histoire/vendors/vue").PropType<string>;
+        };
+        modelValue: {
+            type: import("@histoire/vendors/vue").PropType<string>;
+            required: true;
+        };
+        options: {
+            type: import("@histoire/vendors/vue").PropType<import("./types").HstControlOption[]>;
+            required: true;
+        };
+    }, {}, unknown, {}, {}, import("@histoire/vendors/vue").ComponentOptionsMixin, import("@histoire/vendors/vue").ComponentOptionsMixin, {
+        "update:modelValue": (value: string) => void;
+    }, string, import("@histoire/vendors/vue").VNodeProps & import("@histoire/vendors/vue").AllowedComponentProps & import("@histoire/vendors/vue").ComponentCustomProps, Readonly<import("@histoire/vendors/vue").ExtractPropTypes<{
+        title: {
+            type: import("@histoire/vendors/vue").PropType<string>;
+        };
+        modelValue: {
+            type: import("@histoire/vendors/vue").PropType<string>;
+            required: true;
+        };
+        options: {
+            type: import("@histoire/vendors/vue").PropType<import("./types").HstControlOption[]>;
+            required: true;
+        };
+    }>> & {
+        "onUpdate:modelValue"?: (value: string) => any;
+    }, {}>;
     HstCheckbox: import("@histoire/vendors/vue").DefineComponent<{
@@ -289,2 +394,31 @@ modelValue: {
     }, {}>;
+    HstCheckboxList: import("@histoire/vendors/vue").DefineComponent<{
+        title: {
+            type: import("@histoire/vendors/vue").PropType<string>;
+        };
+        modelValue: {
+            type: import("@histoire/vendors/vue").PropType<string[]>;
+            required: true;
+        };
+        options: {
+            type: import("@histoire/vendors/vue").PropType<import("./types").HstControlOption[]>;
+            required: true;
+        };
+    }, {}, unknown, {}, {}, import("@histoire/vendors/vue").ComponentOptionsMixin, import("@histoire/vendors/vue").ComponentOptionsMixin, {
+        "update:modelValue": (value: string[]) => void;
+    }, string, import("@histoire/vendors/vue").VNodeProps & import("@histoire/vendors/vue").AllowedComponentProps & import("@histoire/vendors/vue").ComponentCustomProps, Readonly<import("@histoire/vendors/vue").ExtractPropTypes<{
+        title: {
+            type: import("@histoire/vendors/vue").PropType<string>;
+        };
+        modelValue: {
+            type: import("@histoire/vendors/vue").PropType<string[]>;
+            required: true;
+        };
+        options: {
+            type: import("@histoire/vendors/vue").PropType<import("./types").HstControlOption[]>;
+            required: true;
+        };
+    }>> & {
+        "onUpdate:modelValue"?: (value: string[]) => any;
+    }, {}>;
     HstText: import("@histoire/vendors/vue").DefineComponent<{
@@ -291,0 +425,0 @@ title: {

dist/index.es.js

@@ -1,32 +0,101 @@
-import { defineComponent as _, openBlock as i, createElementBlock as m, withDirectives as V, createTextVNode as M, toDisplayString as k, unref as w, createElementVNode as c, renderSlot as g, ref as b, computed as y, watch as K, createBlock as f, withKeys as A, withModifiers as j, withCtx as v, normalizeClass as x, normalizeStyle as S, mergeProps as O, onUnmounted as R, isRef as D, vModelText as B, createCommentVNode as H, Fragment as E, renderList as L, createVNode as I } from "@histoire/vendors/vue";
-import { VTooltip as N, Dropdown as G } from "@histoire/vendors/floating-vue";
-import { Icon as U } from "@histoire/vendors/iconify";
-import { useClipboard as P } from "@histoire/vendors/vue-use";
-const W = { class: "htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap" }, X = { class: "htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0" }, J = { class: "htw-grow htw-flex htw-items-center htw-gap-1" }, q = { class: "htw-block htw-grow" }, Q = {
+import { defineComponent as y, openBlock as i, createElementBlock as w, normalizeClass as b, renderSlot as g, createBlock as f, resolveDynamicComponent as P, withCtx as m, withDirectives as C, createTextVNode as H, toDisplayString as k, unref as d, createElementVNode as h, computed as v, Fragment as N, renderList as A, watch as D, ref as _, withKeys as E, withModifiers as B, createVNode as j, normalizeStyle as V, mergeProps as L, onUnmounted as W, isRef as K, vModelText as G, createCommentVNode as M } from "@histoire/vendors/vue";
+import { VTooltip as O, Dropdown as X } from "@histoire/vendors/floating-vue";
+import { Icon as I } from "@histoire/vendors/iconify";
+import { useClipboard as J } from "@histoire/vendors/vue-use";
+const q = {
+  name: "HstButton"
+}, U = /* @__PURE__ */ y({
+  ...q,
+  props: {
+    color: null
+  },
+  setup(l) {
+    const c = {
+      default: "htw-bg-gray-200 dark:htw-bg-gray-750 htw-text-gray-900 dark:htw-text-gray-100 hover:htw-bg-primary-200 dark:hover:htw-bg-primary-900",
+      primary: "htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black",
+      flat: "htw-bg-transparent hover:htw-bg-gray-500/20 htw-text-gray-900 dark:htw-text-gray-100"
+    };
+    return (n, a) => {
+      var o;
+      return i(), w("button", {
+        class: b(["htw-cursor-pointer htw-rounded-sm", c[(o = l.color) != null ? o : "default"]])
+      }, [
+        g(n.$slots, "default")
+      ], 2);
+    };
+  }
+}), Q = { class: "htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0" }, Y = { class: "htw-grow htw-flex htw-items-center htw-gap-1" }, Z = { class: "htw-block htw-grow" }, tt = {
   name: "HstWrapper"
-}, z = /* @__PURE__ */ _({
-  ...Q,
+}, S = /* @__PURE__ */ y({
+  ...tt,
   props: {
-    title: null
+    title: null,
+    tag: { default: "label" }
   },
-  setup(s) {
-    return (h, a) => (i(), m("label", W, [
-      V((i(), m("span", X, [
-        M(k(s.title), 1)
-      ])), [
-        [w(N), {
-          content: s.title,
-          placement: "left",
-          distance: 12
-        }]
+  setup(l) {
+    return (c, n) => (i(), f(P(l.tag), { class: "htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap" }, {
+      default: m(() => [
+        C((i(), w("span", Q, [
+          H(k(l.title), 1)
+        ])), [
+          [d(O), {
+            content: l.title,
+            placement: "left",
+            distance: 12
+          }]
+        ]),
+        h("span", Y, [
+          h("span", Z, [
+            g(c.$slots, "default")
+          ]),
+          g(c.$slots, "actions")
+        ])
       ]),
-      c("span", J, [
-        c("span", q, [
-          g(h.$slots, "default")
-        ]),
-        g(h.$slots, "actions")
-      ])
-    ]));
+      _: 3
+    }));
   }
-}), Y = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" }, Z = {
+}), et = { class: "htw-flex htw-gap-px htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 htw-rounded-sm htw-p-px" }, lt = {
+  name: "HstButtonGroup"
+}, nt = /* @__PURE__ */ y({
+  ...lt,
+  props: {
+    title: null,
+    modelValue: null,
+    options: null
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: c }) {
+    const n = l, a = v(() => Array.isArray(n.options) ? Object.fromEntries(n.options.map((e) => typeof e == "string" ? [e, e] : [e.value, e.label])) : n.options);
+    function o(e) {
+      c("update:modelValue", e);
+    }
+    return (e, t) => (i(), f(S, {
+      tag: "div",
+      role: "group",
+      title: l.title,
+      class: "htw-flex-nowrap htw-items-center"
+    }, {
+      actions: m(() => [
+        g(e.$slots, "actions")
+      ]),
+      default: m(() => [
+        h("div", et, [
+          (i(!0), w(N, null, A(d(a), (r, s) => (i(), f(U, {
+            key: s,
+            class: "htw-px-1 htw-h-[22px] htw-flex-1 !htw-rounded-[3px]",
+            color: s === l.modelValue ? "primary" : "flat",
+            rounded: !1,
+            onClick: (u) => o(s)
+          }, {
+            default: m(() => [
+              H(k(r), 1)
+            ]),
+            _: 2
+          }, 1032, ["color", "onClick"]))), 128))
+        ])
+      ]),
+      _: 3
+    }, 8, ["title"]));
+  }
+}), st = {
   width: "16",
@@ -36,6 +105,56 @@ height: "16",
   class: "htw-relative htw-z-10"
-}, tt = ["stroke-dasharray", "stroke-dashoffset"], et = {
+}, ot = ["stroke-dasharray", "stroke-dashoffset"], rt = {
+  name: "HstSimpleCheckbox"
+}, F = /* @__PURE__ */ y({
+  ...rt,
+  props: {
+    modelValue: { type: Boolean },
+    withToggle: { type: Boolean }
+  },
+  emits: {
+    "update:modelValue": (l) => !0
+  },
+  setup(l, { emit: c }) {
+    const n = l;
+    function a() {
+      !n.withToggle || c("update:modelValue", !n.modelValue);
+    }
+    D(() => n.modelValue, () => {
+      s.value = !0;
+    });
+    const o = _(), e = _(0), t = v(() => n.modelValue ? 1 : 0), r = v(() => (1 - t.value) * e.value), s = _(!1);
+    return D(o, () => {
+      var u, p, $;
+      e.value = ($ = (p = (u = o.value).getTotalLength) == null ? void 0 : p.call(u)) != null ? $ : 21.21;
+    }), (u, p) => (i(), w("div", {
+      class: b(["htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative", { "htw-cursor-pointer": l.withToggle }]),
+      onClick: a
+    }, [
+      h("div", {
+        class: b(["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", [
+          l.modelValue ? "htw-border-primary-500 htw-border-8" : "htw-border-black/25 dark:htw-border-white/25 htw-delay-150"
+        ]])
+      }, null, 2),
+      (i(), w("svg", st, [
+        h("path", {
+          ref_key: "path",
+          ref: o,
+          d: "m 4 12 l 5 5 l 10 -10",
+          fill: "none",
+          class: b(["htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out", [
+            s.value ? "htw-transition-all" : "htw-transition-none",
+            {
+              "htw-delay-150": l.modelValue
+            }
+          ]]),
+          "stroke-dasharray": e.value,
+          "stroke-dashoffset": d(r)
+        }, null, 10, ot)
+      ]))
+    ], 2));
+  }
+}), at = {
   name: "HstCheckbox"
-}, st = /* @__PURE__ */ _({
-  ...et,
+}, ut = /* @__PURE__ */ y({
+  ...at,
   props: {
@@ -46,51 +165,25 @@ modelValue: { type: Boolean },
   emits: {
-    "update:modelValue": (s) => !0
+    "update:modelValue": (l) => !0
   },
-  setup(s, { emit: h }) {
-    const a = s;
-    function o() {
-      h("update:modelValue", !a.modelValue), l.value = !0;
+  setup(l, { emit: c }) {
+    const n = l;
+    function a() {
+      c("update:modelValue", !n.modelValue);
     }
-    const n = b(), u = b(0), t = y(() => a.modelValue ? 1 : 0), e = y(() => (1 - t.value) * u.value), l = b(!1);
-    return K(n, () => {
-      var r, d, p;
-      u.value = (p = (d = (r = n.value).getTotalLength) == null ? void 0 : d.call(r)) != null ? p : 21.21;
-    }), (r, d) => (i(), f(z, {
+    return (o, e) => (i(), f(S, {
       role: "checkbox",
       tabindex: "0",
       class: "htw-cursor-pointer htw-items-center",
-      title: s.title,
-      onClick: d[0] || (d[0] = (p) => o()),
+      title: l.title,
+      onClick: e[0] || (e[0] = (t) => a()),
       onKeydown: [
-        d[1] || (d[1] = A(j((p) => o(), ["prevent"]), ["enter"])),
-        d[2] || (d[2] = A(j((p) => o(), ["prevent"]), ["space"]))
+        e[1] || (e[1] = E(B((t) => a(), ["prevent"]), ["enter"])),
+        e[2] || (e[2] = E(B((t) => a(), ["prevent"]), ["space"]))
       ]
     }, {
-      actions: v(() => [
-        g(r.$slots, "actions")
+      actions: m(() => [
+        g(o.$slots, "actions")
       ]),
-      default: v(() => [
-        c("div", Y, [
-          c("div", {
-            class: x(["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", [
-              s.modelValue ? "htw-border-primary-500 htw-border-8" : "htw-border-black/25 dark:htw-border-white/25 htw-delay-150"
-            ]])
-          }, null, 2),
-          (i(), m("svg", Z, [
-            c("path", {
-              ref_key: "path",
-              ref: n,
-              d: "m 4 12 l 5 5 l 10 -10",
-              fill: "none",
-              class: x(["htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out", [
-                l.value ? "htw-transition-all" : "htw-transition-none",
-                {
-                  "htw-delay-150": s.modelValue
-                }
-              ]]),
-              "stroke-dasharray": u.value,
-              "stroke-dashoffset": w(e)
-            }, null, 10, tt)
-          ]))
-        ])
+      default: m(() => [
+        j(F, { "model-value": l.modelValue }, null, 8, ["model-value"])
       ]),
@@ -100,6 +193,54 @@ _: 3
   }
-}), lt = ["value"], nt = {
+}), it = { class: "-htw-my-1" }, ct = ["for", "onKeydown", "onClick"], ht = {
+  name: "HstCheckboxList"
+}, dt = /* @__PURE__ */ y({
+  ...ht,
+  props: {
+    title: null,
+    modelValue: null,
+    options: null
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: c }) {
+    const n = l, a = v(() => Array.isArray(n.options) ? Object.fromEntries(n.options.map((e) => typeof e == "string" ? [e, e] : [e.value, e.label])) : n.options);
+    function o(e) {
+      n.modelValue.includes(e) ? c("update:modelValue", n.modelValue.filter((t) => t !== e)) : c("update:modelValue", [...n.modelValue, e]);
+    }
+    return (e, t) => (i(), f(S, {
+      role: "group",
+      title: l.title,
+      class: b(["htw-cursor-text", e.$attrs.class]),
+      style: V(e.$attrs.style)
+    }, {
+      actions: m(() => [
+        g(e.$slots, "actions")
+      ]),
+      default: m(() => [
+        h("div", it, [
+          (i(!0), w(N, null, A(d(a), (r, s) => (i(), w("label", {
+            key: s,
+            tabindex: "0",
+            for: `${s}-radio`,
+            class: "htw-cursor-pointer htw-flex htw-items-center htw-relative htw-py-1 htw-group",
+            onKeydown: [
+              E(B((u) => o(s), ["prevent"]), ["enter"]),
+              E(B((u) => o(s), ["prevent"]), ["space"])
+            ],
+            onClick: (u) => o(s)
+          }, [
+            j(F, {
+              "model-value": l.modelValue.includes(s),
+              class: "htw-mr-2"
+            }, null, 8, ["model-value"]),
+            H(" " + k(r), 1)
+          ], 40, ct))), 128))
+        ])
+      ]),
+      _: 3
+    }, 8, ["title", "class", "style"]));
+  }
+}), wt = ["value"], pt = {
   name: "HstText"
-}, ot = /* @__PURE__ */ _({
-  ...nt,
+}, mt = /* @__PURE__ */ y({
+  ...pt,
   props: {
@@ -110,25 +251,25 @@ title: null,
   emits: {
-    "update:modelValue": (s) => !0
+    "update:modelValue": (l) => !0
   },
-  setup(s, { emit: h }) {
-    const a = b();
-    return (o, n) => (i(), f(z, {
-      title: s.title,
-      class: x(["htw-cursor-text htw-items-center", o.$attrs.class]),
-      style: S(o.$attrs.style),
-      onClick: n[1] || (n[1] = (u) => a.value.focus())
+  setup(l, { emit: c }) {
+    const n = _();
+    return (a, o) => (i(), f(S, {
+      title: l.title,
+      class: b(["htw-cursor-text htw-items-center", a.$attrs.class]),
+      style: V(a.$attrs.style),
+      onClick: o[1] || (o[1] = (e) => n.value.focus())
     }, {
-      actions: v(() => [
-        g(o.$slots, "actions")
+      actions: m(() => [
+        g(a.$slots, "actions")
       ]),
-      default: v(() => [
-        c("input", O({
+      default: m(() => [
+        h("input", L({
           ref_key: "input",
-          ref: a
-        }, { ...o.$attrs, class: null, style: null }, {
+          ref: n
+        }, { ...a.$attrs, class: null, style: null }, {
           type: "text",
-          value: s.modelValue,
+          value: l.modelValue,
           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",
-          onInput: n[0] || (n[0] = (u) => h("update:modelValue", u.target.value))
-        }), null, 16, lt)
+          onInput: o[0] || (o[0] = (e) => c("update:modelValue", e.target.value))
+        }), null, 16, wt)
       ]),
@@ -138,7 +279,7 @@ _: 3
   }
-}), rt = {
+}), ft = {
   name: "HstNumber",
   inheritAttrs: !1
-}, at = /* @__PURE__ */ _({
-  ...rt,
+}, yt = /* @__PURE__ */ y({
+  ...ft,
   props: {
@@ -149,55 +290,55 @@ title: null,
   emits: {
-    "update:modelValue": (s) => !0
+    "update:modelValue": (l) => !0
   },
-  setup(s, { emit: h }) {
-    const a = s, o = y({
-      get: () => a.modelValue,
-      set: ($) => {
-        h("update:modelValue", $);
+  setup(l, { emit: c }) {
+    const n = l, a = v({
+      get: () => n.modelValue,
+      set: (x) => {
+        c("update:modelValue", x);
       }
-    }), n = b();
-    function u() {
-      n.value.focus(), n.value.select();
+    }), o = _();
+    function e() {
+      o.value.focus(), o.value.select();
     }
-    const t = b(!1);
-    let e, l;
-    function r($) {
-      t.value = !0, e = $.clientX, l = o.value, window.addEventListener("mousemove", d), window.addEventListener("mouseup", p);
+    const t = _(!1);
+    let r, s;
+    function u(x) {
+      t.value = !0, r = x.clientX, s = a.value, window.addEventListener("mousemove", p), window.addEventListener("mouseup", $);
     }
-    function d($) {
-      let C = parseFloat(n.value.step);
-      isNaN(C) && (C = 1), o.value = l + Math.round(($.clientX - e) / 10 / C) * C;
+    function p(x) {
+      let T = parseFloat(o.value.step);
+      isNaN(T) && (T = 1), a.value = s + Math.round((x.clientX - r) / 10 / T) * T;
     }
-    function p() {
-      t.value = !1, window.removeEventListener("mousemove", d), window.removeEventListener("mouseup", p);
+    function $() {
+      t.value = !1, window.removeEventListener("mousemove", p), window.removeEventListener("mouseup", $);
     }
-    return R(() => {
-      p();
-    }), ($, C) => (i(), f(z, {
-      class: x(["htw-cursor-ew-resize htw-items-center", [
-        $.$attrs.class,
+    return W(() => {
+      $();
+    }), (x, T) => (i(), f(S, {
+      class: b(["htw-cursor-ew-resize htw-items-center", [
+        x.$attrs.class,
         { "htw-select-none": t.value }
       ]]),
-      title: s.title,
-      style: S($.$attrs.style),
-      onClick: u,
-      onMousedown: r
+      title: l.title,
+      style: V(x.$attrs.style),
+      onClick: e,
+      onMousedown: u
     }, {
-      actions: v(() => [
-        g($.$slots, "actions")
+      actions: m(() => [
+        g(x.$slots, "actions")
       ]),
-      default: v(() => [
-        V(c("input", O({
+      default: m(() => [
+        C(h("input", L({
           ref_key: "input",
-          ref: n
-        }, { ...$.$attrs, class: null, style: null }, {
-          "onUpdate:modelValue": C[0] || (C[0] = (F) => D(o) ? o.value = F : null),
+          ref: o
+        }, { ...x.$attrs, class: null, style: null }, {
+          "onUpdate:modelValue": T[0] || (T[0] = (R) => K(a) ? a.value = R : null),
           type: "number",
           class: [{
             "htw-select-none": t.value
-          }, "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-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 htw-cursor-ew-resize"]
+          }, "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-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 htw-cursor-ew-resize htw-box-border"]
         }), null, 16), [
           [
-            B,
-            w(o),
+            G,
+            d(a),
             void 0,
@@ -212,9 +353,9 @@ { number: !0 }
 });
-const ut = { class: "htw-relative htw-w-full htw-flex htw-items-center" }, it = /* @__PURE__ */ c("div", { class: "htw-absolute htw-inset-0 htw-flex htw-items-center" }, [
-  /* @__PURE__ */ c("div", { class: "htw-border htw-border-black/25 dark:htw-border-white/25 htw-h-1 htw-w-full htw-rounded-full" })
-], -1), ht = {
+const vt = { class: "htw-relative htw-w-full htw-flex htw-items-center" }, gt = /* @__PURE__ */ h("div", { class: "htw-absolute htw-inset-0 htw-flex htw-items-center" }, [
+  /* @__PURE__ */ h("div", { class: "htw-border htw-border-black/25 dark:htw-border-white/25 htw-h-1 htw-w-full htw-rounded-full" })
+], -1), bt = {
   name: "HstSlider",
   inheritAttrs: !1
-}, ct = /* @__PURE__ */ _({
-  ...ht,
+}, _t = /* @__PURE__ */ y({
+  ...bt,
   props: {
@@ -227,34 +368,34 @@ title: null,
   emits: {
-    "update:modelValue": (s) => !0
+    "update:modelValue": (l) => !0
   },
-  setup(s, { emit: h }) {
-    const a = s, o = b(!1), n = b(null), u = y({
-      get: () => a.modelValue,
-      set: (l) => {
-        h("update:modelValue", l);
+  setup(l, { emit: c }) {
+    const n = l, a = _(!1), o = _(null), e = v({
+      get: () => n.modelValue,
+      set: (s) => {
+        c("update:modelValue", s);
       }
-    }), t = y(() => (a.modelValue - a.min) / (a.max - a.min)), e = y(() => n.value ? {
-      left: 8 + (n.value.clientWidth - 16) * t.value + "px"
+    }), t = v(() => (n.modelValue - n.min) / (n.max - n.min)), r = v(() => o.value ? {
+      left: 8 + (o.value.clientWidth - 16) * t.value + "px"
     } : {});
-    return (l, r) => (i(), f(z, {
-      class: x(["htw-items-center", l.$attrs.class]),
-      title: s.title,
-      style: S(l.$attrs.style)
+    return (s, u) => (i(), f(S, {
+      class: b(["htw-items-center", s.$attrs.class]),
+      title: l.title,
+      style: V(s.$attrs.style)
     }, {
-      default: v(() => [
-        c("div", ut, [
-          it,
-          V(c("input", O({
+      default: m(() => [
+        h("div", vt, [
+          gt,
+          C(h("input", L({
             ref_key: "input",
-            ref: n,
-            "onUpdate:modelValue": r[0] || (r[0] = (d) => D(u) ? u.value = d : null),
+            ref: o,
+            "onUpdate:modelValue": u[0] || (u[0] = (p) => K(e) ? e.value = p : null),
             class: "htw-range-input htw-appearance-none htw-border-0 htw-bg-transparent htw-cursor-pointer htw-relative htw-w-full htw-m-0 htw-text-gray-700",
             type: "range"
-          }, { ...l.$attrs, class: null, style: null, min: s.min, max: s.max }, {
-            onMouseover: r[1] || (r[1] = (d) => o.value = !0),
-            onMouseleave: r[2] || (r[2] = (d) => o.value = !1)
+          }, { ...s.$attrs, class: null, style: null, min: l.min, max: l.max }, {
+            onMouseover: u[1] || (u[1] = (p) => a.value = !0),
+            onMouseleave: u[2] || (u[2] = (p) => a.value = !1)
           }), null, 16), [
             [
-              B,
-              w(u),
+              G,
+              d(e),
               void 0,
@@ -264,9 +405,9 @@ { number: !0 }
           ]),
-          o.value ? V((i(), m("div", {
+          a.value ? C((i(), w("div", {
             key: 0,
             class: "htw-absolute",
-            style: S(w(e))
+            style: V(d(r))
           }, null, 4)), [
-            [w(N), { content: s.modelValue.toString(), shown: !0, distance: 16, delay: 0 }]
-          ]) : H("", !0)
+            [d(O), { content: l.modelValue.toString(), shown: !0, distance: 16, delay: 0 }]
+          ]) : M("", !0)
         ])
@@ -277,7 +418,7 @@ ]),
   }
-}), dt = ["value"], wt = {
+}), $t = ["value"], xt = {
   name: "HstTextarea",
   inheritAttrs: !1
-}, mt = /* @__PURE__ */ _({
-  ...wt,
+}, kt = /* @__PURE__ */ y({
+  ...xt,
   props: {
@@ -288,24 +429,24 @@ title: null,
   emits: {
-    "update:modelValue": (s) => !0
+    "update:modelValue": (l) => !0
   },
-  setup(s, { emit: h }) {
-    const a = b();
-    return (o, n) => (i(), f(z, {
-      title: s.title,
-      class: x(["htw-cursor-text", o.$attrs.class]),
-      style: S(o.$attrs.style),
-      onClick: n[1] || (n[1] = (u) => a.value.focus())
+  setup(l, { emit: c }) {
+    const n = _();
+    return (a, o) => (i(), f(S, {
+      title: l.title,
+      class: b(["htw-cursor-text", a.$attrs.class]),
+      style: V(a.$attrs.style),
+      onClick: o[1] || (o[1] = (e) => n.value.focus())
     }, {
-      actions: v(() => [
-        g(o.$slots, "actions")
+      actions: m(() => [
+        g(a.$slots, "actions")
       ]),
-      default: v(() => [
-        c("textarea", O({
+      default: m(() => [
+        h("textarea", L({
           ref_key: "input",
-          ref: a
-        }, { ...o.$attrs, class: null, style: null }, {
-          value: s.modelValue,
+          ref: n
+        }, { ...a.$attrs, class: null, style: null }, {
+          value: l.modelValue,
           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 htw-box-border htw-resize-y htw-min-h-[26px]",
-          onInput: n[0] || (n[0] = (u) => h("update:modelValue", u.target.value))
-        }), null, 16, dt)
+          onInput: o[0] || (o[0] = (e) => c("update:modelValue", e.target.value))
+        }), null, 16, $t)
       ]),
@@ -316,6 +457,6 @@ _: 3
 });
-const pt = { class: "htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal" }, ft = { class: "htw-flex-1 htw-truncate" }, vt = { class: "htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700" }, yt = ["onClick"], bt = {
+const Vt = { class: "htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal" }, Ct = { class: "htw-flex-1 htw-truncate" }, Ht = { class: "htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700" }, St = ["onClick"], Mt = {
   name: "CustomSelect"
-}, _t = /* @__PURE__ */ _({
-  ...bt,
+}, Nt = /* @__PURE__ */ y({
+  ...Mt,
   props: {
@@ -326,30 +467,30 @@ modelValue: null,
   emits: ["update:modelValue"],
-  setup(s, { emit: h }) {
-    const a = s, o = y(() => Array.isArray(a.options) ? a.options.map((t) => typeof t == "string" ? [t, t] : [t.value, t.label]) : Object.entries(a.options)), n = y(() => {
+  setup(l, { emit: c }) {
+    const n = l, a = v(() => Array.isArray(n.options) ? n.options.map((t) => typeof t == "string" ? [t, t] : [t.value, t.label]) : Object.entries(n.options)), o = v(() => {
       var t;
-      return (t = o.value.find(([e]) => e === a.modelValue)) == null ? void 0 : t[1];
+      return (t = a.value.find(([r]) => r === n.modelValue)) == null ? void 0 : t[1];
     });
-    function u(t, e) {
-      h("update:modelValue", t), e();
+    function e(t, r) {
+      c("update:modelValue", t), r();
     }
-    return (t, e) => (i(), f(w(G), { "auto-size": "" }, {
-      popper: v(({ hide: l }) => [
-        c("div", vt, [
-          (i(!0), m(E, null, L(w(o), ([r, d]) => (i(), m("div", O({ ...t.$attrs, class: null, style: null }, {
-            key: d,
+    return (t, r) => (i(), f(d(X), { "auto-size": "" }, {
+      popper: m(({ hide: s }) => [
+        h("div", Ht, [
+          (i(!0), w(N, null, A(d(a), ([u, p]) => (i(), w("div", L({ ...t.$attrs, class: null, style: null }, {
+            key: p,
             class: ["htw-px-2 htw-py-1 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700", {
-              "htw-bg-primary-200 dark:htw-bg-primary-800": a.modelValue === r
+              "htw-bg-primary-200 dark:htw-bg-primary-800": n.modelValue === u
             }],
-            onClick: (p) => u(r, l)
-          }), k(d), 17, yt))), 128))
+            onClick: ($) => e(u, s)
+          }), k(p), 17, St))), 128))
         ])
       ]),
-      default: v(() => [
-        c("div", pt, [
-          c("div", ft, [
-            g(t.$slots, "default", { label: w(n) }, () => [
-              M(k(w(n)), 1)
+      default: m(() => [
+        h("div", Vt, [
+          h("div", Ct, [
+            g(t.$slots, "default", { label: d(o) }, () => [
+              H(k(d(o)), 1)
             ])
           ]),
-          I(w(U), {
+          j(d(I), {
             icon: "carbon:chevron-sort",
@@ -363,6 +504,6 @@ class: "htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
   }
-}), $t = {
+}), Tt = {
   name: "HstSelect"
-}, gt = /* @__PURE__ */ _({
-  ...$t,
+}, Ot = /* @__PURE__ */ y({
+  ...Tt,
   props: {
@@ -374,16 +515,16 @@ title: null,
   emits: ["update:modelValue"],
-  setup(s, { emit: h }) {
-    return (a, o) => (i(), f(z, {
-      title: s.title,
-      class: x(["htw-cursor-text htw-items-center", a.$attrs.class]),
-      style: S(a.$attrs.style)
+  setup(l, { emit: c }) {
+    return (n, a) => (i(), f(S, {
+      title: l.title,
+      class: b(["htw-cursor-text htw-items-center", n.$attrs.class]),
+      style: V(n.$attrs.style)
     }, {
-      actions: v(() => [
-        g(a.$slots, "actions")
+      actions: m(() => [
+        g(n.$slots, "actions")
       ]),
-      default: v(() => [
-        I(_t, {
-          options: s.options,
-          "model-value": s.modelValue,
-          "onUpdate:modelValue": o[0] || (o[0] = (n) => h("update:modelValue", n))
+      default: m(() => [
+        j(Nt, {
+          options: l.options,
+          "model-value": l.modelValue,
+          "onUpdate:modelValue": a[0] || (a[0] = (o) => c("update:modelValue", o))
         }, null, 8, ["options", "model-value"])
@@ -394,20 +535,20 @@ ]),
   }
-}), xt = {
+}), zt = {
   name: "HstCopyIcon"
-}, T = /* @__PURE__ */ _({
-  ...xt,
+}, z = /* @__PURE__ */ y({
+  ...zt,
   props: {
     content: null
   },
-  setup(s) {
-    const h = s, { copy: a, copied: o } = P(), n = () => a(h.content);
-    return (u, t) => V((i(), f(w(U), {
+  setup(l) {
+    const c = l, { copy: n, copied: a } = J(), o = () => n(c.content);
+    return (e, t) => C((i(), f(d(I), {
       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",
-      onClick: t[0] || (t[0] = (e) => n())
+      onClick: t[0] || (t[0] = (r) => o())
     }, null, 512)), [
-      [w(N), {
+      [d(O), {
         content: "Copied!",
         triggers: [],
-        shown: w(o),
+        shown: d(a),
         distance: 12,
@@ -418,9 +559,9 @@ delay: 0
   }
-}), kt = {
+}), At = {
   key: 0,
   class: "htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
-}, Vt = ["onMouseenter"], St = { class: "htw-flex htw-gap-1" }, Ht = { class: "htw-my-0 htw-truncate htw-shrink" }, Ct = { class: "htw-flex htw-gap-1" }, Mt = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" }, Nt = {
+}, Et = ["onMouseenter"], Bt = { class: "htw-flex htw-gap-1" }, Lt = { class: "htw-my-0 htw-truncate htw-shrink" }, jt = { class: "htw-flex htw-gap-1" }, Dt = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" }, Kt = {
   name: "HstColorShades"
-}, Tt = /* @__PURE__ */ _({
-  ...Nt,
+}, Gt = /* @__PURE__ */ y({
+  ...Kt,
   props: {
@@ -431,74 +572,74 @@ shades: null,
   },
-  setup(s) {
-    const h = s, a = (t, e = "") => Object.entries(t).reduce((l, [r, d]) => {
-      const p = e ? r === "DEFAULT" ? e : `${e}-${r}` : r, $ = typeof d == "object" ? a(d, p) : { [p]: d };
-      return { ...l, ...$ };
-    }, {}), o = y(() => {
-      const t = h.shades, e = h.getName, l = a(t);
-      return Object.entries(l).map(([r, d]) => {
-        const p = e ? e(r, d) : r;
+  setup(l) {
+    const c = l, n = (t, r = "") => Object.entries(t).reduce((s, [u, p]) => {
+      const $ = r ? u === "DEFAULT" ? r : `${r}-${u}` : u, x = typeof p == "object" ? n(p, $) : { [$]: p };
+      return { ...s, ...x };
+    }, {}), a = v(() => {
+      const t = c.shades, r = c.getName, s = n(t);
+      return Object.entries(s).map(([u, p]) => {
+        const $ = r ? r(u, p) : u;
         return {
-          key: r,
-          color: d,
-          name: p
+          key: u,
+          color: p,
+          name: $
         };
       });
-    }), n = y(() => {
-      let t = o.value;
-      if (h.search) {
-        const e = new RegExp(h.search, "i");
-        t = t.filter(({ name: l }) => e.test(l));
+    }), o = v(() => {
+      let t = a.value;
+      if (c.search) {
+        const r = new RegExp(c.search, "i");
+        t = t.filter(({ name: s }) => r.test(s));
       }
       return t;
-    }), u = b(null);
-    return (t, e) => w(n).length ? (i(), m("div", kt, [
-      (i(!0), m(E, null, L(w(n), (l) => (i(), m("div", {
-        key: l.key,
+    }), e = _(null);
+    return (t, r) => d(o).length ? (i(), w("div", At, [
+      (i(!0), w(N, null, A(d(o), (s) => (i(), w("div", {
+        key: s.key,
         class: "htw-flex htw-flex-col htw-gap-2",
-        onMouseenter: (r) => u.value = l.key,
-        onMouseleave: e[0] || (e[0] = (r) => u.value = null)
+        onMouseenter: (u) => e.value = s.key,
+        onMouseleave: r[0] || (r[0] = (u) => e.value = null)
       }, [
         g(t.$slots, "default", {
-          color: l.color
+          color: s.color
         }, () => [
-          c("div", {
+          h("div", {
             class: "htw-rounded-full htw-w-16 htw-h-16",
-            style: S({
-              backgroundColor: l.color
+            style: V({
+              backgroundColor: s.color
             })
           }, null, 4)
         ]),
-        c("div", null, [
-          c("div", St, [
-            V((i(), m("pre", Ht, [
-              M(k(l.name), 1)
+        h("div", null, [
+          h("div", Bt, [
+            C((i(), w("pre", Lt, [
+              H(k(s.name), 1)
             ])), [
-              [w(N), l.name.length > 23 ? l.name : ""]
+              [d(O), s.name.length > 23 ? s.name : ""]
             ]),
-            u.value === l.key ? (i(), f(T, {
+            e.value === s.key ? (i(), f(z, {
               key: 0,
-              content: l.name,
+              content: s.name,
               class: "htw-flex-none"
-            }, null, 8, ["content"])) : H("", !0)
+            }, null, 8, ["content"])) : M("", !0)
           ]),
-          c("div", Ct, [
-            V((i(), m("pre", Mt, [
-              M(k(l.color), 1)
+          h("div", jt, [
+            C((i(), w("pre", Dt, [
+              H(k(s.color), 1)
             ])), [
-              [w(N), l.color.length > 23 ? l.color : ""]
+              [d(O), s.color.length > 23 ? s.color : ""]
             ]),
-            u.value === l.key ? (i(), f(T, {
+            e.value === s.key ? (i(), f(z, {
               key: 0,
-              content: l.color,
+              content: s.color,
               class: "htw-flex-none"
-            }, null, 8, ["content"])) : H("", !0)
+            }, null, 8, ["content"])) : M("", !0)
           ])
         ])
-      ], 40, Vt))), 128))
-    ])) : H("", !0);
+      ], 40, Et))), 128))
+    ])) : M("", !0);
   }
-}), zt = ["onMouseenter"], Et = { class: "htw-mx-4" }, Ot = { class: "htw-flex htw-gap-1" }, Lt = { class: "htw-my-0 htw-truncate htw-shrink" }, At = { class: "htw-flex htw-gap-1" }, jt = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" }, Dt = {
+}), It = ["onMouseenter"], Ut = { class: "htw-mx-4" }, Ft = { class: "htw-flex htw-gap-1" }, Rt = { class: "htw-my-0 htw-truncate htw-shrink" }, Pt = { class: "htw-flex htw-gap-1" }, Wt = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" }, Xt = {
   name: "HstTokenList"
-}, Bt = /* @__PURE__ */ _({
-  ...Dt,
+}, Jt = /* @__PURE__ */ y({
+  ...Xt,
   props: {
@@ -508,46 +649,46 @@ tokens: null,
   },
-  setup(s) {
-    const h = s, a = y(() => {
-      const n = h.tokens, u = h.getName;
-      return Object.entries(n).map(([t, e]) => {
-        const l = u ? u(t, e) : t;
+  setup(l) {
+    const c = l, n = v(() => {
+      const o = c.tokens, e = c.getName;
+      return Object.entries(o).map(([t, r]) => {
+        const s = e ? e(t, r) : t;
         return {
           key: t,
-          name: l,
-          value: typeof e == "number" ? e.toString() : e
+          name: s,
+          value: typeof r == "number" ? r.toString() : r
         };
       });
-    }), o = b(null);
-    return (n, u) => (i(!0), m(E, null, L(w(a), (t) => (i(), m("div", {
+    }), a = _(null);
+    return (o, e) => (i(!0), w(N, null, A(d(n), (t) => (i(), w("div", {
       key: t.key,
       class: "htw-flex htw-flex-col htw-gap-2 htw-my-8",
-      onMouseenter: (e) => o.value = t.key,
-      onMouseleave: u[0] || (u[0] = (e) => o.value = null)
+      onMouseenter: (r) => a.value = t.key,
+      onMouseleave: e[0] || (e[0] = (r) => a.value = null)
     }, [
-      g(n.$slots, "default", { token: t }),
-      c("div", Et, [
-        c("div", Ot, [
-          c("pre", Lt, k(t.name), 1),
-          o.value === t.key ? (i(), f(T, {
+      g(o.$slots, "default", { token: t }),
+      h("div", Ut, [
+        h("div", Ft, [
+          h("pre", Rt, k(t.name), 1),
+          a.value === t.key ? (i(), f(z, {
             key: 0,
             content: t.name,
             class: "htw-flex-none"
-          }, null, 8, ["content"])) : H("", !0)
+          }, null, 8, ["content"])) : M("", !0)
         ]),
-        c("div", At, [
-          c("pre", jt, k(t.value), 1),
-          o.value === t.key ? (i(), f(T, {
+        h("div", Pt, [
+          h("pre", Wt, k(t.value), 1),
+          a.value === t.key ? (i(), f(z, {
             key: 0,
             content: typeof t.value == "string" ? t.value : JSON.stringify(t.value),
             class: "htw-flex-none"
-          }, null, 8, ["content"])) : H("", !0)
+          }, null, 8, ["content"])) : M("", !0)
         ])
       ])
-    ], 40, zt))), 128));
+    ], 40, It))), 128));
   }
 });
-const It = ["onMouseenter"], Ut = { class: "htw-flex htw-gap-1" }, Ft = { class: "htw-my-0 htw-truncate htw-shrink" }, Kt = { class: "htw-flex htw-gap-1" }, Rt = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" }, Gt = {
+const qt = ["onMouseenter"], Qt = { class: "htw-flex htw-gap-1" }, Yt = { class: "htw-my-0 htw-truncate htw-shrink" }, Zt = { class: "htw-flex htw-gap-1" }, te = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" }, ee = {
   name: "HstTokenGrid"
-}, Pt = /* @__PURE__ */ _({
-  ...Gt,
+}, le = /* @__PURE__ */ y({
+  ...ee,
   props: {
@@ -558,60 +699,60 @@ tokens: null,
   },
-  setup(s) {
-    const h = s, a = y(() => {
-      const u = h.tokens, t = h.getName;
-      return Object.entries(u).map(([e, l]) => {
-        const r = t ? t(e, l) : e;
+  setup(l) {
+    const c = l, n = v(() => {
+      const e = c.tokens, t = c.getName;
+      return Object.entries(e).map(([r, s]) => {
+        const u = t ? t(r, s) : r;
         return {
-          key: e,
-          name: r,
-          value: typeof l == "number" ? l.toString() : l
+          key: r,
+          name: u,
+          value: typeof s == "number" ? s.toString() : s
         };
       });
-    }), o = y(() => `${h.colSize}px`), n = b(null);
-    return (u, t) => (i(), m("div", {
+    }), a = v(() => `${c.colSize}px`), o = _(null);
+    return (e, t) => (i(), w("div", {
       class: "htw-bind-col-size htw-grid htw-gap-4 htw-m-4",
-      style: S({
-        "--histoire-col-size": w(o)
+      style: V({
+        "--histoire-col-size": d(a)
       })
     }, [
-      (i(!0), m(E, null, L(w(a), (e) => (i(), m("div", {
-        key: e.key,
+      (i(!0), w(N, null, A(d(n), (r) => (i(), w("div", {
+        key: r.key,
         class: "htw-flex htw-flex-col htw-gap-2",
-        onMouseenter: (l) => n.value = e.key,
-        onMouseleave: t[0] || (t[0] = (l) => n.value = null)
+        onMouseenter: (s) => o.value = r.key,
+        onMouseleave: t[0] || (t[0] = (s) => o.value = null)
       }, [
-        g(u.$slots, "default", { token: e }),
-        c("div", null, [
-          c("div", Ut, [
-            V((i(), m("pre", Ft, [
-              M(k(e.name), 1)
+        g(e.$slots, "default", { token: r }),
+        h("div", null, [
+          h("div", Qt, [
+            C((i(), w("pre", Yt, [
+              H(k(r.name), 1)
             ])), [
-              [w(N), e.name.length > s.colSize / 8 ? e.name : ""]
+              [d(O), r.name.length > l.colSize / 8 ? r.name : ""]
             ]),
-            n.value === e.key ? (i(), f(T, {
+            o.value === r.key ? (i(), f(z, {
               key: 0,
-              content: e.name,
+              content: r.name,
               class: "htw-flex-none"
-            }, null, 8, ["content"])) : H("", !0)
+            }, null, 8, ["content"])) : M("", !0)
           ]),
-          c("div", Kt, [
-            V((i(), m("pre", Rt, [
-              M(k(e.value), 1)
+          h("div", Zt, [
+            C((i(), w("pre", te, [
+              H(k(r.value), 1)
             ])), [
-              [w(N), e.value.length > s.colSize / 8 ? e.value : ""]
+              [d(O), r.value.length > l.colSize / 8 ? r.value : ""]
             ]),
-            n.value === e.key ? (i(), f(T, {
+            o.value === r.key ? (i(), f(z, {
               key: 0,
-              content: typeof e.value == "string" ? e.value : JSON.stringify(e.value),
+              content: typeof r.value == "string" ? r.value : JSON.stringify(r.value),
               class: "htw-flex-none"
-            }, null, 8, ["content"])) : H("", !0)
+            }, null, 8, ["content"])) : M("", !0)
           ])
         ])
-      ], 40, It))), 128))
+      ], 40, qt))), 128))
     ], 4));
   }
-}), Wt = { class: "-htw-my-1" }, Xt = ["id", "name", "value", "checked", "onChange"], Jt = ["for", "onKeydown"], qt = {
+}), ne = { class: "-htw-my-1" }, se = ["id", "name", "value", "checked", "onChange"], oe = ["for", "onKeydown"], re = {
   name: "HstRadio"
-}, Qt = /* @__PURE__ */ _({
-  ...qt,
+}, ae = /* @__PURE__ */ y({
+  ...re,
   props: {
@@ -623,59 +764,59 @@ title: null,
   emits: ["update:modelValue"],
-  setup(s, { emit: h }) {
-    const a = s, o = y(() => Array.isArray(a.options) ? Object.fromEntries(a.options.map((t) => typeof t == "string" ? [t, t] : [t.value, t.label])) : a.options);
-    function n(t) {
-      h("update:modelValue", t), u.value = !0;
+  setup(l, { emit: c }) {
+    const n = l, a = v(() => Array.isArray(n.options) ? Object.fromEntries(n.options.map((t) => typeof t == "string" ? [t, t] : [t.value, t.label])) : n.options);
+    function o(t) {
+      c("update:modelValue", t), e.value = !0;
     }
-    const u = b(!1);
-    return (t, e) => (i(), f(z, {
+    const e = _(!1);
+    return (t, r) => (i(), f(S, {
       role: "group",
-      title: s.title,
-      class: x(["htw-cursor-text", t.$attrs.class]),
-      style: S(t.$attrs.style)
+      title: l.title,
+      class: b(["htw-cursor-text", t.$attrs.class]),
+      style: V(t.$attrs.style)
     }, {
-      actions: v(() => [
+      actions: m(() => [
         g(t.$slots, "actions")
       ]),
-      default: v(() => [
-        c("div", Wt, [
-          (i(!0), m(E, null, L(w(o), (l, r) => (i(), m(E, { key: r }, [
-            c("input", {
-              id: `${r}-radio`,
+      default: m(() => [
+        h("div", ne, [
+          (i(!0), w(N, null, A(d(a), (s, u) => (i(), w(N, { key: u }, [
+            h("input", {
+              id: `${u}-radio`,
               type: "radio",
-              name: `${r}-radio`,
-              value: r,
-              checked: r === s.modelValue,
+              name: `${u}-radio`,
+              value: u,
+              checked: u === l.modelValue,
               class: "htw-hidden",
-              onChange: (d) => n(r)
-            }, null, 40, Xt),
-            c("label", {
+              onChange: (p) => o(u)
+            }, null, 40, se),
+            h("label", {
               tabindex: "0",
-              for: `${r}-radio`,
+              for: `${u}-radio`,
               class: "htw-cursor-pointer htw-flex htw-items-center htw-relative htw-py-1 htw-group",
               onKeydown: [
-                A(j((d) => n(r), ["prevent"]), ["enter"]),
-                A(j((d) => n(r), ["prevent"]), ["space"])
+                E(B((p) => o(u), ["prevent"]), ["enter"]),
+                E(B((p) => o(u), ["prevent"]), ["space"])
               ]
             }, [
-              (i(), m("svg", {
+              (i(), w("svg", {
                 width: "16",
                 height: "16",
                 viewBox: "-12 -12 24 24",
-                class: x(["htw-relative htw-z-10 htw-border htw-border-solid htw-text-inherit htw-rounded-full htw-box-border htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-mr-2 group-hover:htw-border-primary-500", [
-                  s.modelValue === r ? "htw-border-primary-500" : "htw-border-black/25 dark:htw-border-white/25"
+                class: b(["htw-relative htw-z-10 htw-border htw-border-solid htw-text-inherit htw-rounded-full htw-box-border htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-mr-2 group-hover:htw-border-primary-500", [
+                  l.modelValue === u ? "htw-border-primary-500" : "htw-border-black/25 dark:htw-border-white/25"
                 ]])
               }, [
-                c("circle", {
+                h("circle", {
                   r: "7",
-                  class: x(["htw-will-change-transform", [
-                    u.value ? "htw-transition-all" : "htw-transition-none",
+                  class: b(["htw-will-change-transform", [
+                    e.value ? "htw-transition-all" : "htw-transition-none",
                     {
-                      "htw-delay-150": s.modelValue === r
+                      "htw-delay-150": l.modelValue === u
                     },
-                    s.modelValue === r ? "htw-fill-primary-500" : "htw-fill-transparent htw-scale-0"
+                    l.modelValue === u ? "htw-fill-primary-500" : "htw-fill-transparent htw-scale-0"
                   ]])
                 }, null, 2)
               ], 2)),
-              M(" " + k(l), 1)
-            ], 40, Jt)
+              H(" " + k(s), 1)
+            ], 40, oe)
           ], 64))), 128))
@@ -687,28 +828,34 @@ ])
   }
-}), Yt = st, Zt = ot, te = at, ee = ct, se = mt, le = gt, ne = Tt, oe = Bt, re = Pt, ae = T, ue = Qt, we = {
-  HstCheckbox: Yt,
-  HstText: Zt,
-  HstNumber: te,
-  HstSlider: ee,
-  HstTextarea: se,
-  HstSelect: le,
-  HstColorShades: ne,
-  HstTokenList: oe,
-  HstTokenGrid: re,
-  HstCopyIcon: ae,
-  HstRadio: ue
+}), ue = U, ie = nt, ce = ut, he = dt, de = mt, we = yt, pe = _t, me = kt, fe = Ot, ye = Gt, ve = Jt, ge = le, be = z, _e = ae, Ce = {
+  HstButton: ue,
+  HstButtonGroup: ie,
+  HstCheckbox: ce,
+  HstCheckboxList: he,
+  HstText: de,
+  HstNumber: we,
+  HstSlider: pe,
+  HstTextarea: me,
+  HstSelect: fe,
+  HstColorShades: ye,
+  HstTokenList: ve,
+  HstTokenGrid: ge,
+  HstCopyIcon: be,
+  HstRadio: _e
 };
 export {
-  Yt as HstCheckbox,
-  ne as HstColorShades,
-  ae as HstCopyIcon,
-  te as HstNumber,
-  ue as HstRadio,
-  le as HstSelect,
-  ee as HstSlider,
-  Zt as HstText,
-  se as HstTextarea,
-  re as HstTokenGrid,
-  oe as HstTokenList,
-  we as components
+  ue as HstButton,
+  ie as HstButtonGroup,
+  ce as HstCheckbox,
+  he as HstCheckboxList,
+  ye as HstColorShades,
+  be as HstCopyIcon,
+  we as HstNumber,
+  _e as HstRadio,
+  fe as HstSelect,
+  pe as HstSlider,
+  de as HstText,
+  me as HstTextarea,
+  ge as HstTokenGrid,
+  ve as HstTokenList,
+  Ce as components
 };

package.json

 {
   "name": "@histoire/controls",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Prebuilt controls components",
@@ -34,3 +34,3 @@ "license": "MIT",
   "dependencies": {
-    "@histoire/vendors": "^0.11.0"
+    "@histoire/vendors": "^0.11.1"
   },
@@ -37,0 +37,0 @@ "devDependencies": {

src/index.ts

@@ -0,2 +1,5 @@
+import HstButtonVue from './components/button/HstButton.vue'
+import HstButtonGroupVue from './components/button/HstButtonGroup.vue'
 import HstCheckboxVue from './components/checkbox/HstCheckbox.vue'
+import HstCheckboxListVue from './components/checkbox/HstCheckboxList.vue'
 import HstTextVue from './components/text/HstText.vue'
@@ -13,3 +16,6 @@ import HstNumberVue from './components/number/HstNumber.vue'
 
+export const HstButton = HstButtonVue
+export const HstButtonGroup = HstButtonGroupVue
 export const HstCheckbox = HstCheckboxVue
+export const HstCheckboxList = HstCheckboxListVue
 export const HstText = HstTextVue
@@ -27,3 +33,6 @@ export const HstNumber = HstNumberVue
 export const components = {
+  HstButton,
+  HstButtonGroup,
   HstCheckbox,
+  HstCheckboxList,
   HstText,
@@ -30,0 +39,0 @@ HstNumber,

No alert changes

Improved metrics

Total package byte prevSize

563764

increased by5.06%

Number of package files

100

increased by19.05%

Lines of code

4399

increased by11.79%

Dependency changes

• Updated@histoire/vendors@^0.11.1