@octane-xplat/pager 0.12.0 → 0.13.0

package/README.md

@@ -1,26 +1,24 @@
 # `@octane-xplat/pager`
 
+A paged horizontal swipe container for Octane Xplat apps — onboarding flows,
+media galleries. Each page fills the host; the user swipes between pages.
+
 ```sh
 pnpm add @octane-xplat/pager
 ```
 
-Paged horizontal swipe container for Octane xplat apps — onboarding flows,
-media galleries. iOS/Android run `@nativescript-community/ui-pager`
-(ViewPager2 on Android, a paging `UICollectionView` on iOS); web is a
-scroll-snap scroller; a macOS entry exists.
-
 ```tsx
 import { useState } from 'octane'
 import { Text } from '@octane-xplat/ui'
 import { Pager } from '@octane-xplat/pager'
 
 export function Onboarding() {
-	const [index, setIndex] = useState(0)
+	const [page, setPage] = useState(0)
 	return (
 		<Pager
 			items={['Pack', 'Travel']}
-			page={index}
-			onPageChange={setIndex}
+			page={page}
+			onPageChange={setPage}
 			renderItem={(title) => <Text>{title}</Text>}
 			renderEmpty={() => <Text>No pages</Text>}
 		/>
@@ -28,39 +26,31 @@ export function Onboarding() {
 }
 ```
 
-It follows the platform-list contract — `items` + `renderItem`, no
-children; each page is a full-host-size cell. `onPageChange` fires on
-settled user swipes; programmatic `page` writes don't echo back. No page
-indicator is built in — compose dots from `HStack` + `View` driven by the
-`page` state. `renderEmpty` covers the empty list.
+It follows the platform-list contract — `items` + `renderItem`, no children;
+each page is a full-host-size cell. `onPageChange` fires on settled user
+swipes; programmatic `page` writes don't echo back. `renderEmpty` covers the
+empty list.
+
+There is no built-in page indicator. Compose one from `HStack` + `Text`
+driven by the `page` state:
 
 ```tsx
-import { useState } from 'octane'
 import { HStack, Text } from '@octane-xplat/ui'
-import { Pager } from '@octane-xplat/pager'
 
-export function Pages() {
-	const titles = ['Pack', 'Travel']
-	const [page, setPage] = useState(0)
-	return (
-		<>
-			<Pager
-				items={titles}
-				page={page}
-				onPageChange={setPage}
-				renderItem={(title) => <Text>{title}</Text>}
-				renderEmpty={() => <Text>No pages</Text>}
-			/>
-			<HStack>
-				{titles.map((title, index) => (
-					<Text>{index === page ? '●' : '○'}</Text>
-				))}
-			</HStack>
-		</>
-	)
-}
+;<HStack>
+	{titles.map((title, index) => (
+		<Text>{index === page ? '●' : '○'}</Text>
+	))}
+</HStack>
 ```
 
+## Platform support
+
+- **iOS/Android** — `@nativescript-community/ui-pager` (ViewPager2 on Android,
+  a paging `UICollectionView` on iOS)
+- **Web** — a scroll-snap scroller
+- **macOS** — an entry exists
+
 Per-target limits are recorded in
 [known limits](../../docs/verify/known-limits.md). Exercised by
 [`PagerDemo`](../demos/src/PagerDemo.tsrx).

package/dist/native/cx.mobile.js

@@ -1,9 +1,10 @@
 //#region src/cx.mobile.ts
-/** NS `className` splits on ' ' only, and the universal driver applies the
-*  prop via `String(value)` — an array would arrive comma-joined and match
-*  no class at all. Native leaves normalize through cx() before handing
-*  className to an intrinsic. (The DOM renderer already flattens arrays,
-*  so web leaves don't need this.) */
+/** Native renderers now normalize the declarative `className` prop, but
+*  imperative `view.className` writes still need a pre-joined string — NS
+*  splits on ' ' only. Native leaves keep normalizing through cx() before
+*  handing className to an intrinsic so both paths accept the same values.
+*  (The DOM renderer already flattens arrays, so web leaves don't need
+*  this.) */
 function cx(...parts) {
 	return parts.flat(Infinity).filter(Boolean).join(" ");
 }

package/dist/native/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "b57dfea8-8ce5-4bd2-8135-bbf67c7fdcd3",
+  "buildId": "ce0e291a-916a-4800-b978-225b4de2fe8c",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/Pager.web.tsrx.js

@@ -328,7 +328,7 @@ var Pager = function Pager(props, __s, __extra) {
 			behavior: "smooth"
 		});
 	}, [props.page], _hs$ + 7);
-	ifBlock(__s, 0, __block.parentNode, props.items.length > 0, __then$0, __else$6, __block.endMarker, [host, props]);
+	ifBlock(__s, 0, __block.parentNode, props.items.length > 0, __then$0, __else$6, __block.endMarker, [host, props], 2);
 };
 //#endregion
 export { Pager };

package/dist/web/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "72806e70-1ed2-43f6-bc0d-22b9bd446b14",
+  "buildId": "76e68915-55bc-4195-aba5-8e915c633737",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/pager",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Paged swipe container for Octane xplat — web scroll-snap row + @nativescript-community/ui-pager (ViewPager2 / paging UICollectionView)",
   "keywords": [
     "android",
@@ -51,7 +51,7 @@
     "@nativescript-community/octane": "0.2.4",
     "@nativescript/core": "9.1.3",
     "@octanejs/vite-plugin": "0.1.61",
-    "octane": "0.10.2",
+    "octane": "0.11.0",
     "tsrx-typegen": "0.2.2",
     "typescript": "5.9.3",
     "vite": "8.3.0"

package/src/cx.mobile.ts

@@ -1,8 +1,9 @@
-/** NS `className` splits on ' ' only, and the universal driver applies the
- *  prop via `String(value)` — an array would arrive comma-joined and match
- *  no class at all. Native leaves normalize through cx() before handing
- *  className to an intrinsic. (The DOM renderer already flattens arrays,
- *  so web leaves don't need this.) */
+/** Native renderers now normalize the declarative `className` prop, but
+ *  imperative `view.className` writes still need a pre-joined string — NS
+ *  splits on ' ' only. Native leaves keep normalizing through cx() before
+ *  handing className to an intrinsic so both paths accept the same values.
+ *  (The DOM renderer already flattens arrays, so web leaves don't need
+ *  this.) */
 export function cx(...parts: any[]): string {
 	return parts.flat(Infinity).filter(Boolean).join(' ')
 }