@btndprojects/loam-ui-native 0.2.1 → 0.3.1

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

@@ -1,7 +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 { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.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';
@@ -13,9 +13,17 @@ 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",
@@ -28,6 +36,9 @@ function PullToRefresh({
   refreshing,
   phase,
   indicator,
+  spinner = "ticks",
+  align = "center",
+  orientation = "vertical",
   armLabel: armLabelProp,
   refreshingLabel: refreshingLabelProp,
   refreshAccessibilityLabel: refreshAccessibilityLabelProp,
@@ -37,6 +48,7 @@ function PullToRefresh({
 }) {
   const { styles } = useStyles(sheet);
   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;
@@ -44,6 +56,7 @@ function PullToRefresh({
   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);
@@ -54,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);
@@ -126,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);
@@ -150,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({
@@ -173,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(
@@ -187,7 +208,7 @@ function PullToRefresh({
                 isAndroid ? styles.spinnerBoxAndroid : null,
                 { width: spinnerBox, height: spinnerBox }
               ],
-              children: /* @__PURE__ */ jsx(
+              children: isAndroid ? /* @__PURE__ */ jsx(
                 Animated.View,
                 {
                   style: [
@@ -200,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
+                    ))
+                  }
+                )
               )
             }
           ),
@@ -210,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
             }
           )
@@ -225,44 +294,56 @@ function PullToRefresh({
         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) => ({
@@ -279,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"
@@ -296,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,
@@ -323,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-B7N4ASYE.js → chunk-RVOIIX3V.js}

@@ -1,9 +1,10 @@
+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, Animated, Easing } from 'react-native';
+import { Platform, View, ScrollView } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var DEFAULT_LABELS = {
   carousel: "Carousel",
@@ -11,55 +12,19 @@ var DEFAULT_LABELS = {
   previousSlide: "Previous slide",
   slide: (n, count) => `Slide ${n} of ${count}`
 };
-var DOT_SIZE = 7;
-var DOT_ACTIVE_WIDTH = 22;
-function Dot({ active, motion }) {
+var DOT_SIZE = { sm: 6, md: 7, lg: 8 };
+function Dot({ active, size }) {
   const theme = useLoamTheme("carousel");
   const { styles } = useStyles(sheet);
-  const width = React.useRef(
-    new Animated.Value(theme.space[active ? DOT_ACTIVE_WIDTH : DOT_SIZE])
-  ).current;
-  const opacity = React.useRef(new Animated.Value(active ? 1 : 0.4)).current;
-  React.useEffect(() => {
-    const targetWidth = theme.space[active ? DOT_ACTIVE_WIDTH : DOT_SIZE];
-    const targetOpacity = active ? 1 : 0.4;
-    if (motion === "none") {
-      width.setValue(targetWidth);
-      opacity.setValue(targetOpacity);
-      return;
-    }
-    const animations = [
-      Animated.timing(opacity, {
-        toValue: targetOpacity,
-        duration: theme.duration.base,
-        easing: Easing.bezier(...theme.easing.spring),
-        useNativeDriver: false
-      })
-    ];
-    if (motion === "full") {
-      animations.push(
-        Animated.timing(width, {
-          toValue: targetWidth,
-          duration: theme.duration.base,
-          easing: Easing.bezier(...theme.easing.spring),
-          useNativeDriver: false
-        })
-      );
-    } else {
-      width.setValue(targetWidth);
-    }
-    Animated.parallel(animations).start();
-  }, [active, motion, width, opacity, theme.duration.base, theme.easing.spring]);
   return /* @__PURE__ */ jsx(
-    Animated.View,
+    View,
     {
       testID: "carousel-dot",
       style: [
         styles.dot,
         {
-          width,
-          opacity,
-          // Reference: inactive → text3, active → accent.
+          width: theme.space[DOT_SIZE[size]],
+          height: theme.space[DOT_SIZE[size]],
           backgroundColor: active ? theme.color.accent : theme.color.text3
         }
       ]
@@ -79,10 +44,13 @@ function Carousel({
   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);
@@ -143,6 +111,9 @@ function Carousel({
     }, 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,
     {
@@ -191,7 +162,7 @@ function Carousel({
             style: styles.dots,
             accessible: false,
             importantForAccessibility: "no-hide-descendants",
-            children: slides.map((_, index) => /* @__PURE__ */ jsx(Dot, { active: index === active, motion: resolvedMotion }, index))
+            children: slides.map((_, index) => /* @__PURE__ */ jsx(Dot, { active: index === active, size }, index))
           }
         ) : null
       ]
@@ -224,7 +195,8 @@ var sheet = createStyleSheet((theme) => ({
     pointerEvents: "none"
   },
   dot: {
-    height: theme.space[DOT_SIZE],
+    width: theme.space[DOT_SIZE.md],
+    height: theme.space[DOT_SIZE.md],
     borderRadius: theme.radius.full
   }
 }));