@neko-os/ui 0.5.1 → 0.5.3

package/README.md

@@ -1,3 +1,5 @@
 # Neko UI
 
 Universal React Native UI library (works on react-native, react-native-web and react).
+
+https://nekoui.surge.sh/guides/install

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/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/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/form/FormItem.js

@@ -62,6 +62,7 @@ export function FormItem(_ref)
 
   var handleBlur = function handleBlur(e, originalOnBlur) {
     if (originalOnBlur) originalOnBlur(e);
+    form.markTouched(listPath);
 
     if (shouldValidateOn('onBlur', rules, validateTrigger)) {
       form.validateField(listPath, 'onBlur');

package/dist/components/form/useNewForm.js

@@ -1,4 +1,4 @@
-function asyncGeneratorStep(n, t, e, r, o, a, c) {try {var i = n[a](c),u = i.value;} catch (n) {return void e(n);}i.done ? t(u) : Promise.resolve(u).then(r, o);}function _asyncToGenerator(n) {return function () {var t = this,e = arguments;return new Promise(function (r, o) {var a = n.apply(t, e);function _next(n) {asyncGeneratorStep(a, r, o, _next, _throw, "next", n);}function _throw(n) {asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);}_next(void 0);});};}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 { assocPath, path } from 'ramda';
+function asyncGeneratorStep(n, t, e, r, o, a, c) {try {var i = n[a](c),u = i.value;} catch (n) {return void e(n);}i.done ? t(u) : Promise.resolve(u).then(r, o);}function _asyncToGenerator(n) {return function () {var t = this,e = arguments;return new Promise(function (r, o) {var a = n.apply(t, e);function _next(n) {asyncGeneratorStep(a, r, o, _next, _throw, "next", n);}function _throw(n) {asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);}_next(void 0);});};}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 _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 _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 { assocPath, path } from 'ramda';
 import React from 'react';
 import { validateRules, validateAllFields, normalizeRules } from "./validation";
 
@@ -6,6 +6,8 @@ export function useNewForm() {var _ref = arguments.length > 0 && arguments[0] !=
   var valuesRef = React.useRef(Object.assign({}, initialValues));
   var initialValuesRef = React.useRef(Object.assign({}, initialValues));
   var errorsRef = React.useRef({});
+  var touchedRef = React.useRef(new Set());
+  var dirtyRef = React.useRef(new Set());
   var listenersRef = React.useRef({});
   var errorListenersRef = React.useRef({});
   var rulesRegistryRef = React.useRef(new Map());
@@ -45,8 +47,37 @@ export function useNewForm() {var _ref = arguments.length > 0 && arguments[0] !=
       });
     };
 
+    var markTouched = function markTouched(name) {
+      touchedRef.current.add(toKey(name));
+    };
+
+    var updateDirty = function updateDirty(name) {
+      var key = toKey(name);
+      var current = path(toPath(name), valuesRef.current);
+      var initial = path(toPath(name), initialValuesRef.current);
+      if (current === initial) {
+        dirtyRef.current.delete(key);
+      } else {
+        dirtyRef.current.add(key);
+      }
+    };
+
+    var isTouched = function isTouched(name) {
+      if (!name) return touchedRef.current.size > 0;
+      return touchedRef.current.has(toKey(name));
+    };
+
+    var isDirty = function isDirty(name) {
+      if (!name) return dirtyRef.current.size > 0;
+      return dirtyRef.current.has(toKey(name));
+    };
+
+    var getTouchedFields = function getTouchedFields() {return _toConsumableArray(touchedRef.current);};
+    var getDirtyFields = function getDirtyFields() {return _toConsumableArray(dirtyRef.current);};
+
     var setFieldValue = function setFieldValue(name, value) {
       valuesRef.current = assocPath(toPath(name), value, valuesRef.current);
+      updateDirty(name);
       notify(name);
       var fn = callbacksRef.current.onValuesChange;
       if (fn) fn(name, valuesRef.current);
@@ -69,6 +100,8 @@ export function useNewForm() {var _ref = arguments.length > 0 && arguments[0] !=
     var resetFields = function resetFields() {
       valuesRef.current = Object.assign({}, initialValuesRef.current);
       errorsRef.current = {};
+      touchedRef.current.clear();
+      dirtyRef.current.clear();
       notifyAll();
       notifyAllErrors();
     };
@@ -196,6 +229,11 @@ export function useNewForm() {var _ref = arguments.length > 0 && arguments[0] !=
       getError: getError,
       setError: setError,
       clearErrors: clearErrors,
+      markTouched: markTouched,
+      isTouched: isTouched,
+      isDirty: isDirty,
+      getTouchedFields: getTouchedFields,
+      getDirtyFields: getDirtyFields,
       registerListener: registerListener,
       registerErrorListener: registerErrorListener,
       registerRules: registerRules,

package/dist/helpers/index.js

@@ -2,4 +2,6 @@ export * from "./debounce";
 export * from "./string";
 export * from "./random";
 export * from "./storage";
+export * from "./weekStart";
+export * from "./weekStartSetup";
 export * from "./../abstractions/helpers/useSafeAreaInsets";

package/dist/helpers/weekStart.js

@@ -0,0 +1,25 @@
+import dayjs from 'dayjs';
+import updateLocale from 'dayjs/esm/plugin/updateLocale';
+
+dayjs.extend(updateLocale);
+
+var _override = null;
+
+export function getFirstDayOfWeek() {
+  if (_override !== null) return _override;
+  return dayjs().$locale().weekStart || 0;
+}
+
+export function setFirstDayOfWeek(day) {
+  _override = day;
+  dayjs.updateLocale(dayjs().$locale().name || 'en', { weekStart: day });
+}
+
+export function getOrderedWeekdays() {
+  var first = getFirstDayOfWeek();
+  return Array.from({ length: 7 }, function (_, i) {return (first + i) % 7;});
+}
+
+export function getWeekdayOffset(dayIndex) {
+  return (dayIndex - getFirstDayOfWeek() + 7) % 7;
+}

package/dist/helpers/weekStartSetup.js

@@ -0,0 +1,11 @@
+import { setFirstDayOfWeek } from "./weekStart";
+
+export function initFirstDayOfWeek() {
+  try {var _locale$weekInfo;
+    var locale = new Intl.Locale(navigator.language);
+    var weekInfo = (_locale$weekInfo = locale.weekInfo) != null ? _locale$weekInfo : locale.getWeekInfo == null ? void 0 : locale.getWeekInfo();
+    if ((weekInfo == null ? void 0 : weekInfo.firstDay) != null) {
+      setFirstDayOfWeek(weekInfo.firstDay === 7 ? 0 : weekInfo.firstDay);
+    }
+  } catch (_unused) {}
+}

package/dist/helpers/weekStartSetup.native.js

@@ -0,0 +1,11 @@
+import { setFirstDayOfWeek } from "./weekStart";
+
+export function initFirstDayOfWeek() {
+  try {
+    var Localization = require('expo-localization');
+    var cal = Localization.getCalendars()[0];
+    if ((cal == null ? void 0 : cal.firstWeekday) != null) {
+      setFirstDayOfWeek((cal.firstWeekday - 1) % 7);
+    }
+  } catch (_unused) {}
+}

package/package.json

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

package/src/NekoUI.js

@@ -1,3 +1,4 @@
+import { initFirstDayOfWeek } from './helpers/weekStartSetup'
 import { DynamicStyleTag } from './DynamicStyleTag'
 import { I18nProvider } from './i18n'
 import { ModalsHandler } from './components/modals/modal/handler/ModalsHandler'
@@ -9,6 +10,8 @@ import { ThemeHandler } from './theme/ThemeHandler'
 import { ThemePickerDrawer } from './components/theme'
 import { useThemeHandler } from './theme'
 
+initFirstDayOfWeek()
+
 export function NekoUI({ children, i18n, ...props }) {
   return (
     <ThemeHandler {...props}>

package/src/components/actions/Dropdown.js

@@ -37,6 +37,7 @@ export function Dropdown({ items, ...rootProps }) {
     placement,
     gap,
     useBottomDrawer,
+    snapPoints,
     ...props
   } = formattedProps
 
@@ -52,6 +53,7 @@ export function Dropdown({ items, ...rootProps }) {
         // In case its web use the Drawer component
         contentProps={{ padding: 0 }}
         useBottomDrawer={useBottomDrawer}
+        snapPoints={snapPoints}
         {...popoverProps}
         renderContent={({ onClose }) => {
           const handleChange = (...params) => {

package/src/components/calendar/PeriodNavBar.js

@@ -0,0 +1,176 @@
+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'
+
+dayjs.extend(quarterOfYear)
+
+function getWeekEpoch() {
+  return dayjs('2000-01-01').startOf('week')
+}
+
+const TYPES = {
+  day: {
+    count: 7,
+    unit: 'day',
+    toPageValue(date) {
+      return date.startOf('week').diff(getWeekEpoch(), 'week')
+    },
+    getItems(pageValue) {
+      const weekStart = getWeekEpoch().add(pageValue, 'week')
+      return Array.from({ length: 7 }, (_, i) => {
+        const 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(date) {
+      const weekIndex = date.startOf('week').diff(getWeekEpoch(), 'week')
+      return Math.floor(weekIndex / 7)
+    },
+    getItems(pageValue) {
+      return Array.from({ length: 7 }, (_, i) => {
+        const weekIndex = pageValue * 7 + i
+        const d = getWeekEpoch().add(weekIndex, 'week')
+        const 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(date) {
+      const absMonth = date.year() * 12 + date.month()
+      return Math.floor(absMonth / 7)
+    },
+    getItems(pageValue) {
+      return Array.from({ length: 7 }, (_, i) => {
+        const absMonth = pageValue * 7 + i
+        const year = Math.floor(absMonth / 12)
+        const month = absMonth % 12
+        const 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(date) {
+      return date.year()
+    },
+    getItems(pageValue) {
+      return Array.from({ length: 4 }, (_, i) => {
+        const 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(date) {
+      return Math.floor(date.year() / 7)
+    },
+    getItems(pageValue) {
+      return Array.from({ length: 7 }, (_, i) => {
+        const year = pageValue * 7 + i
+        const d = dayjs().year(year).startOf('year')
+        return { key: d.valueOf(), date: d, label: String(year), sublabel: null }
+      })
+    },
+  },
+}
+
+const PeriodSlide = React.memo(function PeriodSlide({ items, value, unit, onChange, min, max, onCheckDisabled }) {
+  return (
+    <View row center gap="xs">
+      {items.map((item) => {
+        const isActive = !!value && dayjs(value).isSame(item.date, unit)
+        const disabled = isDateDisabled(item.date, { min, max, onCheckDisabled })
+
+        return (
+          <Link
+            key={item.key}
+            flex
+            center
+            br="md"
+            paddingV="xs"
+            onPress={() => onChange(item.date)}
+            bg={isActive && 'primary'}
+            disabled={disabled}
+          >
+            <Text sm center strong={isActive} text2={!isActive}>
+              {item.label}
+            </Text>
+            {item.sublabel && (
+              <Text xxs center text4={!isActive} strong={isActive}>
+                {item.sublabel}
+              </Text>
+            )}
+          </Link>
+        )
+      })}
+    </View>
+  )
+})
+
+export function PeriodNavBar({ type = 'day', value, onChange, min, max, onCheckDisabled, ...props }) {
+  const config = TYPES[type]
+  const [localValue, setLocalValue] = React.useState(value)
+  const resolvedValue = value === undefined ? localValue : value
+
+  const [currentPage, setCurrentPage] = React.useState(() => {
+    const date = resolvedValue ? dayjs(resolvedValue) : dayjs()
+    return config.toPageValue(date)
+  })
+
+  React.useEffect(() => {
+    const date = resolvedValue ? dayjs(resolvedValue) : dayjs()
+    setCurrentPage(TYPES[type].toPageValue(date))
+  }, [resolvedValue, type])
+
+  const handleSelect = React.useCallback(
+    (date) => {
+      setLocalValue(date)
+      onChange?.(date)
+    },
+    [onChange]
+  )
+
+  const minPage = min ? config.toPageValue(dayjs(min)) : undefined
+  const maxPage = max ? config.toPageValue(dayjs(max)) : undefined
+
+  const renderSlide = (pageValue) => (
+    <PeriodSlide
+      items={config.getItems(pageValue)}
+      value={resolvedValue}
+      unit={config.unit}
+      onChange={handleSelect}
+      min={min}
+      max={max}
+      onCheckDisabled={onCheckDisabled}
+    />
+  )
+
+  return (
+    <View className="neko-period-nav-bar" {...props}>
+      <InfiniteCarousel
+        value={currentPage}
+        onChange={setCurrentPage}
+        renderSlide={renderSlide}
+        min={minPage}
+        max={maxPage}
+      />
+    </View>
+  )
+}

package/src/components/calendar/WeekDaysBar.js

@@ -1,12 +1,16 @@
 import { Text } from '../text/Text'
 import { View } from '../structure/View'
+import { getFirstDayOfWeek } from '../../helpers/weekStart'
 
-const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+const ALL_DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
 
 export function WeekDaysBar() {
+  const firstDay = getFirstDayOfWeek()
+  const labels = [...ALL_DAYS.slice(firstDay), ...ALL_DAYS.slice(0, firstDay)]
+
   return (
     <View className="neko-week-days-bar" row center gap="sm">
-      {weekdayLabels.map((w) => (
+      {labels.map((w) => (
         <View key={w} flex height={30} center>
           <Text center sm text4>
             {w}

package/src/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(() => {
     if (!currentMonth?.isValid?.()) currentMonth = dayjs()
     const startWeekday = currentMonth.startOf('month').day()
+    const firstDay = getFirstDayOfWeek()
+    const offset = (startWeekday - firstDay + 7) % 7
     const daysInMonth = currentMonth.daysInMonth()
 
-    const blanks = Array.from({ length: startWeekday }, () => null)
+    const blanks = Array.from({ length: offset }, () => null)
     const days = Array.from({ length: daysInMonth }, (_, i) => i + 1)
     const cells = [...blanks, ...days]
 

package/src/components/calendar/index.js

@@ -1 +1 @@
-// export * from './DayPicker'
+export * from './PeriodNavBar'

package/src/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/src/components/form/FormItem.js

@@ -62,6 +62,7 @@ export function FormItem({
 
   const handleBlur = (e, originalOnBlur) => {
     if (originalOnBlur) originalOnBlur(e)
+    form.markTouched(listPath)
 
     if (shouldValidateOn('onBlur', rules, validateTrigger)) {
       form.validateField(listPath, 'onBlur')

package/src/components/form/useNewForm.js

@@ -6,6 +6,8 @@ export function useNewForm({ initialValues = {}, validate, onSubmit, onValuesCha
   const valuesRef = React.useRef({ ...initialValues })
   const initialValuesRef = React.useRef({ ...initialValues })
   const errorsRef = React.useRef({}) // Flat structure: { 'users': 'error', 'users.0.name': 'error' }
+  const touchedRef = React.useRef(new Set())
+  const dirtyRef = React.useRef(new Set())
   const listenersRef = React.useRef({})
   const errorListenersRef = React.useRef({})
   const rulesRegistryRef = React.useRef(new Map())
@@ -45,8 +47,37 @@ export function useNewForm({ initialValues = {}, validate, onSubmit, onValuesCha
       })
     }
 
+    const markTouched = (name) => {
+      touchedRef.current.add(toKey(name))
+    }
+
+    const updateDirty = (name) => {
+      const key = toKey(name)
+      const current = path(toPath(name), valuesRef.current)
+      const initial = path(toPath(name), initialValuesRef.current)
+      if (current === initial) {
+        dirtyRef.current.delete(key)
+      } else {
+        dirtyRef.current.add(key)
+      }
+    }
+
+    const isTouched = (name) => {
+      if (!name) return touchedRef.current.size > 0
+      return touchedRef.current.has(toKey(name))
+    }
+
+    const isDirty = (name) => {
+      if (!name) return dirtyRef.current.size > 0
+      return dirtyRef.current.has(toKey(name))
+    }
+
+    const getTouchedFields = () => [...touchedRef.current]
+    const getDirtyFields = () => [...dirtyRef.current]
+
     const setFieldValue = (name, value) => {
       valuesRef.current = assocPath(toPath(name), value, valuesRef.current)
+      updateDirty(name)
       notify(name)
       const fn = callbacksRef.current.onValuesChange
       if (fn) fn(name, valuesRef.current)
@@ -69,6 +100,8 @@ export function useNewForm({ initialValues = {}, validate, onSubmit, onValuesCha
     const resetFields = () => {
       valuesRef.current = { ...initialValuesRef.current }
       errorsRef.current = {}
+      touchedRef.current.clear()
+      dirtyRef.current.clear()
       notifyAll()
       notifyAllErrors()
     }
@@ -196,6 +229,11 @@ export function useNewForm({ initialValues = {}, validate, onSubmit, onValuesCha
       getError,
       setError,
       clearErrors,
+      markTouched,
+      isTouched,
+      isDirty,
+      getTouchedFields,
+      getDirtyFields,
       registerListener,
       registerErrorListener,
       registerRules,

package/src/helpers/index.js

@@ -2,4 +2,6 @@ export * from './debounce'
 export * from './string'
 export * from './random'
 export * from './storage'
+export * from './weekStart'
+export * from './weekStartSetup'
 export * from './../abstractions/helpers/useSafeAreaInsets'

package/src/helpers/weekStart.js

@@ -0,0 +1,25 @@
+import dayjs from 'dayjs'
+import updateLocale from 'dayjs/esm/plugin/updateLocale'
+
+dayjs.extend(updateLocale)
+
+let _override = null
+
+export function getFirstDayOfWeek() {
+  if (_override !== null) return _override
+  return dayjs().$locale().weekStart || 0
+}
+
+export function setFirstDayOfWeek(day) {
+  _override = day
+  dayjs.updateLocale(dayjs().$locale().name || 'en', { weekStart: day })
+}
+
+export function getOrderedWeekdays() {
+  const first = getFirstDayOfWeek()
+  return Array.from({ length: 7 }, (_, i) => (first + i) % 7)
+}
+
+export function getWeekdayOffset(dayIndex) {
+  return (dayIndex - getFirstDayOfWeek() + 7) % 7
+}

package/src/helpers/weekStartSetup.js

@@ -0,0 +1,11 @@
+import { setFirstDayOfWeek } from './weekStart'
+
+export function initFirstDayOfWeek() {
+  try {
+    const locale = new Intl.Locale(navigator.language)
+    const weekInfo = locale.weekInfo ?? locale.getWeekInfo?.()
+    if (weekInfo?.firstDay != null) {
+      setFirstDayOfWeek(weekInfo.firstDay === 7 ? 0 : weekInfo.firstDay)
+    }
+  } catch {}
+}

package/src/helpers/weekStartSetup.native.js

@@ -0,0 +1,11 @@
+import { setFirstDayOfWeek } from './weekStart'
+
+export function initFirstDayOfWeek() {
+  try {
+    const Localization = require('expo-localization')
+    const cal = Localization.getCalendars()[0]
+    if (cal?.firstWeekday != null) {
+      setFirstDayOfWeek((cal.firstWeekday - 1) % 7)
+    }
+  } catch {}
+}