@octane-xplat/ui 0.4.0 → 0.6.0

package/dist/web/ui.js

@@ -1,51 +1,91 @@
-import { View } from "./ui5.js";
-import { Row } from "./ui6.js";
-import { Grid } from "./ui7.js";
-import { Stack } from "./ui8.js";
-import { Absolute } from "./ui9.js";
-import { LiquidGlass } from "./ui10.js";
-import { LiquidGlassContainer } from "./ui11.js";
-import { Spacer } from "./ui12.js";
-import { Text } from "./ui13.js";
-import { RichText, RichTextSpan } from "./ui14.js";
-import { Pressable } from "./ui15.js";
-import { Link } from "./ui16.js";
-import { deriveRouteManifest } from "./ui17.js";
-import { canGoBack, currentModalRoute, currentRoute, hrefFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute } from "./ui18.js";
-import { NavLink } from "./ui19.js";
-import { TextInput } from "./ui20.js";
-import { TextArea } from "./ui21.js";
-import { List } from "./ui22.js";
-import { ScrollView } from "./ui23.js";
-import { ScrollBox } from "./ui24.js";
-import { Image } from "./ui25.js";
-import { Modal } from "./ui26.js";
-import { getColorScheme, useColorScheme } from "./ui27.js";
-import { applyThemeClasses, getThemePreference, getThemeScheme, onThemeSchemeChange, setThemePreference, themeSchemeClasses, useThemeScheme } from "./ui29.js";
-import { openModal } from "./ui30.js";
-import { Overlay } from "./ui31.js";
-import { Popover } from "./ui33.js";
-import { showToast } from "./ui34.js";
-import { useAnimation } from "./ui35.js";
-import { styled } from "./ui36.js";
-import { openWindow } from "./ui37.js";
-import { Screen } from "./ui38.js";
-import { Tabs } from "./ui39.js";
-import { Switch } from "./ui40.js";
-import { useSafeAreaInsets } from "./ui41.js";
-import { SafeArea } from "./ui42.js";
-import { KeyboardAvoiding } from "./ui43.js";
-import { Drawer } from "./ui44.js";
-import { ActivityIndicator } from "./ui46.js";
-import { Meter } from "./ui48.js";
-import { Slider } from "./ui49.js";
-import { registerIcon, registerIcons } from "./ui50.js";
-import { Icon } from "./ui51.js";
-import { Heading } from "./ui52.js";
-import { PlatformBadge } from "./ui53.js";
-import { getStack, registerStack, stackEntries } from "./ui54.js";
-import { createStore } from "./ui55.js";
-import { useStore } from "./ui56.js";
-import { Sheet } from "./ui57.js";
-import { closeSheet, openSheet } from "./ui58.js";
-export { Absolute, ActivityIndicator, View as Column, Drawer, Grid, Heading, Icon, Image, KeyboardAvoiding, Link, LiquidGlass, LiquidGlassContainer, List, Meter, Modal, NavLink, Overlay, PlatformBadge, Popover, Pressable, RichText, RichTextSpan, Row, SafeArea, Screen, ScrollBox, ScrollView, Sheet, Slider, Spacer, Stack, Switch, Tabs, Text, TextArea, TextInput, View, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, deriveRouteManifest, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, onThemeSchemeChange, openModal, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, routeStacks, screenFor, setThemePreference, showToast, stackEntries, styled, themeSchemeClasses, useAnimation, useCanGoBack, useColorScheme, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };
+import { View } from "./View.web.tsrx.js";
+import { Row } from "./Row.web.tsrx.js";
+import { Grid } from "./Grid.web.tsrx.js";
+import { Stack } from "./Stack.web.tsrx.js";
+import { Absolute } from "./Absolute.web.tsrx.js";
+import { setTranslate } from "./translate.web.js";
+import { Spacer } from "./Spacer.web.tsrx.js";
+import { Text } from "./Text.web.tsrx.js";
+import { RichText, RichTextSpan } from "./RichText.web.tsrx.js";
+import { Pressable } from "./Pressable.web.tsrx.js";
+import { ActivityIndicator } from "./ActivityIndicator.web.tsrx.js";
+import { Button } from "./Button.web.tsrx.js";
+import { Collapsible } from "./Collapsible.web.tsrx.js";
+import { Accordion } from "./Accordion.web.tsrx.js";
+import { Checkbox } from "./Checkbox.web.tsrx.js";
+import { RadioGroup } from "./RadioGroup.web.tsrx.js";
+import { getColorScheme, useColorScheme } from "./theme/colorScheme.web.js";
+import { applyThemeClasses, getThemePreference, getThemeScheme, onThemeSchemeChange, setThemePreference, themeSchemeClasses, useThemeScheme } from "./theme/theme-scheme.js";
+import { Popover } from "./Popover.web.tsrx.js";
+import { registerIcon, registerIcons } from "./icons.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { DropdownMenu } from "./DropdownMenu.web.tsrx.js";
+import { ContextMenu } from "./ContextMenu.web.tsrx.js";
+import { Badge } from "./Badge.web.tsrx.js";
+import { Separator } from "./Separator.web.tsrx.js";
+import { Skeleton } from "./Skeleton.web.tsrx.js";
+import { Avatar } from "./Avatar.web.tsrx.js";
+import { AvatarGroup } from "./AvatarGroup.web.tsrx.js";
+import { FormField } from "./FormField.web.tsrx.js";
+import { FieldGroup } from "./FieldGroup.web.tsrx.js";
+import { TextInput } from "./TextInput.web.tsrx.js";
+import { InputNumber } from "./InputNumber.web.tsrx.js";
+import { PinInput } from "./PinInput.web.tsrx.js";
+import { Select } from "./Select.web.tsrx.js";
+import { Combobox, InputMenu, SelectMenu } from "./aliases.web.tsrx.js";
+import { InputTags } from "./InputTags.web.tsrx.js";
+import { InputRating } from "./InputRating.web.tsrx.js";
+import { CheckboxGroup } from "./CheckboxGroup.web.tsrx.js";
+import { Breadcrumb } from "./Breadcrumb.web.tsrx.js";
+import { Pagination } from "./Pagination.web.tsrx.js";
+import { Stepper } from "./Stepper.web.tsrx.js";
+import { NavigationMenu } from "./NavigationMenu.web.tsrx.js";
+import { Overlay } from "./Overlay.web.tsrx.js";
+import { CommandPalette } from "./CommandPalette.web.tsrx.js";
+import { Table } from "./Table.web.tsrx.js";
+import { Timeline } from "./Timeline.web.tsrx.js";
+import { Tree } from "./Tree.web.tsrx.js";
+import { Alert } from "./Alert.web.tsrx.js";
+import { Card } from "./Card.web.tsrx.js";
+import { Chip } from "./Chip.web.tsrx.js";
+import { Kbd } from "./Kbd.web.tsrx.js";
+import { Empty } from "./Empty.web.tsrx.js";
+import { Banner } from "./Banner.web.tsrx.js";
+import { User } from "./User.web.tsrx.js";
+import { Meter } from "./Meter.web.tsrx.js";
+import { ProgressGroup } from "./ProgressGroup.web.tsrx.js";
+import { Link } from "./Link.web.tsrx.js";
+import { deriveRouteManifest } from "./route-table.js";
+import { addBackInterceptor, canGoBack, currentModalRoute, currentRoute, hrefFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute } from "./route.web.js";
+import { NavLink } from "./NavLink.web.tsrx.js";
+import { TextArea } from "./TextArea.web.tsrx.js";
+import { SearchInput } from "./SearchInput.web.tsrx.js";
+import { SegmentedControl } from "./SegmentedControl.web.tsrx.js";
+import { ScrollView } from "./ScrollView.web.tsrx.js";
+import { ScrollBox } from "./ScrollBox.web.tsrx.js";
+import { Pager } from "./Pager.web.tsrx.js";
+import { Image } from "./Image.web.tsrx.js";
+import { WebView } from "./WebView.web.tsrx.js";
+import { useMeasure } from "./useMeasure.web.tsrx.js";
+import { Slider } from "./Slider.web.tsrx.js";
+import { Video } from "./Video.web.tsrx.js";
+import { CameraView } from "./CameraView.web.tsrx.js";
+import { showToast } from "./toast-anchor.web.tsrx.js";
+import { useAnimation } from "./anim.web.tsrx.js";
+import { styled } from "./styled.web.tsrx.js";
+import { openWindow } from "./windows.web.js";
+import { Screen } from "./Screen.web.tsrx.js";
+import { Tabs } from "./Tabs.web.tsrx.js";
+import { Switch } from "./Switch.web.tsrx.js";
+import { useSafeAreaInsets } from "./safeAreaInsets.web.tsrx.js";
+import { SafeArea } from "./SafeArea.web.tsrx.js";
+import { Drawer } from "./Drawer.web.tsrx.js";
+import { Heading } from "./Heading.web.tsrx.js";
+import { isNative } from "./platform.web.js";
+import { getStack, registerStack, stackEntries } from "./stacks.web.js";
+import { useBackInterceptor } from "./use-back.web.tsrx.js";
+import { createStore } from "./store.js";
+import { useStore } from "./use-store.web.tsrx.js";
+import { Sheet } from "./Sheet.web.tsrx.js";
+import { closeSheet, openSheet } from "./sheet-service.web.js";
+export { Absolute, Accordion, ActivityIndicator, Alert, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, Button, CameraView, Card, Checkbox, CheckboxGroup, Chip, Collapsible, View as Column, Combobox, CommandPalette, ContextMenu, Drawer, DropdownMenu, Empty, FieldGroup, FormField, Grid, Heading, Icon, Image, InputMenu, InputNumber, InputRating, InputTags, Kbd, Link, Meter, NavLink, NavigationMenu, Overlay, Pager, Pagination, PinInput, Popover, Pressable, ProgressGroup, RadioGroup, RichText, RichTextSpan, Row, SafeArea, Screen, ScrollBox, ScrollView, SearchInput, SegmentedControl, Select, SelectMenu, Separator, Sheet, Skeleton, Slider, Spacer, Stack, Stepper, Switch, Table, Tabs, Text, TextArea, TextInput, Timeline, Tree, User, Video, View, WebView, addBackInterceptor, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, deriveRouteManifest, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, isNative, onThemeSchemeChange, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, routeStacks, screenFor, setThemePreference, setTranslate, showToast, stackEntries, styled, themeSchemeClasses, useAnimation, useBackInterceptor, useCanGoBack, useColorScheme, useMeasure, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };

package/dist/web/use-back.web.tsrx.js

@@ -0,0 +1,9 @@
+import { addBackInterceptor } from "./route.web.js";
+import { hookSlots, useEffect } from "octane";
+//#region src/use-back.web.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function useBackInterceptor(fn) {
+	useEffect(() => addBackInterceptor(fn), [fn], _h$0);
+}
+//#endregion
+export { useBackInterceptor };

package/dist/web/useMeasure.web.tsrx.js

@@ -0,0 +1,50 @@
+import { hookSlots, useEffect, useState } from "octane";
+import { memoPublish, memoSlot, memoTake0 } from "octane/internal/client";
+//#region src/useMeasure.web.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(4);
+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);
+function readBounds(element) {
+	const rect = element.getBoundingClientRect();
+	return {
+		x: rect.left,
+		y: rect.top,
+		width: rect.width,
+		height: rect.height
+	};
+}
+function useMeasure(options = {}) {
+	let __hks, __hke;
+	const [element, setElement] = useState(null, _h$0);
+	const [bounds, setBounds] = useState(null, _h$1);
+	const observe = options.observe ?? true;
+	const bind = (__hks = memoSlot(_h$2, "useCallback"), __hke = memoTake0(__hks), __hke === null ? memoPublish(__hks, (next) => {
+		setElement((current) => current === next ? current : next);
+	}) : __hke.value);
+	useEffect(() => {
+		if (!element) {
+			setBounds(null);
+			return;
+		}
+		const update = () => setBounds(readBounds(element));
+		update();
+		if (!observe) return;
+		const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+		resizeObserver?.observe(element);
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, true);
+		return () => {
+			resizeObserver?.disconnect();
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, true);
+		};
+	}, [element, observe], _h$3);
+	return {
+		bind,
+		bounds
+	};
+}
+//#endregion
+export { useMeasure };

package/dist/web/video-chrome.web.tsrx.js

@@ -0,0 +1,207 @@
+import { View } from "./View.web.tsrx.js";
+import { Row } from "./Row.web.tsrx.js";
+import { Text } from "./Text.web.tsrx.js";
+import { Pressable } from "./Pressable.web.tsrx.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { Image } from "./Image.web.tsrx.js";
+import { Slider } from "./Slider.web.tsrx.js";
+import { bag4, child, clone, componentSlot, componentSlotVoid, drainFrag, hookSlots, ifBlock, markChildrenBlock, markWarm, registerWarmPlan, template, useEffect, useState, warmChild } from "octane";
+import { textHoleUpdate } from "octane/internal/client";
+//#region src/video-chrome.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(12);
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	componentSlotVoid(__s, 0, __block.parentNode, Image, {
+		"className": "vx-video-poster",
+		"src": props.poster,
+		"ios": { stretch: "aspectFill" },
+		"android": { stretch: "aspectFill" }
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:1f04b0e4");
+}
+var __childrenBody = {};
+var __childrenBody$ = {};
+function __then$5(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	function __children$7(__props, __s, __extra) {
+		const __block = __s.block;
+		function __children$9(__props, __s, __extra) {
+			const __block = __s.block;
+			componentSlot(__s, 0, __block.parentNode, Icon, {
+				"name": "xplat-play",
+				"size": 28,
+				"color": "#fff"
+			}, __block.endMarker, void 0, 2, void 0, void 0, "c:1921eb83");
+		}
+		componentSlotVoid(__s, 0, __block.parentNode, View, {
+			"className": "vx-video-centerbtn",
+			"children": markChildrenBlock(__children$9, __childrenBody)
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:6b9e94c8");
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, Pressable, {
+		"className": "vx-video-center",
+		"justifyContent": "center",
+		"alignItems": "center",
+		"accessibilityRole": "button",
+		"accessibilityLabel": "Play",
+		"onPress": props.onTogglePlay,
+		"children": markChildrenBlock(__children$7, __childrenBody$)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:422fa4c4");
+}
+var __childrenBody$2 = {};
+var __childrenBody$3 = {};
+var __childrenBody$4 = {};
+var __childrenBody$5 = {};
+var __childrenBody$6 = {};
+var __childrenBody$7 = {};
+function __then$4(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	function __children$13(__props, __s, __extra) {
+		const __block = __s.block;
+		function __children$15(__props, __s, __extra) {
+			const __block = __s.block;
+			function __children$17(__props, __s, __extra) {
+				const __block = __s.block;
+				componentSlot(__s, 0, __block.parentNode, Icon, {
+					"name": props.playing ? "xplat-pause" : "xplat-play",
+					"size": 20,
+					"color": "#fff"
+				}, __block.endMarker, void 0, 2, void 0, void 0, "c:52dcc579");
+			}
+			function __children$20(__props, __s, __extra) {
+				const __block = __s.block;
+				let _b = __s.slots[0];
+				if (_b === void 0) {
+					let _m0, _m1;
+					const _root = clone(_t$0);
+					_m0 = __block.parentNode;
+					_m1 = child(_root);
+					drainFrag(_root, __block.parentNode, __block.endMarker);
+					_b = bag4(__s, null, _m0, _m1, null, void 0);
+				}
+				{
+					const _v = stamp(props.position);
+					_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+					_b.d = _v;
+				}
+			}
+			function __children$24(__props, __s, __extra) {
+				const __block = __s.block;
+				let _b = __s.slots[0];
+				if (_b === void 0) {
+					let _m0, _m1;
+					const _root = clone(_t$0);
+					_m0 = __block.parentNode;
+					_m1 = child(_root);
+					drainFrag(_root, __block.parentNode, __block.endMarker);
+					_b = bag4(__s, null, _m0, _m1, null, void 0);
+				}
+				{
+					const _v = stamp(props.duration);
+					_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+					_b.d = _v;
+				}
+			}
+			function __children$27(__props, __s, __extra) {
+				const __block = __s.block;
+				componentSlot(__s, 0, __block.parentNode, Icon, {
+					"name": props.muted ? "xplat-volume-off" : "xplat-volume",
+					"size": 20,
+					"color": "#fff"
+				}, __block.endMarker, void 0, 2, void 0, void 0, "c:3158cbfc");
+			}
+			componentSlotVoid(__s, 0, __block.parentNode, Pressable, {
+				"className": "vx-video-btn",
+				"accessibilityRole": "button",
+				"accessibilityLabel": props.playing ? "Pause" : "Play",
+				"onPress": props.onTogglePlay,
+				"children": markChildrenBlock(__children$17, __childrenBody$2)
+			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:b0e57e42");
+			componentSlotVoid(__s, 1, __block.parentNode, Text, {
+				"className": "vx-video-time",
+				"children": markChildrenBlock(__children$20, __childrenBody$3)
+			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:c5cb75e7");
+			componentSlotVoid(__s, 2, __block.parentNode, Slider, {
+				"className": "vx-video-slider",
+				"style": { flexGrow: 1 },
+				"value": props.position,
+				"minValue": 0,
+				"maxValue": props.duration > 0 ? props.duration : 1,
+				"onValueChange": props.onSeek
+			}, __block.endMarker, void 0, 2, void 0, void 0, "c:983b3c9e");
+			componentSlotVoid(__s, 3, __block.parentNode, Text, {
+				"className": "vx-video-time",
+				"children": markChildrenBlock(__children$24, __childrenBody$4)
+			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:fb6ef5fe");
+			componentSlotVoid(__s, 4, __block.parentNode, Pressable, {
+				"className": "vx-video-btn",
+				"accessibilityRole": "button",
+				"accessibilityLabel": props.muted ? "Unmute" : "Mute",
+				"onPress": props.onToggleMute,
+				"children": markChildrenBlock(__children$27, __childrenBody$5)
+			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:4aa80908");
+		}
+		componentSlotVoid(__s, 0, __block.parentNode, Row, {
+			"className": "vx-video-bar",
+			"alignItems": "center",
+			"gap": 8,
+			"children": markChildrenBlock(__children$15, __childrenBody$6)
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:199677e9");
+	}
+	ifBlock(__s, 0, __block.parentNode, !props.playing, __then$5, null, __block.endMarker, __extra);
+	componentSlotVoid(__s, 1, __block.parentNode, View, {
+		"className": "vx-video-barwrap",
+		"justifyContent": "end",
+		"children": markChildrenBlock(__children$13, __childrenBody$7)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:b4f78ef1");
+}
+function stamp(ms) {
+	const total = Math.max(0, Math.floor(ms / 1e3));
+	return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
+}
+var VideoChrome = /* @__PURE__ */ markWarm(function VideoChrome(props, __s, __extra) {
+	const __block = __s.block;
+	const [visible, setVisible] = useState(true, _hs$ + 0);
+	useEffect(() => {
+		if (!props.playing || !visible) return;
+		const t = setTimeout(() => setVisible(false), 2500);
+		return () => clearTimeout(t);
+	}, [props.playing, visible], _hs$ + 1);
+	const __warmPlan = VideoChrome.__warm;
+	if (typeof __warmPlan === "function") registerWarmPlan(__warmPlan, props);
+	else registerWarmPlan(() => {
+		if (props.poster && !props.started) warmChild(Image, {
+			className: "vx-video-poster",
+			src: props.poster,
+			ios: { stretch: "aspectFill" },
+			android: { stretch: "aspectFill" }
+		});
+	}, void 0);
+	{
+		const __ifCondition = props.poster && !props.started;
+		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, __block.endMarker, __ifCondition ? [props] : void 0);
+	}
+	componentSlotVoid(__s, 1, __block.parentNode, Pressable, {
+		"className": "vx-video-tap",
+		"accessibilityRole": "button",
+		"accessibilityLabel": visible ? "Hide video controls" : "Show video controls",
+		"onPress": () => setVisible(props.playing ? !visible : true)
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:9cac9799");
+	{
+		const __ifCondition$ = visible;
+		ifBlock(__s, 2, __block.parentNode, __ifCondition$, __then$4, null, __block.endMarker, __ifCondition$ ? [props] : void 0);
+	}
+}, (__wp) => {
+	const props = __wp;
+	if (props.poster && !props.started) warmChild(Image, {
+		className: "vx-video-poster",
+		src: props.poster,
+		ios: { stretch: "aspectFill" },
+		android: { stretch: "aspectFill" }
+	});
+});
+//#endregion
+export { VideoChrome };

package/dist/web/web/Hoverable.web.tsrx.js

@@ -0,0 +1,150 @@
+import { View } from "../View.web.tsrx.js";
+import { Popover } from "../Popover.web.tsrx.js";
+import { bag4, bag5, child, clone, componentSlotVoid, drainFrag, hookSlots, markChildrenBlock, sibling, template, useEffect, useRef, useState } from "octane";
+import { compilerMemoRegion, hookMemoCreate, hookMemoPublishInvariant, textHoleUpdate } from "octane/internal/client";
+//#region src/web/Hoverable.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _t$1 = /* @__PURE__ */ template("<!><!>", 3, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(7);
+var __childrenBody = {};
+var __childrenBody$ = {};
+var __childrenBody$2 = {};
+var Hoverable = function Hoverable(props, __s, __extra) {
+	const __block = __s.block;
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(3);
+	const [open, setOpen] = useState(false, _hs$ + 0);
+	const anchor = useRef(null, _hs$ + 1);
+	const anchorBinding = useRef(null, _hs$ + 2);
+	const cardBinding = useRef(null, _hs$ + 3);
+	const openTimer = useRef(null, _hs$ + 4);
+	const closeTimer = useRef(null, _hs$ + 5);
+	const clearOpen = __hk[0] ?? hookMemoPublishInvariant(__hk, 0, () => {
+		if (openTimer.current !== null) clearTimeout(openTimer.current);
+		openTimer.current = null;
+	});
+	const clearClose = __hk[1] ?? hookMemoPublishInvariant(__hk, 1, () => {
+		if (closeTimer.current !== null) clearTimeout(closeTimer.current);
+		closeTimer.current = null;
+	});
+	const scheduleClose = () => {
+		clearClose();
+		closeTimer.current = setTimeout(() => {
+			closeTimer.current = null;
+			setOpen(false);
+		}, Math.max(0, props.closeDelay ?? 120));
+	};
+	const startOpen = () => {
+		clearClose();
+		clearOpen();
+		openTimer.current = setTimeout(() => {
+			openTimer.current = null;
+			setOpen(true);
+		}, Math.max(0, props.openDelay ?? 500));
+	};
+	const unbind = __hk[2] ?? hookMemoPublishInvariant(__hk, 2, (binding) => {
+		if (!binding) return;
+		binding.node.removeEventListener("mouseenter", binding.enter);
+		binding.node.removeEventListener("mouseleave", binding.leave);
+	});
+	const bindAnchor = (node) => {
+		anchor.current = node;
+		if (anchorBinding.current?.node === node) return;
+		unbind(anchorBinding.current);
+		anchorBinding.current = null;
+		if (!node) return;
+		const binding = {
+			node,
+			enter: startOpen,
+			leave: () => {
+				clearOpen();
+				scheduleClose();
+			}
+		};
+		node.addEventListener("mouseenter", binding.enter);
+		node.addEventListener("mouseleave", binding.leave);
+		anchorBinding.current = binding;
+	};
+	const bindCard = (node) => {
+		if (cardBinding.current?.node === node) return;
+		unbind(cardBinding.current);
+		cardBinding.current = null;
+		if (!node) return;
+		const binding = {
+			node,
+			enter: clearClose,
+			leave: scheduleClose
+		};
+		node.addEventListener("mouseenter", binding.enter);
+		node.addEventListener("mouseleave", binding.leave);
+		cardBinding.current = binding;
+	};
+	useEffect(() => () => {
+		clearOpen();
+		clearClose();
+		unbind(anchorBinding.current);
+		unbind(cardBinding.current);
+	}, [], _hs$ + 6);
+	function __children$1(__props, __s, __extra) {
+		const __block = __s.block;
+		function __children$4(__props, __s, __extra) {
+			const __block = __s.block;
+			function __children$6(__props, __s, __extra) {
+				const __block = __s.block;
+				let _b = __s.slots[0];
+				if (_b === void 0) {
+					let _m0, _m1;
+					const _root = clone(_t$0);
+					_m0 = __block.parentNode;
+					_m1 = child(_root);
+					drainFrag(_root, __block.parentNode, __block.endMarker);
+					_b = bag4(__s, null, _m0, _m1, null, void 0);
+				}
+				{
+					const _v = props.card;
+					_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+					_b.d = _v;
+				}
+			}
+			componentSlotVoid(__s, 0, __block.parentNode, View, {
+				"bind": bindCard,
+				"className": props.cardClassName,
+				"style": props.cardStyle,
+				"children": markChildrenBlock(__children$6, __childrenBody)
+			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:c1227cf9");
+		}
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1, _m4;
+			const _root = clone(_t$1);
+			_m0 = __block.parentNode;
+			const _el0 = child(_root);
+			_m1 = _el0;
+			_m4 = sibling(_el0, 1);
+			drainFrag(_root, __block.parentNode, __block.endMarker);
+			_b = bag5(__s, null, _m0, _m1, null, void 0, _m4);
+		}
+		{
+			const _v = props.children;
+			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true);
+			_b.d = _v;
+		}
+		componentSlotVoid(__s, 2, _b.a, Popover, {
+			"open": open,
+			"anchor": anchor,
+			"placement": props.placement ?? "bottom",
+			"dismissOnOutsideTap": false,
+			"children": markChildrenBlock(__children$4, __childrenBody$)
+		}, _b.e, void 0, void 0, void 0, void 0, "c:b985f665");
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, View, {
+		"className": props.className,
+		"style": props.style,
+		"bind": bindAnchor,
+		"web": props.web,
+		"children": markChildrenBlock(__children$1, __childrenBody$2)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:3f5159c9");
+};
+//#endregion
+export { Hoverable };