@ztwoint/z-ui 0.1.122 → 0.1.124

package/dist/components/z2map/components/map-style-control.js

@@ -0,0 +1,45 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { Layers as d, Map as p, Satellite as m, Mountain as c, Moon as M, Sun as b } from "lucide-react";
+import { Button as h } from "../../button/button.js";
+import { Z2DropdownMenu as D, Z2DropdownMenuTrigger as w, Z2DropdownMenuContent as T, Z2DropdownMenuLabel as v, Z2DropdownMenuRadioGroup as S, Z2DropdownMenuRadioItem as g } from "../../dropdown-menu/z2-dropdown-menu.js";
+import { cn as R } from "../../../lib/utils.js";
+import { MAP_VARIANTS as n } from "../map.constants.js";
+const i = [
+  { value: n.STREETS, label: "Streets", icon: /* @__PURE__ */ e(p, { size: 14 }) },
+  { value: n.SATELLITE, label: "Satellite", icon: /* @__PURE__ */ e(m, { size: 14 }) },
+  { value: n.TERRAIN, label: "Terrain", icon: /* @__PURE__ */ e(c, { size: 14 }) },
+  { value: n.DARK, label: "Dark", icon: /* @__PURE__ */ e(M, { size: 14 }) },
+  { value: n.LIGHT, label: "Light", icon: /* @__PURE__ */ e(b, { size: 14 }) }
+], f = ({
+  activeStyle: r,
+  onStyleChange: s,
+  className: u
+}) => {
+  const l = i.find((a) => a.value === r), t = (a) => {
+    s(a);
+  };
+  return /* @__PURE__ */ e("div", { className: R("relative", u), children: /* @__PURE__ */ o(D, { children: [
+    /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(
+      h,
+      {
+        variant: "stroke",
+        shade: "neutral",
+        leftIcon: /* @__PURE__ */ e(d, { size: 16 }),
+        label: l == null ? void 0 : l.label,
+        "aria-label": "Open map style menu",
+        size: "large"
+      }
+    ) }),
+    /* @__PURE__ */ o(T, { size: "xsmall", className: "bg-white/95 backdrop-blur-sm", children: [
+      /* @__PURE__ */ e(v, {}),
+      /* @__PURE__ */ e(S, { value: r, onValueChange: t, children: i.map((a) => /* @__PURE__ */ o(g, { value: a.value, children: [
+        /* @__PURE__ */ e("span", { className: "mr-2", children: a.icon }),
+        a.label
+      ] }, a.value)) })
+    ] })
+  ] }) });
+};
+f.displayName = "MapStyleControl";
+export {
+  f as MapStyleControl
+};

package/dist/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/components/z2map/components/map-zoom-control.js

@@ -0,0 +1,49 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { Plus as i, Minus as n } from "lucide-react";
+import { Button as e } from "../../button/button.js";
+import { cn as d } from "../../../lib/utils.js";
+const m = ({
+  onZoomIn: l,
+  onZoomOut: a,
+  className: s,
+  disabled: r = !1
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: d(
+      "flex flex-col gap-0 bg-white/95 backdrop-blur-sm rounded-xl shadow-[0_4px_20px_rgba(0,0,0,0.12)] border border-stroke-solid-light overflow-hidden",
+      s
+    ),
+    children: [
+      /* @__PURE__ */ o(
+        e,
+        {
+          onClick: l,
+          disabled: r,
+          "aria-label": "Zoom in",
+          variant: "ghost",
+          shade: "neutral",
+          leftIcon: /* @__PURE__ */ o(i, { size: 18, strokeWidth: 2.5 }),
+          className: "w-10 h-10 rounded-none"
+        }
+      ),
+      /* @__PURE__ */ o("div", { className: "w-full h-px bg-stroke-solid-light" }),
+      /* @__PURE__ */ o(
+        e,
+        {
+          onClick: a,
+          disabled: r,
+          "aria-label": "Zoom out",
+          variant: "ghost",
+          shade: "neutral",
+          leftIcon: /* @__PURE__ */ o(n, { size: 18, strokeWidth: 2.5 }),
+          className: "w-10 h-10 rounded-none"
+        }
+      )
+    ]
+  }
+);
+m.displayName = "MapZoomControl";
+export {
+  m as MapZoomControl
+};

package/dist/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/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/components/z2map/map.constants.js

@@ -0,0 +1,40 @@
+const t = {
+  STREETS: "streets",
+  SATELLITE: "satellite",
+  TERRAIN: "terrain",
+  DARK: "dark",
+  LIGHT: "light"
+}, o = {
+  [t.STREETS]: "mapbox://styles/mapbox/streets-v12",
+  [t.SATELLITE]: "mapbox://styles/mapbox/satellite-streets-v12",
+  [t.TERRAIN]: "mapbox://styles/mapbox/outdoors-v12",
+  [t.DARK]: "mapbox://styles/mapbox/dark-v11",
+  [t.LIGHT]: "mapbox://styles/mapbox/light-v11"
+}, e = {
+  center: { lat: 37.8, lng: -122.4 },
+  zoom: 10,
+  minZoom: 1,
+  maxZoom: 20,
+  variant: t.STREETS,
+  width: "100%",
+  height: 450,
+  interactive: !0,
+  draggable: !0,
+  scrollZoom: !0,
+  showZoomControls: !0,
+  showStyleSwitcher: !1,
+  fitBoundsToLocations: !0,
+  popoverDisabled: !1,
+  pinVariant: "brand",
+  pinSize: "md"
+}, s = {
+  sm: { width: 22, height: 22, iconSize: 12 },
+  md: { width: 32, height: 32, iconSize: 16 },
+  lg: { width: 40, height: 40, iconSize: 20 }
+};
+export {
+  e as DEFAULT_MAP_CONFIG,
+  o as MAPBOX_STYLE_MAP,
+  t as MAP_VARIANTS,
+  s as PIN_SIZES
+};

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

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

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

@@ -0,0 +1,33 @@
+import { 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/components/z2map/map.hook.js

@@ -0,0 +1,99 @@
+import { useRef as F, useState as w, useMemo as R, useCallback as i } from "react";
+import { WebMercatorViewport as G } from "@math.gl/web-mercator";
+import { DEFAULT_MAP_CONFIG as r, MAPBOX_STYLE_MAP as H } from "./map.constants.js";
+import { calculateBounds as N, formatDimension as L } from "./map.utils.js";
+const q = (P) => {
+  const {
+    locations: e,
+    center: m,
+    zoom: a,
+    variant: T = r.variant,
+    fitBoundsToLocations: v = r.fitBoundsToLocations,
+    width: u = r.width,
+    height: s = r.height,
+    popoverDisabled: S = r.popoverDisabled,
+    onMapMove: c,
+    onPinHover: d,
+    onPinClick: l
+  } = P, o = F(null), [z, y] = w(T), [A, B] = w(null), [C, b] = w(null), M = R(() => {
+    const t = a ?? r.zoom, p = (n, f) => ({
+      latitude: n.lat,
+      longitude: n.lng,
+      zoom: f
+    });
+    if (m && a !== void 0)
+      return p(m, a);
+    if (v && (e == null ? void 0 : e.length) > 0) {
+      const n = N(e.map((E) => E.coordinate)), f = typeof u == "number" ? u : 800, k = typeof s == "number" ? s : 450, g = new G({
+        width: f,
+        height: k
+      }).fitBounds(
+        [
+          [n.west, n.south],
+          [n.east, n.north]
+        ],
+        {
+          padding: 40
+        }
+      );
+      return {
+        latitude: g.latitude,
+        longitude: g.longitude,
+        zoom: g.zoom
+      };
+    }
+    return (e == null ? void 0 : e.length) > 0 ? p(e[0].coordinate, t) : p(r.center, t);
+  }, [e, m, a, v, u, s]), V = i(() => {
+    o.current && o.current.zoomTo(o.current.getZoom() + 1, { duration: 300 });
+  }, []), Z = i(() => {
+    o.current && o.current.zoomTo(o.current.getZoom() - 1, { duration: 300 });
+  }, []), D = i((t) => {
+    y(t);
+  }, []), I = i(
+    (t) => {
+      d == null || d(t);
+    },
+    [d]
+  ), h = i(
+    (t) => {
+      B(t), l == null || l(t);
+    },
+    [l]
+  ), O = i(
+    (t) => {
+      c == null || c(
+        { lat: t.viewState.latitude, lng: t.viewState.longitude },
+        t.viewState.zoom
+      );
+    },
+    [c]
+  ), _ = i(
+    (t) => {
+      h(t), S || b(t.id);
+    },
+    [h, S]
+  ), x = H[z], W = {
+    width: L(u),
+    height: L(s)
+  };
+  return {
+    mapRef: o,
+    initialViewState: M,
+    currentVariant: z,
+    activeLocation: A,
+    openPopoverId: C,
+    setOpenPopoverId: b,
+    mapStyle: x,
+    containerStyle: W,
+    handleZoomIn: V,
+    handleZoomOut: Z,
+    handleStyleChange: D,
+    handlePinHover: I,
+    handlePinClick: h,
+    handlePinClickWrapper: _,
+    handleMove: O
+  };
+};
+export {
+  q as useMap
+};

package/dist/components/z2map/map.js

@@ -0,0 +1,161 @@
+import { jsx as o, jsxs as g, Fragment as V } from "react/jsx-runtime";
+import { Map as G } from "../../node_modules/@vis.gl/react-mapbox/dist/components/map.js";
+import { Marker as H } from "../../node_modules/@vis.gl/react-mapbox/dist/components/marker.js";
+import "../../node_modules/@vis.gl/react-mapbox/dist/components/popup.js";
+import "../../node_modules/@vis.gl/react-mapbox/dist/components/attribution-control.js";
+import "../../node_modules/@vis.gl/react-mapbox/dist/components/fullscreen-control.js";
+import "../../node_modules/@vis.gl/react-mapbox/dist/components/geolocate-control.js";
+import "../../node_modules/@vis.gl/react-mapbox/dist/components/navigation-control.js";
+import "../../node_modules/@vis.gl/react-mapbox/dist/components/scale-control.js";
+import "react";
+import "../../node_modules/@vis.gl/react-mapbox/dist/components/use-map.js";
+import { Popover as R, PopoverTrigger as U, PopoverContent as W } from "../popover/popover.js";
+import { useMap as $ } from "./map.hook.js";
+import { MapPinComponent as v } from "./components/map-pin.js";
+import { MapPinContent as q } from "./components/map-pin-content.js";
+import { MapControls as B } from "./components/map-controls.js";
+import { MapLoadingState as J } from "./components/map-loading-state.js";
+import { MapEmptyState as K } from "./components/map-empty-state.js";
+import { DEFAULT_MAP_CONFIG as r } from "./map.constants.js";
+import { cn as Q } from "../../lib/utils.js";
+/* empty css                                              */
+const X = ({
+  locations: n = [],
+  mapboxToken: M,
+  width: a = r.width,
+  height: d = r.height,
+  className: s,
+  pinVariant: l = r.pinVariant,
+  pinSize: h = r.pinSize,
+  renderPin: t,
+  renderPopover: m,
+  popoverDisabled: C = r.popoverDisabled,
+  interactive: w = r.interactive,
+  draggable: u = r.draggable,
+  scrollZoom: x = r.scrollZoom,
+  showZoomControls: b = r.showZoomControls,
+  showStyleSwitcher: y = r.showStyleSwitcher,
+  minZoom: S = r.minZoom,
+  maxZoom: k = r.maxZoom,
+  loading: Z = !1,
+  ..._
+}) => {
+  const {
+    mapRef: O,
+    initialViewState: I,
+    currentVariant: A,
+    activeLocation: p,
+    openPopoverId: E,
+    setOpenPopoverId: P,
+    mapStyle: j,
+    containerStyle: F,
+    handleZoomIn: L,
+    handleZoomOut: N,
+    handleStyleChange: T,
+    handlePinHover: i,
+    handlePinClickWrapper: c,
+    handleMove: z
+  } = $({ locations: n, width: a, height: d, ..._ });
+  return Z ? /* @__PURE__ */ o(J, { width: a, height: d, className: s }) : /* @__PURE__ */ g(
+    "div",
+    {
+      style: F,
+      className: Q(
+        "relative rounded-xl overflow-hidden shadow-[0_2px_16px_rgba(0,0,0,0.08)] border border-stroke-solid-light",
+        s
+      ),
+      children: [
+        /* @__PURE__ */ o(
+          G,
+          {
+            ref: O,
+            mapboxAccessToken: M,
+            initialViewState: I,
+            style: { width: "100%", height: "100%" },
+            mapStyle: j,
+            interactive: w,
+            dragPan: u,
+            scrollZoom: x,
+            minZoom: S,
+            maxZoom: k,
+            onMove: z,
+            projection: { name: "mercator" },
+            cursor: u ? void 0 : "default",
+            children: n.map((e) => {
+              const f = (p == null ? void 0 : p.id) === e.id;
+              return /* @__PURE__ */ o(
+                H,
+                {
+                  latitude: e.coordinate.lat,
+                  longitude: e.coordinate.lng,
+                  anchor: "center",
+                  children: C ? /* @__PURE__ */ o(V, { children: t ? t(e) : /* @__PURE__ */ o(
+                    v,
+                    {
+                      variant: l,
+                      size: h,
+                      icon: e.icon,
+                      active: f,
+                      onClick: () => c(e),
+                      onMouseEnter: () => i(e),
+                      onMouseLeave: () => i(null)
+                    }
+                  ) }) : /* @__PURE__ */ g(
+                    R,
+                    {
+                      open: E === e.id,
+                      onOpenChange: (D) => {
+                        P(D ? e.id : null);
+                      },
+                      children: [
+                        /* @__PURE__ */ o(U, { asChild: !0, children: /* @__PURE__ */ o("div", { children: t ? t(e) : /* @__PURE__ */ o(
+                          v,
+                          {
+                            variant: l,
+                            size: h,
+                            icon: e.icon,
+                            active: f,
+                            onClick: () => c(e),
+                            onMouseEnter: () => i(e),
+                            onMouseLeave: () => i(null)
+                          }
+                        ) }) }),
+                        /* @__PURE__ */ o(
+                          W,
+                          {
+                            side: "top",
+                            align: "center",
+                            className: "w-auto max-w-sm p-3 bg-white/98 backdrop-blur-md shadow-[0_8px_32px_rgba(0,0,0,0.12)] border-stroke-solid-light",
+                            sideOffset: 8,
+                            children: /* @__PURE__ */ o(q, { location: e, customContent: m == null ? void 0 : m(e) })
+                          }
+                        )
+                      ]
+                    }
+                  )
+                },
+                e.id
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ o(
+          B,
+          {
+            showZoomControls: b,
+            onZoomIn: L,
+            onZoomOut: N,
+            showStyleSwitcher: y,
+            activeStyle: A,
+            onStyleChange: T
+          }
+        ),
+        n.length === 0 && /* @__PURE__ */ o(K, {})
+      ]
+    }
+  );
+};
+X.displayName = "Map";
+export {
+  X as default
+};

package/dist/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/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/components/z2map/map.utils.js

@@ -0,0 +1,37 @@
+const a = (t) => {
+  if (t.length === 0)
+    return { lat: 0, lng: 0 };
+  if (t.length === 1)
+    return t[0];
+  let l = 0, n = 0;
+  return t.forEach((e) => {
+    l += e.lat, n += e.lng;
+  }), {
+    lat: l / t.length,
+    lng: n / t.length
+  };
+}, u = (t) => {
+  if (t.length === 0)
+    return {
+      north: 0,
+      south: 0,
+      east: 0,
+      west: 0,
+      center: { lat: 0, lng: 0 }
+    };
+  let l = t[0].lat, n = t[0].lat, e = t[0].lng, g = t[0].lng;
+  return t.forEach((h) => {
+    l = Math.max(l, h.lat), n = Math.min(n, h.lat), e = Math.max(e, h.lng), g = Math.min(g, h.lng);
+  }), {
+    north: l,
+    south: n,
+    east: e,
+    west: g,
+    center: a(t)
+  };
+}, r = (t) => typeof t == "number" ? `${t}px` : t;
+export {
+  u as calculateBounds,
+  a as calculateCenter,
+  r as formatDimension
+};