@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/Avatar.vue

@@ -0,0 +1,79 @@
+<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. */
+import { computed } from 'vue'
+
+interface Props {
+  name?: string
+  initials?: string
+  src?: string
+  alt?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: string
+  status?: 'online' | 'away' | 'busy' | 'offline'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  alt: '',
+  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
+// (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]
+})
+</script>
+
+<template>
+  <span
+    :class="['mld-avatar', `mld-avatar--${size}`]"
+    role="img"
+    :aria-label="alt || name || 'User avatar'"
+  >
+    <span
+      class="mld-avatar__face"
+      :style="backgroundColor ? { backgroundColor } : undefined"
+    >
+      <img
+        v-if="src"
+        :src="src"
+        :alt="alt || name || ''"
+        class="mld-avatar__image"
+      >
+      <span v-else-if="computedInitials" class="mld-avatar__initials">
+        {{ computedInitials }}
+      </span>
+      <svg
+        v-else
+        class="mld-avatar__fallback"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+      >
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+      </svg>
+    </span>
+    <span
+      v-if="status"
+      :class="['mld-avatar__status', `mld-avatar__status--${status}`]"
+      aria-hidden="true"
+    />
+  </span>
+</template>
+
+<style>
+@import '../styles/components/avatar.css';
+</style>

package/src/components/BaseButton.story.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import BaseButton from './BaseButton.vue'
+import type { ButtonVariant, ButtonSize } from '../types'
+
+const variants: ButtonVariant[] = ['primary', 'secondary', 'cta', 'danger', 'success', 'ghost']
+const sizes: ButtonSize[] = ['sm', 'md', 'lg']
+
+function handleClick() {
+  console.log('Button clicked')
+}
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseButton">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <BaseButton
+            :variant="state.variant"
+            :size="state.size"
+            :disabled="state.disabled"
+            :loading="state.loading"
+            :full-width="state.fullWidth"
+            @click="handleClick"
+          >
+            {{ state.label }}
+          </BaseButton>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.label" title="Label" />
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="variants.map(v => ({ label: v, value: v }))"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstCheckbox v-model="state.fullWidth" title="Full Width" />
+      </template>
+    </Variant>
+
+    <Variant title="All Variants">
+      <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>
+          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+            <BaseButton
+              v-for="variant in variants"
+              :key="variant"
+              :variant="variant"
+              :size="size"
+              @click="handleClick"
+            >
+              {{ variant }}
+            </BaseButton>
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Loading States">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+        <BaseButton
+          v-for="variant in variants"
+          :key="variant"
+          :variant="variant"
+          loading
+        >
+          {{ variant }}
+        </BaseButton>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled States">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+        <BaseButton
+          v-for="variant in variants"
+          :key="variant"
+          :variant="variant"
+          disabled
+        >
+          {{ variant }}
+        </BaseButton>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseButton.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+/** Renders a styled `<button>` with variant, size, loading spinner, and full-width options. */
+import type { ButtonVariant, ButtonSize } from '../types'
+
+interface Props {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  loading?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  fullWidth?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'md',
+  disabled: false,
+  loading: false,
+  type: 'button',
+  fullWidth: false,
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+function handleClick(event: MouseEvent) {
+  if (!props.disabled && !props.loading) {
+    emit('click', event)
+  }
+}
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    :class="[
+      'mld-button',
+      `mld-button--${variant}`,
+      `mld-button--${size}`,
+      fullWidth ? 'mld-button--full-width' : '',
+      (disabled || loading) ? 'mld-button--disabled' : '',
+    ]"
+    @click="handleClick"
+  >
+    <svg
+      v-if="loading"
+      class="mld-button__spinner"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        style="opacity: 0.25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        style="opacity: 0.75"
+        fill="currentColor"
+        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 />
+  </button>
+</template>
+
+<style>
+@import '../styles/components/button.css';
+</style>

package/src/components/BaseCheckbox.story.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseCheckbox from './BaseCheckbox.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+const checked = ref(true)
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseCheckbox">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <BaseCheckbox
+            v-model="state.checked"
+            :label="state.label"
+            :disabled="state.disabled"
+            :size="state.size"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Checked: <code>{{ state.checked }}</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.checked" title="Checked" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div style="padding: 2rem; 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>
+          <BaseCheckbox v-model="checked" :label="`${size} checkbox`" :size="size" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Without Label">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center;">
+        <BaseCheckbox v-model="checked" />
+        <BaseCheckbox :model-value="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled States">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem;">
+        <BaseCheckbox :model-value="false" label="Disabled unchecked" disabled />
+        <BaseCheckbox :model-value="true" label="Disabled checked" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="Form Group">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 0.75rem;">
+        <p style="margin: 0 0 0.25rem; font-weight: 600; color: var(--text-primary, #e2e8f0);">Notification Preferences</p>
+        <BaseCheckbox :model-value="true" label="Email notifications" />
+        <BaseCheckbox :model-value="true" label="Push notifications" />
+        <BaseCheckbox :model-value="false" label="SMS notifications" />
+        <BaseCheckbox :model-value="false" label="Weekly digest" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseCheckbox.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+/** Renders a styled checkbox with an optional label, size variants, and disabled state. */
+interface Props {
+  modelValue?: boolean
+  label?: string
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  disabled: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+function handleChange(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.checked)
+}
+</script>
+
+<template>
+  <label
+    :class="[
+      'mld-checkbox',
+      props.disabled ? 'mld-checkbox--disabled' : '',
+    ]"
+  >
+    <div class="mld-checkbox__input-wrapper">
+      <input
+        type="checkbox"
+        :checked="props.modelValue"
+        :disabled="props.disabled"
+        :aria-label="props.label || 'Checkbox'"
+        class="mld-checkbox__native"
+        @change="handleChange"
+      />
+      <div
+        :class="[
+          'mld-checkbox__box',
+          `mld-checkbox__box--${props.size}`,
+          props.modelValue ? 'mld-checkbox__box--checked' : '',
+        ]"
+      >
+        <svg
+          v-if="props.modelValue"
+          :class="['mld-checkbox__icon', `mld-checkbox__icon--${props.size}`]"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+        </svg>
+      </div>
+    </div>
+    <span v-if="props.label" :class="['mld-checkbox__label', `mld-checkbox__label--${props.size}`]">
+      {{ props.label }}
+    </span>
+  </label>
+</template>
+
+<style>
+@import '../styles/components/checkbox.css';
+</style>

package/src/components/BaseInput.story.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseInput from './BaseInput.vue'
+import FormField from './FormField.vue'
+
+const textValue = ref('Hello world')
+const numberValue = ref<number | undefined>(42)
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseInput">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+          <FormField
+            :label="state.label"
+            :error="state.showError ? state.errorMessage : undefined"
+            :hint="state.showHint ? state.hintMessage : undefined"
+            :required="state.required"
+          >
+            <BaseInput
+              v-model="state.value"
+              :type="state.type"
+              :placeholder="state.placeholder"
+              :size="state.size"
+              :disabled="state.disabled"
+              :readonly="state.readonly"
+              :error="state.showError"
+            />
+          </FormField>
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Value: <code>{{ JSON.stringify(state.value) }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.label" title="Label" />
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstSelect
+          v-model="state.type"
+          title="Type"
+          :options="['text', 'password', 'email', 'number', 'search', 'tel', 'url'].map(t => ({ label: t, value: t }))"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="['sm', 'md', 'lg'].map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.readonly" title="Readonly" />
+        <HstCheckbox v-model="state.required" title="Required" />
+        <HstCheckbox v-model="state.showError" title="Show Error" />
+        <HstText v-model="state.errorMessage" title="Error Message" />
+        <HstCheckbox v-model="state.showHint" title="Show Hint" />
+        <HstText v-model="state.hintMessage" title="Hint Message" />
+      </template>
+    </Variant>
+
+    <Variant title="Text Input">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <FormField label="Username" hint="Enter your display name">
+          <BaseInput v-model="textValue" placeholder="e.g. john_doe" />
+        </FormField>
+        <p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          v-model: <code>{{ textValue }}</code>
+        </p>
+      </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}`">
+          <BaseInput :size="size" :placeholder="`${size} input`" />
+        </FormField>
+      </div>
+    </Variant>
+
+    <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 />
+        </FormField>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseInput.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+/** Renders a styled `<input>` supporting text/number/email types, size, error, and readonly states. */
+import type { InputType } from '../types'
+
+interface Props {
+  modelValue?: string | number
+  type?: InputType
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  autocomplete?: string
+  autofocus?: boolean
+  min?: number
+  max?: number
+  step?: number
+  ariaDescribedby?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  disabled: false,
+  readonly: false,
+  error: false,
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | null]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+  keydown: [event: KeyboardEvent]
+}>()
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  const value = props.type === 'number'
+    ? (target.value === '' ? null : Number(target.value))
+    : target.value
+  emit('update:modelValue', value as string | number)
+}
+</script>
+
+<template>
+  <input
+    :type="type"
+    :value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    :autocomplete="autocomplete"
+    :autofocus="autofocus"
+    :min="min"
+    :max="max"
+    :step="step"
+    :aria-invalid="error || undefined"
+    :aria-describedby="ariaDescribedby || undefined"
+    :class="[
+      'mld-input',
+      `mld-input--${size}`,
+      error ? 'mld-input--error' : '',
+      disabled ? 'mld-input--disabled' : '',
+    ]"
+    @input="handleInput"
+    @focus="emit('focus', $event)"
+    @blur="emit('blur', $event)"
+    @keydown="emit('keydown', $event)"
+  />
+</template>
+
+<style>
+@import '../styles/components/input.css';
+</style>