@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MProgressBar.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    value?: number;
+    indeterminate?: boolean;
+    color?: "primary" | "secondary" | "tertiary" | "error";
+    variant?: "linear" | "wavy";
+    label?: string;
+  }>(),
+  {
+    color: "primary",
+    variant: "linear",
+  },
+);
+
+const isIndeterminate = computed(() => props.indeterminate || props.value === undefined);
+const clampedValue = computed(() => Math.min(100, Math.max(0, props.value ?? 0)));
+
+const colorMap: Record<
+  "primary" | "secondary" | "tertiary" | "error",
+  { bar: string; track: string; text: string }
+> = {
+  primary: { bar: "bg-primary", track: "bg-primary-container", text: "text-primary" },
+  secondary: { bar: "bg-secondary", track: "bg-secondary-container", text: "text-secondary" },
+  tertiary: { bar: "bg-tertiary", track: "bg-tertiary-container", text: "text-tertiary" },
+  error: { bar: "bg-error", track: "bg-error-container", text: "text-error" },
+};
+
+// ── Wave geometry ────────────────────────────────────────────────────────
+// Smooth sine wave sampled as a single polyline path.
+// Period = 20px (one full up-down cycle). We render a wide strip so that
+// translating by exactly one period gives a seamless infinite scroll.
+const PERIOD = 20; // px per full sine cycle
+const AMP = 2.5; // amplitude (bar is 8px tall, mid at 4)
+const MID = 4;
+const VIEW_H = 8;
+const PERIODS = 80; // total cycles → 1600px strip
+const STEP = 1; // px sampling resolution
+
+const waveWidth = PERIOD * PERIODS;
+
+const wavePath = (() => {
+  let d = "";
+  for (let x = 0; x <= waveWidth; x += STEP) {
+    const y = MID - AMP * Math.sin((x / PERIOD) * Math.PI * 2);
+    d += (x === 0 ? "M" : "L") + x + "," + y.toFixed(2) + " ";
+  }
+  return d.trim();
+})();
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <span v-if="label" class="text-label-small text-on-surface-variant">{{ label }}</span>
+
+    <!-- ── Linear variant ────────────────────────────────────────────────── -->
+    <div
+      v-if="variant === 'linear'"
+      class="relative h-1 w-full overflow-hidden rounded-full"
+      :class="colorMap[color].track"
+      role="progressbar"
+      :aria-valuenow="isIndeterminate ? undefined : clampedValue"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    >
+      <div
+        v-if="!isIndeterminate"
+        class="h-full rounded-full transition-[width] duration-300 ease-in-out"
+        :class="colorMap[color].bar"
+        :style="{ width: `${clampedValue}%` }"
+      />
+      <div
+        v-else
+        class="absolute inset-y-0 w-2/5 rounded-full animate-[m3-progress-indeterminate_1.6s_ease-in-out_infinite]"
+        :class="colorMap[color].bar"
+      />
+    </div>
+
+    <!-- ── Wavy variant ───────────────────────────────────────────────────── -->
+    <div
+      v-else
+      class="relative h-2 w-full overflow-visible"
+      role="progressbar"
+      :aria-valuenow="isIndeterminate ? undefined : clampedValue"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    >
+      <!-- DETERMINATE -->
+      <template v-if="!isIndeterminate">
+        <!-- Active (wavy) portion: clipped to value%, but the wave keeps flowing -->
+        <div
+          class="absolute inset-0 overflow-hidden"
+          :style="{
+            clipPath: `inset(0 ${100 - clampedValue}% 0 0)`,
+            transition: 'clip-path 300ms ease',
+          }"
+        >
+          <div
+            class="absolute top-0 left-0 h-full animate-[m3-wave-flow_0.8s_linear_infinite]"
+            :class="colorMap[color].text"
+            :style="{ width: `${waveWidth}px` }"
+          >
+            <svg
+              :width="waveWidth"
+              :height="VIEW_H"
+              :viewBox="`0 0 ${waveWidth} ${VIEW_H}`"
+              class="h-full"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                :d="wavePath"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <!-- Inactive (straight track) portion -->
+        <div
+          class="absolute inset-y-0 right-0 flex items-center"
+          :class="colorMap[color].track"
+          :style="{ left: `calc(${clampedValue}% + 4px)`, transition: 'left 300ms ease' }"
+          style="border-radius: 9999px; height: 4px; top: 50%; transform: translateY(-50%)"
+        />
+
+        <!-- Stop indicator (dot at the end of the track) -->
+        <div
+          class="absolute rounded-full"
+          :class="colorMap[color].bar"
+          :style="{
+            right: '0',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: '4px',
+            height: '4px',
+          }"
+        />
+      </template>
+
+      <!-- INDETERMINATE -->
+      <div v-else class="absolute inset-0 overflow-hidden rounded-full">
+        <div
+          class="absolute top-0 left-0 h-full animate-[m3-wave-flow_0.9s_linear_infinite]"
+          :class="colorMap[color].text"
+          :style="{ width: `${waveWidth}px` }"
+        >
+          <svg
+            :width="waveWidth"
+            :height="VIEW_H"
+            :viewBox="`0 0 ${waveWidth} ${VIEW_H}`"
+            class="h-full"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              :d="wavePath"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="3"
+              stroke-linecap="round"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+/* Scroll exactly one period (20px) so the loop is perfectly seamless. */
+@keyframes m3-wave-flow {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-20px);
+  }
+}
+
+@keyframes m3-progress-indeterminate {
+  0% {
+    left: -40%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-\[m3-wave-flow_1\.2s_linear_infinite\],
+  .animate-\[m3-wave-flow_0\.9s_linear_infinite\],
+  .animate-\[m3-progress-indeterminate_1\.6s_ease-in-out_infinite\] {
+    animation: none !important;
+  }
+}
+</style>

package/src/components/MRadio.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed, useId } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: unknown;
+    value: unknown;
+    label?: string;
+    disabled?: boolean;
+    color?: "primary" | "secondary" | "tertiary" | "error";
+  }>(),
+  { disabled: false, color: "primary" },
+);
+
+const emit = defineEmits<{ "update:modelValue": [unknown] }>();
+const id = useId();
+const isChecked = computed(() => props.modelValue === props.value);
+
+// Ring + dot color when checked, applied via currentColor on the SVG.
+const checkedColor: Record<string, string> = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  tertiary: "text-tertiary",
+  error: "text-error",
+};
+</script>
+
+<template>
+  <label
+    :for="id"
+    class="inline-flex items-center gap-3 select-none"
+    :class="disabled ? 'cursor-not-allowed opacity-[0.38]' : 'cursor-pointer'"
+  >
+    <span class="relative flex h-5 w-5 shrink-0">
+      <input
+        :id="id"
+        type="radio"
+        class="sr-only"
+        :checked="isChecked"
+        :disabled="disabled"
+        @change="emit('update:modelValue', value)"
+      />
+
+      <!--
+        SVG radio: vector circles sharing center (10,10) stay round + concentric
+        at any zoom. Outer ring uses r=8 (not 9) so the 2px stroke (7..9) leaves
+        ~1px of clearance to the viewBox edge — prevents the border getting
+        clipped at certain zoom levels.
+      -->
+      <svg
+        viewBox="0 0 20 20"
+        class="h-full w-full transition-colors duration-150"
+        :class="isChecked ? checkedColor[color] : 'text-on-surface-variant'"
+        aria-hidden="true"
+      >
+        <circle cx="10" cy="10" r="8" fill="none" stroke="currentColor" stroke-width="2" />
+        <!--
+          Dot scaled via CSS, but the transform-origin is pinned to the circle's
+          own bounding box center (transform-box: fill-box). Without this, the SVG
+          element origin is (0,0) of the viewBox, so scale() grows from a corner
+          and the dot visibly slides to the center. fill-box fixes the origin to
+          the dot itself, so it grows symmetrically in place.
+        -->
+        <circle
+          class="m3-radio-dot"
+          :class="{ 'is-checked': isChecked }"
+          cx="10"
+          cy="10"
+          r="4.5"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+
+    <span v-if="label" class="text-body-large text-on-surface">{{ label }}</span>
+  </label>
+</template>
+
+<style scoped>
+.m3-radio-dot {
+  transform: scale(0);
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform 150ms ease;
+}
+.m3-radio-dot.is-checked {
+  transform: scale(1);
+}
+</style>

package/src/components/MRadioGroup.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import MRadio from './MRadio.vue'
+
+interface Option {
+  label: string
+  value: unknown
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: unknown
+  options: Option[]
+  label?: string
+  direction?: 'column' | 'row'
+  disabled?: boolean
+  color?: 'primary' | 'secondary' | 'tertiary' | 'error'
+}>(), { direction: 'column', disabled: false, color: 'primary' })
+
+const emit = defineEmits<{ 'update:modelValue': [unknown] }>()
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <span v-if="label" class="text-label-large text-on-surface-variant">{{ label }}</span>
+    <div
+      class="flex gap-4"
+      :class="direction === 'row' ? 'flex-row flex-wrap' : 'flex-col'"
+    >
+      <MRadio
+        v-for="opt in options"
+        :key="String(opt.value)"
+        :model-value="modelValue"
+        :value="opt.value"
+        :label="opt.label"
+        :color="color"
+        :disabled="disabled || !!opt.disabled"
+        @update:model-value="emit('update:modelValue', $event)"
+      />
+    </div>
+  </div>
+</template>

package/src/components/MRating.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import MIcon from './MIcon.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: number
+  max?: number
+  size?: number
+  readonly?: boolean
+  disabled?: boolean
+  color?: string
+  icon?: string
+  halfIncrements?: boolean
+}>(), { max: 5, size: 28, color: 'primary', icon: 'star', halfIncrements: false })
+
+const emit = defineEmits<{ 'update:modelValue': [number] }>()
+
+const hovered = ref(-1)
+
+const colorClass = computed(() => {
+  const map: Record<string, string> = {
+    primary: 'text-primary',
+    secondary: 'text-secondary',
+    tertiary: 'text-tertiary',
+    error: 'text-error',
+  }
+  return map[props.color] || ''
+})
+
+const customStyle = computed(() => {
+  if (['primary', 'secondary', 'tertiary', 'error'].includes(props.color)) return undefined
+  return { color: props.color }
+})
+
+function valueAt(index: number, e?: MouseEvent) {
+  if (!props.halfIncrements) return index + 1
+  if (!e) return index + 1
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+  const half = (e.clientX - rect.left) < rect.width / 2
+  return half ? index + 0.5 : index + 1
+}
+
+function onClick(index: number, e: MouseEvent) {
+  if (props.readonly || props.disabled) return
+  const v = valueAt(index, e)
+  emit('update:modelValue', v === props.modelValue ? 0 : v)
+}
+
+function onMove(index: number, e: MouseEvent) {
+  if (props.readonly || props.disabled) return
+  hovered.value = valueAt(index, e)
+}
+
+function onLeave() {
+  hovered.value = -1
+}
+
+function iconName(index: number) {
+  const active = hovered.value >= 0 ? hovered.value : props.modelValue
+  if (index + 1 <= active) return props.icon
+  if (props.halfIncrements && index + 0.5 <= active) return props.icon + '_half'
+  return props.icon + '_border'  // outlined variant not available for all icons
+}
+
+function isFilled(index: number) {
+  const active = hovered.value >= 0 ? hovered.value : props.modelValue
+  return index + 1 <= active || (props.halfIncrements && index + 0.5 <= active)
+}
+</script>
+
+<template>
+  <div
+    class="inline-flex items-center gap-0.5"
+    :class="disabled ? 'opacity-[0.38]' : ''"
+    @mouseleave="onLeave"
+  >
+    <button
+      v-for="i in max"
+      :key="i"
+      type="button"
+      class="relative inline-flex items-center justify-center rounded-full p-0.5 transition-transform duration-100"
+      :class="[
+        readonly || disabled ? 'cursor-default' : 'cursor-pointer hover:scale-110',
+      ]"
+      :style="customStyle"
+      :disabled="disabled"
+      @click="onClick(i - 1, $event)"
+      @mousemove="onMove(i - 1, $event)"
+    >
+      <!-- Filled star -->
+      <MIcon
+        v-if="isFilled(i - 1)"
+        :name="icon"
+        :size="size"
+        :class="colorClass"
+        :style="customStyle"
+        style="font-variation-settings: 'FILL' 1"
+      />
+      <!-- Empty star -->
+      <MIcon
+        v-else
+        :name="icon"
+        :size="size"
+        class="text-on-surface-variant/40"
+      />
+    </button>
+  </div>
+</template>

package/src/components/MResult.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import MIcon from './MIcon.vue'
+
+const props = withDefaults(defineProps<{
+  status: 'success' | 'error' | 'warning' | 'info' | '404' | '403' | '500'
+  title?: string
+  description?: string
+}>(), {})
+
+const config = computed(() => {
+  switch (props.status) {
+    case 'success': return { icon: 'check_circle',  bg: 'bg-success-container', text: 'text-on-success-container', defaultTitle: 'Operación exitosa',       defaultDesc: 'La acción se completó correctamente.' }
+    case 'error':   return { icon: 'error',          bg: 'bg-error-container',   text: 'text-on-error-container',   defaultTitle: 'Algo salió mal',          defaultDesc: 'Ocurrió un error inesperado. Inténtalo de nuevo.' }
+    case 'warning': return { icon: 'warning',        bg: 'bg-tertiary-container', text: 'text-on-tertiary-container', defaultTitle: 'Atención',             defaultDesc: 'Hay algo que requiere tu atención.' }
+    case 'info':    return { icon: 'info',           bg: 'bg-primary-container', text: 'text-on-primary-container', defaultTitle: 'Información',             defaultDesc: '' }
+    case '404':     return { icon: 'search_off',     bg: 'bg-surface-container-high', text: 'text-on-surface-variant', defaultTitle: 'Página no encontrada', defaultDesc: 'La página que buscas no existe o fue movida.' }
+    case '403':     return { icon: 'lock',           bg: 'bg-error-container',   text: 'text-on-error-container',   defaultTitle: 'Acceso denegado',         defaultDesc: 'No tienes permisos para ver este recurso.' }
+    case '500':     return { icon: 'cloud_off',      bg: 'bg-error-container',   text: 'text-on-error-container',   defaultTitle: 'Error del servidor',      defaultDesc: 'El servidor no pudo procesar la solicitud.' }
+    default:        return { icon: 'info',           bg: 'bg-surface-container-high', text: 'text-on-surface-variant', defaultTitle: '',                     defaultDesc: '' }
+  }
+})
+
+const httpCode = computed(() => {
+  if (props.status === '404' || props.status === '403' || props.status === '500') return props.status
+  return null
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center gap-4 py-14 text-center">
+    <!-- HTTP code -->
+    <span v-if="httpCode" class="text-display-small font-medium text-on-surface-variant/30">
+      {{ httpCode }}
+    </span>
+
+    <!-- Icon -->
+    <div class="flex h-20 w-20 items-center justify-center rounded-full" :class="[config.bg, config.text]">
+      <MIcon :name="config.icon" :size="40" />
+    </div>
+
+    <!-- Title -->
+    <h2 class="text-headline-small font-medium text-on-surface">
+      {{ title ?? config.defaultTitle }}
+    </h2>
+
+    <!-- Description -->
+    <p v-if="description ?? config.defaultDesc" class="max-w-md text-body-large text-on-surface-variant">
+      {{ description ?? config.defaultDesc }}
+    </p>
+
+    <!-- Actions slot -->
+    <div v-if="$slots.actions" class="mt-2 flex flex-wrap items-center justify-center gap-3">
+      <slot name="actions" />
+    </div>
+
+    <!-- Extra content -->
+    <div v-if="$slots.default" class="mt-2">
+      <slot />
+    </div>
+  </div>
+</template>