@neko-os/ui 0.5.0 → 0.5.2

package/dist/NekoUI.js

@@ -1,4 +1,5 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/NekoUI.js";var _excluded = ["children", "i18n"];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 { DynamicStyleTag } from "./DynamicStyleTag";
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/NekoUI.js";var _excluded = ["children", "i18n"];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 { initFirstDayOfWeek } from "./helpers/weekStartSetup";
+import { DynamicStyleTag } from "./DynamicStyleTag";
 import { I18nProvider } from "./i18n";
 import { ModalsHandler } from "./components/modals/modal/handler/ModalsHandler";
 import { NotificationsHandler } from "./components/feedback/notifications/NotificationsHandler";
@@ -9,6 +10,8 @@ import { ThemeHandler } from "./theme/ThemeHandler";
 import { ThemePickerDrawer } from "./components/theme";
 import { useThemeHandler } from "./theme";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 
+initFirstDayOfWeek();
+
 export function NekoUI(_ref) {var children = _ref.children,i18n = _ref.i18n,props = _objectWithoutProperties(_ref, _excluded);
   return (
     _jsxs(ThemeHandler, Object.assign({}, props, { children: [

package/dist/abstractions/index.js

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

package/dist/components/actions/Dropdown.js

@@ -1,4 +1,4 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/Dropdown.js";var _excluded = ["items"],_excluded2 = ["onChange", "label", "trigger", "icon", "strong", "color", "popoverProps", "iconLabelProps", "children", "placement", "gap", "useBottomDrawer"];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/actions/Dropdown.js";var _excluded = ["items"],_excluded2 = ["onChange", "label", "trigger", "icon", "strong", "color", "popoverProps", "iconLabelProps", "children", "placement", "gap", "useBottomDrawer", "snapPoints"];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 { DrawerScrollView } from "../modals";
 import { IconLabel } from "../presentation/IconLabel";
@@ -38,7 +38,8 @@ export function Dropdown(_ref) {var _this = this;var items = _ref.items,rootProp
 
 
 
-    formattedProps.onChange,label = formattedProps.label,_formattedProps$trigg = formattedProps.trigger,trigger = _formattedProps$trigg === void 0 ? 'click' : _formattedProps$trigg,icon = formattedProps.icon,strong = formattedProps.strong,color = formattedProps.color,popoverProps = formattedProps.popoverProps,iconLabelProps = formattedProps.iconLabelProps,children = formattedProps.children,placement = formattedProps.placement,gap = formattedProps.gap,useBottomDrawer = formattedProps.useBottomDrawer,props = _objectWithoutProperties(formattedProps, _excluded2);
+
+    formattedProps.onChange,label = formattedProps.label,_formattedProps$trigg = formattedProps.trigger,trigger = _formattedProps$trigg === void 0 ? 'click' : _formattedProps$trigg,icon = formattedProps.icon,strong = formattedProps.strong,color = formattedProps.color,popoverProps = formattedProps.popoverProps,iconLabelProps = formattedProps.iconLabelProps,children = formattedProps.children,placement = formattedProps.placement,gap = formattedProps.gap,useBottomDrawer = formattedProps.useBottomDrawer,snapPoints = formattedProps.snapPoints,props = _objectWithoutProperties(formattedProps, _excluded2);
 
   useBottomDrawer = useResponsiveValue(useBottomDrawer || { native: true, sm: true, md: true });
 
@@ -51,7 +52,8 @@ export function Dropdown(_ref) {var _this = this;var items = _ref.items,rootProp
         padding: 0,
 
         contentProps: { padding: 0 },
-        useBottomDrawer: useBottomDrawer },
+        useBottomDrawer: useBottomDrawer,
+        snapPoints: snapPoints },
       popoverProps, {
         renderContent: function renderContent(_ref2) {var onClose = _ref2.onClose;
           var handleChange = function handleChange() {

package/dist/components/calendar/PeriodNavBar.js

@@ -0,0 +1,176 @@
+var _excluded = ["type", "value", "onChange", "min", "max", "onCheckDisabled"];var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/calendar/PeriodNavBar.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;}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 dayjs from 'dayjs';
+import quarterOfYear from 'dayjs/esm/plugin/quarterOfYear';
+
+import { InfiniteCarousel } from "../carousel/InfiniteCarousel";
+import { Link } from "../actions/Link";
+import { Text } from "../text/Text";
+import { View } from "../structure/View";
+import { isDateDisabled } from "./_helpers/dateDisabled";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+dayjs.extend(quarterOfYear);
+
+function getWeekEpoch() {
+  return dayjs('2000-01-01').startOf('week');
+}
+
+var TYPES = {
+  day: {
+    count: 7,
+    unit: 'day',
+    toPageValue: function toPageValue(date) {
+      return date.startOf('week').diff(getWeekEpoch(), 'week');
+    },
+    getItems: function getItems(pageValue) {
+      var weekStart = getWeekEpoch().add(pageValue, 'week');
+      return Array.from({ length: 7 }, function (_, i) {
+        var d = weekStart.add(i, 'day');
+        return { key: d.valueOf(), date: d, label: d.format('ddd'), sublabel: String(d.date()) };
+      });
+    }
+  },
+  week: {
+    count: 7,
+    unit: 'week',
+    toPageValue: function toPageValue(date) {
+      var weekIndex = date.startOf('week').diff(getWeekEpoch(), 'week');
+      return Math.floor(weekIndex / 7);
+    },
+    getItems: function getItems(pageValue) {
+      return Array.from({ length: 7 }, function (_, i) {
+        var weekIndex = pageValue * 7 + i;
+        var d = getWeekEpoch().add(weekIndex, 'week');
+        var end = d.add(6, 'day');
+        return { key: d.valueOf(), date: d, label: `${d.date()}-${end.date()}`, sublabel: d.format('MMM') };
+      });
+    }
+  },
+  month: {
+    count: 7,
+    unit: 'month',
+    toPageValue: function toPageValue(date) {
+      var absMonth = date.year() * 12 + date.month();
+      return Math.floor(absMonth / 7);
+    },
+    getItems: function getItems(pageValue) {
+      return Array.from({ length: 7 }, function (_, i) {
+        var absMonth = pageValue * 7 + i;
+        var year = Math.floor(absMonth / 12);
+        var month = absMonth % 12;
+        var d = dayjs().year(year).month(month).startOf('month');
+        return { key: d.valueOf(), date: d, label: d.format('MMM'), sublabel: d.format("'YY") };
+      });
+    }
+  },
+  quarter: {
+    count: 4,
+    unit: 'quarter',
+    toPageValue: function toPageValue(date) {
+      return date.year();
+    },
+    getItems: function getItems(pageValue) {
+      return Array.from({ length: 4 }, function (_, i) {
+        var d = dayjs().year(pageValue).month(i * 3).startOf('month');
+        return { key: d.valueOf(), date: d, label: `Q${i + 1}`, sublabel: String(pageValue) };
+      });
+    }
+  },
+  year: {
+    count: 7,
+    unit: 'year',
+    toPageValue: function toPageValue(date) {
+      return Math.floor(date.year() / 7);
+    },
+    getItems: function getItems(pageValue) {
+      return Array.from({ length: 7 }, function (_, i) {
+        var year = pageValue * 7 + i;
+        var d = dayjs().year(year).startOf('year');
+        return { key: d.valueOf(), date: d, label: String(year), sublabel: null };
+      });
+    }
+  }
+};
+
+var PeriodSlide = React.memo(function PeriodSlide(_ref) {var _this = this;var items = _ref.items,value = _ref.value,unit = _ref.unit,onChange = _ref.onChange,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
+  return (
+    _jsx(View, { row: true, center: true, gap: "xs", children:
+      items.map(function (item) {
+        var isActive = !!value && dayjs(value).isSame(item.date, unit);
+        var disabled = isDateDisabled(item.date, { min: min, max: max, onCheckDisabled: onCheckDisabled });
+
+        return (
+          _jsxs(Link, {
+
+            flex: true,
+            center: true,
+            br: "md",
+            paddingV: "xs",
+            onPress: function onPress() {return onChange(item.date);},
+            bg: isActive && 'primary',
+            disabled: disabled, children: [
+
+            _jsx(Text, { sm: true, center: true, strong: isActive, text2: !isActive, children:
+              item.label }
+            ),
+            item.sublabel &&
+            _jsx(Text, { xxs: true, center: true, text4: !isActive, strong: isActive, children:
+              item.sublabel }
+            )] }, item.key
+
+          ));
+
+      }) }
+    ));
+
+});
+
+export function PeriodNavBar(_ref2) {var _this2 = this;var _ref2$type = _ref2.type,type = _ref2$type === void 0 ? 'day' : _ref2$type,value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,props = _objectWithoutProperties(_ref2, _excluded);
+  var config = TYPES[type];
+  var _React$useState = React.useState(value),_React$useState2 = _slicedToArray(_React$useState, 2),localValue = _React$useState2[0],setLocalValue = _React$useState2[1];
+  var resolvedValue = value === undefined ? localValue : value;
+
+  var _React$useState3 = React.useState(function () {
+      var date = resolvedValue ? dayjs(resolvedValue) : dayjs();
+      return config.toPageValue(date);
+    }),_React$useState4 = _slicedToArray(_React$useState3, 2),currentPage = _React$useState4[0],setCurrentPage = _React$useState4[1];
+
+  React.useEffect(function () {
+    var date = resolvedValue ? dayjs(resolvedValue) : dayjs();
+    setCurrentPage(TYPES[type].toPageValue(date));
+  }, [resolvedValue, type]);
+
+  var handleSelect = React.useCallback(
+    function (date) {
+      setLocalValue(date);
+      onChange == null ? void 0 : onChange(date);
+    },
+    [onChange]
+  );
+
+  var minPage = min ? config.toPageValue(dayjs(min)) : undefined;
+  var maxPage = max ? config.toPageValue(dayjs(max)) : undefined;
+
+  var renderSlide = function renderSlide(pageValue) {return (
+      _jsx(PeriodSlide, {
+        items: config.getItems(pageValue),
+        value: resolvedValue,
+        unit: config.unit,
+        onChange: handleSelect,
+        min: min,
+        max: max,
+        onCheckDisabled: onCheckDisabled }
+      ));};
+
+
+  return (
+    _jsx(View, Object.assign({ className: "neko-period-nav-bar" }, props, { children:
+      _jsx(InfiniteCarousel, {
+        value: currentPage,
+        onChange: setCurrentPage,
+        renderSlide: renderSlide,
+        min: minPage,
+        max: maxPage }
+      ) })
+    ));
+
+}

package/dist/components/calendar/WeekDaysBar.js

@@ -1,12 +1,16 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/calendar/WeekDaysBar.js";import { Text } from "../text/Text";
-import { View } from "../structure/View";import { jsx as _jsx } from "react/jsx-runtime";
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/calendar/WeekDaysBar.js";function _toConsumableArray(r) {return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();}function _nonIterableSpread() {throw new TypeError("Invalid attempt to spread 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 _iterableToArray(r) {if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);}function _arrayWithoutHoles(r) {if (Array.isArray(r)) return _arrayLikeToArray(r);}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;}import { Text } from "../text/Text";
+import { View } from "../structure/View";
+import { getFirstDayOfWeek } from "../../helpers/weekStart";import { jsx as _jsx } from "react/jsx-runtime";
 
-var weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+var ALL_DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 
 export function WeekDaysBar() {var _this = this;
+  var firstDay = getFirstDayOfWeek();
+  var labels = [].concat(_toConsumableArray(ALL_DAYS.slice(firstDay)), _toConsumableArray(ALL_DAYS.slice(0, firstDay)));
+
   return (
     _jsx(View, { className: "neko-week-days-bar", row: true, center: true, gap: "sm", children:
-      weekdayLabels.map(function (w) {return (
+      labels.map(function (w) {return (
           _jsx(View, { flex: true, height: 30, center: true, children:
             _jsx(Text, { center: true, sm: true, text4: true, children:
               w }

package/dist/components/calendar/_helpers/calendarDays.js

@@ -1,13 +1,17 @@
 import dayjs from 'dayjs';
 import React from 'react';
 
+import { getFirstDayOfWeek } from "../../../helpers/weekStart";
+
 export function useCalendarDays(currentMonth) {
   return React.useMemo(function () {var _currentMonth;
     if (!((_currentMonth = currentMonth) != null && _currentMonth.isValid != null && _currentMonth.isValid())) currentMonth = dayjs();
     var startWeekday = currentMonth.startOf('month').day();
+    var firstDay = getFirstDayOfWeek();
+    var offset = (startWeekday - firstDay + 7) % 7;
     var daysInMonth = currentMonth.daysInMonth();
 
-    var blanks = Array.from({ length: startWeekday }, function () {return null;});
+    var blanks = Array.from({ length: offset }, function () {return null;});
     var days = Array.from({ length: daysInMonth }, function (_, i) {return i + 1;});
     var cells = [].concat(blanks, days);
 

package/dist/components/calendar/index.js

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

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/filter/DateFilter.js

@@ -33,7 +33,7 @@ function formatValue(value, type) {
     case 'month':
       return [date.startOf('month'), date.endOf('month')];
     case 'week':
-      return [date.startOf('isoWeek'), date.endOf('isoWeek')];
+      return [date.startOf('week'), date.endOf('week')];
     default:
       return [date.startOf('day'), date.endOf('day')];
   }

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 (