@lynx-example/lynx-ui-swiper 0.0.1 → 0.0.2

package/Common/Button/styles.css

@@ -0,0 +1,41 @@
+@import "@lynx-js/luna-styles/index.css";
+
+.button {
+  height: 48px;
+  display: flex;
+  border-radius: 9999px;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--neutral-ambient);
+  transition: opacity 0.15s ease-in-out;
+}
+
+.button.ui-active {
+  opacity: 0.5;
+}
+
+.button .text {
+  color: var(--content);
+}
+
+.button.primary {
+  background-color: var(--primary);
+}
+
+.button.primary .text {
+  color: var(--primary-content);
+}
+
+.text {
+  font-size: 15px;
+  line-height: 18px;
+  text-align: center;
+  font-weight: 600;
+}
+
+.sub-text {
+  font-size: 11px;
+  line-height: 14px;
+  text-align: center;
+  color: var(--content-muted);
+}

package/Common/Card/index.tsx

@@ -0,0 +1,21 @@
+// 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 {} from '@lynx-js/react'
+import type { CSSProperties } from '@lynx-js/types'
+import './styles.css'
+
+export function Card({
+  index,
+  style,
+}: {
+  index: number
+  style?: CSSProperties
+}) {
+  return (
+    <view className='card' style={style}>
+      <text className='card-text'>{index}</text>
+    </view>
+  )
+}

package/Common/Card/styles.css

@@ -0,0 +1,21 @@
+@import "@lynx-js/luna-styles/index.css";
+
+.card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--canvas);
+
+  border-radius: 8px;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+
+.card-text {
+  color: var(--primary);
+  font-size: 64px;
+  font-weight: 600;
+}

package/Common/Indicator/index.tsx

@@ -0,0 +1,24 @@
+// 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 './styles.css'
+
+export function Indicator({
+  current,
+  count,
+}: {
+  current: number
+  count: number
+}) {
+  return (
+    <view class='indicator-container'>
+      {Array.from({ length: count }).map((_, index) => (
+        <view
+          key={index}
+          class={`indicator-item ${index === current ? 'active' : ''}`}
+        />
+      ))}
+    </view>
+  )
+}

package/Common/Indicator/styles.css

@@ -0,0 +1,21 @@
+@import "@lynx-js/luna-styles/index.css";
+
+.indicator-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+}
+
+.indicator-item {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--primary-content-faded);
+  margin: 4px;
+}
+
+.indicator-item.active {
+  background: var(--primary-content);
+}

package/Custom/index.tsx

@@ -0,0 +1,87 @@
+// 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, useRef } from '@lynx-js/react'
+
+import {
+  Swiper,
+  SwiperItem,
+  interpolate,
+  interpolateJS,
+} from '@lynx-js/lynx-ui'
+import type { SwiperRef } from '@lynx-js/lynx-ui'
+
+import './styles.css'
+
+const colorsArr: string[] = ['red', 'green', 'yellow', 'purple']
+
+function customAnimation(value: number, _index: number) {
+  'main thread'
+
+  const scale = interpolate(value, [-1, 0, 1], [0.5, 1, 0.5])
+
+  return {
+    transform: `scale(${scale})`,
+  }
+}
+
+function customAnimationFirstScreen(value: number, _index: number) {
+  const scale = interpolateJS(value, [-1, 0, 1], [0.5, 1, 0.5])
+
+  return {
+    transform: `scale(${scale})`,
+  }
+}
+
+function SwiperEntry(): JSX.Element {
+  const swiperRef = useRef<SwiperRef>(null)
+
+  return (
+    <view id='container'>
+      <Swiper
+        ref={swiperRef}
+        data={colorsArr}
+        itemWidth={250}
+        duration={500}
+        initialIndex={0}
+        mode='normal'
+        modeConfig={{
+          align: 'center',
+        }}
+        main-thread:customAnimation={customAnimation}
+        customAnimationFirstScreen={customAnimationFirstScreen}
+      >
+        {({ item, index, realIndex }) => (
+          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+            <view
+              class='block-view'
+              style={{
+                width: '100%',
+                height: '250px',
+                backgroundColor: item,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <view
+                style={{
+                  backgroundColor: 'white',
+                  width: '4px',
+                  height: '4px',
+                }}
+              >
+              </view>
+            </view>
+            <text class='image-text'>Number.{index}</text>
+          </SwiperItem>
+        )}
+      </Swiper>
+    </view>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry

package/Custom/styles.css

@@ -0,0 +1,47 @@
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-text {
+  position: absolute;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.title-container {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.title-text {
+  font-size: 16px;
+}
+
+.button {
+  border: 1px solid;
+  border-radius: 4px;
+  width: 150px;
+  background-color: red;
+  margin: 4px 8px;
+  padding: 4px 8px;
+}
+
+.button-text {
+  color: white;
+}
+
+.operation {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.block {
+  display: flex;
+  width: 100%;
+  margin: 10px;
+}

package/CustomScale/index.tsx

@@ -0,0 +1,116 @@
+// 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, useRef } from '@lynx-js/react'
+
+import {
+  Swiper,
+  SwiperItem,
+  interpolate,
+  interpolateJS,
+} from '@lynx-js/lynx-ui'
+import type { SwiperRef } from '@lynx-js/lynx-ui'
+
+import './styles.css'
+
+const colorsArr: string[] = ['red', 'green', 'yellow', 'purple']
+
+const ITEM_WIDTH = 250
+
+function customAnimation(value: number, _index: number) {
+  'main thread'
+
+  const scale = interpolate(value, [-1, 0, 1], [0.8, 1, 0.8])
+  // const scale = 1
+
+  const centerOffset = ((lynx.__globalProps.screenWidth
+    ?? SystemInfo.pixelWidth / SystemInfo.pixelRatio) - ITEM_WIDTH) / 2
+  const translateX = interpolate(value, [-1, 0, 1], [
+    -ITEM_WIDTH + centerOffset,
+    centerOffset,
+    ITEM_WIDTH + centerOffset,
+  ], 'extend')
+
+  return {
+    transform: `translateX(${translateX}px) scale(${scale})`,
+    'transform-origin': 'center',
+  }
+}
+
+function customAnimationFirstScreen(value: number, _index: number) {
+  const scale = interpolateJS(value, [-1, 0, 1], [0.8, 1, 0.8])
+  // const scale = 1
+  const centerOffset = ((lynx.__globalProps.screenWidth
+    ?? SystemInfo.pixelWidth / SystemInfo.pixelRatio) - ITEM_WIDTH) / 2
+  const translateX = interpolateJS(value, [-1, 0, 1], [
+    -ITEM_WIDTH + centerOffset,
+    centerOffset,
+    ITEM_WIDTH + centerOffset,
+  ], 'extend')
+
+  console.log(
+    'customAnimationFirstScreen',
+    value,
+    scale,
+    translateX,
+    centerOffset,
+  )
+  return {
+    transform: `translateX(${translateX}px) scale(${scale})`,
+    'transform-origin': 'center',
+  }
+}
+
+function SwiperEntry(): JSX.Element {
+  const swiperRef = useRef<SwiperRef>(null)
+
+  return (
+    <view id='container'>
+      <Swiper
+        ref={swiperRef}
+        data={colorsArr}
+        itemWidth={ITEM_WIDTH}
+        itemHeight={200}
+        duration={500}
+        initialIndex={0}
+        mode='custom'
+        modeConfig={{
+          align: 'center',
+        }}
+        main-thread:customAnimation={customAnimation}
+        customAnimationFirstScreen={customAnimationFirstScreen}
+      >
+        {({ item, index, realIndex }) => (
+          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+            <view
+              class='block-view'
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: item,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <view
+                style={{
+                  backgroundColor: 'white',
+                  width: '4px',
+                  height: '4px',
+                }}
+              >
+              </view>
+            </view>
+            <text class='image-text'>Number.{index}</text>
+          </SwiperItem>
+        )}
+      </Swiper>
+    </view>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry

package/CustomScale/styles.css

@@ -0,0 +1,41 @@
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-text {
+  position: absolute;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.title-container {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.title-text {
+  font-size: 16px;
+}
+
+.button {
+  border: 1px solid;
+  border-radius: 4px;
+  width: 150px;
+  background-color: red;
+  margin: 4px 8px;
+  padding: 4px 8px;
+}
+
+.button-text {
+  color: white;
+}
+
+.operation {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}

package/CustomTinder/Card.tsx

@@ -0,0 +1,24 @@
+// 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 {} from '@lynx-js/react'
+import './styles.css'
+
+export function Card({
+  index,
+}: {
+  index: number
+}) {
+  return (
+    <view className='card'>
+      <text className='card-text'>{index}</text>
+      <text className='title'>
+        Swiper
+      </text>
+      <text className='subtitle'>
+        @lynx-js/lynx-ui
+      </text>
+    </view>
+  )
+}

package/CustomTinder/index.tsx

@@ -0,0 +1,111 @@
+// 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 {
+  Swiper,
+  SwiperItem,
+  interpolate,
+  interpolateJS,
+} from '@lynx-js/lynx-ui'
+
+import { Card } from './Card'
+
+import './styles.css'
+
+const itemArr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+const ITEM_WIDTH = 220
+const ITEM_HEIGHT = 330
+
+const customAnimation = (value: number) => {
+  'main thread'
+  const translateX = interpolate(value, [-1, 0], [-ITEM_WIDTH, 0], 'clamp')
+  const translateY = interpolate(value, [0, 1], [0, -18], 'extend')
+  const rotate = interpolate(value, [-1, 0], [-15, 0], 'clamp')
+  const scale = interpolate(value, [0, 1], [1, 0.95], 'extend')
+  const opacity = interpolate(value, [-1, -0.8, 0, 1], [0, 0.9, 1, 1], 'clamp')
+
+  return {
+    transform:
+      `translate(${translateX}px, ${translateY}px) rotateZ(${rotate}deg) scale(${scale})`,
+    opacity: opacity,
+    'transform-origin': 'center',
+  }
+}
+
+const customAnimationFirstScreen = (value: number, _index: number) => {
+  const translateX = interpolateJS(value, [-1, 0], [-ITEM_WIDTH, 0], 'clamp')
+  const translateY = interpolateJS(value, [0, 1], [0, -18], 'extend')
+  const rotate = interpolateJS(value, [-1, 0], [-15, 0], 'clamp')
+  const zIndex = interpolateJS(
+    value,
+    itemArr.map((_, index) => index),
+    itemArr.map((_, index) => (itemArr.length - index) * 10),
+    'extend',
+  )
+
+  const scale = interpolateJS(
+    value,
+    [0, 1, 0],
+    [1, 0.95, 1],
+    'extend',
+  )
+  const opacity = interpolateJS(
+    value,
+    [-1, -0.8, 0, 1],
+    [0, 0.9, 1, 1],
+    'clamp',
+  )
+
+  return {
+    transform:
+      `translate(${translateX}px, ${translateY}px) rotateZ(${rotate}deg) scale(${scale})`,
+    opacity: opacity,
+    'transform-origin': 'center',
+    zIndex: zIndex,
+  }
+}
+
+function SwiperEntry() {
+  return (
+    <view className='demo-container lunaris-dark'>
+      <Swiper
+        data={itemArr}
+        itemWidth={ITEM_WIDTH}
+        itemHeight={ITEM_HEIGHT}
+        containerWidth={ITEM_WIDTH}
+        duration={500}
+        initialIndex={0}
+        mode='custom'
+        main-thread:customAnimation={customAnimation}
+        customAnimationFirstScreen={customAnimationFirstScreen}
+        style={{
+          overflow: 'visible',
+        }}
+      >
+        {({ index, realIndex }) => (
+          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+            <view
+              class='block-view'
+              style={{
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <Card index={index} />
+            </view>
+          </SwiperItem>
+        )}
+      </Swiper>
+    </view>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry

package/CustomTinder/styles.css

@@ -0,0 +1,61 @@
+@import "@lynx-js/luna-styles/index.css";
+
+.demo-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  padding-top: 48px;
+  padding-bottom: 24px;
+  background: linear-gradient(
+    0deg,
+    var(--gradient-a),
+    var(--gradient-b),
+  );
+  align-items: center;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-text {
+  position: absolute;
+}
+
+.card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--canvas);
+  border-radius: 8px;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  border-color: var(--line);
+  border-width: 1px;
+}
+
+.card-text {
+  color: var(--primary);
+  font-size: 128px;
+  font-weight: 600;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--content);
+  margin-top: 4px;
+}
+
+.subtitle {
+  font-size: 10px;
+  color: var(--content-subtle);
+  margin-top: 1px;
+}

package/DifferentHeight/Button.tsx

@@ -0,0 +1,33 @@
+// 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 './styles.css'
+import { Button as ButtonInner } from '@lynx-js/lynx-ui'
+
+const ButtonStyle = {
+  border: '1px solid',
+  'border-radius': '4px',
+  width: '150px',
+  'background-color': 'red',
+  margin: '4px 8px',
+  padding: '4px 8px',
+}
+
+const ButtonTextStyle = {
+  color: 'white',
+}
+
+export function Button(props: {
+  onClick: () => void
+  text: string
+}) {
+  return (
+    <ButtonInner
+      style={ButtonStyle}
+      onClick={props.onClick}
+    >
+      <text style={ButtonTextStyle}>{props.text}</text>
+    </ButtonInner>
+  )
+}