@morscherlab/mld-sdk 0.6.0

package/src/components/BasePill.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { PillVariant, PillSize } 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 :icon="true">
+ *   <template #icon><CheckIcon /></template>
+ *   Verified
+ * </BasePill>
+ * ```
+ */
+interface Props {
+  /** Visual style variant */
+  variant?: PillVariant
+  /** Size of the pill */
+  size?: PillSize
+  /** Show remove button */
+  removable?: boolean
+  /** Disable interaction */
+  disabled?: boolean
+  /** Show icon slot */
+  icon?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'md',
+  removable: false,
+  disabled: false,
+  icon: false,
+})
+
+/**
+ * @event remove - Emitted when the remove button is clicked
+ */
+const emit = defineEmits<{
+  remove: []
+}>()
+
+function handleRemove(event: MouseEvent) {
+  event.stopPropagation()
+  if (!props.disabled) {
+    emit('remove')
+  }
+}
+</script>
+
+<template>
+  <span
+    :class="[
+      'mld-pill',
+      `mld-pill--${variant}`,
+      `mld-pill--${size}`,
+      { 'mld-pill--disabled': disabled, 'mld-pill--with-icon': icon },
+    ]"
+  >
+    <span v-if="icon" class="mld-pill__icon">
+      <slot name="icon" />
+    </span>
+    <span class="mld-pill__label">
+      <slot />
+    </span>
+    <button
+      v-if="removable && !disabled"
+      type="button"
+      class="mld-pill__remove"
+      aria-label="Remove"
+      @click="handleRemove"
+    >
+      <svg class="mld-pill__remove-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+        <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+      </svg>
+    </button>
+  </span>
+</template>
+
+<style>
+@import '../styles/components/pill.css';
+</style>

package/src/components/BaseRadioGroup.story.vue

@@ -0,0 +1,116 @@
+<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 },
+]
+</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>
+  </Story>
+</template>

package/src/components/BaseRadioGroup.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { RadioOption } from '../types'
+
+interface Props {
+  modelValue?: string | number
+  options: RadioOption[]
+  name: string
+  disabled?: boolean
+  direction?: 'horizontal' | 'vertical'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  direction: 'vertical',
+  size: 'md',
+})
+
+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}`]"
+    role="radiogroup"
+  >
+    <label
+      v-for="option in props.options"
+      :key="String(option.value)"
+      :class="[
+        'mld-radio-option',
+        (props.disabled || option.disabled) ? 'mld-radio-option--disabled' : '',
+      ]"
+    >
+      <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>
+    </label>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/radio-group.css';
+</style>

package/src/components/BaseSelect.story.vue

@@ -0,0 +1,110 @@
+<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' },
+]
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseSelect">
+    <Variant title="Playground">
+      <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,67 @@
+<script setup lang="ts">
+import type { SelectOption } from '../types'
+
+interface Props {
+  modelValue?: string | number
+  options: SelectOption<string | number>[]
+  placeholder?: string
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+}
+
+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"
+      :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,82 @@
+<script setup lang="ts">
+import BaseSlider from './BaseSlider.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseSlider">
+    <Variant title="Playground">
+      <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>
+  </Story>
+</template>

package/src/components/BaseSlider.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Props {
+  modelValue?: number
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  showValue?: boolean
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  disabled: false,
+  showValue: true,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+const isDragging = ref(false)
+
+const sizeConfig = computed(() => {
+  switch (props.size) {
+    case 'sm': return { height: 4, thumb: 14 }
+    case 'lg': return { height: 10, thumb: 24 }
+    default: return { height: 6, thumb: 18 }
+  }
+})
+
+const currentValue = computed(() => {
+  return props.modelValue ?? props.min
+})
+
+const percentage = computed(() => {
+  const range = props.max - props.min
+  if (range === 0) return 0
+  return ((currentValue.value - props.min) / range) * 100
+})
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', Number(target.value))
+}
+</script>
+
+<template>
+  <div class="mld-slider" :class="{ 'mld-slider--disabled': disabled }">
+    <div class="mld-slider__container">
+      <!-- Track background -->
+      <div
+        class="mld-slider__track"
+        :style="{ height: `${sizeConfig.height}px` }"
+      />
+
+      <!-- Filled track -->
+      <div
+        class="mld-slider__fill"
+        :style="{
+          height: `${sizeConfig.height}px`,
+          width: `${percentage}%`,
+        }"
+      />
+
+      <!-- Native range input -->
+      <input
+        type="range"
+        class="mld-slider__input"
+        :value="currentValue"
+        :min="min"
+        :max="max"
+        :step="step"
+        :disabled="disabled"
+        :aria-label="`Value: ${currentValue}`"
+        :aria-valuemin="min"
+        :aria-valuemax="max"
+        :aria-valuenow="currentValue"
+        @input="handleInput"
+        @mousedown="isDragging = true"
+        @mouseup="isDragging = false"
+        @touchstart.passive="isDragging = true"
+        @touchend="isDragging = false"
+      />
+
+      <!-- Custom thumb -->
+      <div
+        class="mld-slider__thumb"
+        :class="{ 'mld-slider__thumb--dragging': isDragging }"
+        :style="{
+          width: `${sizeConfig.thumb}px`,
+          height: `${sizeConfig.thumb}px`,
+          left: `${percentage}%`,
+        }"
+      />
+    </div>
+
+    <!-- Value display -->
+    <span v-if="showValue" class="mld-slider__value">
+      {{ currentValue }}
+    </span>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/slider.css';
+</style>