@octanejs/base-ui 0.1.1

package/src/progress.ts

@@ -0,0 +1,260 @@
+// Ported from .base-ui/packages/react/src/progress/ (v1.6.0): root/ProgressRoot,
+// root/ProgressRootContext, root/stateAttributesMapping, track/ProgressTrack,
+// indicator/ProgressIndicator, value/ProgressValue, label/ProgressLabel — plus its
+// `index.parts` (the `Progress` namespace).
+//
+// A progress bar. `Progress.Root` (`role="progressbar"`) owns the value/status and aria;
+// the `status` state ('indeterminate' | 'progressing' | 'complete') is exposed on every
+// part as `data-progressing`/`data-complete`/`data-indeterminate`. Base UI uses a PLAIN
+// React context — ported as a plain octane createContext.
+import { createContext, createElement, useContext, useMemo, useState } from 'octane';
+
+import { S, subSlot } from './internal';
+import { useRenderElement, type RenderProp } from './utils/useRenderElement';
+import type { StateAttributesMapping } from './utils/getStateAttributesProps';
+import { useRegisteredLabelId } from './utils/useRegisteredLabelId';
+import { useValueAsRef } from './utils/useValueAsRef';
+import { valueToPercent } from './utils/valueToPercent';
+import { formatNumberValue } from './utils/formatNumber';
+import { visuallyHidden } from './utils/visuallyHidden';
+
+export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete';
+
+export interface ProgressRootState {
+	status: ProgressStatus;
+}
+
+// Custom state→data-* mapping: `status` maps to a presence attribute per value, not the
+// default `data-status="<value>"`.
+const progressStateAttributesMapping: StateAttributesMapping<ProgressRootState> = {
+	status(value: ProgressStatus): Record<string, string> | null {
+		if (value === 'progressing') {
+			return { 'data-progressing': '' };
+		}
+		if (value === 'complete') {
+			return { 'data-complete': '' };
+		}
+		if (value === 'indeterminate') {
+			return { 'data-indeterminate': '' };
+		}
+		return null;
+	},
+};
+
+// --- Context -----------------------------------------------------------------
+
+export interface ProgressRootContextValue {
+	formattedValue: string;
+	max: number;
+	min: number;
+	value: number | null;
+	setLabelId: (id: string | undefined) => void;
+	state: ProgressRootState;
+	status: ProgressStatus;
+}
+
+const ProgressRootContext = createContext<ProgressRootContextValue | undefined>(undefined);
+
+function useProgressRootContext(): ProgressRootContextValue {
+	const context = useContext(ProgressRootContext);
+	if (context === undefined) {
+		throw new Error(
+			'Base UI: ProgressRootContext is missing. Progress parts must be placed within <Progress.Root>.',
+		);
+	}
+	return context;
+}
+
+function getDefaultAriaValueText(formattedValue: string | null, value: number | null): string {
+	if (value == null) {
+		return 'indeterminate progress';
+	}
+	return formattedValue || `${value}%`;
+}
+
+// --- Root --------------------------------------------------------------------
+
+export interface ProgressRootProps {
+	'aria-valuetext'?: string;
+	format?: Intl.NumberFormatOptions;
+	getAriaValueText?: (formattedValue: string | null, value: number | null) => string;
+	locale?: Intl.LocalesArgument;
+	max?: number;
+	min?: number;
+	value: number | null;
+	render?: RenderProp<ProgressRootState>;
+	className?: string | ((state: ProgressRootState) => string | undefined);
+	style?: Record<string, any> | ((state: ProgressRootState) => Record<string, any> | undefined);
+	ref?: any;
+	[key: string]: any;
+}
+
+function ProgressRoot(props: ProgressRootProps): any {
+	const slot = S('ProgressRoot');
+	const {
+		format,
+		getAriaValueText = getDefaultAriaValueText,
+		locale,
+		max = 100,
+		min = 0,
+		value,
+		render,
+		className,
+		children,
+		style,
+		ref,
+		...elementProps
+	} = props;
+
+	const [labelId, setLabelId] = useState<string | undefined>(undefined, subSlot(slot, 'labelId'));
+
+	const formatOptionsRef = useValueAsRef<Intl.NumberFormatOptions | undefined>(
+		format,
+		subSlot(slot, 'fmt'),
+	);
+
+	let status: ProgressStatus = 'indeterminate';
+	if (Number.isFinite(value)) {
+		status = value === max ? 'complete' : 'progressing';
+	}
+
+	const formattedValue = formatNumberValue(value, locale, formatOptionsRef.current);
+
+	const state: ProgressRootState = useMemo(() => ({ status }), [status], subSlot(slot, 'state'));
+
+	const defaultProps = {
+		'aria-labelledby': labelId,
+		'aria-valuemax': max,
+		'aria-valuemin': min,
+		'aria-valuenow': value ?? undefined,
+		'aria-valuetext': getAriaValueText(formattedValue, value),
+		role: 'progressbar',
+		children: [
+			children,
+			createElement('span', { role: 'presentation', style: visuallyHidden, children: 'x' }),
+		],
+	};
+
+	const contextValue: ProgressRootContextValue = useMemo(
+		() => ({ formattedValue, max, min, setLabelId, state, status, value }),
+		[formattedValue, max, min, setLabelId, state, status, value],
+		subSlot(slot, 'ctx'),
+	);
+
+	const element = useRenderElement(
+		'div',
+		{ render, className, style },
+		{
+			state,
+			ref,
+			props: [defaultProps, elementProps],
+			stateAttributesMapping: progressStateAttributesMapping,
+		},
+		subSlot(slot, 're'),
+	);
+
+	return createElement(ProgressRootContext.Provider, { value: contextValue, children: element });
+}
+
+// --- Track -------------------------------------------------------------------
+
+function ProgressTrack(props: any): any {
+	const slot = S('ProgressTrack');
+	const { render, className, style, ref, ...elementProps } = props;
+	const { state } = useProgressRootContext();
+	return useRenderElement(
+		'div',
+		{ render, className, style },
+		{ state, ref, props: elementProps, stateAttributesMapping: progressStateAttributesMapping },
+		subSlot(slot, 're'),
+	);
+}
+
+// --- Indicator ---------------------------------------------------------------
+
+function ProgressIndicator(props: any): any {
+	const slot = S('ProgressIndicator');
+	const { render, className, style, ref, ...elementProps } = props;
+	const { max, min, value, state } = useProgressRootContext();
+
+	const percentageValue =
+		Number.isFinite(value) && value !== null ? valueToPercent(value, min, max) : null;
+	const indicatorStyle =
+		percentageValue == null
+			? {}
+			: { insetInlineStart: 0, height: 'inherit', width: `${percentageValue}%` };
+
+	return useRenderElement(
+		'div',
+		{ render, className, style },
+		{
+			state,
+			ref,
+			props: [{ style: indicatorStyle }, elementProps],
+			stateAttributesMapping: progressStateAttributesMapping,
+		},
+		subSlot(slot, 're'),
+	);
+}
+
+// --- Value -------------------------------------------------------------------
+
+function ProgressValue(props: any): any {
+	const slot = S('ProgressValue');
+	const { className, render, children, style, ref, ...elementProps } = props;
+	const { value, formattedValue, state } = useProgressRootContext();
+
+	const formattedValueArg = value == null ? 'indeterminate' : formattedValue;
+	const formattedValueDisplay = value == null ? null : formattedValue;
+
+	return useRenderElement(
+		'span',
+		{ render, className, style },
+		{
+			state,
+			ref,
+			props: [
+				{
+					'aria-hidden': true,
+					children:
+						typeof children === 'function'
+							? children(formattedValueArg, value)
+							: formattedValueDisplay,
+				},
+				elementProps,
+			],
+			stateAttributesMapping: progressStateAttributesMapping,
+		},
+		subSlot(slot, 're'),
+	);
+}
+
+// --- Label -------------------------------------------------------------------
+
+function ProgressLabel(props: any): any {
+	const slot = S('ProgressLabel');
+	const { render, className, style, id: idProp, ref, ...elementProps } = props;
+	const { setLabelId, state } = useProgressRootContext();
+	const id = useRegisteredLabelId(idProp, setLabelId, subSlot(slot, 'labelId'));
+	return useRenderElement(
+		'span',
+		{ render, className, style },
+		{
+			state,
+			ref,
+			props: [{ id, role: 'presentation' }, elementProps],
+			stateAttributesMapping: progressStateAttributesMapping,
+		},
+		subSlot(slot, 're'),
+	);
+}
+
+// --- Namespace (mirrors `export * as Progress`) ------------------------------
+
+export const Progress = {
+	Root: ProgressRoot,
+	Track: ProgressTrack,
+	Indicator: ProgressIndicator,
+	Value: ProgressValue,
+	Label: ProgressLabel,
+};

package/src/radio-group.ts

@@ -0,0 +1,285 @@
+// Ported from .base-ui/packages/react/src/radio-group/RadioGroup.tsx (v1.6.0). Provides a
+// shared value + roving focus (via CompositeRoot) to a series of <Radio.Root>s, rendering a
+// `<div role="radiogroup">`. octane: forwardRef → ref-as-prop; native events.
+import { createElement, useMemo, useRef, useState } from 'octane';
+
+import { S, subSlot } from './internal';
+import { CompositeRoot } from './utils/composite/CompositeRoot';
+import { SHIFT } from './utils/composite/keys';
+import { contains } from './utils/contains';
+import { useBaseUiId } from './utils/useBaseUiId';
+import { useControlled } from './utils/useControlled';
+import { useStableCallback } from './utils/useStableCallback';
+import { useValueChanged } from './utils/useValueChanged';
+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 { RadioGroupContext, type RadioGroupContextValue } from './utils/RadioGroupContext';
+import { useFieldsetRootContext } from './fieldset';
+
+const MODIFIER_KEYS = [SHIFT];
+
+export interface RadioGroupState extends FieldRootState {
+	readOnly: boolean;
+	required: boolean;
+}
+
+export interface RadioGroupProps<Value = any> {
+	disabled?: boolean;
+	readOnly?: boolean;
+	required?: boolean;
+	value?: Value;
+	defaultValue?: Value;
+	onValueChange?: (value: Value, eventDetails: any) => void;
+	form?: string;
+	name?: string;
+	inputRef?: any;
+	id?: string;
+	render?: any;
+	className?: any;
+	style?: any;
+	ref?: any;
+	[key: string]: any;
+}
+
+function RadioGroup<Value = any>(props: RadioGroupProps<Value>): any {
+	const slot = S('RadioGroup');
+	const {
+		render,
+		className,
+		disabled: disabledProp,
+		readOnly,
+		required,
+		onValueChange: onValueChangeProp,
+		value: externalValue,
+		defaultValue,
+		form,
+		name: nameProp,
+		inputRef: inputRefProp,
+		id: idProp,
+		style,
+		ref,
+		...elementProps
+	} = props;
+
+	const {
+		setTouched: setFieldTouched,
+		setFocused,
+		validationMode,
+		name: fieldName,
+		disabled: fieldDisabled,
+		state: fieldState,
+		validation,
+		setDirty,
+		setFilled,
+		validityData,
+	} = useFieldRootContext();
+	const { labelId } = useLabelableContext();
+	const { clearErrors } = useFormContext();
+	const fieldsetContext = useFieldsetRootContext(true);
+
+	const disabled = fieldDisabled || disabledProp;
+	const name = fieldName ?? nameProp;
+	const id = useBaseUiId(idProp, subSlot(slot, 'id'));
+
+	const [checkedValue, setCheckedValueUnwrapped] = useControlled<Value>(
+		{ controlled: externalValue, default: defaultValue, name: 'RadioGroup', state: 'value' },
+		subSlot(slot, 'value'),
+	);
+	const [touched, setTouched] = useState(false, subSlot(slot, 'touched'));
+
+	const setCheckedValue = useStableCallback(
+		(value: Value, eventDetails: any) => {
+			onValueChangeProp?.(value, eventDetails);
+			if (eventDetails.isCanceled) {
+				return;
+			}
+			setCheckedValueUnwrapped(value);
+		},
+		subSlot(slot, 'setValue'),
+	);
+
+	const controlRef = useRef<HTMLElement | null>(null, subSlot(slot, 'controlRef'));
+	const groupInputRef = useRef<HTMLInputElement | null>(null, subSlot(slot, 'groupInput'));
+	const firstEnabledInputRef = useRef<HTMLInputElement | null>(null, subSlot(slot, 'firstInput'));
+
+	function setInputRef(hiddenInput: HTMLInputElement | null): void | (() => void) {
+		let cleanup: void | (() => void) | undefined;
+		if (inputRefProp) {
+			if (typeof inputRefProp === 'function') {
+				cleanup = inputRefProp(hiddenInput);
+			} else {
+				inputRefProp.current = hiddenInput;
+			}
+		}
+		groupInputRef.current = hiddenInput;
+		validation.inputRef.current = hiddenInput;
+		return cleanup;
+	}
+
+	const registerControlRef = useStableCallback(
+		(element: HTMLElement | null, isDisabled = false) => {
+			if (!element) {
+				return;
+			}
+			if (isDisabled) {
+				if (controlRef.current === element) {
+					controlRef.current = null;
+				}
+				return;
+			}
+			if (controlRef.current == null) {
+				controlRef.current = element;
+			}
+		},
+		subSlot(slot, 'registerControl'),
+	);
+
+	const registerInputRef = useStableCallback(
+		(input: HTMLInputElement | null) => {
+			if (!input || input.disabled) {
+				return undefined;
+			}
+			if (!firstEnabledInputRef.current) {
+				firstEnabledInputRef.current = input;
+			}
+			const currentInput = groupInputRef.current;
+			if (input.checked || currentInput == null || currentInput.disabled) {
+				return setInputRef(input);
+			}
+			return undefined;
+		},
+		subSlot(slot, 'registerInput'),
+	);
+
+	const getFormValue = useStableCallback(
+		() => {
+			const input = groupInputRef.current;
+			if (!input || input.disabled || !input.checked) {
+				return null;
+			}
+			return checkedValue ?? null;
+		},
+		subSlot(slot, 'getFormValue'),
+	);
+
+	useRegisterFieldControl(
+		controlRef,
+		id,
+		checkedValue ?? null,
+		getFormValue,
+		!disabled,
+		nameProp,
+		subSlot(slot, 'register'),
+	);
+
+	useValueChanged(
+		checkedValue,
+		() => {
+			clearErrors(name);
+			setDirty(checkedValue !== validityData.initialValue);
+			setFilled(checkedValue != null);
+			validation.change(checkedValue);
+			const fallbackInput = firstEnabledInputRef.current;
+			if (checkedValue == null && fallbackInput && !fallbackInput.disabled) {
+				setInputRef(fallbackInput);
+			}
+		},
+		subSlot(slot, 'valueChanged'),
+	);
+
+	const ariaLabelledby = elementProps['aria-labelledby'] ?? labelId ?? fieldsetContext?.legendId;
+
+	const state: RadioGroupState = {
+		...fieldState,
+		disabled: disabled ?? false,
+		required: required ?? false,
+		readOnly: readOnly ?? false,
+	};
+
+	const contextValue: RadioGroupContextValue<Value> = useMemo(
+		() => ({
+			...fieldState,
+			checkedValue,
+			disabled,
+			form,
+			validation,
+			name,
+			readOnly,
+			registerControlRef,
+			registerInputRef,
+			required,
+			setCheckedValue,
+			setTouched,
+			touched,
+		}),
+		[
+			checkedValue,
+			disabled,
+			form,
+			validation,
+			fieldState,
+			name,
+			readOnly,
+			registerControlRef,
+			registerInputRef,
+			required,
+			setCheckedValue,
+			setTouched,
+			touched,
+		],
+		subSlot(slot, 'ctx'),
+	);
+
+	const defaultProps: Record<string, any> = {
+		id: idProp,
+		role: 'radiogroup',
+		'aria-required': required || undefined,
+		'aria-disabled': disabled || undefined,
+		'aria-readonly': readOnly || undefined,
+		'aria-labelledby': ariaLabelledby,
+		onFocus() {
+			setFocused(true);
+		},
+		onBlur(event: any) {
+			if (!contains(event.currentTarget, event.relatedTarget)) {
+				setFieldTouched(true);
+				setFocused(false);
+				if (validationMode === 'onBlur') {
+					validation.commit(checkedValue);
+				}
+			}
+		},
+		onKeyDownCapture(event: any) {
+			if (event.key.startsWith('Arrow')) {
+				setTouched(true);
+				setFocused(true);
+			}
+		},
+	};
+
+	const compositeRoot = createElement(CompositeRoot, {
+		render,
+		className,
+		style,
+		state,
+		props: [
+			defaultProps,
+			elementProps,
+			(p: any) => validation.getValidationProps(disabled ?? false, p),
+		],
+		refs: [ref],
+		stateAttributesMapping: fieldValidityMapping,
+		enableHomeAndEndKeys: false,
+		modifierKeys: MODIFIER_KEYS,
+	});
+
+	return createElement(RadioGroupContext.Provider, {
+		value: contextValue,
+		children: compositeRoot,
+	});
+}
+
+export { RadioGroup };