@ztwoint/z-ui 0.1.121 → 0.1.123

package/dist/types/components/chart-card/builders/bar-chart-builder.d.ts

@@ -1,3 +1,3 @@
 import type { EChartsOption } from 'echarts';
 import type { BarChartConfig, ChartData } from '../chart-card.config.types';
-export declare function buildBarChartOptions(config: BarChartConfig, data: ChartData): EChartsOption;
+export declare function buildBarChartOptions(config: BarChartConfig, data: ChartData, scrollable?: boolean, scrollableLegend?: boolean): EChartsOption;

package/dist/types/components/chart-card/builders/chart-builder-factory.d.ts

@@ -1,5 +1,5 @@
 import type { EChartsOption } from 'echarts';
 import type { ChartConfig, ChartData, ChartType } from '../chart-card.config.types';
-export declare function buildChartOptions(config: ChartConfig, data: ChartData): EChartsOption;
+export declare function buildChartOptions(config: ChartConfig, data: ChartData, scrollable?: boolean, scrollableLegend?: boolean): EChartsOption;
 export declare function isChartTypeSupported(type: string): type is ChartType;
 export declare const registeredChartTypes: readonly ChartType[];

package/dist/types/components/chart-card/builders/line-chart-builder.d.ts

@@ -1,3 +1,3 @@
 import type { EChartsOption } from 'echarts';
 import type { ChartData, LineChartConfig } from '../chart-card.config.types';
-export declare function buildLineChartOptions(config: LineChartConfig, data: ChartData): EChartsOption;
+export declare function buildLineChartOptions(config: LineChartConfig, data: ChartData, scrollable?: boolean, scrollableLegend?: boolean): EChartsOption;

package/dist/types/components/chart-card/builders/pie-chart-builder.d.ts

@@ -1,3 +1,3 @@
 import type { EChartsOption } from 'echarts';
 import type { ChartData, PieChartConfig } from '../chart-card.config.types';
-export declare function buildPieChartOptions(config: PieChartConfig, data: ChartData): EChartsOption;
+export declare function buildPieChartOptions(config: PieChartConfig, data: ChartData, _scrollable?: boolean, scrollableLegend?: boolean): EChartsOption;

package/dist/types/components/chart-card/chart-card.config.types.d.ts

@@ -29,6 +29,18 @@ export interface ChartOptions {
         position?: 'top' | 'bottom' | 'left' | 'right';
         align?: 'left' | 'center' | 'right';
         orient?: 'horizontal' | 'vertical';
+        scrollable?: boolean;
+        pageButtonItemGap?: number;
+        pageButtonGap?: number;
+        pageButtonPosition?: 'start' | 'end';
+        pageFormatter?: string;
+        pageIconColor?: string;
+        pageIconInactiveColor?: string;
+        pageIconSize?: number;
+        pageTextStyle?: {
+            color?: string;
+            fontSize?: number;
+        };
     };
     tooltip?: {
         show?: boolean;
@@ -67,6 +79,21 @@ export interface ChartOptions {
         showLabel?: boolean;
         showLabelLine?: boolean;
     };
+    scrollable?: {
+        enabled?: boolean;
+        type?: 'slider' | 'inside' | 'both';
+        start?: number;
+        end?: number;
+        height?: number;
+        width?: number;
+        position?: 'bottom' | 'top' | 'left' | 'right';
+        showDetail?: boolean;
+        showDataShadow?: boolean;
+        realtime?: boolean;
+        filterMode?: 'filter' | 'empty' | 'none';
+        xAxisIndex?: number[];
+        yAxisIndex?: number[];
+    };
 }
 interface BaseChartConfig {
     name: string;

package/dist/types/components/chart-card/chart-card.d.ts

@@ -1,2 +1,2 @@
 import type { ChartCardProps } from './chart-card.types';
-export declare function ChartCard({ config, data, loading, error, className, style, chartProps, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartCard({ config, data, loading, error, className, style, chartProps, scrollable, scrollableLegend, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/chart-card/chart-card.types.d.ts

@@ -9,4 +9,6 @@ export interface ChartCardProps {
     className?: string;
     style?: CSSProperties;
     chartProps?: Omit<EChartsReactProps, 'option'>;
+    scrollable?: boolean;
+    scrollableLegend?: boolean;
 }

package/dist/types/components/chart-card/config/defaults.d.ts

@@ -44,6 +44,34 @@ export declare function buildLegendConfig(data: string[], hasTitle?: boolean, op
     };
     itemWidth: number;
     itemHeight: number;
+} | {
+    type: string;
+    pageButtonItemGap: number;
+    pageButtonGap: number;
+    pageButtonPosition: "end" | "start";
+    pageFormatter: string;
+    pageIconColor: string;
+    pageIconInactiveColor: string;
+    pageIconSize: number;
+    pageTextStyle: {
+        color: string;
+        fontSize: number;
+    };
+    data: string[];
+    top: string | number;
+    bottom: string | number | undefined;
+    left: string | number;
+    right: string | number | undefined;
+    orient: "horizontal" | "vertical";
+    itemGap: number;
+    padding: number[];
+    textStyle: {
+        fontSize: number;
+        fontFamily: string;
+        color: "#000000";
+    };
+    itemWidth: number;
+    itemHeight: number;
 } | undefined;
 export declare function buildAxisLabelConfig(rotate?: number): {
     rotate?: number | undefined;

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.121",
+  "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"
   }
-}
+}