@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MStack.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    direction?: 'column' | 'row'
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
+    wrap?: boolean
+    divider?: boolean
+    inline?: boolean
+  }>(),
+  { direction: 'column', gap: 'md', align: 'stretch', justify: 'start', wrap: false, divider: false, inline: false },
+)
+
+const gapClasses: Record<string, string> = {
+  none: 'gap-0',
+  xs: 'gap-1',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+}
+
+const alignClasses: Record<string, string> = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch',
+  baseline: 'items-baseline',
+}
+
+const justifyClasses: Record<string, string> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  between: 'justify-between',
+  around: 'justify-around',
+  evenly: 'justify-evenly',
+}
+
+const classes = computed(() => [
+  props.inline ? 'inline-flex' : 'flex',
+  props.direction === 'row' ? 'flex-row' : 'flex-col',
+  !props.divider && gapClasses[props.gap],
+  alignClasses[props.align],
+  justifyClasses[props.justify],
+  props.wrap && 'flex-wrap',
+])
+
+const dividerClass = computed(() =>
+  props.direction === 'row' ? 'w-px self-stretch bg-outline-variant' : 'h-px w-full bg-outline-variant',
+)
+</script>
+
+<template>
+  <div :class="classes">
+    <template v-if="divider">
+      <template v-for="(_, i) in ($slots.default?.() ?? [])" :key="i">
+        <div v-if="i > 0" :class="dividerClass" role="separator" />
+        <component :is="_" />
+      </template>
+    </template>
+    <slot v-else />
+  </div>
+</template>

package/src/components/MStatCard.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import MIcon from './MIcon.vue'
+
+const props = withDefaults(defineProps<{
+  title: string
+  value: string | number
+  icon?: string
+  trend?: number
+  trendLabel?: string
+  color?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'success'
+  loading?: boolean
+}>(), { color: 'primary' })
+
+const iconBg: Record<string, string> = {
+  primary:   'bg-primary-container text-on-primary-container',
+  secondary: 'bg-secondary-container text-on-secondary-container',
+  tertiary:  'bg-tertiary-container text-on-tertiary-container',
+  error:     'bg-error-container text-on-error-container',
+  success:   'bg-success-container text-on-success-container',
+}
+
+const trendColor = computed(() => {
+  if (props.trend == null) return ''
+  return props.trend > 0 ? 'text-success' : props.trend < 0 ? 'text-error' : 'text-on-surface-variant'
+})
+const trendIcon = computed(() => {
+  if (props.trend == null) return ''
+  return props.trend > 0 ? 'trending_up' : props.trend < 0 ? 'trending_down' : 'trending_flat'
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 rounded-lg border border-outline-variant bg-surface-container-lowest p-5">
+    <div class="flex items-start justify-between">
+      <div class="flex flex-col gap-1">
+        <span class="text-label-large text-on-surface-variant">{{ title }}</span>
+        <template v-if="loading">
+          <div class="h-8 w-24 animate-pulse rounded-md bg-on-surface/10" />
+        </template>
+        <span v-else class="text-headline-medium font-medium text-on-surface">{{ value }}</span>
+      </div>
+      <div v-if="icon" class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl" :class="iconBg[color]">
+        <MIcon :name="icon" :size="24" />
+      </div>
+    </div>
+    <div v-if="trend != null || trendLabel || $slots.footer" class="flex items-center gap-2">
+      <span v-if="trend != null" class="inline-flex items-center gap-0.5 text-label-medium font-medium" :class="trendColor">
+        <MIcon :name="trendIcon" :size="16" />
+        {{ trend > 0 ? '+' : '' }}{{ trend }}%
+      </span>
+      <span v-if="trendLabel" class="text-label-medium text-on-surface-variant">{{ trendLabel }}</span>
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/src/components/MStepper.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import MIcon from './MIcon.vue'
+
+export interface StepItem {
+  label: string
+  description?: string
+  icon?: string
+  optional?: boolean
+  error?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  steps: StepItem[]
+  modelValue: number
+  direction?: 'horizontal' | 'vertical'
+  linear?: boolean
+}>(), { direction: 'horizontal', linear: true })
+
+const emit = defineEmits<{ 'update:modelValue': [number] }>()
+
+function stepState(index: number) {
+  if (props.steps[index]?.error) return 'error'
+  if (index < props.modelValue) return 'completed'
+  if (index === props.modelValue) return 'active'
+  return 'inactive'
+}
+
+const canClick = computed(() => !props.linear)
+
+function select(index: number) {
+  if (canClick.value) emit('update:modelValue', index)
+}
+</script>
+
+<template>
+  <!-- Horizontal -->
+  <div
+    v-if="direction === 'horizontal'"
+    class="flex w-full items-start"
+  >
+    <template v-for="(step, i) in steps" :key="i">
+      <!-- Step -->
+      <div
+        class="flex flex-col items-center gap-2"
+        :class="canClick && stepState(i) !== 'active' ? 'cursor-pointer' : ''"
+        @click="select(i)"
+      >
+        <!-- Circle -->
+        <div
+          class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-label-large font-medium transition-colors duration-200"
+          :class="{
+            'bg-primary text-on-primary': stepState(i) === 'active' || stepState(i) === 'completed',
+            'bg-error text-on-error': stepState(i) === 'error',
+            'bg-surface-container-highest text-on-surface-variant': stepState(i) === 'inactive',
+          }"
+        >
+          <MIcon v-if="stepState(i) === 'completed'" name="check" :size="20" />
+          <MIcon v-else-if="stepState(i) === 'error'" name="priority_high" :size="20" />
+          <MIcon v-else-if="step.icon" :name="step.icon" :size="20" />
+          <span v-else>{{ i + 1 }}</span>
+        </div>
+
+        <!-- Label -->
+        <div class="flex flex-col items-center text-center">
+          <span
+            class="text-label-large"
+            :class="{
+              'font-medium text-on-surface': stepState(i) === 'active' || stepState(i) === 'completed',
+              'text-error': stepState(i) === 'error',
+              'text-on-surface-variant': stepState(i) === 'inactive',
+            }"
+          >
+            {{ step.label }}
+          </span>
+          <span v-if="step.description" class="text-body-small text-on-surface-variant">
+            {{ step.description }}
+          </span>
+          <span v-if="step.optional" class="text-body-small text-on-surface-variant">
+            Opcional
+          </span>
+        </div>
+      </div>
+
+      <!-- Connector -->
+      <div
+        v-if="i < steps.length - 1"
+        class="mt-[18px] flex flex-1 items-center px-2"
+      >
+        <div
+          class="h-[1px] w-full transition-colors duration-300"
+          :class="i < modelValue ? 'bg-primary' : 'bg-outline-variant'"
+        />
+      </div>
+    </template>
+  </div>
+
+  <!-- Vertical -->
+  <div v-else class="flex flex-col">
+    <template v-for="(step, i) in steps" :key="i">
+      <div class="flex gap-4">
+        <!-- Left column: circle + connector -->
+        <div class="flex flex-col items-center">
+          <div
+            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-label-large font-medium transition-colors duration-200"
+            :class="[
+              {
+                'bg-primary text-on-primary': stepState(i) === 'active' || stepState(i) === 'completed',
+                'bg-error text-on-error': stepState(i) === 'error',
+                'bg-surface-container-highest text-on-surface-variant': stepState(i) === 'inactive',
+              },
+              canClick && stepState(i) !== 'active' ? 'cursor-pointer' : '',
+            ]"
+            @click="select(i)"
+          >
+            <MIcon v-if="stepState(i) === 'completed'" name="check" :size="20" />
+            <MIcon v-else-if="stepState(i) === 'error'" name="priority_high" :size="20" />
+            <MIcon v-else-if="step.icon" :name="step.icon" :size="20" />
+            <span v-else>{{ i + 1 }}</span>
+          </div>
+          <!-- Vertical connector -->
+          <div
+            v-if="i < steps.length - 1"
+            class="my-1 w-[1px] flex-1 transition-colors duration-300"
+            :class="i < modelValue ? 'bg-primary' : 'bg-outline-variant'"
+            style="min-height: 24px"
+          />
+        </div>
+
+        <!-- Right column: label + content -->
+        <div
+          class="pb-6"
+          :class="canClick && stepState(i) !== 'active' ? 'cursor-pointer' : ''"
+          @click="select(i)"
+        >
+          <span
+            class="text-label-large"
+            :class="{
+              'font-medium text-on-surface': stepState(i) === 'active' || stepState(i) === 'completed',
+              'text-error': stepState(i) === 'error',
+              'text-on-surface-variant': stepState(i) === 'inactive',
+            }"
+          >
+            {{ step.label }}
+          </span>
+          <p v-if="step.description" class="mt-0.5 text-body-small text-on-surface-variant">
+            {{ step.description }}
+          </p>
+          <p v-if="step.optional" class="text-body-small text-on-surface-variant">
+            Opcional
+          </p>
+
+          <!-- Slot for step content when active -->
+          <div v-if="stepState(i) === 'active' && $slots[`step-${i}`]" class="mt-3">
+            <slot :name="`step-${i}`" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

package/src/components/MSwitch.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import MIcon from './MIcon.vue'
+
+const props = withDefaults(
+  defineProps<{ modelValue: boolean; disabled?: boolean; label?: string }>(),
+  { disabled: false },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [boolean] }>()
+
+// All thumb transforms live here so each direction can use its own easing curve.
+// translateY(-50%) vertically centres the 24px thumb in the 32px track.
+// ON  → spring cubic-bezier: overshoots ~2px then settles → satisfying "click"
+// OFF → M3 standard decelerate: clean snap back, no undershoot
+const thumbStyle = computed(() => ({
+  transform: props.modelValue
+    ? 'translateY(-50%) translateX(18px) scale(1)'
+    : 'translateY(-50%) translateX(0px) scale(0.667)',
+  transition: props.modelValue
+    ? 'transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 280ms ease'
+    : 'transform 240ms cubic-bezier(0.2, 0, 0, 1),          background-color 240ms ease',
+}))
+</script>
+
+<template>
+  <label
+    class="inline-flex items-center gap-3 select-none"
+    :class="disabled ? 'cursor-not-allowed opacity-[0.38]' : 'cursor-pointer'"
+  >
+    <span
+      class="relative inline-flex h-8 w-[52px] shrink-0 items-center rounded-full border-2 transition-colors duration-200"
+      :class="modelValue ? 'border-primary bg-primary' : 'border-outline bg-surface-container-highest'"
+    >
+      <input
+        type="checkbox"
+        class="sr-only"
+        :checked="modelValue"
+        :disabled="disabled"
+        @change="emit('update:modelValue', !modelValue)"
+      />
+
+      <!-- Thumb: position + size animated via inline style (allows per-direction easing) -->
+      <span
+        class="absolute left-1 top-1/2 flex h-6 w-6 items-center justify-center rounded-full will-change-transform"
+        :class="modelValue ? 'bg-on-primary shadow-sm' : 'bg-outline'"
+        :style="thumbStyle"
+      >
+        <Transition
+          enter-active-class="transition-opacity duration-150 delay-[120ms]"
+          enter-from-class="opacity-0"
+          enter-to-class="opacity-100"
+          leave-active-class="transition-opacity duration-75"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
+        >
+          <MIcon v-if="modelValue" name="check" :size="14" class="text-primary" />
+        </Transition>
+      </span>
+    </span>
+    <span v-if="label" class="text-body-large text-on-surface">{{ label }}</span>
+  </label>
+</template>