@m3ui-vue/m3ui-vue 0.1.0

package/dist/styles/theme.css

@@ -0,0 +1,249 @@
+/* Enable class-based dark mode for Tailwind v4 */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ---------------------------------------------------------------------- */
+/* Material 3 design tokens — light theme (baseline purple)               */
+/* ---------------------------------------------------------------------- */
+@theme {
+  --font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
+
+  /* Color roles */
+  --color-primary: #6750a4;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #eaddff;
+  --color-on-primary-container: #21005d;
+
+  --color-secondary: #625b71;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #e8def8;
+  --color-on-secondary-container: #1d192b;
+
+  --color-tertiary: #7d5260;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #ffd8e4;
+  --color-on-tertiary-container: #31111d;
+
+  --color-error: #b3261e;
+  --color-on-error: #ffffff;
+  --color-error-container: #f9dedc;
+  --color-on-error-container: #410e0b;
+
+  --color-success: #2e7d32;
+  --color-on-success: #ffffff;
+  --color-success-container: #c8e6c9;
+  --color-on-success-container: #0d3311;
+
+  --color-background: #fffbfe;
+  --color-on-background: #1c1b1f;
+
+  --color-surface: #fffbfe;
+  --color-on-surface: #1c1b1f;
+  --color-surface-variant: #e7e0ec;
+  --color-on-surface-variant: #49454f;
+
+  --color-surface-dim: #ded8e1;
+  --color-surface-bright: #fffbfe;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #f7f2fa;
+  --color-surface-container: #f3edf7;
+  --color-surface-container-high: #ece6f0;
+  --color-surface-container-highest: #e6e0e9;
+
+  --color-outline: #79747e;
+  --color-outline-variant: #cac4d0;
+  --color-shadow: #000000;
+
+  --color-inverse-surface: #313033;
+  --color-inverse-on-surface: #f4eff4;
+  --color-inverse-primary: #d0bcff;
+
+  /* Shape (corner radius) scale */
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 28px;
+
+  /* Elevation */
+  --shadow-elevation-1: 0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 1px 3px 1px rgb(0 0 0 / 0.15);
+  --shadow-elevation-2: 0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 2px 6px 2px rgb(0 0 0 / 0.15);
+  --shadow-elevation-3: 0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15);
+
+  /* Type scale */
+  --text-display-small: 2.25rem;
+  --text-display-small--line-height: 2.75rem;
+
+  --text-headline-large: 2rem;
+  --text-headline-large--line-height: 2.5rem;
+  --text-headline-medium: 1.75rem;
+  --text-headline-medium--line-height: 2.25rem;
+  --text-headline-small: 1.5rem;
+  --text-headline-small--line-height: 2rem;
+
+  --text-title-large: 1.375rem;
+  --text-title-large--line-height: 1.75rem;
+  --text-title-medium: 1rem;
+  --text-title-medium--line-height: 1.5rem;
+  --text-title-small: 0.875rem;
+  --text-title-small--line-height: 1.25rem;
+
+  --text-body-large: 1rem;
+  --text-body-large--line-height: 1.5rem;
+  --text-body-medium: 0.875rem;
+  --text-body-medium--line-height: 1.25rem;
+  --text-body-small: 0.75rem;
+  --text-body-small--line-height: 1rem;
+
+  --text-label-large: 0.875rem;
+  --text-label-large--line-height: 1.25rem;
+  --text-label-medium: 0.75rem;
+  --text-label-medium--line-height: 1rem;
+  --text-label-small: 0.6875rem;
+  --text-label-small--line-height: 1rem;
+}
+
+/* ---------------------------------------------------------------------- */
+/* Dark theme overrides — M3 baseline purple dark scheme                  */
+/* ---------------------------------------------------------------------- */
+.dark {
+  color-scheme: dark;
+
+  --color-primary: #d0bcff;
+  --color-on-primary: #381e72;
+  --color-primary-container: #4f378b;
+  --color-on-primary-container: #eaddff;
+
+  --color-secondary: #ccc2dc;
+  --color-on-secondary: #332d41;
+  --color-secondary-container: #4a4458;
+  --color-on-secondary-container: #e8def8;
+
+  --color-tertiary: #efb8c8;
+  --color-on-tertiary: #492532;
+  --color-tertiary-container: #633b48;
+  --color-on-tertiary-container: #ffd8e4;
+
+  --color-error: #f2b8b5;
+  --color-on-error: #601410;
+  --color-error-container: #8c1d18;
+  --color-on-error-container: #f9dedc;
+
+  --color-success: #81c784;
+  --color-on-success: #1b5e20;
+  --color-success-container: #2e7d32;
+  --color-on-success-container: #c8e6c9;
+
+  --color-background: #141218;
+  --color-on-background: #e6e1e5;
+
+  --color-surface: #141218;
+  --color-on-surface: #e6e1e5;
+  --color-surface-variant: #49454f;
+  --color-on-surface-variant: #cac4d0;
+
+  --color-surface-dim: #141218;
+  --color-surface-bright: #3b383e;
+  --color-surface-container-lowest: #0f0d13;
+  --color-surface-container-low: #1d1b20;
+  --color-surface-container: #211f26;
+  --color-surface-container-high: #2b2930;
+  --color-surface-container-highest: #36343b;
+
+  --color-outline: #938f99;
+  --color-outline-variant: #49454f;
+  --color-shadow: #000000;
+
+  --color-inverse-surface: #e6e1e5;
+  --color-inverse-on-surface: #313033;
+  --color-inverse-primary: #6750a4;
+}
+
+/* ---------------------------------------------------------------------- */
+/* Base styles                                                             */
+/* ---------------------------------------------------------------------- */
+@layer base {
+  :root {
+    --field-bg: var(--color-surface);
+  }
+
+  html {
+    color-scheme: light;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  body {
+    @apply bg-surface text-on-surface font-sans text-body-large antialiased;
+  }
+
+  ::selection {
+    @apply bg-primary-container text-on-primary-container;
+  }
+}
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-outline-variant) transparent;
+}
+
+/* ---------------------------------------------------------------------- */
+/* Animations                                                             */
+/* ---------------------------------------------------------------------- */
+@keyframes m3-progress-indeterminate {
+  0%   { left: -50%; width: 40% }
+  60%  { left: 110%; width: 40% }
+  100% { left: 110%; width: 40% }
+}
+
+html.theme-transitioning *,
+html.theme-transitioning *::before,
+html.theme-transitioning *::after {
+  transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease,
+              box-shadow 250ms ease, fill 250ms ease, stroke 250ms ease !important;
+}
+
+@keyframes m3-ripple {
+  from { transform: scale(0); opacity: 0.15; }
+  to   { transform: scale(1); opacity: 0; }
+}
+
+.m3-ripple {
+  position: absolute;
+  border-radius: 50%;
+  background: currentColor;
+  pointer-events: none;
+  animation: m3-ripple 450ms cubic-bezier(0.2, 0, 0.8, 1) forwards;
+}
+
+@keyframes m3-ctx-in {
+  from { transform: translateY(-6px) scale(0.94); }
+  to   { transform: translateY(0)    scale(1); }
+}
+
+.m3-ctx-panel {
+  animation: m3-ctx-in 140ms cubic-bezier(0.2, 0, 0, 1) both;
+  transform-origin: top left;
+}
+
+@keyframes m3-wavy-spin {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

package/package.json

@@ -0,0 +1,166 @@
+{
+  "name": "@m3ui-vue/m3ui-vue",
+  "version": "0.1.0",
+  "description": "Material 3 component library for Vue 3 + Tailwind CSS v4",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SrWither/m3ui-vue.git"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "material-design",
+    "material-3",
+    "tailwindcss",
+    "components",
+    "ui"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/m3ui.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/m3ui.js"
+    },
+    "./theme": "./src/styles/theme.css",
+    "./palettes": "./src/styles/palettes.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "pnpm build:js && pnpm build:types && pnpm build:css",
+    "build:js": "vite build",
+    "build:types": "vue-tsc -p tsconfig.build.json",
+    "build:css": "cp -r src/styles dist/",
+    "prepublishOnly": "pnpm build"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4.0.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@tiptap/vue-3": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
+    "@tiptap/extension-placeholder": {
+      "optional": true
+    },
+    "@tiptap/extension-underline": {
+      "optional": true
+    },
+    "@tiptap/extension-text-align": {
+      "optional": true
+    },
+    "@tiptap/extension-link": {
+      "optional": true
+    },
+    "@tiptap/extension-image": {
+      "optional": true
+    },
+    "@tiptap/extension-color": {
+      "optional": true
+    },
+    "@tiptap/extension-text-style": {
+      "optional": true
+    },
+    "@tiptap/extension-highlight": {
+      "optional": true
+    },
+    "codemirror": {
+      "optional": true
+    },
+    "@codemirror/view": {
+      "optional": true
+    },
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@codemirror/commands": {
+      "optional": true
+    },
+    "@codemirror/language": {
+      "optional": true
+    },
+    "@codemirror/lang-javascript": {
+      "optional": true
+    },
+    "@codemirror/lang-json": {
+      "optional": true
+    },
+    "@codemirror/lang-html": {
+      "optional": true
+    },
+    "@codemirror/lang-css": {
+      "optional": true
+    },
+    "@codemirror/lang-python": {
+      "optional": true
+    },
+    "@codemirror/theme-one-dark": {
+      "optional": true
+    },
+    "@xterm/xterm": {
+      "optional": true
+    },
+    "@xterm/addon-fit": {
+      "optional": true
+    },
+    "markdown-it": {
+      "optional": true
+    },
+    "chart.js": {
+      "optional": true
+    },
+    "vue-chartjs": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.43.1",
+    "@tiptap/extension-color": "^3.26.1",
+    "@tiptap/extension-highlight": "^3.26.1",
+    "@tiptap/extension-image": "^3.26.1",
+    "@tiptap/extension-link": "^3.26.1",
+    "@tiptap/extension-placeholder": "^3.26.1",
+    "@tiptap/extension-text-align": "^3.26.1",
+    "@tiptap/extension-text-style": "^3.26.1",
+    "@tiptap/extension-underline": "^3.26.1",
+    "@tiptap/starter-kit": "^3.26.1",
+    "@tiptap/vue-3": "^3.26.1",
+    "@types/markdown-it": "^14.1.2",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/tsconfig": "^0.9.1",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/xterm": "^6.0.0",
+    "chart.js": "^4.5.1",
+    "codemirror": "^6.0.2",
+    "markdown-it": "^14.2.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.16",
+    "vue": "^3.5.38",
+    "vue-chartjs": "^5.3.3",
+    "vue-tsc": "^3.3.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/MAlert.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import MIcon from './MIcon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'info' | 'success' | 'warning' | 'error'
+    title?: string
+    closeable?: boolean
+  }>(),
+  {
+    type: 'info',
+    closeable: false,
+  },
+)
+
+const emit = defineEmits<{ close: [] }>()
+
+const config = {
+  info: {
+    icon: 'info',
+    container: 'bg-primary-container text-on-primary-container',
+    iconColor: 'text-primary',
+  },
+  success: {
+    icon: 'check_circle',
+    container: 'bg-success-container text-on-success-container',
+    iconColor: 'text-success',
+  },
+  warning: {
+    icon: 'warning',
+    container: 'bg-tertiary-container text-on-tertiary-container',
+    iconColor: 'text-tertiary',
+  },
+  error: {
+    icon: 'error',
+    container: 'bg-error-container text-on-error-container',
+    iconColor: 'text-error',
+  },
+}
+</script>
+
+<template>
+  <div class="flex items-start gap-3 rounded-md p-4" :class="config[type].container">
+    <MIcon
+      :name="config[type].icon"
+      :size="20"
+      class="mt-0.5 shrink-0"
+      :class="config[type].iconColor"
+    />
+    <div class="min-w-0 flex-1">
+      <p v-if="title" class="mb-0.5 text-label-large font-medium">{{ title }}</p>
+      <div class="text-body-medium">
+        <slot />
+      </div>
+      <div v-if="$slots.actions" class="mt-3 flex flex-wrap gap-2">
+        <slot name="actions" />
+      </div>
+    </div>
+    <button
+      v-if="closeable"
+      type="button"
+      class="shrink-0 cursor-pointer rounded-full p-1 transition-colors hover:bg-on-surface/8"
+      aria-label="Cerrar"
+      @click="emit('close')"
+    >
+      <MIcon name="close" :size="18" />
+    </button>
+  </div>
+</template>

package/src/components/MAppBar.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  color?: 'surface' | 'primary' | 'secondary' | 'tertiary'
+  elevated?: boolean
+  dense?: boolean
+}>(), { color: 'surface' })
+
+const colorMap: Record<string, string> = {
+  surface:   'bg-surface text-on-surface',
+  primary:   'bg-primary text-on-primary',
+  secondary: 'bg-secondary text-on-secondary',
+  tertiary:  'bg-tertiary text-on-tertiary',
+}
+</script>
+
+<template>
+  <div
+    class="flex w-full items-center gap-2 px-4 transition-shadow"
+    :class="[
+      colorMap[color],
+      elevated ? 'shadow-elevation-2' : '',
+      dense ? 'h-12' : 'h-16',
+    ]"
+  >
+    <!-- Leading -->
+    <div v-if="$slots.leading" class="flex shrink-0 items-center">
+      <slot name="leading" />
+    </div>
+
+    <!-- Content -->
+    <div class="flex flex-1 items-center overflow-hidden">
+      <slot />
+    </div>
+
+    <!-- Trailing -->
+    <div v-if="$slots.trailing" class="flex shrink-0 items-center gap-1">
+      <slot name="trailing" />
+    </div>
+  </div>
+</template>

package/src/components/MAvatar.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{ name: string; size?: number }>(), { size: 40 })
+
+const initials = computed(() => {
+  const parts = props.name.trim().split(/\s+/).filter(Boolean)
+  const first = parts[0]?.[0] ?? ''
+  const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : ''
+  return (first + last).toUpperCase() || '?'
+})
+</script>
+
+<template>
+  <div
+    class="inline-flex shrink-0 items-center justify-center rounded-full bg-primary-container font-medium text-on-primary-container"
+    :style="{ width: `${size}px`, height: `${size}px`, fontSize: `${Math.round(size * 0.4)}px` }"
+  >
+    {{ initials }}
+  </div>
+</template>

package/src/components/MBadge.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    count?: number
+    dot?: boolean
+    color?: 'primary' | 'error' | 'secondary' | 'tertiary'
+    max?: number
+  }>(),
+  {
+    color: 'error',
+    max: 99,
+  },
+)
+
+const show = computed(() => props.dot || (props.count !== undefined && props.count > 0))
+
+const label = computed(() => {
+  if (props.dot || props.count === undefined) return ''
+  return props.count > props.max ? `${props.max}+` : String(props.count)
+})
+
+const colorMap: Record<string, string> = {
+  primary: 'bg-primary text-on-primary',
+  error: 'bg-error text-on-error',
+  secondary: 'bg-secondary text-on-secondary',
+  tertiary: 'bg-tertiary text-on-tertiary',
+}
+</script>
+
+<template>
+  <span class="relative inline-flex">
+    <slot />
+    <span
+      v-if="show"
+      class="absolute -right-1 -top-1 flex items-center justify-center rounded-full font-medium leading-none"
+      :class="[
+        colorMap[color],
+        !label || dot ? 'h-2.5 w-2.5' : label.length > 2 ? 'h-5 min-w-[1.25rem] px-1 text-[10px]' : 'h-5 w-5 text-[10px]',
+      ]"
+    >
+      <span v-if="!dot">{{ label }}</span>
+    </span>
+  </span>
+</template>

package/src/components/MBottomSheet.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import MIcon from './MIcon.vue'
+
+withDefaults(defineProps<{
+  modelValue: boolean
+  title?: string
+  fullHeight?: boolean
+}>(), { fullHeight: false })
+
+const emit = defineEmits<{ 'update:modelValue': [boolean] }>()
+const close = () => emit('update:modelValue', false)
+
+// Drag-to-dismiss state
+const dragY = ref(0)
+const dragging = ref(false)
+let startY = 0
+
+function onHandlePointerDown(e: PointerEvent) {
+  dragging.value = true
+  startY = e.clientY
+  dragY.value = 0
+  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+}
+function onHandlePointerMove(e: PointerEvent) {
+  if (!dragging.value) return
+  dragY.value = Math.max(0, e.clientY - startY)
+}
+function onHandlePointerUp() {
+  if (dragY.value > 100) close()
+  dragging.value = false
+  dragY.value = 0
+}
+
+const sheetStyle = computed(() => ({
+  transform: `translateY(${dragY.value}px)`,
+  transition: dragging.value ? 'none' : undefined,
+}))
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="bs" :duration="{ enter: 320, leave: 280 }">
+      <div v-if="modelValue" class="fixed inset-0 z-[200] flex flex-col justify-end">
+        <!-- Scrim -->
+        <div class="bs-scrim absolute inset-0 bg-black/40" @click="close" />
+
+        <!-- Panel -->
+        <div
+          class="bs-panel relative flex w-full flex-col rounded-t-[28px] bg-surface-container-low shadow-elevation-3"
+          :class="fullHeight ? 'max-h-[92vh]' : 'max-h-[60vh]'"
+          :style="sheetStyle"
+        >
+          <!-- Drag handle -->
+          <div
+            class="flex h-9 shrink-0 cursor-grab touch-none select-none items-center justify-center active:cursor-grabbing"
+            @pointerdown="onHandlePointerDown"
+            @pointermove="onHandlePointerMove"
+            @pointerup="onHandlePointerUp"
+          >
+            <div class="h-1 w-8 rounded-full bg-on-surface-variant/40" />
+          </div>
+
+          <!-- Header -->
+          <div v-if="title" class="flex shrink-0 items-center justify-between px-6 pb-4">
+            <h2 class="text-title-large text-on-surface">{{ title }}</h2>
+            <button
+              type="button"
+              class="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8"
+              @click="close"
+            >
+              <MIcon name="close" :size="20" />
+            </button>
+          </div>
+
+          <!-- Content -->
+          <div class="flex-1 overflow-y-auto px-6 pb-6">
+            <slot />
+          </div>
+
+          <!-- Actions -->
+          <div v-if="$slots.actions" class="shrink-0 border-t border-outline-variant px-6 py-4">
+            <slot name="actions" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.bs-scrim {
+  transition: opacity 300ms ease;
+}
+.bs-enter-from .bs-scrim,
+.bs-leave-to .bs-scrim {
+  opacity: 0;
+}
+
+.bs-panel {
+  transition:
+    transform 320ms cubic-bezier(0.2, 0, 0, 1),
+    opacity 240ms ease;
+}
+.bs-enter-from .bs-panel {
+  transform: translateY(40%);
+  opacity: 0;
+}
+.bs-leave-to .bs-panel {
+  transform: translateY(100%) !important;
+  opacity: 0;
+}
+</style>