@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/ThemeToggle.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+/** Icon button that toggles between light and dark mode, swapping sun/moon icons to reflect the active theme. */
+import { useTheme } from '../composables/useTheme'
+
+interface Props {
+  size?: 'sm' | 'md' | 'lg'
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'md',
+})
+
+const { isDark, toggleTheme } = useTheme()
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="['mld-theme-toggle', `mld-theme-toggle--${size}`]"
+    :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+    @click="toggleTheme"
+  >
+    <!-- Lucide sun -->
+    <svg
+      v-if="isDark"
+      :class="`mld-theme-toggle__icon--${size}`"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="4" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" />
+    </svg>
+    <!-- Lucide moon -->
+    <svg
+      v-else
+      :class="`mld-theme-toggle__icon--${size}`"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
+    </svg>
+  </button>
+</template>
+
+<style>
+@import '../styles/components/theme-toggle.css';
+</style>

package/src/components/TimePicker.story.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import TimePicker from './TimePicker.vue'
+
+function initState() {
+  return {
+    modelValue: '09:00' as string | undefined,
+    placeholder: 'Select time',
+    disabled: false,
+    error: false,
+    size: 'md' as const,
+    step: 15,
+    format: '24h' as const,
+    clearable: false,
+  }
+}
+</script>
+
+<template>
+  <Story title="Scheduling/TimePicker">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 300px;">
+          <TimePicker
+            v-model="state.modelValue"
+            :placeholder="state.placeholder"
+            :disabled="state.disabled"
+            :error="state.error"
+            :size="state.size"
+            :step="state.step"
+            :format="state.format"
+            :clearable="state.clearable"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstText v-model="state.modelValue" title="Value (HH:mm)" />
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.error" title="Error" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+          ]"
+        />
+        <HstSlider v-model="state.step" title="Step (minutes)" :min="5" :max="60" :step="5" />
+        <HstSelect
+          v-model="state.format"
+          title="Format"
+          :options="[
+            { value: '24h', label: '24-hour' },
+            { value: '12h', label: '12-hour' },
+          ]"
+        />
+        <HstCheckbox v-model="state.clearable" title="Clearable" />
+      </template>
+    </Variant>
+
+    <Variant title="12-Hour Format">
+      <div style="padding: 2rem; max-width: 300px;">
+        <TimePicker model-value="14:30" format="12h" />
+      </div>
+    </Variant>
+
+    <Variant title="With Min/Max">
+      <div style="padding: 2rem; max-width: 300px;">
+        <TimePicker
+          model-value="10:00"
+          min="08:00"
+          max="18:00"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="30-Minute Steps">
+      <div style="padding: 2rem; max-width: 300px;">
+        <TimePicker model-value="09:30" :step="30" />
+      </div>
+    </Variant>
+
+    <Variant title="Clearable">
+      <div style="padding: 2rem; max-width: 300px;">
+        <TimePicker model-value="15:00" clearable />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 300px;">
+        <TimePicker model-value="09:00" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/TimePicker.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+/** Input that opens a scrollable time-slot dropdown in 12h or 24h format, with min/max range. */
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import { generateTimeSlots, formatTime, parseTime, compareTime } from '../composables/useTimeUtils'
+
+interface Props {
+  modelValue?: string
+  placeholder?: string
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  min?: string
+  max?: string
+  step?: number
+  format?: '12h' | '24h'
+  clearable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Select time',
+  disabled: false,
+  error: false,
+  size: 'md',
+  step: 15,
+  format: '24h',
+  clearable: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+const isOpen = ref(false)
+const containerRef = ref<HTMLDivElement>()
+const listRef = ref<HTMLUListElement>()
+const highlightedIndex = ref(-1)
+
+const slots = computed(() => {
+  const start = props.min ?? '00:00'
+  const end = props.max ?? '23:59'
+  return generateTimeSlots(start, end, props.step)
+})
+
+const displayValue = computed(() => {
+  if (!props.modelValue) return ''
+  const { hour, minute } = parseTime(props.modelValue)
+  return formatTime(hour, minute, props.format)
+})
+
+function isSlotDisabled(slot: string): boolean {
+  if (props.min && compareTime(slot, props.min) < 0) return true
+  if (props.max && compareTime(slot, props.max) > 0) return true
+  return false
+}
+
+function selectSlot(slot: string) {
+  if (isSlotDisabled(slot) || props.disabled) return
+  emit('update:modelValue', slot)
+  isOpen.value = false
+}
+
+function clear() {
+  emit('update:modelValue', undefined)
+  isOpen.value = false
+}
+
+function toggleDropdown() {
+  if (props.disabled) return
+  isOpen.value = !isOpen.value
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+function scrollToActiveSlot() {
+  nextTick(() => {
+    if (!listRef.value) return
+    const activeEl = listRef.value.querySelector('.mld-time-picker__slot--active') as HTMLElement | null
+    if (activeEl) {
+      activeEl.scrollIntoView({ block: 'center' })
+    } else if (props.modelValue) {
+      // Scroll to nearest slot
+      const nearestIndex = findNearestSlotIndex(props.modelValue)
+      if (nearestIndex >= 0) {
+        const children = listRef.value.children
+        if (children[nearestIndex]) {
+          (children[nearestIndex] as HTMLElement).scrollIntoView({ block: 'center' })
+        }
+      }
+    }
+  })
+}
+
+function findNearestSlotIndex(time: string): number {
+  if (slots.value.length === 0) return -1
+  let bestIndex = 0
+  let bestDiff = Infinity
+  for (let i = 0; i < slots.value.length; i++) {
+    const { hour: h1, minute: m1 } = parseTime(slots.value[i])
+    const { hour: h2, minute: m2 } = parseTime(time)
+    const minuteDiff = Math.abs((h1 * 60 + m1) - (h2 * 60 + m2))
+    if (minuteDiff < bestDiff) {
+      bestDiff = minuteDiff
+      bestIndex = i
+    }
+  }
+  return bestIndex
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (!isOpen.value) {
+    if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+      event.preventDefault()
+      isOpen.value = true
+      return
+    }
+    return
+  }
+
+  switch (event.key) {
+    case 'ArrowDown': {
+      event.preventDefault()
+      let next = highlightedIndex.value + 1
+      while (next < slots.value.length && isSlotDisabled(slots.value[next])) next++
+      if (next < slots.value.length) {
+        highlightedIndex.value = next
+        scrollToHighlighted()
+      }
+      break
+    }
+    case 'ArrowUp': {
+      event.preventDefault()
+      let prev = highlightedIndex.value - 1
+      while (prev >= 0 && isSlotDisabled(slots.value[prev])) prev--
+      if (prev >= 0) {
+        highlightedIndex.value = prev
+        scrollToHighlighted()
+      }
+      break
+    }
+    case 'Enter': {
+      event.preventDefault()
+      if (highlightedIndex.value >= 0 && highlightedIndex.value < slots.value.length) {
+        selectSlot(slots.value[highlightedIndex.value])
+      }
+      break
+    }
+    case 'Escape': {
+      event.preventDefault()
+      isOpen.value = false
+      break
+    }
+  }
+}
+
+function scrollToHighlighted() {
+  nextTick(() => {
+    if (!listRef.value) return
+    const children = listRef.value.children
+    if (children[highlightedIndex.value]) {
+      (children[highlightedIndex.value] as HTMLElement).scrollIntoView({ block: 'nearest' })
+    }
+  })
+}
+
+watch(isOpen, (open) => {
+  if (open) {
+    // Set highlighted index to current value or nearest slot
+    if (props.modelValue) {
+      const idx = slots.value.indexOf(props.modelValue)
+      highlightedIndex.value = idx >= 0 ? idx : findNearestSlotIndex(props.modelValue)
+    } else {
+      highlightedIndex.value = 0
+    }
+    scrollToActiveSlot()
+  } else {
+    highlightedIndex.value = -1
+  }
+})
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <div ref="containerRef" class="mld-time-picker" @keydown="handleKeydown">
+    <div class="mld-time-picker__input-wrapper">
+      <input
+        type="text"
+        readonly
+        :value="displayValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :class="[
+          'mld-time-picker__input',
+          `mld-time-picker__input--${size}`,
+          error ? 'mld-time-picker__input--error' : '',
+          disabled ? 'mld-time-picker__input--disabled' : '',
+        ]"
+        role="combobox"
+        aria-haspopup="listbox"
+        :aria-expanded="isOpen"
+        @click="toggleDropdown"
+      />
+      <button
+        v-if="clearable && modelValue"
+        type="button"
+        class="mld-time-picker__clear-btn"
+        aria-label="Clear time"
+        @click.stop="clear"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+        </svg>
+      </button>
+      <div class="mld-time-picker__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
+        </svg>
+      </div>
+    </div>
+
+    <Transition
+      enter-active-class="mld-time-picker__dropdown-enter-active"
+      enter-from-class="mld-time-picker__dropdown-enter-from"
+      enter-to-class="mld-time-picker__dropdown-enter-to"
+      leave-active-class="mld-time-picker__dropdown-leave-active"
+      leave-from-class="mld-time-picker__dropdown-leave-from"
+      leave-to-class="mld-time-picker__dropdown-leave-to"
+    >
+      <div
+        v-if="isOpen"
+        class="mld-time-picker__dropdown"
+      >
+        <ul
+          ref="listRef"
+          class="mld-time-picker__list"
+          role="listbox"
+          aria-label="Available times"
+        >
+          <li
+            v-for="(slot, index) in slots"
+            :key="slot"
+            role="option"
+            :aria-selected="slot === modelValue"
+            :aria-disabled="isSlotDisabled(slot)"
+            :class="[
+              'mld-time-picker__slot',
+              slot === modelValue ? 'mld-time-picker__slot--active' : '',
+              isSlotDisabled(slot) ? 'mld-time-picker__slot--disabled' : '',
+              index === highlightedIndex && !isSlotDisabled(slot) ? 'mld-time-picker__slot--highlighted' : '',
+            ]"
+            @click="selectSlot(slot)"
+          >
+            {{ formatTime(parseTime(slot).hour, parseTime(slot).minute, format) }}
+          </li>
+        </ul>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/time-picker.css';
+</style>

package/src/components/TimeRangeInput.story.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import TimeRangeInput from './TimeRangeInput.vue'
+import type { TimeRange } from '../types/components'
+
+function initState() {
+  return {
+    modelValue: { start: '09:00', end: '17:00' } as TimeRange | undefined,
+    disabled: false,
+    error: false,
+    size: 'md' as const,
+    step: 15,
+    format: '24h' as const,
+    showDuration: true,
+  }
+}
+</script>
+
+<template>
+  <Story title="Scheduling/TimeRangeInput">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px;">
+          <TimeRangeInput
+            v-model="state.modelValue"
+            :disabled="state.disabled"
+            :error="state.error"
+            :size="state.size"
+            :step="state.step"
+            :format="state.format"
+            :show-duration="state.showDuration"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.error" title="Error" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+          ]"
+        />
+        <HstSlider v-model="state.step" title="Step (minutes)" :min="5" :max="60" :step="5" />
+        <HstSelect
+          v-model="state.format"
+          title="Format"
+          :options="[
+            { value: '24h', label: '24-hour' },
+            { value: '12h', label: '12-hour' },
+          ]"
+        />
+        <HstCheckbox v-model="state.showDuration" title="Show Duration" />
+      </template>
+    </Variant>
+
+    <Variant title="Morning Shift">
+      <div style="padding: 2rem; max-width: 500px;">
+        <TimeRangeInput
+          :model-value="{ start: '06:00', end: '14:00' }"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="12-Hour Format">
+      <div style="padding: 2rem; max-width: 500px;">
+        <TimeRangeInput
+          :model-value="{ start: '09:00', end: '17:00' }"
+          format="12h"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Min/Max">
+      <div style="padding: 2rem; max-width: 500px;">
+        <TimeRangeInput
+          :model-value="{ start: '08:00', end: '12:00' }"
+          min="06:00"
+          max="22:00"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="No Duration">
+      <div style="padding: 2rem; max-width: 500px;">
+        <TimeRangeInput
+          :model-value="{ start: '10:00', end: '15:00' }"
+          :show-duration="false"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 500px;">
+        <TimeRangeInput
+          :model-value="{ start: '09:00', end: '17:00' }"
+          disabled
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/TimeRangeInput.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+/** Paired start/end time pickers that validate range order and display computed duration. */
+import { computed } from 'vue'
+import type { TimeRange } from '../types/components'
+import TimePicker from './TimePicker.vue'
+import { durationMinutes, formatDuration, compareTime } from '../composables/useTimeUtils'
+
+interface Props {
+  modelValue?: TimeRange
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  min?: string
+  max?: string
+  step?: number
+  format?: '12h' | '24h'
+  showDuration?: boolean
+  blockedRanges?: TimeRange[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  error: false,
+  size: 'md',
+  step: 15,
+  format: '24h',
+  showDuration: true,
+  blockedRanges: () => [],
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: TimeRange | undefined]
+}>()
+
+const startValue = computed(() => props.modelValue?.start)
+const endValue = computed(() => props.modelValue?.end)
+
+const duration = computed(() => {
+  if (!props.modelValue?.start || !props.modelValue?.end) return null
+  return durationMinutes(props.modelValue.start, props.modelValue.end)
+})
+
+const durationLabel = computed(() => {
+  if (duration.value === null) return ''
+  return formatDuration(duration.value)
+})
+
+const isInvalid = computed(() => {
+  if (!props.modelValue?.start || !props.modelValue?.end) return false
+  return compareTime(props.modelValue.start, props.modelValue.end) >= 0
+})
+
+const endMin = computed(() => {
+  if (props.modelValue?.start) return props.modelValue.start
+  return props.min
+})
+
+function onStartChange(value: string | undefined) {
+  if (!value) {
+    emit('update:modelValue', undefined)
+    return
+  }
+  const end = props.modelValue?.end || ''
+  emit('update:modelValue', { start: value, end })
+}
+
+function onEndChange(value: string | undefined) {
+  if (!value) {
+    emit('update:modelValue', undefined)
+    return
+  }
+  const start = props.modelValue?.start || ''
+  emit('update:modelValue', { start, end: value })
+}
+</script>
+
+<template>
+  <div class="mld-time-range">
+    <div class="mld-time-range__start">
+      <TimePicker
+        :model-value="startValue"
+        :disabled="disabled"
+        :error="error || isInvalid"
+        :size="size"
+        :min="min"
+        :max="max"
+        :step="step"
+        :format="format"
+        placeholder="Start"
+        @update:model-value="onStartChange"
+      />
+    </div>
+
+    <div class="mld-time-range__separator">
+      <span
+        v-if="showDuration && duration !== null"
+        :class="['mld-time-range__duration', isInvalid ? 'mld-time-range__duration--error' : '']"
+      >
+        {{ durationLabel }}
+      </span>
+    </div>
+
+    <div class="mld-time-range__end">
+      <TimePicker
+        :model-value="endValue"
+        :disabled="disabled"
+        :error="error || isInvalid"
+        :size="size"
+        :min="endMin"
+        :max="max"
+        :step="step"
+        :format="format"
+        placeholder="End"
+        @update:model-value="onEndChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/time-range-input.css';
+</style>