@btndprojects/loam-ui-native 0.0.0-stage → 0.1.1

package/dist/chunk-HPPW424V.js

@@ -0,0 +1,334 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React2 from 'react';
+import { Platform, Easing, Keyboard, Animated, View, Pressable, Text, useWindowDimensions, ScrollView } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function keyboardEventNames(os = Platform.OS) {
+  return os === "ios" ? { show: "keyboardWillShow", hide: "keyboardWillHide" } : { show: "keyboardDidShow", hide: "keyboardDidHide" };
+}
+function eventDuration(event, fallback) {
+  const reported = event?.duration;
+  return typeof reported === "number" && reported > 0 ? reported : fallback;
+}
+function eventEasing(event) {
+  const reported = event?.easing;
+  return reported && reported !== "keyboard" ? reported : void 0;
+}
+function keyboardEasing(easing, fallback) {
+  switch (easing) {
+    case "linear":
+      return Easing.linear;
+    case "easeIn":
+      return Easing.in(Easing.ease);
+    case "easeOut":
+      return Easing.out(Easing.ease);
+    case "easeInEaseOut":
+      return Easing.inOut(Easing.ease);
+    default:
+      return Easing.bezier(...fallback);
+  }
+}
+function useKeyboardInset() {
+  const theme = useLoamTheme();
+  const enterDuration = theme.motion.enter.duration;
+  const exitDuration = theme.motion.exit.duration;
+  const [state, setState] = React2.useState(() => ({
+    height: 0,
+    visible: false,
+    duration: enterDuration,
+    easing: void 0
+  }));
+  React2.useEffect(() => {
+    const { show, hide } = keyboardEventNames();
+    const onShow = (event) => setState({
+      height: event?.endCoordinates?.height ?? 0,
+      visible: true,
+      duration: eventDuration(event, enterDuration),
+      easing: eventEasing(event)
+    });
+    const onHide = (event) => setState({
+      height: 0,
+      visible: false,
+      // Closing is an exit: faster than the open, per the motion contract.
+      duration: eventDuration(event, exitDuration),
+      easing: eventEasing(event)
+    });
+    const subscriptions = [Keyboard.addListener(show, onShow), Keyboard.addListener(hide, onHide)];
+    return () => {
+      for (const subscription of subscriptions) subscription.remove();
+    };
+  }, [enterDuration, exitDuration]);
+  return state;
+}
+function useAnimatedKeyboardInset(extra = 0) {
+  const theme = useLoamTheme();
+  const state = useKeyboardInset();
+  const inset = React2.useRef(new Animated.Value(0)).current;
+  const fallbackCurve = state.visible ? theme.motion.enter.easing : theme.motion.exit.easing;
+  const target = state.visible ? state.height + extra : 0;
+  React2.useEffect(() => {
+    Animated.timing(inset, {
+      toValue: target,
+      duration: state.duration,
+      easing: keyboardEasing(state.easing, fallbackCurve),
+      // A reserved gap is layout, so this one cannot ride the native driver; it
+      // is a single value per keyboard transition, not a per-frame loop.
+      useNativeDriver: false
+    }).start();
+  }, [inset, target, state.duration, state.easing, fallbackCurve]);
+  return { inset, state };
+}
+var PREVIOUS_ICON = "arrow-up";
+var NEXT_ICON = "arrow-down";
+var ACCESSORY_NAV_MIN_FIELDS = 3;
+function KeyboardSpacer({
+  extra = 0,
+  enabled = true,
+  testID
+}) {
+  const { inset } = useAnimatedKeyboardInset(extra);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: { height: enabled ? inset : 0 },
+      testID
+    }
+  );
+}
+function KeyboardStickyView({
+  children,
+  offset = 0,
+  enabled = true,
+  style,
+  testID
+}) {
+  const { styles } = useStyles(sheet);
+  const { inset } = useAnimatedKeyboardInset(offset);
+  const lift = inset.interpolate({ inputRange: [0, 1], outputRange: [0, -1] });
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: [styles.stickyBar, { transform: [{ translateY: enabled ? lift : 0 }] }, style],
+      testID,
+      children
+    }
+  );
+}
+function KeyboardAccessoryBar({
+  navigable = true,
+  fieldCount,
+  canGoPrevious = true,
+  canGoNext = true,
+  onPrevious,
+  onNext,
+  onDone,
+  doneLabel = "Done",
+  previousLabel = "Previous field",
+  nextLabel = "Next field",
+  children,
+  sticky = false,
+  style,
+  testID
+}) {
+  const { styles } = useStyles(sheet);
+  const showNav = navigable && (fieldCount == null || fieldCount > ACCESSORY_NAV_MIN_FIELDS);
+  const bar = /* @__PURE__ */ jsxs(View, { accessibilityRole: "toolbar", style: [styles.accessoryBar, style], testID, children: [
+    showNav ? /* @__PURE__ */ jsxs(View, { style: styles.accessoryNav, children: [
+      /* @__PURE__ */ jsx(
+        AccessoryButton,
+        {
+          icon: PREVIOUS_ICON,
+          label: previousLabel,
+          disabled: !canGoPrevious,
+          onPress: onPrevious
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AccessoryButton,
+        {
+          icon: NEXT_ICON,
+          label: nextLabel,
+          disabled: !canGoNext,
+          onPress: onNext
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(View, {}),
+    children ? /* @__PURE__ */ jsx(View, { style: styles.accessoryMiddle, children }) : null,
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: doneLabel,
+        onPress: onDone,
+        style: styles.accessoryDone,
+        children: /* @__PURE__ */ jsx(Text, { style: styles.accessoryDoneLabel, children: doneLabel })
+      }
+    )
+  ] });
+  return sticky ? /* @__PURE__ */ jsx(KeyboardStickyView, { children: bar }) : bar;
+}
+function AccessoryButton({
+  icon,
+  label,
+  disabled,
+  onPress
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { disabled });
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: { disabled },
+      disabled,
+      onPress: disabled ? void 0 : onPress,
+      style: ({ pressed }) => [
+        styles.accessoryButton,
+        pressed && !disabled ? { backgroundColor: theme.state.pressed } : null
+      ],
+      children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.md, color: disabled ? theme.color.text3 : theme.color.text2 })
+    }
+  );
+}
+var KeyboardScrollContext = React2.createContext(null);
+function KeyboardAvoidingScrollView({
+  children,
+  extraBottom,
+  keyboardDismissMode = "on-drag",
+  contentContainerStyle,
+  onScroll,
+  testID,
+  ...rest
+}) {
+  const theme = useLoamTheme();
+  const inset = useKeyboardInset();
+  const { height: windowHeight } = useWindowDimensions();
+  const clearance = extraBottom ?? theme.layout.screenPad;
+  const scrollRef = React2.useRef(null);
+  const offset = React2.useRef(0);
+  const restoreTo = React2.useRef(null);
+  const pendingNode = React2.useRef(null);
+  const latest = React2.useRef({ inset, windowHeight, clearance });
+  latest.current = { inset, windowHeight, clearance };
+  const handleScroll = React2.useCallback(
+    (event) => {
+      offset.current = event.nativeEvent.contentOffset.y;
+      onScroll?.(event);
+    },
+    [onScroll]
+  );
+  const bringIntoView = React2.useCallback((node) => {
+    if (!node || typeof node.measureInWindow !== "function") return;
+    const { inset: kbd, windowHeight: winH, clearance: pad } = latest.current;
+    if (!kbd.visible) {
+      pendingNode.current = node;
+      return;
+    }
+    node.measureInWindow((_x, y, _width, height) => {
+      const visibleBottom = winH - kbd.height - pad;
+      const covered = y + height - visibleBottom;
+      if (covered > 0) {
+        scrollRef.current?.scrollTo({ y: offset.current + covered, animated: true });
+      }
+    });
+  }, []);
+  React2.useEffect(() => {
+    if (inset.visible) {
+      restoreTo.current = offset.current;
+      const node = pendingNode.current;
+      pendingNode.current = null;
+      if (node) bringIntoView(node);
+      return;
+    }
+    pendingNode.current = null;
+    const target = restoreTo.current;
+    restoreTo.current = null;
+    if (target != null) scrollRef.current?.scrollTo({ y: target, animated: true });
+  }, [inset.visible, bringIntoView]);
+  const context = React2.useMemo(
+    () => ({ scrollIntoView: bringIntoView }),
+    [bringIntoView]
+  );
+  return /* @__PURE__ */ jsx(KeyboardScrollContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      ref: scrollRef,
+      keyboardDismissMode,
+      keyboardShouldPersistTaps: "handled",
+      scrollEventThrottle: 16,
+      onScroll: handleScroll,
+      contentContainerStyle: [{ paddingBottom: inset.height + clearance }, contentContainerStyle],
+      testID,
+      ...rest,
+      children
+    }
+  ) });
+}
+function useScrollIntoView() {
+  const context = React2.useContext(KeyboardScrollContext);
+  const ref = React2.useRef(null);
+  const onFocus = React2.useCallback(() => {
+    context?.scrollIntoView(ref.current);
+  }, [context]);
+  return { ref, onFocus };
+}
+var sheet = createStyleSheet((theme) => ({
+  // The reference draws the accessory bar 42 dp tall; `toolbarH` (44) is the
+  // token for exactly this surface and also clears `tapMin`.
+  accessoryBar: {
+    minHeight: theme.layout.toolbarH,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: theme.space.s3,
+    backgroundColor: theme.color.surface2,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  },
+  accessoryNav: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  accessoryMiddle: { flex: 1, alignItems: "center" },
+  accessoryButton: {
+    minWidth: theme.tapMin,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.sm,
+    variants: {
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  accessoryDone: {
+    minHeight: theme.tapMin,
+    minWidth: theme.tapMin,
+    alignItems: "flex-end",
+    justifyContent: "center",
+    paddingHorizontal: theme.space.s1
+  },
+  accessoryDoneLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing,
+    color: theme.color.accentStrong
+  },
+  stickyBar: {
+    flexDirection: "column",
+    backgroundColor: theme.color.surface,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border
+  }
+}));
+
+export { ACCESSORY_NAV_MIN_FIELDS, KeyboardAccessoryBar, KeyboardAvoidingScrollView, KeyboardSpacer, KeyboardStickyView, keyboardEasing, keyboardEventNames, useAnimatedKeyboardInset, useKeyboardInset, useScrollIntoView };

package/dist/chunk-HQOQIBJI.js

@@ -0,0 +1 @@
+

package/dist/chunk-HU2EQNRZ.js

@@ -0,0 +1,44 @@
+// src/pull-to-refresh/overscroll.ts
+var OVERSCROLL_DAMPING_EXPONENT = 0.85;
+var SCROLL_TOP_SLOP_PX = 2;
+var GESTURE_SLOP_PX = 8;
+var REFRESH_ARM_PX = 44;
+var REACH_ARM_PX = 88;
+var MAX_OVERSCROLL_PX = 116;
+var REACH_EXIT_PX = 40;
+function dampOverscroll(dy) {
+  if (!(dy > 0)) return 0;
+  return Math.pow(dy, OVERSCROLL_DAMPING_EXPONENT);
+}
+function clampOverscroll(pull) {
+  if (!(pull > 0)) return 0;
+  return Math.min(pull, MAX_OVERSCROLL_PX);
+}
+function overscrollOffset(dy) {
+  return clampOverscroll(dampOverscroll(dy));
+}
+function overscrollProgress(pull) {
+  if (!(pull > 0)) return 0;
+  return Math.min(1, pull / REFRESH_ARM_PX);
+}
+function overscrollIntent(pull, owners = {}) {
+  if (owners.reach && pull > REACH_ARM_PX) return "reach";
+  if (owners.refresh && pull > REFRESH_ARM_PX) return "refresh";
+  return "idle";
+}
+function isReachExitArmed(dy) {
+  return -dy >= REACH_EXIT_PX;
+}
+function bandIndicator(offset, size, clearance) {
+  const band = offset > 0 ? offset : 0;
+  const fit = band - 2 * clearance;
+  const scale = size > 0 ? Math.max(0, Math.min(1, fit / size)) : 0;
+  return {
+    scale,
+    translateY: band / 2 - size / 2,
+    opacity: scale,
+    bottom: band / 2 + size * scale / 2
+  };
+}
+
+export { GESTURE_SLOP_PX, MAX_OVERSCROLL_PX, OVERSCROLL_DAMPING_EXPONENT, REACH_ARM_PX, REACH_EXIT_PX, REFRESH_ARM_PX, SCROLL_TOP_SLOP_PX, bandIndicator, clampOverscroll, dampOverscroll, isReachExitArmed, overscrollIntent, overscrollOffset, overscrollProgress };