@histoire/controls 0.2.5 → 0.3.0

package/dist/components/design-tokens/HstTokenGrid.vue.d.ts

@@ -1,19 +1,19 @@
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    tokens: Record<string, string | number>;
+    tokens: Record<string, string | number | any[] | Record<string, any>>;
     colSize?: number;
-    getName?: (key: string, value: string | number) => string;
+    getName?: (key: string, value: string | number | any[] | Record<string, any>) => string;
 }>, {
     colSize: number;
     getName: any;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    tokens: Record<string, string | number>;
+    tokens: Record<string, string | number | any[] | Record<string, any>>;
     colSize?: number;
-    getName?: (key: string, value: string | number) => string;
+    getName?: (key: string, value: string | number | any[] | Record<string, any>) => string;
 }>, {
     colSize: number;
     getName: any;
 }>>>, {
-    getName: (key: string, value: string | number) => string;
+    getName: (key: string, value: string | number | any[] | Record<string, any>) => string;
     colSize: number;
 }>;
 export default _default;

package/dist/components/design-tokens/HstTokenList.vue.d.ts

@@ -1,9 +1,9 @@
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    tokens: Record<string, string | number>;
-    getName?: (key: string, value: string | number) => string;
+    tokens: Record<string, string | number | any[] | Record<string, any>>;
+    getName?: (key: string, value: string | number | any[] | Record<string, any>) => string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    tokens: Record<string, string | number>;
-    getName?: (key: string, value: string | number) => string;
+    tokens: Record<string, string | number | any[] | Record<string, any>>;
+    getName?: (key: string, value: string | number | any[] | Record<string, any>) => string;
 }>>>, {}>;
 export default _default;
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/index.d.ts

@@ -106,6 +106,57 @@ export declare const HstColorShades: import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
     };
 }>>, {}>;
+export declare const HstTokenList: import("vue").DefineComponent<{
+    tokens: {
+        type: import("vue").PropType<Record<string, string | number | any[] | Record<string, any>>>;
+        required: true;
+    };
+    getName: {
+        type: import("vue").PropType<(key: string, value: string | number | any[] | Record<string, any>) => string>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tokens: {
+        type: import("vue").PropType<Record<string, string | number | any[] | Record<string, any>>>;
+        required: true;
+    };
+    getName: {
+        type: import("vue").PropType<(key: string, value: string | number | any[] | Record<string, any>) => string>;
+    };
+}>>, {}>;
+export declare const HstTokenGrid: import("vue").DefineComponent<{
+    getName: {
+        type: import("vue").PropType<(key: string, value: string | number | any[] | Record<string, any>) => string>;
+    } & {
+        default: any;
+    };
+    colSize: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    tokens: {
+        type: import("vue").PropType<Record<string, string | number | any[] | Record<string, any>>>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    getName: {
+        type: import("vue").PropType<(key: string, value: string | number | any[] | Record<string, any>) => string>;
+    } & {
+        default: any;
+    };
+    colSize: {
+        type: import("vue").PropType<number>;
+    } & {
+        default: number;
+    };
+    tokens: {
+        type: import("vue").PropType<Record<string, string | number | any[] | Record<string, any>>>;
+        required: true;
+    };
+}>>, {
+    getName: (key: string, value: string | number | any[] | Record<string, any>) => string;
+    colSize: number;
+}>;
 export declare const HstCopyIcon: import("vue").DefineComponent<{
     content: {
         type: import("vue").PropType<string>;

package/dist/index.es.js

@@ -1358,7 +1358,7 @@ var PrivatePopper = () => defineComponent({
       default: defaultPropFactory("strategy")
     },
     autoHide: {
-      type: Boolean,
+      type: [Boolean, Function],
       default: defaultPropFactory("autoHide")
     },
     handleResize: {
@@ -1461,7 +1461,8 @@ var PrivatePopper = () => defineComponent({
         },
         transformOrigin: null
       },
-      shownChildren: /* @__PURE__ */ new Set()
+      shownChildren: /* @__PURE__ */ new Set(),
+      lastAutoHide: true
     };
   },
   computed: {
@@ -1477,7 +1478,7 @@ var PrivatePopper = () => defineComponent({
         isShown: this.isShown,
         shouldMountContent: this.shouldMountContent,
         skipTransition: this.skipTransition,
-        autoHide: this.autoHide,
+        autoHide: typeof this.autoHide === "function" ? this.lastAutoHide : this.autoHide,
         show: this.show,
         hide: this.hide,
         handleResize: this.handleResize,
@@ -2127,7 +2128,15 @@ function isContainingEventTarget(popper, event) {
   return popper.$_mouseDownContains || popperContent.contains(event.target);
 }
 function shouldAutoHide(popper, contains2, event) {
-  return event.closeAllPopover || event.closePopover && contains2 || popper.autoHide && !contains2;
+  return event.closeAllPopover || event.closePopover && contains2 || getAutoHideResult(popper, event) && !contains2;
+}
+function getAutoHideResult(popper, event) {
+  if (typeof popper.autoHide === "function") {
+    const result = popper.autoHide(event);
+    popper.lastAutoHide = result;
+    return result;
+  }
+  return popper.autoHide;
 }
 function computePositionAllShownPoppers(event) {
   for (let i = 0; i < shownPoppers.length; i++) {
@@ -2317,11 +2326,11 @@ const _hoisted_2$1$1 = {
   ref: "inner",
   class: "v-popper__inner"
 };
-const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-outer" }, null, -1);
-const _hoisted_4$1 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-inner" }, null, -1);
-const _hoisted_5$1 = [
-  _hoisted_3$3,
-  _hoisted_4$1
+const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-outer" }, null, -1);
+const _hoisted_4$3 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-inner" }, null, -1);
+const _hoisted_5$3 = [
+  _hoisted_3$5,
+  _hoisted_4$3
 ];
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ResizeObserver = resolveComponent("ResizeObserver");
@@ -2380,7 +2389,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
           left: _ctx.toPx(_ctx.result.arrow.x),
           top: _ctx.toPx(_ctx.result.arrow.y)
         } : void 0)
-      }, _hoisted_5$1, 4)
+      }, _hoisted_5$3, 4)
     ], 4)
   ], 46, _hoisted_1$1$1);
 }
@@ -2514,7 +2523,7 @@ defineComponent(__spreadProps2(__spreadValues2({}, PrivatePopperWrapper), {
   name: "VTooltip",
   vPopperTheme: "tooltip"
 }));
-const _sfc_main$7 = defineComponent({
+const _sfc_main$9 = defineComponent({
   name: "VTooltipDirective",
   components: {
     Popper: PrivatePopper(),
@@ -2605,8 +2614,8 @@ const _sfc_main$7 = defineComponent({
     }
   }
 });
-const _hoisted_1$5 = ["innerHTML"];
-const _hoisted_2$3 = ["textContent"];
+const _hoisted_1$7 = ["innerHTML"];
+const _hoisted_2$5 = ["textContent"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PopperContent = resolveComponent("PopperContent");
   const _component_Popper = resolveComponent("Popper");
@@ -2649,10 +2658,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.html ? (openBlock(), createElementBlock("div", {
             key: 0,
             innerHTML: _ctx.finalContent
-          }, null, 8, _hoisted_1$5)) : (openBlock(), createElementBlock("div", {
+          }, null, 8, _hoisted_1$7)) : (openBlock(), createElementBlock("div", {
             key: 1,
             textContent: toDisplayString(_ctx.finalContent)
-          }, null, 8, _hoisted_2$3))
+          }, null, 8, _hoisted_2$5))
         ]),
         _: 2
       }, 1032, ["class", "popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"])
@@ -2660,7 +2669,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 16, ["theme", "popper-node", "onApplyShow", "onApplyHide"]);
 }
-var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render]]);
+var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render]]);
 const TARGET_CLASS = "v-popper--has-tooltip";
 function getPlacement(options2, modifiers) {
   let result = options2.placement;
@@ -2785,20 +2794,20 @@ var PrivateVTooltip = {
   }
 };
 const VTooltip = PrivateVTooltip;
-const _hoisted_1$4 = { class: "htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap" };
-const _hoisted_2$2 = { class: "htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0" };
-const _hoisted_3$2 = { class: "htw-block htw-grow" };
-const __default__$6 = {
+const _hoisted_1$6 = { class: "htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap" };
+const _hoisted_2$4 = { class: "htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0" };
+const _hoisted_3$4 = { class: "htw-block htw-grow" };
+const __default__$8 = {
   name: "HstWrapper"
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$6), {
+const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$8), {
   props: {
     title: null
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1$4, [
-        withDirectives((openBlock(), createElementBlock("span", _hoisted_2$2, [
+      return openBlock(), createElementBlock("label", _hoisted_1$6, [
+        withDirectives((openBlock(), createElementBlock("span", _hoisted_2$4, [
           createTextVNode(toDisplayString(__props.title), 1)
         ])), [
           [unref(VTooltip), {
@@ -2807,25 +2816,25 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             distance: 12
           }]
         ]),
-        createElementVNode("span", _hoisted_3$2, [
+        createElementVNode("span", _hoisted_3$4, [
           renderSlot(_ctx.$slots, "default")
         ])
       ]);
     };
   }
 }));
-const _hoisted_1$3 = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
-const _hoisted_2$1 = {
+const _hoisted_1$5 = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
+const _hoisted_2$3 = {
   width: "16",
   height: "16",
   viewBox: "0 0 24 24",
   class: "htw-relative htw-z-10"
 };
-const _hoisted_3$1 = ["stroke-dasharray", "stroke-dashoffset"];
-const __default__$5 = {
+const _hoisted_3$3 = ["stroke-dasharray", "stroke-dashoffset"];
+const __default__$7 = {
   name: "HstCheckbox"
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$5), {
+const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$7), {
   props: {
     modelValue: { type: Boolean },
     title: null
@@ -2849,7 +2858,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       dasharray.value = (_c = (_b2 = (_a2 = path.value).getTotalLength) == null ? void 0 : _b2.call(_a2)) != null ? _c : 21.21;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$6, {
+      return openBlock(), createBlock(_sfc_main$8, {
         role: "checkbox",
         tabindex: "0",
         class: "htw-cursor-pointer htw-items-center",
@@ -2861,13 +2870,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         ]
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$3, [
+          createElementVNode("div", _hoisted_1$5, [
             createElementVNode("div", {
               class: normalizeClass(["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", [
                 __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$1, [
+            (openBlock(), createElementBlock("svg", _hoisted_2$3, [
               createElementVNode("path", {
                 ref_key: "path",
                 ref: path,
@@ -2881,7 +2890,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                 ]]),
                 "stroke-dasharray": dasharray.value,
                 "stroke-dashoffset": unref(dashoffset)
-              }, null, 10, _hoisted_3$1)
+              }, null, 10, _hoisted_3$3)
             ]))
           ])
         ]),
@@ -2890,11 +2899,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const _hoisted_1$2 = ["value"];
-const __default__$4 = {
+const _hoisted_1$4 = ["value"];
+const __default__$6 = {
   name: "HstText"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
+const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$6), {
   props: {
     title: null,
     modelValue: null
@@ -2905,7 +2914,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   setup(__props, { emit }) {
     const input = ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$6, {
+      return openBlock(), createBlock(_sfc_main$8, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style),
@@ -2920,18 +2929,18 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             value: __props.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: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
-          }), null, 16, _hoisted_1$2)
+          }), null, 16, _hoisted_1$4)
         ]),
         _: 1
       }, 8, ["title", "class", "style"]);
     };
   }
 }));
-const __default__$3 = {
+const __default__$5 = {
   name: "HstNumber",
   inheritAttrs: false
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
+const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$5), {
   props: {
     title: null,
     modelValue: null
@@ -2978,7 +2987,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       stopDragging();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$6, {
+      return openBlock(), createBlock(_sfc_main$8, {
         class: normalizeClass(["htw-cursor-ew-resize htw-items-center", [
           _ctx.$attrs.class,
           { "htw-select-none": isDragging.value }
@@ -3012,12 +3021,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const _hoisted_1$1 = ["value"];
-const __default__$2 = {
+const _hoisted_1$3 = ["value"];
+const __default__$4 = {
   name: "HstTextarea",
   inheritAttrs: false
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
+const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
   props: {
     title: null,
     modelValue: null
@@ -3028,7 +3037,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   setup(__props, { emit }) {
     const input = ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$6, {
+      return openBlock(), createBlock(_sfc_main$8, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style),
@@ -3042,7 +3051,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             value: __props.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: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
-          }), null, 16, _hoisted_1$1)
+          }), null, 16, _hoisted_1$3)
         ]),
         _: 1
       }, 8, ["title", "class", "style"]);
@@ -4997,10 +5006,10 @@ _global[globalKey] = _global[globalKey] || {};
 _global[globalKey];
 var _a, _b;
 isClient && (window == null ? void 0 : window.navigator) && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.platform) && /iP(ad|hone|od)/.test((_b = window == null ? void 0 : window.navigator) == null ? void 0 : _b.platform);
-const __default__$1 = {
+const __default__$3 = {
   name: "HstCopyIcon"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
+const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
   props: {
     content: null
   },
@@ -5025,18 +5034,19 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const _hoisted_1 = {
+const _hoisted_1$2 = {
   key: 0,
   class: "htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
 };
-const _hoisted_2 = { class: "htw-flex htw-gap-1" };
-const _hoisted_3 = { class: "htw-my-0 htw-truncate htw-shrink" };
-const _hoisted_4 = { class: "htw-flex htw-gap-1" };
-const _hoisted_5 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
-const __default__ = {
+const _hoisted_2$2 = ["onMouseenter"];
+const _hoisted_3$2 = { class: "htw-flex htw-gap-1" };
+const _hoisted_4$2 = { class: "htw-my-0 htw-truncate htw-shrink" };
+const _hoisted_5$2 = { class: "htw-flex htw-gap-1" };
+const _hoisted_6$1 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
+const __default__$2 = {
   name: "HstColorShades"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
   props: {
     shades: null,
     getName: null,
@@ -5064,12 +5074,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       }
       return list;
     });
+    const hover = ref(null);
     return (_ctx, _cache) => {
-      return unref(displayedShades).length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+      return unref(displayedShades).length ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayedShades), (shade) => {
           return openBlock(), createElementBlock("div", {
             key: shade.key,
-            class: "htw-flex htw-flex-col htw-gap-2 htw-group"
+            class: "htw-flex htw-flex-col htw-gap-2",
+            onMouseenter: ($event) => hover.value = shade.key,
+            onMouseleave: _cache[0] || (_cache[0] = ($event) => hover.value = null)
           }, [
             renderSlot(_ctx.$slots, "default", {
               color: shade.color
@@ -5082,45 +5095,191 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
               }, null, 4)
             ]),
             createElementVNode("div", null, [
-              createElementVNode("div", _hoisted_2, [
-                withDirectives((openBlock(), createElementBlock("pre", _hoisted_3, [
+              createElementVNode("div", _hoisted_3$2, [
+                withDirectives((openBlock(), createElementBlock("pre", _hoisted_4$2, [
                   createTextVNode(toDisplayString(shade.name), 1)
                 ])), [
                   [unref(VTooltip), shade.name.length > 23 ? shade.name : ""]
                 ]),
-                createVNode(_sfc_main$1, {
+                hover.value === shade.key ? (openBlock(), createBlock(_sfc_main$3, {
+                  key: 0,
                   content: shade.name,
-                  class: "htw-hidden group-hover:htw-block htw-flex-none"
-                }, null, 8, ["content"])
+                  class: "htw-flex-none"
+                }, null, 8, ["content"])) : createCommentVNode("", true)
               ]),
-              createElementVNode("div", _hoisted_4, [
-                withDirectives((openBlock(), createElementBlock("pre", _hoisted_5, [
+              createElementVNode("div", _hoisted_5$2, [
+                withDirectives((openBlock(), createElementBlock("pre", _hoisted_6$1, [
                   createTextVNode(toDisplayString(shade.color), 1)
                 ])), [
                   [unref(VTooltip), shade.color.length > 23 ? shade.color : ""]
                 ]),
-                createVNode(_sfc_main$1, {
+                hover.value === shade.key ? (openBlock(), createBlock(_sfc_main$3, {
+                  key: 0,
                   content: shade.color,
-                  class: "htw-hidden group-hover:htw-block htw-flex-none"
-                }, null, 8, ["content"])
+                  class: "htw-flex-none"
+                }, null, 8, ["content"])) : createCommentVNode("", true)
               ])
             ])
-          ]);
+          ], 40, _hoisted_2$2);
         }), 128))
       ])) : createCommentVNode("", true);
     };
   }
 }));
-const HstCheckbox = _sfc_main$5;
-const HstText = _sfc_main$4;
-const HstNumber = _sfc_main$3;
-const HstTextarea = _sfc_main$2;
-const HstColorShades = _sfc_main;
-const HstCopyIcon = _sfc_main$1;
+const _hoisted_1$1 = ["onMouseenter"];
+const _hoisted_2$1 = { class: "htw-mx-4" };
+const _hoisted_3$1 = { class: "htw-flex htw-gap-1" };
+const _hoisted_4$1 = { class: "htw-my-0 htw-truncate htw-shrink" };
+const _hoisted_5$1 = { class: "htw-flex htw-gap-1" };
+const _hoisted_6 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
+const __default__$1 = {
+  name: "HstTokenList"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
+  props: {
+    tokens: null,
+    getName: null
+  },
+  setup(__props) {
+    const props = __props;
+    const processedTokens = computed(() => {
+      const list = props.tokens;
+      const getName = props.getName;
+      return Object.entries(list).map(([key, value]) => {
+        const name = getName ? getName(key, value) : key;
+        return {
+          key,
+          name,
+          value: typeof value === "number" ? value.toString() : value
+        };
+      });
+    });
+    const hover = ref(null);
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(unref(processedTokens), (token) => {
+        return openBlock(), createElementBlock("div", {
+          key: token.key,
+          class: "htw-flex htw-flex-col htw-gap-2 htw-my-8",
+          onMouseenter: ($event) => hover.value = token.key,
+          onMouseleave: _cache[0] || (_cache[0] = ($event) => hover.value = null)
+        }, [
+          renderSlot(_ctx.$slots, "default", { token }),
+          createElementVNode("div", _hoisted_2$1, [
+            createElementVNode("div", _hoisted_3$1, [
+              createElementVNode("pre", _hoisted_4$1, toDisplayString(token.name), 1),
+              hover.value === token.key ? (openBlock(), createBlock(_sfc_main$3, {
+                key: 0,
+                content: token.name,
+                class: "htw-flex-none"
+              }, null, 8, ["content"])) : createCommentVNode("", true)
+            ]),
+            createElementVNode("div", _hoisted_5$1, [
+              createElementVNode("pre", _hoisted_6, toDisplayString(token.value), 1),
+              hover.value === token.key ? (openBlock(), createBlock(_sfc_main$3, {
+                key: 0,
+                content: typeof token.value === "string" ? token.value : JSON.stringify(token.value),
+                class: "htw-flex-none"
+              }, null, 8, ["content"])) : createCommentVNode("", true)
+            ])
+          ])
+        ], 40, _hoisted_1$1);
+      }), 128);
+    };
+  }
+}));
+var HstTokenGrid_vue_vue_type_style_index_0_lang = "";
+const _hoisted_1 = ["onMouseenter"];
+const _hoisted_2 = { class: "htw-flex htw-gap-1" };
+const _hoisted_3 = { class: "htw-my-0 htw-truncate htw-shrink" };
+const _hoisted_4 = { class: "htw-flex htw-gap-1" };
+const _hoisted_5 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
+const __default__ = {
+  name: "HstTokenGrid"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  props: {
+    tokens: null,
+    colSize: { default: 180 },
+    getName: { type: Function, default: null }
+  },
+  setup(__props) {
+    const props = __props;
+    const processedTokens = computed(() => {
+      const list = props.tokens;
+      const getName = props.getName;
+      return Object.entries(list).map(([key, value]) => {
+        const name = getName ? getName(key, value) : key;
+        return {
+          key,
+          name,
+          value: typeof value === "number" ? value.toString() : value
+        };
+      });
+    });
+    const colSizePx = computed(() => `${props.colSize}px`);
+    const hover = ref(null);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "htw-bind-col-size htw-grid htw-gap-4 htw-m-4",
+        style: normalizeStyle({
+          "--histoire-col-size": unref(colSizePx)
+        })
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(processedTokens), (token) => {
+          return openBlock(), createElementBlock("div", {
+            key: token.key,
+            class: "htw-flex htw-flex-col htw-gap-2",
+            onMouseenter: ($event) => hover.value = token.key,
+            onMouseleave: _cache[0] || (_cache[0] = ($event) => hover.value = null)
+          }, [
+            renderSlot(_ctx.$slots, "default", { token }),
+            createElementVNode("div", null, [
+              createElementVNode("div", _hoisted_2, [
+                withDirectives((openBlock(), createElementBlock("pre", _hoisted_3, [
+                  createTextVNode(toDisplayString(token.name), 1)
+                ])), [
+                  [unref(VTooltip), token.name.length > __props.colSize / 8 ? token.name : ""]
+                ]),
+                hover.value === token.key ? (openBlock(), createBlock(_sfc_main$3, {
+                  key: 0,
+                  content: token.name,
+                  class: "htw-flex-none"
+                }, null, 8, ["content"])) : createCommentVNode("", true)
+              ]),
+              createElementVNode("div", _hoisted_4, [
+                withDirectives((openBlock(), createElementBlock("pre", _hoisted_5, [
+                  createTextVNode(toDisplayString(token.value), 1)
+                ])), [
+                  [unref(VTooltip), token.value.length > __props.colSize / 8 ? token.value : ""]
+                ]),
+                hover.value === token.key ? (openBlock(), createBlock(_sfc_main$3, {
+                  key: 0,
+                  content: typeof token.value === "string" ? token.value : JSON.stringify(token.value),
+                  class: "htw-flex-none"
+                }, null, 8, ["content"])) : createCommentVNode("", true)
+              ])
+            ])
+          ], 40, _hoisted_1);
+        }), 128))
+      ], 4);
+    };
+  }
+}));
+const HstCheckbox = _sfc_main$7;
+const HstText = _sfc_main$6;
+const HstNumber = _sfc_main$5;
+const HstTextarea = _sfc_main$4;
+const HstColorShades = _sfc_main$2;
+const HstTokenList = _sfc_main$1;
+const HstTokenGrid = _sfc_main;
+const HstCopyIcon = _sfc_main$3;
 function registerVueComponents(app) {
-  app.component("HstCheckbox", _sfc_main$5);
-  app.component("HstText", _sfc_main$4);
-  app.component("HstNumber", _sfc_main$3);
-  app.component("HstTextarea", _sfc_main$2);
-}
-export { HstCheckbox, HstColorShades, HstCopyIcon, HstNumber, HstText, HstTextarea, registerVueComponents };
+  app.component("HstCheckbox", _sfc_main$7);
+  app.component("HstText", _sfc_main$6);
+  app.component("HstNumber", _sfc_main$5);
+  app.component("HstTextarea", _sfc_main$4);
+  app.component("HstColorShades", _sfc_main$2);
+  app.component("HstTokenList", _sfc_main$1);
+  app.component("HstTokenGrid", _sfc_main);
+}
+export { HstCheckbox, HstColorShades, HstCopyIcon, HstNumber, HstText, HstTextarea, HstTokenGrid, HstTokenList, registerVueComponents };