@neko-os/ui 0.4.0 → 0.5.1

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

@@ -1,21 +1,55 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/datePicker/QuarterPicker.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/QuarterPicker.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 { 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";
-import { isDateDisabled } from "../../calendar/_helpers/dateDisabled";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isDateDisabled } from "../../calendar/_helpers/dateDisabled";import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 
 dayjs.extend(quarterOfYear);
 
 var quarters = [1, 2, 3, 4];
 
-export function QuarterPicker(_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 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, 'quarter');
+        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:
+
+              _jsxs(Text, { text2: !isActive, strong: isActive, center: true, children: ["Q",
+                dateVal.quarter()] }
+              ) }
+            ) }, quarter
+          ));
+
+      }) }
+    ));
+
+});
+
+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;
@@ -25,41 +59,36 @@ export function QuarterPicker(_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.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, 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: 6, gap: "xs", children:
-        quarters.map(function (quarter) {
-          var dateVal = currentYear.quarter(quarter);
-          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:
-
-                _jsxs(Text, { text2: !isActive, strong: isActive, center: true, children: ["Q",
-                  dateVal.quarter()] }
-                ) }
-              ) }, quarter
-            ));
-
-        }) }
-      )] })
+      _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 })] })
     ));
 
 }

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

@@ -1,9 +1,11 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/datePicker/WeekPicker.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 { splitEvery, identity } from 'ramda';
+var _excluded = ["value", "onChange", "min", "max", "onCheckDisabled", "allowClear"];var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/datePicker/WeekPicker.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 { splitEvery, identity } from 'ramda';
 import React from 'react';
 import dayjs from 'dayjs';
 
 import { CalendarNav } from "../../calendar/CalendarNav";
+import { ClearLink } from "../../actions/ClearLink";
 import { Col } from "../../structure/Col";
+import { InfiniteCarousel } from "../../carousel/InfiniteCarousel";
 import { Link } from "../../actions/Link";
 import { Row } from "../../structure/Row";
 import { Text } from "../../text/Text";
@@ -12,35 +14,31 @@ 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 WeekPicker(_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);
-  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()]);
+function toMonthValue(date) {
+  return date.year() * 12 + date.month();
+}
 
-  var handleChange = function handleChange(v) {
-    var newValue = v.startOf('week');
-    setLocalValue(newValue);
-    onChange == null ? void 0 : onChange(newValue);
-  };
+function fromMonthValue(v) {
+  return dayjs().
+  year(Math.floor(v / 12)).
+  month(v % 12).
+  startOf('month');
+}
 
-  var _useCalendarDays = useCalendarDays(currentMonth),cells = _useCalendarDays.cells;
+var MonthWeeks = React.memo(function MonthWeeks(_ref) {var _this = this;var monthValue = _ref.monthValue,selectedKey = _ref.selectedKey,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
+  var month = fromMonthValue(monthValue);
+  var selectedValue = selectedKey ? dayjs(selectedKey) : null;
+  var _useCalendarDays = useCalendarDays(month),cells = _useCalendarDays.cells;
   var weeks = splitEvery(7, cells);
 
   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(View, { colSpan: 24 / 7, gap: "sm", children:
         weeks.map(function (week, wi) {
           var firstDay = week.find(identity);
-          var dateVal = currentMonth.date(firstDay);
-          var isActive = !!value && !!firstDay && dateVal.isSame(value, 'week');
+          var dateVal = month.date(firstDay);
+          var isActive = !!selectedValue && !!firstDay && dateVal.isSame(selectedValue, 'week');
           var disabled = isDateDisabled(dateVal, { min: min, max: max, onCheckDisabled: onCheckDisabled });
 
           return (
@@ -48,13 +46,13 @@ export function WeekPicker(_ref) {var _value2,_value3,_value4,_this = this;var v
 
               fullW: true,
               br: "md",
-              onPress: function onPress() {return !!firstDay && handleChange(dateVal);},
+              onPress: function onPress() {return !!firstDay && onSelect(dateVal);},
               bg: isActive && 'primary',
               disabled: disabled, children:
 
               _jsx(Row, { colSpan: 24 / 7, gap: "sm", children:
                 week.map(function (day, i) {
-                  var dateVal = currentMonth.date(day);
+                  var dateVal = month.date(day);
 
                   return (
                     _jsx(Col, { className: "day-cell", center: true, ratio: 1, children:
@@ -68,7 +66,50 @@ export function WeekPicker(_ref) {var _value2,_value3,_value4,_this = this;var v
             ));
 
         }) }
-      )] })
+      )] }
+    ));
+
+});
+
+export function WeekPicker(_ref2) {var _value2,_value3,_value4,_value5,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
+  var _React$useState = React.useState(value),_React$useState2 = _slicedToArray(_React$useState, 2),localValue = _React$useState2[0],setLocalValue = _React$useState2[1];
+  var _React$useState3 = React.useState(function () {return dayjs(value || undefined).startOf('month');}),_React$useState4 = _slicedToArray(_React$useState3, 2),currentMonth = _React$useState4[0],setCurrentMonth = _React$useState4[1];
+  value = value === undefined ? localValue : value;
+
+  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) {
+      var newValue = v.startOf('week');
+      setLocalValue(newValue);
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [onChange]
+  );
+
+  var monthValue = toMonthValue(currentMonth);
+  var minMonth = min ? toMonthValue(dayjs(min).startOf('month')) : undefined;
+  var maxMonth = max ? toMonthValue(dayjs(max).startOf('month')) : undefined;
+  var selectedKey = (_value5 = value) == null ? void 0 : _value5.valueOf == null ? void 0 : _value5.valueOf();
+
+  var renderSlide = function renderSlide(v) {return (
+      _jsx(MonthWeeks, { monthValue: 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: 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/YearPicker.js

@@ -1,70 +1,99 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/datePicker/YearPicker.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 { range } from 'ramda';
+var _excluded = ["value", "onChange", "min", "max", "onCheckDisabled", "allowClear"];var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/datePicker/YearPicker.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 { range } from 'ramda';
 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";
 import { isDateDisabled } from "../../calendar/_helpers/dateDisabled";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 
-function getDecade(value) {
-  var year = dayjs(value || undefined).year();
-  var decadeStartYear = Math.floor(year / 10) * 10;
-  return dayjs().year(decadeStartYear).startOf('year');
+function getDecadeIndex(value) {
+  return Math.floor(dayjs(value || undefined).year() / 10);
 }
 
-export function YearPicker(_ref) {var _value2,_this = this;var value = _ref.value,onChange = _ref.onChange,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled,props = _objectWithoutProperties(_ref, _excluded);
+function decadeFromIndex(i) {
+  return dayjs().year(i * 10).startOf('year');
+}
+
+var DecadeGrid = React.memo(function DecadeGrid(_ref) {var _this = this;var decadeIndex = _ref.decadeIndex,selectedKey = _ref.selectedKey,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
+  var decadeStart = decadeFromIndex(decadeIndex);
+  var selectedValue = selectedKey ? dayjs(selectedKey) : null;
+  var years = range(decadeStart.year(), decadeStart.year() + 10);
+
+  return (
+    _jsx(Grid, { colSpan: 12, gap: "xs", children:
+      years.map(function (year) {
+        var dateVal = decadeStart.year(year);
+        var isActive = !!selectedValue && dateVal.isSame(selectedValue, 'year');
+        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.year() }
+              ) }
+            ) }, year
+          ));
+
+      }) }
+    ));
+
+});
+
+export function YearPicker(_ref2) {var _value2,_value3,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
   var _React$useState = React.useState(value),_React$useState2 = _slicedToArray(_React$useState, 2),localValue = _React$useState2[0],setLocalValue = _React$useState2[1];
-  var _React$useState3 = React.useState(function () {return getDecade(value);}),_React$useState4 = _slicedToArray(_React$useState3, 2),currentDecade = _React$useState4[0],setCurrentDecade = _React$useState4[1];
+  var _React$useState3 = React.useState(function () {return getDecadeIndex(value);}),_React$useState4 = _slicedToArray(_React$useState3, 2),currentDecade = _React$useState4[0],setCurrentDecade = _React$useState4[1];
 
   value = value === undefined ? localValue : value;
 
   React.useEffect(function () {var _value;
     setLocalValue(value);
-    if ((_value = value) != null && _value.isValid != null && _value.isValid()) setCurrentDecade(getDecade(value));
+    if ((_value = value) != null && _value.isValid != null && _value.isValid()) setCurrentDecade(getDecadeIndex(value));
   }, [(_value2 = value) == null ? void 0 : _value2.year == null ? void 0 : _value2.year()]);
 
-  var handleChange = function handleChange(v) {
-    var newValue = v.startOf('year');
-    setLocalValue(newValue);
-    onChange == null ? void 0 : onChange(newValue);
-  };
+  var handleChange = React.useCallback(
+    function (v) {
+      var newValue = v.startOf('year');
+      setLocalValue(newValue);
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [onChange]
+  );
+
+  var minDecade = min ? getDecadeIndex(min) : undefined;
+  var maxDecade = max ? getDecadeIndex(max) : undefined;
+  var selectedKey = (_value3 = value) == null ? void 0 : _value3.valueOf == null ? void 0 : _value3.valueOf();
+
+  var renderSlide = function renderSlide(v) {return (
+      _jsx(DecadeGrid, { decadeIndex: v, selectedKey: selectedKey, onSelect: handleChange, min: min, max: max, onCheckDisabled: onCheckDisabled }));};
 
-  var years = range(currentDecade.year(), currentDecade.year() + 10);
 
   return (
     _jsxs(View, Object.assign({ className: "neko-day-picker", width: 275 }, props, { children: [
-      _jsx(CalendarNav, { value: currentDecade, onChange: setCurrentDecade, level: "decade" }),
+      _jsx(CalendarNav, { value: decadeFromIndex(currentDecade), onChange: function onChange(v) {return setCurrentDecade(getDecadeIndex(v));}, level: "decade" }),
       _jsx(Divider, {}),
-
-      _jsx(Grid, { colSpan: 12, gap: "xs", children:
-        years.map(function (year) {
-          var dateVal = currentDecade.year(year);
-          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.year() }
-                ) }
-              ) }, year
-            ));
-
-        }) }
-      )] })
+      _jsx(InfiniteCarousel, {
+        value: currentDecade,
+        onChange: setCurrentDecade,
+        renderSlide: renderSlide,
+        min: minDecade,
+        max: maxDecade }
+      ),
+      _jsx(ClearLink, { hide: !allowClear, value: value, onChange: onChange })] })
     ));
 
 }

package/dist/components/keyboard/KeyboardDismissButton.js

@@ -0,0 +1,3 @@
+export function KeyboardDismissButton() {
+  return false;
+}

package/dist/components/keyboard/KeyboardDismissButton.native.js

@@ -0,0 +1,38 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/keyboard/KeyboardDismissButton.native.js";import { Keyboard } from "react-native-web";
+import Animated, { useAnimatedKeyboard, useAnimatedStyle, KeyboardState, withTiming } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Button } from "../actions";import { jsx as _jsx } from "react/jsx-runtime";
+
+var STATIC_STYLE = { position: 'absolute', right: 5, zIndex: 1000 };
+
+export function KeyboardDismissButton() {
+  var keyboard = useAnimatedKeyboard();
+  var _useSafeAreaInsets = useSafeAreaInsets(),bottomInset = _useSafeAreaInsets.bottom;
+
+  var animatedStyle = useAnimatedStyle(function () {
+    var isVisible = keyboard.height.value > 0;
+    return {
+      bottom: keyboard.height.value - bottomInset + 10,
+      opacity: keyboard.state.value === KeyboardState.CLOSING ? withTiming(0, { duration: 150 }) : isVisible ? 1 : 0,
+      pointerEvents: isVisible ? 'auto' : 'none'
+    };
+  });
+
+  return (
+    _jsx(Animated.View, { style: [STATIC_STYLE, animatedStyle], children:
+      _jsx(Button, {
+        icon: "arrow-down-box-line",
+        onPress: Keyboard.dismiss,
+        ratio: 1,
+        shadow: true,
+        overlayBG: true,
+        sm: true,
+        opacity: 0.85,
+        iconProps: { size: 'md' },
+        border: true,
+        borderColor: "divider" }
+      ) }
+    ));
+
+}

package/dist/components/keyboard/index.js

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

package/dist/components/modals/bottomDrawer/native/BottomDrawer.js

@@ -1,9 +1,11 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/modals/bottomDrawer/native/BottomDrawer.js";var _excluded = ["children", "render", "setRender", "open", "onClose", "snapPoints", "useSafeArea", "enableOverScroll", "enableHandlePanningGesture", "enableContentPanningGesture", "animationConfig", "hideHandle", "contentProps"],_excluded2 = ["open"];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;}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 { GestureDetector, Gesture, GestureHandlerRootView } from 'react-native-gesture-handler';
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/modals/bottomDrawer/native/BottomDrawer.js";var _excluded = ["children", "render", "setRender", "open", "onClose", "snapPoints", "useSafeArea", "enableOverScroll", "enableHandlePanningGesture", "enableContentPanningGesture", "keyboardBehavior", "animationConfig", "hideHandle", "contentProps"],_excluded2 = ["open"];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;}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 { GestureDetector, Gesture, GestureHandlerRootView } from 'react-native-gesture-handler';
 import { Modal, Dimensions, StyleSheet, BackHandler, Platform } from "react-native-web";
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
+  useAnimatedKeyboard,
+  KeyboardState,
   withSpring,
   runOnJS } from
 'react-native-reanimated';
@@ -38,12 +40,14 @@ function InnerContent(_ref)
 
 
 
-{var children = _ref.children,render = _ref.render,setRender = _ref.setRender,open = _ref.open,onClose = _ref.onClose,_ref$snapPoints = _ref.snapPoints,snapPoints = _ref$snapPoints === void 0 ? ['50%'] : _ref$snapPoints,_ref$useSafeArea = _ref.useSafeArea,useSafeArea = _ref$useSafeArea === void 0 ? true : _ref$useSafeArea,_ref$enableOverScroll = _ref.enableOverScroll,enableOverScroll = _ref$enableOverScroll === void 0 ? true : _ref$enableOverScroll,_ref$enableHandlePann = _ref.enableHandlePanningGesture,enableHandlePanningGesture = _ref$enableHandlePann === void 0 ? true : _ref$enableHandlePann,_ref$enableContentPan = _ref.enableContentPanningGesture,enableContentPanningGesture = _ref$enableContentPan === void 0 ? true : _ref$enableContentPan,_ref$animationConfig = _ref.animationConfig,animationConfig = _ref$animationConfig === void 0 ? { damping: 50, stiffness: 500, mass: 0.3, overshootClamping: true, restDisplacementThreshold: 10, restSpeedThreshold: 10 } : _ref$animationConfig,hideHandle = _ref.hideHandle,contentProps = _ref.contentProps,props = _objectWithoutProperties(_ref, _excluded);
+
+{var children = _ref.children,render = _ref.render,setRender = _ref.setRender,open = _ref.open,onClose = _ref.onClose,_ref$snapPoints = _ref.snapPoints,snapPoints = _ref$snapPoints === void 0 ? ['50%'] : _ref$snapPoints,_ref$useSafeArea = _ref.useSafeArea,useSafeArea = _ref$useSafeArea === void 0 ? true : _ref$useSafeArea,_ref$enableOverScroll = _ref.enableOverScroll,enableOverScroll = _ref$enableOverScroll === void 0 ? true : _ref$enableOverScroll,_ref$enableHandlePann = _ref.enableHandlePanningGesture,enableHandlePanningGesture = _ref$enableHandlePann === void 0 ? true : _ref$enableHandlePann,_ref$enableContentPan = _ref.enableContentPanningGesture,enableContentPanningGesture = _ref$enableContentPan === void 0 ? true : _ref$enableContentPan,_ref$keyboardBehavior = _ref.keyboardBehavior,keyboardBehavior = _ref$keyboardBehavior === void 0 ? 'interactive' : _ref$keyboardBehavior,_ref$animationConfig = _ref.animationConfig,animationConfig = _ref$animationConfig === void 0 ? { damping: 50, stiffness: 500, mass: 0.3, overshootClamping: true, restDisplacementThreshold: 10, restSpeedThreshold: 10 } : _ref$animationConfig,hideHandle = _ref.hideHandle,contentProps = _ref.contentProps,props = _objectWithoutProperties(_ref, _excluded);
   var _Dimensions$get = Dimensions.get('window'),SCREEN_HEIGHT = _Dimensions$get.height;
   var insets = useSafeAreaInsets();
   var bottomInset = useSafeArea ? insets.bottom : 0;
 
   var colors = useColors();
+  var keyboard = useAnimatedKeyboard();
 
   var translateY = useSharedValue(SCREEN_HEIGHT);
   var snapIndex = useSharedValue(0);
@@ -122,12 +126,10 @@ function InnerContent(_ref)
       var currentPosition = SCREEN_HEIGHT - translateY.value;
       var shouldClose =
       !!handleClose && (
-
       velocityY.value > 1500 ||
       velocityY.value > 800 && currentPosition < minSnapPoint ||
       currentPosition < minSnapPoint * 0.35);
 
-
       if (shouldClose) {
         runOnJS(handleClose)();
       } else {
@@ -148,10 +150,28 @@ function InnerContent(_ref)
   handleClose]
   );
 
+  var topInset = insets.top;
   var animatedSheetStyle = useAnimatedStyle(function () {
-    var currentHeight = SCREEN_HEIGHT - translateY.value;
+    var kbShift = 0;
+
+    var kbVisible = keyboard.state.value === KeyboardState.OPEN || keyboard.state.value === KeyboardState.OPENING;
+    if (keyboardBehavior !== 'none' && kbVisible) {
+      var kbHeight = keyboard.height.value;
+
+      if (keyboardBehavior === 'interactive') {
+
+        var maxShift = Math.max(0, translateY.value - topInset);
+        kbShift = Math.min(kbHeight, maxShift);
+      } else if (keyboardBehavior === 'extend') {
+
+        kbShift = Math.max(0, translateY.value - topInset);
+      }
+    }
+
+    var adjustedY = translateY.value - kbShift;
+    var currentHeight = SCREEN_HEIGHT - adjustedY;
     return {
-      transform: [{ translateY: translateY.value }],
+      transform: [{ translateY: adjustedY }],
       maxHeight: currentHeight
     };
   });
@@ -199,7 +219,8 @@ function InnerContent(_ref)
               marginL: "auto",
               marginR: "auto",
               fullW: true },
-            props, { children: [
+            props, {
+              minH: minSnapPoint, children: [
 
               _jsx(DrawerHandle, { hide: hideHandle }),
               _jsx(View, Object.assign({ flex: true }, contentProps, { children:

package/dist/components/presentation/LabelValue.js

@@ -18,7 +18,7 @@ var DEFAULT_PROPS = function DEFAULT_PROPS(_ref) {var _ref2 = _slicedToArray(_re
     labelProps: {
       size: moveScale(sizeCode, !vertical ? 0 : -2),
       moveIconSizeScale: !vertical ? -1 : -2,
-      color: color || 'text3'
+      color: color || 'text2'
     },
     valueProps: {
       size: sizeCode,

package/dist/components/presentation/Result.js

@@ -1,7 +1,8 @@
 var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/presentation/Result.js";var _excluded = ["type", "icon", "iconColor", "title", "description", "footer", "titleProps", "descriptionProps", "textProps", "iconProps"];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 { Divider } from "../helpers/Separator";
 import { Icon } from "./Icon";
 import { Text } from "../text/Text";
-import { View } from "../structure/View";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from "../structure/View";
+import { useResponsiveValue } from "../../responsive";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 
 export var RESULT_TYPES = {
   error: {
@@ -22,6 +23,12 @@ export var RESULT_TYPES = {
   info: {
     icon: 'information-2-fill',
     color: 'blue'
+  },
+
+  empty: {
+    icon: 'inbox-line',
+    color: 'text4',
+    opacity: 0.7
   }
 };
 
@@ -41,12 +48,13 @@ export function Result(_ref)
   var typeProps = RESULT_TYPES[type] || {};
   icon = icon || typeProps.icon;
   iconColor = iconColor || typeProps.color || 'primary';
+  var size = useResponsiveValue({ lgu: 'h4', df: 'h5' });
 
   return (
-    _jsxs(View, Object.assign({ className: "neko-result", center: true, padding: "lg" }, props, { children: [
+    _jsxs(View, Object.assign({ className: "neko-result", center: true, padding: "lg", opacity: typeProps.opacity }, props, { children: [
       !!icon && _jsx(Icon, Object.assign({ name: icon, color: iconColor, size: 42, primary: true }, iconProps)),
       !!icon && _jsx(Divider, { height: 10 }),
-      _jsx(Text, Object.assign({ h4: true, center: true }, textProps, titleProps, { children:
+      _jsx(Text, Object.assign({ size: size, center: true, color: "text2" }, textProps, titleProps, { children:
         title })
       ),
       !!description &&