@lynx-example/lynx-ui-scroll-view 0.0.15 → 0.0.17

package/Basic/index.css

@@ -1,58 +1,13 @@
 @import "@lynx-js/luna-styles/index.css";
 
+@import "../shared/base.css";
+
 .demo-container {
-  background-color: var(--canvas);
-  width: 100%;
-  height: 100%;
   padding-top: 48px;
   padding-bottom: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.card {
-  width: 288px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.circle {
-  width: 216px;
-  height: 216px;
-  border-radius: 9999px;
-  background-color: var(--canvas);
-  padding-bottom: 45px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: end;
-}
-
-.letter {
-  font-size: 96px;
-  font-weight: 600;
-  line-height: 96px;
-  color: var(--primary);
-}
-
-.title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--content);
-  margin-top: 4px;
-}
-
-.subtitle {
-  font-size: 10px;
-  color: var(--content-subtle);
-  margin-top: 1px;
 }
 
 .scroll-view {
-  width: 100%;
   height: 472px;
 }
 

package/Basic/index.tsx

@@ -6,7 +6,7 @@ import { root } from '@lynx-js/react'
 
 import { ScrollView } from '@lynx-js/lynx-ui'
 
-import { CircleLetterCard } from './CircleLetterCard'
+import { CircleCard } from '../shared/CircleCard'
 import './index.css'
 
 const LETTERS = ['L', 'Y', 'N', 'X', 'U', 'I', 'L', 'Y', 'N', 'X', 'J', 'S']
@@ -17,7 +17,12 @@ function App() {
       <ScrollView scrollOrientation='horizontal' className='scroll-view'>
         <view className='scroll-view-content'>
           {LETTERS.map((letter, i) => (
-            <CircleLetterCard letter={letter} key={`circle-${i}`} />
+            <CircleCard
+              letter={letter}
+              title='ScrollView'
+              subtitle='@lynx-js/lynx-ui'
+              key={`circle-${i}`}
+            />
           ))}
         </view>
       </ScrollView>

package/Bounces/index.css

@@ -0,0 +1,36 @@
+@import "@lynx-js/luna-styles/index.css";
+
+@import "../shared/base.css";
+
+.demo-container {
+  padding-top: 48px;
+  padding-bottom: 24px;
+}
+
+.demo-scroll-region {
+  width: 100%;
+  height: 472px;
+  display: flex;
+  align-items: center;
+  background-color: var(--canvas-ambient);
+}
+
+.scroll-view {
+  height: 100%;
+}
+
+.scroll-view-content {
+  width: max-content;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  padding-left: 40px;
+  padding-right: 40px;
+  background: linear-gradient(
+    90deg,
+    var(--gradient-a),
+    var(--gradient-b),
+    var(--gradient-c),
+    var(--gradient-d)
+  );
+}

package/Bounces/index.tsx

@@ -0,0 +1,61 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { root } from '@lynx-js/react'
+
+import { ScrollView } from '@lynx-js/lynx-ui'
+
+import { BounceTag } from '../shared/BounceTag'
+import { CircleCard } from '../shared/CircleCard'
+import './index.css'
+
+const LETTERS = [
+  'L',
+  'Y',
+  'N',
+  'X',
+  'L',
+  'T',
+  'R',
+  'B',
+  'O',
+  'U',
+  'N',
+  'C',
+  'E',
+]
+
+function App() {
+  return (
+    <view className='demo-container lunaris-dark'>
+      <view className='demo-scroll-region'>
+        <ScrollView
+          scrollOrientation='horizontal'
+          className='scroll-view'
+          bounceableOptions={{
+            enableBounces: true,
+            alwaysBouncing: true,
+            upperBounceItem: <BounceTag label='Start Bounce' variant='upper' />,
+            lowerBounceItem: <BounceTag label='End Bounce' variant='lower' />,
+          }}
+        >
+          <view className='scroll-view-content'>
+            {LETTERS.map((letter, index) => (
+              <CircleCard
+                letter={letter}
+                title='ScrollView Bounces'
+                subtitle='@lynx-js/lynx-ui'
+                key={`${letter}-${index}`}
+              />
+            ))}
+          </view>
+        </ScrollView>
+      </view>
+    </view>
+  )
+}
+
+root.render(<App />)
+
+export default App

package/BouncesRTL/index.css

@@ -0,0 +1,41 @@
+@import "@lynx-js/luna-styles/index.css";
+
+@import "../shared/base.css";
+
+.demo-container {
+  padding-top: 48px;
+  padding-bottom: 24px;
+}
+
+.demo-scroll-region {
+  width: 100%;
+  height: 472px;
+  display: flex;
+  align-items: center;
+  background-color: var(--canvas-ambient);
+}
+
+.rtl-scope {
+  direction: rtl;
+}
+
+.scroll-view {
+  height: 100%;
+}
+
+.scroll-view-content {
+  width: max-content;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  padding-left: 40px;
+  padding-right: 40px;
+  direction: inherit;
+  background: linear-gradient(
+    270deg,
+    var(--gradient-a),
+    var(--gradient-b),
+    var(--gradient-c),
+    var(--gradient-d)
+  );
+}

package/BouncesRTL/index.tsx

@@ -0,0 +1,63 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { root } from '@lynx-js/react'
+
+import { ScrollView } from '@lynx-js/lynx-ui'
+
+import { BounceTag } from '../shared/BounceTag'
+import { CircleCard } from '../shared/CircleCard'
+import './index.css'
+
+const LETTERS = [
+  'L',
+  'Y',
+  'N',
+  'X',
+  'R',
+  'T',
+  'L',
+  'B',
+  'O',
+  'U',
+  'N',
+  'C',
+  'E',
+]
+
+function App() {
+  return (
+    <view className='demo-container lunaris-dark rtl-scope'>
+      <view className='demo-scroll-region'>
+        <ScrollView
+          scrollOrientation='horizontal'
+          enableRTL={true}
+          className='scroll-view'
+          bounceableOptions={{
+            enableBounces: true,
+            alwaysBouncing: true,
+            upperBounceItem: <BounceTag label='Start Bounce' variant='upper' />,
+            lowerBounceItem: <BounceTag label='End Bounce' variant='lower' />,
+          }}
+        >
+          <view className='scroll-view-content'>
+            {LETTERS.map((letter, index) => (
+              <CircleCard
+                letter={letter}
+                title='Bounces RTL'
+                subtitle='@lynx-js/lynx-ui'
+                subtitleDirection='ltr'
+                key={`${letter}-${index}`}
+              />
+            ))}
+          </view>
+        </ScrollView>
+      </view>
+    </view>
+  )
+}
+
+root.render(<App />)
+
+export default App

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @lynx-example/lynx-ui-scroll-view
 
+## 0.0.17
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @lynx-js/lynx-ui@3.137.0
+
+## 0.0.16
+
+### Patch Changes
+
+- Rename the horizontal bounce demos to Bounces and BouncesRTL, and ([#266](https://github.com/lynx-family/lynx-ui/pull/266))
+  refine ScrollView example layout, gradients, shared primitives, and
+  surface layering to improve bounce demos, button styling, and RTL text
+  behavior.
+- Updated dependencies [[`4214d92`](https://github.com/lynx-family/lynx-ui/commit/4214d923421d0a61ecd0b7cbf9a7a44acaff8d2a)]:
+  - @lynx-js/lynx-ui@3.136.0
+  - @lynx-js/luna-styles@0.2.2
+
 ## 0.0.15
 
 ### Patch Changes

package/NativeUseBounces/index.css

@@ -0,0 +1,136 @@
+@import "@lynx-js/luna-styles/index.css";
+
+.demo-container {
+  width: 100%;
+  height: 100%;
+  padding: 36px 24px 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--canvas);
+}
+
+.header {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.title {
+  color: var(--content);
+  font-size: 28px;
+  font-weight: 700;
+}
+
+.description {
+  color: var(--content-subtle);
+  font-size: 14px;
+  margin-top: 6px;
+}
+
+.metrics {
+  width: 100%;
+  margin-top: 14px;
+  padding: 12px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+  border-radius: 12px;
+  background-color: var(--paper);
+}
+
+.metric {
+  color: var(--content-subtle);
+  font-size: 12px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  background-color: var(--canvas);
+}
+
+.metric--event {
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.scroll-view {
+  background-color: var(--paper);
+}
+
+.scroll-content {
+  width: 100%;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: linear-gradient(
+    180deg,
+    var(--gradient-a),
+    var(--gradient-b),
+    var(--gradient-c),
+    var(--gradient-d)
+  );
+}
+
+.card {
+  width: 100%;
+  height: 88px;
+  padding: 14px 18px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 16px;
+  background-color: var(--canvas);
+}
+
+.card__index {
+  width: 52px;
+  color: var(--primary);
+  font-size: 32px;
+  font-weight: 700;
+}
+
+.card__copy {
+  display: flex;
+  flex-direction: column;
+}
+
+.card__title {
+  color: var(--content);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.card__subtitle {
+  color: var(--content-subtle);
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.bounce-item {
+  width: 100%;
+  height: 96px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.bounce-item--upper {
+  background-color: var(--primary);
+}
+
+.bounce-item--lower {
+  background-color: var(--primary-2);
+}
+
+.bounce-item__label {
+  color: var(--gradient-content);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.bounce-item__hint {
+  color: var(--gradient-content);
+  font-size: 12px;
+  margin-top: 4px;
+}

package/NativeUseBounces/index.tsx

@@ -0,0 +1,155 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { root, useState } from '@lynx-js/react'
+
+import { ScrollView } from '@lynx-js/lynx-ui'
+import type { ScrollEvent } from '@lynx-js/types'
+
+import './index.css'
+
+const VIEWPORT_HEIGHT = 420
+const TRIGGER_DISTANCE = 48
+const ITEMS = Array.from({ length: 12 }, (_, index) => index + 1)
+
+interface Metrics {
+  bounceCount: number
+  lastBounce: 'none' | 'upper' | 'lower'
+  maxLowerDistance: number
+  maxUpperDistance: number
+  minScrollTop: number
+  scrollHeight: number
+  scrollTop: number
+}
+
+function BounceItem(props: {
+  direction: 'upper' | 'lower'
+  label: string
+}) {
+  const { direction, label } = props
+  return (
+    <view className={`bounce-item bounce-item--${direction}`}>
+      <text className='bounce-item__label'>{label}</text>
+      <text className='bounce-item__hint'>Threshold: 48px</text>
+    </view>
+  )
+}
+
+function formatMetric(value: number) {
+  return Number.isFinite(value) ? value.toFixed(1) : '--'
+}
+
+function App() {
+  const [metrics, setMetrics] = useState<Metrics>({
+    bounceCount: 0,
+    lastBounce: 'none',
+    maxLowerDistance: 0,
+    maxUpperDistance: 0,
+    minScrollTop: 0,
+    scrollHeight: 0,
+    scrollTop: 0,
+  })
+
+  const handleScroll = (event: ScrollEvent) => {
+    const { scrollHeight, scrollTop } = event.detail
+    const upperDistance = Math.max(0, -scrollTop)
+    const lowerDistance = Math.max(0, scrollTop - scrollHeight)
+
+    setMetrics(previous => ({
+      ...previous,
+      maxLowerDistance: Math.max(
+        previous.maxLowerDistance,
+        lowerDistance,
+      ),
+      maxUpperDistance: Math.max(
+        previous.maxUpperDistance,
+        upperDistance,
+      ),
+      minScrollTop: Math.min(previous.minScrollTop, scrollTop),
+      scrollHeight,
+      scrollTop,
+    }))
+  }
+
+  return (
+    <view className='demo-container lunaris-dark'>
+      <view className='header'>
+        <text className='title'>Native useBounces</text>
+        <text className='description'>
+          Pull beyond both edges and watch bindscroll metrics.
+        </text>
+        <view className='metrics'>
+          <text className='metric'>
+            {`scrollTop: ${formatMetric(metrics.scrollTop)}`}
+          </text>
+          <text className='metric'>
+            {`min scrollTop: ${formatMetric(metrics.minScrollTop)}`}
+          </text>
+          <text className='metric'>
+            {`max upper: ${formatMetric(metrics.maxUpperDistance)}`}
+          </text>
+          <text className='metric'>
+            {`max lower: ${formatMetric(metrics.maxLowerDistance)}`}
+          </text>
+          <text className='metric'>
+            {`scrollHeight: ${formatMetric(metrics.scrollHeight)}`}
+          </text>
+          <text className='metric metric--event'>
+            {`bounce event: ${metrics.lastBounce} (${metrics.bounceCount})`}
+          </text>
+        </view>
+      </view>
+
+      <ScrollView
+        enableNewArch={true}
+        scrollOrientation='vertical'
+        className='scroll-view'
+        style={{
+          width: '100%',
+          height: `${VIEWPORT_HEIGHT}px`,
+          borderRadius: '20px',
+        }}
+        onScroll={handleScroll}
+        bounceableOptions={{
+          enableBounces: true,
+          alwaysBouncing: true,
+          singleSidedBounce: 'both',
+          startBounceTriggerDistance: TRIGGER_DISTANCE,
+          endBounceTriggerDistance: TRIGGER_DISTANCE,
+          upperBounceItem: (
+            <BounceItem direction='upper' label='Native upper bounce' />
+          ),
+          lowerBounceItem: (
+            <BounceItem direction='lower' label='Native lower bounce' />
+          ),
+          onScrollToBounces: ({ direction }) => {
+            setMetrics(previous => ({
+              ...previous,
+              bounceCount: previous.bounceCount + 1,
+              lastBounce: direction,
+            }))
+          },
+        }}
+      >
+        <view className='scroll-content'>
+          {ITEMS.map(item => (
+            <view className='card' key={`native-bounce-card-${item}`}>
+              <text className='card__index'>{`${item}`}</text>
+              <view className='card__copy'>
+                <text className='card__title'>Native ScrollView</text>
+                <text className='card__subtitle'>
+                  scroll-view-new-arch=true
+                </text>
+              </view>
+            </view>
+          ))}
+        </view>
+      </ScrollView>
+    </view>
+  )
+}
+
+root.render(<App />)
+
+export default App

package/ScrollBy/index.css

@@ -3,7 +3,7 @@
 .demo-container {
   width: 100%;
   height: 100%;
-  padding: 32px 20px;
+  padding: 64px 20px 32px;
   background-color: var(--canvas);
 }
 
@@ -17,26 +17,34 @@
 
 .button {
   flex: 1;
-  height: 48px;
-  border-radius: 12px;
+  height: 44px;
+  border-radius: 999px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--canvas-ambient);
+  background-color: var(--neutral);
+}
+
+.button.ui-active {
+  background-color: var(--neutral-2);
 }
 
 .button--primary {
-  background-color: var(--primary);
+  background-color: var(--gradient-a);
+}
+
+.button--primary.ui-active {
+  background-color: var(--gradient-b);
 }
 
 .button-text {
-  color: var(--content);
-  font-size: 15px;
-  font-weight: 600;
+  color: var(--neutral-content);
+  font-size: 14px;
+  font-weight: 700;
 }
 
 .button--primary .button-text {
-  color: var(--canvas);
+  color: var(--gradient-content);
 }
 
 .scroll-view {
@@ -66,13 +74,13 @@
 }
 
 .card-title {
-  color: var(--content);
+  color: var(--gradient-content);
   font-size: 20px;
   font-weight: 700;
 }
 
 .card-subtitle {
   margin-top: 6px;
-  color: var(--content-subtle);
+  color: var(--gradient-content-faded);
   font-size: 13px;
 }