orn-ui 0.2.7 → 0.2.8

package/lib/typescript/atoms/Gradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gradient.d.ts","sourceRoot":"","sources":["../../../src/atoms/Gradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,kBAAkB,CAAC;AAE5F,MAAM,WAAW,aAAa;IAC5B,0EAA0E;IAC1E,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAaD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,oFACkE,aAAa,uBA+CnG,CAAC"}

package/lib/typescript/atoms/index.d.ts

@@ -14,6 +14,8 @@ export { Card } from './Card';
 export type { CardProps } from './Card';
 export { Divider } from './Divider';
 export type { DividerProps } from './Divider';
+export { Gradient } from './Gradient';
+export type { GradientProps, GradientDirection } from './Gradient';
 export { Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar';
 export { Image, prefetchImage } from './Image';

package/lib/typescript/atoms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC/C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC/C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/typescript/organisms/Slides.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type GradientDirection } from '../atoms/Gradient';
+import { type SlidesOrientation } from './useSlides';
+export type { SlidesOrientation } from './useSlides';
+export type SlidesIndicators = 'dots' | 'numbers' | 'none';
+export type SlidesIndicatorPlacement = 'overlay' | 'outside';
+/** Un color sólido, o dos o más para un degradado (ver `Gradient`). */
+export type SlideBackground = string | string[];
+export interface SlidesProps<T> {
+    data: T[];
+    keyExtractor: (item: T, index: number) => string;
+    /** Contenido de la slide: imágenes, botones, lo que sea. Se dibuja sobre `background`. */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /** Fondo por slide: `'#101014'` pinta plano, `['#004cef', '#00cae1']` degrada. */
+    background?: (item: T, index: number) => SlideBackground | undefined;
+    /** Dirección del degradado cuando `background` devuelve varios colores. @default 'vertical' */
+    gradientDirection?: GradientDirection;
+    /** @default 'horizontal' */
+    orientation?: SlidesOrientation;
+    /** Círculos, círculos numerados, o ninguno. @default 'dots' */
+    indicators?: SlidesIndicators;
+    /**
+     * 'overlay' los apoya sobre la slide, en blanco; 'outside' los saca fuera
+     * del área deslizable, con los colores del tema.
+     * @default 'overlay'
+     */
+    indicatorPlacement?: SlidesIndicatorPlacement;
+    /** Después de la última vuelve a la primera (y al revés). @default false */
+    loop?: boolean;
+    /** Avanza solo. Se pausa mientras el dedo arrastra. @default false */
+    autoPlay?: boolean;
+    /** ms entre avances de `autoPlay`. @default 4000 */
+    interval?: number;
+    /**
+     * Botón para frenar el avance automático. Sólo aparece con `autoPlay`, y va
+     * en `true` porque contenido que se mueve solo necesita una forma de
+     * pausarlo (WCAG 2.2.2).
+     * @default true
+     */
+    showAutoPlayToggle?: boolean;
+    /** Hueco entre slides, en px. En 0 quedan pegadas. @default 0 */
+    spacing?: number;
+    /** Índice controlado. Sin él, el componente maneja el suyo desde `defaultIndex`. */
+    index?: number;
+    /** @default 0 */
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    /** Alto del área deslizable. @default 240 */
+    height?: number;
+    /** @default true */
+    swipeEnabled?: boolean;
+    /** Estilos de la caja visible de cada slide — padding, alineación, radio. */
+    slideStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * 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).
+ */
+export declare function Slides<T>({ data, keyExtractor, renderItem, background, gradientDirection, orientation, indicators, indicatorPlacement, loop, autoPlay, interval, showAutoPlayToggle, spacing, index, defaultIndex, onIndexChange, height, swipeEnabled, slideStyle, style, testID, }: SlidesProps<T>): React.JSX.Element;
+//# sourceMappingURL=Slides.d.ts.map

package/lib/typescript/organisms/Slides.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slides.d.ts","sourceRoot":"","sources":["../../../src/organisms/Slides.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,EAQL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAa,KAAK,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhE,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,wBAAwB,GAAG,SAAS,GAAG,SAAS,CAAC;AAE7D,uEAAuE;AACvE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;AAEhD,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,0FAA0F;IAC1F,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,kFAAkF;IAClF,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,eAAe,GAAG,SAAS,CAAC;IACrE,+FAA+F;IAC/F,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,4BAA4B;IAC5B,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,wBAAwB,CAAC;IAC9C,4EAA4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuHD;;;;;;;;;GASG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,EACxB,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,UAAU,EACV,iBAA8B,EAC9B,WAA0B,EAC1B,UAAmB,EACnB,kBAA8B,EAC9B,IAAY,EACZ,QAAgB,EAChB,QAA2B,EAC3B,kBAAyB,EACzB,OAAW,EACX,KAAK,EACL,YAAgB,EAChB,aAAa,EACb,MAAuB,EACvB,YAAmB,EACnB,UAAU,EACV,KAAK,EACL,MAAM,GACP,EAAE,WAAW,CAAC,CAAC,CAAC,qBA6LhB"}

package/lib/typescript/organisms/index.d.ts

@@ -30,4 +30,6 @@ export { NavigationBar } from './NavigationBar';
 export type { NavigationBarProps, NavigationBarItem } from './NavigationBar';
 export { ReorderableList } from './ReorderableList';
 export type { ReorderableListProps } from './ReorderableList';
+export { Slides } from './Slides';
+export type { SlidesProps, SlidesOrientation, SlidesIndicators, SlidesIndicatorPlacement, SlideBackground, } from './Slides';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/organisms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7F,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/F,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AACtG,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7F,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/F,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AACtG,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,GAChB,MAAM,UAAU,CAAC"}

package/lib/typescript/organisms/useSlides.d.ts

@@ -0,0 +1,52 @@
+import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView } from 'react-native';
+export type SlidesOrientation = 'horizontal' | 'vertical';
+export interface UseSlidesOptions {
+    total: number;
+    orientation: SlidesOrientation;
+    loop: boolean;
+    autoPlay: boolean;
+    interval: number;
+    /** Índice controlado; sin él manda el estado interno. */
+    index?: number;
+    defaultIndex: number;
+    onIndexChange?: (index: number) => void;
+}
+/** Una página del scroll. Los clones del modo infinito repiten el `real` de un vecino. */
+export interface SlidesPage {
+    real: number;
+    clone: 'head' | 'tail' | null;
+}
+export interface UseSlidesResult {
+    active: number;
+    pages: SlidesPage[];
+    isHorizontal: boolean;
+    isLoop: boolean;
+    size: {
+        width: number;
+        height: number;
+    };
+    /** Largo de una página sobre el eje del scroll. En 0 todavía no se midió. */
+    pageSize: number;
+    scrollRef: React.RefObject<ScrollView | null>;
+    autoPlayPaused: boolean;
+    /** El sistema pidió reducir movimiento: no hay autoPlay ni transiciones. */
+    motionReduced: boolean;
+    goTo: (index: number) => void;
+    toggleAutoPlay: () => void;
+    onLayout: (event: LayoutChangeEvent) => void;
+    onMomentumScrollEnd: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    onScrollBeginDrag: () => void;
+    onScrollEndDrag: () => void;
+}
+export declare function clampIndex(value: number, total: number): number;
+/**
+ * useSlides
+ * Todo lo que en `Slides` no se ve: qué página está encuadrada, cuándo mover el
+ * scroll, cómo se mapean los clones del modo infinito a índices reales, y el
+ * reloj del avance automático.
+ *
+ * Trabaja sólo con índices, nunca con los ítems: así no necesita el genérico
+ * `T` del componente, y el UI resuelve `pages[i].real` contra su propio `data`.
+ */
+export declare function useSlides({ total, orientation, loop, autoPlay, interval, index, defaultIndex, onIndexChange, }: UseSlidesOptions): UseSlidesResult;
+//# sourceMappingURL=useSlides.d.ts.map

package/lib/typescript/organisms/useSlides.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSlides.d.ts","sourceRoot":"","sources":["../../../src/organisms/useSlides.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG3G,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,iBAAiB,CAAC;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,0FAA0F;AAC1F,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,6EAA6E;IAC7E,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IAC9C,cAAc,EAAE,OAAO,CAAC;IACxB,4EAA4E;IAC5E,aAAa,EAAE,OAAO,CAAC;IACvB,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7C,mBAAmB,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9E,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAK/D;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,aAAa,GACd,EAAE,gBAAgB,GAAG,eAAe,CAsJpC"}

package/llms.txt

@@ -1,8 +1,9 @@
 # orn-ui
 
-> React Native / Expo component library: 44 typed components (atoms, molecules,
-> organisms), light/dark theming, zero runtime dependencies (only `react` and
-> `react-native` as peers). Verified in CI against Expo SDK 54, 55, 56 and 57.
+> React Native / Expo component library: 46 typed components (atoms, molecules,
+> organisms), light/dark theming, zero runtime dependencies (`react`,
+> `react-native` and `react-native-safe-area-context` are the only peers).
+> Verified in CI against Expo SDK 54, 55, 56 and 57.
 > Built to be used by AI coding agents: one component replaces dozens of lines
 > of hand-written `View`/`Text`/`StyleSheet`, so a screen costs a fraction of
 > the tokens and ships production-ready instead of prototype-only.
@@ -27,7 +28,7 @@ Wrap the app once: `<SafeAreaUIProvider defaultMode="system">` from `orn-ui/safe
 
 ## Components
 
-- Atoms: Title, Subtitle, Body, Caption, Button, IconButton, Input, Checkbox, Badge, Card, Divider, Avatar, Image, Spinner, Skeleton, Transition, EmptyState, KeyValueRow, Fab, PressableScale
+- Atoms: Title, Subtitle, Body, Caption, Button, IconButton, 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, Toast, ToastProvider, DatePicker, DateField, Wizard, ThemeToggle, NavigationBar
+- Organisms: Screen, Modal, BottomSheet, Select, List, SearchList, ReorderableList, Slides, Alert, AlertProvider, Toast, ToastProvider, DatePicker, DateField, Wizard, ThemeToggle, NavigationBar
 - Theme: UIProvider, SafeAreaUIProvider, createTheme, createStyles, useTheme, useColors, useThemeMode, useIcons, useInsets, useLabels

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "orn-ui",
-  "version": "0.2.7",
-  "description": "React Native / Expo component library: 44 typed components, light/dark theming, zero runtime dependencies. Verified on Expo SDK 54-57. Agent-friendly: one component instead of hundreds of lines of hand-written UI.",
+  "version": "0.2.8",
+  "description": "React Native / Expo component library: 46 typed components, light/dark theming, zero runtime dependencies. Verified on Expo SDK 54-57. Agent-friendly: one component instead of hundreds of lines of hand-written UI.",
   "author": "David Trujillo <davot098@gmail.com>",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -83,6 +83,11 @@
       "react-native": "./src/atoms/Divider.tsx",
       "default": "./lib/module/atoms/Divider.js"
     },
+    "./gradient": {
+      "types": "./lib/typescript/atoms/Gradient.d.ts",
+      "react-native": "./src/atoms/Gradient.tsx",
+      "default": "./lib/module/atoms/Gradient.js"
+    },
     "./avatar": {
       "types": "./lib/typescript/atoms/Avatar.d.ts",
       "react-native": "./src/atoms/Avatar.tsx",
@@ -318,6 +323,11 @@
       "react-native": "./src/organisms/ReorderableList.tsx",
       "default": "./lib/module/organisms/ReorderableList.js"
     },
+    "./slides": {
+      "types": "./lib/typescript/organisms/Slides.d.ts",
+      "react-native": "./src/organisms/Slides.tsx",
+      "default": "./lib/module/organisms/Slides.js"
+    },
     "./theme": {
       "types": "./lib/typescript/theme/index.d.ts",
       "react-native": "./src/theme/index.ts",

package/registry/gradient.json

@@ -0,0 +1,18 @@
+{
+  "name": "Gradient",
+  "slug": "gradient",
+  "type": "component",
+  "category": "atoms",
+  "exportedNames": [
+    "Gradient"
+  ],
+  "files": [
+    {
+      "path": "atoms/Gradient.tsx",
+      "content": "import React, { memo, useMemo } from 'react';\nimport { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';\n\nexport type GradientDirection = 'vertical' | 'horizontal' | 'diagonal' | 'diagonal-reverse';\n\nexport interface GradientProps {\n  /** Paradas del degradado. Uno solo pinta plano; ninguno no pinta nada. */\n  colors: string[];\n  /**\n   * 'vertical' va de arriba a abajo, 'horizontal' de izquierda a derecha,\n   * 'diagonal' de arriba-izquierda a abajo-derecha y 'diagonal-reverse' de\n   * arriba-derecha a abajo-izquierda.\n   * @default 'vertical'\n   */\n  direction?: GradientDirection;\n  /**\n   * Bandas por tramo (un tramo = un par de colores consecutivos). Más bandas\n   * = transición más suave y más vistas en el árbol.\n   * @default 24\n   */\n  steps?: number;\n  /** Contenido por encima del degradado. */\n  children?: React.ReactNode;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\nconst DEFAULT_STEPS = 24;\n\nconst styles = StyleSheet.create({\n  // Recorta el plano rotado de las diagonales y el degradado al borderRadius.\n  root: { overflow: 'hidden' },\n  segment: { flex: 1 },\n  band: { flex: 1 },\n  // Plano √2 centrado: rotado 45° cubre las esquinas sin medir el contenedor.\n  diagonalPlane: { position: 'absolute', top: '-21%', left: '-21%', width: '142%', height: '142%' },\n});\n\n/**\n * Gradient\n * Degradado lineal sin dependencias: React Native no trae uno en el rango\n * soportado (Expo SDK 54–57) y `experimental_backgroundImage` no está en toda\n * esa ventana, así que se compone con bandas.\n *\n * Cada tramo pinta el color inicial y encima N bandas del final con opacidad\n * de 0 a 1. El compositor mezcla alpha linealmente: el resultado es la\n * interpolación sRGB entre paradas sin parsear el color, y por eso vale\n * cualquier formato que acepte RN (hex, `rgba()`, nombre).\n */\nexport const Gradient = memo(\n  ({ colors, direction = 'vertical', steps = DEFAULT_STEPS, children, style, testID }: GradientProps) => {\n    const isRow = direction === 'horizontal';\n    const isDiagonal = direction === 'diagonal' || direction === 'diagonal-reverse';\n    // rotate positivo gira en horario (Y crece hacia abajo): -45° manda el eje\n    // del degradado hacia abajo-derecha.\n    const rotate = direction === 'diagonal' ? '-45deg' : '45deg';\n    const bandCount = Math.max(2, Math.floor(steps));\n\n    const painted = useMemo(() => {\n      if (colors.length === 0) return null;\n      if (colors.length === 1) {\n        return <View style={[StyleSheet.absoluteFill, { backgroundColor: colors[0] }]} />;\n      }\n\n      const segments = colors.slice(0, -1).map((from, index) => {\n        const to = colors[index + 1] as string;\n        return (\n          <View\n            key={`${from}-${to}-${index}`}\n            style={[styles.segment, { backgroundColor: from, flexDirection: isRow ? 'row' : 'column' }]}\n          >\n            {Array.from({ length: bandCount }, (_, band) => (\n              <View key={band} style={[styles.band, { backgroundColor: to, opacity: band / (bandCount - 1) }]} />\n            ))}\n          </View>\n        );\n      });\n\n      const stack = (\n        <View style={[StyleSheet.absoluteFill, { flexDirection: isRow ? 'row' : 'column' }]}>{segments}</View>\n      );\n\n      if (!isDiagonal) return stack;\n      return <View style={[styles.diagonalPlane, { transform: [{ rotate }] }]}>{segments}</View>;\n    }, [colors, isRow, isDiagonal, rotate, bandCount]);\n\n    return (\n      <View testID={testID} style={[styles.root, style]}>\n        {/* pointerEvents va en el pintado, no en la raíz: el degradado no debe\n            robarle los toques a lo que el consumidor ponga encima. */}\n        <View style={StyleSheet.absoluteFill} pointerEvents=\"none\">\n          {painted}\n        </View>\n        {children}\n      </View>\n    );\n  }\n);\nGradient.displayName = 'Gradient';\n"
+    }
+  ],
+  "registryDependencies": [
+    "core"
+  ]
+}

package/registry/index.json

@@ -103,6 +103,18 @@
       ],
       "bytes": 489
     },
+    {
+      "name": "Gradient",
+      "slug": "gradient",
+      "category": "atoms",
+      "exportedNames": [
+        "Gradient"
+      ],
+      "registryDependencies": [
+        "core"
+      ],
+      "bytes": 3852
+    },
     {
       "name": "Avatar",
       "slug": "avatar",
@@ -553,6 +565,20 @@
         "core"
       ],
       "bytes": 7324
+    },
+    {
+      "name": "Slides",
+      "slug": "slides",
+      "category": "organisms",
+      "exportedNames": [
+        "Slides"
+      ],
+      "registryDependencies": [
+        "core",
+        "transition",
+        "gradient"
+      ],
+      "bytes": 21434
     }
   ]
 }

package/registry/manifest.json

@@ -60,6 +60,13 @@
       "file": "atoms/Divider.tsx",
       "slug": "divider"
     },
+    {
+      "name": "Gradient",
+      "siblingNames": [],
+      "category": "atoms",
+      "file": "atoms/Gradient.tsx",
+      "slug": "gradient"
+    },
     {
       "name": "Avatar",
       "siblingNames": [],
@@ -310,6 +317,13 @@
       "category": "organisms",
       "file": "organisms/ReorderableList.tsx",
       "slug": "reorderable-list"
+    },
+    {
+      "name": "Slides",
+      "siblingNames": [],
+      "category": "organisms",
+      "file": "organisms/Slides.tsx",
+      "slug": "slides"
     }
   ]
 }

package/registry/slides.json

@@ -0,0 +1,24 @@
+{
+  "name": "Slides",
+  "slug": "slides",
+  "type": "component",
+  "category": "organisms",
+  "exportedNames": [
+    "Slides"
+  ],
+  "files": [
+    {
+      "path": "organisms/Slides.tsx",
+      "content": "import React, { memo, useEffect, useRef } from 'react';\nimport {\n  Animated,\n  Easing,\n  ScrollView,\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  View,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native';\nimport { createStyles } from '../theme/createStyles';\nimport { useAllowFontScaling, useColors, useTheme } from '../theme/UIProvider';\nimport { useReduceMotion } from '../atoms/Transition';\nimport { Gradient, type GradientDirection } from '../atoms/Gradient';\nimport { useSlides, type SlidesOrientation } from './useSlides';\n\nexport type { SlidesOrientation } from './useSlides';\nexport type SlidesIndicators = 'dots' | 'numbers' | 'none';\nexport type SlidesIndicatorPlacement = 'overlay' | 'outside';\n\n/** Un color sólido, o dos o más para un degradado (ver `Gradient`). */\nexport type SlideBackground = string | string[];\n\nexport interface SlidesProps<T> {\n  data: T[];\n  keyExtractor: (item: T, index: number) => string;\n  /** Contenido de la slide: imágenes, botones, lo que sea. Se dibuja sobre `background`. */\n  renderItem: (item: T, index: number) => React.ReactNode;\n  /** Fondo por slide: `'#101014'` pinta plano, `['#004cef', '#00cae1']` degrada. */\n  background?: (item: T, index: number) => SlideBackground | undefined;\n  /** Dirección del degradado cuando `background` devuelve varios colores. @default 'vertical' */\n  gradientDirection?: GradientDirection;\n  /** @default 'horizontal' */\n  orientation?: SlidesOrientation;\n  /** Círculos, círculos numerados, o ninguno. @default 'dots' */\n  indicators?: SlidesIndicators;\n  /**\n   * 'overlay' los apoya sobre la slide, en blanco; 'outside' los saca fuera\n   * del área deslizable, con los colores del tema.\n   * @default 'overlay'\n   */\n  indicatorPlacement?: SlidesIndicatorPlacement;\n  /** Después de la última vuelve a la primera (y al revés). @default false */\n  loop?: boolean;\n  /** Avanza solo. Se pausa mientras el dedo arrastra. @default false */\n  autoPlay?: boolean;\n  /** ms entre avances de `autoPlay`. @default 4000 */\n  interval?: number;\n  /**\n   * Botón para frenar el avance automático. Sólo aparece con `autoPlay`, y va\n   * en `true` porque contenido que se mueve solo necesita una forma de\n   * pausarlo (WCAG 2.2.2).\n   * @default true\n   */\n  showAutoPlayToggle?: boolean;\n  /** Hueco entre slides, en px. En 0 quedan pegadas. @default 0 */\n  spacing?: number;\n  /** Índice controlado. Sin él, el componente maneja el suyo desde `defaultIndex`. */\n  index?: number;\n  /** @default 0 */\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Alto del área deslizable. @default 240 */\n  height?: number;\n  /** @default true */\n  swipeEnabled?: boolean;\n  /** Estilos de la caja visible de cada slide — padding, alineación, radio. */\n  slideStyle?: StyleProp<ViewStyle>;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\nconst DOT = 8;\nconst DOT_ACTIVE = 20;\nconst NUMBER_CIRCLE = 24;\nconst TOGGLE = 32;\nconst DEFAULT_HEIGHT = 240;\nconst DEFAULT_INTERVAL = 4000;\n\nconst useStyles = createStyles((theme) => ({\n  // Deja redondear el bloque por `style` sin que el degradado se salga.\n  root: { overflow: 'hidden' },\n  viewport: { flex: 1 },\n  // La slide visible es la caja de adentro: con `spacing` la página es más\n  // ancha que ella, y el fondo tiene que recortarse acá y no en la página, o\n  // el degradado pinta también el hueco.\n  slide: { flex: 1, overflow: 'hidden' },\n  // Con indicadores fuera y orientación vertical el contenedor es una fila:\n  // sin flex la ventana no tiene ancho propio y colapsa a 0.\n  viewportInRow: { flex: 1 },\n  slideContent: { flex: 1 },\n\n  indicatorsRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },\n  indicatorsColumn: { flexDirection: 'column', alignItems: 'center', justifyContent: 'center' },\n  indicatorsOverlayHorizontal: { position: 'absolute', left: 0, right: 0, bottom: theme.tokens.spacing.md },\n  indicatorsOverlayVertical: { position: 'absolute', top: 0, bottom: 0, right: theme.tokens.spacing.md },\n  indicatorsOutsideHorizontal: { paddingTop: theme.tokens.spacing.md },\n  indicatorsOutsideVertical: { paddingLeft: theme.tokens.spacing.md },\n  indicatorSlot: { padding: theme.tokens.spacing.xs },\n\n  dot: { width: DOT, height: DOT, borderRadius: DOT / 2 },\n\n  autoPlayToggle: {\n    position: 'absolute',\n    top: theme.tokens.spacing.md,\n    right: theme.tokens.spacing.md,\n    width: TOGGLE,\n    height: TOGGLE,\n    borderRadius: TOGGLE / 2,\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexDirection: 'row',\n    gap: 3,\n  },\n  pauseBar: { width: 3, height: 12, borderRadius: 1 },\n  // Triángulo con bordes: un \"play\" sin SVG ni set de íconos.\n  playTriangle: {\n    width: 0,\n    height: 0,\n    marginLeft: 2,\n    borderTopWidth: 6,\n    borderBottomWidth: 6,\n    borderLeftWidth: 10,\n    borderTopColor: 'transparent',\n    borderBottomColor: 'transparent',\n  },\n\n  numberCircle: {\n    minWidth: NUMBER_CIRCLE,\n    height: NUMBER_CIRCLE,\n    borderRadius: NUMBER_CIRCLE / 2,\n    borderWidth: 1,\n    paddingHorizontal: theme.tokens.spacing.xs,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  numberText: { fontSize: theme.tokens.fontSize.xs, fontWeight: theme.tokens.fontWeight.semibold },\n\n  outsideHorizontal: { flexDirection: 'column' },\n  outsideVertical: { flexDirection: 'row' },\n}));\n\ninterface DotProps {\n  selected: boolean;\n  isHorizontal: boolean;\n  /** En overlay el contraste lo da la opacidad; afuera, el color. */\n  overlay: boolean;\n  activeColor: string;\n  inactiveColor: string;\n  testID?: string;\n}\n\n/**\n * El punto activo se estira en vez de saltar: el cambio de golpe se lee como\n * \"apareció otro punto\", no como \"el mismo se movió\". Ancho y color son props\n * de layout/pintura, así que van por el driver de JS.\n */\nconst Dot = memo(({ selected, isHorizontal, overlay, activeColor, inactiveColor, testID }: DotProps) => {\n  const styles = useStyles();\n  const theme = useTheme();\n  const reduceMotion = useReduceMotion();\n  const progress = useRef(new Animated.Value(selected ? 1 : 0)).current;\n\n  useEffect(() => {\n    Animated.timing(progress, {\n      toValue: selected ? 1 : 0,\n      duration: reduceMotion ? 0 : theme.tokens.duration.base,\n      easing: Easing.out(Easing.quad),\n      useNativeDriver: false,\n    }).start();\n  }, [progress, reduceMotion, selected, theme]);\n\n  const length = progress.interpolate({ inputRange: [0, 1], outputRange: [DOT, DOT_ACTIVE] });\n  const backgroundColor = progress.interpolate({ inputRange: [0, 1], outputRange: [inactiveColor, activeColor] });\n\n  return (\n    <Animated.View\n      testID={testID}\n      style={[\n        styles.dot,\n        isHorizontal ? { width: length } : { height: length },\n        { backgroundColor },\n        overlay && { opacity: progress.interpolate({ inputRange: [0, 1], outputRange: [0.45, 1] }) },\n      ]}\n    />\n  );\n});\nDot.displayName = 'SlidesDot';\n\n/**\n * Slides\n * Carrusel con fondo propio (color plano o degradado) y contenido libre:\n * `renderItem` decide si adentro va una imagen, texto o botones. El estado\n * vive en `useSlides`; acá sólo está el árbol.\n *\n * El deslizamiento es un `ScrollView` con `pagingEnabled` en vez de gestos a\n * mano: es lo único que da snap nativo en iOS y Android sin\n * `react-native-gesture-handler`, en todo el rango soportado (Expo SDK 54–57).\n */\nexport function Slides<T>({\n  data,\n  keyExtractor,\n  renderItem,\n  background,\n  gradientDirection = 'vertical',\n  orientation = 'horizontal',\n  indicators = 'dots',\n  indicatorPlacement = 'overlay',\n  loop = false,\n  autoPlay = false,\n  interval = DEFAULT_INTERVAL,\n  showAutoPlayToggle = true,\n  spacing = 0,\n  index,\n  defaultIndex = 0,\n  onIndexChange,\n  height = DEFAULT_HEIGHT,\n  swipeEnabled = true,\n  slideStyle,\n  style,\n  testID,\n}: SlidesProps<T>) {\n  const colors = useColors();\n  const styles = useStyles();\n  const allowFontScaling = useAllowFontScaling();\n\n  const total = data.length;\n  const {\n    active,\n    pages,\n    isHorizontal,\n    size,\n    pageSize,\n    scrollRef,\n    autoPlayPaused,\n    motionReduced,\n    goTo,\n    toggleAutoPlay,\n    onLayout,\n    onMomentumScrollEnd,\n    onScrollBeginDrag,\n    onScrollEndDrag,\n  } = useSlides({ total, orientation, loop, autoPlay, interval, index, defaultIndex, onIndexChange });\n\n  const isOverlay = indicatorPlacement === 'overlay';\n\n  const renderBackground = (item: T, real: number) => {\n    const value = background?.(item, real);\n    if (!value) return null;\n    if (Array.isArray(value)) {\n      return <Gradient colors={value} direction={gradientDirection} style={StyleSheet.absoluteFill} />;\n    }\n    return <View style={[StyleSheet.absoluteFill, { backgroundColor: value }]} pointerEvents=\"none\" />;\n  };\n\n  const renderIndicator = (position: number) => {\n    const selected = position === active;\n\n    if (indicators === 'numbers') {\n      const numberColors = isOverlay\n        ? {\n            background: selected ? colors.white : 'transparent',\n            border: colors.white,\n            text: selected ? colors.black : colors.white,\n          }\n        : {\n            background: selected ? colors.primary : 'transparent',\n            border: selected ? colors.primary : colors.border,\n            text: selected ? colors.onPrimary : colors.textLight,\n          };\n      return (\n        <View\n          style={[\n            styles.numberCircle,\n            { backgroundColor: numberColors.background, borderColor: numberColors.border },\n          ]}\n        >\n          <Text allowFontScaling={allowFontScaling} style={[styles.numberText, { color: numberColors.text }]}>\n            {position + 1}\n          </Text>\n        </View>\n      );\n    }\n\n    return (\n      <Dot\n        testID={`${testID ?? 'slides'}-dot-${position}`}\n        selected={selected}\n        isHorizontal={isHorizontal}\n        overlay={isOverlay}\n        activeColor={isOverlay ? colors.white : colors.primary}\n        inactiveColor={isOverlay ? colors.white : colors.border}\n      />\n    );\n  };\n\n  // Con reduce-motion el autoPlay ya está apagado: no hay nada que pausar.\n  const renderAutoPlayToggle = () => {\n    if (!autoPlay || !showAutoPlayToggle || motionReduced || total < 2) return null;\n    return (\n      <TouchableOpacity\n        testID={`${testID ?? 'slides'}-autoplay-toggle`}\n        style={[styles.autoPlayToggle, { backgroundColor: colors.black, opacity: 0.55 }]}\n        activeOpacity={0.7}\n        onPress={toggleAutoPlay}\n        accessibilityRole=\"button\"\n        accessibilityLabel={autoPlayPaused ? 'Resume automatic slides' : 'Pause automatic slides'}\n        accessibilityState={{ selected: !autoPlayPaused }}\n      >\n        {autoPlayPaused ? (\n          <View style={[styles.playTriangle, { borderLeftColor: colors.white }]} />\n        ) : (\n          <>\n            <View style={[styles.pauseBar, { backgroundColor: colors.white }]} />\n            <View style={[styles.pauseBar, { backgroundColor: colors.white }]} />\n          </>\n        )}\n      </TouchableOpacity>\n    );\n  };\n\n  const renderIndicators = () => {\n    if (indicators === 'none' || total < 2) return null;\n    return (\n      <View\n        testID={`${testID ?? 'slides'}-indicators`}\n        style={[\n          isHorizontal ? styles.indicatorsRow : styles.indicatorsColumn,\n          isOverlay\n            ? isHorizontal\n              ? styles.indicatorsOverlayHorizontal\n              : styles.indicatorsOverlayVertical\n            : isHorizontal\n              ? styles.indicatorsOutsideHorizontal\n              : styles.indicatorsOutsideVertical,\n        ]}\n        pointerEvents=\"box-none\"\n      >\n        {data.map((item, position) => (\n          <TouchableOpacity\n            key={`indicator-${keyExtractor(item, position)}`}\n            testID={`${testID ?? 'slides'}-indicator-${position}`}\n            style={styles.indicatorSlot}\n            activeOpacity={0.7}\n            onPress={() => goTo(position)}\n            accessibilityRole=\"button\"\n            accessibilityLabel={`Slide ${position + 1} of ${total}`}\n            accessibilityState={{ selected: position === active }}\n          >\n            {renderIndicator(position)}\n          </TouchableOpacity>\n        ))}\n      </View>\n    );\n  };\n\n  const viewport = (\n    <View\n      testID={testID}\n      style={[styles.root, { height }, !isOverlay && !isHorizontal && styles.viewportInRow, isOverlay && style]}\n      onLayout={onLayout}\n    >\n      <ScrollView\n        ref={scrollRef}\n        testID={`${testID ?? 'slides'}-scroll`}\n        style={styles.viewport}\n        horizontal={isHorizontal}\n        pagingEnabled\n        scrollEnabled={swipeEnabled && total > 1}\n        showsHorizontalScrollIndicator={false}\n        showsVerticalScrollIndicator={false}\n        onMomentumScrollEnd={onMomentumScrollEnd}\n        onScrollBeginDrag={onScrollBeginDrag}\n        onScrollEndDrag={onScrollEndDrag}\n      >\n        {pageSize > 0 &&\n          pages.map(({ real, clone }) => {\n            const item = data[real] as T;\n            return (\n              // El hueco se reparte a los dos lados de cada página: así la\n              // separación entre dos slides es `spacing` entero y la página\n              // sigue midiendo exactamente lo que pagina el ScrollView.\n              <View\n                key={clone ? `slides-clone-${clone}` : keyExtractor(item, real)}\n                style={[\n                  { width: size.width, height: size.height },\n                  isHorizontal ? { paddingHorizontal: spacing / 2 } : { paddingVertical: spacing / 2 },\n                ]}\n              >\n                <View style={[styles.slide, slideStyle]}>\n                  {renderBackground(item, real)}\n                  <View style={styles.slideContent}>{renderItem(item, real)}</View>\n                </View>\n              </View>\n            );\n          })}\n      </ScrollView>\n      {renderAutoPlayToggle()}\n      {isOverlay && renderIndicators()}\n    </View>\n  );\n\n  if (isOverlay) return viewport;\n\n  return (\n    <View style={[isHorizontal ? styles.outsideHorizontal : styles.outsideVertical, style]}>\n      {viewport}\n      {renderIndicators()}\n    </View>\n  );\n}\n"
+    },
+    {
+      "path": "organisms/useSlides.ts",
+      "content": "import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView } from 'react-native';\nimport { useReduceMotion } from '../atoms/Transition';\n\nexport type SlidesOrientation = 'horizontal' | 'vertical';\n\nexport interface UseSlidesOptions {\n  total: number;\n  orientation: SlidesOrientation;\n  loop: boolean;\n  autoPlay: boolean;\n  interval: number;\n  /** Índice controlado; sin él manda el estado interno. */\n  index?: number;\n  defaultIndex: number;\n  onIndexChange?: (index: number) => void;\n}\n\n/** Una página del scroll. Los clones del modo infinito repiten el `real` de un vecino. */\nexport interface SlidesPage {\n  real: number;\n  clone: 'head' | 'tail' | null;\n}\n\nexport interface UseSlidesResult {\n  active: number;\n  pages: SlidesPage[];\n  isHorizontal: boolean;\n  isLoop: boolean;\n  size: { width: number; height: number };\n  /** Largo de una página sobre el eje del scroll. En 0 todavía no se midió. */\n  pageSize: number;\n  scrollRef: React.RefObject<ScrollView | null>;\n  autoPlayPaused: boolean;\n  /** El sistema pidió reducir movimiento: no hay autoPlay ni transiciones. */\n  motionReduced: boolean;\n  goTo: (index: number) => void;\n  toggleAutoPlay: () => void;\n  onLayout: (event: LayoutChangeEvent) => void;\n  onMomentumScrollEnd: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n  onScrollBeginDrag: () => void;\n  onScrollEndDrag: () => void;\n}\n\nexport function clampIndex(value: number, total: number): number {\n  if (total === 0) return 0;\n  if (value < 0) return 0;\n  if (value > total - 1) return total - 1;\n  return value;\n}\n\n/**\n * useSlides\n * Todo lo que en `Slides` no se ve: qué página está encuadrada, cuándo mover el\n * scroll, cómo se mapean los clones del modo infinito a índices reales, y el\n * reloj del avance automático.\n *\n * Trabaja sólo con índices, nunca con los ítems: así no necesita el genérico\n * `T` del componente, y el UI resuelve `pages[i].real` contra su propio `data`.\n */\nexport function useSlides({\n  total,\n  orientation,\n  loop,\n  autoPlay,\n  interval,\n  index,\n  defaultIndex,\n  onIndexChange,\n}: UseSlidesOptions): UseSlidesResult {\n  const motionReduced = useReduceMotion();\n  const isHorizontal = orientation === 'horizontal';\n  // Un solo elemento no tiene a dónde ciclar: quedaría deslizable entre tres\n  // copias de lo mismo.\n  const isLoop = loop && total > 1;\n\n  const [uncontrolled, setUncontrolled] = useState(() => clampIndex(defaultIndex, total));\n  const active = clampIndex(index ?? uncontrolled, total);\n  const activeRef = useRef(active);\n  activeRef.current = active;\n\n  const [autoPlayPaused, setAutoPlayPaused] = useState(false);\n  const [size, setSize] = useState({ width: 0, height: 0 });\n  const pageSize = isHorizontal ? size.width : size.height;\n\n  const scrollRef = useRef<ScrollView>(null);\n  /** Página realmente visible (índice dentro de `pages`, clones incluidos). */\n  const offsetPageRef = useRef(isLoop ? 1 : 0);\n  const didInitRef = useRef(false);\n  const lastPageSizeRef = useRef(0);\n  const draggingRef = useRef(false);\n\n  const pages = useMemo<SlidesPage[]>(() => {\n    const real = Array.from({ length: total }, (_, i) => ({ real: i, clone: null }));\n    if (!isLoop) return real;\n    return [{ real: total - 1, clone: 'head' }, ...real, { real: 0, clone: 'tail' }];\n  }, [isLoop, total]);\n\n  const scrollToPage = useCallback(\n    (page: number, animated: boolean) => {\n      const offset = page * pageSize;\n      scrollRef.current?.scrollTo({\n        x: isHorizontal ? offset : 0,\n        y: isHorizontal ? 0 : offset,\n        animated,\n      });\n    },\n    [isHorizontal, pageSize]\n  );\n\n  const goTo = useCallback(\n    (next: number) => {\n      if (next === activeRef.current) return;\n      activeRef.current = next;\n      if (index == null) setUncontrolled(next);\n      onIndexChange?.(next);\n    },\n    [index, onIndexChange]\n  );\n\n  // Sólo actúa cuando el índice y la página visible discrepan: un cambio que\n  // vino del propio gesto no dispara un segundo scroll encima del que frenó.\n  useEffect(() => {\n    if (pageSize === 0 || total === 0) return;\n    const target = isLoop ? active + 1 : active;\n    const resized = lastPageSizeRef.current !== pageSize;\n    if (offsetPageRef.current === target && didInitRef.current && !resized) return;\n    // Ni el primer posicionamiento ni el reacomodo por rotación son un cambio\n    // de slide: animarlos sería un deslizamiento que nadie pidió.\n    const animated = didInitRef.current && !resized;\n    didInitRef.current = true;\n    lastPageSizeRef.current = pageSize;\n    offsetPageRef.current = target;\n    scrollToPage(target, animated);\n  }, [active, isLoop, pageSize, scrollToPage, total]);\n\n  const onLayout = useCallback((event: LayoutChangeEvent) => {\n    const { width, height } = event.nativeEvent.layout;\n    setSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }));\n  }, []);\n\n  const onMomentumScrollEnd = useCallback(\n    (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n      draggingRef.current = false;\n      if (pageSize === 0) return;\n      const { contentOffset } = event.nativeEvent;\n      const page = Math.round((isHorizontal ? contentOffset.x : contentOffset.y) / pageSize);\n\n      if (isLoop) {\n        if (page === 0) {\n          offsetPageRef.current = total;\n          scrollToPage(total, false);\n          goTo(total - 1);\n          return;\n        }\n        if (page === total + 1) {\n          offsetPageRef.current = 1;\n          scrollToPage(1, false);\n          goTo(0);\n          return;\n        }\n        offsetPageRef.current = page;\n        goTo(page - 1);\n        return;\n      }\n\n      offsetPageRef.current = page;\n      goTo(clampIndex(page, total));\n    },\n    [goTo, isHorizontal, isLoop, pageSize, scrollToPage, total]\n  );\n\n  const onScrollBeginDrag = useCallback(() => {\n    draggingRef.current = true;\n  }, []);\n\n  const onScrollEndDrag = useCallback(() => {\n    // Un arrastre corto puede soltarse sin inercia y no emitir\n    // momentumScrollEnd: sin esto el autoPlay quedaría pausado para siempre.\n    draggingRef.current = false;\n  }, []);\n\n  const toggleAutoPlay = useCallback(() => setAutoPlayPaused((paused) => !paused), []);\n\n  useEffect(() => {\n    if (!autoPlay || autoPlayPaused || motionReduced || total < 2 || pageSize === 0) return;\n    const timer = setInterval(() => {\n      if (draggingRef.current) return;\n      const from = activeRef.current;\n      if (from < total - 1) {\n        goTo(from + 1);\n        return;\n      }\n      if (!isLoop) return;\n      // Última en modo infinito: avanza al clon de la primera en vez de\n      // rebobinar; el salto al original lo cierra momentumScrollEnd.\n      offsetPageRef.current = total + 1;\n      scrollToPage(total + 1, true);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [autoPlay, autoPlayPaused, goTo, interval, isLoop, motionReduced, pageSize, scrollToPage, total]);\n\n  return {\n    active,\n    pages,\n    isHorizontal,\n    isLoop,\n    size,\n    pageSize,\n    scrollRef,\n    autoPlayPaused,\n    motionReduced,\n    goTo,\n    toggleAutoPlay,\n    onLayout,\n    onMomentumScrollEnd,\n    onScrollBeginDrag,\n    onScrollEndDrag,\n  };\n}\n"
+    }
+  ],
+  "registryDependencies": [
+    "core",
+    "transition",
+    "gradient"
+  ]
+}

package/src/atoms/Gradient.tsx

@@ -0,0 +1,99 @@
+import React, { memo, useMemo } from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+export type GradientDirection = 'vertical' | 'horizontal' | 'diagonal' | 'diagonal-reverse';
+
+export interface GradientProps {
+  /** Paradas del degradado. Uno solo pinta plano; ninguno no pinta nada. */
+  colors: string[];
+  /**
+   * 'vertical' va de arriba a abajo, 'horizontal' de izquierda a derecha,
+   * 'diagonal' de arriba-izquierda a abajo-derecha y 'diagonal-reverse' de
+   * arriba-derecha a abajo-izquierda.
+   * @default 'vertical'
+   */
+  direction?: GradientDirection;
+  /**
+   * Bandas por tramo (un tramo = un par de colores consecutivos). Más bandas
+   * = transición más suave y más vistas en el árbol.
+   * @default 24
+   */
+  steps?: number;
+  /** Contenido por encima del degradado. */
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+const DEFAULT_STEPS = 24;
+
+const styles = 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).
+ */
+export const Gradient = memo(
+  ({ colors, direction = 'vertical', steps = DEFAULT_STEPS, children, style, testID }: GradientProps) => {
+    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 = useMemo(() => {
+      if (colors.length === 0) return null;
+      if (colors.length === 1) {
+        return <View style={[StyleSheet.absoluteFill, { backgroundColor: colors[0] }]} />;
+      }
+
+      const segments = colors.slice(0, -1).map((from, index) => {
+        const to = colors[index + 1] as string;
+        return (
+          <View
+            key={`${from}-${to}-${index}`}
+            style={[styles.segment, { backgroundColor: from, flexDirection: isRow ? 'row' : 'column' }]}
+          >
+            {Array.from({ length: bandCount }, (_, band) => (
+              <View key={band} style={[styles.band, { backgroundColor: to, opacity: band / (bandCount - 1) }]} />
+            ))}
+          </View>
+        );
+      });
+
+      const stack = (
+        <View style={[StyleSheet.absoluteFill, { flexDirection: isRow ? 'row' : 'column' }]}>{segments}</View>
+      );
+
+      if (!isDiagonal) return stack;
+      return <View style={[styles.diagonalPlane, { transform: [{ rotate }] }]}>{segments}</View>;
+    }, [colors, isRow, isDiagonal, rotate, bandCount]);
+
+    return (
+      <View testID={testID} style={[styles.root, style]}>
+        {/* pointerEvents va en el pintado, no en la raíz: el degradado no debe
+            robarle los toques a lo que el consumidor ponga encima. */}
+        <View style={StyleSheet.absoluteFill} pointerEvents="none">
+          {painted}
+        </View>
+        {children}
+      </View>
+    );
+  }
+);
+Gradient.displayName = 'Gradient';

package/src/atoms/index.ts

@@ -14,6 +14,8 @@ export { Card } from './Card';
 export type { CardProps } from './Card';
 export { Divider } from './Divider';
 export type { DividerProps } from './Divider';
+export { Gradient } from './Gradient';
+export type { GradientProps, GradientDirection } from './Gradient';
 export { Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar';
 export { Image, prefetchImage } from './Image';