@nice2dev/ui 1.0.4 → 1.0.6

package/README.md

@@ -95,193 +95,232 @@ function App() {
 
 ---
 
+## Code Splitting & Tree Shaking
+
+For optimal bundle size, import only the components you need. The library supports multiple entry points for code splitting:
+
+```tsx
+// Import everything (full bundle)
+import { NiceButton, NiceDataGrid, NiceChart } from '@nice2dev/ui';
+
+// Or import from specific submodules for smaller bundles
+import { NiceDataGrid, NiceTreeGrid } from '@nice2dev/ui/data';
+import { NiceChart, NicePieChart } from '@nice2dev/ui/charts';
+import { NiceTextInput, NiceSelect } from '@nice2dev/ui/editors';
+import { NiceAlert, NiceModal, useNiceToast } from '@nice2dev/ui/feedback';
+import { NiceTabs, NiceNavbar } from '@nice2dev/ui/navigation';
+import { NiceWindow, NiceLoadPanel } from '@nice2dev/ui/overlays';
+```
+
+### Lazy Loading Heavy Components
+
+For code-heavy components like code editors and document viewers, use the built-in lazy loading:
+
+```tsx
+import { LazyComponents, createLazyComponent, usePreloadOnIdle } from '@nice2dev/ui';
+
+// Use pre-built lazy components
+<LazyComponents.CodeEditor value={code} language="typescript" onChange={setCode} />;
+
+// Or create your own lazy wrapper
+const LazyChart = createLazyComponent(() => import('@nice2dev/ui/charts').then((m) => ({ default: m.NiceChart })), {
+  preloadOnHover: true,
+  displayName: 'LazyChart',
+});
+
+// Preload components when browser is idle
+usePreloadOnIdle([LazyComponents.CodeEditor.preload, LazyComponents.HtmlEditor.preload]);
+```
+
+---
+
 ## Component Catalog
 
 ### Editors (28 components)
 
 Form input components with consistent `NiceFormFieldProps` interface: `label`, `helperText`, `error`, `required`, `disabled`, `readOnly`, `size`, `name`.
 
-| Component | Key Props | Description |
-|-----------|-----------|-------------|
-| `NiceTextInput` | `value`, `onChange`, `placeholder`, `type`, `clearable` | Standard text input |
-| `NiceTextArea` | `value`, `onChange`, `rows`, `autoResize`, `maxLength` | Multi-line text input |
-| `NiceNumberInput` | `value`, `onChange`, `min`, `max`, `step`, `format` | Numeric input with stepper |
-| `NiceDatePicker` | `value`, `onChange`, `format`, `minDate`, `maxDate` | Date selection |
-| `NiceSelect` | `value`, `onChange`, `options[]`, `searchable`, `clearable`, `multiple` | Dropdown select |
-| `NiceCheckbox` | `checked`, `onChange`, `indeterminate` | Checkbox |
-| `NiceToggle` | `checked`, `onChange`, `labelOn`, `labelOff` | Toggle switch |
-| `NiceRadioGroup` | `value`, `onChange`, `options[]`, `direction` | Radio button group |
-| `NiceSlider` | `value`, `onChange`, `min`, `max`, `step`, `showTooltip` | Single-value slider |
-| `NiceColorPicker` | `value`, `onChange`, `format`, `presets[]` | Color picker with presets |
-| `NiceAutocomplete` | `value`, `onChange`, `options[]`, `onSearch`, `debounce` | Autocomplete input |
-| `NiceLookup` | `value`, `onChange`, `dataSource`, `displayExpr`, `valueExpr` | Lookup field |
-| `NiceCalendar` | `value`, `onChange`, `minDate`, `maxDate`, `disabledDates` | Inline calendar |
-| `NiceDateRangeBox` | `startDate`, `endDate`, `onChange`, `format` | Date range picker |
-| `NiceTagBox` | `value`, `onChange`, `options[]`, `maxTags`, `allowCustom` | Tag/chip input |
-| `NiceRangeSlider` | `value` (tuple), `onChange`, `min`, `max`, `step` | Dual-handle range slider |
-| `NiceDropDownBox` | `value`, `onChange`, `renderContent`, `displayValue` | Generic drop-down container |
-| `NiceHtmlEditor` | `value`, `onChange`, `toolbar`, `placeholder` | Rich text (HTML) editor |
-| `NiceForm` | `children`, `onSubmit`, `layout`, `labelPosition` | Form layout wrapper |
-| `NiceRating` | `value`, `onChange`, `max`, `icon`, `allowHalf` | Star/icon rating input |
-| `NiceOtpInput` | `value`, `onChange`, `length`, `type` | One-time password input |
-| `NiceSignaturePad` | `value`, `onChange`, `width`, `height`, `penColor` | Signature capture pad |
-| `NiceMentionInput` | `value`, `onChange`, `users[]`, `trigger` | Text input with @mentions |
-| `NiceTreeSelect` | `value`, `onChange`, `nodes[]`, `multiple` | Tree-based selection |
-| `NiceMaskedInput` | `value`, `onChange`, `mask`, `placeholder` | Masked/formatted input |
-| `NiceKnob` | `value`, `onChange`, `min`, `max`, `draggable` | Rotary knob input |
-| `NicePickList` | `source[]`, `target[]`, `onChange` | Dual-list pick transfer |
-| `NiceInlineEdit` | `value`, `onChange`, `renderDisplay`, `renderEditor` | Click-to-edit inline |
-| `NiceLookup` | `value`, `onChange`, `dataSource`, `displayExpr`, `valueExpr` | Lookup field |
+| Component          | Key Props                                                               | Description                 |
+| ------------------ | ----------------------------------------------------------------------- | --------------------------- |
+| `NiceTextInput`    | `value`, `onChange`, `placeholder`, `type`, `clearable`                 | Standard text input         |
+| `NiceTextArea`     | `value`, `onChange`, `rows`, `autoResize`, `maxLength`                  | Multi-line text input       |
+| `NiceNumberInput`  | `value`, `onChange`, `min`, `max`, `step`, `format`                     | Numeric input with stepper  |
+| `NiceDatePicker`   | `value`, `onChange`, `format`, `minDate`, `maxDate`                     | Date selection              |
+| `NiceSelect`       | `value`, `onChange`, `options[]`, `searchable`, `clearable`, `multiple` | Dropdown select             |
+| `NiceCheckbox`     | `checked`, `onChange`, `indeterminate`                                  | Checkbox                    |
+| `NiceToggle`       | `checked`, `onChange`, `labelOn`, `labelOff`                            | Toggle switch               |
+| `NiceRadioGroup`   | `value`, `onChange`, `options[]`, `direction`                           | Radio button group          |
+| `NiceSlider`       | `value`, `onChange`, `min`, `max`, `step`, `showTooltip`                | Single-value slider         |
+| `NiceColorPicker`  | `value`, `onChange`, `format`, `presets[]`                              | Color picker with presets   |
+| `NiceAutocomplete` | `value`, `onChange`, `options[]`, `onSearch`, `debounce`                | Autocomplete input          |
+| `NiceLookup`       | `value`, `onChange`, `dataSource`, `displayExpr`, `valueExpr`           | Lookup field                |
+| `NiceCalendar`     | `value`, `onChange`, `minDate`, `maxDate`, `disabledDates`              | Inline calendar             |
+| `NiceDateRangeBox` | `startDate`, `endDate`, `onChange`, `format`                            | Date range picker           |
+| `NiceTagBox`       | `value`, `onChange`, `options[]`, `maxTags`, `allowCustom`              | Tag/chip input              |
+| `NiceRangeSlider`  | `value` (tuple), `onChange`, `min`, `max`, `step`                       | Dual-handle range slider    |
+| `NiceDropDownBox`  | `value`, `onChange`, `renderContent`, `displayValue`                    | Generic drop-down container |
+| `NiceHtmlEditor`   | `value`, `onChange`, `toolbar`, `placeholder`                           | Rich text (HTML) editor     |
+| `NiceForm`         | `children`, `onSubmit`, `layout`, `labelPosition`                       | Form layout wrapper         |
+| `NiceRating`       | `value`, `onChange`, `max`, `icon`, `allowHalf`                         | Star/icon rating input      |
+| `NiceOtpInput`     | `value`, `onChange`, `length`, `type`                                   | One-time password input     |
+| `NiceSignaturePad` | `value`, `onChange`, `width`, `height`, `penColor`                      | Signature capture pad       |
+| `NiceMentionInput` | `value`, `onChange`, `users[]`, `trigger`                               | Text input with @mentions   |
+| `NiceTreeSelect`   | `value`, `onChange`, `nodes[]`, `multiple`                              | Tree-based selection        |
+| `NiceMaskedInput`  | `value`, `onChange`, `mask`, `placeholder`                              | Masked/formatted input      |
+| `NiceKnob`         | `value`, `onChange`, `min`, `max`, `draggable`                          | Rotary knob input           |
+| `NicePickList`     | `source[]`, `target[]`, `onChange`                                      | Dual-list pick transfer     |
+| `NiceInlineEdit`   | `value`, `onChange`, `renderDisplay`, `renderEditor`                    | Click-to-edit inline        |
+| `NiceLookup`       | `value`, `onChange`, `dataSource`, `displayExpr`, `valueExpr`           | Lookup field                |
 
 ### Buttons (5 components)
 
-| Component | Key Props | Description |
-|-----------|-----------|-------------|
-| `NiceButton` | `variant`, `size`, `icon`, `loading`, `disabled`, `onClick` | Standard button |
-| `NiceButtonGroup` | `items[]`, `selectedIndex`, `onSelect`, `variant` | Grouped buttons |
-| `NiceIconButton` | `icon`, `size`, `variant`, `onClick`, `tooltip` | Icon-only button |
-| `NiceDropDownButton` | `text`, `items[]`, `onItemClick`, `variant`, `icon` | Button with dropdown menu |
-| `NiceSpeedDialAction` | `icon`, `actions[]`, `position`, `onClick` | Floating action button (FAB) |
+| Component             | Key Props                                                   | Description                  |
+| --------------------- | ----------------------------------------------------------- | ---------------------------- |
+| `NiceButton`          | `variant`, `size`, `icon`, `loading`, `disabled`, `onClick` | Standard button              |
+| `NiceButtonGroup`     | `items[]`, `selectedIndex`, `onSelect`, `variant`           | Grouped buttons              |
+| `NiceIconButton`      | `icon`, `size`, `variant`, `onClick`, `tooltip`             | Icon-only button             |
+| `NiceDropDownButton`  | `text`, `items[]`, `onItemClick`, `variant`, `icon`         | Button with dropdown menu    |
+| `NiceSpeedDialAction` | `icon`, `actions[]`, `position`, `onClick`                  | Floating action button (FAB) |
 
 ### Data Display (13 components)
 
-| Component | Key Props | Description |
-|-----------|-----------|-------------|
-| `NiceBadge` | `count`, `variant`, `dot`, `max`, `children` | Notification badge |
-| `NiceTag` | `children`, `variant`, `closable`, `onClose`, `icon` | Tag/chip |
-| `NiceAvatar` | `src`, `alt`, `size`, `fallback`, `shape` | User avatar |
-| `NiceAvatarGroup` | `items[]`, `max`, `size` | Stacked avatar group |
-| `NiceProgress` | `value`, `max`, `variant`, `showLabel`, `size` | Progress bar |
-| `NiceDivider` | `orientation`, `label`, `variant` | Horizontal/vertical divider |
-| `NiceTooltip` | `content`, `position`, `delay`, `children` | Tooltip wrapper |
-| `NiceSkeleton` | `variant` (`text`/`circle`/`rect`), `width`, `height`, `count` | Loading skeleton |
-| `NiceSpinner` | `size`, `variant`, `overlay` | Loading spinner |
-| `NiceEmpty` | `icon`, `title`, `description`, `action` | Empty state placeholder |
-| `NiceTimeline` | `items[]`, `mode`, `pending` | Vertical/horizontal timeline |
-| `NiceCarousel` | `items[]`, `autoPlay`, `interval`, `dots` | Image/content carousel |
-| `NiceVirtualScroller` | `items[]`, `itemHeight`, `renderItem` | Virtualized list for large datasets |
+| Component             | Key Props                                                      | Description                         |
+| --------------------- | -------------------------------------------------------------- | ----------------------------------- |
+| `NiceBadge`           | `count`, `variant`, `dot`, `max`, `children`                   | Notification badge                  |
+| `NiceTag`             | `children`, `variant`, `closable`, `onClose`, `icon`           | Tag/chip                            |
+| `NiceAvatar`          | `src`, `alt`, `size`, `fallback`, `shape`                      | User avatar                         |
+| `NiceAvatarGroup`     | `items[]`, `max`, `size`                                       | Stacked avatar group                |
+| `NiceProgress`        | `value`, `max`, `variant`, `showLabel`, `size`                 | Progress bar                        |
+| `NiceDivider`         | `orientation`, `label`, `variant`                              | Horizontal/vertical divider         |
+| `NiceTooltip`         | `content`, `position`, `delay`, `children`                     | Tooltip wrapper                     |
+| `NiceSkeleton`        | `variant` (`text`/`circle`/`rect`), `width`, `height`, `count` | Loading skeleton                    |
+| `NiceSpinner`         | `size`, `variant`, `overlay`                                   | Loading spinner                     |
+| `NiceEmpty`           | `icon`, `title`, `description`, `action`                       | Empty state placeholder             |
+| `NiceTimeline`        | `items[]`, `mode`, `pending`                                   | Vertical/horizontal timeline        |
+| `NiceCarousel`        | `items[]`, `autoPlay`, `interval`, `dots`                      | Image/content carousel              |
+| `NiceVirtualScroller` | `items[]`, `itemHeight`, `renderItem`                          | Virtualized list for large datasets |
 
 ### Feedback (6 components + 1 hook)
 
-| Component | Key Props | Description |
-|-----------|-----------|-------------|
-| `NiceAlert` | `variant` (`info`/`success`/`warning`/`error`), `title`, `closable`, `icon` | Alert banner |
-| `NiceModal` | `open`, `onClose`, `title`, `size`, `footer`, `closeOnOverlay`, `closeOnEscape` | Modal dialog |
-| `NiceDrawer` | `open`, `onClose`, `title`, `placement` (`left`/`right`/`top`/`bottom`), `width` | Slide-out drawer |
-| `NiceToastContainer` | — | Container for toast notifications (mount once) |
-| `useNiceToast()` | — | Hook: `{ show: (message, type?, duration?) => void }` |
-| `NiceConfirmDialog` | `open`, `onConfirm`, `onCancel`, `title`, `message` | Confirmation prompt |
-| `NiceCookieConsent` | `onAccept`, `onDecline`, `privacyUrl` | GDPR cookie consent bar |
-| `NiceLoginForm` | `onLogin`, `onForgotPassword`, `logo` | Pre-built login form |
+| Component            | Key Props                                                                        | Description                                           |
+| -------------------- | -------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| `NiceAlert`          | `variant` (`info`/`success`/`warning`/`error`), `title`, `closable`, `icon`      | Alert banner                                          |
+| `NiceModal`          | `open`, `onClose`, `title`, `size`, `footer`, `closeOnOverlay`, `closeOnEscape`  | Modal dialog                                          |
+| `NiceDrawer`         | `open`, `onClose`, `title`, `placement` (`left`/`right`/`top`/`bottom`), `width` | Slide-out drawer                                      |
+| `NiceToastContainer` | —                                                                                | Container for toast notifications (mount once)        |
+| `useNiceToast()`     | —                                                                                | Hook: `{ show: (message, type?, duration?) => void }` |
+| `NiceConfirmDialog`  | `open`, `onConfirm`, `onCancel`, `title`, `message`                              | Confirmation prompt                                   |
+| `NiceCookieConsent`  | `onAccept`, `onDecline`, `privacyUrl`                                            | GDPR cookie consent bar                               |
+| `NiceLoginForm`      | `onLogin`, `onForgotPassword`, `logo`                                            | Pre-built login form                                  |
 
 ### Navigation (16 components)
 
-| Component | Key Props | Description |
-|-----------|-----------|-------------|
-| `NiceTabs` | `tabs[]`, `activeTab`, `onChange`, `variant` (`default`/`pills`/`enclosed`), `vertical` | Tab navigation |
-| `NiceAccordion` | `items[]`, `multiple`, `defaultOpen` | Collapsible accordion panels |
-| `NiceBreadcrumb` | `items[]`, `separator` | Breadcrumb trail |
-| `NicePagination` | `current`, `total`, `onChange`, `pageSize`, `showSizeChanger` | Pagination controls |
-| `NiceCard` | `title`, `extra`, `bordered`, `hoverable`, `loading`, `children` | Card container |
-| `NiceMenu` | `items[]`, `theme`, `mode` (`vertical`/`horizontal`) | Navigation menu |
-| `NiceContextMenu` | `items[]`, `onAction`, `children` | Right-click context menu |
-| `NiceMultiView` | `views[]`, `activeView`, `onChange` | Multi-view container |
-| `NiceTabPanel` | `label`, `icon`, `children` | Tab panel (used inside NiceMultiView) |
-| `NiceSplitter` | `direction` (`horizontal`/`vertical`), `sizes`, `children` | Resizable split panes |
-| `NiceToolbar` | `items[]`, `theme`, `mode` | Toolbar with configurable items |
-| `NiceAppLayout` | `sidebar`, `header`, `footer`, `children` | Application shell layout |
-| `NiceBottomNavigation` | `items[]`, `active`, `onChange` | Mobile bottom navigation bar |
-| `NiceDashboardLayout` | `widgets[]`, `columns`, `draggable` | Dashboard grid layout |
-| `NiceDesktop` | `windows[]`, `wallpaper`, `onWindowChange` | Desktop window manager |
-| `NiceConsole` | `commands[]`, `onCommand`, `history` | Terminal/console emulator |
+| Component              | Key Props                                                                               | Description                           |
+| ---------------------- | --------------------------------------------------------------------------------------- | ------------------------------------- |
+| `NiceTabs`             | `tabs[]`, `activeTab`, `onChange`, `variant` (`default`/`pills`/`enclosed`), `vertical` | Tab navigation                        |
+| `NiceAccordion`        | `items[]`, `multiple`, `defaultOpen`                                                    | Collapsible accordion panels          |
+| `NiceBreadcrumb`       | `items[]`, `separator`                                                                  | Breadcrumb trail                      |
+| `NicePagination`       | `current`, `total`, `onChange`, `pageSize`, `showSizeChanger`                           | Pagination controls                   |
+| `NiceCard`             | `title`, `extra`, `bordered`, `hoverable`, `loading`, `children`                        | Card container                        |
+| `NiceMenu`             | `items[]`, `theme`, `mode` (`vertical`/`horizontal`)                                    | Navigation menu                       |
+| `NiceContextMenu`      | `items[]`, `onAction`, `children`                                                       | Right-click context menu              |
+| `NiceMultiView`        | `views[]`, `activeView`, `onChange`                                                     | Multi-view container                  |
+| `NiceTabPanel`         | `label`, `icon`, `children`                                                             | Tab panel (used inside NiceMultiView) |
+| `NiceSplitter`         | `direction` (`horizontal`/`vertical`), `sizes`, `children`                              | Resizable split panes                 |
+| `NiceToolbar`          | `items[]`, `theme`, `mode`                                                              | Toolbar with configurable items       |
+| `NiceAppLayout`        | `sidebar`, `header`, `footer`, `children`                                               | Application shell layout              |
+| `NiceBottomNavigation` | `items[]`, `active`, `onChange`                                                         | Mobile bottom navigation bar          |
+| `NiceDashboardLayout`  | `widgets[]`, `columns`, `draggable`                                                     | Dashboard grid layout                 |
+| `NiceDesktop`          | `windows[]`, `wallpaper`, `onWindowChange`                                              | Desktop window manager                |
+| `NiceConsole`          | `commands[]`, `onCommand`, `history`                                                    | Terminal/console emulator             |
 
 ### Data (11 components)
 
-| Component | Key Props | Description |
-|-----------|-----------|-------------|
-| `NiceTable` | `columns[]`, `data[]`, `striped`, `compact`, `emptyText` | Simple data table |
-| `NiceDataGrid` | `columns[]`, `data[]`, `virtualized`, `sortable`, `filterable`, `selectable` | Full-featured data grid |
-| `NiceList` | `items[]`, `renderItem`, `emptyText`, `virtualized` | List view |
-| `NiceTreeView` | `nodes[]`, `onSelect`, `selectable`, `expandable` | Tree structure viewer |
-| `NiceTreeList` | `nodes[]`, `renderNode`, `editable` | Editable tree list |
-| `NiceCardView` | `items[]`, `renderCard`, `columns`, `gap` | Card grid layout |
-| `NiceTileView` | `items[]`, `renderTile`, `columns` | Tile grid layout |
-| `NicePivotGrid` | `data[]`, `fields[]`, `rowGrandTotal`, `columnGrandTotal` | Pivot table |
-| `NicePivotGridFieldChooser` | — | Field chooser companion for NicePivotGrid |
-| `NiceKanbanBoard` | `columns[]`, `cards[]`, `onCardMove` | Kanban board |
-| `NiceSpreadsheet` | `data[][]`, `columns[]`, `editable` | Excel-like spreadsheet |
+| Component                   | Key Props                                                                    | Description                               |
+| --------------------------- | ---------------------------------------------------------------------------- | ----------------------------------------- |
+| `NiceTable`                 | `columns[]`, `data[]`, `striped`, `compact`, `emptyText`                     | Simple data table                         |
+| `NiceDataGrid`              | `columns[]`, `data[]`, `virtualized`, `sortable`, `filterable`, `selectable` | Full-featured data grid                   |
+| `NiceList`                  | `items[]`, `renderItem`, `emptyText`, `virtualized`                          | List view                                 |
+| `NiceTreeView`              | `nodes[]`, `onSelect`, `selectable`, `expandable`                            | Tree structure viewer                     |
+| `NiceTreeList`              | `nodes[]`, `renderNode`, `editable`                                          | Editable tree list                        |
+| `NiceCardView`              | `items[]`, `renderCard`, `columns`, `gap`                                    | Card grid layout                          |
+| `NiceTileView`              | `items[]`, `renderTile`, `columns`                                           | Tile grid layout                          |
+| `NicePivotGrid`             | `data[]`, `fields[]`, `rowGrandTotal`, `columnGrandTotal`                    | Pivot table                               |
+| `NicePivotGridFieldChooser` | —                                                                            | Field chooser companion for NicePivotGrid |
+| `NiceKanbanBoard`           | `columns[]`, `cards[]`, `onCardMove`                                         | Kanban board                              |
+| `NiceSpreadsheet`           | `data[][]`, `columns[]`, `editable`                                          | Excel-like spreadsheet                    |
 
 ### Charts (16 components)
 
-| Component | Key Props | Description |
-|-----------|-----------|-------------|
-| `NiceChart` | `data[]`, `series[]`, `type` (`line`/`bar`/`area`/`scatter`), `xAxis`, `yAxis` | Multi-type chart |
-| `NicePieChart` | `data[]`, `legend`, `donut` | Pie / donut chart |
-| `NicePolarChart` | `data[]`, `series[]`, `angleAxis`, `radiusAxis` | Polar coordinate chart |
-| `NiceCircularGauge` | `value`, `min`, `max`, `threshold`, `unit` | Circular gauge |
-| `NiceLinearGauge` | `value`, `min`, `max`, `orientation` | Linear gauge |
-| `NiceBarGauge` | `value`, `max`, `count` | Bar gauge |
-| `NiceSparkline` | `data[]`, `type`, `trend` | Inline sparkline |
-| `NiceBullet` | `value`, `ranges[]`, `measure`, `comparative` | Bullet chart |
-| `NiceFunnel` | `data[]`, `link` | Funnel chart |
-| `NiceSankey` | `nodes[]`, `links[]` | Sankey diagram |
-| `NiceRangeSelector` | `data[]`, `onRangeChange` | Range selector chart |
-| `NiceVectorMap` | `regions[]`, `mapName`, `onRegionClick` | Vector map |
-| `NiceHeatMap` | `data[][]`, `xLabels`, `yLabels`, `colorScale` | Heat map grid |
-| `NiceTreeMap` | `data[]`, `valueField`, `labelField` | Hierarchical tree map |
-| `NiceStockChart` | `data[]`, `type` (`candlestick`/`ohlc`), `volume` | Financial stock chart |
-| `NiceOrganizationChart` | `nodes[]`, `direction`, `onNodeClick` | Org chart / hierarchy |
+| Component               | Key Props                                                                      | Description            |
+| ----------------------- | ------------------------------------------------------------------------------ | ---------------------- |
+| `NiceChart`             | `data[]`, `series[]`, `type` (`line`/`bar`/`area`/`scatter`), `xAxis`, `yAxis` | Multi-type chart       |
+| `NicePieChart`          | `data[]`, `legend`, `donut`                                                    | Pie / donut chart      |
+| `NicePolarChart`        | `data[]`, `series[]`, `angleAxis`, `radiusAxis`                                | Polar coordinate chart |
+| `NiceCircularGauge`     | `value`, `min`, `max`, `threshold`, `unit`                                     | Circular gauge         |
+| `NiceLinearGauge`       | `value`, `min`, `max`, `orientation`                                           | Linear gauge           |
+| `NiceBarGauge`          | `value`, `max`, `count`                                                        | Bar gauge              |
+| `NiceSparkline`         | `data[]`, `type`, `trend`                                                      | Inline sparkline       |
+| `NiceBullet`            | `value`, `ranges[]`, `measure`, `comparative`                                  | Bullet chart           |
+| `NiceFunnel`            | `data[]`, `link`                                                               | Funnel chart           |
+| `NiceSankey`            | `nodes[]`, `links[]`                                                           | Sankey diagram         |
+| `NiceRangeSelector`     | `data[]`, `onRangeChange`                                                      | Range selector chart   |
+| `NiceVectorMap`         | `regions[]`, `mapName`, `onRegionClick`                                        | Vector map             |
+| `NiceHeatMap`           | `data[][]`, `xLabels`, `yLabels`, `colorScale`                                 | Heat map grid          |
+| `NiceTreeMap`           | `data[]`, `valueField`, `labelField`                                           | Hierarchical tree map  |
+| `NiceStockChart`        | `data[]`, `type` (`candlestick`/`ohlc`), `volume`                              | Financial stock chart  |
+| `NiceOrganizationChart` | `nodes[]`, `direction`, `onNodeClick`                                          | Org chart / hierarchy  |
 
 ### Overlays & Layout (9 components)
 
-| Component | Key Props | Description |
-|-----------|-----------|-------------|
-| `NiceActionSheet` | `open`, `onClose`, `items[]`, `title` | Mobile-style action sheet |
-| `NicePopover` | `content`, `trigger`, `position`, `visible`, `children` | Popover |
-| `NiceLoadPanel` | `visible`, `message` | Full-screen loading overlay |
-| `NiceBox` | `padding`, `margin`, `border`, `background`, `children` | Box layout container |
-| `NiceResponsiveBox` | `items[]`, `children` | Responsive layout container |
-| `NiceResizable` | `width`, `height`, `minWidth`, `minHeight`, `onResize`, `children` | Resizable container |
-| `NiceScrollView` | `horizontal`, `vertical`, `showTrack`, `children` | Custom scroll container |
-| `NiceBlockUI` | `blocked`, `message`, `children` | Block UI overlay |
-| `NiceWindow` | `title`, `open`, `onClose`, `resizable`, `draggable` | Draggable/resizable window |
+| Component           | Key Props                                                          | Description                 |
+| ------------------- | ------------------------------------------------------------------ | --------------------------- |
+| `NiceActionSheet`   | `open`, `onClose`, `items[]`, `title`                              | Mobile-style action sheet   |
+| `NicePopover`       | `content`, `trigger`, `position`, `visible`, `children`            | Popover                     |
+| `NiceLoadPanel`     | `visible`, `message`                                               | Full-screen loading overlay |
+| `NiceBox`           | `padding`, `margin`, `border`, `background`, `children`            | Box layout container        |
+| `NiceResponsiveBox` | `items[]`, `children`                                              | Responsive layout container |
+| `NiceResizable`     | `width`, `height`, `minWidth`, `minHeight`, `onResize`, `children` | Resizable container         |
+| `NiceScrollView`    | `horizontal`, `vertical`, `showTrack`, `children`                  | Custom scroll container     |
+| `NiceBlockUI`       | `blocked`, `message`, `children`                                   | Block UI overlay            |
+| `NiceWindow`        | `title`, `open`, `onClose`, `resizable`, `draggable`               | Draggable/resizable window  |
 
 ### Planning (4 components)
 
-| Component | Key Props | Description |
-|-----------|-----------|-------------|
+| Component       | Key Props                                                      | Description        |
+| --------------- | -------------------------------------------------------------- | ------------------ |
 | `NiceScheduler` | `events[]`, `onEventChange`, `view`, `resources[]`, `workDays` | Calendar scheduler |
-| `NiceGantt` | `tasks[]`, `columns[]`, `scale`, `onTaskChange` | Gantt chart |
-| `NiceDiagram` | `nodes[]`, `edges[]`, `onNodeClick`, `onEdgeClick` | Node/edge diagram |
-| `NiceStepper` | `steps[]`, `currentStep`, `onStepChange`, `vertical` | Step wizard |
+| `NiceGantt`     | `tasks[]`, `columns[]`, `scale`, `onTaskChange`                | Gantt chart        |
+| `NiceDiagram`   | `nodes[]`, `edges[]`, `onNodeClick`, `onEdgeClick`             | Node/edge diagram  |
+| `NiceStepper`   | `steps[]`, `currentStep`, `onStepChange`, `vertical`           | Step wizard        |
 
 ### Tools (14 components)
 
-| Component | Key Props | Description |
-|-----------|-----------|-------------|
-| `NiceChat` | `messages[]`, `onSendMessage`, `currentUser` | Chat widget |
-| `NiceDraggable` | `onDrag`, `ghostImage`, `children` | Drag source wrapper |
-| `NiceSortable` | `items[]`, `onSort`, `direction` | Sortable list |
-| `NiceFileUploader` | `onUpload`, `accept`, `multiple`, `maxSize`, `maxFiles` | File upload |
-| `NiceFileManager` | `items[]`, `onDelete`, `onRename`, `onNavigate` | File browser |
-| `NiceFilterBuilder` | `fields[]`, `onChange`, `value` | Visual filter/query builder |
-| `NiceGallery` | `items[]`, `columns`, `gap`, `onItemClick` | Image gallery |
-| `NiceMap` | `markers[]`, `center`, `zoom`, `onMarkerClick` | Map with markers |
-| `NiceSpeechToText` | `onResult`, `language`, `continuous` | Speech recognition |
-| `NiceThemeDesigner` | `onChange`, `onSave`, `onExport` | Live theme editor |
-| `NiceThemeBuilder` | `sections[]`, `onChange`, `onExport` | Theme builder with CSS export |
-| `NiceControlConfigurator` | `controlType`, `propDescriptors[]`, `renderPreview` | Interactive prop configurator |
-| `NiceViewBuilder` | `definition`, `onChange`, `controlRegistry` | Drag-and-drop view builder |
-| `NiceShowcase` | `defaultTab`, `showAbout`, `packageName`, `version` | Embeddable component showcase & docs |
+| Component                 | Key Props                                               | Description                          |
+| ------------------------- | ------------------------------------------------------- | ------------------------------------ |
+| `NiceChat`                | `messages[]`, `onSendMessage`, `currentUser`            | Chat widget                          |
+| `NiceDraggable`           | `onDrag`, `ghostImage`, `children`                      | Drag source wrapper                  |
+| `NiceSortable`            | `items[]`, `onSort`, `direction`                        | Sortable list                        |
+| `NiceFileUploader`        | `onUpload`, `accept`, `multiple`, `maxSize`, `maxFiles` | File upload                          |
+| `NiceFileManager`         | `items[]`, `onDelete`, `onRename`, `onNavigate`         | File browser                         |
+| `NiceFilterBuilder`       | `fields[]`, `onChange`, `value`                         | Visual filter/query builder          |
+| `NiceGallery`             | `items[]`, `columns`, `gap`, `onItemClick`              | Image gallery                        |
+| `NiceMap`                 | `markers[]`, `center`, `zoom`, `onMarkerClick`          | Map with markers                     |
+| `NiceSpeechToText`        | `onResult`, `language`, `continuous`                    | Speech recognition                   |
+| `NiceThemeDesigner`       | `onChange`, `onSave`, `onExport`                        | Live theme editor                    |
+| `NiceThemeBuilder`        | `sections[]`, `onChange`, `onExport`                    | Theme builder with CSS export        |
+| `NiceControlConfigurator` | `controlType`, `propDescriptors[]`, `renderPreview`     | Interactive prop configurator        |
+| `NiceViewBuilder`         | `definition`, `onChange`, `controlRegistry`             | Drag-and-drop view builder           |
+| `NiceShowcase`            | `defaultTab`, `showAbout`, `packageName`, `version`     | Embeddable component showcase & docs |
 
 ### Validation (3 components + 1 hook)
 
-| Component | Key Props | Description |
-|-----------|-----------|-------------|
-| `NiceValidationGroup` | `onSubmit`, `children` | Validation group wrapper |
-| `NiceValidator` | `rules[]`, `value`, `onChange` | Field-level validator |
-| `NiceValidationSummary` | `errors` | Error summary display |
-| `useNiceValidation()` | — | Hook: `{ validate: (data) => NiceValidationRule[] }` |
+| Component               | Key Props                      | Description                                          |
+| ----------------------- | ------------------------------ | ---------------------------------------------------- |
+| `NiceValidationGroup`   | `onSubmit`, `children`         | Validation group wrapper                             |
+| `NiceValidator`         | `rules[]`, `value`, `onChange` | Field-level validator                                |
+| `NiceValidationSummary` | `errors`                       | Error summary display                                |
+| `useNiceValidation()`   | —                              | Hook: `{ validate: (data) => NiceValidationRule[] }` |
 
 ---
 
@@ -294,8 +333,7 @@ All components build on a shared type system defined in `src/core/types.ts`:
 ```typescript
 type NiceSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
-type NiceVariant = 'primary' | 'secondary' | 'success' | 'warning'
-                 | 'error' | 'info' | 'ghost' | 'outline';
+type NiceVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'ghost' | 'outline';
 
 type NiceDensity = 'compact' | 'normal' | 'comfortable';
 
@@ -331,23 +369,23 @@ type NiceOption<T = string> = {
 
 Utility hooks exported from the package:
 
-| Hook | Signature | Description |
-|------|-----------|-------------|
-| `useControlId` | `(externalId?: string) => string` | Generates a stable unique ID for form field–label associations. Uses the provided ID if given, otherwise generates one via `useId()`. |
-| `useDebouncedValue` | `<T>(value: T, delayMs: number) => T` | Returns a debounced version of the input value. |
-| `useClickOutside` | `(ref: RefObject<HTMLElement>, handler: () => void) => void` | Fires `handler` when a click or touch occurs outside the referenced element. |
-| `useFocusTrap` | `(ref: RefObject<HTMLElement>, active: boolean) => void` | Traps keyboard focus within the referenced element (Tab/Shift+Tab cycling). Used by modals and drawers. |
-| `useIsTouchDevice` | `() => boolean` | Detects `(pointer: coarse)` media query — returns `true` on touch devices. |
-| `useInputMode` | `() => 'touch' \| 'mouse'` | Dynamically switches based on last input type (touchstart vs pointerdown). |
-| `useLongPress` | `(callback, holdMs?) => PointerHandlers` | Long-press gesture detection for touch (default 500ms). |
-| `useBreakpoint` | `() => 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Current viewport breakpoint. |
-| `useMediaQuery` | `(query: string) => boolean` | CSS media query match. |
-| `useResponsiveValue` | `<T>(map: Record<Breakpoint, T>) => T` | Returns value matching current breakpoint. |
-| `useContainerSize` | `(ref: RefObject) => { width, height }` | Container element dimensions. |
-| `useNiceToast` | `() => { show: (msg, type?, duration?) => void }` | Programmatic toast notifications. |
-| `useNiceTranslation` | `() => { t: NiceTranslateFn }` | Access the current translation function. |
-| `useNiceIcon` | `(name: string, size: number) => ReactNode \| undefined` | Resolve an icon name via the current icon provider. |
-| `useNiceValidation` | `() => { validate: (data) => NiceValidationRule[] }` | Form validation. |
+| Hook                 | Signature                                                    | Description                                                                                                                           |
+| -------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `useControlId`       | `(externalId?: string) => string`                            | Generates a stable unique ID for form field–label associations. Uses the provided ID if given, otherwise generates one via `useId()`. |
+| `useDebouncedValue`  | `<T>(value: T, delayMs: number) => T`                        | Returns a debounced version of the input value.                                                                                       |
+| `useClickOutside`    | `(ref: RefObject<HTMLElement>, handler: () => void) => void` | Fires `handler` when a click or touch occurs outside the referenced element.                                                          |
+| `useFocusTrap`       | `(ref: RefObject<HTMLElement>, active: boolean) => void`     | Traps keyboard focus within the referenced element (Tab/Shift+Tab cycling). Used by modals and drawers.                               |
+| `useIsTouchDevice`   | `() => boolean`                                              | Detects `(pointer: coarse)` media query — returns `true` on touch devices.                                                            |
+| `useInputMode`       | `() => 'touch' \| 'mouse'`                                   | Dynamically switches based on last input type (touchstart vs pointerdown).                                                            |
+| `useLongPress`       | `(callback, holdMs?) => PointerHandlers`                     | Long-press gesture detection for touch (default 500ms).                                                                               |
+| `useBreakpoint`      | `() => 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`                 | Current viewport breakpoint.                                                                                                          |
+| `useMediaQuery`      | `(query: string) => boolean`                                 | CSS media query match.                                                                                                                |
+| `useResponsiveValue` | `<T>(map: Record<Breakpoint, T>) => T`                       | Returns value matching current breakpoint.                                                                                            |
+| `useContainerSize`   | `(ref: RefObject) => { width, height }`                      | Container element dimensions.                                                                                                         |
+| `useNiceToast`       | `() => { show: (msg, type?, duration?) => void }`            | Programmatic toast notifications.                                                                                                     |
+| `useNiceTranslation` | `() => { t: NiceTranslateFn }`                               | Access the current translation function.                                                                                              |
+| `useNiceIcon`        | `(name: string, size: number) => ReactNode \| undefined`     | Resolve an icon name via the current icon provider.                                                                                   |
+| `useNiceValidation`  | `() => { validate: (data) => NiceValidationRule[] }`         | Form validation.                                                                                                                      |
 
 ### Icon System
 
@@ -355,16 +393,16 @@ The library ships with **78 built-in SVG icons** covering common UI needs. No ex
 
 #### Built-in Icon Categories
 
-| Category | Count | Examples |
-|----------|-------|---------|
-| Navigation | 8 | `chevron-down`, `arrow-left`, `arrow-right`, `arrow-up` |
-| Actions | 10 | `close`, `plus`, `minus`, `check`, `edit`, `trash`, `copy`, `download`, `upload`, `refresh` |
-| UI Chrome | 10 | `search`, `filter`, `sort-asc`, `sort-desc`, `menu`, `more-vertical`, `settings`, `eye`, `eye-off`, `lock` |
-| Status | 6 | `info`, `warning`, `error`, `success`, `help`, `bell` |
-| Content | 12 | `calendar`, `clock`, `file`, `folder`, `image`, `link`, `mail`, `phone`, `user`, `users`, `home`, `star` |
-| Media | 3 | `play`, `pause`, `stop` |
-| Toggle | 3 | `expand`, `collapse`, `external-link` |
-| Misc | 3+ | `heart`, `grip`, `more-horizontal` |
+| Category   | Count | Examples                                                                                                   |
+| ---------- | ----- | ---------------------------------------------------------------------------------------------------------- |
+| Navigation | 8     | `chevron-down`, `arrow-left`, `arrow-right`, `arrow-up`                                                    |
+| Actions    | 10    | `close`, `plus`, `minus`, `check`, `edit`, `trash`, `copy`, `download`, `upload`, `refresh`                |
+| UI Chrome  | 10    | `search`, `filter`, `sort-asc`, `sort-desc`, `menu`, `more-vertical`, `settings`, `eye`, `eye-off`, `lock` |
+| Status     | 6     | `info`, `warning`, `error`, `success`, `help`, `bell`                                                      |
+| Content    | 12    | `calendar`, `clock`, `file`, `folder`, `image`, `link`, `mail`, `phone`, `user`, `users`, `home`, `star`   |
+| Media      | 3     | `play`, `pause`, `stop`                                                                                    |
+| Toggle     | 3     | `expand`, `collapse`, `external-link`                                                                      |
+| Misc       | 3+    | `heart`, `grip`, `more-horizontal`                                                                         |
 
 #### Using Icons
 
@@ -393,10 +431,11 @@ const myResolver: NiceIconResolver = (name, size) => {
 
 <NiceIconProvider resolver={myResolver}>
   <App />
-</NiceIconProvider>
+</NiceIconProvider>;
 ```
 
 The `NiceIconResolver` type signature:
+
 ```typescript
 type NiceIconResolver = (name: string, size: number) => React.ReactNode | undefined;
 ```
@@ -406,12 +445,12 @@ The companion package [`@nice2dev/icons`](#companion-package-nice2devicons) prov
 #### Icon Sizes
 
 | Size Key | Pixels |
-|----------|--------|
-| `xs` | 12 |
-| `sm` | 16 |
-| `md` | 20 |
-| `lg` | 24 |
-| `xl` | 32 |
+| -------- | ------ |
+| `xs`     | 12     |
+| `sm`     | 16     |
+| `md`     | 20     |
+| `lg`     | 24     |
+| `xl`     | 32     |
 
 You can also pass a numeric value directly: `<NiceIcon name="check" size={18} />`
 
@@ -445,10 +484,11 @@ const myTranslate: NiceTranslateFn = (key, defaultValue) => {
 
 <NiceI18nProvider t={myTranslate}>
   <App />
-</NiceI18nProvider>
+</NiceI18nProvider>;
 ```
 
 The `NiceTranslateFn` type:
+
 ```typescript
 type NiceTranslateFn = (key: string, defaultValue: string) => string;
 ```
@@ -469,6 +509,7 @@ function DocsPage() {
 ```
 
 Props:
+
 - `defaultTab` — initial tab (`'about'`, `'dashboard'`, `'forms'`, `'controls'`, etc.)
 - `showAbout` — show/hide the About & Installation tab (default: `true`)
 - `tabs` — array of visible tabs (default: all)
@@ -486,14 +527,13 @@ Built-in per-component access modes allow controlling visibility and interactivi
 import { NiceAccessControl, NiceTextInput, NiceButton } from '@nice2dev/ui';
 
 // Provider-level permissions:
-<NiceAccessControl
-  defaultMode="full"
-  permissions={{ 'salary-field': 'readOnly', 'delete-btn': 'hidden' }}
->
+<NiceAccessControl defaultMode="full" permissions={{ 'salary-field': 'readOnly', 'delete-btn': 'hidden' }}>
   <NiceTextInput accessMode="full" label="Name" />
   <NiceTextInput componentId="salary-field" label="Salary" />
-  <NiceButton componentId="delete-btn" variant="error">Delete</NiceButton>
-</NiceAccessControl>
+  <NiceButton componentId="delete-btn" variant="error">
+    Delete
+  </NiceButton>
+</NiceAccessControl>;
 ```
 
 Modes: `'full'` (default), `'readOnly'`, `'disabled'`, `'hidden'`
@@ -537,10 +577,10 @@ import '@nice2dev/ui/style.css';
   --hover-bg: #f1f5f9;
 
   /* Shadows */
-  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
-  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
-  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
 }
 ```
 
@@ -556,13 +596,19 @@ Dark mode is supported in three ways:
 <!-- Auto: follows OS preference (default behavior, no extra code) -->
 
 <!-- Manual toggle via class: -->
-<body class="nice-dark">...</body>
+<body class="nice-dark">
+  ...
+</body>
 
 <!-- Manual toggle via attribute: -->
-<body data-theme="dark">...</body>
+<body data-theme="dark">
+  ...
+</body>
 
 <!-- Opt-in light mode when OS is dark: -->
-<body data-theme="light">...</body>
+<body data-theme="light">
+  ...
+</body>
 ```
 
 ### Custom Themes
@@ -572,7 +618,7 @@ Create a custom theme by overriding CSS variables:
 ```css
 /* my-theme.css */
 :root {
-  --color-primary: #8b5cf6;       /* purple primary */
+  --color-primary: #8b5cf6; /* purple primary */
   --color-primary-hover: #7c3aed;
   --bg-primary: #faf5ff;
   --border-color: #ddd6fe;
@@ -598,12 +644,12 @@ npm run preview    # Preview built library
 
 ### Build Output
 
-| File | Format | Size | Purpose |
-|------|--------|------|---------|
-| `dist/index.mjs` | ESM | ~207 KB | Modern bundlers (Vite, webpack 5, Rollup) |
-| `dist/index.cjs` | CJS | ~146 KB | Node.js, older bundlers |
-| `dist/style.css` | CSS | ~79 KB | All component styles |
-| `dist/index.d.ts` | TypeScript | — | Type definitions |
+| File              | Format     | Size    | Purpose                                   |
+| ----------------- | ---------- | ------- | ----------------------------------------- |
+| `dist/index.mjs`  | ESM        | ~207 KB | Modern bundlers (Vite, webpack 5, Rollup) |
+| `dist/index.cjs`  | CJS        | ~146 KB | Node.js, older bundlers                   |
+| `dist/style.css`  | CSS        | ~79 KB  | All component styles                      |
+| `dist/index.d.ts` | TypeScript | —       | Type definitions                          |
 
 ### Build Configuration