@octane-xplat/ui 0.9.0 → 0.11.0

package/dist/native/SideNav.tsrx.js

@@ -0,0 +1,1222 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.js";
+import { Text } from "./Text.tsrx.js";
+import { Pressable } from "./Pressable.tsrx.js";
+import { Icon } from "./Icon.tsrx.js";
+import { Popover } from "./Popover.tsrx.js";
+import { NavHeadingCloseProvider, SideNavCollapseContext, SideNavCollapseProvider, SideNavRenderContext, useSideNavCollapse, useSideNavRenderMode } from "./nav-contexts.js";
+import { MobileNav } from "./MobileNav.tsrx.js";
+import { followHref } from "./nav-href.js";
+import { ResizeHandle } from "./ResizeHandle.tsrx.js";
+import { regionConfigFrom } from "./resize-state.js";
+import { useResizable } from "./useResizable.tsrx.js";
+import { defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalIf, universalPlan, universalProps, universalValue, useBatch, useCallback, useContext, useMemo, useRef, useState, warmChild, withSlot } from "@nativescript-community/octane";
+//#region src/SideNav.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(15);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
+var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
+var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
+var _h$11 = /* @__PURE__ */ Symbol(_hs$ + 11);
+var _h$12 = /* @__PURE__ */ Symbol(_hs$ + 12);
+var _h$13 = /* @__PURE__ */ Symbol(_hs$ + 13);
+var _h$14 = /* @__PURE__ */ Symbol(_hs$ + 14);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "row",
+		"alignItems": "center"
+	},
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 4
+	}, {
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": {
+			"className": "vx-sidenav-topbar-icons",
+			"flexDirection": "row",
+			"alignItems": "center",
+			"justifyContent": "flex-end",
+			"flexGrow": 1
+		},
+		"children": [{
+			"kind": "slot",
+			"slot": 5
+		}]
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"className": "vx-sidenav-drawericons",
+		"flexDirection": "row"
+	},
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"className": "vx-sidenav-drawerfooter",
+		"flexDirection": "column"
+	},
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 0
+		},
+		{
+			"kind": "slot",
+			"slot": 1
+		},
+		{
+			"kind": "slot",
+			"slot": 2
+		}
+	]
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"className": "vx-sidenav-drawericons",
+		"flexDirection": "row"
+	},
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan7 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"className": "vx-sidenav-drawerfooter",
+		"flexDirection": "column"
+	},
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan8 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 0
+		},
+		{
+			"kind": "slot",
+			"slot": 1
+		},
+		{
+			"kind": "slot",
+			"slot": 2
+		}
+	]
+});
+var __octaneUniversalPlan9 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"className": "vx-sidenav-topcontent",
+		"flexDirection": "column"
+	},
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan10 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "column" },
+	"bindings": [["className", 0]],
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}, {
+		"kind": "slot",
+		"slot": 2
+	}]
+});
+var __octaneUniversalPlan11 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan12 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "column" },
+	"bindings": [["className", 0]],
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}, {
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": {
+			"alignItems": "center",
+			"justifyContent": "flex-end"
+		},
+		"bindings": [["className", 2], ["flexDirection", 3]],
+		"children": [{
+			"kind": "slot",
+			"slot": 4
+		}, {
+			"kind": "slot",
+			"slot": 5
+		}]
+	}]
+});
+var __octaneUniversalPlan13 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan14 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"props": { "className": "vx-sidenav-shell" },
+	"bindings": [["style", 0]],
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "flexDirection": "column" },
+		"bindings": [
+			["ref", 1],
+			["id", 2],
+			["className", 3],
+			["style", 4],
+			["accessibilityLabel", 5]
+		],
+		"children": [
+			{
+				"kind": "slot",
+				"slot": 6
+			},
+			{
+				"kind": "host",
+				"type": "scrollview",
+				"props": {
+					"className": "vx-sidenav-scrollable",
+					"flexGrow": 1
+				},
+				"children": [{
+					"kind": "host",
+					"type": "flexboxlayout",
+					"props": { "flexDirection": "column" },
+					"children": [{
+						"kind": "slot",
+						"slot": 7
+					}]
+				}]
+			},
+			{
+				"kind": "slot",
+				"slot": 8
+			}
+		]
+	}, {
+		"kind": "slot",
+		"slot": 9
+	}]
+});
+var __octaneUniversalPlan15 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan16 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan17 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan18 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan19 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan20 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "column" },
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": {
+			"flexDirection": "row",
+			"alignItems": "center",
+			"justifyContent": "space-between"
+		},
+		"bindings": [["className", 4]],
+		"children": [{
+			"kind": "host",
+			"type": "flexboxlayout",
+			"props": {
+				"className": "vx-sidenav-section-title-group",
+				"flexDirection": "column"
+			},
+			"children": [{
+				"kind": "slot",
+				"slot": 5
+			}, {
+				"kind": "slot",
+				"slot": 6
+			}]
+		}, {
+			"kind": "slot",
+			"slot": 7
+		}]
+	}, {
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": {
+			"className": "vx-sidenav-section-items",
+			"flexDirection": "column"
+		},
+		"children": [{
+			"kind": "slot",
+			"slot": 8
+		}]
+	}]
+});
+var __octaneUniversalPlan21 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "className": "vx-sidenav-heading-icon" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan22 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "row",
+		"alignItems": "center",
+		"gap": 8,
+		"flexGrow": 1
+	},
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 0
+		},
+		{
+			"kind": "host",
+			"type": "flexboxlayout",
+			"props": {
+				"flexDirection": "column",
+				"flexGrow": 1
+			},
+			"children": [{
+				"kind": "slot",
+				"slot": 1
+			}]
+		},
+		{
+			"kind": "slot",
+			"slot": 2
+		}
+	]
+});
+var __octaneUniversalPlan23 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan24 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "className": "vx-sidenav-heading-icon" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan25 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan26 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan27 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan28 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan29 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan30 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": {
+			"flexDirection": "column",
+			"flexGrow": 1
+		},
+		"children": [
+			{
+				"kind": "slot",
+				"slot": 1
+			},
+			{
+				"kind": "slot",
+				"slot": 2
+			},
+			{
+				"kind": "slot",
+				"slot": 3
+			}
+		]
+	}]
+});
+var __octaneUniversalPlan31 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan32 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan33 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan34 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "row",
+		"alignItems": "center"
+	},
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 4
+		},
+		{
+			"kind": "slot",
+			"slot": 5
+		},
+		{
+			"kind": "slot",
+			"slot": 6
+		},
+		{
+			"kind": "slot",
+			"slot": 7
+		}
+	]
+});
+var __octaneUniversalPlan35 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "className": "vx-sidenav-item-icon" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan36 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan37 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "className": "vx-sidenav-item-end" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan38 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "row",
+		"alignItems": "center",
+		"gap": 8,
+		"flexGrow": 1
+	},
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 0
+		},
+		{
+			"kind": "slot",
+			"slot": 1
+		},
+		{
+			"kind": "slot",
+			"slot": 2
+		}
+	]
+});
+var __octaneUniversalPlan39 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan40 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan41 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"className": "vx-sidenav-item-actions",
+		"flexDirection": "row"
+	},
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan42 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"className": "vx-sidenav-item-children",
+		"flexDirection": "column"
+	},
+	"bindings": [["style", 0]],
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan43 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"className": "vx-sidenav-flyout-list",
+		"flexDirection": "column"
+	},
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan44 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan45 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "column" },
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [
+		{
+			"kind": "host",
+			"type": "flexboxlayout",
+			"props": {
+				"className": "vx-sidenav-item-row",
+				"flexDirection": "row",
+				"alignItems": "center"
+			},
+			"bindings": [["ref", 4]],
+			"children": [
+				{
+					"kind": "slot",
+					"slot": 5
+				},
+				{
+					"kind": "slot",
+					"slot": 6
+				},
+				{
+					"kind": "slot",
+					"slot": 7
+				}
+			]
+		},
+		{
+			"kind": "slot",
+			"slot": 8
+		},
+		{
+			"kind": "slot",
+			"slot": 9
+		}
+	]
+});
+var __octaneUniversalPlan46 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": []
+});
+var __octaneUniversalPlan47 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan48 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan49 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan50 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var COLLAPSED_RAIL_WIDTH = 56;
+var ITEM_HEIGHT = {
+	sm: 28,
+	md: 32,
+	lg: 36
+};
+var navIcon = defineUniversalComponent("nativescript", function navIcon(icon, size = 16) {
+	useBatch([], () => {
+		warmChild(Icon, {
+			name: icon,
+			size
+		});
+	});
+	return typeof icon === "string" ? universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Icon, universalProps([[
+		"set",
+		"name",
+		icon
+	], [
+		"set",
+		"size",
+		size
+	]]))]) : icon;
+}, { "module": "@nativescript-community/octane" });
+var SideNav = defineUniversalComponent("nativescript", function SideNav(props) {
+	const renderMode = withSlot(_h$0, useSideNavRenderMode);
+	const cfg = props.collapsible === true ? {} : props.collapsible === false || props.collapsible == null ? void 0 : props.collapsible;
+	const isCollapsible = props.collapsible != null && props.collapsible !== false;
+	const controlled = cfg?.isCollapsed !== void 0;
+	const [uncontrolled, setUncontrolled] = useState(cfg?.defaultIsCollapsed ?? false, _h$1);
+	const collapsed = isCollapsible ? controlled ? cfg.isCollapsed ?? false : uncontrolled : false;
+	const toggle = useCallback(() => {
+		const next = !collapsed;
+		if (!controlled) setUncontrolled(next);
+		cfg?.onCollapsedChange?.(next);
+	}, [
+		collapsed,
+		controlled,
+		cfg
+	], _h$2);
+	const collapseState = useMemo(() => ({
+		isCollapsed: collapsed,
+		toggle,
+		isCollapsible
+	}), [
+		collapsed,
+		toggle,
+		isCollapsible
+	], _h$3);
+	if (props.handleRef) props.handleRef.current = { getCollapseState: () => collapseState };
+	const resizeConfig = regionConfigFrom(props.resizable === false ? void 0 : props.resizable);
+	const resizableHook = withSlot(_h$4, useResizable, resizeConfig ?? { defaultSize: 0 });
+	const showResizeHandle = resizeConfig != null && !collapsed;
+	const drawerFooter = props.footer != null || props.footerIcons != null;
+	return universalValue(__octaneUniversalPlan18, [universalIf(renderMode === "topbar", () => {
+		return universalValue(__octaneUniversalPlan1, [
+			(v) => applyEscapeProps(v, props),
+			props.id,
+			cx("vx-sidenav", "vx-sidenav--topbar", props.className),
+			props.style,
+			props.header,
+			props.footerIcons
+		]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan17, [universalIf(renderMode === "drawer", () => {
+			return universalValue(__octaneUniversalPlan5, [universalComponent("nativescript", MobileNav, universalProps([
+				[
+					"set",
+					"header",
+					props.header
+				],
+				[
+					"set",
+					"id",
+					props.id
+				],
+				[
+					"set",
+					"className",
+					cx("vx-sidenav", "vx-sidenav--drawer", props.className)
+				],
+				[
+					"set",
+					"style",
+					props.style
+				]
+			], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan4, [
+					props.topContent,
+					props.children,
+					drawerFooter ? universalValue(__octaneUniversalPlan3, [props.footer, props.footerIcons != null ? universalValue(__octaneUniversalPlan2, [props.footerIcons]) : null]) : null
+				]);
+			})))]);
+		}, () => {
+			return universalValue(__octaneUniversalPlan16, [universalIf(renderMode === "drawer-content", () => {
+				return universalValue(__octaneUniversalPlan8, [
+					props.topContent,
+					props.children,
+					drawerFooter ? universalValue(__octaneUniversalPlan7, [props.footer, props.footerIcons != null ? universalValue(__octaneUniversalPlan6, [props.footerIcons]) : null]) : null
+				]);
+			}, () => {
+				return universalValue(__octaneUniversalPlan15, [universalComponent("nativescript", SideNavCollapseProvider, universalProps([[
+					"set",
+					"value",
+					isCollapsible ? collapseState : null
+				]], universalChildren("nativescript", () => {
+					return universalValue(__octaneUniversalPlan14, [
+						{ width: collapsed ? COLLAPSED_RAIL_WIDTH : resizeConfig ? resizableHook.size : void 0 },
+						(v) => applyEscapeProps(v, props),
+						props.id,
+						cx("vx-sidenav", collapsed && "vx-sidenav--collapsed", props.className),
+						props.style,
+						props.label ?? "Side navigation",
+						props.header != null || props.topContent != null ? universalValue(__octaneUniversalPlan10, [
+							cx("vx-sidenav-stickytop", collapsed && "vx-sidenav-stickytop--collapsed"),
+							props.header,
+							props.topContent != null ? universalValue(__octaneUniversalPlan9, [props.topContent]) : null
+						]) : null,
+						props.children,
+						props.footer != null || props.footerIcons != null || isCollapsible && cfg?.hasButton !== false ? universalValue(__octaneUniversalPlan12, [
+							cx("vx-sidenav-stickybottom", collapsed && "vx-sidenav-stickybottom--collapsed"),
+							props.footer,
+							cx("vx-sidenav-footerrow", collapsed && "vx-sidenav-footerrow--collapsed"),
+							collapsed ? "column" : "row",
+							isCollapsible && cfg?.hasButton !== false ? universalValue(__octaneUniversalPlan11, [universalComponent("nativescript", SideNavCollapseButton, universalProps([]))]) : null,
+							props.footerIcons
+						]) : null,
+						showResizeHandle ? universalValue(__octaneUniversalPlan13, [universalComponent("nativescript", ResizeHandle, universalProps([
+							[
+								"set",
+								"direction",
+								"horizontal"
+							],
+							[
+								"set",
+								"position",
+								"overlay"
+							],
+							[
+								"set",
+								"pillPlacement",
+								"end"
+							],
+							[
+								"set",
+								"label",
+								"Resize sidebar"
+							],
+							[
+								"set",
+								"resizable",
+								resizableHook.props
+							]
+						]))]) : null
+					]);
+				})))]);
+			})]);
+		})]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
+var SideNavSection = defineUniversalComponent("nativescript", function SideNavSection(props) {
+	return universalValue(__octaneUniversalPlan20, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-sidenav-section", props.className),
+		props.style,
+		cx("vx-sidenav-section-head", props.isHeaderHidden && "vx-visually-hidden"),
+		universalComponent("nativescript", Text, universalProps([[
+			"set",
+			"className",
+			"vx-sidenav-section-title"
+		]], props.title)),
+		props.subtitle != null ? universalValue(__octaneUniversalPlan19, [universalComponent("nativescript", Text, universalProps([[
+			"set",
+			"className",
+			"vx-sidenav-section-subtitle"
+		]], props.subtitle))]) : null,
+		props.endContent,
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+var SideNavHeading = defineUniversalComponent("nativescript", function SideNavHeading(props) {
+	const anchor = useRef(null, _h$5);
+	const [menuOpen, setMenuOpen] = useState(false, _h$6);
+	const collapsed = useContext(SideNavCollapseContext)?.isCollapsed ?? false;
+	const hasLinks = !!(props.headingHref || props.superheadingHref || props.subheadingHref);
+	const hasMenu = props.menu != null;
+	const headerIsTrigger = hasMenu && !hasLinks;
+	const closeMenu = useCallback(() => setMenuOpen(false), [], _h$7);
+	const closeCtx = useMemo(() => ({ closeMenu }), [closeMenu], _h$8);
+	const activateHeading = (href) => {
+		if (href) followHref(href);
+	};
+	return universalValue(__octaneUniversalPlan34, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-sidenav-heading", headerIsTrigger && "vx-sidenav-heading--button", collapsed && "vx-sidenav-heading--collapsed", props.className),
+		props.style,
+		headerIsTrigger ? universalValue(__octaneUniversalPlan23, [universalComponent("nativescript", Pressable, universalProps([
+			[
+				"set",
+				"ref",
+				(v) => {
+					anchor.current = v;
+				}
+			],
+			[
+				"set",
+				"className",
+				"vx-sidenav-heading-trigger"
+			],
+			[
+				"set",
+				"onPress",
+				() => setMenuOpen(!menuOpen)
+			],
+			[
+				"set",
+				"accessibilityLabel",
+				props.heading
+			],
+			[
+				"set",
+				"accessibilityHint",
+				"Open heading menu"
+			]
+		], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan22, [
+				props.icon != null ? universalValue(__octaneUniversalPlan21, [navIcon(props.icon, 20)]) : null,
+				universalComponent("nativescript", Text, universalProps([[
+					"set",
+					"className",
+					"vx-sidenav-heading-title"
+				]], props.heading)),
+				universalComponent("nativescript", Icon, universalProps([[
+					"set",
+					"name",
+					"xplat-chevron-down"
+				], [
+					"set",
+					"size",
+					16
+				]]))
+			]);
+		})))]) : universalValue(__octaneUniversalPlan30, [
+			props.icon != null ? universalValue(__octaneUniversalPlan24, [navIcon(props.icon, 20)]) : null,
+			props.superheading ? universalValue(__octaneUniversalPlan26, [universalComponent("nativescript", Pressable, universalProps([[
+				"set",
+				"disabled",
+				!props.superheadingHref
+			], [
+				"set",
+				"onPress",
+				() => activateHeading(props.superheadingHref)
+			]], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan25, [universalComponent("nativescript", Text, universalProps([[
+					"set",
+					"className",
+					"vx-sidenav-heading-super"
+				]], props.superheading))]);
+			})))]) : null,
+			universalComponent("nativescript", Pressable, universalProps([[
+				"set",
+				"disabled",
+				!props.headingHref
+			], [
+				"set",
+				"onPress",
+				() => activateHeading(props.headingHref)
+			]], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan27, [universalComponent("nativescript", Text, universalProps([[
+					"set",
+					"className",
+					"vx-sidenav-heading-title"
+				]], props.heading))]);
+			}))),
+			props.subheading ? universalValue(__octaneUniversalPlan29, [universalComponent("nativescript", Pressable, universalProps([[
+				"set",
+				"disabled",
+				!props.subheadingHref
+			], [
+				"set",
+				"onPress",
+				() => activateHeading(props.subheadingHref)
+			]], universalChildren("nativescript", () => {
+				return universalValue(__octaneUniversalPlan28, [universalComponent("nativescript", Text, universalProps([[
+					"set",
+					"className",
+					"vx-sidenav-heading-sub"
+				]], props.subheading))]);
+			})))]) : null
+		]),
+		hasMenu && !headerIsTrigger ? universalValue(__octaneUniversalPlan32, [universalComponent("nativescript", Pressable, universalProps([
+			[
+				"set",
+				"ref",
+				(v) => {
+					anchor.current = v;
+				}
+			],
+			[
+				"set",
+				"className",
+				"vx-sidenav-heading-menubtn"
+			],
+			[
+				"set",
+				"onPress",
+				() => setMenuOpen(!menuOpen)
+			],
+			[
+				"set",
+				"accessibilityLabel",
+				"Open heading menu"
+			]
+		], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan31, [universalComponent("nativescript", Icon, universalProps([[
+				"set",
+				"name",
+				"xplat-chevron-down"
+			], [
+				"set",
+				"size",
+				16
+			]]))]);
+		})))]) : null,
+		props.headerEndContent,
+		universalComponent("nativescript", NavHeadingCloseProvider, universalProps([[
+			"set",
+			"value",
+			closeCtx
+		]], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan33, [universalComponent("nativescript", Popover, universalProps([
+				[
+					"set",
+					"anchor",
+					anchor
+				],
+				[
+					"set",
+					"open",
+					menuOpen
+				],
+				[
+					"set",
+					"placement",
+					"bottom"
+				],
+				[
+					"set",
+					"onDismiss",
+					() => setMenuOpen(false)
+				],
+				[
+					"set",
+					"className",
+					"vx-headingmenu-pop"
+				]
+			], props.menu))]);
+		})))
+	]);
+}, { "module": "@nativescript-community/octane" });
+var SideNavItem = defineUniversalComponent("nativescript", function SideNavItem(props) {
+	const renderMode = withSlot(_h$9, useSideNavRenderMode);
+	const railCollapsed = withSlot(_h$10, useSideNavCollapse)?.isCollapsed === true && renderMode === "default";
+	const size = props.size ?? "md";
+	const hasChildren = props.children != null;
+	const itemCfg = props.collapsible === true ? {} : typeof props.collapsible === "object" ? props.collapsible : null;
+	const itemControlled = itemCfg?.isCollapsed !== void 0;
+	const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(itemCfg?.defaultIsCollapsed ?? false, _h$11);
+	const childrenCollapsed = hasChildren && itemCfg != null ? itemControlled ? itemCfg.isCollapsed : uncontrolledCollapsed : false;
+	const toggleChildren = () => {
+		const next = !childrenCollapsed;
+		if (!itemControlled) setUncontrolledCollapsed(next);
+		itemCfg?.onCollapsedChange?.(next);
+	};
+	const anchor = useRef(null, _h$12);
+	const [flyoutOpen, setFlyoutOpen] = useState(false, _h$13);
+	const displayIcon = props.isSelected && props.selectedIcon != null ? props.selectedIcon : props.icon;
+	const isDisabled = props.isDisabled ?? false;
+	const activate = () => {
+		if (isDisabled) return;
+		props.onClick?.();
+		if (props.href) followHref(props.href);
+	};
+	const pressMain = () => {
+		if (railCollapsed && hasChildren) {
+			setFlyoutOpen(!flyoutOpen);
+			return;
+		}
+		activate();
+	};
+	return universalValue(__octaneUniversalPlan45, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-sidenav-item", props.className),
+		props.style,
+		(v) => {
+			if (railCollapsed) anchor.current = v;
+		},
+		universalComponent("nativescript", Pressable, universalProps([
+			[
+				"set",
+				"className",
+				cx("vx-sidenav-item-main", "vx-sidenav-item--" + size, props.isSelected && "vx-sidenav-item--selected", isDisabled && "vx-sidenav-item--disabled", railCollapsed && "vx-sidenav-item--rail")
+			],
+			[
+				"set",
+				"style",
+				{ minHeight: ITEM_HEIGHT[size] }
+			],
+			[
+				"set",
+				"disabled",
+				isDisabled
+			],
+			[
+				"set",
+				"accessibilityRole",
+				"link"
+			],
+			[
+				"set",
+				"accessibilityLabel",
+				railCollapsed ? props.label : void 0
+			],
+			[
+				"set",
+				"accessibilityState",
+				{
+					disabled: isDisabled,
+					selected: props.isSelected
+				}
+			],
+			[
+				"set",
+				"onPress",
+				pressMain
+			]
+		], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan38, [
+				displayIcon != null ? universalValue(__octaneUniversalPlan35, [navIcon(displayIcon, size === "lg" ? 18 : size === "sm" ? 14 : 16)]) : null,
+				!railCollapsed ? universalValue(__octaneUniversalPlan36, [universalComponent("nativescript", Text, universalProps([[
+					"set",
+					"className",
+					"vx-sidenav-item-label"
+				], [
+					"set",
+					"flexGrow",
+					1
+				]], props.label))]) : null,
+				!railCollapsed && props.endContent != null ? universalValue(__octaneUniversalPlan37, [props.endContent]) : null
+			]);
+		}))),
+		hasChildren && itemCfg != null && !railCollapsed ? universalValue(__octaneUniversalPlan40, [universalComponent("nativescript", Pressable, universalProps([
+			[
+				"set",
+				"className",
+				"vx-sidenav-item-toggle"
+			],
+			[
+				"set",
+				"onPress",
+				toggleChildren
+			],
+			[
+				"set",
+				"accessibilityLabel",
+				childrenCollapsed ? "Expand" : "Collapse"
+			]
+		], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan39, [universalComponent("nativescript", Icon, universalProps([[
+				"set",
+				"name",
+				childrenCollapsed ? "xplat-chevron-right" : "xplat-chevron-down"
+			], [
+				"set",
+				"size",
+				16
+			]]))]);
+		})))]) : null,
+		!railCollapsed && props.actions != null ? universalValue(__octaneUniversalPlan41, [props.actions]) : null,
+		hasChildren && !railCollapsed && !childrenCollapsed ? universalValue(__octaneUniversalPlan42, [{ paddingLeft: 24 }, props.children]) : null,
+		railCollapsed && hasChildren ? universalValue(__octaneUniversalPlan44, [universalComponent("nativescript", Popover, universalProps([
+			[
+				"set",
+				"anchor",
+				anchor
+			],
+			[
+				"set",
+				"open",
+				flyoutOpen
+			],
+			[
+				"set",
+				"placement",
+				"right"
+			],
+			[
+				"set",
+				"onDismiss",
+				() => setFlyoutOpen(false)
+			],
+			[
+				"set",
+				"className",
+				"vx-sidenav-flyout"
+			]
+		], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan43, [props.children]);
+		})))]) : null
+	]);
+}, { "module": "@nativescript-community/octane" });
+var SideNavCollapseButton = defineUniversalComponent("nativescript", function SideNavCollapseButton(props) {
+	const ctx = withSlot(_h$14, useSideNavCollapse);
+	const extCfg = props.collapsible;
+	const extHandle = props.handleRef?.current?.getCollapseState();
+	const external = extCfg ? {
+		isCollapsed: extCfg.isCollapsed,
+		toggle: () => extCfg.onCollapsedChange(!extCfg.isCollapsed),
+		isCollapsible: true
+	} : extHandle ?? null;
+	const isCollapsible = ctx?.isCollapsible ?? external?.isCollapsible ?? true;
+	const isCollapsed = ctx?.isCollapsed ?? external?.isCollapsed ?? false;
+	const toggle = ctx?.toggle ?? external?.toggle ?? (() => {});
+	return universalValue(__octaneUniversalPlan50, [universalIf(!isCollapsible, () => {
+		return universalValue(__octaneUniversalPlan46, []);
+	}, () => {
+		return universalValue(__octaneUniversalPlan49, [universalComponent("nativescript", Pressable, universalProps([
+			[
+				"set",
+				"ref",
+				(v) => applyEscapeProps(v, props)
+			],
+			[
+				"set",
+				"id",
+				props.id
+			],
+			[
+				"set",
+				"className",
+				cx("vx-sidenav-collapsebtn", props.label == null && "vx-sidenav-collapsebtn--icon", props.className)
+			],
+			[
+				"set",
+				"style",
+				props.style
+			],
+			[
+				"set",
+				"accessibilityLabel",
+				props.label ?? (isCollapsed ? "Expand" : "Collapse")
+			],
+			[
+				"set",
+				"onPress",
+				toggle
+			]
+		], props.children ?? universalValue(__octaneUniversalPlan48, [universalComponent("nativescript", Icon, universalProps([[
+			"set",
+			"name",
+			isCollapsed ? "xplat-chevron-right" : "xplat-chevron-left"
+		], [
+			"set",
+			"size",
+			16
+		]])), props.label != null ? universalValue(__octaneUniversalPlan47, [universalComponent("nativescript", Text, universalProps([[
+			"set",
+			"className",
+			"vx-sidenav-collapsebtn-label"
+		]], props.label))]) : null])))]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { SideNav, SideNavCollapseButton, SideNavCollapseContext, SideNavHeading, SideNavItem, SideNavRenderContext, SideNavSection, useSideNavCollapse, useSideNavRenderMode };