@startupjs-ui/carousel 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/carousel
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **carousel:** refactor Carousel component ([03b066b](https://github.com/startupjs/startupjs-ui/commit/03b066b0343985cce5eb4e023f160b1f267d4110))

package/README.mdx

@@ -0,0 +1,544 @@
+import { useRef, useState } from 'react'
+import { Text } from 'react-native'
+import Carousel, { _PropsJsonSchema as CarouselPropsJsonSchema } from './index'
+import Div from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Carousel
+
+```js
+import { Carousel } from 'startupjs-ui'
+```
+
+## Simple example
+
+All you need to use is to transfer children in Carousel
+Such an example of a carousel, used on instagram or vk for stories, children have no clear boundaries, such a carousel should be adaptive for all extensions and devices
+
+```jsx example noscroll
+const carouselStyle = { marginLeft: 4, marginRight: 4 }
+const caseStyle = {
+  height: 180,
+  width: 200,
+  paddingLeft: 4,
+  paddingRight: 4
+}
+const itemStyle = { width: '100%', height: '100%' }
+
+return (
+  <Carousel style={carouselStyle}>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
+    </Div>
+  </Carousel>
+)
+```
+
+You can also set different widths for children, the component knows how to handle this case
+
+```jsx example noscroll
+const carouselStyle = { marginLeft: 4, marginRight: 4 }
+const caseStyle = {
+  height: 180,
+  width: 200,
+  paddingLeft: 4,
+  paddingRight: 4
+}
+const itemStyle = { width: '100%', height: '100%' }
+
+return (
+  <Carousel style={carouselStyle}>
+    <Div style={{ ...caseStyle, width: 120 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
+    </Div>
+    <Div style={{ ...caseStyle, width: 200 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
+    </Div>
+    <Div style={{ ...caseStyle, width: 240 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
+    </Div>
+    <Div style={{ ...caseStyle, width: 150 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
+    </Div>
+    <Div style={{ ...caseStyle, width: 240 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
+    </Div>
+    <Div style={{ ...caseStyle, width: 150 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
+    </Div>
+  </Carousel>
+)
+```
+
+## Adaptability
+
+If you need clear boundaries
+There is a property for this - isResponsive (by default - false)
+In conjunction with this property, each children needs to minWidth and maxWidth
+The component itself will calculate how many blocks need to be displayed for a specific resolution
+For example, when minWidth 100 and maxWidth 500, on the desktop extension there will be 2 blocks, on mobile 1
+
+```jsx example noscroll
+const carouselStyle = { marginLeft: 4, marginRight: 4 }
+const caseStyle = {
+  height: 180,
+  paddingLeft: 4,
+  paddingRight: 4,
+  minWidth: 100,
+  maxWidth: 500
+}
+const itemStyle = { width: '100%', height: '100%' }
+
+return (
+  <Carousel style={carouselStyle} isResponsive={true}>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
+    </Div>
+  </Carousel>
+)
+```
+
+To use 1 visible block, children minWidth to be 100%
+
+```jsx example noscroll
+const carouselStyle = { marginLeft: 4, marginRight: 4 }
+const caseStyle = {
+  height: 180,
+  paddingLeft: 4,
+  paddingRight: 4,
+  minWidth: '100%'
+}
+const itemStyle = { width: '100%', height: '100%' }
+
+return (
+  <Carousel style={carouselStyle} isResponsive={true}>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
+    </Div>
+  </Carousel>
+)
+```
+
+## Infinite scrolling
+
+Set by isEndless property (default is false)
+Without isResponsive property, infinite scrolling works only on arrow clicks
+
+```jsx example noscroll
+const carouselStyle = { marginLeft: 4, marginRight: 4 }
+const caseStyle = {
+  height: 180,
+  paddingLeft: 4,
+  paddingRight: 4,
+  minWidth: 100,
+  maxWidth: 500
+}
+const itemStyle = { width: '100%', height: '100%' }
+
+return (
+  <Carousel style={carouselStyle} isEndless={true}>
+    <Div style={{ ...caseStyle, width: 400 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
+    </Div>
+    <Div style={{ ...caseStyle, width: 260 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
+    </Div>
+    <Div style={{ ...caseStyle, width: 320 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
+    </Div>
+    <Div style={{ ...caseStyle, width: 200 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
+    </Div>
+    <Div style={{ ...caseStyle, width: 140 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'green' }} />
+    </Div>
+    <Div style={{ ...caseStyle, width: 180 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'black' }} />
+    </Div>
+  </Carousel>
+)
+```
+
+With isResponsive property, works also through swipe
+
+```jsx example noscroll
+const carouselStyle = { marginLeft: 4, marginRight: 4 }
+const caseStyle = {
+  height: 180,
+  paddingLeft: 4,
+  paddingRight: 4,
+  minWidth: 100,
+  maxWidth: 500
+}
+const itemStyle = { width: '100%', height: '100%' }
+
+return (
+  <Carousel
+    style={carouselStyle}
+    isResponsive={true}
+    isEndless={true}
+    hasDots={true}
+  >
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
+    </Div>
+  </Carousel>
+)
+```
+
+## Swipe
+
+The ability to scroll with the mouse or finger is set by isSwipe
+The default is true, and you can always turn it off:
+
+```jsx example noscroll
+const carouselStyle = { marginLeft: 4, marginRight: 4 }
+const caseStyle = { height: 180, paddingLeft: 4, paddingRight: 4 }
+const itemStyle = { width: '100%', height: '100%' }
+
+return (
+  <Carousel style={carouselStyle} isSwipe={false}>
+    <Div style={{ ...caseStyle, width: 400 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
+    </Div>
+    <Div style={{ ...caseStyle, width: 260 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
+    </Div>
+    <Div style={{ ...caseStyle, width: 320 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
+    </Div>
+    <Div style={{ ...caseStyle, width: 200 }}>
+      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
+    </Div>
+  </Carousel>
+)
+```
+
+## Display arrows and dots
+
+Set by properties hasArrows (default is true) and hasDots (default is false)
+Without isResponsive - hasDots always false
+
+```jsx example noscroll
+const carouselStyle = { marginLeft: 4, marginRight: 4 }
+const caseStyle = { minWidth: '100%', height: 180, paddingLeft: 4, paddingRight: 4 }
+const itemStyle = { width: '100%', height: '100%' }
+
+return (
+  <Carousel
+    style={carouselStyle}
+    hasArrows={false}
+    hasDots={true}
+    isResponsive={true}
+  >
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
+    </Div>
+  </Carousel>
+)
+```
+
+## Auto scroll
+
+Set by isLoop property (default is false)
+
+```jsx example noscroll
+const carouselStyle = { marginLeft: 4, marginRight: 4 }
+const caseStyle = { minWidth: '100%', height: 180, paddingLeft: 4, paddingRight: 4 }
+const itemStyle = { width: '100%', height: '100%' }
+
+return (
+  <Carousel
+    style={carouselStyle}
+    hasDots={true}
+    isLoop={true}
+    isEndless={true}
+    isResponsive={true}
+  >
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
+    </Div>
+  </Carousel>
+)
+```
+
+## Start value
+
+Set by startIndex (Number) property
+
+```jsx example noscroll
+const carouselStyle = { marginLeft: 4, marginRight: 4 }
+const caseStyle = { minWidth: '100%', height: 180, paddingLeft: 4, paddingRight: 4 }
+const itemStyle = { width: '100%', height: '100%' }
+
+return (
+  <Carousel
+    style={carouselStyle}
+    hasDots={true}
+    isResponsive={true}
+    startIndex={2}
+  >
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'green' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'black' }} />
+    </Div>
+  </Carousel>
+)
+```
+
+## Styling arrows
+
+Set with arrowBackStyle and arrowNextStyle
+
+```jsx example noscroll
+const carouselStyle = { width: '80%', alignSelf: 'center' }
+const caseStyle = { width: 200, height: 180, paddingLeft: 4, paddingRight: 4 }
+const itemStyle = { width: '100%', height: '100%' }
+const arrowBackStyle = {
+  left: -50,
+  backgroundColor: 'transparent',
+  border: '1px solid #333333',
+  color: '#333333'
+}
+const arrowNextStyle = {
+  right: -50,
+  backgroundColor: 'transparent',
+  border: '1px solid #333333',
+  color: '#333333'
+}
+
+return (
+  <Carousel
+    style={carouselStyle}
+    arrowBackStyle={arrowBackStyle}
+    arrowNextStyle={arrowNextStyle}
+  >
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'blue' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'red' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'yellow' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'gray' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'green' }} />
+    </Div>
+    <Div style={caseStyle}>
+      <Div style={{ ...itemStyle, backgroundColor: 'black' }} />
+    </Div>
+  </Carousel>
+)
+```
+
+If you need full customization of arrows or points, can be transferred ref, it will contain functions to switch: toBack, toNext, toIndex
+
+```jsx example noscroll
+const ref = useRef()
+const [slide, setSlide] = useState(0)
+const carouselStyle = { width: '100%', marginLeft: 4, marginRight: 4 }
+const caseStyle = {
+  minWidth: '100%',
+  width: 200,
+  height: 180,
+  paddingLeft: 4,
+  paddingRight: 4
+}
+const itemStyle = { width: '100%', height: '100%' }
+const arrowStyle = {
+  backgroundColor: '#333',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 20,
+  width: 20,
+  paddingBottom: 2
+}
+
+const dotStyle = {
+   backgroundColor: '#333',
+   width: 10,
+   height: 10,
+   border: '2px solid #333',
+   marginLeft: 2,
+   marginRight: 2,
+   borderRadius: 30
+}
+
+const data = [
+  { backgroundColor: 'blue' },
+  { backgroundColor: 'red' },
+  { backgroundColor: 'yellow' },
+  { backgroundColor: 'gray' },
+  { backgroundColor: 'green' },
+  { backgroundColor: 'black' }
+]
+
+return (
+  <Div style={{ overflow: 'hidden' }}>
+    <Div row style={{ marginBottom: 4 }}>
+      <Div style={arrowStyle} onPress={()=> ref.current.toBack()}>
+        <Text style={{ color: '#fff' }}>{'<'}</Text>
+      </Div>
+      <Div style={arrowStyle} onPress={()=> ref.current.toNext()}>
+        <Text style={{ color: '#fff' }}>{'>'}</Text>
+      </Div>
+    </Div>
+    <Carousel
+      ref={ref}
+      style={{ marginLeft: -4, marginRight: -4 }}
+      hasArrows={false}
+      isResponsive={true}
+      onChange={v => setSlide(v)}
+    >
+      {
+        data.map((item, index) => (
+          <Div key={index} style={caseStyle}>
+            <Div style={{ ...itemStyle, ...item }} />
+          </Div>
+        ))
+      }
+    </Carousel>
+    <Div row style={{ alignSelf: 'center', marginTop: 8 }}>
+      {
+        data.map((item, index) => (
+          <Div
+            key={index}
+            style={{
+              ...dotStyle,
+              ...(slide === index ? { backgroundColor: '#fff' } : {})
+            }}
+            onPress={()=> ref.current.toIndex(index)}
+          />
+        ))
+      }
+    </Div>
+  </Div>
+)
+```
+
+## Vertical mode
+
+```jsx example
+const carouselStyle = { marginLeft: 4, marginRight: 4 }
+const caseStyle = {
+  height: 56,
+  width: 72,
+  paddingLeft: 4,
+  paddingRight: 4
+}
+
+const itemStyle = {
+  width: '100%',
+  height: '100%',
+  justifyContent: 'center',
+  alignItems: 'center'
+}
+
+const textStyle = { color: '#fff' }
+
+const data = new Array(24).fill(true).map(Number)
+
+return (
+  <Carousel
+    style={{ height: 240, width: 72 }}
+    variant='vertical'
+    isEndless
+    hasArrows
+  >
+    {
+      data.map((item, index) => (
+        <Div key={index} style={caseStyle}>
+          <Div style={itemStyle}>
+            <Span style={textStyle}>{index + 1}</Span>
+          </Div>
+        </Div>
+      ))
+    }
+  </Carousel>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Carousel}
+  propsJsonSchema={CarouselPropsJsonSchema}
+  props={{
+    isResponsive: true,
+    hasDots: true,
+    style: { height: 180, width: '100%' }
+  }}
+/>

package/index.cssx.styl

@@ -0,0 +1,67 @@
+.wrapper
+  flex-grow 1
+  flex-shrink 1
+  flex-direction column
+
+.carousel
+  flex-grow 1
+  flex-shrink 1
+  flex-direction row
+
+  &.vertical
+    flex-direction column
+
+.arrow
+  background-color var(--Carousel-arrowWrapperBg)
+  align-self center
+  cursor pointer
+  position absolute
+  user-select none
+  z-index 999
+  border-radius 1u
+  padding .5u
+
+  &.vertical
+    position relative
+
+.arrowNext
+  right 3u
+
+  &.vertical
+    right 0
+
+.arrowBack
+  left 3u
+
+  &.vertical
+    left 0
+
+.root
+  overflow hidden
+  flex-direction row
+  flex-grow 1
+  flex-shrink 1
+
+  &.vertical
+    flex-direction column
+
+.case
+  flex-direction row
+
+  &.vertical
+    flex-direction column
+
+.dots
+  align-self center
+  margin 2u 0
+
+.dot
+  height 1u
+  width 2u
+  background-color var(--color-bg-main-subtle)
+  border-radius .3u
+  margin 0 .4u
+  cursor pointer
+
+.dotActive
+  background-color var(--color-bg-primary)

package/index.d.ts

@@ -0,0 +1,41 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import React, { type Ref } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import './index.cssx.styl';
+export declare const _PropsJsonSchema: {};
+export interface CarouselProps {
+    /** Custom styles applied to the outer wrapper */
+    style?: StyleProp<ViewStyle>;
+    /** Styles for the back arrow container and icon */
+    arrowBackStyle?: StyleProp<any>;
+    /** Styles for the next arrow container and icon */
+    arrowNextStyle?: StyleProp<any>;
+    /** Initial active slide index @default 0 */
+    startIndex?: number;
+    /** Direction of movement @default 'horizontal' */
+    variant?: 'horizontal' | 'vertical';
+    /** Enable swipe gestures @default true */
+    isSwipe?: boolean;
+    /** Auto-scroll slides in a loop @default false */
+    isLoop?: boolean;
+    /** Enable endless carousel mode @default false */
+    isEndless?: boolean;
+    /** Adjust slide sizes based on available space @default false */
+    isResponsive?: boolean;
+    /** Show navigation arrows @default true */
+    hasArrows?: boolean;
+    /** Show navigation dots (responsive only) @default false */
+    hasDots?: boolean;
+    /** Animation duration in ms @default 300 */
+    duration?: number;
+    /** Slides to render inside the carousel */
+    children?: any[];
+    /** Callback fired when active slide changes */
+    onChange?: (index: number) => void;
+    /** Ref exposing active child and navigation helpers */
+    ref?: Ref<any>;
+}
+declare const _default: React.ComponentType<CarouselProps>;
+export default _default;

package/index.tsx

@@ -0,0 +1,622 @@
+import React, {
+  useImperativeHandle,
+  useEffect,
+  useState,
+  useMemo,
+  useRef,
+  type ReactNode,
+  type Ref
+} from 'react'
+import {
+  Animated,
+  PanResponder,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Icon from '@startupjs-ui/icon'
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft'
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight'
+import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp'
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown'
+import './index.cssx.styl'
+
+/* eslint-disable react-hooks/exhaustive-deps */
+export const _PropsJsonSchema = {/* CarouselProps */}
+
+export interface CarouselProps {
+  /** Custom styles applied to the outer wrapper */
+  style?: StyleProp<ViewStyle>
+  /** Styles for the back arrow container and icon */
+  arrowBackStyle?: StyleProp<any>
+  /** Styles for the next arrow container and icon */
+  arrowNextStyle?: StyleProp<any>
+  /** Initial active slide index @default 0 */
+  startIndex?: number
+  /** Direction of movement @default 'horizontal' */
+  variant?: 'horizontal' | 'vertical'
+  /** Enable swipe gestures @default true */
+  isSwipe?: boolean
+  /** Auto-scroll slides in a loop @default false */
+  isLoop?: boolean
+  /** Enable endless carousel mode @default false */
+  isEndless?: boolean
+  /** Adjust slide sizes based on available space @default false */
+  isResponsive?: boolean
+  /** Show navigation arrows @default true */
+  hasArrows?: boolean
+  /** Show navigation dots (responsive only) @default false */
+  hasDots?: boolean
+  /** Animation duration in ms @default 300 */
+  duration?: number
+  /** Slides to render inside the carousel */
+  children?: any[]
+  /** Callback fired when active slide changes */
+  onChange?: (index: number) => void
+  /** Ref exposing active child and navigation helpers */
+  ref?: Ref<any>
+}
+
+function Carousel ({
+  style,
+  arrowBackStyle = {},
+  arrowNextStyle = {},
+  startIndex = 0,
+  variant = 'horizontal',
+  isSwipe = true,
+  isLoop = false,
+  isEndless = false,
+  isResponsive = false,
+  hasArrows = true,
+  hasDots = false,
+  duration = 300,
+  children = [],
+  onChange,
+  ref
+}: CarouselProps): ReactNode {
+  arrowBackStyle = StyleSheet.flatten(arrowBackStyle)
+  arrowNextStyle = StyleSheet.flatten(arrowNextStyle)
+  const backArrowColor = arrowBackStyle?.color || '#eeeeee'
+  const nextArrowColor = arrowNextStyle?.color || '#eeeeee'
+
+  const refRoot = useRef<any>(null)
+  const refCase = useRef<any>(null)
+  const refTimeout = useRef<any>(null)
+  const childrenInfo = useRef<any[]>([])
+  const coardName = variant === 'horizontal' ? 'x' : 'y'
+  const sideName = variant === 'horizontal' ? 'width' : 'height'
+
+  const childrenRefs = useMemo(() => {
+    const _refs: Record<number, any> = {}
+    children.forEach((c, i) => {
+      _refs[i] = React.createRef()
+    })
+    return _refs
+  }, [children])
+
+  const validChildren = useMemo(() => {
+    return getValidChildren({ children, isEndless, isResponsive, childrenRefs })
+  }, [children, childrenRefs, isEndless, isResponsive])
+
+  const [activeIndex, setActiveIndex] = useState(startIndex)
+  const [rootInfo, setRootInfo] = useState<Record<string, number>>({})
+  const [caseInfo, setCaseInfo] = useState<Record<string, number>>({})
+  const [animateTranslate, setAnimateTranslate] = useState(new Animated.Value(0))
+  const [caseStyle, setCaseStyle] = useState<Record<string, any>>({})
+
+  const [startDrag, setStartDrag] = useState<any>(null)
+  const [endDrag, setEndDrag] = useState<any>(null)
+  const [isRender, setIsRender] = useState(false)
+  const [isAnimate, setIsAnimate] = useState(false)
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useImperativeHandle(ref, () => {
+    return new Proxy(refRoot.current, {
+      get (target: any, prop: any) {
+        const actualChildIndex = activeIndex % children.length
+        const activeRef = childrenRefs[actualChildIndex].current
+        if (prop === 'getChildByIndex') return getChildByIndex
+        if (prop === 'activeChild') return activeRef
+        if (prop === 'element') return refRoot.current
+        if (prop === 'toBack') return onBack
+        if (prop === 'toNext') return onNext
+        if (prop === 'toIndex') return toIndex
+        if (target?.[prop]) return target[prop]
+        return activeRef?.[prop]
+      }
+    })
+  }, [
+    activeIndex,
+    rootInfo,
+    caseInfo,
+    isAnimate,
+    isRender
+  ])
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (isRender && isLoop && !isAnimate) {
+      refTimeout.current = setTimeout(onNext, 3000)
+    } else {
+      clearTimeout(refTimeout.current)
+    }
+  }, [isRender, isLoop, isAnimate, activeIndex])
+
+  function getChildByIndex (index: number) {
+    return childrenRefs[index].current
+  }
+
+  function onLayoutChild ({ nativeEvent }: any, index: number) {
+    childrenInfo.current[index] = {
+      width: Math.round(nativeEvent.layout.width),
+      height: Math.round(nativeEvent.layout.height),
+      x: Math.round(nativeEvent.layout.x),
+      y: Math.round(nativeEvent.layout.y)
+    }
+
+    if (childrenInfo.current.length === validChildren.length && !isRender) {
+      const isChildNotExists = childrenInfo.current.includes(undefined)
+      if (isChildNotExists) return
+
+      if (isEndless && isResponsive) {
+        setActiveIndex(children.length + startIndex)
+
+        const coard = childrenInfo.current[children.length + startIndex] &&
+          -childrenInfo.current[children.length + startIndex][coardName]
+        animateTranslate.setValue(coard || 0)
+      } else {
+        setActiveIndex(startIndex)
+
+        const coard = childrenInfo.current[startIndex] &&
+          -childrenInfo.current[startIndex][coardName]
+        animateTranslate.setValue(coard || 0)
+      }
+
+      setIsRender(true)
+    }
+  }
+
+  function toIndex (index: number) {
+    setIsAnimate(true)
+
+    if (isEndless && isResponsive) {
+      index = index + children.length
+    }
+
+    let activeElement: any = childrenInfo.current[index]
+    activeElement.index = index
+
+    let toValue = -activeElement[coardName]
+    if (caseInfo[sideName] - activeElement[coardName] < rootInfo[sideName]) {
+      activeElement = getClosest({
+        childrenInfo: childrenInfo.current,
+        newPosition: caseInfo[sideName] - rootInfo[sideName],
+        coardName,
+        sideName
+      })
+      toValue = rootInfo[sideName] - caseInfo[sideName]
+    }
+
+    setActiveIndex(activeElement.index)
+    onChange && onChange(activeElement.index % children.length)
+    Animated.timing(animateTranslate, { toValue, duration, useNativeDriver: false }).start(() => {
+      setIsAnimate(false)
+    })
+  }
+
+  function onBack () {
+    if ((activeIndex === 0 &&
+        (animateTranslate as any)._value === 0 &&
+        !isEndless) || isAnimate) return
+
+    setIsAnimate(true)
+
+    let activeElement: any = childrenInfo.current[activeIndex - 1]
+    if (isResponsive) {
+      activeElement.index = activeIndex - 1
+    } else {
+      const newPosition = childrenInfo.current[activeIndex][coardName] +
+        childrenInfo.current[activeIndex][sideName] - rootInfo[sideName]
+
+      activeElement = getClosest({
+        childrenInfo: childrenInfo.current,
+        coardName,
+        sideName,
+        newPosition
+      })
+    }
+
+    let toValue = -activeElement[coardName]
+
+    if (isEndless && !isResponsive && (activeIndex === 0)) {
+      activeElement = getClosest({
+        childrenInfo: childrenInfo.current,
+        newPosition: caseInfo[sideName] - rootInfo[sideName],
+        coardName,
+        sideName
+      })
+      toValue = rootInfo[sideName] - caseInfo[sideName]
+    }
+
+    if (isEndless && isResponsive && (activeIndex - 1 < children.length)) {
+      const index = activeElement.index * 2 + 1
+      setActiveIndex(index)
+      onChange && onChange(index % children.length)
+    } else {
+      setActiveIndex(activeElement.index)
+      onChange && onChange(activeElement.index % children.length)
+    }
+
+    Animated.timing(animateTranslate, { toValue, duration, useNativeDriver: false }).start(() => {
+      if (isEndless && isResponsive && activeIndex - 1 < children.length) {
+        animateTranslate.setValue(-childrenInfo.current[activeElement.index * 2 + 1][coardName])
+      }
+
+      setIsAnimate(false)
+    })
+  }
+
+  function onNext () {
+    if (isAnimate) return
+    if (!childrenInfo.current[activeIndex + 1] && !isEndless) return
+    if ((caseInfo[sideName] - childrenInfo.current[activeIndex][coardName] <= rootInfo[sideName]) && !isEndless) {
+      return
+    }
+
+    setIsAnimate(true)
+
+    let activeElement: any = childrenInfo.current[activeIndex + 1]
+    if (isResponsive) {
+      activeElement.index = activeIndex + 1
+    } else {
+      if (childrenInfo.current[activeIndex][coardName] + childrenInfo.current[activeIndex][sideName] > rootInfo[sideName]) {
+        activeElement.index = activeIndex + 1
+      } else {
+        activeElement = getClosest({
+          childrenInfo: childrenInfo.current,
+          newPosition: childrenInfo.current[activeIndex][coardName] + rootInfo[sideName],
+          coardName,
+          sideName
+        })
+      }
+    }
+
+    let toValue = -activeElement[coardName]
+    if (caseInfo[sideName] - activeElement[coardName] < rootInfo[sideName]) {
+      activeElement = getClosest({
+        childrenInfo: childrenInfo.current,
+        newPosition: caseInfo[sideName] - rootInfo[sideName],
+        coardName,
+        sideName
+      })
+      toValue = -(caseInfo[sideName] - rootInfo[sideName])
+    }
+
+    if (isEndless && !isResponsive && ((animateTranslate as any)._value === -(caseInfo[sideName] - rootInfo[sideName]))) {
+      activeElement = childrenInfo.current[0]
+      activeElement.index = 0
+      toValue = activeElement[coardName]
+    }
+
+    if (isEndless && isResponsive && activeIndex + 1 >= (children.length * 2)) {
+      setActiveIndex(children.length)
+      onChange && onChange(0)
+    } else {
+      setActiveIndex(activeElement.index)
+      onChange && onChange(activeElement.index % children.length)
+    }
+
+    Animated.timing(animateTranslate, { toValue, duration, useNativeDriver: false }).start(() => {
+      if (isEndless && isResponsive && activeIndex + 1 >= (children.length * 2)) {
+        animateTranslate.setValue(-childrenInfo.current[children.length][coardName])
+      }
+
+      setIsAnimate(false)
+    })
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (!endDrag) return
+    if (startDrag === endDrag) return
+    setIsAnimate(true)
+
+    let _endDrag = endDrag
+    if (-endDrag > caseInfo[sideName]) {
+      _endDrag = -caseInfo[sideName]
+    }
+
+    let activeElement: any = getClosest({
+      childrenInfo: childrenInfo.current,
+      newPosition: -_endDrag,
+      coardName,
+      sideName
+    })
+    const side = (startDrag > _endDrag) ? 'next' : 'back'
+
+    if (activeElement.index === activeIndex) {
+      if (side === 'next') {
+        if (!childrenInfo.current[activeIndex + 1]) {
+          activeElement = childrenInfo.current[activeIndex]
+        } else {
+          activeElement = childrenInfo.current[activeIndex + 1]
+          activeElement.index = activeIndex + 1
+        }
+      } else if (activeIndex - 1 >= 0) {
+        activeElement = childrenInfo.current[activeIndex - 1]
+        activeElement.index = activeIndex - 1
+      }
+    }
+
+    let toValue = -activeElement[coardName]
+    if (caseInfo[sideName] - activeElement[coardName] < rootInfo[sideName]) {
+      activeElement = getClosest({
+        childrenInfo: childrenInfo.current,
+        newPosition: caseInfo[sideName] - rootInfo[sideName],
+        coardName,
+        sideName
+      })
+      toValue = -(caseInfo[sideName] - rootInfo[sideName])
+    }
+
+    if (side === 'back' && isEndless && isResponsive && (activeIndex - 1 < children.length)) {
+      const index = activeElement.index * 2 + 1
+      setActiveIndex(index)
+      onChange && onChange(index % children.length)
+    } else if (side === 'next' && isEndless && isResponsive && (activeIndex + 1 >= (children.length * 2))) {
+      setActiveIndex(children.length)
+      onChange && onChange(0)
+    } else {
+      setActiveIndex(activeElement.index)
+      onChange && onChange(activeElement.index % children.length)
+    }
+
+    Animated.timing(animateTranslate, { toValue, duration, useNativeDriver: false }).start(() => {
+      if (side === 'back' && isEndless && isResponsive && activeIndex - 1 < children.length) {
+        animateTranslate.setValue(-childrenInfo.current[activeElement.index * 2 + 1][coardName])
+      }
+
+      if (side === 'next' && isEndless && isResponsive && (activeIndex + 1 >= (children.length * 2))) {
+        animateTranslate.setValue(-childrenInfo.current[children.length][coardName])
+      }
+
+      setIsAnimate(false)
+    })
+  }, [endDrag])
+
+  const panResponder = useMemo(() => {
+    if (isSwipe && !isAnimate) {
+      return PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+          if (!(gestureState.dx === 0 && gestureState.dy === 0)) {
+            setCaseStyle({ pointerEvents: 'box-only' })
+            return true
+          } else {
+            return false
+          }
+        },
+        onPanResponderTerminationRequest: () => false,
+        onShouldBlockNativeResponder: () => false,
+        onPanResponderGrant: e => {
+          setAnimateTranslate(animateTranslate => {
+            setStartDrag((animateTranslate as any)._value)
+            return animateTranslate
+          })
+        },
+        onPanResponderMove: (e, gesture) => {
+          const delta = (gesture as any)['d' + coardName]
+          setStartDrag((startDrag: any) => {
+            animateTranslate.setValue(startDrag + delta)
+            return startDrag
+          })
+        },
+        onPanResponderEnd: () => {
+          setAnimateTranslate(animateTranslate => {
+            setEndDrag((animateTranslate as any)._value)
+            setCaseStyle({})
+            return animateTranslate
+          })
+        }
+      })
+    }
+
+    return { panHandlers: {} }
+  }, [animateTranslate, coardName, isAnimate, isSwipe])
+
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  const renderChildren = React.Children.toArray(validChildren).map((child: any, index, arr) => {
+    const _style = StyleSheet.flatten([child.props.style])
+
+    const sideCapitalLetter = sideName[0].toUpperCase() + sideName.slice(1)
+
+    if (isResponsive) {
+      if ((!_style['min' + sideCapitalLetter] || !_style['max' + sideCapitalLetter]) && _style['min' + sideCapitalLetter] !== '100%') {
+        console.error('isResponsive need minWidth and maxWidth in children')
+        return null
+      }
+
+      if (!rootInfo[sideName]) return null
+
+      let step = 1
+      let _side
+
+      if (_style['min' + sideCapitalLetter] === '100%') {
+        _style['min' + sideCapitalLetter] = rootInfo[sideName]
+        _style['max' + sideCapitalLetter] = rootInfo[sideName]
+        _side = rootInfo[sideName]
+        step = -1
+      }
+
+      while (step !== -1) {
+        _side = rootInfo[sideName] / step
+
+        if (isNaN(_side)) break
+        if (step > 10) {
+          console.error('no valid minSide/maxSide')
+          break
+        }
+        if ((_side >= _style['min' + sideCapitalLetter]) && (_side <= _style['max' + sideCapitalLetter])) {
+          break
+        }
+
+        step++
+      }
+
+      if (_side && !isNaN(_side)) _style[sideName] = _side
+    }
+
+    child = React.cloneElement(child, { style: _style })
+
+    return pug`
+      View(
+        key=index
+        onLayout=e=> onLayoutChild(e, index)
+      )= child
+    `
+  })
+
+  function onLayoutRoot ({ nativeEvent }: any) {
+    setRootInfo({
+      width: Math.round(nativeEvent.layout.width),
+      height: Math.round(nativeEvent.layout.height)
+    })
+  }
+
+  function onLayoutCase ({ nativeEvent }: any) {
+    setCaseInfo({
+      width: Math.round(nativeEvent.layout.width),
+      height: Math.round(nativeEvent.layout.height)
+    })
+  }
+
+  const dots = getDotsArray({
+    children,
+    childrenInfo: childrenInfo.current,
+    coardName,
+    sideName,
+    rootInfo,
+    caseInfo,
+    isRender,
+    isEndless,
+    isResponsive
+  })
+
+  return pug`
+    Div.wrapper(style=[style, { opacity: isRender ? 1 : 0 }])
+      Div.carousel(styleName=variant)
+        if hasArrows
+          Div.arrow.arrowBack(
+            style=arrowBackStyle
+            styleName=variant
+            onPress=onBack
+          )
+            Icon.icon(
+              style={ color: backArrowColor }
+              icon=variant === 'vertical' ? faAngleUp : faAngleLeft
+              size='xxl'
+            )
+        View.root(
+          ref=refRoot
+          styleName=variant
+          onLayout=onLayoutRoot
+        )
+          Animated.View.case(
+            ref=refCase
+            ...panResponder.panHandlers
+            style=[
+              {
+                transform: [{
+                  ['translate' + coardName.toUpperCase()]: animateTranslate
+                }]
+              },
+              caseStyle
+            ]
+            styleName=variant
+            onLayout=onLayoutCase
+          )= renderChildren
+        if hasArrows
+          Div.arrow.arrowNext(
+            style=arrowNextStyle
+            styleName=variant
+            onPress=onNext
+          )
+            Icon.icon(
+              style={ color: nextArrowColor }
+              icon=variant === 'vertical' ? faAngleDown : faAngleRight
+              size='xxl'
+            )
+
+      if hasDots && isResponsive
+        Div.dots(row)
+          each _, index in dots
+            Div.dot(
+              key=index
+              onPress=()=> toIndex(index)
+              styleName={ dotActive: activeIndex === (isEndless ? (index + children.length) : index) }
+            )
+  `
+}
+
+function getClosest ({
+  childrenInfo,
+  newPosition,
+  coardName,
+  sideName
+}: any) {
+  let activeElement: any = {}
+
+  for (let index = 0; index < childrenInfo.length; index++) {
+    const item = childrenInfo[index]
+
+    if (newPosition < item[coardName] && index === 0) {
+      activeElement = { ...item, index }
+      break
+    }
+
+    if (newPosition >= item[coardName] && newPosition <= (item[coardName] + item[sideName])) {
+      activeElement = { ...item, index }
+    }
+  }
+
+  return activeElement
+}
+
+function getDotsArray ({
+  children,
+  childrenInfo,
+  coardName,
+  sideName,
+  rootInfo,
+  caseInfo,
+  isRender,
+  isEndless,
+  isResponsive
+}: any) {
+  if (!isRender) return []
+  if (isEndless && isResponsive) return childrenInfo.slice(children.length * 2)
+
+  return childrenInfo.filter((item: any) => {
+    if (!item) return false
+    return Math.round(item[coardName]) <= (caseInfo[sideName] - rootInfo[sideName])
+  })
+}
+
+function getValidChildren ({ children, isEndless, isResponsive, childrenRefs }: any) {
+  const childrenWithRefs = React.Children.toArray(children)
+    .map((child: any, index: number) => {
+      const childRef = childrenRefs[index]
+      return React.cloneElement(child, { ref: childRef })
+    })
+  if (isEndless && isResponsive) {
+    return [...children, ...childrenWithRefs, ...children]
+  }
+
+  return childrenWithRefs
+}
+
+export default observer(themed('Carousel', Carousel))

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@startupjs-ui/carousel",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/icon": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}