@octanejs/radix 0.1.2

package/src/use-size.ts

@@ -0,0 +1,57 @@
+// Ported from @radix-ui/react-use-size (source:
+// .radix-primitives/packages/react/use-size/src/use-size.tsx). Tracks an element's
+// border-box size via ResizeObserver (guarded for environments without it, e.g. jsdom —
+// there the initial offset measurement is still reported).
+import { useLayoutEffect, useState } from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+
+export function useSize(...args: any[]): { width: number; height: number } | undefined {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useSize');
+	const element = user[0] as HTMLElement | null;
+	const [size, setSize] = useState<{ width: number; height: number } | undefined>(
+		undefined,
+		subSlot(slot, 'size'),
+	);
+
+	useLayoutEffect(
+		() => {
+			if (element) {
+				// Provide size as early as possible.
+				setSize({ width: element.offsetWidth, height: element.offsetHeight });
+				if (typeof ResizeObserver === 'undefined') return;
+				const resizeObserver = new ResizeObserver((entries) => {
+					if (!Array.isArray(entries) || !entries.length) return;
+					const entry = entries[0]!;
+					let width: number;
+					let height: number;
+					if ('borderBoxSize' in entry) {
+						const borderSizeEntry = (entry as any)['borderBoxSize'];
+						// Iron out differences between browsers.
+						const borderSize = Array.isArray(borderSizeEntry)
+							? borderSizeEntry[0]
+							: borderSizeEntry;
+						width = borderSize['inlineSize'];
+						height = borderSize['blockSize'];
+					} else {
+						// For browsers that don't support `borderBoxSize` we calculate it
+						// ourselves to get the correct border box.
+						width = element.offsetWidth;
+						height = element.offsetHeight;
+					}
+					setSize({ width, height });
+				});
+				resizeObserver.observe(element, { box: 'border-box' });
+				return () => resizeObserver.unobserve(element);
+			} else {
+				// Only reset to `undefined` when the element becomes `null`, not if it
+				// changes to another element.
+				setSize(undefined);
+			}
+		},
+		[element],
+		subSlot(slot, 'e'),
+	);
+	return size;
+}

package/src/useControllableState.ts

@@ -0,0 +1,78 @@
+// Ported from @radix-ui/react-use-controllable-state (source:
+// .radix-primitives/packages/react/use-controllable-state/src/use-controllable-state.tsx).
+// A value that is either CONTROLLED (a `prop` is passed) or UNCONTROLLED (internal state
+// seeded by `defaultProp`), always calling `onChange` on updates. This is a STATE-layer
+// concept, so octane's no-controlled-DOM-inputs divergence doesn't apply. The dev-only
+// controlled↔uncontrolled switch warning is intentionally not ported (repo policy:
+// octane's warning surface differs; port the functional outcome only).
+import { useCallback, useEffect, useInsertionEffect, useRef, useState } from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+
+type SetStateFn<T> = (next: T | ((prev: T) => T)) => void;
+
+export function useControllableState<T>(...args: any[]): [T, SetStateFn<T>] {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useControllableState');
+	const { prop, defaultProp, onChange } = (user[0] as any) ?? {};
+
+	const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState<T>(
+		defaultProp,
+		onChange,
+		slot,
+	);
+	const isControlled = prop !== undefined;
+	const value = (isControlled ? prop : uncontrolledProp) as T;
+
+	const setValue = useCallback(
+		((nextValue: any) => {
+			if (isControlled) {
+				const resolved = isFunction(nextValue) ? nextValue(prop) : nextValue;
+				if (resolved !== prop) onChangeRef.current?.(resolved);
+			} else {
+				setUncontrolledProp(nextValue);
+			}
+		}) as SetStateFn<T>,
+		[isControlled, prop, setUncontrolledProp],
+		subSlot(slot, 'setValue'),
+	);
+
+	return [value, setValue];
+}
+
+// The uncontrolled half: plain state whose changes fire the LATEST onChange (synced pre-
+// layout via useInsertionEffect, matching the source) from a post-commit effect.
+function useUncontrolledState<T>(
+	defaultProp: T,
+	onChange: ((v: T) => void) | undefined,
+	slot: symbol | undefined,
+): [T, SetStateFn<T>, { current: ((v: T) => void) | undefined }] {
+	const [value, setValue] = useState<T>(defaultProp, subSlot(slot, 'state'));
+	const prevValueRef = useRef(value, subSlot(slot, 'prev'));
+
+	const onChangeRef = useRef(onChange, subSlot(slot, 'onChangeRef'));
+	useInsertionEffect(
+		() => {
+			onChangeRef.current = onChange;
+		},
+		[onChange],
+		subSlot(slot, 'onChangeEffect'),
+	);
+
+	useEffect(
+		() => {
+			if (prevValueRef.current !== value) {
+				onChangeRef.current?.(value);
+				prevValueRef.current = value;
+			}
+		},
+		[value],
+		subSlot(slot, 'changeEffect'),
+	);
+
+	return [value, setValue, onChangeRef];
+}
+
+function isFunction(value: unknown): value is (...args: any[]) => any {
+	return typeof value === 'function';
+}

package/src/useId.ts

@@ -0,0 +1,15 @@
+// Ported from @radix-ui/react-id. Radix ids are `radix-` + the framework's useId (so they
+// read as Radix-owned in the DOM and never collide with app ids); a caller-supplied
+// `deterministicId` wins. React's mount-guard dance (useState + layout-effect fallback for
+// pre-18 React) collapses away — octane's `useId` is always available and SSR-stable.
+import { useId as octaneUseId } from 'octane';
+
+import { S, splitSlot } from './internal';
+
+export function useId(...args: any[]): string {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useId');
+	const deterministicId = user[0] as string | undefined;
+	const id = octaneUseId(slot);
+	return deterministicId || `radix-${id}`;
+}