Add unocss-preset-mgplus: UnoCSS preset for the mgplus mini CSS library

.gitignore

@@ -396,3 +396,6 @@ FodyWeavers.xsd
 
 # JetBrains Rider
 *.sln.iml
+
+# Build output
+dist/

README.md

@@ -1,2 +1,112 @@
 # unocss-preset-mgplus
-Unocss preset for mgplus mini css library
+
+UnoCSS preset for the [mgplus](https://mgpluscss.com) mini CSS library.
+
+[![npm version](https://img.shields.io/npm/v/unocss-preset-mgplus)](https://www.npmjs.com/package/unocss-preset-mgplus)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+
+## Features
+
+- 🎨 **CSS variables** — Injects all mgplus CSS custom properties into `:root`
+- 🧩 **Component styles** — Includes button, badge, alert, nav, modal, grid, tabs, check, radio, toggle, dropdown, loader, progress, group, icon, timeline
+- ⚡ **Tree-shakeable utilities** — Spacing, sizing, display, text, color, positioning, overflow, border, z-index rules — only used classes generate CSS
+- 🌙 **Dark mode** — `.mg-theme-dark` / `.mg-theme-light` + `[data-theme="dark"]` support
+- 📦 **Zero dependencies** — Self-contained; no need to install `mgplus` separately
+
+## Installation
+
+```bash
+npm install -D unocss-preset-mgplus unocss
+```
+
+## Usage
+
+```ts
+// uno.config.ts
+import { defineConfig } from 'unocss'
+import { presetMgplus } from 'unocss-preset-mgplus'
+
+export default defineConfig({
+  presets: [
+    presetMgplus(),
+  ],
+})
+```
+
+### With options
+
+```ts
+import { presetMgplus } from 'unocss-preset-mgplus'
+
+presetMgplus({
+  // Include all component styles (default: true)
+  // Pass false to skip all, or an array to include only specific components
+  components: true,
+
+  // Include tree-shakeable utility class rules (default: true)
+  utilities: true,
+
+  // Include dark/light mode theme utilities (default: true)
+  darkMode: true,
+})
+```
+
+### Selective components
+
+```ts
+presetMgplus({
+  components: ['button', 'badge', 'alert', 'grid'],
+})
+```
+
+Available component names: `button`, `badge`, `alert`, `nav`, `modal`, `grid`, `tabs`, `check`, `radio`, `toggle`, `dropdown`, `loader`, `progress`, `group`, `icon`, `timeline`
+
+## Available classes
+
+### Components (preflights — always included)
+
+| Component | Classes |
+|-----------|---------|
+| Button | `.mg-button`, `.mg-button--outline`, `.mg-button--link`, `.mg-button--clear`, `.mg-button--small`, `.mg-button--large`, `.mg-button--transparent` |
+| Badge | `.mg-badge`, `.mg-badge.success`, `.mg-badge.warning`, `.mg-badge.danger` |
+| Alert | `.mg-alert`, `.mg-alert.danger`, `.mg-alert.success`, `.mg-alert.warning` |
+| Nav | `.mg-nav`, `.mg-nav--inline`, `.mg-nav--buttons` |
+| Modal | `.mg-modal`, `.mg-modal--content`, `.mg-modal--body`, `.mg-modal--bottom/top/left/right` |
+| Grid | `.mg-container`, `.mg-container-fluid`, `.mg-row`, `.mg-col`, `.mg-x1`–`.mg-x12`, `.mg-s1`–`.mg-s12`, `.mg-m1`–`.mg-m12`, `.mg-l1`–`.mg-l12`, `.mg-xl1`–`.mg-xl12` |
+| Tabs | `.mg-tabs`, `.mg-tabs--header`, `.mg-tabs--content`, `.mg-tabs--panel` |
+
+### Utility rules (tree-shaken)
+
+| Category | Examples |
+|----------|---------|
+| Spacing | `mg-pad0`–`mg-pad10`, `mg-pad-l2`, `mg-pad-t3`, `mg-marg0`–`mg-marg10`, `mg-marg-auto` |
+| Sizing | `mg-w5`, `mg-w-full`, `mg-w-half`, `mg-h3`, `mg-w50vh`, `mg-min-w4`, `mg-max-w8` |
+| Display | `mg-block`, `mg-inline`, `mg-inline-flex`, `mg-none`, `mg-show`, `mg-wrap`, `mg-nowrap` |
+| Overflow | `mg-overflow-auto`, `mg-overflow-hidden`, `mg-overflow-x-auto` |
+| Visibility | `mg-visible`, `mg-hidden` |
+| Border | `mg-border`, `mg-border-t/r/b/l`, `mg-border-none`, `mg-rounded`, `mg-rounded3` |
+| Positioning | `mg-relative`, `mg-absolute`, `mg-fixed`, `mg-sticky`, `mg-fixed-top`, `mg-fixed-bottom` |
+| Text | `mg-text-center`, `mg-text-uppercase`, `mg-text-bold`, `mg-text-xl`, `mg-text-ellipsis` |
+| Colors | `mg-primary`, `mg-danger`, `mg-bg-primary`, `mg-bg-dark`, `mg-border-primary` |
+| Z-index | `mg-z0`–`mg-z5`, `mg-z-max` |
+
+## CSS variables
+
+The preset injects these custom properties which can be overridden in your CSS:
+
+```css
+:root {
+  --mg-color-primary: #475dca;
+  --mg-color-dark: hsl(255deg 0% 5%);
+  --mg-color-light: hsl(255deg 0% 95%);
+  --mg-control-radius: 1rem;
+  --mg-input-radius: 1rem;
+  --mg-base-font-size: 1.6rem;
+  /* ... and more */
+}
+```
+
+## License
+
+[MIT](LICENSE) © mgpluscss
+