@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/components/BaseInput.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
 /**
- * Renders a styled `<input>` supporting text/number/email types, size, error, and readonly states.
- * Optional `#prefix` (bare leading glyph, e.g. a search icon) and `#suffix` (neutral unit segment) slots sit inside the field border.
+ * Renders a styled text `<input>`, or a `<textarea>` with `type="textarea"`; size, invalid, and readonly states.
+ * Optional `#prefix` (bare leading glyph, e.g. a search icon) and `#suffix` (neutral unit segment) slots sit inside the field border (input only).
+ * Numbers use NumberInput.
+ *
+ * @example
+ * ```vue
+ * <BaseInput v-model="name" :invalid="!!nameError" />
+ * <BaseInput v-model="notes" type="textarea" :rows="4" />
+ * ```
  */
 import { computed, useAttrs, useSlots, type StyleValue } from 'vue'
 import type { InputType } from '../types'
@@ -9,32 +16,36 @@ import type { InputType } from '../types'
 defineOptions({ inheritAttrs: false })
 
 interface Props {
-  modelValue?: string | number
+  modelValue?: string
   type?: InputType
   placeholder?: string
   disabled?: boolean
   readonly?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   autocomplete?: string
   autofocus?: boolean
-  min?: number
-  max?: number
-  step?: number
+  maxlength?: number
   list?: string
   ariaDescribedby?: string
+  /** Visible text lines (`textarea`). */
+  rows?: number
+  /** Resize handle (`textarea`). */
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both'
 }
 
 const props = withDefaults(defineProps<Props>(), {
   type: 'text',
   disabled: false,
   readonly: false,
-  error: false,
+  invalid: false,
   size: 'md',
+  rows: 3,
+  resize: 'vertical',
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string | number | null]
+  'update:modelValue': [value: string]
   focus: [event: FocusEvent]
   blur: [event: FocusEvent]
   keydown: [event: KeyboardEvent]
@@ -49,7 +60,7 @@ defineSlots<{
 
 const attrs = useAttrs()
 const slots = useSlots()
-const wrapped = computed(() => Boolean(slots.prefix || slots.suffix))
+const wrapped = computed(() => props.type !== 'textarea' && Boolean(slots.prefix || slots.suffix))
 
 /** Wrapped: class/style style the group, every other attribute (id, name, aria-*) stays on the input. */
 const inputAttrs = computed(() => {
@@ -59,21 +70,41 @@ const inputAttrs = computed(() => {
 })
 
 function handleInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  const value = props.type === 'number'
-    ? (target.value === '' ? null : Number(target.value))
-    : target.value
-  emit('update:modelValue', value as string | number)
+  emit('update:modelValue', (event.target as HTMLInputElement | HTMLTextAreaElement).value)
 }
 </script>
 
 <template>
+  <textarea
+    v-if="type === 'textarea'"
+    v-bind="inputAttrs"
+    :value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    :autofocus="autofocus"
+    :rows="rows"
+    :maxlength="maxlength"
+    :aria-invalid="invalid || undefined"
+    :aria-describedby="ariaDescribedby || undefined"
+    :class="[
+      'mint-textarea',
+      `mint-textarea--${size}`,
+      `mint-textarea--resize-${resize}`,
+      invalid ? 'mint-textarea--error' : '',
+      disabled ? 'mint-textarea--disabled' : '',
+    ]"
+    @input="handleInput"
+    @focus="emit('focus', $event)"
+    @blur="emit('blur', $event)"
+    @keydown="emit('keydown', $event)"
+  />
   <div
-    v-if="wrapped"
+    v-else-if="wrapped"
     :class="[
       'mint-input-group',
       `mint-input-group--${size}`,
-      error ? 'mint-input-group--error' : '',
+      invalid ? 'mint-input-group--error' : '',
       disabled ? 'mint-input-group--disabled' : '',
       attrs.class,
     ]"
@@ -89,11 +120,9 @@ function handleInput(event: Event) {
       :readonly="readonly"
       :autocomplete="autocomplete"
       :autofocus="autofocus"
-      :min="min"
-      :max="max"
-      :step="step"
+      :maxlength="maxlength"
       :list="list"
-      :aria-invalid="error || undefined"
+      :aria-invalid="invalid || undefined"
       :aria-describedby="ariaDescribedby || undefined"
       :class="['mint-input', `mint-input--${size}`, 'mint-input-group__control']"
       @input="handleInput"
@@ -113,16 +142,14 @@ function handleInput(event: Event) {
     :readonly="readonly"
     :autocomplete="autocomplete"
     :autofocus="autofocus"
-    :min="min"
-    :max="max"
-    :step="step"
+    :maxlength="maxlength"
     :list="list"
-    :aria-invalid="error || undefined"
+    :aria-invalid="invalid || undefined"
     :aria-describedby="ariaDescribedby || undefined"
     :class="[
       'mint-input',
       `mint-input--${size}`,
-      error ? 'mint-input--error' : '',
+      invalid ? 'mint-input--error' : '',
       disabled ? 'mint-input--disabled' : '',
     ]"
     @input="handleInput"

package/src/components/BaseModal.story.vue

@@ -67,7 +67,7 @@ const sectionRailTabs: ModalTab[] = [
           Open confirm dialog
         </BaseButton>
         <BaseModal
-          v-model="refreshOpen"
+          v-model:open="refreshOpen"
           title="Confirm uninstall"
           subtitle="mint-plugin-metabolomics · v2.4.1"
           size="md"
@@ -88,7 +88,7 @@ const sectionRailTabs: ModalTab[] = [
           Open with subtitle
         </BaseButton>
         <BaseModal
-          v-model="subtitleOpen"
+          v-model:open="subtitleOpen"
           title="Experiment context"
           subtitle="EXP-B24-104 · Plasma metabolite quant — cohort 7"
           size="md"
@@ -110,7 +110,7 @@ const sectionRailTabs: ModalTab[] = [
             Open Modal
           </BaseButton>
           <BaseModal
-            v-model="state.open"
+            v-model:open="state.open"
             :title="state.title"
             :size="state.size"
             :closable="state.closable"
@@ -157,7 +157,7 @@ const sectionRailTabs: ModalTab[] = [
         <BaseModal
           v-for="size in modalSizes"
           :key="size"
-          v-model="galleryOpen[size]"
+          v-model:open="galleryOpen[size]"
           :title="`${size.toUpperCase()} Modal`"
           :size="size"
         >
@@ -171,7 +171,7 @@ const sectionRailTabs: ModalTab[] = [
     <Variant title="With Footer">
       <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
         <BaseButton @click="galleryOpen.footer = true">Open with Footer</BaseButton>
-        <BaseModal v-model="galleryOpen.footer" title="Confirm Action" size="sm">
+        <BaseModal v-model:open="galleryOpen.footer" title="Confirm Action" size="sm">
           <p style="margin: 0; color: var(--text-primary, #e2e8f0);">
             Are you sure you want to proceed with this action?
           </p>
@@ -189,7 +189,7 @@ const sectionRailTabs: ModalTab[] = [
       <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
         <BaseButton @click="galleryOpen.noClose = true">Open Non-Closable</BaseButton>
         <BaseModal
-          v-model="galleryOpen.noClose"
+          v-model:open="galleryOpen.noClose"
           title="Processing..."
           size="sm"
           :closable="false"
@@ -217,7 +217,7 @@ const sectionRailTabs: ModalTab[] = [
         </p>
       </div>
 
-      <BaseModal v-model="drawerOpen" variant="drawer" size="md" title="Sample PLT-001 · Well A3" subtitle="Peak metadata">
+      <BaseModal v-model:open="drawerOpen" variant="drawer" size="md" title="Sample PLT-001 · Well A3" subtitle="Peak metadata">
         <div style="display: flex; flex-direction: column; gap: 1rem;">
           <div>
             <p style="margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);">m/z</p>
@@ -252,7 +252,7 @@ const sectionRailTabs: ModalTab[] = [
         </p>
       </div>
 
-      <BaseModal v-model="sheetOpen" variant="sheet" size="md" title="Apply to 12 selected wells?">
+      <BaseModal v-model:open="sheetOpen" variant="sheet" size="md" title="Apply to 12 selected wells?">
         <p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55;">
           This will set the treatment condition for wells B2–B7, C2–C7 to
           <strong>Compound X · 10 µM · 24h</strong>. The change applies immediately and can be undone within 10 seconds.
@@ -277,7 +277,7 @@ const sectionRailTabs: ModalTab[] = [
       </div>
 
       <BaseModal
-        v-model="tabsOpen"
+        v-model:open="tabsOpen"
         v-model:active-tab="tabsActive"
         layout="tabs"
         :tabs="stripTabs"
@@ -315,7 +315,7 @@ const sectionRailTabs: ModalTab[] = [
       </div>
 
       <BaseModal
-        v-model="railOpen"
+        v-model:open="railOpen"
         v-model:active-tab="railActive"
         layout="rail"
         :tabs="railTabs"
@@ -362,7 +362,7 @@ const sectionRailTabs: ModalTab[] = [
         </div>
 
         <BaseModal
-          v-model="sectionRailOpen"
+          v-model:open="sectionRailOpen"
           v-model:active-tab="state.active"
           layout="rail"
           :tabs="state.withSections ? sectionRailTabs : sectionRailTabs.map(({ section, ...tab }) => tab)"

package/src/components/BaseModal.vue

@@ -11,7 +11,7 @@ import { useEventListener } from '../composables/useEventListener'
 import { useFocusTrap } from '../composables/useFocusTrap'
 
 export interface Props {
-  modelValue: boolean
+  open: boolean
   title?: string
   subtitle?: string
   size?: ModalSize
@@ -42,7 +42,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
+  'update:open': [value: boolean]
   'update:activeTab': [id: string]
   close: []
 }>()
@@ -93,29 +93,29 @@ function isPathIcon(icon: ModalTab['icon']): icon is string | string[] {
 
 const containerRef = ref<HTMLElement | null>(null)
 
-useFocusTrap({ containerRef, active: toRef(props, 'modelValue') })
+useFocusTrap({ containerRef, active: toRef(props, 'open') })
 
-watch(() => props.modelValue, (isOpen) => {
+watch(() => props.open, (isOpen) => {
   document.body.style.overflow = isOpen ? 'hidden' : ''
 })
 
 // Every open modal listens on document, so only the most recently opened one answers Escape.
 const self = {}
-watch(() => props.modelValue, (isOpen) => {
+watch(() => props.open, (isOpen) => {
   const index = openModals.indexOf(self)
   if (isOpen && index === -1) openModals.push(self)
   if (!isOpen && index !== -1) openModals.splice(index, 1)
 }, { immediate: true })
 
 function handleEscapeKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && props.closeOnEscape && props.modelValue && openModals[openModals.length - 1] === self) {
+  if (event.key === 'Escape' && props.closeOnEscape && props.open && openModals[openModals.length - 1] === self) {
     close()
   }
 }
 
 function close() {
   if (props.closable) {
-    emit('update:modelValue', false)
+    emit('update:open', false)
     emit('close')
   }
 }
@@ -139,7 +139,7 @@ onUnmounted(() => {
   <Teleport to="body">
     <Transition :name="`modal-${variant}`">
       <div
-        v-if="modelValue"
+        v-if="open"
         :class="['mint-modal', `mint-modal--${variant}`]"
         @click="handleOverlayClick"
       >

package/src/components/BasePill.story.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import BasePill from './BasePill.vue'
-import type { PillVariant, PillSize } from '../types'
+import type { PillVariant, PillSize, Tone } from '../types'
 
-const variants: PillVariant[] = ['default', 'primary', 'success', 'warning', 'error', 'info', 'outline']
+const tones: Tone[] = ['neutral', 'primary', 'cta', 'success', 'warning', 'error', 'info']
+const variants: PillVariant[] = ['soft', 'outline']
 const sizes: PillSize[] = ['sm', 'md', 'lg']
 </script>
 
@@ -12,11 +13,13 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
       <template #default="{ state }">
         <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
           <BasePill
+            :tone="state.tone"
             :variant="state.variant"
             :size="state.size"
             :removable="state.removable"
             :disabled="state.disabled"
             :dot="state.dot"
+            :pulse="state.pulse"
             @remove="() => console.log('Remove clicked')"
           >
             {{ state.label }}
@@ -26,6 +29,11 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
 
       <template #controls="{ state }">
         <HstText v-model="state.label" title="Label" />
+        <HstSelect
+          v-model="state.tone"
+          title="Tone"
+          :options="tones.map(t => ({ label: t, value: t }))"
+        />
         <HstSelect
           v-model="state.variant"
           title="Variant"
@@ -39,6 +47,7 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
         <HstCheckbox v-model="state.removable" title="Removable" />
         <HstCheckbox v-model="state.disabled" title="Disabled" />
         <HstCheckbox v-model="state.dot" title="Status dot" />
+        <HstCheckbox v-model="state.pulse" title="Pulse" />
       </template>
     </Variant>
 
@@ -50,12 +59,12 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
           </p>
           <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
             <BasePill
-              v-for="variant in variants"
-              :key="variant"
-              :variant="variant"
+              v-for="tone in tones"
+              :key="tone"
+              :tone="tone"
               :size="size"
             >
-              {{ variant }}
+              {{ tone }}
             </BasePill>
           </div>
         </div>
@@ -64,16 +73,16 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
 
     <Variant title="Removable">
       <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center;">
-        <BasePill variant="primary" removable @remove="() => console.log('Removed')">
+        <BasePill tone="primary" removable @remove="() => console.log('Removed')">
           Sample A
         </BasePill>
-        <BasePill variant="success" removable @remove="() => console.log('Removed')">
+        <BasePill tone="success" removable @remove="() => console.log('Removed')">
           QC Passed
         </BasePill>
-        <BasePill variant="warning" removable @remove="() => console.log('Removed')">
+        <BasePill tone="warning" removable @remove="() => console.log('Removed')">
           Review
         </BasePill>
-        <BasePill variant="error" removable @remove="() => console.log('Removed')">
+        <BasePill tone="error" removable @remove="() => console.log('Removed')">
           Failed
         </BasePill>
       </div>
@@ -82,12 +91,12 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
     <Variant title="Disabled">
       <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center;">
         <BasePill
-          v-for="variant in variants"
-          :key="variant"
-          :variant="variant"
+          v-for="tone in tones"
+          :key="tone"
+          :tone="tone"
           disabled
         >
-          {{ variant }}
+          {{ tone }}
         </BasePill>
       </div>
     </Variant>
@@ -98,11 +107,11 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
           Experiment Tags
         </h3>
         <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
-          <BasePill variant="primary" removable>dose-response</BasePill>
-          <BasePill variant="info" removable>IC50</BasePill>
-          <BasePill variant="success" removable>validated</BasePill>
+          <BasePill tone="primary" removable>dose-response</BasePill>
+          <BasePill tone="info" removable>IC50</BasePill>
+          <BasePill tone="success" removable>validated</BasePill>
           <BasePill variant="outline" removable>96-well</BasePill>
-          <BasePill variant="default" removable>oncology</BasePill>
+          <BasePill removable>oncology</BasePill>
         </div>
       </div>
     </Variant>
@@ -112,32 +121,43 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
         <div style="display: flex; flex-direction: column; gap: 0.75rem;">
           <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
             <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-001</span>
-            <BasePill variant="success" size="sm">Complete</BasePill>
+            <BasePill tone="success" size="sm">Complete</BasePill>
           </div>
           <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
             <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-002</span>
-            <BasePill variant="warning" size="sm">In Progress</BasePill>
+            <BasePill tone="warning" size="sm">In Progress</BasePill>
           </div>
           <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
             <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-003</span>
-            <BasePill variant="error" size="sm">Failed</BasePill>
+            <BasePill tone="error" size="sm">Failed</BasePill>
           </div>
           <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;">
             <span style="color: var(--text-primary, #1e293b); font-size: 0.875rem;">Plate PLT-004</span>
-            <BasePill variant="default" size="sm">Pending</BasePill>
+            <BasePill size="sm">Pending</BasePill>
           </div>
         </div>
       </div>
     </Variant>
 
+    <Variant title="Status dot">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+        <BasePill tone="success" dot pulse>Running</BasePill>
+        <BasePill tone="warning" dot>Paused</BasePill>
+        <BasePill tone="error" dot>Error</BasePill>
+        <BasePill tone="info" dot>Queued</BasePill>
+        <BasePill dot>Idle</BasePill>
+        <BasePill color="var(--mint-sample-3)" dot>Group C</BasePill>
+      </div>
+    </Variant>
+
     <Variant title="Outline variant">
       <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
-        <BasePill variant="outline" color="neutral">Neutral</BasePill>
-        <BasePill variant="outline" color="primary">Primary</BasePill>
-        <BasePill variant="outline" color="success">Success</BasePill>
-        <BasePill variant="outline" color="warning">Warning</BasePill>
-        <BasePill variant="outline" color="error">Error</BasePill>
-        <BasePill variant="outline" color="info">Info</BasePill>
+        <BasePill variant="outline" tone="neutral">Neutral</BasePill>
+        <BasePill variant="outline" tone="primary">Primary</BasePill>
+        <BasePill variant="outline" tone="success">Success</BasePill>
+        <BasePill variant="outline" tone="warning">Warning</BasePill>
+        <BasePill variant="outline" tone="error">Error</BasePill>
+        <BasePill variant="outline" tone="info">Info</BasePill>
       </div>
     </Variant>
   </Story>

package/src/components/BasePill.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
-/** Compact label for tags, status indicators, and badges; supports removable and icon slots. */
-import type { PillVariant, PillColor, PillSize } from '../types'
+/** Compact label for tags, status indicators, and badges; supports a status dot, removable and icon slots. */
+import { computed } from 'vue'
+import type { PillVariant, PillSize, Tone } from '../types'
 
 /**
  * BasePill - Compact label component for tags, status indicators, and badges.
  *
  * @example
  * ```vue
- * <BasePill variant="success">Active</BasePill>
- * <BasePill variant="warning" removable @remove="handleRemove">Tag</BasePill>
+ * <BasePill tone="success">Active</BasePill>
+ * <BasePill tone="warning" removable @remove="handleRemove">Tag</BasePill>
+ * <BasePill tone="success" dot pulse>Running</BasePill>
  * <BasePill :icon="true">
  *   <template #icon><CheckIcon /></template>
  *   Verified
@@ -16,10 +18,12 @@ import type { PillVariant, PillColor, PillSize } from '../types'
  * ```
  */
 interface Props {
-  /** Visual style variant */
+  /** Semantic color */
+  tone?: Tone
+  /** Tinted fill (`soft`) or a 1px border in the tone color (`outline`) */
   variant?: PillVariant
-  /** Semantic color modifier — use with variant="outline" for colored outlines */
-  color?: PillColor
+  /** Custom accent color (any CSS color); replaces the tone's accent for the dot, tint and border */
+  color?: string
   /** Size of the pill */
   size?: PillSize
   /** Show remove button */
@@ -30,18 +34,24 @@ interface Props {
   icon?: boolean
   /** Leading status dot in the pill's tone color */
   dot?: boolean
+  /** Animate the status dot (live status) */
+  pulse?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: 'default',
+  tone: 'neutral',
+  variant: 'soft',
   color: undefined,
   size: 'md',
   removable: false,
   disabled: false,
   icon: false,
   dot: false,
+  pulse: false,
 })
 
+const accentStyle = computed(() => (props.color ? { '--mint-pill-tone': props.color } : undefined))
+
 /**
  * @event remove - Emitted when the remove button is clicked
  */
@@ -61,13 +71,14 @@ function handleRemove(event: MouseEvent) {
   <span
     :class="[
       'mint-pill',
+      `mint-pill--${tone}`,
       `mint-pill--${variant}`,
-      color && `mint-pill--${color}`,
       `mint-pill--${size}`,
-      { 'mint-pill--disabled': disabled, 'mint-pill--with-icon': icon },
+      { 'mint-pill--disabled': disabled, 'mint-pill--with-icon': icon, 'mint-pill--accent': color },
     ]"
+    :style="accentStyle"
   >
-    <span v-if="dot" class="mint-pill__dot" aria-hidden="true" />
+    <span v-if="dot" :class="['mint-pill__dot', { 'mint-pill__dot--pulse': pulse }]" aria-hidden="true" />
     <span v-if="icon" class="mint-pill__icon">
       <slot name="icon" />
     </span>

package/src/components/BaseRadioGroup.story.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
 import BaseRadioGroup from './BaseRadioGroup.vue'
-import type { RadioOption } from '../types'
+import type { SelectOption } from '../types'
 
 const sizes = ['sm', 'md', 'lg'] as const
 const directions = ['vertical', 'horizontal'] as const
 
-const basicOptions: RadioOption[] = [
+const basicOptions: SelectOption<string | number>[] = [
   { value: 'option1', label: 'Option 1' },
   { value: 'option2', label: 'Option 2' },
   { value: 'option3', label: 'Option 3' },
 ]
 
-const analysisOptions: RadioOption[] = [
+const analysisOptions: SelectOption<string | number>[] = [
   { value: 'dose_response', label: 'Dose-Response', description: 'Fit dose-response curves to your data' },
   { value: 'kinetics', label: 'Kinetics', description: 'Analyze time-dependent reactions' },
   { value: 'endpoint', label: 'Endpoint', description: 'Single-timepoint measurement analysis' },
   { value: 'custom', label: 'Custom', description: 'Define your own analysis pipeline', disabled: true },
 ]
 
-const tileOptions: RadioOption[] = [
+const tileOptions: SelectOption<string | number>[] = [
   {
     value: 'standard',
     label: 'Standard analysis',

package/src/components/BaseRadioGroup.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 /** Renders a group of radio buttons in list or tile layout, horizontal or vertical. */
 import { computed } from 'vue'
-import type { RadioOption, RadioOptionInput } from '../types'
+import type { OptionPrimitive, SelectOption, SelectOptionInput } from '../types'
 import { normalizeOptionInput } from '../utils/options'
 
 interface Props {
   modelValue?: string | number
-  options: RadioOptionInput[]
+  options: SelectOptionInput[]
   name: string
   disabled?: boolean
   direction?: 'horizontal' | 'vertical'
@@ -25,7 +25,7 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | number]
 }>()
 
-const normalizedOptions = computed<RadioOption[]>(() => props.options.map(normalizeOptionInput))
+const normalizedOptions = computed<SelectOption<OptionPrimitive>[]>(() => props.options.map(normalizeOptionInput<OptionPrimitive, SelectOption<OptionPrimitive>>))
 
 function handleChange(value: string | number) {
   emit('update:modelValue', value)