@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

package/src/components/BaseSelect.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+/** Renders a native `<select>` element with size, error, and disabled states. */
+import { computed, useAttrs } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import type { SelectOption, SelectOptionInput } from '../types'
+import { findOptionByDomValue, normalizeOptionInput } from '../utils/options'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  modelValue?: string | number
+  options: SelectOptionInput<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 attrs = useAttrs()
+
+const controlAttrs = computed(() => {
+  const { class: _class, style: _style, ...nativeAttrs } = attrs
+  return nativeAttrs
+})
+const wrapperAttrs = computed<Pick<HTMLAttributes, 'class' | 'style'>>(() => ({
+  class: attrs.class as HTMLAttributes['class'],
+  style: attrs.style as HTMLAttributes['style'],
+}))
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+const normalizedOptions = computed<SelectOption<string | number>[]>(() =>
+  props.options.map(normalizeOptionInput)
+)
+
+function handleChange(event: Event) {
+  const target = event.target as HTMLSelectElement
+  const option = findOptionByDomValue(normalizedOptions.value, target.value)
+  emit('update:modelValue', option?.value ?? target.value)
+}
+</script>
+
+<template>
+  <div v-bind="wrapperAttrs" class="mint-select">
+    <select
+      v-bind="controlAttrs"
+      :value="modelValue"
+      :disabled="disabled"
+      :aria-invalid="error || undefined"
+      :aria-describedby="ariaDescribedby || undefined"
+      :class="[
+        'mint-select__control',
+        `mint-select__control--${size}`,
+        error ? 'mint-select__control--error' : '',
+        disabled ? 'mint-select__control--disabled' : '',
+      ]"
+      @change="handleChange"
+    >
+      <option v-if="placeholder" value="" disabled>
+        {{ placeholder }}
+      </option>
+      <option
+        v-for="option in normalizedOptions"
+        :key="String(option.value)"
+        :value="option.value"
+        :disabled="option.disabled"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+    <div class="mint-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>

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="mint-slider" :class="{ 'mint-slider--disabled': disabled }">
+    <div class="mint-slider__container">
+      <!-- Track background -->
+      <div
+        class="mint-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="mint-slider__fill"
+        :style="{
+          height: `${sizeConfig.height}px`,
+          width: thumbPosition,
+        }"
+      />
+
+      <!-- Native range input -->
+      <input
+        type="range"
+        class="mint-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="mint-slider__thumb"
+        :class="{ 'mint-slider__thumb--dragging': isDragging }"
+        :style="{
+          width: `${sizeConfig.thumb}px`,
+          height: `${sizeConfig.thumb}px`,
+          left: thumbPosition,
+        }"
+      />
+    </div>
+
+    <!-- Value display -->
+    <span v-if="showValue" class="mint-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,107 @@
+<script setup lang="ts">
+/** Renders a tab bar with underline or pills variant, badges, icons, and disabled tab support. */
+import { computed, type ComponentPublicInstance } from 'vue'
+import type { TabItem, TabItemInput } from '../types'
+import { normalizeItemInput } from '../utils/items'
+import { useRovingFocus } from '../composables/useRovingFocus'
+
+interface Props {
+  modelValue: string
+  tabs: TabItemInput[]
+  variant?: 'underline' | 'pills'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'underline',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const activeTab = computed(() => props.modelValue)
+const normalizedTabs = computed<TabItem[]>(() => props.tabs.map(normalizeItemInput))
+
+function isSvgIcon(icon: TabItem['icon']): icon is string | string[] {
+  if (!icon) return false
+  return Array.isArray(icon) || icon.trim().startsWith('M') || icon.trim().startsWith('m')
+}
+
+function selectTab(tabId: string) {
+  const tab = normalizedTabs.value.find(t => t.id === tabId)
+  if (tab && !tab.disabled) {
+    emit('update:modelValue', tabId)
+  }
+}
+
+const tabButtonRefs = new Map<string, HTMLElement>()
+
+function setTabButtonRef(id: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    tabButtonRefs.set(id, el)
+  } else {
+    tabButtonRefs.delete(id)
+  }
+}
+
+// Left/Right only — BaseTabs renders a single horizontal strip with no vertical
+// variant, so there is no Up/Down axis to support.
+const { handleKeydown } = useRovingFocus({
+  ids: () => normalizedTabs.value.filter(tab => !tab.disabled).map(tab => tab.id),
+  activeId: () => activeTab.value,
+  activate: selectTab,
+  getElement: (id) => tabButtonRefs.get(id),
+})
+</script>
+
+<template>
+  <div :class="['mint-tabs', `mint-tabs--${variant}`]" role="tablist">
+    <button
+      v-for="tab in normalizedTabs"
+      :id="`mint-tab-${tab.id}`"
+      :key="tab.id"
+      :ref="(el) => setTabButtonRef(tab.id, el)"
+      type="button"
+      role="tab"
+      :aria-selected="activeTab === tab.id"
+      :aria-disabled="tab.disabled"
+      :aria-controls="`mint-tabpanel-${tab.id}`"
+      :tabindex="activeTab === tab.id ? 0 : -1"
+      :class="[
+        'mint-tab',
+        activeTab === tab.id ? 'mint-tab--active' : '',
+        tab.disabled ? 'mint-tab--disabled' : '',
+      ]"
+      @click="selectTab(tab.id)"
+      @keydown="handleKeydown"
+    >
+      <span class="mint-tab__content">
+        <svg
+          v-if="isSvgIcon(tab.icon)"
+          class="mint-tab__icon mint-tab__icon--svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <template v-if="Array.isArray(tab.icon)">
+            <path v-for="(d, index) in tab.icon" :key="index" :d="d" />
+          </template>
+          <path v-else :d="tab.icon" />
+        </svg>
+        <span v-else-if="tab.icon" class="mint-tab__icon">{{ tab.icon }}</span>
+        {{ tab.label }}
+        <span v-if="tab.badge !== undefined" class="mint-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>