@octane-xplat/ui 0.7.3 → 0.10.0

package/src/HStack.macos.tsrx

@@ -0,0 +1,13 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import type { HStackProps } from './props'
+import { Stack } from './layout.macos.tsrx'
+
+/** Horizontal flow stack — `Stack` with `direction="horizontal"`. */
+export function HStack(props: HStackProps) @{
+	return <Stack
+		{...props}
+		direction="horizontal"
+		hAlign={props.hAlign ?? props.justify}
+		vAlign={props.vAlign ?? props.align}
+	/>
+}

package/src/HStack.tsrx

@@ -0,0 +1,14 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { HStackProps } from './props';
+import { Stack } from './Stack';
+
+/** Horizontal flow stack — `Stack` with `direction="horizontal"`.
+ *  `hAlign` is the main axis (justify-content), `vAlign` the cross axis. */
+export function HStack(props: HStackProps) @{
+	return <Stack
+		{...props}
+		direction="horizontal"
+		hAlign={props.hAlign ?? props.justify}
+		vAlign={props.vAlign ?? props.align}
+	/>;
+}

package/src/Heading.macos.tsrx

@@ -1,4 +1,4 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
 import type { HeadingProps } from './props'
 
 export function Heading(props: HeadingProps) @{

package/src/HoverCard.mobile.tsrx

@@ -0,0 +1,36 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { HoverCardProps } from './props';
+import { useHoverCard } from './use-hover-card.mobile.tsrx';
+import { cx } from './cx';
+
+/** Touch-leaf HoverCard: a tap on the trigger opens the anchored card
+ *  (`touchTrigger` 'auto'/'tap'; 'none' disables it). There is no hover
+ *  or focus traversal on iOS/Android, so `delay`/`hideDelay`/
+ *  `focusTrigger` are inert — documented deviations. */
+export function HoverCard(props: HoverCardProps) @{
+	const card = useHoverCard({
+		placement: props.placement,
+		alignment: props.alignment,
+		touchTrigger: props.touchTrigger,
+		isEnabled: props.isEnabled,
+		label: props.label,
+		isOpen: props.isOpen,
+		isDefaultOpen: props.isDefaultOpen,
+		onShow: () => props.onOpenChange?.(true),
+		onHide: () => props.onOpenChange?.(false),
+	});
+
+	<>
+		<flexboxlayout
+			id={props.id}
+			ref={card.ref}
+			className={cx('vx-hovercard-trigger', props.className)}
+			style={props.style}
+			ios={props.ios as any}
+			android={props.android as any}
+		>
+			{props.children}
+		</flexboxlayout>
+		{card.renderHoverCard(props.content, { className: props.className })}
+	</>
+}

package/src/HoverCard.tsrx

@@ -0,0 +1,41 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { HoverCardProps } from './props';
+import { useHoverCard } from './use-hover-card.tsrx';
+import { cx } from './cx';
+import { View } from './View';
+
+/** Default (macOS) leaf — pointer intent comes from the AppKit host
+ *  bridge (tracking areas + anchored NSPopover); iOS/Android resolve the
+ *  `.mobile` leaf (tap-to-open). Bridge-absent targets render the
+ *  trigger only. `focusTrigger` has no native focus traversal to key on
+ *  — inert here (documented deviation). */
+export function HoverCard(props: HoverCardProps) @{
+	const card = useHoverCard({
+		placement: props.placement,
+		alignment: props.alignment,
+		delay: props.delay,
+		hideDelay: props.hideDelay,
+		focusTrigger: props.focusTrigger,
+		touchTrigger: props.touchTrigger,
+		isEnabled: props.isEnabled,
+		label: props.label,
+		isOpen: props.isOpen,
+		isDefaultOpen: props.isDefaultOpen,
+		onShow: () => props.onOpenChange?.(true),
+		onHide: () => props.onOpenChange?.(false),
+	});
+
+	<>
+		<View
+			id={props.id}
+			ref={card.ref}
+			className={cx('vx-hovercard-trigger', props.className)}
+			style={props.style}
+			ios={props.ios}
+			android={props.android}
+		>
+			{props.children}
+		</View>
+		{card.renderHoverCard(props.content, { className: props.className })}
+	</>
+}

package/src/HoverCard.web.tsrx

@@ -0,0 +1,99 @@
+import { useEffect, useRef } from 'octane';
+import type { HoverCardProps } from './props';
+import { useHoverCard } from './use-hover-card.web.tsrx';
+import { cx } from './cx';
+
+const isTextOnly = (children: any) =>
+	typeof children === 'string' || typeof children === 'number';
+
+/**
+ * Hover/focus/tap-triggered floating card (Astryx `HoverCard`), web leaf.
+ * The trigger is `children`; the card floats via the shared Popover
+ * layer. Element children keep their own refs — listeners and position
+ * anchor land on the first element child through a display:contents
+ * wrapper.
+ */
+export function HoverCard(props: HoverCardProps) @{
+	const card = useHoverCard({
+		placement: props.placement,
+		alignment: props.alignment,
+		delay: props.delay,
+		hideDelay: props.hideDelay,
+		focusTrigger: props.focusTrigger,
+		touchTrigger: props.touchTrigger,
+		isEnabled: props.isEnabled,
+		label: props.label,
+		isOpen: props.isOpen,
+		isDefaultOpen: props.isDefaultOpen,
+		onShow: () => props.onOpenChange?.(true),
+		onHide: () => props.onOpenChange?.(false),
+	});
+
+	const wrapper = useRef<HTMLElement | null>(null);
+	const textOnly = isTextOnly(props.children);
+	const showIndication =
+		props.hasHoverIndication === true ||
+		((props.hasHoverIndication ?? 'auto') === 'auto' && textOnly);
+
+	// Position + interaction land on the first element child (the
+	// display:contents wrapper has no box to anchor against).
+	useEffect(() => {
+		if (textOnly) return;
+		const el = wrapper.current?.firstElementChild as HTMLElement | null;
+		card.ref(el);
+		if (!el || !props.label) {
+			return;
+		}
+
+		const prevHaspopup = el.getAttribute('aria-haspopup');
+		el.setAttribute('aria-haspopup', 'dialog');
+		if (card.isOpen) {
+			el.setAttribute('aria-controls', card.id);
+		}
+
+		return () => {
+			card.ref(null);
+			if (prevHaspopup == null) {
+				el.removeAttribute('aria-haspopup');
+			} else {
+				el.setAttribute('aria-haspopup', prevHaspopup);
+			}
+
+			el.removeAttribute('aria-controls');
+		};
+	}, [textOnly, card.isOpen, props.label, card.id]);
+
+	const rendered = card.renderHoverCard(props.content, {
+		className: props.className,
+		style: props.style,
+	});
+
+	<>
+		{textOnly ? (
+			<span
+				ref={card.ref}
+				id={props.id}
+				tabIndex={0}
+				className={cx(showIndication && 'vx-hovercard-indication')}
+				aria-haspopup={props.label ? 'dialog' : undefined}
+				aria-controls={props.label && card.isOpen ? card.id : undefined}
+				aria-describedby={props.label ? undefined : card.describedBy}
+				{...props.web}
+			>
+				{props.children}
+			</span>
+		) : (
+			<span
+				ref={(el: HTMLElement | null) => {
+					wrapper.current = el;
+				}}
+				id={props.id}
+				style={{ display: 'contents' }}
+				{...props.web}
+			>
+				{props.children}
+			</span>
+		)}
+		{rendered}
+	</>;
+}

package/src/Icon.macos.tsrx

@@ -1,17 +1,22 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
 import type { IconProps } from './props'
+import { Image } from './Image.macos'
+import { glyphSvgMarkup } from './svg-glyph'
 import { getIcon } from './icons'
 
-/** Icon — no svgview/NSImage glyph path on the AppKit host yet, so the
- *  registered glyph name renders as text. `size` still sizes the frame so
- *  layouts and the parity sweep measure the declared box. */
 export function Icon(props: IconProps) @{
 	const size = props.size ?? 24
 	const glyph = getIcon(props.name)
+	const markup = glyph && glyphSvgMarkup(glyph, props.color ?? '#000000')
+	if (markup) return <Image src={markup} id={props.id} className={props.className}
+		alt={props.name}
+		style={{ width: size, height: size }} />
+
 	<label
+		id={props.id}
 		className={props.className}
-		style={{ width: size, height: size, fontSize: size * 0.75, ...props.style }}
-		accessibilityLabel={props.accessibilityLabel ?? props.name}
+		style={{ width: size, height: size, fontSize: size * 0.75 }}
+		accessibilityLabel={props.name}
 	>
 		{glyph?.font?.glyph ?? props.name}
 	</label>

package/src/Icon.tsrx

@@ -3,7 +3,7 @@ import type { IconProps } from './props';
 import { getIcon } from './icons';
 import { cx } from './cx';
 import { applyNativeProps } from './platformProps';
-import { glyphSvgMarkup, isSvgSrc, svgSource } from './svg.mobile';
+import { glyphSvgMarkup, isSvgSrc, svgSource } from './svg';
 
 export function Icon(props: IconProps) @{
 	const glyph = getIcon(props.name);

package/src/IconButton.macos.tsrx

@@ -0,0 +1,11 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import type { IconButtonProps } from './props'
+import { Pressable } from './Pressable.macos.tsrx'
+import { Icon } from './Icon.macos.tsrx'
+import { Text } from './Text.macos.tsrx'
+import { cx } from './cx'
+export function IconButton(props: IconButtonProps) @{
+	<Pressable id={props.id} className={cx('vx-button','vx-button--icon',`vx-button--${props.variant??'secondary'}`,props.className)} style={props.style} disabled={props.isDisabled||props.disabled} onPress={props.onPress} accessibilityLabel={props.accessibilityLabel??props.label} accessibilityRole="button">
+		{typeof props.icon==='string'?<Icon name={props.icon}/>:props.icon}{props.label?<Text className="vx-visually-hidden">{props.label}</Text>:null}
+	</Pressable>
+}

package/src/IconButton.tsrx

@@ -0,0 +1,7 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { IconButtonProps } from './props'
+import { Button } from './Button.tsrx'
+
+export function IconButton(props: IconButtonProps) @{
+	<Button {...props} isIconOnly={true} />
+}

package/src/IconButton.web.tsrx

@@ -0,0 +1,5 @@
+import type { IconButtonProps } from './props'
+import { Button } from './Button.web.tsrx'
+export function IconButton(props: IconButtonProps) @{
+	<Button {...props} isIconOnly={true} />
+}

package/src/Image.macos.tsrx

@@ -1,12 +1,16 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useMemo } from 'octane'
+import { appKitImageSource } from './svg-image.macos'
 import type { ImageProps } from './props'
 
 export function Image(props: ImageProps) @{
+	const src = useMemo(() => appKitImageSource(props.src), [props.src])
+
 	<image
 		id={props.id}
-		src={props.src}
+		src={src}
 		className={props.className}
 		style={props.style}
-		accessibilityLabel={props.accessibilityLabel}
+		accessibilityLabel={props.alt ?? ''}
 	/>
 }

package/src/Image.tsrx

@@ -5,7 +5,7 @@ import type { ImageProps } from './props';
 import { cx } from './cx';
 import { applyEscapeProps } from './escape-props';
 import { layoutChildProps } from './layout-child';
-import { isSvgSrc, svgSource } from './svg.mobile';
+import { isSvgSrc, svgSource } from './svg';
 /** Image — NS <image>. `src` accepts the NS ImageSource grammar:
  *  res://name, ~/bundle-path, file path, remote URL, or data: URI. SVG srcs
  *  (inline markup, svg data URIs, .svg paths/URLs) route to <svgview> —

package/src/InputGroup.macos.tsrx

@@ -0,0 +1,63 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useMemo, useId } from 'octane'
+import { refList } from './ref-list'
+import type { InputGroupProps, InputGroupTextProps } from './props'
+import { cx } from './cx'
+import { applyEscapeProps } from './escape-props'
+import { FormField } from './FormField.macos.tsrx'
+import { InputGroupProvider } from './input-group-context'
+
+/** InputGroup — labeled joined input surface; members flatten their own
+ *  chrome via `useInputGroup()`. */
+export function InputGroup(props: InputGroupProps) @{
+	const groupId = useId()
+	const group = { isDisabled: props.isDisabled, size: props.size }
+
+	const forwardedRef = useMemo(() => refList((v: any) => { if (v) { applyEscapeProps(v, props); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	<FormField
+		label={props.label}
+		isLabelHidden={props.isLabelHidden}
+		isGroupLabel={true}
+		labelID={`${groupId}-label`}
+		description={props.description}
+		descriptionID={props.description != null ? `${groupId}-description` : undefined}
+		status={props.status}
+		statusID={props.status?.message != null ? `${groupId}-status` : undefined}
+		isDisabled={props.isDisabled}
+		isRequired={props.isRequired}
+		isOptional={props.isOptional}
+		size={props.size}
+		labelTooltip={props.labelTooltip}
+		id={props.id}
+		className={props.className}
+		style={props.style}
+	>
+		<InputGroupProvider value={group}>
+			<flexboxlayout
+				ref={forwardedRef}
+				flexDirection="row"
+				alignItems="stretch"
+				className={cx('vx-inputgroup', props.isDisabled && 'vx-inputgroup--disabled', props.status && `vx-inputgroup--status-${props.status.type}`, props.size && `vx-inputgroup--size-${props.size}`)}
+				accessibilityState={{ disabled: props.isDisabled } as any}
+			>
+				{props.children}
+			</flexboxlayout>
+		</InputGroupProvider>
+	</FormField>
+}
+
+export function InputGroupText(props: InputGroupTextProps) @{
+	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}
+		className={cx('vx-inputgroup-text', props.className)}
+		style={props.style}
+		justifyContent="center"
+		alignItems="center"
+	>
+		{typeof props.children === 'string' ? <label text={props.children} /> : props.children}
+	</flexboxlayout>
+}

package/src/InputGroup.tsrx

@@ -0,0 +1,68 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useMemo, useId } from 'octane';
+import { refList } from './ref-list'
+import type { InputGroupProps, InputGroupTextProps } from './props';
+import { cx } from './cx';
+import { applyEscapeProps } from './escape-props';
+import { FormField } from './FormField';
+import { InputGroupProvider } from './input-group-context';
+
+/** InputGroup — a labeled, visually joined input surface: the `Field`
+ *  carries label/description/status; members read `useInputGroup()` and
+ *  drop their own borders into the shared skin. NS has no group role —
+ *  the row is a plain flexbox; label/description/status ids still flow to
+ *  members through the FieldContext. */
+export function InputGroup(props: InputGroupProps) @{
+	const groupId = useId();
+	const group = { isDisabled: props.isDisabled, size: props.size };
+
+	const forwardedRef = useMemo(() => refList((v: any) => { if (v) { applyEscapeProps(v, props); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	<FormField
+		label={props.label}
+		isLabelHidden={props.isLabelHidden}
+		isGroupLabel={true}
+		labelID={`${groupId}-label`}
+		description={props.description}
+		descriptionID={props.description != null ? `${groupId}-description` : undefined}
+		status={props.status}
+		statusID={props.status?.message != null ? `${groupId}-status` : undefined}
+		isDisabled={props.isDisabled}
+		isRequired={props.isRequired}
+		isOptional={props.isOptional}
+		size={props.size}
+		labelTooltip={props.labelTooltip}
+		id={props.id}
+		className={props.className}
+		style={props.style}
+	>
+		<InputGroupProvider value={group}>
+			<flexboxlayout
+				ref={forwardedRef}
+				flexDirection="row"
+				alignItems="stretch"
+				className={cx('vx-inputgroup', props.isDisabled && 'vx-inputgroup--disabled', props.status && `vx-inputgroup--status-${props.status.type}`, props.size && `vx-inputgroup--size-${props.size}`)}
+				accessibilityState={{ disabled: props.isDisabled } as any}
+			>
+				{props.children}
+			</flexboxlayout>
+		</InputGroupProvider>
+	</FormField>
+}
+
+/** InputGroupText — a prefix/suffix segment inside an InputGroup. String
+ *  children render as a label; components render as-is. */
+export function InputGroupText(props: InputGroupTextProps) @{
+	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}
+		className={cx('vx-inputgroup-text', props.className)}
+		style={props.style}
+		justifyContent="center"
+		alignItems="center"
+	>
+		{typeof props.children === 'string' ? <label text={props.children} /> : props.children}
+	</flexboxlayout>
+}

package/src/InputGroup.web.tsrx

@@ -0,0 +1,71 @@
+import { useMemo, useId } from 'octane';
+import { refList } from './ref-list'
+import type { InputGroupProps, InputGroupTextProps } from './props';
+import { applyEscapeProps } from './escape-props';
+import { applyWebProps } from './platformProps.web';
+import { FormField } from './FormField.web.tsrx';
+import { InputGroupProvider } from './input-group-context';
+
+/** InputGroup — a labeled, visually joined input surface: the `Field`
+ *  carries label/description/status with `isGroupLabel` so the label ids
+ *  feed the inner `role="group"` element's aria-labelledby; members read
+ *  `useInputGroup()` and drop their own borders into the shared skin. */
+export function InputGroup(props: InputGroupProps) @{
+	const groupId = useId();
+	const labelId = `${groupId}-label`;
+	const descriptionId = props.description != null ? `${groupId}-description` : undefined;
+	const statusId = props.status?.message != null ? `${groupId}-status` : undefined;
+	const group = { isDisabled: props.isDisabled, size: props.size };
+
+	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]);
+
+	<FormField
+		label={props.label}
+		isLabelHidden={props.isLabelHidden}
+		isGroupLabel={true}
+		labelID={labelId}
+		description={props.description}
+		descriptionID={descriptionId}
+		status={props.status}
+		statusID={statusId}
+		isDisabled={props.isDisabled}
+		isRequired={props.isRequired}
+		isOptional={props.isOptional}
+		size={props.size}
+		labelTooltip={props.labelTooltip}
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		web={props.web}
+	>
+		<InputGroupProvider value={group}>
+			<div
+				ref={forwardedRef}
+				className={['vx-inputgroup', props.isDisabled ? 'vx-inputgroup--disabled' : undefined, props.status ? `vx-inputgroup--status-${props.status.type}` : undefined, props.size ? `vx-inputgroup--size-${props.size}` : undefined]}
+				role="group"
+				aria-labelledby={labelId}
+				aria-describedby={[descriptionId, statusId].filter(Boolean).join(' ') || undefined}
+				aria-disabled={props.isDisabled || undefined}
+				aria-invalid={props.status?.type === 'error' || undefined}
+			>
+				{props.children}
+			</div>
+		</InputGroupProvider>
+	</FormField>
+}
+
+/** InputGroupText — a prefix/suffix segment ('$', 'https://', units) inside
+ *  an InputGroup. Non-interactive chrome; keeps the group's shared surface
+ *  but only draws its own edge borders. */
+export function InputGroupText(props: InputGroupTextProps) @{
+	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]);
+
+	<span
+		id={props.id}
+		ref={forwardedRef}
+		className={['vx-inputgroup-text', props.className]}
+		style={props.style}
+	>
+		{props.children}
+	</span>
+}

package/src/InputNumber.macos.tsrx

@@ -1,4 +1,4 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
 import { useState } from 'octane';
 import type { InputNumberProps } from "./props";
 import { cx } from "./cx";
@@ -13,28 +13,31 @@ export function InputNumber(props: InputNumberProps) @{
 	const [internal, setInternal] = useState(props.defaultValue);
 	const controlled = props.value !== undefined;
 	const value = controlled ? props.value : internal;
+	const isBlocked = props.isDisabled || props.isReadOnly;
 
 	const clamp = (n: number) =>
 		Math.min(props.max ?? Infinity, Math.max(props.min ?? -Infinity, n));
 
 	const setValue = (n: number) => {
+		if (isBlocked) return;
 		if (!controlled) setInternal(n);
 		props.onValueChange?.(n);
 	};
 
 	const stepBy = (dir: number) => {
-		if (props.disabled) return;
+		if (isBlocked) return;
 		setValue(clamp((value ?? 0) + dir * (props.step ?? 1)));
 	};
 
-	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-inputnumber', props.disabled && 'vx-inputnumber--disabled', props.className)} style={props.style}>
-		<Pressable className="vx-inputnumber-step" disabled={props.disabled} onPress={() => stepBy(-1)} accessibilityLabel="Decrement">
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-inputnumber', props.isDisabled && 'vx-inputnumber--disabled', props.isReadOnly && 'vx-inputnumber--readonly', props.isLoading && 'vx-inputnumber--loading', props.status && `vx-inputnumber--status-${props.status.type}`, props.size && `vx-inputnumber--size-${props.size}`, props.className)} style={props.style} accessibilityState={{ disabled: props.isDisabled, readonly: props.isReadOnly, busy: props.isLoading }}>
+		<Pressable className="vx-inputnumber-step" disabled={isBlocked} onPress={() => stepBy(-1)} accessibilityLabel="Decrement">
 			<label text="−" />
 		</Pressable>
 		<TextInput
 			className="vx-inputnumber-field"
 			keyboardType="decimal"
-			editable={!props.disabled}
+			isDisabled={props.isDisabled}
+			isReadOnly={props.isReadOnly}
 			placeholder={props.placeholder}
 			value={value == null ? '' : String(value)}
 			onChange={(text: string) => {
@@ -42,7 +45,7 @@ export function InputNumber(props: InputNumberProps) @{
 				if (text === '' || !isNaN(n)) setValue(clamp(text === '' ? 0 : n));
 			}}
 		/>
-		<Pressable className="vx-inputnumber-step" disabled={props.disabled} onPress={() => stepBy(1)} accessibilityLabel="Increment">
+		<Pressable className="vx-inputnumber-step" disabled={isBlocked} onPress={() => stepBy(1)} accessibilityLabel="Increment">
 			<label text="+" />
 		</Pressable>
 	</flexboxlayout>

package/src/InputNumber.tsrx

@@ -2,9 +2,9 @@
 import { useState } from 'octane';
 import type { InputNumberProps } from "./props";
 import { cx } from "./cx";
-import { applyEscapeProps } from "./escape-props";
+import { applyEscapeProps, nativeAccessibilityState } from "./escape-props";
 import { TextInput } from './TextInput.tsrx';
-import { Pressable } from './Pressable.tsrx';
+import { Pressable } from './Pressable';
 
 /** InputNumber — normalized number field with −/+ steppers. Controlled via
  *  `value`/`onValueChange`, uncontrolled via `defaultValue`. Steppers clamp
@@ -13,28 +13,31 @@ export function InputNumber(props: InputNumberProps) @{
 	const [internal, setInternal] = useState(props.defaultValue);
 	const controlled = props.value !== undefined;
 	const value = controlled ? props.value : internal;
+	const isBlocked = props.isDisabled || props.isReadOnly;
 
 	const clamp = (n: number) =>
 		Math.min(props.max ?? Infinity, Math.max(props.min ?? -Infinity, n));
 
 	const setValue = (n: number) => {
+		if (isBlocked) return;
 		if (!controlled) setInternal(n);
 		props.onValueChange?.(n);
 	};
 
 	const stepBy = (dir: number) => {
-		if (props.disabled) return;
+		if (isBlocked) return;
 		setValue(clamp((value ?? 0) + dir * (props.step ?? 1)));
 	};
 
-	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-inputnumber', props.disabled && 'vx-inputnumber--disabled', props.className)} style={props.style}>
-		<Pressable className="vx-inputnumber-step" disabled={props.disabled} onPress={() => stepBy(-1)} accessibilityLabel="Decrement">
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-inputnumber', props.isDisabled && 'vx-inputnumber--disabled', props.isReadOnly && 'vx-inputnumber--readonly', props.isLoading && 'vx-inputnumber--loading', props.status && `vx-inputnumber--status-${props.status.type}`, props.size && `vx-inputnumber--size-${props.size}`, props.className)} style={props.style} accessibilityState={nativeAccessibilityState({ disabled: props.isDisabled }) as any}>
+		<Pressable className="vx-inputnumber-step" disabled={isBlocked} onPress={() => stepBy(-1)} accessibilityLabel="Decrement">
 			<label text="−" />
 		</Pressable>
 		<TextInput
 			className="vx-inputnumber-field"
 			keyboardType="decimal"
-			editable={!props.disabled}
+			isDisabled={props.isDisabled}
+			isReadOnly={props.isReadOnly}
 			placeholder={props.placeholder}
 			value={value == null ? '' : String(value)}
 			onChange={(text: string) => {
@@ -42,7 +45,7 @@ export function InputNumber(props: InputNumberProps) @{
 				if (text === '' || !isNaN(n)) setValue(clamp(text === '' ? 0 : n));
 			}}
 		/>
-		<Pressable className="vx-inputnumber-step" disabled={props.disabled} onPress={() => stepBy(1)} accessibilityLabel="Increment">
+		<Pressable className="vx-inputnumber-step" disabled={isBlocked} onPress={() => stepBy(1)} accessibilityLabel="Increment">
 			<label text="+" />
 		</Pressable>
 	</flexboxlayout>