@neko-os/ui 0.4.0 → 0.5.1

package/dist/components/carousel/InfiniteCarousel.js

@@ -0,0 +1,50 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/carousel/InfiniteCarousel.js";var _excluded = ["value", "onChange", "renderSlide", "min", "max"];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 { Carousel } from "./Carousel";import { jsx as _jsx } from "react/jsx-runtime";
+
+function buildItems(value, min, max, renderSlideRef) {
+  var items = [];
+  if (min === undefined || value - 1 >= min) {
+    items.push({ key: value - 1, render: function render() {return renderSlideRef.current(value - 1);} });
+  }
+  items.push({ key: value, render: function render() {return renderSlideRef.current(value);} });
+  if (max === undefined || value + 1 <= max) {
+    items.push({ key: value + 1, render: function render() {return renderSlideRef.current(value + 1);} });
+  }
+  return items;
+}
+
+export function InfiniteCarousel(_ref) {var value = _ref.value,onChange = _ref.onChange,renderSlide = _ref.renderSlide,min = _ref.min,max = _ref.max,carouselProps = _objectWithoutProperties(_ref, _excluded);
+  var renderSlideRef = React.useRef(renderSlide);
+  renderSlideRef.current = renderSlide;
+
+  var _React$useState = React.useState(function () {return buildItems(value, min, max, renderSlideRef);}),_React$useState2 = _slicedToArray(_React$useState, 2),items = _React$useState2[0],setItems = _React$useState2[1];
+  var _React$useState3 = React.useState(value),_React$useState4 = _slicedToArray(_React$useState3, 2),activeKey = _React$useState4[0],setActiveKey = _React$useState4[1];
+
+  React.useEffect(function () {
+    setItems(buildItems(value, min, max, renderSlideRef));
+    setActiveKey(value);
+  }, [value, min, max]);
+
+  var handleChange = React.useCallback(function (key) {
+    setActiveKey(key);
+  }, []);
+
+  var handleAfterChange = React.useCallback(
+    function (key) {
+      if (key !== value) onChange == null ? void 0 : onChange(key);
+    },
+    [value, onChange]
+  );
+
+  return (
+    _jsx(Carousel, Object.assign({
+      items: items,
+      activeKey: activeKey,
+      onChange: handleChange,
+      afterChange: handleAfterChange,
+      draggable: true },
+    carouselProps)
+    ));
+
+}

package/dist/components/carousel/index.js

@@ -0,0 +1,6 @@
+export * from "./CarouselHandler";
+export * from "./Carousel";
+export * from "./CarouselSlider";
+export * from "./CarouselDots";
+export * from "./CarouselArrows";
+export * from "./InfiniteCarousel";

package/dist/components/form/Form.js

@@ -1,8 +1,9 @@
 var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/form/Form.js";var _excluded = ["form", "onSubmit", "onValuesChange", "initialValues", "children", "loading", "disabled"];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 { FormWrapperComponent } from "./FormWrapperComponent";
+import { KeyboardDismissButton } from "../keyboard/KeyboardDismissButton";
 import { LoadingView } from "../state/LoadingView";
-import { useNewForm } from "./useNewForm";import { jsx as _jsx } from "react/jsx-runtime";
+import { useNewForm } from "./useNewForm";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 
 var FormContext = React.createContext(null);
 export var useFormState = function useFormState() {return React.useContext(FormContext);};
@@ -22,8 +23,9 @@ export function Form(_ref) {var form = _ref.form,onSubmit = _ref.onSubmit,onValu
   return (
     _jsx(FormContext.Provider, { value: { loading: loading, disabled: disabled, form: form }, children:
       _jsx(LoadingView, { active: loading, noWrapper: true, children:
-        _jsx(FormWrapperComponent, Object.assign({ form: form, onSubmit: onSubmit, gap: "md" }, props, { children:
-          children })
+        _jsxs(FormWrapperComponent, Object.assign({ form: form, onSubmit: onSubmit, gap: "md" }, props, { children: [
+          children,
+          _jsx(KeyboardDismissButton, {})] })
         ) }
       ) }
     ));

package/dist/components/index.js

@@ -7,6 +7,7 @@ export * from "./modals";
 export * from "./text";
 export * from "./helpers";
 export * from "./inputs";
+export * from "./keyboard";
 export * from "./state";
 export * from "./layout";
 export * from "./table";
@@ -17,4 +18,5 @@ export * from "./tabs";
 export * from "./theme";
 export * from "./sections";
 export * from "./filter";
-export * from "./steps";
+export * from "./steps";
+export * from "./carousel";

package/dist/components/inputs/DateInput.js

@@ -1,4 +1,4 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/DateInput.js";var _excluded = ["ref"],_excluded2 = ["value", "onChange", "min", "max", "onCheckDisabled", "placement", "type", "format", "startsOpen", "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 React from 'react';
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/DateInput.js";var _excluded = ["ref"],_excluded2 = ["value", "onChange", "min", "max", "onCheckDisabled", "placement", "type", "format", "startsOpen", "allowClear", "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 React from 'react';
 import advancedFormat from 'dayjs/esm/plugin/advancedFormat';
 import dayjs from 'dayjs';
 import weekOfYear from 'dayjs/esm/plugin/weekOfYear';
@@ -50,7 +50,8 @@ export function DateInput(_ref2)
 
 
 
-{var _value,_this = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,placement = _ref2.placement,_ref2$type = _ref2.type,type = _ref2$type === void 0 ? 'day' : _ref2$type,format = _ref2.format,startsOpen = _ref2.startsOpen,_ref2$useBottomDrawer = _ref2.useBottomDrawer,useBottomDrawer = _ref2$useBottomDrawer === void 0 ? { native: true, sm: true, md: true } : _ref2$useBottomDrawer,props = _objectWithoutProperties(_ref2, _excluded2);
+
+{var _value,_this = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,placement = _ref2.placement,_ref2$type = _ref2.type,type = _ref2$type === void 0 ? 'day' : _ref2$type,format = _ref2.format,startsOpen = _ref2.startsOpen,allowClear = _ref2.allowClear,_ref2$useBottomDrawer = _ref2.useBottomDrawer,useBottomDrawer = _ref2$useBottomDrawer === void 0 ? { native: true, sm: true, md: true } : _ref2$useBottomDrawer,props = _objectWithoutProperties(_ref2, _excluded2);
   useBottomDrawer = useResponsiveValue(useBottomDrawer);
   format = format || getDateInputDefaultFormat(type);
   if (value === '') value = undefined;
@@ -91,7 +92,7 @@ export function DateInput(_ref2)
       trigger: "click",
       startsOpen: startsOpen,
       placement: placement || 'bottomLeft',
-      snapPoints: [350],
+      snapPoints: [450],
       useBottomDrawer: useBottomDrawer,
       bottomDrawerProps: { contentProps: { padding: 'md' } },
       watch: [(_value = value) == null ? void 0 : _value.format == null ? void 0 : _value.format('YYYYMMDD')],
@@ -102,7 +103,9 @@ export function DateInput(_ref2)
               onChange: function onChange(v) {
                 handleChange(v);
                 onClose();
-              } },
+              },
+              width: useBottomDrawer ? '100%' : 275,
+              allowClear: allowClear },
             validations, {
               type: type })
             ) }

package/dist/components/inputs/InputWrapper.js

@@ -65,8 +65,7 @@ export function InputWrapper(_ref)
     _jsxs(View, Object.assign({
       className: "neko-input-wrapper",
       height: multiline ? undefined : size,
-      minHeight: multiline ? size : undefined,
-      paddingV: multiline ? 'sm' : undefined,
+      minHeight: multiline ? 1.5 * size : undefined,
       onPress: handlePress,
       borderColor: borderColor,
       onMouseEnter: function onMouseEnter() {return setHover(true);},

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/TextInput.js

@@ -1,20 +1,21 @@
 var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/TextInput.js";var _excluded = ["onChange", "multiline", "rows"];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 { AbsTextInput } from "../../abstractions/TextInput";
 import { InputWrapper } from "./InputWrapper";
-import { useColors } from "../../theme/ThemeHandler";import { jsx as _jsx } from "react/jsx-runtime";
+import { useColors } from "../../theme/ThemeHandler";
+import { useSpaces } from "../../theme";import { jsx as _jsx } from "react/jsx-runtime";
 
 export function TextInput(_ref) {var onChange = _ref.onChange,multiline = _ref.multiline,rows = _ref.rows,props = _objectWithoutProperties(_ref, _excluded);
   var colors = useColors();
+  var spaces = useSpaces();
 
   var STYLE = Object.assign({
     width: '100%',
     borderWidth: 0,
     background: 'transparent',
     outline: 'none',
-    color: colors.text },
-
-
-
-  multiline ? { resize: 'none' } : { height: '100%' });
+    color: colors.text,
+    flex: 1,
+    height: '100%' },
+  multiline ? { paddingTop: spaces.sm, resize: 'none', flex: 1, textAlignVertical: 'top' } : {});
 
 
   return (

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

@@ -1,9 +1,11 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/datePicker/DayPicker.js";var _excluded = ["value", "onChange", "min", "max", "onCheckDisabled"];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';
+var _excluded = ["value", "onChange", "min", "max", "onCheckDisabled", "allowClear"];var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/datePicker/DayPicker.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 { CalendarNav } from "../../calendar/CalendarNav";
+import { ClearLink } from "../../actions/ClearLink";
 import { Col } from "../../structure/Col";
 import { Grid } from "../../structure/Row";
+import { InfiniteCarousel } from "../../carousel/InfiniteCarousel";
 import { Link } from "../../actions/Link";
 import { Text } from "../../text/Text";
 import { View } from "../../structure/View";
@@ -11,33 +13,29 @@ import { WeekDaysBar } from "../../calendar/WeekDaysBar";
 import { isDateDisabled } from "../../calendar/_helpers/dateDisabled";
 import { useCalendarDays } from "../../calendar/_helpers/calendarDays";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 
-export function DayPicker(_ref) {var _value2,_value3,_value4,_this = this;var value = _ref.value,onChange = _ref.onChange,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled,props = _objectWithoutProperties(_ref, _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];
-  value = value === undefined ? localValue : value;
+function toMonthValue(date) {
+  return date.year() * 12 + date.month();
+}
 
-  React.useEffect(function () {var _value;
-    setLocalValue(value);
-    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()]);
+function fromMonthValue(v) {
+  return dayjs().
+  year(Math.floor(v / 12)).
+  month(v % 12).
+  startOf('month');
+}
 
-  var handleChange = function handleChange(v) {
-    setLocalValue(v);
-    onChange == null ? void 0 : onChange(v);
-  };
-
-  var _useCalendarDays = useCalendarDays(currentMonth),cells = _useCalendarDays.cells;
+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 (
-    _jsxs(View, Object.assign({ className: "neko-day-picker", width: 275 }, props, { children: [
-      _jsx(CalendarNav, { value: currentMonth, onChange: setCurrentMonth }),
+    _jsxs(View, { children: [
       _jsx(WeekDaysBar, {}),
-
       _jsx(Grid, { className: "neko-day-picker-days", colSpan: 24 / 7, gap: "sm", children:
         cells.map(function (day, i) {
-          var dateVal = currentMonth.date(day);
-          var isActive = !!value && !!day && dateVal.isSame(value, 'day');
+          var dateVal = month.date(day);
+          var isActive = !!selectedValue && !!day && dateVal.isSame(selectedValue, 'day');
           var disabled = isDateDisabled(dateVal, { min: min, max: max, onCheckDisabled: onCheckDisabled });
 
           return (
@@ -47,7 +45,7 @@ export function DayPicker(_ref) {var _value2,_value3,_value4,_this = this;var va
                 fullW: true,
                 center: true,
                 br: "md",
-                onPress: function onPress() {return !!day && handleChange(dateVal);},
+                onPress: function onPress() {return !!day && onSelect(dateVal);},
                 bg: isActive && 'primary',
                 disabled: disabled, children:
 
@@ -58,7 +56,57 @@ export function DayPicker(_ref) {var _value2,_value3,_value4,_this = this;var va
             ));
 
         }) }
-      )] })
+      )] }
+    ));
+
+});
+
+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];
+  value = value === undefined ? localValue : value;
+
+  React.useEffect(function () {var _value;
+    setLocalValue(value);
+    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 = 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, {
+        monthValue: v,
+        selectedKey: selectedKey,
+        onSelect: handleChange,
+        min: min,
+        max: max,
+        onCheckDisabled: onCheckDisabled }
+      ));};
+
+
+  return (
+    _jsxs(View, Object.assign({ className: "neko-day-picker", width: 275, maxW: 350 }, props, { children: [
+      _jsx(CalendarNav, { value: currentMonth, onChange: setCurrentMonth }),
+      _jsx(InfiniteCarousel, {
+        value: monthValue,
+        onChange: function onChange(v) {return setCurrentMonth(fromMonthValue(v));},
+        renderSlide: renderSlide,
+        min: minMonth,
+        max: maxMonth }
+      ),
+      _jsx(ClearLink, { hide: !allowClear, value: value, onChange: onChange })] })
     ));
 
 }

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

@@ -1,10 +1,12 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/datePicker/MonthPicker.js";var _excluded = ["value", "onChange", "min", "max", "onCheckDisabled"];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';
+var _excluded = ["value", "onChange", "min", "max", "onCheckDisabled", "allowClear"];var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/datePicker/MonthPicker.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 { CalendarNav } from "../../calendar/CalendarNav";
+import { ClearLink } from "../../actions/ClearLink";
 import { Col } from "../../structure/Col";
 import { Divider } from "../../helpers";
 import { Grid } from "../../structure/Row";
+import { InfiniteCarousel } from "../../carousel/InfiniteCarousel";
 import { Link } from "../../actions/Link";
 import { Text } from "../../text/Text";
 import { View } from "../../structure/View";
@@ -12,7 +14,39 @@ import { isDateDisabled } from "../../calendar/_helpers/dateDisabled";import { j
 
 var months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 
-export function MonthPicker(_ref) {var _value2,_value3,_this = this;var value = _ref.value,onChange = _ref.onChange,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled,props = _objectWithoutProperties(_ref, _excluded);
+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, 'month');
+        var disabled = isDateDisabled(dateVal, { min: min, max: max, onCheckDisabled: onCheckDisabled });
+
+        return (
+          _jsx(Col, { children:
+            _jsx(Link, {
+              fullW: true,
+              br: "md",
+              padding: "sm",
+              onPress: function onPress() {return onSelect(dateVal);},
+              bg: isActive && 'primary',
+              disabled: disabled, children:
+
+              _jsx(Text, { text2: !isActive, strong: isActive, center: true, children:
+                dateVal.format('MMM') }
+              ) }
+            ) }, month
+          ));
+
+      }) }
+    ));
+
+});
+
+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;
@@ -22,41 +56,36 @@ export function MonthPicker(_ref) {var _value2,_value3,_this = 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, selectedKey: selectedKey, onSelect: handleChange, min: min, max: max, onCheckDisabled: onCheckDisabled }));};
+
 
   return (
     _jsxs(View, Object.assign({ className: "neko-day-picker", width: 275 }, props, { children: [
       _jsx(CalendarNav, { value: currentYear, onChange: setCurrentYear, level: "year" }),
       _jsx(Divider, {}),
-
-      _jsx(Grid, { colSpan: 8, gap: "xs", children:
-        months.map(function (month) {
-          var dateVal = currentYear.month(month);
-          var isActive = !!value && dateVal.isSame(value, 'week');
-          var disabled = isDateDisabled(dateVal, { min: min, max: max, onCheckDisabled: onCheckDisabled });
-
-          return (
-            _jsx(Col, { children:
-              _jsx(Link, {
-                fullW: true,
-                br: "md",
-                padding: "sm",
-                onPress: function onPress() {return handleChange(dateVal);},
-                bg: isActive && 'primary',
-                disabled: disabled, children:
-
-                _jsx(Text, { text2: !isActive, strong: isActive, center: true, children:
-                  dateVal.format('MMM') }
-                ) }
-              ) }, month
-            ));
-
-        }) }
-      )] })
+      _jsx(InfiniteCarousel, {
+        value: yearValue,
+        onChange: function onChange(v) {return setCurrentYear(dayjs().year(v).startOf('year'));},
+        renderSlide: renderSlide,
+        min: minYear,
+        max: maxYear }
+      ),
+      _jsx(ClearLink, { hide: !allowClear, value: value, onChange: onChange })] })
     ));
 
 }