@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/components/Avatar.story.vue

@@ -61,9 +61,8 @@ const users = [
     </Variant>
 
     <Variant title="Default vs explicit initials">
-      <!-- Default: single letter from `name` (matches the platform's
-           getAvatarInitial helper). Pass `:initials="'XX'"` to override
-           with two letters or any other label. -->
+      <!-- Default: single letter from `name`. Pass `:initials="'XX'"` to
+           override with two letters or any other label. -->
       <div style="padding: 2rem; display: flex; gap: 2rem; align-items: center; justify-content: center;">
         <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
           <Avatar name="Estrella Pan" size="lg" />

package/src/components/Avatar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-/** Displays a user avatar as an image, a single derived initial, or a fallback icon, with a deterministic background color and optional status dot. */
+/** Displays a user avatar as an image, a single derived initial, or a fallback icon, on a quiet accent face (or an explicit `color`) with an optional status dot. */
 import { computed } from 'vue'
 
 interface Props {
@@ -17,25 +17,20 @@ const props = withDefaults(defineProps<Props>(), {
   size: 'md',
 })
 
-const PALETTE = ['#3B82F6', '#8B5CF6', '#EC4899', '#F97316', '#10B981', '#F59E0B', '#06B6D4', '#6366F1']
-
-// Default: first letter of `name`, uppercased — matches the platform's
-// canonical `getAvatarInitial(user)` helper. Consumers wanting two letters
+// Default: first letter of `name`, uppercased. Consumers wanting two letters
 // (e.g. role badges like "PI", "QC") pass `:initials="'XX'"` explicitly.
 const computedInitials = computed(() =>
   props.initials || props.name?.charAt(0).toUpperCase() || ''
 )
 
-const backgroundColor = computed(() => {
-  if (props.color) return props.color
-  if (!props.name) return undefined
-
-  let hash = 0
-  for (let i = 0; i < props.name.length; i++) {
-    hash = props.name.charCodeAt(i) + ((hash << 5) - hash)
-  }
-  return PALETTE[Math.abs(hash) % PALETTE.length]
-})
+// The quiet accent face lives in avatar.css; an explicit `color` fills the
+// face. That fill is a fixed hue (role badges), so the ink stays white in both
+// themes instead of following the theme-dependent --text-on-accent.
+const faceStyle = computed(() =>
+  props.color
+    ? { backgroundColor: props.color, color: '#fff', boxShadow: 'none' }
+    : undefined
+)
 </script>
 
 <template>
@@ -46,7 +41,7 @@ const backgroundColor = computed(() => {
   >
     <span
       class="mint-avatar__face"
-      :style="backgroundColor ? { backgroundColor } : undefined"
+      :style="faceStyle"
     >
       <img
         v-if="src"

package/src/components/BaseButton.story.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Plus, Trash2 } from 'lucide-vue-next'
 import BaseButton from './BaseButton.vue'
 import type { ButtonVariant, ButtonSize } from '../types'
 
@@ -92,5 +93,29 @@ function handleClick() {
         </BaseButton>
       </div>
     </Variant>
+
+    <Variant title="With Icon">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+        <BaseButton v-for="size in sizes" :key="size" :size="size" :icon="Plus">
+          Add sample
+        </BaseButton>
+      </div>
+    </Variant>
+
+    <Variant title="Icon Only">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem;">
+        <div v-for="size in sizes" :key="size" style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+          <BaseButton
+            v-for="variant in variants"
+            :key="variant"
+            :variant="variant"
+            :size="size"
+            :icon="Trash2"
+            :label="`Delete (${variant})`"
+          />
+          <BaseButton variant="ghost" :size="size" :icon="Trash2" label="Deleting" loading />
+        </div>
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/BaseButton.vue

@@ -1,5 +1,16 @@
 <script setup lang="ts">
-/** Renders a styled `<button>` with variant, size, loading spinner, and full-width options. */
+/**
+ * Renders a styled `<button>` with variant, size, loading spinner, and full-width options.
+ * With `icon` and no default slot it is a square icon-only button; `label` is then its accessible name.
+ *
+ * @example
+ * ```vue
+ * <BaseButton variant="primary" :loading="busy">Save</BaseButton>
+ * <BaseButton :icon="Plus">Add sample</BaseButton>
+ * <BaseButton variant="ghost" :icon="Trash2" label="Delete" />
+ * ```
+ */
+import { computed, useSlots, type Component } from 'vue'
 import type { ButtonVariant, ButtonSize } from '../types'
 
 interface Props {
@@ -9,6 +20,10 @@ interface Props {
   loading?: boolean
   type?: 'button' | 'submit' | 'reset'
   fullWidth?: boolean
+  /** Icon component (for example a lucide icon) rendered before the label, or alone when there is no default slot. */
+  icon?: Component
+  /** Accessible name and tooltip of an icon-only button. */
+  label?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,12 +33,18 @@ const props = withDefaults(defineProps<Props>(), {
   loading: false,
   type: 'button',
   fullWidth: false,
+  icon: undefined,
+  label: undefined,
 })
 
 const emit = defineEmits<{
   click: [event: MouseEvent]
 }>()
 
+const slots = useSlots()
+const iconOnly = computed(() => Boolean(props.icon) && !slots.default)
+const block = computed(() => (iconOnly.value ? 'mint-icon-button' : 'mint-button'))
+
 function handleClick(event: MouseEvent) {
   if (!props.disabled && !props.loading) {
     emit('click', event)
@@ -35,18 +56,20 @@ function handleClick(event: MouseEvent) {
   <button
     :type="type"
     :disabled="disabled || loading"
+    :aria-label="iconOnly ? label : undefined"
+    :title="iconOnly ? label : undefined"
     :class="[
-      'mint-button',
-      `mint-button--${variant}`,
-      `mint-button--${size}`,
-      fullWidth ? 'mint-button--full-width' : '',
-      (disabled || loading) ? 'mint-button--disabled' : '',
+      block,
+      `${block}--${variant}`,
+      `${block}--${size}`,
+      fullWidth && !iconOnly ? 'mint-button--full-width' : '',
+      (disabled || loading) ? `${block}--disabled` : '',
     ]"
     @click="handleClick"
   >
     <svg
       v-if="loading"
-      class="mint-button__spinner"
+      :class="iconOnly ? ['mint-icon-button__spinner', `mint-icon-button__icon--${size}`] : 'mint-button__spinner'"
       fill="none"
       viewBox="0 0 24 24"
     >
@@ -64,8 +87,14 @@ function handleClick(event: MouseEvent) {
         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
       />
     </svg>
-    <slot name="icon-left" />
-    <slot />
-    <slot name="icon-right" />
+    <span v-if="iconOnly && !loading" :class="`mint-icon-button__icon--${size}`">
+      <component :is="icon" aria-hidden="true" />
+    </span>
+    <template v-if="!iconOnly">
+      <component :is="icon" v-if="icon" class="mint-button__icon" aria-hidden="true" />
+      <slot name="icon-left" />
+      <slot />
+      <slot name="icon-right" />
+    </template>
   </button>
 </template>

package/src/components/BaseCheckbox.story.vue

@@ -81,7 +81,7 @@ function toggleOne(state: ReturnType<typeof initTriState>, sample: string) {
       <div style="padding: 2rem; max-width: 360px; display: flex; flex-direction: column; gap: 0.5rem;">
         <BaseCheckbox
           v-model="checked"
-          variant="row"
+          layout="row"
           label="Include metadata"
           description="Add method and sample context"
           :icon="icons.database"
@@ -90,7 +90,7 @@ function toggleOne(state: ReturnType<typeof initTriState>, sample: string) {
         />
         <BaseCheckbox
           :model-value="false"
-          variant="row"
+          layout="row"
           label="Attach report"
           description="Include the rendered summary PDF"
           :icon="icons.file"

package/src/components/{BaseToggle.story.vue → BaseCheckbox.switch.story.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import BaseToggle from './BaseToggle.vue'
+import BaseCheckbox from './BaseCheckbox.vue'
 
 const sizes = ['sm', 'md', 'lg'] as const
 const toggleOn = ref(true)
@@ -12,11 +12,12 @@ const icons = {
 </script>
 
 <template>
-  <Story title="Base Inputs/BaseToggle">
+  <Story title="Base Inputs/BaseCheckbox · switch">
     <Variant title="Playground">
       <template #default="{ state }">
         <div style="padding: 2rem;">
-          <BaseToggle
+          <BaseCheckbox
+            type="switch"
             v-model="state.value"
             :label="state.label"
             :disabled="state.disabled"
@@ -46,32 +47,34 @@ const icons = {
           <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" />
+          <BaseCheckbox type="switch" 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" />
+        <BaseCheckbox type="switch" v-model="toggleOn" label="Toggle is ON" />
+        <BaseCheckbox type="switch" v-model="toggleOff" label="Toggle is OFF" />
       </div>
     </Variant>
 
     <Variant title="Choice Rows">
       <div style="padding: 2rem; max-width: 360px; display: flex; flex-direction: column; gap: 0.5rem;">
-        <BaseToggle
+        <BaseCheckbox
+          type="switch"
           v-model="toggleOn"
-          variant="row"
+          layout="row"
           label="Show outliers"
           description="Keep flagged peaks visible"
           :icon="icons.eye"
           icon-color="#0ea5e9"
           icon-bg="#e0f2fe"
         />
-        <BaseToggle
+        <BaseCheckbox
+          type="switch"
           v-model="toggleOff"
-          variant="row"
+          layout="row"
           label="Log scale"
           description="Compress high-intensity spread"
           :icon="icons.chart"
@@ -83,25 +86,25 @@ const icons = {
 
     <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" />
+        <BaseCheckbox type="switch" v-model="toggleOn" size="sm" />
+        <BaseCheckbox type="switch" v-model="toggleOn" size="md" />
+        <BaseCheckbox type="switch" 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 />
+        <BaseCheckbox type="switch" :model-value="false" label="Disabled (off)" disabled />
+        <BaseCheckbox type="switch" :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 />
+        <BaseCheckbox type="switch" :model-value="true" label="Dark mode" />
+        <BaseCheckbox type="switch" :model-value="true" label="Auto-save results" />
+        <BaseCheckbox type="switch" :model-value="false" label="Show advanced options" />
+        <BaseCheckbox type="switch" :model-value="false" label="Beta features" disabled />
       </div>
     </Variant>
   </Story>

package/src/components/BaseCheckbox.vue

@@ -1,9 +1,21 @@
 <script setup lang="ts">
-/** Renders a styled checkbox with an optional label, size variants, and disabled state. */
+/**
+ * Renders a styled checkbox with an optional label, size variants, and disabled state.
+ * `type="switch"` renders an on/off switch; `layout="row"` renders a full-width settings row.
+ *
+ * @example
+ * ```vue
+ * <BaseCheckbox v-model="agree" label="I agree" />
+ * <BaseCheckbox v-model="enabled" type="switch" label="Enable auto-update" />
+ * ```
+ */
 import Tooltip from './Tooltip.vue'
+import CheckboxSwitchInternal from './internal/CheckboxSwitchInternal.vue'
 
 interface Props {
   modelValue?: boolean
+  /** `checkbox` (default) or an on/off `switch`. */
+  type?: 'checkbox' | 'switch'
   /** Partially checked (e.g. select-all over a partial selection); sets `aria-checked="mixed"`. */
   indeterminate?: boolean
   /** Accessible name for the native input when no visible `label` is rendered (e.g. table rows). */
@@ -15,15 +27,19 @@ interface Props {
   iconBg?: string
   disabled?: boolean
   size?: 'sm' | 'md' | 'lg'
-  variant?: 'default' | 'row'
+  layout?: 'inline' | 'row'
+  /** Switch only: place the switch before the label. */
+  reverse?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
   indeterminate: false,
   disabled: false,
+  type: 'checkbox',
   size: 'md',
-  variant: 'default',
+  layout: 'inline',
+  reverse: false,
 })
 
 const emit = defineEmits<{
@@ -48,16 +64,32 @@ function iconStyle(): Record<string, string> {
 </script>
 
 <template>
+  <CheckboxSwitchInternal
+    v-if="props.type === 'switch'"
+    :model-value="props.modelValue"
+    :label="props.label"
+    :aria-label="props.ariaLabel"
+    :description="props.description"
+    :icon="props.icon"
+    :icon-color="props.iconColor"
+    :icon-bg="props.iconBg"
+    :disabled="props.disabled"
+    :size="props.size"
+    :reverse="props.reverse"
+    :layout="props.layout"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
   <label
+    v-else
     :class="[
       'mint-checkbox',
-      `mint-checkbox--${props.variant}`,
+      `mint-checkbox--${props.layout}`,
       props.disabled ? 'mint-checkbox--disabled' : '',
       props.modelValue ? 'mint-checkbox--checked' : '',
     ]"
   >
     <span
-      v-if="props.variant === 'row' && props.icon"
+      v-if="props.layout === 'row' && props.icon"
       class="mint-checkbox__row-icon"
       :style="iconStyle()"
       aria-hidden="true"
@@ -80,7 +112,7 @@ function iconStyle(): Record<string, string> {
       <span v-else class="mint-checkbox__row-text-icon">{{ props.icon }}</span>
     </span>
     <span
-      v-if="props.variant === 'row' && props.label"
+      v-if="props.layout === 'row' && props.label"
       class="mint-checkbox__copy"
     >
       <Tooltip
@@ -138,7 +170,7 @@ function iconStyle(): Record<string, string> {
         </svg>
       </div>
     </div>
-    <span v-if="props.label && props.variant !== 'row'" :class="['mint-checkbox__label', `mint-checkbox__label--${props.size}`]">
+    <span v-if="props.label && props.layout !== 'row'" :class="['mint-checkbox__label', `mint-checkbox__label--${props.size}`]">
       {{ props.label }}
     </span>
   </label>

package/src/components/BaseInput.story.vue

@@ -4,7 +4,6 @@ import BaseInput from './BaseInput.vue'
 import FormField from './FormField.vue'
 
 const textValue = ref('Hello world')
-const numberValue = ref<number | undefined>(42)
 
 function initAffixes() {
   return {
@@ -36,7 +35,7 @@ function initAffixes() {
               :size="state.size"
               :disabled="state.disabled"
               :readonly="state.readonly"
-              :error="state.showError"
+              :invalid="state.showError"
             />
           </FormField>
           <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
@@ -79,17 +78,6 @@ function initAffixes() {
       </div>
     </Variant>
 
-    <Variant title="Number Input">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <FormField label="Sample Count" hint="How many samples?">
-          <BaseInput v-model="numberValue" type="number" placeholder="0" :min="0" :max="384" />
-        </FormField>
-        <p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
-          v-model: <code>{{ numberValue }}</code> (type: {{ typeof numberValue }})
-        </p>
-      </div>
-    </Variant>
-
     <Variant title="Sizes">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
         <FormField v-for="size in (['sm', 'md', 'lg'] as const)" :key="size" :label="`Size: ${size}`">
@@ -101,7 +89,7 @@ function initAffixes() {
     <Variant title="Error State">
       <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
         <FormField label="Email" error="Please enter a valid email address" required>
-          <BaseInput type="email" model-value="not-an-email" error />
+          <BaseInput type="email" model-value="not-an-email" invalid />
         </FormField>
       </div>
     </Variant>
@@ -118,7 +106,7 @@ function initAffixes() {
           <BaseInput
             v-model="state.value"
             :size="state.size"
-            :error="state.error"
+            :invalid="state.error"
             :disabled="state.disabled"
             aria-label="Volume"
           >

package/src/components/{BaseTextarea.story.vue → BaseInput.textarea.story.vue}

@@ -1,21 +1,22 @@
 <script setup lang="ts">
-import BaseTextarea from './BaseTextarea.vue'
+import BaseInput from './BaseInput.vue'
 
 const sizes = ['sm', 'md', 'lg'] as const
 const resizeOptions = ['none', 'vertical', 'horizontal', 'both'] as const
 </script>
 
 <template>
-  <Story title="Base Inputs/BaseTextarea">
+  <Story title="Base Inputs/BaseInput · textarea">
     <Variant title="Playground">
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-          <BaseTextarea
+          <BaseInput
+            type="textarea"
             v-model="state.value"
             :placeholder="state.placeholder"
             :disabled="state.disabled"
             :readonly="state.readonly"
-            :error="state.error"
+            :invalid="state.invalid"
             :size="state.size"
             :rows="state.rows"
             :resize="state.resize"
@@ -43,7 +44,7 @@ const resizeOptions = ['none', 'vertical', 'horizontal', 'both'] as const
         <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.invalid" title="Invalid" />
         <HstCheckbox v-model="state.useMaxlength" title="Use Maxlength" />
         <HstSlider v-model="state.maxlength" title="Maxlength" :min="10" :max="500" />
       </template>
@@ -55,16 +56,17 @@ const resizeOptions = ['none', 'vertical', 'horizontal', 'both'] as const
           <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" />
+          <BaseInput type="textarea" :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
+        <BaseInput
+          type="textarea"
           model-value="Invalid content"
-          error
+          invalid
           placeholder="Something went wrong..."
         />
       </div>
@@ -72,7 +74,8 @@ const resizeOptions = ['none', 'vertical', 'horizontal', 'both'] as const
 
     <Variant title="Disabled">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <BaseTextarea
+        <BaseInput
+          type="textarea"
           model-value="This textarea is disabled and cannot be edited."
           disabled
         />
@@ -81,7 +84,8 @@ const resizeOptions = ['none', 'vertical', 'horizontal', 'both'] as const
 
     <Variant title="Readonly">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <BaseTextarea
+        <BaseInput
+          type="textarea"
           model-value="This content is readonly. You can select and copy but not edit."
           readonly
         />