@optimum-intelligence/opti-ui 0.6.2 → 0.7.0

package/dist/opti-ui.css

@@ -1,4 +1,4 @@
-@layer oui.tokens, oui.base, oui.components;
+@layer maplibre, oui.tokens, oui.base, oui.components;
 @layer oui.tokens {
   :root {
     --oui-font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
@@ -35,11 +35,8 @@
     --oui-color-purple-text: #573591;
     --oui-color-pink: #c2479b;
     --oui-color-pink-text: #8c2f6f;
-    --oui-color-chart-1: #63537d;
-    --oui-color-chart-2: #271645;
-    --oui-color-chart-3: #21856d;
-    --oui-color-chart-4: #db6b2f;
-    --oui-color-chart-5: #9d8fc0;
+    --oui-map-route-weight: 4;
+    --oui-map-dim-opacity: 0.35;
     --oui-radius-xs: 4px;
     --oui-radius-sm: 8px;
     --oui-radius-control: 10px;
@@ -122,6 +119,15 @@
     --oui-color-purple-border: color-mix(in srgb, var(--oui-color-purple) 26%, transparent);
     --oui-color-pink-subtle: color-mix(in srgb, var(--oui-color-pink) 10%, transparent);
     --oui-color-pink-border: color-mix(in srgb, var(--oui-color-pink) 26%, transparent);
+    --oui-color-chart-1: var(--oui-color-blue);
+    --oui-color-chart-2: var(--oui-color-warning);
+    --oui-color-chart-3: var(--oui-color-green);
+    --oui-color-chart-4: var(--oui-color-pink);
+    --oui-color-chart-5: var(--oui-color-cyan);
+    --oui-color-chart-6: var(--oui-color-purple);
+    --oui-color-chart-7: var(--oui-color-yellow);
+    --oui-color-chart-8: var(--oui-color-accent);
+    --oui-map-casing-color: var(--oui-color-surface);
     --oui-color-inverse: var(--oui-color-brand);
     --oui-color-on-inverse: #ffffff;
     --oui-color-on-inverse-muted: rgba(255, 255, 255, 0.72);
@@ -3896,6 +3902,421 @@
     vertical-align: -0.06em;
   }
 }
+@layer oui.components {
+  .oui-map {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: var(--oui-font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
+    height: var(--oui-map-height, 24rem);
+    min-height: 0;
+    overflow: hidden;
+    border-radius: var(--oui-map-radius, var(--oui-radius-card));
+    background: var(--oui-color-surface-muted);
+    color: var(--oui-color-text);
+    isolation: isolate;
+  }
+  .oui-map .maplibregl-map {
+    font: inherit;
+  }
+  .oui-map[data-expanded] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--oui-z-dialog);
+    height: auto;
+    border-radius: 0;
+  }
+  .oui-map .maplibregl-ctrl-group {
+    overflow: hidden;
+    border: 1px solid var(--oui-color-border);
+    border-radius: var(--oui-radius-control);
+    background: var(--oui-color-surface);
+    box-shadow: var(--oui-shadow-raised);
+  }
+  .oui-map .maplibregl-ctrl-group button {
+    width: var(--oui-control-height-sm);
+    height: var(--oui-control-height-sm);
+    color: var(--oui-color-text);
+  }
+  .oui-map .maplibregl-ctrl-group button:focus-visible {
+    outline: var(--oui-focus-outline);
+    outline-offset: -2px;
+  }
+  .oui-map .maplibregl-ctrl-group button + button {
+    border-top: 1px solid var(--oui-color-border-subtle);
+  }
+  @media (hover: hover) {
+    .oui-map .maplibregl-ctrl-group button:hover:not(:disabled) {
+      background: var(--oui-color-surface-hover);
+    }
+  }
+  .oui-map .maplibregl-ctrl-group .maplibregl-ctrl-icon {
+    background: currentColor;
+    mask: var(--_icon) center/1.4rem no-repeat;
+  }
+  .oui-map .maplibregl-ctrl-group .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
+    --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");
+  }
+  .oui-map .maplibregl-ctrl-group .oui-map__expand .maplibregl-ctrl-icon {
+    --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
+    mask-size: 1.1rem;
+  }
+  .oui-map .maplibregl-ctrl-group .oui-map__expand[aria-pressed=true] .maplibregl-ctrl-icon {
+    --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7'/%3E%3C/svg%3E");
+  }
+  .oui-map .maplibregl-ctrl-group .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
+    --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
+  }
+  .oui-map .maplibregl-ctrl-attrib {
+    border-radius: var(--oui-radius-sm);
+    background: color-mix(in srgb, var(--oui-color-surface) 85%, transparent);
+    color: var(--oui-color-text-muted);
+    font-size: var(--oui-font-size-2xs);
+  }
+  .oui-map .maplibregl-ctrl-attrib a {
+    color: inherit;
+  }
+  .oui-map .maplibregl-ctrl-attrib.maplibregl-compact-show {
+    padding-block: 2px;
+  }
+  .oui-map .maplibregl-ctrl-attrib-button {
+    border-radius: var(--oui-radius-sm);
+    background-color: var(--oui-color-surface);
+  }
+  .oui-map__popup {
+    --_bg: var(--oui-color-surface);
+    --_border: var(--oui-color-border);
+  }
+  .oui-map__popup .maplibregl-popup-content {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: var(--oui-font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    border: 1px solid var(--oui-color-border);
+    border-radius: var(--oui-popup-radius, var(--oui-radius-md));
+    background: var(--oui-color-surface);
+    background-clip: padding-box;
+    box-shadow: var(--oui-shadow-overlay);
+    color: var(--oui-color-text);
+    font-size: var(--oui-font-size-md);
+    outline: none;
+    scrollbar-width: thin;
+    scrollbar-color: var(--oui-color-border-hover) transparent;
+    transform-origin: var(--transform-origin);
+    transition: opacity var(--oui-duration-fast) var(--oui-ease), transform var(--oui-duration-fast) var(--oui-ease-out);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .oui-map__popup .maplibregl-popup-content {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
+  .oui-map__popup .maplibregl-popup-content[data-starting-style], .oui-map__popup .maplibregl-popup-content[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  .oui-map__popup .maplibregl-popup-content[data-ending-style] {
+    transform: none;
+  }
+  .oui-map__popup .maplibregl-popup-content[data-instant] {
+    transition: none;
+  }
+  .oui-map__popup .maplibregl-popup-content {
+    padding: var(--oui-space-6);
+    border-color: var(--_border);
+    background: var(--_bg);
+    font-size: var(--oui-font-size-sm);
+    line-height: 1.45;
+  }
+  .oui-map__popup .maplibregl-popup-close-button {
+    top: var(--oui-space-3);
+    right: var(--oui-space-3);
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: var(--oui-radius-xs);
+    color: var(--oui-color-text-muted);
+    font-size: 1.1rem;
+    line-height: 1;
+  }
+  .oui-map__popup .maplibregl-popup-close-button:focus-visible {
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
+  }
+  @media (hover: hover) {
+    .oui-map__popup .maplibregl-popup-close-button:hover {
+      background: var(--oui-color-surface-hover);
+      color: var(--oui-color-text);
+    }
+  }
+  .oui-map__popup:has(.maplibregl-popup-close-button) .maplibregl-popup-content {
+    padding-right: var(--oui-space-12);
+  }
+  .oui-map__popup.maplibregl-popup-anchor-top .maplibregl-popup-tip, .oui-map__popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .oui-map__popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
+    border-bottom-color: var(--_bg);
+  }
+  .oui-map__popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .oui-map__popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .oui-map__popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
+    border-top-color: var(--_bg);
+  }
+  .oui-map__popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
+    border-right-color: var(--_bg);
+  }
+  .oui-map__popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
+    border-left-color: var(--_bg);
+  }
+  .oui-map__tooltip {
+    --_bg: var(--oui-tooltip-bg, var(--oui-color-primary));
+    --_border: transparent;
+    pointer-events: none;
+  }
+  .oui-map__tooltip .maplibregl-popup-content {
+    padding: 0.45rem 0.7rem;
+    border-radius: var(--oui-radius-sm);
+    box-shadow: var(--oui-shadow-raised);
+    color: var(--oui-tooltip-fg, var(--oui-color-on-primary));
+    font-size: var(--oui-font-size-xs);
+    font-weight: var(--oui-font-weight-medium);
+  }
+  .oui-map__marker[data-dimmed] {
+    opacity: var(--oui-map-dim-opacity);
+  }
+  .oui-map__marker {
+    --_pin-color: var(--oui-color-accent);
+    --_pin-size: 1.625rem;
+    box-sizing: border-box;
+    margin: 0;
+    font-family: var(--oui-font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: grid;
+    place-items: center;
+    box-sizing: border-box;
+    width: var(--_pin-size);
+    height: var(--_pin-size);
+    border: 2px solid var(--oui-map-casing-color);
+    border-radius: 50%;
+    background: var(--_pin-color);
+    box-shadow: var(--oui-shadow-raised);
+    color: var(--oui-color-on-tone);
+    font-size: var(--oui-font-size-xs);
+    font-weight: var(--oui-font-weight-bold);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    transition: transform var(--oui-duration-fast) var(--oui-ease);
+  }
+  .oui-map__marker[data-kind=depot] {
+    --_pin-color: var(--oui-color-primary);
+    --_pin-size: 2rem;
+    border-radius: var(--oui-radius-sm);
+    color: var(--oui-color-on-primary);
+    font-size: 1rem;
+  }
+  .oui-map__marker[data-kind=vehicle] {
+    --_pin-size: 1.25rem;
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--_pin-color) 30%, transparent), var(--oui-shadow-raised);
+  }
+  .oui-map__marker[data-kind=point] {
+    --_pin-size: 0.75rem;
+  }
+  .oui-map__marker[data-interactive] {
+    cursor: pointer;
+  }
+  .oui-map__marker[data-selected] {
+    transform: scale(1.2);
+    outline: 2px solid var(--_pin-color);
+    outline-offset: 2px;
+  }
+  @media (hover: hover) {
+    .oui-map__marker[data-interactive]:hover {
+      transform: scale(1.12);
+    }
+  }
+  .oui-map__overlay {
+    position: absolute;
+    z-index: 3;
+    display: flex;
+    flex-direction: column;
+    gap: var(--oui-space-4);
+    max-width: calc(100% - 2 * var(--oui-space-6));
+    max-height: calc(100% - 2 * var(--oui-space-6));
+    overflow: auto;
+  }
+  .oui-map__overlay[data-position^=top] {
+    top: var(--oui-space-6);
+  }
+  .oui-map__overlay[data-position^=bottom] {
+    bottom: var(--oui-space-6);
+  }
+  .oui-map__overlay[data-position$=left] {
+    left: var(--oui-space-6);
+    align-items: flex-start;
+  }
+  .oui-map__overlay[data-position$=right] {
+    right: var(--oui-space-6);
+    align-items: flex-end;
+  }
+  .oui-map__empty {
+    position: absolute;
+    inset: 50% auto auto 50%;
+    z-index: 3;
+    translate: -50% -50%;
+    padding: var(--oui-space-4) var(--oui-space-8);
+    border-radius: var(--oui-radius-pill);
+    background: var(--oui-color-surface);
+    box-shadow: var(--oui-shadow-raised);
+    color: var(--oui-color-text-muted);
+    font-size: var(--oui-font-size-sm);
+    pointer-events: none;
+  }
+  .oui-map-legend {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: var(--oui-font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: flex;
+    flex-direction: column;
+    gap: var(--oui-space-2);
+    min-width: 11rem;
+    padding: var(--oui-space-4);
+    border: 1px solid var(--oui-color-border);
+    border-radius: var(--oui-radius-md);
+    background: var(--oui-color-surface);
+    box-shadow: var(--oui-shadow-raised);
+    color: var(--oui-color-text);
+    font-size: var(--oui-font-size-sm);
+  }
+  .oui-map-legend__toggle-all {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: var(--oui-font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    align-self: flex-end;
+    padding: var(--oui-space-1) var(--oui-space-3);
+    border: 0;
+    border-radius: var(--oui-radius-xs);
+    background: none;
+    color: var(--oui-color-accent-text);
+    font-size: var(--oui-font-size-xs);
+    font-weight: var(--oui-font-weight-semibold);
+    cursor: pointer;
+  }
+  .oui-map-legend__toggle-all:focus-visible {
+    outline: var(--oui-focus-outline);
+    outline-offset: var(--oui-focus-outline-offset);
+  }
+  @media (hover: hover) {
+    .oui-map-legend__toggle-all:hover {
+      background: var(--oui-color-accent-subtle);
+    }
+  }
+  .oui-map-legend__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--oui-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .oui-map-legend__item {
+    display: flex;
+    align-items: center;
+    gap: var(--oui-space-1);
+    border-radius: var(--oui-radius-sm);
+  }
+  .oui-map-legend__item[data-selected] {
+    background: var(--oui-color-accent-subtle);
+  }
+  .oui-map-legend__item[data-hidden] .oui-map-legend__entry {
+    opacity: 0.5;
+  }
+  .oui-map-legend__entry {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: var(--oui-font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: var(--oui-space-4);
+    min-width: 0;
+    padding: var(--oui-space-2) var(--oui-space-3);
+    border: 0;
+    border-radius: inherit;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    text-align: start;
+  }
+  .oui-map-legend__entry:is(button) {
+    cursor: pointer;
+  }
+  .oui-map-legend__entry:is(button):focus-visible {
+    outline: var(--oui-focus-outline);
+    outline-offset: -2px;
+  }
+  @media (hover: hover) {
+    .oui-map-legend__entry:is(button):hover {
+      background: var(--oui-color-surface-hover);
+    }
+  }
+  [data-selected] > .oui-map-legend__entry:is(button) {
+    font-weight: var(--oui-font-weight-semibold);
+  }
+  .oui-map-legend__swatch {
+    flex-shrink: 0;
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 3px;
+    background: var(--_swatch);
+  }
+  .oui-map-legend__label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .oui-map-legend__count {
+    color: var(--oui-color-text-muted);
+    font-size: var(--oui-font-size-xs);
+    font-variant-numeric: tabular-nums;
+  }
+  .oui-map-legend__visibility {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: var(--oui-font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--oui-radius-xs);
+    background: none;
+    color: var(--oui-color-text-muted);
+    font-size: 0.95rem;
+    cursor: pointer;
+  }
+  .oui-map-legend__visibility:focus-visible {
+    outline: var(--oui-focus-outline);
+    outline-offset: -2px;
+  }
+  @media (hover: hover) {
+    .oui-map-legend__visibility:hover {
+      background: var(--oui-color-surface-hover);
+      color: var(--oui-color-text);
+    }
+  }
+}
 @layer oui.components {
   .oui-menu__positioner {
     z-index: var(--oui-z-dropdown);

package/dist/theme/index.d.ts

@@ -1,2 +1,3 @@
 export { ThemeProvider, themeToStyle, createTheme } from './ThemeProvider';
 export type { Theme, ThemeTokenName, ColorMode, ThemeProviderProps } from './ThemeProvider';
+export { seriesColor } from './series';

package/dist/theme/series.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Colour for the `index`-th data series: `var(--oui-color-chart-N)`, cycling through the eight chart
+ * tokens. Use it for chart series, legend swatches and map routes so the same index gets the same hue
+ * everywhere, in light and dark mode.
+ *
+ * @example
+ * <span style={{ background: seriesColor(2) }} />
+ */
+export declare function seriesColor(index: number): string;

package/dist/theme/series.js

@@ -0,0 +1,17 @@
+"use client";
+//#region src/theme/series.ts
+/**
+* Colour for the `index`-th data series: `var(--oui-color-chart-N)`, cycling through the eight chart
+* tokens. Use it for chart series, legend swatches and map routes so the same index gets the same hue
+* everywhere, in light and dark mode.
+*
+* @example
+* <span style={{ background: seriesColor(2) }} />
+*/
+function seriesColor(index) {
+	return `var(--oui-color-chart-${(Math.trunc(index) % 8 + 8) % 8 + 1})`;
+}
+//#endregion
+export { seriesColor };
+
+//# sourceMappingURL=series.js.map

package/dist/theme/series.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"series.js","names":["seriesColor","index","Math","trunc"],"sources":["../../src/theme/series.ts"],"sourcesContent":["/**\n * Colour for the `index`-th data series: `var(--oui-color-chart-N)`, cycling through the eight chart\n * tokens. Use it for chart series, legend swatches and map routes so the same index gets the same hue\n * everywhere, in light and dark mode.\n *\n * @example\n * <span style={{ background: seriesColor(2) }} />\n */\nexport function seriesColor(index: number): string {\n  return `var(--oui-color-chart-${(((Math.trunc(index) % 8) + 8) % 8) + 1})`;\n}\n"],"mappings":";;;;;;;;;;AAQA,SAAgBA,YAAYC,OAAuB;CACjD,OAAO,0BAA4BC,KAAKC,MAAMF,KAAK,IAAI,IAAK,KAAK,IAAK,EAAC;AACzE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optimum-intelligence/opti-ui",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Optimum's customizable React component library, built on Base UI.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Optimum Intelligence",
@@ -31,7 +31,12 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./map": {
+      "types": "./dist/map/index.d.ts",
+      "import": "./dist/map/index.js"
+    },
     "./styles.css": "./dist/opti-ui.css",
+    "./map.css": "./dist/map.css",
     "./fonts.css": "./dist/fonts.css",
     "./components.json": "./dist/components.json",
     "./llms.txt": "./dist/llms.txt",
@@ -54,7 +59,9 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@base-ui/react": "~1.8.0"
+    "@base-ui/react": "~1.8.0",
+    "@vis.gl/react-maplibre": "^8.1.3",
+    "maplibre-gl": "^6.16.0"
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",