@octanejs/base-ui 0.1.1

package/src/switch.ts

@@ -0,0 +1,374 @@
+// Ported from .base-ui/packages/react/src/switch/ (v1.6.0): root/SwitchRoot,
+// root/SwitchRootContext, stateAttributesMapping, thumb/SwitchThumb — plus its `index.parts`
+// (the `Switch` namespace).
+//
+// A switch renders a `<span role="switch">` plus a hidden `<input type="checkbox">`. octane
+// adaptations: (1) events are NATIVE — the handlers read the event directly (Base UI's
+// `event.nativeEvent`); (2) octane inputs are UNCONTROLLED (a `checked` prop would write a
+// `checked` ATTRIBUTE, which React's controlled input never does), so we DON'T pass `checked`
+// to the input and instead drive `input.checked` imperatively through the native property
+// setter in a layout effect — matching React's property-only controlled behavior. Field/Form
+// integration is inert when standalone (default contexts).
+import { createContext, createElement, useContext, useLayoutEffect, useMemo, useRef } from 'octane';
+
+import { S, subSlot } from './internal';
+import { useRenderElement, type RenderProp } from './utils/useRenderElement';
+import type { StateAttributesMapping } from './utils/getStateAttributesProps';
+import { mergeProps } from './utils/mergeProps';
+import { useBaseUiId } from './utils/useBaseUiId';
+import { useButton } from './utils/useButton';
+import { useControlled } from './utils/useControlled';
+import { useComposedRefs } from './utils/composeRefs';
+import { visuallyHidden, visuallyHiddenInput } from './utils/visuallyHidden';
+import { ownerWindow } from './utils/owner';
+import { createChangeEventDetails, REASONS } from './utils/createChangeEventDetails';
+import { fieldValidityMapping, type FieldRootState } from './utils/field/constants';
+import { useFieldRootContext } from './utils/field/FieldRootContext';
+import { useFormContext } from './utils/field/FormContext';
+import { useLabelableContext } from './utils/field/LabelableContext';
+import { useRegisterFieldControl } from './utils/field/useRegisterFieldControl';
+import { useAriaLabelledBy } from './utils/field/useAriaLabelledBy';
+import { useLabelableId } from './utils/field/useLabelableId';
+import { useValueChanged } from './utils/useValueChanged';
+
+export interface SwitchRootState extends FieldRootState {
+	checked: boolean;
+	readOnly: boolean;
+	required: boolean;
+}
+
+const stateAttributesMapping: StateAttributesMapping<SwitchRootState> = {
+	...(fieldValidityMapping as StateAttributesMapping<any>),
+	checked(value: boolean): Record<string, string> {
+		if (value) {
+			return { 'data-checked': '' };
+		}
+		return { 'data-unchecked': '' };
+	},
+};
+
+// --- Context -----------------------------------------------------------------
+
+const SwitchRootContext = createContext<SwitchRootState | undefined>(undefined);
+
+function useSwitchRootContext(): SwitchRootState {
+	const context = useContext(SwitchRootContext);
+	if (context === undefined) {
+		throw new Error(
+			'Base UI: SwitchRootContext is missing. Switch parts must be placed within <Switch.Root>.',
+		);
+	}
+	return context;
+}
+
+// --- Root --------------------------------------------------------------------
+
+export interface SwitchRootProps {
+	checked?: boolean;
+	defaultChecked?: boolean;
+	disabled?: boolean;
+	readOnly?: boolean;
+	required?: boolean;
+	name?: string;
+	form?: string;
+	id?: string;
+	inputRef?: any;
+	nativeButton?: boolean;
+	value?: string;
+	uncheckedValue?: string;
+	onCheckedChange?: (checked: boolean, eventDetails: any) => void;
+	'aria-labelledby'?: string;
+	render?: RenderProp<SwitchRootState>;
+	className?: string | ((state: SwitchRootState) => string | undefined);
+	style?: Record<string, any> | ((state: SwitchRootState) => Record<string, any> | undefined);
+	ref?: any;
+	[key: string]: any;
+}
+
+function SwitchRoot(props: SwitchRootProps): any {
+	const slot = S('SwitchRoot');
+	const {
+		checked: checkedProp,
+		className,
+		defaultChecked,
+		'aria-labelledby': ariaLabelledByProp,
+		form,
+		id: idProp,
+		inputRef: externalInputRef,
+		name: nameProp,
+		nativeButton = false,
+		onCheckedChange,
+		readOnly = false,
+		required = false,
+		disabled: disabledProp = false,
+		render,
+		uncheckedValue,
+		value,
+		style,
+		ref,
+		...elementProps
+	} = props;
+
+	const { clearErrors } = useFormContext();
+	const {
+		state: fieldState,
+		setTouched,
+		setDirty,
+		validityData,
+		setFilled,
+		setFocused,
+		validationMode,
+		disabled: fieldDisabled,
+		name: fieldName,
+		validation,
+	} = useFieldRootContext();
+	const { labelId } = useLabelableContext();
+
+	const disabled = fieldDisabled || disabledProp;
+	const name = fieldName ?? nameProp;
+
+	const inputRef = useRef<HTMLInputElement | null>(null, subSlot(slot, 'inputRef'));
+	const handleInputRef = useComposedRefs(
+		inputRef,
+		externalInputRef,
+		validation.inputRef,
+		subSlot(slot, 'handleInputRef'),
+	);
+
+	const switchRef = useRef<HTMLButtonElement | null>(null, subSlot(slot, 'switchRef'));
+
+	const id = useBaseUiId(undefined, subSlot(slot, 'id'));
+
+	const controlId = useLabelableId(
+		{ id: idProp, implicit: false, controlRef: switchRef },
+		subSlot(slot, 'controlId'),
+	);
+	const hiddenInputId = nativeButton ? undefined : controlId;
+
+	const [checked, setCheckedState] = useControlled<boolean>(
+		{
+			controlled: checkedProp,
+			default: Boolean(defaultChecked),
+			name: 'Switch',
+			state: 'checked',
+		},
+		subSlot(slot, 'checked'),
+	);
+
+	// octane: React's controlled `<input checked>` reflects the INITIAL checked to the
+	// `checked` ATTRIBUTE (its default-state), then updates only the property. Capture that
+	// initial value so the attribute matches; the property is driven by the sync effect below.
+	const initialCheckedRef = useRef(checked, subSlot(slot, 'initialChecked'));
+
+	useRegisterFieldControl(
+		switchRef,
+		id,
+		checked,
+		undefined,
+		!disabled,
+		nameProp,
+		subSlot(slot, 'register'),
+	);
+
+	useLayoutEffect(
+		() => {
+			if (inputRef.current) {
+				setFilled(inputRef.current.checked);
+			}
+		},
+		[inputRef, setFilled],
+		subSlot(slot, 'e:filled'),
+	);
+
+	// octane uncontrolled-input adaptation: drive the hidden input's `checked` PROPERTY (never
+	// the attribute) through the native setter, so the DOM matches React's controlled input.
+	useLayoutEffect(
+		() => {
+			const input = inputRef.current;
+			if (!input) {
+				return;
+			}
+			const setNativeChecked = Object.getOwnPropertyDescriptor(
+				ownerWindow(input).HTMLInputElement.prototype,
+				'checked',
+			)?.set;
+			setNativeChecked?.call(input, checked);
+		},
+		[checked],
+		subSlot(slot, 'e:syncChecked'),
+	);
+
+	useValueChanged(
+		checked,
+		() => {
+			clearErrors(name);
+			setDirty(checked !== validityData.initialValue);
+			setFilled(checked);
+			validation.change(checked);
+		},
+		subSlot(slot, 'valueChanged'),
+	);
+
+	const { getButtonProps, buttonRef } = useButton(
+		{ disabled, native: nativeButton },
+		subSlot(slot, 'button'),
+	);
+	const ariaLabelledBy = useAriaLabelledBy(
+		ariaLabelledByProp,
+		labelId,
+		inputRef,
+		!nativeButton,
+		hiddenInputId,
+		subSlot(slot, 'ariaLabelledBy'),
+	);
+
+	const rootProps: Record<string, any> = {
+		id: nativeButton ? controlId : id,
+		role: 'switch',
+		'aria-checked': checked,
+		'aria-readonly': readOnly || undefined,
+		'aria-required': required || undefined,
+		'aria-labelledby': ariaLabelledBy,
+		onFocus() {
+			if (!disabled) {
+				setFocused(true);
+			}
+		},
+		onBlur() {
+			const element = inputRef.current;
+			if (!element || disabled) {
+				return;
+			}
+			setTouched(true);
+			setFocused(false);
+			if (validationMode === 'onBlur') {
+				validation.commit(element.checked);
+			}
+		},
+		onClick(event: any) {
+			if (readOnly || disabled) {
+				return;
+			}
+			event.preventDefault();
+			const input = inputRef.current;
+			if (!input) {
+				return;
+			}
+			input.dispatchEvent(
+				new (ownerWindow(input).PointerEvent)('click', {
+					bubbles: true,
+					shiftKey: event.shiftKey,
+					ctrlKey: event.ctrlKey,
+					altKey: event.altKey,
+					metaKey: event.metaKey,
+				}),
+			);
+		},
+	};
+
+	const inputProps: Record<string, any> = mergeProps(
+		{
+			// octane: the INITIAL checked state is the `checked` ATTRIBUTE (React's
+			// default-state); the live value is driven via the property in the sync effect.
+			checked: initialCheckedRef.current || undefined,
+			disabled,
+			form,
+			id: hiddenInputId,
+			name,
+			required,
+			style: name ? visuallyHiddenInput : visuallyHidden,
+			tabIndex: -1,
+			type: 'checkbox',
+			'aria-hidden': true,
+			ref: handleInputRef,
+			onChange(event: any) {
+				// octane: the handler receives the native event directly.
+				if (event.defaultPrevented) {
+					return;
+				}
+				if (readOnly) {
+					event.preventDefault();
+					return;
+				}
+				const nextChecked = event.currentTarget.checked;
+				const eventDetails = createChangeEventDetails(REASONS.none, event);
+				onCheckedChange?.(nextChecked, eventDetails);
+				if (eventDetails.isCanceled) {
+					return;
+				}
+				setCheckedState(nextChecked);
+			},
+			onFocus() {
+				switchRef.current?.focus();
+			},
+		},
+		(p: any) => validation.getValidationProps(disabled, p),
+		value !== undefined ? { value } : {},
+	);
+
+	const state: SwitchRootState = useMemo(
+		() => ({
+			...fieldState,
+			checked,
+			disabled,
+			readOnly,
+			required,
+		}),
+		[fieldState, checked, disabled, readOnly, required],
+		subSlot(slot, 'state'),
+	);
+
+	const element = useRenderElement(
+		'span',
+		{ render, className, style },
+		{
+			state,
+			ref: [ref, switchRef, buttonRef],
+			props: [
+				rootProps,
+				elementProps,
+				getButtonProps,
+				(p: any) => validation.getValidationProps(disabled, p),
+			],
+			stateAttributesMapping,
+		},
+		subSlot(slot, 're'),
+	);
+
+	const hiddenValueInput =
+		!checked && name && uncheckedValue !== undefined
+			? createElement('input', {
+					type: 'hidden',
+					form,
+					name,
+					value: uncheckedValue,
+					disabled,
+				})
+			: null;
+
+	return createElement(SwitchRootContext.Provider, {
+		value: state,
+		children: [element, hiddenValueInput, createElement('input', inputProps)],
+	});
+}
+
+// --- Thumb -------------------------------------------------------------------
+
+function SwitchThumb(props: any): any {
+	const slot = S('SwitchThumb');
+	const { render, className, style, ref, ...elementProps } = props;
+	const state = useSwitchRootContext();
+	return useRenderElement(
+		'span',
+		{ render, className, style },
+		{ state, ref, props: elementProps, stateAttributesMapping },
+		subSlot(slot, 're'),
+	);
+}
+
+// --- Namespace (mirrors `export * as Switch`) --------------------------------
+
+export const Switch = {
+	Root: SwitchRoot,
+	Thumb: SwitchThumb,
+};

package/src/toggle-group.ts

@@ -0,0 +1,136 @@
+// Ported from .base-ui/packages/react/src/toggle-group/ToggleGroup.tsx (v1.6.0). Provides a
+// shared value to a set of <Toggle>s and manages roving focus via CompositeRoot. Standalone
+// (no Toolbar) it renders `<CompositeRoot>` as a `role="group"` div; the Toolbar path (which
+// renders the plain `element`) lands with Toolbar in a later phase.
+//
+// octane: forwardRef → ref-as-prop.
+import { createElement, useMemo } from 'octane';
+
+import { S, subSlot } from './internal';
+import { useRenderElement, type RenderProp } from './utils/useRenderElement';
+import type { StateAttributesMapping } from './utils/getStateAttributesProps';
+import { useControlled } from './utils/useControlled';
+import { useStableCallback } from './utils/useStableCallback';
+import { CompositeRoot } from './utils/composite/CompositeRoot';
+import { ToggleGroupContext, type ToggleGroupContextValue } from './utils/ToggleGroupContext';
+
+const EMPTY_ARRAY: never[] = [];
+
+export interface ToggleGroupState {
+	disabled: boolean;
+	multiple: boolean;
+	orientation: 'horizontal' | 'vertical';
+}
+
+const stateAttributesMapping: StateAttributesMapping<ToggleGroupState> = {
+	multiple(value: boolean): Record<string, string> | null {
+		if (value) {
+			return { 'data-multiple': '' };
+		}
+		return null;
+	},
+};
+
+export interface ToggleGroupProps<Value extends string = string> {
+	value?: readonly Value[];
+	defaultValue?: readonly Value[];
+	disabled?: boolean;
+	loopFocus?: boolean;
+	onValueChange?: (groupValue: Value[], eventDetails: any) => void;
+	orientation?: 'horizontal' | 'vertical';
+	multiple?: boolean;
+	render?: RenderProp<ToggleGroupState>;
+	className?: string | ((state: ToggleGroupState) => string | undefined);
+	style?: Record<string, any> | ((state: ToggleGroupState) => Record<string, any> | undefined);
+	ref?: any;
+	[key: string]: any;
+}
+
+function ToggleGroup<Value extends string = string>(props: ToggleGroupProps<Value>): any {
+	const slot = S('ToggleGroup');
+	const {
+		defaultValue: defaultValueProp,
+		disabled: disabledProp = false,
+		loopFocus = true,
+		onValueChange,
+		orientation = 'horizontal',
+		multiple = false,
+		value: valueProp,
+		className,
+		render,
+		style,
+		ref,
+		...elementProps
+	} = props;
+
+	// Toolbar contexts (Phase-later) are always absent standalone.
+	const isValueInitialized = useMemo(
+		() => valueProp !== undefined || defaultValueProp !== undefined,
+		[valueProp, defaultValueProp],
+		subSlot(slot, 'init'),
+	);
+
+	const disabled = disabledProp;
+
+	const [groupValue, setValueState] = useControlled<readonly Value[]>(
+		{
+			controlled: valueProp,
+			default: valueProp === undefined ? (defaultValueProp ?? EMPTY_ARRAY) : undefined,
+			name: 'ToggleGroup',
+			state: 'value',
+		},
+		subSlot(slot, 'value'),
+	);
+
+	const setGroupValue = useStableCallback(
+		(newValue: Value, nextPressed: boolean, eventDetails: any) => {
+			let newGroupValue: Value[];
+			if (multiple) {
+				newGroupValue = groupValue.slice();
+				if (nextPressed) {
+					newGroupValue.push(newValue);
+				} else {
+					newGroupValue.splice(groupValue.indexOf(newValue), 1);
+				}
+			} else {
+				newGroupValue = nextPressed ? [newValue] : [];
+			}
+			onValueChange?.(newGroupValue, eventDetails);
+			if (eventDetails.isCanceled) {
+				return;
+			}
+			setValueState(newGroupValue);
+		},
+		subSlot(slot, 'setGroup'),
+	);
+
+	const state: ToggleGroupState = { disabled, multiple, orientation };
+
+	const contextValue: ToggleGroupContextValue<Value> = useMemo(
+		() => ({ disabled, orientation, setGroupValue, value: groupValue, isValueInitialized }),
+		[disabled, orientation, setGroupValue, groupValue, isValueInitialized],
+		subSlot(slot, 'ctx'),
+	);
+
+	const defaultProps = { role: 'group' };
+
+	const compositeRoot = createElement(CompositeRoot, {
+		render,
+		className,
+		style,
+		state,
+		refs: [ref],
+		props: [defaultProps, elementProps],
+		stateAttributesMapping,
+		loopFocus,
+		enableHomeAndEndKeys: true,
+		orientation,
+	});
+
+	return createElement(ToggleGroupContext.Provider, {
+		value: contextValue,
+		children: compositeRoot,
+	});
+}
+
+export { ToggleGroup };

package/src/toggle.ts

@@ -0,0 +1,145 @@
+// Ported from .base-ui/packages/react/src/toggle/Toggle.tsx (v1.6.0). A two-state button
+// (`aria-pressed`). Standalone it is uncontrolled/controlled via `pressed`/`defaultPressed`;
+// inside a <ToggleGroup> it derives pressed from the group value and renders through
+// CompositeItem (that group path lands with ToggleGroup — here the standalone path is
+// complete and the group branch is wired to the shared context).
+//
+// octane adaptations: forwardRef → ref-as-prop; the click handler receives the NATIVE
+// event directly (Base UI reads `event.nativeEvent` off the synthetic wrapper — octane has
+// none, so we pass the native event straight into the change-details); the dev
+// group-value warning is dropped.
+import { createElement, useMemo } from 'octane';
+
+import { S, subSlot } from './internal';
+import { useRenderElement, type RenderProp } from './utils/useRenderElement';
+import { useBaseUiId } from './utils/useBaseUiId';
+import { useButton } from './utils/useButton';
+import { useControlled } from './utils/useControlled';
+import { useToggleGroupContext } from './utils/ToggleGroupContext';
+import { createChangeEventDetails, REASONS } from './utils/createChangeEventDetails';
+import { CompositeItem } from './utils/composite/CompositeItem';
+
+export interface ToggleState {
+	pressed: boolean;
+	disabled: boolean;
+}
+
+export interface ToggleProps {
+	pressed?: boolean;
+	defaultPressed?: boolean;
+	disabled?: boolean;
+	onPressedChange?: (pressed: boolean, eventDetails: any) => void;
+	value?: string;
+	nativeButton?: boolean;
+	render?: RenderProp<ToggleState>;
+	className?: string | ((state: ToggleState) => string | undefined);
+	style?: Record<string, any> | ((state: ToggleState) => Record<string, any> | undefined);
+	ref?: any;
+	[key: string]: any;
+}
+
+function Toggle(props: ToggleProps): any {
+	const slot = S('Toggle');
+	const {
+		className,
+		defaultPressed: defaultPressedProp = false,
+		disabled: disabledProp = false,
+		form, // never participates in form validation
+		onPressedChange,
+		pressed: pressedProp,
+		render,
+		type, // cannot change button type
+		value: valueProp,
+		nativeButton = true,
+		style,
+		...elementProps
+	} = props;
+
+	// `|| undefined` handles a falsy value (e.g. "").
+	const value = useBaseUiId(valueProp || undefined, subSlot(slot, 'value'));
+	const groupContext = useToggleGroupContext();
+	const groupValue = groupContext?.value ?? [];
+
+	const defaultPressed = groupContext ? undefined : defaultPressedProp;
+	const disabled = (disabledProp || groupContext?.disabled) ?? false;
+
+	const [pressed, setPressedState] = useControlled<boolean>(
+		{
+			controlled: groupContext
+				? value !== undefined && groupValue.indexOf(value) > -1
+				: pressedProp,
+			default: defaultPressed,
+			name: 'Toggle',
+			state: 'pressed',
+		},
+		subSlot(slot, 'pressed'),
+	);
+
+	const { getButtonProps, buttonRef } = useButton(
+		{ disabled, native: nativeButton },
+		subSlot(slot, 'btn'),
+	);
+
+	const state: ToggleState = { disabled, pressed };
+
+	const refs = [buttonRef, props.ref];
+	const buttonProps = [
+		{
+			'aria-pressed': pressed,
+			onClick(event: any) {
+				const nextPressed = !pressed;
+				// octane: the click handler receives the native event directly.
+				const details = createChangeEventDetails(REASONS.none, event);
+
+				// `onPressedChange` runs before the group commits so canceling here can also
+				// veto the group value change (they share this `details` object).
+				onPressedChange?.(nextPressed, details);
+				if (details.isCanceled) {
+					return;
+				}
+				if (value) {
+					groupContext?.setGroupValue?.(value, nextPressed, details);
+				}
+				if (details.isCanceled) {
+					return;
+				}
+				setPressedState(nextPressed);
+			},
+		},
+		elementProps,
+		getButtonProps,
+	];
+
+	const element = useRenderElement(
+		'button',
+		{ render, className, style },
+		{ enabled: !groupContext, state, ref: refs, props: buttonProps },
+		subSlot(slot, 're'),
+	);
+
+	// A disabled toggle is natively disabled and cannot hold roving focus. Toolbar reads this
+	// to compute `disabledIndices` (consumed by the group/CompositeItem path).
+	const itemMetadata = useMemo(
+		() => ({ disabled, focusableWhenDisabled: false }),
+		[disabled],
+		subSlot(slot, 'meta'),
+	);
+
+	if (groupContext) {
+		// Group path: render through CompositeItem for roving focus.
+		return createElement(CompositeItem, {
+			tag: 'button',
+			render,
+			className,
+			style,
+			metadata: itemMetadata,
+			state,
+			refs,
+			props: buttonProps,
+		});
+	}
+
+	return element;
+}
+
+export { Toggle };

package/src/use-render.ts

@@ -0,0 +1,40 @@
+// Public entry — mirrors @base-ui/react/use-render
+// (.base-ui/packages/react/src/use-render/useRender.ts). Build a custom element with
+// Base UI's render-prop + state→data-* + prop-merge semantics.
+//
+// SLOT: plain-`.ts` hook; forwards the caller's slot to useRenderElement.
+import { splitSlot, S, subSlot } from './internal';
+import {
+	useRenderElement,
+	type RenderProp,
+	type UseRenderElementParameters,
+} from './utils/useRenderElement';
+import type { StateAttributesMapping } from './utils/getStateAttributesProps';
+
+export interface UseRenderParameters<State extends Record<string, unknown>> {
+	render?: RenderProp<State>;
+	ref?: any;
+	state?: State;
+	stateAttributesMapping?: StateAttributesMapping<State>;
+	props?: Record<string, unknown>;
+	enabled?: boolean;
+	defaultTagName?: string;
+}
+
+export function useRender<State extends Record<string, unknown>>(...args: any[]): any {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useRender');
+	const params = user[0] as UseRenderParameters<State>;
+	return useRenderElement(
+		params.defaultTagName ?? 'div',
+		params as any,
+		params as UseRenderElementParameters<State>,
+		subSlot(slot, 're'),
+	);
+}
+
+export namespace useRender {
+	export type Parameters<State extends Record<string, unknown>> = UseRenderParameters<State>;
+	export type RenderProp<State = Record<string, unknown>> =
+		import('./utils/useRenderElement').RenderProp<State>;
+}