@octane-xplat/ui 0.5.0 → 0.7.0

package/src/index.mobile.ts

@@ -0,0 +1,6 @@
+export * from './index.shared'
+export { KeyboardAvoiding } from './KeyboardAvoiding.mobile.tsrx'
+export type { KeyboardAvoidingProps } from './props'
+
+// Keep native status-bar icon appearance synced with the effective theme scheme.
+import './theme/status-bar-scheme.mobile'

package/src/index.shared.ts

@@ -0,0 +1,269 @@
+// Foundations and common controls
+export { View } from './View.tsrx'
+export { View as Column } from './View.tsrx'
+export { Row } from './Row.tsrx'
+export { Grid } from './Grid.tsrx'
+export { Stack } from './Stack.tsrx'
+export { Absolute } from './Absolute.tsrx'
+export type { PanEvent, SwipeEvent, SetTranslate } from './props'
+export { setTranslate } from './translate'
+export { Spacer } from './Spacer.tsrx'
+export { Text } from './Text.tsrx'
+export { RichText, RichTextSpan } from './RichText.tsrx'
+export { Pressable } from './Pressable.tsrx'
+export { Button } from './Button.tsrx'
+export { Collapsible } from './Collapsible.tsrx'
+export { Accordion } from './Accordion.tsrx'
+export { Checkbox } from './Checkbox.tsrx'
+export { RadioGroup } from './RadioGroup.tsrx'
+export { DropdownMenu } from './DropdownMenu.tsrx'
+export { ContextMenu } from './ContextMenu.tsrx'
+export { Badge } from './Badge.tsrx'
+export { Separator } from './Separator.tsrx'
+export { Skeleton } from './Skeleton.tsrx'
+export { Avatar } from './Avatar.tsrx'
+export { AvatarGroup } from './AvatarGroup.tsrx'
+export type {
+	AccordionItemSpec,
+	AccordionProps,
+	AvatarGroupProps,
+	AvatarProps,
+	BadgeProps,
+	ButtonProps,
+	CheckboxProps,
+	CollapsibleProps,
+	ContextMenuProps,
+	DropdownMenuProps,
+	MenuItem,
+	RadioGroupProps,
+	RadioOption,
+	SegmentedControlProps,
+	SeparatorProps,
+	SkeletonProps,
+} from './props'
+
+// Forms and data entry
+export { FormField } from './FormField.tsrx'
+export { FieldGroup } from './FieldGroup.tsrx'
+export { ListItem } from './ListItem.tsrx'
+export { InputNumber } from './InputNumber.tsrx'
+export { PinInput } from './PinInput.tsrx'
+export { Select } from './Select.tsrx'
+export { SelectMenu, Combobox, InputMenu } from './aliases.tsrx'
+export { InputTags } from './InputTags.tsrx'
+export { InputRating } from './InputRating.tsrx'
+export { CheckboxGroup } from './CheckboxGroup.tsrx'
+export type {
+	CheckboxGroupProps,
+	FieldGroupProps,
+	ListItemComponent,
+	ListItemProps,
+	ListItemSlotProps,
+	FormFieldProps,
+	InputNumberProps,
+	InputRatingProps,
+	InputTagsProps,
+	PinInputProps,
+	SelectOption,
+	SelectProps,
+} from './props'
+
+// Navigation and command surfaces
+export { Breadcrumb } from './Breadcrumb.tsrx'
+export { Pagination } from './Pagination.tsrx'
+export { Stepper } from './Stepper.tsrx'
+export { NavigationMenu } from './NavigationMenu.tsrx'
+export { CommandPalette } from './CommandPalette.tsrx'
+export type {
+	BreadcrumbItem,
+	BreadcrumbProps,
+	CommandPaletteProps,
+	NavigationMenuItem,
+	NavigationMenuProps,
+	PaginationProps,
+	StepperProps,
+	StepperStep,
+} from './props'
+
+// Content and display
+export { Table } from './Table.tsrx'
+export { Timeline } from './Timeline.tsrx'
+export { Tree } from './Tree.tsrx'
+export { Alert } from './Alert.tsrx'
+export { Card } from './Card.tsrx'
+export { Chip } from './Chip.tsrx'
+export { Kbd } from './Kbd.tsrx'
+export { Empty } from './Empty.tsrx'
+export { Banner } from './Banner.tsrx'
+export { User } from './User.tsrx'
+export { ProgressGroup } from './ProgressGroup.tsrx'
+export type {
+	AlertProps,
+	BannerProps,
+	CardProps,
+	ChipProps,
+	EmptyProps,
+	KbdProps,
+	ProgressGroupProps,
+	TableColumn,
+	TableProps,
+	TimelineItem,
+	TimelineProps,
+	TreeNode,
+	TreeProps,
+	UserProps,
+} from './props'
+
+// Links, input, scrolling, media, and overlays
+export { Link } from './Link.tsrx'
+export { NavLink } from './NavLink.tsrx'
+export { TextInput } from './TextInput.tsrx'
+export { TextArea } from './TextArea.tsrx'
+export { SearchInput } from './SearchInput.tsrx'
+export { SegmentedControl } from './SegmentedControl.tsrx'
+export { ScrollBox } from './ScrollBox.tsrx'
+export { ScrollView } from './ScrollView.tsrx'
+export { VirtualList } from './VirtualList.tsrx'
+export type { VirtualListProps } from './props'
+export { Image } from './Image.tsrx'
+export { WebView } from './WebView.tsrx'
+export type { WebViewContentSize, WebViewHandle, WebViewLoadEvent, WebViewProps } from './props'
+export { Overlay } from './Overlay.tsrx'
+export { Popover } from './Popover.tsrx'
+export { Hoverable } from './Hoverable.tsrx'
+export { Tooltip } from './Tooltip.tsrx'
+export { showToast } from './toast-anchor.tsrx'
+export type {
+	HoverableProps,
+	OverlayProps,
+	PopoverAnchorRef,
+	PopoverProps,
+	PopoverPlacement,
+	ToastContent,
+	ToastOptions,
+	ToastPosition,
+	TooltipProps,
+} from './props'
+
+// Animation, theme, styling, and host services
+export { useAnimation } from './anim.tsrx'
+export type { AnimatedValue } from './anim.tsrx'
+export {
+	useThemeScheme,
+	getThemeScheme,
+	setThemePreference,
+	getThemePreference,
+	themeSchemeClasses,
+	onThemeSchemeChange,
+	applyThemeClasses,
+} from './theme/theme-scheme'
+
+export { useColorScheme, getColorScheme } from './theme/colorScheme'
+export type { ColorScheme } from './theme/colorScheme'
+export { styled } from './styled.tsrx'
+export { openWindow } from './windows'
+
+// Screens, visual controls, and icons
+export { Screen } from './Screen.tsrx'
+export { Tabs } from './Tabs.tsrx'
+export type { TabSpec } from './Tabs.tsrx'
+export { Switch } from './Switch.tsrx'
+export { SafeArea } from './SafeArea.tsrx'
+export { Drawer } from './Drawer.tsrx'
+export { useSafeAreaInsets } from './safeAreaInsets.tsrx'
+export type { SafeAreaInsets } from './safeAreaInsets.tsrx'
+export { useMeasure } from './useMeasure.tsrx'
+export type { MeasureBounds, MeasureResult, UseMeasureOptions } from './props'
+export { ActivityIndicator } from './ActivityIndicator.tsrx'
+export { Meter } from './Meter.tsrx'
+export { Slider } from './Slider.tsrx'
+export { Icon } from './Icon.tsrx'
+export { Heading } from './Heading.tsrx'
+export { registerIcon, registerIcons } from './icons'
+export type { IconGlyph } from './icons'
+export type {
+	ActivityIndicatorProps,
+	HeadingProps,
+	IconProps,
+	MeterProps,
+	RefreshProps,
+	SearchInputProps,
+	SliderProps,
+} from './props'
+
+// Platform state and routing
+export { isNative } from './platform'
+export { registerStack, getStack, stackEntries } from './stacks'
+export {
+	pushRoute,
+	popRoute,
+	routeStacks,
+	pushDeepLink,
+	routeFor,
+	currentRoute,
+	currentModalRoute,
+	canGoBack,
+	useCanGoBack,
+	useRoute,
+	useModalRoute,
+	redirect,
+	addBackInterceptor,
+	registerScreens,
+	registerRoutes,
+	addRoutes,
+	screenFor,
+	hrefFor,
+	layoutsForRoute,
+} from './route'
+
+export { useBackInterceptor } from './use-back.tsrx'
+
+export { deriveRouteManifest, defineRoutes, mergeRouteManifests } from './route-table'
+export type {
+	BeforeLoad,
+	BeforeLoadArgs,
+	LinkProps,
+	NavLinkProps,
+	Route,
+	RouteContext,
+	RouteHead,
+	RouteHeadExport,
+	RouteMeta,
+	RouteManifest,
+	RouteSpec,
+	RouteSpecSet,
+	ScreenTable,
+	ModalOpenResult,
+	OpenWindowOptions,
+} from './props'
+
+// Stores, sheets, and shared prop types
+export { createStore } from './store'
+export type { Store, ReadableStore } from './store'
+export { useStore } from './use-store.tsrx'
+export { Sheet } from './Sheet.tsrx'
+export { openSheet, closeSheet } from './sheet-service'
+export type { SheetProps, SheetOpenOptions, OpenSheet } from './props'
+export type {
+	AbsoluteProps,
+	DrawerProps,
+	GridProps,
+	ImageProps,
+	LayoutChildProps,
+	PressableProps,
+	RichTextProps,
+	RichTextSpanProps,
+	RowProps,
+	ScreenProps,
+	SafeAreaProps,
+	ScrollBoxProps,
+	ScrollViewProps,
+	SpacerProps,
+	StackProps,
+	SwitchProps,
+	TabsProps,
+	TextAreaProps,
+	TextInputProps,
+	TextProps,
+	ViewProps,
+} from './props'

package/src/index.shared.web.ts

@@ -0,0 +1,270 @@
+// Generated by scripts/sync-ui-barrels.mjs from index.shared.ts. Do not edit.
+// Foundations and common controls
+export { View } from './View.web.tsrx'
+export { View as Column } from './View.web.tsrx'
+export { Row } from './Row.web.tsrx'
+export { Grid } from './Grid.web.tsrx'
+export { Stack } from './Stack.web.tsrx'
+export { Absolute } from './Absolute.web.tsrx'
+export type { PanEvent, SwipeEvent, SetTranslate } from './props'
+export { setTranslate } from './translate.web'
+export { Spacer } from './Spacer.web.tsrx'
+export { Text } from './Text.web.tsrx'
+export { RichText, RichTextSpan } from './RichText.web.tsrx'
+export { Pressable } from './Pressable.web.tsrx'
+export { Button } from './Button.web.tsrx'
+export { Collapsible } from './Collapsible.web.tsrx'
+export { Accordion } from './Accordion.web.tsrx'
+export { Checkbox } from './Checkbox.web.tsrx'
+export { RadioGroup } from './RadioGroup.web.tsrx'
+export { DropdownMenu } from './DropdownMenu.web.tsrx'
+export { ContextMenu } from './ContextMenu.web.tsrx'
+export { Badge } from './Badge.web.tsrx'
+export { Separator } from './Separator.web.tsrx'
+export { Skeleton } from './Skeleton.web.tsrx'
+export { Avatar } from './Avatar.web.tsrx'
+export { AvatarGroup } from './AvatarGroup.web.tsrx'
+export type {
+	AccordionItemSpec,
+	AccordionProps,
+	AvatarGroupProps,
+	AvatarProps,
+	BadgeProps,
+	ButtonProps,
+	CheckboxProps,
+	CollapsibleProps,
+	ContextMenuProps,
+	DropdownMenuProps,
+	MenuItem,
+	RadioGroupProps,
+	RadioOption,
+	SegmentedControlProps,
+	SeparatorProps,
+	SkeletonProps,
+} from './props'
+
+// Forms and data entry
+export { FormField } from './FormField.web.tsrx'
+export { FieldGroup } from './FieldGroup.web.tsrx'
+export { ListItem } from './ListItem.web.tsrx'
+export { InputNumber } from './InputNumber.web.tsrx'
+export { PinInput } from './PinInput.web.tsrx'
+export { Select } from './Select.web.tsrx'
+export { SelectMenu, Combobox, InputMenu } from './aliases.web.tsrx'
+export { InputTags } from './InputTags.web.tsrx'
+export { InputRating } from './InputRating.web.tsrx'
+export { CheckboxGroup } from './CheckboxGroup.web.tsrx'
+export type {
+	CheckboxGroupProps,
+	FieldGroupProps,
+	ListItemComponent,
+	ListItemProps,
+	ListItemSlotProps,
+	FormFieldProps,
+	InputNumberProps,
+	InputRatingProps,
+	InputTagsProps,
+	PinInputProps,
+	SelectOption,
+	SelectProps,
+} from './props'
+
+// Navigation and command surfaces
+export { Breadcrumb } from './Breadcrumb.web.tsrx'
+export { Pagination } from './Pagination.web.tsrx'
+export { Stepper } from './Stepper.web.tsrx'
+export { NavigationMenu } from './NavigationMenu.web.tsrx'
+export { CommandPalette } from './CommandPalette.web.tsrx'
+export type {
+	BreadcrumbItem,
+	BreadcrumbProps,
+	CommandPaletteProps,
+	NavigationMenuItem,
+	NavigationMenuProps,
+	PaginationProps,
+	StepperProps,
+	StepperStep,
+} from './props'
+
+// Content and display
+export { Table } from './Table.web.tsrx'
+export { Timeline } from './Timeline.web.tsrx'
+export { Tree } from './Tree.web.tsrx'
+export { Alert } from './Alert.web.tsrx'
+export { Card } from './Card.web.tsrx'
+export { Chip } from './Chip.web.tsrx'
+export { Kbd } from './Kbd.web.tsrx'
+export { Empty } from './Empty.web.tsrx'
+export { Banner } from './Banner.web.tsrx'
+export { User } from './User.web.tsrx'
+export { ProgressGroup } from './ProgressGroup.web.tsrx'
+export type {
+	AlertProps,
+	BannerProps,
+	CardProps,
+	ChipProps,
+	EmptyProps,
+	KbdProps,
+	ProgressGroupProps,
+	TableColumn,
+	TableProps,
+	TimelineItem,
+	TimelineProps,
+	TreeNode,
+	TreeProps,
+	UserProps,
+} from './props'
+
+// Links, input, scrolling, media, and overlays
+export { Link } from './Link.web.tsrx'
+export { NavLink } from './NavLink.web.tsrx'
+export { TextInput } from './TextInput.web.tsrx'
+export { TextArea } from './TextArea.web.tsrx'
+export { SearchInput } from './SearchInput.web.tsrx'
+export { SegmentedControl } from './SegmentedControl.web.tsrx'
+export { ScrollBox } from './ScrollBox.web.tsrx'
+export { ScrollView } from './ScrollView.web.tsrx'
+export { VirtualList } from './VirtualList.web.tsrx'
+export type { VirtualListProps } from './props'
+export { Image } from './Image.web.tsrx'
+export { WebView } from './WebView.web.tsrx'
+export type { WebViewContentSize, WebViewHandle, WebViewLoadEvent, WebViewProps } from './props'
+export { Overlay } from './Overlay.web.tsrx'
+export { Popover } from './Popover.web.tsrx'
+export { Hoverable } from './Hoverable.web.tsrx'
+export { Tooltip } from './Tooltip.web.tsrx'
+export { showToast } from './toast-anchor.web.tsrx'
+export type {
+	HoverableProps,
+	OverlayProps,
+	PopoverAnchorRef,
+	PopoverProps,
+	PopoverPlacement,
+	ToastContent,
+	ToastOptions,
+	ToastPosition,
+	TooltipProps,
+} from './props'
+
+// Animation, theme, styling, and host services
+export { useAnimation } from './anim.web.tsrx'
+export type { AnimatedValue } from './anim.web.tsrx'
+export {
+	useThemeScheme,
+	getThemeScheme,
+	setThemePreference,
+	getThemePreference,
+	themeSchemeClasses,
+	onThemeSchemeChange,
+	applyThemeClasses,
+} from './theme/theme-scheme'
+
+export { useColorScheme, getColorScheme } from './theme/colorScheme.web'
+export type { ColorScheme } from './theme/colorScheme.web'
+export { styled } from './styled.web.tsrx'
+export { openWindow } from './windows.web'
+
+// Screens, visual controls, and icons
+export { Screen } from './Screen.web.tsrx'
+export { Tabs } from './Tabs.web.tsrx'
+export type { TabSpec } from './Tabs.web.tsrx'
+export { Switch } from './Switch.web.tsrx'
+export { SafeArea } from './SafeArea.web.tsrx'
+export { Drawer } from './Drawer.web.tsrx'
+export { useSafeAreaInsets } from './safeAreaInsets.web.tsrx'
+export type { SafeAreaInsets } from './safeAreaInsets.web.tsrx'
+export { useMeasure } from './useMeasure.web.tsrx'
+export type { MeasureBounds, MeasureResult, UseMeasureOptions } from './props'
+export { ActivityIndicator } from './ActivityIndicator.web.tsrx'
+export { Meter } from './Meter.web.tsrx'
+export { Slider } from './Slider.web.tsrx'
+export { Icon } from './Icon.web.tsrx'
+export { Heading } from './Heading.web.tsrx'
+export { registerIcon, registerIcons } from './icons'
+export type { IconGlyph } from './icons'
+export type {
+	ActivityIndicatorProps,
+	HeadingProps,
+	IconProps,
+	MeterProps,
+	RefreshProps,
+	SearchInputProps,
+	SliderProps,
+} from './props'
+
+// Platform state and routing
+export { isNative } from './platform.web'
+export { registerStack, getStack, stackEntries } from './stacks.web'
+export {
+	pushRoute,
+	popRoute,
+	routeStacks,
+	pushDeepLink,
+	routeFor,
+	currentRoute,
+	currentModalRoute,
+	canGoBack,
+	useCanGoBack,
+	useRoute,
+	useModalRoute,
+	redirect,
+	addBackInterceptor,
+	registerScreens,
+	registerRoutes,
+	addRoutes,
+	screenFor,
+	hrefFor,
+	layoutsForRoute,
+} from './route.web'
+
+export { useBackInterceptor } from './use-back.web.tsrx'
+
+export { deriveRouteManifest, defineRoutes, mergeRouteManifests } from './route-table'
+export type {
+	BeforeLoad,
+	BeforeLoadArgs,
+	LinkProps,
+	NavLinkProps,
+	Route,
+	RouteContext,
+	RouteHead,
+	RouteHeadExport,
+	RouteMeta,
+	RouteManifest,
+	RouteSpec,
+	RouteSpecSet,
+	ScreenTable,
+	ModalOpenResult,
+	OpenWindowOptions,
+} from './props'
+
+// Stores, sheets, and shared prop types
+export { createStore } from './store'
+export type { Store, ReadableStore } from './store'
+export { useStore } from './use-store.web.tsrx'
+export { Sheet } from './Sheet.web.tsrx'
+export { openSheet, closeSheet } from './sheet-service.web'
+export type { SheetProps, SheetOpenOptions, OpenSheet } from './props'
+export type {
+	AbsoluteProps,
+	DrawerProps,
+	GridProps,
+	ImageProps,
+	LayoutChildProps,
+	PressableProps,
+	RichTextProps,
+	RichTextSpanProps,
+	RowProps,
+	ScreenProps,
+	SafeAreaProps,
+	ScrollBoxProps,
+	ScrollViewProps,
+	SpacerProps,
+	StackProps,
+	SwitchProps,
+	TabsProps,
+	TextAreaProps,
+	TextInputProps,
+	TextProps,
+	ViewProps,
+} from './props'

package/src/index.ts

@@ -0,0 +1 @@
+export * from './index.shared'

package/src/index.web.ts

@@ -0,0 +1 @@
+export * from './index.shared.web'

package/src/ios/LiquidGlass.ios.tsrx

@@ -0,0 +1,41 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { LiquidGlass as NSLiquidGlass } from '@nativescript/core';
+import { registerElement } from '@nativescript-community/octane';
+import type { Attributes } from '@nativescript-community/octane/intrinsics';
+import type { LiquidGlassProps, PlatformWidgetProps } from '../props';
+import { cx } from '../cx';
+import { applyEscapeProps } from '../escape-props';
+import { layoutChildProps } from '../layout-child';
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		liquidglass: Attributes<typeof NSLiquidGlass>;
+	}
+}
+
+// Core ships the class (a GridLayout whose root is an interactive
+// UIVisualEffectView + UIGlassEffect) but the driver's intrinsic map was
+// generated before it existed — register like any plugin view.
+registerElement('liquidglass', NSLiquidGlass);
+
+/** LiquidGlass — the element root is the glass surface itself: touch-tracking
+ *  UIGlassEffect on iOS 26+, inert GridLayout on older iOS. The effect is
+ *  always applied as a config object: the upstream string shorthand rebuilds
+ *  the effect without `interactive` on prop updates. */
+export function LiquidGlass(props: PlatformWidgetProps<LiquidGlassProps>) @{
+	<liquidglass
+		id={props.id}
+		ref={(v: any) => applyEscapeProps(v, props)}
+		{...layoutChildProps(props)}
+		iosGlassEffect={{
+			variant: props.variant ?? 'regular',
+			interactive: props.interactive ?? true,
+			tint: props.tint,
+			animateChangeDuration: props.animateChangeDuration,
+		}}
+		className={cx('vx-glass', props.variant === 'clear' ? 'vx-glass--clear' : undefined, props.className)}
+		style={props.style}
+	>
+		{props.children}
+	</liquidglass>
+}

package/src/ios/LiquidGlassContainer.ios.tsrx

@@ -0,0 +1,34 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { LiquidGlassContainer as NSLiquidGlassContainer } from '@nativescript/core';
+import { registerElement } from '@nativescript-community/octane';
+import type { Attributes } from '@nativescript-community/octane/intrinsics';
+import type { LiquidGlassContainerProps, PlatformWidgetProps } from '../props';
+import { cx } from '../cx';
+import { applyEscapeProps } from '../escape-props';
+import { layoutChildProps } from '../layout-child';
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		liquidglasscontainer: Attributes<typeof NSLiquidGlassContainer>;
+	}
+}
+
+registerElement('liquidglasscontainer', NSLiquidGlassContainer);
+
+/** LiquidGlassContainer — merged-glass region (UIGlassContainerEffect):
+ *  glass siblings inside morph together across `spacing` dips. The native
+ *  host is an AbsoluteLayout — children position via left/top, or nest a
+ *  layout primitive inside and let the glass effects merge spatially.
+ *  Inert layout on iOS < 26. */
+export function LiquidGlassContainer(props: PlatformWidgetProps<LiquidGlassContainerProps>) @{
+	<liquidglasscontainer
+		id={props.id}
+		ref={(v: any) => applyEscapeProps(v, props)}
+		{...layoutChildProps(props)}
+		iosGlassEffect={{ spacing: props.spacing ?? 8 }}
+		className={cx('vx-glass-container', props.className)}
+		style={props.style}
+	>
+		{props.children}
+	</liquidglasscontainer>
+}

package/src/ios/SideDrawer.ios.tsrx

@@ -0,0 +1,49 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { registerElement } from '@nativescript-community/octane';
+import type { Attributes } from '@nativescript-community/octane/intrinsics';
+import { Drawer as NSDrawer, install } from '@nativescript-community/ui-drawer';
+import { useEffect, useRef } from 'octane';
+import type { DrawerProps, PlatformWidgetProps } from '../props';
+import { cx } from '../cx';
+import { applyEscapeProps } from '../escape-props';
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		drawer: Attributes<typeof NSDrawer>;
+	}
+}
+
+// Optional peer: this leaf resolves only when the app ships the plugin
+// (isolated linker resolves it under the app root). install() registers the
+// plugin's gesture handler once at module load. iOS has no OS drawer
+// widget — ui-drawer is the platform-authentic mechanism (edge-gesture
+// slide-over); the self-drawn shared `Drawer` lives in the root export.
+install();
+registerElement('drawer', NSDrawer);
+
+/** SideDrawer — ui-drawer host. `main`/`drawer` are slot props wired via the
+ *  driver's hostSlot mechanism (parentView[slot] = view → mainContent /
+ *  leftDrawer); `open` drives the imperative open()/close(). Slot hosts are
+ *  gridlayout so each side stays multi-child. */
+export function SideDrawer(props: PlatformWidgetProps<DrawerProps>) @{
+	const host = useRef<NSDrawer | null>(null);
+
+	useEffect(() => {
+		const d = host.current;
+		if (!d) return;
+		if (props.open && !d.isOpened('left')) d.open('left').catch(() => {});
+		else if (!props.open && d.isOpened('left')) d.close('left').catch(() => {});
+	}, [props.open]);
+
+	<drawer
+		id={props.id}
+		ref={(d: any) => { host.current = d; applyEscapeProps(d, props); }}
+		className={cx('vx-drawer', props.className)}
+		style={props.style}
+	>
+		<gridlayout hostSlot="mainContent">{props.main}</gridlayout>
+		@if (props.drawer != null) {
+			<gridlayout hostSlot="leftDrawer">{props.drawer}</gridlayout>
+		}
+	</drawer>
+}

package/src/ios/UIActivityIndicatorView.ios.tsrx

@@ -0,0 +1,18 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { ActivityIndicatorProps, PlatformWidgetProps } from '../props';
+import { cx } from '../cx';
+import { applyNativeProps } from '../platformProps';
+
+/** UIActivityIndicatorView — the platform spinner (UIKit). The self-drawn
+ *  shared `ActivityIndicator` lives in the root export. */
+export function UIActivityIndicatorView(props: PlatformWidgetProps<ActivityIndicatorProps>) @{
+	if (props.busy === false) return null;
+
+	<activityindicator
+		id={props.id}
+		className={cx(props.className)}
+		style={props.style}
+		busy={props.busy ?? true}
+		ref={(el: any) => applyNativeProps(el, props)}
+	/>
+}