@neko-os/ui 0.5.2 → 0.5.4

package/README.md

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

package/dist/abstractions/Image.native.js

@@ -1,7 +1,7 @@
 var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/abstractions/Image.native.js";var _excluded = ["src", "source", "resizeMode"];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 { Image as RNImage } from "react-native-web";import { jsx as _jsx } from "react/jsx-runtime";
 
 export function AbsImage(_ref) {var src = _ref.src,source = _ref.source,_ref$resizeMode = _ref.resizeMode,resizeMode = _ref$resizeMode === void 0 ? 'cover' : _ref$resizeMode,props = _objectWithoutProperties(_ref, _excluded);
-  if (!source && !!src) source = { uri: src };
+  if (!source && src != null) source = typeof src === 'string' ? { uri: src } : src;
 
   return _jsx(RNImage, Object.assign({ source: source, resizeMode: resizeMode }, props));
 }

package/dist/abstractions/Image.web.js

@@ -1,7 +1,7 @@
 var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/abstractions/Image.web.js";var _excluded = ["src", "source", "resizeMode"];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 { Image as RNImage } from "react-native-web";import { jsx as _jsx } from "react/jsx-runtime";
 
 export function AbsImage(_ref) {var src = _ref.src,source = _ref.source,_ref$resizeMode = _ref.resizeMode,resizeMode = _ref$resizeMode === void 0 ? 'cover' : _ref$resizeMode,props = _objectWithoutProperties(_ref, _excluded);
-  if (!source && !!src) source = { uri: src };
+  if (!source && src != null) source = typeof src === 'string' ? { uri: src } : src;
 
   return _jsx(RNImage, Object.assign({ source: source, resizeMode: resizeMode }, props));
 }

package/dist/components/form/FormItem.js

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

package/dist/components/form/useNewForm.js

@@ -1,4 +1,4 @@
-function asyncGeneratorStep(n, t, e, r, o, a, c) {try {var i = n[a](c),u = i.value;} catch (n) {return void e(n);}i.done ? t(u) : Promise.resolve(u).then(r, o);}function _asyncToGenerator(n) {return function () {var t = this,e = arguments;return new Promise(function (r, o) {var a = n.apply(t, e);function _next(n) {asyncGeneratorStep(a, r, o, _next, _throw, "next", n);}function _throw(n) {asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);}_next(void 0);});};}function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}import { assocPath, path } from 'ramda';
+function asyncGeneratorStep(n, t, e, r, o, a, c) {try {var i = n[a](c),u = i.value;} catch (n) {return void e(n);}i.done ? t(u) : Promise.resolve(u).then(r, o);}function _asyncToGenerator(n) {return function () {var t = this,e = arguments;return new Promise(function (r, o) {var a = n.apply(t, e);function _next(n) {asyncGeneratorStep(a, r, o, _next, _throw, "next", n);}function _throw(n) {asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);}_next(void 0);});};}function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _toConsumableArray(r) {return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();}function _nonIterableSpread() {throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _iterableToArray(r) {if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);}function _arrayWithoutHoles(r) {if (Array.isArray(r)) return _arrayLikeToArray(r);}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}import { assocPath, path } from 'ramda';
 import React from 'react';
 import { validateRules, validateAllFields, normalizeRules } from "./validation";
 
@@ -6,6 +6,8 @@ export function useNewForm() {var _ref = arguments.length > 0 && arguments[0] !=
   var valuesRef = React.useRef(Object.assign({}, initialValues));
   var initialValuesRef = React.useRef(Object.assign({}, initialValues));
   var errorsRef = React.useRef({});
+  var touchedRef = React.useRef(new Set());
+  var dirtyRef = React.useRef(new Set());
   var listenersRef = React.useRef({});
   var errorListenersRef = React.useRef({});
   var rulesRegistryRef = React.useRef(new Map());
@@ -45,8 +47,39 @@ export function useNewForm() {var _ref = arguments.length > 0 && arguments[0] !=
       });
     };
 
+    var markTouched = function markTouched(name) {
+      touchedRef.current.add(toKey(name));
+    };
+
+    var updateDirty = function updateDirty(name) {
+      var key = toKey(name);
+      var current = path(toPath(name), valuesRef.current);
+      var initial = path(toPath(name), initialValuesRef.current);
+      if (current === initial) {
+        dirtyRef.current.delete(key);
+      } else {
+        dirtyRef.current.add(key);
+      }
+    };
+
+    var isTouched = function isTouched(name) {
+      if (!name) return touchedRef.current.size > 0;
+      if (Array.isArray(name)) return name.some(function (n) {return touchedRef.current.has(toKey(n));});
+      return touchedRef.current.has(toKey(name));
+    };
+
+    var isDirty = function isDirty(name) {
+      if (!name) return dirtyRef.current.size > 0;
+      if (Array.isArray(name)) return name.some(function (n) {return dirtyRef.current.has(toKey(n));});
+      return dirtyRef.current.has(toKey(name));
+    };
+
+    var getTouchedFields = function getTouchedFields() {return _toConsumableArray(touchedRef.current);};
+    var getDirtyFields = function getDirtyFields() {return _toConsumableArray(dirtyRef.current);};
+
     var setFieldValue = function setFieldValue(name, value) {
       valuesRef.current = assocPath(toPath(name), value, valuesRef.current);
+      updateDirty(name);
       notify(name);
       var fn = callbacksRef.current.onValuesChange;
       if (fn) fn(name, valuesRef.current);
@@ -69,6 +102,8 @@ export function useNewForm() {var _ref = arguments.length > 0 && arguments[0] !=
     var resetFields = function resetFields() {
       valuesRef.current = Object.assign({}, initialValuesRef.current);
       errorsRef.current = {};
+      touchedRef.current.clear();
+      dirtyRef.current.clear();
       notifyAll();
       notifyAllErrors();
     };
@@ -196,6 +231,11 @@ export function useNewForm() {var _ref = arguments.length > 0 && arguments[0] !=
       getError: getError,
       setError: setError,
       clearErrors: clearErrors,
+      markTouched: markTouched,
+      isTouched: isTouched,
+      isDirty: isDirty,
+      getTouchedFields: getTouchedFields,
+      getDirtyFields: getDirtyFields,
       registerListener: registerListener,
       registerErrorListener: registerErrorListener,
       registerRules: registerRules,

package/dist/components/inputs/InputWrapper.js

@@ -1,4 +1,4 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/InputWrapper.js";var _excluded = ["prefix", "suffix", "prefixIcon", "prefixIconColor", "suffixIcon", "suffixIconColor", "loading", "error", "multiline", "children", "ref"];function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { pipe, is } from 'ramda';
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/inputs/InputWrapper.js";var _excluded = ["prefix", "suffix", "prefixIcon", "prefixIconColor", "suffixIcon", "suffixIconColor", "loading", "error", "multiline", "children", "ref"];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;}function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}import { pipe, is } from 'ramda';
 import React from 'react';
 
 import { Icon } from "../presentation/Icon";
@@ -9,16 +9,17 @@ import { useDefaultModifier } from "../../modifiers/default";
 import { useSizeConverter } from "../../modifiers/sizeConverter";
 import { useThemeComponentModifier } from "../../modifiers/themeComponent";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 
-var DEFAULT_PROPS = {
-  paddingH: 'sm',
-  bg: 'overlayBG',
-  border: true,
-  br: 'md',
-  row: true,
-  gap: 'sm'
-};
+var DEFAULT_PROPS = function DEFAULT_PROPS(_ref) {var _ref2 = _slicedToArray(_ref, 1),sizeCode = _ref2[0].sizeCode;return {
+    paddingH: 'sm',
+    bg: 'overlayBG',
+    border: true,
+    br: 'md',
+    row: true,
+    gap: 'sm',
+    br: sizeCode
+  };};
 
-export function InputWrapper(_ref)
+export function InputWrapper(_ref3)
 
 
 
@@ -31,7 +32,7 @@ export function InputWrapper(_ref)
 
 
 
-{var prefix = _ref.prefix,suffix = _ref.suffix,prefixIcon = _ref.prefixIcon,prefixIconColor = _ref.prefixIconColor,suffixIcon = _ref.suffixIcon,suffixIconColor = _ref.suffixIconColor,loading = _ref.loading,error = _ref.error,multiline = _ref.multiline,children = _ref.children,ref = _ref.ref,rootProps = _objectWithoutProperties(_ref, _excluded);
+{var prefix = _ref3.prefix,suffix = _ref3.suffix,prefixIcon = _ref3.prefixIcon,prefixIconColor = _ref3.prefixIconColor,suffixIcon = _ref3.suffixIcon,suffixIconColor = _ref3.suffixIconColor,loading = _ref3.loading,error = _ref3.error,multiline = _ref3.multiline,children = _ref3.children,ref = _ref3.ref,rootProps = _objectWithoutProperties(_ref3, _excluded);
   var _React$useState = React.useState(false),_React$useState2 = _slicedToArray(_React$useState, 2),hover = _React$useState2[0],setHover = _React$useState2[1];
   var fallbackInputRef = React.useRef();
   var inputRef = ref || fallbackInputRef;

package/dist/components/inputs/SegmentedPicker.js

@@ -18,8 +18,9 @@ var DEFAULT_PROPS = function DEFAULT_PROPS(_ref) {var _ref2 = _slicedToArray(_re
     row: true,
     border: true,
     buttonProps: {
-      fullH: true,
-      size: sizeCode
+      size: sizeCode,
+      height: null,
+      flex: true
     }
   };};
 

package/dist/components/presentation/Avatar.js

@@ -1,4 +1,4 @@
-var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/presentation/Avatar.js";var _excluded = ["initials", "name", "icon", "src", "invert", "textProps", "iconProps", "iconSize"];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;}function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}import { pipe } from 'ramda';
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/presentation/Avatar.js";var _excluded = ["initials", "name", "icon", "src", "invert", "textProps", "iconProps", "iconSize", "imageProps"];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;}function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}import { pipe } from 'ramda';
 
 import { AbsView } from "../../abstractions/View";
 import { IconLabel } from "./IconLabel";
@@ -54,7 +54,7 @@ export function Avatar(rootProps) {
       useOverflowModifier
     )([{}, rootProps]),_pipe2 = _slicedToArray(_pipe, 2),_pipe2$ = _pipe2[0],fontColor = _pipe2$.fontColor,sizeCode = _pipe2$.sizeCode,formattedProps = _pipe2[1];
 
-  var initials = formattedProps.initials,name = formattedProps.name,icon = formattedProps.icon,src = formattedProps.src,invert = formattedProps.invert,textProps = formattedProps.textProps,iconProps = formattedProps.iconProps,iconSize = formattedProps.iconSize,props = _objectWithoutProperties(formattedProps, _excluded);
+  var initials = formattedProps.initials,name = formattedProps.name,icon = formattedProps.icon,src = formattedProps.src,invert = formattedProps.invert,textProps = formattedProps.textProps,iconProps = formattedProps.iconProps,iconSize = formattedProps.iconSize,imageProps = formattedProps.imageProps,props = _objectWithoutProperties(formattedProps, _excluded);
   initials = initials || getInitials(name);
 
   var content =
@@ -69,7 +69,7 @@ export function Avatar(rootProps) {
     iconProps: Object.assign({ size: iconSize }, iconProps) }
   );
 
-  if (!!src) content = _jsx(Image, { br: 0, src: src, width: sizeCode, height: sizeCode });
+  if (!!src) content = _jsx(Image, Object.assign({ br: 0, src: src, width: sizeCode, height: sizeCode }, imageProps));
 
   return (
     _jsx(AbsView, Object.assign({ className: "neko-avatar" }, props, { children:

package/dist/modifiers/flex.js

@@ -1,11 +1,16 @@
-var _excluded = ["flex"];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;}function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}import { clearProps, flattenStyle } from "./_helpers";
+var _excluded = ["flex", "alignSelf", "selfStretch", "selfCenter", "selfStart", "selfEnd"];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;}function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}import { clearProps, flattenStyle } from "./_helpers";
 
 export function useFlexModifier(_ref) {var _ref2 = _slicedToArray(_ref, 2),values = _ref2[0],props = _ref2[1];
-  var flex = props.flex,restProps = _objectWithoutProperties(props, _excluded);
+  var flex = props.flex,alignSelf = props.alignSelf,selfStretch = props.selfStretch,selfCenter = props.selfCenter,selfStart = props.selfStart,selfEnd = props.selfEnd,restProps = _objectWithoutProperties(props, _excluded);
 
   if (flex === true) flex = 1;
 
-  var style = clearProps({ flex: flex, minWidth: 0 });
+  if (selfStretch) alignSelf = 'stretch';
+  if (selfCenter) alignSelf = 'center';
+  if (selfStart) alignSelf = 'flex-start';
+  if (selfEnd) alignSelf = 'flex-end';
+
+  var style = clearProps({ flex: flex, minWidth: 0, alignSelf: alignSelf });
 
   return [
   values, Object.assign({},

package/dist/theme/default/blackTheme.js

@@ -32,7 +32,9 @@ export var DEFAULT_BLACK_THEME = mergeDeepRight(BASE_THEME, {
     gray: '#8E8E93',
     brown: '#8B5E3C',
     lylac: '#C77DFF',
-    pink: '#FF6FAE'
+    pink: '#FF6FAE',
+    white: '#FFFFFF',
+    black: '#000000'
   }
 
 

package/dist/theme/default/cyberpunkTheme.js

@@ -31,6 +31,8 @@ export var CYBERPUNK_DARK_THEME = mergeDeepRight(BASE_THEME, {
     gray: '#8E8EAA',
     brown: '#8B5CF6',
     lylac: '#C77DFF',
-    pink: '#FF4FD8'
+    pink: '#FF4FD8',
+    white: '#FFFFFF',
+    black: '#000000'
   }
 });

package/dist/theme/default/darkTheme.js

@@ -30,6 +30,8 @@ export var DEFAULT_DARK_THEME = mergeDeepRight(BASE_THEME, {
     gray: '#9E9E9E',
     brown: '#8D6E63',
     lylac: '#B39DDB',
-    pink: '#F48FB1'
+    pink: '#F48FB1',
+    white: '#FFFFFF',
+    black: '#000000'
   }
 });

package/dist/theme/default/hackerTheme.js

@@ -38,7 +38,9 @@ export var DEFAULT_MATRIX_THEME = mergeDeepRight(BASE_THEME, {
     gray: '#2E2E2E',
     brown: '#5C4033',
     lylac: '#C084FC',
-    pink: '#FF4FD8'
+    pink: '#FF4FD8',
+    white: '#FFFFFF',
+    black: '#000000'
   },
 
   radius: {

package/dist/theme/default/lightTheme.js

@@ -30,6 +30,8 @@ export var DEFAULT_LIGHT_THEME = mergeDeepRight(BASE_THEME, {
     gray: '#B0BEC5',
     brown: '#8D6E63',
     lylac: '#B39DDB',
-    pink: '#F48FB1'
+    pink: '#F48FB1',
+    white: '#FFFFFF',
+    black: '#000000'
   }
 });

package/dist/theme/default/paperTheme.js

@@ -31,6 +31,8 @@ export var DEFAULT_PAPER_THEME = mergeDeepRight(BASE_THEME, {
     gray: '#B8B8B8',
     brown: '#8B7355',
     lylac: '#C7B7D4',
-    pink: '#E4A1B2'
+    pink: '#E4A1B2',
+    white: '#FFFFFF',
+    black: '#000000'
   }
 });

package/package.json

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

package/src/abstractions/Image.native.js

@@ -1,7 +1,7 @@
 import { Image as RNImage } from 'react-native'
 
 export function AbsImage({ src, source, resizeMode = 'cover', ...props }) {
-  if (!source && !!src) source = { uri: src }
+  if (!source && src != null) source = typeof src === 'string' ? { uri: src } : src
 
   return <RNImage source={source} resizeMode={resizeMode} {...props} />
 }

package/src/abstractions/Image.web.js

@@ -1,7 +1,7 @@
 import { Image as RNImage } from 'react-native'
 
 export function AbsImage({ src, source, resizeMode = 'cover', ...props }) {
-  if (!source && !!src) source = { uri: src }
+  if (!source && src != null) source = typeof src === 'string' ? { uri: src } : src
 
   return <RNImage source={source} resizeMode={resizeMode} {...props} />
 }

package/src/components/form/FormItem.js

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

package/src/components/form/useNewForm.js

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

package/src/components/inputs/InputWrapper.js

@@ -9,14 +9,15 @@ import { useDefaultModifier } from '../../modifiers/default'
 import { useSizeConverter } from '../../modifiers/sizeConverter'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
-const DEFAULT_PROPS = {
+const DEFAULT_PROPS = ([{ sizeCode }]) => ({
   paddingH: 'sm',
   bg: 'overlayBG',
   border: true,
   br: 'md',
   row: true,
   gap: 'sm',
-}
+  br: sizeCode,
+})
 
 export function InputWrapper({
   prefix,

package/src/components/inputs/SegmentedPicker.js

@@ -18,8 +18,9 @@ const DEFAULT_PROPS = ([{ sizeCode }]) => ({
   row: true,
   border: true,
   buttonProps: {
-    fullH: true,
     size: sizeCode,
+    height: null,
+    flex: true,
   },
 })
 

package/src/components/presentation/Avatar.js

@@ -54,7 +54,7 @@ export function Avatar(rootProps) {
     useOverflowModifier
   )([{}, rootProps])
 
-  let { initials, name, icon, src, invert, textProps, iconProps, iconSize, ...props } = formattedProps
+  let { initials, name, icon, src, invert, textProps, iconProps, iconSize, imageProps, ...props } = formattedProps
   initials = initials || getInitials(name)
 
   let content = (
@@ -69,7 +69,7 @@ export function Avatar(rootProps) {
       iconProps={{ size: iconSize, ...iconProps }}
     />
   )
-  if (!!src) content = <Image br={0} src={src} width={sizeCode} height={sizeCode} />
+  if (!!src) content = <Image br={0} src={src} width={sizeCode} height={sizeCode} {...imageProps} />
 
   return (
     <AbsView className="neko-avatar" {...props}>

package/src/modifiers/flex.js

@@ -1,11 +1,16 @@
 import { clearProps, flattenStyle } from './_helpers'
 
 export function useFlexModifier([values, props]) {
-  let { flex, ...restProps } = props
+  let { flex, alignSelf, selfStretch, selfCenter, selfStart, selfEnd, ...restProps } = props
 
   if (flex === true) flex = 1
 
-  const style = clearProps({ flex, minWidth: 0 })
+  if (selfStretch) alignSelf = 'stretch'
+  if (selfCenter) alignSelf = 'center'
+  if (selfStart) alignSelf = 'flex-start'
+  if (selfEnd) alignSelf = 'flex-end'
+
+  const style = clearProps({ flex, minWidth: 0, alignSelf })
 
   return [
     values,

package/src/theme/default/blackTheme.js

@@ -33,6 +33,8 @@ export const DEFAULT_BLACK_THEME = mergeDeepRight(BASE_THEME, {
     brown: '#8B5E3C',
     lylac: '#C77DFF',
     pink: '#FF6FAE',
+    white: '#FFFFFF',
+    black: '#000000',
   },
 
   // components: {

package/src/theme/default/cyberpunkTheme.js

@@ -32,5 +32,7 @@ export const CYBERPUNK_DARK_THEME = mergeDeepRight(BASE_THEME, {
     brown: '#8B5CF6',
     lylac: '#C77DFF',
     pink: '#FF4FD8',
+    white: '#FFFFFF',
+    black: '#000000',
   },
 })

package/src/theme/default/darkTheme.js

@@ -31,5 +31,7 @@ export const DEFAULT_DARK_THEME = mergeDeepRight(BASE_THEME, {
     brown: '#8D6E63',
     lylac: '#B39DDB',
     pink: '#F48FB1',
+    white: '#FFFFFF',
+    black: '#000000',
   },
 })

package/src/theme/default/hackerTheme.js

@@ -39,6 +39,8 @@ export const DEFAULT_MATRIX_THEME = mergeDeepRight(BASE_THEME, {
     brown: '#5C4033',
     lylac: '#C084FC',
     pink: '#FF4FD8',
+    white: '#FFFFFF',
+    black: '#000000',
   },
 
   radius: {

package/src/theme/default/lightTheme.js

@@ -31,5 +31,7 @@ export const DEFAULT_LIGHT_THEME = mergeDeepRight(BASE_THEME, {
     brown: '#8D6E63',
     lylac: '#B39DDB',
     pink: '#F48FB1',
+    white: '#FFFFFF',
+    black: '#000000',
   },
 })

package/src/theme/default/paperTheme.js

@@ -32,5 +32,7 @@ export const DEFAULT_PAPER_THEME = mergeDeepRight(BASE_THEME, {
     brown: '#8B7355',
     lylac: '#C7B7D4',
     pink: '#E4A1B2',
+    white: '#FFFFFF',
+    black: '#000000',
   },
 })