@juv/codego-react-ui 1.1.3 → 1.1.7

package/README.md

@@ -226,7 +226,19 @@ npm install tailwind-merge clsx
 ```
 
 ---
+### 7. Leaflet
 
+```bash
+npm install leaflet react-leaflet @types/leaflet
+```
+
+### 8. MapLibre GL
+
+```bash
+npm install maplibre-gl
+```
+
+---
 ## Installation
 
 Once all prerequisites are installed:
@@ -261,10 +273,10 @@ import { Button, Card, Modal } from "@juv/codego-react-ui"
 | Combobox | `Combobox` |
 | Command Palette | `CommandPalette` |
 | Context Menu | `ContextMenu` |
-| Dashboard Widget | `StatsWidget`, `ChartWidget`, `TableWidget`, `ComposableWidget` |
+| Dashboard Widget | `StatsWidget`, `ChartWidget`, `TableWidget`, `ComposableWidget`, `MetricRow` |
 | Data Grid | `DataGrid` |
 | Date Picker | `DatePickerPopup` |
-| Date Range Picker | `DateRangePicker` |
+| Date Range Picker | `DateRangePicker`, `CalendarDateRangePicker` |
 | Drawer | `Drawer` |
 | Dropdown | `Dropdown` |
 | File Upload | `FileUpload` |
@@ -273,14 +285,17 @@ import { Button, Card, Modal } from "@juv/codego-react-ui"
 | Input | `Input` |
 | Kanban Board | `KanbanBoard` |
 | Label | `Label` |
+| Leaflet Map | `LeafletMap` |
+| MapLibre Map | `MapLibreMap` |
 | Modal | `Modal` |
 | Modal Variants | `ModalUnchange`, `ModalConfirmation`, `ModalWithForms` |
-| Navigation | `Navigation` |
+| Navigation | `Navigation`, `Topbar`, `LeftSidebar`, `RightSidebar`, `GroupNavigation` |
 | Notification | `NotificationPanel`, `NotificationBanner`, `useToast`, `ToastProvider` |
 | OTP Input | `OtpInput` |
 | Pagination | `Pagination` |
+| Panel | `Panel` |
 | Popover | `Popover` |
-| Progress | `Progress` |
+| Progress | `Progress`, `CircularProgress` |
 | Radio Group | `RadioGroup` |
 | Repeater | `Repeater` |
 | Resizable Panels | `ResizablePanels` |
@@ -289,7 +304,7 @@ import { Button, Card, Modal } from "@juv/codego-react-ui"
 | Section Block | `SectionBlock` |
 | Select | `Select` |
 | Skeleton | `Skeleton` |
-| Slider | `Slider` |
+| Slider | `Slider`, `RangeSlider` |
 | Stat Card | `StatCard` |
 | Stepper | `Stepper` |
 | Table | `Table` |
@@ -301,6 +316,102 @@ import { Button, Card, Modal } from "@juv/codego-react-ui"
 | Tooltip | `Tooltip` |
 | Tree View | `TreeView` |
 | Widget | `Widget` |
+| Wizard | `Wizard` |
+
+---
+
+## LeafletMap Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `center` | `[number, number]` | `[51.505, -0.09]` | Map center `[lat, lng]`. |
+| `zoom` | `number` | `13` | Initial zoom level. |
+| `height` | `string \| number` | `480` | Map height in px or CSS string. |
+| `markers` | `MapMarker[]` | `[]` | Array of markers to render. |
+| `routes` | `MapRoute[]` | `[]` | Array of routes to draw via OSRM. |
+| `cluster` | `boolean` | `false` | Enable marker clustering. |
+| `clusterVariant` | `"default" \| "bubble" \| "donut"` | `"default"` | Cluster icon style. |
+| `tileUrl` | `string` | OSM tiles | Custom tile URL template. |
+| `tileAttribution` | `string` | OSM attribution | Custom tile attribution. |
+| `darkTile` | `boolean` | `false` | Use CartoDB dark tile preset. |
+| `className` | `string` | | Additional CSS classes on the wrapper. |
+| `onMarkerClick` | `(marker: MapMarker) => void` | | Fired when a marker is clicked. |
+
+### MapMarker
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `id` | `string \| number` | ✓ | Unique marker identifier. |
+| `lat` | `number` | ✓ | Latitude. |
+| `lng` | `number` | ✓ | Longitude. |
+| `label` | `string` | | Text shown in default popup. |
+| `color` | `MarkerColor` | | Pin color: `primary` \| `info` \| `success` \| `warning` \| `danger` \| any hex. |
+| `icon` | `string` | | Emoji or character rendered inside the pin. |
+| `image` | `string` | | Image URL — renders a circular avatar pin. |
+| `popup` | `React.ReactNode` | | Custom popup content. Overrides `label`. |
+
+### MapRoute
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `start` | `{ lat: number; lng: number }` | ✓ | Route start point. |
+| `end` | `{ lat: number; lng: number }` | ✓ | Route end point. |
+| `waypoints` | `{ lat: number; lng: number }[]` | | Intermediate waypoints. |
+| `routeType` | `"drive" \| "walk"` | | Routing profile. Default `"drive"`. |
+| `color` | `string` | | Line color hex. |
+| `weight` | `number` | | Line weight in px. Default `5`. |
+| `label` | `string` | | Label shown in start/end popups. |
+
+---
+
+## MapLibreMap Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `style` | `MapLibreStyle` | `"street"` | Map style: `globe` \| `3d` \| `3d-globe` \| `street` \| `satellite` \| `dark` \| `light`. |
+| `center` | `[number, number]` | `[0, 20]` | Initial center `[lng, lat]` (MapLibre order). |
+| `zoom` | `number` | `2` | Initial zoom level. |
+| `minZoom` | `number` | `0` | Minimum zoom level. |
+| `maxZoom` | `number` | `22` | Maximum zoom level. |
+| `pitch` | `number` | `0` | Camera pitch in degrees (0–85). Reactive. Auto `55` for `3d`/`3d-globe`. |
+| `minPitch` | `number` | `0` | Minimum pitch constraint. |
+| `maxPitch` | `number` | `85` | Maximum pitch constraint. |
+| `bearing` | `number` | `0` | Camera bearing in degrees (-180–180). Reactive. Auto `-20` for `3d`/`3d-globe`. |
+| `minBearing` | `number` | `-180` | Minimum bearing constraint. |
+| `maxBearing` | `number` | `180` | Maximum bearing constraint. |
+| `flyTo` | `FlyToOptions` | | Triggers animated camera flight when reference changes. |
+| `markers` | `MapLibreMarker[]` | `[]` | Array of markers to render. |
+| `height` | `string \| number` | `480` | Map height in px or CSS string. |
+| `showControls` | `boolean` | `true` | Show navigation, scale, and fullscreen controls. |
+| `showStyleSwitcher` | `boolean` | `true` | Show the bottom style switcher bar. |
+| `showCameraControls` | `boolean` | `false` | Always show pitch/bearing slider panel. |
+| `className` | `string` | | Additional CSS classes on the wrapper. |
+| `onMarkerClick` | `(marker: MapLibreMarker) => void` | | Fired when a marker is clicked. |
+
+### MapLibreMarker
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `id` | `string \| number` | ✓ | Unique marker identifier. |
+| `lat` | `number` | ✓ | Latitude. |
+| `lng` | `number` | ✓ | Longitude. |
+| `label` | `string` | | Text shown in default popup. |
+| `color` | `string` | | Pin color: `primary` \| `info` \| `success` \| `warning` \| `danger` \| any hex. |
+| `icon` | `string` | | Emoji or character rendered inside the pin. |
+| `image` | `string` | | Image URL — renders a circular avatar pin. |
+| `popup` | `string \| HTMLElement` | | Custom popup — HTML string or DOM element. Overrides `label`. |
+
+### FlyToOptions
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `center` | `[number, number]` | | Target center `[lng, lat]`. |
+| `zoom` | `number` | | Target zoom level. |
+| `pitch` | `number` | | Target pitch in degrees. Clamped to `minPitch`/`maxPitch`. |
+| `bearing` | `number` | | Target bearing in degrees. Clamped to `minBearing`/`maxBearing`. |
+| `duration` | `number` | `1500` | Animation duration in milliseconds. |
+| `curve` | `number` | `1.42` | Zoom curve during flight. Higher = more zoom-out arc. |
+| `essential` | `boolean` | `true` | If `true`, bypasses `prefers-reduced-motion`. |
 
 ---