@neko-os/ui 0.5.0 → 0.5.1

package/dist/abstractions/index.js

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

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

@@ -27,12 +27,20 @@ export function CarouselSlider() {var _this = this;
   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);
@@ -87,7 +95,10 @@ export function CarouselSlider() {var _this = this;
     }
 
     var clamped = clampIndex(targetIndex, itemsCount, loop);
-    translateX.value = withTiming(-clamped * slideWidth, { duration: 300 });
+    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)();
   });

package/dist/components/inputs/Select.js

@@ -2,6 +2,7 @@ var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/compon
 import React from 'react';
 
 import { Icon, IconLabel } from "../presentation";
+import { KeyboardDismissButton } from "../keyboard";
 import { Link } from "../actions";
 import { LinkInput } from "./LinkInput";
 import { Picker, getOptionLabel, searchOptions } from "./Picker";
@@ -134,58 +135,61 @@ export function Select(_ref2)
       maxHeight: popoverMaxHeight },
     popoverProps, {
       renderContent: function renderContent(_ref3) {var onClose = _ref3.onClose;return (
-          _jsx(Picker, Object.assign({
-            row: false,
-            options: searchOptions(options, search, { labelKey: labelKey }),
-            value: value,
-            gap: 0,
-            maxHeight: !useBottomDrawer && popoverMaxHeight,
-            useFlatList: true,
-            onlyOnScreen: true,
-            itemMinHeight: 30,
-            onChange: function onChange(v, option) {
-              handleChange(v, option);
-              if (!multiple) {
-                setFocus(false);
-                onClose();
-              }
-            } },
-          pickerProps, {
-            renderHeader:
-            useBottomDrawer && useSearch ?
-            function () {return (
-                _jsxs(_Fragment, { children: [
-                  _jsx(View, { padding: "md", paddingB: "xs", children:
-                    _jsx(TextInput, {
-                      prefixIcon: "search-line",
-                      prefixIconColor: "text4",
-                      value: search,
-                      onChange: handleChangeSearch }
-                    ) }
-                  ),
-                  renderHeader == null ? void 0 : renderHeader()] }
-                ));} :
-
-            renderHeader,
-
-            renderOption: function renderOption(_ref4) {var option = _ref4.option,selected = _ref4.selected,onChange = _ref4.onChange;return (
-                _jsxs(Link, {
-                  row: true,
-                  paddingH: useBottomDrawer ? 'md' : 'sm',
-                  paddingV: "xs",
-                  minHeight: useBottomDrawer ? 'xl' : 'md',
-                  gap: "sm",
-                  onMouseDown: function onMouseDown(e) {return !!multiple && e.preventDefault();},
-                  onPress: onChange,
-                  centerV: true,
-                  bg: selected && 'primary_op10', children: [
-
-                  _jsx(View, { flex: true, row: true, children:
-                    finalRenderOption({ option: option, labelKey: labelKey, selected: selected }) }
-                  ),
-                  selected && _jsx(Icon, { name: "checkbox-circle-fill", primary: true })] }
-                ));} })
-
+          _jsxs(_Fragment, { children: [
+            useBottomDrawer && useSearch && _jsx(KeyboardDismissButton, {}),
+            _jsx(Picker, Object.assign({
+              row: false,
+              options: searchOptions(options, search, { labelKey: labelKey }),
+              value: value,
+              gap: 0,
+              maxHeight: !useBottomDrawer && popoverMaxHeight,
+              useFlatList: true,
+              onlyOnScreen: true,
+              itemMinHeight: 30,
+              onChange: function onChange(v, option) {
+                handleChange(v, option);
+                if (!multiple) {
+                  setFocus(false);
+                  onClose();
+                }
+              } },
+            pickerProps, {
+              renderHeader:
+              useBottomDrawer && useSearch ?
+              _jsxs(_Fragment, { children: [
+                _jsx(View, { padding: "md", paddingB: "xs", children:
+                  _jsx(TextInput, {
+                    prefixIcon: "search-line",
+                    prefixIconColor: "text4",
+                    value: search,
+                    onChange: handleChangeSearch }
+                  ) }
+                ),
+                renderHeader == null ? void 0 : renderHeader()] }
+              ) :
+
+              renderHeader,
+
+
+              renderOption: function renderOption(_ref4) {var option = _ref4.option,selected = _ref4.selected,onChange = _ref4.onChange;return (
+                  _jsxs(Link, {
+                    row: true,
+                    paddingH: useBottomDrawer ? 'md' : 'sm',
+                    paddingV: "xs",
+                    minHeight: useBottomDrawer ? 'xl' : 'md',
+                    gap: "sm",
+                    onMouseDown: function onMouseDown(e) {return !!multiple && e.preventDefault();},
+                    onPress: onChange,
+                    centerV: true,
+                    bg: selected && 'primary_op10', children: [
+
+                    _jsx(View, { flex: true, row: true, children:
+                      finalRenderOption({ option: option, labelKey: labelKey, selected: selected }) }
+                    ),
+                    selected && _jsx(Icon, { name: "checkbox-circle-fill", primary: true })] }
+                  ));} })
+
+            )] }
           ));}, children:
 
 

package/dist/components/inputs/datePicker/DayPicker.js

@@ -24,7 +24,9 @@ function fromMonthValue(v) {
   startOf('month');
 }
 
-function MonthDays(_ref) {var _this = this;var month = _ref.month,selectedValue = _ref.selectedValue,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
+var MonthDays = React.memo(function MonthDays(_ref) {var _this = this;var monthValue = _ref.monthValue,selectedKey = _ref.selectedKey,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
+  var month = fromMonthValue(monthValue);
+  var selectedValue = selectedKey ? dayjs(selectedKey) : null;
   var _useCalendarDays = useCalendarDays(month),cells = _useCalendarDays.cells;
 
   return (
@@ -57,9 +59,9 @@ function MonthDays(_ref) {var _this = this;var month = _ref.month,selectedValue
       )] }
     ));
 
-}
+});
 
-export function DayPicker(_ref2) {var _value2,_value3,_value4,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
+export function DayPicker(_ref2) {var _value2,_value3,_value4,_value5,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
   if (!!value) value = dayjs(value);
   var _React$useState = React.useState(value),_React$useState2 = _slicedToArray(_React$useState, 2),localValue = _React$useState2[0],setLocalValue = _React$useState2[1];
   var _React$useState3 = React.useState(function () {return dayjs(value || undefined).startOf('month');}),_React$useState4 = _slicedToArray(_React$useState3, 2),currentMonth = _React$useState4[0],setCurrentMonth = _React$useState4[1];
@@ -70,19 +72,23 @@ export function DayPicker(_ref2) {var _value2,_value3,_value4,_this2 = this;var
     if ((_value = value) != null && _value.isValid != null && _value.isValid()) setCurrentMonth(value.startOf('month'));
   }, [(_value2 = value) == null ? void 0 : _value2.day == null ? void 0 : _value2.day(), (_value3 = value) == null ? void 0 : _value3.month == null ? void 0 : _value3.month(), (_value4 = value) == null ? void 0 : _value4.year == null ? void 0 : _value4.year()]);
 
-  var handleChange = function handleChange(v) {
-    setLocalValue(v);
-    onChange == null ? void 0 : onChange(v);
-  };
+  var handleChange = React.useCallback(
+    function (v) {
+      setLocalValue(v);
+      onChange == null ? void 0 : onChange(v);
+    },
+    [onChange]
+  );
 
   var monthValue = toMonthValue(currentMonth);
   var minMonth = min ? toMonthValue(dayjs(min).startOf('month')) : undefined;
   var maxMonth = max ? toMonthValue(dayjs(max).startOf('month')) : undefined;
+  var selectedKey = (_value5 = value) == null ? void 0 : _value5.valueOf == null ? void 0 : _value5.valueOf();
 
   var renderSlide = function renderSlide(v) {return (
       _jsx(MonthDays, {
-        month: fromMonthValue(v),
-        selectedValue: value,
+        monthValue: v,
+        selectedKey: selectedKey,
         onSelect: handleChange,
         min: min,
         max: max,

package/dist/components/inputs/datePicker/MonthPicker.js

@@ -14,14 +14,15 @@ import { isDateDisabled } from "../../calendar/_helpers/dateDisabled";import { j
 
 var months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 
-function MonthGrid(_ref) {var _this = this;var year = _ref.year,selectedValue = _ref.selectedValue,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
+var MonthGrid = React.memo(function MonthGrid(_ref) {var _this = this;var year = _ref.year,selectedKey = _ref.selectedKey,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
   var yearDate = dayjs().year(year).startOf('year');
+  var selectedValue = selectedKey ? dayjs(selectedKey) : null;
 
   return (
     _jsx(Grid, { colSpan: 8, gap: "xs", children:
       months.map(function (month) {
         var dateVal = yearDate.month(month);
-        var isActive = !!selectedValue && dateVal.isSame(selectedValue, 'week');
+        var isActive = !!selectedValue && dateVal.isSame(selectedValue, 'month');
         var disabled = isDateDisabled(dateVal, { min: min, max: max, onCheckDisabled: onCheckDisabled });
 
         return (
@@ -43,9 +44,9 @@ function MonthGrid(_ref) {var _this = this;var year = _ref.year,selectedValue =
       }) }
     ));
 
-}
+});
 
-export function MonthPicker(_ref2) {var _value2,_value3,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
+export function MonthPicker(_ref2) {var _value2,_value3,_value4,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
   var _React$useState = React.useState(value),_React$useState2 = _slicedToArray(_React$useState, 2),localValue = _React$useState2[0],setLocalValue = _React$useState2[1];
   var _React$useState3 = React.useState(function () {return dayjs(value || undefined).startOf('year');}),_React$useState4 = _slicedToArray(_React$useState3, 2),currentYear = _React$useState4[0],setCurrentYear = _React$useState4[1];
   value = value === undefined ? localValue : value;
@@ -55,18 +56,22 @@ export function MonthPicker(_ref2) {var _value2,_value3,_this2 = this;var value
     if ((_value = value) != null && _value.isValid != null && _value.isValid()) setCurrentYear(value.startOf('year'));
   }, [(_value2 = value) == null ? void 0 : _value2.month == null ? void 0 : _value2.month(), (_value3 = value) == null ? void 0 : _value3.year == null ? void 0 : _value3.year()]);
 
-  var handleChange = function handleChange(v) {
-    var newValue = v.startOf('month');
-    setLocalValue(newValue);
-    onChange == null ? void 0 : onChange(newValue);
-  };
+  var handleChange = React.useCallback(
+    function (v) {
+      var newValue = v.startOf('month');
+      setLocalValue(newValue);
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [onChange]
+  );
 
   var yearValue = currentYear.year();
   var minYear = min ? dayjs(min).year() : undefined;
   var maxYear = max ? dayjs(max).year() : undefined;
+  var selectedKey = (_value4 = value) == null ? void 0 : _value4.valueOf == null ? void 0 : _value4.valueOf();
 
   var renderSlide = function renderSlide(v) {return (
-      _jsx(MonthGrid, { year: v, selectedValue: value, onSelect: handleChange, min: min, max: max, onCheckDisabled: onCheckDisabled }));};
+      _jsx(MonthGrid, { year: v, selectedKey: selectedKey, onSelect: handleChange, min: min, max: max, onCheckDisabled: onCheckDisabled }));};
 
 
   return (

package/dist/components/inputs/datePicker/QuarterPicker.js

@@ -17,14 +17,15 @@ dayjs.extend(quarterOfYear);
 
 var quarters = [1, 2, 3, 4];
 
-function QuarterGrid(_ref) {var _this = this;var year = _ref.year,selectedValue = _ref.selectedValue,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
+var QuarterGrid = React.memo(function QuarterGrid(_ref) {var _this = this;var year = _ref.year,selectedKey = _ref.selectedKey,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
   var yearDate = dayjs().year(year).startOf('year');
+  var selectedValue = selectedKey ? dayjs(selectedKey) : null;
 
   return (
     _jsx(Grid, { colSpan: 6, gap: "xs", children:
       quarters.map(function (quarter) {
         var dateVal = yearDate.quarter(quarter);
-        var isActive = !!selectedValue && dateVal.isSame(selectedValue, 'week');
+        var isActive = !!selectedValue && dateVal.isSame(selectedValue, 'quarter');
         var disabled = isDateDisabled(dateVal, { min: min, max: max, onCheckDisabled: onCheckDisabled });
 
         return (
@@ -46,9 +47,9 @@ function QuarterGrid(_ref) {var _this = this;var year = _ref.year,selectedValue
       }) }
     ));
 
-}
+});
 
-export function QuarterPicker(_ref2) {var _value2,_value3,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
+export function QuarterPicker(_ref2) {var _value2,_value3,_value4,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
   var _React$useState = React.useState(value),_React$useState2 = _slicedToArray(_React$useState, 2),localValue = _React$useState2[0],setLocalValue = _React$useState2[1];
   var _React$useState3 = React.useState(function () {return dayjs(value || undefined).startOf('year');}),_React$useState4 = _slicedToArray(_React$useState3, 2),currentYear = _React$useState4[0],setCurrentYear = _React$useState4[1];
   value = value === undefined ? localValue : value;
@@ -58,18 +59,22 @@ export function QuarterPicker(_ref2) {var _value2,_value3,_this2 = this;var valu
     if ((_value = value) != null && _value.isValid != null && _value.isValid()) setCurrentYear(value.startOf('year'));
   }, [(_value2 = value) == null ? void 0 : _value2.quarter == null ? void 0 : _value2.quarter(), (_value3 = value) == null ? void 0 : _value3.year == null ? void 0 : _value3.year()]);
 
-  var handleChange = function handleChange(v) {
-    var newValue = v.startOf('quarter');
-    setLocalValue(newValue);
-    onChange == null ? void 0 : onChange(newValue);
-  };
+  var handleChange = React.useCallback(
+    function (v) {
+      var newValue = v.startOf('quarter');
+      setLocalValue(newValue);
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [onChange]
+  );
 
   var yearValue = currentYear.year();
   var minYear = min ? dayjs(min).year() : undefined;
   var maxYear = max ? dayjs(max).year() : undefined;
+  var selectedKey = (_value4 = value) == null ? void 0 : _value4.valueOf == null ? void 0 : _value4.valueOf();
 
   var renderSlide = function renderSlide(v) {return (
-      _jsx(QuarterGrid, { year: v, selectedValue: value, onSelect: handleChange, min: min, max: max, onCheckDisabled: onCheckDisabled }));};
+      _jsx(QuarterGrid, { year: v, selectedKey: selectedKey, onSelect: handleChange, min: min, max: max, onCheckDisabled: onCheckDisabled }));};
 
 
   return (

package/dist/components/inputs/datePicker/WeekPicker.js

@@ -25,7 +25,9 @@ function fromMonthValue(v) {
   startOf('month');
 }
 
-function MonthWeeks(_ref) {var _this = this;var month = _ref.month,selectedValue = _ref.selectedValue,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
+var MonthWeeks = React.memo(function MonthWeeks(_ref) {var _this = this;var monthValue = _ref.monthValue,selectedKey = _ref.selectedKey,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
+  var month = fromMonthValue(monthValue);
+  var selectedValue = selectedKey ? dayjs(selectedKey) : null;
   var _useCalendarDays = useCalendarDays(month),cells = _useCalendarDays.cells;
   var weeks = splitEvery(7, cells);
 
@@ -67,9 +69,9 @@ function MonthWeeks(_ref) {var _this = this;var month = _ref.month,selectedValue
       )] }
     ));
 
-}
+});
 
-export function WeekPicker(_ref2) {var _value2,_value3,_value4,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
+export function WeekPicker(_ref2) {var _value2,_value3,_value4,_value5,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
   var _React$useState = React.useState(value),_React$useState2 = _slicedToArray(_React$useState, 2),localValue = _React$useState2[0],setLocalValue = _React$useState2[1];
   var _React$useState3 = React.useState(function () {return dayjs(value || undefined).startOf('month');}),_React$useState4 = _slicedToArray(_React$useState3, 2),currentMonth = _React$useState4[0],setCurrentMonth = _React$useState4[1];
   value = value === undefined ? localValue : value;
@@ -79,18 +81,22 @@ export function WeekPicker(_ref2) {var _value2,_value3,_value4,_this2 = this;var
     if ((_value = value) != null && _value.isValid != null && _value.isValid()) setCurrentMonth(value.startOf('month'));
   }, [(_value2 = value) == null ? void 0 : _value2.day == null ? void 0 : _value2.day(), (_value3 = value) == null ? void 0 : _value3.month == null ? void 0 : _value3.month(), (_value4 = value) == null ? void 0 : _value4.year == null ? void 0 : _value4.year()]);
 
-  var handleChange = function handleChange(v) {
-    var newValue = v.startOf('week');
-    setLocalValue(newValue);
-    onChange == null ? void 0 : onChange(newValue);
-  };
+  var handleChange = React.useCallback(
+    function (v) {
+      var newValue = v.startOf('week');
+      setLocalValue(newValue);
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [onChange]
+  );
 
   var monthValue = toMonthValue(currentMonth);
   var minMonth = min ? toMonthValue(dayjs(min).startOf('month')) : undefined;
   var maxMonth = max ? toMonthValue(dayjs(max).startOf('month')) : undefined;
+  var selectedKey = (_value5 = value) == null ? void 0 : _value5.valueOf == null ? void 0 : _value5.valueOf();
 
   var renderSlide = function renderSlide(v) {return (
-      _jsx(MonthWeeks, { month: fromMonthValue(v), selectedValue: value, onSelect: handleChange, min: min, max: max, onCheckDisabled: onCheckDisabled }));};
+      _jsx(MonthWeeks, { monthValue: v, selectedKey: selectedKey, onSelect: handleChange, min: min, max: max, onCheckDisabled: onCheckDisabled }));};
 
 
   return (

package/dist/components/inputs/datePicker/YearPicker.js

@@ -21,15 +21,16 @@ function decadeFromIndex(i) {
   return dayjs().year(i * 10).startOf('year');
 }
 
-function DecadeGrid(_ref) {var _this = this;var decadeIndex = _ref.decadeIndex,selectedValue = _ref.selectedValue,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
+var DecadeGrid = React.memo(function DecadeGrid(_ref) {var _this = this;var decadeIndex = _ref.decadeIndex,selectedKey = _ref.selectedKey,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
   var decadeStart = decadeFromIndex(decadeIndex);
+  var selectedValue = selectedKey ? dayjs(selectedKey) : null;
   var years = range(decadeStart.year(), decadeStart.year() + 10);
 
   return (
     _jsx(Grid, { colSpan: 12, gap: "xs", children:
       years.map(function (year) {
         var dateVal = decadeStart.year(year);
-        var isActive = !!selectedValue && dateVal.isSame(selectedValue, 'week');
+        var isActive = !!selectedValue && dateVal.isSame(selectedValue, 'year');
         var disabled = isDateDisabled(dateVal, { min: min, max: max, onCheckDisabled: onCheckDisabled });
 
         return (
@@ -51,9 +52,9 @@ function DecadeGrid(_ref) {var _this = this;var decadeIndex = _ref.decadeIndex,s
       }) }
     ));
 
-}
+});
 
-export function YearPicker(_ref2) {var _value2,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
+export function YearPicker(_ref2) {var _value2,_value3,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
   var _React$useState = React.useState(value),_React$useState2 = _slicedToArray(_React$useState, 2),localValue = _React$useState2[0],setLocalValue = _React$useState2[1];
   var _React$useState3 = React.useState(function () {return getDecadeIndex(value);}),_React$useState4 = _slicedToArray(_React$useState3, 2),currentDecade = _React$useState4[0],setCurrentDecade = _React$useState4[1];
 
@@ -64,17 +65,21 @@ export function YearPicker(_ref2) {var _value2,_this2 = this;var value = _ref2.v
     if ((_value = value) != null && _value.isValid != null && _value.isValid()) setCurrentDecade(getDecadeIndex(value));
   }, [(_value2 = value) == null ? void 0 : _value2.year == null ? void 0 : _value2.year()]);
 
-  var handleChange = function handleChange(v) {
-    var newValue = v.startOf('year');
-    setLocalValue(newValue);
-    onChange == null ? void 0 : onChange(newValue);
-  };
+  var handleChange = React.useCallback(
+    function (v) {
+      var newValue = v.startOf('year');
+      setLocalValue(newValue);
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [onChange]
+  );
 
   var minDecade = min ? getDecadeIndex(min) : undefined;
   var maxDecade = max ? getDecadeIndex(max) : undefined;
+  var selectedKey = (_value3 = value) == null ? void 0 : _value3.valueOf == null ? void 0 : _value3.valueOf();
 
   var renderSlide = function renderSlide(v) {return (
-      _jsx(DecadeGrid, { decadeIndex: v, selectedValue: value, onSelect: handleChange, min: min, max: max, onCheckDisabled: onCheckDisabled }));};
+      _jsx(DecadeGrid, { decadeIndex: v, selectedKey: selectedKey, onSelect: handleChange, min: min, max: max, onCheckDisabled: onCheckDisabled }));};
 
 
   return (

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/package.json

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

package/src/abstractions/index.js

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

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

@@ -27,12 +27,20 @@ export function CarouselSlider() {
   const translateX = useSharedValue(0)
   const gestureStartX = useSharedValue(0)
   const prevItemsRef = React.useRef(items)
+  const gestureAnimatingRef = React.useRef(false)
+
+  const setGestureAnimating = React.useCallback((v) => {
+    gestureAnimatingRef.current = v
+  }, [])
 
   React.useEffect(() => {
     if (slideWidth > 0) {
       if (prevItemsRef.current !== items) {
         prevItemsRef.current = items
         translateX.value = -activeIndex * slideWidth
+      } else if (gestureAnimatingRef.current) {
+        // Gesture onEnd already animating — skip to avoid double animation
+        gestureAnimatingRef.current = false
       } else {
         translateX.value = withTiming(-activeIndex * slideWidth, { duration: 300 }, (finished) => {
           if (finished && afterChange) runOnJS(afterChange)(items?.[activeIndex]?.key, activeIndex)
@@ -87,7 +95,10 @@ export function CarouselSlider() {
       }
 
       const clamped = clampIndex(targetIndex, itemsCount, loop)
-      translateX.value = withTiming(-clamped * slideWidth, { duration: 300 })
+      translateX.value = withTiming(-clamped * slideWidth, { duration: 300 }, (finished) => {
+        if (finished && afterChange) runOnJS(afterChange)(items?.[clamped]?.key, clamped)
+      })
+      runOnJS(setGestureAnimating)(true)
       runOnJS(goTo)(targetIndex)
       runOnJS(resumeAutoplay)()
     })

package/src/components/inputs/Select.js

@@ -2,6 +2,7 @@ import { dissoc } from 'ramda'
 import React from 'react'
 
 import { Icon, IconLabel } from '../presentation'
+import { KeyboardDismissButton } from '../keyboard'
 import { Link } from '../actions'
 import { LinkInput } from './LinkInput'
 import { Picker, getOptionLabel, searchOptions } from './Picker'
@@ -134,6 +135,8 @@ export function Select({
       maxHeight={popoverMaxHeight}
       {...popoverProps}
       renderContent={({ onClose }) => (
+        <>
+        {useBottomDrawer && useSearch && <KeyboardDismissButton />}
         <Picker
           row={false}
           options={searchOptions(options, search, { labelKey })}
@@ -152,21 +155,21 @@ export function Select({
           }}
           {...pickerProps}
           renderHeader={
-            useBottomDrawer && useSearch
-              ? () => (
-                  <>
-                    <View padding="md" paddingB="xs">
-                      <TextInput
-                        prefixIcon="search-line"
-                        prefixIconColor="text4"
-                        value={search}
-                        onChange={handleChangeSearch}
-                      />
-                    </View>
-                    {renderHeader?.()}
-                  </>
-                )
-              : renderHeader
+            useBottomDrawer && useSearch ? (
+              <>
+                <View padding="md" paddingB="xs">
+                  <TextInput
+                    prefixIcon="search-line"
+                    prefixIconColor="text4"
+                    value={search}
+                    onChange={handleChangeSearch}
+                  />
+                </View>
+                {renderHeader?.()}
+              </>
+            ) : (
+              renderHeader
+            )
           }
           renderOption={({ option, selected, onChange }) => (
             <Link
@@ -187,6 +190,7 @@ export function Select({
             </Link>
           )}
         />
+        </>
       )}
     >
       <Input

package/src/components/inputs/datePicker/DayPicker.js

@@ -24,7 +24,9 @@ function fromMonthValue(v) {
     .startOf('month')
 }
 
-function MonthDays({ month, selectedValue, onSelect, min, max, onCheckDisabled }) {
+const MonthDays = React.memo(function MonthDays({ monthValue, selectedKey, onSelect, min, max, onCheckDisabled }) {
+  const month = fromMonthValue(monthValue)
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
   const { cells } = useCalendarDays(month)
 
   return (
@@ -57,7 +59,7 @@ function MonthDays({ month, selectedValue, onSelect, min, max, onCheckDisabled }
       </Grid>
     </View>
   )
-}
+})
 
 export function DayPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
   if (!!value) value = dayjs(value)
@@ -70,19 +72,23 @@ export function DayPicker({ value, onChange, min, max, onCheckDisabled, allowCle
     if (value?.isValid?.()) setCurrentMonth(value.startOf('month'))
   }, [value?.day?.(), value?.month?.(), value?.year?.()])
 
-  const handleChange = (v) => {
-    setLocalValue(v)
-    onChange?.(v)
-  }
+  const handleChange = React.useCallback(
+    (v) => {
+      setLocalValue(v)
+      onChange?.(v)
+    },
+    [onChange]
+  )
 
   const monthValue = toMonthValue(currentMonth)
   const minMonth = min ? toMonthValue(dayjs(min).startOf('month')) : undefined
   const maxMonth = max ? toMonthValue(dayjs(max).startOf('month')) : undefined
+  const selectedKey = value?.valueOf?.()
 
   const renderSlide = (v) => (
     <MonthDays
-      month={fromMonthValue(v)}
-      selectedValue={value}
+      monthValue={v}
+      selectedKey={selectedKey}
       onSelect={handleChange}
       min={min}
       max={max}

package/src/components/inputs/datePicker/MonthPicker.js

@@ -14,14 +14,15 @@ import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
 
 const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
 
-function MonthGrid({ year, selectedValue, onSelect, min, max, onCheckDisabled }) {
+const MonthGrid = React.memo(function MonthGrid({ year, selectedKey, onSelect, min, max, onCheckDisabled }) {
   const yearDate = dayjs().year(year).startOf('year')
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
 
   return (
     <Grid colSpan={8} gap="xs">
       {months.map((month) => {
         const dateVal = yearDate.month(month)
-        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'week')
+        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'month')
         const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
 
         return (
@@ -43,7 +44,7 @@ function MonthGrid({ year, selectedValue, onSelect, min, max, onCheckDisabled })
       })}
     </Grid>
   )
-}
+})
 
 export function MonthPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
@@ -55,18 +56,22 @@ export function MonthPicker({ value, onChange, min, max, onCheckDisabled, allowC
     if (value?.isValid?.()) setCurrentYear(value.startOf('year'))
   }, [value?.month?.(), value?.year?.()])
 
-  const handleChange = (v) => {
-    const newValue = v.startOf('month')
-    setLocalValue(newValue)
-    onChange?.(newValue)
-  }
+  const handleChange = React.useCallback(
+    (v) => {
+      const newValue = v.startOf('month')
+      setLocalValue(newValue)
+      onChange?.(newValue)
+    },
+    [onChange]
+  )
 
   const yearValue = currentYear.year()
   const minYear = min ? dayjs(min).year() : undefined
   const maxYear = max ? dayjs(max).year() : undefined
+  const selectedKey = value?.valueOf?.()
 
   const renderSlide = (v) => (
-    <MonthGrid year={v} selectedValue={value} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
+    <MonthGrid year={v} selectedKey={selectedKey} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
   )
 
   return (

package/src/components/inputs/datePicker/QuarterPicker.js

@@ -17,14 +17,15 @@ dayjs.extend(quarterOfYear)
 
 const quarters = [1, 2, 3, 4]
 
-function QuarterGrid({ year, selectedValue, onSelect, min, max, onCheckDisabled }) {
+const QuarterGrid = React.memo(function QuarterGrid({ year, selectedKey, onSelect, min, max, onCheckDisabled }) {
   const yearDate = dayjs().year(year).startOf('year')
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
 
   return (
     <Grid colSpan={6} gap="xs">
       {quarters.map((quarter) => {
         const dateVal = yearDate.quarter(quarter)
-        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'week')
+        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'quarter')
         const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
 
         return (
@@ -46,7 +47,7 @@ function QuarterGrid({ year, selectedValue, onSelect, min, max, onCheckDisabled
       })}
     </Grid>
   )
-}
+})
 
 export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
@@ -58,18 +59,22 @@ export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, allo
     if (value?.isValid?.()) setCurrentYear(value.startOf('year'))
   }, [value?.quarter?.(), value?.year?.()])
 
-  const handleChange = (v) => {
-    const newValue = v.startOf('quarter')
-    setLocalValue(newValue)
-    onChange?.(newValue)
-  }
+  const handleChange = React.useCallback(
+    (v) => {
+      const newValue = v.startOf('quarter')
+      setLocalValue(newValue)
+      onChange?.(newValue)
+    },
+    [onChange]
+  )
 
   const yearValue = currentYear.year()
   const minYear = min ? dayjs(min).year() : undefined
   const maxYear = max ? dayjs(max).year() : undefined
+  const selectedKey = value?.valueOf?.()
 
   const renderSlide = (v) => (
-    <QuarterGrid year={v} selectedValue={value} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
+    <QuarterGrid year={v} selectedKey={selectedKey} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
   )
 
   return (

package/src/components/inputs/datePicker/WeekPicker.js

@@ -25,7 +25,9 @@ function fromMonthValue(v) {
     .startOf('month')
 }
 
-function MonthWeeks({ month, selectedValue, onSelect, min, max, onCheckDisabled }) {
+const MonthWeeks = React.memo(function MonthWeeks({ monthValue, selectedKey, onSelect, min, max, onCheckDisabled }) {
+  const month = fromMonthValue(monthValue)
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
   const { cells } = useCalendarDays(month)
   const weeks = splitEvery(7, cells)
 
@@ -67,7 +69,7 @@ function MonthWeeks({ month, selectedValue, onSelect, min, max, onCheckDisabled
       </View>
     </View>
   )
-}
+})
 
 export function WeekPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
@@ -79,18 +81,22 @@ export function WeekPicker({ value, onChange, min, max, onCheckDisabled, allowCl
     if (value?.isValid?.()) setCurrentMonth(value.startOf('month'))
   }, [value?.day?.(), value?.month?.(), value?.year?.()])
 
-  const handleChange = (v) => {
-    const newValue = v.startOf('week')
-    setLocalValue(newValue)
-    onChange?.(newValue)
-  }
+  const handleChange = React.useCallback(
+    (v) => {
+      const newValue = v.startOf('week')
+      setLocalValue(newValue)
+      onChange?.(newValue)
+    },
+    [onChange]
+  )
 
   const monthValue = toMonthValue(currentMonth)
   const minMonth = min ? toMonthValue(dayjs(min).startOf('month')) : undefined
   const maxMonth = max ? toMonthValue(dayjs(max).startOf('month')) : undefined
+  const selectedKey = value?.valueOf?.()
 
   const renderSlide = (v) => (
-    <MonthWeeks month={fromMonthValue(v)} selectedValue={value} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
+    <MonthWeeks monthValue={v} selectedKey={selectedKey} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
   )
 
   return (

package/src/components/inputs/datePicker/YearPicker.js

@@ -21,15 +21,16 @@ function decadeFromIndex(i) {
   return dayjs().year(i * 10).startOf('year')
 }
 
-function DecadeGrid({ decadeIndex, selectedValue, onSelect, min, max, onCheckDisabled }) {
+const DecadeGrid = React.memo(function DecadeGrid({ decadeIndex, selectedKey, onSelect, min, max, onCheckDisabled }) {
   const decadeStart = decadeFromIndex(decadeIndex)
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
   const years = range(decadeStart.year(), decadeStart.year() + 10)
 
   return (
     <Grid colSpan={12} gap="xs">
       {years.map((year) => {
         const dateVal = decadeStart.year(year)
-        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'week')
+        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'year')
         const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
 
         return (
@@ -51,7 +52,7 @@ function DecadeGrid({ decadeIndex, selectedValue, onSelect, min, max, onCheckDis
       })}
     </Grid>
   )
-}
+})
 
 export function YearPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
@@ -64,17 +65,21 @@ export function YearPicker({ value, onChange, min, max, onCheckDisabled, allowCl
     if (value?.isValid?.()) setCurrentDecade(getDecadeIndex(value))
   }, [value?.year?.()])
 
-  const handleChange = (v) => {
-    const newValue = v.startOf('year')
-    setLocalValue(newValue)
-    onChange?.(newValue)
-  }
+  const handleChange = React.useCallback(
+    (v) => {
+      const newValue = v.startOf('year')
+      setLocalValue(newValue)
+      onChange?.(newValue)
+    },
+    [onChange]
+  )
 
   const minDecade = min ? getDecadeIndex(min) : undefined
   const maxDecade = max ? getDecadeIndex(max) : undefined
+  const selectedKey = value?.valueOf?.()
 
   const renderSlide = (v) => (
-    <DecadeGrid decadeIndex={v} selectedValue={value} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
+    <DecadeGrid decadeIndex={v} selectedKey={selectedKey} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
   )
 
   return (

package/src/index.js

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