@ztwoint/z-ui 0.1.122 → 0.1.123

package/dist/types/components/z2map/components/index.d.ts

@@ -0,0 +1,5 @@
+export { MapControls } from './map-controls';
+export { MapPinComponent } from './map-pin';
+export { MapPinContent } from './map-pin-content';
+export { MapLoadingState } from './map-loading-state';
+export { MapEmptyState } from './map-empty-state';

package/dist/types/components/z2map/components/map-controls.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { MapVariant } from '../map.constants';
+export interface MapControlsProps {
+    showZoomControls?: boolean;
+    onZoomIn?: () => void;
+    onZoomOut?: () => void;
+    showStyleSwitcher?: boolean;
+    activeStyle?: MapVariant;
+    onStyleChange?: (style: MapVariant) => void;
+    className?: string;
+}
+export declare const MapControls: FC<MapControlsProps>;

package/dist/types/components/z2map/components/map-empty-state.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const MapEmptyState: FC;

package/dist/types/components/z2map/components/map-loading-state.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface MapLoadingStateProps {
+    width: string | number;
+    height: string | number;
+    className?: string;
+}
+export declare const MapLoadingState: FC<MapLoadingStateProps>;
+export {};

package/dist/types/components/z2map/components/map-pin-content.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+import { Location } from '../map.type';
+export interface MapPinContentProps {
+    location: Location;
+    customContent?: ReactNode;
+    className?: string;
+}
+export declare const MapPinContent: FC<MapPinContentProps>;

package/dist/types/components/z2map/components/map-pin.d.ts

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { PinSize, PinVariant } from '../map.type';
+declare const pinVariants: (props?: ({
+    variant?: "success" | "warning" | "danger" | "neutral" | "brand" | null | undefined;
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface MapPinProps extends VariantProps<typeof pinVariants> {
+    icon?: ReactNode;
+    className?: string;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    active?: boolean;
+    variant?: PinVariant;
+    size?: PinSize;
+}
+export declare const MapPinComponent: FC<MapPinProps>;
+export {};

package/dist/types/components/z2map/components/map-style-control.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { MapVariant } from '../map.constants';
+export interface MapStyleControlProps {
+    activeStyle: MapVariant;
+    onStyleChange: (style: MapVariant) => void;
+    className?: string;
+}
+export declare const MapStyleControl: FC<MapStyleControlProps>;

package/dist/types/components/z2map/components/map-zoom-control.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export interface MapZoomControlProps {
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    className?: string;
+    disabled?: boolean;
+}
+export declare const MapZoomControl: FC<MapZoomControlProps>;

package/dist/types/components/z2map/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Z2Map } from './map';
+export type { Location, MapProps, PinVariant, PinSize, Coordinate } from './map.type';
+export { MAP_VARIANTS, DEFAULT_MAP_CONFIG, PIN_SIZES } from './map.constants';
+export type { MapVariant } from './map.constants';
+export { MapPinComponent } from './components/map-pin';
+export { MapPinContent } from './components/map-pin-content';
+export { MapControls } from './components/map-controls';
+export { MapZoomControl } from './components/map-zoom-control';
+export { MapStyleControl } from './components/map-style-control';

package/dist/types/components/z2map/map.constants.d.ts

@@ -0,0 +1,47 @@
+export declare const MAP_VARIANTS: {
+    readonly STREETS: "streets";
+    readonly SATELLITE: "satellite";
+    readonly TERRAIN: "terrain";
+    readonly DARK: "dark";
+    readonly LIGHT: "light";
+};
+export type MapVariant = (typeof MAP_VARIANTS)[keyof typeof MAP_VARIANTS];
+export declare const MAPBOX_STYLE_MAP: Record<MapVariant, string>;
+export declare const DEFAULT_MAP_CONFIG: {
+    center: {
+        lat: number;
+        lng: number;
+    };
+    zoom: number;
+    minZoom: number;
+    maxZoom: number;
+    variant: MapVariant;
+    width: string;
+    height: number;
+    interactive: boolean;
+    draggable: boolean;
+    scrollZoom: boolean;
+    showZoomControls: boolean;
+    showStyleSwitcher: boolean;
+    fitBoundsToLocations: boolean;
+    popoverDisabled: boolean;
+    pinVariant: "brand";
+    pinSize: "md";
+};
+export declare const PIN_SIZES: {
+    readonly sm: {
+        readonly width: 22;
+        readonly height: 22;
+        readonly iconSize: 12;
+    };
+    readonly md: {
+        readonly width: 32;
+        readonly height: 32;
+        readonly iconSize: 16;
+    };
+    readonly lg: {
+        readonly width: 40;
+        readonly height: 40;
+        readonly iconSize: 20;
+    };
+};

package/dist/types/components/z2map/map.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { MapProps } from './map.type';
+import 'mapbox-gl/dist/mapbox-gl.css';
+declare const Map: FC<MapProps>;
+export default Map;

package/dist/types/components/z2map/map.hook.d.ts

@@ -0,0 +1,33 @@
+import type { MapRef } from 'react-map-gl/mapbox';
+import { MapProps, Location } from './map.type';
+import { MapVariant } from './map.constants';
+export declare const useMap: (props: MapProps) => {
+    mapRef: import("react").RefObject<MapRef | null>;
+    initialViewState: {
+        latitude: number;
+        longitude: number;
+        zoom: number;
+    };
+    currentVariant: MapVariant;
+    activeLocation: Location | null;
+    openPopoverId: string | null;
+    setOpenPopoverId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    mapStyle: string;
+    containerStyle: {
+        width: string;
+        height: string;
+    };
+    handleZoomIn: () => void;
+    handleZoomOut: () => void;
+    handleStyleChange: (newStyle: MapVariant) => void;
+    handlePinHover: (location: Location | null) => void;
+    handlePinClick: (location: Location) => void;
+    handlePinClickWrapper: (location: Location) => void;
+    handleMove: (evt: {
+        viewState: {
+            latitude: number;
+            longitude: number;
+            zoom: number;
+        };
+    }) => void;
+};

package/dist/types/components/z2map/map.type.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { MapVariant } from './map.constants';
+export interface Coordinate {
+    lat: number;
+    lng: number;
+}
+export interface Location {
+    id: string;
+    name: string;
+    coordinate: Coordinate;
+    title: string;
+    description?: string;
+    specs?: string[];
+    icon?: ReactNode;
+    metadata?: Record<string, unknown>;
+}
+export type PinVariant = 'brand' | 'neutral' | 'danger' | 'success' | 'warning';
+export type PinSize = 'sm' | 'md' | 'lg';
+export interface MapProps {
+    locations: Location[];
+    mapboxToken?: string;
+    onPinClick?: (location: Location) => void;
+    onPinHover?: (location: Location | null) => void;
+    onMapMove?: (center: Coordinate, zoom: number) => void;
+    center?: Coordinate;
+    zoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    variant?: MapVariant;
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+    pinVariant?: PinVariant;
+    pinSize?: PinSize;
+    renderPin?: (location: Location) => ReactNode;
+    interactive?: boolean;
+    draggable?: boolean;
+    scrollZoom?: boolean;
+    showZoomControls?: boolean;
+    showStyleSwitcher?: boolean;
+    renderPopover?: (location: Location) => ReactNode;
+    popoverDisabled?: boolean;
+    fitBoundsToLocations?: boolean;
+    loading?: boolean;
+}

package/dist/types/components/z2map/map.utils.d.ts

@@ -0,0 +1,10 @@
+import { Coordinate } from './map.type';
+export declare const calculateCenter: (coordinates: Coordinate[]) => Coordinate;
+export declare const calculateBounds: (coordinates: Coordinate[]) => {
+    north: number;
+    south: number;
+    east: number;
+    west: number;
+    center: Coordinate;
+};
+export declare const formatDimension: (value: string | number) => string;

package/dist/types/index.d.ts

@@ -31,5 +31,6 @@ export * from './components/dynamic-table';
 export * from './components/chart';
 export * from './components/chart-card';
 export * from './components/radio-card/radio-card';
+export * from './components/z2map';
 export * from './lib/theme.hook';
 export * from './lib/utils';

package/dist/types/routes/map.d.ts

@@ -0,0 +1,2 @@
+declare const Map: () => import("react/jsx-runtime").JSX.Element;
+export default Map;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztwoint/z-ui",
-  "version": "0.1.122",
+  "version": "0.1.123",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -86,6 +86,7 @@
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.4",
     "@fontsource-variable/inter": "^5.2.5",
     "@heroicons/react": "^2.2.0",
+    "@math.gl/web-mercator": "^4.1.0",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -97,6 +98,7 @@
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tanstack/react-table": "^8.21.3",
+    "@types/mapbox-gl": "^3.4.1",
     "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
@@ -104,8 +106,10 @@
     "echarts": "^5.6.0",
     "echarts-for-react": "^3.0.2",
     "lucide-react": "^0.525.0",
+    "mapbox-gl": "^3.15.0",
     "radix-ui": "^1.4.3",
     "react-country-flag": "^3.1.0",
+    "react-map-gl": "^8.1.0",
     "react-router-dom": "^7.7.1",
     "react-virtuoso": "^4.14.0",
     "tailwind-merge": "^3.3.0",
@@ -115,4 +119,4 @@
     "react": "19.1.0",
     "react-dom": "19.1.0"
   }
-}
+}