@gradeui/ui 0.8.2 → 0.10.0

package/dist/types-BxywIwvG.d.ts

@@ -0,0 +1,160 @@
+import * as React from 'react';
+
+/**
+ * Coordinate tuple — `[lng, lat]`. Always tuples in the public API; each
+ * adapter normalizes internally to whatever shape its provider expects
+ * (Google takes `{ lat, lng }` objects, Mapbox/MapLibre take tuples).
+ */
+type Coords = [lng: number, lat: number];
+type MapAppearance = "light" | "dark" | "satellite" | "auto";
+type MapErrorCode = "sdk-missing" | "api-key-missing" | "provider-init-failed" | "style-load-failed" | "tile-load-failed";
+type MapError = {
+    code: MapErrorCode;
+    message: string;
+    cause?: unknown;
+};
+/**
+ * Imperative handle exposed via `ref` and `onLoad`. Use for fly-to
+ * animations, fit-bounds, and the `.instance` escape hatch when you
+ * need the provider-native map object.
+ */
+type MapHandle = {
+    /** Pan + zoom to a marker by id, or directly to coords. */
+    flyTo: (idOrCoords: string | Coords, opts?: {
+        zoom?: number;
+        durationMs?: number;
+    }) => void;
+    panTo: (coords: Coords, opts?: {
+        durationMs?: number;
+    }) => void;
+    fitBounds: (coords: Coords[], opts?: {
+        paddingPx?: number;
+        durationMs?: number;
+    }) => void;
+    getCenter: () => Coords;
+    getZoom: () => number;
+    getBounds: () => [Coords, Coords];
+    /**
+     * Provider-native instance. Cast to `mapboxgl.Map`, `maplibregl.Map`,
+     * or `google.maps.Map` to reach features the wrapper doesn't expose
+     * (3D extrusions, custom layers, drawing tools, heatmaps).
+     * Touching this makes your code provider-specific.
+     */
+    readonly instance: unknown;
+};
+type MapBaseProps = {
+    center: Coords;
+    zoom: number;
+    /** [southwest, northeast] — takes precedence over center/zoom when set. */
+    bounds?: [Coords, Coords];
+    /** Default `"auto"` (follows GradeThemeProvider mode). */
+    appearance?: MapAppearance;
+    /** Default `true`. `false` disables pan/zoom/rotate (static display). */
+    interactive?: boolean;
+    /** Controlled hovered marker id — pairs with `onHoveredIdChange` for list↔map sync. */
+    hoveredId?: string | null;
+    onHoveredIdChange?: (id: string | null) => void;
+    onLoad?: (handle: MapHandle) => void;
+    onError?: (error: MapError) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+};
+/**
+ * Discriminated union — TS enforces the right config fields per provider.
+ *
+ * @example
+ *   // Zero-config public demo (MapLibre + MapTiler demo key):
+ *   <Map center={[-122.42, 37.78]} zoom={12} />
+ *
+ *   // Mapbox:
+ *   <Map provider="mapbox" accessToken={env.MAPBOX_TOKEN} center={...} zoom={...} />
+ *
+ *   // Google:
+ *   <Map provider="google" apiKey={env.GOOGLE_MAPS_KEY} center={...} zoom={...} />
+ */
+type MapProps = MapBaseProps & ({
+    provider?: "maplibre";
+    /** Override the default MapTiler style URL entirely. */
+    styleUrl?: string;
+    /** Your MapTiler key. Omit to use the Grade demo key (referrer-locked to gradeui.com). */
+    tilerKey?: string;
+} | {
+    provider: "mapbox";
+    accessToken: string;
+    /** Override the appearance-derived Mapbox style URL. */
+    styleUrl?: string;
+} | {
+    provider: "google";
+    apiKey: string;
+    /** Optional Google Cloud Map ID for cloud-based styling. */
+    mapId?: string;
+});
+type MapMarkerProps = {
+    /** Required — used by `flyTo(id)` and `hoveredId` matching. */
+    id: string;
+    at: Coords;
+    /** Default `"bottom"` — pin tip at the coord. */
+    anchor?: "center" | "bottom";
+    className?: string;
+    children?: React.ReactNode;
+    onClick?: (e: {
+        id: string;
+        coords: Coords;
+        native: MouseEvent;
+    }) => void;
+};
+type AdapterCallbacks = {
+    onLoad: () => void;
+    onError: (error: MapError) => void;
+    onMarkerHover: (id: string | null) => void;
+    onMarkerClick: (id: string, coords: Coords, native: MouseEvent) => void;
+};
+type AdapterOpts = {
+    center: Coords;
+    zoom: number;
+    bounds?: [Coords, Coords];
+    appearance: "light" | "dark" | "satellite";
+    interactive: boolean;
+    styleUrl?: string;
+    tilerKey?: string;
+    accessToken?: string;
+    apiKey?: string;
+    mapId?: string;
+};
+type MarkerHandle = {
+    /** DOM element the adapter created for this marker. `<MapMarker>` portals its children into here. */
+    element: HTMLElement;
+    /** Last-known coords, used by `flyTo(id)`. Updated via `setPosition`. */
+    coords: Coords;
+    setHovered: (hovered: boolean) => void;
+    setPosition: (coords: Coords) => void;
+    remove: () => void;
+};
+type AdapterInstance = {
+    setCenter: (coords: Coords) => void;
+    setZoom: (zoom: number) => void;
+    setBounds: (sw: Coords, ne: Coords) => void;
+    setAppearance: (appearance: "light" | "dark" | "satellite") => void;
+    setInteractive: (enabled: boolean) => void;
+    flyTo: (coords: Coords, opts?: {
+        zoom?: number;
+        durationMs?: number;
+    }) => void;
+    panTo: (coords: Coords, opts?: {
+        durationMs?: number;
+    }) => void;
+    fitBounds: (coords: Coords[], opts?: {
+        paddingPx?: number;
+        durationMs?: number;
+    }) => void;
+    getCenter: () => Coords;
+    getZoom: () => number;
+    getBounds: () => [Coords, Coords];
+    addMarker: (id: string, coords: Coords, anchor: "center" | "bottom") => MarkerHandle;
+    destroy: () => void;
+    instance: unknown;
+};
+type AdapterFactory = (container: HTMLElement, opts: AdapterOpts, callbacks: AdapterCallbacks) => Promise<AdapterInstance>;
+
+export type { AdapterFactory as A, Coords as C, MapProps as M, MapHandle as a, MapMarkerProps as b, MapAppearance as c, MapError as d, MapErrorCode as e };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradeui/ui",
-  "version": "0.8.2",
+  "version": "0.10.0",
   "description": "Grade Design System — React components, theme engine, and design tokens",
   "license": "MIT",
   "author": "Grade",
@@ -62,17 +62,47 @@
       "types": "./dist/tailwind-preset.d.ts",
       "import": "./dist/tailwind-preset.mjs",
       "require": "./dist/tailwind-preset.js"
+    },
+    "./map/maplibre": {
+      "types": "./dist/map/maplibre.d.ts",
+      "import": "./dist/map/maplibre.mjs",
+      "require": "./dist/map/maplibre.js"
+    },
+    "./map/mapbox": {
+      "types": "./dist/map/mapbox.d.ts",
+      "import": "./dist/map/mapbox.mjs",
+      "require": "./dist/map/mapbox.js"
+    },
+    "./map/google": {
+      "types": "./dist/map/google.d.ts",
+      "import": "./dist/map/google.mjs",
+      "require": "./dist/map/google.js"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "components/ui/*.md"
   ],
   "sideEffects": [
     "**/*.css"
   ],
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "maplibre-gl": "^4.0.0 || ^5.0.0",
+    "mapbox-gl": "^3.0.0",
+    "@googlemaps/js-api-loader": "^1.16.0"
+  },
+  "peerDependenciesMeta": {
+    "maplibre-gl": {
+      "optional": true
+    },
+    "mapbox-gl": {
+      "optional": true
+    },
+    "@googlemaps/js-api-loader": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
@@ -107,6 +137,7 @@
     "postprocessing": "^6.36.5",
     "react-day-picker": "^9.13.0",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^2.1.7",
     "recharts": "^2.15.4",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
@@ -117,11 +148,15 @@
     "@rive-app/react-canvas": "^4.21.4"
   },
   "devDependencies": {
+    "@googlemaps/js-api-loader": "^1.16.0",
+    "@types/google.maps": "^3.55.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/three": "^0.170.0",
     "autoprefixer": "^10.4.23",
+    "maplibre-gl": "^4.7.0",
+    "mapbox-gl": "^3.8.0",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
@@ -129,9 +164,11 @@
     "typescript": "^5.6.3"
   },
   "scripts": {
-    "build": "tsup && npm run build:css",
+    "build": "npm run clean && tsup && npm run build:css",
     "build:css": "tailwindcss -i ./styles/globals.css -o ./dist/styles.css --minify",
-    "dev": "tsup --watch",
+    "build:css:watch": "tailwindcss -i ./styles/globals.css -o ./dist/styles.css --watch",
+    "dev": "npm run build:css && tsup --watch",
+    "dev:full": "npm run build:css && (tsup --watch & npm run build:css:watch)",
     "lint": "echo \"(no lint configured for @gradeui/ui yet)\"",
     "clean": "rm -rf dist"
   }