@histoire/controls 0.7.6 → 0.7.9

package/dist/components/radio/HstRadio.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/radio/HstRadio.vue.d.ts

@@ -0,0 +1,24 @@
+import { HstControlOption } from '../../types';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    modelValue: string;
+    options: HstControlOption[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    modelValue: string;
+    options: HstControlOption[];
+}>>> & {
+    "onUpdate:modelValue"?: (value: string) => any;
+}, {}>;
+export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -1,15 +1,12 @@
-export interface SelectOption {
-    label: string;
-    value: string;
-}
+import { HstControlOption } from '../../types';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     modelValue: string;
-    options: Record<string, string> | string[] | SelectOption[];
+    options: Record<string, string> | string[] | HstControlOption[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     modelValue: string;
-    options: Record<string, string> | string[] | SelectOption[];
+    options: Record<string, string> | string[] | HstControlOption[];
 }>>> & {
     "onUpdate:modelValue"?: (value: string) => any;
 }, {}>;

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

@@ -1,14 +1,14 @@
-import { SelectOption } from './CustomSelect.vue';
+import { HstControlOption } from '../../types';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     title?: string;
     modelValue: string;
-    options: Record<string, string> | string[] | SelectOption[];
+    options: Record<string, string> | string[] | HstControlOption[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     title?: string;
     modelValue: string;
-    options: Record<string, string> | string[] | SelectOption[];
+    options: Record<string, string> | string[] | HstControlOption[];
 }>>> & {
     "onUpdate:modelValue"?: (value: string) => any;
 }, {}>;
@@ -22,4 +22,3 @@ declare type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
-export type { SelectOption as HstSelectOption } from './CustomSelect.vue';

package/dist/index.d.ts

@@ -205,4 +205,33 @@ export declare const HstCopyIcon: import("vue").DefineComponent<{
         required: true;
     };
 }>>, {}>;
+export declare const HstRadio: import("vue").DefineComponent<{
+    title: {
+        type: import("vue").PropType<string>;
+    };
+    modelValue: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    options: {
+        type: import("vue").PropType<import("./types").HstControlOption[]>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: import("vue").PropType<string>;
+    };
+    modelValue: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    options: {
+        type: import("vue").PropType<import("./types").HstControlOption[]>;
+        required: true;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (value: string) => any;
+}, {}>;
 export declare function registerVueComponents(app: App): void;

package/dist/index.es.js

@@ -2343,10 +2343,10 @@ const _hoisted_2$1$1 = {
   ref: "inner",
   class: "v-popper__inner"
 };
-const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-outer" }, null, -1);
+const _hoisted_3$7 = /* @__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$6,
+  _hoisted_3$7,
   _hoisted_4$5
 ];
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
@@ -2525,7 +2525,7 @@ defineComponent(__spreadProps2(__spreadValues2({}, PrivatePopperWrapper), {
   name: "VTooltip",
   vPopperTheme: "tooltip"
 }));
-const _sfc_main$c = defineComponent({
+const _sfc_main$d = defineComponent({
   name: "VTooltipDirective",
   components: {
     Popper: PrivatePopper(),
@@ -2616,8 +2616,8 @@ const _sfc_main$c = defineComponent({
     }
   }
 });
-const _hoisted_1$9 = ["innerHTML"];
-const _hoisted_2$7 = ["textContent"];
+const _hoisted_1$a = ["innerHTML"];
+const _hoisted_2$8 = ["textContent"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PopperContent = resolveComponent("PopperContent");
   const _component_Popper = resolveComponent("Popper");
@@ -2660,10 +2660,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.html ? (openBlock(), createElementBlock("div", {
             key: 0,
             innerHTML: _ctx.finalContent
-          }, null, 8, _hoisted_1$9)) : (openBlock(), createElementBlock("div", {
+          }, null, 8, _hoisted_1$a)) : (openBlock(), createElementBlock("div", {
             key: 1,
             textContent: toDisplayString(_ctx.finalContent)
-          }, null, 8, _hoisted_2$7))
+          }, null, 8, _hoisted_2$8))
         ]),
         _: 2
       }, 1032, ["class", "popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"])
@@ -2671,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$c, [["render", _sfc_render]]);
+var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render]]);
 const TARGET_CLASS = "v-popper--has-tooltip";
 function getPlacement(options2, modifiers) {
   let result = options2.placement;
@@ -2797,21 +2797,21 @@ var PrivateVTooltip = {
 };
 const VTooltip = PrivateVTooltip;
 const Dropdown = _sfc_main$3$1;
-const _hoisted_1$8 = { 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$6 = { class: "htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0" };
-const _hoisted_3$5 = { class: "htw-grow htw-flex htw-items-center htw-gap-1" };
+const _hoisted_1$9 = { 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$7 = { class: "htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0" };
+const _hoisted_3$6 = { class: "htw-grow htw-flex htw-items-center htw-gap-1" };
 const _hoisted_4$4 = { class: "htw-block htw-grow" };
-const __default__$b = {
+const __default__$c = {
   name: "HstWrapper"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$b), {
+const _sfc_main$c = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$c), {
   props: {
     title: null
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1$8, [
-        withDirectives((openBlock(), createElementBlock("span", _hoisted_2$6, [
+      return openBlock(), createElementBlock("label", _hoisted_1$9, [
+        withDirectives((openBlock(), createElementBlock("span", _hoisted_2$7, [
           createTextVNode(toDisplayString(__props.title), 1)
         ])), [
           [unref(VTooltip), {
@@ -2820,7 +2820,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             distance: 12
           }]
         ]),
-        createElementVNode("span", _hoisted_3$5, [
+        createElementVNode("span", _hoisted_3$6, [
           createElementVNode("span", _hoisted_4$4, [
             renderSlot(_ctx.$slots, "default")
           ]),
@@ -2830,18 +2830,18 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const _hoisted_1$7 = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
-const _hoisted_2$5 = {
+const _hoisted_1$8 = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
+const _hoisted_2$6 = {
   width: "16",
   height: "16",
   viewBox: "0 0 24 24",
   class: "htw-relative htw-z-10"
 };
-const _hoisted_3$4 = ["stroke-dasharray", "stroke-dashoffset"];
-const __default__$a = {
+const _hoisted_3$5 = ["stroke-dasharray", "stroke-dashoffset"];
+const __default__$b = {
   name: "HstCheckbox"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$a), {
+const _sfc_main$b = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$b), {
   props: {
     modelValue: { type: Boolean },
     title: null
@@ -2860,12 +2860,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const progress = computed(() => props.modelValue ? 1 : 0);
     const dashoffset = computed(() => (1 - progress.value) * dasharray.value);
     const animationEnabled = ref(false);
-    watch(path, (value) => {
+    watch(path, () => {
       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$b, {
+      return openBlock(), createBlock(_sfc_main$c, {
         role: "checkbox",
         tabindex: "0",
         class: "htw-cursor-pointer htw-items-center",
@@ -2880,13 +2880,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
           renderSlot(_ctx.$slots, "actions")
         ]),
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$7, [
+          createElementVNode("div", _hoisted_1$8, [
             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$5, [
+            (openBlock(), createElementBlock("svg", _hoisted_2$6, [
               createElementVNode("path", {
                 ref_key: "path",
                 ref: path,
@@ -2900,7 +2900,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                 ]]),
                 "stroke-dasharray": dasharray.value,
                 "stroke-dashoffset": unref(dashoffset)
-              }, null, 10, _hoisted_3$4)
+              }, null, 10, _hoisted_3$5)
             ]))
           ])
         ]),
@@ -2909,11 +2909,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const _hoisted_1$6 = ["value"];
-const __default__$9 = {
+const _hoisted_1$7 = ["value"];
+const __default__$a = {
   name: "HstText"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$9), {
+const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$a), {
   props: {
     title: null,
     modelValue: null
@@ -2924,7 +2924,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   setup(__props, { emit }) {
     const input = ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$b, {
+      return openBlock(), createBlock(_sfc_main$c, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style),
@@ -2942,18 +2942,18 @@ const _sfc_main$9 = /* @__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$6)
+          }), null, 16, _hoisted_1$7)
         ]),
         _: 3
       }, 8, ["title", "class", "style"]);
     };
   }
 }));
-const __default__$8 = {
+const __default__$9 = {
   name: "HstNumber",
   inheritAttrs: false
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$8), {
+const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$9), {
   props: {
     title: null,
     modelValue: null
@@ -3000,7 +3000,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       stopDragging();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$b, {
+      return openBlock(), createBlock(_sfc_main$c, {
         class: normalizeClass(["htw-cursor-ew-resize htw-items-center", [
           _ctx.$attrs.class,
           { "htw-select-none": isDragging.value }
@@ -3038,15 +3038,15 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   }
 }));
 var HstSlider_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1$5 = { class: "htw-relative htw-w-full htw-flex htw-items-center" };
-const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("div", { class: "htw-absolute htw-inset-0 htw-flex htw-items-center" }, [
+const _hoisted_1$6 = { class: "htw-relative htw-w-full htw-flex htw-items-center" };
+const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("div", { class: "htw-absolute htw-inset-0 htw-flex htw-items-center" }, [
   /* @__PURE__ */ createElementVNode("div", { class: "htw-border htw-border-black/25 dark:htw-border-white/25 htw-h-1 htw-w-full htw-rounded-full" })
 ], -1);
-const __default__$7 = {
+const __default__$8 = {
   name: "HstSlider",
   inheritAttrs: false
 };
-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,
@@ -3080,14 +3080,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       return {};
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$b, {
+      return openBlock(), createBlock(_sfc_main$c, {
         class: normalizeClass(["htw-items-center", _ctx.$attrs.class]),
         title: __props.title,
         style: normalizeStyle(_ctx.$attrs.style)
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$5, [
-            _hoisted_2$4,
+          createElementVNode("div", _hoisted_1$6, [
+            _hoisted_2$5,
             withDirectives(createElementVNode("input", mergeProps({
               ref_key: "input",
               ref: input,
@@ -3119,12 +3119,12 @@ 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: "HstTextarea",
   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
@@ -3135,7 +3135,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   setup(__props, { emit }) {
     const input = ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$b, {
+      return openBlock(), createBlock(_sfc_main$c, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style),
@@ -3152,7 +3152,7 @@ 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 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$4)
+          }), null, 16, _hoisted_1$5)
         ]),
         _: 3
       }, 8, ["title", "class", "style"]);
@@ -4978,14 +4978,14 @@ const Icon = defineComponent({
   }
 });
 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_1$4 = { 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$4 = { class: "htw-flex-1 htw-truncate" };
+const _hoisted_3$4 = { class: "htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700" };
 const _hoisted_4$3 = ["onClick"];
-const __default__$5 = {
+const __default__$6 = {
   name: "CustomSelect"
 };
-const _sfc_main$5 = defineComponent(__spreadProps(__spreadValues({}, __default__$5), {
+const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$6), {
   props: {
     modelValue: null,
     options: null
@@ -5013,7 +5013,7 @@ const _sfc_main$5 = defineComponent(__spreadProps(__spreadValues({}, __default__
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Dropdown), { "auto-size": "" }, {
         popper: withCtx(({ hide }) => [
-          createElementVNode("div", _hoisted_3$3, [
+          createElementVNode("div", _hoisted_3$4, [
             (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,
@@ -5026,8 +5026,8 @@ const _sfc_main$5 = defineComponent(__spreadProps(__spreadValues({}, __default__
           ])
         ]),
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$3, [
-            createElementVNode("div", _hoisted_2$3, [
+          createElementVNode("div", _hoisted_1$4, [
+            createElementVNode("div", _hoisted_2$4, [
               renderSlot(_ctx.$slots, "default", { label: unref(selectedLabel) }, () => [
                 createTextVNode(toDisplayString(unref(selectedLabel)), 1)
               ])
@@ -5043,10 +5043,10 @@ const _sfc_main$5 = defineComponent(__spreadProps(__spreadValues({}, __default__
     };
   }
 }));
-const __default__$4 = {
+const __default__$5 = {
   name: "HstSelect"
 };
-const _sfc_main$4 = defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
+const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$5), {
   props: {
     title: null,
     modelValue: null,
@@ -5054,9 +5054,8 @@ const _sfc_main$4 = defineComponent(__spreadProps(__spreadValues({}, __default__
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: emits }) {
-    ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$b, {
+      return openBlock(), createBlock(_sfc_main$c, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style)
@@ -5065,7 +5064,7 @@ const _sfc_main$4 = defineComponent(__spreadProps(__spreadValues({}, __default__
           renderSlot(_ctx.$slots, "actions")
         ]),
         default: withCtx(() => [
-          createVNode(_sfc_main$5, {
+          createVNode(_sfc_main$6, {
             options: __props.options,
             "model-value": __props.modelValue,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emits("update:modelValue", $event))
@@ -5214,10 +5213,10 @@ var SwipeDirection;
   SwipeDirection2["LEFT"] = "LEFT";
   SwipeDirection2["NONE"] = "NONE";
 })(SwipeDirection || (SwipeDirection = {}));
-const __default__$3 = {
+const __default__$4 = {
   name: "HstCopyIcon"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
+const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
   props: {
     content: null
   },
@@ -5242,19 +5241,19 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   key: 0,
   class: "htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
 };
-const _hoisted_2$2 = ["onMouseenter"];
-const _hoisted_3$2 = { class: "htw-flex htw-gap-1" };
+const _hoisted_2$3 = ["onMouseenter"];
+const _hoisted_3$3 = { class: "htw-flex htw-gap-1" };
 const _hoisted_4$2 = { class: "htw-my-0 htw-truncate htw-shrink" };
 const _hoisted_5$2 = { class: "htw-flex htw-gap-1" };
 const _hoisted_6$1 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
-const __default__$2 = {
+const __default__$3 = {
   name: "HstColorShades"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
+const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
   props: {
     shades: null,
     getName: null,
@@ -5284,7 +5283,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     });
     const hover = ref(null);
     return (_ctx, _cache) => {
-      return unref(displayedShades).length ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return unref(displayedShades).length ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayedShades), (shade) => {
           return openBlock(), createElementBlock("div", {
             key: shade.key,
@@ -5303,13 +5302,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
               }, null, 4)
             ]),
             createElementVNode("div", null, [
-              createElementVNode("div", _hoisted_3$2, [
+              createElementVNode("div", _hoisted_3$3, [
                 withDirectives((openBlock(), createElementBlock("pre", _hoisted_4$2, [
                   createTextVNode(toDisplayString(shade.name), 1)
                 ])), [
                   [unref(VTooltip), shade.name.length > 23 ? shade.name : ""]
                 ]),
-                hover.value === shade.key ? (openBlock(), createBlock(_sfc_main$3, {
+                hover.value === shade.key ? (openBlock(), createBlock(_sfc_main$4, {
                   key: 0,
                   content: shade.name,
                   class: "htw-flex-none"
@@ -5321,29 +5320,29 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                 ])), [
                   [unref(VTooltip), shade.color.length > 23 ? shade.color : ""]
                 ]),
-                hover.value === shade.key ? (openBlock(), createBlock(_sfc_main$3, {
+                hover.value === shade.key ? (openBlock(), createBlock(_sfc_main$4, {
                   key: 0,
                   content: shade.color,
                   class: "htw-flex-none"
                 }, null, 8, ["content"])) : createCommentVNode("", true)
               ])
             ])
-          ], 40, _hoisted_2$2);
+          ], 40, _hoisted_2$3);
         }), 128))
       ])) : createCommentVNode("", true);
     };
   }
 }));
-const _hoisted_1$1 = ["onMouseenter"];
-const _hoisted_2$1 = { class: "htw-mx-4" };
-const _hoisted_3$1 = { class: "htw-flex htw-gap-1" };
+const _hoisted_1$2 = ["onMouseenter"];
+const _hoisted_2$2 = { class: "htw-mx-4" };
+const _hoisted_3$2 = { class: "htw-flex htw-gap-1" };
 const _hoisted_4$1 = { class: "htw-my-0 htw-truncate htw-shrink" };
 const _hoisted_5$1 = { class: "htw-flex htw-gap-1" };
 const _hoisted_6 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
-const __default__$1 = {
+const __default__$2 = {
   name: "HstTokenList"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
+const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
   props: {
     tokens: null,
     getName: null
@@ -5372,10 +5371,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
           onMouseleave: _cache[0] || (_cache[0] = ($event) => hover.value = null)
         }, [
           renderSlot(_ctx.$slots, "default", { token }),
-          createElementVNode("div", _hoisted_2$1, [
-            createElementVNode("div", _hoisted_3$1, [
+          createElementVNode("div", _hoisted_2$2, [
+            createElementVNode("div", _hoisted_3$2, [
               createElementVNode("pre", _hoisted_4$1, toDisplayString(token.name), 1),
-              hover.value === token.key ? (openBlock(), createBlock(_sfc_main$3, {
+              hover.value === token.key ? (openBlock(), createBlock(_sfc_main$4, {
                 key: 0,
                 content: token.name,
                 class: "htw-flex-none"
@@ -5383,28 +5382,28 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             ]),
             createElementVNode("div", _hoisted_5$1, [
               createElementVNode("pre", _hoisted_6, toDisplayString(token.value), 1),
-              hover.value === token.key ? (openBlock(), createBlock(_sfc_main$3, {
+              hover.value === token.key ? (openBlock(), createBlock(_sfc_main$4, {
                 key: 0,
                 content: typeof token.value === "string" ? token.value : JSON.stringify(token.value),
                 class: "htw-flex-none"
               }, null, 8, ["content"])) : createCommentVNode("", true)
             ])
           ])
-        ], 40, _hoisted_1$1);
+        ], 40, _hoisted_1$2);
       }), 128);
     };
   }
 }));
 var HstTokenGrid_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1 = ["onMouseenter"];
-const _hoisted_2 = { class: "htw-flex htw-gap-1" };
-const _hoisted_3 = { class: "htw-my-0 htw-truncate htw-shrink" };
+const _hoisted_1$1 = ["onMouseenter"];
+const _hoisted_2$1 = { class: "htw-flex htw-gap-1" };
+const _hoisted_3$1 = { class: "htw-my-0 htw-truncate htw-shrink" };
 const _hoisted_4 = { class: "htw-flex htw-gap-1" };
 const _hoisted_5 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
-const __default__ = {
+const __default__$1 = {
   name: "HstTokenGrid"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
   props: {
     tokens: null,
     colSize: { default: 180 },
@@ -5442,13 +5441,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
           }, [
             renderSlot(_ctx.$slots, "default", { token }),
             createElementVNode("div", null, [
-              createElementVNode("div", _hoisted_2, [
-                withDirectives((openBlock(), createElementBlock("pre", _hoisted_3, [
+              createElementVNode("div", _hoisted_2$1, [
+                withDirectives((openBlock(), createElementBlock("pre", _hoisted_3$1, [
                   createTextVNode(toDisplayString(token.name), 1)
                 ])), [
                   [unref(VTooltip), token.name.length > __props.colSize / 8 ? token.name : ""]
                 ]),
-                hover.value === token.key ? (openBlock(), createBlock(_sfc_main$3, {
+                hover.value === token.key ? (openBlock(), createBlock(_sfc_main$4, {
                   key: 0,
                   content: token.name,
                   class: "htw-flex-none"
@@ -5460,37 +5459,134 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                 ])), [
                   [unref(VTooltip), token.value.length > __props.colSize / 8 ? token.value : ""]
                 ]),
-                hover.value === token.key ? (openBlock(), createBlock(_sfc_main$3, {
+                hover.value === token.key ? (openBlock(), createBlock(_sfc_main$4, {
                   key: 0,
                   content: typeof token.value === "string" ? token.value : JSON.stringify(token.value),
                   class: "htw-flex-none"
                 }, null, 8, ["content"])) : createCommentVNode("", true)
               ])
             ])
-          ], 40, _hoisted_1);
+          ], 40, _hoisted_1$1);
         }), 128))
       ], 4);
     };
   }
 }));
-const HstCheckbox = _sfc_main$a;
-const HstText = _sfc_main$9;
-const HstNumber = _sfc_main$8;
-const HstSlider = _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;
+const _hoisted_1 = { class: "-htw-my-1" };
+const _hoisted_2 = ["id", "name", "value", "checked", "onChange"];
+const _hoisted_3 = ["for", "onKeydown"];
+const __default__ = {
+  name: "HstRadio"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  props: {
+    title: null,
+    modelValue: null,
+    options: null
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    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;
+    });
+    ref();
+    function selectOption(value) {
+      emit("update:modelValue", value);
+      animationEnabled.value = true;
+    }
+    const animationEnabled = ref(false);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$c, {
+        role: "group",
+        title: __props.title,
+        class: normalizeClass(["htw-cursor-text", _ctx.$attrs.class]),
+        style: normalizeStyle(_ctx.$attrs.style)
+      }, {
+        actions: withCtx(() => [
+          renderSlot(_ctx.$slots, "actions")
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(formattedOptions), (label, value) => {
+              return openBlock(), createElementBlock(Fragment, { key: value }, [
+                createElementVNode("input", {
+                  id: `${value}-radio`,
+                  type: "radio",
+                  name: `${value}-radio`,
+                  value,
+                  checked: value === __props.modelValue,
+                  class: "htw-hidden",
+                  onChange: ($event) => selectOption(value)
+                }, null, 40, _hoisted_2),
+                createElementVNode("label", {
+                  tabindex: "0",
+                  for: `${value}-radio`,
+                  class: "htw-cursor-pointer htw-flex htw-items-center htw-relative htw-py-1 htw-group",
+                  onKeydown: [
+                    withKeys(withModifiers(($event) => selectOption(value), ["prevent"]), ["enter"]),
+                    withKeys(withModifiers(($event) => selectOption(value), ["prevent"]), ["space"])
+                  ]
+                }, [
+                  (openBlock(), createElementBlock("svg", {
+                    width: "16",
+                    height: "16",
+                    viewBox: "-12 -12 24 24",
+                    class: normalizeClass(["htw-relative htw-z-10 htw-border htw-border-solid htw-text-inherit htw-rounded-full htw-box-border htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-mr-2 group-hover:htw-border-primary-500", [
+                      __props.modelValue === value ? "htw-border-primary-500" : "htw-border-black/25 dark:htw-border-white/25"
+                    ]])
+                  }, [
+                    createElementVNode("circle", {
+                      r: "7",
+                      class: normalizeClass(["htw-will-change-transform", [
+                        animationEnabled.value ? "htw-transition-all" : "htw-transition-none",
+                        {
+                          "htw-delay-150": __props.modelValue === value
+                        },
+                        __props.modelValue === value ? "htw-fill-primary-500" : "htw-fill-transparent htw-scale-0"
+                      ]])
+                    }, null, 2)
+                  ], 2)),
+                  createTextVNode(" " + toDisplayString(label), 1)
+                ], 40, _hoisted_3)
+              ], 64);
+            }), 128))
+          ])
+        ]),
+        _: 3
+      }, 8, ["title", "class", "style"]);
+    };
+  }
+}));
+const HstCheckbox = _sfc_main$b;
+const HstText = _sfc_main$a;
+const HstNumber = _sfc_main$9;
+const HstSlider = _sfc_main$8;
+const HstTextarea = _sfc_main$7;
+const HstColorShades = _sfc_main$3;
+const HstTokenList = _sfc_main$2;
+const HstTokenGrid = _sfc_main$1;
+const HstCopyIcon = _sfc_main$4;
+const HstRadio = _sfc_main;
 function registerVueComponents(app) {
-  app.component("HstCheckbox", _sfc_main$a);
-  app.component("HstText", _sfc_main$9);
-  app.component("HstNumber", _sfc_main$8);
-  app.component("HstSlider", _sfc_main$7);
-  app.component("HstSelect", _sfc_main$4);
-  app.component("HstTextarea", _sfc_main$6);
-  app.component("HstColorShades", _sfc_main$2);
-  app.component("HstTokenList", _sfc_main$1);
-  app.component("HstTokenGrid", _sfc_main);
-}
-export { HstCheckbox, HstColorShades, HstCopyIcon, HstNumber, HstSlider, HstText, HstTextarea, HstTokenGrid, HstTokenList, registerVueComponents };
+  app.component("HstCheckbox", _sfc_main$b);
+  app.component("HstText", _sfc_main$a);
+  app.component("HstNumber", _sfc_main$9);
+  app.component("HstSlider", _sfc_main$8);
+  app.component("HstSelect", _sfc_main$5);
+  app.component("HstTextarea", _sfc_main$7);
+  app.component("HstColorShades", _sfc_main$3);
+  app.component("HstTokenList", _sfc_main$2);
+  app.component("HstTokenGrid", _sfc_main$1);
+  app.component("HstRadio", _sfc_main);
+}
+export { HstCheckbox, HstColorShades, HstCopyIcon, HstNumber, HstRadio, HstSlider, HstText, HstTextarea, HstTokenGrid, HstTokenList, registerVueComponents };

package/dist/style-standalone.css

@@ -299,6 +299,10 @@
   margin-bottom:0.5rem
 }
 
+.htw-mr-2{
+  margin-right:0.5rem
+}
+
 .htw-ml-auto{
   margin-left:auto
 }
@@ -319,6 +323,10 @@
   display:grid
 }
 
+.htw-hidden{
+  display:none
+}
+
 .htw-h-4{
   height:1rem
 }
@@ -407,6 +415,12 @@
   flex-grow:1
 }
 
+.htw-scale-0{
+  --tw-scale-x:0;
+  --tw-scale-y:0;
+  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+
 .htw-cursor-pointer{
   cursor:pointer
 }
@@ -569,6 +583,14 @@
   background-color:rgb(16 185 129 / var(--tw-bg-opacity)) !important
 }
 
+.htw-fill-primary-500{
+  fill:#10b981
+}
+
+.htw-fill-transparent{
+  fill:transparent
+}
+
 .htw-stroke-white{
   stroke:#fff
 }
@@ -672,6 +694,10 @@
   transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)
 }
 
+.htw-will-change-transform{
+  will-change:transform
+}
+
 body {
   font-size: 1.125rem;
 }
@@ -711,6 +737,11 @@ body {
   border-color:rgb(16 185 129 / var(--tw-border-opacity))
 }
 
+.htw-group:hover .group-hover\:htw-border-primary-500{
+  --tw-border-opacity:1;
+  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+}
+
 .htw-group:active .group-active\:htw-bg-gray-500\/20{
   background-color:rgb(113 113 122 / 0.2)
 }

package/dist/types.d.ts

@@ -0,0 +1,4 @@
+export interface HstControlOption {
+    label: string;
+    value: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.7.6",
+  "version": "0.7.9",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -44,7 +44,7 @@
     "autoprefixer": "^10.4.4",
     "concurrently": "^7.1.0",
     "floating-vue": "^2.0.0-beta.16",
-    "histoire": "0.7.6",
+    "histoire": "0.7.9",
     "postcss": "^8.4.12",
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.0.23",

package/src/components/checkbox/HstCheckbox.vue

@@ -28,9 +28,11 @@ const path = ref<SVGPathElement>()
 const dasharray = ref(0)
 const progress = computed(() => props.modelValue ? 1 : 0)
 const dashoffset = computed(() => (1 - progress.value) * dasharray.value)
+
+// animationEnabled prevents the animation from triggering on mounted
 const animationEnabled = ref(false)
 
-watch(path, value => {
+watch(path, () => {
   dasharray.value = path.value.getTotalLength?.() ?? 21.21
 })
 </script>

package/src/components/radio/HstRadio.story.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import HstRadio from './HstRadio.vue'
+
+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 {
+    character: flatOptions[0],
+  }
+}
+</script>
+
+<template>
+  <Story title="HstRadio">
+    <Variant
+      title="playground"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstRadio
+          v-model="state.character"
+          title="Label"
+          :options="objectOptions"
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstRadio
+          v-model="state.character"
+          title="Label"
+          :options="objectOptions"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/radio/HstRadio.vue

@@ -0,0 +1,109 @@
+<script lang="ts">
+export default {
+  name: 'HstRadio',
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ComputedRef, ref } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+import { HstControlOption } from '../../types'
+
+const props = defineProps<{
+  title?: string
+  modelValue: string
+  options: HstControlOption[]
+}>()
+
+const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
+  if (Array.isArray(props.options)) {
+    return Object.fromEntries(props.options.map((value: string | HstControlOption) => {
+      if (typeof value === 'string') {
+        return [value, value]
+      } else {
+        return [value.value, value.label]
+      }
+    }))
+  }
+  return props.options
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const input = ref<HTMLInputElement>()
+
+function selectOption (value: string) {
+  emit('update:modelValue', value)
+  animationEnabled.value = true
+}
+
+// animationEnabled prevents the animation from triggering on mounted
+const animationEnabled = ref(false)
+</script>
+
+<template>
+  <HstWrapper
+    role="group"
+    :title="title"
+    class="htw-cursor-text"
+    :class="$attrs.class"
+    :style="$attrs.style"
+  >
+    <div class="-htw-my-1">
+      <template
+        v-for="( label, value ) in formattedOptions"
+        :key="value"
+      >
+        <input
+          :id="`${value}-radio`"
+          type="radio"
+          :name="`${value}-radio`"
+          :value="value"
+          :checked="value === modelValue"
+          class="htw-hidden"
+          @change="selectOption(value)"
+        >
+        <label
+          tabindex="0"
+          :for="`${value}-radio`"
+          class="htw-cursor-pointer htw-flex htw-items-center htw-relative htw-py-1 htw-group"
+          @keydown.enter.prevent="selectOption(value)"
+          @keydown.space.prevent="selectOption(value)"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="-12 -12 24 24"
+            class="htw-relative htw-z-10 htw-border htw-border-solid  htw-text-inherit htw-rounded-full htw-box-border htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-mr-2 group-hover:htw-border-primary-500"
+            :class="[
+              modelValue === value
+                ? 'htw-border-primary-500'
+                : 'htw-border-black/25 dark:htw-border-white/25',
+            ]"
+          >
+            <circle
+              r="7"
+              class="htw-will-change-transform"
+              :class="[
+                animationEnabled ? 'htw-transition-all' : 'htw-transition-none',
+                {
+                  'htw-delay-150': modelValue === value,
+                },
+                modelValue === value
+                  ? 'htw-fill-primary-500'
+                  : 'htw-fill-transparent htw-scale-0',
+              ]"
+            />
+          </svg>
+          {{ label }}
+        </label>
+      </template>
+    </div>
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>

package/src/components/select/CustomSelect.vue

@@ -8,15 +8,11 @@ export default {
 import { Dropdown as VDropdown } from 'floating-vue'
 import { computed, ComputedRef } from 'vue'
 import { Icon } from '@iconify/vue'
-
-export interface SelectOption {
-  label: string
-  value: string
-}
+import { HstControlOption } from '../../types'
 
 const props = defineProps<{
   modelValue: string
-  options: Record<string, string> | string[] | SelectOption[]
+  options: Record<string, string> | string[] | HstControlOption[]
 }>()
 
 const emits = defineEmits<{
@@ -25,7 +21,7 @@ const emits = defineEmits<{
 
 const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
   if (Array.isArray(props.options)) {
-    return Object.fromEntries(props.options.map((value: string | SelectOption) => {
+    return Object.fromEntries(props.options.map((value: string | HstControlOption) => {
       if (typeof value === 'string') {
         return [value, value]
       } else {

package/src/components/select/HstSelect.vue

@@ -2,26 +2,22 @@
 export default {
   name: 'HstSelect',
 }
-
-export type { SelectOption as HstSelectOption } from './CustomSelect.vue'
 </script>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
-import CustomSelect, { SelectOption } from './CustomSelect.vue'
+import CustomSelect from './CustomSelect.vue'
+import { HstControlOption } from '../../types'
 
-const props = defineProps<{
+defineProps<{
   title?: string
   modelValue: string
-  options: Record<string, string> | string[] | SelectOption[]
+  options: Record<string, string> | string[] | HstControlOption[]
 }>()
 
 const emits = defineEmits<{
   (e: 'update:modelValue', value: string): void
 }>()
-
-const select = ref<HTMLInputElement>()
 </script>
 
 <template>

package/src/index.ts

@@ -9,6 +9,7 @@ import HstColorShadesVue from './components/design-tokens/HstColorShades.vue'
 import HstTokenListVue from './components/design-tokens/HstTokenList.vue'
 import HstTokenGridVue from './components/design-tokens/HstTokenGrid.vue'
 import HstCopyIconVue from './components/HstCopyIcon.vue'
+import HstRadioVue from './components/radio/HstRadio.vue'
 
 export const HstCheckbox = HstCheckboxVue
 export const HstText = HstTextVue
@@ -19,6 +20,7 @@ export const HstColorShades = HstColorShadesVue
 export const HstTokenList = HstTokenListVue
 export const HstTokenGrid = HstTokenGridVue
 export const HstCopyIcon = HstCopyIconVue
+export const HstRadio = HstRadioVue
 
 export function registerVueComponents (app: App) {
   app.component('HstCheckbox', HstCheckboxVue)
@@ -30,4 +32,5 @@ export function registerVueComponents (app: App) {
   app.component('HstColorShades', HstColorShadesVue)
   app.component('HstTokenList', HstTokenListVue)
   app.component('HstTokenGrid', HstTokenGridVue)
+  app.component('HstRadio', HstRadioVue)
 }

package/src/types.ts

@@ -0,0 +1,4 @@
+export interface HstControlOption {
+  label: string
+  value: string
+}