@santi020k/lumen-react 3.0.0 → 4.0.0

package/dist/virtual-list-data.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { composeClassName, getLumenVirtualWindow, observeLumenVirtualWindow } from '@santi020k/lumen-core';
+const getRenderedIndexes = (visible, focusedKey, indexesByKey, count) => {
+    const focusedIndex = focusedKey === null ? -1 : indexesByKey.get(focusedKey) ?? -1;
+    const indexes = new Set(visible);
+    if (focusedIndex >= 0) {
+        const end = Math.min(count - 1, focusedIndex + 1);
+        for (let index = Math.max(0, focusedIndex - 1); index <= end; index += 1)
+            indexes.add(index);
+    }
+    return [...indexes].sort((first, second) => first - second);
+};
+export const VirtualListData = ({ className, getKey, glass = false, items, itemSize = 44, overscan = 4, renderItem, ref, role = 'list', style, tabIndex = 0, onFocusCapture, onBlurCapture, ...props }) => {
+    const rootRef = useRef(null);
+    const focusedElementRef = useRef(null);
+    const [focusedKey, setFocusedKey] = useState(null);
+    const entries = useMemo(() => {
+        const keys = new Set();
+        return Array.from(items, (item, index) => {
+            const key = String(getKey(item, index));
+            if (keys.has(key))
+                throw new Error(`VirtualList item keys must be unique: ${key}`);
+            keys.add(key);
+            return { item, key };
+        });
+    }, [getKey, items]);
+    const indexesByKey = useMemo(() => new Map(entries.map((entry, index) => [entry.key, index])), [entries]);
+    const store = useMemo(() => {
+        const initial = getLumenVirtualWindow(0, 0, items.length, itemSize, overscan);
+        return { initial, snapshot: initial };
+    }, [itemSize, items.length, overscan]);
+    const setRootRef = useCallback((element) => {
+        rootRef.current = element;
+        if (typeof ref === 'function')
+            ref(element);
+        else if (ref)
+            ref.current = element;
+    }, [ref]);
+    const subscribe = useCallback((notify) => {
+        const root = rootRef.current;
+        if (!root)
+            return () => undefined;
+        const observer = observeLumenVirtualWindow(root, {
+            itemCount: items.length,
+            itemSize,
+            overscan,
+            onChange: next => {
+                store.snapshot = next;
+                notify();
+            }
+        });
+        return observer.destroy;
+    }, [itemSize, items.length, overscan, store]);
+    const window = useSyncExternalStore(subscribe, () => store.snapshot, () => store.initial);
+    const indexes = getRenderedIndexes(window.indexes, focusedKey, indexesByKey, items.length);
+    // Browser DOM moves can drop focus during a keyed reorder; restore the retained control afterward.
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        const focused = focusedElementRef.current;
+        if (!root || !focused || root.ownerDocument.activeElement !== root.ownerDocument.body)
+            return;
+        if (focused.isConnected && root.contains(focused))
+            focused.focus({ preventScroll: true });
+        else
+            root.focus({ preventScroll: true });
+    }, [entries, window]);
+    return (_jsx("div", { ...props, className: composeClassName('ui-virtual-list', glass && 'ui-virtual-list--glass', glass === 'subtle' && 'ui-glass-subtle', glass === 'strong' && 'ui-glass-strong', className), "data-ui-virtual-list": true, "data-ui-virtual-list-mode": "data", onFocusCapture: event => {
+            onFocusCapture?.(event);
+            const target = event.target;
+            const row = target.closest('[data-ui-virtual-list-key]');
+            focusedElementRef.current = row ? target : null;
+            setFocusedKey(row?.dataset.uiVirtualListKey ?? null);
+        }, onBlurCapture: event => {
+            onBlurCapture?.(event);
+            if (event.currentTarget.contains(event.relatedTarget))
+                return;
+            focusedElementRef.current = null;
+            setFocusedKey(null);
+        }, ref: setRootRef, role: role, style: style, tabIndex: tabIndex, children: _jsx("div", { "data-ui-virtual-list-content": true, style: { height: window.totalSize, position: 'relative' }, children: indexes.map(index => {
+                const entry = entries[index];
+                if (!entry)
+                    return null;
+                return (_jsx("div", { "aria-posinset": role === 'list' ? index + 1 : undefined, "aria-setsize": role === 'list' ? items.length : undefined, "data-ui-virtual-list-index": index, "data-ui-virtual-list-key": entry.key, role: role === 'list' ? 'listitem' : undefined, style: { boxSizing: 'border-box', height: window.itemSize, insetInline: 0, position: 'absolute', top: index * window.itemSize }, children: renderItem(entry.item, index) }, entry.key));
+            }) }) }));
+};

package/dist/virtual-list.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { LumenGlassProp } from './components.js';
+import { type VirtualListDataProps } from './virtual-list-data.js';
+export interface VirtualListProps extends ComponentPropsWithRef<'div'> {
+    glass?: LumenGlassProp;
+    items?: never;
+    getKey?: never;
+    renderItem?: never;
+    itemSize?: number | string;
+    overscan?: number | string;
+}
+export declare const VirtualList: <T>(props: VirtualListProps | VirtualListDataProps<T>) => import("react").JSX.Element;
+export type { VirtualListDataProps } from './virtual-list-data.js';
+//# sourceMappingURL=virtual-list.d.ts.map

package/dist/virtual-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../src/virtual-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAKlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAEnF,MAAM,WAAW,gBAAiB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IACpE,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B;AA6CD,eAAO,MAAM,WAAW,GAAI,CAAC,EAAG,OAAO,gBAAgB,GAAG,oBAAoB,CAAC,CAAC,CAAC,gCAEhF,CAAA;AAED,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA"}

package/dist/virtual-list.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import { composeClassName, createLumenVirtualListController } from '@santi020k/lumen-core';
+import { VirtualListData } from './virtual-list-data.js';
+const MountedVirtualList = ({ className, glass = false, itemSize, overscan, ref, tabIndex = 0, ...props }) => {
+    const rootRef = useRef(null);
+    const setRootRef = useCallback((element) => {
+        rootRef.current = element;
+        if (typeof ref === 'function')
+            ref(element);
+        else if (ref)
+            ref.current = element;
+    }, [ref]);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const controller = createLumenVirtualListController(root);
+        return controller.destroy;
+    }, []);
+    return (_jsx("div", { className: composeClassName('ui-virtual-list', glass && 'ui-virtual-list--glass', glass === 'subtle' && 'ui-glass-subtle', glass === 'strong' && 'ui-glass-strong', className), "data-ui-item-size": itemSize, "data-ui-overscan": overscan, "data-ui-virtual-list": true, ref: setRootRef, tabIndex: tabIndex, ...props }));
+};
+export const VirtualList = (props) => (props.items !== undefined ? _jsx(VirtualListData, { ...props }) : _jsx(MountedVirtualList, { ...props }));

package/dist/visual-interactions.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { type LumenVisualEffectVariant, type LumenWorkflowDuration } from '@santi020k/lumen-core';
+export interface MotionGroupProps extends ComponentPropsWithoutRef<'div'> {
+    duration?: LumenWorkflowDuration;
+    enterExit?: boolean;
+}
+export declare const MotionGroup: ({ className, duration, enterExit, ...props }: MotionGroupProps) => import("react").JSX.Element;
+export interface VisualEffectProps extends ComponentPropsWithoutRef<'div'> {
+    animated?: boolean;
+    intensity?: number;
+    variant?: LumenVisualEffectVariant;
+}
+export declare const VisualEffect: ({ animated, className, intensity, style, variant, ...props }: VisualEffectProps) => import("react").JSX.Element;
+/** Wrap a chart to animate stable SVG marks without delaying accessible data. */
+export declare const ChartMotion: ({ className, duration, ...props }: Omit<MotionGroupProps, "enterExit">) => import("react").JSX.Element;
+//# sourceMappingURL=visual-interactions.d.ts.map

package/dist/visual-interactions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual-interactions.d.ts","sourceRoot":"","sources":["../src/visual-interactions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAiB,MAAM,OAAO,CAAA;AAGpE,OAAO,EAKL,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,EAE3B,MAAM,uBAAuB,CAAA;AAE9B,MAAM,WAAW,gBAAiB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACvE,QAAQ,CAAC,EAAE,qBAAqB,CAAA;IAChC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,8CAAkE,gBAAgB,gCAQ7G,CAAA;AAED,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,wBAAwB,CAAA;CACnC;AAID,eAAO,MAAM,YAAY,GAAI,8DAAqF,iBAAiB,gCAUlI,CAAA;AAED,iFAAiF;AACjF,eAAO,MAAM,WAAW,GAAI,mCAAgD,IAAI,CAAC,gBAAgB,EAAE,WAAW,CAAC,gCAQ9G,CAAA"}

package/dist/visual-interactions.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { bindLumenChartMotion, bindLumenMotionGroup, composeClassName, createLumenSpotlightController, normalizeLumenEffectIntensity } from '@santi020k/lumen-core';
+export const MotionGroup = ({ className, duration = 'standard', enterExit = true, ...props }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current)
+            return bindLumenMotionGroup(ref.current, { duration, enterExit });
+    }, [duration, enterExit]);
+    return _jsx("div", { ...props, ref: ref, className: composeClassName('ui-motion-group', className), "data-ui-motion-group": true });
+};
+export const VisualEffect = ({ animated = false, className, intensity = 0.5, style, variant = 'mesh', ...props }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (variant === 'spotlight' && ref.current)
+            return createLumenSpotlightController(ref.current);
+    }, [variant]);
+    const effectStyle = { ...style, '--ui-effect-intensity': normalizeLumenEffectIntensity(intensity) };
+    return _jsx("div", { ...props, ref: ref, className: composeClassName('ui-visual-effect', className), "data-ui-effect-animated": String(animated), "data-ui-visual-effect": variant, style: effectStyle });
+};
+/** Wrap a chart to animate stable SVG marks without delaying accessible data. */
+export const ChartMotion = ({ className, duration = 'standard', ...props }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current)
+            return bindLumenChartMotion(ref.current, duration);
+    }, [duration]);
+    return _jsx("div", { ...props, ref: ref, className: className, "data-ui-chart-motion": true });
+};

package/dist/world-map.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { type LumenWorldMapCountryGeometry, type LumenWorldMapMarker, type LumenWorldMapSelectDetail, type LumenWorldMapVariant } from '@santi020k/lumen-core/world-map';
+import { type LumenWorldMapZoomLabels } from '@santi020k/lumen-core/world-map-zoom';
+export interface WorldMapProps extends Omit<ComponentPropsWithoutRef<'figure'>, 'label'> {
+    initialView?: 'world' | 'highlighted';
+    zoomable?: boolean;
+    zoomLabels?: Partial<LumenWorldMapZoomLabels>;
+    animated?: boolean;
+    caption?: string;
+    countries: readonly LumenWorldMapCountryGeometry[];
+    defaultSelectedCountry?: string;
+    description?: string;
+    heading?: string;
+    highlightedCountries?: readonly string[];
+    interactive?: boolean;
+    label: string;
+    labels?: Readonly<Record<string, string>>;
+    listLabel?: string;
+    markers?: readonly LumenWorldMapMarker[];
+    onCountrySelect?: (detail: LumenWorldMapSelectDetail) => void;
+    onSelectedCountryChange?: (countryId: string) => void;
+    selectedCountry?: string;
+    variant?: LumenWorldMapVariant;
+}
+export declare const WorldMap: ({ animated, caption, className, countries: inputCountries, defaultSelectedCountry, description, heading, highlightedCountries, interactive, label, labels, listLabel, markers, onCountrySelect, onSelectedCountryChange, selectedCountry, variant, initialView, zoomable: zoomEnabled, zoomLabels, ...props }: WorldMapProps) => import("react").JSX.Element;
+//# sourceMappingURL=world-map.d.ts.map

package/dist/world-map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"world-map.d.ts","sourceRoot":"","sources":["../src/world-map.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAa,MAAM,OAAO,CAAA;AAIhE,OAAO,EAIL,KAAK,4BAA4B,EACjC,KAAK,mBAAmB,EACxB,KAAK,yBAAyB,EAC9B,KAAK,oBAAoB,EAM1B,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAEL,KAAK,uBAAuB,EAE7B,MAAM,sCAAsC,CAAA;AAsL7C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACtF,WAAW,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAA;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,SAAS,4BAA4B,EAAE,CAAA;IAClD,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,oBAAoB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACxC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAA;IACxC,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,yBAAyB,KAAK,IAAI,CAAA;IAC7D,uBAAuB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACrD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,oBAAoB,CAAA;CAC/B;AAED,eAAO,MAAM,QAAQ,GAAI,+SAsBtB,aAAa,gCAuHf,CAAA"}

package/dist/world-map.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { composeClassName } from '@santi020k/lumen-core/tokens';
+import { createLumenWorldMapSelectDetail, findLumenWorldMapCountry, LUMEN_WORLD_MAP_VIEW_BOX, normalizeLumenWorldMapCountries, normalizeLumenWorldMapHighlightedCountries, normalizeLumenWorldMapMarkers, projectLumenWorldMapCoordinate, resolveLumenWorldMapCountryLabel } from '@santi020k/lumen-core/world-map';
+import { initLumenWorldMapZoom, lumenWorldMapZoomLabels } from '@santi020k/lumen-core/world-map-zoom';
+import { Button } from './components.js';
+const ZoomControls = ({ enabled, labels }) => enabled && (_jsxs("div", { className: "ui-world-map__zoom-controls", children: [_jsx(Button, { "aria-label": labels.zoomOut, "data-ui-world-map-zoom": "out", disabled: true, size: "icon", variant: "outline", children: "\u2212" }), _jsx("output", { "aria-label": labels.level, "aria-live": "polite", "data-ui-world-map-zoom-status": true, children: "100%" }), _jsx(Button, { "aria-label": labels.zoomIn, "data-ui-world-map-zoom": "in", disabled: true, size: "icon", variant: "outline", children: "+" }), _jsx(Button, { "data-ui-world-map-zoom": "fit", disabled: true, size: "sm", variant: "outline", children: labels.fit }), _jsx(Button, { "data-ui-world-map-zoom": "reset", disabled: true, size: "sm", variant: "outline", children: labels.reset })] }));
+const MapViewport = ({ children, label, zoomable }) => (_jsx("div", { "aria-label": label, className: "ui-world-map__viewport", "data-ui-world-map-viewport": true, role: "region", tabIndex: zoomable ? 0 : undefined, children: children }));
+const SelectionOutline = ({ country }) => (_jsx("path", { "aria-hidden": "true", className: "ui-world-map__selection", d: country?.path ?? '' }));
+const CountryPath = ({ country, highlightPatternId, interactive, isHighlighted, isSelected, label, neutralPatternId, onHoverChange, onSelect, variant }) => (_jsx("path", { className: composeClassName('ui-world-map__country', isHighlighted && 'ui-world-map__country--highlighted', isSelected && 'ui-world-map__country--selected'), d: country.path, fill: variant === 'dotted' ? `url(#${isHighlighted ? highlightPatternId : neutralPatternId})` : undefined, fillRule: "evenodd", onClick: () => {
+        if (interactive)
+            onSelect(country.id);
+    }, onMouseEnter: () => {
+        onHoverChange(country.id);
+    }, onMouseLeave: () => {
+        onHoverChange(undefined);
+    }, children: _jsx("title", { children: label }) }));
+const MarkerPoint = ({ marker }) => {
+    const { x, y } = projectLumenWorldMapCoordinate(marker.longitude, marker.latitude);
+    return (_jsx("circle", { className: "ui-world-map__marker", cx: x, cy: y, r: 4, children: _jsx("title", { children: marker.label }) }));
+};
+const MarkerLayer = ({ markers }) => markers.length > 0 && (_jsx("g", { "aria-hidden": "true", className: "ui-world-map__markers", children: markers.map(marker => _jsx(MarkerPoint, { marker: marker }, marker.id)) }));
+const MarkerList = ({ markers }) => markers.length > 0 && (_jsx("ul", { "aria-label": "Map markers", className: "ui-sr-only", children: markers.map(marker => _jsx("li", { children: marker.label }, marker.id)) }));
+const DotPatterns = ({ highlightPatternId, neutralPatternId }) => (_jsxs("defs", { children: [_jsx("pattern", { height: 4, id: neutralPatternId, patternUnits: "userSpaceOnUse", width: 4, children: _jsx("circle", { className: composeClassName('ui-world-map__dot', 'ui-world-map__dot--neutral'), cx: 2, cy: 2, r: 1.1 }) }), _jsx("pattern", { height: 4, id: highlightPatternId, patternUnits: "userSpaceOnUse", width: 4, children: _jsx("circle", { className: composeClassName('ui-world-map__dot', 'ui-world-map__dot--highlight'), cx: 2, cy: 2, r: 1.1 }) })] }));
+const Inspection = ({ country, labels }) => country && (_jsx("span", { className: "ui-world-map__inspection", children: resolveLumenWorldMapCountryLabel(country, labels) }));
+const MapCaption = ({ caption }) => caption && _jsx("figcaption", { children: caption });
+const SelectControl = ({ countries, labelOverrides, listLabel, onSelect, selectedId }) => (_jsxs("label", { className: "ui-world-map__select-label", children: [_jsx("span", { children: listLabel }), _jsxs("select", { className: "ui-select ui-world-map__select", onChange: event => {
+                onSelect(event.currentTarget.value);
+            }, value: selectedId ?? '', children: [_jsx("option", { value: "", children: listLabel }), countries.map(country => (_jsx("option", { value: country.id, children: resolveLumenWorldMapCountryLabel(country, labelOverrides) }, country.id)))] })] }));
+const HighlightedList = ({ countries, highlightedIds, labelOverrides }) => highlightedIds.length > 0 && (_jsx("ul", { "aria-label": "Highlighted countries", className: "ui-world-map__highlights", children: highlightedIds.map(id => {
+        const country = findLumenWorldMapCountry(countries, id);
+        return country && _jsx("li", { children: resolveLumenWorldMapCountryLabel(country, labelOverrides) }, id);
+    }) }));
+const MapHeading = ({ description, heading }) => (heading || description) && (_jsxs("header", { className: "ui-world-map__heading", children: [heading && _jsx("h3", { children: heading }), description && _jsx("p", { children: description })] }));
+const isCurrentCountry = (country, id) => country?.id === id;
+export const WorldMap = ({ animated = true, caption, className, countries: inputCountries, defaultSelectedCountry, description, heading, highlightedCountries, interactive = true, label, labels, listLabel = 'Choose a country', markers, onCountrySelect, onSelectedCountryChange, selectedCountry, variant = 'dotted', initialView, zoomable: zoomEnabled, zoomLabels, ...props }) => {
+    const zoomable = zoomEnabled !== false;
+    const rootRef = useRef(null);
+    const zoomText = { ...lumenWorldMapZoomLabels, ...zoomLabels };
+    useEffect(() => {
+        const root = rootRef.current;
+        const abort = new AbortController();
+        if (root)
+            initLumenWorldMapZoom(root, abort.signal);
+        return () => {
+            abort.abort();
+        };
+    }, [zoomable, initialView]);
+    const countries = useMemo(() => normalizeLumenWorldMapCountries(inputCountries), [inputCountries]);
+    const instanceId = useId().replaceAll(':', '');
+    const neutralPatternId = `${instanceId}-dot-neutral`;
+    const highlightPatternId = `${instanceId}-dot-highlight`;
+    const [internalSelectedId, setInternalSelectedId] = useState(defaultSelectedCountry);
+    const [hoveredId, setHoveredId] = useState(undefined);
+    const selectedId = findLumenWorldMapCountry(countries, selectedCountry ?? internalSelectedId)?.id;
+    const highlightedIds = useMemo(() => normalizeLumenWorldMapHighlightedCountries(highlightedCountries, countries), [highlightedCountries, countries]);
+    const highlightedSet = useMemo(() => new Set(highlightedIds), [highlightedIds]);
+    useEffect(() => {
+        const button = rootRef.current?.querySelector('[data-ui-world-map-zoom="fit"]');
+        if (!button)
+            return;
+        button.disabled = highlightedIds.length === 0;
+        button.classList.toggle('ui-button--disabled', button.disabled);
+    }, [highlightedIds, zoomable]);
+    const normalizedMarkers = useMemo(() => normalizeLumenWorldMapMarkers(markers), [markers]);
+    const activeId = hoveredId ?? selectedId;
+    const activeCountry = findLumenWorldMapCountry(countries, activeId);
+    const { height: viewBoxHeight, width: viewBoxWidth } = LUMEN_WORLD_MAP_VIEW_BOX;
+    const selectCountry = (countryId) => {
+        const country = findLumenWorldMapCountry(countries, countryId);
+        if (isCurrentCountry(country, selectedId))
+            return;
+        if (selectedCountry === undefined)
+            setInternalSelectedId(country?.id);
+        onSelectedCountryChange?.(country?.id ?? '');
+        if (country)
+            onCountrySelect?.(createLumenWorldMapSelectDetail(country, highlightedSet, labels));
+    };
+    return (_jsxs("figure", { ...props, ref: rootRef, className: composeClassName('ui-world-map', className), "data-initial-view": initialView, "data-animated": animated, "data-interactive": interactive, "data-variant": variant, children: [_jsx(MapHeading, { description: description, heading: heading }), _jsx(ZoomControls, { enabled: zoomable, labels: zoomText }), _jsxs("div", { className: "ui-world-map__frame", children: [_jsx(MapViewport, { label: `${zoomText.viewport}: ${label}`, zoomable: zoomable, children: _jsxs("svg", { "aria-label": label, className: "ui-world-map__plot", role: "img", viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`, children: [variant === 'dotted' && (_jsx(DotPatterns, { highlightPatternId: highlightPatternId, neutralPatternId: neutralPatternId })), _jsx("g", { "aria-hidden": "true", className: "ui-world-map__countries", children: countries.map(country => (_jsx(CountryPath, { country: country, highlightPatternId: highlightPatternId, interactive: interactive, isHighlighted: highlightedSet.has(country.id), isSelected: selectedId === country.id, label: resolveLumenWorldMapCountryLabel(country, labels), neutralPatternId: neutralPatternId, onHoverChange: setHoveredId, onSelect: selectCountry, variant: variant }, country.id))) }), _jsx(MarkerLayer, { markers: normalizedMarkers }), _jsx(SelectionOutline, { country: findLumenWorldMapCountry(countries, selectedId) })] }) }), _jsx(Inspection, { country: activeCountry, labels: labels })] }), interactive && (_jsx(SelectControl, { countries: countries, labelOverrides: labels, listLabel: listLabel, onSelect: selectCountry, selectedId: selectedId })), _jsx(HighlightedList, { countries: countries, highlightedIds: highlightedIds, labelOverrides: labels }), _jsx(MarkerList, { markers: normalizedMarkers }), _jsx(MapCaption, { caption: caption })] }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-react",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -9,7 +9,8 @@
   "sideEffects": [
     "./layers.css",
     "./styles.css",
-    "./styles/critical.css"
+    "./styles/critical.css",
+    "./styles/data-table-view.css"
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -30,6 +31,83 @@
     "./icons": {
       "types": "./dist/icons.d.ts",
       "import": "./dist/icons.js"
+    },
+    "./components/attachments": {
+      "types": "./dist/attachments.d.ts",
+      "import": "./dist/attachments.js"
+    },
+    "./components/bullet-chart": {
+      "types": "./dist/bullet-chart.d.ts",
+      "import": "./dist/bullet-chart.js"
+    },
+    "./components/comparison-chart": {
+      "types": "./dist/comparison-chart.d.ts",
+      "import": "./dist/comparison-chart.js"
+    },
+    "./components/data-table": {
+      "types": "./dist/data-table.d.ts",
+      "import": "./dist/data-table.js"
+    },
+    "./components/date-range-calendar": {
+      "types": "./dist/date-range-calendar.d.ts",
+      "import": "./dist/date-range-calendar.js"
+    },
+    "./components/date-range-input": {
+      "types": "./dist/date-range-input.d.ts",
+      "import": "./dist/date-range-input.js"
+    },
+    "./components/expanded-charts": {
+      "types": "./dist/expanded-charts.d.ts",
+      "import": "./dist/expanded-charts.js"
+    },
+    "./components/image-comparison": {
+      "types": "./dist/image-comparison.d.ts",
+      "import": "./dist/image-comparison.js"
+    },
+    "./components/interval-charts": {
+      "types": "./dist/interval-charts.d.ts",
+      "import": "./dist/interval-charts.js"
+    },
+    "./components/virtual-list": {
+      "types": "./dist/virtual-list.d.ts",
+      "import": "./dist/virtual-list.js"
+    },
+    "./components/world-map": {
+      "types": "./dist/world-map.d.ts",
+      "import": "./dist/world-map.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks.d.ts",
+      "import": "./dist/hooks.js"
+    },
+    "./components/data-table-view": {
+      "types": "./dist/data-table-view.d.ts",
+      "import": "./dist/data-table-view.js"
+    },
+    "./styles/data-table-view.css": "./styles/data-table-view.css",
+    "./forms": {
+      "types": "./dist/form-workflow.d.ts",
+      "import": "./dist/form-workflow.js"
+    },
+    "./components/device-frame": {
+      "types": "./dist/device-frame.d.ts",
+      "import": "./dist/device-frame.js"
+    },
+    "./motion": {
+      "types": "./dist/motion.d.ts",
+      "import": "./dist/motion.js"
+    },
+    "./components/data-table-saved-views": {
+      "types": "./dist/data-table-saved-views.d.ts",
+      "import": "./dist/data-table-saved-views.js"
+    },
+    "./components/media-viewport": {
+      "types": "./dist/media-viewport.d.ts",
+      "import": "./dist/media-viewport.js"
+    },
+    "./components/media-selection": {
+      "types": "./dist/media-selection.d.ts",
+      "import": "./dist/media-selection.js"
     }
   },
   "files": [
@@ -45,22 +123,31 @@
     "lumen": "./bin/lumen.mjs"
   },
   "dependencies": {
-    "@santi020k/lumen": "^3.0.0",
-    "@santi020k/lumen-core": "^3.0.0",
+    "@santi020k/lumen": "^4.0.0",
+    "@santi020k/lumen-core": "^4.0.0",
+    "@tanstack/react-table": "9.2.4",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@types/react": "~19.2.4",
-    "@types/react-dom": "~19.2.5",
-    "@vitest/coverage-v8": "^5.0.1",
+    "@types/react": "~19.2.18",
+    "@types/react-dom": "~19.2.7",
+    "@vitest/coverage-v8": "^5.0.3",
+    "esbuild": "^0.28.2",
     "jsdom": "^30.1.1",
+    "motion": "14.0.0",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "typescript": "~6.0.3",
-    "vitest": "^5.0.1"
+    "vitest": "^5.0.3"
   },
   "peerDependencies": {
-    "react": ">=19"
+    "react": ">=19",
+    "motion": "^14.0.0"
+  },
+  "peerDependenciesMeta": {
+    "motion": {
+      "optional": true
+    }
   },
   "engines": {
     "node": ">=22.12.0"
@@ -88,13 +175,14 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "tsc -p tsconfig.build.json && node scripts/minify-build.mjs",
     "dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "vitest run --config ../../vitest.config.ts --project react",
     "test:coverage": "vitest run --config ../../vitest.config.ts --project react --coverage",
     "lint": "eslint . --no-warn-ignored --max-warnings=0",
     "lint:fix": "eslint . --fix --no-warn-ignored --max-warnings=0",
-    "clean": "rm -rf dist coverage"
+    "clean": "rm -rf dist coverage",
+    "measure:selective-imports": "node scripts/measure-selective-imports.mjs"
   }
 }