@histoire/controls 0.7.4 → 0.7.7

package/.histoire/dist/assets/HstNumber.story.1e0e7b71.js

@@ -0,0 +1,165 @@
+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, c as computed, r as ref, o as onUnmounted, ax as _export_sfc, a as openBlock, j as createBlock, k as withCtx, f as renderSlot, M as withDirectives, Z as vModelText, e as createBaseVNode, x as mergeProps, n as normalizeClass, h as normalizeStyle, q as resolveComponent, l as createVNode } from "./vendor.31c91490.js";
+import { H as HstWrapper } from "./HstWrapper.fee42109.js";
+const __default__ = {
+  name: "HstNumber",
+  inheritAttrs: false
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  props: {
+    title: { type: String, required: false },
+    modelValue: { type: Number, required: true }
+  },
+  emits: {
+    "update:modelValue": (newValue) => true
+  },
+  setup(__props, { expose, emit }) {
+    expose();
+    const props = __props;
+    const numberModel = computed({
+      get: () => props.modelValue,
+      set: (value) => {
+        emit("update:modelValue", value);
+      }
+    });
+    const input = ref();
+    function focusAndSelect() {
+      input.value.focus();
+      input.value.select();
+    }
+    const isDragging = ref(false);
+    let startX;
+    let startValue;
+    function onMouseDown(event) {
+      isDragging.value = true;
+      startX = event.clientX;
+      startValue = numberModel.value;
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", stopDragging);
+    }
+    function onMouseMove(event) {
+      let step = parseFloat(input.value.step);
+      if (isNaN(step)) {
+        step = 1;
+      }
+      numberModel.value = startValue + Math.round((event.clientX - startX) / 10 / step) * step;
+    }
+    function stopDragging() {
+      isDragging.value = false;
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", stopDragging);
+    }
+    onUnmounted(() => {
+      stopDragging();
+    });
+    const __returned__ = { props, emit, numberModel, input, focusAndSelect, isDragging, startX, startValue, onMouseDown, onMouseMove, stopDragging, HstWrapper };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+}));
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock($setup["HstWrapper"], {
+    class: normalizeClass(["htw-cursor-ew-resize htw-items-center", [
+      _ctx.$attrs.class,
+      { "htw-select-none": $setup.isDragging }
+    ]]),
+    title: $props.title,
+    style: normalizeStyle(_ctx.$attrs.style),
+    onClick: $setup.focusAndSelect,
+    onMousedown: $setup.onMouseDown
+  }, {
+    actions: withCtx(() => [
+      renderSlot(_ctx.$slots, "actions")
+    ]),
+    default: withCtx(() => [
+      withDirectives(createBaseVNode("input", mergeProps({ ref: "input" }, __spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.numberModel = $event),
+        type: "number",
+        class: [{
+          "htw-select-none": $setup.isDragging
+        }, "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"]
+      }), null, 16), [
+        [
+          vModelText,
+          $setup.numberModel,
+          void 0,
+          { number: true }
+        ]
+      ])
+    ]),
+    _: 3
+  }, 8, ["title", "class", "style"]);
+}
+_sfc_main$1.__file = "src/components/number/HstNumber.vue";
+var HstNumber = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/number/HstNumber.vue"]]);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  name: "HstNumber.story",
+  setup(__props, { expose }) {
+    expose();
+    function initState() {
+      return {
+        count: 20,
+        step: 1
+      };
+    }
+    const __returned__ = { initState, HstNumber };
+    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: "HstNumber" }, {
+    default: withCtx(() => [
+      createVNode(_component_Variant, {
+        title: "default",
+        "init-state": $setup.initState
+      }, {
+        default: withCtx(({ state }) => [
+          createVNode($setup["HstNumber"], {
+            modelValue: state.count,
+            "onUpdate:modelValue": ($event) => state.count = $event,
+            step: state.step,
+            title: "Count"
+          }, null, 8, ["modelValue", "onUpdate:modelValue", "step"])
+        ]),
+        controls: withCtx(({ state }) => [
+          createVNode($setup["HstNumber"], {
+            modelValue: state.count,
+            "onUpdate:modelValue": ($event) => state.count = $event,
+            title: "Count"
+          }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+          createVNode($setup["HstNumber"], {
+            modelValue: state.step,
+            "onUpdate:modelValue": ($event) => state.step = $event,
+            title: "Step"
+          }, null, 8, ["modelValue", "onUpdate:modelValue"])
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+_sfc_main.__file = "src/components/number/HstNumber.story.vue";
+var HstNumber_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/number/HstNumber.story.vue"]]);
+export { HstNumber_story as default };

package/.histoire/dist/assets/HstSelect.story.8a2b4741.js

@@ -0,0 +1,290 @@
+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, c as computed, as as Dropdown, I as Icon, ax as _export_sfc, a as openBlock, j as createBlock, k as withCtx, e as createBaseVNode, b as createElementBlock, J as renderList, x as mergeProps, t as toDisplayString, F as Fragment, f as renderSlot, R as createTextVNode, l as createVNode, r as ref, n as normalizeClass, h as normalizeStyle, q as resolveComponent } from "./vendor.31c91490.js";
+import { H as HstWrapper } from "./HstWrapper.fee42109.js";
+var CustomSelect_vue_vue_type_style_index_0_lang = "";
+const __default__$1 = {
+  name: "CustomSelect"
+};
+const _sfc_main$2 = defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
+  props: {
+    modelValue: { type: String, required: true },
+    options: { type: [Object, Array], required: true }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose, emit: emits }) {
+    expose();
+    const props = __props;
+    const formattedOptions = computed(() => {
+      if (Array.isArray(props.options)) {
+        return Object.fromEntries(props.options.map((value) => {
+          if (typeof value === "string") {
+            return [value, value];
+          } else {
+            return [value.value, value.label];
+          }
+        }));
+      }
+      return props.options;
+    });
+    const selectedLabel = computed(() => formattedOptions.value[props.modelValue]);
+    function selectValue(value, hide) {
+      emits("update:modelValue", value);
+      hide();
+    }
+    const __returned__ = { props, emits, formattedOptions, selectedLabel, selectValue, VDropdown: Dropdown, Icon };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+}));
+const _hoisted_1$1 = { 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" };
+const _hoisted_2$1 = { class: "htw-flex-1 htw-truncate" };
+const _hoisted_3 = { class: "htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700" };
+const _hoisted_4 = ["onClick"];
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock($setup["VDropdown"], { "auto-size": "" }, {
+    popper: withCtx(({ hide }) => [
+      createBaseVNode("div", _hoisted_3, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList($setup.formattedOptions, (label, value) => {
+          return openBlock(), createElementBlock("div", mergeProps(__spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
+            key: label,
+            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": $setup.props.modelValue === value
+            }],
+            onClick: ($event) => $setup.selectValue(value, hide)
+          }), toDisplayString(label), 17, _hoisted_4);
+        }), 128))
+      ])
+    ]),
+    default: withCtx(() => [
+      createBaseVNode("div", _hoisted_1$1, [
+        createBaseVNode("div", _hoisted_2$1, [
+          renderSlot(_ctx.$slots, "default", { label: $setup.selectedLabel }, () => [
+            createTextVNode(toDisplayString($setup.selectedLabel), 1)
+          ])
+        ]),
+        createVNode($setup["Icon"], {
+          icon: "carbon:chevron-sort",
+          class: "htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
+        })
+      ])
+    ]),
+    _: 3
+  });
+}
+_sfc_main$2.__file = "src/components/select/CustomSelect.vue";
+var CustomSelect = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/select/CustomSelect.vue"]]);
+const __default__ = {
+  name: "HstSelect"
+};
+const _sfc_main$1 = defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  props: {
+    title: { type: String, required: false },
+    modelValue: { type: String, required: true },
+    options: { type: [Object, Array], required: true }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose, emit: emits }) {
+    expose();
+    const props = __props;
+    const select = ref();
+    const __returned__ = { props, emits, select, HstWrapper, CustomSelect };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+}));
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock($setup["HstWrapper"], {
+    title: $props.title,
+    class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
+    style: normalizeStyle(_ctx.$attrs.style)
+  }, {
+    actions: withCtx(() => [
+      renderSlot(_ctx.$slots, "actions")
+    ]),
+    default: withCtx(() => [
+      createVNode($setup["CustomSelect"], {
+        options: $props.options,
+        "model-value": $props.modelValue,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.emits("update:modelValue", $event))
+      }, null, 8, ["options", "model-value"])
+    ]),
+    _: 3
+  }, 8, ["title", "class", "style"]);
+}
+_sfc_main$1.__file = "src/components/select/HstSelect.vue";
+var HstSelect = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/select/HstSelect.vue"]]);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  name: "HstSelect.story",
+  setup(__props, { expose }) {
+    expose();
+    const options = {
+      "crash-bandicoot": "Crash Bandicoot",
+      "the-last-of-us": "The Last of Us",
+      "ghost-of-tsushima": "Ghost of Tsushima"
+    };
+    const flatOptions = Object.keys(options);
+    const objectOptions = Object.keys(options).map((key) => ({
+      label: options[key],
+      value: key
+    }));
+    function initState() {
+      return {
+        label: "My really long label",
+        select: "crash-bandicoot"
+      };
+    }
+    const __returned__ = { options, flatOptions, objectOptions, initState, HstSelect };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+const _hoisted_1 = { class: "htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4" };
+const _hoisted_2 = { class: "htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4" };
+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: "HstSelect",
+    layout: {
+      type: "grid",
+      width: "100%"
+    }
+  }, {
+    default: withCtx(() => [
+      createVNode(_component_Variant, {
+        title: "default",
+        "init-state": $setup.initState
+      }, {
+        default: withCtx(({ state }) => [
+          createVNode($setup["HstSelect"], {
+            modelValue: state.select,
+            "onUpdate:modelValue": ($event) => state.select = $event,
+            title: state.label,
+            options: $setup.options
+          }, null, 8, ["modelValue", "onUpdate:modelValue", "title"])
+        ]),
+        controls: withCtx(({ state }) => [
+          createVNode($setup["HstSelect"], {
+            modelValue: state.select,
+            "onUpdate:modelValue": ($event) => state.select = $event,
+            title: "Select",
+            options: $setup.options
+          }, null, 8, ["modelValue", "onUpdate:modelValue"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        title: "no-label",
+        "init-state": $setup.initState
+      }, {
+        default: withCtx(({ state }) => [
+          createVNode($setup["HstSelect"], {
+            modelValue: state.select,
+            "onUpdate:modelValue": ($event) => state.select = $event,
+            options: $setup.options
+          }, null, 8, ["modelValue", "onUpdate:modelValue"])
+        ]),
+        controls: withCtx(({ state }) => [
+          createVNode($setup["HstSelect"], {
+            modelValue: state.select,
+            "onUpdate:modelValue": ($event) => state.select = $event,
+            title: "Select",
+            options: $setup.options
+          }, null, 8, ["modelValue", "onUpdate:modelValue"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        title: "options-as-object",
+        "init-state": $setup.initState
+      }, {
+        default: withCtx(({ state }) => [
+          createBaseVNode("pre", { class: "htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4" }, toDisplayString($setup.options)),
+          createVNode($setup["HstSelect"], {
+            modelValue: state.select,
+            "onUpdate:modelValue": ($event) => state.select = $event,
+            title: "Games",
+            options: $setup.options
+          }, null, 8, ["modelValue", "onUpdate:modelValue"])
+        ]),
+        controls: withCtx(({ state }) => [
+          createVNode($setup["HstSelect"], {
+            modelValue: state.select,
+            "onUpdate:modelValue": ($event) => state.select = $event,
+            title: "Games",
+            options: $setup.options
+          }, null, 8, ["modelValue", "onUpdate:modelValue"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        title: "options-as-array-of-objects",
+        "init-state": $setup.initState
+      }, {
+        default: withCtx(({ state }) => [
+          createBaseVNode("pre", _hoisted_1, toDisplayString($setup.objectOptions), 1),
+          createVNode($setup["HstSelect"], {
+            modelValue: state.select,
+            "onUpdate:modelValue": ($event) => state.select = $event,
+            title: "Games",
+            options: $setup.objectOptions
+          }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
+        ]),
+        controls: withCtx(({ state }) => [
+          createVNode($setup["HstSelect"], {
+            modelValue: state.select,
+            "onUpdate:modelValue": ($event) => state.select = $event,
+            title: "Games",
+            options: $setup.objectOptions
+          }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
+        ]),
+        _: 1
+      }),
+      createVNode(_component_Variant, {
+        title: "options-as-array-of-strings",
+        "init-state": $setup.initState
+      }, {
+        default: withCtx(({ state }) => [
+          createBaseVNode("pre", _hoisted_2, toDisplayString($setup.flatOptions), 1),
+          createVNode($setup["HstSelect"], {
+            modelValue: state.select,
+            "onUpdate:modelValue": ($event) => state.select = $event,
+            title: "Select",
+            options: $setup.flatOptions
+          }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
+        ]),
+        controls: withCtx(({ state }) => [
+          createVNode($setup["HstSelect"], {
+            modelValue: state.select,
+            "onUpdate:modelValue": ($event) => state.select = $event,
+            title: "Select",
+            options: $setup.flatOptions
+          }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+_sfc_main.__file = "src/components/select/HstSelect.story.vue";
+var HstSelect_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/select/HstSelect.story.vue"]]);
+export { HstSelect_story as default };

package/.histoire/dist/assets/HstSlider.story.4155f6ba.js

@@ -0,0 +1,153 @@
+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, ax as _export_sfc, ay as VTooltip, a as openBlock, j as createBlock, k as withCtx, e as createBaseVNode, M as withDirectives, Z as vModelText, x as mergeProps, b as createElementBlock, h as normalizeStyle, m as createCommentVNode, n as normalizeClass, S as reactive, q as resolveComponent, l as createVNode, t as toDisplayString } from "./vendor.31c91490.js";
+import { H as HstWrapper } from "./HstWrapper.fee42109.js";
+var HstSlider_vue_vue_type_style_index_0_lang = "";
+const __default__ = {
+  name: "HstSlider",
+  inheritAttrs: false
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  props: {
+    title: { type: String, required: false },
+    modelValue: { type: Number, required: true },
+    min: { type: Number, required: true },
+    max: { type: Number, required: true }
+  },
+  emits: {
+    "update:modelValue": (newValue) => true
+  },
+  setup(__props, { expose, emit }) {
+    expose();
+    const props = __props;
+    const showTooltip = ref(false);
+    const input = ref(null);
+    const numberModel = computed({
+      get: () => props.modelValue,
+      set: (value) => {
+        emit("update:modelValue", value);
+      }
+    });
+    const percentage = computed(() => {
+      return (props.modelValue - props.min) / (props.max - props.min);
+    });
+    const tooltipStyle = computed(() => {
+      const gap = 8;
+      if (input.value) {
+        const position = gap + (input.value.clientWidth - 2 * gap) * percentage.value;
+        return {
+          left: position + "px"
+        };
+      }
+      return {};
+    });
+    const __returned__ = { props, emit, showTooltip, input, numberModel, percentage, tooltipStyle, HstWrapper, vTooltip: VTooltip };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+}));
+const _hoisted_1 = { class: "htw-relative htw-w-full htw-flex htw-items-center" };
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("div", { class: "htw-absolute htw-inset-0 htw-flex htw-items-center" }, [
+  /* @__PURE__ */ createBaseVNode("div", { class: "htw-border htw-border-black/25 dark:htw-border-white/25 htw-h-1 htw-w-full htw-rounded-full" })
+], -1);
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock($setup["HstWrapper"], {
+    class: normalizeClass(["htw-items-center", _ctx.$attrs.class]),
+    title: $props.title,
+    style: normalizeStyle(_ctx.$attrs.style)
+  }, {
+    default: withCtx(() => [
+      createBaseVNode("div", _hoisted_1, [
+        _hoisted_2,
+        withDirectives(createBaseVNode("input", mergeProps({
+          ref: "input",
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.numberModel = $event),
+          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"
+        }, __spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
+          onMouseover: _cache[1] || (_cache[1] = ($event) => $setup.showTooltip = true),
+          onMouseleave: _cache[2] || (_cache[2] = ($event) => $setup.showTooltip = false)
+        }), null, 16), [
+          [
+            vModelText,
+            $setup.numberModel,
+            void 0,
+            { number: true }
+          ]
+        ]),
+        $setup.showTooltip ? withDirectives((openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "htw-absolute",
+          style: normalizeStyle($setup.tooltipStyle)
+        }, null, 4)), [
+          [$setup["vTooltip"], { content: $props.modelValue.toString(), shown: true, distance: 16, delay: 0 }]
+        ]) : createCommentVNode("v-if", true)
+      ])
+    ]),
+    _: 1
+  }, 8, ["title", "class", "style"]);
+}
+_sfc_main$1.__file = "src/components/slider/HstSlider.vue";
+var HstSlider = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/slider/HstSlider.vue"]]);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  name: "HstSlider.story",
+  setup(__props, { expose }) {
+    expose();
+    const state = reactive({
+      value: 20,
+      min: 0,
+      max: 100,
+      step: 5
+    });
+    const __returned__ = { state, HstSlider };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Story = resolveComponent("Story");
+  return openBlock(), createBlock(_component_Story, { title: "HstSlider" }, {
+    controls: withCtx(() => [
+      createVNode($setup["HstSlider"], {
+        modelValue: $setup.state.value,
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $setup.state.value = $event),
+        step: $setup.state.step,
+        min: $setup.state.min,
+        max: $setup.state.max,
+        title: "Value"
+      }, null, 8, ["modelValue", "step", "min", "max"])
+    ]),
+    default: withCtx(() => [
+      createVNode($setup["HstSlider"], {
+        modelValue: $setup.state.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.state.value = $event),
+        step: $setup.state.step,
+        min: $setup.state.min,
+        max: $setup.state.max,
+        title: "Slide"
+      }, null, 8, ["modelValue", "step", "min", "max"]),
+      createBaseVNode("pre", null, toDisplayString($setup.state), 1)
+    ]),
+    _: 1
+  });
+}
+_sfc_main.__file = "src/components/slider/HstSlider.story.vue";
+var HstSlider_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/akryum/Projects/histoire/packages/histoire-controls/src/components/slider/HstSlider.story.vue"]]);
+export { HstSlider_story as default };