@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/BaseRadioGroup.story.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import BaseRadioGroup from './BaseRadioGroup.vue'
+import type { RadioOption } from '../types'
+
+const sizes = ['sm', 'md', 'lg'] as const
+const directions = ['vertical', 'horizontal'] as const
+
+const basicOptions: RadioOption[] = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+]
+
+const analysisOptions: RadioOption[] = [
+  { 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[] = [
+  {
+    value: 'standard',
+    label: 'Standard analysis',
+    description: 'Peak picking, alignment, compound ID. ~2 min per 96-well run.',
+  },
+  {
+    value: 'extended',
+    label: 'Extended analysis',
+    description: 'Adds isotope pattern verification and QC outlier detection. ~8 min per run.',
+  },
+  {
+    value: 'deep',
+    label: 'Deep analysis',
+    description: 'Full annotation against HMDB, formula prediction, fragmentation scoring. ~20 min per run.',
+  },
+]
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseRadioGroup">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+          <BaseRadioGroup
+            v-model="state.value"
+            :options="basicOptions"
+            :name="'playground-radio'"
+            :disabled="state.disabled"
+            :direction="state.direction"
+            :size="state.size"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Value: <code>{{ JSON.stringify(state.value) }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstSelect
+          v-model="state.direction"
+          title="Direction"
+          :options="directions.map(d => ({ label: d, value: d }))"
+        />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="Vertical (Default)">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <BaseRadioGroup
+          model-value="option1"
+          :options="basicOptions"
+          name="vertical-demo"
+          direction="vertical"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Horizontal">
+      <div style="padding: 2rem;">
+        <BaseRadioGroup
+          model-value="option2"
+          :options="basicOptions"
+          name="horizontal-demo"
+          direction="horizontal"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Descriptions">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <BaseRadioGroup
+          model-value="dose_response"
+          :options="analysisOptions"
+          name="analysis-type"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 2rem;">
+        <div v-for="size in sizes" :key="size">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </p>
+          <BaseRadioGroup
+            model-value="option1"
+            :options="basicOptions"
+            :name="`size-${size}`"
+            :size="size"
+            direction="horizontal"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <BaseRadioGroup
+          model-value="option2"
+          :options="basicOptions"
+          name="disabled-demo"
+          disabled
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Card Tile variant">
+      <div style="padding: 2rem; max-width: 600px;">
+        <BaseRadioGroup
+          model-value="standard"
+          variant="tile"
+          :options="tileOptions"
+          name="tile-demo"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseRadioGroup.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+/** Renders a group of radio buttons in list or tile layout, horizontal or vertical. */
+import type { RadioOption } from '../types'
+
+interface Props {
+  modelValue?: string | number
+  options: RadioOption[]
+  name: string
+  disabled?: boolean
+  direction?: 'horizontal' | 'vertical'
+  size?: 'sm' | 'md' | 'lg'
+  variant?: 'list' | 'tile'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  direction: 'vertical',
+  size: 'md',
+  variant: 'list',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+function handleChange(value: string | number) {
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <div
+    :class="['mld-radio-group', `mld-radio-group--${props.direction}`, `mld-radio-group--${props.variant}`]"
+    role="radiogroup"
+  >
+    <label
+      v-for="option in props.options"
+      :key="String(option.value)"
+      :class="[
+        'mld-radio-option',
+        props.modelValue === option.value ? 'mld-radio-option--selected' : '',
+        (props.disabled || option.disabled) ? 'mld-radio-option--disabled' : '',
+      ]"
+    >
+      <template v-if="props.variant === 'list'">
+        <div :class="['mld-radio-option__input-wrapper', `mld-radio-option__input-wrapper--${props.size}`]">
+          <input
+            type="radio"
+            :name="props.name"
+            :value="option.value"
+            :checked="props.modelValue === option.value"
+            :disabled="props.disabled || option.disabled"
+            :aria-describedby="option.description ? `${props.name}-${option.value}-desc` : undefined"
+            class="mld-radio-option__native"
+            @change="handleChange(option.value)"
+          />
+          <div
+            :class="[
+              'mld-radio-option__circle',
+              `mld-radio-option__circle--${props.size}`,
+              props.modelValue === option.value ? 'mld-radio-option__circle--checked' : '',
+            ]"
+          >
+            <div
+              v-if="props.modelValue === option.value"
+              :class="['mld-radio-option__dot', `mld-radio-option__dot--${props.size}`]"
+            />
+          </div>
+        </div>
+        <div class="mld-radio-option__content">
+          <span :class="['mld-radio-option__label', `mld-radio-option__label--${props.size}`]">
+            {{ option.label }}
+          </span>
+          <span
+            v-if="option.description"
+            :id="`${props.name}-${option.value}-desc`"
+            :class="['mld-radio-option__description', `mld-radio-option__description--${props.size}`]"
+          >
+            {{ option.description }}
+          </span>
+        </div>
+      </template>
+
+      <template v-else>
+        <input
+          type="radio"
+          :name="props.name"
+          :value="option.value"
+          :checked="props.modelValue === option.value"
+          :disabled="props.disabled || option.disabled"
+          :aria-describedby="option.description ? `${props.name}-${option.value}-desc` : undefined"
+          class="mld-radio-option__native"
+          @change="handleChange(option.value)"
+        />
+        <div class="mld-radio-option__head">
+          <div
+            :class="[
+              'mld-radio-option__circle',
+              `mld-radio-option__circle--${props.size}`,
+              props.modelValue === option.value ? 'mld-radio-option__circle--checked' : '',
+            ]"
+          >
+            <div
+              v-if="props.modelValue === option.value"
+              :class="['mld-radio-option__dot', `mld-radio-option__dot--${props.size}`]"
+            />
+          </div>
+          <span class="mld-radio-option__title">{{ option.label }}</span>
+        </div>
+        <span
+          v-if="option.description"
+          :id="`${props.name}-${option.value}-desc`"
+          class="mld-radio-option__description"
+        >
+          {{ option.description }}
+        </span>
+      </template>
+    </label>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/radio-group.css';
+</style>

package/src/components/BaseSelect.story.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import BaseSelect from './BaseSelect.vue'
+import type { SelectOption } from '../types'
+
+const sizes = ['sm', 'md', 'lg'] as const
+
+const fruitOptions: SelectOption<string>[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'date', label: 'Date' },
+  { value: 'elderberry', label: 'Elderberry', disabled: true },
+]
+
+const numericOptions: SelectOption<number>[] = [
+  { value: 6, label: '6-well' },
+  { value: 12, label: '12-well' },
+  { value: 24, label: '24-well' },
+  { value: 48, label: '48-well' },
+  { value: 96, label: '96-well' },
+  { value: 384, label: '384-well' },
+]
+
+function initPlayground() {
+  return {
+    value: 'apple',
+    placeholder: 'Select a fruit',
+    size: 'md' as const,
+    disabled: false,
+    error: false,
+  }
+}
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseSelect">
+    <Variant title="Playground" :init-state="initPlayground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+          <BaseSelect
+            v-model="state.value"
+            :options="fruitOptions"
+            :placeholder="state.placeholder"
+            :disabled="state.disabled"
+            :error="state.error"
+            :size="state.size"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Value: <code>{{ JSON.stringify(state.value) }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.error" title="Error" />
+      </template>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
+        <div v-for="size in sizes" :key="size">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </p>
+          <BaseSelect
+            :options="fruitOptions"
+            :size="size"
+            placeholder="Select a fruit..."
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Numeric Values">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <BaseSelect
+          :options="numericOptions"
+          :model-value="96"
+          placeholder="Select plate format..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Disabled Option">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <BaseSelect
+          :options="fruitOptions"
+          placeholder="Some options are disabled..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <BaseSelect
+          :options="fruitOptions"
+          placeholder="Select a fruit..."
+          error
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <BaseSelect
+          :options="fruitOptions"
+          model-value="banana"
+          disabled
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseSelect.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/** Renders a native `<select>` element with size, error, and disabled states. */
+import type { SelectOption } from '../types'
+
+interface Props {
+  modelValue?: string | number
+  options: SelectOption<string | number>[]
+  placeholder?: string
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  ariaDescribedby?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  error: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+function handleChange(event: Event) {
+  const target = event.target as HTMLSelectElement
+  const value = typeof props.modelValue === 'number'
+    ? Number(target.value)
+    : target.value
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <div class="mld-select">
+    <select
+      :value="modelValue"
+      :disabled="disabled"
+      :aria-invalid="error || undefined"
+      :aria-describedby="ariaDescribedby || undefined"
+      :class="[
+        'mld-select__control',
+        `mld-select__control--${size}`,
+        error ? 'mld-select__control--error' : '',
+        disabled ? 'mld-select__control--disabled' : '',
+      ]"
+      @change="handleChange"
+    >
+      <option v-if="placeholder" value="" disabled>
+        {{ placeholder }}
+      </option>
+      <option
+        v-for="option in options"
+        :key="String(option.value)"
+        :value="option.value"
+        :disabled="option.disabled"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+    <div class="mld-select__icon">
+      <svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/select.css';
+</style>

package/src/components/BaseSlider.story.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import BaseSlider from './BaseSlider.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+
+function initPlayground() {
+  return {
+    value: 50,
+    min: 0,
+    max: 100,
+    step: 1,
+    showValue: true,
+    disabled: false,
+    size: 'md' as const,
+  }
+}
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseSlider">
+    <Variant title="Playground" :init-state="initPlayground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+          <BaseSlider
+            v-model="state.value"
+            :min="state.min"
+            :max="state.max"
+            :step="state.step"
+            :disabled="state.disabled"
+            :show-value="state.showValue"
+            :size="state.size"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Value: <code>{{ state.value }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSlider v-model="state.value" title="Value" :min="0" :max="100" />
+        <HstSlider v-model="state.min" title="Min" :min="0" :max="50" />
+        <HstSlider v-model="state.max" title="Max" :min="50" :max="200" />
+        <HstSlider v-model="state.step" title="Step" :min="1" :max="25" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.showValue" title="Show Value" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem;">
+        <div v-for="size in sizes" :key="size">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </p>
+          <BaseSlider :model-value="50" :size="size" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Custom Range">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Temperature (0-40)</p>
+          <BaseSlider :model-value="25" :min="0" :max="40" :step="0.5" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Percentage (0-100, step 5)</p>
+          <BaseSlider :model-value="75" :min="0" :max="100" :step="5" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Concentration (1-1000)</p>
+          <BaseSlider :model-value="500" :min="1" :max="1000" :step="1" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Without Value Display">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <BaseSlider :model-value="60" :show-value="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <BaseSlider :model-value="35" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="Edge values (in-bounds thumb)">
+      <!-- Verifies the thumb-in-bounds-offset fix: at min and max the
+           thumb's edge — not its center — should align with the track,
+           so the thumb never overhangs the container. -->
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">at min (0)</p>
+          <BaseSlider :model-value="0" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">just above min (1)</p>
+          <BaseSlider :model-value="1" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">midpoint (50)</p>
+          <BaseSlider :model-value="50" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">just below max (99)</p>
+          <BaseSlider :model-value="99" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">at max (100)</p>
+          <BaseSlider :model-value="100" />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>