@maz-ui/mcp 5.0.0 → 5.1.0-beta.0

package/docs/{src/guide → guide}/resolvers.md

@@ -1,49 +1,24 @@
 ---
-title: Auto-Import Resolvers
-description: Complete guide to Maz-UI auto-import resolvers for effortless component, directive, and composable imports
-head:
-  - - meta
-    - name: keywords
-      content: vue auto import, unplugin resolvers, maz-ui resolver, vue components auto import
+title: "Auto-Import Resolvers"
+description: "Complete guide to Maz-UI auto-import resolvers for effortless component, directive, and composable imports"
+package: "maz-ui"
+url: "https://maz-ui.com/guide/resolvers"
 ---
 
 # Auto-Import Resolvers
 
-Supercharge your Vue development with Maz-UI's intelligent auto-import resolvers. Never write import statements again while maintaining perfect tree-shaking and TypeScript support.
-
-::: tip Vue Only Feature
-Auto-import resolvers are designed for Vue projects using build tools like Vite or Webpack. For Nuxt users, everything is already integrated in the [@maz-ui/nuxt module](/ecosystem/nuxt).
-:::
-
-## Why Use Auto-Import Resolvers?
-
-<div class="features-grid">
-
-### Zero Boilerplate
-
-- No manual imports required
-- Components, composables, and directives automatically available
-- IntelliSense support with full TypeScript definitions
-
-### Perfect Tree-Shaking
+> Complete guide to Maz-UI auto-import resolvers for effortless component, directive, and composable imports
 
-- Only imports what you actually use
-- Maintains optimal bundle sizes
-- Same performance as manual imports
+- Package: `maz-ui`
+- Web: https://maz-ui.com/guide/resolvers
 
-### Type Safety
-
-- Full TypeScript support
-- Auto-generated type definitions
-- Compile-time error checking
+Supercharge your Vue development with Maz-UI's intelligent auto-import resolvers. Never write import statements again while maintaining perfect tree-shaking and TypeScript support.
 
-### Conflict Prevention
+**Tip: Vue Only Feature**
 
-- Configurable prefixes to avoid naming conflicts
-- Flexible naming strategies
-- Compatible with other UI libraries
+Auto-import resolvers are designed for Vue projects using build tools like Vite or Webpack. For Nuxt users, everything is already integrated in the [@maz-ui/nuxt module](../ecosystem/nuxt.md).
 
-</div>
+## Why Use Auto-Import Resolvers?
 
 ## Quick Setup
 
@@ -55,8 +30,6 @@ npm install unplugin-vue-components unplugin-auto-import
 
 Configure your build tool:
 
-::: code-group
-
 ```typescript [Vite]
 import vue from '@vitejs/plugin-vue'
 import {
@@ -108,8 +81,6 @@ module.exports = {
 }
 ```
 
-:::
-
 ## Available Resolvers
 
 ### MazComponentsResolver
@@ -183,11 +154,11 @@ function handleClickOutside() {
 
 **Available Directives:**
 
-- **[`v-tooltip`](./../directives/tooltip.md)** - Flexible tooltip positioning and content
-- **[`v-click-outside`](./../directives/click-outside.md)** - Detect clicks outside an element and execute a callback function
-- **[`v-lazy-img`](./../directives/lazy-img.md)** - Lazy load images with intersection observer
-- **[`v-zoom-img`](./../directives/zoom-img.md)** - Click to zoom images with smooth animations
-- **[`v-fullscreen-img`](./../directives/fullscreen-img.md)** - Fullscreen image viewer with navigation
+- **[`v-tooltip`](../directives/tooltip.md)** - Flexible tooltip positioning and content
+- **[`v-click-outside`](../directives/click-outside.md)** - Detect clicks outside an element and execute a callback function
+- **[`v-lazy-img`](../directives/lazy-img.md)** - Lazy load images with intersection observer
+- **[`v-zoom-img`](../directives/zoom-img.md)** - Click to zoom images with smooth animations
+- **[`v-fullscreen-img`](../directives/fullscreen-img.md)** - Fullscreen image viewer with navigation
 
 ### MazModulesResolver
 
@@ -199,7 +170,6 @@ Auto-imports composables and utility functions:
 const toast = useToast()
 const { width, height } = useWindowSize()
 const { isMobile, isTablet } = useBreakpoints()
-const { toggleDarkMode, isDark } = useTheme()
 
 // Utility functions auto-imported
 const debouncedSearch = debounce((query) => {
@@ -229,18 +199,20 @@ function showSuccess() {
 
 | Category             | Composables                               |
 | -------------------- | --------------------------------------------------- |
-| **UI Management**    | [`useToast`](./../composables/use-toast.md), [`useDialog`](./../composables/use-dialog.md), [`useTheme`](./../ecosystem/themes.md#usetheme-composable-api), [`useWait`](./../composables/use-wait.md)      |
-| **Responsive**       | [`useBreakpoints`](./../composables/use-breakpoints.md), [`useWindowSize`](./../composables/use-window-size.md)                   |
-| **User Interaction** | [`useUserVisibility`](./../composables/use-user-visibility.md), [`useIdleTimeout`](./../composables/use-idle-timeout.md), [`useSwipe`](./../composables/use-swipe.md), [`usePullToRefresh`](./../composables/use-pull-to-refresh.md)   |
-| **Form Handling**    | [`useFormValidator`](./../composables/use-form-validator.md)                  |
-| **Advanced**         | [`useTimer`](./../composables/use-timer.md), [`useStringMatching`](./../composables/use-string-matching.md)           |
+| **UI Management**    | [`useToast`](../composables/use-toast.md), [`useDialog`](../composables/use-dialog.md), [`useWait`](../composables/use-wait.md)      |
+| **Responsive**       | [`useBreakpoints`](../composables/use-breakpoints.md), [`useWindowSize`](../composables/use-window-size.md)                   |
+| **User Interaction** | [`useUserVisibility`](../composables/use-user-visibility.md), [`useIdleTimeout`](../composables/use-idle-timeout.md), [`useSwipe`](../composables/use-swipe.md), [`usePullToRefresh`](../composables/use-pull-to-refresh.md)   |
+| **Form Handling**    | [`useFormValidator`](../composables/use-form-validator.md)                  |
+| **Advanced**         | [`useTimer`](../composables/use-timer.md), [`useStringMatching`](../composables/use-string-matching.md)           |
+
+`useTheme` and `useTranslations` are not resolved by `MazModulesResolver`: import them from `@maz-ui/themes` and `@maz-ui/translations` (the Nuxt module auto-imports them).
 
 **Most used available formatters and utilities:**
 
 | Category       | Utilities/Formatters                                                                                                                         |
 | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Formatters** | [`formatCurrency`](./../ecosystem/utils/currency.md), [`formatDate`](./../ecosystem/utils/date.md), [`sleep`](./../ecosystem/utils/sleep.md) |
-| **Utilities**  | [`debounce`](./../ecosystem/utils/debounce.md), [`throttle`](./../ecosystem/utils/throttle.md), [`isEqual`](./../ecosystem/utils/is-equal.md) |
+| **Formatters** | [`formatCurrency`](../ecosystem/utils/currency.md), [`formatDate`](../ecosystem/utils/date.md), [`sleep`](../ecosystem/utils/sleep.md) |
+| **Utilities**  | [`debounce`](../ecosystem/utils/debounce.md), [`throttle`](../ecosystem/utils/throttle.md), [`isEqual`](../ecosystem/utils/is-equal.md) |
 
 ## Advanced Configuration
 
@@ -288,9 +260,9 @@ const mazDebounce = debounce // Note: utility functions are not prefixed
 </template>
 ```
 
-::: warning Prefix Limitation
+**Warning: Prefix Limitation**
+
 Currently, utility functions (like `debounce`, `currency`) are not prefixed by the `MazModulesResolver`. Only composables (functions starting with `use`) are prefixed. This is a limitation that may be addressed in future versions.
-:::
 
 ### Development Mode
 
@@ -524,9 +496,9 @@ The resolvers automatically generate TypeScript definitions:
 // auto-imports.d.ts (generated)
 declare global {
   const useToast: typeof import('maz-ui/composables')['useToast']
-  const useTheme: typeof import('maz-ui/composables')['useTheme']
-  const debounce: typeof import('maz-ui')['debounce']
-  const currency: typeof import('maz-ui')['currency']
+  const useWindowSize: typeof import('maz-ui/composables')['useWindowSize']
+  const debounce: typeof import('@maz-ui/utils')['debounce']
+  const formatCurrency: typeof import('@maz-ui/utils')['formatCurrency']
   // ... all other auto-imports
 }
 
@@ -628,7 +600,8 @@ MazComponentsResolver({
 <script setup lang="ts">
 import { formatCurrency, debounce } from '@maz-ui/utils'
 import { MazBtn, MazCard, MazInput } from 'maz-ui/components'
-import { useTheme, useToast } from 'maz-ui/composables'
+import { useToast } from 'maz-ui/composables'
+import { useTheme } from '@maz-ui/themes'
 import { vTooltip } from 'maz-ui/directives'
 
 const toast = useToast()
@@ -670,48 +643,8 @@ const toast = useToast()
 
 - [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) - The underlying auto-import system
 - [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) - Auto-import for composables and utilities
-- [Nuxt Module](/ecosystem/nuxt) - All auto-imports included out of the box
+- [Nuxt Module](../ecosystem/nuxt.md) - All auto-imports included out of the box
 
 ---
 
 Ready to boost your productivity? Set up auto-import resolvers and never write import statements again! 🚀
-
-<style scoped>
-.features-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1rem;
-  margin: 2rem 0;
-
-  h3 {
-    margin-top: 0;
-  }
-  ul {
-    margin-top: 0;
-  }
-}
-
-.features-grid > div {
-  padding: 1.5rem;
-  border-radius: 0.75rem;
-  border: 1px solid var(--vp-c-border);
-  background: var(--vp-c-bg-soft);
-}
-
-.dashboard {
-  display: grid;
-  gap: 1.5rem;
-}
-
-.stats-card {
-  border: 1px solid var(--vp-c-border);
-  border-radius: 0.5rem;
-  padding: 1rem;
-}
-
-@media (max-width: 768px) {
-  .features-grid {
-    grid-template-columns: 1fr;
-  }
-}
-</style>