@octanejs/radix 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dominic Gannaway
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,100 @@
+# @octanejs/radix
+
+[Radix UI Primitives](https://www.radix-ui.com/primitives) for the
+[octane](https://github.com/octanejs/octane) renderer — a port of
+[`@radix-ui/react`](https://www.npmjs.com/org/radix-ui) (headless, accessible UI
+primitives) on octane's hooks. It mirrors the unified `radix-ui` package's shape: the
+low-level composition utilities are exported directly, and each component is a namespace
+(`Separator.Root`, `Label.Root`).
+
+```tsx
+import { Separator, Label } from '@octanejs/radix';
+
+function Field() {
+  return (
+    <div>
+      <Label.Root class="label">Email</Label.Root>
+      <Separator.Root orientation="horizontal" />
+    </div>
+  );
+}
+```
+
+## How it works
+
+The React binding layer maps onto octane cleanly: `forwardRef` → octane's ref-as-prop,
+`composeRefs` → `composeRefs`/`useComposedRefs`, and Radix's `Slot`/`asChild`
+(`Children.only` + `cloneElement` + prop/ref merge) → octane's runtime `Children` /
+`cloneElement` / `isValidElement`. Popper/focus/dismiss behavior reuses the already-ported
+[`@octanejs/floating-ui`](../floating-ui). See
+[`docs/radix-migration-plan.md`](../../docs/radix-migration-plan.md) for the full plan.
+
+### `asChild` takes a descriptor
+
+`Slot`/`asChild` operate on element **descriptors**. In `.tsrx`/`.tsx`, prop-position JSX
+(`el={<button/>}`), `createElement`, and `.map()` returns are descriptors, but
+children-position JSX compiles to a render function. So an octane `asChild` consumer passes
+the child element at a value/prop position (or via `createElement`) rather than React's
+children-position `<Trigger asChild><button/></Trigger>`.
+
+## Status
+
+**Complete against the unified `radix-ui@1.6.1` component surface.** Landed:
+
+- Composition foundation — `Slot`, `Slottable`, `Primitive.<tag>` (`asChild`), `mergeProps`
+  (event chaining, `style` merge, clsx-style `class` composition), `composeRefs` /
+  `useComposedRefs`, `composeEventHandlers`.
+- State foundation — `useControllableState` (controlled/uncontrolled), `Presence` (keeps a
+  child mounted through its CSS exit animation), the full **`createContextScope`**
+  (`createScope` + `composeContextScopes`) so composed primitives can't collide,
+  `createCollection` (the Collection primitive: `data-radix-collection-item` stamping +
+  DOM-ordered item registry), the `radix-`-prefixed `useId`, `useCallbackRef`,
+  `Direction` (`useDirection`/`Provider`), and `useSize`.
+- Components — `Separator`, `Label`, `Collapsible`, `Accordion` (single + multiple, full
+  keyboard nav), **`Dialog`** (modal + non-modal), **`AlertDialog`**, **`Toggle`**,
+  **`ToggleGroup`**, **`Tabs`**, **`Toolbar`** (roving focus + embedded ToggleGroup),
+  `AspectRatio`, `VisuallyHidden`, `Avatar` (image loading state machine), `Progress`,
+  `Arrow` — the roving-focus family on the full **`RovingFocusGroup`** port.
+- **The Popper overlay family** — **`Popper`** (anchor/content/arrow on
+  `@octanejs/floating-ui`'s positioning core: offset/shift/flip/size/arrow/hide +
+  transform-origin middleware, `--radix-popper-*` CSS vars, virtual anchors),
+  **`Tooltip`** (provider delays, skip-delay, grace-area convex hull, hidden a11y copy),
+  **`Popover`** (modal + non-modal, custom Anchor), **`HoverCard`** (open/close delays,
+  selection containment), the shared **`Menu`** primitive (typeahead, checkbox/radio
+  items + indicators, submenus with pointer-grace polygons), **`DropdownMenu`**, and
+  **`ContextMenu`** (right-click / long-press virtual anchor).
+- **`ScrollArea`** — custom scrollbars over a native scroll viewport: all four
+  visibility strategies (`hover` / `scroll` state machine / `auto` overflow
+  measurement / `always`), thumb drag + wheel scroll geometry, corner, and the
+  scroll-linked-effect-avoiding rAF thumb loop.
+- **The form batch** — **`Checkbox`** (indeterminate), **`Switch`**,
+  **`RadioGroup`** (roving-focus arrow keys check items), **`Slider`**
+  (multi-thumb, keyboard + pointer-capture sliding), and **`Form`** (native
+  Constraint Validation: built-in + custom sync/async matchers, messages wired
+  into `aria-describedby`). Each control renders Radix's hidden native "bubble
+  input" inside forms, so FormData, form reset, and `<form onChange>` reflect
+  state natively (see the per-file headers for the documented octane
+  adaptations around the uncontrolled-input model).
+- **The final six** — **`Menubar`** (menu family over the shared Menu primitive),
+  **`Select`** (item-aligned + popper positioning, typeahead, hidden native bubble
+  `<select>`), **`NavigationMenu`** (viewport/indicator machinery, motion attributes,
+  delayed open/close), **`Toast`** (viewport hotkey, pausable timers, swipe machinery,
+  announce regions), **`OneTimePasswordField`** (per-char cells, paste distribution,
+  roving focus), and **`PasswordToggleField`** — plus `AccessibleIcon`,
+  `useEffectEvent`, and `useIsHydrated`.
+- Overlay infra — `Portal`, `DismissableLayer`, `FocusScope`, `useFocusGuards`,
+  `useScrollLock` (a focused `react-remove-scroll` replacement — see `scroll-lock.ts`),
+  with the framework-agnostic `aria-hidden` package reused as-is.
+
+**Verified against real Radix**: the differential suite
+(`tests/differential/parity.test.ts`) runs the SAME fixture through `@octanejs/radix` and
+the real `radix-ui` package on React, asserting byte-identical DOM after every interaction
+step; portal'd overlays (which the rig can't see) carry dedicated focus/keyboard/dismiss
+unit suites. Ports come from the pinned radix-ui/primitives source checkout
+(`.radix-primitives/`); every file header cites its source path.
+
+Remaining (documented in
+[`docs/radix-migration-plan.md`](../../docs/radix-migration-plan.md)): SSR/hydration
+coverage for the overlay/portal components and Phase-5 polish. The port surfaced —
+and fixed, in octane itself — fourteen runtime/compiler parity bugs along the way;
+each is pinned by an octane regression test and a changeset.

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@octanejs/radix",
+  "version": "0.1.2",
+  "license": "MIT",
+  "type": "module",
+  "description": "Radix UI Primitives for the octane renderer — a port of @radix-ui/react (headless, accessible UI primitives) on octane's hooks, built on the same @octanejs/floating-ui substrate.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/radix"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "aria-hidden": "^1.2.6",
+    "@octanejs/floating-ui": "0.1.2",
+    "octane": "0.1.3"
+  },
+  "devDependencies": {
+    "@tsrx/react": "^0.2.33",
+    "esbuild": "^0.28.1",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "vitest": "^4.1.9"
+  },
+  "scripts": {
+    "test": "vitest run"
+  }
+}

package/src/AccessibleIcon.ts

@@ -0,0 +1,26 @@
+// Ported from @radix-ui/react-accessible-icon (source:
+// .radix-primitives/packages/react/accessible-icon/src/accessible-icon.tsx). Hides the
+// icon child from ATs (aria-hidden + unfocusable SVG) and announces `label` through a
+// VisuallyHidden copy instead — `alt` text for icons. octane note: like Slot/asChild,
+// the icon child must be an element DESCRIPTOR (prop/value-position JSX or
+// createElement); a single-element array unwraps, matching the Slot convention.
+import { Children, cloneElement, createElement } from 'octane';
+
+import * as VisuallyHiddenPrimitive from './VisuallyHidden';
+
+export function Root(props: any): any {
+	const { children, label } = props ?? {};
+	const array = Children.toArray(children);
+	const child = array.length === 1 ? array[0] : Children.only(children);
+	return [
+		cloneElement(child as any, {
+			// accessibility
+			'aria-hidden': 'true',
+			focusable: 'false', // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+			key: 'icon',
+		}),
+		createElement(VisuallyHiddenPrimitive.Root, { key: 'label', children: label }),
+	];
+}
+
+export { Root as AccessibleIcon };

package/src/Accordion.ts

@@ -0,0 +1,282 @@
+// Ported from @radix-ui/react-accordion. A set of collapsible sections. Each Item is a
+// Collapsible whose `open` is derived from the Accordion's controllable `value` (a single
+// string for `type="single"`, or a string[] for `type="multiple"`). `.ts` components via
+// createElement. Uses Radix's scoped context: `createAccordionScope` composes
+// `createCollapsibleScope`, so each Item threads its own isolated Collapsible scope
+// (`__scopeCollapsible`) — a user's separate Collapsible won't collide with an Accordion's.
+//
+// DEFERRED: arrow-key roving focus between triggers (Radix wraps triggers in
+// RovingFocusGroup). Expand/collapse + ARIA + data-state are complete; the roving-focus
+// primitive is a separate, reusable follow-up (also used by Tabs/Toolbar/RadioGroup).
+import { createElement, useCallback } from 'octane';
+
+import * as Collapsible from './Collapsible';
+import { createCollapsibleScope } from './Collapsible';
+import { createCollection } from './collection';
+import { composeEventHandlers } from './compose-event-handlers';
+import { createContextScope } from './context';
+import { S, subSlot } from './internal';
+import { Primitive } from './Primitive';
+import { useControllableState } from './useControllableState';
+import { useId } from './useId';
+
+const ACCORDION_KEYS = ['Home', 'End', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'];
+const [Collection, useCollection] = createCollection('Accordion');
+
+interface ValueContextValue {
+	value: string[];
+	onItemOpen: (value: string) => void;
+	onItemClose: (value: string) => void;
+}
+interface ImplContextValue {
+	disabled?: boolean;
+	orientation: 'horizontal' | 'vertical';
+	collapsible: boolean;
+	isMultiple: boolean;
+}
+interface ItemContextValue {
+	open: boolean;
+	disabled?: boolean;
+	triggerId: string;
+}
+
+const [createAccordionContext, createAccordionScope] = createContextScope('Accordion', [
+	createCollapsibleScope,
+]);
+export { createAccordionScope };
+const useCollapsibleScope = createCollapsibleScope();
+
+const [AccordionValueProvider, useAccordionValueContext] =
+	createAccordionContext<ValueContextValue>('Accordion');
+const [AccordionImplProvider, useAccordionImplContext] =
+	createAccordionContext<ImplContextValue>('Accordion');
+const [AccordionItemProvider, useAccordionItemContext] =
+	createAccordionContext<ItemContextValue>('AccordionItem');
+
+function getState(open?: boolean): 'open' | 'closed' {
+	return open ? 'open' : 'closed';
+}
+
+export function Root(props: any): any {
+	const slot = S('Accordion.Root');
+	const {
+		__scopeAccordion,
+		type,
+		value: valueProp,
+		defaultValue,
+		onValueChange,
+		collapsible = false,
+		disabled,
+		dir,
+		orientation = 'vertical',
+		...rest
+	} = props ?? {};
+	const isMultiple = type === 'multiple';
+
+	const [value, setValue] = useControllableState<any>(
+		{
+			prop: valueProp,
+			defaultProp: defaultValue ?? (isMultiple ? [] : undefined),
+			onChange: onValueChange,
+		},
+		subSlot(slot, 'value'),
+	);
+	const valueArray: string[] = isMultiple
+		? (value ?? [])
+		: value != null && value !== ''
+			? [value]
+			: [];
+
+	const onItemOpen = useCallback(
+		(itemValue: string) => {
+			if (isMultiple) setValue((prev: string[]) => [...(prev ?? []), itemValue]);
+			else setValue(itemValue);
+		},
+		[isMultiple],
+		subSlot(slot, 'open'),
+	);
+	const onItemClose = useCallback(
+		(itemValue: string) => {
+			if (isMultiple) setValue((prev: string[]) => (prev ?? []).filter((v) => v !== itemValue));
+			else if (collapsible) setValue('');
+		},
+		[isMultiple, collapsible],
+		subSlot(slot, 'close'),
+	);
+
+	return createElement(Collection.Provider, {
+		scope: __scopeAccordion,
+		children: createElement(AccordionValueProvider, {
+			scope: __scopeAccordion,
+			value: valueArray,
+			onItemOpen,
+			onItemClose,
+			children: createElement(AccordionImplProvider, {
+				scope: __scopeAccordion,
+				disabled,
+				orientation,
+				collapsible,
+				isMultiple,
+				children: createElement(AccordionImpl, {
+					__scopeAccordion,
+					disabled,
+					dir,
+					orientation,
+					...rest,
+				}),
+			}),
+		}),
+	});
+}
+
+// The keyboard-navigable root element (Radix's AccordionImpl): Home/End jump, arrow keys
+// move between triggers per orientation/direction, wrapping — driven by the Collection.
+function AccordionImpl(props: any): any {
+	const slot = S('Accordion.Impl');
+	const { __scopeAccordion, disabled, dir, orientation, ...accordionProps } = props;
+	const getItems = useCollection(__scopeAccordion, subSlot(slot, 'items'));
+	const isDirectionLTR = (dir ?? 'ltr') === 'ltr';
+
+	const handleKeyDown = composeEventHandlers(accordionProps.onKeyDown, (event: KeyboardEvent) => {
+		if (!ACCORDION_KEYS.includes(event.key)) return;
+		const target = event.target as HTMLElement;
+		const triggerCollection = getItems().filter((item: any) => !item.ref.current?.disabled);
+		const triggerIndex = triggerCollection.findIndex((item: any) => item.ref.current === target);
+		const triggerCount = triggerCollection.length;
+		if (triggerIndex === -1) return;
+		event.preventDefault();
+		let nextIndex = triggerIndex;
+		const homeIndex = 0;
+		const endIndex = triggerCount - 1;
+		const moveNext = (): void => {
+			nextIndex = triggerIndex + 1;
+			if (nextIndex > endIndex) nextIndex = homeIndex;
+		};
+		const movePrev = (): void => {
+			nextIndex = triggerIndex - 1;
+			if (nextIndex < homeIndex) nextIndex = endIndex;
+		};
+		switch (event.key) {
+			case 'Home':
+				nextIndex = homeIndex;
+				break;
+			case 'End':
+				nextIndex = endIndex;
+				break;
+			case 'ArrowRight':
+				if (orientation === 'horizontal') {
+					if (isDirectionLTR) moveNext();
+					else movePrev();
+				}
+				break;
+			case 'ArrowDown':
+				if (orientation === 'vertical') moveNext();
+				break;
+			case 'ArrowLeft':
+				if (orientation === 'horizontal') {
+					if (isDirectionLTR) movePrev();
+					else moveNext();
+				}
+				break;
+			case 'ArrowUp':
+				if (orientation === 'vertical') movePrev();
+				break;
+		}
+		triggerCollection[nextIndex % triggerCount].ref.current?.focus();
+	});
+
+	return createElement(Collection.Slot, {
+		scope: __scopeAccordion,
+		children: createElement(Primitive.div, {
+			...accordionProps,
+			'data-orientation': orientation,
+			onKeyDown: disabled ? undefined : handleKeyDown,
+		}),
+	});
+}
+
+export function Item(props: any): any {
+	const slot = S('Accordion.Item');
+	const { __scopeAccordion, value: itemValue, disabled: itemDisabled, ...rest } = props ?? {};
+	const impl = useAccordionImplContext('AccordionItem', __scopeAccordion);
+	const valueCtx = useAccordionValueContext('AccordionItem', __scopeAccordion);
+	const collapsibleScope = useCollapsibleScope(__scopeAccordion, subSlot(slot, 'cscope'));
+	const triggerId = useId(subSlot(slot, 'id'));
+	const open = (itemValue != null && valueCtx.value.includes(itemValue)) || false;
+	const disabled = impl.disabled || itemDisabled || false;
+
+	return createElement(AccordionItemProvider, {
+		scope: __scopeAccordion,
+		open,
+		disabled,
+		triggerId,
+		children: createElement(Collapsible.Root, {
+			'data-orientation': impl.orientation,
+			'data-state': getState(open),
+			...collapsibleScope,
+			...rest,
+			disabled,
+			open,
+			onOpenChange: (isOpen: boolean) => {
+				if (isOpen) valueCtx.onItemOpen(itemValue);
+				else valueCtx.onItemClose(itemValue);
+			},
+		}),
+	});
+}
+
+export function Header(props: any): any {
+	const { __scopeAccordion, ...rest } = props ?? {};
+	const impl = useAccordionImplContext('AccordionHeader', __scopeAccordion);
+	const item = useAccordionItemContext('AccordionHeader', __scopeAccordion);
+	return createElement(Primitive.h3, {
+		'data-orientation': impl.orientation,
+		'data-state': getState(item.open),
+		'data-disabled': item.disabled ? '' : undefined,
+		...rest,
+	});
+}
+
+export function Trigger(props: any): any {
+	const slot = S('Accordion.Trigger');
+	const { __scopeAccordion, ...rest } = props ?? {};
+	const impl = useAccordionImplContext('AccordionTrigger', __scopeAccordion);
+	const item = useAccordionItemContext('AccordionTrigger', __scopeAccordion);
+	const collapsibleScope = useCollapsibleScope(__scopeAccordion, subSlot(slot, 'cscope'));
+	// A `type="single"` non-collapsible open item can't be closed → aria-disabled.
+	const ariaDisabled = (item.open && !impl.isMultiple && !impl.collapsible) || undefined;
+	// Registered in the Collection (stamps `data-radix-collection-item` + a ref onto the
+	// underlying button) so the root's keyboard nav can enumerate triggers in DOM order.
+	return createElement(Collection.ItemSlot, {
+		scope: __scopeAccordion,
+		children: createElement(Collapsible.Trigger, {
+			'aria-disabled': ariaDisabled,
+			'data-orientation': impl.orientation,
+			id: item.triggerId,
+			...collapsibleScope,
+			...rest,
+		}),
+	});
+}
+
+export function Content(props: any): any {
+	const slot = S('Accordion.Content');
+	const { __scopeAccordion, style, ...rest } = props ?? {};
+	const impl = useAccordionImplContext('AccordionContent', __scopeAccordion);
+	const item = useAccordionItemContext('AccordionContent', __scopeAccordion);
+	const collapsibleScope = useCollapsibleScope(__scopeAccordion, subSlot(slot, 'cscope'));
+	return createElement(Collapsible.Content, {
+		role: 'region',
+		'aria-labelledby': item.triggerId,
+		'data-orientation': impl.orientation,
+		...collapsibleScope,
+		...rest,
+		style: {
+			'--radix-accordion-content-height': 'var(--radix-collapsible-content-height)',
+			'--radix-accordion-content-width': 'var(--radix-collapsible-content-width)',
+			...style,
+		},
+	});
+}
+
+export { Root as Accordion };

package/src/AlertDialog.ts

@@ -0,0 +1,110 @@
+// Ported from @radix-ui/react-alert-dialog. A modal confirmation dialog built as a thin
+// wrapper over Dialog: always `modal`, `role="alertdialog"`, outside interactions never
+// dismiss (pointer-down/interact-outside prevented), and opening autofocuses the CANCEL
+// action (the safe choice) instead of the first tabbable.
+import { createElement, useRef } from 'octane';
+
+import { composeEventHandlers } from './compose-event-handlers';
+import { useComposedRefs } from './compose-refs';
+import { createContextScope } from './context';
+import * as DialogPrimitive from './Dialog';
+import { createDialogScope } from './Dialog';
+import { S, subSlot } from './internal';
+
+const [createAlertDialogContext, createAlertDialogScope] = createContextScope('AlertDialog', [
+	createDialogScope,
+]);
+export { createAlertDialogScope };
+const useDialogScope = createDialogScope();
+
+const [AlertDialogContentProvider, useAlertDialogContentContext] = createAlertDialogContext<{
+	cancelRef: { current: HTMLElement | null };
+}>('AlertDialogContent');
+
+export function Root(props: any): any {
+	const slot = S('AlertDialog.Root');
+	const { __scopeAlertDialog, ...alertDialogProps } = props ?? {};
+	const dialogScope = useDialogScope(__scopeAlertDialog, subSlot(slot, 'scope'));
+	return createElement(DialogPrimitive.Root, { ...dialogScope, ...alertDialogProps, modal: true });
+}
+
+export function Trigger(props: any): any {
+	const slot = S('AlertDialog.Trigger');
+	const { __scopeAlertDialog, ...triggerProps } = props ?? {};
+	const dialogScope = useDialogScope(__scopeAlertDialog, subSlot(slot, 'scope'));
+	return createElement(DialogPrimitive.Trigger, { ...dialogScope, ...triggerProps });
+}
+
+export function Portal(props: any): any {
+	const slot = S('AlertDialog.Portal');
+	const { __scopeAlertDialog, ...portalProps } = props ?? {};
+	const dialogScope = useDialogScope(__scopeAlertDialog, subSlot(slot, 'scope'));
+	return createElement(DialogPrimitive.Portal, { ...dialogScope, ...portalProps });
+}
+
+export function Overlay(props: any): any {
+	const slot = S('AlertDialog.Overlay');
+	const { __scopeAlertDialog, ...overlayProps } = props ?? {};
+	const dialogScope = useDialogScope(__scopeAlertDialog, subSlot(slot, 'scope'));
+	return createElement(DialogPrimitive.Overlay, { ...dialogScope, ...overlayProps });
+}
+
+export function Content(props: any): any {
+	const slot = S('AlertDialog.Content');
+	const { __scopeAlertDialog, children, ref: forwardedRef, ...contentProps } = props ?? {};
+	const dialogScope = useDialogScope(__scopeAlertDialog, subSlot(slot, 'scope'));
+	const contentRef = useRef<HTMLElement | null>(null, subSlot(slot, 'content'));
+	const composedRefs = useComposedRefs(forwardedRef, contentRef, subSlot(slot, 'refs'));
+	const cancelRef = useRef<HTMLElement | null>(null, subSlot(slot, 'cancel'));
+	return createElement(AlertDialogContentProvider, {
+		scope: __scopeAlertDialog,
+		cancelRef,
+		children: createElement(DialogPrimitive.Content, {
+			role: 'alertdialog',
+			...dialogScope,
+			...contentProps,
+			ref: composedRefs,
+			onOpenAutoFocus: composeEventHandlers(contentProps.onOpenAutoFocus, (event: Event) => {
+				event.preventDefault();
+				cancelRef.current?.focus({ preventScroll: true });
+			}),
+			onPointerDownOutside: (event: Event) => event.preventDefault(),
+			onInteractOutside: (event: Event) => event.preventDefault(),
+			children,
+		}),
+	});
+}
+
+export function Title(props: any): any {
+	const slot = S('AlertDialog.Title');
+	const { __scopeAlertDialog, ...titleProps } = props ?? {};
+	const dialogScope = useDialogScope(__scopeAlertDialog, subSlot(slot, 'scope'));
+	return createElement(DialogPrimitive.Title, { ...dialogScope, ...titleProps });
+}
+
+export function Description(props: any): any {
+	const slot = S('AlertDialog.Description');
+	const { __scopeAlertDialog, ...descriptionProps } = props ?? {};
+	const dialogScope = useDialogScope(__scopeAlertDialog, subSlot(slot, 'scope'));
+	return createElement(DialogPrimitive.Description, { ...dialogScope, ...descriptionProps });
+}
+
+/** Confirms the action — closes the dialog (a `Dialog.Close`). */
+export function Action(props: any): any {
+	const slot = S('AlertDialog.Action');
+	const { __scopeAlertDialog, ...actionProps } = props ?? {};
+	const dialogScope = useDialogScope(__scopeAlertDialog, subSlot(slot, 'scope'));
+	return createElement(DialogPrimitive.Close, { ...dialogScope, ...actionProps });
+}
+
+/** Cancels — closes the dialog and is the element autofocused on open. */
+export function Cancel(props: any): any {
+	const slot = S('AlertDialog.Cancel');
+	const { __scopeAlertDialog, ref: forwardedRef, ...cancelProps } = props ?? {};
+	const { cancelRef } = useAlertDialogContentContext('AlertDialogCancel', __scopeAlertDialog);
+	const dialogScope = useDialogScope(__scopeAlertDialog, subSlot(slot, 'scope'));
+	const ref = useComposedRefs(forwardedRef, cancelRef, subSlot(slot, 'refs'));
+	return createElement(DialogPrimitive.Close, { ...dialogScope, ...cancelProps, ref });
+}
+
+export { Root as AlertDialog };

package/src/Arrow.ts

@@ -0,0 +1,21 @@
+// Ported from @radix-ui/react-arrow (source:
+// .radix-primitives/packages/react/arrow/src/arrow.tsx). The default popper arrow: a
+// 30×10 viewBox svg polygon, stretchable via width/height.
+import { createElement } from 'octane';
+
+import { Primitive } from './Primitive';
+
+export function Arrow(props: any): any {
+	const { children, width = 10, height = 5, ...arrowProps } = props ?? {};
+	return createElement(Primitive.svg, {
+		...arrowProps,
+		width,
+		height,
+		viewBox: '0 0 30 10',
+		preserveAspectRatio: 'none',
+		// We use their children if they're slotting to replace the whole svg.
+		children: props?.asChild ? children : createElement('polygon', { points: '0,0 30,0 15,10' }),
+	});
+}
+
+export { Arrow as Root };

package/src/AspectRatio.ts

@@ -0,0 +1,34 @@
+// Ported from @radix-ui/react-aspect-ratio (source:
+// .radix-primitives/packages/react/aspect-ratio/src/aspect-ratio.tsx). Constrains content
+// to a ratio via the padding-bottom trick on a wrapper div.
+import { createElement } from 'octane';
+
+import { Primitive } from './Primitive';
+
+export function AspectRatio(props: any): any {
+	const { ratio = 1 / 1, style, ...aspectRatioProps } = props ?? {};
+	return createElement('div', {
+		style: {
+			// ensures inner element is contained
+			position: 'relative',
+			// ensures padding bottom trick maths works
+			width: '100%',
+			paddingBottom: `${100 / ratio}%`,
+		},
+		'data-radix-aspect-ratio-wrapper': '',
+		children: createElement(Primitive.div, {
+			...aspectRatioProps,
+			style: {
+				...style,
+				// ensures children expand in ratio
+				position: 'absolute',
+				top: 0,
+				right: 0,
+				bottom: 0,
+				left: 0,
+			},
+		}),
+	});
+}
+
+export { AspectRatio as Root };