@histoire/controls 0.3.1 → 0.4.0

package/dist/components/select/HstSelect.story.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/components/select/HstSelect.vue.d.ts

@@ -0,0 +1,43 @@
+import { PropType } from 'vue';
+export interface HstSelectOptions {
+    label: string;
+    value: string;
+}
+declare const _default: import("vue").DefineComponent<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: any;
+    };
+    options: {
+        type: PropType<string[] | HstSelectOptions[]>;
+        required: true;
+        default: () => any[];
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (newValue: string) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: any;
+    };
+    options: {
+        type: PropType<string[] | HstSelectOptions[]>;
+        required: true;
+        default: () => any[];
+    };
+}>> & {
+    "onUpdate:modelValue"?: (newValue: string) => any;
+}, {
+    title: string;
+    modelValue: string;
+    options: string[] | HstSelectOptions[];
+}>;
+export default _default;

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, getCurrentScope, onScopeDispose, renderList } from "vue";
+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";
 function getBasePlacement(placement) {
   return placement.split("-")[0];
 }
@@ -1486,7 +1486,8 @@ var PrivatePopper = () => defineComponent({
         classes: __spreadProps2(__spreadValues2({}, this.classes), {
           popperClass: this.popperClass
         }),
-        result: this.positioningDisabled ? null : this.result
+        result: this.positioningDisabled ? null : this.result,
+        attrs: this.$attrs
       };
     },
     parentPopper() {
@@ -2465,19 +2466,22 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       handleResize,
       onResize,
       classes,
-      result
+      result,
+      attrs
     }) => [
-      createElementVNode("div", {
+      createElementVNode("div", mergeProps({
         ref: "reference",
-        class: normalizeClass(["v-popper", [
+        class: "v-popper"
+      }, attrs, {
+        class: [
           _ctx.$attrs.class,
           _ctx.themeClass,
           {
             "v-popper--shown": isShown
           }
-        ]]),
-        style: normalizeStyle(_ctx.$attrs.style)
-      }, [
+        ],
+        style: _ctx.$attrs.style
+      }), [
         renderSlot(_ctx.$slots, "default", {
           shown: isShown,
           show,
@@ -2505,7 +2509,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           _: 2
         }, 1032, ["popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"])
-      ], 6)
+      ], 16)
     ]),
     _: 3
   }, 16, ["theme", "target-nodes", "reference-node", "popper-node"]);
@@ -2523,7 +2527,7 @@ defineComponent(__spreadProps2(__spreadValues2({}, PrivatePopperWrapper), {
   name: "VTooltip",
   vPopperTheme: "tooltip"
 }));
-const _sfc_main$9 = defineComponent({
+const _sfc_main$a = defineComponent({
   name: "VTooltipDirective",
   components: {
     Popper: PrivatePopper(),
@@ -2614,8 +2618,8 @@ const _sfc_main$9 = defineComponent({
     }
   }
 });
-const _hoisted_1$7 = ["innerHTML"];
-const _hoisted_2$5 = ["textContent"];
+const _hoisted_1$8 = ["innerHTML"];
+const _hoisted_2$6 = ["textContent"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PopperContent = resolveComponent("PopperContent");
   const _component_Popper = resolveComponent("Popper");
@@ -2658,10 +2662,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.html ? (openBlock(), createElementBlock("div", {
             key: 0,
             innerHTML: _ctx.finalContent
-          }, null, 8, _hoisted_1$7)) : (openBlock(), createElementBlock("div", {
+          }, null, 8, _hoisted_1$8)) : (openBlock(), createElementBlock("div", {
             key: 1,
             textContent: toDisplayString(_ctx.finalContent)
-          }, null, 8, _hoisted_2$5))
+          }, null, 8, _hoisted_2$6))
         ]),
         _: 2
       }, 1032, ["class", "popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"])
@@ -2669,7 +2673,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 16, ["theme", "popper-node", "onApplyShow", "onApplyHide"]);
 }
-var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render]]);
+var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render]]);
 const TARGET_CLASS = "v-popper--has-tooltip";
 function getPlacement(options2, modifiers) {
   let result = options2.placement;
@@ -2794,20 +2798,20 @@ var PrivateVTooltip = {
   }
 };
 const VTooltip = PrivateVTooltip;
-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_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__$8 = {
+const __default__$9 = {
   name: "HstWrapper"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$8), {
+const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$9), {
   props: {
     title: null
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1$6, [
-        withDirectives((openBlock(), createElementBlock("span", _hoisted_2$4, [
+      return openBlock(), createElementBlock("label", _hoisted_1$7, [
+        withDirectives((openBlock(), createElementBlock("span", _hoisted_2$5, [
           createTextVNode(toDisplayString(__props.title), 1)
         ])), [
           [unref(VTooltip), {
@@ -2823,18 +2827,18 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const _hoisted_1$5 = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
-const _hoisted_2$3 = {
+const _hoisted_1$6 = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
+const _hoisted_2$4 = {
   width: "16",
   height: "16",
   viewBox: "0 0 24 24",
   class: "htw-relative htw-z-10"
 };
 const _hoisted_3$3 = ["stroke-dasharray", "stroke-dashoffset"];
-const __default__$7 = {
+const __default__$8 = {
   name: "HstCheckbox"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$7), {
+const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$8), {
   props: {
     modelValue: { type: Boolean },
     title: null
@@ -2858,7 +2862,7 @@ const _sfc_main$7 = /* @__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$8, {
+      return openBlock(), createBlock(_sfc_main$9, {
         role: "checkbox",
         tabindex: "0",
         class: "htw-cursor-pointer htw-items-center",
@@ -2870,13 +2874,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         ]
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$5, [
+          createElementVNode("div", _hoisted_1$6, [
             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$3, [
+            (openBlock(), createElementBlock("svg", _hoisted_2$4, [
               createElementVNode("path", {
                 ref_key: "path",
                 ref: path,
@@ -2899,11 +2903,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const _hoisted_1$4 = ["value"];
-const __default__$6 = {
+const _hoisted_1$5 = ["value"];
+const __default__$7 = {
   name: "HstText"
 };
-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
@@ -2914,7 +2918,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   setup(__props, { emit }) {
     const input = ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$8, {
+      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),
@@ -2929,18 +2933,18 @@ const _sfc_main$6 = /* @__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$4)
+          }), null, 16, _hoisted_1$5)
         ]),
         _: 1
       }, 8, ["title", "class", "style"]);
     };
   }
 }));
-const __default__$5 = {
+const __default__$6 = {
   name: "HstNumber",
   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
@@ -2987,7 +2991,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       stopDragging();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$8, {
+      return openBlock(), createBlock(_sfc_main$9, {
         class: normalizeClass(["htw-cursor-ew-resize htw-items-center", [
           _ctx.$attrs.class,
           { "htw-select-none": isDragging.value }
@@ -3021,12 +3025,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const _hoisted_1$3 = ["value"];
-const __default__$4 = {
+const _hoisted_1$4 = ["value"];
+const __default__$5 = {
   name: "HstTextarea",
   inheritAttrs: false
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
+const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$5), {
   props: {
     title: null,
     modelValue: null
@@ -3037,7 +3041,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   setup(__props, { emit }) {
     const input = ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$8, {
+      return openBlock(), createBlock(_sfc_main$9, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style),
@@ -3051,7 +3055,64 @@ 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 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$3)
+          }), 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
       }, 8, ["title", "class", "style"]);
@@ -5265,19 +5326,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     };
   }
 }));
-const HstCheckbox = _sfc_main$7;
-const HstText = _sfc_main$6;
-const HstNumber = _sfc_main$5;
-const HstTextarea = _sfc_main$4;
+const HstCheckbox = _sfc_main$8;
+const HstText = _sfc_main$7;
+const HstNumber = _sfc_main$6;
+const HstTextarea = _sfc_main$5;
 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$7);
-  app.component("HstText", _sfc_main$6);
-  app.component("HstNumber", _sfc_main$5);
-  app.component("HstTextarea", _sfc_main$4);
+  app.component("HstCheckbox", _sfc_main$8);
+  app.component("HstText", _sfc_main$7);
+  app.component("HstNumber", _sfc_main$6);
+  app.component("HstSelect", _sfc_main$4);
+  app.component("HstTextarea", _sfc_main$5);
   app.component("HstColorShades", _sfc_main$2);
   app.component("HstTokenList", _sfc_main$1);
   app.component("HstTokenGrid", _sfc_main);

package/dist/style-standalone.css

@@ -505,6 +505,11 @@
   background-color:transparent
 }
 
+.htw-bg-gray-50{
+  --tw-bg-opacity:1;
+  background-color:rgb(250 250 250 / var(--tw-bg-opacity))
+}
+
 .htw-stroke-white{
   stroke:#fff
 }
@@ -517,6 +522,10 @@
   padding:0.5rem
 }
 
+.htw-p-4{
+  padding:1rem
+}
+
 .htw-py-1{
   padding-top:0.25rem;
   padding-bottom:0.25rem
@@ -536,6 +545,11 @@
   line-height:1
 }
 
+.htw-text-xs{
+  font-size:0.75rem;
+  line-height:1rem
+}
+
 .htw-text-white{
   --tw-text-opacity:1;
   color:rgb(255 255 255 / var(--tw-text-opacity))
@@ -637,6 +651,11 @@ body {
   background-color:rgb(0 0 0 / var(--tw-bg-opacity))
 }
 
+.htw-dark .dark\:htw-bg-gray-600{
+  --tw-bg-opacity:1;
+  background-color:rgb(82 82 91 / var(--tw-bg-opacity))
+}
+
 .htw-dark .dark\:hover\:htw-bg-primary-800:hover{
   --tw-bg-opacity:1;
   background-color:rgb(6 95 70 / var(--tw-bg-opacity))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -33,7 +33,7 @@
   "dependencies": {
     "@iconify/vue": "^3.2.1",
     "@vueuse/core": "^8.2.5",
-    "floating-vue": "^2.0.0-beta.14"
+    "floating-vue": "^2.0.0-beta.16"
   },
   "devDependencies": {
     "@peeky/test": "^0.13.5",
@@ -43,8 +43,8 @@
     "@vueuse/core": "^8.2.5",
     "autoprefixer": "^10.4.4",
     "concurrently": "^7.1.0",
-    "floating-vue": "^2.0.0-beta.14",
-    "histoire": "0.3.1",
+    "floating-vue": "^2.0.0-beta.16",
+    "histoire": "0.4.0",
     "postcss": "^8.4.12",
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.0.23",

package/src/components/select/HstSelect.story.vue

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import HstSelect from './HstSelect.vue'
+
+const options = [
+  { label: 'Crash Bandicoot', value: 'crash-bandicoot' },
+  { label: 'The Last of Us', value: 'the-last-of-us' },
+  { label: 'Ghost of Tsushima', value: 'ghost-of-tsushima' },
+]
+
+const flatOptions = options.map(option => option.label)
+
+function initState () {
+  return {
+    label: 'My really long label',
+    select: 'crash-bandicoot',
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="HstSelect"
+    :layout="{
+      type: 'grid',
+      width: '100%',
+    }"
+  >
+    <Variant
+      title="default"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstSelect
+          v-model="state.select"
+          :title="state.label"
+          :options="options"
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.select"
+          title="Select"
+          :options="options"
+        />
+      </template>
+    </Variant>
+
+    <Variant
+      title="no-label"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstSelect
+          v-model="state.select"
+          :options="options"
+        />
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.select"
+          title="Select"
+          :options="options"
+        />
+      </template>
+    </Variant>
+
+    <Variant
+      title="options-as-array-of-objects"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <pre class="htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4">{{ options }}</pre>
+        <HstSelect
+          v-model="state.select"
+          title="Games"
+          :options="options"
+        />
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.select"
+          title="Games"
+          :options="options"
+        />
+      </template>
+    </Variant>
+
+    <Variant
+      title="options-as-array-of-strings"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <pre class="htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4">{{ flatOptions }}</pre>
+        <HstSelect
+          v-model="state.select"
+          title="Select"
+          :options="flatOptions"
+        />
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.select"
+          title="Select"
+          :options="flatOptions"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/select/HstSelect.vue

@@ -0,0 +1,67 @@
+<script lang="ts">
+export default {
+  name: 'HstSelect',
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, computed, ComputedRef, PropType } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+
+export interface HstSelectOptions {
+  label: string
+  value: string
+}
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: String,
+    default: null,
+  },
+  options: {
+    type: Array as PropType<HstSelectOptions[] | string[]>,
+    required: true,
+    default: () => [],
+  },
+})
+
+const formattedOtions: ComputedRef<HstSelectOptions[]> =
+  computed(() => props.options.map(option => typeof option === 'string' ? { label: option, value: option } as HstSelectOptions : option as HstSelectOptions))
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: string) => true,
+})
+
+const select = ref<HTMLInputElement>()
+</script>
+
+<template>
+  <HstWrapper
+    :title="title"
+    class="htw-cursor-text htw-items-center"
+    :class="$attrs.class"
+    :style="$attrs.style"
+    @click="select.focus()"
+  >
+    <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="modelValue"
+      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    >
+      <option
+        v-for="{ label, value } in formattedOtions"
+        v-bind="{ ...$attrs, class: null, style: null }"
+        :key="label"
+        class="dark:htw-bg-gray-600"
+        :value="value"
+      >
+        {{ label }}
+      </option>
+    </select>
+  </HstWrapper>
+</template>

package/src/index.ts

@@ -3,6 +3,7 @@ import HstCheckboxVue from './components/checkbox/HstCheckbox.vue'
 import HstTextVue from './components/text/HstText.vue'
 import HstNumberVue from './components/number/HstNumber.vue'
 import HstTextareaVue from './components/textarea/HstTextarea.vue'
+import HstSelectVue from './components/select/HstSelect.vue'
 import HstColorShadesVue from './components/design-tokens/HstColorShades.vue'
 import HstTokenListVue from './components/design-tokens/HstTokenList.vue'
 import HstTokenGridVue from './components/design-tokens/HstTokenGrid.vue'
@@ -21,6 +22,7 @@ export function registerVueComponents (app: App) {
   app.component('HstCheckbox', HstCheckboxVue)
   app.component('HstText', HstTextVue)
   app.component('HstNumber', HstNumberVue)
+  app.component('HstSelect', HstSelectVue)
   app.component('HstTextarea', HstTextareaVue)
   app.component('HstColorShades', HstColorShadesVue)
   app.component('HstTokenList', HstTokenListVue)