@neko-os/ui 0.2.3 → 0.3.0

package/dist/components/actions/FloatingMenu.js

@@ -1 +1,39 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/FloatingMenu.js";var _excluded=["fixed","onChange","items","activeIndex","size","WrapperView"];import{Icon}from"../presentation";import{Link}from"./Link";import{Text}from"../text";import{View}from"../structure";import{moveScale}from"../../theme/helpers/sizeScale";import{useSafeAreaInsets}from"../../abstractions/helpers/useSafeAreaInsets";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function FloatingMenu(_ref){var _this=this;var fixed=_ref.fixed,onChange=_ref.onChange,items=_ref.items,activeIndex=_ref.activeIndex,_ref$size=_ref.size,size=_ref$size===void 0?'md':_ref$size,WrapperView=_ref.WrapperView,props=_objectWithoutProperties(_ref,_excluded);var insets=useSafeAreaInsets();var height=moveScale(size,2);var bg=!WrapperView?'overlayBG':null;WrapperView=WrapperView||View;return _jsx(View,{absolute:!fixed,fixed:fixed,left:"md",right:"md",centerH:true,bottom:Math.max(insets.bottom,16),children:_jsx(WrapperView,Object.assign({height:height,shadow:true,round:true,row:true,paddingH:"sm",bg:bg},props,{children:items.map(function(item,index){var _item$icon;var isActive=index===activeIndex;return _jsxs(Link,{onPress:function onPress(){return onChange(item,index);},center:true,padding:"xs",gap:3,width:height,round:true,children:[_jsx(Icon,{name:isActive?(_item$icon=item.icon)==null?void 0:_item$icon.replace(/line(?=[^line]*$)/,'fill'):item.icon,size:height,color:isActive?'primary':'text3'}),!!item.label&&_jsx(Text,{size:"xxs",center:true,color:isActive?'primary':'text3',strong:true,numberOfLines:1,children:item.label})]},index);})}))});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/FloatingMenu.js";var _excluded = ["fixed", "onChange", "items", "activeIndex", "size", "WrapperView"];function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { Icon } from "../presentation";
+import { Link } from "./Link";
+import { Text } from "../text";
+import { View } from "../structure";
+import { moveScale } from "../../theme/helpers/sizeScale";
+import { useSafeAreaInsets } from "../../abstractions/helpers/useSafeAreaInsets";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+export function FloatingMenu(_ref) {var _this = this;var fixed = _ref.fixed,onChange = _ref.onChange,items = _ref.items,activeIndex = _ref.activeIndex,_ref$size = _ref.size,size = _ref$size === void 0 ? 'md' : _ref$size,WrapperView = _ref.WrapperView,props = _objectWithoutProperties(_ref, _excluded);
+  var insets = useSafeAreaInsets();
+  var height = moveScale(size, 2);
+
+  var bg = !WrapperView ? 'overlayBG' : null;
+  WrapperView = WrapperView || View;
+
+  return (
+    _jsx(View, { absolute: !fixed, fixed: fixed, left: "md", right: "md", centerH: true, bottom: Math.max(insets.bottom / 2, 16), children:
+      _jsx(WrapperView, Object.assign({ height: height, shadow: true, round: true, row: true, paddingH: "sm", bg: bg }, props, { children:
+        items.map(function (item, index) {var _item$icon;
+          var isActive = index === activeIndex;
+
+          return (
+            _jsxs(Link, { onPress: function onPress() {return onChange(item, index);}, center: true, padding: "xs", gap: 3, width: height, round: true, children: [
+              _jsx(Icon, {
+                name: isActive ? (_item$icon = item.icon) == null ? void 0 : _item$icon.replace(/line(?=[^line]*$)/, 'fill') : item.icon,
+                size: height,
+                color: isActive ? 'primary' : 'text3' }
+              ),
+              !!item.label &&
+              _jsx(Text, { size: "xxs", center: true, color: isActive ? 'primary' : 'text3', strong: true, numberOfLines: 1, children:
+                item.label }
+              )] }, index
+
+            ));
+
+        }) })
+      ) }
+    ));
+
+}

package/dist/components/actions/Link.js

@@ -1 +1,66 @@
-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/actions/Link.js";var _excluded=["label","children","href","target"];import{pipe,is}from'ramda';import{AbsTouchableOpacity}from"../../abstractions/TouchableOpacity";import{LoadingView}from"../state/LoadingView";import{Text}from"../text/Text";import{useAnimationModifier}from"../../modifiers/animation";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{useHoverConverter}from"../../modifiers/hover";import{useMarginModifier}from"../../modifiers/margin";import{usePaddingModifier}from"../../modifiers/padding";import{usePositionModifier}from"../../modifiers/position";import{useSizeModifier}from"../../modifiers/size";import{useStateModifier}from"../../modifiers/state";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx}from"react/jsx-runtime";var DEFAULT_PROPS={pointer:true,hover:{br:'md',bg:'text4_op10'}};export function Link(_ref){var label=_ref.label,children=_ref.children,href=_ref.href,target=_ref.target,rootProps=_objectWithoutProperties(_ref,_excluded);var _pipe=pipe(useDefaultModifier(DEFAULT_PROPS),useHoverConverter,useBackgroundModifier,useColorConverter('primary'),useThemeComponentModifier('Link'),useCursorModifier,useAnimationModifier,useSizeModifier,useFlexWrapperModifier,useDisplayModifier,useStateModifier,useBorderModifier,usePositionModifier,usePaddingModifier,useMarginModifier,useFlexModifier)([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_pipe2$=_pipe2[0],isHover=_pipe2$.isHover,loading=_pipe2$.loading,color=_pipe2$.color,props=_pipe2[1];if(!!label||is(String,children)){children=_jsx(Text,Object.assign({color:color},props,{children:label||children}));}return _jsx(LoadingView,{active:loading,noWrapper:true,replaceChildren:true,children:_jsx(AbsTouchableOpacity,Object.assign({className:"neko-link",link:true,target:target,href:!props.disabled&&href},props,{children:children}))});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/Link.js";var _excluded = ["label", "children", "href", "target"];function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { pipe, is } from 'ramda';
+
+import { AbsTouchableOpacity } from "../../abstractions/TouchableOpacity";
+import { LoadingView } from "../state/LoadingView";
+import { Text } from "../text/Text";
+import { useAnimationModifier } from "../../modifiers/animation";
+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 { useHoverConverter } from "../../modifiers/hover";
+import { useMarginModifier } from "../../modifiers/margin";
+import { usePaddingModifier } from "../../modifiers/padding";
+import { usePositionModifier } from "../../modifiers/position";
+import { useSizeModifier } from "../../modifiers/size";
+import { useStateModifier } from "../../modifiers/state";
+import { useThemeComponentModifier } from "../../modifiers/themeComponent";import { jsx as _jsx } from "react/jsx-runtime";
+
+var DEFAULT_PROPS = {
+  pointer: true,
+  hover: {
+    br: 'md',
+    bg: 'text4_op10'
+  }
+};
+
+export function Link(_ref) {var label = _ref.label,children = _ref.children,href = _ref.href,target = _ref.target,rootProps = _objectWithoutProperties(_ref, _excluded);
+  var _pipe = pipe(
+      useDefaultModifier(DEFAULT_PROPS),
+      useHoverConverter,
+      useBackgroundModifier,
+      useColorConverter('primary'),
+      useThemeComponentModifier('Link'),
+      useCursorModifier,
+      useAnimationModifier,
+      useSizeModifier,
+      useFlexWrapperModifier,
+      useDisplayModifier,
+      useStateModifier,
+      useBorderModifier,
+      usePositionModifier,
+      usePaddingModifier,
+      useMarginModifier,
+      useFlexModifier
+    )([{}, rootProps]),_pipe2 = _slicedToArray(_pipe, 2),_pipe2$ = _pipe2[0],isHover = _pipe2$.isHover,loading = _pipe2$.loading,color = _pipe2$.color,props = _pipe2[1];
+
+  if (!!label || is(String, children)) {
+    children =
+    _jsx(Text, Object.assign({ color: color }, props, { children:
+      label || children })
+    );
+
+  }
+
+  return (
+    _jsx(LoadingView, { active: loading, noWrapper: true, replaceChildren: true, children:
+      _jsx(AbsTouchableOpacity, Object.assign({ className: "neko-link", link: true, target: target, href: !props.disabled && href }, props, { children:
+        children })
+      ) }
+    ));
+
+}

package/dist/components/actions/Pressable.js

@@ -1 +1,38 @@
-import _objectDestructuringEmpty from"@babel/runtime/helpers/objectDestructuringEmpty";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/actions/Pressable.js";var _excluded=["children","href","target"];import{pipe}from'ramda';import{AbsPressable}from"../../abstractions/Pressable";import{useAnimationModifier}from"../../modifiers/animation";import{useBackgroundModifier}from"../../modifiers/background";import{useBorderModifier}from"../../modifiers/border";import{useDisplayModifier}from"../../modifiers/display";import{useFlexModifier}from"../../modifiers/flex";import{useFlexWrapperModifier}from"../../modifiers/flexWrapper";import{useMarginModifier}from"../../modifiers/margin";import{usePaddingModifier}from"../../modifiers/padding";import{usePositionModifier}from"../../modifiers/position";import{useSizeModifier}from"../../modifiers/size";import{useStateModifier}from"../../modifiers/state";import{useThemeComponentModifier}from"../../modifiers/themeComponent";import{jsx as _jsx}from"react/jsx-runtime";export function Pressable(_ref){var children=_ref.children,href=_ref.href,target=_ref.target,rootProps=_objectWithoutProperties(_ref,_excluded);var _pipe=pipe(useThemeComponentModifier('Pressable'),useBackgroundModifier,useAnimationModifier,useSizeModifier,useFlexWrapperModifier,useDisplayModifier,useStateModifier,useBorderModifier,usePositionModifier,usePaddingModifier,useMarginModifier,useFlexModifier)([{},rootProps]),_pipe2=_slicedToArray(_pipe,2);_objectDestructuringEmpty(_pipe2[0]);var props=_pipe2[1];return _jsx(AbsPressable,Object.assign({className:"neko-pressable",link:true,target:target,href:!props.disabled&&href},props,{children:children}));}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/Pressable.js";var _excluded = ["children", "href", "target"];function _objectDestructuringEmpty(t) {if (null == t) throw new TypeError("Cannot destructure " + t);}function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { pipe } from 'ramda';
+
+import { AbsPressable } from "../../abstractions/Pressable";
+import { useAnimationModifier } from "../../modifiers/animation";
+import { useBackgroundModifier } from "../../modifiers/background";
+import { useBorderModifier } from "../../modifiers/border";
+import { useDisplayModifier } from "../../modifiers/display";
+import { useFlexModifier } from "../../modifiers/flex";
+import { useFlexWrapperModifier } from "../../modifiers/flexWrapper";
+import { useMarginModifier } from "../../modifiers/margin";
+import { usePaddingModifier } from "../../modifiers/padding";
+import { usePositionModifier } from "../../modifiers/position";
+import { useSizeModifier } from "../../modifiers/size";
+import { useStateModifier } from "../../modifiers/state";
+import { useThemeComponentModifier } from "../../modifiers/themeComponent";import { jsx as _jsx } from "react/jsx-runtime";
+
+export function Pressable(_ref) {var children = _ref.children,href = _ref.href,target = _ref.target,rootProps = _objectWithoutProperties(_ref, _excluded);
+  var _pipe = pipe(
+      useThemeComponentModifier('Pressable'),
+      useBackgroundModifier,
+      useAnimationModifier,
+      useSizeModifier,
+      useFlexWrapperModifier,
+      useDisplayModifier,
+      useStateModifier,
+      useBorderModifier,
+      usePositionModifier,
+      usePaddingModifier,
+      useMarginModifier,
+      useFlexModifier
+    )([{}, rootProps]),_pipe2 = _slicedToArray(_pipe, 2);_objectDestructuringEmpty(_pipe2[0]);var props = _pipe2[1];
+
+  return (
+    _jsx(AbsPressable, Object.assign({ className: "neko-pressable", link: true, target: target, href: !props.disabled && href }, props, { children:
+      children })
+    ));
+
+}

package/dist/components/actions/index.js

@@ -1 +1,9 @@
-export*from"./Button";export*from"./FloatingButton";export*from"./Link";export*from"./Pressable";export*from"./Dropdown";export*from"./Breadcrumb";export*from"./menu/Menu";export*from"./FloatingMenu";export*from"./ActionsDrawer";
+export * from "./Button";
+export * from "./FloatingButton";
+export * from "./Link";
+export * from "./Pressable";
+export * from "./Dropdown";
+export * from "./Breadcrumb";
+export * from "./menu/Menu";
+export * from "./FloatingMenu";
+export * from "./ActionsDrawer";

package/dist/components/actions/menu/HorizontalMenu.js

@@ -1 +1,98 @@
-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/actions/menu/HorizontalMenu.js";var _excluded=["item","linkPaddingH","handlePress","linkProps","activeIndex","activeKey","activeColor","color","sizeCode","index"],_excluded2=["active","key"],_excluded3=["gap","height","items","onChange","onChangeIndex","activeIndex"];import{omit,pipe}from'ramda';import React from'react';import{IconText}from"../../presentation/IconLabel";import{Link}from"../Link";import{SubmenuWrapper}from"./SubmenuWrapper";import{View}from"../../structure/View";import{useColorConverter}from"../../../modifiers/colorConverter";import{useSizeConverter}from"../../../modifiers/sizeConverter";import{useThemeComponentModifier}from"../../../modifiers/themeComponent";import{jsx as _jsx}from"react/jsx-runtime";function Item(_ref){var item=_ref.item,_ref$linkPaddingH=_ref.linkPaddingH,linkPaddingH=_ref$linkPaddingH===void 0?'md':_ref$linkPaddingH,handlePress=_ref.handlePress,linkProps=_ref.linkProps,activeIndex=_ref.activeIndex,activeKey=_ref.activeKey,_ref$activeColor=_ref.activeColor,activeColor=_ref$activeColor===void 0?'primary':_ref$activeColor,color=_ref.color,sizeCode=_ref.sizeCode,index=_ref.index,props=_objectWithoutProperties(_ref,_excluded);activeColor=activeColor||'primary';var _omit=omit(['onClick','onPress'],item),active=_omit.active,key=_omit.key,childProps=_objectWithoutProperties(_omit,_excluded2);if(!active&&activeIndex>=0)active=activeIndex===index;if(!active&&activeKey!==undefined)active=activeKey===item.key;return _jsx(SubmenuWrapper,{item:item,onChange:handlePress,activeKey:activeKey,color:color,placement:"bottomRight",hideIcon:true,children:_jsx(Link,Object.assign({fullH:true,center:true,paddingH:linkPaddingH},linkProps,{onPress:function onPress(){return handlePress(item,index);},children:_jsx(IconText,Object.assign({color:active?activeColor:color,fullH:true,marginT:3,borderB:3,borderColor:active?activeColor:'transparent',transition:"border-color 0.6s ease",size:sizeCode},childProps))}),key||index)});}export function HorizontalMenu(rootProps){var _this=this;var _pipe=pipe(useColorConverter(),useSizeConverter('icons','md'),useThemeComponentModifier('HorizontalMenu'))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_pipe2$=_pipe2[0],sizeCode=_pipe2$.sizeCode,color=_pipe2$.color,formattedProps=_pipe2[1];var _formattedProps$gap=formattedProps.gap,gap=_formattedProps$gap===void 0?'sm':_formattedProps$gap,_formattedProps$heigh=formattedProps.height,height=_formattedProps$heigh===void 0?50:_formattedProps$heigh,items=formattedProps.items,onChange=formattedProps.onChange,onChangeIndex=formattedProps.onChangeIndex,activeIndex=formattedProps.activeIndex,props=_objectWithoutProperties(formattedProps,_excluded3);var handlePress=React.useCallback(function(item,index){if(!!onChange)onChange(item,index);if(!!onChangeIndex)onChangeIndex(index);if(!!item.onPress)item.onPress();if(!!item.onClick)item.onClick();},[onChange,onChangeIndex]);return _jsx(View,Object.assign({className:"neko-horizontal-menu",row:true,gap:gap,height:height,centerV:true},props,{children:items.map(function(item,index){return _jsx(Item,Object.assign({item:item,handlePress:handlePress,color:color,sizeCode:sizeCode,index:index,activeIndex:activeIndex},props),item.key||index);})}));}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/menu/HorizontalMenu.js";var _excluded = ["item", "linkPaddingH", "handlePress", "linkProps", "activeIndex", "activeKey", "activeColor", "color", "sizeCode", "index"],_excluded2 = ["active", "key", "disabled"],_excluded3 = ["gap", "height", "items", "onChange", "onChangeIndex", "activeIndex"];function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { omit, pipe } from 'ramda';
+import React from 'react';
+
+import { IconText } from "../../presentation/IconLabel";
+import { Link } from "../Link";
+import { SubmenuWrapper } from "./SubmenuWrapper";
+import { View } from "../../structure/View";
+import { useColorConverter } from "../../../modifiers/colorConverter";
+import { useSizeConverter } from "../../../modifiers/sizeConverter";
+import { useThemeComponentModifier } from "../../../modifiers/themeComponent";import { jsx as _jsx } from "react/jsx-runtime";
+
+function Item(_ref)
+
+
+
+
+
+
+
+
+
+
+
+{var item = _ref.item,_ref$linkPaddingH = _ref.linkPaddingH,linkPaddingH = _ref$linkPaddingH === void 0 ? 'md' : _ref$linkPaddingH,handlePress = _ref.handlePress,linkProps = _ref.linkProps,activeIndex = _ref.activeIndex,activeKey = _ref.activeKey,_ref$activeColor = _ref.activeColor,activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor,color = _ref.color,sizeCode = _ref.sizeCode,index = _ref.index,props = _objectWithoutProperties(_ref, _excluded);
+  activeColor = activeColor || 'primary';
+  var _omit = omit(['onClick', 'onPress'], item),active = _omit.active,key = _omit.key,disabled = _omit.disabled,childProps = _objectWithoutProperties(_omit, _excluded2);
+  if (!active && activeIndex >= 0) active = activeIndex === index;
+  if (!active && activeKey !== undefined) active = activeKey === item.key;
+
+  return (
+    _jsx(SubmenuWrapper, {
+      item: item,
+      onChange: handlePress,
+      activeKey: activeKey,
+      color: color,
+      placement: "bottomRight",
+      hideIcon: true, children:
+
+      _jsx(Link, Object.assign({
+
+        fullH: true,
+        center: true,
+        paddingH: linkPaddingH,
+        disabled: disabled },
+      linkProps, {
+        onPress: function onPress() {return handlePress(item, index);}, children:
+
+        _jsx(IconText, Object.assign({
+          color: active ? activeColor : color,
+          fullH: true,
+          marginT: 3,
+          borderB: 3,
+          borderColor: active ? activeColor : 'transparent',
+          transition: "border-color 0.6s ease",
+          size: sizeCode },
+        childProps)
+        ) }), key || index
+      ) }
+    ));
+
+}
+
+export function HorizontalMenu(rootProps) {var _this = this;
+  var _pipe = pipe(
+      useColorConverter(),
+      useSizeConverter('icons', 'md'),
+      useThemeComponentModifier('HorizontalMenu')
+    )([{}, rootProps]),_pipe2 = _slicedToArray(_pipe, 2),_pipe2$ = _pipe2[0],sizeCode = _pipe2$.sizeCode,color = _pipe2$.color,formattedProps = _pipe2[1];
+
+  var _formattedProps$gap = formattedProps.gap,gap = _formattedProps$gap === void 0 ? 'sm' : _formattedProps$gap,_formattedProps$heigh = formattedProps.height,height = _formattedProps$heigh === void 0 ? 50 : _formattedProps$heigh,items = formattedProps.items,onChange = formattedProps.onChange,onChangeIndex = formattedProps.onChangeIndex,activeIndex = formattedProps.activeIndex,props = _objectWithoutProperties(formattedProps, _excluded3);
+
+  var handlePress = React.useCallback(
+    function (item, index) {
+      if (!!onChange) onChange(item, index);
+      if (!!onChangeIndex) onChangeIndex(index);
+      if (!!item.onPress) item.onPress();
+      if (!!item.onClick) item.onClick();
+    },
+    [onChange, onChangeIndex]
+  );
+
+  return (
+    _jsx(View, Object.assign({ className: "neko-horizontal-menu", row: true, gap: gap, height: height, centerV: true }, props, { children:
+      items.map(function (item, index) {return (
+          _jsx(Item, Object.assign({
+
+            item: item,
+            handlePress: handlePress,
+            color: color,
+            sizeCode: sizeCode,
+            index: index,
+            activeIndex: activeIndex },
+          props), item.key || index
+          ));}
+      ) })
+    ));
+
+}

package/dist/components/actions/menu/Menu.js

@@ -1 +1,7 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/menu/Menu.js";var _excluded=["vertical"];import{HorizontalMenu}from"./HorizontalMenu";import{VerticalMenu}from"./VerticalMenu";import{jsx as _jsx}from"react/jsx-runtime";export function Menu(_ref){var vertical=_ref.vertical,props=_objectWithoutProperties(_ref,_excluded);if(!!vertical)return _jsx(VerticalMenu,Object.assign({},props));return _jsx(HorizontalMenu,Object.assign({},props));}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/menu/Menu.js";var _excluded = ["vertical"];function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { HorizontalMenu } from "./HorizontalMenu";
+import { VerticalMenu } from "./VerticalMenu";import { jsx as _jsx } from "react/jsx-runtime";
+
+export function Menu(_ref) {var vertical = _ref.vertical,props = _objectWithoutProperties(_ref, _excluded);
+  if (!!vertical) return _jsx(VerticalMenu, Object.assign({}, props));
+  return _jsx(HorizontalMenu, Object.assign({}, props));
+}

package/dist/components/actions/menu/SubmenuWrapper.js

@@ -1 +1,16 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/menu/SubmenuWrapper.js";var _excluded=["item","children","placement","hideIcon"];import{Dropdown}from"../Dropdown";import{Icon}from"../../presentation/Icon";import{View}from"../../structure/View";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function SubmenuWrapper(_ref){var _item$subItems;var item=_ref.item,children=_ref.children,placement=_ref.placement,hideIcon=_ref.hideIcon,props=_objectWithoutProperties(_ref,_excluded);if(!((_item$subItems=item.subItems)!=null&&_item$subItems.length))return children;return _jsx(Dropdown,Object.assign({popoverProps:{placement:placement||'rightTop'},items:item.subItems,trigger:"hover"},props,{children:_jsxs(View,{flex:true,row:true,gap:"xxs",center:true,fullH:true,children:[children,!hideIcon&&_jsx(Icon,{name:"arrow-right-s-line"})]})}));}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/menu/SubmenuWrapper.js";var _excluded = ["item", "children", "placement", "hideIcon"];function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { Dropdown } from "../Dropdown";
+import { Icon } from "../../presentation/Icon";
+import { View } from "../../structure/View";import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+export function SubmenuWrapper(_ref) {var _item$subItems;var item = _ref.item,children = _ref.children,placement = _ref.placement,hideIcon = _ref.hideIcon,props = _objectWithoutProperties(_ref, _excluded);
+  if (!((_item$subItems = item.subItems) != null && _item$subItems.length)) return children;
+
+  return (
+    _jsx(Dropdown, Object.assign({ popoverProps: { placement: placement || 'rightTop' }, items: item.subItems, trigger: "hover" }, props, { children:
+      _jsxs(View, { flex: true, row: true, gap: "xxs", center: true, fullH: true, children: [
+        children,
+        !hideIcon && _jsx(Icon, { name: "arrow-right-s-line" })] }
+      ) })
+    ));
+
+}

package/dist/components/actions/menu/VerticalMenu.js

@@ -1 +1,133 @@
-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/actions/menu/VerticalMenu.js";var _excluded=["item","linkPaddingH","linkPaddingV","linkMinHeight","handlePress","linkProps","activeIndex","activeKey","activeColor","color","sizeCode","index"],_excluded2=["active","key"],_excluded3=["item"],_excluded4=["gap","items","onChange","onChangeIndex","withDivider"];import{omit,pipe}from'ramda';import React from'react';import tinycolor from'tinycolor2';import{Divider}from"../../helpers/Separator";import{IconText}from"../../presentation/IconLabel";import{Link}from"../Link";import{List}from"../../list/FlatList";import{SubmenuWrapper}from"./SubmenuWrapper";import{Text}from"../../text/Text";import{View}from"../../structure/View";import{moveScale}from"../../../theme/helpers/sizeScale";import{useColorConverter}from"../../../modifiers/colorConverter";import{useSizeConverter}from"../../../modifiers/sizeConverter";import{useThemeComponentModifier}from"../../../modifiers/themeComponent";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";function LinkItem(_ref){var item=_ref.item,_ref$linkPaddingH=_ref.linkPaddingH,linkPaddingH=_ref$linkPaddingH===void 0?'md':_ref$linkPaddingH,_ref$linkPaddingV=_ref.linkPaddingV,linkPaddingV=_ref$linkPaddingV===void 0?'xs':_ref$linkPaddingV,linkMinHeight=_ref.linkMinHeight,handlePress=_ref.handlePress,linkProps=_ref.linkProps,activeIndex=_ref.activeIndex,activeKey=_ref.activeKey,_ref$activeColor=_ref.activeColor,activeColor=_ref$activeColor===void 0?'primary':_ref$activeColor,color=_ref.color,sizeCode=_ref.sizeCode,index=_ref.index,props=_objectWithoutProperties(_ref,_excluded);activeColor=activeColor||'primary';var _omit=omit(['onClick','onPress'],item),active=_omit.active,key=_omit.key,childProps=_objectWithoutProperties(_omit,_excluded2);if(!active&&activeIndex>=0)active=activeIndex===index;if(!active&&activeKey!==undefined)active=activeKey===item.key;var bg=active&&tinycolor(color).setAlpha(0.03).toString();linkMinHeight=linkMinHeight||moveScale(sizeCode,1);return _jsx(SubmenuWrapper,{item:item,onChange:handlePress,activeKey:activeKey,color:color,children:_jsx(Link,Object.assign({flex:true,center:true,paddingH:linkPaddingH,paddingV:linkPaddingV,minHeight:linkMinHeight,borderL:3,brColor:active?activeColor:'transparent',bg:bg,transition:"border-color 0.5s ease, background 0.3s ease",hover:{br:0}},linkProps,{onPress:function onPress(){return handlePress(item,index);},children:_jsx(IconText,Object.assign({addingV:active&&4,color:active?activeColor:color,fullW:true,size:sizeCode},childProps))}))});}function DividerItem(_ref2){var _ref2$linkPaddingH=_ref2.linkPaddingH,linkPaddingH=_ref2$linkPaddingH===void 0?'md':_ref2$linkPaddingH,item=_ref2.item;var content=_jsx(Divider,Object.assign({height:"xxs",line:true},item));if(!item.label)return content;return _jsxs(_Fragment,{children:[content,_jsx(Text,Object.assign({size:"xs",color:"text4",paddingV:"xs",paddingH:linkPaddingH||'md',strong:true},item))]});}function Item(_ref3){var item=_ref3.item,props=_objectWithoutProperties(_ref3,_excluded3);if(item.type==='divider')return _jsx(DividerItem,Object.assign({item:item},props));return _jsx(LinkItem,Object.assign({item:item},props));}export function VerticalMenu(rootProps){var _this=this;var _pipe=pipe(useColorConverter('text'),useSizeConverter('icons','md'),useThemeComponentModifier('VerticalMenu'))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2),_pipe2$=_pipe2[0],sizeCode=_pipe2$.sizeCode,color=_pipe2$.color,formattedProps=_pipe2[1];var _formattedProps$gap=formattedProps.gap,gap=_formattedProps$gap===void 0?'sm':_formattedProps$gap,items=formattedProps.items,onChange=formattedProps.onChange,onChangeIndex=formattedProps.onChangeIndex,withDivider=formattedProps.withDivider,props=_objectWithoutProperties(formattedProps,_excluded4);var handlePress=React.useCallback(function(item,index){if(!!onChange)onChange(item,index);if(!!onChangeIndex)onChangeIndex(index);if(!!item.onPress)item.onPress();if(!!item.onClick)item.onClick();},[onChange,onChangeIndex]);return _jsx(View,Object.assign({className:"neko-vertical-menu",gap:gap,width:"100%"},props,{children:_jsx(List,{data:items,keyExtractor:function keyExtractor(item,index){return item.key||index;},divider:withDivider,renderItem:function renderItem(_ref4){var item=_ref4.item,index=_ref4.index;return _jsx(Item,Object.assign({item:item,handlePress:handlePress,color:color,sizeCode:sizeCode,index:index},props),item.key||index);}})}));return _jsx(View,Object.assign({className:"neko-vertical-menu",gap:gap,width:"100%"},props,{children:items.map(function(item,index){return _jsx(Item,Object.assign({item:item,handlePress:handlePress,color:color,sizeCode:sizeCode,index:index},props),item.key||index);})}));}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/actions/menu/VerticalMenu.js";var _excluded = ["item", "linkPaddingH", "linkPaddingV", "linkMinHeight", "handlePress", "linkProps", "activeIndex", "activeKey", "activeColor", "color", "sizeCode", "index"],_excluded2 = ["active", "key", "disabled"],_excluded3 = ["item"],_excluded4 = ["gap", "items", "onChange", "onChangeIndex", "withDivider"];function _slicedToArray(r, e) {return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();}function _nonIterableRest() {throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(r, a) {if (r) {if ("string" == typeof r) return _arrayLikeToArray(r, a);var t = {}.toString.call(r).slice(8, -1);return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;}}function _arrayLikeToArray(r, a) {(null == a || a > r.length) && (a = r.length);for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];return n;}function _iterableToArrayLimit(r, l) {var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];if (null != t) {var e,n,i,u,a = [],f = !0,o = !1;try {if (i = (t = t.call(r)).next, 0 === l) {if (Object(t) !== t) return;f = !1;} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);} catch (r) {o = !0, n = r;} finally {try {if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;} finally {if (o) throw n;}}return a;}}function _arrayWithHoles(r) {if (Array.isArray(r)) return r;}function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import { omit, pipe } from 'ramda';
+import React from 'react';
+import tinycolor from 'tinycolor2';
+
+import { Divider } from "../../helpers/Separator";
+import { IconText } from "../../presentation/IconLabel";
+import { Link } from "../Link";
+import { List } from "../../list/FlatList";
+import { SubmenuWrapper } from "./SubmenuWrapper";
+import { Text } from "../../text/Text";
+import { View } from "../../structure/View";
+import { moveScale } from "../../../theme/helpers/sizeScale";
+import { useColorConverter } from "../../../modifiers/colorConverter";
+import { useSizeConverter } from "../../../modifiers/sizeConverter";
+import { useThemeComponentModifier } from "../../../modifiers/themeComponent";import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+
+function LinkItem(_ref)
+
+
+
+
+
+
+
+
+
+
+
+
+
+{var item = _ref.item,_ref$linkPaddingH = _ref.linkPaddingH,linkPaddingH = _ref$linkPaddingH === void 0 ? 'md' : _ref$linkPaddingH,_ref$linkPaddingV = _ref.linkPaddingV,linkPaddingV = _ref$linkPaddingV === void 0 ? 'xs' : _ref$linkPaddingV,linkMinHeight = _ref.linkMinHeight,handlePress = _ref.handlePress,linkProps = _ref.linkProps,activeIndex = _ref.activeIndex,activeKey = _ref.activeKey,_ref$activeColor = _ref.activeColor,activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor,color = _ref.color,sizeCode = _ref.sizeCode,index = _ref.index,props = _objectWithoutProperties(_ref, _excluded);
+  activeColor = activeColor || 'primary';
+  var _omit = omit(['onClick', 'onPress'], item),active = _omit.active,key = _omit.key,disabled = _omit.disabled,childProps = _objectWithoutProperties(_omit, _excluded2);
+  if (!active && activeIndex >= 0) active = activeIndex === index;
+  if (!active && activeKey !== undefined) active = activeKey === item.key;
+  var bg = active && tinycolor(color).setAlpha(0.03).toString();
+  linkMinHeight = linkMinHeight || moveScale(sizeCode, 1);
+
+  return (
+    _jsx(SubmenuWrapper, { item: item, onChange: handlePress, activeKey: activeKey, color: color, children:
+      _jsx(Link, Object.assign({
+        flex: true,
+        center: true,
+        paddingH: linkPaddingH,
+        paddingV: linkPaddingV,
+        minHeight: linkMinHeight,
+        borderL: 3,
+        brColor: active ? activeColor : 'transparent',
+        bg: bg,
+        transition: "border-color 0.5s ease, background 0.3s ease",
+        hover: { br: 0 },
+        disabled: disabled },
+      linkProps, {
+        onPress: function onPress() {return handlePress(item, index);}, children:
+
+        _jsx(IconText, Object.assign({ addingV: active && 4, color: active ? activeColor : color, fullW: true, size: sizeCode }, childProps)) })
+      ) }
+    ));
+
+}
+
+function DividerItem(_ref2) {var _ref2$linkPaddingH = _ref2.linkPaddingH,linkPaddingH = _ref2$linkPaddingH === void 0 ? 'md' : _ref2$linkPaddingH,item = _ref2.item;
+  var content = _jsx(Divider, Object.assign({ height: "xxs", line: true }, item));
+  if (!item.label) return content;
+  return (
+    _jsxs(_Fragment, { children: [
+      content,
+      _jsx(Text, Object.assign({ size: "xs", color: "text4", paddingV: "xs", paddingH: linkPaddingH || 'md', strong: true }, item))] }
+    ));
+
+}
+
+function Item(_ref3) {var item = _ref3.item,props = _objectWithoutProperties(_ref3, _excluded3);
+  if (item.type === 'divider') return _jsx(DividerItem, Object.assign({ item: item }, props));
+  return _jsx(LinkItem, Object.assign({ item: item }, props));
+}
+
+export function VerticalMenu(rootProps) {var _this = this;
+  var _pipe = pipe(
+      useColorConverter('text'),
+      useSizeConverter('icons', 'md'),
+      useThemeComponentModifier('VerticalMenu')
+    )([{}, rootProps]),_pipe2 = _slicedToArray(_pipe, 2),_pipe2$ = _pipe2[0],sizeCode = _pipe2$.sizeCode,color = _pipe2$.color,formattedProps = _pipe2[1];
+
+  var _formattedProps$gap = formattedProps.gap,gap = _formattedProps$gap === void 0 ? 'sm' : _formattedProps$gap,items = formattedProps.items,onChange = formattedProps.onChange,onChangeIndex = formattedProps.onChangeIndex,withDivider = formattedProps.withDivider,props = _objectWithoutProperties(formattedProps, _excluded4);
+
+  var handlePress = React.useCallback(
+    function (item, index) {
+      if (!!onChange) onChange(item, index);
+      if (!!onChangeIndex) onChangeIndex(index);
+      if (!!item.onPress) item.onPress();
+      if (!!item.onClick) item.onClick();
+    },
+    [onChange, onChangeIndex]
+  );
+
+  return (
+    _jsx(View, Object.assign({ className: "neko-vertical-menu", gap: gap, width: "100%" }, props, { children:
+      _jsx(List, {
+        data: items,
+        keyExtractor: function keyExtractor(item, index) {return item.key || index;},
+        divider: withDivider,
+        renderItem: function renderItem(_ref4) {var item = _ref4.item,index = _ref4.index;return (
+            _jsx(Item, Object.assign({
+
+              item: item,
+              handlePress: handlePress,
+              color: color,
+              sizeCode: sizeCode,
+              index: index },
+            props), item.key || index
+            ));} }
+
+      ) })
+    ));
+
+
+  return (
+    _jsx(View, Object.assign({ className: "neko-vertical-menu", gap: gap, width: "100%" }, props, { children:
+      items.map(function (item, index) {return (
+          _jsx(Item, Object.assign({
+
+            item: item,
+            handlePress: handlePress,
+            color: color,
+            sizeCode: sizeCode,
+            index: index },
+          props), item.key || index
+          ));}
+      ) })
+    ));
+
+}

package/dist/components/animations/AnimatedTopBar.js

@@ -1 +1,10 @@
-var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/animations/AnimatedTopBar.js";import{AnimatedView}from"./AnimatedView";import{TopBar}from"../structure";import{jsx as _jsx}from"react/jsx-runtime";export function AnimatedTopBar(props){return _jsx(AnimatedView,{style:{position:'absolute',top:0,left:0,right:0,zIndex:90},fade:true,children:_jsx(TopBar,Object.assign({},props))});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/animations/AnimatedTopBar.js";import { AnimatedView } from "./AnimatedView";
+import { TopBar } from "../structure";import { jsx as _jsx } from "react/jsx-runtime";
+
+export function AnimatedTopBar(props) {
+  return (
+    _jsx(AnimatedView, { style: { position: 'absolute', top: 0, left: 0, right: 0, zIndex: 90 }, fade: true, children:
+      _jsx(TopBar, Object.assign({}, props)) }
+    ));
+
+}

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

@@ -1 +1,34 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/animations/AnimatedTopBar.native.js";var _excluded=["showAfter","duration","fade","slide"];import Animated,{useAnimatedStyle,useSharedValue,useAnimatedReaction,withTiming}from'react-native-reanimated';import{TopBar}from"../structure";import{useReanimatedScroll}from"./ReanimatedScrollHandler";import{useSafeAreaInsets}from"../../abstractions/helpers/useSafeAreaInsets";import{jsx as _jsx}from"react/jsx-runtime";export function AnimatedTopBar(_ref){var _ref$showAfter=_ref.showAfter,showAfter=_ref$showAfter===void 0?90:_ref$showAfter,_ref$duration=_ref.duration,duration=_ref$duration===void 0?300:_ref$duration,_ref$fade=_ref.fade,fade=_ref$fade===void 0?true:_ref$fade,slide=_ref.slide,props=_objectWithoutProperties(_ref,_excluded);var _useReanimatedScroll=useReanimatedScroll(),scrollY=_useReanimatedScroll.scrollY;var _useSafeAreaInsets=useSafeAreaInsets(),safeTop=_useSafeAreaInsets.top;var visibility=useSharedValue(0);useAnimatedReaction(function(){return scrollY.value>=showAfter-safeTop;},function(shouldShow,prev){if(shouldShow!==prev){visibility.value=withTiming(shouldShow?1:0,{duration:duration});}});var animatedStyle=useAnimatedStyle(function(){var style={};if(fade)style.opacity=visibility.value;if(slide)style.transform=[{translateY:(1-visibility.value)*(-50-safeTop)}];return style;});return _jsx(Animated.View,{style:[{position:'absolute',top:0,left:0,right:0,zIndex:90},animatedStyle],children:_jsx(TopBar,Object.assign({},props))});}
+var _jsxFileName = "/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/animations/AnimatedTopBar.native.js";var _excluded = ["showAfter", "duration", "fade", "slide"];function _objectWithoutProperties(e, t) {if (null == e) return {};var o,r,i = _objectWithoutPropertiesLoose(e, t);if (Object.getOwnPropertySymbols) {var n = Object.getOwnPropertySymbols(e);for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);}return i;}function _objectWithoutPropertiesLoose(r, e) {if (null == r) return {};var t = {};for (var n in r) if ({}.hasOwnProperty.call(r, n)) {if (-1 !== e.indexOf(n)) continue;t[n] = r[n];}return t;}import Animated, { useAnimatedStyle, useSharedValue, useAnimatedReaction, withTiming } from 'react-native-reanimated';
+
+import { TopBar } from "../structure";
+import { useReanimatedScroll } from "./ReanimatedScrollHandler";
+import { useSafeAreaInsets } from "../../abstractions/helpers/useSafeAreaInsets";import { jsx as _jsx } from "react/jsx-runtime";
+
+export function AnimatedTopBar(_ref) {var _ref$showAfter = _ref.showAfter,showAfter = _ref$showAfter === void 0 ? 90 : _ref$showAfter,_ref$duration = _ref.duration,duration = _ref$duration === void 0 ? 300 : _ref$duration,_ref$fade = _ref.fade,fade = _ref$fade === void 0 ? true : _ref$fade,slide = _ref.slide,props = _objectWithoutProperties(_ref, _excluded);
+  var _useReanimatedScroll = useReanimatedScroll(),scrollY = _useReanimatedScroll.scrollY;
+  var _useSafeAreaInsets = useSafeAreaInsets(),safeTop = _useSafeAreaInsets.top;
+
+  var visibility = useSharedValue(0);
+
+  useAnimatedReaction(
+    function () {return scrollY.value >= showAfter - safeTop;},
+    function (shouldShow, prev) {
+      if (shouldShow !== prev) {
+        visibility.value = withTiming(shouldShow ? 1 : 0, { duration: duration });
+      }
+    }
+  );
+
+  var animatedStyle = useAnimatedStyle(function () {
+    var style = {};
+    if (fade) style.opacity = visibility.value;
+    if (slide) style.transform = [{ translateY: (1 - visibility.value) * (-50 - safeTop) }];
+    return style;
+  });
+
+  return (
+    _jsx(Animated.View, { style: [{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 90 }, animatedStyle], children:
+      _jsx(TopBar, Object.assign({}, props)) }
+    ));
+
+}

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

@@ -1 +1 @@
-export{AnimatedTopBar}from"./AnimatedTopBar.native";
+export { AnimatedTopBar } from "./AnimatedTopBar.native";