@neko-os/ui 0.0.9 → 0.0.10

package/dist/components/structure/Segment.js

@@ -0,0 +1 @@
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/Segment.js";var _excluded=["children"],_excluded2=["br"];import{pipe}from'ramda';import React from'react';import{View}from"./View";import{useDefaultModifier}from"../../modifiers/default";import{useSizeConverter}from"../../modifiers/sizeConverter";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx}from"react/jsx-runtime";var DEFAULT_PROPS=function DEFAULT_PROPS(_ref){var _ref2=_slicedToArray(_ref,1),sizeCode=_ref2[0].sizeCode;return{row:true,justify:'stretch',br:sizeCode};};export function Segment(_ref3){var children=_ref3.children,rootProps=_objectWithoutProperties(_ref3,_excluded);var _pipe=pipe(useSizeConverter('elementHeights','md'),useThemeComponentModifier('Segment'),useDefaultModifier(DEFAULT_PROPS))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),sizeCode=_pipe2[0].sizeCode,formattedProps=_pipe2[1];var br=formattedProps.br,props=_objectWithoutProperties(formattedProps,_excluded2);var size=children==null?void 0:children.length;return _jsx(View,Object.assign({className:"neko-segment"},props,{children:React.Children.map(children,function(child,index){if(!React.isValidElement(child))return child;var isFirst=index===0;var isLast=size-1===index;var childProps=child.props||{};var newProps={brL:br,brR:br,size:sizeCode};if(!isLast){newProps.brR=0;}if(!isFirst){newProps.brL=0;}return React.cloneElement(child,newProps);})}));}

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);},[snapPoints]);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,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}))});}

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

@@ -1 +1 @@
-export function normalizeSnapPoints(snapPoints,screenHeight){return snapPoints.map(function(point){if(typeof point==='string'&&point.endsWith('%')){var percentage=parseFloat(point)/100;return screenHeight*percentage;}return point;});}export function findClosestSnapPoint(currentPosition,snapPoints){'worklet';var velocity=arguments.length>2&&arguments[2]!==undefined?arguments[2]:0;var velocityImpact=velocity*0.03;var adjustedPosition=currentPosition+velocityImpact;var closestIndex=0;var minDistance=Math.abs(snapPoints[0]-adjustedPosition);for(var i=1;i<snapPoints.length;i++){var distance=Math.abs(snapPoints[i]-adjustedPosition);if(distance<minDistance){minDistance=distance;closestIndex=i;}}if(velocity<-1500&&closestIndex<snapPoints.length-1){closestIndex++;}else if(velocity>1500&&closestIndex>0){closestIndex--;}if(snapPoints.length>1){var currentSnapDistance=minDistance;var snapPointSpacing=Math.abs(snapPoints[Math.min(closestIndex+1,snapPoints.length-1)]-snapPoints[closestIndex]);if(currentSnapDistance<snapPointSpacing*0.2){return closestIndex;}}return closestIndex;}export function clamp(value,min,max){'worklet';return Math.min(Math.max(value,min),max);}
+import{is}from'ramda';export function normalizeSnapPoints(snapPoints,screenHeight,bottomInset){return snapPoints.map(function(point){if(typeof point==='string'&&point.endsWith('%')){var percentage=parseFloat(point)/100;return screenHeight*percentage;}if(is(Number,point)){point=point+bottomInset;}return point;});}export function findClosestSnapPoint(currentPosition,snapPoints){'worklet';var velocity=arguments.length>2&&arguments[2]!==undefined?arguments[2]:0;var velocityImpact=velocity*0.03;var adjustedPosition=currentPosition+velocityImpact;var closestIndex=0;var minDistance=Math.abs(snapPoints[0]-adjustedPosition);for(var i=1;i<snapPoints.length;i++){var distance=Math.abs(snapPoints[i]-adjustedPosition);if(distance<minDistance){minDistance=distance;closestIndex=i;}}if(velocity<-1500&&closestIndex<snapPoints.length-1){closestIndex++;}else if(velocity>1500&&closestIndex>0){closestIndex--;}if(snapPoints.length>1){var currentSnapDistance=minDistance;var snapPointSpacing=Math.abs(snapPoints[Math.min(closestIndex+1,snapPoints.length-1)]-snapPoints[closestIndex]);if(currentSnapDistance<snapPointSpacing*0.2){return closestIndex;}}return closestIndex;}export function clamp(value,min,max){'worklet';return Math.min(Math.max(value,min),max);}

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

@@ -1 +1 @@
-var _this=this,_jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/bottomDrawer/web/BottomDrawer.js";import{Drawer}from"../../drawer";import{jsx as _jsx}from"react/jsx-runtime";export var BottomDrawer=function BottomDrawer(props){return _jsx(Drawer,Object.assign({height:400},props));};
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["snapPoints","contentProps"];var _this=this,_jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/bottomDrawer/web/BottomDrawer.js";import{Drawer}from"../../drawer";import{jsx as _jsx}from"react/jsx-runtime";export var BottomDrawer=function BottomDrawer(_ref){var snapPoints=_ref.snapPoints,contentProps=_ref.contentProps,props=_objectWithoutProperties(_ref,_excluded);return _jsx(Drawer,Object.assign({height:(snapPoints==null?void 0:snapPoints[0])||400,contentProps:Object.assign({padding:0},contentProps)},props));};

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"./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";

package/dist/components/structure/overlay/OverlayHandler.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/overlay/OverlayHandler.js";import{toPairs,dissoc}from'ramda';import React from'react';import{OverlayWrapper}from"./OverlayWrapper";import{Text}from"../../text/Text";import{genRandonId}from"../../../helpers/random";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";var OverlayContext=React.createContext(null);export var useOverlay=function useOverlay(){return React.useContext(OverlayContext);};export var useRegisterOverlay=function useRegisterOverlay(){var opts=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var unmountOnClose=opts.unmountOnClose;var timeout=React.useRef(null);var _useOverlay=useOverlay(),overlays=_useOverlay.overlays,setOverlays=_useOverlay.setOverlays;var randomId=React.useMemo(function(){return genRandonId();},[]);var overlay=overlays[randomId]||{};var mergeOverlay=function mergeOverlay(value){return setOverlays(function(data){return Object.assign({},data,_defineProperty({},randomId,Object.assign({},overlay,value)));});};var closeOverlay=function closeOverlay(){return mergeOverlay({open:false});};var removeOverlay=function removeOverlay(){return setOverlays(function(data){return dissoc(randomId,data);});};var stopDelayedClosing=function stopDelayedClosing(){return!!(timeout!=null&&timeout.current)&&clearTimeout(timeout.current);};React.useEffect(function(){return function(){return removeOverlay();};},[]);var onOpen=function onOpen(_ref){var content=_ref.content,triggerRect=_ref.triggerRect,placement=_ref.placement,_ref$options=_ref.options,options=_ref$options===void 0?{}:_ref$options;stopDelayedClosing();mergeOverlay(Object.assign({open:true,content:content,triggerRect:triggerRect,placement:placement},options));};var onClose=function onClose(){stopDelayedClosing();timeout.current=setTimeout(function(){!!unmountOnClose?removeOverlay():closeOverlay();},250);};var onFastClose=function onFastClose(){stopDelayedClosing();!!unmountOnClose?removeOverlay():closeOverlay();};return{onOpen:onOpen,onClose:onClose,onFastClose:onFastClose,stopDelayedClosing:stopDelayedClosing};};export function OverlayHandler(_ref2){var _this=this;var children=_ref2.children;var _React$useState=React.useState({}),_React$useState2=_slicedToArray(_React$useState,2),overlays=_React$useState2[0],setOverlays=_React$useState2[1];return _jsxs(OverlayContext.Provider,{value:{overlays:overlays,setOverlays:setOverlays},children:[children,toPairs(overlays).map(function(_ref3){var _ref4=_slicedToArray(_ref3,2),key=_ref4[0],overlay=_ref4[1];var handleClickOutside=function handleClickOutside(){return setTimeout(function(){return setOverlays(function(data){return dissoc(key,data);});},100);};return _jsx(OverlayWrapper,{triggerRect:overlay.triggerRect,placement:overlay.placement,onClickOutside:overlay.dismissOnClickOutside?handleClickOutside:null,display:!overlay.open&&'none',children:overlay.content},key);})]});}
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/overlay/OverlayHandler.js";import{toPairs,dissoc}from'ramda';import React from'react';import{OverlayWrapper}from"./OverlayWrapper";import{Text}from"../../text/Text";import{genRandonId}from"../../../helpers/random";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";var OverlayContext=React.createContext(null);export var useOverlay=function useOverlay(){return React.useContext(OverlayContext);};export var useRegisterOverlay=function useRegisterOverlay(){var opts=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var unmountOnClose=opts.unmountOnClose;var timeout=React.useRef(null);var _useOverlay=useOverlay(),overlays=_useOverlay.overlays,setOverlays=_useOverlay.setOverlays;var randomId=React.useMemo(function(){return genRandonId();},[]);var overlay=overlays[randomId]||{};var mergeOverlay=function mergeOverlay(value){return setOverlays(function(data){return Object.assign({},data,_defineProperty({},randomId,Object.assign({},overlay,value)));});};var closeOverlay=function closeOverlay(){return mergeOverlay({open:false});};var removeOverlay=function removeOverlay(){return setOverlays(function(data){return dissoc(randomId,data);});};var stopDelayedClosing=function stopDelayedClosing(){return!!(timeout!=null&&timeout.current)&&clearTimeout(timeout.current);};React.useEffect(function(){return function(){return removeOverlay();};},[]);var onOpen=function onOpen(_ref){var content=_ref.content,triggerRect=_ref.triggerRect,placement=_ref.placement,_ref$options=_ref.options,options=_ref$options===void 0?{}:_ref$options;stopDelayedClosing();mergeOverlay(Object.assign({open:true,content:content,triggerRect:triggerRect,placement:placement},options));};var onUpdate=function onUpdate(_ref2){var content=_ref2.content,_ref2$options=_ref2.options,options=_ref2$options===void 0?{}:_ref2$options;if(!overlay.open)return;mergeOverlay(Object.assign({content:content},options));};var onClose=function onClose(){stopDelayedClosing();timeout.current=setTimeout(function(){!!unmountOnClose?removeOverlay():closeOverlay();},250);};var onFastClose=function onFastClose(){stopDelayedClosing();!!unmountOnClose?removeOverlay():closeOverlay();};return{onOpen:onOpen,onClose:onClose,onUpdate:onUpdate,onFastClose:onFastClose,stopDelayedClosing:stopDelayedClosing};};export function OverlayHandler(_ref3){var _this=this;var children=_ref3.children;var _React$useState=React.useState({}),_React$useState2=_slicedToArray(_React$useState,2),overlays=_React$useState2[0],setOverlays=_React$useState2[1];return _jsxs(OverlayContext.Provider,{value:{overlays:overlays,setOverlays:setOverlays},children:[children,toPairs(overlays).map(function(_ref4){var _ref5=_slicedToArray(_ref4,2),key=_ref5[0],overlay=_ref5[1];var handleClickOutside=function handleClickOutside(){return setTimeout(function(){return setOverlays(function(data){return dissoc(key,data);});},100);};return _jsx(OverlayWrapper,{triggerRect:overlay.triggerRect,placement:overlay.placement,onClickOutside:overlay.dismissOnClickOutside?handleClickOutside:null,display:!overlay.open&&'none',children:overlay.content},key);})]});}

package/dist/components/structure/popover/Popover.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/popover/Popover.js";var _excluded=["renderContent","content","trigger","placement","unmountOnClose","children","parentWidth","parentMinWidth","useBottomDrawer","bottomDrawerProps"],_excluded2=["children","content","renderContent","snapPoints"];import React from'react';import{BottomDrawer}from"../bottomDrawer";import{PopoverContent}from"./PopoverContent";import{useRegisterOverlay}from"../overlay/OverlayHandler";import{useResponsiveValue}from"../../../responsive";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";export function Popover(_ref){var _this=this;var renderContent=_ref.renderContent,content=_ref.content,_ref$trigger=_ref.trigger,trigger=_ref$trigger===void 0?'hover':_ref$trigger,_ref$placement=_ref.placement,placement=_ref$placement===void 0?'bottom':_ref$placement,unmountOnClose=_ref.unmountOnClose,children=_ref.children,parentWidth=_ref.parentWidth,parentMinWidth=_ref.parentMinWidth,_ref$useBottomDrawer=_ref.useBottomDrawer,useBottomDrawer=_ref$useBottomDrawer===void 0?{}:_ref$useBottomDrawer,_ref$bottomDrawerProp=_ref.bottomDrawerProps,bottomDrawerProps=_ref$bottomDrawerProp===void 0?{}:_ref$bottomDrawerProp,props=_objectWithoutProperties(_ref,_excluded);var shouldUseDrawer=useResponsiveValue(useBottomDrawer);var ref=React.useRef(null);var _useRegisterOverlay=useRegisterOverlay({unmountOnClose:unmountOnClose}),onOpen=_useRegisterOverlay.onOpen,onClose=_useRegisterOverlay.onClose,onFastClose=_useRegisterOverlay.onFastClose,stopDelayedClosing=_useRegisterOverlay.stopDelayedClosing;var click=trigger==='click';var hover=trigger==='hover';var focus=trigger==='focus';renderContent=renderContent||function(){return content;};var show=function show(e){if(e&&e.stopPropagation)e.stopPropagation();var rect=ref.current.getBoundingClientRect();var scrollX=window.scrollX||window.pageXOffset;var scrollY=window.scrollY||window.pageYOffset;var triggerRect={left:rect.left+scrollX,right:rect.right+scrollX,top:rect.top+scrollY,bottom:rect.bottom+scrollY,width:rect.width,height:rect.height};onOpen({content:_jsx(PopoverContent,Object.assign({placement:placement,width:parentWidth?rect.width:undefined,minWidth:parentMinWidth?rect.width:undefined},props,{onMouseEnter:hover?stopDelayedClosing:undefined,onMouseLeave:hover?onClose:undefined,children:renderContent({onClose:onFastClose})})),triggerRect:triggerRect,placement:placement,options:{dismissOnClickOutside:click||focus}});};React.useEffect(function(){return function(){return onClose();};},[]);if(shouldUseDrawer){return _jsx(DrawerPopover,Object.assign({content:content,renderContent:renderContent,children:children},props,bottomDrawerProps));}var child=React.Children.only(children);var childProps={ref:ref,onClick:show};if(hover)childProps={ref:ref,onMouseEnter:show,onMouseLeave:onClose};if(focus)childProps={ref:ref,onFocus:show};return React.cloneElement(child,childProps);}function DrawerPopover(_ref2){var children=_ref2.children,content=_ref2.content,renderContent=_ref2.renderContent,snapPoints=_ref2.snapPoints,props=_objectWithoutProperties(_ref2,_excluded2);var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),open=_React$useState2[0],setOpen=_React$useState2[1];var onClose=function onClose(){return setOpen(false);};var child=React.Children.only(children);var childProps={onClick:function onClick(){return setOpen(true);}};return _jsxs(_Fragment,{children:[React.cloneElement(child,childProps),_jsx(BottomDrawer,Object.assign({open:open,onClose:onClose,snapPoints:snapPoints},props,{children:renderContent({onClose:onClose})}))]});}
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/popover/Popover.js";var _excluded=["renderContent","content","trigger","placement","unmountOnClose","children","parentWidth","parentMinWidth","useBottomDrawer","bottomDrawerProps","watch","disabled"],_excluded2=["children","content","renderContent","snapPoints"];import React from'react';import{BottomDrawer}from"../bottomDrawer";import{PopoverContent}from"./PopoverContent";import{useRegisterOverlay}from"../overlay/OverlayHandler";import{useResponsiveValue}from"../../../responsive";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";export function Popover(_ref){var _this=this;var renderContent=_ref.renderContent,content=_ref.content,_ref$trigger=_ref.trigger,trigger=_ref$trigger===void 0?'hover':_ref$trigger,_ref$placement=_ref.placement,placement=_ref$placement===void 0?'bottom':_ref$placement,unmountOnClose=_ref.unmountOnClose,children=_ref.children,parentWidth=_ref.parentWidth,parentMinWidth=_ref.parentMinWidth,_ref$useBottomDrawer=_ref.useBottomDrawer,useBottomDrawer=_ref$useBottomDrawer===void 0?{}:_ref$useBottomDrawer,_ref$bottomDrawerProp=_ref.bottomDrawerProps,bottomDrawerProps=_ref$bottomDrawerProp===void 0?{}:_ref$bottomDrawerProp,watch=_ref.watch,disabled=_ref.disabled,props=_objectWithoutProperties(_ref,_excluded);var shouldUseDrawer=useResponsiveValue(useBottomDrawer);var ref=React.useRef(null);var _useRegisterOverlay=useRegisterOverlay({unmountOnClose:unmountOnClose}),onOpen=_useRegisterOverlay.onOpen,onUpdate=_useRegisterOverlay.onUpdate,onClose=_useRegisterOverlay.onClose,onFastClose=_useRegisterOverlay.onFastClose,stopDelayedClosing=_useRegisterOverlay.stopDelayedClosing;var click=trigger==='click';var hover=trigger==='hover';var focus=trigger==='focus';renderContent=renderContent||function(){return content;};var buildContent=function buildContent(){var _ref$current,_ref$current$getBound,_ref$current2,_ref$current2$getBoun;return _jsx(PopoverContent,Object.assign({placement:placement,width:parentWidth?(_ref$current=ref.current)==null?void 0:(_ref$current$getBound=_ref$current.getBoundingClientRect())==null?void 0:_ref$current$getBound.width:undefined,minWidth:parentMinWidth?(_ref$current2=ref.current)==null?void 0:(_ref$current2$getBoun=_ref$current2.getBoundingClientRect())==null?void 0:_ref$current2$getBoun.width:undefined},props,{onMouseEnter:hover?stopDelayedClosing:undefined,onMouseLeave:hover?onClose:undefined,children:renderContent({onClose:onFastClose})}));};var computeTriggerRect=function computeTriggerRect(){var rect=ref.current.getBoundingClientRect();var scrollX=window.scrollX||window.pageXOffset;var scrollY=window.scrollY||window.pageYOffset;return{left:rect.left+scrollX,right:rect.right+scrollX,top:rect.top+scrollY,bottom:rect.bottom+scrollY,width:rect.width,height:rect.height};};var show=function show(e){if(e&&e.stopPropagation)e.stopPropagation();var triggerRect=computeTriggerRect();onOpen({content:buildContent(),triggerRect:triggerRect,placement:placement,options:{dismissOnClickOutside:click||focus}});};React.useEffect(function(){return function(){return onClose();};},[]);React.useEffect(function(){if(!ref.current||!watch)return;onUpdate({content:buildContent(),options:{dismissOnClickOutside:click||focus}});},watch);if(shouldUseDrawer){return _jsx(DrawerPopover,Object.assign({content:content,renderContent:renderContent,children:children},props,bottomDrawerProps));}var child=React.Children.only(children);var childProps={ref:ref,onClick:show};if(hover)childProps={ref:ref,onMouseEnter:show,onMouseLeave:onClose,disabled:disabled};if(focus)childProps={ref:ref,onFocus:show,disabled:disabled};return React.cloneElement(child,childProps);}function DrawerPopover(_ref2){var children=_ref2.children,content=_ref2.content,renderContent=_ref2.renderContent,snapPoints=_ref2.snapPoints,props=_objectWithoutProperties(_ref2,_excluded2);var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),open=_React$useState2[0],setOpen=_React$useState2[1];var onClose=function onClose(){return setOpen(false);};var child=React.Children.only(children);var childProps={onClick:function onClick(){return setOpen(true);}};return _jsxs(_Fragment,{children:[React.cloneElement(child,childProps),_jsx(BottomDrawer,Object.assign({open:open,onClose:onClose,snapPoints:snapPoints},props,{children:renderContent({onClose:onClose})}))]});}

package/dist/components/structure/popover/Popover_BU.js

@@ -0,0 +1 @@
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/popover/Popover_BU.js";var _excluded=["renderContent","content","trigger","placement","unmountOnClose","children","parentWidth","parentMinWidth","useBottomDrawer","bottomDrawerProps","watch"],_excluded2=["children","content","renderContent","snapPoints"];import React from'react';import{BottomDrawer}from"../bottomDrawer";import{PopoverContent}from"./PopoverContent";import{useRegisterOverlay}from"../overlay/OverlayHandler";import{useResponsiveValue}from"../../../responsive";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";export function Popover(_ref){var _this=this;var renderContent=_ref.renderContent,content=_ref.content,_ref$trigger=_ref.trigger,trigger=_ref$trigger===void 0?'hover':_ref$trigger,_ref$placement=_ref.placement,placement=_ref$placement===void 0?'bottom':_ref$placement,unmountOnClose=_ref.unmountOnClose,children=_ref.children,parentWidth=_ref.parentWidth,parentMinWidth=_ref.parentMinWidth,_ref$useBottomDrawer=_ref.useBottomDrawer,useBottomDrawer=_ref$useBottomDrawer===void 0?{}:_ref$useBottomDrawer,_ref$bottomDrawerProp=_ref.bottomDrawerProps,bottomDrawerProps=_ref$bottomDrawerProp===void 0?{}:_ref$bottomDrawerProp,watch=_ref.watch,props=_objectWithoutProperties(_ref,_excluded);var shouldUseDrawer=useResponsiveValue(useBottomDrawer);var ref=React.useRef(null);var _useRegisterOverlay=useRegisterOverlay({unmountOnClose:unmountOnClose}),onOpen=_useRegisterOverlay.onOpen,onUpdate=_useRegisterOverlay.onUpdate,onClose=_useRegisterOverlay.onClose,onFastClose=_useRegisterOverlay.onFastClose,stopDelayedClosing=_useRegisterOverlay.stopDelayedClosing;var click=trigger==='click';var hover=trigger==='hover';var focus=trigger==='focus';renderContent=renderContent||function(){return content;};var buildContent=function buildContent(){var _ref$current,_ref$current$getBound,_ref$current2,_ref$current2$getBoun;return _jsx(PopoverContent,Object.assign({placement:placement,width:parentWidth?(_ref$current=ref.current)==null?void 0:(_ref$current$getBound=_ref$current.getBoundingClientRect())==null?void 0:_ref$current$getBound.width:undefined,minWidth:parentMinWidth?(_ref$current2=ref.current)==null?void 0:(_ref$current2$getBoun=_ref$current2.getBoundingClientRect())==null?void 0:_ref$current2$getBoun.width:undefined},props,{onMouseEnter:hover?stopDelayedClosing:undefined,onMouseLeave:hover?onClose:undefined,children:renderContent({onClose:onFastClose})}));};var computeTriggerRect=function computeTriggerRect(){var rect=ref.current.getBoundingClientRect();var scrollX=window.scrollX||window.pageXOffset;var scrollY=window.scrollY||window.pageYOffset;return{left:rect.left+scrollX,right:rect.right+scrollX,top:rect.top+scrollY,bottom:rect.bottom+scrollY,width:rect.width,height:rect.height};};var show=function show(e){if(e&&e.stopPropagation)e.stopPropagation();var triggerRect=computeTriggerRect();onOpen({content:buildContent(),triggerRect:triggerRect,placement:placement,options:{dismissOnClickOutside:click||focus}});};React.useEffect(function(){return function(){return onClose();};},[]);React.useEffect(function(){if(!ref.current)return;var triggerRect=computeTriggerRect();onUpdate({content:buildContent(),triggerRect:triggerRect,placement:placement,options:{dismissOnClickOutside:click||focus}});},[watch,renderContent]);if(shouldUseDrawer){return _jsx(DrawerPopover,Object.assign({content:content,renderContent:renderContent,children:children},props,bottomDrawerProps));}var child=React.Children.only(children);var childProps={ref:ref,onClick:show};if(hover)childProps={ref:ref,onMouseEnter:show,onMouseLeave:onClose};if(focus)childProps={ref:ref,onFocus:show};return React.cloneElement(child,childProps);}function DrawerPopover(_ref2){var children=_ref2.children,content=_ref2.content,renderContent=_ref2.renderContent,snapPoints=_ref2.snapPoints,props=_objectWithoutProperties(_ref2,_excluded2);var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),open=_React$useState2[0],setOpen=_React$useState2[1];var onClose=function onClose(){return setOpen(false);};var child=React.Children.only(children);var childProps={onClick:function onClick(){return setOpen(true);}};return _jsxs(_Fragment,{children:[React.cloneElement(child,childProps),_jsx(BottomDrawer,Object.assign({open:open,onClose:onClose,snapPoints:snapPoints},props,{children:renderContent({onClose:onClose})}))]});}

package/dist/components/tabs/ActiveTabContent.js

@@ -0,0 +1 @@
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/tabs/ActiveTabContent.js";var _excluded=["item","active"];import React from'react';import{AnimatedView}from"../animations";import{View}from"../structure";import{useTabs}from"./TabsHandler";import{jsx as _jsx}from"react/jsx-runtime";var duration=100;function Item(_ref){var item=_ref.item,active=_ref.active,props=_objectWithoutProperties(_ref,_excluded);var Content=React.useMemo(function(){return item.renderContent||item.Content;},[item.renderContent,item.Content]);var _React$useState=React.useState(active),_React$useState2=_slicedToArray(_React$useState,2),open=_React$useState2[0],setOpen=_React$useState2[1];React.useEffect(function(){if(!!active){setTimeout(function(){return setOpen(true);},duration);}else{setOpen(active);}},[active]);return _jsx(AnimatedView,Object.assign({open:open,fade:{duration:duration},flex:true,display:!open&&'none'},props,{children:_jsx(Content,{})}));}export function ActiveTabContent(_ref2){var _this=this;var lazy=_ref2.lazy,unmountOnClose=_ref2.unmountOnClose;var _useTabs=useTabs(),activeKey=_useTabs.activeKey,items=_useTabs.items;if(!(items!=null&&items.length))return false;return items.map(function(item){return _jsx(Item,{item:item,active:item.key===activeKey,lazy:lazy,unmountOnClose:unmountOnClose},item.key);});}

package/dist/components/tabs/TabsHandler.js

@@ -0,0 +1 @@
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/tabs/TabsHandler.js";import React from'react';import{jsx as _jsx}from"react/jsx-runtime";var TabsContext=React.createContext(null);export var useTabs=function useTabs(){return React.useContext(TabsContext)||{};};export function TabsHandler(_ref){var _items$;var children=_ref.children,items=_ref.items,initialKey=_ref.initialKey;var _React$useState=React.useState(initialKey||(items==null?void 0:(_items$=items[0])==null?void 0:_items$.key)),_React$useState2=_slicedToArray(_React$useState,2),activeKey=_React$useState2[0],setActiveKey=_React$useState2[1];var activeTab=React.useMemo(function(){return items==null?void 0:items.find(function(item){return item.key===activeKey;});},[activeKey]);var value={items:items,onChange:setActiveKey,activeKey:activeKey,activeTab:activeTab};return _jsx(TabsContext.Provider,{value:value,children:children});}

package/dist/components/tabs/TabsMenu.js

@@ -0,0 +1 @@
+var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/tabs/TabsMenu.js";import{Menu}from"../actions";import{SegmentedPicker}from"../inputs";import{useTabs}from"./TabsHandler";import{jsx as _jsx}from"react/jsx-runtime";export function TabsMenu(props){var _useTabs=useTabs(),activeKey=_useTabs.activeKey,items=_useTabs.items,_onChange=_useTabs.onChange;return _jsx(Menu,Object.assign({items:items,activeKey:activeKey,onChange:function onChange(_ref){var key=_ref.key;return _onChange(key);}},props));}export function TabsSegmentedMenu(props){var _useTabs2=useTabs(),activeKey=_useTabs2.activeKey,items=_useTabs2.items,onChange=_useTabs2.onChange;return _jsx(SegmentedPicker,Object.assign({options:items,valueKey:"key",value:activeKey,onChange:onChange},props));}

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export*from"./TabsHandler";export*from"./TabsMenu";export*from"./ActiveTabContent";

package/dist/helpers/string.js

@@ -1 +1 @@
-import{adjust,compose,defaultTo,head,join,juxt,map,pipe,replace,split,tail,toLower,toUpper}from'ramda';export var removeSpecialChars=replace(/[^a-zA-Z ,0-9]/g,'');export var capitalize=compose(join(''),juxt([compose(toUpper,head),tail]),toLower,defaultTo(''));export var capitalizeFirstLetter=compose(join(''),juxt([compose(toUpper,head),tail]),defaultTo(''));export var capitalizeSentence=compose(join(' '),map(capitalize),split('. '),defaultTo(''));export var capitalizeAll=compose(join(' '),map(capitalize),split(' '),defaultTo(''));export var isLower=function isLower(str){return(str||'').toLowerCase()===str;};export var capitalizeIfLower=function capitalizeIfLower(str){return isLower(str)?capitalize(str):str;};export var capitalizeAllIfLower=function capitalizeAllIfLower(str){return isLower(str)?capitalizeAll(str):str;};export var capitalizeSentenceIfLower=function capitalizeSentenceIfLower(str){return isLower(str)?capitalizeSentence(str):str;};export var getInitials=function getInitials(str){if(!str)return'--';if(str.includes(' ')){str=str.split(' ').map(head).join('');}return str.substring(0,2);};export var splitWords=split(new RegExp(/[/\-_ ]/gi));export var toKebabCase=function toKebabCase(str){return str.split('').map(function(letter,index){if(letter==='_')return'-';if((letter==null?void 0:letter.toUpperCase())===letter)return`${index!==0?'-':''}${letter==null?void 0:letter.toLowerCase()}`;return letter;}).join('');};export var toSnakeCase=pipe(toKebabCase,replace(/-/g,'_'));export var toCamelCase=pipe(splitWords,map(capitalize),adjust(0,toLower),join(''));export var truncateString=function truncateString(str,size){if(!size)return str;if(!!str&&str.length>size)return str.substring(0,size)+'...';return str;};export var truncate=truncateString;export var slugify=function slugify(text){return toSnakeCase(text);};
+import{adjust,compose,defaultTo,head,join,juxt,map,pipe,replace,split,tail,toLower,toUpper,trim}from'ramda';export var removeSpecialChars=replace(/[^a-zA-Z ,0-9]/g,'');export var capitalize=compose(join(''),juxt([compose(toUpper,head),tail]),toLower,defaultTo(''));export var capitalizeFirstLetter=compose(join(''),juxt([compose(toUpper,head),tail]),defaultTo(''));export var capitalizeSentence=compose(join(' '),map(capitalize),split('. '),defaultTo(''));export var capitalizeAll=compose(join(' '),map(capitalize),split(' '),defaultTo(''));export var isLower=function isLower(str){return(str||'').toLowerCase()===str;};export var capitalizeIfLower=function capitalizeIfLower(str){return isLower(str)?capitalize(str):str;};export var capitalizeAllIfLower=function capitalizeAllIfLower(str){return isLower(str)?capitalizeAll(str):str;};export var capitalizeSentenceIfLower=function capitalizeSentenceIfLower(str){return isLower(str)?capitalizeSentence(str):str;};export var getInitials=function getInitials(str){if(!str)return'--';if(str.includes(' ')){str=str.split(' ').map(head).join('');}return str.substring(0,2);};export var splitWords=split(new RegExp(/[/\-_ ]/gi));export var toKebabCase=function toKebabCase(str){return str.split('').map(function(letter,index){if(letter==='_')return'-';if((letter==null?void 0:letter.toUpperCase())===letter)return`${index!==0?'-':''}${letter==null?void 0:letter.toLowerCase()}`;return letter;}).join('');};export var toSnakeCase=pipe(toKebabCase,replace(/-/g,'_'));export var toCamelCase=pipe(splitWords,map(capitalize),adjust(0,toLower),join(''));export var truncateString=function truncateString(str,size){if(!size)return str;if(!!str&&str.length>size)return str.substring(0,size)+'...';return str;};export var truncate=truncateString;export var slugify=function slugify(text){return toSnakeCase(text);};export var normalizeString=pipe(toLower,trim,function(str){return str.normalize('NFD').replace(/[\u0300-\u036f]/g,'');});

package/dist/i18n/I18n.js

@@ -0,0 +1 @@
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";var _excluded=["ns","context"];export var I18n=function(){function I18n(){var options=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};_classCallCheck(this,I18n);this.language=options.language||'en';this.fallback=options.fallback||'en';this.onChangeLanguage=options.onChangeLanguage;this.resources=options.resources||{};this.loader=options.loader;}return _createClass(I18n,[{key:"addResources",value:function addResources(lang,ns,data){if(!this.resources[lang])this.resources[lang]={};this.resources[lang][ns]=Object.assign({},this.resources[lang][ns],data);}},{key:"changeLanguage",value:function changeLanguage(lang){var _this$onChangeLanguag;this.language=lang;(_this$onChangeLanguag=this.onChangeLanguage)==null?void 0:_this$onChangeLanguag.call(this,lang);}},{key:"tAsync",value:function(){var _tAsync=_asyncToGenerator(function*(key){var _this$resources$this$;var opts=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var _opts$ns=opts.ns,ns=_opts$ns===void 0?'common':_opts$ns;if(!((_this$resources$this$=this.resources[this.language])!=null&&_this$resources$this$[ns])&&this.loader){yield this._loadNamespace(this.language,ns);}return this.t(key,opts);});function tAsync(_x){return _tAsync.apply(this,arguments);}return tAsync;}()},{key:"t",value:function t(key){var _this$resources$this$2;var opts=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var _opts$ns2=opts.ns,ns=_opts$ns2===void 0?'common':_opts$ns2,context=opts.context,vars=_objectWithoutProperties(opts,_excluded);var count=vars==null?void 0:vars.count;if(key.includes(':')){var splittedKey=key.split(':');ns=splittedKey[0];key=splittedKey[1];}var langData=(_this$resources$this$2=this.resources[this.language])==null?void 0:_this$resources$this$2[ns];var value=this._resolveKey(langData,key,count,context);if(context)console.log(context,value);if(!value){var _this$resources$this$3;var fallbackData=(_this$resources$this$3=this.resources[this.fallback])==null?void 0:_this$resources$this$3[ns];value=this._resolveKey(fallbackData,key,count,context)||key;}return this._interpolate(value,vars);}},{key:"_loadNamespace",value:function(){var _loadNamespace2=_asyncToGenerator(function*(lang,ns){if(!this.loader)return;var data=yield this.loader(lang,ns);this.addResources(lang,ns,data);});function _loadNamespace(_x2,_x3){return _loadNamespace2.apply(this,arguments);}return _loadNamespace;}()},{key:"_resolveKey",value:function _resolveKey(nsData,key,count,context){if(!nsData)return null;var parts=key.split('.');var basePath=parts.slice(0,-1);var baseKey=parts[parts.length-1];var parent=basePath.reduce(function(acc,part){return acc?acc[part]:undefined;},nsData)||nsData;if(!parent)return null;if(context){var contextKey=`${baseKey}_${context}`;if(parent[contextKey]!=null){return parent[contextKey];}}if(typeof count==='number'){if(count===0){var singularKey=`${baseKey}_zero`;if(parent[singularKey]!=null){return parent[singularKey];}}if(count===1){var _singularKey=`${baseKey}_one`;if(parent[_singularKey]!=null){return parent[_singularKey];}}}return parent[baseKey];}},{key:"_interpolate",value:function _interpolate(str,vars){if(typeof str!=='string')return str;return str.replace(/\{\{(.*?)\}\}/g,function(_,v){var _vars$v$trim;return(_vars$v$trim=vars[v.trim()])!=null?_vars$v$trim:'';});}}]);}();

package/dist/i18n/I18nProvider.js

@@ -0,0 +1 @@
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/i18n/I18nProvider.js";import React from'react';import{I18n}from"./I18n";import{jsx as _jsx}from"react/jsx-runtime";var I18nContext=React.createContext();export function I18nProvider(_ref){var children=_ref.children,i18n=_ref.i18n,config=_ref.config;var i18nRef=React.useRef(i18n||new I18n(config));var _React$useState=React.useState(0),_React$useState2=_slicedToArray(_React$useState,2),v=_React$useState2[0],setVersion=_React$useState2[1];var forceUpdate=React.useCallback(function(){return setVersion(function(v){return v+1;});},[]);var changeLanguage=React.useCallback(function(lang){i18nRef.current.changeLanguage(lang);forceUpdate();},[forceUpdate]);var value=React.useMemo(function(){return{t:function t(){var _i18nRef$current;return(_i18nRef$current=i18nRef.current).t.apply(_i18nRef$current,arguments);},i18n:i18nRef.current,v:v,language:i18nRef.current.language,changeLanguage:changeLanguage};},[v,forceUpdate,changeLanguage]);return _jsx(I18nContext.Provider,{value:value,children:children});}export function useTranslation(namespace){var ctx=React.useContext(I18nContext);if(!ctx)throw new Error('useTranslation must be used inside <I18nProvider>');var t=function t(key){var opts=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};return ctx==null?void 0:ctx.t==null?void 0:ctx.t(key,Object.assign({ns:namespace},opts));};return Object.assign({},ctx,{t:t});}

package/dist/i18n/index.js

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

package/dist/index.css

@@ -62,6 +62,10 @@ button {
   opacity: 0.95;
 }
 
+/* ::placeholder { */
+/* color: rgba(127, 127, 127, 0.4); */
+/* } */
+
 @keyframes wave-effect {
   0% {
     opacity: 1;

package/dist/index.js

@@ -1 +1 @@
-export*from"./helpers";export*from"./components";export*from"./theme";export*from"./responsive";export*from"./NekoUI";export var version=41;
+export*from"./helpers";export*from"./components";export*from"./theme";export*from"./responsive";export*from"./i18n";export*from"./NekoUI";export var version=41;

package/dist/modifiers/animations/fadeEffect.web.js

@@ -0,0 +1 @@
+import{useFadeEffect as useFadeEffectNative}from"./fadeEffect.native";export var useFadeEffect=useFadeEffectNative;

package/dist/modifiers/animations/scrollEffect.web.js

@@ -0,0 +1 @@
+import{useScrollEffect as useScrollEffectNative}from"./scrollEffect.native";export var useScrollEffect=useScrollEffectNative;

package/dist/modifiers/animations/slideEffect.web.js

@@ -0,0 +1 @@
+import{useSlideEffect as useSlideEffectNative}from"./slideEffect.native";export var useSlideEffect=useSlideEffectNative;

package/dist/modifiers/overflow.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["hiddenOverflow","scroll","scrollY","scrollX","overflow","overflowY","overflowX"];import{clearProps}from"./_helpers";export function useOverflowModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var hiddenOverflow=props.hiddenOverflow,scroll=props.scroll,scrollY=props.scrollY,scrollX=props.scrollX,overflow=props.overflow,overflowY=props.overflowY,overflowX=props.overflowX,restProps=_objectWithoutProperties(props,_excluded);if(hiddenOverflow)overflow='hidden';if(scroll)overflow='scroll';if(scrollY)overflowY='scroll';if(scrollX)overflowX='scroll';var style=clearProps({overflow:overflow,overflowY:overflowY,overflowX:overflowX});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["hiddenOverflow","scroll","noScroll","scrollY","scrollX","overflow","overflowY","overflowX"];import{clearProps}from"./_helpers";export function useOverflowModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var hiddenOverflow=props.hiddenOverflow,scroll=props.scroll,noScroll=props.noScroll,scrollY=props.scrollY,scrollX=props.scrollX,overflow=props.overflow,overflowY=props.overflowY,overflowX=props.overflowX,restProps=_objectWithoutProperties(props,_excluded);if(hiddenOverflow)overflow='hidden';if(scroll)overflow='scroll';if(scrollY)overflowY='scroll';if(scrollX)overflowX='scroll';if(noScroll){if(overflow==='scroll')overflow=undefined;if(overflowY==='scroll')overflowY=undefined;if(overflowX==='scroll')overflowX=undefined;}var style=clearProps({overflow:overflow,overflowY:overflowY,overflowX:overflowX});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}

package/dist/modifiers/position.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["position","absolute","absoluteFill","fixedFill","relative","fixed","sticky","top","bottom","left","right","zIndex"];import{Platform}from"../abstractions/Platform";import{clearProps}from"./_helpers";export function usePositionModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var position=props.position,absolute=props.absolute,absoluteFill=props.absoluteFill,fixedFill=props.fixedFill,relative=props.relative,fixed=props.fixed,sticky=props.sticky,top=props.top,bottom=props.bottom,left=props.left,right=props.right,zIndex=props.zIndex,restProps=_objectWithoutProperties(props,_excluded);if(!zIndex&&!!absolute)zIndex=10;if(absolute||absoluteFill)position='absolute';if(relative)position='relative';if(fixed||fixedFill)position='fixed';if(sticky)position='sticky';if(absoluteFill||fixedFill){top=0;bottom=0;left=0;right=0;}if(Platform.OS!=='web'&&['fixed','sticky'].includes(position)){position='absolute';}var style=clearProps({position:position,top:top,bottom:bottom,left:left,right:right,zIndex:zIndex});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["position","absolute","absoluteFill","fixedFill","relative","fixed","sticky","top","bottom","left","right","zIndex"];import{Platform}from"../abstractions/Platform";import{clearProps}from"./_helpers";import{useGetSpace}from"../theme";export function usePositionModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getSpace=useGetSpace();var position=props.position,absolute=props.absolute,absoluteFill=props.absoluteFill,fixedFill=props.fixedFill,relative=props.relative,fixed=props.fixed,sticky=props.sticky,top=props.top,bottom=props.bottom,left=props.left,right=props.right,zIndex=props.zIndex,restProps=_objectWithoutProperties(props,_excluded);if(!zIndex&&!!absolute)zIndex=10;if(absolute||absoluteFill)position='absolute';if(relative)position='relative';if(fixed||fixedFill)position='fixed';if(sticky)position='sticky';top=getSpace(top);bottom=getSpace(bottom);right=getSpace(right);left=getSpace(left);if(absoluteFill||fixedFill){top=0;bottom=0;left=0;right=0;}if(Platform.OS!=='web'&&['fixed','sticky'].includes(position)){position='absolute';}var style=clearProps({position:position,top:top,bottom:bottom,left:left,right:right,zIndex:zIndex});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}

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:{xs:20,sm:30,md:35,lg:50,xl:60},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: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}}};

package/package.json

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

package/src/DynamicStyleTag.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { useColors } from './theme'
+
+export function DynamicStyleTag() {
+  const colors = useColors()
+  const placeholderColor = colors.text_op30
+
+  React.useEffect(() => {
+    const style = document.createElement('style')
+    style.innerHTML = `
+      ::placeholder {
+        color: ${placeholderColor};
+      }
+    `
+    document.head.appendChild(style)
+    return () => style.remove()
+  }, [placeholderColor])
+
+  return false
+}

package/src/DynamicStyleTag.native.js

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

package/src/NekoUI.js

@@ -1,3 +1,5 @@
+import { DynamicStyleTag } from './DynamicStyleTag'
+import { I18nProvider } from './i18n'
 import { ModalsHandler } from './components/structure/modal/handler/ModalsHandler'
 import { NotificationsHandler } from './components/feedback/notifications/NotificationsHandler'
 import { OverlayHandler } from './components/structure/overlay/OverlayHandler'
@@ -7,18 +9,21 @@ import { ThemeHandler } from './theme/ThemeHandler'
 import { ThemePickerDrawer } from './components/theme'
 import { useThemeHandler } from './theme'
 
-export function NekoUI({ children, ...props }) {
+export function NekoUI({ children, i18n, ...props }) {
   return (
     <ThemeHandler {...props}>
+      <DynamicStyleTag />
       <ResponsiveHandler>
         <PortalHandler>
           <ModalsHandler>
-            <NotificationsHandler>
-              <OverlayHandler>
-                {children}
-                <FixedComponents />
-              </OverlayHandler>
-            </NotificationsHandler>
+            <I18nProvider i18n={i18n}>
+              <NotificationsHandler>
+                <OverlayHandler>
+                  {children}
+                  <FixedComponents />
+                </OverlayHandler>
+              </NotificationsHandler>
+            </I18nProvider>
           </ModalsHandler>
         </PortalHandler>
       </ResponsiveHandler>

package/src/abstractions/AnimatedView.web.js

@@ -0,0 +1,3 @@
+import { AbsAnimatedView as NativeAbsAnimatedView } from './AnimatedView.native'
+
+export const AbsAnimatedView = NativeAbsAnimatedView

package/src/abstractions/FlatList.js

@@ -1,39 +1,3 @@
-import React from 'react'
-import { AbsView } from './View'
+import { AbsStaticList } from './StaticList'
 
-const defaultRender = () => false
-
-export function AbsFlatList({
-  data,
-  renderItem,
-  ListEmptyComponent,
-  Empty,
-  renderEmpty,
-  ListFooterComponent,
-  Footer,
-  renderFooter,
-  ListHeaderComponent,
-  Header,
-  renderHeader,
-  keyExtractor,
-  ...props
-}) {
-  ListEmptyComponent = ListEmptyComponent || Empty || defaultRender
-  ListFooterComponent = ListFooterComponent || Footer || renderFooter || defaultRender
-  ListHeaderComponent = ListHeaderComponent || Header || renderHeader || defaultRender
-  keyExtractor = keyExtractor || ((item, index) => index)
-  renderItem = renderItem || defaultRender
-
-  return (
-    <AbsView {...props}>
-      <ListHeaderComponent />
-
-      {!data?.length && <ListEmptyComponent />}
-      {data?.map?.((item, index) => (
-        <React.Fragment key={keyExtractor(item, index)}>{renderItem({ item, index })}</React.Fragment>
-      ))}
-
-      <ListFooterComponent />
-    </AbsView>
-  )
-}
+export const AbsFlatList = AbsStaticList

package/src/abstractions/FlatList.native.js

@@ -2,6 +2,9 @@ import { FlatList } from 'react-native'
 
 export const AbsFlatList = ({
   style: { height, width, ...style },
+  ItemSeparatorComponent,
+  Separator,
+  renderSeparator,
   ListEmptyComponent,
   Empty,
   renderEmpty,
@@ -11,18 +14,19 @@ export const AbsFlatList = ({
   ListHeaderComponent,
   Header,
   renderHeader,
-
   ...props
 }) => {
-  ListEmptyComponent = ListEmptyComponent || Empty || defaultRender
-  ListFooterComponent = ListFooterComponent || Footer || renderFooter || defaultRender
-  ListHeaderComponent = ListHeaderComponent || Header || renderHeader || defaultRender
+  ItemSeparatorComponent = ItemSeparatorComponent || Separator || renderSeparator
+  ListEmptyComponent = ListEmptyComponent || Empty || renderEmpty
+  ListFooterComponent = ListFooterComponent || Footer || renderFooter
+  ListHeaderComponent = ListHeaderComponent || Header || renderHeader
 
   return (
     <FlatList
       height={height}
       width={width}
       {...props}
+      ItemSeparatorComponent={ItemSeparatorComponent}
       ListEmptyComponent={ListEmptyComponent}
       ListFooterComponent={ListFooterComponent}
       ListHeaderComponent={ListHeaderComponent}

package/src/abstractions/StaticList.js

@@ -0,0 +1,51 @@
+import React from 'react'
+
+import { AbsView } from './View'
+import { LazyAction } from '../components/helpers/LazyAction'
+
+const defaultRender = () => false
+
+export function AbsStaticList({
+  data,
+  renderItem,
+  ItemSeparatorComponent,
+  Separator,
+  renderSeparator,
+  ListEmptyComponent,
+  Empty,
+  renderEmpty,
+  ListFooterComponent,
+  Footer,
+  renderFooter,
+  ListHeaderComponent,
+  Header,
+  renderHeader,
+  keyExtractor,
+  onEndReached,
+  ...props
+}) {
+  ItemSeparatorComponent = ItemSeparatorComponent || Separator || renderSeparator || defaultRender
+  ListEmptyComponent = ListEmptyComponent || Empty || renderEmpty || defaultRender
+  ListFooterComponent = ListFooterComponent || Footer || renderFooter || defaultRender
+  ListHeaderComponent = ListHeaderComponent || Header || renderHeader || defaultRender
+  keyExtractor = keyExtractor || ((item, index) => index)
+  renderItem = renderItem || defaultRender
+
+  return (
+    <AbsView {...props}>
+      <ListHeaderComponent />
+
+      {!data?.length && <ListEmptyComponent />}
+      {data?.map?.((item, index) => (
+        <React.Fragment key={keyExtractor(item, index)}>
+          {index !== 0 && <ItemSeparatorComponent />}
+          {renderItem({ item, index })}
+        </React.Fragment>
+      ))}
+
+      <LazyAction action={onEndReached} destroyOffScreen />
+
+      <ListFooterComponent />
+    </AbsView>
+  )
+}

package/src/abstractions/helpers/useSafeAreaInsets.js

@@ -0,0 +1,3 @@
+export const useSafeAreaInsets = () => {
+  return { top: 0, bottom: 0, left: 0, right: 0 }
+}

package/src/abstractions/helpers/useSafeAreaInsets.native.js

@@ -0,0 +1,3 @@
+import { useSafeAreaInsets as _useSafeAreaInsets } from 'react-native-safe-area-context'
+
+export const useSafeAreaInsets = _useSafeAreaInsets

package/src/components/actions/Dropdown.js

@@ -5,8 +5,10 @@ import { Link } from './Link'
 import { Menu } from './menu/Menu'
 import { Popover } from '../structure/popover/Popover'
 import { View } from '../structure/View'
+import { useResponsiveValue } from '../../responsive'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
+// TODO: Refactor to use default values
 export function Dropdown({ items, ...rootProps }) {
   const [_, formattedProps] = pipe(
     useThemeComponentModifier('Dropdown')
@@ -21,7 +23,7 @@ export function Dropdown({ items, ...rootProps }) {
     // useFlexModifier
   )([{}, rootProps])
 
-  const {
+  let {
     onChange,
     label,
     trigger = 'click',
@@ -33,21 +35,22 @@ export function Dropdown({ items, ...rootProps }) {
     children,
     placement,
     gap,
+    useBottomDrawer,
     ...props
   } = formattedProps
 
+  useBottomDrawer = useResponsiveValue(useBottomDrawer || { native: true, sm: true, md: true })
+
   return (
     <View className="neko-dropdown" {...props}>
       <Popover
         useParentMinWidth
         placement={placement || 'bottomLeft'}
         trigger={trigger}
-        padding="xs"
-        useBottomDrawer={{ native: true, sm: true, md: true }}
-        bottomDrawerProps={{
-          bg: 'mainBG',
-          contentProps: { bg: 'overlayBG', br: 'lg', margin: 'md' },
-        }}
+        padding={0}
+        // In case its web use the Drawer component
+        contentProps={{ padding: 0 }}
+        useBottomDrawer={useBottomDrawer}
         {...popoverProps}
         renderContent={({ onClose }) => {
           const handleChange = (...params) => {
@@ -59,8 +62,9 @@ export function Dropdown({ items, ...rootProps }) {
               vertical
               items={items}
               onChange={handleChange}
-              _linkPaddingV="lg"
-              _linkProps={{ borderB: true, padding: 'lg', borderL: 0, brColor: 'divider' }}
+              linkPaddingH={useBottomDrawer ? 'md' : 'sm'}
+              linkMinHeight={useBottomDrawer ? 'xl' : 'md'}
+              withDivider={useBottomDrawer}
             />
           )
         }}

package/src/components/actions/FloatingButton.js

@@ -0,0 +1,87 @@
+import { pipe } from 'ramda'
+
+import { AbsTouchableOpacity } from '../../abstractions/TouchableOpacity'
+import { Icon } from '../presentation'
+import { Loading } from '../state'
+import { moveScale } from '../../theme/helpers/sizeScale'
+import { useBackgroundModifier } from '../../modifiers/background'
+import { useBorderModifier } from '../../modifiers/border'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useCursorModifier } from '../../modifiers/cursor'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useDisplayModifier } from '../../modifiers/display'
+import { useFlexModifier } from '../../modifiers/flex'
+import { useFlexWrapperModifier } from '../../modifiers/flexWrapper'
+import { useFullColorModifier } from '../../modifiers/fullColor'
+import { useHoverConverter } from '../../modifiers/hover'
+import { useMarginModifier } from '../../modifiers/margin'
+import { usePaddingModifier } from '../../modifiers/padding'
+import { usePositionModifier } from '../../modifiers/position'
+import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
+import { useSizeConverter } from '../../modifiers/sizeConverter'
+import { useSizeModifier } from '../../modifiers/size'
+import { useStateModifier } from '../../modifiers/state'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS =
+  ({ bottomInset }) =>
+  ([{ sizeCode }, { square }]) => {
+    sizeCode = moveScale(sizeCode, 1)
+
+    return {
+      absolute: true,
+      shadow: true,
+      bottom: 'md',
+      marginB: bottomInset,
+      right: 'md',
+      round: !square,
+      ration: 1,
+      padding: 'xxxs',
+      height: sizeCode,
+      width: sizeCode,
+      br: sizeCode,
+      border: 1,
+      center: true,
+      pointer: true,
+      hover: {
+        opacity: 0.7,
+      },
+    }
+  }
+
+export function FloatingButton({ useSafeArea = true, ...rootProps }) {
+  const insets = useSafeAreaInsets()
+  const bottomInset = useSafeArea ? insets.bottom : 0
+
+  let [{ loading, fontColor, color, sizeCode }, formattedProps] = pipe(
+    useColorConverter('primary'),
+    useSizeConverter('elementHeights', 'md'),
+    useThemeComponentModifier('FloatingButton'),
+    useDefaultModifier(DEFAULT_PROPS({ bottomInset })),
+    useHoverConverter,
+    useCursorModifier,
+    useFullColorModifier,
+    useDisplayModifier,
+    useStateModifier,
+    useSizeModifier,
+    usePositionModifier,
+    usePaddingModifier,
+    useMarginModifier,
+    useFlexModifier,
+    useFlexWrapperModifier,
+    useBackgroundModifier,
+    useBorderModifier
+  )([{}, rootProps])
+  sizeCode = moveScale(sizeCode, 1)
+
+  const { icon, iconProps, size, ...props } = formattedProps
+
+  let content = <Icon flex color={fontColor} size={sizeCode} name={icon} loading={loading} {...iconProps} />
+  if (loading) content = <Loading size={sizeCode} color={fontColor} />
+
+  return (
+    <AbsTouchableOpacity className="neko-floating-button neko-wave-click-effect" type="button" {...props}>
+      {content}
+    </AbsTouchableOpacity>
+  )
+}

package/src/components/actions/index.js

@@ -1,4 +1,5 @@
 export * from './Button'
+export * from './FloatingButton'
 export * from './Link'
 export * from './Pressable'
 export * from './Dropdown'