@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-DM5QUKKO.js → chunk-RSWKKAHK.js}

@@ -1,6 +1,7 @@
 import { MAX_OVERSCROLL_PX, REFRESH_ARM_PX, SCROLL_TOP_SLOP_PX, overscrollOffset, overscrollIntent } from './chunk-HU2EQNRZ.js';
 import { haptics } from './chunk-NY2U3PBI.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
 import { Animated, Easing, View, Text, Pressable, ScrollView } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
@@ -12,26 +13,50 @@ function touchPageY(e) {
   const touch = ne.touches?.[0] ?? ne.changedTouches?.[0];
   return typeof touch?.pageY === "number" ? touch.pageY : null;
 }
+function touchPageX(e) {
+  const ne = e.nativeEvent;
+  if (typeof ne.pageX === "number") return ne.pageX;
+  const touch = ne.touches?.[0] ?? ne.changedTouches?.[0];
+  return typeof touch?.pageX === "number" ? touch.pageX : null;
+}
 function isThenable(v) {
   return typeof v?.then === "function";
 }
+var TICK_COUNT = 12;
+var TICK_INDEX = Array.from({ length: TICK_COUNT }, (_, i) => i);
+var DEFAULT_LABELS = {
+  arm: "Release to refresh",
+  refreshing: "Refreshing",
+  refresh: "Refresh",
+  refreshBusy: (refresh, refreshing) => `${refresh}, ${refreshing}`
+};
 function PullToRefresh({
   onRefresh,
   onArm,
   refreshing,
   phase,
   indicator,
-  armLabel = "Release to refresh",
-  refreshingLabel = "Refreshing",
-  refreshAccessibilityLabel = "Refresh",
+  spinner = "ticks",
+  align = "center",
+  orientation = "vertical",
+  armLabel: armLabelProp,
+  refreshingLabel: refreshingLabelProp,
+  refreshAccessibilityLabel: refreshAccessibilityLabelProp,
+  labels: labelsProp,
   children,
   ...rest
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("pull-to-refresh");
+  const dim = theme.state.disabledOpacity;
+  const labels = useLabels("pullToRefresh", DEFAULT_LABELS, labelsProp);
+  const armLabel = armLabelProp ?? labels.arm;
+  const refreshingLabel = refreshingLabelProp ?? labels.refreshing;
+  const refreshAccessibilityLabel = refreshAccessibilityLabelProp ?? labels.refresh;
   const isAndroid = (indicator ?? (theme.platform === "Android" ? "android" : "ios")) === "android";
   const reduce = theme.reduceMotion;
   const controlled = phase != null;
+  const horizontal = orientation === "horizontal";
   const [ownRefreshing, setOwnRefreshing] = React.useState(false);
   const isRefreshing = refreshing ?? ownRefreshing;
   const [armed, setArmed] = React.useState(false);
@@ -42,11 +67,9 @@ function PullToRefresh({
   const showText = statusText !== "";
   const ringSize = theme.icon.lg;
   const clearance = theme.space.s3;
-  const spinnerBox = isAndroid ? ringSize + clearance * 2 : ringSize;
-  const gap = theme.space.s2;
-  const textBlockH = theme.icon.md + theme.space.s1 * 2;
-  const chromeH = spinnerBox + (showText ? gap + textBlockH : 0);
-  const holdOffset = Math.min(spinnerBox + gap + textBlockH + clearance * 2, MAX_OVERSCROLL_PX);
+  const spinnerBox = isAndroid ? theme.space[40] : ringSize;
+  const chromeH = spinnerBox;
+  const holdOffset = Math.min(spinnerBox + clearance * 2, MAX_OVERSCROLL_PX);
   const offset = React.useRef(new Animated.Value(0)).current;
   const spin = React.useRef(new Animated.Value(0)).current;
   const scrollTop = React.useRef(0);
@@ -114,12 +137,12 @@ function PullToRefresh({
   }, [onRefresh, refreshing, holdOffset, settle]);
   const onTouchStart = (e) => {
     if (controlled) return;
-    const y = touchPageY(e);
+    const y = horizontal ? touchPageX(e) : touchPageY(e);
     if (y != null && scrollTop.current <= SCROLL_TOP_SLOP_PX && !isRefreshing) startY.current = y;
   };
   const onTouchMove = (e) => {
     if (controlled || startY.current == null) return;
-    const y = touchPageY(e);
+    const y = horizontal ? touchPageX(e) : touchPageY(e);
     if (y == null) return;
     band.current = overscrollOffset(y - startY.current);
     setArmedState(band.current > REFRESH_ARM_PX);
@@ -138,6 +161,7 @@ function PullToRefresh({
     beginRefresh();
   };
   const chromeY = reduce ? 0 : Animated.subtract(Animated.multiply(offset, 0.5), chromeH / 2);
+  const chromeShift = horizontal ? { translateX: chromeY } : { translateY: chromeY };
   const revealIn = Math.max(1, chromeH * 0.6);
   const revealFull = Math.max(revealIn + 1, chromeH + clearance);
   const reveal = offset.interpolate({
@@ -161,7 +185,16 @@ function PullToRefresh({
       {
         style: [
           styles.chrome,
-          { opacity: reveal, transform: [{ translateY: chromeY }, { scale: chromeScale }] }
+          horizontal ? [
+            styles.chromeHorizontal,
+            align === "start" && { top: theme.space.s4 },
+            align === "end" && { top: void 0, bottom: theme.space.s4 },
+            align === "center" && { top: "50%", marginTop: -chromeH / 2 }
+          ] : align !== "center" && {
+            alignSelf: align === "start" ? "flex-start" : "flex-end",
+            [align === "start" ? "start" : "end"]: theme.space.s4
+          },
+          { opacity: reveal, transform: [chromeShift, { scale: chromeScale }] }
         ],
         children: [
           /* @__PURE__ */ jsx(
@@ -175,7 +208,7 @@ function PullToRefresh({
                 isAndroid ? styles.spinnerBoxAndroid : null,
                 { width: spinnerBox, height: spinnerBox }
               ],
-              children: /* @__PURE__ */ jsx(
+              children: isAndroid ? /* @__PURE__ */ jsx(
                 Animated.View,
                 {
                   style: [
@@ -188,6 +221,54 @@ function PullToRefresh({
                     }
                   ]
                 }
+              ) : spinner === "arc" ? /* @__PURE__ */ jsx(
+                Animated.View,
+                {
+                  style: [
+                    styles.arc,
+                    {
+                      width: ringSize,
+                      height: ringSize,
+                      borderWidth: theme.icon.strokeBold,
+                      transform: [{ rotate }]
+                    }
+                  ]
+                }
+              ) : (
+                // iOS: the bare activity indicator — text-2 ticks, no disc. Pulling
+                // fills the ticks with the drag; refreshing spins them as a fading tail.
+                /* @__PURE__ */ jsx(
+                  Animated.View,
+                  {
+                    style: {
+                      width: ringSize,
+                      height: ringSize,
+                      transform: [{ rotate: displayRefreshing ? rotate : "0deg" }]
+                    },
+                    children: TICK_INDEX.map((i) => /* @__PURE__ */ jsx(
+                      Animated.View,
+                      {
+                        style: [
+                          styles.tickHolder,
+                          {
+                            transform: [{ rotate: `${i * (360 / TICK_COUNT)}deg` }],
+                            opacity: displayRefreshing ? dim + (1 - dim) * (i + 1) / TICK_COUNT : offset.interpolate({
+                              inputRange: [
+                                0,
+                                revealIn + (revealFull - revealIn) * i / TICK_COUNT,
+                                revealIn + (revealFull - revealIn) * (i + 1) / TICK_COUNT
+                              ],
+                              outputRange: [dim, dim, 1],
+                              extrapolate: "clamp"
+                            })
+                          }
+                        ],
+                        children: /* @__PURE__ */ jsx(View, { style: styles.tick })
+                      },
+                      i
+                    ))
+                  }
+                )
               )
             }
           ),
@@ -198,7 +279,7 @@ function PullToRefresh({
               role: "status",
               accessibilityLiveRegion: "polite",
               accessibilityState: { busy: displayRefreshing },
-              style: showText ? [styles.status, { marginTop: gap }] : styles.statusHidden,
+              style: styles.statusHidden,
               children: showText ? /* @__PURE__ */ jsx(Text, { style: styles.statusText, children: statusText }) : null
             }
           )
@@ -210,47 +291,59 @@ function PullToRefresh({
       {
         onPress: isRefreshing ? void 0 : beginRefresh,
         accessibilityRole: "button",
-        accessibilityLabel: refreshAccessibilityLabel,
+        accessibilityLabel: displayRefreshing ? labels.refreshBusy(refreshAccessibilityLabel, refreshingLabel) : refreshAccessibilityLabel,
         accessibilityState: { busy: isRefreshing, disabled: isRefreshing },
         "aria-busy": isRefreshing || void 0,
-        hitSlop: theme.space.s2,
-        style: styles.refreshButton,
+        style: ({ pressed }) => [
+          styles.refreshButton,
+          pressed ? { backgroundColor: theme.state.pressed } : null
+        ],
         children: /* @__PURE__ */ jsx(Icon, { name: "refresh", size: theme.icon.sm, color: theme.color.text })
       }
     ),
-    /* @__PURE__ */ jsx(Animated.View, { style: [styles.content, { transform: [{ translateY: offset }] }], children: /* @__PURE__ */ jsx(
-      ScrollView,
+    /* @__PURE__ */ jsx(
+      Animated.View,
       {
-        ...rest,
-        focusable: true,
-        scrollEventThrottle: 16,
-        contentContainerStyle: [
-          rest.contentContainerStyle,
-          displayRefreshing ? { paddingBottom: holdOffset } : null
+        style: [
+          styles.content,
+          { transform: [horizontal ? { translateX: offset } : { translateY: offset }] }
         ],
-        onScroll: (e) => {
-          scrollTop.current = e.nativeEvent.contentOffset.y;
-          rest.onScroll?.(e);
-        },
-        onTouchStart: (e) => {
-          onTouchStart(e);
-          rest.onTouchStart?.(e);
-        },
-        onTouchMove: (e) => {
-          onTouchMove(e);
-          rest.onTouchMove?.(e);
-        },
-        onTouchEnd: (e) => {
-          onTouchEnd();
-          rest.onTouchEnd?.(e);
-        },
-        onTouchCancel: (e) => {
-          onTouchEnd();
-          rest.onTouchCancel?.(e);
-        },
-        children
+        children: /* @__PURE__ */ jsx(
+          ScrollView,
+          {
+            ...rest,
+            focusable: true,
+            horizontal: horizontal || rest.horizontal,
+            scrollEventThrottle: 16,
+            contentContainerStyle: [
+              rest.contentContainerStyle,
+              displayRefreshing ? horizontal ? { paddingStart: holdOffset } : { paddingBottom: holdOffset } : null
+            ],
+            onScroll: (e) => {
+              scrollTop.current = horizontal ? e.nativeEvent.contentOffset.x : e.nativeEvent.contentOffset.y;
+              rest.onScroll?.(e);
+            },
+            onTouchStart: (e) => {
+              onTouchStart(e);
+              rest.onTouchStart?.(e);
+            },
+            onTouchMove: (e) => {
+              onTouchMove(e);
+              rest.onTouchMove?.(e);
+            },
+            onTouchEnd: (e) => {
+              onTouchEnd();
+              rest.onTouchEnd?.(e);
+            },
+            onTouchCancel: (e) => {
+              onTouchEnd();
+              rest.onTouchCancel?.(e);
+            },
+            children
+          }
+        )
       }
-    ) })
+    )
   ] });
 }
 var sheet = createStyleSheet((theme) => ({
@@ -267,6 +360,8 @@ var sheet = createStyleSheet((theme) => ({
     // Decorative — the gesture lives on the scroller underneath.
     pointerEvents: "none"
   },
+  // Horizontal: pinned to the start edge instead of the top.
+  chromeHorizontal: { top: 0, start: 0, alignSelf: void 0 },
   spinnerBox: {
     alignItems: "center",
     justifyContent: "center"
@@ -284,22 +379,24 @@ var sheet = createStyleSheet((theme) => ({
     borderColor: theme.edge.neutral,
     ...theme.shadow.md
   },
+  tickHolder: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, alignItems: "center" },
+  tick: {
+    width: theme.borderWidth.heavy,
+    height: theme.space[6],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.text2
+  },
+  arc: {
+    borderRadius: theme.radius.full,
+    borderColor: theme.color.text2,
+    borderRightColor: "transparent"
+  },
   ring: {
     borderRadius: theme.radius.full,
     borderColor: theme.color.surface3,
     borderTopColor: theme.color.accent
   },
-  // The status copy sits on a surface pill so `theme.color.text` clears AA in
-  // both modes regardless of what the freed band reveals behind it.
-  status: {
-    paddingVertical: theme.space.s1,
-    paddingHorizontal: theme.space.s3,
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.surface,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.neutral,
-    ...theme.shadow.sm
-  },
+  // Announced only: the live region keeps its copy but takes no space.
   statusHidden: { width: 0, height: 0, overflow: "hidden" },
   statusText: {
     color: theme.color.text,
@@ -311,15 +408,12 @@ var sheet = createStyleSheet((theme) => ({
     top: theme.space.s2,
     end: theme.space.s2,
     zIndex: theme.z.sticky,
-    width: theme.tapMin,
-    height: theme.tapMin,
+    // A ghost icon Button lg: 44 square, no fill at rest.
+    width: theme.ctl.lg,
+    height: theme.ctl.lg,
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.surface,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.neutral,
-    ...theme.shadow.sm
+    borderRadius: theme.radius.md
   }
 }));
 

package/dist/chunk-RVOIIX3V.js

@@ -0,0 +1,204 @@
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useResolvedMotion, useReducedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Platform, View, ScrollView } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  carousel: "Carousel",
+  nextSlide: "Next slide",
+  previousSlide: "Previous slide",
+  slide: (n, count) => `Slide ${n} of ${count}`
+};
+var DOT_SIZE = { sm: 6, md: 7, lg: 8 };
+function Dot({ active, size }) {
+  const theme = useLoamTheme("carousel");
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      testID: "carousel-dot",
+      style: [
+        styles.dot,
+        {
+          width: theme.space[DOT_SIZE[size]],
+          height: theme.space[DOT_SIZE[size]],
+          backgroundColor: active ? theme.color.accent : theme.color.text3
+        }
+      ]
+    }
+  );
+}
+var webSnapStop = Platform.OS === "web" ? { scrollSnapStop: "always" } : null;
+function Carousel({
+  items,
+  renderItem,
+  children,
+  activeIndex,
+  onIndexChange,
+  showDots = true,
+  autoPlay = false,
+  interval = 4e3,
+  loop = false,
+  accessibilityLabel,
+  motion = "full",
+  size = "md",
+  loading = false,
+  labels: labelsProp
+}) {
+  const labels = useLabels("carousel", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("carousel");
+  const resolvedMotion = useResolvedMotion(motion, "carousel");
+  const osReduced = useReducedMotion();
+  const [userTookOver, setUserTookOver] = React.useState(false);
+  const slides = items && renderItem ? items.map((item, index) => renderItem(item, index)) : React.Children.toArray(children);
+  const count = slides.length;
+  const isControlled = activeIndex !== void 0;
+  const [internal, setInternal] = React.useState(0);
+  const active = Math.min(
+    count - 1,
+    Math.max(0, isControlled ? activeIndex : internal)
+  );
+  const [width, setWidth] = React.useState(0);
+  const scrollRef = React.useRef(null);
+  const onLayout = (e) => {
+    const next = e.nativeEvent.layout.width;
+    setWidth((prev) => prev === next ? prev : next);
+  };
+  const goTo = React.useCallback(
+    (index) => {
+      const clamped = Math.min(count - 1, Math.max(0, index));
+      if (clamped === active) return;
+      if (!isControlled) setInternal(clamped);
+      onIndexChange?.(clamped);
+    },
+    [active, count, isControlled, onIndexChange]
+  );
+  const onMomentumScrollEnd = (e) => {
+    if (width <= 0) return;
+    goTo(Math.round(e.nativeEvent.contentOffset.x / width));
+  };
+  const settle = React.useRef(null);
+  React.useEffect(
+    () => () => {
+      if (settle.current) clearTimeout(settle.current);
+    },
+    []
+  );
+  const onScroll = Platform.OS === "web" ? (e) => {
+    const x = e.nativeEvent.contentOffset.x;
+    if (settle.current) clearTimeout(settle.current);
+    settle.current = setTimeout(() => {
+      if (width > 0) goTo(Math.round(x / width));
+    }, 120);
+  } : void 0;
+  React.useEffect(() => {
+    if (width <= 0) return;
+    scrollRef.current?.scrollTo({ x: active * width, animated: resolvedMotion === "full" });
+  }, [active, width, resolvedMotion]);
+  React.useEffect(() => {
+    if (!autoPlay || count <= 1 || userTookOver || osReduced) return;
+    const id = setInterval(() => {
+      const next = active + 1;
+      if (next >= count) {
+        if (loop) goTo(0);
+      } else {
+        goTo(next);
+      }
+    }, interval);
+    return () => clearInterval(id);
+  }, [autoPlay, interval, loop, active, count, goTo, userTookOver, osReduced]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(View, { style: styles.container, testID: "carousel-loading", "aria-busy": true, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: theme.space[80] * 2, decorative: true, motion }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: styles.container,
+      role: "group",
+      accessibilityLabel: accessibilityLabel ?? labels.carousel,
+      accessibilityActions: count > 1 ? [
+        { name: "increment", label: labels.nextSlide },
+        { name: "decrement", label: labels.previousSlide }
+      ] : void 0,
+      onAccessibilityAction: (e) => {
+        if (e.nativeEvent.actionName === "increment") goTo(Math.min(count - 1, active + 1));
+        else if (e.nativeEvent.actionName === "decrement") goTo(Math.max(0, active - 1));
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollView,
+          {
+            ref: scrollRef,
+            horizontal: true,
+            pagingEnabled: true,
+            focusable: true,
+            showsHorizontalScrollIndicator: false,
+            onLayout,
+            onMomentumScrollEnd,
+            onScrollBeginDrag: () => setUserTookOver(true),
+            onScroll,
+            scrollEventThrottle: 16,
+            style: styles.scroll,
+            children: slides.map((slide, index) => /* @__PURE__ */ jsx(
+              View,
+              {
+                style: [styles.page, width > 0 ? { width } : styles.pageFallback, webSnapStop],
+                accessible: true,
+                role: "group",
+                accessibilityLabel: labels.slide(index + 1, count),
+                children: slide
+              },
+              index
+            ))
+          }
+        ),
+        showDots && count > 1 ? /* @__PURE__ */ jsx(
+          View,
+          {
+            style: styles.dots,
+            accessible: false,
+            importantForAccessibility: "no-hide-descendants",
+            children: slides.map((_, index) => /* @__PURE__ */ jsx(Dot, { active: index === active, size }, index))
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  container: {
+    position: "relative",
+    alignSelf: "stretch",
+    width: "100%"
+  },
+  scroll: {
+    alignSelf: "stretch"
+  },
+  page: {
+    alignSelf: "stretch"
+  },
+  // Before the container has measured itself (e.g. first render / jsdom), fall
+  // back to a full-width page so content still lays out.
+  pageFallback: {
+    width: "100%"
+  },
+  dots: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.space.s2,
+    paddingTop: theme.space.s3,
+    pointerEvents: "none"
+  },
+  dot: {
+    width: theme.space[DOT_SIZE.md],
+    height: theme.space[DOT_SIZE.md],
+    borderRadius: theme.radius.full
+  }
+}));
+
+export { Carousel };