@histoire/controls 0.4.4 → 0.5.0

package/dist/index.es.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { pushScopeId, popScopeId, defineComponent, nextTick, openBlock, createBlock, withScopeId, resolveComponent, createElementBlock, normalizeClass, normalizeStyle, withKeys, createElementVNode, Fragment, renderSlot, createCommentVNode, mergeProps, withCtx, createVNode, ref, createApp, h, toDisplayString, withDirectives, createTextVNode, unref, computed, watch, withModifiers, onUnmounted, isRef, vModelText, renderList, getCurrentScope, onScopeDispose } from "vue";
+import { defineComponent, pushScopeId, popScopeId, nextTick, openBlock, createBlock, createElementBlock, mergeProps, renderSlot, normalizeProps, guardReactiveProps, withScopeId, resolveComponent, normalizeClass, normalizeStyle, withKeys, createElementVNode, Fragment, createCommentVNode, withCtx, createVNode, ref, createApp, h, toDisplayString, withDirectives, createTextVNode, unref, computed, watch, withModifiers, onUnmounted, isRef, vModelText, renderList, getCurrentScope, onScopeDispose } from "vue";
 function getBasePlacement(placement) {
   return placement.split("-")[0];
 }
@@ -1495,8 +1495,8 @@ var PrivatePopper = () => defineComponent({
       return (_a2 = this[PROVIDE_KEY]) == null ? void 0 : _a2.parentPopper;
     },
     hasPopperShowTriggerHover() {
-      var _a2, _b2;
-      return ((_a2 = this.popperTriggers) == null ? void 0 : _a2.includes("hover")) || ((_b2 = this.popperShowTriggers) == null ? void 0 : _b2.includes("hover"));
+      var _a2, _b;
+      return ((_a2 = this.popperTriggers) == null ? void 0 : _a2.includes("hover")) || ((_b = this.popperShowTriggers) == null ? void 0 : _b.includes("hover"));
     }
   },
   watch: __spreadValues2(__spreadValues2({
@@ -1561,12 +1561,12 @@ var PrivatePopper = () => defineComponent({
   },
   methods: {
     show({ event = null, skipDelay = false, force = false } = {}) {
-      var _a2, _b2;
+      var _a2, _b;
       if (((_a2 = this.parentPopper) == null ? void 0 : _a2.lockedChild) && this.parentPopper.lockedChild !== this)
         return;
       this.$_pendingHide = false;
       if (force || !this.disabled) {
-        if (((_b2 = this.parentPopper) == null ? void 0 : _b2.lockedChild) === this) {
+        if (((_b = this.parentPopper) == null ? void 0 : _b.lockedChild) === this) {
           this.parentPopper.lockedChild = null;
         }
         this.$_scheduleShow(event, skipDelay);
@@ -2164,6 +2164,29 @@ function lineIntersectsLine(x1, y1, x2, y2, x3, y3, x4, y4) {
   const uB = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
   return uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1;
 }
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$6$1 = {
+  extends: PrivatePopper()
+};
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "reference",
+    class: "v-popper"
+  }, _ctx.$attrs, {
+    class: {
+      "v-popper--shown": _ctx.slotData.isShown
+    }
+  }), [
+    renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(_ctx.slotData)))
+  ], 16);
+}
+var Popper$1 = /* @__PURE__ */ _export_sfc(_sfc_main$6$1, [["render", _sfc_render$3]]);
 function getInternetExplorerVersion() {
   var ua = window.navigator.userAgent;
   var msie = ua.indexOf("MSIE ");
@@ -2283,13 +2306,6 @@ var PrivateThemeClass = (prop = "theme") => ({
     }
   }
 });
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
 const _sfc_main$5$1 = defineComponent({
   name: "VPopperContent",
   components: {
@@ -2327,11 +2343,11 @@ const _hoisted_2$1$1 = {
   ref: "inner",
   class: "v-popper__inner"
 };
-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_3$6 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-outer" }, null, -1);
+const _hoisted_4$5 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-inner" }, null, -1);
 const _hoisted_5$3 = [
-  _hoisted_3$5,
-  _hoisted_4$3
+  _hoisted_3$6,
+  _hoisted_4$5
 ];
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ResizeObserver = resolveComponent("ResizeObserver");
@@ -2414,14 +2430,13 @@ var PrivatePopperMethods = {
 const _sfc_main$4$1 = defineComponent({
   name: "VPopperWrapper",
   components: {
-    Popper: PrivatePopper(),
+    Popper: Popper$1,
     PopperContent: PrivatePopperContent
   },
   mixins: [
     PrivatePopperMethods,
     PrivateThemeClass("finalTheme")
   ],
-  inheritAttrs: false,
   props: {
     theme: {
       type: String,
@@ -2432,29 +2447,27 @@ const _sfc_main$4$1 = defineComponent({
     finalTheme() {
       var _a2;
       return (_a2 = this.theme) != null ? _a2 : this.$options.vPopperTheme;
-    },
-    popperAttrs() {
-      const result = __spreadValues2({}, this.$attrs);
-      delete result.class;
-      delete result.style;
-      return result;
     }
   },
   methods: {
     getTargetNodes() {
-      return Array.from(this.$refs.reference.children).filter((node) => node !== this.$refs.popperContent.$el);
+      return Array.from(this.$refs.popper.$el.children).filter((node) => node !== this.$refs.popperContent.$el);
     }
   }
 });
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PopperContent = resolveComponent("PopperContent");
   const _component_Popper = resolveComponent("Popper");
-  return openBlock(), createBlock(_component_Popper, mergeProps({ ref: "popper" }, _ctx.popperAttrs, {
+  return openBlock(), createBlock(_component_Popper, {
+    ref: "popper",
     theme: _ctx.finalTheme,
     "target-nodes": _ctx.getTargetNodes,
-    "reference-node": () => _ctx.$refs.reference,
-    "popper-node": () => _ctx.$refs.popperContent.$el
-  }), {
+    "reference-node": () => _ctx.$refs.popper.$el,
+    "popper-node": () => _ctx.$refs.popperContent.$el,
+    class: normalizeClass([
+      _ctx.themeClass
+    ])
+  }, {
     default: withCtx(({
       popperId,
       isShown,
@@ -2466,56 +2479,41 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       handleResize,
       onResize,
       classes,
-      result,
-      attrs
+      result
     }) => [
-      createElementVNode("div", mergeProps({
-        ref: "reference",
-        class: "v-popper"
-      }, attrs, {
-        class: [
-          _ctx.$attrs.class,
-          _ctx.themeClass,
-          {
-            "v-popper--shown": isShown
-          }
-        ],
-        style: _ctx.$attrs.style
-      }), [
-        renderSlot(_ctx.$slots, "default", {
-          shown: isShown,
-          show,
-          hide
-        }),
-        createVNode(_component_PopperContent, {
-          ref: "popperContent",
-          "popper-id": popperId,
-          theme: _ctx.finalTheme,
-          shown: isShown,
-          mounted: shouldMountContent,
-          "skip-transition": skipTransition,
-          "auto-hide": autoHide,
-          "handle-resize": handleResize,
-          classes,
-          result,
-          onHide: hide,
-          onResize
-        }, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "popper", {
-              shown: isShown,
-              hide
-            })
-          ]),
-          _: 2
-        }, 1032, ["popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"])
-      ], 16)
+      renderSlot(_ctx.$slots, "default", {
+        shown: isShown,
+        show,
+        hide
+      }),
+      createVNode(_component_PopperContent, {
+        ref: "popperContent",
+        "popper-id": popperId,
+        theme: _ctx.finalTheme,
+        shown: isShown,
+        mounted: shouldMountContent,
+        "skip-transition": skipTransition,
+        "auto-hide": autoHide,
+        "handle-resize": handleResize,
+        classes,
+        result,
+        onHide: hide,
+        onResize
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "popper", {
+            shown: isShown,
+            hide
+          })
+        ]),
+        _: 2
+      }, 1032, ["popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"])
     ]),
     _: 3
-  }, 16, ["theme", "target-nodes", "reference-node", "popper-node"]);
+  }, 8, ["theme", "target-nodes", "reference-node", "popper-node", "class"]);
 }
 var PrivatePopperWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$4$1, [["render", _sfc_render$1]]);
-defineComponent(__spreadProps2(__spreadValues2({}, PrivatePopperWrapper), {
+const _sfc_main$3$1 = defineComponent(__spreadProps2(__spreadValues2({}, PrivatePopperWrapper), {
   name: "VDropdown",
   vPopperTheme: "dropdown"
 }));
@@ -2527,7 +2525,7 @@ defineComponent(__spreadProps2(__spreadValues2({}, PrivatePopperWrapper), {
   name: "VTooltip",
   vPopperTheme: "tooltip"
 }));
-const _sfc_main$a = defineComponent({
+const _sfc_main$b = defineComponent({
   name: "VTooltipDirective",
   components: {
     Popper: PrivatePopper(),
@@ -2673,7 +2671,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 16, ["theme", "popper-node", "onApplyShow", "onApplyHide"]);
 }
-var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render]]);
+var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render]]);
 const TARGET_CLASS = "v-popper--has-tooltip";
 function getPlacement(options2, modifiers) {
   let result = options2.placement;
@@ -2798,13 +2796,15 @@ var PrivateVTooltip = {
   }
 };
 const VTooltip = PrivateVTooltip;
+const Dropdown = _sfc_main$3$1;
 const _hoisted_1$7 = { 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$5 = { 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__$9 = {
+const _hoisted_3$5 = { class: "htw-grow htw-flex htw-items-center htw-gap-1" };
+const _hoisted_4$4 = { class: "htw-block htw-grow" };
+const __default__$a = {
   name: "HstWrapper"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$9), {
+const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$a), {
   props: {
     title: null
   },
@@ -2820,8 +2820,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             distance: 12
           }]
         ]),
-        createElementVNode("span", _hoisted_3$4, [
-          renderSlot(_ctx.$slots, "default")
+        createElementVNode("span", _hoisted_3$5, [
+          createElementVNode("span", _hoisted_4$4, [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          renderSlot(_ctx.$slots, "actions")
         ])
       ]);
     };
@@ -2834,11 +2837,11 @@ const _hoisted_2$4 = {
   viewBox: "0 0 24 24",
   class: "htw-relative htw-z-10"
 };
-const _hoisted_3$3 = ["stroke-dasharray", "stroke-dashoffset"];
-const __default__$8 = {
+const _hoisted_3$4 = ["stroke-dasharray", "stroke-dashoffset"];
+const __default__$9 = {
   name: "HstCheckbox"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$8), {
+const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$9), {
   props: {
     modelValue: { type: Boolean },
     title: null
@@ -2858,11 +2861,11 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const dashoffset = computed(() => (1 - progress.value) * dasharray.value);
     const animationEnabled = ref(false);
     watch(path, (value) => {
-      var _a2, _b2, _c;
-      dasharray.value = (_c = (_b2 = (_a2 = path.value).getTotalLength) == null ? void 0 : _b2.call(_a2)) != null ? _c : 21.21;
+      var _a2, _b, _c;
+      dasharray.value = (_c = (_b = (_a2 = path.value).getTotalLength) == null ? void 0 : _b.call(_a2)) != null ? _c : 21.21;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$9, {
+      return openBlock(), createBlock(_sfc_main$a, {
         role: "checkbox",
         tabindex: "0",
         class: "htw-cursor-pointer htw-items-center",
@@ -2873,6 +2876,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
           _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["space"]))
         ]
       }, {
+        actions: withCtx(() => [
+          renderSlot(_ctx.$slots, "actions")
+        ]),
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$6, [
             createElementVNode("div", {
@@ -2894,20 +2900,20 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                 ]]),
                 "stroke-dasharray": dasharray.value,
                 "stroke-dashoffset": unref(dashoffset)
-              }, null, 10, _hoisted_3$3)
+              }, null, 10, _hoisted_3$4)
             ]))
           ])
         ]),
-        _: 1
+        _: 3
       }, 8, ["title"]);
     };
   }
 }));
 const _hoisted_1$5 = ["value"];
-const __default__$7 = {
+const __default__$8 = {
   name: "HstText"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$7), {
+const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$8), {
   props: {
     title: null,
     modelValue: null
@@ -2918,12 +2924,15 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   setup(__props, { emit }) {
     const input = ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$9, {
+      return openBlock(), createBlock(_sfc_main$a, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style),
         onClick: _cache[1] || (_cache[1] = ($event) => input.value.focus())
       }, {
+        actions: withCtx(() => [
+          renderSlot(_ctx.$slots, "actions")
+        ]),
         default: withCtx(() => [
           createElementVNode("input", mergeProps({
             ref_key: "input",
@@ -2935,16 +2944,16 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
           }), null, 16, _hoisted_1$5)
         ]),
-        _: 1
+        _: 3
       }, 8, ["title", "class", "style"]);
     };
   }
 }));
-const __default__$6 = {
+const __default__$7 = {
   name: "HstNumber",
   inheritAttrs: false
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$6), {
+const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$7), {
   props: {
     title: null,
     modelValue: null
@@ -2991,7 +3000,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       stopDragging();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$9, {
+      return openBlock(), createBlock(_sfc_main$a, {
         class: normalizeClass(["htw-cursor-ew-resize htw-items-center", [
           _ctx.$attrs.class,
           { "htw-select-none": isDragging.value }
@@ -3001,6 +3010,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         onClick: focusAndSelect,
         onMousedown: onMouseDown
       }, {
+        actions: withCtx(() => [
+          renderSlot(_ctx.$slots, "actions")
+        ]),
         default: withCtx(() => [
           withDirectives(createElementVNode("input", mergeProps({
             ref_key: "input",
@@ -3020,17 +3032,17 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             ]
           ])
         ]),
-        _: 1
+        _: 3
       }, 8, ["title", "class", "style"]);
     };
   }
 }));
 const _hoisted_1$4 = ["value"];
-const __default__$5 = {
+const __default__$6 = {
   name: "HstTextarea",
   inheritAttrs: false
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$5), {
+const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$6), {
   props: {
     title: null,
     modelValue: null
@@ -3041,12 +3053,15 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   setup(__props, { emit }) {
     const input = ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$9, {
+      return openBlock(), createBlock(_sfc_main$a, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style),
         onClick: _cache[1] || (_cache[1] = ($event) => input.value.focus())
       }, {
+        actions: withCtx(() => [
+          renderSlot(_ctx.$slots, "actions")
+        ]),
         default: withCtx(() => [
           createElementVNode("textarea", mergeProps({
             ref_key: "input",
@@ -3057,64 +3072,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
           }), null, 16, _hoisted_1$4)
         ]),
-        _: 1
-      }, 8, ["title", "class", "style"]);
-    };
-  }
-}));
-const _hoisted_1$3 = ["value"];
-const _hoisted_2$3 = ["value"];
-const __default__$4 = {
-  name: "HstSelect"
-};
-const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
-  props: {
-    title: {
-      type: String,
-      default: ""
-    },
-    modelValue: {
-      type: String,
-      default: null
-    },
-    options: {
-      type: Array,
-      required: true,
-      default: () => []
-    }
-  },
-  emits: {
-    "update:modelValue": (newValue) => true
-  },
-  setup(__props, { emit }) {
-    const props = __props;
-    const formattedOtions = computed(() => props.options.map((option) => typeof option === "string" ? { label: option, value: option } : option));
-    const select = ref();
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$9, {
-        title: __props.title,
-        class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
-        style: normalizeStyle(_ctx.$attrs.style),
-        onClick: _cache[1] || (_cache[1] = ($event) => select.value.focus())
-      }, {
-        default: withCtx(() => [
-          createElementVNode("select", {
-            ref_key: "select",
-            ref: select,
-            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",
-            value: __props.modelValue,
-            onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(formattedOtions), ({ label, value }) => {
-              return openBlock(), createElementBlock("option", mergeProps(__spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
-                key: label,
-                class: "dark:htw-bg-gray-600",
-                value
-              }), toDisplayString(label), 17, _hoisted_2$3);
-            }), 128))
-          ], 40, _hoisted_1$3)
-        ]),
-        _: 1
+        _: 3
       }, 8, ["title", "class", "style"]);
     };
   }
@@ -3204,7 +3162,7 @@ function mergeIconData(icon, alias) {
   }
   return result;
 }
-function getIconData$1(data, name, full = false) {
+function getIconData$1(data, name, full) {
   function getIcon(name2, iteration) {
     if (data.icons[name2] !== void 0) {
       return Object.assign({}, data.icons[name2]);
@@ -4046,7 +4004,7 @@ function storeCallback(callback, icons, pendingSources) {
   });
   return abort;
 }
-function listToIcons(list, validate = true, simpleNames2 = false) {
+function listToIcons(list, validate, simpleNames2 = false) {
   const result = [];
   list.forEach((item) => {
     const icon = typeof item === "string" ? stringToIcon(item, false, simpleNames2) : item;
@@ -4937,6 +4895,105 @@ const Icon = defineComponent({
     return render(icon.data, newProps);
   }
 });
+var CustomSelect_vue_vue_type_style_index_0_lang = "";
+const _hoisted_1$3 = { 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$3 = { class: "htw-flex-1 htw-truncate" };
+const _hoisted_3$3 = { class: "htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700" };
+const _hoisted_4$3 = ["onClick"];
+const __default__$5 = {
+  name: "CustomSelect"
+};
+const _sfc_main$5 = defineComponent(__spreadProps(__spreadValues({}, __default__$5), {
+  props: {
+    modelValue: null,
+    options: null
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: emits }) {
+    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();
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Dropdown), { "auto-size": "" }, {
+        popper: withCtx(({ hide }) => [
+          createElementVNode("div", _hoisted_3$3, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(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": props.modelValue === value
+                }],
+                onClick: ($event) => selectValue(value, hide)
+              }), toDisplayString(label), 17, _hoisted_4$3);
+            }), 128))
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$3, [
+            createElementVNode("div", _hoisted_2$3, [
+              renderSlot(_ctx.$slots, "default", { label: unref(selectedLabel) }, () => [
+                createTextVNode(toDisplayString(unref(selectedLabel)), 1)
+              ])
+            ]),
+            createVNode(unref(Icon), {
+              icon: "carbon:chevron-sort",
+              class: "htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
+            })
+          ])
+        ]),
+        _: 3
+      });
+    };
+  }
+}));
+const __default__$4 = {
+  name: "HstSelect"
+};
+const _sfc_main$4 = defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
+  props: {
+    title: null,
+    modelValue: null,
+    options: null
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: emits }) {
+    ref();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$a, {
+        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(_sfc_main$5, {
+            options: __props.options,
+            "model-value": __props.modelValue,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emits("update:modelValue", $event))
+          }, null, 8, ["options", "model-value"])
+        ]),
+        _: 3
+      }, 8, ["title", "class", "style"]);
+    };
+  }
+}));
 function tryOnScopeDispose(fn) {
   if (getCurrentScope()) {
     onScopeDispose(fn);
@@ -4944,10 +5001,12 @@ function tryOnScopeDispose(fn) {
   }
   return false;
 }
+var _a;
 const isClient = typeof window !== "undefined";
 const isString = (val) => typeof val === "string";
 const noop = () => {
 };
+isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
 function useTimeoutFn(cb, interval, options = {}) {
   const {
     immediate = true
@@ -5065,8 +5124,6 @@ const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !
 const globalKey = "__vueuse_ssr_handlers__";
 _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__$3 = {
   name: "HstCopyIcon"
 };
@@ -5326,20 +5383,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     };
   }
 }));
-const HstCheckbox = _sfc_main$8;
-const HstText = _sfc_main$7;
-const HstNumber = _sfc_main$6;
-const HstTextarea = _sfc_main$5;
+const HstCheckbox = _sfc_main$9;
+const HstText = _sfc_main$8;
+const HstNumber = _sfc_main$7;
+const HstTextarea = _sfc_main$6;
 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$8);
-  app.component("HstText", _sfc_main$7);
-  app.component("HstNumber", _sfc_main$6);
+  app.component("HstCheckbox", _sfc_main$9);
+  app.component("HstText", _sfc_main$8);
+  app.component("HstNumber", _sfc_main$7);
   app.component("HstSelect", _sfc_main$4);
-  app.component("HstTextarea", _sfc_main$5);
+  app.component("HstTextarea", _sfc_main$6);
   app.component("HstColorShades", _sfc_main$2);
   app.component("HstTokenList", _sfc_main$1);
   app.component("HstTokenGrid", _sfc_main);