@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/BaseSlider.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+/** Renders a range slider with a filled track, optional value display, and size variants. */
+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
+})
+
+// Thumb-in-bounds offset (Radix UI pattern). Without this, the thumb's
+// center lands at left=0%/100% and overhangs the track by halfWidth at
+// each end. Linearly interpolating an inward push of halfWidth at percent=0
+// to halfWidth-pull at percent=100 keeps the thumb's *edges* — not its
+// center — aligned with the track edges.
+const thumbPosition = computed(() => {
+  const halfWidth = sizeConfig.value.thumb / 2
+  const offsetPx = (halfWidth * (50 - percentage.value)) / 50
+  return `calc(${percentage.value}% + ${offsetPx}px)`
+})
+
+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 — extends to the thumb's center so the two visually
+           meet at every position (no gap at the right edge, no overshoot
+           at the left). -->
+      <div
+        class="mld-slider__fill"
+        :style="{
+          height: `${sizeConfig.height}px`,
+          width: thumbPosition,
+        }"
+      />
+
+      <!-- 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 — translateX(-50%) centers it on `left` -->
+      <div
+        class="mld-slider__thumb"
+        :class="{ 'mld-slider__thumb--dragging': isDragging }"
+        :style="{
+          width: `${sizeConfig.thumb}px`,
+          height: `${sizeConfig.thumb}px`,
+          left: thumbPosition,
+        }"
+      />
+    </div>
+
+    <!-- Value display -->
+    <span v-if="showValue" class="mld-slider__value">
+      {{ currentValue }}
+    </span>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/slider.css';
+</style>

package/src/components/BaseTabs.story.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseTabs from './BaseTabs.vue'
+import type { TabItem } from '../types'
+
+const activeTab = ref('overview')
+
+const basicTabs: TabItem[] = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'samples', label: 'Samples' },
+  { id: 'results', label: 'Results' },
+  { id: 'settings', label: 'Settings' },
+]
+
+const tabsWithBadges: TabItem[] = [
+  { id: 'inbox', label: 'Inbox', badge: 12 },
+  { id: 'drafts', label: 'Drafts', badge: 3 },
+  { id: 'sent', label: 'Sent' },
+  { id: 'archive', label: 'Archive', disabled: true },
+]
+
+const tabsWithIcons: TabItem[] = [
+  { id: 'plate', label: 'Plate Map', icon: '\u{1F9EA}' },
+  { id: 'data', label: 'Raw Data', icon: '\u{1F4CA}' },
+  { id: 'analysis', label: 'Analysis', icon: '\u{1F52C}' },
+]
+
+const variants = ['underline', 'pills'] as const
+
+function initPlayground() {
+  return {
+    activeTab: 'overview',
+    variant: 'underline' as const,
+  }
+}
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseTabs">
+    <Variant title="Playground" :init-state="initPlayground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <BaseTabs
+            v-model="state.activeTab"
+            :tabs="basicTabs"
+            :variant="state.variant"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Active tab: <code>{{ state.activeTab }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="variants.map(v => ({ label: v, value: v }))"
+        />
+        <HstSelect
+          v-model="state.activeTab"
+          title="Active Tab"
+          :options="basicTabs.map(t => ({ label: t.label, value: t.id }))"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="All Variants">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 2rem;">
+        <div v-for="variant in variants" :key="variant">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ variant }}
+          </p>
+          <BaseTabs
+            v-model="activeTab"
+            :tabs="basicTabs"
+            :variant="variant"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Badges">
+      <div style="padding: 2rem;">
+        <BaseTabs
+          model-value="inbox"
+          :tabs="tabsWithBadges"
+          variant="underline"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Icons">
+      <div style="padding: 2rem;">
+        <BaseTabs
+          model-value="plate"
+          :tabs="tabsWithIcons"
+          variant="pills"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Disabled Tab">
+      <div style="padding: 2rem;">
+        <BaseTabs
+          model-value="inbox"
+          :tabs="tabsWithBadges"
+          variant="underline"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Pills — matches SegmentedControl.card">
+      <div style="padding: 2rem; display: flex; justify-content: center;">
+        <BaseTabs
+          v-model="activeTab"
+          variant="pills"
+          :tabs="[
+            { id: 'overview', label: 'Overview' },
+            { id: 'samples', label: 'Samples' },
+            { id: 'results', label: 'Results' },
+          ]"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseTabs.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/** Renders a tab bar with underline or pills variant, badges, icons, and disabled tab support. */
+import { computed } from 'vue'
+import type { TabItem } from '../types'
+
+interface Props {
+  modelValue: string
+  tabs: TabItem[]
+  variant?: 'underline' | 'pills'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'underline',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const activeTab = computed(() => props.modelValue)
+
+function selectTab(tabId: string) {
+  const tab = props.tabs.find(t => t.id === tabId)
+  if (tab && !tab.disabled) {
+    emit('update:modelValue', tabId)
+  }
+}
+</script>
+
+<template>
+  <div :class="['mld-tabs', `mld-tabs--${variant}`]" role="tablist">
+    <button
+      v-for="tab in tabs"
+      :key="tab.id"
+      type="button"
+      role="tab"
+      :aria-selected="activeTab === tab.id"
+      :aria-disabled="tab.disabled"
+      :class="[
+        'mld-tab',
+        activeTab === tab.id ? 'mld-tab--active' : '',
+        tab.disabled ? 'mld-tab--disabled' : '',
+      ]"
+      @click="selectTab(tab.id)"
+    >
+      <span class="mld-tab__content">
+        <span v-if="tab.icon" class="mld-tab__icon">{{ tab.icon }}</span>
+        {{ tab.label }}
+        <span v-if="tab.badge !== undefined" class="mld-tab__badge">
+          {{ tab.badge }}
+        </span>
+      </span>
+    </button>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/tabs.css';
+</style>

package/src/components/BaseTextarea.story.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import BaseTextarea from './BaseTextarea.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+const resizeOptions = ['none', 'vertical', 'horizontal', 'both'] as const
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseTextarea">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+          <BaseTextarea
+            v-model="state.value"
+            :placeholder="state.placeholder"
+            :disabled="state.disabled"
+            :readonly="state.readonly"
+            :error="state.error"
+            :size="state.size"
+            :rows="state.rows"
+            :resize="state.resize"
+            :maxlength="state.useMaxlength ? state.maxlength : undefined"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Value: <code>{{ JSON.stringify(state.value) }}</code>
+            <span v-if="state.useMaxlength"> ({{ (state.value || '').length }}/{{ state.maxlength }})</span>
+          </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 }))"
+        />
+        <HstSelect
+          v-model="state.resize"
+          title="Resize"
+          :options="resizeOptions.map(r => ({ label: r, value: r }))"
+        />
+        <HstSlider v-model="state.rows" title="Rows" :min="1" :max="20" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.readonly" title="Readonly" />
+        <HstCheckbox v-model="state.error" title="Error" />
+        <HstCheckbox v-model="state.useMaxlength" title="Use Maxlength" />
+        <HstSlider v-model="state.maxlength" title="Maxlength" :min="10" :max="500" />
+      </template>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div style="padding: 2rem; max-width: 500px; 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>
+          <BaseTextarea :size="size" placeholder="Enter notes..." :rows="3" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <BaseTextarea
+          model-value="Invalid content"
+          error
+          placeholder="Something went wrong..."
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <BaseTextarea
+          model-value="This textarea is disabled and cannot be edited."
+          disabled
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Readonly">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <BaseTextarea
+          model-value="This content is readonly. You can select and copy but not edit."
+          readonly
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseTextarea.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+/** Renders a styled `<textarea>` with configurable rows, resize mode, size, and error state. */
+interface Props {
+  modelValue?: string
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  rows?: number
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both'
+  maxlength?: number
+  ariaDescribedby?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  readonly: false,
+  error: false,
+  size: 'md',
+  rows: 3,
+  resize: 'vertical',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+}>()
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLTextAreaElement
+  emit('update:modelValue', target.value)
+}
+</script>
+
+<template>
+  <textarea
+    :value="props.modelValue"
+    :placeholder="props.placeholder"
+    :disabled="props.disabled"
+    :readonly="props.readonly"
+    :rows="props.rows"
+    :maxlength="props.maxlength"
+    :aria-invalid="props.error || undefined"
+    :aria-describedby="props.ariaDescribedby || undefined"
+    :class="[
+      'mld-textarea',
+      `mld-textarea--${props.size}`,
+      `mld-textarea--resize-${props.resize}`,
+      props.error ? 'mld-textarea--error' : '',
+      props.disabled ? 'mld-textarea--disabled' : '',
+    ]"
+    @input="handleInput"
+    @focus="emit('focus', $event)"
+    @blur="emit('blur', $event)"
+  />
+</template>
+
+<style>
+@import '../styles/components/textarea.css';
+</style>

package/src/components/BaseToggle.story.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseToggle from './BaseToggle.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+const toggleOn = ref(true)
+const toggleOff = ref(false)
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseToggle">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <BaseToggle
+            v-model="state.value"
+            :label="state.label"
+            :disabled="state.disabled"
+            :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 }">
+        <HstText v-model="state.label" title="Label" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.value" title="Value" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem;">
+        <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>
+          <BaseToggle v-model="toggleOn" :label="`${size} toggle`" :size="size" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="On and Off States">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem;">
+        <BaseToggle v-model="toggleOn" label="Toggle is ON" />
+        <BaseToggle v-model="toggleOff" label="Toggle is OFF" />
+      </div>
+    </Variant>
+
+    <Variant title="Without Label">
+      <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: center;">
+        <BaseToggle v-model="toggleOn" size="sm" />
+        <BaseToggle v-model="toggleOn" size="md" />
+        <BaseToggle v-model="toggleOn" size="lg" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled States">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem;">
+        <BaseToggle :model-value="false" label="Disabled (off)" disabled />
+        <BaseToggle :model-value="true" label="Disabled (on)" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="Settings Example">
+      <div style="padding: 2rem; max-width: 400px; display: flex; flex-direction: column; gap: 1rem;">
+        <BaseToggle :model-value="true" label="Dark mode" />
+        <BaseToggle :model-value="true" label="Auto-save results" />
+        <BaseToggle :model-value="false" label="Show advanced options" />
+        <BaseToggle :model-value="false" label="Beta features" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseToggle.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+/** Renders an on/off toggle switch with label, size, and keyboard interaction support. */
+interface Props {
+  modelValue?: boolean
+  label?: string
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  reverse?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  disabled: false,
+  size: 'md',
+  reverse: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+function toggle() {
+  if (!props.disabled) {
+    emit('update:modelValue', !props.modelValue)
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === ' ' || event.key === 'Enter') {
+    event.preventDefault()
+    toggle()
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'mld-toggle',
+      reverse ? 'mld-toggle--reverse' : '',
+      disabled ? 'mld-toggle--disabled' : '',
+    ]"
+    @click="toggle"
+  >
+    <div
+      role="switch"
+      :tabindex="disabled ? -1 : 0"
+      :aria-checked="modelValue"
+      :aria-label="label || 'Toggle'"
+      :class="[
+        'mld-toggle__track',
+        `mld-toggle__track--${size}`,
+        modelValue ? 'mld-toggle__track--on' : 'mld-toggle__track--off',
+      ]"
+      @keydown="handleKeydown"
+    >
+      <span
+        :class="[
+          'mld-toggle__knob',
+          `mld-toggle__knob--${size}`,
+          modelValue ? `mld-toggle__knob--on-${size}` : 'mld-toggle__knob--off',
+        ]"
+      />
+    </div>
+    <span
+      v-if="label"
+      :class="['mld-toggle__label', `mld-toggle__label--${size}`]"
+    >
+      {{ label }}
+    </span>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/toggle.css';
+</style>