@neko-os/ui 0.1.0 → 0.2.1

package/dist/modifiers/shadow.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["shadow"];import{clearProps}from"./_helpers";import{useGetColor}from"../theme/ThemeHandler";export function useShadowModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getColor=useGetColor();var shadow=props.shadow,restProps=_objectWithoutProperties(props,_excluded);var boxShadow,shadowRadius,shadowOffset,shadowOpacity,shadowColor,elevation;if(shadow===true){shadow=getColor('shadow');}else if(!!shadow){shadow=getColor(shadow);}if(!!shadow){boxShadow=`0 1px 10px ${shadow}`;shadowRadius=10;shadowOffset={width:0,height:1};shadowOpacity=1;elevation=10;shadowColor=shadow;}var style=clearProps({boxShadow:boxShadow,shadowRadius:shadowRadius,shadowOffset:shadowOffset,shadowOpacity:shadowOpacity,shadowColor:shadowColor,elevation:elevation});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=["shadow"];import{clearProps,flattenStyle}from"./_helpers";import{useGetColor}from"../theme/ThemeHandler";export function useShadowModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getColor=useGetColor();var shadow=props.shadow,restProps=_objectWithoutProperties(props,_excluded);var boxShadow,shadowRadius,shadowOffset,shadowOpacity,shadowColor,elevation;if(shadow===true){shadow=getColor('shadow');}else if(!!shadow){shadow=getColor(shadow);}if(!!shadow){boxShadow=`0 1px 10px ${shadow}`;shadowRadius=10;shadowOffset={width:0,height:1};shadowOpacity=1;elevation=10;shadowColor=shadow;}var style=clearProps({boxShadow:boxShadow,shadowRadius:shadowRadius,shadowOffset:shadowOffset,shadowOpacity:shadowOpacity,shadowColor:shadowColor,elevation:elevation});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/size.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["width","height","minH","minHeight","maxH","maxHeight","minWidth","minW","maxWidth","maxW","fullWidth","fullW","fullHeight","fullH","ratio","square","span","parentSpan"];import{Platform}from"../abstractions/Platform";import{clearProps}from"./_helpers";import{useGetElementHeight}from"../theme/ThemeHandler";export function useSizeModifier(_ref){var _span;var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getHeight=useGetElementHeight();var _ref3=props||{},width=_ref3.width,height=_ref3.height,minH=_ref3.minH,minHeight=_ref3.minHeight,maxH=_ref3.maxH,maxHeight=_ref3.maxHeight,minWidth=_ref3.minWidth,minW=_ref3.minW,maxWidth=_ref3.maxWidth,maxW=_ref3.maxW,fullWidth=_ref3.fullWidth,fullW=_ref3.fullW,fullHeight=_ref3.fullHeight,fullH=_ref3.fullH,ratio=_ref3.ratio,square=_ref3.square,span=_ref3.span,parentSpan=_ref3.parentSpan,restProps=_objectWithoutProperties(_ref3,_excluded);minHeight=getHeight(minHeight||minH);minWidth=getHeight(minWidth||minW);maxHeight=getHeight(maxHeight||maxH);maxWidth=getHeight(maxWidth||maxW);height=getHeight(height);width=getHeight(width);span=(_span=span)!=null?_span:parentSpan;if(span)width=span/24*100+'%';if(fullWidth||fullW)width='100%';if((fullHeight||fullH)&&Platform.OS==='web')height='100%';var aspectRatio=ratio;if(!!square)aspectRatio=1;var style=clearProps({height:height,width:width,minHeight:minHeight,minHeight:minHeight,maxHeight:maxHeight,minWidth:minWidth,maxWidth:maxWidth,aspectRatio:aspectRatio});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=["width","height","minH","minHeight","maxH","maxHeight","minWidth","minW","maxWidth","maxW","fullWidth","fullW","fullHeight","fullH","ratio","square","span","parentSpan"];import{Platform}from"../abstractions/Platform";import{clearProps,flattenStyle}from"./_helpers";import{useGetElementHeight}from"../theme/ThemeHandler";export function useSizeModifier(_ref){var _span;var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var getHeight=useGetElementHeight();var _ref3=props||{},width=_ref3.width,height=_ref3.height,minH=_ref3.minH,minHeight=_ref3.minHeight,maxH=_ref3.maxH,maxHeight=_ref3.maxHeight,minWidth=_ref3.minWidth,minW=_ref3.minW,maxWidth=_ref3.maxWidth,maxW=_ref3.maxW,fullWidth=_ref3.fullWidth,fullW=_ref3.fullW,fullHeight=_ref3.fullHeight,fullH=_ref3.fullH,ratio=_ref3.ratio,square=_ref3.square,span=_ref3.span,parentSpan=_ref3.parentSpan,restProps=_objectWithoutProperties(_ref3,_excluded);minHeight=getHeight(minHeight||minH);minWidth=getHeight(minWidth||minW);maxHeight=getHeight(maxHeight||maxH);maxWidth=getHeight(maxWidth||maxW);height=getHeight(height);width=getHeight(width);span=(_span=span)!=null?_span:parentSpan;if(span)width=span/24*100+'%';if(fullWidth||fullW)width='100%';if((fullHeight||fullH)&&Platform.OS==='web')height='100%';var aspectRatio=ratio;if(!!square)aspectRatio=1;var style=clearProps({height:height,width:width,minHeight:minHeight,minHeight:minHeight,maxHeight:maxHeight,minWidth:minWidth,maxWidth:maxWidth,aspectRatio:aspectRatio});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/state.js

@@ -1 +1 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["disabled","loading","onClick","onPress","onChange"];import{clearProps}from"./_helpers";export function useStateModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var disabled=props.disabled,loading=props.loading,onClick=props.onClick,onPress=props.onPress,onChange=props.onChange,restProps=_objectWithoutProperties(props,_excluded);var cursor=undefined;var opacity=props.opacity;if(!!disabled){opacity=0.3;onChange=undefined;cursor='not-allowed';}if(!!disabled||!!loading){onPress=undefined;onClick=undefined;}var style=clearProps({opacity:opacity,cursor:cursor});var newProps=clearProps({onPress:onPress,onClick:onClick,onChange:onChange});return[Object.assign({disabled:disabled,loading:loading},values),Object.assign({},newProps,restProps,{style:Object.assign({},props.style,style)})];}
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["disabled","loading","onClick","onPress","onChange"];import{clearProps,flattenStyle}from"./_helpers";export function useStateModifier(_ref){var _ref2=_slicedToArray(_ref,2),values=_ref2[0],props=_ref2[1];var disabled=props.disabled,loading=props.loading,onClick=props.onClick,onPress=props.onPress,onChange=props.onChange,restProps=_objectWithoutProperties(props,_excluded);var cursor=undefined;var opacity=props.opacity;if(!!disabled){opacity=0.3;onChange=undefined;cursor='not-allowed';}if(!!disabled||!!loading){onPress=undefined;onClick=undefined;}var style=clearProps({opacity:opacity,cursor:cursor});var newProps=clearProps({onPress:onPress,onClick:onClick,onChange:onChange});return[Object.assign({disabled:disabled,loading:loading},values),Object.assign({},newProps,restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

package/dist/modifiers/text.js

@@ -1 +1 @@
-import _objectDestructuringEmpty from"@babel/runtime/helpers/objectDestructuringEmpty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["color","textCode"],_excluded2=["opacity","bold","strong","fontWeight","weight","italic","underline","lineHeight","align","center","toRight","inherit","fontSize"];import{clearProps}from"./_helpers";import{mergePreset}from"../theme/helpers/mergePreset";import{useGetColor,useTexts}from"../theme/ThemeHandler";export function useTextModifier(_ref){var _ref2=_slicedToArray(_ref,2),_ref2$=_ref2[0],color=_ref2$.color,textCode=_ref2$.textCode,values=_objectWithoutProperties(_ref2$,_excluded),props=Object.assign({},(_objectDestructuringEmpty(_ref2[1]),_ref2[1]));var getColor=useGetColor();var texts=useTexts();if(!textCode&&!props.inherit)textCode='p';var _mergePreset=mergePreset(texts,textCode,props,'p'),opacity=_mergePreset.opacity,bold=_mergePreset.bold,strong=_mergePreset.strong,fontWeight=_mergePreset.fontWeight,weight=_mergePreset.weight,italic=_mergePreset.italic,underline=_mergePreset.underline,lineHeight=_mergePreset.lineHeight,align=_mergePreset.align,center=_mergePreset.center,toRight=_mergePreset.toRight,inherit=_mergePreset.inherit,fontSize=_mergePreset.fontSize,restProps=_objectWithoutProperties(_mergePreset,_excluded2);var fontStyle;if(italic)fontStyle='italic';var textDecorationLine;if(underline)textDecorationLine='underline';var textAlign=align;if(center)textAlign='center';if(toRight)textAlign='right';fontWeight=fontWeight||weight;if(bold||strong)fontWeight=600;var style=clearProps({fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,textAlign:textAlign,opacity:opacity,color:color,fontSize:fontSize});return[values,Object.assign({},restProps,{style:Object.assign({},props.style,style)})];}
+import _objectDestructuringEmpty from"@babel/runtime/helpers/objectDestructuringEmpty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _excluded=["color","textCode"],_excluded2=["opacity","bold","strong","fontWeight","weight","italic","underline","lineHeight","align","center","toRight","inherit","fontSize"];import{clearProps,flattenStyle}from"./_helpers";import{mergePreset}from"../theme/helpers/mergePreset";import{useGetColor,useTexts}from"../theme/ThemeHandler";export function useTextModifier(_ref){var _ref2=_slicedToArray(_ref,2),_ref2$=_ref2[0],color=_ref2$.color,textCode=_ref2$.textCode,values=_objectWithoutProperties(_ref2$,_excluded),props=Object.assign({},(_objectDestructuringEmpty(_ref2[1]),_ref2[1]));var getColor=useGetColor();var texts=useTexts();if(!textCode&&!props.inherit)textCode='p';var _mergePreset=mergePreset(texts,textCode,props,'p'),opacity=_mergePreset.opacity,bold=_mergePreset.bold,strong=_mergePreset.strong,fontWeight=_mergePreset.fontWeight,weight=_mergePreset.weight,italic=_mergePreset.italic,underline=_mergePreset.underline,lineHeight=_mergePreset.lineHeight,align=_mergePreset.align,center=_mergePreset.center,toRight=_mergePreset.toRight,inherit=_mergePreset.inherit,fontSize=_mergePreset.fontSize,restProps=_objectWithoutProperties(_mergePreset,_excluded2);var fontStyle;if(italic)fontStyle='italic';var textDecorationLine;if(underline)textDecorationLine='underline';var textAlign=align;if(center)textAlign='center';if(toRight)textAlign='right';fontWeight=fontWeight||weight;if(bold||strong)fontWeight=600;var style=clearProps({fontWeight:fontWeight,fontStyle:fontStyle,textDecorationLine:textDecorationLine,lineHeight:lineHeight,textAlign:textAlign,opacity:opacity,color:color,fontSize:fontSize});return[values,Object.assign({},restProps,{style:Object.assign({},flattenStyle(props.style),style)})];}

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)',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'}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_BLACK_THEME=mergeDeepRight(BASE_THEME,{label:'Pitch Black',colors:{primary:'#818DF9',text:'#F2F2F2',text2:'#CFCFCF',text3:'#A6A6A6',text4:'#737373',mainBG:'#0A0A0A',overlayBG:'#141414',backdrop:'#1f1f1f',shadow:'rgba(0, 0, 0, 0.7)',transparent:'rgba(0, 0, 0, 0)',divider:'#262626',blue:'#3A7BFF',yellow:'#FFC857',green:'#2ECC71',purple:'#9B5DE5',orange:'#FF8C42',cyan:'#00C2D1',red:'#FF4D4F',navy:'#1F2A44',indigo:'#5C6BC0',gray:'#8E8E93',brown:'#8B5E3C',lylac:'#C77DFF',pink:'#FF6FAE'}});

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'},components:{Card:{border:true},Section:{border:true}}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var CYBERPUNK_DARK_THEME=mergeDeepRight(BASE_THEME,{label:'Cyberpunk',colors:{primary:'#FF4FD8',text:'#F5EFFF',text2:'#D6C8FF',text3:'#A78BFA',text4:'#7C6BB3',mainBG:'#0A0614',overlayBG:'#140A26',backdrop:'#0A0A0F',shadow:'rgba(0, 0, 0, 0.7)',transparent:'rgba(0, 0, 0, 0)',divider:'#24123A',blue:'#00B3FF',yellow:'#FFD166',green:'#00F5A0',purple:'#9D4EDD',orange:'#FF7A18',cyan:'#00E5FF',red:'#FF3D6E',navy:'#1B1B3A',indigo:'#5A67FF',gray:'#8E8EAA',brown:'#8B5CF6',lylac:'#C77DFF',pink:'#FF4FD8'}});

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'},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}}});
+import{mergeDeepRight}from'ramda';import{BASE_THEME}from"./base";export var DEFAULT_MATRIX_THEME=mergeDeepRight(BASE_THEME,{label:'Hacker',colors:{primary:'#00FF41',text:'#D2FFE9',text2:'#A6F5D0',text3:'#6EE7B7',text4:'#3FAF85',mainBG:'#000000',overlayBG:'#0A0A0A',backdrop:'#000000',shadow:'rgba(0, 255, 65, 0.2)',transparent:'rgba(0, 0, 0, 0)',divider:'rgba(0,255,65, 0.3)',blue:'#00B3FF',yellow:'#E6FF3F',green:'#00FF41',purple:'#9B5DE5',orange:'#FF9F1C',cyan:'#00FFE0',red:'#FF3B3B',navy:'#001F2F',indigo:'#4B6BFF',gray:'#2E2E2E',brown:'#5C4033',lylac:'#C084FC',pink:'#FF4FD8'},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/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'},components:{Card:{border:true},Section:{border:true}}});
+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},TopBar:{borderB:true}}});

package/dist/theme/default/themes.js

@@ -1 +1 @@
-import{CYBERPUNK_DARK_THEME}from"./cyberpunkTheme";import{DEFAULT_BLACK_THEME}from"./blackTheme";import{DEFAULT_DARK_THEME}from"./darkTheme";import{DEFAULT_LIGHT_THEME}from"./lightTheme";import{DEFAULT_MATRIX_THEME}from"./hackerTheme";import{DEFAULT_MSDOS_THEME}from"./msdosTheme";import{DEFAULT_PAPER_THEME}from"./paperTheme";import{MIDNIGHT_NEON_THEME}from"./midnightTheme";export var DEFAULT_THEMES={light:DEFAULT_LIGHT_THEME,dark:DEFAULT_DARK_THEME,paper:DEFAULT_PAPER_THEME,black:DEFAULT_BLACK_THEME,midnight:MIDNIGHT_NEON_THEME,cyberpunk:CYBERPUNK_DARK_THEME,hacker:DEFAULT_MATRIX_THEME,msdos:DEFAULT_MSDOS_THEME};
+import{CYBERPUNK_DARK_THEME}from"./cyberpunkTheme";import{DEFAULT_BLACK_THEME}from"./blackTheme";import{DEFAULT_DARK_THEME}from"./darkTheme";import{DEFAULT_LIGHT_THEME}from"./lightTheme";import{DEFAULT_MATRIX_THEME}from"./hackerTheme";import{DEFAULT_PAPER_THEME}from"./paperTheme";export var DEFAULT_THEMES={light:DEFAULT_LIGHT_THEME,dark:DEFAULT_DARK_THEME,paper:DEFAULT_PAPER_THEME,black:DEFAULT_BLACK_THEME,cyberpunk:CYBERPUNK_DARK_THEME,hacker:DEFAULT_MATRIX_THEME};

package/package.json

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

package/src/NekoUI.js

@@ -1,6 +1,6 @@
 import { DynamicStyleTag } from './DynamicStyleTag'
 import { I18nProvider } from './i18n'
-import { ModalsHandler } from './components/structure/modal/handler/ModalsHandler'
+import { ModalsHandler } from './components/modals/modal/handler/ModalsHandler'
 import { NotificationsHandler } from './components/feedback/notifications/NotificationsHandler'
 import { OverlayHandler } from './components/structure/overlay/OverlayHandler'
 import { PortalHandler } from './components/helpers/PortalHandler'

package/src/abstractions/FlatList.native.js

@@ -1,7 +1,7 @@
 import { FlatList } from 'react-native'
 
 export const AbsFlatList = ({
-  style: { height, width, ...style },
+  style: { height, width, flex, ...style },
   ItemSeparatorComponent,
   Separator,
   renderSeparator,
@@ -25,6 +25,7 @@ export const AbsFlatList = ({
     <FlatList
       height={height}
       width={width}
+      style={{ flex }}
       {...props}
       ItemSeparatorComponent={ItemSeparatorComponent}
       ListEmptyComponent={ListEmptyComponent}

package/src/abstractions/ScrollView.native.js

@@ -1,5 +1,5 @@
 import { ScrollView } from 'react-native'
 
-export const AbsScrollView = ({ style: { height, width, ...style }, ...props }) => {
-  return <ScrollView height={height} width={width} {...props} contentContainerStyle={style} />
+export const AbsScrollView = ({ style: { height, width, flex, ...style }, ...props }) => {
+  return <ScrollView height={height} width={width} style={{ flex }} {...props} contentContainerStyle={style} />
 }

package/src/components/actions/ActionsDrawer.js

@@ -1,7 +1,7 @@
 import { pipe } from 'ramda'
 
-import { BottomDrawer, TopBar, View } from '../structure'
-import { DrawerScrollView } from '../structure/bottomDrawer'
+import { TopBar, View } from '../structure'
+import { BottomDrawer, DrawerScrollView } from '../modals/bottomDrawer'
 import { Menu } from './menu/Menu'
 import { Section } from '../sections'
 import { useDefaultModifier } from '../../modifiers/default'

package/src/components/actions/Dropdown.js

@@ -1,10 +1,10 @@
 import { pipe } from 'ramda'
 
+import { DrawerScrollView } from '../modals'
 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'
@@ -59,7 +59,7 @@ export function Dropdown({ items, ...rootProps }) {
             onClose()
           }
           return (
-            <ScrollView>
+            <DrawerScrollView>
               <Menu
                 vertical
                 items={items}
@@ -68,7 +68,7 @@ export function Dropdown({ items, ...rootProps }) {
                 linkMinHeight={useBottomDrawer ? 'xl' : 'md'}
                 withDivider={useBottomDrawer}
               />
-            </ScrollView>
+            </DrawerScrollView>
           )
         }}
       >

package/src/components/actions/FloatingMenu.js

@@ -26,7 +26,7 @@ export function FloatingMenu({ fixed, onChange, items, activeIndex, size = 'md',
                 color={isActive ? 'primary' : 'text3'}
               />
               {!!item.label && (
-                <Text size="xxs" center color={isActive ? 'primary' : 'text3'} strong>
+                <Text size="xxs" center color={isActive ? 'primary' : 'text3'} strong numberOfLines={1}>
                   {item.label}
                 </Text>
               )}

package/src/components/feedback/alerter.js

@@ -2,7 +2,7 @@ import { is } from 'ramda'
 
 import { Button } from '../actions'
 import { Result } from '../presentation'
-import { useModalOpener } from '../structure/modal'
+import { useModalOpener } from '../modals/modal'
 
 export function useAlerter() {
   const { open } = useModalOpener()

package/src/components/feedback/confirmer.js

@@ -5,7 +5,7 @@ import { Button } from '../actions'
 import { RESULT_TYPES } from '../presentation/Result'
 import { Result } from '../presentation'
 import { View } from '../structure/View'
-import { useModalOpener } from '../structure/modal'
+import { useModalOpener } from '../modals/modal'
 
 function Footer({ cancelLabel, confirmLabel, onConfirm, type, onClose }) {
   const [loading, setLoading] = React.useState(false)

package/src/components/index.js

@@ -3,6 +3,7 @@ export * from './animations'
 export * from './form'
 export * from './presentation'
 export * from './structure'
+export * from './modals'
 export * from './text'
 export * from './helpers'
 export * from './inputs'

package/src/components/inputs/Picker.js

@@ -2,7 +2,7 @@ import { is } from 'ramda'
 import React from 'react'
 
 import { Col } from '../structure/Col'
-import { DrawerFlatList } from '../structure/bottomDrawer'
+import { DrawerFlatList } from '../modals/bottomDrawer'
 import { LoadingView } from '../state/LoadingView'
 import { Row } from '../structure/Row'
 import { View } from '../structure'

package/src/components/{structure → modals}/bottomDrawer/native/BottomDrawer.js

@@ -12,7 +12,7 @@ import React from 'react'
 import { DrawerHandle } from './DrawerHandle'
 import { DrawerProvider } from './DrawerContext'
 import { Pressable } from '../../../actions/Pressable'
-import { View } from '../../View'
+import { View } from '../../../structure/View'
 import { normalizeSnapPoints, findClosestSnapPoint } from './utils'
 import { useColors } from '../../../../theme/ThemeHandler'
 

package/src/components/{structure → modals}/bottomDrawer/native/DrawerHandle.js

@@ -1,5 +1,5 @@
 import { Divider } from '../../../helpers/Separator'
-import { View } from '../../View'
+import { View } from '../../../structure/View'
 
 export function DrawerHandle({ hide }) {
   if (!!hide) return false

package/src/components/modals/index.js

@@ -0,0 +1,4 @@
+export * from './modal'
+export * from './drawer'
+export * from './bottomDrawer'
+export * from './router'

package/src/components/{structure → modals}/modal/Modal.native.js

@@ -6,7 +6,7 @@ import { ModalContent } from './ModalContent'
 import { ModalFooter } from './ModalFooter'
 import { ModalHeader } from './ModalHeader'
 import { Pressable } from '../../actions/Pressable'
-import { View } from '../View'
+import { View } from '../../structure/View'
 import { useDefaultModifier } from '../../../modifiers/default'
 import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
 

package/src/components/{structure → modals}/modal/ModalBackdrop.js

@@ -2,7 +2,7 @@ import { pipe } from 'ramda'
 import React from 'react'
 
 import { AnimatedView } from '../../animations/AnimatedView'
-import { SafeAreaView } from '../SafeAreaView'
+import { SafeAreaView } from '../../structure/SafeAreaView'
 import { useDefaultModifier } from '../../../modifiers/default'
 import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
 

package/src/components/{structure → modals}/modal/ModalContent.js

@@ -1,6 +1,6 @@
 import { pipe } from 'ramda'
 
-import { View } from '../View'
+import { View } from '../../structure/View'
 import { useDefaultModifier } from '../../../modifiers/default'
 import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
 

package/src/components/{structure → modals}/modal/ModalFooter.js

@@ -1,6 +1,6 @@
 import { pipe } from 'ramda'
 
-import { View } from '../View'
+import { View } from '../../structure/View'
 import { moveScale } from '../../../theme/helpers/sizeScale'
 import { useDefaultModifier } from '../../../modifiers/default'
 import { useSizeConverter } from '../../../modifiers/sizeConverter'

package/src/components/{structure → modals}/modal/ModalHeader.js

@@ -3,7 +3,7 @@ import { pipe } from 'ramda'
 import { Icon } from '../../presentation/Icon'
 import { Link } from '../../actions/Link'
 import { Text } from '../../text/Text'
-import { View } from '../View'
+import { View } from '../../structure/View'
 import { moveScale } from '../../../theme/helpers/sizeScale'
 import { useDefaultModifier } from '../../../modifiers/default'
 import { useSizeConverter } from '../../../modifiers/sizeConverter'

package/src/components/modals/router/ModalRoute.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react'
+
+import { useModalsRouterContext } from './ModalsRouterContext'
+
+export function ModalRoute({ name, component, type = 'modal', ...containerProps }) {
+  const { registerRoute, unregisterRoute } = useModalsRouterContext()
+
+  useEffect(() => {
+    if (!name || !registerRoute) return
+    registerRoute(name, { component, type, containerProps })
+    return () => unregisterRoute?.(name)
+  }, [name])
+
+  return null
+}

package/src/components/modals/router/ModalsRouter.js

@@ -0,0 +1,120 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+
+import { BottomDrawer } from '../bottomDrawer'
+import { Drawer } from '../drawer'
+import { Modal } from '../modal/Modal'
+import { ModalRouteContext, ModalsRouterContext, ModalsStackContext } from './ModalsRouterContext'
+
+const CONTAINERS = {
+  modal: Modal,
+  drawer: Drawer,
+  bottomDrawer: BottomDrawer,
+}
+
+export function ModalsRouter({ children }) {
+  const [stack, setStack] = useState([])
+  const [renderStack, setRenderStack] = useState([])
+  const [containerOverrides, setContainerOverrides] = useState({})
+  const keyRef = useRef(0)
+  const routesRef = useRef({})
+
+  const registerRoute = useCallback((name, config) => {
+    routesRef.current[name] = config
+  }, [])
+
+  const unregisterRoute = useCallback((name) => {
+    delete routesRef.current[name]
+  }, [])
+
+  const updateContainerProps = useCallback((key, props) => {
+    setContainerOverrides((prev) => ({
+      ...prev,
+      [key]: { ...prev[key], ...props },
+    }))
+  }, [])
+
+  const push = useCallback((path, params) => {
+    const key = ++keyRef.current
+    const entry = { key, path, params }
+    setStack((prev) => [...prev, entry])
+    setRenderStack((prev) => [...prev, { ...entry, open: true }])
+  }, [])
+
+  const closeByKey = useCallback((key) => {
+    setStack((prev) => prev.filter((e) => e.key !== key))
+    setRenderStack((prev) => prev.map((e) => (e.key === key ? { ...e, open: false } : e)))
+    setTimeout(() => {
+      setRenderStack((prev) => prev.filter((e) => e.key !== key))
+    }, 600)
+  }, [])
+
+  const goBack = useCallback(() => {
+    setStack((prev) => {
+      if (prev.length === 0) return prev
+      const last = prev[prev.length - 1]
+      setRenderStack((rs) => rs.map((e) => (e.key === last.key ? { ...e, open: false } : e)))
+      setTimeout(() => {
+        setRenderStack((rs) => rs.filter((e) => e.key !== last.key))
+      }, 600)
+      return prev.slice(0, -1)
+    })
+  }, [])
+
+  const closeAll = useCallback(() => {
+    setStack([])
+    setRenderStack((prev) => {
+      const closing = prev.map((e) => ({ ...e, open: false }))
+      setTimeout(() => {
+        setRenderStack([])
+      }, 600)
+      return closing
+    })
+  }, [])
+
+  // Static — never changes, so consumers like useModalsNavigation
+  // and ModalRoute don't re-render when the stack changes
+  const actionsValue = useMemo(
+    () => ({ push, goBack, closeAll, registerRoute, unregisterRoute }),
+    [push, goBack, closeAll, registerRoute, unregisterRoute]
+  )
+
+  // Dynamic — only useAllModalsParams subscribes to this
+  const stackValue = useMemo(() => ({ stack }), [stack])
+
+  // Nest modals inside each other so each RN Modal presents from
+  // the previous modal's view controller (required for iOS stacking).
+  // Context providers go INSIDE Container children so they survive
+  // the Portal teleport on web (Portal re-mounts content at PortalHandler level).
+  const nestedModals = renderStack.reduceRight((inner, entry) => {
+    const route = routesRef.current[entry.path]
+    if (!route) return inner
+
+    const Container = CONTAINERS[route.type] || Modal
+    const Component = route.component
+
+    const overrides = containerOverrides[entry.key]
+    const updateContainer = (props) => updateContainerProps(entry.key, props)
+
+    return (
+      <Container key={entry.key} open={entry.open} onClose={() => closeByKey(entry.key)} {...route.containerProps} {...overrides}>
+        <ModalsRouterContext.Provider value={actionsValue}>
+          <ModalsStackContext.Provider value={stackValue}>
+            <ModalRouteContext.Provider value={{ params: entry.params, path: entry.path, key: entry.key, updateContainer }}>
+              <Component />
+              {inner}
+            </ModalRouteContext.Provider>
+          </ModalsStackContext.Provider>
+        </ModalsRouterContext.Provider>
+      </Container>
+    )
+  }, null)
+
+  return (
+    <ModalsRouterContext.Provider value={actionsValue}>
+      <ModalsStackContext.Provider value={stackValue}>
+        {children}
+        {nestedModals}
+      </ModalsStackContext.Provider>
+    </ModalsRouterContext.Provider>
+  )
+}

package/src/components/modals/router/ModalsRouterContext.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+// Static context — actions that never change (push, goBack, etc.)
+const ModalsRouterContext = React.createContext(null)
+export const useModalsRouterContext = () => React.useContext(ModalsRouterContext) || {}
+export { ModalsRouterContext }
+
+// Dynamic context — stack data that changes on push/goBack
+const ModalsStackContext = React.createContext(null)
+export const useModalsStackContext = () => React.useContext(ModalsStackContext) || {}
+export { ModalsStackContext }
+
+// Per-entry context — params for each rendered modal
+const ModalRouteContext = React.createContext(null)
+export const useModalRouteContext = () => React.useContext(ModalRouteContext) || {}
+export { ModalRouteContext }

package/src/components/modals/router/index.js

@@ -0,0 +1,6 @@
+export { ModalsRouter } from './ModalsRouter'
+export { ModalRoute } from './ModalRoute'
+export { useModalsNavigation } from './useModalsNavigation'
+export { useModalParams } from './useModalParams'
+export { useAllModalsParams } from './useAllModalsParams'
+export { useUpdateModalContainer } from './useUpdateModalContainer'

package/src/components/modals/router/useAllModalsParams.js

@@ -0,0 +1,6 @@
+import { useModalsStackContext } from './ModalsRouterContext'
+
+export function useAllModalsParams() {
+  const { stack } = useModalsStackContext()
+  return (stack || []).map(({ path, params, key }) => ({ path, params, key }))
+}

package/src/components/modals/router/useModalParams.js

@@ -0,0 +1,6 @@
+import { useModalRouteContext } from './ModalsRouterContext'
+
+export function useModalParams() {
+  const { params } = useModalRouteContext()
+  return params || {}
+}

package/src/components/modals/router/useModalsNavigation.js

@@ -0,0 +1,6 @@
+import { useModalsRouterContext } from './ModalsRouterContext'
+
+export function useModalsNavigation() {
+  const { push, goBack, closeAll } = useModalsRouterContext()
+  return { push, goBack, closeAll }
+}

package/src/components/modals/router/useUpdateModalContainer.js

@@ -0,0 +1,6 @@
+import { useModalRouteContext } from './ModalsRouterContext'
+
+export function useUpdateModalContainer() {
+  const { updateContainer } = useModalRouteContext()
+  return updateContainer
+}

package/src/components/sections/SectionItemDropdown.js

@@ -0,0 +1,68 @@
+import { pipe } from 'ramda'
+
+import { IconLabel } from '../presentation'
+import { Link } from '../actions'
+import { Menu } from '../actions/menu/Menu'
+import { Popover } from '../structure/popover/Popover'
+import { ScrollView } from '../list'
+import { SectionItem } from './SectionItem'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useResponsiveValue } from '../../responsive'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  paddingV: 'sm',
+  minH: 'md',
+  icon: 'arrow-down-s-fill',
+}
+
+export function SectionItemDropdown({ children, value, valueLabel, items, onChange, ...rootProps }) {
+  const [{ color }, formattedProps] = pipe(
+    useColorConverter(),
+    useThemeComponentModifier('SectionItemDropdown'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  let { icon, iconLabelProps, trigger = 'click', placement, popoverProps, useBottomDrawer, ...props } = formattedProps
+
+  useBottomDrawer = useResponsiveValue(useBottomDrawer || { native: true, sm: true, md: true })
+
+  return (
+    <Popover
+      useParentMinWidth
+      placement={placement || 'bottomRight'}
+      trigger={trigger}
+      padding={0}
+      contentProps={{ padding: 0 }}
+      useBottomDrawer={useBottomDrawer}
+      {...popoverProps}
+      renderContent={({ onClose }) => {
+        const handleChange = (...params) => {
+          if (onChange) onChange(...params)
+          onClose()
+        }
+        return (
+          <ScrollView>
+            <Menu
+              vertical
+              items={items}
+              onChange={handleChange}
+              linkPaddingH={useBottomDrawer ? 'md' : 'sm'}
+              linkMinHeight={useBottomDrawer ? 'xl' : 'md'}
+              withDivider={useBottomDrawer}
+            />
+          </ScrollView>
+        )
+      }}
+    >
+      <Link className="neko-section-item-dropdown">
+        <SectionItem color={color} {...props}>
+          {children || (
+            <IconLabel gap={2} invert color={color} {...iconLabelProps} label={valueLabel || value} icon={icon} />
+          )}
+        </SectionItem>
+      </Link>
+    </Popover>
+  )
+}

package/src/components/sections/index.js

@@ -1,3 +1,4 @@
 export * from './Section'
 export * from './SectionItem'
+export * from './SectionItemDropdown'
 export * from './SectionItemLink'

package/src/components/structure/index.js

@@ -7,9 +7,6 @@ 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'

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

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { BottomDrawer } from '../bottomDrawer'
+import { BottomDrawer } from '../../modals/bottomDrawer'
 import { PopoverContent } from './PopoverContent'
 import { useRegisterOverlay } from '../overlay/OverlayHandler'
 import { useResponsiveValue } from '../../../responsive'

package/src/components/structure/popover/Popover.native.js

@@ -1,7 +1,7 @@
 import { Modal, TouchableWithoutFeedback } from 'react-native'
 import React from 'react'
 
-import { BottomDrawer } from '../bottomDrawer'
+import { BottomDrawer } from '../../modals/bottomDrawer'
 import { PopoverContent } from './PopoverContent'
 import { View } from '../View'
 import { calculatePosition } from '../overlay/calculatePosition'

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

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { BottomDrawer } from '../bottomDrawer'
+import { BottomDrawer } from '../../modals/bottomDrawer'
 import { PopoverContent } from './PopoverContent'
 import { useRegisterOverlay } from '../overlay/OverlayHandler'
 import { useResponsiveValue } from '../../../responsive'

package/src/components/theme/ThemePickerDrawer.js

@@ -1,13 +1,12 @@
-import { BottomDrawer } from '../structure'
-import { ScrollView } from '../list/ScrollView'
+import { BottomDrawer, DrawerScrollView } from '../modals/bottomDrawer'
 import { ThemePicker } from './ThemePicker'
 
 export function ThemePickerDrawer({ open, onClose, onChange }) {
   return (
     <BottomDrawer open={open} onClose={onClose} maxWidth={550} snapPoints={['50%', '85%']}>
-      <ScrollView padding="md">
+      <DrawerScrollView padding="md">
         <ThemePicker onChange={onChange} />
-      </ScrollView>
+      </DrawerScrollView>
     </BottomDrawer>
   )
 }

package/src/modifiers/_helpers.js

@@ -1,3 +1,6 @@
 import { pickBy } from 'ramda'
 
 export const clearProps = pickBy((item) => item !== undefined)
+
+export const flattenStyle = (style) =>
+  Array.isArray(style) ? Object.assign({}, ...style) : style