@octane-xplat/ui 0.9.0 → 0.10.0

package/src/StackItem.web.tsrx

@@ -0,0 +1,41 @@
+import type { StackItemProps } from './props';
+import { applyEscapeProps } from './escape-props';
+import { applyWebProps } from './platformProps.web';
+import { useMemo, useRef } from 'octane';
+import { refList } from './ref-list'
+import { stackItemStyle } from './stack-layout';
+import { usePan } from './pan.web.tsrx';
+
+/** StackItem — per-child size (`fill` grows into remaining space) and
+ *  cross-axis alignment inside a `Stack`. Carries the flex `min-*: 0`
+ *  reset so `size="fill" isScrollable` is a complete scroll region. */
+export function StackItem(props: StackItemProps) @{
+	const Tag: any = props.as ?? 'div';
+	const el = useRef<HTMLElement | null>(null);
+	usePan(el, props.onPan);
+
+	const forwardedRef = useMemo(() => refList((e: any) => { el.current = e; if (e) { applyEscapeProps(e, props); applyWebProps(e, props.web);  } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	<Tag
+		id={props.id}
+		ref={forwardedRef}
+		className={['vx-stackitem', props.isScrollable ? 'vx-stackitem--scroll' : undefined, props.className]}
+		style={{
+			minWidth: 0,
+			minHeight: 0,
+			...stackItemStyle(props),
+			...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}
+	</Tag>
+}

package/src/StatusDot.macos.tsrx

@@ -0,0 +1,65 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useEffect, useRef } from 'octane';
+import type { StatusDotProps } from './props';
+import { cx } from './cx';
+import { getColorScheme } from './colorScheme.macos';
+import { statusDotColor } from './scheme-colors';
+import { isRenderable } from './is-renderable';
+
+/** StatusDot — macOS leaf. The AppKit host has no `animate` — `isPulsing` is
+ *  a steady dot here (documented). Variant colors come from the scheme
+ *  palette mirror since the host has no CSS layer. */
+export function StatusDot(props: StatusDotProps) @{
+	const dot = useRef<any>(null);
+	const scheme = getColorScheme();
+	// The AppKit layer animates via CAAnimation — a JS opacity loop is the
+	// same pulse without adding host plumbing.
+	useEffect(() => {
+		const view = dot.current;
+		if (!props.isPulsing || !view) {
+			return;
+		}
+
+		let cancelled = false;
+		const beat = (opacity: number) => {
+			if (cancelled || !dot.current) {
+				return;
+			}
+
+			const result = view.animate?.({ opacity, duration: 750 });
+			if (result?.then) {
+				result.then(
+					() => !cancelled && beat(opacity === 1 ? 0.4 : 1),
+					() => !cancelled && beat(opacity === 1 ? 0.4 : 1),
+				);
+			}
+		};
+
+		beat(0.4);
+		return () => {
+			cancelled = true;
+		};
+	}, [props.isPulsing]);
+
+	<flexboxlayout
+		ref={(v: any) => {
+			dot.current = v;
+		}}
+		id={props.id}
+		className={cx('vx-statusdot', `vx-statusdot--${props.variant}`, props.className)}
+		style={{
+			width: 8,
+			height: 8,
+			borderRadius: 4,
+			backgroundColor: statusDotColor(props.variant, scheme),
+			justifyContent: 'center',
+			alignItems: 'center',
+			...props.style,
+		}}
+		accessible={true}
+		accessibilityRole="image"
+		accessibilityLabel={props.label}
+	>
+		{isRenderable(props.icon) ? props.icon : null}
+	</flexboxlayout>
+}

package/src/StatusDot.tsrx

@@ -0,0 +1,86 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useRef } from 'octane';
+import type { StatusDotProps } from './props';
+import { cx } from './cx';
+import { applyEscapeProps, nativeAccessibilityRole } from './escape-props';
+import { useColorScheme } from './theme/colorScheme';
+import { statusDotColor } from './scheme-colors';
+import { nativeColor } from './native-color';
+import { isRenderable } from './is-renderable';
+import { Tooltip } from './Tooltip';
+
+/** StatusDot — an 8pt colored status signal. `label` is the dot's accessible
+ *  name. `isPulsing` loops an opacity animation on the native view (no CSS
+ *  keyframes in the NS engine). `tooltip` wraps the shared Tooltip — a no-op
+ *  on touch targets by Tooltip's own contract. */
+export function StatusDot(props: StatusDotProps) @{
+	const scheme = useColorScheme();
+	const dot = useRef<any>(null);
+	const pulsing = props.isPulsing ?? false;
+
+	useEffect(() => {
+		const view = dot.current;
+		if (!pulsing || !view) {
+			return;
+		}
+
+		let cancelled = false;
+		const beat = (opacity: number) => {
+			if (cancelled || !dot.current) {
+				return;
+			}
+
+			const done = () => {
+				if (!cancelled) {
+					beat(opacity === 1 ? 0.4 : 1);
+				}
+			};
+
+			const result = view.animate?.({ opacity, duration: 750, curve: 'easeInOut' });
+			if (result?.then) {
+				result.then(done, done);
+			} else {
+				done();
+			}
+		};
+
+		beat(0.4);
+
+		return () => {
+			cancelled = true;
+			view.cancelAnimation?.('opacity');
+			view.opacity = 1;
+		};
+	}, [pulsing]);
+
+	const showsIcon = isRenderable(props.icon);
+
+	const view = (
+		<flexboxlayout
+			ref={(v: any) => {
+				dot.current = v;
+				applyEscapeProps(v, props);
+			}}
+			id={props.id}
+			className={cx('vx-statusdot', `vx-statusdot--${props.variant}`, props.className)}
+			style={{
+				width: 8,
+				height: 8,
+				borderRadius: 4,
+				backgroundColor: nativeColor(statusDotColor(props.variant, scheme)),
+				justifyContent: 'center',
+				alignItems: 'center',
+				...props.style,
+			}}
+			accessible={true}
+			accessibilityRole={nativeAccessibilityRole('image') as any}
+			accessibilityLabel={props.label}
+		>
+			{showsIcon ? props.icon : null}
+		</flexboxlayout>
+	);
+
+	return props.tooltip != null
+		? <Tooltip trigger={view} content={props.tooltip} />
+		: view;
+}

package/src/StatusDot.web.tsrx

@@ -0,0 +1,32 @@
+import type { StatusDotProps } from './props';
+import { applyEscapeProps } from './escape-props';
+import { Tooltip } from './Tooltip.web.tsrx';
+import { isRenderable } from './is-renderable';
+
+/** StatusDot — an 8px colored status signal. Non-focusable `role="img"` with
+ *  `aria-label` so the status reaches screen readers without hover. `icon`
+ *  paints in the variant's on-color inside an aria-hidden span; `isPulsing`
+ *  animates (reduced-motion users get the still dot). */
+export function StatusDot(props: StatusDotProps) @{
+	const dot = (
+		<span
+			ref={(e: any) => applyEscapeProps(e, props)}
+			id={props.id}
+			role="img"
+			aria-label={props.label}
+			className={[
+				'vx-statusdot',
+				`vx-statusdot--${props.variant}`,
+				props.isPulsing && 'vx-statusdot--pulse',
+				props.className,
+			]}
+			style={props.style}
+		>
+			{isRenderable(props.icon) ? <span className="vx-statusdot-icon" aria-hidden="true">{props.icon}</span> : null}
+		</span>
+	);
+
+	return props.tooltip != null
+		? <Tooltip trigger={dot} content={props.tooltip} />
+		: dot;
+}

package/src/Stepper.macos.tsrx

@@ -1,4 +1,4 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
 import type { StepperProps } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps } from "./escape-props";

package/src/Switch.tsrx

@@ -1,20 +1,27 @@
 /** @jsxImportSource @nativescript-community/octane */
 import type { SwitchProps } from "./props";
 import { cx } from "./cx";
-import { applyEscapeProps, nativeAccessibilityRole } from "./escape-props";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props";
+import { useFieldControlProps } from './field-context';
 
 /** Self-drawn switch — flexbox track + thumb view, identical pixels across
  *  targets. The `.vx-switch--on` state class flips justify-content, which
  *  slides the thumb. The platform widget (UISwitch/MaterialSwitch) lives
  *  in `ui/ios` + `ui/android`. */
-export function Switch(props: SwitchProps) @{
+export function Switch(inputProps: SwitchProps) @{
+	const props = useFieldControlProps(inputProps);
+	const isBlocked = props.isDisabled || props.isReadOnly;
+
 	<flexboxlayout
 		ref={(v: any) => applyEscapeProps(v, props)}
 		id={props.id}
-		className={cx('vx-switch', props.checked ? 'vx-switch--on' : undefined, props.className)}
+		className={cx('vx-switch', props.checked ? 'vx-switch--on' : undefined, props.isDisabled && 'vx-switch--disabled', props.isReadOnly && 'vx-switch--readonly', props.isLoading && 'vx-switch--loading', props.status && `vx-switch--status-${props.status.type}`, props.size && `vx-switch--size-${props.size}`, props.className)}
 		style={props.style}
 		accessibilityRole={nativeAccessibilityRole('switch') as any}
-		onTap={() => props.onCheckedChange?.(!(props.checked ?? false))}
+		accessibilityLabel={props.ariaLabel ?? props.fieldLabel ?? props.label}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityState={nativeAccessibilityState({ checked: props.checked ?? false, disabled: props.isDisabled }) as any}
+		onTap={isBlocked ? undefined : () => props.onCheckedChange?.(!(props.checked ?? false))}
 	>
 		<flexboxlayout className="vx-switch-thumb" />
 	</flexboxlayout>

package/src/Switch.web.tsrx

@@ -1,19 +1,32 @@
 import type { SwitchProps } from "./props";
 import { applyEscapeProps } from "./escape-props";
+import { useFieldControlProps } from './field-context';
 
 /** Self-drawn switch — track + thumb, identical pixels across targets.
  *  The platform widget (UISwitch/MaterialSwitch) lives in `ui/ios` +
  *  `ui/android`. Toggles on click, Space, and Enter. */
-export function Switch(props: SwitchProps) @{
-	const toggle = () => props.onCheckedChange?.(!(props.checked ?? false));
+export function Switch(inputProps: SwitchProps) @{
+	const props = useFieldControlProps(inputProps);
+	const isBlocked = props.isDisabled || props.isReadOnly;
+	const toggle = () => {
+		if (!isBlocked) props.onCheckedChange?.(!(props.checked ?? false));
+	};
 
 	<div
 		ref={(e: any) => applyEscapeProps(e, props)}
 		id={props.id}
 		role="switch"
 		aria-checked={props.checked ?? false}
-		tabIndex={0}
-		className={['vx-switch', props.checked ? 'vx-switch--on' : undefined, props.className]}
+		aria-disabled={props.isDisabled || undefined}
+		aria-readonly={props.isReadOnly || undefined}
+		aria-busy={props.isLoading || undefined}
+		aria-required={props.isRequired && !props.isOptional || undefined}
+		aria-invalid={props.status?.type === 'error' || undefined}
+		aria-label={props.ariaLabel}
+		aria-labelledby={props.ariaLabelledBy}
+		aria-describedby={props.ariaDescribedBy}
+		tabIndex={props.isDisabled ? undefined : 0}
+		className={['vx-switch', props.checked ? 'vx-switch--on' : undefined, props.isDisabled ? 'vx-switch--disabled' : undefined, props.isReadOnly ? 'vx-switch--readonly' : undefined, props.isLoading ? 'vx-switch--loading' : undefined, props.status ? `vx-switch--status-${props.status.type}` : undefined, props.size ? `vx-switch--size-${props.size}` : undefined, props.className]}
 		style={props.style}
 		onClick={toggle}
 		onKeyDown={(e: any) => {

package/src/TabList.macos.tsrx

@@ -0,0 +1,199 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useContext, useEffect, useMemo, useRef, useState } from 'octane';
+import type { TabListProps, TabProps, TabMenuProps } from './props';
+import { cx } from './cx';
+
+import { Icon } from './Icon.macos.tsrx';
+import { Text } from './Text.macos.tsrx';
+import { Popover } from './Popover.macos.tsrx';
+import { Pressable } from './Pressable.macos.tsrx';
+import { followHref } from './nav-href';
+import { TabListContext,
+	TabListProvider,
+} from './nav-contexts';
+
+export { TabListContext };
+export { useTabListContext } from './nav-contexts';
+
+const SIZE_HEIGHT: Record<string, number> = { sm: 28, md: 32, lg: 36 };
+
+function navIcon(icon: any, size: number) {
+	return typeof icon === 'string' ? <Icon name={icon} size={size} /> : icon;
+}
+
+/** TabList — tab strip providing TabListContext to Tab/TabMenu children.
+ *  Native leaf: a horizontal flexbox row; `overflow` `auto`/`scroll` wraps it
+ *  in a horizontal scroller and the selected tab is scrolled into view. The
+ *  WAI-ARIA tablist pattern carries `tab` semantics to each stop; there's no
+ *  composite-widget arrow model on pointer platforms. `role="tablist"`
+ *  switches item semantics; the strip itself doesn't gain native grouping. */
+export function TabList(props: TabListProps) @{
+	const size = props.size ?? 'md';
+	const overflow = props.overflow ?? 'auto';
+	const layout = props.layout ?? 'hug';
+	const hasScroll = overflow !== 'visible' && layout !== 'fill';
+	const scroller = useRef<any>(null);
+	const tabViews = useRef(new Map<string, any>());
+	const views = tabViews.current;
+
+	const ctx = useMemo(
+		() => ({
+			value: props.value,
+			onChange: props.onChange,
+			size,
+			layout,
+			pattern: props.role === 'tablist' ? ('tabs' as const) : ('nav' as const),
+			// Internal: Tabs/Tab register their views so the list can scroll the
+			// selected stop into view. Not part of the public context type.
+			_tabViews: views,
+		}),
+		[props.value, props.onChange, size, layout, props.role],
+	) as any;
+
+	// Keep the selected tab visible when the value or the scroller changes.
+	useEffect(() => {
+		const sv = scroller.current;
+		const view = views.get(props.value);
+		if (!sv || !view) return;
+		const vp = sv.getActualSize?.().width ?? 0;
+		const offset = sv.horizontalOffset ?? 0;
+		const start = view.originX ?? 0;
+		const end = start + (view.getMeasuredWidth?.() ?? 0);
+		if (start < offset) {
+			sv.scrollToHorizontalOffset(start, true);
+		} else if (vp > 0 && end > offset + vp) {
+			sv.scrollToHorizontalOffset(end - vp, true);
+		}
+	}, [props.value]);
+
+	const row = (
+		<flexboxlayout
+			className={cx('vx-tabstrip', props.isFullBleed && 'vx-tabstrip--bleed')}
+			alignItems="flex-end"
+		>
+			{props.children}
+		</flexboxlayout>
+	);
+
+	const cls = cx('vx-tablist', 'vx-tablist--' + size, layout === 'fill' && 'vx-tablist--fill', props.hasDivider && 'vx-tablist--divided', props.isFullBleed && 'vx-tablist--bleed', props.className);
+
+	<TabListProvider value={ctx}>
+		<flexboxlayout
+			id={props.id}
+
+			className={cls}
+			style={props.style}
+		>
+			@if (hasScroll) {
+				<scrollview orientation="horizontal" ref={(v: any) => { scroller.current = v; }} className="vx-tabstrip-scroll" scrollBarIndicatorVisible={false}>
+					{row}
+				</scrollview>
+			} @else {
+				<>{row}</>
+			}
+		</flexboxlayout>
+	</TabListProvider>
+}
+
+/** Tab — a single stop in a TabList. Native leaf renders a Pressable;
+ *  `href` activates through the deep-link/route table (`followHref`) in
+ *  addition to reporting selection. */
+export function Tab(props: TabProps) @{
+	const ctx = useContext(TabListContext);
+	if (ctx == null) {
+		throw new Error('Tab must be used within a TabList.');
+	}
+
+	const isSelected = ctx.value === props.value;
+	const isDisabled = props.isDisabled === true;
+	const displayIcon = isSelected && props.selectedIcon != null ? props.selectedIcon : props.icon;
+	const showLabel = !props.isLabelHidden && props.label !== '';
+
+	const select = () => {
+		if (isDisabled) return;
+		props.onPress?.();
+		if (props.href && ctx.pattern === 'nav') {
+			followHref(props.href);
+		}
+
+		ctx.onChange(props.value);
+	};
+
+	<Pressable
+		id={props.id}
+		ref={(v: any) => { if (v) (ctx as any)._tabViews?.set(props.value, v); else (ctx as any)._tabViews?.delete(props.value); }}
+		className={cx('vx-tab', isSelected && 'vx-tab--selected', ctx.layout === 'fill' && 'vx-tab--fill', props.className)}
+		style={{ height: SIZE_HEIGHT[ctx.size], ...props.style }}
+		disabled={isDisabled}
+		accessibilityRole={isDisabled ? 'none' : (ctx.pattern === 'tabs' ? 'tab' : 'button')}
+		accessibilityLabel={props.isLabelHidden ? props.label : undefined}
+		accessibilityState={{ disabled: isDisabled, selected: isSelected }}
+		onPress={select}
+	>
+		<flexboxlayout className="vx-tab-content" flexDirection="column" justifyContent="flex-end" alignItems="center">
+			<flexboxlayout flexDirection="row" alignItems="center" justifyContent="center" gap={8}>
+				{displayIcon != null ? navIcon(displayIcon, ctx.size === 'lg' ? 18 : ctx.size === 'sm' ? 14 : 16) : null}
+				{showLabel ? <Text className="vx-tab-label">{props.label}</Text> : null}
+				{props.endContent != null ? props.endContent : null}
+			</flexboxlayout>
+			<flexboxlayout className={cx('vx-tab-indicator', isSelected && 'vx-tab-indicator--on')} />
+		</flexboxlayout>
+	</Pressable>
+}
+
+/** TabMenu — overflow trigger inside a TabList. Native leaf opens the
+ *  shared anchored Popover with menuitemradio-style rows. */
+export function TabMenu(props: TabMenuProps) @{
+	const ctx = useContext(TabListContext);
+	if (ctx == null) {
+		throw new Error('TabMenu must be used within a TabList.');
+	}
+
+	const anchor = useRef<any>(null);
+	const [open, setOpen] = useState(false);
+	const selected = props.options.find((o) => o.value === ctx.value);
+	const triggerLabel = selected?.label ?? props.label;
+
+	const pick = (value: string) => {
+		ctx.onChange(value);
+		setOpen(false);
+	};
+
+	<>
+		<Pressable
+			ref={(v: any) => { anchor.current = v; }}
+			id={props.id}
+			className={cx('vx-tab vx-tabmenu-trigger', selected && 'vx-tab--selected', props.className)}
+			style={{ height: SIZE_HEIGHT[ctx.size], ...props.style }}
+			accessibilityLabel={triggerLabel}
+			accessibilityHint={props.label}
+			onPress={() => setOpen(!open)}
+		>
+			<flexboxlayout className="vx-tab-content" flexDirection="column" justifyContent="flex-end" alignItems="center">
+				<flexboxlayout flexDirection="row" alignItems="center" justifyContent="center" gap={4}>
+					<Text className="vx-tab-label">{triggerLabel}</Text>
+					<Icon name={open ? 'xplat-chevron-up' : 'xplat-chevron-down'} size={16} />
+				</flexboxlayout>
+				<flexboxlayout className={cx('vx-tab-indicator', selected && 'vx-tab-indicator--on')} />
+			</flexboxlayout>
+		</Pressable>
+		<Popover anchor={anchor} open={open} placement="bottom" onDismiss={() => setOpen(false)} className="vx-tabmenu-pop">
+			<flexboxlayout flexDirection="column" className="vx-tabmenu">
+				<Text className="vx-tabmenu-heading">{props.label}</Text>
+				@for (const option of props.options; key option.value) {
+					<Pressable
+						className={cx('vx-tabmenu-item', ctx.value === option.value && 'vx-tabmenu-item--selected')}
+						accessibilityState={{ selected: ctx.value === option.value }}
+						onPress={() => pick(option.value)}
+					>
+						<flexboxlayout flexDirection="row" alignItems="center" gap={8}>
+							{option.icon != null ? navIcon(option.icon, 16) : null}
+							<Text className="vx-tabmenu-itemcontent">{option.label}</Text>
+							{ctx.value === option.value ? <Icon name="xplat-check" size={16} /> : null}
+						</flexboxlayout>
+					</Pressable>
+				}
+			</flexboxlayout>
+		</Popover>
+	</>
+}