@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/ToastNotification.story.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import ToastNotification from './ToastNotification.vue'
+import { useToast } from '../composables/useToast'
+
+const toast = useToast()
+
+function showSuccess() {
+  toast.success('Analysis completed successfully.')
+}
+
+function showError() {
+  toast.error('Failed to process plate data. Please try again.')
+}
+
+function showWarning() {
+  toast.warning('3 wells have missing sample assignments.')
+}
+
+function showInfo() {
+  toast.info('Export file is being generated...')
+}
+
+function showAll() {
+  toast.success('Experiment saved.')
+  setTimeout(() => toast.info('Syncing with platform...'), 300)
+  setTimeout(() => toast.warning('Low disk space detected.'), 600)
+  setTimeout(() => toast.error('Connection timeout on retry.'), 900)
+}
+
+function triggerLongToast(type: 'success' | 'error') {
+  const duration = type === 'success' ? 4000 : 6000
+  toast.show(`Progress bar TTL demo — ${duration}ms`, type, duration)
+}
+</script>
+
+<template>
+  <Story title="Feedback/ToastNotification">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+          <p style="margin: 0; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">
+            Click a button to trigger a toast notification.
+          </p>
+          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;">
+            <button
+              type="button"
+              style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #10b981; color: #fff; cursor: pointer; font-size: 0.875rem;"
+              @click="toast.success(state.message || 'Success!')"
+            >
+              Success
+            </button>
+            <button
+              type="button"
+              style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #ef4444; color: #fff; cursor: pointer; font-size: 0.875rem;"
+              @click="toast.error(state.message || 'Error!')"
+            >
+              Error
+            </button>
+            <button
+              type="button"
+              style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #f59e0b; color: #fff; cursor: pointer; font-size: 0.875rem;"
+              @click="toast.warning(state.message || 'Warning!')"
+            >
+              Warning
+            </button>
+            <button
+              type="button"
+              style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #3b82f6; color: #fff; cursor: pointer; font-size: 0.875rem;"
+              @click="toast.info(state.message || 'Info!')"
+            >
+              Info
+            </button>
+          </div>
+          <ToastNotification />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.message" title="Message" />
+      </template>
+    </Variant>
+
+    <Variant title="All Types">
+      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;">
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #10b981; color: #fff; cursor: pointer; font-size: 0.875rem;"
+            @click="showSuccess"
+          >
+            Success Toast
+          </button>
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #ef4444; color: #fff; cursor: pointer; font-size: 0.875rem;"
+            @click="showError"
+          >
+            Error Toast
+          </button>
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #f59e0b; color: #fff; cursor: pointer; font-size: 0.875rem;"
+            @click="showWarning"
+          >
+            Warning Toast
+          </button>
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #3b82f6; color: #fff; cursor: pointer; font-size: 0.875rem;"
+            @click="showInfo"
+          >
+            Info Toast
+          </button>
+        </div>
+        <ToastNotification />
+      </div>
+    </Variant>
+
+    <Variant title="Multiple Toasts">
+      <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+        <button
+          type="button"
+          style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
+          @click="showAll"
+        >
+          Show All Types (stacked)
+        </button>
+        <p style="margin: 0; color: var(--text-muted, #94a3b8); font-size: 0.75rem;">
+          Click to see multiple toasts stacked. Click any toast to dismiss it.
+        </p>
+        <ToastNotification />
+      </div>
+    </Variant>
+    <Variant title="Progress bar — 4s / 6s TTL">
+      <div style="padding: 2rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
+        <button
+          type="button"
+          style="padding: 0.5rem 1rem; border-radius: 0.375rem; background: var(--mint-success); color: white; border: none; cursor: pointer;"
+          @click="triggerLongToast('success')"
+        >
+          Show success (4s)
+        </button>
+        <button
+          type="button"
+          style="padding: 0.5rem 1rem; border-radius: 0.375rem; background: var(--mint-error); color: white; border: none; cursor: pointer;"
+          @click="triggerLongToast('error')"
+        >
+          Show error (6s)
+        </button>
+        <p style="margin: 0; font-size: 0.8125rem; color: var(--text-muted);">
+          Watch the bottom progress bar shrink over the toast's TTL.
+        </p>
+        <ToastNotification />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/ToastNotification.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+/** Teleported toast stack driven by useToast, with auto-dismiss progress bar and click-to-close on each notification. */
+import { useToast } from '../composables/useToast'
+import type { Toast } from '../types'
+
+const { toasts, dismiss } = useToast()
+
+const accentColors: Record<Toast['type'], string> = {
+  success: '#10B981',
+  error: '#EF4444',
+  warning: '#F59E0B',
+  info: '#3B82F6',
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="mld-toast__container">
+      <TransitionGroup name="toast">
+        <div
+          v-for="toast in toasts"
+          :key="toast.id"
+          :class="['mld-toast__item', `mld-toast__item--${toast.type}`]"
+          :style="{
+            borderLeftColor: accentColors[toast.type],
+          }"
+          role="alert"
+          @click="dismiss(toast.id)"
+        >
+          <!-- Lucide circle-check -->
+          <svg v-if="toast.type === 'success'" class="mld-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+            <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
+          </svg>
+          <!-- Lucide circle-x -->
+          <svg v-else-if="toast.type === 'error'" class="mld-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+            <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
+          </svg>
+          <!-- Lucide triangle-alert -->
+          <svg v-else-if="toast.type === 'warning'" class="mld-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+            <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />
+          </svg>
+          <!-- Lucide info -->
+          <svg v-else class="mld-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+            <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
+          </svg>
+          <span class="mld-toast__message">{{ toast.message }}</span>
+          <span
+            class="mld-toast__progress"
+            :style="{
+              backgroundColor: accentColors[toast.type],
+              animationDuration: `${toast.duration ?? 3500}ms`,
+            }"
+          />
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<style>
+@import '../styles/components/toast.css';
+</style>

package/src/components/Tooltip.story.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import Tooltip from './Tooltip.vue'
+
+const positions: ('top' | 'bottom' | 'left' | 'right')[] = ['top', 'bottom', 'left', 'right']
+</script>
+
+<template>
+  <Story title="Data Display/Tooltip">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 4rem; display: flex; align-items: center; justify-content: center;">
+          <Tooltip :text="state.text" :position="state.position" :delay="state.delay">
+            <button
+              type="button"
+              style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer;"
+            >
+              Hover me
+            </button>
+          </Tooltip>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.text" title="Tooltip Text" />
+        <HstSelect
+          v-model="state.position"
+          title="Position"
+          :options="positions.map(p => ({ label: p, value: p }))"
+        />
+        <HstSlider v-model="state.delay" title="Delay (ms)" :min="0" :max="1000" :step="50" />
+      </template>
+    </Variant>
+
+    <Variant title="All Positions">
+      <div style="padding: 6rem; display: flex; gap: 3rem; align-items: center; justify-content: center; flex-wrap: wrap;">
+        <Tooltip
+          v-for="pos in positions"
+          :key="pos"
+          :text="`Tooltip on ${pos}`"
+          :position="pos"
+          :delay="100"
+        >
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; min-width: 100px; text-align: center;"
+          >
+            {{ pos }}
+          </button>
+        </Tooltip>
+      </div>
+    </Variant>
+
+    <Variant title="On Text Content">
+      <div style="padding: 4rem; max-width: 500px; margin: 0 auto; line-height: 1.8; color: var(--text-primary, #1e293b);">
+        <p style="margin: 0;">
+          The experiment used
+          <Tooltip text="Dimethyl sulfoxide - a polar aprotic solvent" position="top" :delay="100">
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--mint-primary, #3B82F6);">DMSO</span>
+          </Tooltip>
+          as the vehicle control. Samples were incubated at
+          <Tooltip text="Standard mammalian cell culture temperature" position="top" :delay="100">
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--mint-primary, #3B82F6);">37 C</span>
+          </Tooltip>
+          for 24 hours before
+          <Tooltip text="3-(4,5-dimethylthiazol-2-yl)-2,5-diphenyltetrazolium bromide" position="top" :delay="100">
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--mint-primary, #3B82F6);">MTT</span>
+          </Tooltip>
+          assay readout.
+        </p>
+      </div>
+    </Variant>
+
+    <Variant title="On Icon Buttons">
+      <div style="padding: 4rem; display: flex; gap: 1rem; align-items: center; justify-content: center;">
+        <Tooltip text="Add new sample" position="bottom" :delay="100">
+          <button type="button" style="padding: 0.5rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); cursor: pointer; display: flex; align-items: center; justify-content: center;">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 5v14M5 12h14" />
+            </svg>
+          </button>
+        </Tooltip>
+        <Tooltip text="Export results" position="bottom" :delay="100">
+          <button type="button" style="padding: 0.5rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); cursor: pointer; display: flex; align-items: center; justify-content: center;">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg>
+          </button>
+        </Tooltip>
+        <Tooltip text="Delete experiment" position="bottom" :delay="100">
+          <button type="button" style="padding: 0.5rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #ef4444;">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="3 6 5 6 21 6" />
+              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+            </svg>
+          </button>
+        </Tooltip>
+      </div>
+    </Variant>
+
+    <Variant title="Shortcut chip">
+      <div style="padding: 4rem 2rem; display: flex; gap: 2rem; justify-content: center;">
+        <Tooltip text="Save file" shortcut="⌘S">
+          <button style="padding: 0.5rem 1rem; border-radius: 0.375rem; border: 1px solid var(--border-color); background: var(--bg-card); cursor: pointer;">Save</button>
+        </Tooltip>
+        <Tooltip text="Run analysis" shortcut="⌘↵" position="bottom">
+          <button style="padding: 0.5rem 1rem; border-radius: 0.375rem; border: 1px solid var(--border-color); background: var(--bg-card); cursor: pointer;">Run</button>
+        </Tooltip>
+        <Tooltip text="Next cell" shortcut="J">
+          <button style="padding: 0.5rem 1rem; border-radius: 0.375rem; border: 1px solid var(--border-color); background: var(--bg-card); cursor: pointer;">Next</button>
+        </Tooltip>
+      </div>
+    </Variant>
+
+    <Variant title="Multi-line (maxWidth)">
+      <div style="padding: 4rem 2rem; display: flex; justify-content: center;">
+        <Tooltip
+          text="This action will permanently remove all associated analysis results and cannot be undone. Affected wells: C2, C3, C4."
+          :max-width="260"
+        >
+          <button style="padding: 0.5rem 1rem; border-radius: 0.375rem; border: 1px solid var(--mint-error); color: var(--mint-error); background: transparent; cursor: pointer;">Delete experiment</button>
+        </Tooltip>
+      </div>
+    </Variant>
+
+    <Variant title="Auto-flip near viewport edge">
+      <div style="padding: 4rem 2rem; display: flex; justify-content: space-between; align-items: center; min-height: 100px;">
+        <Tooltip text="Wants to be on the left but will flip right" position="left">
+          <button style="padding: 0.5rem 1rem; border-radius: 0.375rem; border: 1px solid var(--border-color); background: var(--bg-card); cursor: pointer;">Left edge</button>
+        </Tooltip>
+        <Tooltip text="Wants to be on the right but will flip left" position="right">
+          <button style="padding: 0.5rem 1rem; border-radius: 0.375rem; border: 1px solid var(--border-color); background: var(--bg-card); cursor: pointer;">Right edge</button>
+        </Tooltip>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/Tooltip.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+/** Floating tooltip using @floating-ui with auto-flip, delay, optional keyboard shortcut badge, and body Teleport. */
+import { ref, onBeforeUnmount, nextTick } from 'vue'
+import { computePosition, flip, offset, shift, type Placement } from '@floating-ui/dom'
+
+interface Props {
+  text: string
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  delay?: number
+  shortcut?: string
+  maxWidth?: string | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: 'top',
+  delay: 200,
+  shortcut: undefined,
+  maxWidth: undefined,
+})
+
+const tooltipId = `mld-tooltip-${Math.random().toString(36).slice(2, 9)}`
+const visible = ref(false)
+const actualPlacement = ref<Placement>(props.position)
+const triggerRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+const coords = ref({ top: '0px', left: '0px' })
+let timeoutId: ReturnType<typeof setTimeout> | undefined
+
+async function updatePosition() {
+  if (!triggerRef.value || !contentRef.value) return
+
+  const { x, y, placement } = await computePosition(triggerRef.value, contentRef.value, {
+    placement: props.position,
+    middleware: [
+      offset(6),
+      flip(),
+      shift({ padding: 8 }),
+    ],
+  })
+
+  coords.value = { top: `${y}px`, left: `${x}px` }
+  actualPlacement.value = placement
+}
+
+function addListeners() {
+  window.addEventListener('scroll', updatePosition, { passive: true, capture: true })
+  window.addEventListener('resize', updatePosition)
+}
+
+function removeListeners() {
+  window.removeEventListener('scroll', updatePosition, { capture: true })
+  window.removeEventListener('resize', updatePosition)
+}
+
+async function show() {
+  timeoutId = setTimeout(async () => {
+    visible.value = true
+    await nextTick()
+    await updatePosition()
+    addListeners()
+  }, props.delay)
+}
+
+function hide() {
+  clearTimeout(timeoutId)
+  timeoutId = undefined
+  visible.value = false
+  removeListeners()
+}
+
+onBeforeUnmount(() => {
+  clearTimeout(timeoutId)
+  removeListeners()
+})
+
+function resolvedMaxWidth(value: string | number | undefined): string | undefined {
+  if (value === undefined) return undefined
+  return typeof value === 'number' ? `${value}px` : value
+}
+</script>
+
+<template>
+  <span
+    ref="triggerRef"
+    class="mld-tooltip"
+    :aria-describedby="visible ? tooltipId : undefined"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focusin="show"
+    @focusout="hide"
+  >
+    <slot />
+    <Teleport to="body">
+      <span
+        v-if="visible"
+        :id="tooltipId"
+        ref="contentRef"
+        :class="[
+          'mld-tooltip__content',
+          `mld-tooltip__content--${actualPlacement}`,
+          maxWidth ? 'mld-tooltip__content--multiline' : '',
+        ]"
+        :style="{
+          top: coords.top,
+          left: coords.left,
+          maxWidth: resolvedMaxWidth(maxWidth),
+        }"
+        role="tooltip"
+      >
+        <span class="mld-tooltip__body">{{ text }}</span>
+        <kbd v-if="shortcut" class="mld-tooltip__shortcut">{{ shortcut }}</kbd>
+      </span>
+    </Teleport>
+  </span>
+</template>
+
+<style>
+@import '../styles/components/tooltip.css';
+</style>

package/src/components/UnitInput.story.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import UnitInput from './UnitInput.vue'
+
+const sizes: ('sm' | 'md' | 'lg')[] = ['sm', 'md', 'lg']
+
+const concentrationValue = ref<number | undefined>(10)
+const concentrationUnit = ref('uM')
+
+const concentrationUnits = [
+  { value: 'M', label: 'M', factor: 1, group: 'Molar' },
+  { value: 'mM', label: 'mM', factor: 1e-3, group: 'Molar' },
+  { value: 'uM', label: 'uM', factor: 1e-6, group: 'Molar' },
+  { value: 'nM', label: 'nM', factor: 1e-9, group: 'Molar' },
+  { value: 'pM', label: 'pM', factor: 1e-12, group: 'Molar' },
+  { value: 'mg/mL', label: 'mg/mL', factor: 1e-3, group: 'Mass' },
+  { value: 'ug/mL', label: 'ug/mL', factor: 1e-6, group: 'Mass' },
+  { value: 'ng/mL', label: 'ng/mL', factor: 1e-9, group: 'Mass' },
+]
+
+const volumeUnits = [
+  { value: 'L', label: 'L', factor: 1 },
+  { value: 'mL', label: 'mL', factor: 1e-3 },
+  { value: 'uL', label: 'uL', factor: 1e-6 },
+  { value: 'nL', label: 'nL', factor: 1e-9 },
+]
+
+const temperatureUnits = [
+  { value: 'C', label: 'Celsius' },
+  { value: 'F', label: 'Fahrenheit' },
+  { value: 'K', label: 'Kelvin' },
+]
+
+const weightUnits = [
+  { value: 'kg', label: 'kg', factor: 1000 },
+  { value: 'g', label: 'g', factor: 1 },
+  { value: 'mg', label: 'mg', factor: 1e-3 },
+  { value: 'ug', label: 'ug', factor: 1e-6 },
+]
+</script>
+
+<template>
+  <Story title="Scientific/UnitInput">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
+          <UnitInput
+            v-model="concentrationValue"
+            v-model:unit="concentrationUnit"
+            :units="concentrationUnits"
+            :placeholder="state.placeholder"
+            :size="state.size"
+            :disabled="state.disabled"
+            :error="state.error"
+            :convert-on-unit-change="state.convertOnUnitChange"
+            :precision="state.precision"
+          />
+        </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 }))"
+        />
+        <HstSlider v-model="state.precision" title="Precision" :min="0" :max="8" :step="1" />
+        <HstCheckbox v-model="state.convertOnUnitChange" title="Convert on Unit Change" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.error" title="Error" />
+      </template>
+    </Variant>
+
+    <Variant title="Concentration (Grouped Units)">
+      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
+        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          Grouped units with automatic conversion
+        </p>
+        <UnitInput
+          :model-value="10"
+          unit="uM"
+          :units="concentrationUnits"
+          convert-on-unit-change
+          :precision="3"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Volume">
+      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
+        <UnitInput
+          :model-value="250"
+          unit="uL"
+          :units="volumeUnits"
+          convert-on-unit-change
+          :precision="2"
+          placeholder="Enter volume"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Temperature (No Conversion)">
+      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
+        <UnitInput
+          :model-value="37"
+          unit="C"
+          :units="temperatureUnits"
+          placeholder="Enter temperature"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Weight with Min/Max">
+      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
+        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          Clamped between 0 and 1000
+        </p>
+        <UnitInput
+          :model-value="5.5"
+          unit="mg"
+          :units="weightUnits"
+          :min="0"
+          :max="1000"
+          :step="0.1"
+          convert-on-unit-change
+          :precision="2"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; max-width: 350px; margin: 0 auto; 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>
+          <UnitInput
+            :model-value="10"
+            unit="uM"
+            :units="concentrationUnits"
+            :size="size"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
+        <UnitInput
+          :model-value="10"
+          unit="uM"
+          :units="concentrationUnits"
+          error
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled State">
+      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
+        <UnitInput
+          :model-value="37"
+          unit="C"
+          :units="temperatureUnits"
+          disabled
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Refresh · Clean Bordered + primary-softer chip">
+      <div style="padding: 2rem; max-width: 360px; display: flex; flex-direction: column; gap: 1rem;">
+        <UnitInput
+          :model-value="12.5"
+          unit="mg"
+          :units="[
+            { value: 'mg', label: 'mg' },
+            { value: 'g', label: 'g' },
+            { value: 'µg', label: 'µg' },
+            { value: 'kg', label: 'kg' },
+          ]"
+        />
+        <UnitInput
+          :model-value="37.0"
+          unit="°C"
+          :units="[
+            { value: '°C', label: '°C' },
+            { value: '°F', label: '°F' },
+            { value: 'K', label: 'K' },
+          ]"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>