@neko-os/ui 0.2.3 → 0.4.0

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

@@ -1 +1,64 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/datePicker/DayPicker.js";var _excluded=["value","onChange","min","max","onCheckDisabled"];import React from'react';import dayjs from'dayjs';import{CalendarNav}from"../../calendar/CalendarNav";import{Col}from"../../structure/Col";import{Grid}from"../../structure/Row";import{Link}from"../../actions/Link";import{Text}from"../../text/Text";import{View}from"../../structure/View";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;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=function handleChange(v){setLocalValue(v);onChange==null?void 0:onChange(v);};var _useCalendarDays=useCalendarDays(currentMonth),cells=_useCalendarDays.cells;return _jsxs(View,Object.assign({className:"neko-day-picker",width:275},props,{children:[_jsx(CalendarNav,{value:currentMonth,onChange:setCurrentMonth}),_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 disabled=isDateDisabled(dateVal,{min:min,max:max,onCheckDisabled:onCheckDisabled});return _jsx(Col,{className:"day-cell",center:true,children:_jsx(Link,{ratio:1,fullW:true,center:true,br:"md",onPress:function onPress(){return!!day&&handleChange(dateVal);},bg:isActive&&'primary',disabled:disabled,children:_jsx(Text,{sm:true,text2:true,center:true,strong:isActive,children:day||''})})},day?dateVal.format('YYYYMMDD'):i);})})]}));}
+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';
+import dayjs from 'dayjs';
+
+import { CalendarNav } from "../../calendar/CalendarNav";
+import { Col } from "../../structure/Col";
+import { Grid } from "../../structure/Row";
+import { Link } from "../../actions/Link";
+import { Text } from "../../text/Text";
+import { View } from "../../structure/View";
+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;
+
+  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 = function handleChange(v) {
+    setLocalValue(v);
+    onChange == null ? void 0 : onChange(v);
+  };
+
+  var _useCalendarDays = useCalendarDays(currentMonth),cells = _useCalendarDays.cells;
+
+  return (
+    _jsxs(View, Object.assign({ className: "neko-day-picker", width: 275 }, props, { children: [
+      _jsx(CalendarNav, { value: currentMonth, onChange: setCurrentMonth }),
+      _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 disabled = isDateDisabled(dateVal, { min: min, max: max, onCheckDisabled: onCheckDisabled });
+
+          return (
+            _jsx(Col, { className: "day-cell", center: true, children:
+              _jsx(Link, {
+                ratio: 1,
+                fullW: true,
+                center: true,
+                br: "md",
+                onPress: function onPress() {return !!day && handleChange(dateVal);},
+                bg: isActive && 'primary',
+                disabled: disabled, children:
+
+                _jsx(Text, { sm: true, text2: true, center: true, strong: isActive, children:
+                  day || '' }
+                ) }
+              ) }, day ? dateVal.format('YYYYMMDD') : i
+            ));
+
+        }) }
+      )] })
+    ));
+
+}

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

@@ -1 +1,62 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/datePicker/MonthPicker.js";var _excluded=["value","onChange","min","max","onCheckDisabled"];import React from'react';import dayjs from'dayjs';import{CalendarNav}from"../../calendar/CalendarNav";import{Col}from"../../structure/Col";import{Divider}from"../../helpers";import{Grid}from"../../structure/Row";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";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 _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;React.useEffect(function(){var _value;setLocalValue(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);};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);})})]}));}
+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';
+import dayjs from 'dayjs';
+
+import { CalendarNav } from "../../calendar/CalendarNav";
+import { Col } from "../../structure/Col";
+import { Divider } from "../../helpers";
+import { Grid } from "../../structure/Row";
+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";
+
+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 _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;
+
+  React.useEffect(function () {var _value;
+    setLocalValue(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);
+  };
+
+  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
+            ));
+
+        }) }
+      )] })
+    ));
+
+}

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

@@ -1 +1,65 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/datePicker/QuarterPicker.js";var _excluded=["value","onChange","min","max","onCheckDisabled"];import React from'react';import dayjs from'dayjs';import quarterOfYear from'dayjs/esm/plugin/quarterOfYear';import{CalendarNav}from"../../calendar/CalendarNav";import{Col}from"../../structure/Col";import{Divider}from"../../helpers";import{Grid}from"../../structure/Row";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";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 _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;React.useEffect(function(){var _value;setLocalValue(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);};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);})})]}));}
+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';
+import dayjs from 'dayjs';
+import quarterOfYear from 'dayjs/esm/plugin/quarterOfYear';
+
+import { CalendarNav } from "../../calendar/CalendarNav";
+import { Col } from "../../structure/Col";
+import { Divider } from "../../helpers";
+import { Grid } from "../../structure/Row";
+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";
+
+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 _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;
+
+  React.useEffect(function () {var _value;
+    setLocalValue(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);
+  };
+
+  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
+            ));
+
+        }) }
+      )] })
+    ));
+
+}

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

@@ -1 +1,74 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/datePicker/WeekPicker.js";var _excluded=["value","onChange","min","max","onCheckDisabled"];import{splitEvery,identity}from'ramda';import React from'react';import dayjs from'dayjs';import{CalendarNav}from"../../calendar/CalendarNav";import{Col}from"../../structure/Col";import{Link}from"../../actions/Link";import{Row}from"../../structure/Row";import{Text}from"../../text/Text";import{View}from"../../structure/View";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()]);var handleChange=function handleChange(v){var newValue=v.startOf('week');setLocalValue(newValue);onChange==null?void 0:onChange(newValue);};var _useCalendarDays=useCalendarDays(currentMonth),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}),_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 disabled=isDateDisabled(dateVal,{min:min,max:max,onCheckDisabled:onCheckDisabled});return _jsx(Link,{fullW:true,br:"md",onPress:function onPress(){return!!firstDay&&handleChange(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);return _jsx(Col,{className:"day-cell",center:true,ratio:1,children:_jsx(Text,{sm:true,text2:true,center:true,strong:isActive,children:day||''})},day?dateVal.format('YYYYMMDD'):i);})})},firstDay?dateVal.format('YYYYMMDD'):wi);})})]}));}
+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';
+import React from 'react';
+import dayjs from 'dayjs';
+
+import { CalendarNav } from "../../calendar/CalendarNav";
+import { Col } from "../../structure/Col";
+import { Link } from "../../actions/Link";
+import { Row } from "../../structure/Row";
+import { Text } from "../../text/Text";
+import { View } from "../../structure/View";
+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()]);
+
+  var handleChange = function handleChange(v) {
+    var newValue = v.startOf('week');
+    setLocalValue(newValue);
+    onChange == null ? void 0 : onChange(newValue);
+  };
+
+  var _useCalendarDays = useCalendarDays(currentMonth),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 }),
+      _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 disabled = isDateDisabled(dateVal, { min: min, max: max, onCheckDisabled: onCheckDisabled });
+
+          return (
+            _jsx(Link, {
+
+              fullW: true,
+              br: "md",
+              onPress: function onPress() {return !!firstDay && handleChange(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);
+
+                  return (
+                    _jsx(Col, { className: "day-cell", center: true, ratio: 1, children:
+                      _jsx(Text, { sm: true, text2: true, center: true, strong: isActive, children:
+                        day || '' }
+                      ) }, day ? dateVal.format('YYYYMMDD') : i
+                    ));
+
+                }) }
+              ) }, firstDay ? dateVal.format('YYYYMMDD') : wi
+            ));
+
+        }) }
+      )] })
+    ));
+
+}

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

@@ -1 +1,70 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/datePicker/YearPicker.js";var _excluded=["value","onChange","min","max","onCheckDisabled"];import{range}from'ramda';import React from'react';import dayjs from'dayjs';import{CalendarNav}from"../../calendar/CalendarNav";import{Col}from"../../structure/Col";import{Divider}from"../../helpers";import{Grid}from"../../structure/Row";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');}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);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];value=value===undefined?localValue:value;React.useEffect(function(){var _value;setLocalValue(value);if((_value=value)!=null&&_value.isValid!=null&&_value.isValid())setCurrentDecade(getDecade(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 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(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);})})]}));}
+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';
+import React from 'react';
+import dayjs from 'dayjs';
+
+import { CalendarNav } from "../../calendar/CalendarNav";
+import { Col } from "../../structure/Col";
+import { Divider } from "../../helpers";
+import { Grid } from "../../structure/Row";
+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');
+}
+
+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);
+  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];
+
+  value = value === undefined ? localValue : value;
+
+  React.useEffect(function () {var _value;
+    setLocalValue(value);
+    if ((_value = value) != null && _value.isValid != null && _value.isValid()) setCurrentDecade(getDecade(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 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(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
+            ));
+
+        }) }
+      )] })
+    ));
+
+}

package/dist/components/inputs/index.js

@@ -1 +1,23 @@
-export*from"./Checkbox";export*from"./Radio";export*from"./Switch";export*from"./InputWrapper";export*from"./TextInput";export*from"./NumberInput";export*from"./LinkInput";export*from"./MaskInput";export*from"./DateInput";export*from"./datePicker/DatePicker";export*from"./Picker";export*from"./Select";export*from"./RateInput";export*from"./SegmentedPicker";
+export * from "./Checkbox";
+export * from "./Radio";
+export * from "./Switch";
+export * from "./InputWrapper";
+export * from "./TextInput";
+export * from "./PasswordInput";
+export * from "./TextArea";
+export * from "./NumberInput";
+export * from "./NumberRangeInput";
+export * from "./LinkInput";
+export * from "./MaskInput";
+export * from "./DateInput";
+export * from "./DateRangeInput";
+export * from "./datePicker/DatePicker";
+export * from "./Picker";
+export * from "./Select";
+export * from "./BooleanSelect";
+export * from "./EnabledSelect";
+export * from "./RateInput";
+export * from "./SegmentedPicker";
+export * from "./Editable";
+export * from "./upload/Upload";
+export * from "./UploadInput";

package/dist/components/inputs/upload/Upload.js

@@ -0,0 +1,99 @@
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/upload/Upload.js";var _excluded = ["children", "onChange", "onUpload", "value", "accept", "multiple", "maxCount", "disabled", "dnd"];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, { useRef, useState, useCallback } from 'react';
+
+import { View } from "../../structure/View";
+import { useUploadState } from "./useUploadState";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+function normalizeFile(file) {
+  return {
+    uri: URL.createObjectURL(file),
+    name: file.name,
+    type: file.type,
+    size: file.size,
+    file: file
+  };
+}
+
+export function Upload(_ref) {var children = _ref.children,onChange = _ref.onChange,onUpload = _ref.onUpload,valueProp = _ref.value,accept = _ref.accept,_ref$multiple = _ref.multiple,multiple = _ref$multiple === void 0 ? false : _ref$multiple,maxCount = _ref.maxCount,_ref$disabled = _ref.disabled,disabled = _ref$disabled === void 0 ? false : _ref$disabled,_ref$dnd = _ref.dnd,dnd = _ref$dnd === void 0 ? true : _ref$dnd,props = _objectWithoutProperties(_ref, _excluded);
+  var _useUploadState = useUploadState({ onUpload: onUpload, onChange: onChange, multiple: multiple, maxCount: maxCount, value: valueProp }),value = _useUploadState.value,addFiles = _useUploadState.addFiles,remove = _useUploadState.remove;
+  var inputRef = useRef();
+  var _useState = useState(false),_useState2 = _slicedToArray(_useState, 2),isDragging = _useState2[0],setIsDragging = _useState2[1];
+  var dragCounter = useRef(0);
+
+  var handleClick = useCallback(function () {var _inputRef$current;
+    if (disabled) return;
+    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.click();
+  }, [disabled]);
+
+  var handleInputChange = useCallback(
+    function (e) {
+      var files = e.target.files;
+      if (!(files != null && files.length)) return;
+      addFiles(Array.from(files).map(normalizeFile));
+      e.target.value = '';
+    },
+    [addFiles]
+  );
+
+  var handleDragEnter = useCallback(
+    function (e) {
+      if (!dnd || disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter.current++;
+      if (dragCounter.current === 1) setIsDragging(true);
+    },
+    [dnd, disabled]
+  );
+
+  var handleDragOver = useCallback(
+    function (e) {
+      if (!dnd || disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    [dnd, disabled]
+  );
+
+  var handleDragLeave = useCallback(
+    function (e) {
+      if (!dnd || disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter.current--;
+      if (dragCounter.current === 0) setIsDragging(false);
+    },
+    [dnd, disabled]
+  );
+
+  var handleDrop = useCallback(
+    function (e) {var _e$dataTransfer;
+      if (!dnd || disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter.current = 0;
+      setIsDragging(false);
+      var files = (_e$dataTransfer = e.dataTransfer) == null ? void 0 : _e$dataTransfer.files;
+      if (!(files != null && files.length)) return;
+      addFiles(Array.from(files).map(normalizeFile));
+    },
+    [dnd, disabled, addFiles]
+  );
+
+  var dndHandlers = dnd ?
+  {
+    onDragEnter: handleDragEnter,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDrop: handleDrop
+  } :
+  {};
+
+  var isRenderFn = typeof children === 'function';
+
+  return (
+    _jsxs(View, Object.assign({ onPress: !isRenderFn && !disabled ? handleClick : undefined, pointer: !isRenderFn && !disabled }, dndHandlers, props, { children: [
+      isRenderFn ? children({ value: value, remove: remove, isDragging: isDragging, open: handleClick }) : children,
+      _jsx("input", { ref: inputRef, type: "file", style: { display: 'none' }, accept: accept, multiple: multiple, onChange: handleInputChange })] })
+    ));
+
+}