najm-kit 2.11.22 → 2.12.0

package/dist/json.mjs

@@ -1,6 +1,8 @@
-export { NTableJson } from './chunk-5JVFMOLI.mjs';
-import { Button } from './chunk-M5VGBZ7R.mjs';
-import { cn } from './chunk-LK3SMYUP.mjs';
+export { NTableJson } from './chunk-VZXMMC72.mjs';
+import './chunk-QJ22WAQY.mjs';
+import { Button } from './chunk-WHGRN7PP.mjs';
+import './chunk-TZRTOQCC.mjs';
+import { cn } from './chunk-5UY7U2ED.mjs';
 import './chunk-TFHWLE7N.mjs';
 import { useMemo, useRef, useCallback } from 'react';
 import CodeMirror from '@uiw/react-codemirror';

package/dist/location/google.d.ts

@@ -0,0 +1,14 @@
+import { G as GoogleLocationAdapterOptions, N as NLocationMapAdapter, a as NLocationGeocoderAdapter } from '../types-BQBx0RZd.js';
+import 'react';
+import 'react-hook-form';
+import 'zod';
+import 'culori';
+import '../NIcon-D73-C51g.js';
+import '../formFill-CQkTA0JS.js';
+import 'class-variance-authority/types';
+import '@radix-ui/react-slider';
+
+declare function createGoogleLocationAdapter(options: GoogleLocationAdapterOptions): NLocationMapAdapter;
+declare function createGooglePlacesGeocoder(options: GoogleLocationAdapterOptions): NLocationGeocoderAdapter;
+
+export { createGoogleLocationAdapter, createGooglePlacesGeocoder };

package/dist/location/google.mjs

@@ -0,0 +1,184 @@
+'use client';
+import { locationMarkerUrl } from '../chunk-A34LRQYI.mjs';
+import { cn } from '../chunk-5UY7U2ED.mjs';
+import React from 'react';
+import { importLibrary, setOptions } from '@googlemaps/js-api-loader';
+import { jsx } from 'react/jsx-runtime';
+
+var configuredKey = null;
+function configure(options) {
+  if (configuredKey && configuredKey !== options.apiKey) throw new Error("Google Maps is already configured");
+  if (!configuredKey) {
+    setOptions({
+      key: options.apiKey,
+      v: "weekly",
+      language: options.language,
+      region: options.region,
+      authReferrerPolicy: "origin",
+      mapIds: options.mapId ? [options.mapId] : void 0
+    });
+    configuredKey = options.apiKey;
+  }
+}
+function createMarkerContent() {
+  const image = document.createElement("img");
+  image.src = locationMarkerUrl;
+  image.alt = "";
+  image.width = 40;
+  image.height = 50;
+  image.draggable = false;
+  image.setAttribute("aria-hidden", "true");
+  return image;
+}
+function createMapComponent(options) {
+  return function GoogleLocationMap({ value, initialCenter, initialZoom, onChange, onReady, onLoadingChange, onError, onControlsReady, reducedMotion, className }) {
+    const elementRef = React.useRef(null);
+    const mapRef = React.useRef(null);
+    const markerRef = React.useRef(null);
+    const setMarkerRef = React.useRef(null);
+    const onChangeRef = React.useRef(onChange);
+    const valueRef = React.useRef(value);
+    onChangeRef.current = onChange;
+    valueRef.current = value;
+    React.useEffect(() => {
+      let active = true;
+      let listeners = [];
+      onLoadingChange?.(true);
+      void (async () => {
+        try {
+          configure(options);
+          const [{ Map: Map2 }, { AdvancedMarkerElement }] = await Promise.all([importLibrary("maps"), importLibrary("marker")]);
+          if (!active || !elementRef.current) return;
+          const currentValue = valueRef.current;
+          const center = currentValue ?? initialCenter;
+          const map = new Map2(elementRef.current, {
+            center: { lat: center.latitude, lng: center.longitude },
+            zoom: initialZoom,
+            mapId: options.mapId ?? "DEMO_MAP_ID",
+            disableDefaultUI: true,
+            clickableIcons: false,
+            gestureHandling: "greedy"
+          });
+          const setMarker = (latitude, longitude) => {
+            if (!markerRef.current) {
+              const marker = new AdvancedMarkerElement({ map, position: { lat: latitude, lng: longitude }, content: createMarkerContent(), gmpDraggable: true, title: "Selected location" });
+              listeners.push(marker.addListener("dragend", () => {
+                const position = marker.position;
+                const lat = typeof position?.lat === "function" ? position.lat() : position?.lat;
+                const lng = typeof position?.lng === "function" ? position.lng() : position?.lng;
+                if (typeof lat === "number" && typeof lng === "number") onChangeRef.current({ latitude: lat, longitude: lng });
+              }));
+              markerRef.current = marker;
+            } else markerRef.current.position = { lat: latitude, lng: longitude };
+          };
+          setMarkerRef.current = setMarker;
+          if (currentValue) setMarker(currentValue.latitude, currentValue.longitude);
+          listeners.push(map.addListener("click", (event) => {
+            const point = event.latLng;
+            if (!point) return;
+            setMarker(point.lat(), point.lng());
+            onChangeRef.current({ latitude: point.lat(), longitude: point.lng() });
+          }));
+          mapRef.current = map;
+          onControlsReady?.({
+            zoomIn: () => map.setZoom((map.getZoom() ?? initialZoom) + 1),
+            zoomOut: () => map.setZoom((map.getZoom() ?? initialZoom) - 1),
+            recenter: (point) => map.panTo({ lat: point.latitude, lng: point.longitude })
+          });
+          onLoadingChange?.(false);
+          onReady?.();
+        } catch {
+          if (!active) return;
+          onLoadingChange?.(false);
+          onError?.(new Error("Google map unavailable"));
+        }
+      })();
+      return () => {
+        active = false;
+        listeners.forEach((listener) => listener.remove());
+        listeners = [];
+        if (markerRef.current) markerRef.current.map = null;
+        markerRef.current = null;
+        setMarkerRef.current = null;
+        mapRef.current = null;
+        onControlsReady?.(null);
+      };
+    }, []);
+    React.useEffect(() => {
+      if (!value && markerRef.current) {
+        markerRef.current.map = null;
+        markerRef.current = null;
+      } else if (value && mapRef.current) {
+        setMarkerRef.current?.(value.latitude, value.longitude);
+        mapRef.current.panTo({ lat: value.latitude, lng: value.longitude });
+      }
+    }, [value]);
+    return /* @__PURE__ */ jsx("div", { ref: elementRef, "data-location-map": "google", className: cn("absolute inset-0 z-0 h-full min-h-72 w-full", reducedMotion && "[&_*]:!transition-none", className) });
+  };
+}
+function createGoogleLocationAdapter(options) {
+  return { id: "google", Map: createMapComponent(options) };
+}
+function createGooglePlacesGeocoder(options) {
+  let token = null;
+  const predictions = /* @__PURE__ */ new Map();
+  return {
+    id: "google-places",
+    async search(query, context) {
+      if (context.signal.aborted) return [];
+      configure(options);
+      const { AutocompleteSessionToken, AutocompleteSuggestion } = await importLibrary("places");
+      token ??= new AutocompleteSessionToken();
+      const response = await AutocompleteSuggestion.fetchAutocompleteSuggestions({
+        input: query,
+        sessionToken: token,
+        language: context.language,
+        locationBias: { lat: context.center.latitude, lng: context.center.longitude }
+      });
+      if (context.signal.aborted) return [];
+      predictions.clear();
+      return response.suggestions.flatMap((suggestion) => {
+        const prediction = suggestion.placePrediction;
+        if (!prediction) return [];
+        predictions.set(prediction.placeId, prediction);
+        return [{ id: prediction.placeId, providerId: prediction.placeId, label: prediction.mainText?.toString() ?? prediction.text.toString(), description: prediction.secondaryText?.toString() }];
+      });
+    },
+    async resolve(candidate, signal) {
+      const prediction = predictions.get(candidate.providerId ?? candidate.id);
+      if (!prediction) throw new Error("Place prediction expired");
+      const place = prediction.toPlace();
+      await place.fetchFields({ fields: ["formattedAddress", "location", "displayName"] });
+      token = null;
+      predictions.clear();
+      if (signal.aborted || !place.location) throw new DOMException("Aborted", "AbortError");
+      return {
+        ...candidate,
+        label: place.formattedAddress || place.displayName || candidate.label,
+        coordinates: { latitude: place.location.lat(), longitude: place.location.lng() }
+      };
+    },
+    async reverse(coordinates, signal) {
+      configure(options);
+      const { Geocoder } = await importLibrary("geocoding");
+      if (signal.aborted) return null;
+      const response = await new Geocoder().geocode({
+        location: { lat: coordinates.latitude, lng: coordinates.longitude }
+      });
+      if (signal.aborted || !response.results[0]) return null;
+      const result = response.results[0];
+      return {
+        id: result.place_id,
+        providerId: result.place_id,
+        label: result.formatted_address,
+        coordinates
+      };
+    },
+    resetSession() {
+      token = null;
+      predictions.clear();
+    }
+  };
+}
+
+export { createGoogleLocationAdapter, createGooglePlacesGeocoder };

package/dist/location/index.d.ts

@@ -0,0 +1,33 @@
+import React__default from 'react';
+import { K as NLocationInputProps, J as NLocationDialogProps, V as NLocationProviderProps, z as NCoordinates, Q as NLocationLabels, u as FormLocationInputProps, W as NLocationValue } from '../types-BQBx0RZd.js';
+export { G as GoogleLocationAdapterOptions, L as LeafletLocationAdapterOptions, B as NLocationCandidate, H as NLocationClassNames, a as NLocationGeocoderAdapter, N as NLocationMapAdapter, ad as NLocationMapControls, U as NLocationMapProps, ae as NLocationSearchContext } from '../types-BQBx0RZd.js';
+import 'react-hook-form';
+import 'zod';
+import 'culori';
+import '../NIcon-D73-C51g.js';
+import '../formFill-CQkTA0JS.js';
+import 'class-variance-authority/types';
+import '@radix-ui/react-slider';
+
+declare const NLocationInput: React__default.ForwardRefExoticComponent<NLocationInputProps & React__default.RefAttributes<HTMLInputElement>>;
+
+declare function NLocationDialog({ open, value, onOpenChange, onConfirm, labels: labelOverrides, classNames }: NLocationDialogProps): React__default.JSX.Element;
+
+interface NLocationContextValue {
+    adapter: NLocationProviderProps["adapter"];
+    geocoder: NLocationProviderProps["geocoder"];
+    defaultCenter: NCoordinates;
+    defaultZoom: number;
+    labels: NLocationLabels;
+    searchMode: "submit" | "autocomplete";
+    unavailableReason?: string;
+}
+declare function NLocationProvider({ children, adapter, geocoder, defaultCenter, defaultZoom, labels, searchMode, unavailableReason, }: NLocationProviderProps): React__default.JSX.Element;
+declare function useNLocationProvider(): NLocationContextValue;
+
+declare function FormLocationInput({ name, formLabel, formDescription, required, disabled, readOnly, hidden, background, classNames, onChange: consumerOnChange, ...props }: FormLocationInputProps): React__default.JSX.Element;
+
+declare function isCompleteCoordinatePair(value: Pick<NLocationValue, "latitude" | "longitude">): boolean;
+declare function normalizeLocationValue(value?: Partial<NLocationValue> | null): NLocationValue;
+
+export { FormLocationInput, FormLocationInputProps, NCoordinates, NLocationDialog, NLocationDialogProps, NLocationInput, NLocationInputProps, NLocationLabels, NLocationProvider, NLocationProviderProps, NLocationValue, isCompleteCoordinatePair, normalizeLocationValue, useNLocationProvider };

package/dist/location/index.mjs

@@ -0,0 +1,9 @@
+'use client';
+export { FormLocationInput, NLocationDialog, NLocationInput, NLocationProvider, isCompleteCoordinatePair, normalizeLocationValue, useNLocationProvider } from '../chunk-GYPQLOQ5.mjs';
+import '../chunk-FZX3DONZ.mjs';
+import '../chunk-BFFTC7LD.mjs';
+import '../chunk-QJ22WAQY.mjs';
+import '../chunk-WHGRN7PP.mjs';
+import '../chunk-TZRTOQCC.mjs';
+import '../chunk-5UY7U2ED.mjs';
+import '../chunk-TFHWLE7N.mjs';

package/dist/location/leaflet.d.ts

@@ -0,0 +1,13 @@
+import { L as LeafletLocationAdapterOptions, N as NLocationMapAdapter } from '../types-BQBx0RZd.js';
+import 'react';
+import 'react-hook-form';
+import 'zod';
+import 'culori';
+import '../NIcon-D73-C51g.js';
+import '../formFill-CQkTA0JS.js';
+import 'class-variance-authority/types';
+import '@radix-ui/react-slider';
+
+declare function createLeafletLocationAdapter(options: LeafletLocationAdapterOptions): NLocationMapAdapter;
+
+export { createLeafletLocationAdapter };

package/dist/location/leaflet.mjs

@@ -0,0 +1,168 @@
+'use client';
+import { locationMarkerUrl } from '../chunk-A34LRQYI.mjs';
+import { cn } from '../chunk-5UY7U2ED.mjs';
+import React from 'react';
+import 'leaflet/dist/leaflet.css';
+import { jsx } from 'react/jsx-runtime';
+
+var leafletPromise = null;
+function loadLeaflet() {
+  leafletPromise ??= import('leaflet');
+  return leafletPromise;
+}
+function createMapComponent(options) {
+  return function LeafletLocationMap({ value, initialCenter, initialZoom, onChange, onReady, onLoadingChange, onError, onControlsReady, reducedMotion, className }) {
+    const elementRef = React.useRef(null);
+    const mapRef = React.useRef(null);
+    const markerRef = React.useRef(null);
+    const setMarkerRef = React.useRef(null);
+    const onChangeRef = React.useRef(onChange);
+    const valueRef = React.useRef(value);
+    onChangeRef.current = onChange;
+    valueRef.current = value;
+    React.useEffect(() => {
+      const element = elementRef.current;
+      if (!element || mapRef.current) return;
+      let active = true;
+      let map = null;
+      let resizeFrame = null;
+      let resizeObserver = null;
+      const settleTimers = [];
+      const scheduleResize = () => {
+        if (!active || !map) return;
+        if (resizeFrame !== null) cancelAnimationFrame(resizeFrame);
+        resizeFrame = requestAnimationFrame(() => {
+          resizeFrame = null;
+          if (!active || !map || mapRef.current !== map || !element.isConnected) return;
+          map.invalidateSize({ animate: false, pan: false });
+        });
+      };
+      onLoadingChange?.(true);
+      void (async () => {
+        try {
+          const L = await loadLeaflet();
+          if (!active || !element.isConnected) return;
+          const currentValue = valueRef.current;
+          const center = currentValue ?? initialCenter;
+          const markerIcon = L.icon({
+            iconUrl: locationMarkerUrl,
+            iconSize: [40, 50],
+            iconAnchor: [20, 46]
+          });
+          map = L.map(element, {
+            center: [center.latitude, center.longitude],
+            zoom: initialZoom,
+            zoomControl: false,
+            attributionControl: true,
+            keyboard: false,
+            fadeAnimation: !reducedMotion,
+            zoomAnimation: !reducedMotion,
+            markerZoomAnimation: !reducedMotion
+          });
+          mapRef.current = map;
+          map.attributionControl.setPrefix(false);
+          map.attributionControl.setPosition("topright");
+          L.tileLayer(options.tileUrl, {
+            attribution: options.attribution,
+            maxZoom: options.tileOptions?.maxZoom ?? 19,
+            minZoom: options.tileOptions?.minZoom ?? 1
+          }).addTo(map);
+          const setMarker = (latitude, longitude) => {
+            if (!map) return;
+            if (!markerRef.current) {
+              const marker = L.marker([latitude, longitude], { draggable: true, icon: markerIcon }).addTo(map);
+              marker.on("dragend", () => {
+                const point = marker.getLatLng();
+                onChangeRef.current({ latitude: point.lat, longitude: point.lng });
+              });
+              markerRef.current = marker;
+            } else {
+              markerRef.current.setLatLng([latitude, longitude]);
+            }
+          };
+          setMarkerRef.current = setMarker;
+          if (currentValue) setMarker(currentValue.latitude, currentValue.longitude);
+          map.on("click", (event) => {
+            setMarker(event.latlng.lat, event.latlng.lng);
+            onChangeRef.current({ latitude: event.latlng.lat, longitude: event.latlng.lng });
+          });
+          onControlsReady?.({
+            zoomIn: () => active && mapRef.current === map && map?.zoomIn(),
+            zoomOut: () => active && mapRef.current === map && map?.zoomOut(),
+            recenter: (point) => {
+              if (active && mapRef.current === map) {
+                map?.setView([point.latitude, point.longitude], map.getZoom(), { animate: !reducedMotion });
+              }
+            }
+          });
+          if (typeof ResizeObserver !== "undefined") {
+            resizeObserver = new ResizeObserver(scheduleResize);
+            resizeObserver.observe(element);
+          }
+          window.addEventListener("resize", scheduleResize);
+          scheduleResize();
+          for (const delay of [80, 200, 400]) {
+            settleTimers.push(window.setTimeout(scheduleResize, delay));
+          }
+          onLoadingChange?.(false);
+          onReady?.();
+        } catch {
+          if (!active) return;
+          active = false;
+          if (resizeFrame !== null) cancelAnimationFrame(resizeFrame);
+          settleTimers.forEach((timer) => window.clearTimeout(timer));
+          resizeObserver?.disconnect();
+          window.removeEventListener("resize", scheduleResize);
+          map?.off();
+          map?.remove();
+          map = null;
+          mapRef.current = null;
+          setMarkerRef.current = null;
+          onLoadingChange?.(false);
+          onError?.(new Error("Leaflet map unavailable"));
+        }
+      })();
+      return () => {
+        active = false;
+        if (resizeFrame !== null) cancelAnimationFrame(resizeFrame);
+        settleTimers.forEach((timer) => window.clearTimeout(timer));
+        resizeObserver?.disconnect();
+        window.removeEventListener("resize", scheduleResize);
+        onControlsReady?.(null);
+        markerRef.current?.off();
+        markerRef.current = null;
+        setMarkerRef.current = null;
+        map?.off();
+        map?.remove();
+        mapRef.current = null;
+      };
+    }, []);
+    React.useEffect(() => {
+      const map = mapRef.current;
+      if (!map) return;
+      if (!value) {
+        if (markerRef.current) {
+          markerRef.current.off();
+          markerRef.current.removeFrom(map);
+          markerRef.current = null;
+        }
+        return;
+      }
+      setMarkerRef.current?.(value.latitude, value.longitude);
+      map.setView([value.latitude, value.longitude], map.getZoom(), { animate: !reducedMotion });
+    }, [reducedMotion, value]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: elementRef,
+        "data-location-map": "leaflet",
+        className: cn("nlocation-leaflet absolute inset-0 z-0 h-full w-full", className)
+      }
+    );
+  };
+}
+function createLeafletLocationAdapter(options) {
+  return { id: "leaflet", Map: createMapComponent(options) };
+}
+
+export { createLeafletLocationAdapter };

package/dist/theme.css

@@ -405,11 +405,32 @@ input:autofill {
 }
 
 /* Darker, more subtle handle in dark mode */
-.dark .os-scrollbar.os-theme-najm {
+.dark .os-scrollbar.os-theme-najm {
   --os-handle-bg: rgba(113, 113, 122, 0.36);
   --os-handle-bg-hover: rgba(161, 161, 170, 0.62);
   --os-handle-bg-active: rgba(212, 212, 216, 0.72);
-}
+}
+
+/* Leaflet's structural CSS is imported by the optional adapter entrypoint.
+   These rules only connect its visual treatment to Najm theme tokens. */
+.nlocation-leaflet.leaflet-container {
+  background: var(--muted);
+  font: inherit;
+}
+.nlocation-leaflet .leaflet-control-attribution {
+  margin: 0;
+  padding: 2px 5px;
+  background: color-mix(in oklab, var(--card) 88%, transparent);
+  color: var(--muted-foreground);
+  font-size: 10px;
+  line-height: 1.3;
+}
+.nlocation-leaflet .leaflet-control-attribution a { color: var(--foreground); text-decoration: underline; }
+
+@media (prefers-reduced-motion: reduce) {
+  .nlocation-dialog *,
+  .nlocation-leaflet * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+}
 
 
 /* overlayscrollbars */