@octane-xplat/ui 0.9.0 → 0.11.0

package/src/Carousel.tsrx

@@ -0,0 +1,223 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useImperativeHandle, useCallback, useEffect, useRef, useState } from 'octane';
+import type { CarouselHandle, CarouselProps } from './props';
+import { applyEscapeProps } from './escape-props';
+import { toChildArray, mapChildren } from './child-array';
+import { spacingStep } from './spacing';
+import { cx } from './cx';
+import { Icon } from './Icon';
+import { Pressable } from './Pressable';
+
+const EPS = 1;
+const SNAP_DEBOUNCE_MS = 140;
+
+/** Horizontal slide strip (Astryx `Carousel`), native leaf — a horizontal
+ *  NS ScrollView wrapping a slide row, optional prev/next buttons,
+ *  edge-fade gradients, and end-detection snap when `hasSnap` (NS has no
+ *  scroll-snap; a debounced scroll event animates to the nearest slide
+ *  edge — documented approximation). RTL offsets are physical on native. */
+export function Carousel(props: CarouselProps) @{
+	const items = toChildArray(props.children);
+	const count = items.length;
+	const gap = spacingStep(props.gap ?? 2) ?? 8;
+	const scroller = useRef<any>(null);
+	const track = useRef<any>(null);
+	const [canPrev, setCanPrev] = useState(false);
+	const [canNext, setCanNext] = useState(false);
+	const [atStart, setAtStart] = useState(true);
+	const [atEnd, setAtEnd] = useState(false);
+	const loop = props.hasLoop === true;
+	const snapTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	const offsets = useCallback((): number[] => {
+		const t = track.current;
+		if (!t?.eachChildView) return [];
+		const out: number[] = [];
+		t.eachChildView((c: any) => {
+			out.push(c.left ?? c.originX ?? 0);
+			return true;
+		});
+
+		return out;
+	}, []);
+
+	const measure = useCallback(() => {
+		const el = scroller.current;
+		if (!el) return;
+		const x = Number(el.horizontalOffset) || 0;
+		const max = Math.max(0, Number(el.scrollableWidth) || 0);
+		const prev = x > EPS;
+		const next = x < max - EPS;
+		setAtStart(!prev);
+		setAtEnd(!next);
+		setCanPrev(loop ? count > 1 : prev);
+		setCanNext(loop ? count > 1 : next);
+	}, [count, loop]);
+
+	const scrollToIndex = useCallback(
+		(i: number) => {
+			const el = scroller.current;
+			const o = offsets();
+			if (!el || !o.length) return;
+			const clamped = Math.min(Math.max(i, 0), count - 1);
+			el.scrollToHorizontalOffset?.(o[clamped] ?? 0, true);
+		},
+		[count, offsets],
+	);
+
+	const scrollNext = useCallback(() => {
+		const el = scroller.current;
+		if (!el) return;
+		const x = Number(el.horizontalOffset) || 0;
+		const max = Math.max(0, Number(el.scrollableWidth) || 0);
+		const page = el.getActualSize?.().width || 0;
+		if (x >= max - EPS && loop) {
+			el.scrollToHorizontalOffset?.(0, true);
+			return;
+		}
+
+		el.scrollToHorizontalOffset?.(Math.min(x + page, max), true);
+	}, [loop]);
+
+	const scrollPrev = useCallback(() => {
+		const el = scroller.current;
+		if (!el) return;
+		const x = Number(el.horizontalOffset) || 0;
+		const max = Math.max(0, Number(el.scrollableWidth) || 0);
+		const page = el.getActualSize?.().width || 0;
+		if (x <= EPS && loop) {
+			el.scrollToHorizontalOffset?.(max, true);
+			return;
+		}
+
+		el.scrollToHorizontalOffset?.(Math.max(x - page, 0), true);
+	}, [loop]);
+
+	const handle: CarouselHandle = {
+		scrollNext,
+		scrollPrev,
+		scrollTo: scrollToIndex,
+		canScrollNext: () => {
+			const el = scroller.current;
+			if (!el) return false;
+			if (loop) return count > 1;
+			return (Number(el.horizontalOffset) || 0) < Math.max(0, Number(el.scrollableWidth) || 0) - EPS;
+		},
+		canScrollPrev: () => {
+			const el = scroller.current;
+			if (!el) return false;
+			if (loop) return count > 1;
+			return (Number(el.horizontalOffset) || 0) > EPS;
+		},
+	};
+
+	useImperativeHandle(props.ref, () => handle, undefined);
+
+	useEffect(() => {
+		const el = scroller.current;
+		if (!el?.on) return;
+		const onScroll = () => {
+			measure();
+			if (props.hasSnap) {
+				if (snapTimer.current) clearTimeout(snapTimer.current);
+				snapTimer.current = setTimeout(() => {
+					const o = offsets();
+					const elNow = scroller.current;
+					if (!o.length || !elNow) return;
+					const x = Number(elNow.horizontalOffset) || 0;
+					let nearest = o[0];
+					for (const off of o) {
+						if (Math.abs(off - x) < Math.abs(nearest - x)) nearest = off;
+					}
+
+					elNow.scrollToHorizontalOffset?.(nearest, true);
+				}, SNAP_DEBOUNCE_MS);
+			}
+		};
+
+		el.on('scroll', onScroll);
+		el.on('layoutChanged', measure);
+		measure();
+		return () => {
+			el.off?.('scroll', onScroll);
+			el.off?.('layoutChanged', measure);
+			if (snapTimer.current) clearTimeout(snapTimer.current);
+		};
+	}, [count, measure, props.hasSnap, offsets]);
+
+	<gridlayout
+		className={cx('vx-carousel', props.className)}
+		style={props.style}
+		id={props.id}
+		rows="*"
+		columns="*"
+		accessibilityLabel={props.accessibilityLabel ?? props.label}
+	>
+		<scrollview
+			ref={(v: any) => {
+				scroller.current = v;
+				applyEscapeProps(v, props);
+			}}
+			orientation="horizontal"
+			className="vx-carousel-viewport"
+			scrollBarIndicatorVisible={false}
+		>
+			<flexboxlayout
+				ref={(v: any) => {
+					track.current = v;
+				}}
+				flexDirection="row"
+				className="vx-carousel-track"
+				style={{ columnGap: gap }}
+			>
+				{mapChildren(items, (child: any, i: number) => (
+					<flexboxlayout
+						className={cx(
+							'vx-carousel-slide',
+							props.variant === 'proportional' && 'vx-carousel-slide--prop',
+						)}
+						accessibilityLabel={`Slide ${i + 1} of ${count}`}
+					>
+						{child}
+					</flexboxlayout>
+				))}
+			</flexboxlayout>
+		</scrollview>
+		{props.hasEdgeFade && !atStart && (
+			<flexboxlayout
+				className="vx-carousel-fade vx-carousel-fade-start"
+				verticalAlignment="stretch"
+				horizontalAlignment="left"
+				isUserInteractionEnabled={false}
+			/>
+		)}
+		{props.hasEdgeFade && !atEnd && (
+			<flexboxlayout
+				className="vx-carousel-fade vx-carousel-fade-end"
+				verticalAlignment="stretch"
+				horizontalAlignment="right"
+				isUserInteractionEnabled={false}
+			/>
+		)}
+		{props.hasButtons && (
+			<>
+				<Pressable
+					className="vx-carousel-btn vx-carousel-prev"
+					accessibilityLabel="Previous"
+					disabled={!canPrev}
+					onPress={scrollPrev}
+				>
+					<Icon name="xplat-chevron-left" />
+				</Pressable>
+				<Pressable
+					className="vx-carousel-btn vx-carousel-next"
+					accessibilityLabel="Next"
+					disabled={!canNext}
+					onPress={scrollNext}
+				>
+					<Icon name="xplat-chevron-right" />
+				</Pressable>
+			</>
+		)}
+	</gridlayout>
+}

package/src/Carousel.web.tsrx

@@ -0,0 +1,230 @@
+import { descriptorChildren } from 'octane';
+import { useImperativeHandle, useCallback, useEffect, useRef, useState } from 'octane';
+import type { CarouselHandle, CarouselProps } from './props';
+import { applyEscapeProps } from './escape-props';
+import { toChildArray, mapChildren } from './child-array';
+import { spacingStep } from './spacing';
+import { cx } from './cx';
+import { Icon } from './Icon.web.tsrx';
+import { Pressable } from './Pressable.web.tsrx';
+
+const EPS = 1;
+
+/** Horizontal slide strip (Astryx `Carousel`), web leaf — a scrollable
+ *  labelled region (`aria-roledescription="carousel"`) whose children are
+ *  wrapped in slide groups, with optional snap, edge fades, and prev/next
+ *  buttons. `ref` hands back the imperative CarouselHandle. */
+function CarouselImpl(props: CarouselProps) @{
+	const items = toChildArray(props.children);
+	const count = items.length;
+	const gapPx = spacingStep(props.gap ?? 2) ?? 8;
+	const scroller = useRef<HTMLElement | null>(null);
+	const track = useRef<HTMLDivElement | null>(null);
+	const [canPrev, setCanPrev] = useState(false);
+	const [canNext, setCanNext] = useState(false);
+	const [atStart, setAtStart] = useState(true);
+	const [atEnd, setAtEnd] = useState(false);
+	const loop = props.hasLoop === true;
+
+	const measure = useCallback(() => {
+		const el = scroller.current;
+		if (!el) return;
+		const rtl = getComputedStyle(el).direction === 'rtl';
+		const x = rtl ? -el.scrollLeft : el.scrollLeft;
+		const max = Math.max(0, el.scrollWidth - el.clientWidth);
+		const prev = x > EPS;
+		const next = x < max - EPS;
+		setAtStart(!prev);
+		setAtEnd(!next);
+		setCanPrev(loop ? count > 1 : prev);
+		setCanNext(loop ? count > 1 : next);
+	}, [count, loop]);
+
+	const slideOffsets = useCallback((): number[] => {
+		const t = track.current;
+		if (!t) return [];
+		return Array.from(t.children as any).map(
+			(c: any) => (c as HTMLElement).offsetLeft - (t as HTMLElement).offsetLeft,
+		);
+	}, []);
+
+	const reduced = () =>
+		typeof matchMedia === 'function' &&
+		matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+	const behavior = () => (reduced() ? 'auto' : 'smooth');
+
+	const isRtl = () =>
+		scroller.current != null &&
+		getComputedStyle(scroller.current).direction === 'rtl';
+
+	const scrollToIndex = useCallback(
+		(i: number) => {
+			const el = scroller.current;
+			const offsets = slideOffsets();
+			if (!el || !offsets.length) return;
+			const clamped = Math.min(Math.max(i, 0), count - 1);
+			const target = offsets[clamped] ?? 0;
+			el.scrollTo({ left: isRtl() ? -target : target, behavior: behavior() });
+		},
+		[count, slideOffsets],
+	);
+
+	const scrollNext = useCallback(() => {
+		const el = scroller.current;
+		if (!el) return;
+		const rtl = isRtl();
+		const x = rtl ? -el.scrollLeft : el.scrollLeft;
+		const max = Math.max(0, el.scrollWidth - el.clientWidth);
+		if (x >= max - EPS && loop) {
+			// Loop wraps to the start (scrollLeft 0 is the start edge in both
+			// directions — RTL scroll offsets run negative toward the end).
+			el.scrollTo({ left: 0, behavior: behavior() });
+			return;
+		}
+
+		el.scrollBy({ left: (rtl ? -1 : 1) * el.clientWidth, behavior: behavior() });
+	}, [loop]);
+
+	const scrollPrev = useCallback(() => {
+		const el = scroller.current;
+		if (!el) return;
+		const rtl = isRtl();
+		const x = rtl ? -el.scrollLeft : el.scrollLeft;
+		const max = Math.max(0, el.scrollWidth - el.clientWidth);
+		if (x <= EPS && loop) {
+			el.scrollTo({ left: rtl ? -max : max, behavior: behavior() });
+			return;
+		}
+
+		el.scrollBy({ left: (rtl ? 1 : -1) * el.clientWidth, behavior: behavior() });
+	}, [loop]);
+
+	const handle: CarouselHandle = {
+		scrollNext,
+		scrollPrev,
+		scrollTo: scrollToIndex,
+		canScrollNext: () => {
+			const el = scroller.current;
+			if (!el) return false;
+			if (loop) return count > 1;
+			const rtl = isRtl();
+			const x = rtl ? -el.scrollLeft : el.scrollLeft;
+			return x < Math.max(0, el.scrollWidth - el.clientWidth) - EPS;
+		},
+		canScrollPrev: () => {
+			const el = scroller.current;
+			if (!el) return false;
+			if (loop) return count > 1;
+			const rtl = isRtl();
+			const x = rtl ? -el.scrollLeft : el.scrollLeft;
+			return x > EPS;
+		},
+	};
+
+	useImperativeHandle(props.ref, () => handle, undefined);
+
+	useEffect(() => {
+		measure();
+		const el = scroller.current;
+		if (!el) return;
+		el.addEventListener('scroll', measure, { passive: true });
+		const ro =
+			typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);
+
+		ro?.observe(el);
+		if (track.current) ro?.observe(track.current);
+		return () => {
+			el.removeEventListener('scroll', measure);
+			ro?.disconnect();
+		};
+	}, [count, measure]);
+
+	// Shift+wheel scrolls horizontally (Astryx behavior).
+	const onWheel = (event: WheelEvent) => {
+		const el = scroller.current;
+		if (!el || !event.shiftKey || el.scrollWidth <= el.clientWidth) return;
+		event.preventDefault();
+		el.scrollLeft += (event.deltaY || event.deltaX) * (isRtl() ? -1 : 1);
+	};
+
+	return (
+		<div
+			className={cx('vx-carousel', props.className)}
+			style={props.style}
+			id={props.id}
+			role="region"
+			aria-roledescription="carousel"
+			aria-label={props.accessibilityLabel ?? props.label}
+			aria-hidden={props.accessible === false ? true : undefined}
+			ref={(el: any) => applyEscapeProps(el, props)}
+		>
+			{props.hasEdgeFade && atStart === false && (
+				<div className="vx-carousel-fade vx-carousel-fade-start" aria-hidden="true" />
+			)}
+			{props.hasEdgeFade && atEnd === false && (
+				<div className="vx-carousel-fade vx-carousel-fade-end" aria-hidden="true" />
+			)}
+			<div
+				ref={(el: any) => {
+					scroller.current = el;
+				}}
+				className="vx-carousel-viewport"
+				style={{
+					overflowX: 'auto',
+					overflowY: 'hidden',
+					scrollSnapType: props.hasSnap ? 'x mandatory' : undefined,
+					scrollbarWidth: 'none',
+				}}
+				onWheel={onWheel}
+			>
+				<div
+					ref={track}
+					className="vx-carousel-track"
+					style={{ display: 'flex', gap: `${gapPx}px` }}
+				>
+					{mapChildren(items, (child: any, i: number) => (
+						<div
+							className={cx(
+								'vx-carousel-slide',
+								props.variant === 'proportional' && 'vx-carousel-slide--prop',
+							)}
+							role="group"
+							aria-roledescription="slide"
+							aria-label={`Slide ${i + 1} of ${count}`}
+							style={{
+								scrollSnapAlign: props.hasSnap ? 'start' : undefined,
+								flex: props.variant === 'proportional' ? '1 0 100%' : '0 0 auto',
+							}}
+						>
+							{child}
+						</div>
+					))}
+				</div>
+			</div>
+			{props.hasButtons && (
+				<>
+					<Pressable
+						className="vx-carousel-btn vx-carousel-prev"
+						accessibilityLabel="Previous"
+						disabled={!canPrev}
+						onPress={scrollPrev}
+					>
+						<Icon name="xplat-chevron-left" />
+					</Pressable>
+					<Pressable
+						className="vx-carousel-btn vx-carousel-next"
+						accessibilityLabel="Next"
+						disabled={!canNext}
+						onPress={scrollNext}
+					>
+						<Icon name="xplat-chevron-right" />
+					</Pressable>
+				</>
+			)}
+		</div>
+	);
+}
+
+/** Ask Octane to preserve inspectable child descriptors for collection operations. */
+export const Carousel = descriptorChildren(CarouselImpl);

package/src/Center.macos.tsrx

@@ -0,0 +1,41 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
+import type { CenterProps } from './props'
+import { cx } from './cx'
+import { applyEscapeProps } from './escape-props'
+import { spacingPx } from './stack-layout'
+
+/** Center — row-direction flex centering on main/cross/both axes.
+ *  `isInline` is inert on AppKit (containers are always block-level). */
+export function Center(props: CenterProps) @{
+	const axis = props.axis ?? 'both'
+	const pad = spacingPx(props.padding)
+
+	const forwardedRef = useMemo(() => refList((v: any) => { if (v) { applyEscapeProps(v, props); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	<flexboxlayout
+		id={props.id}
+		ref={forwardedRef}
+		flexDirection="row"
+		justifyContent={(axis !== 'vertical' ? 'center' : undefined) as any}
+		alignItems={(axis !== 'horizontal' ? 'center' : undefined) as any}
+		className={cx('vx-center', props.className)}
+		style={{
+			...(spacingPx(props.paddingInlineStart ?? props.paddingInline) ?? pad) !== undefined ? { paddingLeft: (spacingPx(props.paddingInlineStart ?? props.paddingInline) ?? pad) } : {},
+			...(spacingPx(props.paddingInlineEnd ?? props.paddingInline) ?? pad) !== undefined ? { paddingRight: (spacingPx(props.paddingInlineEnd ?? props.paddingInline) ?? pad) } : {},
+			...(spacingPx(props.paddingBlockStart ?? props.paddingBlock) ?? pad) !== undefined ? { paddingTop: (spacingPx(props.paddingBlockStart ?? props.paddingBlock) ?? pad) } : {},
+			...(spacingPx(props.paddingBlockEnd ?? props.paddingBlock) ?? pad) !== undefined ? { paddingBottom: (spacingPx(props.paddingBlockEnd ?? props.paddingBlock) ?? pad) } : {},
+			...(props.width != null ? { width: props.width } : {}),
+			...(props.height != null ? { height: props.height } : {}),
+			...(props.maxWidth != null ? { maxWidth: props.maxWidth } : {}),
+			...(props.minHeight != null ? { minHeight: props.minHeight } : {}),
+			...props.style,
+		}}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={props.accessibilityRole}
+		accessibilityHint={props.accessibilityHint}
+	>
+		{props.children}
+	</flexboxlayout>
+}

package/src/Center.tsrx

@@ -0,0 +1,45 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
+import type { CenterProps } from './props';
+import { cx } from './cx';
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from './escape-props';
+import { spacingPx } from './stack-layout';
+
+/** Center — a row-direction flex that centers children on the main axis
+ *  (`axis="horizontal"`), the cross axis (`"vertical"`), or `both`.
+ *  `isInline` is web-only (native containers are always block-level). */
+export function Center(props: CenterProps) @{
+	const axis = props.axis ?? 'both';
+
+	const forwardedRef = useMemo(() => refList((v: any) => { if (v) { applyEscapeProps(v, props); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	<flexboxlayout
+		id={props.id}
+		ref={forwardedRef}
+		flexDirection="row"
+		justifyContent={(axis !== 'vertical' ? 'center' : undefined) as any}
+		alignItems={(axis !== 'horizontal' ? 'center' : undefined) as any}
+		className={cx('vx-center', props.className)}
+		style={{
+			...(spacingPx(props.paddingInlineStart ?? props.paddingInline ?? props.padding) !== undefined ? { paddingLeft: spacingPx(props.paddingInlineStart ?? props.paddingInline ?? props.padding) } : {}),
+			...(spacingPx(props.paddingInlineEnd ?? props.paddingInline ?? props.padding) !== undefined ? { paddingRight: spacingPx(props.paddingInlineEnd ?? props.paddingInline ?? props.padding) } : {}),
+			...(spacingPx(props.paddingBlockStart ?? props.paddingBlock ?? props.padding) !== undefined ? { paddingTop: spacingPx(props.paddingBlockStart ?? props.paddingBlock ?? props.padding) } : {}),
+			...(spacingPx(props.paddingBlockEnd ?? props.paddingBlock ?? props.padding) !== undefined ? { paddingBottom: spacingPx(props.paddingBlockEnd ?? props.paddingBlock ?? props.padding) } : {}),
+			...(props.width != null ? { width: props.width } : {}),
+			...(props.height != null ? { height: props.height } : {}),
+			...(props.maxWidth != null ? { maxWidth: props.maxWidth } : {}),
+			...(props.minHeight != null ? { minHeight: props.minHeight } : {}),
+			...props.style,
+		}}
+		accessible={props.accessible}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.accessibilityValue}
+		accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
+		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
+	>
+		{props.children}
+	</flexboxlayout>
+}

package/src/Center.web.tsrx

@@ -0,0 +1,52 @@
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
+import type { CenterProps } from './props';
+import { applyEscapeProps } from './escape-props';
+import { applyWebProps } from './platformProps.web';
+import { spacingPx } from './stack-layout';
+
+/** Center — a row-direction flex that centers children on the main axis
+ *  (`axis="horizontal"` → justify-content), the cross axis (`"vertical"`
+ *  → align-items), or `both`. `isInline` renders `inline-flex`. */
+export function Center(props: CenterProps) @{
+	const axis = props.axis ?? 'both';
+	const pad = (v: number | undefined) => (v === undefined ? undefined : v);
+	const pInlineStart = pad(spacingPx(props.paddingInlineStart ?? props.paddingInline ?? props.padding));
+	const pInlineEnd = pad(spacingPx(props.paddingInlineEnd ?? props.paddingInline ?? props.padding));
+	const pBlockStart = pad(spacingPx(props.paddingBlockStart ?? props.paddingBlock ?? props.padding));
+	const pBlockEnd = pad(spacingPx(props.paddingBlockEnd ?? props.paddingBlock ?? props.padding));
+
+	const forwardedRef = useMemo(() => refList((e: any) => { if (e) { applyEscapeProps(e, props); applyWebProps(e, props.web); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	<div
+		id={props.id}
+		ref={forwardedRef}
+		className={['vx-center', props.isInline ? 'vx-center--inline' : undefined, props.className]}
+		style={{
+			display: props.isInline ? 'inline-flex' : 'flex',
+			flexDirection: 'row',
+			justifyContent: axis !== 'vertical' ? 'center' : undefined,
+			alignItems: axis !== 'horizontal' ? 'center' : undefined,
+			...(pInlineStart !== undefined ? { paddingInlineStart: pInlineStart } : {}),
+			...(pInlineEnd !== undefined ? { paddingInlineEnd: pInlineEnd } : {}),
+			...(pBlockStart !== undefined ? { paddingBlockStart: pBlockStart } : {}),
+			...(pBlockEnd !== undefined ? { paddingBlockEnd: pBlockEnd } : {}),
+			...(props.width != null ? { width: props.width } : {}),
+			...(props.height != null ? { height: props.height } : {}),
+			...(props.maxWidth != null ? { maxWidth: props.maxWidth } : {}),
+			...(props.minHeight != null ? { minHeight: props.minHeight } : {}),
+			...props.style,
+		}}
+		role={props.accessibilityRole}
+		aria-label={props.accessibilityLabel}
+		aria-hidden={props.accessible === false ? true : undefined}
+		aria-description={props.accessibilityHint}
+		aria-valuetext={props.accessibilityValue}
+		aria-disabled={props.accessibilityState?.disabled}
+		aria-selected={props.accessibilityState?.selected}
+		aria-checked={props.accessibilityState?.checked}
+		aria-live={props.accessibilityLiveRegion === 'none' ? 'off' : props.accessibilityLiveRegion}
+	>
+		{props.children}
+	</div>
+}