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

package/src/components/BaseSelect.vue

@@ -1,89 +0,0 @@
-<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

@@ -1,122 +0,0 @@
-<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

@@ -1,126 +0,0 @@
-<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

@@ -1,127 +0,0 @@
-<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

@@ -1,82 +0,0 @@
-<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, TabItemInput } from '../types'
-import { normalizeItemInput } from '../utils/items'
-
-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)
-  }
-}
-</script>
-
-<template>
-  <div :class="['mint-tabs', `mint-tabs--${variant}`]" role="tablist">
-    <button
-      v-for="tab in normalizedTabs"
-      :key="tab.id"
-      type="button"
-      role="tab"
-      :aria-selected="activeTab === tab.id"
-      :aria-disabled="tab.disabled"
-      :class="[
-        'mint-tab',
-        activeTab === tab.id ? 'mint-tab--active' : '',
-        tab.disabled ? 'mint-tab--disabled' : '',
-      ]"
-      @click="selectTab(tab.id)"
-    >
-      <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

@@ -1,91 +0,0 @@
-<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>