@octanejs/radix 0.1.2

package/src/Slot.ts

@@ -0,0 +1,105 @@
+// Ported from @radix-ui/react-slot (the MODERN version). `Slot` merges its own props onto
+// a single element child and renders that child in place — the engine behind `asChild`.
+// React's `forwardRef` + `Children`/`cloneElement` map onto octane's ref-as-prop + the
+// runtime's `Children`/`cloneElement`/`isValidElement`.
+//
+// CRITICAL (learned the hard way, mirroring Radix's own history): the composed ref MUST be
+// memoized (`useComposedRefs`), not built fresh per render — a fresh identity makes the
+// renderer detach(null)+re-attach the child's ref every render, and refs that are state
+// setters (DismissableLayer/FocusScope/Presence `setNode`) then re-render → fresh ref →
+// an infinite loop. Radix's legacy inline `composeRefs` slot had this exact churn.
+//
+// IMPORTANT (octane): these operate on element DESCRIPTORS. In `.tsrx`, prop-position JSX
+// (`el={<button/>}`), `createElement`, and `.map()` returns are descriptors, but
+// children-position JSX compiles to a render function — so `asChild` consumers pass the
+// child element through a prop / value position (see docs/radix-migration-plan.md).
+import { Children, cloneElement, isValidElement, normalizeClass } from 'octane';
+
+import { useComposedRefs } from './compose-refs';
+import { S, subSlot } from './internal';
+
+/** A marker whose child element `Slot` projects while keeping its sibling children. */
+export function Slottable(props: { children?: any }): any {
+	return props.children;
+}
+
+function isSlottable(child: any): boolean {
+	return isValidElement(child) && child.type === Slottable;
+}
+
+// slotProps (the behavior) merged UNDER childProps (the user's element wins), except:
+// event handlers chain (child first, then behavior), `style` merges (child wins per-key),
+// and `class`/`className` compose clsx-style via octane's normalizeClass.
+function mergeProps(slotProps: any, childProps: any): any {
+	const overrideProps: any = { ...childProps };
+	for (const propName in childProps) {
+		const slotPropValue = slotProps[propName];
+		const childPropValue = childProps[propName];
+		const isHandler = /^on[A-Z]/.test(propName);
+		if (isHandler) {
+			if (slotPropValue && childPropValue) {
+				overrideProps[propName] = (...args: any[]) => {
+					const result = childPropValue(...args);
+					slotPropValue(...args);
+					return result;
+				};
+			} else if (slotPropValue) {
+				overrideProps[propName] = slotPropValue;
+			}
+		} else if (propName === 'style') {
+			overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+		} else if (propName === 'className' || propName === 'class') {
+			overrideProps[propName] = normalizeClass([slotPropValue, childPropValue]);
+		}
+	}
+	return { ...slotProps, ...overrideProps };
+}
+
+export function Slot(props: any): any {
+	const slot = S('Slot');
+	const { children, ...slotProps } = props ?? {};
+
+	// Resolve the element to project onto. With a `<Slottable>` marker among the children,
+	// its child is the projection target and the siblings become the new children.
+	const childrenArray = Children.toArray(children);
+	const slottable = childrenArray.find(isSlottable);
+	let targetChild: any = children;
+	// octane convention: children are often passed as an ARRAY prop (that's how a .tsrx
+	// caller provides enumerable children — see Dialog.Portal). React's Children.only
+	// rejects arrays outright; here a single-element array unwraps to its element.
+	if (!slottable && Array.isArray(children) && childrenArray.length === 1) {
+		targetChild = childrenArray[0];
+	}
+	let newChildren: any = null;
+	let hasSlottable = false;
+	if (slottable) {
+		hasSlottable = true;
+		const newElement = (slottable as any).props.children;
+		newChildren = Children.map(children, (child: any) => {
+			if (child === slottable) {
+				if (Children.count(newElement) > 1) return Children.only(null as any);
+				return isValidElement(newElement) ? (newElement as any).props.children : null;
+			}
+			return child;
+		});
+		targetChild = isValidElement(newElement)
+			? cloneElement(newElement as any, undefined, newChildren)
+			: null;
+	}
+
+	const childIsElement = isValidElement(targetChild);
+	const childRef = childIsElement ? (targetChild as any).props?.ref : undefined;
+	const slotRef = slotProps.ref;
+	// MEMOIZED composed ref — see the header note. (octane allows conditional hooks, but
+	// this one runs unconditionally anyway.)
+	const composedRef = useComposedRefs(slotRef, childRef, subSlot(slot, 'refs'));
+
+	if (childIsElement) {
+		const merged = mergeProps(slotProps, (targetChild as any).props ?? {});
+		merged.ref = slotRef !== undefined ? composedRef : childRef;
+		if (hasSlottable) merged.children = newChildren;
+		return cloneElement(targetChild as any, merged);
+	}
+	// 0 children → nothing; >1 → Children.only throws (like Radix).
+	return Children.count(targetChild) > 1 ? Children.only(targetChild) : null;
+}

package/src/Switch.ts

@@ -0,0 +1,278 @@
+// Ported from @radix-ui/react-switch (source:
+// .radix-primitives/packages/react/switch/src/switch.tsx). A `role=switch` button with
+// a Thumb; inside a form it renders the hidden native-checkbox "bubble input" (same
+// machinery as Checkbox — uncontrolled input, imperative `checked` setter + dispatched
+// events). Same octane adaptations as Checkbox.ts: `isPropagationStopped()` →
+// `event.cancelBubble`; `defaultChecked` → the native `checked` attribute; a native
+// `change` dispatched alongside the source's `click`.
+import { createElement, useEffect, useRef, useState } from 'octane';
+
+import { composeEventHandlers } from './compose-event-handlers';
+import { useComposedRefs } from './compose-refs';
+import { createContextScope } from './context';
+import { S, subSlot } from './internal';
+import { Primitive } from './Primitive';
+import { usePrevious } from './use-previous';
+import { useSize } from './use-size';
+import { useControllableState } from './useControllableState';
+
+const SWITCH_NAME = 'Switch';
+
+const [createSwitchContext, createSwitchScope] = createContextScope(SWITCH_NAME);
+export { createSwitchScope };
+
+interface SwitchContextValue {
+	checked: boolean;
+	setChecked: (checked: boolean | ((prev: boolean) => boolean)) => void;
+	disabled: boolean | undefined;
+	control: HTMLElement | null;
+	setControl: (control: HTMLElement | null) => void;
+	name: string | undefined;
+	form: string | undefined;
+	value: string | number;
+	hasConsumerStoppedPropagationRef: { current: boolean };
+	required: boolean | undefined;
+	defaultChecked: boolean | undefined;
+	isFormControl: boolean;
+	bubbleInput: HTMLInputElement | null;
+	setBubbleInput: (input: HTMLInputElement | null) => void;
+}
+
+const [SwitchProviderImpl, useSwitchContext] = createSwitchContext<SwitchContextValue>(SWITCH_NAME);
+
+export function Provider(props: any): any {
+	const slot = S('Switch.Provider');
+	const {
+		__scopeSwitch,
+		checked: checkedProp,
+		children,
+		defaultChecked,
+		disabled,
+		form,
+		name,
+		onCheckedChange,
+		required,
+		value = 'on',
+		internal_do_not_use_render,
+	} = props ?? {};
+
+	const [checked, setChecked] = useControllableState<boolean>(
+		{ prop: checkedProp, defaultProp: defaultChecked ?? false, onChange: onCheckedChange },
+		subSlot(slot, 'checked'),
+	);
+	const [control, setControl] = useState<HTMLElement | null>(null, subSlot(slot, 'control'));
+	const [bubbleInput, setBubbleInput] = useState<HTMLInputElement | null>(
+		null,
+		subSlot(slot, 'input'),
+	);
+	const hasConsumerStoppedPropagationRef = useRef(false, subSlot(slot, 'stopped'));
+	const isFormControl = control
+		? !!form || !!control.closest('form')
+		: // We set this to true by default so that events bubble to forms without JS (SSR)
+			true;
+
+	const context: SwitchContextValue = {
+		checked,
+		setChecked,
+		disabled,
+		control,
+		setControl,
+		name,
+		form,
+		value,
+		hasConsumerStoppedPropagationRef,
+		required,
+		defaultChecked,
+		isFormControl,
+		bubbleInput,
+		setBubbleInput,
+	};
+
+	return createElement(SwitchProviderImpl, {
+		scope: __scopeSwitch,
+		...context,
+		children: isFunction(internal_do_not_use_render)
+			? internal_do_not_use_render(context)
+			: children,
+	});
+}
+
+export function Trigger(props: any): any {
+	const slot = S('Switch.Trigger');
+	const { __scopeSwitch, onClick, ref: forwardedRef, ...switchProps } = props ?? {};
+	const {
+		value,
+		disabled,
+		checked,
+		required,
+		setControl,
+		setChecked,
+		hasConsumerStoppedPropagationRef,
+		isFormControl,
+		bubbleInput,
+	} = useSwitchContext('SwitchTrigger', __scopeSwitch);
+	const composedRefs = useComposedRefs(forwardedRef, setControl, subSlot(slot, 'refs'));
+
+	return createElement(Primitive.button, {
+		type: 'button',
+		role: 'switch',
+		'aria-checked': checked,
+		'aria-required': required,
+		'data-state': getState(checked),
+		'data-disabled': disabled ? '' : undefined,
+		disabled,
+		value,
+		...switchProps,
+		ref: composedRefs,
+		onClick: composeEventHandlers(onClick, (event: MouseEvent) => {
+			setChecked((prevChecked) => !prevChecked);
+			if (bubbleInput && isFormControl) {
+				hasConsumerStoppedPropagationRef.current = event.cancelBubble;
+				// if switch has a bubble input and is a form control, stop
+				// propagation from the button so that we only propagate one click
+				// event (from the input). We propagate changes from an input so
+				// that native form validation works and form events reflect switch
+				// updates.
+				if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+			}
+		}),
+	});
+}
+
+export function Root(props: any): any {
+	const {
+		__scopeSwitch,
+		name,
+		checked,
+		defaultChecked,
+		required,
+		disabled,
+		value,
+		onCheckedChange,
+		form,
+		ref: forwardedRef,
+		...switchProps
+	} = props ?? {};
+
+	return createElement(Provider, {
+		__scopeSwitch,
+		checked,
+		defaultChecked,
+		disabled,
+		required,
+		onCheckedChange,
+		name,
+		form,
+		value,
+		internal_do_not_use_render: ({ isFormControl }: SwitchContextValue) => [
+			createElement(Trigger, {
+				key: 'trigger',
+				...switchProps,
+				ref: forwardedRef,
+				__scopeSwitch,
+			}),
+			isFormControl ? createElement(BubbleInput, { key: 'bubble', __scopeSwitch }) : null,
+		],
+	});
+}
+
+export function Thumb(props: any): any {
+	const { __scopeSwitch, ...thumbProps } = props ?? {};
+	const context = useSwitchContext('SwitchThumb', __scopeSwitch);
+	return createElement(Primitive.span, {
+		'data-state': getState(context.checked),
+		'data-disabled': context.disabled ? '' : undefined,
+		...thumbProps,
+	});
+}
+
+export function BubbleInput(props: any): any {
+	const slot = S('Switch.BubbleInput');
+	const { __scopeSwitch, ref: forwardedRef, ...inputProps } = props ?? {};
+	const {
+		control,
+		hasConsumerStoppedPropagationRef,
+		checked,
+		defaultChecked,
+		required,
+		disabled,
+		name,
+		value,
+		form,
+		bubbleInput,
+		setBubbleInput,
+	} = useSwitchContext('SwitchBubbleInput', __scopeSwitch);
+
+	const composedRefs = useComposedRefs(forwardedRef, setBubbleInput, subSlot(slot, 'refs'));
+	const prevChecked = usePrevious(checked, subSlot(slot, 'prev'));
+	const controlSize = useSize(control, subSlot(slot, 'size'));
+
+	// Bubble checked change to parents (e.g form change event)
+	useEffect(
+		() => {
+			const input = bubbleInput;
+			if (!input) return;
+
+			const inputProto = window.HTMLInputElement.prototype;
+			const descriptor = Object.getOwnPropertyDescriptor(
+				inputProto,
+				'checked',
+			) as PropertyDescriptor;
+			const setChecked = descriptor.set;
+
+			const bubbles = !hasConsumerStoppedPropagationRef.current;
+			if (prevChecked !== checked && setChecked) {
+				setChecked.call(input, checked);
+				input.dispatchEvent(new Event('click', { bubbles }));
+				// octane adaptation: also fire the native `change` (see Checkbox.ts header).
+				input.dispatchEvent(new Event('change', { bubbles }));
+			}
+		},
+		[bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef],
+		subSlot(slot, 'e:bubble'),
+	);
+
+	const defaultCheckedRef = useRef(checked, subSlot(slot, 'default'));
+	return createElement(Primitive.input, {
+		type: 'checkbox',
+		'aria-hidden': true,
+		// octane: native `checked` attribute = default-checked state (see Checkbox.ts).
+		checked: (defaultChecked ?? defaultCheckedRef.current) || undefined,
+		required,
+		disabled,
+		name,
+		value,
+		form,
+		...inputProps,
+		tabIndex: -1,
+		ref: composedRefs,
+		style: {
+			...props?.style,
+			...controlSize,
+			position: 'absolute',
+			pointerEvents: 'none',
+			opacity: 0,
+			margin: 0,
+			// We transform because the input is absolutely positioned but we have
+			// rendered it **after** the button. This pulls it back to sit on top
+			// of the button.
+			transform: 'translateX(-100%)',
+		},
+	});
+}
+
+function isFunction(value: unknown): value is (...args: any[]) => any {
+	return typeof value === 'function';
+}
+
+function getState(checked: boolean): string {
+	return checked ? 'checked' : 'unchecked';
+}
+
+export {
+	Root as Switch,
+	Provider as SwitchProvider,
+	Trigger as SwitchTrigger,
+	Thumb as SwitchThumb,
+	BubbleInput as SwitchBubbleInput,
+};

package/src/Tabs.ts

@@ -0,0 +1,177 @@
+// Ported from @radix-ui/react-tabs. A set of layered content panels: List is a
+// RovingFocusGroup of Triggers (`role=tab`, automatic-or-manual activation), Content
+// panels mount through `Presence` (`role=tabpanel`), and trigger/content ids derive from
+// one `baseId` so `aria-controls`/`aria-labelledby` wire up.
+import { createElement, useEffect, useRef } from 'octane';
+
+import { composeEventHandlers } from './compose-event-handlers';
+import { createContextScope } from './context';
+import { S, subSlot } from './internal';
+import { Presence } from './Presence';
+import { Primitive } from './Primitive';
+import * as RovingFocusGroup from './RovingFocusGroup';
+import { createRovingFocusGroupScope } from './RovingFocusGroup';
+import { useControllableState } from './useControllableState';
+import { useId } from './useId';
+
+const [createTabsContext, createTabsScope] = createContextScope('Tabs', [
+	createRovingFocusGroupScope,
+]);
+export { createTabsScope };
+const useRovingFocusGroupScope = createRovingFocusGroupScope();
+
+interface TabsContextValue {
+	baseId: string;
+	value?: string;
+	onValueChange: (value: string) => void;
+	orientation?: 'horizontal' | 'vertical';
+	dir?: 'ltr' | 'rtl';
+	activationMode?: 'automatic' | 'manual';
+}
+const [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>('Tabs');
+
+export function Root(props: any): any {
+	const slot = S('Tabs.Root');
+	const {
+		__scopeTabs,
+		value: valueProp,
+		onValueChange,
+		defaultValue,
+		orientation = 'horizontal',
+		dir,
+		activationMode = 'automatic',
+		...tabsProps
+	} = props ?? {};
+	const direction = dir === 'rtl' ? 'rtl' : 'ltr';
+	const [value, setValue] = useControllableState<string>(
+		{ prop: valueProp, onChange: onValueChange, defaultProp: defaultValue ?? '' },
+		subSlot(slot, 'value'),
+	);
+	return createElement(TabsProvider, {
+		scope: __scopeTabs,
+		baseId: useId(subSlot(slot, 'id')),
+		value,
+		onValueChange: setValue,
+		orientation,
+		dir: direction,
+		activationMode,
+		children: createElement(Primitive.div, {
+			dir: direction,
+			'data-orientation': orientation,
+			...tabsProps,
+		}),
+	});
+}
+
+export function List(props: any): any {
+	const slot = S('Tabs.List');
+	const { __scopeTabs, loop = true, ...listProps } = props ?? {};
+	const context = useTabsContext('TabsList', __scopeTabs);
+	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs, subSlot(slot, 'rfs'));
+	return createElement(RovingFocusGroup.Root, {
+		asChild: true,
+		...rovingFocusGroupScope,
+		orientation: context.orientation,
+		dir: context.dir,
+		loop,
+		children: createElement(Primitive.div, {
+			role: 'tablist',
+			'aria-orientation': context.orientation,
+			...listProps,
+		}),
+	});
+}
+
+export function Trigger(props: any): any {
+	const slot = S('Tabs.Trigger');
+	const { __scopeTabs, value, disabled = false, ...triggerProps } = props ?? {};
+	const context = useTabsContext('TabsTrigger', __scopeTabs);
+	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs, subSlot(slot, 'rfs'));
+	const triggerId = makeTriggerId(context.baseId, value);
+	const contentId = makeContentId(context.baseId, value);
+	const isSelected = value === context.value;
+	return createElement(RovingFocusGroup.Item, {
+		asChild: true,
+		...rovingFocusGroupScope,
+		focusable: !disabled,
+		active: isSelected,
+		children: createElement(Primitive.button, {
+			type: 'button',
+			role: 'tab',
+			'aria-selected': isSelected,
+			'aria-controls': contentId,
+			'data-state': isSelected ? 'active' : 'inactive',
+			'data-disabled': disabled ? '' : undefined,
+			disabled,
+			id: triggerId,
+			...triggerProps,
+			onMouseDown: composeEventHandlers(props?.onMouseDown, (event: MouseEvent) => {
+				// Only activate on left-click without ctrl (right-click / ctrl-click are
+				// context-menu gestures).
+				if (!disabled && event.button === 0 && event.ctrlKey === false) {
+					context.onValueChange(value);
+				} else {
+					event.preventDefault();
+				}
+			}),
+			onKeyDown: composeEventHandlers(props?.onKeyDown, (event: KeyboardEvent) => {
+				if ([' ', 'Enter'].includes(event.key)) context.onValueChange(value);
+			}),
+			onFocus: composeEventHandlers(props?.onFocus, () => {
+				// Automatic activation: focusing a tab (e.g. via arrow keys) selects it.
+				const isAutomaticActivation = context.activationMode !== 'manual';
+				if (!isSelected && !disabled && isAutomaticActivation) {
+					context.onValueChange(value);
+				}
+			}),
+		}),
+	});
+}
+
+export function Content(props: any): any {
+	const slot = S('Tabs.Content');
+	const { __scopeTabs, value, forceMount, children, ...contentProps } = props ?? {};
+	const context = useTabsContext('TabsContent', __scopeTabs);
+	const triggerId = makeTriggerId(context.baseId, value);
+	const contentId = makeContentId(context.baseId, value);
+	const isSelected = value === context.value;
+	const isMountAnimationPreventedRef = useRef(isSelected, subSlot(slot, 'prevent'));
+
+	useEffect(
+		() => {
+			const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));
+			return () => cancelAnimationFrame(rAF);
+		},
+		[],
+		subSlot(slot, 'e:mount'),
+	);
+
+	return createElement(Presence, {
+		present: forceMount || isSelected,
+		children: ({ present }: { present: boolean }) =>
+			createElement(Primitive.div, {
+				'data-state': isSelected ? 'active' : 'inactive',
+				'data-orientation': context.orientation,
+				role: 'tabpanel',
+				'aria-labelledby': triggerId,
+				hidden: !present,
+				id: contentId,
+				tabIndex: 0,
+				...contentProps,
+				style: {
+					...props.style,
+					animationDuration: isMountAnimationPreventedRef.current ? '0s' : undefined,
+				},
+				children: present ? children : null,
+			}),
+	});
+}
+
+function makeTriggerId(baseId: string, value: string): string {
+	return `${baseId}-trigger-${value}`;
+}
+function makeContentId(baseId: string, value: string): string {
+	return `${baseId}-content-${value}`;
+}
+
+export { Root as Tabs };