@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/chunk-UXGIW7OK.js

@@ -0,0 +1,116 @@
+import 'react';
+import { Svg, Circle, Line, Rect, Polyline, Polygon, Ellipse, Path } from 'react-native-svg';
+import { icons } from '@btndprojects/loam-icons';
+import { useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx } from 'react/jsx-runtime';
+
+// src/lib/icon.tsx
+function Icon({
+  name,
+  size = 20,
+  color,
+  strokeWidth = 1.5,
+  accessibilityLabel
+}) {
+  const theme = useLoamTheme();
+  const stroke = color ?? theme.color.text;
+  return /* @__PURE__ */ jsx(
+    Svg,
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      ...accessibilityLabel ? { accessible: true, accessibilityRole: "image", accessibilityLabel } : {
+        accessible: false,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        "aria-hidden": true
+      },
+      children: icons[name].map((p, i) => {
+        if (p.t === "circle")
+          return p.fill ? /* @__PURE__ */ jsx(Circle, { cx: p.cx, cy: p.cy, r: p.r, fill: stroke }, i) : /* @__PURE__ */ jsx(Circle, { cx: p.cx, cy: p.cy, r: p.r, stroke, strokeWidth }, i);
+        if (p.t === "line")
+          return /* @__PURE__ */ jsx(
+            Line,
+            {
+              x1: p.x1,
+              y1: p.y1,
+              x2: p.x2,
+              y2: p.y2,
+              stroke,
+              strokeWidth,
+              strokeLinecap: "round"
+            },
+            i
+          );
+        if (p.t === "rect")
+          return /* @__PURE__ */ jsx(
+            Rect,
+            {
+              x: p.x,
+              y: p.y,
+              width: p.width,
+              height: p.height,
+              rx: p.rx,
+              ry: p.ry,
+              stroke,
+              strokeWidth,
+              strokeLinejoin: "round"
+            },
+            i
+          );
+        if (p.t === "polyline")
+          return /* @__PURE__ */ jsx(
+            Polyline,
+            {
+              points: p.points,
+              stroke,
+              strokeWidth,
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            },
+            i
+          );
+        if (p.t === "polygon")
+          return /* @__PURE__ */ jsx(
+            Polygon,
+            {
+              points: p.points,
+              stroke,
+              strokeWidth,
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            },
+            i
+          );
+        if (p.t === "ellipse")
+          return /* @__PURE__ */ jsx(
+            Ellipse,
+            {
+              cx: p.cx,
+              cy: p.cy,
+              rx: p.rx,
+              ry: p.ry,
+              stroke,
+              strokeWidth
+            },
+            i
+          );
+        return /* @__PURE__ */ jsx(
+          Path,
+          {
+            d: p.d,
+            stroke,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          },
+          i
+        );
+      })
+    }
+  );
+}
+
+export { Icon };

package/dist/{chunk-PJXUJYS6.js → chunk-UYGDJWMN.js}

@@ -1,43 +1,63 @@
-import { Progress } from './chunk-2ZZ7TDJ4.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Progress } from './chunk-5UTRIXQ6.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
 import { View, Text, Animated, Easing } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  hint: "PNG, JPG or PDF \xB7 up to 25 MB each",
+  camera: "Camera",
+  library: "Library",
+  permissionTitle: "Permission needed",
+  permissionBody: "Allow camera and photo access in Settings to upload.",
+  openSettings: "Open settings",
+  done: "Done",
+  failed: "Failed",
+  queued: "Queued",
+  progressRemaining: (percent2, remaining) => `${percent2}% \xB7 ${remaining}`,
+  phraseDone: (size) => size ? `uploaded, ${size}` : "uploaded",
+  phraseFailed: (error) => error ? `upload failed, ${error}` : "upload failed",
+  phraseQueued: "queued",
+  phraseUploading: (percent2) => `uploading, ${percent2} percent`,
+  uploading: (name) => `Uploading ${name}`,
+  retry: (name) => `Retry ${name}`,
+  remove: (name) => `Remove ${name}`
+};
 function clamp(n, lo, hi) {
   return Math.max(lo, Math.min(hi, n));
 }
 function percent(progress) {
   return Math.round(clamp(progress ?? 0, 0, 1) * 100);
 }
-function statusLabel(file) {
+function statusLabel(file, labels) {
   switch (file.status) {
     case "done":
-      return file.size ?? "Done";
+      return [file.fileType, file.size].filter(Boolean).join(" \xB7 ") || labels.done;
     case "error":
-      return "Failed";
+      return labels.failed;
     case "queued":
-      return "Queued";
+      return labels.queued;
     default:
-      return `${percent(file.progress)}%`;
+      return file.remaining ? labels.progressRemaining(percent(file.progress), file.remaining) : `${percent(file.progress)}%`;
   }
 }
-function statusPhrase(file) {
+function statusPhrase(file, labels) {
   switch (file.status) {
     case "done":
-      return file.size ? `uploaded, ${file.size}` : "uploaded";
+      return labels.phraseDone(file.size);
     case "error":
-      return file.error ? `upload failed, ${file.error}` : "upload failed";
+      return labels.phraseFailed(file.error);
     case "queued":
-      return "queued";
+      return labels.phraseQueued;
     default:
-      return `uploading, ${percent(file.progress)} percent`;
+      return labels.phraseUploading(percent(file.progress));
   }
 }
-function FileUploadRow({ file, onRetry, onRemove, motion }) {
-  const theme = useLoamTheme();
+function FileUploadRow({ file, onRetry, onRemove, motion, labels }) {
+  const theme = useLoamTheme("file-upload");
   const { styles } = useStyles(sheet);
   const isError = file.status === "error";
   const isDone = file.status === "done";
@@ -82,19 +102,20 @@ function FileUploadRow({ file, onRetry, onRemove, motion }) {
           Text,
           {
             numberOfLines: 1,
-            accessibilityLabel: `${file.name}, ${statusPhrase(file)}`,
+            accessibilityLabel: `${file.name}, ${statusPhrase(file, labels)}`,
             style: styles.name,
             children: file.name
           }
         ),
-        /* @__PURE__ */ jsx(Text, { style: [styles.status, { color: isError ? theme.color.danger : theme.color.text2 }], children: statusLabel(file) })
+        /* @__PURE__ */ jsx(Text, { style: [styles.status, { color: isError ? theme.color.danger : theme.color.text2 }], children: statusLabel(file, labels) })
       ] }),
+      isError && file.error ? /* @__PURE__ */ jsx(Text, { style: [styles.status, { color: theme.color.danger }], children: file.error }) : null,
       isUploading ? /* @__PURE__ */ jsx(
         Progress,
         {
           size: "sm",
           value: percent(file.progress),
-          accessibilityLabel: `Uploading ${file.name}`
+          accessibilityLabel: labels.uploading(file.name)
         }
       ) : null
     ] }),
@@ -104,7 +125,7 @@ function FileUploadRow({ file, onRetry, onRemove, motion }) {
         variant: "ghost",
         size: "sm",
         leadingIcon: "refresh",
-        accessibilityLabel: `Retry ${file.name}`,
+        accessibilityLabel: labels.retry(file.name),
         onPress: onRetry ? () => onRetry(file.id) : void 0
       }
     ) : /* @__PURE__ */ jsx(
@@ -113,7 +134,7 @@ function FileUploadRow({ file, onRetry, onRemove, motion }) {
         variant: "ghost",
         size: "sm",
         leadingIcon: "x",
-        accessibilityLabel: `Remove ${file.name}`,
+        accessibilityLabel: labels.remove(file.name),
         onPress: onRemove ? () => onRemove(file.id) : void 0
       }
     )
@@ -128,19 +149,22 @@ function FileUpload({
   permissionState = "granted",
   onOpenSettings,
   accept: _accept,
-  hint = "PNG, JPG or PDF \xB7 up to 25 MB each",
-  motion = "reduced"
+  hint: hintProp,
+  motion = "reduced",
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("file-upload");
   const { styles } = useStyles(sheet);
+  const labels = useLabels("fileUpload", DEFAULT_LABELS, labelsProp);
+  const hint = hintProp ?? labels.hint;
   const denied = permissionState === "denied";
   return /* @__PURE__ */ jsxs(View, { style: styles.rootWrap, children: [
     denied ? /* @__PURE__ */ jsxs(View, { style: styles.denied, children: [
       /* @__PURE__ */ jsxs(View, { style: styles.deniedHead, children: [
         /* @__PURE__ */ jsx(Icon, { name: "lock", size: theme.icon.md, color: theme.color.warnOnSoft }),
         /* @__PURE__ */ jsxs(View, { style: styles.main, children: [
-          /* @__PURE__ */ jsx(Text, { style: [styles.deniedTitle, { color: theme.color.warnOnSoft }], children: "Permission needed" }),
-          /* @__PURE__ */ jsx(Text, { style: [styles.deniedBody, { color: theme.color.warnOnSoft }], children: "Allow camera and photo access in Settings to upload." })
+          /* @__PURE__ */ jsx(Text, { style: [styles.deniedTitle, { color: theme.color.warnOnSoft }], children: labels.permissionTitle }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.deniedBody, { color: theme.color.warnOnSoft }], children: labels.permissionBody })
         ] })
       ] }),
       /* @__PURE__ */ jsx(
@@ -149,15 +173,15 @@ function FileUpload({
           variant: "outline",
           size: "sm",
           leadingIcon: "settings",
-          accessibilityLabel: "Open settings",
+          accessibilityLabel: labels.openSettings,
           onPress: onOpenSettings,
-          children: "Open settings"
+          children: labels.openSettings
         }
       )
     ] }) : /* @__PURE__ */ jsxs(View, { style: styles.entry, children: [
       /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
-        /* @__PURE__ */ jsx(View, { style: styles.actionItem, children: /* @__PURE__ */ jsx(Button, { variant: "outline", leadingIcon: "maximize", fullWidth: true, onPress: onPickCamera, children: "Camera" }) }),
-        /* @__PURE__ */ jsx(View, { style: styles.actionItem, children: /* @__PURE__ */ jsx(Button, { variant: "outline", leadingIcon: "image", fullWidth: true, onPress: onPickLibrary, children: "Library" }) })
+        /* @__PURE__ */ jsx(View, { style: styles.actionItem, children: /* @__PURE__ */ jsx(Button, { variant: "outline", leadingIcon: "maximize", fullWidth: true, onPress: onPickCamera, children: labels.camera }) }),
+        /* @__PURE__ */ jsx(View, { style: styles.actionItem, children: /* @__PURE__ */ jsx(Button, { variant: "outline", leadingIcon: "image", fullWidth: true, onPress: onPickLibrary, children: labels.library }) })
       ] }),
       hint ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint }) : null
     ] }),
@@ -167,7 +191,8 @@ function FileUpload({
         file,
         onRetry,
         onRemove,
-        motion
+        motion,
+        labels
       },
       file.id
     )) }) : null

package/dist/{chunk-QDYDBCFP.js → chunk-V2OEB75Z.js}

@@ -1,12 +1,21 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig, motionTiming } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, Image, Text } from 'react-native';
+import { Animated, View, Text, StyleSheet, Image } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var SIZE_PX = { xs: 28, sm: 36, md: 48, lg: 60, xl: 76 };
+var DEFAULT_LABELS = {
+  avatar: "Avatar",
+  online: "online",
+  offline: "offline",
+  busy: "busy",
+  away: "away"
+};
 function useStatusColor(status) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("avatar");
   if (!status) return void 0;
   switch (status) {
     case "online":
@@ -54,19 +63,32 @@ function Avatar({
   shape = "circle",
   accent = false,
   hashed = false,
-  // Inert (see prop docs); destructured so it never reaches a native element.
-  motion: _motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
+  const labels = useLabels("avatar", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet, { size, accent });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("avatar");
   const [errored, setErrored] = React.useState(false);
   const statusColor = useStatusColor(status);
+  const level = useResolvedMotion(motion, "avatar");
+  const photo = React.useRef(new Animated.Value(0)).current;
+  const pop = React.useRef(new Animated.Value(level === "full" ? 0 : 1)).current;
+  React.useEffect(() => {
+    if (level !== "full") return;
+    Animated.spring(pop, { ...springConfig(theme, "fs"), toValue: 1, useNativeDriver: true }).start();
+  }, []);
+  const onLoad = () => {
+    if (level === "none") photo.setValue(1);
+    else Animated.timing(photo, { ...motionTiming(level), toValue: 1, useNativeDriver: true }).start();
+  };
   const dim = SIZE_PX[size];
   const showImage = Boolean(src) && !errored;
   const initials = initialsFromName(name);
   const hashPair = hashed && initials ? hashedColors(theme, id ?? name) : void 0;
   const fg = hashPair ? hashPair.ink : accent ? theme.color.accentOnSoft : theme.color.text2;
-  const label = name ?? "Avatar";
+  const label = name ?? labels.avatar;
+  const statusLabel = status ? labels[status] : void 0;
   const shapeRadius = shape === "circle" ? theme.radius.full : shape === "rounded" ? theme.radius.lg : Math.round(dim * 0.32);
   const shapeStyle = {
     borderRadius: shapeRadius,
@@ -83,7 +105,11 @@ function Avatar({
     borderRadius: theme.radius.full,
     borderWidth: ring,
     borderColor: theme.color.surface,
-    backgroundColor: statusColor
+    backgroundColor: statusColor,
+    // Each state has its own silhouette as well as its own hue, so online/busy
+    // never rest on red-versus-green alone: online a solid disc, offline a
+    // hollow one, busy a diamond, away a square.
+    ...status === "offline" ? { backgroundColor: theme.color.surface, borderColor: statusColor } : status === "busy" ? { borderRadius: theme.radius.sm, transform: [{ rotate: "45deg" }] } : status === "away" ? { borderRadius: 0 } : null
   };
   const ringStyle = {
     position: "absolute",
@@ -94,40 +120,28 @@ function Avatar({
     borderRadius: shape === "circle" ? theme.radius.full : shapeRadius + ring + 1,
     borderWidth: ring,
     borderColor: statusColor,
+    // Line style carries the state alongside the hue.
+    borderStyle: status === "offline" ? "dashed" : status === "away" ? "dotted" : "solid",
     ...shape === "squircle" ? { borderCurve: "continuous" } : null
   };
   return /* @__PURE__ */ jsxs(View, { style: styles.root, accessibilityRole: "image", accessibilityLabel: label, children: [
-    /* @__PURE__ */ jsx(View, { style: [styles.circle, shapeStyle, hashPair ? { backgroundColor: hashPair.bg } : null], children: showImage ? /* @__PURE__ */ jsx(Image, { source: { uri: src }, style: styles.image, onError: () => setErrored(true) }) : initials ? /* @__PURE__ */ jsx(Text, { style: [styles.initials, { color: fg }], children: initials }) : /* @__PURE__ */ jsx(Icon, { name: "user", size: Math.round(dim * 0.5), color: fg }) }),
-    statusColor && presence === "ring" ? /* @__PURE__ */ jsx(View, { style: ringStyle, accessibilityRole: "image", accessibilityLabel: status }) : null,
-    statusColor && presence === "dot" ? /* @__PURE__ */ jsx(View, { style: dotStyle, accessibilityRole: "image", accessibilityLabel: status }) : null
-  ] });
-}
-function AvatarGroup({ children, size = "md", max }) {
-  const { styles } = useStyles(sheet, { size, accent: false });
-  const theme = useLoamTheme();
-  const dim = SIZE_PX[size];
-  const ring = 2.5;
-  const overlap = Math.round(dim * 0.3);
-  const all = React.Children.toArray(children);
-  const visible = typeof max === "number" ? all.slice(0, max) : all;
-  const extra = all.length - visible.length;
-  const wrapper = (index) => ({
-    backgroundColor: theme.color.surface,
-    borderRadius: theme.radius.full,
-    padding: ring,
-    marginStart: index === 0 ? 0 : -overlap
-  });
-  return /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
-    visible.map((child, i) => /* @__PURE__ */ jsx(View, { style: wrapper(i), children: React.isValidElement(child) ? React.cloneElement(child, { size }) : child }, i)),
-    extra > 0 ? /* @__PURE__ */ jsx(View, { style: wrapper(visible.length), children: /* @__PURE__ */ jsx(View, { style: styles.circle, children: /* @__PURE__ */ jsxs(Text, { style: styles.overflow, children: [
-      "+",
-      extra
-    ] }) }) }) : null
+    /* @__PURE__ */ jsxs(View, { style: [styles.circle, shapeStyle, hashPair ? { backgroundColor: hashPair.bg } : null], children: [
+      initials ? /* @__PURE__ */ jsx(Text, { style: [styles.initials, { color: fg }], children: initials }) : /* @__PURE__ */ jsx(Icon, { name: "user", size: Math.round(dim * 0.5), color: fg }),
+      showImage ? /* @__PURE__ */ jsx(Animated.View, { style: [StyleSheet.absoluteFill, { opacity: photo }], children: /* @__PURE__ */ jsx(Image, { source: { uri: src }, style: styles.image, onLoad, onError: () => setErrored(true) }) }) : null
+    ] }),
+    statusColor && presence === "ring" ? /* @__PURE__ */ jsx(View, { style: ringStyle, accessibilityRole: "image", accessibilityLabel: statusLabel }) : null,
+    statusColor && presence === "dot" ? /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [dotStyle, { transform: [...dotStyle.transform ?? [], { scale: pop }] }],
+        accessibilityRole: "image",
+        accessibilityLabel: statusLabel
+      }
+    ) : null
   ] });
 }
 var sheet = createStyleSheet((theme) => ({
   root: { position: "relative" },
-  group: { flexDirection: "row", alignItems: "center" },
   circle: {
     alignItems: "center",
     justifyContent: "center",
@@ -176,22 +190,7 @@ var sheet = createStyleSheet((theme) => ({
         false: { color: theme.color.text2 }
       }
     }
-  },
-  overflow: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    color: theme.color.text2,
-    variants: {
-      size: {
-        xs: { fontSize: theme.fontSize[9] },
-        sm: { fontSize: theme.fontSize[12] },
-        md: { fontSize: theme.fontSize[16] },
-        lg: { fontSize: theme.fontSize[20] },
-        xl: { fontSize: theme.fontSize[25] }
-      },
-      accent: {}
-    }
   }
 }));
 
-export { Avatar, AvatarGroup, hashToChartIndex, initialsFromName };
+export { Avatar, hashToChartIndex, initialsFromName };

package/dist/{chunk-LSS54GLJ.js → chunk-VAOAKWUK.js}

@@ -1,24 +1,37 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import 'react';
-import { View, Text, Pressable } from 'react-native';
+import { View, Text, Pressable, LayoutAnimation } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  items: "items",
+  showing: (shown, total, noun) => `Showing ${shown} of ${total} ${noun}`,
+  showAllName: (total, noun) => `Show all ${total} ${noun}`,
+  showAll: (total) => `Show all ${total}`
+};
 function TruncationNotice({
   shown,
   total,
-  noun = "items",
+  noun: nounProp,
   onShowAll,
   actionIcon = "arrow-down",
   variant = "inline",
   size = "md",
-  // Accepted for API consistency; intentionally unused (static feedback).
-  motion: _motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
+  const labels = useLabels("truncationNotice", DEFAULT_LABELS, labelsProp);
+  const locale = useLoamLocale();
+  const noun = nounProp ?? labels.items;
   const { styles } = useStyles(sheet, { variant, size });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("truncation-notice");
+  const level = useResolvedMotion(motion, "truncation-notice");
   if (shown >= total) return null;
-  const message = `Showing ${shown.toLocaleString()} of ${total.toLocaleString()} ${noun}`;
+  const totalText = total.toLocaleString(locale);
+  const message = labels.showing(shown.toLocaleString(locale), totalText, noun);
   const iconSize = size === "sm" ? theme.icon.xs : theme.icon.sm;
   const pad = variant === "bar" ? size === "sm" ? { paddingHorizontal: theme.space.s3, paddingVertical: theme.space.s2 } : { paddingHorizontal: theme.space.s4, paddingVertical: theme.space.s3 } : null;
   return /* @__PURE__ */ jsxs(View, { style: [styles.base, pad], children: [
@@ -27,15 +40,23 @@ function TruncationNotice({
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: `Show all ${total.toLocaleString()} ${noun}`,
-        onPress: onShowAll,
+        accessibilityLabel: labels.showAllName(totalText, noun),
+        onPress: () => {
+          if (level === "full") {
+            const ds = theme.spring.ds;
+            LayoutAnimation.configureNext({
+              duration: ds.duration,
+              create: { type: "easeInEaseOut", property: "opacity" },
+              update: { type: "spring", springDamping: ds.dampingRatio },
+              delete: { type: "easeInEaseOut", property: "opacity" }
+            });
+          }
+          onShowAll();
+        },
         hitSlop: { top: theme.space.s2, bottom: theme.space.s2 },
         style: ({ pressed }) => [styles.action, pressed ? styles.pressed : null],
         children: [
-          /* @__PURE__ */ jsxs(Text, { style: styles.actionLabel, children: [
-            "Show all ",
-            total.toLocaleString()
-          ] }),
+          /* @__PURE__ */ jsx(Text, { style: styles.actionLabel, children: labels.showAll(totalText) }),
           actionIcon ? /* @__PURE__ */ jsx(Icon, { name: actionIcon, size: iconSize, color: theme.color.accentStrong }) : null
         ]
       }

package/dist/{chunk-DM5QUKKO.js → chunk-VDPK5CY4.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-UXGIW7OK.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';
@@ -15,20 +16,31 @@ function touchPageY(e) {
 function isThenable(v) {
   return typeof v?.then === "function";
 }
+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",
+  armLabel: armLabelProp,
+  refreshingLabel: refreshingLabelProp,
+  refreshAccessibilityLabel: refreshAccessibilityLabelProp,
+  labels: labelsProp,
   children,
   ...rest
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("pull-to-refresh");
+  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;
@@ -210,7 +222,7 @@ 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,

package/dist/chunk-W23G6JLF.js

@@ -0,0 +1,37 @@
+import { Platform, AccessibilityInfo } from 'react-native';
+
+// src/lib/a11y.ts
+function expandedProps(expanded) {
+  return { "aria-expanded": expanded };
+}
+var NAMED_ROLE = Platform.OS === "web" ? "image" : "text";
+var webRegions = {};
+function webRegion(politeness) {
+  if (typeof document === "undefined") return null;
+  const existing = webRegions[politeness];
+  if (existing?.isConnected) return existing;
+  const el = document.createElement("div");
+  el.setAttribute("aria-live", politeness);
+  el.setAttribute("aria-atomic", "true");
+  el.setAttribute("data-loam-announcer", politeness);
+  el.style.cssText = // loam-audit-ignore raw-length-in-string — the sr-only clip is a DOM idiom, not a design length.
+  "position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0";
+  document.body.appendChild(el);
+  webRegions[politeness] = el;
+  return el;
+}
+function announce(message, politeness = "polite") {
+  if (!message) return;
+  if (Platform.OS !== "web") {
+    AccessibilityInfo.announceForAccessibility?.(message);
+    return;
+  }
+  const region = webRegion(politeness);
+  if (!region) return;
+  region.textContent = "";
+  setTimeout(() => {
+    region.textContent = message;
+  }, 50);
+}
+
+export { NAMED_ROLE, announce, expandedProps };