@neko-os/ui 0.4.0 → 0.5.1

package/dist/abstractions/KeyboardDismissView.js

@@ -0,0 +1,3 @@
+export function AbsKeyboardDismissView(_ref) {var children = _ref.children;
+  return children;
+}

package/dist/abstractions/KeyboardDismissView.native.js

@@ -0,0 +1,9 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/abstractions/KeyboardDismissView.native.js";import { Keyboard, Pressable } from "react-native-web";import { jsx as _jsx } from "react/jsx-runtime";
+
+export function AbsKeyboardDismissView(_ref) {var children = _ref.children,style = _ref.style;
+  return (
+    _jsx(Pressable, { onPress: Keyboard.dismiss, accessible: false, style: style, children:
+      children }
+    ));
+
+}

package/dist/abstractions/index.js

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

package/dist/components/actions/ClearLink.js

@@ -0,0 +1,6 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/ClearLink.js";var _excluded = ["hide", "value", "onChange"];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 { Link } from "./Link";import { jsx as _jsx } from "react/jsx-runtime";
+
+export function ClearLink(_ref) {var hide = _ref.hide,value = _ref.value,onChange = _ref.onChange,props = _objectWithoutProperties(_ref, _excluded);
+  if (!!hide || !!value) return false;
+  return _jsx(Link, Object.assign({ center: true, red: true, label: "Remove Value", onPress: function onPress() {return onChange(null);}, padding: "sm" }, props));
+}

package/dist/components/actions/FloatingMenu.js

@@ -14,7 +14,7 @@ export function FloatingMenu(_ref) {var _this = this;var fixed = _ref.fixed,onCh
 
   return (
     _jsx(View, { absolute: !fixed, fixed: fixed, left: "md", right: "md", centerH: true, bottom: Math.max(insets.bottom / 2, 16), children:
-      _jsx(WrapperView, Object.assign({ height: height, shadow: true, round: true, row: true, paddingH: "sm", bg: bg }, props, { children:
+      _jsx(WrapperView, Object.assign({ height: height, shadow: true, round: true, row: true, paddingH: "sm", bg: bg, border: "overlayDivider" }, props, { children:
         items.map(function (item, index) {var _item$icon;
           var isActive = index === activeIndex;
 

package/dist/components/calendar/CalendarNav.js

@@ -20,7 +20,7 @@ export function CalendarNav(_ref) {var value = _ref.value,onChange = _ref.onChan
 
     return (
       _jsxs(View, Object.assign({ className: "neko-calendar-nav", row: true, centerV: true, gap: "xxs", height: 30 }, props, { children: [
-        _jsx(Link, { onPress: prevDecade, "aria-label": "Previous decade", padding: "xxs", paddingL: 0, children:
+        _jsx(Link, { onPress: prevDecade, "aria-label": "Previous decade", padding: "sm", paddingL: 0, children:
           _jsx(Icon, { name: "arrow-left-double-line" }) }
         ),
 
@@ -28,7 +28,7 @@ export function CalendarNav(_ref) {var value = _ref.value,onChange = _ref.onChan
           year, "-", year + 9] }
         ),
 
-        _jsx(Link, { onPress: nextDecade, "aria-label": "Next decade", padding: "xxs", paddingR: 0, children:
+        _jsx(Link, { onPress: nextDecade, "aria-label": "Next decade", padding: "sm", paddingR: 0, children:
           _jsx(Icon, { name: "arrow-right-double-line" }) }
         )] })
       ));
@@ -37,12 +37,12 @@ export function CalendarNav(_ref) {var value = _ref.value,onChange = _ref.onChan
 
   return (
     _jsxs(View, Object.assign({ className: "neko-calendar-nav", row: true, centerV: true, gap: "xxs", height: 30 }, props, { children: [
-      _jsx(Link, { onPress: prevYear, "aria-label": "Previous year", padding: "xxs", paddingL: 0, children:
+      _jsx(Link, { onPress: prevYear, "aria-label": "Previous year", padding: "sm", paddingR: 0, children:
         _jsx(Icon, { name: "arrow-left-double-line" }) }
       ),
 
       showMonth &&
-      _jsx(Link, { onPress: prevMonth, "aria-label": "Previous month", padding: "xxs", children:
+      _jsx(Link, { onPress: prevMonth, "aria-label": "Previous month", padding: "sm", children:
         _jsx(Icon, { name: "arrow-left-s-line" }) }
       ),
 
@@ -54,12 +54,12 @@ export function CalendarNav(_ref) {var value = _ref.value,onChange = _ref.onChan
       ),
 
       showMonth &&
-      _jsx(Link, { onPress: nextMonth, "aria-label": "Next month", padding: "xxs", children:
+      _jsx(Link, { onPress: nextMonth, "aria-label": "Next month", padding: "sm", children:
         _jsx(Icon, { name: "arrow-right-s-line" }) }
       ),
 
 
-      _jsx(Link, { onPress: nextYear, "aria-label": "Next year", padding: "xxs", paddingR: 0, children:
+      _jsx(Link, { onPress: nextYear, "aria-label": "Next year", padding: "sm", paddingL: 0, children:
         _jsx(Icon, { name: "arrow-right-double-line" }) }
       )] })
     ));

package/dist/components/carousel/Carousel.js

@@ -0,0 +1,48 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/carousel/Carousel.js";var _excluded = ["items", "activeIndex", "activeKey", "onChange", "afterChange", "autoplay", "autoplaySpeed", "draggable", "loop", "showDots", "showArrows", "floatingDots", "dotsProps", "arrowsProps", "children"];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 { View } from "../structure/View";
+import { CarouselArrows } from "./CarouselArrows";
+import { CarouselDots } from "./CarouselDots";
+import { CarouselHandler } from "./CarouselHandler";
+import { CarouselSlider } from "./CarouselSlider";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+export function Carousel(_ref)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{var items = _ref.items,activeIndex = _ref.activeIndex,activeKey = _ref.activeKey,onChange = _ref.onChange,afterChange = _ref.afterChange,autoplay = _ref.autoplay,autoplaySpeed = _ref.autoplaySpeed,draggable = _ref.draggable,loop = _ref.loop,showDots = _ref.showDots,showArrows = _ref.showArrows,floatingDots = _ref.floatingDots,dotsProps = _ref.dotsProps,arrowsProps = _ref.arrowsProps,children = _ref.children,rootProps = _objectWithoutProperties(_ref, _excluded);
+  return (
+    _jsx(CarouselHandler, {
+      items: items,
+      activeIndex: activeIndex,
+      activeKey: activeKey,
+      onChange: onChange,
+      afterChange: afterChange,
+      autoplay: autoplay,
+      autoplaySpeed: autoplaySpeed,
+      draggable: draggable,
+      loop: loop, children:
+
+      _jsxs(View, Object.assign({}, rootProps, { children: [
+        _jsxs(View, { relative: true, children: [
+          _jsx(CarouselSlider, {}),
+          showArrows && _jsx(CarouselArrows, Object.assign({}, arrowsProps)),
+          showDots && floatingDots && _jsx(CarouselDots, Object.assign({ absolute: true, bottom: "xs", left: 0, right: 0 }, dotsProps))] }
+        ),
+        showDots && !floatingDots && _jsx(CarouselDots, Object.assign({}, dotsProps)),
+        children] })
+      ) }
+    ));
+
+}

package/dist/components/carousel/CarouselArrows.js

@@ -0,0 +1,40 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/carousel/CarouselArrows.js";var _excluded = ["iconSize"];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 React from 'react';
+
+import { Icon } from "../presentation/Icon";
+import { Link } from "../actions/Link";
+import { View } from "../structure/View";
+import { useCarousel } from "./CarouselHandler";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+export function CarouselArrows(_ref) {var _ref$iconSize = _ref.iconSize,iconSize = _ref$iconSize === void 0 ? 'md' : _ref$iconSize,props = _objectWithoutProperties(_ref, _excluded);
+  var _useCarousel = useCarousel(),goToNext = _useCarousel.goToNext,goToPrev = _useCarousel.goToPrev,activeIndex = _useCarousel.activeIndex,itemsCount = _useCarousel.itemsCount,loop = _useCarousel.loop;
+
+  var showPrev = loop || activeIndex > 0;
+  var showNext = loop || activeIndex < itemsCount - 1;
+
+  return (
+    _jsxs(View, Object.assign({
+      absoluteFill: true,
+      row: true,
+      centerV: true,
+      paddingH: "xs",
+      justify: "space-between",
+      style: { pointerEvents: 'none' } },
+    props, { children: [
+
+      showPrev ?
+      _jsx(Link, { onPress: goToPrev, bg: "overlayBG_op80", round: true, padding: "xs", shadow: true, style: { pointerEvents: 'auto' }, children:
+        _jsx(Icon, { name: "arrow-left-s-line", text3: true, size: iconSize }) }
+      ) :
+
+      _jsx(View, {}),
+
+      showNext ?
+      _jsx(Link, { onPress: goToNext, bg: "overlayBG_op80", round: true, padding: "xs", shadow: true, style: { pointerEvents: 'auto' }, children:
+        _jsx(Icon, { name: "arrow-right-s-line", text3: true, size: iconSize }) }
+      ) :
+
+      _jsx(View, {})] })
+
+    ));
+
+}

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

@@ -0,0 +1,40 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/carousel/CarouselArrows.native.js";var _excluded = ["iconSize"];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 React from 'react';
+
+import { Icon } from "../presentation/Icon";
+import { Link } from "../actions/Link";
+import { View } from "../structure/View";
+import { useCarousel } from "./CarouselHandler";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+export function CarouselArrows(_ref) {var _ref$iconSize = _ref.iconSize,iconSize = _ref$iconSize === void 0 ? 'md' : _ref$iconSize,props = _objectWithoutProperties(_ref, _excluded);
+  var _useCarousel = useCarousel(),goToNext = _useCarousel.goToNext,goToPrev = _useCarousel.goToPrev,activeIndex = _useCarousel.activeIndex,itemsCount = _useCarousel.itemsCount,loop = _useCarousel.loop;
+
+  var showPrev = loop || activeIndex > 0;
+  var showNext = loop || activeIndex < itemsCount - 1;
+
+  return (
+    _jsxs(View, Object.assign({
+      absoluteFill: true,
+      row: true,
+      centerV: true,
+      paddingH: "xs",
+      justify: "space-between",
+      pointerEvents: "box-none" },
+    props, { children: [
+
+      showPrev ?
+      _jsx(Link, { onPress: goToPrev, bg: "overlayBG_op80", round: true, padding: "xs", shadow: true, children:
+        _jsx(Icon, { name: "arrow-left-s-line", text3: true, size: iconSize }) }
+      ) :
+
+      _jsx(View, {}),
+
+      showNext ?
+      _jsx(Link, { onPress: goToNext, bg: "overlayBG_op80", round: true, padding: "xs", shadow: true, children:
+        _jsx(Icon, { name: "arrow-right-s-line", text3: true, size: iconSize }) }
+      ) :
+
+      _jsx(View, {})] })
+
+    ));
+
+}

package/dist/components/carousel/CarouselDots.js

@@ -0,0 +1,32 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/carousel/CarouselDots.js";import React from 'react';
+
+import { Pressable } from "../actions/Pressable";
+import { View } from "../structure/View";
+import { useCarousel } from "./CarouselHandler";import { jsx as _jsx } from "react/jsx-runtime";
+
+function Dot(_ref) {var active = _ref.active,onPress = _ref.onPress;
+  return (
+    _jsx(Pressable, {
+      onPress: onPress,
+      width: active ? 20 : 8,
+      height: 8,
+      round: true,
+      bg: active ? 'primary' : 'text4_op30',
+      style: { transition: 'all 200ms ease-in-out' } }
+    ));
+
+}
+
+export function CarouselDots(props) {var _this = this;
+  var _useCarousel = useCarousel(),items = _useCarousel.items,activeIndex = _useCarousel.activeIndex,goTo = _useCarousel.goTo;
+
+  if (!(items != null && items.length)) return null;
+
+  return (
+    _jsx(View, Object.assign({ row: true, center: true, gap: "xs", paddingV: "sm" }, props, { children:
+      items.map(function (item, index) {return (
+          _jsx(Dot, { active: index === activeIndex, onPress: function onPress() {return goTo(index);} }, item.key));}
+      ) })
+    ));
+
+}

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

@@ -0,0 +1,36 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/carousel/CarouselDots.native.js";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";import { jsx as _jsx } from "react/jsx-runtime";
+
+function Dot(_ref) {var active = _ref.active,onPress = _ref.onPress;
+  var colors = useColors();
+
+  var animatedStyle = useAnimatedStyle(function () {return {
+      width: withTiming(active ? 20 : 8, { duration: 200 }),
+      backgroundColor: withTiming(active ? colors.primary : colors.text4_op30, { duration: 200 })
+    };}, [active]);
+
+  return (
+    _jsx(Pressable, { onPress: onPress, children:
+      _jsx(Animated.View, { style: [{ height: 8, borderRadius: 4 }, animatedStyle] }) }
+    ));
+
+}
+
+export function CarouselDots(props) {var _this = this;
+  var _useCarousel = useCarousel(),items = _useCarousel.items,activeIndex = _useCarousel.activeIndex,goTo = _useCarousel.goTo;
+
+  if (!(items != null && items.length)) return null;
+
+  return (
+    _jsx(View, Object.assign({ row: true, center: true, gap: "xs", paddingV: "sm" }, props, { children:
+      items.map(function (item, index) {return (
+          _jsx(Dot, { active: index === activeIndex, onPress: function onPress() {return goTo(index);} }, item.key));}
+      ) })
+    ));
+
+}

package/dist/components/carousel/CarouselHandler.js

@@ -0,0 +1,86 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/carousel/CarouselHandler.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 React from 'react';import { jsx as _jsx } from "react/jsx-runtime";
+
+var CarouselContext = React.createContext(null);
+export var useCarousel = function useCarousel() {return React.useContext(CarouselContext) || {};};
+
+export function CarouselHandler(_ref)
+
+
+
+
+
+
+
+
+
+
+{var children = _ref.children,items = _ref.items,controlledIndex = _ref.activeIndex,activeKey = _ref.activeKey,onChange = _ref.onChange,afterChange = _ref.afterChange,autoplay = _ref.autoplay,_ref$autoplaySpeed = _ref.autoplaySpeed,autoplaySpeed = _ref$autoplaySpeed === void 0 ? 3000 : _ref$autoplaySpeed,draggable = _ref.draggable,loop = _ref.loop;
+  var itemsCount = (items == null ? void 0 : items.length) || 0;
+  var isControlled = controlledIndex !== undefined || activeKey !== undefined;
+
+  var _React$useState = React.useState(function () {
+      if (controlledIndex !== undefined) return controlledIndex;
+      if (activeKey !== undefined) return Math.max(0, (items == null ? void 0 : items.findIndex(function (i) {return i.key === activeKey;})) || 0);
+      return 0;
+    }),_React$useState2 = _slicedToArray(_React$useState, 2),internalIndex = _React$useState2[0],setInternalIndex = _React$useState2[1];
+
+  var resolvedIndex = isControlled ?
+  activeKey !== undefined ?
+  Math.max(0, (items == null ? void 0 : items.findIndex(function (i) {return i.key === activeKey;})) || 0) :
+  controlledIndex :
+  internalIndex;
+
+  var activeItem = React.useMemo(function () {return items == null ? void 0 : items[resolvedIndex];}, [items, resolvedIndex]);
+
+  var pausedRef = React.useRef(false);
+
+  var goTo = React.useCallback(
+    function (index) {var _items$next;
+      var next = index;
+      if (loop) next = (next % itemsCount + itemsCount) % itemsCount;else
+      next = Math.max(0, Math.min(next, itemsCount - 1));
+
+      if (!isControlled) setInternalIndex(next);
+      onChange == null ? void 0 : onChange(items == null ? void 0 : (_items$next = items[next]) == null ? void 0 : _items$next.key, next);
+    },
+    [loop, itemsCount, isControlled, onChange, items]
+  );
+
+  var goToNext = React.useCallback(function () {return goTo(resolvedIndex + 1);}, [goTo, resolvedIndex]);
+  var goToPrev = React.useCallback(function () {return goTo(resolvedIndex - 1);}, [goTo, resolvedIndex]);
+
+  var pauseAutoplay = React.useCallback(function () {
+    pausedRef.current = true;
+  }, []);
+
+  var resumeAutoplay = React.useCallback(function () {
+    pausedRef.current = false;
+  }, []);
+
+  React.useEffect(function () {
+    if (!autoplay || itemsCount <= 1) return;
+
+    var interval = setInterval(function () {
+      if (!pausedRef.current) goToNext();
+    }, autoplaySpeed);
+
+    return function () {return clearInterval(interval);};
+  }, [autoplay, autoplaySpeed, itemsCount, resolvedIndex, goToNext]);
+
+  var value = {
+    items: items,
+    activeIndex: resolvedIndex,
+    activeItem: activeItem,
+    itemsCount: itemsCount,
+    goTo: goTo,
+    goToNext: goToNext,
+    goToPrev: goToPrev,
+    afterChange: afterChange,
+    draggable: draggable,
+    loop: loop,
+    pauseAutoplay: pauseAutoplay,
+    resumeAutoplay: resumeAutoplay
+  };
+
+  return _jsx(CarouselContext.Provider, { value: value, children: children });
+}

package/dist/components/carousel/CarouselSlider.js

@@ -0,0 +1,124 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/carousel/CarouselSlider.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 React from 'react';
+
+import { View } from "../structure/View";
+import { useCarousel } from "./CarouselHandler";import { jsx as _jsx } from "react/jsx-runtime";
+
+function SlideContent(_ref) {var item = _ref.item;
+  var Content = React.useMemo(
+    function () {return item.render || item.renderContent || item.Content;},
+    [item.render, item.renderContent, item.Content]
+  );
+  return Content ? _jsx(Content, {}) : null;
+}
+
+export function CarouselSlider() {var _this = this;
+  var _useCarousel =
+    useCarousel(),items = _useCarousel.items,activeIndex = _useCarousel.activeIndex,itemsCount = _useCarousel.itemsCount,draggable = _useCarousel.draggable,loop = _useCarousel.loop,afterChange = _useCarousel.afterChange,goToNext = _useCarousel.goToNext,goToPrev = _useCarousel.goToPrev,pauseAutoplay = _useCarousel.pauseAutoplay,resumeAutoplay = _useCarousel.resumeAutoplay;
+
+  var containerRef = React.useRef(null);
+  var _React$useState = React.useState(false),_React$useState2 = _slicedToArray(_React$useState, 2),isDragging = _React$useState2[0],setIsDragging = _React$useState2[1];
+  var _React$useState3 = React.useState(0),_React$useState4 = _slicedToArray(_React$useState3, 2),dragOffset = _React$useState4[0],setDragOffset = _React$useState4[1];
+  var startXRef = React.useRef(0);
+  var startTimeRef = React.useRef(0);
+  var prevItemsRef = React.useRef(items);
+  var skipTransitionRef = React.useRef(false);
+
+  if (items !== prevItemsRef.current) {
+    skipTransitionRef.current = true;
+    prevItemsRef.current = items;
+  }
+
+  React.useEffect(function () {
+    if (skipTransitionRef.current) {
+      var id = requestAnimationFrame(function () {
+        skipTransitionRef.current = false;
+      });
+      return function () {return cancelAnimationFrame(id);};
+    }
+  });
+
+  if (!(items != null && items.length)) return null;
+
+  var baseTranslate = -(activeIndex * 100) / itemsCount;
+  var dragPercent =
+  isDragging && containerRef.current ? dragOffset / containerRef.current.offsetWidth * (100 / itemsCount) : 0;
+  var transformX = baseTranslate + dragPercent;
+
+  var dragStateRef = React.useRef({ isDragging: false, dragOffset: 0 });
+
+  var handlePointerDown = function handlePointerDown(e) {
+    if (!draggable) return;
+    startXRef.current = e.clientX;
+    startTimeRef.current = Date.now();
+    dragStateRef.current = { isDragging: true, dragOffset: 0 };
+    setIsDragging(true);
+    setDragOffset(0);
+    pauseAutoplay();
+
+    var onMove = function onMove(ev) {
+      var raw = ev.clientX - startXRef.current;
+      var offset = raw;
+      if (!loop) {var _containerRef$current;
+        var containerWidth = ((_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.offsetWidth) || 1;
+        var atStart = activeIndex === 0 && raw > 0;
+        var atEnd = activeIndex === itemsCount - 1 && raw < 0;
+        if (atStart || atEnd) offset = raw * 0.3;
+      }
+      dragStateRef.current.dragOffset = offset;
+      setDragOffset(offset);
+    };
+
+    var _onUp = function onUp() {var _containerRef$current2;
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', _onUp);
+      window.removeEventListener('pointercancel', _onUp);
+
+      var offset = dragStateRef.current.dragOffset;
+      var containerWidth = ((_containerRef$current2 = containerRef.current) == null ? void 0 : _containerRef$current2.offsetWidth) || 1;
+      var threshold = containerWidth * 0.25;
+      var elapsed = Date.now() - startTimeRef.current;
+      var 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 (
+    _jsx(View, { hiddenOverflow: true, fullW: true, ref: containerRef, children:
+      _jsx(View, {
+        row: true,
+        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 ? function (e) {var _items$activeIndex;
+          if (e.propertyName === 'transform') afterChange(items == null ? void 0 : (_items$activeIndex = items[activeIndex]) == null ? void 0 : _items$activeIndex.key, activeIndex);
+        } : undefined,
+        onPointerDown: draggable ? handlePointerDown : undefined, children:
+
+        items.map(function (item) {return (
+            _jsx(View, { style: { width: `${100 / itemsCount}%` }, children:
+              _jsx(SlideContent, { item: item }) }, item.key
+            ));}
+        ) }
+      ) }
+    ));
+
+}

package/dist/components/carousel/CarouselSlider.native.js

@@ -0,0 +1,121 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/carousel/CarouselSlider.native.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 React from 'react';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, runOnJS } from 'react-native-reanimated';
+
+import { View } from "../structure/View";
+import { useCarousel } from "./CarouselHandler";import { jsx as _jsx } from "react/jsx-runtime";
+
+function SlideContent(_ref) {var item = _ref.item;
+  var Content = React.useMemo(
+    function () {return item.render || item.renderContent || item.Content;},
+    [item.render, item.renderContent, item.Content]
+  );
+  return Content ? _jsx(Content, {}) : null;
+}
+
+function clampIndex(index, count, loop) {
+  'worklet';
+  if (loop) return (index % count + count) % count;
+  return Math.max(0, Math.min(index, count - 1));
+}
+
+export function CarouselSlider() {var _this = this;
+  var _useCarousel =
+    useCarousel(),items = _useCarousel.items,activeIndex = _useCarousel.activeIndex,itemsCount = _useCarousel.itemsCount,draggable = _useCarousel.draggable,goTo = _useCarousel.goTo,afterChange = _useCarousel.afterChange,pauseAutoplay = _useCarousel.pauseAutoplay,resumeAutoplay = _useCarousel.resumeAutoplay,loop = _useCarousel.loop;
+
+  var _React$useState = React.useState(0),_React$useState2 = _slicedToArray(_React$useState, 2),slideWidth = _React$useState2[0],setSlideWidth = _React$useState2[1];
+  var translateX = useSharedValue(0);
+  var gestureStartX = useSharedValue(0);
+  var prevItemsRef = React.useRef(items);
+  var gestureAnimatingRef = React.useRef(false);
+
+  var setGestureAnimating = React.useCallback(function (v) {
+    gestureAnimatingRef.current = v;
+  }, []);
+
+  React.useEffect(function () {
+    if (slideWidth > 0) {
+      if (prevItemsRef.current !== items) {
+        prevItemsRef.current = items;
+        translateX.value = -activeIndex * slideWidth;
+      } else if (gestureAnimatingRef.current) {
+
+        gestureAnimatingRef.current = false;
+      } else {
+        translateX.value = withTiming(-activeIndex * slideWidth, { duration: 300 }, function (finished) {var _items$activeIndex;
+          if (finished && afterChange) runOnJS(afterChange)(items == null ? void 0 : (_items$activeIndex = items[activeIndex]) == null ? void 0 : _items$activeIndex.key, activeIndex);
+        });
+      }
+    }
+  }, [activeIndex, slideWidth, items]);
+
+  var onLayout = React.useCallback(function (e) {
+    setSlideWidth(e.nativeEvent.layout.width);
+  }, []);
+
+  var animatedStyle = useAnimatedStyle(function () {return {
+      transform: [{ translateX: translateX.value }]
+    };});
+
+  if (!(items != null && items.length)) return null;
+
+  var minTranslate = -(itemsCount - 1) * slideWidth;
+  var maxTranslate = 0;
+
+  var panGesture = Gesture.Pan().
+  activeOffsetX([-10, 10]).
+  failOffsetY([-10, 10]).
+  onStart(function () {
+    gestureStartX.value = translateX.value;
+    runOnJS(pauseAutoplay)();
+  }).
+  onUpdate(function (e) {
+    var raw = gestureStartX.value + e.translationX;
+    if (loop) {
+      translateX.value = raw;
+    } else {
+
+      if (raw > maxTranslate) {
+        translateX.value = maxTranslate + (raw - maxTranslate) * 0.3;
+      } else if (raw < minTranslate) {
+        translateX.value = minTranslate + (raw - minTranslate) * 0.3;
+      } else {
+        translateX.value = raw;
+      }
+    }
+  }).
+  onEnd(function (e) {
+    var threshold = slideWidth * 0.25;
+    var targetIndex = activeIndex;
+
+    if (e.translationX < -threshold || e.velocityX < -500) {
+      targetIndex = activeIndex + 1;
+    } else if (e.translationX > threshold || e.velocityX > 500) {
+      targetIndex = activeIndex - 1;
+    }
+
+    var clamped = clampIndex(targetIndex, itemsCount, loop);
+    translateX.value = withTiming(-clamped * slideWidth, { duration: 300 }, function (finished) {var _items$clamped;
+      if (finished && afterChange) runOnJS(afterChange)(items == null ? void 0 : (_items$clamped = items[clamped]) == null ? void 0 : _items$clamped.key, clamped);
+    });
+    runOnJS(setGestureAnimating)(true);
+    runOnJS(goTo)(targetIndex);
+    runOnJS(resumeAutoplay)();
+  });
+
+  var track =
+  _jsx(Animated.View, { style: [{ flexDirection: 'row', width: slideWidth * itemsCount }, animatedStyle], children:
+    items.map(function (item) {return (
+        _jsx(View, { style: { width: slideWidth }, children:
+          _jsx(SlideContent, { item: item }) }, item.key
+        ));}
+    ) }
+  );
+
+
+  return (
+    _jsx(View, { hiddenOverflow: true, fullW: true, onLayout: onLayout, children:
+      draggable ? _jsx(GestureDetector, { gesture: panGesture, children: track }) : track }
+    ));
+
+}