@octanejs/radix 0.1.2

package/src/collection.ts

@@ -0,0 +1,97 @@
+// Ported from @radix-ui/react-collection (the "legacy" createCollection the shipped
+// primitives use — Accordion, Toolbar, RovingFocusGroup, …). A Provider owns an item map;
+// `Collection.Slot` marks the collection root element (via ref); `Collection.ItemSlot`
+// stamps `data-radix-collection-item` on its child + registers it; `useCollection`
+// returns the registered items sorted by DOM order. React's forwardRef/createSlot →
+// octane ref-as-prop + our `Slot`.
+import { createElement, useEffect, useRef } from 'octane';
+
+import { useComposedRefs } from './compose-refs';
+import { createContextScope } from './context';
+import { S, splitSlot, subSlot } from './internal';
+import { Slot } from './Slot';
+
+const ITEM_DATA_ATTR = 'data-radix-collection-item';
+
+interface CollectionContextValue {
+	collectionRef: { current: HTMLElement | null };
+	itemMap: Map<{ current: HTMLElement | null }, { ref: { current: HTMLElement | null } }>;
+}
+
+export function createCollection(name: string): [
+	{
+		Provider: (props: any) => any;
+		Slot: (props: any) => any;
+		ItemSlot: (props: any) => any;
+	},
+	(scope: any, ...slot: any[]) => () => any[],
+	any,
+] {
+	const PROVIDER_NAME = name + 'CollectionProvider';
+	const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);
+	const [CollectionProviderImpl, useCollectionContext] =
+		createCollectionContext<CollectionContextValue>(PROVIDER_NAME, {
+			collectionRef: { current: null },
+			itemMap: new Map(),
+		});
+
+	function CollectionProvider(props: any): any {
+		const slot = S(PROVIDER_NAME);
+		const { scope, children } = props;
+		const ref = useRef<HTMLElement | null>(null, subSlot(slot, 'ref'));
+		const itemMap = useRef(new Map(), subSlot(slot, 'map')).current;
+		return createElement(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+	}
+
+	function CollectionSlot(props: any): any {
+		const slot = S(name + 'CollectionSlot');
+		const { scope, children, ref: forwardedRef } = props;
+		const context = useCollectionContext(name + 'CollectionSlot', scope);
+		const composedRefs = useComposedRefs(
+			forwardedRef,
+			context.collectionRef,
+			subSlot(slot, 'refs'),
+		);
+		return createElement(Slot, { ref: composedRefs, children });
+	}
+
+	function CollectionItemSlot(props: any): any {
+		const slot = S(name + 'CollectionItemSlot');
+		const { scope, children, ref: forwardedRef, ...itemData } = props;
+		const ref = useRef<HTMLElement | null>(null, subSlot(slot, 'ref'));
+		const composedRefs = useComposedRefs(forwardedRef, ref, subSlot(slot, 'refs'));
+		const context = useCollectionContext(name + 'CollectionItemSlot', scope);
+		// No deps (React parity): re-register every render so itemData stays fresh.
+		useEffect(
+			() => {
+				context.itemMap.set(ref, { ref, ...itemData });
+				return () => void context.itemMap.delete(ref);
+			},
+			undefined,
+			subSlot(slot, 'e:reg'),
+		);
+		return createElement(Slot, { [ITEM_DATA_ATTR]: '', ref: composedRefs, children });
+	}
+
+	function useCollection(...args: any[]): () => any[] {
+		const [user, slotArg] = splitSlot(args);
+		const scope = user[0];
+		void slotArg;
+		const context = useCollectionContext(name + 'CollectionConsumer', scope);
+		return () => {
+			const collectionNode = context.collectionRef.current;
+			if (!collectionNode) return [];
+			const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
+			const items = Array.from(context.itemMap.values());
+			return items.sort(
+				(a, b) => orderedNodes.indexOf(a.ref.current!) - orderedNodes.indexOf(b.ref.current!),
+			);
+		};
+	}
+
+	return [
+		{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
+		useCollection,
+		createCollectionScope,
+	];
+}

package/src/compose-event-handlers.ts

@@ -0,0 +1,15 @@
+// Ported from @radix-ui/primitive. Chains an original (user) handler with our behavior
+// handler, skipping ours if the user called preventDefault. octane events are native, so
+// `event.defaultPrevented` is the real DOM flag.
+export function composeEventHandlers<E extends { defaultPrevented: boolean }>(
+	originalEventHandler?: (event: E) => void,
+	ourEventHandler?: (event: E) => void,
+	{ checkForDefaultPrevented = true } = {},
+): (event: E) => void {
+	return function handleEvent(event: E) {
+		originalEventHandler?.(event);
+		if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+			return ourEventHandler?.(event);
+		}
+	};
+}

package/src/compose-refs.ts

@@ -0,0 +1,53 @@
+// Ported from @radix-ui/react-compose-refs. Merges multiple refs (objects or callbacks,
+// incl. React-19 cleanup-returning callback refs) into one callback ref. octane is
+// ref-as-prop, so these compose the `ref` values a Slot/Primitive threads onto a child.
+import { useCallback } from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+
+type PossibleRef<T> = ((instance: T | null) => void | (() => void)) | { current: T | null } | null;
+
+function setRef<T>(ref: PossibleRef<T>, value: T | null): void | (() => void) {
+	if (typeof ref === 'function') {
+		return ref(value);
+	} else if (ref !== null && ref !== undefined) {
+		ref.current = value;
+	}
+}
+
+/**
+ * Compose multiple refs into a single callback ref. Honors cleanup functions returned by
+ * callback refs (React 19 semantics); falls back to calling refs with `null` on unmount.
+ */
+export function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T | null) => void | (() => void) {
+	return (node: T | null) => {
+		let hasCleanup = false;
+		const cleanups = refs.map((ref) => {
+			const cleanup = setRef(ref, node);
+			if (!hasCleanup && typeof cleanup === 'function') {
+				hasCleanup = true;
+			}
+			return cleanup;
+		});
+		if (hasCleanup) {
+			return () => {
+				for (let i = 0; i < cleanups.length; i++) {
+					const cleanup = cleanups[i];
+					if (typeof cleanup === 'function') {
+						cleanup();
+					} else {
+						setRef(refs[i], null);
+					}
+				}
+			};
+		}
+	};
+}
+
+/** Hook version — a stable composed callback ref over the given refs. */
+export function useComposedRefs<T>(...args: any[]): (node: T | null) => void | (() => void) {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useComposedRefs');
+	const refs = user as PossibleRef<T>[];
+	return useCallback(composeRefs(...refs), refs, subSlot(slot, 'cb'));
+}

package/src/context.ts

@@ -0,0 +1,109 @@
+// Ported from @radix-ui/react-context (createContextScope). Scoped context factories so a
+// primitive can be composed inside another (e.g. Accordion's internal Collapsible) without
+// its context colliding with a user's separate instance of the same primitive. React's
+// createContext → octane createContext; the `scope` indirection + scope composition are
+// preserved. The hooks are slot-threaded for octane's plain-`.ts` consumption
+// (S/splitSlot/subSlot) since these files skip the compiler's auto-slotting pass.
+import {
+	createContext as octaneCreateContext,
+	createElement,
+	useContext as octaneUseContext,
+	useMemo,
+} from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+
+type Scope<C = any> = { [scopeName: string]: (C | undefined)[] } | undefined;
+type ScopeHook = (...args: any[]) => any;
+interface CreateScope {
+	scopeName: string;
+	(): ScopeHook;
+}
+
+export function createContextScope(
+	scopeName: string,
+	createContextScopeDeps: CreateScope[] = [],
+): [
+	<T>(
+		rootComponentName: string,
+		defaultContext?: T,
+	) => [(props: any) => any, (consumerName: string, scope?: Scope, ...slot: any[]) => T],
+	CreateScope,
+] {
+	let defaultContexts: any[] = [];
+
+	function createContext<T>(
+		rootComponentName: string,
+		defaultContext?: T,
+	): [(props: any) => any, (consumerName: string, scope?: Scope, ...slot: any[]) => T] {
+		const BaseContext = octaneCreateContext(defaultContext);
+		const index = defaultContexts.length;
+		defaultContexts = [...defaultContexts, defaultContext];
+
+		function Provider(props: any): any {
+			const { scope, children, ...context } = props;
+			const Context = scope?.[scopeName]?.[index] || BaseContext;
+			const value = useMemo(() => context, Object.values(context), S(scopeName + ':P' + index));
+			return createElement(Context.Provider, { value, children });
+		}
+
+		function useContext(consumerName: string, scope?: Scope): T {
+			const Context = scope?.[scopeName]?.[index] || BaseContext;
+			const context = octaneUseContext(Context);
+			if (context) return context as T;
+			if (defaultContext !== undefined) return defaultContext;
+			throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+		}
+
+		return [Provider, useContext];
+	}
+
+	const createScope: CreateScope = (() => {
+		const scopeContexts = defaultContexts.map((defaultContext) =>
+			octaneCreateContext(defaultContext),
+		);
+		return function useScope(...args: any[]): Record<string, Scope> {
+			const [user, slotArg] = splitSlot(args);
+			const slot = slotArg ?? S(scopeName + ':useScope');
+			const scope = user[0] as Scope;
+			const contexts = scope?.[scopeName] || scopeContexts;
+			return useMemo(
+				() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
+				[scope, contexts],
+				subSlot(slot, 'm'),
+			);
+		};
+	}) as CreateScope;
+	createScope.scopeName = scopeName;
+
+	return [createContext, composeContextScopes(createScope, ...createContextScopeDeps)];
+}
+
+function composeContextScopes(...scopes: CreateScope[]): CreateScope {
+	const baseScope = scopes[0];
+	if (scopes.length === 1) return baseScope;
+
+	const createScope: CreateScope = (() => {
+		const scopeHooks = scopes.map((createScope2) => ({
+			useScope: createScope2(),
+			scopeName: createScope2.scopeName,
+		}));
+		return function useComposedScopes(...args: any[]): any {
+			const [user, slotArg] = splitSlot(args);
+			const slot = slotArg ?? S('composed:' + baseScope.scopeName);
+			const overrideScopes = user[0] as Scope;
+			const nextScopes = scopeHooks.reduce((acc: any, { useScope, scopeName }, i) => {
+				const scopeProps = useScope(overrideScopes, subSlot(slot, 's' + i));
+				const currentScope = scopeProps[`__scope${scopeName}`];
+				return { ...acc, ...currentScope };
+			}, {} as any);
+			return useMemo(
+				() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }),
+				[nextScopes],
+				subSlot(slot, 'm'),
+			);
+		};
+	}) as CreateScope;
+	createScope.scopeName = baseScope.scopeName;
+	return createScope;
+}

package/src/direction.ts

@@ -0,0 +1,19 @@
+// Ported from @radix-ui/react-direction (source:
+// .radix-primitives/packages/react/direction/src/direction.tsx). Global reading-direction
+// context with a per-call local override.
+import { createContext, createElement, useContext } from 'octane';
+
+type Direction = 'ltr' | 'rtl';
+const DirectionContext = createContext<Direction | undefined>(undefined);
+
+export function DirectionProvider(props: { dir: Direction; children?: any }): any {
+	const { dir, children } = props;
+	return createElement(DirectionContext.Provider, { value: dir, children });
+}
+
+export function useDirection(localDir?: Direction): Direction {
+	const globalDir = useContext(DirectionContext);
+	return localDir || globalDir || 'ltr';
+}
+
+export { DirectionProvider as Provider };

package/src/focus-guards.ts

@@ -0,0 +1,56 @@
+// Ported from @radix-ui/react-focus-guards. Injects a pair of focusable, visually-hidden
+// guard spans at the edges of `document.body` so that tabbing out of a focus-trapped
+// layer always has somewhere to land (Safari/VoiceOver edge cases). Ref-counted across
+// consumers; the spans carry `data-radix-focus-guard`.
+import { useEffect } from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+
+let count = 0;
+let guards: { start: HTMLElement; end: HTMLElement } | null = null;
+
+export function useFocusGuards(...args: any[]): void {
+	const [, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useFocusGuards');
+	useEffect(
+		() => {
+			if (!guards) {
+				guards = { start: createFocusGuard(), end: createFocusGuard() };
+			}
+			const { start, end } = guards;
+			if (document.body.firstElementChild !== start) {
+				document.body.insertAdjacentElement('afterbegin', start);
+			}
+			if (document.body.lastElementChild !== end) {
+				document.body.insertAdjacentElement('beforeend', end);
+			}
+			count++;
+			return () => {
+				if (count === 1) {
+					guards?.start.remove();
+					guards?.end.remove();
+					guards = null;
+				}
+				count = Math.max(0, count - 1);
+			};
+		},
+		[],
+		subSlot(slot, 'e'),
+	);
+}
+
+export function FocusGuards(props: any): any {
+	useFocusGuards(S('FocusGuards'));
+	return props.children;
+}
+
+function createFocusGuard(): HTMLElement {
+	const element = document.createElement('span');
+	element.setAttribute('data-radix-focus-guard', '');
+	element.tabIndex = 0;
+	element.style.outline = 'none';
+	element.style.opacity = '0';
+	element.style.position = 'fixed';
+	element.style.pointerEvents = 'none';
+	return element;
+}

package/src/index.ts

@@ -0,0 +1,54 @@
+// @octanejs/radix — a port of Radix UI Primitives (@radix-ui/react) on the octane
+// renderer. Mirrors the unified `radix-ui` package's shape: low-level composition
+// utilities are exported directly, and each component is a namespace (`Separator.Root`).
+//
+// Phase 0 (foundation) + first proof components. See docs/radix-migration-plan.md.
+
+// Composition foundation.
+export { Slot, Slottable } from './Slot';
+export { Primitive } from './Primitive';
+export { composeRefs, useComposedRefs } from './compose-refs';
+export { composeEventHandlers } from './compose-event-handlers';
+export { createContextScope } from './context';
+export { useControllableState } from './useControllableState';
+export { Presence } from './Presence';
+
+// Components (namespaced, e.g. `<Separator.Root/>`, `<Accordion.Root/>`).
+export * as Separator from './Separator';
+export * as Label from './Label';
+export * as Collapsible from './Collapsible';
+export * as Accordion from './Accordion';
+export * as Portal from './Portal';
+export * as Dialog from './Dialog';
+export * as AlertDialog from './AlertDialog';
+export * as Toggle from './Toggle';
+export * as ToggleGroup from './ToggleGroup';
+export * as Tabs from './Tabs';
+export * as RovingFocus from './RovingFocusGroup';
+export * as AspectRatio from './AspectRatio';
+export * as VisuallyHidden from './VisuallyHidden';
+export * as Avatar from './Avatar';
+export * as Progress from './Progress';
+export * as Toolbar from './Toolbar';
+export * as Arrow from './Arrow';
+export * as Popper from './Popper';
+export * as Tooltip from './Tooltip';
+export * as Popover from './Popover';
+export * as HoverCard from './HoverCard';
+export * as Menu from './Menu';
+export * as DropdownMenu from './DropdownMenu';
+export * as ContextMenu from './ContextMenu';
+export * as ScrollArea from './ScrollArea';
+export * as Checkbox from './Checkbox';
+export * as Switch from './Switch';
+export * as RadioGroup from './RadioGroup';
+export * as Slider from './Slider';
+export * as Form from './Form';
+export * as Menubar from './Menubar';
+export * as Select from './Select';
+export * as NavigationMenu from './NavigationMenu';
+export * as Toast from './Toast';
+export * as OneTimePasswordField from './OneTimePasswordField';
+export * as PasswordToggleField from './PasswordToggleField';
+export * as AccessibleIcon from './AccessibleIcon';
+export * as Direction from './direction';

package/src/internal.ts

@@ -0,0 +1,42 @@
+// Slot mechanics for @octanejs/radix's plain-`.ts` hooks. octane's compiler injects a
+// per-call-site Symbol slot as the trailing arg of every hook call in a compiled
+// `.tsx`/`.tsrx`. These hook files are published source (consumed from node_modules,
+// where the auto-slotting pass is skipped), so each hook receives the caller's slot as
+// its trailing argument and derives a distinct sub-slot for every base hook it composes.
+// (Same pattern as @octanejs/floating-ui and the other bindings.)
+
+// Derive a stable, distinct sub-slot from a wrapper's slot, namespaced per hook.
+// Memoized: subSlot runs on EVERY hook call every render, and the naive form
+// pays a string concat + global symbol-registry lookup each time. The cache is
+// keyed by the slot symbol itself; the minted value is byte-identical to the
+// uncached Symbol.for result, so identity is preserved across HMR re-evals and
+// the per-package copies of this helper. Key universe is bounded: slots are
+// per-call-site module constants (never minted per render).
+const subSlotCache = new Map<symbol, Map<string, symbol>>();
+export function subSlot(slot: symbol | undefined, tag: string): symbol | undefined {
+	if (slot === undefined) return undefined;
+	let byTag = subSlotCache.get(slot);
+	if (byTag === undefined) subSlotCache.set(slot, (byTag = new Map()));
+	let sym = byTag.get(tag);
+	if (sym === undefined) byTag.set(tag, (sym = Symbol.for((slot.description ?? '') + ':' + tag)));
+	return sym;
+}
+
+// Split the compiler-injected trailing slot off a hook's args. Needed because the public
+// hooks take optional args, so the slot can't be located positionally.
+export function splitSlot(args: any[]): [any[], symbol | undefined] {
+	const tail = args[args.length - 1];
+	const slot = typeof tail === 'symbol' ? (tail as symbol) : undefined;
+	return [slot !== undefined ? args.slice(0, -1) : args, slot];
+}
+
+// A stable per-call-site slot for the binding's plain-`.ts` COMPONENTS (written with
+// createElement, not compiled, so they get no auto-injected slots). A component runs in
+// its OWN per-instance scope (componentSlot), so a globally stable Symbol.for(tag)
+// resolves to a distinct slot per instance.
+const sCache = new Map<string, symbol>();
+export function S(tag: string): symbol {
+	let sym = sCache.get(tag);
+	if (sym === undefined) sCache.set(tag, (sym = Symbol.for('@octanejs/radix:' + tag)));
+	return sym;
+}

package/src/scroll-lock.ts

@@ -0,0 +1,57 @@
+// Body scroll lock for modal overlays — the octane replacement for the `react-remove-scroll`
+// component Radix's Dialog wraps its overlay in (that library is React-coupled: a component
+// + use-sidecar machinery). This util reproduces the observable core — `overflow: hidden`
+// on <body> with scrollbar-width padding compensation, ref-counted across overlapping
+// locks — as a hook the overlay calls.
+//
+// DIVERGENCE (documented): react-remove-scroll additionally intercepts wheel/touchmove
+// events to allow scrolling inside `shards` while the body is locked, and supports
+// pinch-zoom allowances. Those event-level behaviors are not replicated yet; scrollable
+// dialog CONTENT still works because the content element itself scrolls (overflow on the
+// content), which is the common Radix usage.
+import { useEffect } from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+
+let lockCount = 0;
+let originalOverflow = '';
+let originalPaddingRight = '';
+
+function lockBody(): void {
+	if (lockCount === 0) {
+		const body = document.body;
+		originalOverflow = body.style.overflow;
+		originalPaddingRight = body.style.paddingRight;
+		const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+		if (scrollbarWidth > 0) {
+			const computedPadding = parseInt(getComputedStyle(body).paddingRight, 10) || 0;
+			body.style.paddingRight = `${computedPadding + scrollbarWidth}px`;
+		}
+		body.style.overflow = 'hidden';
+	}
+	lockCount++;
+}
+
+function unlockBody(): void {
+	lockCount = Math.max(0, lockCount - 1);
+	if (lockCount === 0) {
+		document.body.style.overflow = originalOverflow;
+		document.body.style.paddingRight = originalPaddingRight;
+	}
+}
+
+/** Lock body scroll while `enabled` (ref-counted across simultaneous consumers). */
+export function useScrollLock(...args: any[]): void {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useScrollLock');
+	const enabled = (user[0] as boolean | undefined) ?? true;
+	useEffect(
+		() => {
+			if (!enabled) return;
+			lockBody();
+			return unlockBody;
+		},
+		[enabled],
+		subSlot(slot, 'e'),
+	);
+}

package/src/use-callback-ref.ts

@@ -0,0 +1,28 @@
+// Ported from @radix-ui/react-use-callback-ref (source:
+// .radix-primitives/packages/react/use-callback-ref/src/use-callback-ref.tsx).
+// Converts a callback to a stable function reading the latest value — avoids
+// re-renders when passed as a prop and re-executing effects when a dependency.
+import { useEffect, useMemo, useRef } from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+
+export function useCallbackRef<T extends (...args: any[]) => any>(...args: any[]): T {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useCallbackRef');
+	const callback = user[0] as T | undefined;
+	const callbackRef = useRef(callback, subSlot(slot, 'ref'));
+
+	useEffect(
+		() => {
+			callbackRef.current = callback;
+		},
+		undefined,
+		subSlot(slot, 'e'),
+	);
+
+	return useMemo(
+		() => ((...fnArgs: any[]) => callbackRef.current?.(...fnArgs)) as T,
+		[],
+		subSlot(slot, 'm'),
+	);
+}

package/src/use-effect-event.ts

@@ -0,0 +1,36 @@
+// Ported from @radix-ui/react-use-effect-event (source:
+// .radix-primitives/packages/react/use-effect-event/src/use-effect-event.tsx). A stable
+// function whose body always reads the latest render's callback — the
+// `experimental_useEffectEvent` approximation. The ref updates in an insertion effect
+// (before any layout/passive effect can call it), and calling during render throws.
+import { useInsertionEffect, useMemo, useRef } from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+
+type AnyFunction = (...args: any[]) => any;
+
+export function useEffectEvent<T extends AnyFunction>(...args: any[]): T {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useEffectEvent');
+	const callback = user[0] as T | undefined;
+
+	const ref = useRef<AnyFunction | undefined>(
+		() => {
+			throw new Error('Cannot call an event handler while rendering.');
+		},
+		subSlot(slot, 'ref'),
+	);
+	useInsertionEffect(
+		() => {
+			ref.current = callback;
+		},
+		undefined,
+		subSlot(slot, 'e'),
+	);
+
+	return useMemo(
+		() => ((...fnArgs: any[]) => ref.current?.(...fnArgs)) as T,
+		[],
+		subSlot(slot, 'm'),
+	);
+}

package/src/use-is-hydrated.ts

@@ -0,0 +1,23 @@
+// Ported from @radix-ui/react-use-is-hydrated (source:
+// .radix-primitives/packages/react/use-is-hydrated/src/use-is-hydrated.tsx). Whether
+// the component tree has hydrated: `useSyncExternalStore` returns the server snapshot
+// (false) during SSR/hydration and the client snapshot (true) after. octane exposes
+// useSyncExternalStore directly, so the source's legacy fallback isn't needed.
+import { useSyncExternalStore } from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+
+function subscribe(): () => void {
+	return () => {};
+}
+
+export function useIsHydrated(...args: any[]): boolean {
+	const [, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useIsHydrated');
+	return useSyncExternalStore(
+		subscribe,
+		() => true,
+		() => false,
+		subSlot(slot, 's'),
+	);
+}

package/src/use-previous.ts

@@ -0,0 +1,28 @@
+// Ported from @radix-ui/react-use-previous (source:
+// .radix-primitives/packages/react/use-previous/src/use-previous.tsx). Returns the
+// value from the previous render in which `value` differed from the current one.
+import { useMemo, useRef } from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+
+export function usePrevious<T>(...args: any[]): T {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('usePrevious');
+	const value = user[0] as T;
+	const ref = useRef({ value, previous: value }, subSlot(slot, 'ref'));
+
+	// We compare values before making an update to ensure that
+	// a change has been made. This ensures the previous value is
+	// persisted correctly between renders.
+	return useMemo(
+		() => {
+			if (ref.current.value !== value) {
+				ref.current.previous = ref.current.value;
+				ref.current.value = value;
+			}
+			return ref.current.previous;
+		},
+		[value],
+		subSlot(slot, 'm'),
+	);
+}