@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-FAJI7BSC.js

@@ -1,443 +0,0 @@
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import { useResolvedMotion } from './chunk-J64KGCGX.js';
-import * as React from 'react';
-import { Animated, PanResponder, Pressable, View, Text, Easing } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var SPEC = {
-  /** Attribution inset from the trailing edge. */
-  attributionEnd: 8,
-  /**
-   * Attribution inset from the bottom. v2 lifted this from 4px to clear the
-   * bottom place card, which the old value sat underneath.
-   */
-  attributionBottom: 88,
-  /** Attribution size. */
-  attributionSize: 8.5,
-  /** Gap between the card's thumbnail, copy and action. */
-  cardGap: 9,
-  /** Thumbnail edge. */
-  thumb: 36,
-  /** Place-name size. */
-  nameSize: 14,
-  /** Place-meta size. */
-  metaSize: 11.5,
-  /** Base-layer grid pitch — vertical then horizontal, from `buildMapScreen`. */
-  gridX: 48,
-  gridY: 64,
-  /** Grid-line thickness. */
-  gridW: 4
-};
-var ZOOM = {
-  min: 1,
-  max: 3,
-  /** Multiplier per press of the zoom-in / zoom-out control. */
-  step: 1.5,
-  /**
-   * Wheel delta that doubles (or halves) the zoom, via `exp(-delta / decay)`.
-   * A trackpad pinch reaches the browser as a wheel event too.
-   */
-  decay: 320
-};
-function clamp(value, min, max) {
-  return Math.min(max, Math.max(min, value));
-}
-function touchDistance(e) {
-  const touches = e.nativeEvent.touches;
-  const a = touches[0];
-  const b = touches[1];
-  if (!a || !b) return 0;
-  return Math.hypot(a.pageX - b.pageX, a.pageY - b.pageY);
-}
-var DEFAULT_LABELS = {
-  zoomIn: "Zoom in",
-  zoomOut: "Zoom out",
-  recenter: "Recenter",
-  attribution: "\xA9 map data",
-  placeAction: (action, name) => `${action}, ${name}`
-};
-function BaseLayer({ width, height }) {
-  const { styles } = useStyles(sheet);
-  const columns = width > 0 ? Math.floor((width - SPEC.gridW) / SPEC.gridX) : 6;
-  const rows = height > 0 ? Math.floor((height - SPEC.gridW) / SPEC.gridY) : 6;
-  return /* @__PURE__ */ jsxs(View, { style: styles.base, children: [
-    Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx(View, { style: [styles.gridV, { left: (i + 1) * SPEC.gridX }] }, `v${i}`)),
-    Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(View, { style: [styles.gridH, { top: (i + 1) * SPEC.gridY }] }, `h${i}`)),
-    /* @__PURE__ */ jsx(View, { style: styles.river }),
-    /* @__PURE__ */ jsx(View, { style: styles.park })
-  ] });
-}
-function MapView({
-  pins = [],
-  activePinId,
-  onSelectPin,
-  place,
-  attribution: attributionProp,
-  labels: labelsProp,
-  onZoomIn,
-  onZoomOut,
-  onRecenter,
-  pannable = true,
-  zoomable = true,
-  minZoom = ZOOM.min,
-  maxZoom = ZOOM.max,
-  motion = "full",
-  children
-}) {
-  const labels = useLabels("mapView", DEFAULT_LABELS, labelsProp);
-  const attribution = attributionProp ?? labels.attribution;
-  const { styles } = useStyles(sheet);
-  const theme = useLoamTheme("map-view");
-  const animateZoom = useResolvedMotion(motion, "map-view") === "full";
-  const animateZoomRef = React.useRef(animateZoom);
-  animateZoomRef.current = animateZoom;
-  const [viewport, setViewport] = React.useState({ width: 0, height: 0 });
-  const viewportRef = React.useRef(viewport);
-  const onRootLayout = (e) => {
-    const { width, height } = e.nativeEvent.layout;
-    viewportRef.current = { width, height };
-    setViewport(
-      (prev) => prev.width === width && prev.height === height ? prev : { width, height }
-    );
-  };
-  const pan = React.useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
-  const scale = React.useRef(new Animated.Value(1)).current;
-  const offset = React.useRef({ x: 0, y: 0 });
-  const gestureStart = React.useRef({ x: 0, y: 0 });
-  const zoom = React.useRef(1);
-  const pinch = React.useRef(null);
-  const bounds = () => {
-    const { width, height } = viewportRef.current;
-    return {
-      x: Math.max(0, (width * zoom.current - width) / 2),
-      y: Math.max(0, (height * zoom.current - height) / 2)
-    };
-  };
-  const panTo = (x, y) => {
-    const max = bounds();
-    const next = { x: clamp(x, -max.x, max.x), y: clamp(y, -max.y, max.y) };
-    offset.current = next;
-    pan.setValue(next);
-  };
-  const zoomTo = (next, animate) => {
-    zoom.current = clamp(next, minZoom, maxZoom);
-    if (animate && animateZoomRef.current) {
-      Animated.timing(scale, {
-        toValue: zoom.current,
-        duration: theme.motion.expand.duration,
-        easing: Easing.bezier(...theme.motion.expand.easing),
-        // The pan on the same layer is gesture-driven, so this transform stays
-        // on the JS driver too — the two cannot mix drivers on one node.
-        useNativeDriver: false
-      }).start();
-    } else {
-      scale.setValue(zoom.current);
-    }
-    panTo(offset.current.x, offset.current.y);
-  };
-  const responder = React.useMemo(
-    () => PanResponder.create({
-      // Never claim the touch on start: a tap belongs to the pin (or the card)
-      // underneath. Only a real drag takes over.
-      onStartShouldSetPanResponder: () => false,
-      onMoveShouldSetPanResponder: (e, g) => pannable && (Math.abs(g.dx) > 2 || Math.abs(g.dy) > 2) || zoomable && e.nativeEvent.touches.length > 1,
-      onPanResponderGrant: () => {
-        gestureStart.current = { ...offset.current };
-        pinch.current = null;
-      },
-      onPanResponderMove: (e, g) => {
-        const distance = zoomable ? touchDistance(e) : 0;
-        if (distance > 0) {
-          pinch.current ??= { distance, zoom: zoom.current };
-          zoomTo(pinch.current.zoom * distance / pinch.current.distance, false);
-          return;
-        }
-        if (!pannable) return;
-        panTo(gestureStart.current.x + g.dx, gestureStart.current.y + g.dy);
-      },
-      onPanResponderRelease: () => {
-        pinch.current = null;
-      },
-      onPanResponderTerminate: () => {
-        pinch.current = null;
-      }
-    }),
-    // `panTo`/`zoomTo` read refs, so the responder never needs rebuilding for them.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [pannable, zoomable, minZoom, maxZoom]
-  );
-  const rootRef = React.useRef(null);
-  React.useEffect(() => {
-    if (!zoomable) return;
-    const node = rootRef.current;
-    if (!node?.addEventListener || !node.removeEventListener) return;
-    const onWheel = (e) => {
-      const wheel = e;
-      wheel.preventDefault?.();
-      zoomTo(zoom.current * Math.exp(-wheel.deltaY / ZOOM.decay), false);
-    };
-    node.addEventListener("wheel", onWheel, { passive: false });
-    return () => node.removeEventListener?.("wheel", onWheel);
-  }, [zoomable, minZoom, maxZoom]);
-  const recenter = () => {
-    zoomTo(minZoom, true);
-    panTo(0, 0);
-    onRecenter?.();
-  };
-  const controls = [
-    {
-      icon: "plus",
-      label: labels.zoomIn,
-      handler: onZoomIn,
-      onPress: () => {
-        zoomTo(zoom.current * ZOOM.step, true);
-        onZoomIn?.();
-      }
-    },
-    {
-      icon: "minus",
-      label: labels.zoomOut,
-      handler: onZoomOut,
-      onPress: () => {
-        zoomTo(zoom.current / ZOOM.step, true);
-        onZoomOut?.();
-      }
-    },
-    {
-      icon: "navigation",
-      label: labels.recenter,
-      handler: onRecenter,
-      onPress: recenter
-    }
-  ].filter((c) => c.handler);
-  const pinNodes = pins.map((pin) => {
-    const active = pin.id === activePinId;
-    return /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: pin.label,
-        "aria-pressed": active,
-        onPress: onSelectPin ? () => onSelectPin(pin.id) : void 0,
-        style: [
-          styles.pin,
-          active ? styles.pinActive : styles.pinIdle,
-          { left: `${pin.x}%`, top: `${pin.y}%` }
-        ],
-        children: /* @__PURE__ */ jsx(
-          Icon,
-          {
-            name: pin.icon ?? "map-pin",
-            size: active ? 17 : 13,
-            color: active ? theme.color.accentInk : theme.color.text
-          }
-        )
-      },
-      pin.id
-    );
-  });
-  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: styles.root, onLayout: onRootLayout, children: [
-    /* @__PURE__ */ jsxs(
-      Animated.View,
-      {
-        testID: "map-pan-layer",
-        style: [
-          styles.world,
-          { transform: [{ translateX: pan.x }, { translateY: pan.y }, { scale }] }
-        ],
-        ...responder.panHandlers,
-        children: [
-          children ?? /* @__PURE__ */ jsx(BaseLayer, { width: viewport.width, height: viewport.height }),
-          pinNodes
-        ]
-      }
-    ),
-    controls.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.controls, children: controls.map((c) => /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: c.label,
-        onPress: c.onPress,
-        style: styles.control,
-        children: /* @__PURE__ */ jsx(Icon, { name: c.icon, size: 17, color: theme.color.text })
-      },
-      c.label
-    )) }) : null,
-    /* @__PURE__ */ jsx(Text, { style: styles.attribution, children: attribution }),
-    place ? /* @__PURE__ */ jsxs(View, { style: styles.card, children: [
-      /* @__PURE__ */ jsx(View, { style: styles.cardThumb }),
-      /* @__PURE__ */ jsxs(View, { style: styles.cardText, children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.cardName, numberOfLines: 1, ellipsizeMode: "tail", children: place.name }),
-        place.meta ? /* @__PURE__ */ jsx(Text, { style: styles.cardMeta, numberOfLines: 1, ellipsizeMode: "tail", children: place.meta }) : null
-      ] }),
-      place.actionLabel ? /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: labels.placeAction(place.actionLabel, place.name),
-          onPress: place.onAction,
-          hitSlop: Math.max(0, (theme.hit.md - theme.ctl.md) / 2),
-          style: styles.cardAction,
-          children: /* @__PURE__ */ jsx(Text, { style: styles.cardActionLabel, children: place.actionLabel })
-        }
-      ) : null
-    ] }) : null
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  root: { flex: 1, backgroundColor: theme.color.surface2, overflow: "hidden" },
-  // The panning layer is the viewport. Travel comes from the zoom scaling it up,
-  // so nothing is laid out beyond the map's own edges at rest.
-  world: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0 },
-  base: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0 },
-  gridV: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    width: SPEC.gridW,
-    backgroundColor: theme.color.surface3
-  },
-  gridH: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    height: SPEC.gridW,
-    backgroundColor: theme.color.surface3
-  },
-  // Edge to edge: the -12° rotation pulls the ends ~1dp inside the map, which is
-  // cheaper than the 30% of extra width it would take to bleed past them.
-  //
-  // loam-contrast-ignore — the river and the park are base-layer texture, not
-  // information: they exist so the muted palette reads as a map. Every pin,
-  // route and label that *does* mean something is drawn over them with its own
-  // edge, and outlining a decorative river under high contrast would read as a
-  // defect rather than as help.
-  river: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    top: "30%",
-    height: theme.space[26],
-    backgroundColor: theme.color.infoSoft,
-    transform: [{ rotate: "-12deg" }]
-  },
-  // loam-contrast-ignore — decorative, as the river above.
-  park: {
-    position: "absolute",
-    left: "8%",
-    top: "8%",
-    width: "44%",
-    height: "22%",
-    borderRadius: theme.radius.md,
-    backgroundColor: theme.color.goodSoft
-  },
-  pin: {
-    position: "absolute",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.radius.full,
-    borderWidth: theme.borderWidth.heavy,
-    ...theme.shadow.md
-  },
-  // The raw accent stays here, unlike the accent *edges* elsewhere in the kit
-  // (see `focusRingColor()`): border and fill are the same colour, so this pin
-  // has no independent edge to measure — the boundary that matters is the filled
-  // disc against the map, and the glyph inside it rides `accentInk`. Lifting the
-  // border would either do nothing visible or split it from its own fill.
-  pinActive: {
-    width: theme.space[34],
-    height: theme.space[34],
-    marginLeft: -theme.space[17],
-    marginTop: -theme.space[34],
-    backgroundColor: theme.color.accent,
-    borderColor: theme.color.accent
-  },
-  pinIdle: {
-    width: theme.space[26],
-    height: theme.space[26],
-    marginLeft: -theme.space[13],
-    marginTop: -theme.space[26],
-    backgroundColor: theme.color.surface,
-    borderColor: theme.color.borderStrong
-  },
-  controls: {
-    position: "absolute",
-    right: theme.space.s3,
-    top: theme.space[14],
-    gap: theme.space.s2
-  },
-  control: {
-    width: theme.tapMin,
-    height: theme.tapMin,
-    borderRadius: theme.radius.md,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.border,
-    backgroundColor: theme.color.surface,
-    alignItems: "center",
-    justifyContent: "center",
-    ...theme.shadow.sm
-  },
-  // Lifted clear of the bottom place card — the licence text has to stay legible.
-  attribution: {
-    position: "absolute",
-    right: SPEC.attributionEnd,
-    bottom: SPEC.attributionBottom,
-    fontFamily: theme.font.mono,
-    fontSize: SPEC.attributionSize,
-    color: theme.color.text3
-  },
-  card: {
-    position: "absolute",
-    left: theme.space[10],
-    right: theme.space[10],
-    bottom: theme.space[10],
-    flexDirection: "row",
-    alignItems: "center",
-    gap: SPEC.cardGap,
-    padding: theme.space.s3,
-    borderRadius: theme.radius.lg,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.border,
-    backgroundColor: theme.color.surface,
-    ...theme.shadow.lg
-  },
-  cardThumb: {
-    width: SPEC.thumb,
-    height: SPEC.thumb,
-    borderRadius: theme.radius.md,
-    backgroundColor: theme.color.surface3
-  },
-  // `minWidth: 0` lets a long place name truncate instead of shoving the action out.
-  cardText: { flex: 1, minWidth: 0, gap: theme.space[2] },
-  cardName: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: SPEC.nameSize,
-    lineHeight: SPEC.nameSize * theme.lineHeight.snug,
-    color: theme.color.text
-  },
-  cardMeta: {
-    fontFamily: theme.font.sans,
-    fontSize: SPEC.metaSize,
-    color: theme.color.text3
-  },
-  cardAction: {
-    minHeight: theme.ctl.md,
-    paddingHorizontal: theme.space.s3,
-    paddingVertical: theme.space[8],
-    borderRadius: theme.radius.md,
-    backgroundColor: theme.color.accent,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  cardActionLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.caption1.fontSize,
-    color: theme.color.accentInk
-  }
-}));
-
-export { MapView };

package/dist/chunk-G3AFC24V.js

@@ -1,60 +0,0 @@
-import { ErrorSummary } from './chunk-XBZGDDMR.js';
-import * as React from 'react';
-import { View } from 'react-native';
-import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var FormContext = React.createContext(null);
-function useFormContext() {
-  const ctx = React.useContext(FormContext);
-  if (!ctx) throw new Error("useFormContext must be used inside a <Form>");
-  return ctx;
-}
-function Form({
-  onSubmit,
-  onValidate,
-  onFocusField,
-  submitting = false,
-  motion = "full",
-  children
-}) {
-  const { styles } = useStyles(sheet);
-  const [errors, setErrors] = React.useState([]);
-  const submit = React.useCallback(async () => {
-    if (submitting) return;
-    if (onValidate) {
-      const found = await onValidate();
-      if (found.length > 0) {
-        setErrors(found);
-        const first = found[0];
-        if (first) onFocusField?.(first.fieldId);
-        return;
-      }
-    }
-    setErrors([]);
-    await onSubmit();
-  }, [submitting, onValidate, onFocusField, onSubmit]);
-  const ctx = React.useMemo(() => ({ submit, submitting }), [submit, submitting]);
-  return /* @__PURE__ */ jsx(FormContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(View, { style: styles.form, children: [
-    /* @__PURE__ */ jsx(ErrorSummary, { errors, motion, onFocusField }),
-    children
-  ] }) });
-}
-function FormActions({ children }) {
-  const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsx(View, { style: styles.actions, children });
-}
-var sheet = createStyleSheet((theme) => ({
-  form: {
-    gap: theme.space.s5
-  },
-  actions: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "center",
-    gap: theme.space.s3,
-    paddingTop: theme.space.s1
-  }
-}));
-
-export { Form, FormActions, useFormContext };