@octane-xplat/ui 0.5.0 → 0.7.0

package/src/ActivityIndicator.tsrx

@@ -0,0 +1,29 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { ActivityIndicatorProps } from './props';
+import { cx } from './cx';
+import { applyNativeProps } from './platformProps';
+
+/** Self-drawn spinner — a bordered ring (.vx-spinner, same class as web)
+ *  rotated by an infinite `animate` loop. Identical pixels across targets;
+ *  the platform widget (UIActivityIndicatorView/CircularProgressIndicator)
+ *  lives in `ui/ios` + `ui/android`. */
+export function ActivityIndicator(props: ActivityIndicatorProps) @{
+	if (props.busy === false) return null;
+
+	<flexboxlayout
+		id={props.id}
+		className={cx('vx-spinner', props.className)}
+		style={props.style}
+		ref={(el: any) => {
+			if (!el) return;
+			applyNativeProps(el, props);
+			el.once('loaded', () => {
+				el.animate({
+					rotate: 360,
+					duration: 800,
+					iterations: Number.POSITIVE_INFINITY,
+				});
+			});
+		}}
+	/>
+}

package/src/ActivityIndicator.web.tsrx

@@ -0,0 +1,14 @@
+import type { ActivityIndicatorProps } from './props';
+import { applyWebProps } from './platformProps.web';
+
+export function ActivityIndicator(props: ActivityIndicatorProps) @{
+	if (props.busy === false) return null;
+
+	<div
+		id={props.id}
+		className={['vx-spinner', props.className]}
+		style={props.style}
+		role="progressbar"
+		ref={(el: any) => applyWebProps(el, props.web)}
+	/>
+}

package/src/Alert.macos.tsrx

@@ -0,0 +1,42 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { AlertProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.macos.tsrx';
+
+/** Alert — status callout. `tone` picks a class modifier. */
+// Tone → border colors mirror .vx-alert--* in theme/tokens.css — the
+// AppKit host has no CSS layer, so the chrome metric lives inline.
+const TONE_BORDER: Record<string, string> = {
+	info: '#171717',
+	warning: '#d9a400',
+	error: '#dc2626',
+	success: '#2e9e5b',
+}
+
+export function Alert(props: AlertProps) @{
+	const tone = props.tone ?? 'info';
+	const toneColor = TONE_BORDER[tone] ?? '#171717';
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-alert', 'vx-alert--' + tone, props.className)}
+		style={{
+			borderWidth: 1,
+			borderTopWidth: 1,
+			borderColor: toneColor,
+			borderTopColor: toneColor,
+			borderRadius: 6,
+			borderTopLeftRadius: 6,
+			...props.style,
+		}}
+	>
+		{props.icon ? <Icon name={props.icon} className="vx-alert-icon" /> : null}
+		<flexboxlayout className="vx-alert-body">
+			{props.title != null ? <label className="vx-alert-title" text={props.title} /> : null}
+			{props.children}
+		</flexboxlayout>
+	</flexboxlayout>
+}

package/src/Alert.tsrx

@@ -0,0 +1,24 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { AlertProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.tsrx';
+
+/** Alert — status callout. `tone` picks a class modifier. */
+export function Alert(props: AlertProps) @{
+	const tone = props.tone ?? 'info';
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-alert', 'vx-alert--' + tone, props.className)}
+		style={props.style}
+	>
+		{props.icon ? <Icon name={props.icon} className="vx-alert-icon" /> : null}
+		<flexboxlayout className="vx-alert-body">
+			{props.title != null ? <label className="vx-alert-title" text={props.title} /> : null}
+			{props.children}
+		</flexboxlayout>
+	</flexboxlayout>
+}

package/src/Alert.web.tsrx

@@ -0,0 +1,23 @@
+import type { AlertProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.web.tsrx';
+
+/** Alert — status callout. `tone` picks a class modifier; error gets
+ *  role=alert, the rest role=status. */
+export function Alert(props: AlertProps) @{
+	const tone = props.tone ?? 'info';
+
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-alert', 'vx-alert--' + tone, props.className]}
+		style={props.style}
+		role={tone === 'error' ? 'alert' : 'status'}
+	>
+		{props.icon ? <Icon name={props.icon} className="vx-alert-icon" /> : null}
+		<div className="vx-alert-body">
+			{props.title != null ? <span className="vx-alert-title">{props.title}</span> : null}
+			{props.children}
+		</div>
+	</div>
+}

package/src/Avatar.macos.tsrx

@@ -0,0 +1,25 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { AvatarProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Image } from './Image.macos.tsrx';
+
+/** Avatar — circular image with a text fallback when `src` is absent.
+ *  `size` sets the square + border-radius inline so the circle is identical
+ *  across targets. */
+export function Avatar(props: AvatarProps) @{
+	const size = props.size ?? 32;
+	const box = { width: size, height: size, borderRadius: size / 2 };
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx('vx-avatar', props.className)}
+		style={{ ...props.style, ...box }}
+		accessibilityLabel={props.alt}
+	>
+		{props.src
+			? <Image className="vx-avatar-img" src={props.src} alt={props.alt} style={{ width: size, height: size, borderRadius: size / 2 }} />
+			: <label className="vx-avatar-fallback" text={props.fallback ?? ''} />}
+	</flexboxlayout>
+}

package/src/Avatar.tsrx

@@ -0,0 +1,25 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { AvatarProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Image } from './Image.tsrx';
+
+/** Avatar — circular image with a text fallback when `src` is absent.
+ *  `size` sets the square + border-radius inline so the circle is identical
+ *  across targets. */
+export function Avatar(props: AvatarProps) @{
+	const size = props.size ?? 32;
+	const box = { width: size, height: size, borderRadius: size / 2 };
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx('vx-avatar', props.className)}
+		style={{ ...props.style, ...box }}
+		accessibilityLabel={props.alt}
+	>
+		{props.src
+			? <Image className="vx-avatar-img" src={props.src} alt={props.alt} style={{ width: size, height: size, borderRadius: size / 2 }} />
+			: <label className="vx-avatar-fallback" text={props.fallback ?? ''} />}
+	</flexboxlayout>
+}

package/src/Avatar.web.tsrx

@@ -0,0 +1,24 @@
+import type { AvatarProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Avatar — circular image with a text fallback when `src` is absent.
+ *  `size` sets the square + border-radius inline so the circle is identical
+ *  across targets. Image load failures still show the fallback only when
+ *  `src` was never provided — no error detection, by design. */
+export function Avatar(props: AvatarProps) @{
+	const size = props.size ?? 32;
+	const box = { width: size, height: size, borderRadius: size / 2 };
+
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-avatar', props.className]}
+		style={{ ...props.style, ...box }}
+		role="img"
+		aria-label={props.alt}
+	>
+		{props.src
+			? <img className="vx-avatar-img" src={props.src} alt={props.alt} style={{ width: size, height: size, borderRadius: size / 2 }} />
+			: <span className="vx-avatar-fallback">{props.fallback ?? ''}</span>}
+	</div>
+}

package/src/AvatarGroup.macos.tsrx

@@ -0,0 +1,32 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { AvatarGroupProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { toChildArray } from './child-array';
+import { Avatar } from './Avatar.macos.tsrx';
+
+/** AvatarGroup — row of overlapping avatars. `max` collapses the rest into
+ *  a `+N` avatar. Overlap is one-third of `size`, applied per-item so it
+ *  works identically without relying on sibling CSS selectors. */
+export function AvatarGroup(props: AvatarGroupProps) @{
+	const size = props.size ?? 32;
+	const children = toChildArray(props.children);
+	const shown = props.max != null ? children.slice(0, props.max) : children;
+	const overflow = children.length - shown.length;
+	const itemStyle = (i: number) => (i === 0 ? undefined : { marginLeft: -size / 3 });
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-avatar-group', props.className)}
+		style={props.style}
+	>
+		{shown.map((child: any, i: number) => (
+			<flexboxlayout key={i} className="vx-avatar-group-item" style={itemStyle(i)}>{child}</flexboxlayout>
+		))}
+		{overflow > 0
+			? <flexboxlayout className="vx-avatar-group-item" style={itemStyle(shown.length)}><Avatar fallback={`+${overflow}`} size={size} /></flexboxlayout>
+			: null}
+	</flexboxlayout>
+}

package/src/AvatarGroup.tsrx

@@ -0,0 +1,32 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { AvatarGroupProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { toChildArray } from './child-array';
+import { Avatar } from './Avatar.tsrx';
+
+/** AvatarGroup — row of overlapping avatars. `max` collapses the rest into
+ *  a `+N` avatar. Overlap is one-third of `size`, applied per-item so it
+ *  works identically without relying on sibling CSS selectors. */
+export function AvatarGroup(props: AvatarGroupProps) @{
+	const size = props.size ?? 32;
+	const children = toChildArray(props.children);
+	const shown = props.max != null ? children.slice(0, props.max) : children;
+	const overflow = children.length - shown.length;
+	const itemStyle = (i: number) => (i === 0 ? undefined : { marginLeft: -size / 3 });
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-avatar-group', props.className)}
+		style={props.style}
+	>
+		{shown.map((child: any, i: number) => (
+			<flexboxlayout key={i} className="vx-avatar-group-item" style={itemStyle(i)}>{child}</flexboxlayout>
+		))}
+		{overflow > 0
+			? <flexboxlayout className="vx-avatar-group-item" style={itemStyle(shown.length)}><Avatar fallback={`+${overflow}`} size={size} /></flexboxlayout>
+			: null}
+	</flexboxlayout>
+}

package/src/AvatarGroup.web.tsrx

@@ -0,0 +1,29 @@
+import type { AvatarGroupProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { toChildArray } from './child-array';
+import { Avatar } from './Avatar.web.tsrx';
+
+/** AvatarGroup — row of overlapping avatars. `max` collapses the rest into
+ *  a `+N` avatar. Overlap is one-third of `size`, applied per-item so it
+ *  works identically without relying on sibling CSS selectors. */
+export function AvatarGroup(props: AvatarGroupProps) @{
+	const size = props.size ?? 32;
+	const children = toChildArray(props.children);
+	const shown = props.max != null ? children.slice(0, props.max) : children;
+	const overflow = children.length - shown.length;
+	const itemStyle = (i: number) => (i === 0 ? undefined : { marginLeft: -size / 3 });
+
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-avatar-group', props.className]}
+		style={props.style}
+	>
+		{shown.map((child: any, i: number) => (
+			<div key={i} className="vx-avatar-group-item" style={itemStyle(i)}>{child}</div>
+		))}
+		{overflow > 0
+			? <div className="vx-avatar-group-item" style={itemStyle(shown.length)}><Avatar fallback={`+${overflow}`} size={size} /></div>
+			: null}
+	</div>
+}

package/src/Badge.macos.tsrx

@@ -0,0 +1,12 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { BadgeProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Badge — inline label chip. Pure composition; `vx-badge` supplies only the
+ *  inline-flex row so apps own all visual styling. */
+export function Badge(props: BadgeProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-badge', props.className)} style={props.style}>
+		{props.children}
+	</flexboxlayout>
+}

package/src/Badge.tsrx

@@ -0,0 +1,12 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { BadgeProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Badge — inline label chip. Pure composition; `vx-badge` supplies only the
+ *  inline-flex row so apps own all visual styling. */
+export function Badge(props: BadgeProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-badge', props.className)} style={props.style}>
+		{props.children}
+	</flexboxlayout>
+}

package/src/Badge.web.tsrx

@@ -0,0 +1,10 @@
+import type { BadgeProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Badge — inline label chip. Pure composition; `vx-badge` supplies only the
+ *  inline-flex row so apps own all visual styling. */
+export function Badge(props: BadgeProps) @{
+	<span ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-badge', props.className]} style={props.style}>
+		{props.children}
+	</span>
+}

package/src/Banner.macos.tsrx

@@ -0,0 +1,20 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { BannerProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.macos.tsrx';
+
+/** Banner — inline notice strip with optional dismiss affordance. */
+export function Banner(props: BannerProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-banner', props.className)}
+		style={props.style}
+	>
+		{props.icon ? <Icon name={props.icon} className="vx-banner-icon" /> : null}
+		<flexboxlayout className="vx-banner-body">{props.children}</flexboxlayout>
+		{props.onDismiss ? <label className="vx-banner-dismiss" text="✕" style={{ marginLeft: 8, width: 12, height: 16, textAlign: 'center' }} onTap={props.onDismiss} /> : null}
+	</flexboxlayout>
+}

package/src/Banner.tsrx

@@ -0,0 +1,20 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { BannerProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.tsrx';
+
+/** Banner — inline notice strip with optional dismiss affordance. */
+export function Banner(props: BannerProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-banner', props.className)}
+		style={props.style}
+	>
+		{props.icon ? <Icon name={props.icon} className="vx-banner-icon" /> : null}
+		<flexboxlayout className="vx-banner-body">{props.children}</flexboxlayout>
+		{props.onDismiss ? <label className="vx-banner-dismiss" text="✕" onTap={props.onDismiss} /> : null}
+	</flexboxlayout>
+}

package/src/Banner.web.tsrx

@@ -0,0 +1,20 @@
+import type { BannerProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.web.tsrx';
+
+/** Banner — inline notice strip with optional dismiss affordance. */
+export function Banner(props: BannerProps) @{
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-banner', props.className]}
+		style={props.style}
+		role="status"
+	>
+		{props.icon ? <Icon name={props.icon} className="vx-banner-icon" /> : null}
+		<div className="vx-banner-body">{props.children}</div>
+		{props.onDismiss
+			? <span className="vx-banner-dismiss" role="button" aria-label="Dismiss" tabIndex={0} onClick={props.onDismiss} onKeyDown={(e: any) => { if (e.key === 'Enter') props.onDismiss?.(); }}>✕</span>
+			: null}
+	</div>
+}

package/src/Breadcrumb.macos.tsrx

@@ -0,0 +1,27 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { BreadcrumbProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Breadcrumb — ancestor trail. Every item with `onSelect` renders as a
+ *  tappable link; the last item is conventionally the current page. */
+export function Breadcrumb(props: BreadcrumbProps) @{
+	const sep = props.separator ?? '/';
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-breadcrumb', props.className)}
+		style={props.style}
+	>
+		@for (const e of props.items.map((item, i) => ({ item, i })); key e.i) {
+			<flexboxlayout className="vx-breadcrumb-item">
+				{e.i > 0 ? <label className="vx-breadcrumb-sep" text={sep} /> : null}
+				{e.item.onSelect
+					? <label className="vx-breadcrumb-link" text={e.item.label} onTap={e.item.onSelect} />
+					: <label className="vx-breadcrumb-text" text={e.item.label} />}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/Breadcrumb.tsrx

@@ -0,0 +1,27 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { BreadcrumbProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Breadcrumb — ancestor trail. Every item with `onSelect` renders as a
+ *  tappable link; the last item is conventionally the current page. */
+export function Breadcrumb(props: BreadcrumbProps) @{
+	const sep = props.separator ?? '/';
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-breadcrumb', props.className)}
+		style={props.style}
+	>
+		@for (const e of props.items.map((item, i) => ({ item, i })); key e.i) {
+			<flexboxlayout className="vx-breadcrumb-item">
+				{e.i > 0 ? <label className="vx-breadcrumb-sep" text={sep} /> : null}
+				{e.item.onSelect
+					? <label className="vx-breadcrumb-link" text={e.item.label} onTap={e.item.onSelect} />
+					: <label className="vx-breadcrumb-text" text={e.item.label} />}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/Breadcrumb.web.tsrx

@@ -0,0 +1,25 @@
+import type { BreadcrumbProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Breadcrumb — ancestor trail. Every item with `onSelect` renders as a
+ *  pressable link; the last item is conventionally the current page. */
+export function Breadcrumb(props: BreadcrumbProps) @{
+	const sep = props.separator ?? '/';
+
+	<nav
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-breadcrumb', props.className]}
+		style={props.style}
+		aria-label={props.accessibilityLabel ?? 'Breadcrumb'}
+	>
+		{props.items.map((item: any, i: number) => (
+			<span key={i} className="vx-breadcrumb-item">
+				{i > 0 ? <span className="vx-breadcrumb-sep" aria-hidden="true">{sep}</span> : null}
+				{item.onSelect
+					? <span className="vx-breadcrumb-link" role="link" tabIndex={0} onClick={item.onSelect} onKeyDown={(e: any) => { if (e.key === 'Enter') item.onSelect?.(); }}>{item.label}</span>
+					: <span className="vx-breadcrumb-text" aria-current={i === props.items.length - 1 ? 'page' : undefined}>{item.label}</span>}
+			</span>
+		))}
+	</nav>
+}

package/src/Button.tsrx

@@ -0,0 +1,23 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { ButtonProps } from "./props";
+import { cx } from "./cx";
+import { Pressable } from './Pressable.tsrx';
+import { ActivityIndicator } from './ActivityIndicator.tsrx';
+
+/** Self-drawn button — Pressable row with optional leading/trailing content
+ *  and a `loading` state that swaps children for the spinner and blocks
+ *  presses. `vx-button` makes the row direction; styling is the app's. */
+export function Button(props: ButtonProps) @{
+	const disabled = props.disabled || props.loading;
+
+	<Pressable
+		{...props}
+		disabled={disabled}
+		className={cx('vx-button', props.loading && 'vx-button--loading', props.className)}
+		accessibilityRole={props.accessibilityRole ?? 'button'}
+	>
+		{props.loading
+			? <ActivityIndicator />
+			: <>{props.leading}{props.children}{props.trailing}</>}
+	</Pressable>
+}

package/src/Button.web.tsrx

@@ -0,0 +1,21 @@
+import type { ButtonProps } from "./props";
+import { Pressable } from './Pressable.web.tsrx';
+import { ActivityIndicator } from './ActivityIndicator.web.tsrx';
+
+/** Self-drawn button — Pressable row with optional leading/trailing content
+ *  and a `loading` state that swaps children for the spinner and blocks
+ *  presses. `vx-button` makes the row direction; styling is the app's. */
+export function Button(props: ButtonProps) @{
+	const disabled = props.disabled || props.loading;
+
+	<Pressable
+		{...props}
+		disabled={disabled}
+		className={['vx-button', props.loading ? 'vx-button--loading' : undefined, props.className]}
+		accessibilityRole={props.accessibilityRole ?? 'button'}
+	>
+		{props.loading
+			? <ActivityIndicator />
+			: <>{props.leading}{props.children}{props.trailing}</>}
+	</Pressable>
+}

package/src/CameraView.macos.tsrx

@@ -0,0 +1,6 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { CameraViewProps } from './props'
+
+export function CameraView(_props: CameraViewProps) @{
+	<label className="vx-unsupported">Camera capture is unsupported by the AppKit host</label>
+}

package/src/Card.macos.tsrx

@@ -0,0 +1,13 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { CardProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Card — container with optional header/footer slots. */
+export function Card(props: CardProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-card', props.className)} style={props.style}>
+		{props.header != null ? <flexboxlayout className="vx-card-header">{props.header}</flexboxlayout> : null}
+		<flexboxlayout className="vx-card-body">{props.children}</flexboxlayout>
+		{props.footer != null ? <flexboxlayout className="vx-card-footer">{props.footer}</flexboxlayout> : null}
+	</flexboxlayout>
+}

package/src/Card.tsrx

@@ -0,0 +1,13 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { CardProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Card — container with optional header/footer slots. */
+export function Card(props: CardProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-card', props.className)} style={props.style}>
+		{props.header != null ? <flexboxlayout className="vx-card-header">{props.header}</flexboxlayout> : null}
+		<flexboxlayout className="vx-card-body">{props.children}</flexboxlayout>
+		{props.footer != null ? <flexboxlayout className="vx-card-footer">{props.footer}</flexboxlayout> : null}
+	</flexboxlayout>
+}

package/src/Card.web.tsrx

@@ -0,0 +1,11 @@
+import type { CardProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Card — container with optional header/footer slots. */
+export function Card(props: CardProps) @{
+	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-card', props.className]} style={props.style}>
+		{props.header != null ? <div className="vx-card-header">{props.header}</div> : null}
+		<div className="vx-card-body">{props.children}</div>
+		{props.footer != null ? <div className="vx-card-footer">{props.footer}</div> : null}
+	</div>
+}

package/src/Checkbox.tsrx

@@ -0,0 +1,23 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { CheckboxProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps, nativeAccessibilityRole } from "./escape-props";
+
+/** Self-drawn checkbox — box + ✓ glyph, identical layout across targets.
+ *  Toggles on tap. */
+export function Checkbox(props: CheckboxProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx('vx-checkbox-row', props.checked && 'vx-checkbox--on', props.disabled && 'vx-checkbox--disabled', props.className)}
+		style={props.style}
+		accessibilityRole={nativeAccessibilityRole('checkbox') as any}
+		accessibilityLabel={props.accessibilityLabel}
+		onTap={props.disabled ? undefined : () => props.onCheckedChange?.(!(props.checked ?? false))}
+	>
+		<flexboxlayout className="vx-checkbox">
+			{props.checked ? <label className="vx-checkbox-check" text="✓" /> : null}
+		</flexboxlayout>
+		{props.label != null ? <label className="vx-checkbox-label" text={props.label} /> : null}
+	</flexboxlayout>
+}