@neko-os/ui 0.0.12 → 0.1.0

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

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/bottomDrawer/native/BottomDrawer.js";var _excluded=["children","render","setRender","open","onClose","snapPoints","useSafeArea","enableOverScroll","enableHandlePanningGesture","enableContentPanningGesture","animationConfig","hideHandle","contentProps"],_excluded2=["open"];import{GestureDetector,Gesture,GestureHandlerRootView}from'react-native-gesture-handler';import{Modal,Dimensions,StyleSheet,BackHandler,Platform}from"react-native-web";import{useSafeAreaInsets}from'react-native-safe-area-context';import Animated,{useSharedValue,useAnimatedStyle,withSpring,runOnJS,useAnimatedReaction}from'react-native-reanimated';import React from'react';import{DrawerHandle}from"./DrawerHandle";import{DrawerProvider}from"./DrawerContext";import{Pressable}from"../../../actions/Pressable";import{View}from"../../View";import{normalizeSnapPoints,findClosestSnapPoint}from"./utils";import{useColors}from"../../../../theme/ThemeHandler";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function InnerContent(_ref){var children=_ref.children,render=_ref.render,setRender=_ref.setRender,open=_ref.open,onClose=_ref.onClose,_ref$snapPoints=_ref.snapPoints,snapPoints=_ref$snapPoints===void 0?['50%']:_ref$snapPoints,_ref$useSafeArea=_ref.useSafeArea,useSafeArea=_ref$useSafeArea===void 0?true:_ref$useSafeArea,_ref$enableOverScroll=_ref.enableOverScroll,enableOverScroll=_ref$enableOverScroll===void 0?true:_ref$enableOverScroll,_ref$enableHandlePann=_ref.enableHandlePanningGesture,enableHandlePanningGesture=_ref$enableHandlePann===void 0?true:_ref$enableHandlePann,_ref$enableContentPan=_ref.enableContentPanningGesture,enableContentPanningGesture=_ref$enableContentPan===void 0?true:_ref$enableContentPan,_ref$animationConfig=_ref.animationConfig,animationConfig=_ref$animationConfig===void 0?{damping:50,stiffness:500,mass:0.3,overshootClamping:true,restDisplacementThreshold:10,restSpeedThreshold:10}:_ref$animationConfig,hideHandle=_ref.hideHandle,contentProps=_ref.contentProps,props=_objectWithoutProperties(_ref,_excluded);var _Dimensions$get=Dimensions.get('window'),SCREEN_HEIGHT=_Dimensions$get.height;var insets=useSafeAreaInsets();var bottomInset=useSafeArea?insets.bottom:0;var colors=useColors();var translateY=useSharedValue(SCREEN_HEIGHT);var scrollOffset=useSharedValue(0);var scrollEnabled=useSharedValue(false);var isScrolling=useSharedValue(false);var snapIndex=useSharedValue(0);var velocityY=useSharedValue(0);var normalizedSnapPoints=React.useMemo(function(){return normalizeSnapPoints(snapPoints,SCREEN_HEIGHT,bottomInset);},[snapPoints,useSafeArea]);var maxSnapPoint=React.useMemo(function(){return Math.max.apply(Math,_toConsumableArray(normalizedSnapPoints));},[normalizedSnapPoints]);var minSnapPoint=React.useMemo(function(){return Math.min.apply(Math,_toConsumableArray(normalizedSnapPoints));},[normalizedSnapPoints]);React.useEffect(function(){if(open){var targetY=SCREEN_HEIGHT-normalizedSnapPoints[0];translateY.value=withSpring(targetY,animationConfig);snapIndex.value=0;}else{translateY.value=withSpring(SCREEN_HEIGHT,animationConfig,function(){scrollOffset.value=0;scrollEnabled.value=false;runOnJS(setRender)(false);});snapIndex.value=-1;}},[open]);React.useEffect(function(){if(!onClose||!open||Platform.OS!=='android')return;var backHandler=BackHandler.addEventListener('hardwareBackPress',function(){onClose();return true;});return function(){return backHandler.remove();};},[open,onClose]);useAnimatedReaction(function(){return translateY.value;},function(currentY){var atMaxSnapPoint=currentY<=SCREEN_HEIGHT-maxSnapPoint;scrollEnabled.value=atMaxSnapPoint;},[]);var handleClose=React.useCallback(function(){onClose==null?void 0:onClose();},[onClose]);if(!onClose)handleClose=false;var snapTo=React.useCallback(function(index){'worklet';var snapPoint=normalizedSnapPoints[index];if(snapPoint!==undefined){translateY.value=withSpring(SCREEN_HEIGHT-snapPoint,animationConfig);snapIndex.value=index;}},[normalizedSnapPoints]);var gestureStartTranslateY=useSharedValue(0);var panGesture=React.useMemo(function(){return Gesture.Pan().enabled(enableHandlePanningGesture||enableContentPanningGesture).onStart(function(){gestureStartTranslateY.value=translateY.value;}).onUpdate(function(event){var newTranslateY=gestureStartTranslateY.value+event.translationY;var maxPosition=SCREEN_HEIGHT-maxSnapPoint;if(enableOverScroll&&newTranslateY>=maxPosition){translateY.value=newTranslateY;}else{translateY.value=Math.max(maxPosition,Math.min(SCREEN_HEIGHT,newTranslateY));}velocityY.value=event.velocityY;}).onEnd(function(){var currentPosition=SCREEN_HEIGHT-translateY.value;var shouldClose=!!handleClose&&(velocityY.value>2000&&currentPosition<minSnapPoint*0.75||currentPosition<minSnapPoint*0.25);if(shouldClose){runOnJS(handleClose)();}else{var closestSnapIndex=findClosestSnapPoint(currentPosition,normalizedSnapPoints,velocityY.value);var targetSnapPoint=normalizedSnapPoints[closestSnapIndex];translateY.value=withSpring(SCREEN_HEIGHT-targetSnapPoint,animationConfig);snapIndex.value=closestSnapIndex;}});},[enableHandlePanningGesture,enableContentPanningGesture,enableOverScroll,maxSnapPoint,minSnapPoint,normalizedSnapPoints,animationConfig,handleClose]);var animatedSheetStyle=useAnimatedStyle(function(){var currentHeight=SCREEN_HEIGHT-translateY.value;return{transform:[{translateY:translateY.value}],maxHeight:currentHeight};});var contextValue=React.useMemo(function(){return{translateY:translateY,scrollOffset:scrollOffset,scrollEnabled:scrollEnabled,isScrolling:isScrolling,snapIndex:snapIndex,maxSnapPoint:maxSnapPoint,snapTo:snapTo,animationConfig:animationConfig};},[maxSnapPoint]);return _jsxs(GestureHandlerRootView,{style:{flex:1},children:[_jsx(Pressable,{absoluteFill:true,bg:"backdrop_op70",onPress:function onPress(){if(!handleClose)return;runOnJS(handleClose)();}}),_jsx(DrawerProvider,{value:contextValue,children:_jsx(GestureDetector,{gesture:panGesture,children:_jsx(Animated.View,{style:[styles.container,{height:SCREEN_HEIGHT},animatedSheetStyle],pointerEvents:"box-none",children:_jsxs(View,Object.assign({flex:true,bg:"overlayBG",shadow:true,paddingB:useSafeArea&&bottomInset,borderRadiusT:"xxxl",marginL:"auto",marginR:"auto",fullW:true},props,{children:[_jsx(DrawerHandle,{hide:hideHandle}),_jsx(View,Object.assign({flex:true},contentProps,{children:children}))]}))})})})]});}var styles=StyleSheet.create({container:{position:'absolute',left:0,right:0,top:0}});export function BottomDrawer(_ref2){var open=_ref2.open,props=_objectWithoutProperties(_ref2,_excluded2);var _React$useState=React.useState(open),_React$useState2=_slicedToArray(_React$useState,2),render=_React$useState2[0],setRender=_React$useState2[1];React.useEffect(function(){if(open){setRender(true);}},[open]);return _jsx(Modal,{visible:render,transparent:true,statusBarTranslucent:true,navigationBarTranslucent:true,animationType:"none",children:_jsx(InnerContent,Object.assign({},props,{open:open,render:render,setRender:setRender}))});}
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/bottomDrawer/native/BottomDrawer.js";var _excluded=["children","render","setRender","open","onClose","snapPoints","useSafeArea","enableOverScroll","enableHandlePanningGesture","enableContentPanningGesture","animationConfig","hideHandle","contentProps"],_excluded2=["open"];import{GestureDetector,Gesture,GestureHandlerRootView}from'react-native-gesture-handler';import{Modal,Dimensions,StyleSheet,BackHandler,Platform}from"react-native-web";import{useSafeAreaInsets}from'react-native-safe-area-context';import Animated,{useSharedValue,useAnimatedStyle,withSpring,runOnJS}from'react-native-reanimated';import React from'react';import{DrawerHandle}from"./DrawerHandle";import{DrawerProvider}from"./DrawerContext";import{Pressable}from"../../../actions/Pressable";import{View}from"../../View";import{normalizeSnapPoints,findClosestSnapPoint}from"./utils";import{useColors}from"../../../../theme/ThemeHandler";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function InnerContent(_ref){var children=_ref.children,render=_ref.render,setRender=_ref.setRender,open=_ref.open,onClose=_ref.onClose,_ref$snapPoints=_ref.snapPoints,snapPoints=_ref$snapPoints===void 0?['50%']:_ref$snapPoints,_ref$useSafeArea=_ref.useSafeArea,useSafeArea=_ref$useSafeArea===void 0?true:_ref$useSafeArea,_ref$enableOverScroll=_ref.enableOverScroll,enableOverScroll=_ref$enableOverScroll===void 0?true:_ref$enableOverScroll,_ref$enableHandlePann=_ref.enableHandlePanningGesture,enableHandlePanningGesture=_ref$enableHandlePann===void 0?true:_ref$enableHandlePann,_ref$enableContentPan=_ref.enableContentPanningGesture,enableContentPanningGesture=_ref$enableContentPan===void 0?true:_ref$enableContentPan,_ref$animationConfig=_ref.animationConfig,animationConfig=_ref$animationConfig===void 0?{damping:50,stiffness:500,mass:0.3,overshootClamping:true,restDisplacementThreshold:10,restSpeedThreshold:10}:_ref$animationConfig,hideHandle=_ref.hideHandle,contentProps=_ref.contentProps,props=_objectWithoutProperties(_ref,_excluded);var _Dimensions$get=Dimensions.get('window'),SCREEN_HEIGHT=_Dimensions$get.height;var insets=useSafeAreaInsets();var bottomInset=useSafeArea?insets.bottom:0;var colors=useColors();var translateY=useSharedValue(SCREEN_HEIGHT);var snapIndex=useSharedValue(0);var velocityY=useSharedValue(0);var normalizedSnapPoints=React.useMemo(function(){return normalizeSnapPoints(snapPoints,SCREEN_HEIGHT,bottomInset);},[snapPoints,useSafeArea]);var maxSnapPoint=React.useMemo(function(){return Math.max.apply(Math,_toConsumableArray(normalizedSnapPoints));},[normalizedSnapPoints]);var minSnapPoint=React.useMemo(function(){return Math.min.apply(Math,_toConsumableArray(normalizedSnapPoints));},[normalizedSnapPoints]);React.useEffect(function(){if(open){var targetY=SCREEN_HEIGHT-normalizedSnapPoints[0];translateY.value=withSpring(targetY,animationConfig);snapIndex.value=0;}else{translateY.value=withSpring(SCREEN_HEIGHT,animationConfig,function(){runOnJS(setRender)(false);});snapIndex.value=-1;}},[open]);React.useEffect(function(){if(!onClose||!open||Platform.OS!=='android')return;var backHandler=BackHandler.addEventListener('hardwareBackPress',function(){onClose();return true;});return function(){return backHandler.remove();};},[open,onClose]);var handleClose=React.useCallback(function(){onClose==null?void 0:onClose();},[onClose]);if(!onClose)handleClose=false;var snapTo=React.useCallback(function(index){'worklet';var snapPoint=normalizedSnapPoints[index];if(snapPoint!==undefined){translateY.value=withSpring(SCREEN_HEIGHT-snapPoint,animationConfig);snapIndex.value=index;}},[normalizedSnapPoints]);var gestureStartTranslateY=useSharedValue(0);var panRef=React.useRef();var panGesture=React.useMemo(function(){return Gesture.Pan().withRef(panRef).enabled(enableHandlePanningGesture||enableContentPanningGesture).onStart(function(){gestureStartTranslateY.value=translateY.value;}).onUpdate(function(event){var newTranslateY=gestureStartTranslateY.value+event.translationY;var maxPosition=SCREEN_HEIGHT-maxSnapPoint;if(enableOverScroll&&newTranslateY>=maxPosition){translateY.value=newTranslateY;}else{translateY.value=Math.max(maxPosition,Math.min(SCREEN_HEIGHT,newTranslateY));}velocityY.value=event.velocityY;}).onEnd(function(){var currentPosition=SCREEN_HEIGHT-translateY.value;var shouldClose=!!handleClose&&(velocityY.value>1500||velocityY.value>800&&currentPosition<minSnapPoint||currentPosition<minSnapPoint*0.35);if(shouldClose){runOnJS(handleClose)();}else{var closestSnapIndex=findClosestSnapPoint(currentPosition,normalizedSnapPoints,velocityY.value);var targetSnapPoint=normalizedSnapPoints[closestSnapIndex];translateY.value=withSpring(SCREEN_HEIGHT-targetSnapPoint,animationConfig);snapIndex.value=closestSnapIndex;}});},[enableHandlePanningGesture,enableContentPanningGesture,enableOverScroll,maxSnapPoint,minSnapPoint,normalizedSnapPoints,animationConfig,handleClose]);var animatedSheetStyle=useAnimatedStyle(function(){var currentHeight=SCREEN_HEIGHT-translateY.value;return{transform:[{translateY:translateY.value}],maxHeight:currentHeight};});var contextValue=React.useMemo(function(){return{translateY:translateY,snapIndex:snapIndex,maxSnapPoint:maxSnapPoint,snapTo:snapTo,animationConfig:animationConfig,panRef:panRef,normalizedSnapPoints:normalizedSnapPoints,SCREEN_HEIGHT:SCREEN_HEIGHT,minSnapPoint:minSnapPoint,handleClose:handleClose,velocityY:velocityY};},[maxSnapPoint,normalizedSnapPoints,SCREEN_HEIGHT,minSnapPoint,handleClose]);return _jsxs(GestureHandlerRootView,{style:{flex:1},children:[_jsx(Pressable,{absoluteFill:true,bg:"backdrop_op70",onPress:function onPress(){if(!handleClose)return;runOnJS(handleClose)();}}),_jsx(DrawerProvider,{value:contextValue,children:_jsx(GestureDetector,{gesture:panGesture,children:_jsx(Animated.View,{style:[styles.container,{height:SCREEN_HEIGHT},animatedSheetStyle],pointerEvents:"box-none",children:_jsxs(View,Object.assign({flex:true,bg:"overlayBG",shadow:true,paddingB:useSafeArea&&bottomInset,borderRadiusT:"xxxl",marginL:"auto",marginR:"auto",fullW:true},props,{children:[_jsx(DrawerHandle,{hide:hideHandle}),_jsx(View,Object.assign({flex:true},contentProps,{children:children}))]}))})})})]});}var styles=StyleSheet.create({container:{position:'absolute',left:0,right:0,top:0}});export function BottomDrawer(_ref2){var open=_ref2.open,props=_objectWithoutProperties(_ref2,_excluded2);var _React$useState=React.useState(open),_React$useState2=_slicedToArray(_React$useState,2),render=_React$useState2[0],setRender=_React$useState2[1];React.useEffect(function(){if(open){setRender(true);}},[open]);return _jsx(Modal,{visible:render,transparent:true,statusBarTranslucent:true,navigationBarTranslucent:true,animationType:"none",children:_jsx(InnerContent,Object.assign({},props,{open:open,render:render,setRender:setRender}))});}

package/dist/components/structure/bottomDrawer/native/DrawerScrollView.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","onScroll","scrollEventThrottle","showsVerticalScrollIndicator","bounces"];var _this=this,_jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/bottomDrawer/native/DrawerScrollView.js";import React from'react';import{ScrollView}from"react-native-web";import Animated,{useAnimatedScrollHandler,useAnimatedReaction,runOnJS}from'react-native-reanimated';import{useDrawerContext}from"./DrawerContext";import{jsx as _jsx}from"react/jsx-runtime";var AnimatedScrollView=Animated.createAnimatedComponent(ScrollView);export var DrawerScrollView=React.forwardRef(function(props,ref){var children=props.children,_onScroll=props.onScroll,_props$scrollEventThr=props.scrollEventThrottle,scrollEventThrottle=_props$scrollEventThr===void 0?16:_props$scrollEventThr,_props$showsVerticalS=props.showsVerticalScrollIndicator,showsVerticalScrollIndicator=_props$showsVerticalS===void 0?true:_props$showsVerticalS,_props$bounces=props.bounces,bounces=_props$bounces===void 0?true:_props$bounces,scrollViewProps=_objectWithoutProperties(props,_excluded);var _useDrawerContext=useDrawerContext(),scrollOffset=_useDrawerContext.scrollOffset,scrollEnabled=_useDrawerContext.scrollEnabled,isScrolling=_useDrawerContext.isScrolling;var scrollRef=React.useRef(null);var _React$useState=React.useState(true),_React$useState2=_slicedToArray(_React$useState,2),isScrollEnabled=_React$useState2[0],setIsScrollEnabled=_React$useState2[1];React.useImperativeHandle(ref,function(){return scrollRef.current;});useAnimatedReaction(function(){return scrollEnabled.value;},function(enabled){if(!enabled&&scrollOffset.value>0){runOnJS(function(){var _scrollRef$current;(_scrollRef$current=scrollRef.current)==null?void 0:_scrollRef$current.scrollTo({y:0,animated:false});})();scrollOffset.value=0;}runOnJS(setIsScrollEnabled)(enabled);},[]);var handleScrollBeginDrag=React.useCallback(function(){isScrolling.value=true;},[isScrolling]);var handleScrollEndDrag=React.useCallback(function(){isScrolling.value=false;},[isScrolling]);var animatedScrollHandler=useAnimatedScrollHandler({onScroll:function onScroll(event){scrollOffset.value=event.contentOffset.y;if(_onScroll){runOnJS(_onScroll)(event);}},onBeginDrag:function onBeginDrag(){runOnJS(handleScrollBeginDrag)();},onEndDrag:function onEndDrag(){runOnJS(handleScrollEndDrag)();}});return _jsx(AnimatedScrollView,Object.assign({ref:scrollRef,style:{flex:1},scrollEnabled:isScrollEnabled,onScroll:animatedScrollHandler,scrollEventThrottle:scrollEventThrottle,showsVerticalScrollIndicator:showsVerticalScrollIndicator,bounces:bounces},scrollViewProps,{children:children}));});DrawerScrollView.displayName='DrawerScrollView';
+import{FlatList,ScrollView}from"../../../list";import{createDrawerScrollComponent}from"./createDrawerScrollComponent";export var DrawerScrollView=createDrawerScrollComponent(ScrollView);export var DrawerFlatList=createDrawerScrollComponent(FlatList);

package/dist/components/structure/bottomDrawer/native/createDrawerScrollComponent.js

@@ -0,0 +1 @@
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/bottomDrawer/native/createDrawerScrollComponent.js";var _excluded=["ref","onScroll"];import{Gesture,GestureDetector}from'react-native-gesture-handler';import Animated,{useSharedValue,useAnimatedScrollHandler,useAnimatedRef,scrollTo,withSpring,runOnJS}from'react-native-reanimated';import React from'react';import{findClosestSnapPoint,clamp}from"./utils";import{useDrawerContext}from"./DrawerContext";import{jsx as _jsx}from"react/jsx-runtime";export function createDrawerScrollComponent(Component){var AnimatedComponent=Animated.createAnimatedComponent(Component);function DrawerScrollComponent(_ref){var ref=_ref.ref,_onScroll=_ref.onScroll,props=_objectWithoutProperties(_ref,_excluded);var _useDrawerContext=useDrawerContext(),translateY=_useDrawerContext.translateY,panRef=_useDrawerContext.panRef,normalizedSnapPoints=_useDrawerContext.normalizedSnapPoints,SCREEN_HEIGHT=_useDrawerContext.SCREEN_HEIGHT,maxSnapPoint=_useDrawerContext.maxSnapPoint,minSnapPoint=_useDrawerContext.minSnapPoint,handleClose=_useDrawerContext.handleClose,animationConfig=_useDrawerContext.animationConfig,snapIndex=_useDrawerContext.snapIndex;var scrollRef=useAnimatedRef();var scrollOffset=useSharedValue(0);var prevTranslationY=useSharedValue(0);var drawerMoved=useSharedValue(false);React.useImperativeHandle(ref,function(){return scrollRef.current;});var maxPosition=SCREEN_HEIGHT-maxSnapPoint;var panGesture=React.useMemo(function(){return Gesture.Pan().activeOffsetY([-10,10]).blocksExternalGesture(panRef).onStart(function(){prevTranslationY.value=0;drawerMoved.value=false;}).onUpdate(function(event){var delta=event.translationY-prevTranslationY.value;prevTranslationY.value=event.translationY;var currentY=translateY.value;var atMaxSnap=currentY<=maxPosition+1;var atScrollTop=scrollOffset.value<=0;if(drawerMoved.value){var newY=clamp(currentY+delta,maxPosition,SCREEN_HEIGHT);translateY.value=newY;scrollTo(scrollRef,0,0,false);if(newY<=maxPosition+1&&delta<0){drawerMoved.value=false;}}else if(!atMaxSnap){drawerMoved.value=true;var _newY=clamp(currentY+delta,maxPosition,SCREEN_HEIGHT);translateY.value=_newY;scrollTo(scrollRef,0,0,false);}else if(atScrollTop&&delta>0){drawerMoved.value=true;var _newY2=clamp(currentY+delta,maxPosition,SCREEN_HEIGHT);translateY.value=_newY2;scrollTo(scrollRef,0,0,false);}}).onEnd(function(event){if(!drawerMoved.value)return;var currentPosition=SCREEN_HEIGHT-translateY.value;var velocity=event.velocityY;var shouldClose=!!handleClose&&(velocity>1500||velocity>800&&currentPosition<minSnapPoint||currentPosition<minSnapPoint*0.35);if(shouldClose){runOnJS(handleClose)();}else{var closestSnapIndex=findClosestSnapPoint(currentPosition,normalizedSnapPoints,velocity);var targetSnapPoint=normalizedSnapPoints[closestSnapIndex];translateY.value=withSpring(SCREEN_HEIGHT-targetSnapPoint,animationConfig);snapIndex.value=closestSnapIndex;}});},[panRef,maxPosition,normalizedSnapPoints,minSnapPoint,handleClose,animationConfig]);var nativeGesture=React.useMemo(function(){return Gesture.Native();},[]);var composedGesture=React.useMemo(function(){return Gesture.Simultaneous(panGesture,nativeGesture);},[panGesture,nativeGesture]);var animatedScrollHandler=useAnimatedScrollHandler({onScroll:function onScroll(event){scrollOffset.value=event.contentOffset.y;if(_onScroll){runOnJS(_onScroll)(event);}}});return _jsx(GestureDetector,{gesture:composedGesture,children:_jsx(AnimatedComponent,Object.assign({ref:scrollRef,style:{flex:1},onScroll:animatedScrollHandler,scrollEventThrottle:16,bounces:false,overScrollMode:"never"},props))});}return DrawerScrollComponent;}

package/dist/components/structure/drawer/Drawer.web.js

@@ -0,0 +1 @@
+import{BottomDrawer}from"../bottomDrawer/native/BottomDrawer";export var Drawer=BottomDrawer;

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.12",
+  "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/Dropdown.js

@@ -4,6 +4,7 @@ import { IconLabel } from '../presentation/IconLabel'
 import { Link } from './Link'
 import { Menu } from './menu/Menu'
 import { Popover } from '../structure/popover/Popover'
+import { ScrollView } from '../list'
 import { View } from '../structure/View'
 import { useResponsiveValue } from '../../responsive'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
@@ -58,14 +59,16 @@ export function Dropdown({ items, ...rootProps }) {
             onClose()
           }
           return (
-            <Menu
-              vertical
-              items={items}
-              onChange={handleChange}
-              linkPaddingH={useBottomDrawer ? 'md' : 'sm'}
-              linkMinHeight={useBottomDrawer ? 'xl' : 'md'}
-              withDivider={useBottomDrawer}
-            />
+            <ScrollView>
+              <Menu
+                vertical
+                items={items}
+                onChange={handleChange}
+                linkPaddingH={useBottomDrawer ? 'md' : 'sm'}
+                linkMinHeight={useBottomDrawer ? 'xl' : 'md'}
+                withDivider={useBottomDrawer}
+              />
+            </ScrollView>
           )
         }}
       >

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/actions/menu/VerticalMenu.js

@@ -39,12 +39,11 @@ function LinkItem({
   return (
     <SubmenuWrapper item={item} onChange={handlePress} activeKey={activeKey} color={color}>
       <Link
-        fullW
+        flex
         center
         paddingH={linkPaddingH}
         paddingV={linkPaddingV}
         minHeight={linkMinHeight}
-        marginR={3}
         borderL={3}
         brColor={active ? activeColor : 'transparent'}
         bg={bg}

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'