@banzamel/mineralui 0.4.1 → 0.5.3

package/README.md

@@ -3,10 +3,10 @@
 React component framework for dashboards, admin panels, documentation shells, settings screens and data-heavy internal products.
 
 - npm: `@banzamel/mineralui`
-- release version: `0.4.0`
-- peer dependencies: `react >= 18`, `react-dom >= 18`
+- release version: `0.5.3`
+- peer dependencies: `react >= 19`, `react-dom >= 19`
 - repository: `https://github.com/Banzamel/mineralui`
-- styles: plain `.css` files + CSS variables exposed as `--mineral-*`
+- styles: auto-injected — CSS is bundled into JS and applied automatically on import
 
 ## Installation
 
@@ -14,9 +14,7 @@ React component framework for dashboards, admin panels, documentation shells, se
 npm install @banzamel/mineralui
 ```
 
-```tsx
-import '@banzamel/mineralui/styles.css'
-```
+No separate CSS import needed. Styles are auto-injected when you import any component.
 
 ## Quick Start
 
@@ -31,7 +29,6 @@ import {
     MSelect,
     MStack,
 } from '@banzamel/mineralui'
-import '@banzamel/mineralui/styles.css'
 
 function AccountSettings() {
     return (
@@ -63,6 +60,7 @@ function AccountSettings() {
 ### Theme and primitives
 - `MThemeProvider`, `useMTheme`
 - `MPortal`, `MPopover`
+- `MI18nProvider` — locale context for framework-level translations
 - CSS variable token system for dark and light mode
 - scoped theme overrides through the provider
 
@@ -71,17 +69,26 @@ function AccountSettings() {
 - `MStack`, `MInline`, `MGrid`, `MGridItem`
 - `MSurface`, `MDivider`
 - `MHeader`, `MFooter`, `MNavbar`, `MNavs`, `MTabs`
+- `MSidebar`, `MSidebarItem`, `MSidebarGroup`, `MSidebarDivider`
+- `MSubNav`
 
 ### Display
 - `MCard`, `MCardHeader`, `MCardBody`, `MCardFooter`
-- `MBadge`, `MAlert`
+- `MBadge`, `MAlert`, `MBanner`
 - `MTable`, `MTableRoot`, `MTableHead`, `MTableBody`, `MTableRow`, `MTableHeadCell`, `MTableCell`
 - `MCollapsible`, `MSpinner`, `MLoader`
 - `MAvatar`, `MModal`
+- `MImage`, `MGallery`
+- `MCarousel`
+- `MProgressBar`
+- `MRating`
+- `MCountUp`
+- `MTaskList`, `MTaskItem`
+- `MDropdownMenu`, `MDropdownMenuItem`, `MDropdownMenuDivider`
 - `MCalendarBoard`, `MCalendarDayCell`, `MCalendarEventList`, `MCalendarEventItem`, `MCalendarEventPopover`, `MCalendarTimeline`
 
 ### Typography
-- `MHeading`, `MText`, `MLink`, `MCode`, `MList`, `MListItem`
+- `MHeading`, `MText`, `MSubText`, `MLink`, `MCode`, `MList`, `MListItem`
 
 ### Controls
 - `MButton`
@@ -100,7 +107,7 @@ function AccountSettings() {
 - `MSelect`
 - `MAutocomplete`
 - `MDatePicker`
-- `MDateRangePicker`
+- `MDateRangePicker` — supports `presetsSidebar` for a toggleable side panel with predefined date ranges
 - `MTimePicker`
 
 ### Form and validation
@@ -122,11 +129,29 @@ MineralUI is driven by CSS variables and readable class names.
 
 ```css
 :root {
+    /* Brand — override only *-rgb, the rest is auto-generated */
     --mineral-primary-rgb: 0, 165, 222;
-    --mineral-primary: rgba(0, 165, 222, 1);
-    --mineral-surface: rgba(255, 255, 255, 1);
-    --mineral-text: rgba(17, 24, 39, 1);
-    --mineral-border: rgba(203, 213, 225, 1);
+    --mineral-primary: rgba(var(--mineral-primary-rgb), 1);
+
+    /* Status palette */
+    --mineral-success-rgb: 22, 163, 74;
+    --mineral-error-rgb: 220, 38, 38;
+    --mineral-warning-rgb: 234, 124, 0;
+    --mineral-info-rgb: 59, 130, 246;
+
+    /* Surface (dark mode default) */
+    --mineral-surface: rgba(21, 29, 46, 1);
+    --mineral-page-bg: rgba(15, 23, 42, 1);
+    --mineral-input-bg: rgba(37, 51, 71, 1);
+
+    /* Text */
+    --mineral-text: rgba(226, 232, 240, 1);
+    --mineral-text-secondary: rgba(100, 116, 139, 1);
+
+    /* Borders */
+    --mineral-border: rgba(255, 255, 255, 0.15);
+    --mineral-border-hover: rgba(255, 255, 255, 0.25);
+    --mineral-border-focus: var(--mineral-primary);
 }
 ```
 
@@ -148,6 +173,7 @@ Framework defaults:
 ### Layout-first API
 - `MStack`, `MInline` and `MGrid` cover the majority of internal dashboard layouts without extra utility libraries.
 - `MGrid` supports equal columns by default and responsive span overrides with `sm`, `md`, `lg`, `xl`.
+- `MSidebar` provides collapsible, nested navigation with grouped items and dividers.
 
 ### Form-heavy components
 - Specialized inputs handle formatting and validation instead of pushing that logic into every application.
@@ -156,32 +182,23 @@ Framework defaults:
 
 ### Date workflows
 - `MDatePicker` and `MDateRangePicker` support inline and popover usage.
-- `MDateRangePicker` ships with built-in presets such as `Today`, `Last 7 days`, `Last 30 days`, `This month`, and `Previous month`.
+- `MDateRangePicker` ships with 12 built-in presets and a toggleable `presetsSidebar` for quick range selection.
 - `MCalendarBoard` covers non-form calendar surfaces such as planning, invoices, birthdays, and task density views.
 
+### Rich display components
+- `MCarousel` for image and content slideshows.
+- `MImage` with aspect ratio, fallback and lazy loading. `MGallery` for responsive image grids.
+- `MProgressBar` with animated fills and label support.
+- `MRating` for star-based interactive ratings.
+- `MCountUp` for animated number counters.
+- `MTaskList` for checklist-style task tracking.
+- `MDropdownMenu` for context menus and action lists.
+- `MBanner` for page-level messaging.
+
 ### Interaction model
 - Buttons, cards, avatars, tabs and interactive inputs can share the same click effect model.
 - Navigation and picker overlays render through shared popover primitives.
 
-## Build and Checks
-
-```bash
-npm run format
-npm run format:check
-npm run build
-```
-
-Known note:
-- `vite-plugin-dts` / API Extractor currently warns about its bundled TypeScript version versus the installed project version, but the build completes successfully.
-
-## Local Verification Surface
-
-The working documentation and preview site lives in the sibling project:
-
-- `../mineralui-website`
-
-That site is wired to the local package build through `file:../mineralui` and is the primary visual verification surface before release.
-
 ## Repository
 
 - GitHub: `https://github.com/Banzamel/mineralui`