@neko-os/ui 0.4.0 → 0.5.1

package/dist/components/structure/KeyboardAvoidingView.js

@@ -1,6 +1,7 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/KeyboardAvoidingView.js";var _excluded = ["children", "keyboardVerticalOffset"];function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { pipe } from 'ramda';
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/KeyboardAvoidingView.js";var _excluded = ["children", "keyboardVerticalOffset", "dismissOnTap"];function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { pipe } from 'ramda';
 
 import { AbsKeyboardAvoidingView } from "../../abstractions/KeyboardAvoidingView";
+import { AbsKeyboardDismissView } from "../../abstractions/KeyboardDismissView";
 import { Platform } from "../../abstractions/Platform";
 import { useSafeAreaInsets } from "../../abstractions/helpers/useSafeAreaInsets";
 import { useAnimationModifier } from "../../modifiers/animation";
@@ -19,7 +20,7 @@ import { useSizeModifier } from "../../modifiers/size";
 import { useStateModifier } from "../../modifiers/state";
 import { useThemeComponentModifier } from "../../modifiers/themeComponent";import { jsx as _jsx } from "react/jsx-runtime";
 
-export function KeyboardAvoidingView(_ref) {var children = _ref.children,_ref$keyboardVertical = _ref.keyboardVerticalOffset,keyboardVerticalOffset = _ref$keyboardVertical === void 0 ? 0 : _ref$keyboardVertical,rootProps = _objectWithoutProperties(_ref, _excluded);
+export function KeyboardAvoidingView(_ref) {var children = _ref.children,_ref$keyboardVertical = _ref.keyboardVerticalOffset,keyboardVerticalOffset = _ref$keyboardVertical === void 0 ? 0 : _ref$keyboardVertical,_ref$dismissOnTap = _ref.dismissOnTap,dismissOnTap = _ref$dismissOnTap === void 0 ? true : _ref$dismissOnTap,rootProps = _objectWithoutProperties(_ref, _excluded);
   var _useSafeAreaInsets = useSafeAreaInsets(),bottom = _useSafeAreaInsets.bottom;
 
   var _pipe = pipe(
@@ -46,7 +47,13 @@ export function KeyboardAvoidingView(_ref) {var children = _ref.children,_ref$ke
       keyboardVerticalOffset: keyboardVerticalOffset + bottom },
     props, { children:
 
+      dismissOnTap ?
+      _jsx(AbsKeyboardDismissView, { style: { flex: 1 }, children:
+        children }
+      ) :
+
       children })
+
     ));
 
 }

package/dist/components/theme/ThemePicker.js

@@ -1,25 +1,20 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/theme/ThemePicker.js";import { mapObjIndexed, mergeDeepRight, values, pipe, filter } from 'ramda';
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/theme/ThemePicker.js";import { mapObjIndexed, values, pipe, reject, propEq } from 'ramda';
 
-import { DEFAULT_THEMES, useThemeHandler } from "../../theme";
+import { useAllThemes, useThemeHandler } from "../../theme";
 import { IconLabel } from "../presentation";
 import { Link } from "../actions";
 import { Picker } from "../inputs";
 import { ThemeThumb } from "./ThemeThumb";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 
-export function ThemePicker(_ref) {var _this = this;var _onChange = _ref.onChange,onlyKeys = _ref.onlyKeys,hideKeys = _ref.hideKeys;
-  var _useThemeHandler = useThemeHandler(),activeThemeKey = _useThemeHandler.activeThemeKey,themes = _useThemeHandler.themes,onChangeTheme = _useThemeHandler.onChangeTheme;
+export function ThemePicker(_ref) {var _this = this;var _onChange = _ref.onChange;
+  var _useThemeHandler = useThemeHandler(),activeThemeKey = _useThemeHandler.activeThemeKey,onChangeTheme = _useThemeHandler.onChangeTheme;
+  var allThemes = useAllThemes();
 
   var options = pipe(
-    mergeDeepRight(DEFAULT_THEMES),
     mapObjIndexed(function (obj, key) {return Object.assign({}, obj, { value: key, key: key });}),
     values,
-    filter(function (item) {
-      if (item.value === '_all') return false;
-      if (onlyKeys && onlyKeys.includes(item.value)) return true;
-      if (hideKeys && hideKeys.includes(item.value)) return false;
-      return true;
-    })
-  )(themes);
+    reject(propEq('_all', 'value'))
+  )(allThemes);
 
   return (
     _jsx(Picker, {

package/dist/components/theme/ThemeThumb.js

@@ -4,7 +4,7 @@ import { useResponsiveValue } from "../../responsive";
 import { useThemeHandler } from "../../theme";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 
 export function ThemeThumb(_ref) {var value = _ref.value;
-  var _useThemeHandler = useThemeHandler(),themes = _useThemeHandler.themes;
+  var _useThemeHandler = useThemeHandler(),themes = _useThemeHandler.rawThemesParam;
   var _useFormattedTheme = useFormattedTheme(themes, value),colors = _useFormattedTheme.colors,label = _useFormattedTheme.label;
   var isMobile = useResponsiveValue({ smd: true, df: false });
 

package/dist/index.js

@@ -4,5 +4,6 @@ export * from "./theme";
 export * from "./responsive";
 export * from "./i18n";
 export * from "./NekoUI";
+export * from "./abstractions";
 
 export var version = 41;

package/dist/theme/ThemeHandler.js

@@ -1,7 +1,8 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/theme/ThemeHandler.js";function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}import { mergeDeepRight } from 'ramda';
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/theme/ThemeHandler.js";function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}import { keys, mergeDeepRight, omit, pick, pickBy } from 'ramda';
 import React from 'react';
 
 import { DEFAULT_LIGHT_THEME } from "./default/lightTheme";
+import { DEFAULT_THEMES } from "./default/themes";
 import { getThemeValue } from "./helpers/relatedScales";
 import { useFormattedTheme } from "./format/formatTheme";import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -52,8 +53,33 @@ export function useMergeThemeComponent(name, props) {
   var themeProps = useThemeComponent(name);
   return mergeDeepRight(themeProps, props);
 }
+export function useAllThemes() {
+  var _useThemeHandler2 = useThemeHandler(),disableDefaultThemes = _useThemeHandler2.disableDefaultThemes,enableOnlyThemes = _useThemeHandler2.enableOnlyThemes,rawThemesParam = _useThemeHandler2.rawThemesParam;
+  var themes = rawThemesParam || {};
+  var themesParamKeys = keys(themes);
+
+  var allThemes = mergeDeepRight(DEFAULT_THEMES, themes);
+  if (disableDefaultThemes === true) {
+    allThemes = pickBy(function (_, key) {return themesParamKeys.includes(key);}, allThemes);
+  } else if (disableDefaultThemes != null && disableDefaultThemes.length) {
+    allThemes = omit(disableDefaultThemes, allThemes);
+  }
+  if (enableOnlyThemes != null && enableOnlyThemes.length) {
+    allThemes = pick(enableOnlyThemes, allThemes);
+  }
+
+  return allThemes;
+}
+
+export function ThemeHandler(_ref)
+
+
+
+
+
+
 
-export function ThemeHandler(_ref) {var breakpoints = _ref.breakpoints,themes = _ref.themes,initTheme = _ref.initTheme,onChangeTheme = _ref.onChangeTheme,children = _ref.children;
+{var breakpoints = _ref.breakpoints,themes = _ref.themes,initTheme = _ref.initTheme,onChangeTheme = _ref.onChangeTheme,children = _ref.children,disableDefaultThemes = _ref.disableDefaultThemes,enableOnlyThemes = _ref.enableOnlyThemes;
   var _React$useState = React.useState(false),_React$useState2 = _slicedToArray(_React$useState, 2),themePickerOpen = _React$useState2[0],setThemePickerOpen = _React$useState2[1];
   var openThemePicker = function openThemePicker() {return setThemePickerOpen(true);};
   var _React$useState3 = React.useState(initTheme || 'light'),_React$useState4 = _slicedToArray(_React$useState3, 2),activeThemeKey = _React$useState4[0],setActiveThemeKey = _React$useState4[1];
@@ -66,7 +92,9 @@ export function ThemeHandler(_ref) {var breakpoints = _ref.breakpoints,themes =
 
   var value = {
     theme: theme,
-    themes: themes,
+    rawThemesParam: themes,
+    disableDefaultThemes: disableDefaultThemes,
+    enableOnlyThemes: enableOnlyThemes,
     activeThemeKey: activeThemeKey,
     toggleTheme: toggleTheme,
     themePickerOpen: themePickerOpen,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neko-os/ui",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "author": "Christian Storch <ccstorch@gmail.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/abstractions/KeyboardDismissView.js

@@ -0,0 +1,3 @@
+export function AbsKeyboardDismissView({ children }) {
+  return children
+}

package/src/abstractions/KeyboardDismissView.native.js

@@ -0,0 +1,9 @@
+import { Keyboard, Pressable } from 'react-native'
+
+export function AbsKeyboardDismissView({ children, style }) {
+  return (
+    <Pressable onPress={Keyboard.dismiss} accessible={false} style={style}>
+      {children}
+    </Pressable>
+  )
+}

package/src/abstractions/index.js

@@ -0,0 +1 @@
+export * from './Platform'

package/src/components/actions/ClearLink.js

@@ -0,0 +1,6 @@
+import { Link } from './Link'
+
+export function ClearLink({ hide, value, onChange, ...props }) {
+  if (!!hide || !!value) return false
+  return <Link center red label="Remove Value" onPress={() => onChange(null)} padding="sm" {...props} />
+}

package/src/components/actions/FloatingMenu.js

@@ -14,7 +14,7 @@ export function FloatingMenu({ fixed, onChange, items, activeIndex, size = 'md',
 
   return (
     <View absolute={!fixed} fixed={fixed} left="md" right="md" centerH bottom={Math.max(insets.bottom / 2, 16)}>
-      <WrapperView height={height} shadow round row paddingH="sm" bg={bg} {...props}>
+      <WrapperView height={height} shadow round row paddingH="sm" bg={bg} border="overlayDivider" {...props}>
         {items.map((item, index) => {
           const isActive = index === activeIndex
 

package/src/components/calendar/CalendarNav.js

@@ -20,7 +20,7 @@ export function CalendarNav({ value, onChange, level, ...props }) {
 
     return (
       <View className="neko-calendar-nav" row centerV gap="xxs" height={30} {...props}>
-        <Link onPress={prevDecade} aria-label="Previous decade" padding="xxs" paddingL={0}>
+        <Link onPress={prevDecade} aria-label="Previous decade" padding="sm" paddingL={0}>
           <Icon name="arrow-left-double-line" />
         </Link>
 
@@ -28,7 +28,7 @@ export function CalendarNav({ value, onChange, level, ...props }) {
           {year}-{year + 9}
         </Text>
 
-        <Link onPress={nextDecade} aria-label="Next decade" padding="xxs" paddingR={0}>
+        <Link onPress={nextDecade} aria-label="Next decade" padding="sm" paddingR={0}>
           <Icon name="arrow-right-double-line" />
         </Link>
       </View>
@@ -37,12 +37,12 @@ export function CalendarNav({ value, onChange, level, ...props }) {
 
   return (
     <View className="neko-calendar-nav" row centerV gap="xxs" height={30} {...props}>
-      <Link onPress={prevYear} aria-label="Previous year" padding="xxs" paddingL={0}>
+      <Link onPress={prevYear} aria-label="Previous year" padding="sm" paddingR={0}>
         <Icon name="arrow-left-double-line" />
       </Link>
 
       {showMonth && (
-        <Link onPress={prevMonth} aria-label="Previous month" padding="xxs">
+        <Link onPress={prevMonth} aria-label="Previous month" padding="sm">
           <Icon name="arrow-left-s-line" />
         </Link>
       )}
@@ -54,12 +54,12 @@ export function CalendarNav({ value, onChange, level, ...props }) {
       </View>
 
       {showMonth && (
-        <Link onPress={nextMonth} aria-label="Next month" padding="xxs">
+        <Link onPress={nextMonth} aria-label="Next month" padding="sm">
           <Icon name="arrow-right-s-line" />
         </Link>
       )}
 
-      <Link onPress={nextYear} aria-label="Next year" padding="xxs" paddingR={0}>
+      <Link onPress={nextYear} aria-label="Next year" padding="sm" paddingL={0}>
         <Icon name="arrow-right-double-line" />
       </Link>
     </View>

package/src/components/carousel/Carousel.js

@@ -0,0 +1,48 @@
+import { View } from '../structure/View'
+import { CarouselArrows } from './CarouselArrows'
+import { CarouselDots } from './CarouselDots'
+import { CarouselHandler } from './CarouselHandler'
+import { CarouselSlider } from './CarouselSlider'
+
+export function Carousel({
+  items,
+  activeIndex,
+  activeKey,
+  onChange,
+  afterChange,
+  autoplay,
+  autoplaySpeed,
+  draggable,
+  loop,
+  showDots,
+  showArrows,
+  floatingDots,
+  dotsProps,
+  arrowsProps,
+  children,
+  ...rootProps
+}) {
+  return (
+    <CarouselHandler
+      items={items}
+      activeIndex={activeIndex}
+      activeKey={activeKey}
+      onChange={onChange}
+      afterChange={afterChange}
+      autoplay={autoplay}
+      autoplaySpeed={autoplaySpeed}
+      draggable={draggable}
+      loop={loop}
+    >
+      <View {...rootProps}>
+        <View relative>
+          <CarouselSlider />
+          {showArrows && <CarouselArrows {...arrowsProps} />}
+          {showDots && floatingDots && <CarouselDots absolute bottom="xs" left={0} right={0} {...dotsProps} />}
+        </View>
+        {showDots && !floatingDots && <CarouselDots {...dotsProps} />}
+        {children}
+      </View>
+    </CarouselHandler>
+  )
+}

package/src/components/carousel/CarouselArrows.js

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { Icon } from '../presentation/Icon'
+import { Link } from '../actions/Link'
+import { View } from '../structure/View'
+import { useCarousel } from './CarouselHandler'
+
+export function CarouselArrows({ iconSize = 'md', ...props }) {
+  const { goToNext, goToPrev, activeIndex, itemsCount, loop } = useCarousel()
+
+  const showPrev = loop || activeIndex > 0
+  const showNext = loop || activeIndex < itemsCount - 1
+
+  return (
+    <View
+      absoluteFill
+      row
+      centerV
+      paddingH="xs"
+      justify="space-between"
+      style={{ pointerEvents: 'none' }}
+      {...props}
+    >
+      {showPrev ? (
+        <Link onPress={goToPrev} bg="overlayBG_op80" round padding="xs" shadow style={{ pointerEvents: 'auto' }}>
+          <Icon name="arrow-left-s-line" text3 size={iconSize} />
+        </Link>
+      ) : (
+        <View />
+      )}
+      {showNext ? (
+        <Link onPress={goToNext} bg="overlayBG_op80" round padding="xs" shadow style={{ pointerEvents: 'auto' }}>
+          <Icon name="arrow-right-s-line" text3 size={iconSize} />
+        </Link>
+      ) : (
+        <View />
+      )}
+    </View>
+  )
+}

package/src/components/carousel/CarouselArrows.native.js

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { Icon } from '../presentation/Icon'
+import { Link } from '../actions/Link'
+import { View } from '../structure/View'
+import { useCarousel } from './CarouselHandler'
+
+export function CarouselArrows({ iconSize = 'md', ...props }) {
+  const { goToNext, goToPrev, activeIndex, itemsCount, loop } = useCarousel()
+
+  const showPrev = loop || activeIndex > 0
+  const showNext = loop || activeIndex < itemsCount - 1
+
+  return (
+    <View
+      absoluteFill
+      row
+      centerV
+      paddingH="xs"
+      justify="space-between"
+      pointerEvents="box-none"
+      {...props}
+    >
+      {showPrev ? (
+        <Link onPress={goToPrev} bg="overlayBG_op80" round padding="xs" shadow>
+          <Icon name="arrow-left-s-line" text3 size={iconSize} />
+        </Link>
+      ) : (
+        <View />
+      )}
+      {showNext ? (
+        <Link onPress={goToNext} bg="overlayBG_op80" round padding="xs" shadow>
+          <Icon name="arrow-right-s-line" text3 size={iconSize} />
+        </Link>
+      ) : (
+        <View />
+      )}
+    </View>
+  )
+}

package/src/components/carousel/CarouselDots.js

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import { Pressable } from '../actions/Pressable'
+import { View } from '../structure/View'
+import { useCarousel } from './CarouselHandler'
+
+function Dot({ active, onPress }) {
+  return (
+    <Pressable
+      onPress={onPress}
+      width={active ? 20 : 8}
+      height={8}
+      round
+      bg={active ? 'primary' : 'text4_op30'}
+      style={{ transition: 'all 200ms ease-in-out' }}
+    />
+  )
+}
+
+export function CarouselDots(props) {
+  const { items, activeIndex, goTo } = useCarousel()
+
+  if (!items?.length) return null
+
+  return (
+    <View row center gap="xs" paddingV="sm" {...props}>
+      {items.map((item, index) => (
+        <Dot key={item.key} active={index === activeIndex} onPress={() => goTo(index)} />
+      ))}
+    </View>
+  )
+}

package/src/components/carousel/CarouselDots.native.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
+
+import { Pressable } from '../actions/Pressable'
+import { View } from '../structure/View'
+import { useColors } from '../../theme/ThemeHandler'
+import { useCarousel } from './CarouselHandler'
+
+function Dot({ active, onPress }) {
+  const colors = useColors()
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: withTiming(active ? 20 : 8, { duration: 200 }),
+    backgroundColor: withTiming(active ? colors.primary : colors.text4_op30, { duration: 200 }),
+  }), [active])
+
+  return (
+    <Pressable onPress={onPress}>
+      <Animated.View style={[{ height: 8, borderRadius: 4 }, animatedStyle]} />
+    </Pressable>
+  )
+}
+
+export function CarouselDots(props) {
+  const { items, activeIndex, goTo } = useCarousel()
+
+  if (!items?.length) return null
+
+  return (
+    <View row center gap="xs" paddingV="sm" {...props}>
+      {items.map((item, index) => (
+        <Dot key={item.key} active={index === activeIndex} onPress={() => goTo(index)} />
+      ))}
+    </View>
+  )
+}

package/src/components/carousel/CarouselHandler.js

@@ -0,0 +1,86 @@
+import React from 'react'
+
+const CarouselContext = React.createContext(null)
+export const useCarousel = () => React.useContext(CarouselContext) || {}
+
+export function CarouselHandler({
+  children,
+  items,
+  activeIndex: controlledIndex,
+  activeKey,
+  onChange,
+  afterChange,
+  autoplay,
+  autoplaySpeed = 3000,
+  draggable,
+  loop,
+}) {
+  const itemsCount = items?.length || 0
+  const isControlled = controlledIndex !== undefined || activeKey !== undefined
+
+  const [internalIndex, setInternalIndex] = React.useState(() => {
+    if (controlledIndex !== undefined) return controlledIndex
+    if (activeKey !== undefined) return Math.max(0, items?.findIndex((i) => i.key === activeKey) || 0)
+    return 0
+  })
+
+  const resolvedIndex = isControlled
+    ? activeKey !== undefined
+      ? Math.max(0, items?.findIndex((i) => i.key === activeKey) || 0)
+      : controlledIndex
+    : internalIndex
+
+  const activeItem = React.useMemo(() => items?.[resolvedIndex], [items, resolvedIndex])
+
+  const pausedRef = React.useRef(false)
+
+  const goTo = React.useCallback(
+    (index) => {
+      let next = index
+      if (loop) next = ((next % itemsCount) + itemsCount) % itemsCount
+      else next = Math.max(0, Math.min(next, itemsCount - 1))
+
+      if (!isControlled) setInternalIndex(next)
+      onChange?.(items?.[next]?.key, next)
+    },
+    [loop, itemsCount, isControlled, onChange, items]
+  )
+
+  const goToNext = React.useCallback(() => goTo(resolvedIndex + 1), [goTo, resolvedIndex])
+  const goToPrev = React.useCallback(() => goTo(resolvedIndex - 1), [goTo, resolvedIndex])
+
+  const pauseAutoplay = React.useCallback(() => {
+    pausedRef.current = true
+  }, [])
+
+  const resumeAutoplay = React.useCallback(() => {
+    pausedRef.current = false
+  }, [])
+
+  React.useEffect(() => {
+    if (!autoplay || itemsCount <= 1) return
+
+    const interval = setInterval(() => {
+      if (!pausedRef.current) goToNext()
+    }, autoplaySpeed)
+
+    return () => clearInterval(interval)
+  }, [autoplay, autoplaySpeed, itemsCount, resolvedIndex, goToNext])
+
+  const value = {
+    items,
+    activeIndex: resolvedIndex,
+    activeItem,
+    itemsCount,
+    goTo,
+    goToNext,
+    goToPrev,
+    afterChange,
+    draggable,
+    loop,
+    pauseAutoplay,
+    resumeAutoplay,
+  }
+
+  return <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
+}

package/src/components/carousel/CarouselSlider.js

@@ -0,0 +1,124 @@
+import React from 'react'
+
+import { View } from '../structure/View'
+import { useCarousel } from './CarouselHandler'
+
+function SlideContent({ item }) {
+  const Content = React.useMemo(
+    () => item.render || item.renderContent || item.Content,
+    [item.render, item.renderContent, item.Content]
+  )
+  return Content ? <Content /> : null
+}
+
+export function CarouselSlider() {
+  const { items, activeIndex, itemsCount, draggable, loop, afterChange, goToNext, goToPrev, pauseAutoplay, resumeAutoplay } =
+    useCarousel()
+
+  const containerRef = React.useRef(null)
+  const [isDragging, setIsDragging] = React.useState(false)
+  const [dragOffset, setDragOffset] = React.useState(0)
+  const startXRef = React.useRef(0)
+  const startTimeRef = React.useRef(0)
+  const prevItemsRef = React.useRef(items)
+  const skipTransitionRef = React.useRef(false)
+
+  if (items !== prevItemsRef.current) {
+    skipTransitionRef.current = true
+    prevItemsRef.current = items
+  }
+
+  React.useEffect(() => {
+    if (skipTransitionRef.current) {
+      const id = requestAnimationFrame(() => {
+        skipTransitionRef.current = false
+      })
+      return () => cancelAnimationFrame(id)
+    }
+  })
+
+  if (!items?.length) return null
+
+  const baseTranslate = -(activeIndex * 100) / itemsCount
+  const dragPercent =
+    isDragging && containerRef.current ? (dragOffset / containerRef.current.offsetWidth) * (100 / itemsCount) : 0
+  const transformX = baseTranslate + dragPercent
+
+  const dragStateRef = React.useRef({ isDragging: false, dragOffset: 0 })
+
+  const handlePointerDown = (e) => {
+    if (!draggable) return
+    startXRef.current = e.clientX
+    startTimeRef.current = Date.now()
+    dragStateRef.current = { isDragging: true, dragOffset: 0 }
+    setIsDragging(true)
+    setDragOffset(0)
+    pauseAutoplay()
+
+    const onMove = (ev) => {
+      const raw = ev.clientX - startXRef.current
+      let offset = raw
+      if (!loop) {
+        const containerWidth = containerRef.current?.offsetWidth || 1
+        const atStart = activeIndex === 0 && raw > 0
+        const atEnd = activeIndex === itemsCount - 1 && raw < 0
+        if (atStart || atEnd) offset = raw * 0.3
+      }
+      dragStateRef.current.dragOffset = offset
+      setDragOffset(offset)
+    }
+
+    const onUp = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onUp)
+
+      const offset = dragStateRef.current.dragOffset
+      const containerWidth = containerRef.current?.offsetWidth || 1
+      const threshold = containerWidth * 0.25
+      const elapsed = Date.now() - startTimeRef.current
+      const velocity = Math.abs(offset) / (elapsed || 1)
+
+      if (offset < -threshold || (offset < 0 && velocity > 0.5)) {
+        goToNext()
+      } else if (offset > threshold || (offset > 0 && velocity > 0.5)) {
+        goToPrev()
+      }
+
+      dragStateRef.current = { isDragging: false, dragOffset: 0 }
+      setIsDragging(false)
+      setDragOffset(0)
+      resumeAutoplay()
+    }
+
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onUp)
+  }
+
+  return (
+    <View hiddenOverflow fullW ref={containerRef}>
+      <View
+        row
+        style={{
+          width: `${itemsCount * 100}%`,
+          transform: `translateX(${transformX}%)`,
+          transition: isDragging || skipTransitionRef.current ? 'none' : 'transform 300ms ease-in-out',
+          touchAction: 'pan-y',
+          cursor: draggable ? (isDragging ? 'grabbing' : 'grab') : undefined,
+          userSelect: 'none',
+        }}
+        onTransitionEnd={afterChange ? (e) => {
+          if (e.propertyName === 'transform') afterChange(items?.[activeIndex]?.key, activeIndex)
+        } : undefined}
+        onPointerDown={draggable ? handlePointerDown : undefined}
+      >
+        {items.map((item) => (
+          <View key={item.key} style={{ width: `${100 / itemsCount}%` }}>
+            <SlideContent item={item} />
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}