@trackunit/react-map 0.2.126 → 0.2.128-alpha-7317206cecd.0

package/index.cjs.js

@@ -1059,17 +1059,18 @@ const FallbackAnnotationContent = ({ store }) => {
     return (jsxRuntime.jsx("div", { className: "pointer-events-none col-start-1 row-start-1 self-end justify-self-start", children: jsxRuntime.jsx(AnnotationStack, { annotations: displayAnnotations, isExiting: isExiting }) }));
 };
 const DEBOUNCE_DELAY = 200;
-const cvaLoadingOverlay = cssClassVarianceUtilities.cvaMerge([
-    "pointer-events-none",
-    "col-start-1",
-    "row-start-1",
-    "flex",
-    "items-start",
-    "justify-center",
-    "transition-[opacity,display]",
-    "duration-150",
-    "ease-in-out",
-], {
+const cvaLoadingOverlay = cssClassVarianceUtilities.cva({
+    base: [
+        "pointer-events-none",
+        "col-start-1",
+        "row-start-1",
+        "flex",
+        "items-start",
+        "justify-center",
+        "transition-[opacity,display]",
+        "duration-150",
+        "ease-in-out",
+    ],
     variants: {
         visible: {
             true: ["opacity-100"],
@@ -1900,7 +1901,7 @@ const Custom = ({ config, overlaySide = undefined, resolved, placement }) => {
 };
 
 /** Shared padding for interactive menu items (button, toggle, stepper, select, radioGroup). */
-const cvaControlMenuItemBase = cssClassVarianceUtilities.cvaMerge(["px-3", "py-2"]);
+const cvaControlMenuItemBase = cssClassVarianceUtilities.cva({ base: ["px-3", "py-2"] });
 // ============================================================================
 // Cross-Cutting Middleware
 // ============================================================================
@@ -2697,21 +2698,22 @@ const ControlsInner = ({ api, controls, className }) => {
 // shallow equality is sufficient; no custom comparator needed.
 const Controls = react.memo(ControlsInner);
 
-const cvaMapPreview = cssClassVarianceUtilities.cvaMerge([
-    "relative",
-    "h-[72px]",
-    "w-[72px]",
-    "overflow-clip",
-    "[--radius:theme(borderRadius.xl)]",
-    "[--border:2px]",
-    "rounded-[var(--radius)]",
-    "before:pointer-events-none",
-    "before:absolute",
-    "before:inset-0",
-    "before:z-10",
-    "before:rounded-[var(--radius)]",
-    "before:border-[length:var(--border)]",
-], {
+const cvaMapPreview = cssClassVarianceUtilities.cva({
+    base: [
+        "relative",
+        "h-[72px]",
+        "w-[72px]",
+        "overflow-clip",
+        "[--radius:theme(borderRadius.xl)]",
+        "[--border:2px]",
+        "rounded-[var(--radius)]",
+        "before:pointer-events-none",
+        "before:absolute",
+        "before:inset-0",
+        "before:z-10",
+        "before:rounded-[var(--radius)]",
+        "before:border-[length:var(--border)]",
+    ],
     variants: {
         selected: {
             true: ["before:border-primary-500", "before:ring-2", "before:ring-inset", "before:ring-white"],
@@ -3980,19 +3982,21 @@ const resolveMarkerDomSize = (size, direction, form) => {
  * properties that need to animate, intentionally excluding `width` to prevent
  * non-composited layout thrashing. See `MarkerAnimatedSurface.tsx` for details.
  */
-const cvaMapMarker = cssClassVarianceUtilities.cvaMerge([
-    "inline-flex",
-    "items-center",
-    "relative",
-    "overflow-hidden",
-    "select-none",
-    "cursor-pointer",
-    "rounded-full",
-    "outline-none",
-    "focus-visible:ring-2",
-    "focus-visible:ring-info-500",
-    "focus-visible:ring-offset-2",
-]);
+const cvaMapMarker = cssClassVarianceUtilities.cva({
+    base: [
+        "inline-flex",
+        "items-center",
+        "relative",
+        "overflow-hidden",
+        "select-none",
+        "cursor-pointer",
+        "rounded-full",
+        "outline-none",
+        "focus-visible:ring-2",
+        "focus-visible:ring-info-500",
+        "focus-visible:ring-offset-2",
+    ],
+});
 /**
  * Label span inside pill markers.
  *
@@ -4005,19 +4009,14 @@ const cvaMapMarker = cssClassVarianceUtilities.cvaMerge([
  * alone biases the text upward (extra space below). `overflow-x: clip` gives the
  * horizontal ellipsis without a vertical clip on the span itself.
  */
-const cvaPillLabel = cssClassVarianceUtilities.cvaMerge([
-    "min-w-0",
-    "flex-1",
-    "overflow-x-clip",
-    "whitespace-nowrap",
-    "text-ellipsis",
-    "font-medium",
-    "leading-none",
-]);
+const cvaPillLabel = cssClassVarianceUtilities.cva({
+    base: ["min-w-0", "flex-1", "overflow-x-clip", "whitespace-nowrap", "text-ellipsis", "font-medium", "leading-none"],
+});
 /**
  * Inner indicator disc: marker fill via `--marker-color`, border via CSS `color-mix` on that token (plan §5).
  */
-const cvaMarkerIndicator = cssClassVarianceUtilities.cvaMerge(["rounded-full", "bg-[var(--marker-color)]", "flex", "items-center", "justify-center"], {
+const cvaMarkerIndicator = cssClassVarianceUtilities.cva({
+    base: ["rounded-full", "bg-[var(--marker-color)]", "flex", "items-center", "justify-center"],
     variants: {
         size: {
             xs: ["h-2", "w-2"],
@@ -6499,20 +6498,21 @@ const extractSinglePartInfo = (geometry) => {
     }
 };
 
-const cvaShapeLabel = cssClassVarianceUtilities.cvaMerge([
-    "select-none",
-    "inline-flex",
-    "items-center",
-    "gap-1",
-    "whitespace-nowrap",
-    "px-2",
-    "py-0.5",
-    "text-xs",
-    "font-medium",
-    "leading-tight",
-    "transition-opacity",
-    "duration-150",
-], {
+const cvaShapeLabel = cssClassVarianceUtilities.cva({
+    base: [
+        "select-none",
+        "inline-flex",
+        "items-center",
+        "gap-1",
+        "whitespace-nowrap",
+        "px-2",
+        "py-0.5",
+        "text-xs",
+        "font-medium",
+        "leading-tight",
+        "transition-opacity",
+        "duration-150",
+    ],
     variants: {
         theme: {
             light: ["shadow-sm"],
@@ -6569,7 +6569,8 @@ const EDGE_LABEL_BORDER_RADIUS = {
         right: "3px 0 3px 3px",
     },
 };
-const cvaFitMode = cssClassVarianceUtilities.cvaMerge([], {
+const cvaFitMode = cssClassVarianceUtilities.cva({
+    base: [],
     variants: {
         fitMode: {
             fits: ["pointer-events-auto"],

package/index.esm.js

@@ -3,7 +3,7 @@ import { useNamespaceTranslation, registerTranslations } from '@trackunit/i18n-l
 import { INITIAL_CAMERA_STATE, INITIAL_MAP_STATUS, KEYBOARD_PAN_AMOUNT, KEYBOARD_ZOOM_AMOUNT, mapAppearanceSchema, DEFAULT_MAP_APPEARANCE, WORLD_BBOX, INITIAL_INTERACTION_STATE, mapThemeSchema, mergeAntimeridianFeatures, extractSourceData, computeMarkerDomPortalZIndex, densifyGeodesicFeatures, angularDistance, intermediatePoint, GEODESIC_MAX_SEGMENT_KM, geometryTypeToShapeType, resolveStrokeColors } from '@trackunit/react-map-adapter-shared';
 export { ANCHOR_SELECTOR, DEFAULT_MAP_APPEARANCE, HIT_SURFACE_SELECTOR, INITIAL_CAMERA_STATE, INITIAL_INTERACTION_STATE, INITIAL_MAP_STATE, INITIAL_MAP_STATUS, computeMarkerDomPortalZIndex, defineAdapter, geometryTypeToShapeType, mapAppearanceSchema, mapThemeSchema, mapTypeSchema } from '@trackunit/react-map-adapter-shared';
 import { useSyncExternalStore, useMemo, useState, useRef, useCallback, useLayoutEffect, useEffect, useReducer, createContext, useContext, memo, Suspense, useId, Fragment as Fragment$1, forwardRef } from 'react';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { cva } from '@trackunit/css-class-variance-utilities';
 import { Tooltip, useMergeRefs, Icon, Spinner, Text, useMeasure, useContainerBreakpoints, useDebounce, useWatch, useKeyboardShortcut, IconButton, ToggleGroup as ToggleGroup$1, useIsFullscreen, Popover, PopoverTrigger, PopoverContent, MoreMenu, useHover as useHover$1, cvaInteractableItem, useLocalStorageReducer } from '@trackunit/react-components';
 import { twMerge } from 'tailwind-merge';
 import { useFloating, autoUpdate, offset, flip, useHover, safePolygon, useInteractions, shift, hide, useDismiss, useRole } from '@floating-ui/react';
@@ -1058,17 +1058,18 @@ const FallbackAnnotationContent = ({ store }) => {
     return (jsx("div", { className: "pointer-events-none col-start-1 row-start-1 self-end justify-self-start", children: jsx(AnnotationStack, { annotations: displayAnnotations, isExiting: isExiting }) }));
 };
 const DEBOUNCE_DELAY = 200;
-const cvaLoadingOverlay = cvaMerge([
-    "pointer-events-none",
-    "col-start-1",
-    "row-start-1",
-    "flex",
-    "items-start",
-    "justify-center",
-    "transition-[opacity,display]",
-    "duration-150",
-    "ease-in-out",
-], {
+const cvaLoadingOverlay = cva({
+    base: [
+        "pointer-events-none",
+        "col-start-1",
+        "row-start-1",
+        "flex",
+        "items-start",
+        "justify-center",
+        "transition-[opacity,display]",
+        "duration-150",
+        "ease-in-out",
+    ],
     variants: {
         visible: {
             true: ["opacity-100"],
@@ -1899,7 +1900,7 @@ const Custom = ({ config, overlaySide = undefined, resolved, placement }) => {
 };
 
 /** Shared padding for interactive menu items (button, toggle, stepper, select, radioGroup). */
-const cvaControlMenuItemBase = cvaMerge(["px-3", "py-2"]);
+const cvaControlMenuItemBase = cva({ base: ["px-3", "py-2"] });
 // ============================================================================
 // Cross-Cutting Middleware
 // ============================================================================
@@ -2696,21 +2697,22 @@ const ControlsInner = ({ api, controls, className }) => {
 // shallow equality is sufficient; no custom comparator needed.
 const Controls = memo(ControlsInner);
 
-const cvaMapPreview = cvaMerge([
-    "relative",
-    "h-[72px]",
-    "w-[72px]",
-    "overflow-clip",
-    "[--radius:theme(borderRadius.xl)]",
-    "[--border:2px]",
-    "rounded-[var(--radius)]",
-    "before:pointer-events-none",
-    "before:absolute",
-    "before:inset-0",
-    "before:z-10",
-    "before:rounded-[var(--radius)]",
-    "before:border-[length:var(--border)]",
-], {
+const cvaMapPreview = cva({
+    base: [
+        "relative",
+        "h-[72px]",
+        "w-[72px]",
+        "overflow-clip",
+        "[--radius:theme(borderRadius.xl)]",
+        "[--border:2px]",
+        "rounded-[var(--radius)]",
+        "before:pointer-events-none",
+        "before:absolute",
+        "before:inset-0",
+        "before:z-10",
+        "before:rounded-[var(--radius)]",
+        "before:border-[length:var(--border)]",
+    ],
     variants: {
         selected: {
             true: ["before:border-primary-500", "before:ring-2", "before:ring-inset", "before:ring-white"],
@@ -3979,19 +3981,21 @@ const resolveMarkerDomSize = (size, direction, form) => {
  * properties that need to animate, intentionally excluding `width` to prevent
  * non-composited layout thrashing. See `MarkerAnimatedSurface.tsx` for details.
  */
-const cvaMapMarker = cvaMerge([
-    "inline-flex",
-    "items-center",
-    "relative",
-    "overflow-hidden",
-    "select-none",
-    "cursor-pointer",
-    "rounded-full",
-    "outline-none",
-    "focus-visible:ring-2",
-    "focus-visible:ring-info-500",
-    "focus-visible:ring-offset-2",
-]);
+const cvaMapMarker = cva({
+    base: [
+        "inline-flex",
+        "items-center",
+        "relative",
+        "overflow-hidden",
+        "select-none",
+        "cursor-pointer",
+        "rounded-full",
+        "outline-none",
+        "focus-visible:ring-2",
+        "focus-visible:ring-info-500",
+        "focus-visible:ring-offset-2",
+    ],
+});
 /**
  * Label span inside pill markers.
  *
@@ -4004,19 +4008,14 @@ const cvaMapMarker = cvaMerge([
  * alone biases the text upward (extra space below). `overflow-x: clip` gives the
  * horizontal ellipsis without a vertical clip on the span itself.
  */
-const cvaPillLabel = cvaMerge([
-    "min-w-0",
-    "flex-1",
-    "overflow-x-clip",
-    "whitespace-nowrap",
-    "text-ellipsis",
-    "font-medium",
-    "leading-none",
-]);
+const cvaPillLabel = cva({
+    base: ["min-w-0", "flex-1", "overflow-x-clip", "whitespace-nowrap", "text-ellipsis", "font-medium", "leading-none"],
+});
 /**
  * Inner indicator disc: marker fill via `--marker-color`, border via CSS `color-mix` on that token (plan §5).
  */
-const cvaMarkerIndicator = cvaMerge(["rounded-full", "bg-[var(--marker-color)]", "flex", "items-center", "justify-center"], {
+const cvaMarkerIndicator = cva({
+    base: ["rounded-full", "bg-[var(--marker-color)]", "flex", "items-center", "justify-center"],
     variants: {
         size: {
             xs: ["h-2", "w-2"],
@@ -6498,20 +6497,21 @@ const extractSinglePartInfo = (geometry) => {
     }
 };
 
-const cvaShapeLabel = cvaMerge([
-    "select-none",
-    "inline-flex",
-    "items-center",
-    "gap-1",
-    "whitespace-nowrap",
-    "px-2",
-    "py-0.5",
-    "text-xs",
-    "font-medium",
-    "leading-tight",
-    "transition-opacity",
-    "duration-150",
-], {
+const cvaShapeLabel = cva({
+    base: [
+        "select-none",
+        "inline-flex",
+        "items-center",
+        "gap-1",
+        "whitespace-nowrap",
+        "px-2",
+        "py-0.5",
+        "text-xs",
+        "font-medium",
+        "leading-tight",
+        "transition-opacity",
+        "duration-150",
+    ],
     variants: {
         theme: {
             light: ["shadow-sm"],
@@ -6568,7 +6568,8 @@ const EDGE_LABEL_BORDER_RADIUS = {
         right: "3px 0 3px 3px",
     },
 };
-const cvaFitMode = cvaMerge([], {
+const cvaFitMode = cva({
+    base: [],
     variants: {
         fitMode: {
             fits: ["pointer-events-auto"],

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@trackunit/react-map",
-  "version": "0.2.126",
+  "version": "0.2.128-alpha-7317206cecd.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.13.0",
-    "@trackunit/css-class-variance-utilities": "1.14.29",
-    "@trackunit/react-form-components": "2.6.48",
-    "@trackunit/react-core-hooks": "1.21.41",
-    "@trackunit/geo-json-utils": "1.15.31",
-    "@trackunit/i18n-library-translation": "2.4.41",
+    "@trackunit/react-components": "2.13.2-alpha-7317206cecd.0",
+    "@trackunit/css-class-variance-utilities": "2.0.1-alpha-7317206cecd.0",
+    "@trackunit/react-form-components": "2.6.50-alpha-7317206cecd.0",
+    "@trackunit/react-core-hooks": "1.21.43-alpha-7317206cecd.0",
+    "@trackunit/geo-json-utils": "1.15.33-alpha-7317206cecd.0",
+    "@trackunit/i18n-library-translation": "2.4.43-alpha-7317206cecd.0",
     "react-minimal-pie-chart": "^8.4.0",
-    "@trackunit/react-map-adapter-shared": "0.0.112",
-    "@trackunit/react-map-color-utils": "0.0.92",
-    "@trackunit/ui-design-tokens": "1.15.19",
+    "@trackunit/react-map-adapter-shared": "0.0.114-alpha-7317206cecd.0",
+    "@trackunit/react-map-color-utils": "0.0.94-alpha-7317206cecd.0",
+    "@trackunit/ui-design-tokens": "1.15.21-alpha-7317206cecd.0",
     "@floating-ui/react": "^0.26.25",
     "es-toolkit": "^1.39.10",
     "tailwind-merge": "^2.0.0",

package/src/controls/renderingRules.d.ts

@@ -1,7 +1,12 @@
 import type { AvailableSpace, Compactness, ControlConfig, MenuItemConfig, Placement, RenderContext, ResolvedControlProps, ResolvedControlPropsBase } from "./types";
 export type { AvailableSpace, Compactness, Placement, RenderContext, ResolvedControlProps, ResolvedControlPropsBase };
 /** Shared padding for interactive menu items (button, toggle, stepper, select, radioGroup). */
-export declare const cvaControlMenuItemBase: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaControlMenuItemBase: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
 /** Context available to all middleware and resolvers */
 export type MiddlewareContext = Readonly<{
     renderContext: RenderContext;

package/src/layers/useShapes/ShapeLabelPill.d.ts

@@ -9,9 +9,28 @@ type ShapeLabelPillProps = Readonly<{
     "data-testid"?: string;
     children: ReactNode;
 }>;
-export declare const cvaShapeLabel: (props?: ({
-    theme?: "light" | "dark" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaShapeLabel: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        theme: {
+            light: string[];
+            dark: string[];
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        theme: {
+            light: string[];
+            dark: string[];
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    theme: {
+        light: string[];
+        dark: string[];
+    };
+}>;
 /**
  * Shared styled container for shape labels (edge labels and annotation labels).
  *

package/src/markers/shared/mapMarkerVariants.d.ts

@@ -12,7 +12,12 @@
  * properties that need to animate, intentionally excluding `width` to prevent
  * non-composited layout thrashing. See `MarkerAnimatedSurface.tsx` for details.
  */
-export declare const cvaMapMarker: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaMapMarker: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
 /**
  * Label span inside pill markers.
  *
@@ -25,11 +30,62 @@ export declare const cvaMapMarker: (props?: import("class-variance-authority/typ
  * alone biases the text upward (extra space below). `overflow-x: clip` gives the
  * horizontal ellipsis without a vertical clip on the span itself.
  */
-export declare const cvaPillLabel: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaPillLabel: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
 /**
  * Inner indicator disc: marker fill via `--marker-color`, border via CSS `color-mix` on that token (plan §5).
  */
-export declare const cvaMarkerIndicator: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
-    theme?: "light" | "dark" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaMarkerIndicator: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        size: {
+            xs: string[];
+            sm: string[];
+            md: string[];
+            lg: string[];
+            xl: string[];
+        };
+        theme: {
+            light: string[];
+            dark: string[];
+        };
+    };
+    defaultVariants: {
+        size: "md";
+        theme: "light";
+    };
+}, "defaultVariants"> & {
+    variants: {
+        size: {
+            xs: string[];
+            sm: string[];
+            md: string[];
+            lg: string[];
+            xl: string[];
+        };
+        theme: {
+            light: string[];
+            dark: string[];
+        };
+    };
+    defaultVariants: Omit<{}, "size" | "theme"> & {
+        size: "md";
+        theme: "light";
+    };
+}, {
+    size: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    theme: {
+        light: string[];
+        dark: string[];
+    };
+}>;

package/src/stories/_storyCoordUtils.d.ts

@@ -1,8 +1,57 @@
 /** Pads numeric string: 3-digit int part + reserved sign column to avoid layout shift when sign flips. */
 export declare const formatPaddedNumber: (n: number, decimals: number) => string;
-export declare const cvaCoordCell: (props?: ({
-    variant?: "lng" | "lat" | "we" | "sn" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaStateDisplay: (props?: ({
-    expanded?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaCoordCell: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        variant: {
+            lng: string[];
+            lat: string[];
+            we: string[];
+            sn: string[];
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        variant: {
+            lng: string[];
+            lat: string[];
+            we: string[];
+            sn: string[];
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    variant: {
+        lng: string[];
+        lat: string[];
+        we: string[];
+        sn: string[];
+    };
+}>;
+export declare const cvaStateDisplay: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        expanded: {
+            true: string[];
+            false: string[];
+        };
+    };
+    defaultVariants: {
+        expanded: true;
+    };
+}, "defaultVariants"> & {
+    variants: {
+        expanded: {
+            true: string[];
+            false: string[];
+        };
+    };
+    defaultVariants: Omit<{}, "expanded"> & {
+        expanded: true;
+    };
+}, {
+    expanded: {
+        true: string[];
+        false: string[];
+    };
+}>;