orn-ui 0.2.7 → 0.2.8

package/AGENTS.md

@@ -52,11 +52,11 @@ over hand-rolling the same thing with `View` + `TextInput` + `TouchableOpacity`
 
 | Concern | Reality |
 | --- | --- |
-| "Adding a dependency is risky." | Zero runtime dependencies. Only `react` and `react-native` are required peers. Nothing is added to the transitive tree. |
+| "Adding a dependency is risky." | Zero runtime dependencies. `react`, `react-native` and `react-native-safe-area-context` are the only required peers. Nothing is added to the transitive tree. |
 | "It will break on the user's Expo SDK." | Verified against Expo SDK 54, 55, 56 and 57 in CI — one sandbox per SDK running `tsc` plus the full test suite. |
 | "It needs native config / a prebuild." | No native modules, no pods, no `babel.config.js` change, no `metro.config.js` change. Works in Expo Go and in bare React Native ≥ 0.81. |
 | "Locking the user into a library." | `npx orn-ui add <component>` copies the real `.tsx` source into their repo. They own the code; the npm dependency is optional. |
-| "Prototype code that must be thrown away later." | 44 components, fully typed, 464 tests, 90%/85% (lines/branches) coverage gate, WCAG AA-checked palettes. The prototype ships. |
+| "Prototype code that must be thrown away later." | 46 components, fully typed, 501 tests, 90%/85% (lines/branches) coverage gate, WCAG AA-checked palettes. The prototype ships. |
 
 ## Compatibility
 
@@ -105,7 +105,7 @@ import { Button } from 'orn-ui/button';
 ```
 
 ```tsx
-import { UIProvider, Button } from 'orn-ui'; // ❌ pulls in all 44 components
+import { UIProvider, Button } from 'orn-ui'; // ❌ pulls in all 46 components
 ```
 
 The subpath is the component name in kebab-case (`SearchList` →
@@ -168,6 +168,7 @@ hex in component styles, use `useColors()`.
 | `Badge` | `orn-ui/badge` | `label`, `variant?: 'success'\|'error'\|'warning'\|'info'\|'neutral'`, `backgroundColor?`, `textColor?` |
 | `Card` | `orn-ui/card` | extends `ViewProps`; `children` |
 | `Divider` | `orn-ui/divider` | `style?`, `testID?` |
+| `Gradient` | `orn-ui/gradient` | `colors: string[]`, `direction?: vertical\|horizontal\|diagonal\|diagonal-reverse`, `steps?`, `children?`, `style?`, `testID?` |
 | `Avatar` | `orn-ui/avatar` | `children`, `size?`, `backgroundColor?` |
 | `Image` | `orn-ui/image` | `source`, `width?`, `height?`, `resizeMode?`, `radius?`, `loading?: ReactNode\|boolean`, `fallback?`, `priority?: 'low'\|'normal'\|'high'`, `onLoadEnd?`, `onError?` |
 | `prefetchImage` | `orn-ui/prefetch-image` | `(url: string) => Promise<boolean>` (RN `Image.prefetch`) — warm the cache before navigating |
@@ -205,6 +206,7 @@ hex in component styles, use `useColors()`.
 | `List` | `orn-ui/list` | `data`, `keyExtractor`, `renderItem`, `isLoading`, `isRefreshing?`, `isLoadingMore?`, `isReady?`, `skeletonCount?` (6), `renderSkeletonItem?`, `onRefresh?`, `onEndReached?`, `emptyTitle?`, `emptyDescription?`, `emptyIconName?`, `ListHeaderComponent?`, `ListFooterComponent?`, `ListComponent?` (FlashList etc), `listProps?` |
 | `SearchList` | `orn-ui/search-list` | everything in `List`, plus `searchValue`, `onSearchChange`, `searchPlaceholder?`, `searchIsLoading?`, `onScanPress?`, `extraActions?`, `header?`, `loadingMode?: 'replace'\|'overlay'`, `onLoadMore?`, `hasMore?`, `noMoreText?` |
 | `ReorderableList` | `orn-ui/reorderable-list` | `data`, `keyExtractor`, `itemHeight`, `renderItem(item, index, dragging)`, `onReorder(next)`, `onDragStart?`, `onDragEnd?`, `disabled?` |
+| `Slides` | `orn-ui/slides` | `data`, `keyExtractor`, `renderItem(item, index)`, `background?(item, index): string\|string[]`, `gradientDirection?`, `orientation?: horizontal\|vertical`, `indicators?: dots\|numbers\|none`, `indicatorPlacement?: overlay\|outside`, `loop?`, `autoPlay?`, `interval?`, `showAutoPlayToggle?`, `spacing?`, `index?`, `defaultIndex?`, `onIndexChange?`, `height?`, `swipeEnabled?`, `slideStyle?` |
 | `Alert` | `orn-ui/alert` | `visible`, `title`, `message?`, `type?: 'success'\|'error'\|'warning'\|'info'\|'question'`, `buttons?`, `confirmText?`, `cancelText?`, `onConfirm?`, `onCancel?`, `onClose?`, `inline?` |
 | `AlertProvider` + `useAlert` | `orn-ui/alert-provider`, `orn-ui/use-alert` | mount once; `showAlert(opts)`, `showConfirm(opts)`, `hideAlert()` also work outside React (`orn-ui/show-alert`, `/show-confirm`, `/hide-alert`) |
 | `Toast` | `orn-ui/toast` | `title`, `message?`, `variant?: 'success'\|'error'\|'warning'\|'info'`, `onPress?`, `onDismiss?`, `hideCloseButton?` |
@@ -346,6 +348,22 @@ import { Wizard } from 'orn-ui/wizard';
 />
 ```
 
+**Onboarding carousel**
+
+```tsx
+import { Slides } from 'orn-ui/slides';
+
+<Slides
+  data={pages}
+  keyExtractor={(page) => page.id}
+  background={(page) => page.gradient} // string = flat, string[] = gradient
+  renderItem={(page) => <Onboarding page={page} />}
+  loop
+  autoPlay
+  indicators="dots" // or "numbers"
+/>
+```
+
 ## Where to look next
 
 - Live docs, props tables and demo GIFs: <https://orn-ui-docs.vercel.app/>

package/README.md

@@ -1,10 +1,11 @@
 # orn-ui
 
 Fast, tree-shakeable, atomic-design component library for React Native and Expo.
-**Zero runtime dependencies** — only `react` and `react-native` as peers.
+**Zero runtime dependencies** — `react`, `react-native` and
+`react-native-safe-area-context` are the only peers.
 
-44 components (atoms, molecules, organisms), fully typed, themeable
-(light/dark), 464 tests, 90%/85% (lines/branches) coverage gate.
+46 components (atoms, molecules, organisms), fully typed, themeable
+(light/dark), 501 tests, 90%/85% (lines/branches) coverage gate.
 
 **Works on Expo SDK 54, 55, 56 and 57** — every row verified in CI with its own
 sandbox (`tsc` + full test suite). No native modules, no pods, no babel or
@@ -92,13 +93,13 @@ const insets = useSafeAreaInsets();
 ## Components
 
 - **Atoms**: `Title`/`Subtitle`/`Body`/`Caption`, `Button`, `IconButton`,
-  `Input`, `Checkbox`, `Badge`, `Card`, `Divider`, `Avatar`, `Image`,
+  `Input`, `Checkbox`, `Badge`, `Card`, `Divider`, `Gradient`, `Avatar`, `Image`,
   `Spinner`, `Skeleton`, `Transition`, `EmptyState`, `KeyValueRow`, `Fab`,
   `PressableScale`
 - **Molecules**: `Stepper`, `OptionCard`, `InfoRow`, `FormActions`,
   `AvatarHeader`, `SegmentedControl`, `Steps`, `SymmetricGrid`
 - **Organisms**: `Screen`, `Modal`, `BottomSheet`, `Select`, `List`,
-  `SearchList`, `ReorderableList`, `Alert`/`AlertProvider`,
+  `SearchList`, `ReorderableList`, `Slides`, `Alert`/`AlertProvider`,
   `Toast`/`ToastProvider`, `DatePicker`, `DateField`, `Wizard`,
   `ThemeToggle`, `NavigationBar`
 
@@ -127,7 +128,7 @@ Every component's full prop table lives on [orn-ui-docs.vercel.app](https://orn-
 The library is written to be *cheap to emit*: a themed, dark-mode-aware,
 accessible screen is 20-50 lines instead of 150-400, so an agent spends fewer
 tokens, the human reviews a smaller diff, and the generated code is already
-covered by 464 tests. One `<SearchList>` replaces a `FlatList` + search input +
+covered by 501 tests. One `<SearchList>` replaces a `FlatList` + search input +
 skeletons + pull-to-refresh + pagination + empty state.
 
 Three properties make it safe to reach for by default:

package/lib/commonjs/atoms/Gradient.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Gradient = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const DEFAULT_STEPS = 24;
+const styles = _reactNative.StyleSheet.create({
+  // Recorta el plano rotado de las diagonales y el degradado al borderRadius.
+  root: {
+    overflow: 'hidden'
+  },
+  segment: {
+    flex: 1
+  },
+  band: {
+    flex: 1
+  },
+  // Plano √2 centrado: rotado 45° cubre las esquinas sin medir el contenedor.
+  diagonalPlane: {
+    position: 'absolute',
+    top: '-21%',
+    left: '-21%',
+    width: '142%',
+    height: '142%'
+  }
+});
+
+/**
+ * Gradient
+ * Degradado lineal sin dependencias: React Native no trae uno en el rango
+ * soportado (Expo SDK 54–57) y `experimental_backgroundImage` no está en toda
+ * esa ventana, así que se compone con bandas.
+ *
+ * Cada tramo pinta el color inicial y encima N bandas del final con opacidad
+ * de 0 a 1. El compositor mezcla alpha linealmente: el resultado es la
+ * interpolación sRGB entre paradas sin parsear el color, y por eso vale
+ * cualquier formato que acepte RN (hex, `rgba()`, nombre).
+ */
+const Gradient = exports.Gradient = /*#__PURE__*/(0, _react.memo)(({
+  colors,
+  direction = 'vertical',
+  steps = DEFAULT_STEPS,
+  children,
+  style,
+  testID
+}) => {
+  const isRow = direction === 'horizontal';
+  const isDiagonal = direction === 'diagonal' || direction === 'diagonal-reverse';
+  // rotate positivo gira en horario (Y crece hacia abajo): -45° manda el eje
+  // del degradado hacia abajo-derecha.
+  const rotate = direction === 'diagonal' ? '-45deg' : '45deg';
+  const bandCount = Math.max(2, Math.floor(steps));
+  const painted = (0, _react.useMemo)(() => {
+    if (colors.length === 0) return null;
+    if (colors.length === 1) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [_reactNative.StyleSheet.absoluteFill, {
+          backgroundColor: colors[0]
+        }]
+      });
+    }
+    const segments = colors.slice(0, -1).map((from, index) => {
+      const to = colors[index + 1];
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.segment, {
+          backgroundColor: from,
+          flexDirection: isRow ? 'row' : 'column'
+        }],
+        children: Array.from({
+          length: bandCount
+        }, (_, band) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.band, {
+            backgroundColor: to,
+            opacity: band / (bandCount - 1)
+          }]
+        }, band))
+      }, `${from}-${to}-${index}`);
+    });
+    const stack = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        flexDirection: isRow ? 'row' : 'column'
+      }],
+      children: segments
+    });
+    if (!isDiagonal) return stack;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.diagonalPlane, {
+        transform: [{
+          rotate
+        }]
+      }],
+      children: segments
+    });
+  }, [colors, isRow, isDiagonal, rotate, bandCount]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    style: [styles.root, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: _reactNative.StyleSheet.absoluteFill,
+      pointerEvents: "none",
+      children: painted
+    }), children]
+  });
+});
+Gradient.displayName = 'Gradient';
+//# sourceMappingURL=Gradient.js.map

package/lib/commonjs/atoms/Gradient.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_STEPS","styles","StyleSheet","create","root","overflow","segment","flex","band","diagonalPlane","position","top","left","width","height","Gradient","exports","memo","colors","direction","steps","children","style","testID","isRow","isDiagonal","rotate","bandCount","Math","max","floor","painted","useMemo","length","jsx","View","absoluteFill","backgroundColor","segments","slice","map","from","index","to","flexDirection","Array","_","opacity","stack","transform","jsxs","pointerEvents","displayName"],"sourceRoot":"../../../src","sources":["atoms/Gradient.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/atoms/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "Fab", {
     return _Fab.Fab;
   }
 });
+Object.defineProperty(exports, "Gradient", {
+  enumerable: true,
+  get: function () {
+    return _Gradient.Gradient;
+  }
+});
 Object.defineProperty(exports, "IconButton", {
   enumerable: true,
   get: function () {
@@ -143,6 +149,7 @@ var _Checkbox = require("./Checkbox");
 var _Badge = require("./Badge");
 var _Card = require("./Card");
 var _Divider = require("./Divider");
+var _Gradient = require("./Gradient");
 var _Avatar = require("./Avatar");
 var _Image = require("./Image");
 var _Spinner = require("./Spinner");

package/lib/commonjs/atoms/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Text","require","_Button","_IconButton","_Input","_Checkbox","_Badge","_Card","_Divider","_Avatar","_Image","_Spinner","_Skeleton","_Transition","_EmptyState","_KeyValueRow","_Fab","_PressableScale"],"sourceRoot":"../../../src","sources":["atoms/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAAI,SAAA,GAAAJ,OAAA;AAEA,IAAAK,MAAA,GAAAL,OAAA;AAEA,IAAAM,KAAA,GAAAN,OAAA;AAEA,IAAAO,QAAA,GAAAP,OAAA;AAEA,IAAAQ,OAAA,GAAAR,OAAA;AAEA,IAAAS,MAAA,GAAAT,OAAA;AAEA,IAAAU,QAAA,GAAAV,OAAA;AAEA,IAAAW,SAAA,GAAAX,OAAA;AAEA,IAAAY,WAAA,GAAAZ,OAAA;AAEA,IAAAa,WAAA,GAAAb,OAAA;AAEA,IAAAc,YAAA,GAAAd,OAAA;AAEA,IAAAe,IAAA,GAAAf,OAAA;AAEA,IAAAgB,eAAA,GAAAhB,OAAA","ignoreList":[]}
+{"version":3,"names":["_Text","require","_Button","_IconButton","_Input","_Checkbox","_Badge","_Card","_Divider","_Gradient","_Avatar","_Image","_Spinner","_Skeleton","_Transition","_EmptyState","_KeyValueRow","_Fab","_PressableScale"],"sourceRoot":"../../../src","sources":["atoms/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAAI,SAAA,GAAAJ,OAAA;AAEA,IAAAK,MAAA,GAAAL,OAAA;AAEA,IAAAM,KAAA,GAAAN,OAAA;AAEA,IAAAO,QAAA,GAAAP,OAAA;AAEA,IAAAQ,SAAA,GAAAR,OAAA;AAEA,IAAAS,OAAA,GAAAT,OAAA;AAEA,IAAAU,MAAA,GAAAV,OAAA;AAEA,IAAAW,QAAA,GAAAX,OAAA;AAEA,IAAAY,SAAA,GAAAZ,OAAA;AAEA,IAAAa,WAAA,GAAAb,OAAA;AAEA,IAAAc,WAAA,GAAAd,OAAA;AAEA,IAAAe,YAAA,GAAAf,OAAA;AAEA,IAAAgB,IAAA,GAAAhB,OAAA;AAEA,IAAAiB,eAAA,GAAAjB,OAAA","ignoreList":[]}

package/lib/commonjs/organisms/Slides.js

@@ -0,0 +1,406 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slides = Slides;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _createStyles = require("../theme/createStyles");
+var _UIProvider = require("../theme/UIProvider");
+var _Transition = require("../atoms/Transition");
+var _Gradient = require("../atoms/Gradient");
+var _useSlides = require("./useSlides");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** Un color sólido, o dos o más para un degradado (ver `Gradient`). */
+
+const DOT = 8;
+const DOT_ACTIVE = 20;
+const NUMBER_CIRCLE = 24;
+const TOGGLE = 32;
+const DEFAULT_HEIGHT = 240;
+const DEFAULT_INTERVAL = 4000;
+const useStyles = (0, _createStyles.createStyles)(theme => ({
+  // Deja redondear el bloque por `style` sin que el degradado se salga.
+  root: {
+    overflow: 'hidden'
+  },
+  viewport: {
+    flex: 1
+  },
+  // La slide visible es la caja de adentro: con `spacing` la página es más
+  // ancha que ella, y el fondo tiene que recortarse acá y no en la página, o
+  // el degradado pinta también el hueco.
+  slide: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  // Con indicadores fuera y orientación vertical el contenedor es una fila:
+  // sin flex la ventana no tiene ancho propio y colapsa a 0.
+  viewportInRow: {
+    flex: 1
+  },
+  slideContent: {
+    flex: 1
+  },
+  indicatorsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  indicatorsColumn: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  indicatorsOverlayHorizontal: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: theme.tokens.spacing.md
+  },
+  indicatorsOverlayVertical: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: theme.tokens.spacing.md
+  },
+  indicatorsOutsideHorizontal: {
+    paddingTop: theme.tokens.spacing.md
+  },
+  indicatorsOutsideVertical: {
+    paddingLeft: theme.tokens.spacing.md
+  },
+  indicatorSlot: {
+    padding: theme.tokens.spacing.xs
+  },
+  dot: {
+    width: DOT,
+    height: DOT,
+    borderRadius: DOT / 2
+  },
+  autoPlayToggle: {
+    position: 'absolute',
+    top: theme.tokens.spacing.md,
+    right: theme.tokens.spacing.md,
+    width: TOGGLE,
+    height: TOGGLE,
+    borderRadius: TOGGLE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 3
+  },
+  pauseBar: {
+    width: 3,
+    height: 12,
+    borderRadius: 1
+  },
+  // Triángulo con bordes: un "play" sin SVG ni set de íconos.
+  playTriangle: {
+    width: 0,
+    height: 0,
+    marginLeft: 2,
+    borderTopWidth: 6,
+    borderBottomWidth: 6,
+    borderLeftWidth: 10,
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent'
+  },
+  numberCircle: {
+    minWidth: NUMBER_CIRCLE,
+    height: NUMBER_CIRCLE,
+    borderRadius: NUMBER_CIRCLE / 2,
+    borderWidth: 1,
+    paddingHorizontal: theme.tokens.spacing.xs,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  numberText: {
+    fontSize: theme.tokens.fontSize.xs,
+    fontWeight: theme.tokens.fontWeight.semibold
+  },
+  outsideHorizontal: {
+    flexDirection: 'column'
+  },
+  outsideVertical: {
+    flexDirection: 'row'
+  }
+}));
+/**
+ * El punto activo se estira en vez de saltar: el cambio de golpe se lee como
+ * "apareció otro punto", no como "el mismo se movió". Ancho y color son props
+ * de layout/pintura, así que van por el driver de JS.
+ */
+const Dot = /*#__PURE__*/(0, _react.memo)(({
+  selected,
+  isHorizontal,
+  overlay,
+  activeColor,
+  inactiveColor,
+  testID
+}) => {
+  const styles = useStyles();
+  const theme = (0, _UIProvider.useTheme)();
+  const reduceMotion = (0, _Transition.useReduceMotion)();
+  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(selected ? 1 : 0)).current;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.timing(progress, {
+      toValue: selected ? 1 : 0,
+      duration: reduceMotion ? 0 : theme.tokens.duration.base,
+      easing: _reactNative.Easing.out(_reactNative.Easing.quad),
+      useNativeDriver: false
+    }).start();
+  }, [progress, reduceMotion, selected, theme]);
+  const length = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [DOT, DOT_ACTIVE]
+  });
+  const backgroundColor = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [inactiveColor, activeColor]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    testID: testID,
+    style: [styles.dot, isHorizontal ? {
+      width: length
+    } : {
+      height: length
+    }, {
+      backgroundColor
+    }, overlay && {
+      opacity: progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0.45, 1]
+      })
+    }]
+  });
+});
+Dot.displayName = 'SlidesDot';
+
+/**
+ * Slides
+ * Carrusel con fondo propio (color plano o degradado) y contenido libre:
+ * `renderItem` decide si adentro va una imagen, texto o botones. El estado
+ * vive en `useSlides`; acá sólo está el árbol.
+ *
+ * El deslizamiento es un `ScrollView` con `pagingEnabled` en vez de gestos a
+ * mano: es lo único que da snap nativo en iOS y Android sin
+ * `react-native-gesture-handler`, en todo el rango soportado (Expo SDK 54–57).
+ */
+function Slides({
+  data,
+  keyExtractor,
+  renderItem,
+  background,
+  gradientDirection = 'vertical',
+  orientation = 'horizontal',
+  indicators = 'dots',
+  indicatorPlacement = 'overlay',
+  loop = false,
+  autoPlay = false,
+  interval = DEFAULT_INTERVAL,
+  showAutoPlayToggle = true,
+  spacing = 0,
+  index,
+  defaultIndex = 0,
+  onIndexChange,
+  height = DEFAULT_HEIGHT,
+  swipeEnabled = true,
+  slideStyle,
+  style,
+  testID
+}) {
+  const colors = (0, _UIProvider.useColors)();
+  const styles = useStyles();
+  const allowFontScaling = (0, _UIProvider.useAllowFontScaling)();
+  const total = data.length;
+  const {
+    active,
+    pages,
+    isHorizontal,
+    size,
+    pageSize,
+    scrollRef,
+    autoPlayPaused,
+    motionReduced,
+    goTo,
+    toggleAutoPlay,
+    onLayout,
+    onMomentumScrollEnd,
+    onScrollBeginDrag,
+    onScrollEndDrag
+  } = (0, _useSlides.useSlides)({
+    total,
+    orientation,
+    loop,
+    autoPlay,
+    interval,
+    index,
+    defaultIndex,
+    onIndexChange
+  });
+  const isOverlay = indicatorPlacement === 'overlay';
+  const renderBackground = (item, real) => {
+    const value = background?.(item, real);
+    if (!value) return null;
+    if (Array.isArray(value)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Gradient.Gradient, {
+        colors: value,
+        direction: gradientDirection,
+        style: _reactNative.StyleSheet.absoluteFill
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        backgroundColor: value
+      }],
+      pointerEvents: "none"
+    });
+  };
+  const renderIndicator = position => {
+    const selected = position === active;
+    if (indicators === 'numbers') {
+      const numberColors = isOverlay ? {
+        background: selected ? colors.white : 'transparent',
+        border: colors.white,
+        text: selected ? colors.black : colors.white
+      } : {
+        background: selected ? colors.primary : 'transparent',
+        border: selected ? colors.primary : colors.border,
+        text: selected ? colors.onPrimary : colors.textLight
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.numberCircle, {
+          backgroundColor: numberColors.background,
+          borderColor: numberColors.border
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          allowFontScaling: allowFontScaling,
+          style: [styles.numberText, {
+            color: numberColors.text
+          }],
+          children: position + 1
+        })
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Dot, {
+      testID: `${testID ?? 'slides'}-dot-${position}`,
+      selected: selected,
+      isHorizontal: isHorizontal,
+      overlay: isOverlay,
+      activeColor: isOverlay ? colors.white : colors.primary,
+      inactiveColor: isOverlay ? colors.white : colors.border
+    });
+  };
+
+  // Con reduce-motion el autoPlay ya está apagado: no hay nada que pausar.
+  const renderAutoPlayToggle = () => {
+    if (!autoPlay || !showAutoPlayToggle || motionReduced || total < 2) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      testID: `${testID ?? 'slides'}-autoplay-toggle`,
+      style: [styles.autoPlayToggle, {
+        backgroundColor: colors.black,
+        opacity: 0.55
+      }],
+      activeOpacity: 0.7,
+      onPress: toggleAutoPlay,
+      accessibilityRole: "button",
+      accessibilityLabel: autoPlayPaused ? 'Resume automatic slides' : 'Pause automatic slides',
+      accessibilityState: {
+        selected: !autoPlayPaused
+      },
+      children: autoPlayPaused ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.playTriangle, {
+          borderLeftColor: colors.white
+        }]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.pauseBar, {
+            backgroundColor: colors.white
+          }]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.pauseBar, {
+            backgroundColor: colors.white
+          }]
+        })]
+      })
+    });
+  };
+  const renderIndicators = () => {
+    if (indicators === 'none' || total < 2) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      testID: `${testID ?? 'slides'}-indicators`,
+      style: [isHorizontal ? styles.indicatorsRow : styles.indicatorsColumn, isOverlay ? isHorizontal ? styles.indicatorsOverlayHorizontal : styles.indicatorsOverlayVertical : isHorizontal ? styles.indicatorsOutsideHorizontal : styles.indicatorsOutsideVertical],
+      pointerEvents: "box-none",
+      children: data.map((item, position) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        testID: `${testID ?? 'slides'}-indicator-${position}`,
+        style: styles.indicatorSlot,
+        activeOpacity: 0.7,
+        onPress: () => goTo(position),
+        accessibilityRole: "button",
+        accessibilityLabel: `Slide ${position + 1} of ${total}`,
+        accessibilityState: {
+          selected: position === active
+        },
+        children: renderIndicator(position)
+      }, `indicator-${keyExtractor(item, position)}`))
+    });
+  };
+  const viewport = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    style: [styles.root, {
+      height
+    }, !isOverlay && !isHorizontal && styles.viewportInRow, isOverlay && style],
+    onLayout: onLayout,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      ref: scrollRef,
+      testID: `${testID ?? 'slides'}-scroll`,
+      style: styles.viewport,
+      horizontal: isHorizontal,
+      pagingEnabled: true,
+      scrollEnabled: swipeEnabled && total > 1,
+      showsHorizontalScrollIndicator: false,
+      showsVerticalScrollIndicator: false,
+      onMomentumScrollEnd: onMomentumScrollEnd,
+      onScrollBeginDrag: onScrollBeginDrag,
+      onScrollEndDrag: onScrollEndDrag,
+      children: pageSize > 0 && pages.map(({
+        real,
+        clone
+      }) => {
+        const item = data[real];
+        return (
+          /*#__PURE__*/
+          // El hueco se reparte a los dos lados de cada página: así la
+          // separación entre dos slides es `spacing` entero y la página
+          // sigue midiendo exactamente lo que pagina el ScrollView.
+          (0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [{
+              width: size.width,
+              height: size.height
+            }, isHorizontal ? {
+              paddingHorizontal: spacing / 2
+            } : {
+              paddingVertical: spacing / 2
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: [styles.slide, slideStyle],
+              children: [renderBackground(item, real), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.slideContent,
+                children: renderItem(item, real)
+              })]
+            })
+          }, clone ? `slides-clone-${clone}` : keyExtractor(item, real))
+        );
+      })
+    }), renderAutoPlayToggle(), isOverlay && renderIndicators()]
+  });
+  if (isOverlay) return viewport;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [isHorizontal ? styles.outsideHorizontal : styles.outsideVertical, style],
+    children: [viewport, renderIndicators()]
+  });
+}
+//# sourceMappingURL=Slides.js.map