npm - @histoire/controls - Versions diffs - 0.7.4 → 0.7.7 - Mend

@histoire/controls 0.7.4 → 0.7.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/.histoire/dist/__sandbox.html CHANGED Viewed

@@ -5,12 +5,12 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <meta name="description" content="">
-  <link rel="stylesheet" href="/assets/style.04507241.css">
+  <link rel="stylesheet" href="/assets/style.dc851298.css">
     <link rel="icon" type="image/svg+xml" href="/histoire.svg"/>
 </head>
 <body>
   <div id="app"></div>
-    <script type="module" src="/assets/bundle-sandbox.5e153933.js"></script>
+    <script type="module" src="/assets/bundle-sandbox.f56c0808.js"></script>
 </body>
 </html>

package/.histoire/dist/assets/{BaseEmpty.d30f3079.js → BaseEmpty.c5ebb434.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { a as openBlock, b as createElementBlock, f as renderSlot } from "./vendor.2833ae3d.js";
-import { _ as _export_sfc } from "./bundle-main.784e5bf7.js";
+import { a as openBlock, b as createElementBlock, f as renderSlot } from "./vendor.31c91490.js";
+import { _ as _export_sfc } from "./bundle-main.c70a2b14.js";
 const _sfc_main = {};
 const _hoisted_1 = { class: "htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400 htw-text-lg" };
 function _sfc_render(_ctx, _cache) {

package/.histoire/dist/assets/{HomeView.8e044be6.js → HomeView.2d2d0dfe.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { d as defineComponent, c as computed, a as openBlock, b as createElementBlock, e as createBaseVNode, i as unref } from "./vendor.2833ae3d.js";
-import { h as histoireConfig, c as customLogos } from "./global-components.6736b2a9.js";
+import { d as defineComponent, c as computed, a as openBlock, b as createElementBlock, e as createBaseVNode, i as unref } from "./vendor.31c91490.js";
+import { h as histoireConfig, c as customLogos } from "./global-components.d165b38c.js";
 var HistoireLogo = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iNTEyIgogICBoZWlnaHQ9IjUxMiIKICAgdmlld0JveD0iMCAwIDUxMiA1MTIiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzUiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPGcKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxyZWN0CiAgICAgICBzdHlsZT0ib3BhY2l0eTowLjU7ZmlsbDojMzRkMzk5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDoxLjAwMzc1IgogICAgICAgaWQ9InJlY3QxMzcyIgogICAgICAgd2lkdGg9IjMxNC4zMDkyMyIKICAgICAgIGhlaWdodD0iNDA2LjYwOTAxIgogICAgICAgeD0iLTI2LjU2NTA2MyIKICAgICAgIHk9IjEzNC43NTA3OSIKICAgICAgIHRyYW5zZm9ybT0icm90YXRlKC0yMy44MjEyNjIpIgogICAgICAgcnk9IjgiIC8+CiAgICA8cmVjdAogICAgICAgc3R5bGU9ImZpbGw6IzM0ZDM5OTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MS4wMDM3NSIKICAgICAgIGlkPSJyZWN0ODUwIgogICAgICAgd2lkdGg9IjMxNC4zMDkyMyIKICAgICAgIGhlaWdodD0iNDA2LjYwOTAxIgogICAgICAgeD0iNzcuNTcxODM4IgogICAgICAgeT0iNzIuODA4NzA4IgogICAgICAgcnk9IjgiCiAgICAgICB0cmFuc2Zvcm09InJvdGF0ZSgtNC41NzQ0NTM0KSIgLz4KICA8L2c+CiAgPGcKICAgICBpZD0ibGF5ZXIzIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDE2NTctMyIKICAgICAgIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOiNiNGZhZTI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNiNGZhZTI7c3Ryb2tlLXdpZHRoOjguMzQ5MjM7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICAgIGQ9Ik0gMzU5LjM4OTQ3LDM1NS45NTEzNCAzMjAuNzI5MzUsMTc2LjUyOTQyIDIzOC4zNDYxMywyMzguOTQxMTggWiBNIDI3My42NDEyNCwyNzMuMDY2MDggMTUyLjU5Nzg4LDE1Ni4wNTU5MSAxOTEuMjU4MDQsMzM1LjQ3Nzg2IFoiIC8+CiAgPC9nPgogIDxnCiAgICAgaWQ9ImxheWVyMiIKICAgICBzdHlsZT0iZGlzcGxheTpub25lIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDE2NTciCiAgICAgICBzdHlsZT0iZmlsbDojYjRmYWUyO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojYjRmYWUyO3N0cm9rZS13aWR0aDo4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICBkPSJtIDI5NiwxMDMuOTgyNDIgLTEzNS41MzEyNSwxNzcuOTY2OCBoIDg4LjcwMTE3IHogTSAyNjIuODMwMDgsMjMwLjA1MDc4IDIxNiw0MDguMDE3NTggMzUxLjUzMTI1LDIzMC4wNTA3OCBaIgogICAgICAgdHJhbnNmb3JtPSJyb3RhdGUoLTQuMTU2NTUzLDI1NiwyNTYuMDA2OTEpIiAvPgogIDwvZz4KPC9zdmc+Cg==";
 const _hoisted_1 = { class: "htw-flex htw-items-center htw-justify-center htw-h-full" };
 const _hoisted_2 = ["src"];

package/.histoire/dist/assets/HstCheckbox.story.ccd10161.js ADDED Viewed

@@ -0,0 +1,151 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { d as defineComponent, r as ref, c as computed, w as watch, ax as _export_sfc, a as openBlock, j as createBlock, k as withCtx, f as renderSlot, e as createBaseVNode, n as normalizeClass, b as createElementBlock, v as withKeys, g as withModifiers, q as resolveComponent, l as createVNode } from "./vendor.31c91490.js";
+import { H as HstWrapper } from "./HstWrapper.fee42109.js";
+const __default__ = {
+  name: "HstCheckbox"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  props: {
+    modelValue: { type: Boolean, required: true },
+    title: { type: String, required: false }
+  },
+  emits: {
+    "update:modelValue": (newValue) => true
+  },
+  setup(__props, { expose, emit }) {
+    expose();
+    const props = __props;
+    function toggle() {
+      emit("update:modelValue", !props.modelValue);
+      animationEnabled.value = true;
+    }
+    const path = ref();
+    const dasharray = ref(0);
+    const progress = computed(() => props.modelValue ? 1 : 0);
+    const dashoffset = computed(() => (1 - progress.value) * dasharray.value);
+    const animationEnabled = ref(false);
+    watch(path, (value) => {
+      var _a, _b, _c;
+      dasharray.value = (_c = (_b = (_a = path.value).getTotalLength) == null ? void 0 : _b.call(_a)) != null ? _c : 21.21;
+    });
+    const __returned__ = { props, emit, toggle, path, dasharray, progress, dashoffset, animationEnabled, HstWrapper };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+}));
+const _hoisted_1 = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
+const _hoisted_2 = {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  class: "htw-relative htw-z-10"
+};
+const _hoisted_3 = ["stroke-dasharray", "stroke-dashoffset"];
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock($setup["HstWrapper"], {
+    role: "checkbox",
+    tabindex: "0",
+    class: "htw-cursor-pointer htw-items-center",
+    title: $props.title,
+    onClick: _cache[0] || (_cache[0] = ($event) => $setup.toggle()),
+    onKeydown: [
+      _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => $setup.toggle(), ["prevent"]), ["enter"])),
+      _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => $setup.toggle(), ["prevent"]), ["space"]))
+    ]
+  }, {
+    actions: withCtx(() => [
+      renderSlot(_ctx.$slots, "actions")
+    ]),
+    default: withCtx(() => [
+      createBaseVNode("div", _hoisted_1, [
+        createBaseVNode("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, [
+          createBaseVNode("path", {
+            ref: "path",
+            d: "m 4 12 l 5 5 l 10 -10",
+            fill: "none",
+            class: normalizeClass(["htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out", [
+              $setup.animationEnabled ? "htw-transition-all" : "htw-transition-none",
+              {
+                "htw-delay-150": $props.modelValue
+              }
+            ]]),
+            "stroke-dasharray": $setup.dasharray,
+            "stroke-dashoffset": $setup.dashoffset
+          }, null, 10, _hoisted_3)
+        ]))
+      ])
+    ]),
+    _: 3
+  }, 8, ["title"]);
+}
+_sfc_main$1.__file = "src/components/checkbox/HstCheckbox.vue";
+var HstCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/checkbox/HstCheckbox.vue"]]);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  name: "HstCheckbox.story",
+  setup(__props, { expose }) {
+    expose();
+    function initState() {
+      return {
+        checked: false
+      };
+    }
+    const __returned__ = { initState, HstCheckbox };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Variant = resolveComponent("Variant");
+  const _component_Story = resolveComponent("Story");
+  return openBlock(), createBlock(_component_Story, { title: "HstCheckbox" }, {
+    default: withCtx(() => [
+      createVNode(_component_Variant, {
+        title: "playground",
+        "init-state": $setup.initState
+      }, {
+        default: withCtx(({ state }) => [
+          createVNode($setup["HstCheckbox"], {
+            modelValue: state.checked,
+            "onUpdate:modelValue": ($event) => state.checked = $event,
+            title: "Label"
+          }, null, 8, ["modelValue", "onUpdate:modelValue"])
+        ]),
+        controls: withCtx(({ state }) => [
+          createVNode($setup["HstCheckbox"], {
+            modelValue: state.checked,
+            "onUpdate:modelValue": ($event) => state.checked = $event,
+            title: "Label"
+          }, null, 8, ["modelValue", "onUpdate:modelValue"])
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+_sfc_main.__file = "src/components/checkbox/HstCheckbox.story.vue";
+var HstCheckbox_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/checkbox/HstCheckbox.story.vue"]]);
+export { HstCheckbox_story as default };

package/.histoire/dist/assets/{HstColorShades.story.68cf74d1.js → HstColorShades.story.d71deb80.js} RENAMED Viewed

@@ -17,17 +17,8 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { d as defineComponent, c as computed, r as ref, i as unref, a as openBlock, b as createElementBlock, F as Fragment, J as renderList, f as renderSlot, e as createBaseVNode, h as normalizeStyle, M as withDirectives, ay as VTooltip, R as createTextVNode, t as toDisplayString, j as createBlock, m as createCommentVNode, ax as _export_sfc, q as resolveComponent, k as withCtx, l as createVNode } from "./vendor.2833ae3d.js";
-import { H as HstCopyIcon } from "./HstCopyIcon.e40e725e.js";
-const _hoisted_1 = {
-  key: 0,
-  class: "htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
-};
-const _hoisted_2 = ["onMouseenter"];
-const _hoisted_3 = { class: "htw-flex htw-gap-1" };
-const _hoisted_4 = { class: "htw-my-0 htw-truncate htw-shrink" };
-const _hoisted_5 = { class: "htw-flex htw-gap-1" };
-const _hoisted_6 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
+import { d as defineComponent, c as computed, r as ref, ax as _export_sfc, ay as VTooltip, a as openBlock, b as createElementBlock, F as Fragment, J as renderList, f as renderSlot, e as createBaseVNode, h as normalizeStyle, M as withDirectives, R as createTextVNode, t as toDisplayString, j as createBlock, m as createCommentVNode, q as resolveComponent, k as withCtx, l as createVNode } from "./vendor.31c91490.js";
+import { H as HstCopyIcon } from "./HstCopyIcon.ef403c78.js";
 const __default__ = {
   name: "HstColorShades"
 };
@@ -37,7 +28,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     getName: { type: Function, required: false },
     search: { type: String, required: false }
   },
-  setup(__props) {
+  setup(__props, { expose }) {
+    expose();
     const props = __props;
     const shadesWithName = computed(() => {
       const shades = props.shades;
@@ -60,62 +52,75 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       return list;
     });
     const hover = ref(null);
-    return (_ctx, _cache) => {
-      return unref(displayedShades).length ? (openBlock(), createElementBlock("div", _hoisted_1, [
-        (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",
-            onMouseenter: ($event) => hover.value = shade.key,
-            onMouseleave: _cache[0] || (_cache[0] = ($event) => hover.value = null)
-          }, [
-            renderSlot(_ctx.$slots, "default", {
-              color: shade.color
-            }, () => [
-              createBaseVNode("div", {
-                class: "htw-rounded-full htw-w-16 htw-h-16",
-                style: normalizeStyle({
-                  backgroundColor: shade.color
-                })
-              }, null, 4)
-            ]),
-            createBaseVNode("div", null, [
-              createBaseVNode("div", _hoisted_3, [
-                withDirectives((openBlock(), createElementBlock("pre", _hoisted_4, [
-                  createTextVNode(toDisplayString(shade.name), 1)
-                ])), [
-                  [unref(VTooltip), shade.name.length > 23 ? shade.name : ""]
-                ]),
-                hover.value === shade.key ? (openBlock(), createBlock(HstCopyIcon, {
-                  key: 0,
-                  content: shade.name,
-                  class: "htw-flex-none"
-                }, null, 8, ["content"])) : createCommentVNode("v-if", true)
-              ]),
-              createBaseVNode("div", _hoisted_5, [
-                withDirectives((openBlock(), createElementBlock("pre", _hoisted_6, [
-                  createTextVNode(toDisplayString(shade.color), 1)
-                ])), [
-                  [unref(VTooltip), shade.color.length > 23 ? shade.color : ""]
-                ]),
-                hover.value === shade.key ? (openBlock(), createBlock(HstCopyIcon, {
-                  key: 0,
-                  content: shade.color,
-                  class: "htw-flex-none"
-                }, null, 8, ["content"])) : createCommentVNode("v-if", true)
-              ])
-            ])
-          ], 40, _hoisted_2);
-        }), 128))
-      ])) : createCommentVNode("v-if", true);
-    };
+    const __returned__ = { props, shadesWithName, displayedShades, hover, vTooltip: VTooltip, HstCopyIcon };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 }));
+const _hoisted_1 = {
+  key: 0,
+  class: "htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
+};
+const _hoisted_2 = ["onMouseenter"];
+const _hoisted_3 = { class: "htw-flex htw-gap-1" };
+const _hoisted_4 = { class: "htw-my-0 htw-truncate htw-shrink" };
+const _hoisted_5 = { class: "htw-flex htw-gap-1" };
+const _hoisted_6 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.displayedShades.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList($setup.displayedShades, (shade) => {
+      return openBlock(), createElementBlock("div", {
+        key: shade.key,
+        class: "htw-flex htw-flex-col htw-gap-2",
+        onMouseenter: ($event) => $setup.hover = shade.key,
+        onMouseleave: _cache[0] || (_cache[0] = ($event) => $setup.hover = null)
+      }, [
+        renderSlot(_ctx.$slots, "default", {
+          color: shade.color
+        }, () => [
+          createBaseVNode("div", {
+            class: "htw-rounded-full htw-w-16 htw-h-16",
+            style: normalizeStyle({
+              backgroundColor: shade.color
+            })
+          }, null, 4)
+        ]),
+        createBaseVNode("div", null, [
+          createBaseVNode("div", _hoisted_3, [
+            withDirectives((openBlock(), createElementBlock("pre", _hoisted_4, [
+              createTextVNode(toDisplayString(shade.name), 1)
+            ])), [
+              [$setup["vTooltip"], shade.name.length > 23 ? shade.name : ""]
+            ]),
+            $setup.hover === shade.key ? (openBlock(), createBlock($setup["HstCopyIcon"], {
+              key: 0,
+              content: shade.name,
+              class: "htw-flex-none"
+            }, null, 8, ["content"])) : createCommentVNode("v-if", true)
+          ]),
+          createBaseVNode("div", _hoisted_5, [
+            withDirectives((openBlock(), createElementBlock("pre", _hoisted_6, [
+              createTextVNode(toDisplayString(shade.color), 1)
+            ])), [
+              [$setup["vTooltip"], shade.color.length > 23 ? shade.color : ""]
+            ]),
+            $setup.hover === shade.key ? (openBlock(), createBlock($setup["HstCopyIcon"], {
+              key: 0,
+              content: shade.color,
+              class: "htw-flex-none"
+            }, null, 8, ["content"])) : createCommentVNode("v-if", true)
+          ])
+        ])
+      ], 40, _hoisted_2);
+    }), 128))
+  ])) : createCommentVNode("v-if", true);
+}
 _sfc_main$1.__file = "src/components/design-tokens/HstColorShades.vue";
-var HstColorShades = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/design-tokens/HstColorShades.vue"]]);
+var HstColorShades = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/design-tokens/HstColorShades.vue"]]);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   name: "HstColorShades.story",
-  setup(__props) {
+  setup(__props, { expose }) {
+    expose();
     const colors = {
       slate: {
         50: "#f8fafc",
@@ -397,136 +402,139 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         900: "#881337"
       }
     };
-    return (_ctx, _cache) => {
-      const _component_Variant = resolveComponent("Variant");
-      const _component_HstText = resolveComponent("HstText");
-      const _component_Story = resolveComponent("Story");
-      return openBlock(), createBlock(_component_Story, {
-        title: "design-tokens/HstColorShades",
-        "responsive-disabled": ""
+    const __returned__ = { colors, HstColorShades };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Variant = resolveComponent("Variant");
+  const _component_HstText = resolveComponent("HstText");
+  const _component_Story = resolveComponent("Story");
+  return openBlock(), createBlock(_component_Story, {
+    title: "design-tokens/HstColorShades",
+    "responsive-disabled": ""
+  }, {
+    default: withCtx(() => [
+      createVNode(_component_Variant, { title: "default" }, {
+        default: withCtx(() => [
+          (openBlock(), createElementBlock(Fragment, null, renderList($setup.colors, (shades, key) => {
+            return createVNode($setup["HstColorShades"], {
+              key,
+              shades,
+              "get-name": (shade) => `${key}-${shade}`
+            }, null, 8, ["shades", "get-name"]);
+          }), 64))
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, { title: "background" }, {
+        default: withCtx(() => [
+          (openBlock(), createElementBlock(Fragment, null, renderList($setup.colors, (shades, key) => {
+            return createVNode($setup["HstColorShades"], {
+              key,
+              shades,
+              "get-name": (shade) => `${key}-${shade}`
+            }, {
+              default: withCtx(({ color }) => [
+                createBaseVNode("div", {
+                  class: "htw-rounded htw-h-[100px]",
+                  style: normalizeStyle({
+                    backgroundColor: color
+                  })
+                }, null, 4)
+              ]),
+              _: 2
+            }, 1032, ["shades", "get-name"]);
+          }), 64))
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, { title: "text" }, {
+        default: withCtx(() => [
+          (openBlock(), createElementBlock(Fragment, null, renderList($setup.colors, (shades, key) => {
+            return createVNode($setup["HstColorShades"], {
+              key,
+              shades,
+              "get-name": (shade) => `${key}-${shade}`
+            }, {
+              default: withCtx(({ color }) => [
+                createBaseVNode("div", {
+                  class: "htw-rounded htw-h-[100px] htw-text-5xl htw-flex htw-items-end",
+                  style: normalizeStyle({
+                    color
+                  })
+                }, " Aa ", 4)
+              ]),
+              _: 2
+            }, 1032, ["shades", "get-name"]);
+          }), 64))
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, { title: "border" }, {
+        default: withCtx(() => [
+          (openBlock(), createElementBlock(Fragment, null, renderList($setup.colors, (shades, key) => {
+            return createVNode($setup["HstColorShades"], {
+              key,
+              shades,
+              "get-name": (shade) => `${key}-${shade}`
+            }, {
+              default: withCtx(({ color }) => [
+                createBaseVNode("div", {
+                  class: "htw-rounded htw-h-[100px] htw-border-solid htw-border-2",
+                  style: normalizeStyle({
+                    borderColor: color
+                  })
+                }, null, 4)
+              ]),
+              _: 2
+            }, 1032, ["shades", "get-name"]);
+          }), 64))
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        title: "with search",
+        "init-state": () => ({
+          search: ""
+        })
       }, {
+        default: withCtx(({ state }) => [
+          (openBlock(), createElementBlock(Fragment, null, renderList($setup.colors, (shades, key) => {
+            return createVNode($setup["HstColorShades"], {
+              key,
+              shades,
+              "get-name": (shade) => `${key}-${shade}`,
+              search: state.search
+            }, null, 8, ["shades", "get-name", "search"]);
+          }), 64))
+        ]),
+        controls: withCtx(({ state }) => [
+          createVNode(_component_HstText, {
+            modelValue: state.search,
+            "onUpdate:modelValue": ($event) => state.search = $event,
+            title: "Filter colors..."
+          }, null, 8, ["modelValue", "onUpdate:modelValue"])
+        ]),
+        _: 1
+      }, 8, ["init-state"]),
+      createVNode(_component_Variant, { title: "long names" }, {
         default: withCtx(() => [
-          createVNode(_component_Variant, { title: "default" }, {
-            default: withCtx(() => [
-              (openBlock(), createElementBlock(Fragment, null, renderList(colors, (shades, key) => {
-                return createVNode(HstColorShades, {
-                  key,
-                  shades,
-                  "get-name": (shade) => `${key}-${shade}`
-                }, null, 8, ["shades", "get-name"]);
-              }), 64))
-            ]),
-            _: 1
-          }),
-          createVNode(_component_Variant, { title: "background" }, {
-            default: withCtx(() => [
-              (openBlock(), createElementBlock(Fragment, null, renderList(colors, (shades, key) => {
-                return createVNode(HstColorShades, {
-                  key,
-                  shades,
-                  "get-name": (shade) => `${key}-${shade}`
-                }, {
-                  default: withCtx(({ color }) => [
-                    createBaseVNode("div", {
-                      class: "htw-rounded htw-h-[100px]",
-                      style: normalizeStyle({
-                        backgroundColor: color
-                      })
-                    }, null, 4)
-                  ]),
-                  _: 2
-                }, 1032, ["shades", "get-name"]);
-              }), 64))
-            ]),
-            _: 1
-          }),
-          createVNode(_component_Variant, { title: "text" }, {
-            default: withCtx(() => [
-              (openBlock(), createElementBlock(Fragment, null, renderList(colors, (shades, key) => {
-                return createVNode(HstColorShades, {
-                  key,
-                  shades,
-                  "get-name": (shade) => `${key}-${shade}`
-                }, {
-                  default: withCtx(({ color }) => [
-                    createBaseVNode("div", {
-                      class: "htw-rounded htw-h-[100px] htw-text-5xl htw-flex htw-items-end",
-                      style: normalizeStyle({
-                        color
-                      })
-                    }, " Aa ", 4)
-                  ]),
-                  _: 2
-                }, 1032, ["shades", "get-name"]);
-              }), 64))
-            ]),
-            _: 1
-          }),
-          createVNode(_component_Variant, { title: "border" }, {
-            default: withCtx(() => [
-              (openBlock(), createElementBlock(Fragment, null, renderList(colors, (shades, key) => {
-                return createVNode(HstColorShades, {
-                  key,
-                  shades,
-                  "get-name": (shade) => `${key}-${shade}`
-                }, {
-                  default: withCtx(({ color }) => [
-                    createBaseVNode("div", {
-                      class: "htw-rounded htw-h-[100px] htw-border-solid htw-border-2",
-                      style: normalizeStyle({
-                        borderColor: color
-                      })
-                    }, null, 4)
-                  ]),
-                  _: 2
-                }, 1032, ["shades", "get-name"]);
-              }), 64))
-            ]),
-            _: 1
-          }),
-          createVNode(_component_Variant, {
-            title: "with search",
-            "init-state": () => ({
-              search: ""
-            })
-          }, {
-            default: withCtx(({ state }) => [
-              (openBlock(), createElementBlock(Fragment, null, renderList(colors, (shades, key) => {
-                return createVNode(HstColorShades, {
-                  key,
-                  shades,
-                  "get-name": (shade) => `${key}-${shade}`,
-                  search: state.search
-                }, null, 8, ["shades", "get-name", "search"]);
-              }), 64))
-            ]),
-            controls: withCtx(({ state }) => [
-              createVNode(_component_HstText, {
-                modelValue: state.search,
-                "onUpdate:modelValue": ($event) => state.search = $event,
-                title: "Filter colors..."
-              }, null, 8, ["modelValue", "onUpdate:modelValue"])
-            ]),
-            _: 1
-          }, 8, ["init-state"]),
-          createVNode(_component_Variant, { title: "long names" }, {
-            default: withCtx(() => [
-              (openBlock(), createElementBlock(Fragment, null, renderList(colors, (shades, key) => {
-                return createVNode(HstColorShades, {
-                  key,
-                  shades,
-                  "get-name": (shade) => `${"'very-".repeat(5)}long-${key}-${shade}`
-                }, null, 8, ["shades", "get-name"]);
-              }), 64))
-            ]),
-            _: 1
-          })
+          (openBlock(), createElementBlock(Fragment, null, renderList($setup.colors, (shades, key) => {
+            return createVNode($setup["HstColorShades"], {
+              key,
+              shades,
+              "get-name": (shade) => `${"'very-".repeat(5)}long-${key}-${shade}`
+            }, null, 8, ["shades", "get-name"]);
+          }), 64))
         ]),
         _: 1
-      });
-    };
-  }
-});
+      })
+    ]),
+    _: 1
+  });
+}
 _sfc_main.__file = "src/components/design-tokens/HstColorShades.story.vue";
-var HstColorShades_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/design-tokens/HstColorShades.story.vue"]]);
+var HstColorShades_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/design-tokens/HstColorShades.story.vue"]]);
 export { HstColorShades_story as default };

package/.histoire/dist/assets/{HstCopyIcon.e40e725e.js → HstCopyIcon.ef403c78.js} RENAMED Viewed

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { d as defineComponent, az as useClipboard, M as withDirectives, i as unref, ay as VTooltip, a as openBlock, j as createBlock, I as Icon, ax as _export_sfc } from "./vendor.2833ae3d.js";
+import { d as defineComponent, az as useClipboard, I as Icon, ay as VTooltip, ax as _export_sfc, M as withDirectives, a as openBlock, j as createBlock } from "./vendor.31c91490.js";
 const __default__ = {
   name: "HstCopyIcon"
 };
@@ -25,27 +25,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
   props: {
     content: { type: String, required: true }
   },
-  setup(__props) {
+  setup(__props, { expose }) {
+    expose();
     const props = __props;
     const { copy, copied } = useClipboard();
     const action = () => copy(props.content);
-    return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createBlock(unref(Icon), {
-        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: _cache[0] || (_cache[0] = ($event) => action())
-      }, null, 512)), [
-        [unref(VTooltip), {
-          content: "Copied!",
-          triggers: [],
-          shown: unref(copied),
-          distance: 12,
-          delay: 0
-        }]
-      ]);
-    };
+    const __returned__ = { props, copy, copied, action, Icon, vTooltip: VTooltip };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 }));
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return withDirectives((openBlock(), createBlock($setup["Icon"], {
+    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: _cache[0] || (_cache[0] = ($event) => $setup.action())
+  }, null, 512)), [
+    [$setup["vTooltip"], {
+      content: "Copied!",
+      triggers: [],
+      shown: $setup.copied,
+      distance: 12,
+      delay: 0
+    }]
+  ]);
+}
 _sfc_main.__file = "src/components/HstCopyIcon.vue";
-var HstCopyIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/HstCopyIcon.vue"]]);
+var HstCopyIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/HstCopyIcon.vue"]]);
 export { HstCopyIcon as H };