@multiplatform.one/forms 6.7.0 → 7.0.0

package/dist/jsx/fields/Geolocation/mapMath.native.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var mapMath_exports = {};
+__export(mapMath_exports, {
+  OSM_TILE_SIZE: () => OSM_TILE_SIZE,
+  latLngFromMapClick: () => latLngFromMapClick,
+  latToTile: () => latToTile,
+  lngToTile: () => lngToTile,
+  tileToLat: () => tileToLat,
+  tileToLng: () => tileToLng,
+  tilesForView: () => tilesForView,
+  wrapTileX: () => wrapTileX,
+  zoomFromDelta: () => zoomFromDelta
+});
+module.exports = __toCommonJS(mapMath_exports);
+var OSM_TILE_SIZE = 256;
+function zoomFromDelta(delta) {
+  var clamped = Math.min(Math.max(delta, 5e-4), 45);
+  return Math.max(1, Math.min(19, Math.round(Math.log2(360 / (clamped * 2)))));
+}
+function lngToTile(lng, zoom) {
+  return (lng + 180) / 360 * Math.pow(2, zoom);
+}
+function latToTile(lat, zoom) {
+  var clamped = Math.max(-85.05112878, Math.min(85.05112878, lat));
+  var rad = clamped * Math.PI / 180;
+  return (1 - Math.log(Math.tan(rad) + 1 / Math.cos(rad)) / Math.PI) / 2 * Math.pow(2, zoom);
+}
+function tileToLng(x, zoom) {
+  return x / Math.pow(2, zoom) * 360 - 180;
+}
+function tileToLat(y, zoom) {
+  var rad = Math.atan(Math.sinh(Math.PI * (1 - 2 * y / Math.pow(2, zoom))));
+  return rad * 180 / Math.PI;
+}
+function wrapTileX(x, zoom) {
+  var n = Math.pow(2, zoom);
+  return (x % n + n) % n;
+}
+function latLngFromMapClick(args) {
+  var {
+    offsetX,
+    offsetY,
+    width,
+    height,
+    lat,
+    lng,
+    zoom
+  } = args;
+  var worldX = lngToTile(lng, zoom) + (offsetX - width / 2) / OSM_TILE_SIZE;
+  var worldY = latToTile(lat, zoom) + (offsetY - height / 2) / OSM_TILE_SIZE;
+  return {
+    lat: tileToLat(worldY, zoom),
+    lng: tileToLng(worldX, zoom)
+  };
+}
+function tilesForView(args) {
+  var {
+    lat,
+    lng,
+    zoom,
+    width,
+    height
+  } = args;
+  if (width < 1 || height < 1) return [];
+  var n = Math.pow(2, zoom);
+  var cx = lngToTile(lng, zoom);
+  var cy = latToTile(lat, zoom);
+  var minTx = Math.floor(cx - width / 2 / OSM_TILE_SIZE);
+  var maxTx = Math.ceil(cx + width / 2 / OSM_TILE_SIZE);
+  var minTy = Math.max(0, Math.floor(cy - height / 2 / OSM_TILE_SIZE));
+  var maxTy = Math.min(n - 1, Math.ceil(cy + height / 2 / OSM_TILE_SIZE));
+  var tiles = [];
+  for (var ty = minTy; ty <= maxTy; ty++) {
+    for (var tx = minTx; tx <= maxTx; tx++) {
+      tiles.push({
+        tx: wrapTileX(tx, zoom),
+        ty,
+        left: (tx - cx) * OSM_TILE_SIZE + width / 2,
+        top: (ty - cy) * OSM_TILE_SIZE + height / 2
+      });
+    }
+  }
+  return tiles;
+}
+//# sourceMappingURL=mapMath.native.js.map

package/dist/jsx/fields/Geolocation/mapMath.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","mapMath_exports","OSM_TILE_SIZE","latLngFromMapClick","latToTile","lngToTile","tileToLat","tileToLng","tilesForView","wrapTileX","zoomFromDelta","module","exports","delta","clamped","Math","min","max","round","log2","lng","zoom","pow","lat","rad","PI","log","tan","cos","x","y","atan","sinh","n"],"sources":["../../../../src/fields/Geolocation/mapMath.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/fields/ImageField/index.mjs

@@ -1,73 +1,286 @@
-import { ImageIcon, XIcon } from "@phosphor-icons/react";
+import { ImageSquareIcon, XIcon } from "@phosphor-icons/react";
+import { ensureFocusVisibleRing, wasKeyboardFocus } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Image, isWeb, Text, View, styled } from "tamagui";
-import { Field, FieldLayout } from "../../fieldLayout.mjs";
+import { Image, Text, View, YStack, isWeb, styled } from "tamagui";
+import { Button } from "../../Button/index.mjs";
+import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout.mjs";
 import { Skeleton } from "../../Skeleton/index.mjs";
 import { t } from "../../shared/t.mjs";
-import { formCardColors, formCommonColors, formInputColors } from "../../shared/colorRamps.mjs";
+import { formCommonColors, formInputColors } from "../../shared/colorRamps.mjs";
 import { clampRadiusForControl, getFieldError, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-const ImageContainer = styled(View, {
-  name: "ImageFieldContainer",
+import { jsx, jsxs } from "react/jsx-runtime";
+const IMAGE_EXT = /\.(avif|bmp|gif|heic|heif|jpe?g|png|svg|webp)$/i;
+const CAPTION_MIN_EDGE = 56;
+const ImageFrame = styled(View, {
+  name: "ImageFieldFrame",
   position: "relative",
   alignItems: "center",
   justifyContent: "center",
   overflow: "hidden",
-  variants: {
-    interactive: {
-      true: {
-        cursor: "pointer",
-        hoverStyle: {
-          opacity: 0.9
-        },
-        pressStyle: {
-          opacity: 0.8
-        }
-      },
-      false: {
-        cursor: "default"
-      }
-    },
-    hasImage: {
-      true: {
-        borderStyle: "solid",
-        borderWidth: 1,
-        borderColor: formCardColors.border.base
-      },
-      false: {
-        borderStyle: "dashed",
-        borderWidth: 1,
-        borderColor: formInputColors.border.base,
-        backgroundColor: formInputColors.background.base
-      }
-    },
-    disabledState: {
-      true: {
-        opacity: 0.5
-      },
-      false: {
-        opacity: 1
-      }
-    }
-  }
-});
-const RemoveButton = styled(View, {
-  name: "ImageFieldRemove",
-  position: "absolute",
-  top: -6,
-  insetInlineEnd: -6,
-  width: 18,
-  height: 18,
-  borderRadius: 1e3,
-  backgroundColor: formCommonColors.text,
-  alignItems: "center",
-  justifyContent: "center",
-  cursor: "pointer",
-  zIndex: 1,
-  hoverStyle: {
-    backgroundColor: formCommonColors.error
+  outlineWidth: 0,
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0
   }
 });
+function isImageFile(file, accept) {
+  if (file.type.startsWith("image/")) return true;
+  if (IMAGE_EXT.test(file.name)) return true;
+  if (!accept) return false;
+  const accepted = accept.split(",").map(type => type.trim().toLowerCase());
+  const name = file.name.toLowerCase();
+  return accepted.some(type => {
+    if (type.startsWith(".")) return name.endsWith(type);
+    if (type.endsWith("/*")) return file.type.startsWith(type.slice(0, -1));
+    return file.type === type || file.type.match(type.replace("*", ".*"));
+  });
+}
+function ImageControl({
+  id,
+  label,
+  currentValue,
+  errorProp,
+  required,
+  disabled,
+  readOnly,
+  accept,
+  maxSize,
+  imageWidth,
+  imageHeight,
+  showRemove,
+  placeholder,
+  objectFit,
+  cappedRadius,
+  borderWidth,
+  outlined,
+  elevation,
+  transition,
+  body,
+  gap,
+  disabledSurface,
+  onChange,
+  onChangeProp,
+  onValueChange,
+  onInvalid,
+  blurHandler
+}) {
+  const describedBy = useFieldDescribedBy();
+  const fieldA11y = useFieldA11y();
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const [broken, setBroken] = useState(false);
+  const [kbFrameFocus, setKbFrameFocus] = useState(false);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const fileInputRef = useRef(null);
+  const dragDepthRef = useRef(0);
+  const canInteract = !disabled && !readOnly;
+  useEffect(() => {
+    setBroken(false);
+    if (!(currentValue instanceof File) || !isWeb) {
+      setPreviewUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(currentValue);
+    setPreviewUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [currentValue]);
+  const displayUrl = typeof currentValue === "string" && currentValue ? currentValue : currentValue instanceof File ? previewUrl : null;
+  const hasValue = currentValue instanceof File || typeof currentValue === "string" && !!currentValue;
+  const hasPreview = !!displayUrl && !broken;
+  const minEdge = Math.min(imageWidth, imageHeight);
+  const caption = placeholder === void 0 ? t("Add image") : placeholder;
+  const showCaption = Boolean(caption) && !hasPreview && (placeholder !== void 0 || minEdge >= CAPTION_MIN_EDGE);
+  const iconSize = Math.max(14, Math.min(32, Math.round(minEdge * 0.28)));
+  const emit = useCallback(next => {
+    onInvalid?.(void 0);
+    onChange?.(next);
+    onChangeProp?.(next);
+    onValueChange?.(next);
+    blurHandler?.();
+  }, [onChange, onChangeProp, onValueChange, onInvalid, blurHandler]);
+  const validateFile = useCallback(file => {
+    if (maxSize && file.size > maxSize) {
+      const sizeMB = (maxSize / 1024 / 1024).toFixed(1);
+      return t("Image must be less than {{size}}MB", {
+        size: sizeMB
+      });
+    }
+    if (!isImageFile(file, accept)) {
+      return t("File must be an image");
+    }
+    return null;
+  }, [maxSize, accept]);
+  const applyFile = useCallback(file => {
+    const invalid = validateFile(file);
+    if (invalid) {
+      setBroken(false);
+      onInvalid?.(invalid);
+      return;
+    }
+    setBroken(false);
+    emit(file);
+  }, [validateFile, emit, onInvalid]);
+  const openFileDialog = useCallback(() => {
+    if (!canInteract) return;
+    fileInputRef.current?.click();
+  }, [canInteract]);
+  const isInteractiveChild = useCallback(e => {
+    const target = e.target;
+    const current = e.currentTarget;
+    if (!target?.closest || !current) return false;
+    const interactive = target.closest('button, a, input, select, textarea, [role="button"]');
+    return !!interactive && interactive !== current;
+  }, []);
+  const handleFramePress = useCallback(e => {
+    if (isInteractiveChild(e)) return;
+    openFileDialog();
+  }, [isInteractiveChild, openFileDialog]);
+  const handleFrameKeyDown = useCallback(e => {
+    if (e.target !== e.currentTarget) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault?.();
+      openFileDialog();
+    }
+  }, [openFileDialog]);
+  const handleRemove = useCallback(e => {
+    e?.stopPropagation?.();
+    setBroken(false);
+    emit(null);
+  }, [emit]);
+  const handleDragEnter = useCallback(e => {
+    e.preventDefault();
+    if (!canInteract) return;
+    dragDepthRef.current += 1;
+    setIsDragOver(true);
+  }, [canInteract]);
+  const handleDragOver = useCallback(e => {
+    e.preventDefault();
+  }, []);
+  const handleDragLeave = useCallback(e => {
+    e.preventDefault();
+    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+    if (dragDepthRef.current === 0) setIsDragOver(false);
+  }, []);
+  const handleDrop = useCallback(e => {
+    e.preventDefault();
+    dragDepthRef.current = 0;
+    setIsDragOver(false);
+    if (!canInteract) return;
+    const file = e.dataTransfer.files?.[0];
+    if (file) applyFile(file);
+  }, [canInteract, applyFile]);
+  const frameBorderWidth = isDragOver && canInteract ? Math.max(borderWidth, 2) : borderWidth;
+  const frameBorderColor = errorProp || isDragOver && canInteract ? errorProp ? formCommonColors.error : formCommonColors.text : formInputColors.border.base;
+  const altText = typeof label === "string" && label ? label : fieldA11y?.label || t("Selected image");
+  const emptyName = typeof label === "string" && label ? t("{{label}}: add image", {
+    label
+  }) : t("Add image");
+  return /* @__PURE__ */jsxs(YStack, {
+    alignItems: "flex-start",
+    ...(gap ?? {
+      gap: "$2"
+    }),
+    children: [/* @__PURE__ */jsxs(ImageFrame, {
+      id,
+      width: imageWidth,
+      height: imageHeight,
+      borderRadius: cappedRadius,
+      borderStyle: hasPreview ? "solid" : "dashed",
+      borderWidth: frameBorderWidth,
+      borderColor: frameBorderColor,
+      backgroundColor: outlined || hasPreview ? "transparent" : formInputColors.background.base,
+      elevation,
+      transition,
+      ...(disabled ? disabledSurface : void 0),
+      "aria-required": required || void 0,
+      "aria-invalid": !!errorProp || void 0,
+      "aria-readonly": readOnly || void 0,
+      "aria-disabled": disabled || void 0,
+      "aria-describedby": describedBy,
+      ...(!isWeb ? {
+        accessibilityRole: canInteract ? "button" : void 0,
+        accessibilityLabel: fieldA11y?.label ?? (typeof label === "string" ? label : emptyName),
+        accessibilityHint: fieldA11y?.description,
+        accessibilityState: {
+          disabled: !!disabled
+        }
+      } : {}),
+      ...(kbFrameFocus ? ensureFocusVisibleRing({
+        outlineOffset: -2
+      }) : void 0),
+      ...(canInteract ? {
+        role: "button",
+        tabIndex: 0,
+        cursor: "pointer",
+        onFocus: () => {
+          if (wasKeyboardFocus()) setKbFrameFocus(true);
+        },
+        onBlur: () => setKbFrameFocus(false),
+        ...(label && id ? null : {
+          "aria-label": emptyName
+        }),
+        onPress: handleFramePress,
+        onKeyDown: handleFrameKeyDown,
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop
+      } : {}),
+      children: [hasPreview ? /* @__PURE__ */jsx(Image, {
+        src: displayUrl,
+        alt: altText,
+        width: imageWidth,
+        height: imageHeight,
+        objectFit,
+        onError: () => setBroken(true)
+      }) : /* @__PURE__ */jsxs(View, {
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "$1",
+        padding: "$1",
+        children: [/* @__PURE__ */jsx(ImageSquareIcon, {
+          size: iconSize,
+          color: "var(--color11)"
+        }), showCaption ? /* @__PURE__ */jsx(Text, {
+          ...body,
+          color: formCommonColors.muted,
+          textAlign: "center",
+          numberOfLines: 2,
+          children: hasValue && broken ? t("Image failed to load") : caption
+        }) : hasValue && broken ? /* @__PURE__ */jsx(Text, {
+          color: formCommonColors.muted,
+          textAlign: "center",
+          fontSize: "$1",
+          children: t("Image failed to load")
+        }) : null]
+      }), isWeb && /* @__PURE__ */jsx("input", {
+        ref: fileInputRef,
+        type: "file",
+        accept,
+        tabIndex: -1,
+        "aria-hidden": true,
+        onChange: e => {
+          const files = e.target.files;
+          e.target.value = "";
+          if (!files || files.length === 0) return;
+          applyFile(files[0]);
+        },
+        style: {
+          display: "none"
+        },
+        disabled: !canInteract
+      })]
+    }), showRemove && hasValue && canInteract && /* @__PURE__ */jsx(Button, {
+      chromeless: true,
+      size: "$2",
+      icon: XIcon,
+      "aria-label": t("Remove image"),
+      onPress: () => handleRemove(),
+      children: t("Remove")
+    })]
+  });
+}
 function ImageField({
   name,
   form: formProp,
@@ -92,12 +305,14 @@ function ImageField({
   imageHeight = 48,
   showRemove = true,
   placeholder,
+  objectFit = "cover",
   skeleton,
   compact
 }) {
   const {
     resolvedForm,
     knobProps,
+    disabledState,
     id
   } = useFormField({
     form: formProp,
@@ -106,60 +321,7 @@ function ImageField({
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const cappedRadius = clampRadiusForControl(knobProps.borderRadius.borderRadius, 6);
-  const [previewUrl, setPreviewUrl] = useState(null);
   const [validationError, setValidationError] = useState();
-  const fileInputRef = useRef(null);
-  const resolvedValue = value !== void 0 ? value : defaultValue;
-  useEffect(() => {
-    if (!(resolvedValue instanceof File) || !isWeb) {
-      setPreviewUrl(null);
-      return;
-    }
-    const url = URL.createObjectURL(resolvedValue);
-    setPreviewUrl(url);
-    return () => URL.revokeObjectURL(url);
-  }, [resolvedValue]);
-  const getDisplayUrl = useCallback(val => {
-    if (!val) return null;
-    if (typeof val === "string") return val;
-    if (val instanceof File) return previewUrl;
-    return null;
-  }, [previewUrl]);
-  const validateFile = useCallback(file => {
-    if (maxSize && file.size > maxSize) {
-      const sizeMB = (maxSize / 1024 / 1024).toFixed(1);
-      return `Image must be less than ${sizeMB}MB`;
-    }
-    if (!file.type.startsWith("image/")) {
-      return "File must be an image";
-    }
-    return null;
-  }, [maxSize]);
-  const handleFileSelect = useCallback((files, onChange, blurHandler) => {
-    if (!files || files.length === 0) return;
-    const file = files[0];
-    const validationError2 = validateFile(file);
-    if (validationError2) {
-      setValidationError(validationError2);
-      return;
-    }
-    setValidationError(void 0);
-    onChange?.(file);
-    onChangeProp?.(file);
-    onValueChange?.(file);
-    blurHandler?.();
-  }, [validateFile, onChangeProp, onValueChange]);
-  const handleRemove = useCallback((e, onChange, blurHandler) => {
-    e.stopPropagation();
-    onChange?.(null);
-    onChangeProp?.(null);
-    onValueChange?.(null);
-    blurHandler?.();
-  }, [onChangeProp, onValueChange]);
-  const openFileDialog = useCallback(() => {
-    if (disabled || readOnly) return;
-    fileInputRef.current?.click();
-  }, [disabled, readOnly]);
   if (skeleton) {
     return /* @__PURE__ */jsx(FieldLayout, {
       id,
@@ -173,62 +335,30 @@ function ImageField({
       })
     });
   }
-  const canInteract = !disabled && !readOnly;
-  const renderImageField = (currentValue, errorProp, onChange, blurHandler) => {
-    const displayUrl = getDisplayUrl(currentValue);
-    const hasImage = !!displayUrl;
-    return /* @__PURE__ */jsxs(ImageContainer, {
-      width: imageWidth,
-      height: imageHeight,
-      borderRadius: cappedRadius,
-      interactive: canInteract,
-      hasImage,
-      disabledState: !!disabled,
-      onPress: canInteract ? openFileDialog : void 0,
-      ...(errorProp ? {
-        borderColor: formCommonColors.error
-      } : void 0),
-      "aria-required": required || void 0,
-      "aria-invalid": !!errorProp || void 0,
-      "aria-readonly": readOnly || void 0,
-      children: [hasImage ? /* @__PURE__ */jsxs(Fragment, {
-        children: [/* @__PURE__ */jsx(Image, {
-          src: displayUrl,
-          alt: typeof label === "string" && label ? label : t("Selected image"),
-          width: imageWidth,
-          height: imageHeight,
-          objectFit: "cover"
-        }), showRemove && canInteract && /* @__PURE__ */jsx(RemoveButton, {
-          onPress: e => handleRemove(e, onChange, blurHandler),
-          children: /* @__PURE__ */jsx(XIcon, {
-            size: 10,
-            color: "var(--color1)"
-          })
-        })]
-      }) : /* @__PURE__ */jsxs(View, {
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "$1",
-        children: [/* @__PURE__ */jsx(ImageIcon, {
-          size: 16,
-          color: "var(--color10)"
-        }), placeholder && /* @__PURE__ */jsx(Text, {
-          fontSize: "$1",
-          color: formCommonColors.muted,
-          textAlign: "center",
-          children: placeholder
-        })]
-      }), isWeb && /* @__PURE__ */jsx("input", {
-        ref: fileInputRef,
-        type: "file",
-        accept,
-        onChange: e => handleFileSelect(e.target.files, onChange, blurHandler),
-        style: {
-          display: "none"
-        },
-        disabled: !canInteract
-      })]
-    });
+  const controlProps = {
+    id,
+    label,
+    required,
+    disabled,
+    readOnly,
+    accept,
+    maxSize,
+    imageWidth,
+    imageHeight,
+    showRemove,
+    placeholder,
+    objectFit,
+    cappedRadius,
+    borderWidth: knobProps.borderRadius.borderWidth ?? 1,
+    outlined: knobProps.outlined,
+    elevation: knobProps.elevation,
+    transition: knobProps.transition,
+    body: knobProps.body,
+    gap: knobProps.gap,
+    disabledSurface: disabled ? disabledState.surfaceKnobProps : void 0,
+    onChangeProp,
+    onValueChange,
+    onInvalid: setValidationError
   };
   if (!resolvedForm || !name) {
     const standaloneError = error ?? validationError;
@@ -242,7 +372,11 @@ function ImageField({
       size,
       knobProps,
       disabled,
-      children: renderImageField(value ?? defaultValue, standaloneError, void 0)
+      children: /* @__PURE__ */jsx(ImageControl, {
+        ...controlProps,
+        currentValue: value ?? defaultValue,
+        errorProp: standaloneError
+      })
     });
   }
   return /* @__PURE__ */jsx(Field, {
@@ -264,9 +398,13 @@ function ImageField({
         size,
         knobProps,
         disabled,
-        children: renderImageField(value !== void 0 ? value : fieldValue, resolvedError, val => {
-          field.handleChange(val);
-        }, blurHandler)
+        children: /* @__PURE__ */jsx(ImageControl, {
+          ...controlProps,
+          currentValue: value !== void 0 ? value : fieldValue,
+          errorProp: resolvedError,
+          onChange: val => field.handleChange(val),
+          blurHandler
+        })
       });
     }
   });