@ztwoint/z-ui 0.1.122 → 0.1.124

package/dist/components/assets/icons/index.d.ts

@@ -42,3 +42,5 @@ export { default as FilterIcon } from './filter-icon';
 export { default as DescendingSortingIcon } from './descending';
 export { default as ChainIcon } from './chain';
 export { default as EraserIcon } from './eraser';
+export { default as LeftSquareBracketIcon } from './left-square-bracket';
+export { default as RightSquareBracketIcon } from './right-square-bracket';

package/dist/components/assets/icons/left-square-bracket.d.ts

@@ -0,0 +1,6 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    title?: string;
+};
+declare function LeftSquareBracket({ fill, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default LeftSquareBracket;

package/dist/components/assets/icons/left-square-bracket.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+function a({
+  fill: r = "currentColor",
+  width: t = "1em",
+  height: n = "1em",
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      height: n,
+      id: "left-square-bracket",
+      width: t,
+      viewBox: "0 0 3 12",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...o,
+      children: /* @__PURE__ */ e("g", { fill: "none", children: /* @__PURE__ */ e("path", { d: "M0 12V0H3V1.01448H1.2288V10.9808H3V12H0Z", fill: r }) })
+    }
+  );
+}
+export {
+  a as default
+};

package/dist/components/assets/icons/right-square-bracket.d.ts

@@ -0,0 +1,6 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    title?: string;
+};
+declare function RightSquareBracket({ fill, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default RightSquareBracket;

package/dist/components/assets/icons/right-square-bracket.js

@@ -0,0 +1,23 @@
+import { jsx as r } from "react/jsx-runtime";
+function a({
+  fill: e = "currentColor",
+  width: t = "1em",
+  height: i = "1em",
+  ...n
+}) {
+  return /* @__PURE__ */ r(
+    "svg",
+    {
+      height: i,
+      id: "right-square-bracket",
+      width: t,
+      viewBox: "0 0 3 12",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...n,
+      children: /* @__PURE__ */ r("g", { fill: "none", children: /* @__PURE__ */ r("path", { d: "M3 0V12H0V10.9808H1.7712V1.01448H0V0H3Z", fill: e }) })
+    }
+  );
+}
+export {
+  a as default
+};

package/dist/components/table/components/cell/avatar-cell.js

@@ -47,13 +47,20 @@ import "../../../dynamic-table/z2-table-context.js";
 import "../../../chart/chart.js";
 import "../../../chart-card/config/defaults.js";
 import "../../../chart-card/config/colors.js";
-const pt = ({
+import "../../../z2map/map.js";
+import "../../../z2map/map.constants.js";
+import "../../../z2map/components/map-pin.js";
+import "../../../z2map/components/map-pin-content.js";
+import "../../../z2map/components/map-controls.js";
+import "../../../z2map/components/map-zoom-control.js";
+import "../../../z2map/components/map-style-control.js";
+const xt = ({
   avatar: m,
   value: a,
   rightIcon: o,
   className: s,
-  helperText: e,
-  description: p
+  helperText: p,
+  description: e
 }) => /* @__PURE__ */ i(
   "div",
   {
@@ -74,16 +81,16 @@ const pt = ({
               a
             ] }),
             /* @__PURE__ */ i("div", { className: "flex items-center gap-2.5", children: [
-              e && /* @__PURE__ */ t("span", { className: "text-text-neutral-secondary", children: e }),
+              p && /* @__PURE__ */ t("span", { className: "text-text-neutral-secondary", children: p }),
               o && /* @__PURE__ */ t("span", { className: r("min-h-max min-w-max"), children: o })
             ] })
           ]
         }
       ),
-      p && /* @__PURE__ */ t("div", { className: "text-text-neutral-secondary w-full", children: p })
+      e && /* @__PURE__ */ t("div", { className: "text-text-neutral-secondary w-full", children: e })
     ]
   }
 );
 export {
-  pt as AvatarCell
+  xt as AvatarCell
 };

package/dist/components/table/table-provider.js

@@ -52,6 +52,13 @@ import "../dynamic-table/z2-table-context.js";
 import "../chart/chart.js";
 import "../chart-card/config/defaults.js";
 import "../chart-card/config/colors.js";
+import "../z2map/map.js";
+import "../z2map/map.constants.js";
+import "../z2map/components/map-pin.js";
+import "../z2map/components/map-pin-content.js";
+import "../z2map/components/map-controls.js";
+import "../z2map/components/map-zoom-control.js";
+import "../z2map/components/map-style-control.js";
 import { TableHeaderWrapper as T } from "./components/table-header-wrapper.js";
 import { TableHeaderContent as b } from "./components/table-header-content.js";
 import { TableFooter as s } from "./components/table-footer.js";

package/dist/components/table-card/table-card.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
 import { Table as r } from "../table/table-provider.js";
 import "react";
 import { cn as d } from "../../lib/utils.js";
@@ -47,8 +47,15 @@ import "../dynamic-table/z2-table-context.js";
 import "../chart/chart.js";
 import "../chart-card/config/defaults.js";
 import "../chart-card/config/colors.js";
+import "../z2map/map.js";
+import "../z2map/map.constants.js";
+import "../z2map/components/map-pin.js";
+import "../z2map/components/map-pin-content.js";
+import "../z2map/components/map-controls.js";
+import "../z2map/components/map-zoom-control.js";
+import "../z2map/components/map-style-control.js";
 import "../table/table.context.js";
-const _e = ({
+const zt = ({
   dataSource: w,
   schema: B,
   loading: b,
@@ -58,8 +65,8 @@ const _e = ({
   bordered: n = !0,
   showHeader: g = !0,
   headerClassName: j,
-  search: m,
-  filter: t,
+  search: a,
+  filter: e,
   headerLeftContent: h,
   headerActions: p,
   body: l = {
@@ -71,24 +78,24 @@ const _e = ({
   footerClassName: T,
   pagination: o,
   paginationInfo: i,
-  paginationQuickJumper: a,
+  paginationQuickJumper: s,
   error: u = !1,
   dataSourceError: _ = !1
 }) => {
   var F;
   if (u)
-    return /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center h-64 bg-background-error-subtle rounded-lg text-text-warning-secondary", children: /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ e(S, { className: "mt-1.5" }),
-      /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ e("div", { className: "text-text-error-primary text-lg font-medium", children: "Error loading data" }),
-        /* @__PURE__ */ e("div", { className: "text-sm", children: "Please try again later" }),
-        typeof u == "string" && /* @__PURE__ */ e("div", { className: "text-text-warning-secondary text-sm", children: u })
+    return /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center h-64 bg-background-error-subtle rounded-lg text-text-warning-secondary", children: /* @__PURE__ */ m("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ t(S, { className: "mt-1.5" }),
+      /* @__PURE__ */ m("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ t("div", { className: "text-text-error-primary text-lg font-medium", children: "Error loading data" }),
+        /* @__PURE__ */ t("div", { className: "text-sm", children: "Please try again later" }),
+        typeof u == "string" && /* @__PURE__ */ t("div", { className: "text-text-warning-secondary text-sm", children: u })
       ] })
     ] }) });
-  const C = a && a.totalPage && a.totalPage >= 2, N = o && o.totalPage && o.totalPage >= 2 || !!i || C, v = m || t || h || p, R = typeof (t == null ? void 0 : t.showFilterButton) > "u" ? !0 : t == null ? void 0 : t.showFilterButton;
-  return /* @__PURE__ */ s("div", { className: d("flex flex-col overflow-hidden relative", H), children: [
-    /* @__PURE__ */ s(r, { dataSource: w, schema: B, emptyMessage: k, children: [
-      g && v && /* @__PURE__ */ s(
+  const C = s && s.totalPage && s.totalPage >= 2, N = o && o.totalPage && o.totalPage >= 2 || !!i || C, v = a || e || h || p, R = typeof (e == null ? void 0 : e.showFilterButton) > "u" ? !0 : e == null ? void 0 : e.showFilterButton;
+  return /* @__PURE__ */ m("div", { className: d("flex flex-col overflow-hidden relative", H), children: [
+    /* @__PURE__ */ m(r, { dataSource: w, schema: B, emptyMessage: k, children: [
+      g && v && /* @__PURE__ */ m(
         r.Header,
         {
           className: d(
@@ -98,43 +105,43 @@ const _e = ({
             j
           ),
           children: [
-            /* @__PURE__ */ s(r.HeaderContent, { children: [
+            /* @__PURE__ */ m(r.HeaderContent, { children: [
               h && h,
-              m && /* @__PURE__ */ e(
+              a && /* @__PURE__ */ t(
                 r.Search,
                 {
                   search: {
-                    value: m.value || "",
-                    onChange: m.onChange || (() => {
+                    value: a.value || "",
+                    onChange: a.onChange || (() => {
                     }),
-                    placeholder: m.placeholder
+                    placeholder: a.placeholder
                   },
-                  className: m.className
+                  className: a.className
                 }
               ),
-              t && /* @__PURE__ */ s(
+              e && /* @__PURE__ */ m(
                 x,
                 {
-                  filterSchema: t.filterSchema,
+                  filterSchema: e.filterSchema,
                   filter: {
-                    value: t.value || [],
-                    onChange: t.onChange || (() => {
+                    value: e.value || [],
+                    onChange: e.onChange || (() => {
                     }),
-                    onFilterClick: t.onFilterClick,
-                    loading: t.loading
+                    onFilterClick: e.onFilterClick,
+                    loading: e.loading
                   },
                   children: [
-                    R && /* @__PURE__ */ e(x.FilterButton, {}),
-                    (F = t == null ? void 0 : t.quickFilters) == null ? void 0 : F.map((f) => /* @__PURE__ */ e(x.FilterColumnButton, { filterName: f }, f))
+                    R && /* @__PURE__ */ t(x.FilterButton, {}),
+                    (F = e == null ? void 0 : e.quickFilters) == null ? void 0 : F.map((f) => /* @__PURE__ */ t(x.FilterColumnButton, { filterName: f }, f))
                   ]
                 }
               )
             ] }),
-            p && /* @__PURE__ */ e(r.HeaderContent, { children: p })
+            p && /* @__PURE__ */ t(r.HeaderContent, { children: p })
           ]
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ t(
         r.Body,
         {
           dataSourceError: _,
@@ -152,7 +159,7 @@ const _e = ({
           stickyHeader: l == null ? void 0 : l.stickyHeader
         }
       ),
-      P && N && /* @__PURE__ */ s(
+      P && N && /* @__PURE__ */ m(
         r.Footer,
         {
           className: d(
@@ -162,7 +169,7 @@ const _e = ({
             T
           ),
           children: [
-            i ? /* @__PURE__ */ e(r.FooterContent, { children: /* @__PURE__ */ e(
+            i ? /* @__PURE__ */ t(r.FooterContent, { children: /* @__PURE__ */ t(
               r.PaginationInfo,
               {
                 showTotal: i.showTotal,
@@ -170,19 +177,19 @@ const _e = ({
                 currentPage: i.currentPage,
                 itemsPerPage: i.itemsPerPage
               }
-            ) }) : a || o ? /* @__PURE__ */ e(r.FooterContent, { children: null }) : null,
-            (a || o) && /* @__PURE__ */ s(r.FooterContent, { children: [
-              C && /* @__PURE__ */ e(
+            ) }) : s || o ? /* @__PURE__ */ t(r.FooterContent, { children: null }) : null,
+            (s || o) && /* @__PURE__ */ m(r.FooterContent, { children: [
+              C && /* @__PURE__ */ t(
                 r.PaginationQuickJumper,
                 {
-                  currentPage: a.currentPage,
-                  totalPage: a.totalPage,
-                  onChange: a.onChange || (() => {
+                  currentPage: s.currentPage,
+                  totalPage: s.totalPage,
+                  onChange: s.onChange || (() => {
                   }),
-                  disabled: a.disabled
+                  disabled: s.disabled
                 }
               ),
-              o && /* @__PURE__ */ e(
+              o && /* @__PURE__ */ t(
                 r.Pagination,
                 {
                   currentPage: o.currentPage,
@@ -197,12 +204,12 @@ const _e = ({
         }
       )
     ] }),
-    b && /* @__PURE__ */ e("div", { className: "absolute top-0 inset-0 w-full h-full bg-white/80 flex items-center justify-center", children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-3", children: [
-      /* @__PURE__ */ e("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-text-brand-secondary" }),
-      /* @__PURE__ */ e("p", { className: "text-text-neutral-primary font-medium", children: "Loading..." })
+    b && /* @__PURE__ */ t("div", { className: "absolute top-0 inset-0 w-full h-full bg-white/80 flex items-center justify-center", children: /* @__PURE__ */ m("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ t("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-text-brand-secondary" }),
+      /* @__PURE__ */ t("p", { className: "text-text-neutral-primary font-medium", children: "Loading..." })
     ] }) })
   ] });
 };
 export {
-  _e as default
+  zt as default
 };

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

@@ -0,0 +1,29 @@
+import { jsxs as m, Fragment as p, jsx as r } from "react/jsx-runtime";
+import { MapZoomControl as d } from "./map-zoom-control.js";
+import { MapStyleControl as c } from "./map-style-control.js";
+import { cn as s } from "../../../lib/utils.js";
+const f = ({
+  showZoomControls: n = !0,
+  onZoomIn: o,
+  onZoomOut: t,
+  showStyleSwitcher: e = !1,
+  activeStyle: a,
+  onStyleChange: i,
+  className: l
+}) => /* @__PURE__ */ m(p, { children: [
+  n && o && t && /* @__PURE__ */ r(
+    "div",
+    {
+      className: s(
+        "absolute bottom-6 right-6 z-10 transition-all duration-300 hover:scale-105",
+        l
+      ),
+      children: /* @__PURE__ */ r(d, { onZoomIn: o, onZoomOut: t })
+    }
+  ),
+  e && a && i && /* @__PURE__ */ r("div", { className: s("absolute top-6 right-6 z-10 transition-all duration-300", l), children: /* @__PURE__ */ r(c, { activeStyle: a, onStyleChange: i }) })
+] });
+f.displayName = "MapControls";
+export {
+  f as MapControls
+};

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

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

package/dist/components/z2map/components/map-empty-state.js

@@ -0,0 +1,10 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { MapPinOff as a } from "lucide-react";
+const s = () => /* @__PURE__ */ e("div", { className: "absolute inset-0 pointer-events-none flex items-center justify-center z-20", children: /* @__PURE__ */ e("div", { className: "bg-white/95 backdrop-blur-sm rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.12)] border border-stroke-solid-light p-8 max-w-sm mx-4 pointer-events-auto", children: /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-4 text-center", children: [
+  /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-surface-neutral-default flex items-center justify-center", children: /* @__PURE__ */ e(a, { className: "w-8 h-8 text-neutral-secondary" }) }) }),
+  /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ e("h3", { className: "leading-none-medium-base text-neutral-primary font-semibold", children: "No locations to display" }) })
+] }) }) });
+s.displayName = "MapEmptyState";
+export {
+  s as MapEmptyState
+};

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

@@ -0,0 +1,45 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Loader2 as i } from "lucide-react";
+import { cn as s } from "../../../lib/utils.js";
+const c = ({ width: r, height: t, className: l }) => {
+  const n = {
+    width: typeof r == "number" ? `${r}px` : r,
+    height: typeof t == "number" ? `${t}px` : t
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      style: n,
+      className: s(
+        "relative bg-gradient-to-br from-surface-neutral-default to-surface-neutral-hover rounded-xl border border-stroke-solid-light flex flex-col items-center justify-center gap-4 overflow-hidden",
+        l
+      ),
+      children: [
+        /* @__PURE__ */ e("div", { className: "absolute inset-0 opacity-[0.03]", children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: {
+              backgroundImage: "radial-gradient(circle at 20px 20px, currentColor 1px, transparent 1px)",
+              backgroundSize: "40px 40px"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ a("div", { className: "relative z-10 flex flex-col items-center gap-3", children: [
+          /* @__PURE__ */ a("div", { className: "relative", children: [
+            /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-surface-accent-default/10 flex items-center justify-center", children: /* @__PURE__ */ e(i, { className: "w-8 h-8 text-accent-primary animate-spin" }) }),
+            /* @__PURE__ */ e("div", { className: "absolute inset-0 rounded-full bg-accent-primary/20 animate-ping" })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-1", children: [
+            /* @__PURE__ */ e("div", { className: "leading-none-medium-sm text-neutral-primary font-medium", children: "Loading map..." }),
+            /* @__PURE__ */ e("div", { className: "leading-none-regular-xs text-neutral-secondary", children: "Please wait" })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+c.displayName = "MapLoadingState";
+export {
+  c as MapLoadingState
+};

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

@@ -0,0 +1,27 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { MapPin as d, MapPinned as m } from "lucide-react";
+import { Badge as c } from "../../badge/badge.js";
+import { cn as t } from "../../../lib/utils.js";
+const p = ({ location: e, customContent: s, className: n }) => s ? /* @__PURE__ */ r("div", { className: t("min-w-0", n), children: s }) : /* @__PURE__ */ a("div", { className: t("flex flex-col gap-3 max-w-xs p-1", n), children: [
+  /* @__PURE__ */ a("div", { className: "flex items-start gap-2.5", children: [
+    /* @__PURE__ */ r("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-surface-accent-default/10 flex items-center justify-center mt-0.5", children: /* @__PURE__ */ r(d, { size: 16, className: "text-accent-primary" }) }),
+    /* @__PURE__ */ a("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ r("h3", { className: "leading-none-medium-base text-neutral-primary font-semibold mb-1 break-words", children: e.title }),
+      e.name && e.name !== e.title && /* @__PURE__ */ r("p", { className: "leading-none-regular-xs text-neutral-secondary", children: e.name })
+    ] })
+  ] }),
+  e.description && /* @__PURE__ */ r("p", { className: "leading-none-regular-sm text-neutral-secondary leading-relaxed", children: e.description }),
+  e.specs && e.specs.length > 0 && /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-1.5", children: e.specs.map((i, l) => /* @__PURE__ */ r(c, { label: i, size: "sm", variant: "neutral" }, l)) }),
+  /* @__PURE__ */ a("div", { className: "flex items-center gap-1.5 text-neutral-tertiary leading-none-regular-xs pt-2 border-t border-stroke-solid-light", children: [
+    /* @__PURE__ */ r(m, { size: 12, className: "text-neutral-tertiary" }),
+    /* @__PURE__ */ a("span", { className: "font-mono text-[10px]", children: [
+      e.coordinate.lat.toFixed(4),
+      ", ",
+      e.coordinate.lng.toFixed(4)
+    ] })
+  ] })
+] });
+p.displayName = "MapPinContent";
+export {
+  p as MapPinContent
+};

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

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from 'react';
+import { 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/components/z2map/components/map-pin.js

@@ -0,0 +1,116 @@
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { cva as v } from "class-variance-authority";
+import { MapPin as h } from "lucide-react";
+import { cn as c } from "../../../lib/utils.js";
+import { PIN_SIZES as r } from "../map.constants.js";
+const m = v(
+  [
+    "relative flex items-center justify-center cursor-pointer transition-all duration-300 select-none group",
+    'before:content-[""] before:absolute before:inset-0 before:rounded-full',
+    "before:transition-all before:duration-300",
+    "before:ring-2 before:ring-white/90",
+    "before:shadow-[0_2px_8px_rgba(0,0,0,0.15)] hover:before:shadow-[0_4px_16px_rgba(0,0,0,0.25)]",
+    "before:z-[0]"
+  ],
+  {
+    variants: {
+      variant: {
+        brand: "",
+        neutral: "",
+        danger: "",
+        success: "",
+        warning: ""
+      },
+      active: {
+        true: [
+          "scale-125 z-50",
+          "before:ring-4 before:ring-white/70",
+          "before:shadow-[0_8px_24px_rgba(0,0,0,0.3)]"
+        ],
+        false: "hover:scale-110"
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "brand",
+        className: "before:bg-surface-accent-default hover:before:bg-surface-accent-hover"
+      },
+      {
+        variant: "neutral",
+        className: "before:bg-surface-gray-default hover:before:bg-surface-gray-hover"
+      },
+      {
+        variant: "danger",
+        className: "before:bg-surface-danger-default hover:before:bg-surface-danger-hover"
+      },
+      {
+        variant: "success",
+        className: "before:bg-surface-success-default hover:before:bg-surface-success-hover"
+      },
+      {
+        variant: "warning",
+        className: "before:bg-surface-warning-default hover:before:bg-surface-warning-hover"
+      }
+    ],
+    defaultVariants: {
+      variant: "warning",
+      active: !1
+    }
+  }
+), p = {
+  sm: r.sm.iconSize,
+  md: r.md.iconSize,
+  lg: r.lg.iconSize
+}, w = {
+  brand: "bg-surface-accent-hover",
+  neutral: "bg-surface-gray-hover",
+  danger: "bg-surface-danger-hover",
+  success: "bg-surface-success-hover",
+  warning: "bg-surface-warning-hover"
+}, x = ({
+  icon: f,
+  className: b,
+  onClick: e,
+  onMouseEnter: u,
+  onMouseLeave: l,
+  active: s = !1,
+  variant: o = "warning",
+  size: t = "md"
+}) => {
+  const g = p[t], i = r[t];
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: c(m({ variant: o, active: s }), b),
+      style: {
+        width: `${i.width}px`,
+        height: `${i.height}px`
+      },
+      onClick: e,
+      onMouseEnter: u,
+      onMouseLeave: l,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "Map pin",
+      onKeyDown: (a) => {
+        (a.key === "Enter" || a.key === " ") && (a.preventDefault(), e == null || e());
+      },
+      children: [
+        s && /* @__PURE__ */ n(
+          "div",
+          {
+            className: c(
+              "absolute inset-0 rounded-full z-[1] opacity-60",
+              w[o]
+            )
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: "relative z-10 flex items-center justify-center", children: f || /* @__PURE__ */ n(h, { size: g, className: "text-white drop-shadow-sm" }) })
+      ]
+    }
+  );
+};
+x.displayName = "MapPinComponent";
+export {
+  x as MapPinComponent
+};

package/dist/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>;