Skip to content

v5.0.0-beta.25

Pre-release
Pre-release

Choose a tag to compare

View all tags
@LouisMazel LouisMazel released this 09 Jun 20:44
· 0 commits to master since this release
v5.0.0-beta.25
28c7b35

compare changes

🚀 Features

  • ⚠️ Maz-ui v5 - theming overhaul, RTL-native components, ~8% lighter (76af016e0)

    Maz-UI v5 is a focused major: a theming overhaul on top of Tailwind v4, RTL-correct components, a lighter chart, a simpler icon API, and a one-shot CLI to make the upgrade itself painless.

    Highlights

    • Theming, top to bottom - OKLCh color system for perceptually uniform scales, honest token names (background - surface, border - divider), a real radius scale, a components block to override per-component tokens, the new nova preset, and preset persistence across reloads.
    • Logical direction by default - every left/right prop, slot and CSS hook is now start/end. Set dir="rtl" and components mirror correctly.
    • Lighter chart - MazChart drops vue-chartjs, lazy-loads chart.js, and only registers the modules the chart type actually needs.
    • Simpler icons - one icon prop instead of four. New @maz-ui/icons/raw/* subpath for raw SVG inlining without a Vue component.
    • Standardized sizes - MazBadge joins the rest of the library on the MazSize keyword scale.
    • ~8% lighter library bundle thanks to the chart, icon and theming refactors.
    • Modern browsers required (Chromium 111+, Safari 16.4+, Firefox 128+).

    Migration

    • Mechanical part: npx @maz-ui/upgrade ./ rewrites your code, bumps every maz-ui / @maz-ui/* entry in package.json to ^5.0.0, and runs the right pnpm/yarn/bun/npm install for you.
    • Judgment calls (icon paths, theme preset reshape, chart animation default): connect @maz-ui/mcp to your AI assistant and walk the guide section by section.

    Links

    Solo maintainer note: v4 will receive no further support after v5 stable - no security fixes, no backports.

  • maz-ui: Inputs - top label and assistive text (9e659112a)

  • @maz-ui/eslint-config: Add maz/tailwind-no-arbitrary-px rule and maz plugin (00ff1b837)

    Ships a new ESLint plugin under the maz/* namespace, starting with maz/tailwind-no-arbitrary-px which forbids px units inside Tailwind arbitrary value classes (w-[16px], [gap:24px], ...) and autofixes them to rem (or em).

    The plugin and rule are registered automatically when tailwindcss is enabled in defineConfig. Configure via the tailwindcss.noArbitraryPx shortcut or via a standard ESLint rules override:

    defineConfig({
  tailwindcss: {
    preset: 'recommended',
    noArbitraryPx: { baseFontSize: 16, unit: 'rem', severity: 'error' },
  },
})

    mazPlugin is also exported for users who want to wire the rule manually without enabling the full Tailwind preset.

  • @maz-ui/themes: Modernize CSS generator with light-dark, color-scheme, color-mix (#1572)

  • maz-ui: Add MazSidebar component system (#1574)

    Implements a fully accessible, composable sidebar system for dashboard, admin, and SaaS applications. State is shared via provide/inject from the root MazSidebar component.

    Components added:

    • MazSidebar: root container (push/overlay modes, offcanvas/icon/none collapsible)
    • MazSidebarHeader, MazSidebarContent, MazSidebarFooter: layout zones
    • MazSidebarGroup: grouping with optional label (sr-only in icon mode)
    • MazSidebarSeparator: visual HR divider
    • MazSidebarMenu / MazSidebarMenuItem: ul/li with ARIA roles
    • MazSidebarMenuButton: link/button with icon, label, badge, tooltip auto-show
    • MazSidebarMenuSub: collapsible sub-menu with ArrowRight/ArrowLeft keyboard support
    • MazSidebarTrigger: toggle button with aria-expanded and aria-controls

    Composable added:

    • useSidebar: typed inject for open state, toggle, setOpen, state

    Enhancements:

    • Tailwind utilities and auto-applied m-reset-css on sub-component roots for theming and tree-shaking
    • MazSidebarMenuButton: icon accepts MazIconLike, badge accepts MazBadgeProps, tooltip via v-tooltip directive
    • MazSidebarMenuSub: smooth grid-rows expand/collapse via MazExpandAnimation, accepts MazIconLike icon
    • MazSidebarTrigger: uses MazIcon + MazBars3
    • Overlay mode delegated to MazBackdrop (reuses scroll-lock, focus trap, escape, click-outside)
    • Fixed offcanvas-collapsed border leak and icon-centering jump during collapse
    • Wired into Nuxt module auto-imports

    Closes #1573

  • maz-ui: Add MazCodeHighlight and MazWindowMockup components (#1569)

    MazCodeHighlight:

    • Syntax highlighting with shiki
    • Support default slot text extraction as fallback for code prop
    • Auto-detect dark/light mode via MutationObserver on html element
    • Lazy-loads shiki via dynamic import to keep bundle lean

    MazWindowMockup:

    • Three macOS-style traffic light buttons in all variant title bars
    • Browser variant: address bar with url prop (default 'localhost')
    • Editor variant: filename tab with filename prop (default 'index.vue')
    • Terminal variant: centered title with title prop (default 'zsh'), $ prompt
    • showPrompt prop and #prompt slot for terminal prompt customization
    • minHeight prop for CSS-based content area height control
    • code + language props trigger integrated MazCodeHighlight rendering
    • Default slot for free content when code prop is not set
    • Dark/light mode compatible via maz-ui CSS vars

    Auto-imported in Nuxt module.

  • maz-ui: Improve MazSidebar (da1e2627d)

  • maz-ui: MazSidebar - close/open persistent (#1581)

  • maz-ui: MazSidebar - close/open persistent on SSR (2cdfe37df)

  • Move cookie utils from themes to utils (4f711709d)

  • docs: Ecosystem documentations (#1582)

  • maz-ui: MazSidebar - add 'hover' collapsible mode (#1586)

  • @maz-ui/themes: MazDialog - configurable max/min-width via preset (#1594)

    MazDialog width is now driven by the active theme preset, while staying overridable per instance through the existing max-width / min-width props.

    What changed

    • New components.dialog knobs on the preset contract (max-width / min-width), emitted by the CSS generator as --maz-dialog-max-width / --maz-dialog-min-width.
    • MazDialog now reads those vars with a sensible fallback: var(--maz-dialog-max-width, 38rem) / var(--maz-dialog-min-width, 32rem).
    • All bundled presets ship the defaults. Values are in rem, so ocean (16px base) uses scaled rem (33.25rem / 28rem) to keep the same rendered pixel width as the 14px presets (≈532px / ≈448px).
    • mergePresets now merges components.dialog (and stops dropping input.top-label-font-weight), so definePreset overrides are preserved.

    Usage

    import { definePreset } from '@maz-ui/themes'
// Global default for every dialog, via the preset
const theme = definePreset({
  base: 'maz-ui',
  overrides: {
    components: {
      dialog: { 'max-width': '48rem', 'min-width': '36rem' },
    },
  },
})
    <!-- Per-instance override still wins over the preset -->
<MazDialog v-model="open" max-width="50rem" min-width="40rem" />

  • maz-ui: Global component default props via MazUi plugin & Nuxt module (#1596)

    Components now support global default props configured via the MazUi plugin or Nuxt module. Set library-wide defaults for common props like size and roundedSize, with per-instance props still taking precedence.

    Supported on: MazBtn, MazContainer, MazCard, and all display and form components.

    Usage

    import { definePreset } from '@maz-ui/themes'
// Global defaults, via the preset
const theme = definePreset({
  base: 'maz-ui',
  overrides: {
    components: {
      dialog: { 'max-width': '48rem', 'min-width': '36rem' },
    },
  },
})

  • maz-ui: MazMarkdownEditor - markdown editor (#1602)

🩹 Fixes

  • Add default condition to exports for CJS resolver fallback (d63f00ae2)
  • maz-ui: MazBtn - fix loading layout (79f0b8e9c)
  • maz-ui: MazDatePicker - use dayjs ESM instead of CJS (62de448c4)
  • maz-ui: MazDatePicker tests - align dayjs imports with ESM (e1927a9a6)
  • docs: Bundle dayjs for SSR to handle extension-less ESM imports (d113d9083)
  • maz-ui: MazTable - scrollable behaviour (5a7f3977b)
  • maz-ui: Inputs - auto-fill with SSR (9da60f52b)
  • @maz-ui/themes: Auto color-scheme issue (e9cc995af)
  • @maz-ui/nuxt: Color mode reverts to dark on client navigation (#1587)

💅 Refactors

  • maz-ui: MazSwitch - cursor color to be more visible when not active (beb332941)

📦 Build

⚠️ Breaking Changes

  • ⚠️ Maz-ui v5 - theming overhaul, RTL-native components, ~8% lighter (76af016e0)

    Maz-UI v5 is a focused major: a theming overhaul on top of Tailwind v4, RTL-correct components, a lighter chart, a simpler icon API, and a one-shot CLI to make the upgrade itself painless.

    Highlights

    • Theming, top to bottom - OKLCh color system for perceptually uniform scales, honest token names (background - surface, border - divider), a real radius scale, a components block to override per-component tokens, the new nova preset, and preset persistence across reloads.
    • Logical direction by default - every left/right prop, slot and CSS hook is now start/end. Set dir="rtl" and components mirror correctly.
    • Lighter chart - MazChart drops vue-chartjs, lazy-loads chart.js, and only registers the modules the chart type actually needs.
    • Simpler icons - one icon prop instead of four. New @maz-ui/icons/raw/* subpath for raw SVG inlining without a Vue component.
    • Standardized sizes - MazBadge joins the rest of the library on the MazSize keyword scale.
    • ~8% lighter library bundle thanks to the chart, icon and theming refactors.
    • Modern browsers required (Chromium 111+, Safari 16.4+, Firefox 128+).

    Migration

    • Mechanical part: npx @maz-ui/upgrade ./ rewrites your code, bumps every maz-ui / @maz-ui/* entry in package.json to ^5.0.0, and runs the right pnpm/yarn/bun/npm install for you.
    • Judgment calls (icon paths, theme preset reshape, chart animation default): connect @maz-ui/mcp to your AI assistant and walk the guide section by section.

    Links

    Solo maintainer note: v4 will receive no further support after v5 stable - no security fixes, no backports.

❤️ Contributors

Assets 2
Loading