@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-QJJ6MADV.js → chunk-IVKMZ7BB.js}

@@ -1,9 +1,28 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, Text, Pressable } from 'react-native';
+import { Animated, View, Text, Pressable } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  play: "Play",
+  pause: "Pause",
+  mute: "Mute",
+  unmute: "Unmute",
+  captions: "Captions",
+  captionsMark: "CC",
+  fullscreen: "Fullscreen",
+  seek: "Seek",
+  seekValue: (current, total) => `${current} of ${total}`,
+  poster: (aspectRatio) => `Poster ${aspectRatio}`,
+  buffering: "Buffering",
+  error: "This video couldn\u2019t be played.",
+  retry: "Retry",
+  volume: (percent) => `Volume ${percent}%`,
+  speed: (rate) => `Speed ${rate}\xD7`
+};
 var POSTER = {
   /** Inset from the top of the stage. */
   padTop: 10,
@@ -38,11 +57,12 @@ function VideoPlayer({
   onTogglePlay,
   onSeek,
   children,
-  // Inert (see prop docs); destructured so it never reaches a native element.
-  motion: _motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
+  const labels = useLabels("videoPlayer", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("video-player");
   const [ownPlaying, setOwnPlaying] = React.useState(false);
   const [ownPosition, setOwnPosition] = React.useState(0);
   const [trackWidth, setTrackWidth] = React.useState(0);
@@ -50,6 +70,21 @@ function VideoPlayer({
   const isPlaying = playing ?? ownPlaying;
   const current = position ?? ownPosition;
   const pct = duration > 0 ? Math.min(1, Math.max(0, current / duration)) : 0;
+  const level = useResolvedMotion(motion, "video-player");
+  const chrome = React.useRef(new Animated.Value(isPlaying ? 0 : 1)).current;
+  const wasPlaying = React.useRef(isPlaying);
+  React.useEffect(() => {
+    if (wasPlaying.current === isPlaying) return;
+    wasPlaying.current = isPlaying;
+    const to = isPlaying ? 0 : 1;
+    if (level === "none") chrome.setValue(to);
+    else
+      Animated.spring(chrome, {
+        ...springConfig(theme, "de"),
+        toValue: to,
+        useNativeDriver: true
+      }).start();
+  }, [isPlaying, level, chrome, theme]);
   const toggle = () => {
     const next = !isPlaying;
     if (playing == null) setOwnPlaying(next);
@@ -63,33 +98,50 @@ function VideoPlayer({
   };
   return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
     /* @__PURE__ */ jsxs(View, { style: [styles.stage, { aspectRatio }], children: [
-      children ?? /* @__PURE__ */ jsx(View, { style: styles.placeholder, children: /* @__PURE__ */ jsxs(Text, { style: styles.placeholderLabel, children: [
-        "Poster ",
-        Math.round(aspectRatio * 100) / 100
-      ] }) }),
+      children ?? /* @__PURE__ */ jsx(View, { style: styles.placeholder, children: /* @__PURE__ */ jsx(Text, { style: styles.placeholderLabel, children: labels.poster(String(Math.round(aspectRatio * 100) / 100)) }) }),
       /* @__PURE__ */ jsxs(
         Pressable,
         {
           accessibilityRole: "button",
-          accessibilityLabel: isPlaying ? "Pause" : "Play",
+          accessibilityLabel: isPlaying ? labels.pause : labels.play,
           accessibilityState: { selected: isPlaying },
           onPress: toggle,
           style: styles.stagePress,
           children: [
-            /* @__PURE__ */ jsx(View, { style: [styles.scrim, isPlaying ? styles.scrimDim : null] }),
-            !isPlaying ? (
-              // Centred in the stage *above the transport bar*, with explicit insets
-              // so the answer is the same in Yoga and in the browser.
-              /* @__PURE__ */ jsx(View, { style: [styles.playSlot, { bottom: controlsHeight }], children: /* @__PURE__ */ jsx(View, { style: styles.playButton, children: /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  name: "play",
-                  size: theme.icon.md,
-                  color: theme.color.text,
-                  strokeWidth: theme.icon.stroke
-                }
-              ) }) })
-            ) : null
+            /* @__PURE__ */ jsx(
+              Animated.View,
+              {
+                style: [
+                  styles.scrim,
+                  { opacity: chrome.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] }) }
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Animated.View,
+              {
+                pointerEvents: "none",
+                accessibilityElementsHidden: isPlaying,
+                importantForAccessibility: isPlaying ? "no-hide-descendants" : "auto",
+                style: [
+                  styles.playSlot,
+                  {
+                    bottom: controlsHeight,
+                    opacity: chrome,
+                    transform: level === "full" ? [{ scale: chrome.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1] }) }] : []
+                  }
+                ],
+                children: isPlaying && level === "none" ? null : /* @__PURE__ */ jsx(View, { style: styles.playButton, children: /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: "play",
+                    size: theme.icon.md,
+                    color: theme.color.text,
+                    strokeWidth: theme.icon.stroke
+                  }
+                ) })
+              }
+            )
           ]
         }
       ),
@@ -103,11 +155,11 @@ function VideoPlayer({
               Pressable,
               {
                 accessibilityRole: "adjustable",
-                accessibilityLabel: "Seek",
+                accessibilityLabel: labels.seek,
                 "aria-valuemin": 0,
                 "aria-valuemax": Math.round(duration),
                 "aria-valuenow": Math.round(current),
-                "aria-valuetext": `${formatTime(current)} of ${formatTime(duration)}`,
+                "aria-valuetext": labels.seekValue(formatTime(current), formatTime(duration)),
                 accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
                 onAccessibilityAction: (e) => {
                   const delta = e.nativeEvent.actionName === "increment" ? 5 : -5;
@@ -117,9 +169,10 @@ function VideoPlayer({
                 },
                 onLayout: (e) => setTrackWidth(e.nativeEvent.layout.width),
                 onPress: (e) => seekFromX(e.nativeEvent.locationX),
+                onTouchMove: (e) => seekFromX(e.nativeEvent.locationX),
                 hitSlop: theme.space.s3,
                 style: styles.seek,
-                children: /* @__PURE__ */ jsxs(View, { style: styles.track, children: [
+                children: /* @__PURE__ */ jsxs(View, { style: [styles.track, { pointerEvents: "none" }], children: [
                   /* @__PURE__ */ jsx(View, { style: [styles.fill, { width: `${pct * 100}%` }] }),
                   /* @__PURE__ */ jsx(View, { style: [styles.knob, { start: `${pct * 100}%` }] })
                 ] })
@@ -176,7 +229,6 @@ var sheet = createStyleSheet((theme) => ({
   // rather than the mode-aware `overlay.*`: what is underneath is video, and
   // darkening it is the only direction that makes a white glyph legible.
   scrim: { ...cover(), backgroundColor: theme.black.a8 },
-  scrimDim: { backgroundColor: theme.black.a4 },
   // The band of the stage the transport bar does not cover. `bottom` is set from
   // the bar's measured height at render time.
   playSlot: {

package/dist/{chunk-Z7H7VSFZ.js → chunk-IXKWIFWZ.js}

@@ -1,15 +1,19 @@
-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, ScrollView, Pressable, Text } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var CLOSE_ACTIONS = [{ name: "close", label: "Close" }];
 function tabsRevealOffset(triggerX, triggerWidth, stripWidth, viewportWidth) {
   const max = stripWidth - viewportWidth;
   if (max <= 0) return 0;
   return Math.min(Math.max(triggerX + triggerWidth / 2 - viewportWidth / 2, 0), max);
 }
+var DEFAULT_LABELS = {
+  close: "Close",
+  addTab: "Add tab"
+};
 function Tabs({
   items,
   value,
@@ -19,9 +23,16 @@ function Tabs({
   size = "md",
   onClose,
   onAdd,
-  addLabel = "Add tab",
-  motion = "full"
+  addLabel: addLabelProp,
+  motion = "full",
+  labels: labelsProp
 }) {
+  const labels = useLabels("tabs", DEFAULT_LABELS, labelsProp);
+  const addLabel = addLabelProp ?? labels.addTab;
+  const closeActions = React.useMemo(
+    () => [{ name: "close", label: labels.close }],
+    [labels.close]
+  );
   const isControlled = value !== void 0;
   const [internal, setInternal] = React.useState(
     defaultValue ?? items[0]?.value
@@ -32,7 +43,7 @@ function Tabs({
     items.findIndex((item) => item.value === current)
   );
   const activeItem = items[activeIndex];
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("tabs");
   const { styles } = useStyles(sheet, { variant, size });
   const iconSize = size === "sm" ? 16 : 18;
   const closeIconSize = size === "sm" ? 14 : 16;
@@ -130,7 +141,7 @@ function Tabs({
                       accessibilityRole: "tab",
                       accessibilityState: { selected },
                       "aria-selected": selected,
-                      accessibilityActions: item.closable ? CLOSE_ACTIONS : void 0,
+                      accessibilityActions: item.closable ? closeActions : void 0,
                       onAccessibilityAction: item.closable && onClose ? (e) => {
                         if (e.nativeEvent.actionName === "close") onClose(item.value);
                       } : void 0,

package/dist/chunk-J64KGCGX.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { AccessibilityInfo } from 'react-native';
+import { useAppMotionLevel } from '@btndprojects/loam-theme-native';
+import { lowerMotion, SPRING_TOKENS } from '@btndprojects/loam-tokens';
+export { BREAKAWAY, project, releaseVelocity, resist, rubberband } from '@btndprojects/loam-tokens';
+
+// src/lib/motion.ts
+function useReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    let cancelled = false;
+    let sub;
+    try {
+      const query = AccessibilityInfo.isReduceMotionEnabled?.();
+      query?.then((value) => {
+        if (!cancelled) setReduced(value);
+      }).catch(() => {
+      });
+      sub = AccessibilityInfo.addEventListener?.("reduceMotionChanged", (value) => {
+        setReduced(value);
+      });
+    } catch {
+    }
+    return () => {
+      cancelled = true;
+      sub?.remove?.();
+    };
+  }, []);
+  return reduced;
+}
+function useResolvedMotion(motion = "full", component) {
+  const osReduced = useReducedMotion();
+  const app = useAppMotionLevel(component);
+  return lowerMotion(lowerMotion(motion, app), osReduced ? "reduced" : void 0);
+}
+function springConfig(theme, name, opts = {}) {
+  const s = theme.spring[name];
+  const spatial = SPRING_TOKENS[name].family === "spatial";
+  const ratio = opts.thrown && spatial ? Math.min(s.dampingRatio, 0.8) : s.dampingRatio;
+  return {
+    stiffness: s.stiffness,
+    damping: 2 * ratio * Math.sqrt(s.stiffness),
+    mass: 1,
+    velocity: opts.velocity ?? 0,
+    // loam-audit-ignore raw-spring — settle epsilons, not feel: the spring itself comes from the token.
+    restDisplacementThreshold: 1e-3,
+    // loam-audit-ignore raw-spring
+    restSpeedThreshold: 1e-3
+  };
+}
+function motionTiming(level) {
+  return { duration: level === "none" ? 1 : 150 };
+}
+
+export { motionTiming, springConfig, useReducedMotion, useResolvedMotion };

package/dist/chunk-JBMLWFSJ.js

@@ -0,0 +1,270 @@
+import { useReorder } from './chunk-36EC2T6P.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import * as React from 'react';
+import { View, Animated, Pressable, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  list: "Sortable list",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  moveToTop: "Move to top",
+  moveToBottom: "Move to bottom",
+  moved: (label, position, count) => `Moved ${label} to position ${position} of ${count}`,
+  movedNotice: (label) => `Moved ${label}`,
+  restored: (label, position, count) => `Restored ${label} to position ${position} of ${count}`,
+  pickedUp: (label) => `Picked up ${label}`,
+  droppedInPlace: (label) => `${label} dropped where it started`,
+  rowHint: (position, count) => `Position ${position} of ${count}. Press and hold to drag, or use the actions to move it.`
+};
+var rowActions = (labels) => [
+  { name: "moveUp", label: labels.moveUp },
+  { name: "moveDown", label: labels.moveDown },
+  { name: "moveToTop", label: labels.moveToTop },
+  { name: "moveToBottom", label: labels.moveToBottom }
+];
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function Sortable({
+  items,
+  order,
+  defaultOrder,
+  onReorder,
+  onDraggingChange,
+  label: labelProp,
+  numbered = true,
+  handleIcon = "grip",
+  disabled = false,
+  formatAnnouncement,
+  motion = "full",
+  onNotify,
+  style,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("sortable", DEFAULT_LABELS, labelsProp);
+  const label = labelProp ?? labels.list;
+  const ids = React.useMemo(() => items.map((item) => item.id), [items]);
+  const byId = React.useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);
+  const isControlled = order !== void 0;
+  const [internalOrder, setInternalOrder] = React.useState(() => defaultOrder ?? ids);
+  const rawOrder = isControlled ? order : internalOrder;
+  const resolved = React.useMemo(() => {
+    const known = new Set(ids);
+    const kept = rawOrder.filter((id) => known.has(id));
+    const seen = new Set(kept);
+    return [...kept, ...ids.filter((id) => !seen.has(id))];
+  }, [ids, rawOrder]);
+  const [message, setMessage] = React.useState("");
+  const moveTo = (id, index) => {
+    const from = resolved.indexOf(id);
+    const to = clamp(index, 0, resolved.length - 1);
+    if (from < 0 || from === to) return;
+    const next = [...resolved];
+    next.splice(from, 1);
+    next.splice(to, 0, id);
+    if (!isControlled) setInternalOrder(next);
+    const detail = {
+      id,
+      label: byId.get(id)?.label ?? id,
+      from,
+      to,
+      count: next.length
+    };
+    onReorder?.(next, detail);
+    setMessage(
+      formatAnnouncement ? formatAnnouncement(detail) : labels.moved(detail.label, detail.to + 1, detail.count)
+    );
+    if (onNotify) {
+      const before = resolved;
+      onNotify({
+        text: labels.movedNotice(detail.label),
+        undo: () => {
+          if (!isControlled) setInternalOrder(before);
+          onReorder?.(before, { ...detail, from: to, to: from });
+          setMessage(labels.restored(detail.label, from + 1, detail.count));
+        }
+      });
+    }
+  };
+  const draggingRef = React.useRef(onDraggingChange);
+  draggingRef.current = onDraggingChange;
+  const reorder = useReorder({
+    motion,
+    disabled,
+    renderGhost: (id) => {
+      const item = byId.get(id);
+      return item ? /* @__PURE__ */ jsx(
+        RowBody,
+        {
+          item,
+          index: resolved.indexOf(id),
+          numbered,
+          handleIcon,
+          lifted: true
+        }
+      ) : null;
+    },
+    onLift: (id) => {
+      draggingRef.current?.(true);
+      setMessage(labels.pickedUp(byId.get(id)?.label ?? id));
+    },
+    onMove: ({ id, to }) => {
+      draggingRef.current?.(false);
+      moveTo(id, to);
+    },
+    onCancel: (id) => {
+      draggingRef.current?.(false);
+      setMessage(labels.droppedInPlace(byId.get(id)?.label ?? id));
+    }
+  });
+  const step = (id, to) => {
+    if (disabled) return false;
+    const from = resolved.indexOf(id);
+    const target = clamp(to, 0, resolved.length - 1);
+    if (from < 0 || target === from) return false;
+    reorder.animate(() => moveTo(id, target));
+    return true;
+  };
+  const onKey = (event, id) => {
+    if (event.altKey || event.ctrlKey || event.metaKey) return;
+    const index = resolved.indexOf(id);
+    const to = event.key === "ArrowUp" ? index - 1 : event.key === "ArrowDown" ? index + 1 : event.key === "Home" ? 0 : event.key === "End" ? resolved.length - 1 : null;
+    if (to !== null && step(id, to)) event.preventDefault?.();
+  };
+  const onAction = (event, id) => {
+    const index = resolved.indexOf(id);
+    const name = event.nativeEvent.actionName;
+    if (name === "moveUp") step(id, index - 1);
+    else if (name === "moveDown") step(id, index + 1);
+    else if (name === "moveToTop") step(id, 0);
+    else if (name === "moveToBottom") step(id, resolved.length - 1);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: [styles.root, style], children: [
+    /* @__PURE__ */ jsx(View, { role: "list", accessibilityLabel: label, style: styles.list, ...reorder.group("list"), children: resolved.map((id, index) => {
+      const item = byId.get(id);
+      const keyProps = {
+        onKeyDown: (event) => onKey(event, id)
+      };
+      return /* @__PURE__ */ jsx(Animated.View, { role: "listitem", ...reorder.item(id, "list", index), children: /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          ...disabled ? {} : reorder.press(id),
+          disabled,
+          accessibilityRole: "button",
+          accessibilityLabel: item.label,
+          accessibilityHint: labels.rowHint(index + 1, resolved.length),
+          accessibilityState: { disabled },
+          accessibilityActions: disabled ? void 0 : rowActions(labels),
+          onAccessibilityAction: (event) => onAction(event, id),
+          style: ({ pressed }) => [styles.press, pressed && !disabled && styles.pressed],
+          ...keyProps,
+          children: /* @__PURE__ */ jsx(
+            RowBody,
+            {
+              item,
+              index,
+              numbered,
+              handleIcon,
+              disabled
+            }
+          )
+        }
+      ) }, id);
+    }) }),
+    reorder.overlay,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        role: "status",
+        style: styles.srOnly,
+        accessibilityLabel: message,
+        ...{ "aria-live": "polite" },
+        children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: message })
+      }
+    )
+  ] });
+}
+function RowBody({
+  item,
+  index,
+  numbered,
+  handleIcon,
+  lifted = false,
+  disabled = false
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("sortable");
+  return /* @__PURE__ */ jsxs(View, { style: [styles.row, lifted && styles.rowLifted, disabled && styles.rowDisabled], children: [
+    lifted ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.draggedLayer }) : null,
+    /* @__PURE__ */ jsx(
+      Icon,
+      {
+        name: item.icon ?? handleIcon,
+        size: theme.icon.md,
+        color: lifted ? theme.color.accent : theme.color.text3,
+        strokeWidth: theme.icon.stroke
+      }
+    ),
+    numbered ? /* @__PURE__ */ jsx(Text, { style: styles.position, children: index + 1 }) : null,
+    /* @__PURE__ */ jsx(Text, { style: styles.label, numberOfLines: 1, children: item.label }),
+    item.meta ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: item.meta }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { alignSelf: "stretch" },
+  list: { gap: theme.space.s2 },
+  press: { borderRadius: theme.radius.md },
+  pressed: { opacity: theme.state.pressedOpacity },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    minHeight: theme.layout.listRowH,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2,
+    overflow: "hidden"
+  },
+  // Lifted: an accent edge and the dragged state layer; the ghost carries the shadow.
+  rowLifted: { borderColor: theme.focus.ringColor },
+  rowDisabled: { opacity: theme.state.disabledOpacity },
+  draggedLayer: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    backgroundColor: theme.state.dragged
+  },
+  position: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text2
+  },
+  label: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text
+  },
+  meta: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption1.fontSize,
+    color: theme.color.text2
+  },
+  srOnly: {
+    position: "absolute",
+    width: theme.space[1],
+    height: theme.space[1],
+    overflow: "hidden"
+  }
+}));
+
+export { Sortable };

package/dist/{chunk-4BXMXBJO.js → chunk-JJLPBRVZ.js}

@@ -1,10 +1,10 @@
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { View, Animated, Easing, ScrollView } from 'react-native';
 import { Svg, Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-// src/scroll-area/scroll-area.tsx
 var FADE_SIZE = 32;
 function ScrollArea({
   children,
@@ -12,11 +12,12 @@ function ScrollArea({
   fade = false,
   maxHeight,
   maxWidth,
-  motion = "full",
+  motion: motionProp = "full",
   accessibilityLabel
 }) {
+  const motion = useResolvedMotion(motionProp, "scroll-area");
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("scroll-area");
   const horizontal = orientation === "horizontal";
   const axis = horizontal ? "x" : "y";
   const [container, setContainer] = React.useState(0);
@@ -115,20 +116,30 @@ function Fade({
       opacity.setValue(to);
     }
   }, [visible, motion, opacity, hoverDuration, hoverEasing]);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("scroll-area");
   const fade = theme.space[FADE_SIZE];
   const vertical = side === "top" || side === "bottom";
   const solidAtStart = side === "top" || side === "start";
   const coords = vertical ? { x1: "0", y1: "0", x2: "0", y2: "1" } : { x1: "0", y1: "0", x2: "1", y2: "0" };
   const box = side === "top" ? { top: 0, left: 0, right: 0, height: fade } : side === "bottom" ? { bottom: 0, left: 0, right: 0, height: fade } : side === "start" ? { top: 0, bottom: 0, start: 0, width: fade } : { top: 0, bottom: 0, end: 0, width: fade };
   const id = `loam-scroll-fade-${side}`;
-  return /* @__PURE__ */ jsx(Animated.View, { style: [{ position: "absolute", opacity, pointerEvents: "none" }, box], children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
-    /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(LinearGradient, { id, x1: coords.x1, y1: coords.y1, x2: coords.x2, y2: coords.y2, children: [
-      /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: color, stopOpacity: solidAtStart ? 1 : 0 }),
-      /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: color, stopOpacity: solidAtStart ? 0 : 1 })
-    ] }) }),
-    /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${id})` })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      accessible: false,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      "aria-hidden": true,
+      style: [{ position: "absolute", opacity, pointerEvents: "none" }, box],
+      children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
+        /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(LinearGradient, { id, x1: coords.x1, y1: coords.y1, x2: coords.x2, y2: coords.y2, children: [
+          /* @__PURE__ */ jsx(Stop, { offset: "0", stopColor: color, stopOpacity: solidAtStart ? 1 : 0 }),
+          /* @__PURE__ */ jsx(Stop, { offset: "1", stopColor: color, stopOpacity: solidAtStart ? 0 : 1 })
+        ] }) }),
+        /* @__PURE__ */ jsx(Rect, { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${id})` })
+      ] })
+    }
+  );
 }
 var sheet = createStyleSheet((theme) => ({
   root: {