@neko-os/ui 0.0.13 → 0.1.0

package/dist/components/structure/index.js

@@ -1 +1 @@
-export*from"./Accordion";export*from"./AccordionGroup";export*from"./View";export*from"./GradientView";export*from"./BlurView";export*from"./SafeAreaView";export*from"./Card";export*from"./Row";export*from"./Col";export*from"./modal";export*from"./drawer";export*from"./bottomDrawer";export*from"./popover/Popover";export*from"./Segment";
+export*from"./Accordion";export*from"./AccordionGroup";export*from"./View";export*from"./GradientView";export*from"./BlurView";export*from"./SafeAreaView";export*from"./Card";export*from"./Row";export*from"./Col";export*from"./modal";export*from"./drawer";export*from"./bottomDrawer";export*from"./popover/Popover";export*from"./Segment";export*from"./TopBar";export*from"./KeyboardAvoidingView";

package/dist/components/text/DateText.js

@@ -0,0 +1 @@
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/text/DateText.js";var _excluded=["format","value","children"];import{is}from'ramda';import dayjs from'dayjs';import{Text}from"../text";import{jsx as _jsx}from"react/jsx-runtime";export function DateText(_ref){var _ref$format=_ref.format,format=_ref$format===void 0?'DD MMM YYYY':_ref$format,value=_ref.value,children=_ref.children,props=_objectWithoutProperties(_ref,_excluded);value=is(String,children)?children:value;return _jsx(Text,Object.assign({},props,{children:dayjs(value).format(format)}));}

package/dist/components/text/index.js

@@ -1 +1 @@
-export*from"./Text";export*from"./VerticalText";
+export*from"./Text";export*from"./VerticalText";export*from"./DateText";

package/dist/components/theme/ThemePicker.js

@@ -1 +1 @@
-var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/theme/ThemePicker.js";import{mapObjIndexed,mergeDeepRight,values,pipe,filter}from'ramda';import{DEFAULT_THEMES,useThemeHandler}from"../../theme";import{IconLabel}from"../presentation";import{Link}from"../actions";import{Picker}from"../inputs";import{ThemeThumb}from"./ThemeThumb";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function ThemePicker(_ref){var _this=this;var _onChange=_ref.onChange,onlyKeys=_ref.onlyKeys,hideKeys=_ref.hideKeys;var _useThemeHandler=useThemeHandler(),activeThemeKey=_useThemeHandler.activeThemeKey,setActiveThemeKey=_useThemeHandler.setActiveThemeKey,themes=_useThemeHandler.themes,onChangeTheme=_useThemeHandler.onChangeTheme;var options=pipe(mergeDeepRight(DEFAULT_THEMES),mapObjIndexed(function(obj,key){return Object.assign({},obj,{value:key,key:key});}),values,filter(function(item){if(item.value==='_all')return false;if(onlyKeys&&onlyKeys.includes(item.value))return true;if(hideKeys&&hideKeys.includes(item.value))return false;return true;}))(themes);return _jsx(Picker,{colSpan:12,gap:"lg",value:activeThemeKey,onChange:function onChange(key){setActiveThemeKey(key);onChangeTheme==null?void 0:onChangeTheme(key);_onChange==null?void 0:_onChange(key);},options:options,renderOption:function renderOption(_ref2){var option=_ref2.option,selected=_ref2.selected,onChange=_ref2.onChange;return _jsxs(Link,{onPress:onChange,gap:"xs",children:[_jsx(ThemeThumb,{value:option.value}),_jsx(IconLabel,{center:true,label:option.label,icon:selected&&'checkbox-circle-fill',color:selected?'primary':'text3',strong:true})]});}});}
+var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/theme/ThemePicker.js";import{mapObjIndexed,mergeDeepRight,values,pipe,filter}from'ramda';import{DEFAULT_THEMES,useThemeHandler}from"../../theme";import{IconLabel}from"../presentation";import{Link}from"../actions";import{Picker}from"../inputs";import{ThemeThumb}from"./ThemeThumb";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function ThemePicker(_ref){var _this=this;var _onChange=_ref.onChange,onlyKeys=_ref.onlyKeys,hideKeys=_ref.hideKeys;var _useThemeHandler=useThemeHandler(),activeThemeKey=_useThemeHandler.activeThemeKey,themes=_useThemeHandler.themes,onChangeTheme=_useThemeHandler.onChangeTheme;var options=pipe(mergeDeepRight(DEFAULT_THEMES),mapObjIndexed(function(obj,key){return Object.assign({},obj,{value:key,key:key});}),values,filter(function(item){if(item.value==='_all')return false;if(onlyKeys&&onlyKeys.includes(item.value))return true;if(hideKeys&&hideKeys.includes(item.value))return false;return true;}))(themes);return _jsx(Picker,{colSpan:12,gap:"lg",value:activeThemeKey,onChange:function onChange(key){onChangeTheme==null?void 0:onChangeTheme(key);_onChange==null?void 0:_onChange(key);},options:options,renderOption:function renderOption(_ref2){var option=_ref2.option,selected=_ref2.selected,onChange=_ref2.onChange;return _jsxs(Link,{onPress:onChange,gap:"xs",children:[_jsx(ThemeThumb,{value:option.value}),_jsx(IconLabel,{center:true,label:option.label,icon:selected&&'checkbox-circle-fill',color:selected?'primary':'text3',strong:true})]});}});}

package/dist/helpers/index.js

@@ -1 +1 @@
-export*from"./debounce";export*from"./string";export*from"./random";export*from"./storage";
+export*from"./debounce";export*from"./string";export*from"./random";export*from"./storage";export*from"./../abstractions/helpers/useSafeAreaInsets";

package/dist/helpers/storage.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import React from'react';import{AbsStorage}from"../abstractions/helpers/storage";function set(key,value){return AbsStorage.set(key,JSON.stringify(value));}function setAsync(key,value){return AbsStorage.setAsync(key,JSON.stringify(value));}function get(key){var value=AbsStorage.get(key);return formatStoragedValue(value);}function getAsync(key){return AbsStorage.setAsync(key).then(function(value){return formatStoragedValue(value);});}function formatStoragedValue(value){try{if(!value)return value;value=JSON.parse(value);if(value==='undefined')return undefined;if(value==='null')return undefined;return value;}catch(e){return value;}}function useState(key,defaultValue){var _React$useState=React.useState(get(key)||defaultValue),_React$useState2=_slicedToArray(_React$useState,2),value=_React$useState2[0],setValue=_React$useState2[1];var handleChange=function handleChange(newValue){set(key,newValue);setValue(newValue);};return[value,handleChange];}export var Storage=Object.assign({},AbsStorage,{set:set,setAsync:setAsync,get:get,getAsync:getAsync,useState:useState});
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import React from'react';import{AbsStorage}from"../abstractions/helpers/storage";var listeners={};function notify(key,value){if(listeners[key]){listeners[key].forEach(function(cb){return cb(value);});}}function subscribe(key,cb){if(!listeners[key])listeners[key]=[];listeners[key].push(cb);return function(){listeners[key]=listeners[key].filter(function(fn){return fn!==cb;});};}function set(key,value){AbsStorage.set(key,JSON.stringify(value));notify(key,value);}function setAsync(key,value){return AbsStorage.setAsync(key,JSON.stringify(value)).then(function(){notify(key,value);});}function get(key,defaultValue){var _formatStoragedValue;var value=AbsStorage.get(key);return(_formatStoragedValue=formatStoragedValue(value))!=null?_formatStoragedValue:defaultValue;}function getAsync(key,defaultValue){return AbsStorage.getAsync(key).then(function(value){var _formatStoragedValue2;return(_formatStoragedValue2=formatStoragedValue(value))!=null?_formatStoragedValue2:defaultValue;});}function formatStoragedValue(value){try{if(!value)return value;value=JSON.parse(value);if(value==='undefined')return undefined;if(value==='null')return undefined;return value;}catch(e){return value;}}function useState(key,defaultValue){var _React$useState=React.useState(function(){var _get;return(_get=get(key))!=null?_get:defaultValue;}),_React$useState2=_slicedToArray(_React$useState,2),value=_React$useState2[0],setValue=_React$useState2[1];React.useEffect(function(){return subscribe(key,setValue);},[key]);var handleChange=function handleChange(newValue){set(key,newValue);};return[value,handleChange];}export var Storage=Object.assign({},AbsStorage,{set:set,setAsync:setAsync,get:get,getAsync:getAsync,useState:useState});

package/dist/responsive/responsiveHooks.js

@@ -1 +1 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import{is}from'ramda';import React from'react';import{Platform}from"../abstractions/Platform";import{useBreakpoints}from"../theme/ThemeHandler";import{useResponsive}from"../responsive/ResponsiveHandler";export function useGetResponsiveValue(){var breakpoints=useBreakpoints();var _useResponsive=useResponsive(),width=_useResponsive.width,screen=_useResponsive.screen;return React.useCallback(function(value){var isNative=(value==null?void 0:value.native)!==undefined&&Platform.OS!=='web';if(isNative)return value==null?void 0:value.native;var isWeb=(value==null?void 0:value.web)!==undefined&&Platform.OS==='web';if(isWeb)return value==null?void 0:value.web;var isObj=is(Object,value);if(!isObj)return value;if(value[screen])return value[screen];var keys=Object.keys(value);var _loop=function _loop(){var match=k.match(/^(\w+)([du])$/);if(!match)return 0;var bpName=match[1];var mode=match[2];var bpIndex=breakpoints.findIndex(function(b){return b.name===bpName;});if(bpIndex===-1)return 0;if(mode==='u'){var lowerBound=bpIndex>0?breakpoints[bpIndex-1].value:0;if(width>=lowerBound)return{v:value[k]};}if(mode==='d'){if(width<breakpoints[bpIndex].value)return{v:value[k]};}},_ret;for(var k of keys){_ret=_loop();if(_ret===0)continue;if(_ret)return _ret.v;}return value==null?void 0:value.df;},[screen]);}export function useResponsiveValue(value){var getValue=useGetResponsiveValue();var isObj=is(Object,value);var valueWatch=isObj?Object.keys(value).map(function(k){return`${k}:${value[k]}`;}):[value];return React.useMemo(function(){return getValue(value);},[getValue].concat(_toConsumableArray(valueWatch)));}
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import{is}from'ramda';import React from'react';import{Platform}from"../abstractions/Platform";import{useBreakpoints}from"../theme/ThemeHandler";import{useResponsive}from"../responsive/ResponsiveHandler";export function useGetResponsiveValue(){var breakpoints=useBreakpoints();var _useResponsive=useResponsive(),width=_useResponsive.width,screen=_useResponsive.screen;return React.useCallback(function(value){var isNative=(value==null?void 0:value.native)!==undefined&&Platform.OS!=='web';if(isNative)return value==null?void 0:value.native;var isWeb=(value==null?void 0:value.web)!==undefined&&Platform.OS==='web';if(isWeb)return value==null?void 0:value.web;var isIOS=(value==null?void 0:value.ios)!==undefined&&Platform.OS==='ios';if(isIOS)return value==null?void 0:value.ios;var isAndroid=(value==null?void 0:value.android)!==undefined&&Platform.OS==='android';if(isAndroid)return value==null?void 0:value.android;var isObj=is(Object,value);if(!isObj)return value;if(value[screen])return value[screen];var keys=Object.keys(value);var _loop=function _loop(){var match=k.match(/^(\w+)([du])$/);if(!match)return 0;var bpName=match[1];var mode=match[2];var bpIndex=breakpoints.findIndex(function(b){return b.name===bpName;});if(bpIndex===-1)return 0;if(mode==='u'){var lowerBound=bpIndex>0?breakpoints[bpIndex-1].value:0;if(width>=lowerBound)return{v:value[k]};}if(mode==='d'){if(width<breakpoints[bpIndex].value)return{v:value[k]};}},_ret;for(var k of keys){_ret=_loop();if(_ret===0)continue;if(_ret)return _ret.v;}return value==null?void 0:value.df;},[screen]);}export function useResponsiveValue(value){var getValue=useGetResponsiveValue();var isObj=is(Object,value);var valueWatch=isObj?Object.keys(value).map(function(k){return`${k}:${value[k]}`;}):[value];return React.useMemo(function(){return getValue(value);},[getValue].concat(_toConsumableArray(valueWatch)));}

package/dist/theme/ThemeHandler.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/theme/ThemeHandler.js";import{mergeDeepRight}from'ramda';import React from'react';import{DEFAULT_LIGHT_THEME}from"./default/lightTheme";import{getThemeValue}from"./helpers/relatedScales";import{useFormattedTheme}from"./format/formatTheme";import{jsx as _jsx}from"react/jsx-runtime";var DEFAULT_BREAKPOINTS=[{name:'sm',value:768},{name:'md',value:1024},{name:'lg',value:1440},{name:'xl',value:10000}];var ThemeContext=React.createContext(null);export var useThemeHandler=function useThemeHandler(){return React.useContext(ThemeContext)||{};};export var useBreakpoints=function useBreakpoints(){var _useThemeHandler;return((_useThemeHandler=useThemeHandler())==null?void 0:_useThemeHandler.breakpoints)||DEFAULT_BREAKPOINTS;};export var useTheme=function useTheme(groupKey){var theme=useThemeHandler().theme||DEFAULT_LIGHT_THEME;if(!groupKey)return theme;return(theme==null?void 0:theme[groupKey])||{};};export var useGetThemeValue=function useGetThemeValue(groupKey){var group=useTheme(groupKey);return function(key){return getThemeValue(group,key);};};export var useColors=function useColors(){return useTheme('colors');};export var useGetColor=function useGetColor(){return useGetThemeValue('colors');};export var useSpaces=function useSpaces(){return useTheme('spaces');};export var useGetSpace=function useGetSpace(){return useGetThemeValue('spaces');};export var useRadius=function useRadius(){return useTheme('radius');};export var useGetRadius=function useGetRadius(){return useGetThemeValue('radius');};export var useElementHeights=function useElementHeights(){return useTheme('elementHeights');};export var useGetElementHeight=function useGetElementHeight(){return useGetThemeValue('elementHeights');};export var useTexts=function useTexts(){return useTheme('texts');};export var useGetText=function useGetText(){return useGetThemeValue('text');};export var useThemeComponents=function useThemeComponents(){return useTheme('components');};export function useThemeComponent(name){var components=useThemeComponents();return components[name]||{};}export function useMergeThemeComponent(name,props){var themeProps=useThemeComponent(name);return mergeDeepRight(themeProps,props);}export function ThemeHandler(_ref){var breakpoints=_ref.breakpoints,themes=_ref.themes,initTheme=_ref.initTheme,onChangeTheme=_ref.onChangeTheme,children=_ref.children;var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),themePickerOpen=_React$useState2[0],setThemePickerOpen=_React$useState2[1];var openThemePicker=function openThemePicker(){return setThemePickerOpen(true);};var _React$useState3=React.useState(initTheme||'light'),_React$useState4=_slicedToArray(_React$useState3,2),activeThemeKey=_React$useState4[0],setActiveThemeKey=_React$useState4[1];var toggleTheme=function toggleTheme(){return setActiveThemeKey(activeThemeKey==='light'?'dark':'light');};var theme=useFormattedTheme(themes,activeThemeKey);var value={theme:theme,themes:themes,activeThemeKey:activeThemeKey,setActiveThemeKey:setActiveThemeKey,toggleTheme:toggleTheme,themePickerOpen:themePickerOpen,setThemePickerOpen:setThemePickerOpen,onChangeTheme:onChangeTheme,openThemePicker:openThemePicker,toggleTheme:toggleTheme,breakpoints:breakpoints||DEFAULT_BREAKPOINTS};return _jsx(ThemeContext.Provider,{value:value,children:children});}
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/theme/ThemeHandler.js";import{mergeDeepRight}from'ramda';import React from'react';import{DEFAULT_LIGHT_THEME}from"./default/lightTheme";import{getThemeValue}from"./helpers/relatedScales";import{useFormattedTheme}from"./format/formatTheme";import{jsx as _jsx}from"react/jsx-runtime";var DEFAULT_BREAKPOINTS=[{name:'sm',value:768},{name:'md',value:1024},{name:'lg',value:1440},{name:'xl',value:10000}];var ThemeContext=React.createContext(null);export var useThemeHandler=function useThemeHandler(){return React.useContext(ThemeContext)||{};};export var useBreakpoints=function useBreakpoints(){var _useThemeHandler;return((_useThemeHandler=useThemeHandler())==null?void 0:_useThemeHandler.breakpoints)||DEFAULT_BREAKPOINTS;};export var useTheme=function useTheme(groupKey){var theme=useThemeHandler().theme||DEFAULT_LIGHT_THEME;if(!groupKey)return theme;return(theme==null?void 0:theme[groupKey])||{};};export var useGetThemeValue=function useGetThemeValue(groupKey){var group=useTheme(groupKey);return function(key){return getThemeValue(group,key);};};export var useColors=function useColors(){return useTheme('colors');};export var useGetColor=function useGetColor(){return useGetThemeValue('colors');};export var useSpaces=function useSpaces(){return useTheme('spaces');};export var useGetSpace=function useGetSpace(){return useGetThemeValue('spaces');};export var useRadius=function useRadius(){return useTheme('radius');};export var useGetRadius=function useGetRadius(){return useGetThemeValue('radius');};export var useElementHeights=function useElementHeights(){return useTheme('elementHeights');};export var useGetElementHeight=function useGetElementHeight(){return useGetThemeValue('elementHeights');};export var useTexts=function useTexts(){return useTheme('texts');};export var useGetText=function useGetText(){return useGetThemeValue('text');};export var useThemeComponents=function useThemeComponents(){return useTheme('components');};export function useThemeComponent(name){var components=useThemeComponents();return components[name]||{};}export function useMergeThemeComponent(name,props){var themeProps=useThemeComponent(name);return mergeDeepRight(themeProps,props);}export function ThemeHandler(_ref){var breakpoints=_ref.breakpoints,themes=_ref.themes,initTheme=_ref.initTheme,onChangeTheme=_ref.onChangeTheme,children=_ref.children;var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),themePickerOpen=_React$useState2[0],setThemePickerOpen=_React$useState2[1];var openThemePicker=function openThemePicker(){return setThemePickerOpen(true);};var _React$useState3=React.useState(initTheme||'light'),_React$useState4=_slicedToArray(_React$useState3,2),activeThemeKey=_React$useState4[0],setActiveThemeKey=_React$useState4[1];var handleChangeTheme=function handleChangeTheme(key){setActiveThemeKey(key);onChangeTheme==null?void 0:onChangeTheme(key);};var toggleTheme=function toggleTheme(){return handleChangeTheme(activeThemeKey==='light'?'dark':'light');};var theme=useFormattedTheme(themes,activeThemeKey);var value={theme:theme,themes:themes,activeThemeKey:activeThemeKey,toggleTheme:toggleTheme,themePickerOpen:themePickerOpen,setThemePickerOpen:setThemePickerOpen,onChangeTheme:handleChangeTheme,openThemePicker:openThemePicker,toggleTheme:toggleTheme,breakpoints:breakpoints||DEFAULT_BREAKPOINTS};return _jsx(ThemeContext.Provider,{value:value,children:children});}

package/dist/theme/default/base.js

@@ -1 +1 @@
-export var BASE_THEME={spaces:{xxxs:1,xxs:3,xs:5,sm:10,md:15,lg:20,xl:30,xxl:40,xxxl:50},radius:{xxxs:4,xxs:5,xs:5,sm:7,md:8,lg:10,xl:12,xxl:15,xxxl:18},icons:{xxxs:10,xxs:12,xs:14,sm:16,md:18,lg:22,xl:26,xxl:28,xxxl:32},elementHeights:{xxxs:10,xxs:15,xs:20,sm:30,md:35,lg:40,xl:50,xxl:60,xxxl:70},texts:{h1:{fontSize:35,strong:true},h2:{fontSize:28,strong:true},h3:{fontSize:26,strong:true},h4:{fontSize:22,strong:true},h5:{fontSize:18,strong:true},h6:{fontSize:16,strong:true},p:{fontSize:14},sm:{fontSize:12},xs:{fontSize:10},xxs:{fontSize:8}}};
+export var BASE_THEME={spaces:{xxxs:1,xxs:3,xs:5,sm:10,md:15,lg:20,xl:30,xxl:40,xxxl:50},radius:{xxxs:4,xxs:5,xs:5,sm:7,md:8,lg:10,xl:12,xxl:15,xxxl:18},icons:{xxxs:10,xxs:12,xs:14,sm:16,md:18,lg:22,xl:26,xxl:28,xxxl:32},elementHeights:{xxxs:10,xxs:15,xs:25,sm:35,md:40,lg:45,xl:50,xxl:60,xxxl:70},texts:{h1:{fontSize:35,strong:true},h2:{fontSize:28,strong:true},h3:{fontSize:26,strong:true},h4:{fontSize:22,strong:true},h5:{fontSize:18,strong:true},h6:{fontSize:16,strong:true},p:{fontSize:14},sm:{fontSize:12},xs:{fontSize:10},xxs:{fontSize:8}}};

package/dist/theme/default/blackTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_BLACK_THEME=mergeDeepRight(BASE_THEME,{label:'Pitch Black',colors:{primary:'#818DF9',text:'#FFFFFF',text2:'#E0E0E0',text3:'#B0B0B0',text4:'#8A8A8A',mainBG:'#0f0f0f',overlayBG:'#000000',backdrop:'#1f1f1f',shadow:'rgba(216, 210, 203, 0.1)',divider:'#383E44',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#9E9E9E',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_BLACK_THEME=mergeDeepRight(BASE_THEME,{label:'Pitch Black',colors:{primary:'#818DF9',text:'#FFFFFF',text2:'#E0E0E0',text3:'#B0B0B0',text4:'#8A8A8A',mainBG:'#0f0f0f',overlayBG:'#000000',backdrop:'#1f1f1f',shadow:'rgba(216, 210, 203, 0.1)',transparent:'rgba(0, 0, 0, 0)',divider:'#383E44',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#9E9E9E',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});

package/dist/theme/default/cyberpunkTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var CYBERPUNK_DARK_THEME=mergeDeepRight(BASE_THEME,{label:'Cyberpunk',colors:{primary:'#FCEE09',text:'#FFFFFF',text2:'#B3B3B3',text3:'#8C8C8C',text4:'#666666',mainBG:'#14141F',overlayBG:'#14141F',backdrop:'#0A0A0F',shadow:'rgba(39, 45, 52, 0.6)',divider:'rgba(255,255,255, 0.2)',blue:'#00E5FF',yellow:'#FFD600',green:'#00FF9D',purple:'#D500F9',orange:'#FF9100',cyan:'#00B8D4',red:'#FF1744',navy:'#1E2A38',indigo:'#651FFF',gray:'#757575',brown:'#6D4C41',lylac:'#B388FF',pink:'#FF80AB'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var CYBERPUNK_DARK_THEME=mergeDeepRight(BASE_THEME,{label:'Cyberpunk',colors:{primary:'#FCEE09',text:'#FFFFFF',text2:'#B3B3B3',text3:'#8C8C8C',text4:'#666666',mainBG:'#14141F',overlayBG:'#14141F',backdrop:'#0A0A0F',shadow:'rgba(39, 45, 52, 0.6)',divider:'rgba(255,255,255, 0.2)',blue:'#00E5FF',yellow:'#FFD600',green:'#00FF9D',purple:'#D500F9',orange:'#FF9100',cyan:'#00B8D4',red:'#FF1744',navy:'#1E2A38',indigo:'#651FFF',gray:'#757575',brown:'#6D4C41',lylac:'#B388FF',pink:'#FF80AB'},components:{Card:{border:true},Section:{border:true}}});

package/dist/theme/default/darkTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_DARK_THEME=mergeDeepRight(BASE_THEME,{label:'Dark',colors:{primary:'#818DF9',text:'#FFFFFF',text2:'#E0E0E0',text3:'#B0B0B0',text4:'#8A8A8A',mainBG:'#383E44',overlayBG:'#272D34',backdrop:'#383E44',shadow:'rgba(216, 210, 203, 0.1)',divider:'#383E44',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#9E9E9E',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_DARK_THEME=mergeDeepRight(BASE_THEME,{label:'Dark',colors:{primary:'#818DF9',text:'#FFFFFF',text2:'#E0E0E0',text3:'#B0B0B0',text4:'#8A8A8A',mainBG:'#383E44',overlayBG:'#272D34',backdrop:'#383E44',shadow:'rgba(216, 210, 203, 0.1)',transparent:'rgba(0, 0, 0, 0)',divider:'#383E44',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#9E9E9E',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});

package/dist/theme/default/hackerTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_MATRIX_THEME=mergeDeepRight(BASE_THEME,{label:'Hacker',colors:{primary:'#00FF41',text:'#00FF41',text2:'#00CC33',text3:'#009926',text4:'#00661A',mainBG:'#000000',overlayBG:'#0A0A0A',backdrop:'#000000',shadow:'rgba(0, 255, 65, 0.2)',divider:'rgba(0,255,65, 0.3)',blue:'#0087BD',yellow:'#AEBF00',green:'#00FF41',purple:'#7A1FA2',orange:'#FF6D00',cyan:'#00BFA5',red:'#D50000',navy:'#003366',indigo:'#303F9F',gray:'#4A4A4A',brown:'#5D4037',lylac:'#8E24AA',pink:'#C51162'},components:{Card:{border:1,br:5,borderColor:'divider'}}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_MATRIX_THEME=mergeDeepRight(BASE_THEME,{label:'Hacker',colors:{primary:'#00FF41',text:'#00FF41',text2:'#00CC33',text3:'#009926',text4:'#00661A',mainBG:'#000000',overlayBG:'#0A0A0A',backdrop:'#000000',shadow:'rgba(0, 255, 65, 0.2)',divider:'rgba(0,255,65, 0.3)',blue:'#0087BD',yellow:'#AEBF00',green:'#00FF41',purple:'#7A1FA2',orange:'#FF6D00',cyan:'#00BFA5',red:'#D50000',navy:'#003366',indigo:'#303F9F',gray:'#4A4A4A',brown:'#5D4037',lylac:'#8E24AA',pink:'#C51162'},radius:{xxxs:0,xxs:1,xs:2,sm:3,md:4,lg:5,xl:6,xxl:7,xxxl:8},components:{Card:{border:true},Section:{border:true}}});

package/dist/theme/default/lightTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_LIGHT_THEME=mergeDeepRight(BASE_THEME,{label:'Light',colors:{primary:'#818DF9',text:'#272D34',text2:'#4A5159',text3:'#6E7680',text4:'#9AA1AC',mainBG:'#F4F5FE',overlayBG:'#FFFFFF',backdrop:'#383E44',shadow:'rgba(39, 45, 52, 0.15)',divider:'#e0e0e0',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#B0BEC5',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_LIGHT_THEME=mergeDeepRight(BASE_THEME,{label:'Light',colors:{primary:'#818DF9',text:'#272D34',text2:'#4A5159',text3:'#6E7680',text4:'#9AA1AC',mainBG:'#F4F5FE',overlayBG:'#FFFFFF',backdrop:'#383E44',shadow:'rgba(39, 45, 52, 0.15)',transparent:'rgba(255, 255, 255, 0)',divider:'#e0e0e0',blue:'#4DA3FF',yellow:'#FFD93B',green:'#4CAF50',purple:'#9B59B6',orange:'#FF7F50',cyan:'#00BCD4',red:'#E74C3C',navy:'#34495E',indigo:'#5C6BC0',gray:'#B0BEC5',brown:'#8D6E63',lylac:'#B39DDB',pink:'#F48FB1'}});

package/dist/theme/default/msdosTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_MSDOS_THEME=mergeDeepRight(BASE_THEME,{label:'MSDOS',colors:{primary:'#FFFF00',text:'#FFFFFF',text2:'#E0E0E0',text3:'#B0B0B0',text4:'#8A8A8A',mainBG:'#0000AA',overlayBG:'#000088',backdrop:'#0000AA',shadow:'rgba(0, 0, 0, 0.6)',divider:'rgba(255,255,255,0.3)',blue:'#0000FF',yellow:'#FFFF00',green:'#00FF00',purple:'#AA00FF',orange:'#FF7700',cyan:'#00FFFF',red:'#FF0000',navy:'#000080',indigo:'#4B0082',gray:'#B0B0B0',brown:'#8B4513',lylac:'#9370DB',pink:'#FF69B4'},radius:{xxxs:1,xxs:2,xs:3,sm:4,md:6,lg:8,xl:10,xxl:12,xxxl:14},components:{Card:{border:1,br:5,borderColor:'divider'}}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_MSDOS_THEME=mergeDeepRight(BASE_THEME,{label:'MSDOS',colors:{primary:'#FFFF00',text:'#FFFFFF',text2:'#E0E0E0',text3:'#B0B0B0',text4:'#8A8A8A',mainBG:'#0000AA',overlayBG:'#000088',backdrop:'#0000AA',shadow:'rgba(0, 0, 0, 0.6)',divider:'rgba(255,255,255,0.3)',blue:'#0000FF',yellow:'#FFFF00',green:'#00FF00',purple:'#AA00FF',orange:'#FF7700',cyan:'#00FFFF',red:'#FF0000',navy:'#000080',indigo:'#4B0082',gray:'#B0B0B0',brown:'#8B4513',lylac:'#9370DB',pink:'#FF69B4'},radius:{xxxs:0,xxs:1,xs:2,sm:3,md:4,lg:5,xl:6,xxl:7,xxxl:8},components:{Card:{border:1,borderColor:'divider'}}});

package/dist/theme/default/paperTheme.js

@@ -1 +1 @@
-import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_PAPER_THEME=mergeDeepRight(BASE_THEME,{label:'Paper',colors:{primary:'#5A5A5A',text:'#000000',text2:'#333333',text3:'#555555',text4:'#777777',mainBG:'#F8F1E3',overlayBG:'#F8F1E3',backdrop:'#383E44',shadow:'rgba(0, 0, 0, 0.04)',divider:'#E3D9C9',blue:'#6B8EAE',yellow:'#EADCA6',green:'#88A288',purple:'#A391B8',orange:'#D9A066',cyan:'#9CC9C2',red:'#B85C5C',navy:'#4A4A4A',indigo:'#70788C',gray:'#B8B8B8',brown:'#8B7355',lylac:'#C7B7D4',pink:'#E4A1B2'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_PAPER_THEME=mergeDeepRight(BASE_THEME,{label:'Paper',colors:{primary:'#5A5A5A',text:'#000000',text2:'#333333',text3:'#555555',text4:'#777777',mainBG:'#F8F1E3',overlayBG:'#F8F1E3',backdrop:'#383E44',shadow:'rgba(0, 0, 0, 0.04)',divider:'#E3D9C9',blue:'#6B8EAE',yellow:'#EADCA6',green:'#88A288',purple:'#A391B8',orange:'#D9A066',cyan:'#9CC9C2',red:'#B85C5C',navy:'#4A4A4A',indigo:'#70788C',gray:'#B8B8B8',brown:'#8B7355',lylac:'#C7B7D4',pink:'#E4A1B2'},components:{Card:{border:true},Section:{border:true}}});

package/package.json

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

package/src/abstractions/KeyboardAvoidingView.js

@@ -0,0 +1,3 @@
+import { AbsView } from './View'
+
+export const AbsKeyboardAvoidingView = AbsView

package/src/abstractions/KeyboardAvoidingView.native.js

@@ -0,0 +1,3 @@
+import { KeyboardAvoidingView } from 'react-native'
+
+export const AbsKeyboardAvoidingView = KeyboardAvoidingView

package/src/components/actions/ActionsDrawer.js

@@ -0,0 +1,68 @@
+import { pipe } from 'ramda'
+
+import { BottomDrawer, TopBar, View } from '../structure'
+import { DrawerScrollView } from '../structure/bottomDrawer'
+import { Menu } from './menu/Menu'
+import { Section } from '../sections'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  useSafeArea: false,
+  bg: 'mainBG',
+  topBarProps: {
+    useSafeArea: false,
+  },
+  menuProps: {
+    vertical: true,
+    linkPaddingH: 'md',
+    linkMinHeight: 'xl',
+    withDivider: true,
+  },
+}
+
+function Content({ items, title, subtitle, onClose, onChange, topBarProps, menuProps }) {
+  const handleChange = (...params) => {
+    onChange?.(...params)
+    onClose()
+  }
+
+  return (
+    <>
+      <TopBar title={title} subtitle={subtitle} {...topBarProps} />
+
+      <View flex>
+        <DrawerScrollView>
+          {!title && <View paddingT="md" />}
+          <Section>
+            <Menu items={items} onChange={handleChange} {...menuProps} />
+          </Section>
+          <View height={100} />
+        </DrawerScrollView>
+      </View>
+    </>
+  )
+}
+
+export function ActionsDrawer({ items, onChange, title, subtitle, onClose, ...rootProps }) {
+  const [{}, formattedProps] = pipe(
+    useThemeComponentModifier('ActionsDrawer'), //
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  const { topBarProps, menuProps, ...props } = formattedProps
+
+  return (
+    <BottomDrawer onClose={onClose} {...props}>
+      <Content
+        onClose={onClose}
+        topBarProps={topBarProps}
+        menuProps={menuProps}
+        title={title}
+        subtitle={subtitle}
+        onChange={onChange}
+        items={items}
+      />
+    </BottomDrawer>
+  )
+}

package/src/components/actions/Button.js

@@ -54,7 +54,7 @@ export function Button({ children, ...rootProps }) {
     useBorderModifier
   )([{}, rootProps])
 
-  const { label, icon, textProps, iconProps, gap, invert, size, ...props } = formattedProps
+  const { label, icon, textProps, iconProps, gap, invert, size, iconLabelProps, ...props } = formattedProps
 
   return (
     <AbsTouchableOpacity className="neko-button neko-wave-click-effect" type="button" {...props}>
@@ -70,6 +70,7 @@ export function Button({ children, ...rootProps }) {
           textProps={{ strong: true, ...textProps }}
           iconProps={iconProps}
           loading={loading}
+          {...iconLabelProps}
         />
       )}
     </AbsTouchableOpacity>

package/src/components/actions/FloatingMenu.js

@@ -0,0 +1,39 @@
+import { Icon } from '../presentation'
+import { Link } from './Link'
+import { Text } from '../text'
+import { View } from '../structure'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
+
+export function FloatingMenu({ fixed, onChange, items, activeIndex, size = 'md', WrapperView, ...props }) {
+  const insets = useSafeAreaInsets()
+  const height = moveScale(size, 2)
+
+  const bg = !WrapperView ? 'overlayBG' : null
+  WrapperView = WrapperView || View
+
+  return (
+    <View absolute={!fixed} fixed={fixed} left="md" right="md" centerH bottom={Math.max(insets.bottom, 16)}>
+      <WrapperView height={height} shadow round row paddingH="sm" bg={bg} {...props}>
+        {items.map((item, index) => {
+          const isActive = index === activeIndex
+
+          return (
+            <Link key={index} onPress={() => onChange(item, index)} center padding="xs" gap={3} width={height} round>
+              <Icon
+                name={isActive ? item.icon?.replace(/line(?=[^line]*$)/, 'fill') : item.icon}
+                size={height}
+                color={isActive ? 'primary' : 'text3'}
+              />
+              {!!item.label && (
+                <Text size="xxs" center color={isActive ? 'primary' : 'text3'} strong>
+                  {item.label}
+                </Text>
+              )}
+            </Link>
+          )
+        })}
+      </WrapperView>
+    </View>
+  )
+}

package/src/components/actions/index.js

@@ -5,3 +5,5 @@ export * from './Pressable'
 export * from './Dropdown'
 export * from './Breadcrumb'
 export * from './menu/Menu'
+export * from './FloatingMenu'
+export * from './ActionsDrawer'

package/src/components/animations/AnimatedTopBar.js

@@ -0,0 +1,10 @@
+import { AnimatedView } from './AnimatedView'
+import { TopBar } from '../structure'
+
+export function AnimatedTopBar(props) {
+  return (
+    <AnimatedView style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 90 }} fade>
+      <TopBar {...props} />
+    </AnimatedView>
+  )
+}

package/src/components/animations/AnimatedTopBar.native.js

@@ -0,0 +1,34 @@
+import Animated, { useAnimatedStyle, useSharedValue, useAnimatedReaction, withTiming } from 'react-native-reanimated'
+
+import { TopBar } from '../structure'
+import { useReanimatedScroll } from './ReanimatedScrollHandler'
+import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
+
+export function AnimatedTopBar({ showAfter = 90, duration = 300, fade = true, slide, ...props }) {
+  const { scrollY } = useReanimatedScroll()
+  const { top: safeTop } = useSafeAreaInsets()
+
+  const visibility = useSharedValue(0)
+
+  useAnimatedReaction(
+    () => scrollY.value >= showAfter - safeTop,
+    (shouldShow, prev) => {
+      if (shouldShow !== prev) {
+        visibility.value = withTiming(shouldShow ? 1 : 0, { duration })
+      }
+    }
+  )
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const style = {}
+    if (fade) style.opacity = visibility.value
+    if (slide) style.transform = [{ translateY: (1 - visibility.value) * (-50 - safeTop) }]
+    return style
+  })
+
+  return (
+    <Animated.View style={[{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 90 }, animatedStyle]}>
+      <TopBar {...props} />
+    </Animated.View>
+  )
+}

package/src/components/animations/AnimatedTopBar.web.js

@@ -0,0 +1 @@
+export { AnimatedTopBar } from './AnimatedTopBar.native'

package/src/components/animations/ParallaxHeader.js

@@ -0,0 +1,9 @@
+import { AnimatedView } from './AnimatedView'
+
+export function ParallaxHeader({ children, height = 200, ...props }) {
+  return (
+    <AnimatedView height={height} fade {...props}>
+      {children}
+    </AnimatedView>
+  )
+}

package/src/components/animations/ParallaxHeader.native.js

@@ -0,0 +1,32 @@
+import Animated, { useAnimatedStyle, interpolate, Extrapolation } from 'react-native-reanimated'
+
+import { useReanimatedScroll } from './ReanimatedScrollHandler'
+
+const SCALE_FACTOR = 2
+
+export function ParallaxHeader({ children, height = 200, parallaxSpeed = 0.5, disableResistence }) {
+  const { scrollY } = useReanimatedScroll()
+
+  const imageStyle = useAnimatedStyle(() => {
+    const scale = scrollY.value < 0 ? 1 + (Math.abs(scrollY.value) / height) * SCALE_FACTOR : 1
+    const translateY =
+      scrollY.value < 0 ? 0 : interpolate(scrollY.value, [0, height], [0, height * parallaxSpeed], Extrapolation.CLAMP)
+    return { transform: [{ translateY }, { scale }] }
+  })
+
+  const containerStyle = useAnimatedStyle(() => {
+    let calcHeight = height
+    if (disableResistence) calcHeight = scrollY.value < 0 ? height + Math.abs(scrollY.value) : height
+    return {
+      height: calcHeight,
+      overflow: scrollY.value < 0 ? 'visible' : 'hidden',
+      zIndex: -1,
+    }
+  })
+
+  return (
+    <Animated.View style={containerStyle}>
+      <Animated.View style={imageStyle}>{children}</Animated.View>
+    </Animated.View>
+  )
+}

package/src/components/animations/ParallaxHeader.web.js

@@ -0,0 +1,32 @@
+import Animated, { useAnimatedStyle, interpolate, Extrapolation } from 'react-native-reanimated'
+
+import { useReanimatedScroll } from './ReanimatedScrollHandler'
+
+const SCALE_FACTOR = 2
+
+export function ParallaxHeader({ children, height = 200, parallaxSpeed = 0.5, disableResistence }) {
+  const { scrollY } = useReanimatedScroll()
+
+  const imageStyle = useAnimatedStyle(() => {
+    const scale = scrollY.value < 0 ? 1 + (Math.abs(scrollY.value) / height) * SCALE_FACTOR : 1
+    const translateY =
+      scrollY.value < 0 ? 0 : interpolate(scrollY.value, [0, height], [0, height * parallaxSpeed], Extrapolation.CLAMP)
+    return { transform: [{ translateY }, { scale }] }
+  })
+
+  const containerStyle = useAnimatedStyle(() => {
+    let calcHeight = height
+    if (disableResistence) calcHeight = scrollY.value < 0 ? height + Math.abs(scrollY.value) : height
+    return {
+      height: calcHeight,
+      overflow: scrollY.value < 0 ? 'visible' : 'hidden',
+      zIndex: -1,
+    }
+  })
+
+  return (
+    <Animated.View style={containerStyle}>
+      <Animated.View style={imageStyle}>{children}</Animated.View>
+    </Animated.View>
+  )
+}

package/src/components/animations/ReanimatedScrollHandler.js

@@ -0,0 +1,8 @@
+export function useReanimatedScroll() {
+  if (!context) console.error('useReanimatedScroll its not supported for neko web')
+  return null
+}
+
+export function ReanimatedScrollHandler({ children }) {
+  return children
+}

package/src/components/animations/ReanimatedScrollHandler.native.js

@@ -0,0 +1,24 @@
+import { createContext, useContext, useMemo } from 'react'
+import { useSharedValue, useAnimatedScrollHandler } from 'react-native-reanimated'
+
+const ReanimatedScrollContext = createContext(null)
+
+export function useReanimatedScroll() {
+  const context = useContext(ReanimatedScrollContext)
+  if (!context) throw new Error('useReanimatedScroll must be used within ReanimatedScrollHandler')
+  return context
+}
+
+export function ReanimatedScrollHandler({ children }) {
+  const scrollY = useSharedValue(0)
+
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      scrollY.value = event.contentOffset.y
+    },
+  })
+
+  const value = useMemo(() => ({ scrollY, scrollHandler }), [])
+
+  return <ReanimatedScrollContext.Provider value={value}>{children}</ReanimatedScrollContext.Provider>
+}

package/src/components/animations/ReanimatedScrollHandler.web.js

@@ -0,0 +1 @@
+export { ReanimatedScrollHandler, useReanimatedScroll } from './ReanimatedScrollHandler.native'

package/src/components/animations/index.js

@@ -1,2 +1,5 @@
 export * from './AnimatedView'
 export * from './DraggableSlideView'
+export * from './ReanimatedScrollHandler'
+export * from './AnimatedTopBar'
+export * from './ParallaxHeader'

package/src/components/form/FormItem.js

@@ -5,38 +5,75 @@ import { Text } from '../text/Text'
 import { View } from '../structure/View'
 import { clearProps } from '../../modifiers/_helpers'
 import { useFormInstance, useFormState } from './Form'
+import { shouldValidateOn } from './validation'
 
-export function FormItem({ name, label, isAbsolutePath, children, useDefaultValue, ...props }) {
+export function FormItem({
+  name,
+  label,
+  isAbsolutePath,
+  children,
+  useDefaultValue,
+  rules,
+  validateTrigger = 'onSubmit',
+  ...props
+}) {
   const form = useFormInstance()
   const formState = useFormState()
   const listPath = useRelativePath(name, { isAbsolutePath })
+  const listPathStr = listPath.join('$NEKOJOIN$')
   const [value, setValue] = React.useState(form.getFieldValue(listPath))
-  const error = form.getError(listPath)
+  const [error, setError] = React.useState(form.getError(listPath))
 
+  // Register rules with the form
+  React.useEffect(() => {
+    return form.registerRules(listPath, rules, validateTrigger)
+  }, [listPathStr, JSON.stringify(rules), validateTrigger])
+
+  // Listen for value changes
   React.useEffect(() => {
     return form.registerListener(listPath, (val) => setValue(val))
-  }, [listPath.join('$NEKOJOIN$')])
+  }, [listPathStr])
+
+  // Listen for error changes
+  React.useEffect(() => {
+    return form.registerErrorListener(listPath, (err) => setError(err))
+  }, [listPathStr])
 
   const handleChange = (e) => {
     const val = e?.target?.value ?? e
     form.setFieldValue(listPath, val)
+
+    if (shouldValidateOn('onChange', rules, validateTrigger)) {
+      form.validateField(listPath, 'onChange')
+    }
+  }
+
+  const handleBlur = (e, originalOnBlur) => {
+    if (originalOnBlur) originalOnBlur(e)
+
+    if (shouldValidateOn('onBlur', rules, validateTrigger)) {
+      form.validateField(listPath, 'onBlur')
+    }
   }
 
   let valueKey = 'value'
   if (!!useDefaultValue) valueKey = 'defaultValue'
 
+  const child = typeof children === 'function' ? null : React.Children.only(children)
+  const originalOnBlur = child?.props?.onBlur
+
   const childProps = clearProps({
     [valueKey]: value === undefined ? '' : value,
     onChange: handleChange,
-    // loading: formState?.loading === true || undefined,
+    onBlur: (e) => handleBlur(e, originalOnBlur),
     disabled: formState?.disabled === true || undefined,
+    error: !!error || undefined,
   })
 
   let content
   if (typeof children === 'function') {
     content = children(childProps)
   } else {
-    const child = React.Children.only(children)
     content = React.cloneElement(child, { ...child.props, ...childProps })
   }
 

package/src/components/form/FormList.js

@@ -3,22 +3,32 @@ import React from 'react'
 import { FormGroup, useRelativePath } from './FormGroup'
 import { Text } from '../text/Text'
 import { useFormInstance } from './Form'
+import { shouldValidateOn } from './validation'
 
 const FormListContext = React.createContext(null)
 const useFormList = () => React.useContext(FormListContext)
 
-export function FormList({ name, isAbsolutePath, children }) {
+export function FormList({ name, isAbsolutePath, children, rules, validateTrigger = 'onSubmit' }) {
   const form = useFormInstance()
   const listPath = useRelativePath(name, { isAbsolutePath })
-  // To avoid watch being recalled
   const listPathStr = listPath.join('$NEKOJOIN$')
-  const error = form.getError(listPath)
+  const [error, setError] = React.useState(form.getError(listPath))
 
   // Counter to generate unique keys
   const keyCounter = React.useRef(0)
   // Map to track keys by value reference
   const keysMap = React.useRef(new WeakMap())
 
+  // Register rules with the form
+  React.useEffect(() => {
+    return form.registerRules(listPath, rules, validateTrigger)
+  }, [listPathStr, JSON.stringify(rules), validateTrigger])
+
+  // Listen for error changes
+  React.useEffect(() => {
+    return form.registerErrorListener(listPath, (err) => setError(err))
+  }, [listPathStr])
+
   const generateFields = (items) => {
     if (!Array.isArray(items)) return []
     return items.map((item, index) => {
@@ -47,14 +57,22 @@ export function FormList({ name, isAbsolutePath, children }) {
     })
   }, [listPathStr])
 
+  const validateOnChange = () => {
+    if (shouldValidateOn('onChange', rules, validateTrigger)) {
+      form.validateField(listPath, 'onChange')
+    }
+  }
+
   const add = (defaultValue = {}) => {
     const current = form.getFieldValue(listPath) || []
     form.setFieldValue(listPath, [...current, defaultValue])
+    validateOnChange()
   }
 
   const addOn = (index, defaultValue = {}) => {
     const current = form.getFieldValue(listPath) || []
     form.setFieldValue(listPath, [...current.slice(0, index), defaultValue, ...current.slice(index)])
+    validateOnChange()
   }
 
   const replace = (index, value) => {
@@ -91,6 +109,7 @@ export function FormList({ name, isAbsolutePath, children }) {
       listPath,
       current.filter((_, i) => i !== index)
     )
+    validateOnChange()
   }
 
   const actions = React.useMemo(
@@ -102,7 +121,7 @@ export function FormList({ name, isAbsolutePath, children }) {
       move,
       duplicate,
     }),
-    [listPathStr]
+    [listPathStr, rules, validateTrigger]
   )
 
   let content

package/src/components/form/SubmitButton.js

@@ -1,12 +1,14 @@
 import { Button } from '../actions/Button'
 import { useFormInstance, useFormState } from './Form'
 
-export function SubmitButton({ form, disabled, ...props }) {
+export function SubmitButton({ form, disabled, Wrapper, ...props }) {
   const formState = useFormState()
   const contextForm = useFormInstance()
   form = form || contextForm
   disabled = formState?.disabled || disabled
 
+  Wrapper = Wrapper || Button
+
   const handleSubmit = () => {
     if (!form) {
       console.error('No form provided to useWatch. Pass it as params or wrap it inside a <Form> component.')
@@ -16,5 +18,5 @@ export function SubmitButton({ form, disabled, ...props }) {
     form.handleSubmit()
   }
 
-  return <Button {...props} disabled={disabled} onPress={handleSubmit} />
+  return <Wrapper {...props} disabled={disabled} onPress={handleSubmit} />
 }