@octanejs/base-ui 0.1.1

package/src/fieldset.ts

@@ -0,0 +1,150 @@
+// Ported from .base-ui/packages/react/src/fieldset/ (v1.6.0):
+//   index.ts / index.parts.ts (the `Fieldset` namespace),
+//   root/FieldsetRoot.tsx, root/FieldsetRootContext.ts, legend/FieldsetLegend.tsx.
+//
+// Groups a shared legend with related controls. `Fieldset.Root` renders a
+// `<fieldset>`; `Fieldset.Legend` renders a `<div>` whose generated id is fed back
+// into the root as `aria-labelledby`. Base UI uses a PLAIN React context here (not the
+// scoped-context factory) — ported as a plain octane createContext. octane is
+// ref-as-prop (React-19 shape), so `forwardRef` collapses to a `ref` prop.
+import {
+	createContext,
+	createElement,
+	useContext,
+	useLayoutEffect,
+	useMemo,
+	useState,
+} from 'octane';
+
+import { S, splitSlot, subSlot } from './internal';
+import { useRenderElement, type RenderProp } from './utils/useRenderElement';
+import { useBaseUiId } from './utils/useBaseUiId';
+
+// --- Context -----------------------------------------------------------------
+
+export interface FieldsetRootContextValue {
+	legendId: string | undefined;
+	setLegendId: (id: string | undefined) => void;
+	disabled: boolean | undefined;
+}
+
+const FieldsetRootContext = createContext<FieldsetRootContextValue | undefined>(undefined);
+
+export function useFieldsetRootContext(optional: true): FieldsetRootContextValue | undefined;
+export function useFieldsetRootContext(optional?: false): FieldsetRootContextValue;
+export function useFieldsetRootContext(optional = false): FieldsetRootContextValue | undefined {
+	// octane context reads are not slot-threaded (see runtime `useContext`).
+	const context = useContext(FieldsetRootContext);
+	if (!context && !optional) {
+		throw new Error(
+			'Base UI: FieldsetRootContext is missing. Fieldset parts must be placed within <Fieldset.Root>.',
+		);
+	}
+	return context;
+}
+
+// --- Root --------------------------------------------------------------------
+
+export interface FieldsetRootState {
+	/** Whether the component should ignore user interaction. */
+	disabled: boolean;
+}
+
+export interface FieldsetRootProps {
+	disabled?: boolean;
+	className?: string | ((state: FieldsetRootState) => string | undefined);
+	render?: RenderProp<FieldsetRootState>;
+	style?: Record<string, any> | ((state: FieldsetRootState) => Record<string, any> | undefined);
+	ref?: any;
+	[key: string]: any;
+}
+
+function FieldsetRoot(props: FieldsetRootProps): any {
+	const slot = S('FieldsetRoot');
+	const { render, className, style, disabled: disabledProp = false, ref, ...elementProps } = props;
+
+	const [legendId, setLegendId] = useState<string | undefined>(
+		undefined,
+		subSlot(slot, 'legendId'),
+	);
+
+	const parentDisabled = useFieldsetRootContext(true)?.disabled;
+	const disabled = parentDisabled || disabledProp;
+
+	const state: FieldsetRootState = { disabled };
+
+	const element = useRenderElement(
+		'fieldset',
+		{ render, className, style },
+		{
+			ref,
+			state,
+			props: [{ 'aria-labelledby': legendId, disabled }, elementProps],
+		},
+		subSlot(slot, 're'),
+	);
+
+	const contextValue: FieldsetRootContextValue = useMemo(
+		() => ({ legendId, setLegendId, disabled }),
+		[legendId, setLegendId, disabled],
+		subSlot(slot, 'ctx'),
+	);
+
+	return createElement(FieldsetRootContext.Provider, { value: contextValue, children: element });
+}
+
+// --- Legend ------------------------------------------------------------------
+
+export interface FieldsetLegendState {
+	/** Whether the component should ignore user interaction. */
+	disabled: boolean;
+}
+
+export interface FieldsetLegendProps {
+	id?: string;
+	className?: string | ((state: FieldsetLegendState) => string | undefined);
+	render?: RenderProp<FieldsetLegendState>;
+	style?: Record<string, any> | ((state: FieldsetLegendState) => Record<string, any> | undefined);
+	ref?: any;
+	[key: string]: any;
+}
+
+function FieldsetLegend(props: FieldsetLegendProps): any {
+	const slot = S('FieldsetLegend');
+	const { render, className, style, id: idProp, ref, ...elementProps } = props;
+
+	const { disabled, setLegendId } = useFieldsetRootContext();
+
+	const id = useBaseUiId(idProp, subSlot(slot, 'id'));
+
+	useLayoutEffect(
+		() => {
+			setLegendId(id);
+			return () => {
+				setLegendId(undefined);
+			};
+		},
+		[setLegendId, id],
+		subSlot(slot, 'e:legendId'),
+	);
+
+	const state: FieldsetLegendState = { disabled: disabled ?? false };
+
+	return useRenderElement(
+		'div',
+		{ render, className, style },
+		{
+			state,
+			ref,
+			props: [{ id }, elementProps],
+		},
+		subSlot(slot, 're'),
+	);
+}
+
+// --- Namespace (mirrors `export * as Fieldset`) ------------------------------
+
+export const Fieldset = {
+	Root: FieldsetRoot,
+	Legend: FieldsetLegend,
+};

package/src/form.ts

@@ -0,0 +1,183 @@
+// Ported from .base-ui/packages/react/src/form/Form.tsx (v1.6.0). A `<form noValidate>` with
+// consolidated error handling: provides the real FormContext (field registry + errors), runs
+// submit-time validation, and focuses the first invalid control. octane: native events;
+// forwardRef → ref-as-prop.
+import { createElement, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'octane';
+
+import { S, subSlot } from './internal';
+import { useRenderElement, type RenderProp } from './utils/useRenderElement';
+import { useStableCallback } from './utils/useStableCallback';
+import { useValueChanged } from './utils/useValueChanged';
+import { FormContext, type FormContextValue, type Errors } from './utils/field/FormContext';
+import { createChangeEventDetails, REASONS } from './utils/createChangeEventDetails';
+import type { FormValidationMode } from './utils/field/constants';
+
+export interface FormProps {
+	validationMode?: FormValidationMode;
+	errors?: Errors;
+	onSubmit?: (event: any) => void;
+	onFormSubmit?: (formValues: Record<string, any>, eventDetails: any) => void;
+	actionsRef?: any;
+	render?: RenderProp<Record<string, never>>;
+	className?: string | ((state: Record<string, never>) => string | undefined);
+	style?: Record<string, any>;
+	ref?: any;
+	[key: string]: any;
+}
+
+function Form(props: FormProps): any {
+	const slot = S('Form');
+	const {
+		render,
+		className,
+		validationMode = 'onSubmit',
+		errors: externalErrors,
+		onSubmit,
+		onFormSubmit,
+		actionsRef,
+		style,
+		ref,
+		...elementProps
+	} = props;
+
+	const formRef = useRef<{ fields: Map<string, any> }>(
+		{ fields: new Map() },
+		subSlot(slot, 'formRef'),
+	);
+	const submittedRef = useRef(false, subSlot(slot, 'submitted'));
+	const submitAttemptedRef = useRef(false, subSlot(slot, 'attempted'));
+
+	const focusControl = useStableCallback(
+		(control: HTMLElement | null) => {
+			if (!control) {
+				return;
+			}
+			control.focus();
+			if (control.tagName === 'INPUT') {
+				(control as HTMLInputElement).select();
+			}
+		},
+		subSlot(slot, 'focusControl'),
+	);
+
+	const [errors, setErrors] = useState<Errors | undefined>(externalErrors, subSlot(slot, 'errors'));
+
+	useValueChanged(
+		externalErrors,
+		() => {
+			setErrors(externalErrors);
+		},
+		subSlot(slot, 'errorsChanged'),
+	);
+
+	useEffect(
+		() => {
+			if (!submittedRef.current) {
+				return;
+			}
+			submittedRef.current = false;
+			const invalidFields = Array.from(formRef.current.fields.values()).filter(
+				(field: any) => field.validityData.state.valid === false,
+			);
+			if (invalidFields.length) {
+				focusControl(invalidFields[0].controlRef.current);
+			}
+		},
+		[errors, focusControl],
+		subSlot(slot, 'e:focus'),
+	);
+
+	const handleImperativeValidate = useStableCallback(
+		(fieldName?: string) => {
+			const values = Array.from(formRef.current.fields.values());
+			if (fieldName) {
+				const namedField = values.find((field: any) => field.name === fieldName);
+				if (namedField) {
+					(namedField as any).validate();
+				}
+			} else {
+				values.forEach((field: any) => {
+					field.validate();
+				});
+			}
+		},
+		subSlot(slot, 'imperativeValidate'),
+	);
+
+	useImperativeHandle(
+		actionsRef,
+		() => ({ validate: handleImperativeValidate }),
+		[handleImperativeValidate],
+		subSlot(slot, 'imperative'),
+	);
+
+	const element = useRenderElement(
+		'form',
+		{ render, className, style },
+		{
+			ref,
+			props: [
+				{
+					noValidate: true,
+					onSubmit(event: any) {
+						submitAttemptedRef.current = true;
+						let values = Array.from(formRef.current.fields.values());
+						values.forEach((field: any) => {
+							field.validate();
+						});
+						values = Array.from(formRef.current.fields.values());
+						const invalidField = values.find(
+							(field: any) => field.validityData.state.valid === false,
+						);
+						if (invalidField) {
+							event.preventDefault();
+							focusControl((invalidField as any).controlRef.current);
+						} else {
+							submittedRef.current = true;
+							onSubmit?.(event);
+							if (onFormSubmit) {
+								event.preventDefault();
+								const formValues = values.reduce((acc: Record<string, any>, field: any) => {
+									if (field.name) {
+										acc[field.name] = field.getValue();
+									}
+									return acc;
+								}, {});
+								onFormSubmit(formValues, createChangeEventDetails(REASONS.none, event));
+							}
+						}
+					},
+				},
+				elementProps,
+			],
+		},
+		subSlot(slot, 're'),
+	);
+
+	const clearErrors = useStableCallback(
+		(name: string | undefined) => {
+			if (name && errors && Object.prototype.hasOwnProperty.call(errors, name)) {
+				const nextErrors = { ...errors };
+				delete nextErrors[name];
+				setErrors(nextErrors);
+			}
+		},
+		subSlot(slot, 'clearErrors'),
+	);
+
+	const contextValue: FormContextValue = useMemo(
+		() => ({
+			formRef,
+			validationMode,
+			errors: errors ?? {},
+			clearErrors,
+			submitAttemptedRef,
+		}),
+		[formRef, validationMode, errors, clearErrors],
+		subSlot(slot, 'ctx'),
+	);
+
+	return createElement(FormContext.Provider, { value: contextValue, children: element });
+}
+
+export { Form };

package/src/index.ts

@@ -0,0 +1,23 @@
+// @octanejs/base-ui — Base UI (@base-ui/react) ported to the octane
+// renderer. Public API mirrors Base UI: deep-subpath imports
+// (`@octanejs/base-ui/separator`, `@octanejs/base-ui/use-render`, …). This barrel
+// re-exports the public surface for convenience as components land.
+export { Separator } from './separator';
+export { Avatar } from './avatar';
+export { Checkbox } from './checkbox';
+export { CheckboxGroup } from './checkbox-group';
+export { Field } from './field';
+export { Fieldset } from './fieldset';
+export { Form } from './form';
+export { Input } from './input';
+export { Meter } from './meter';
+export { NumberField } from './number-field';
+export { Progress } from './progress';
+export { Radio } from './radio';
+export { RadioGroup } from './radio-group';
+export { Slider } from './slider';
+export { Switch } from './switch';
+export { Toggle } from './toggle';
+export { ToggleGroup } from './toggle-group';
+export { useRender } from './use-render';
+export { mergeProps, mergePropsN, mergeClassNames } from './merge-props';

package/src/input.ts

@@ -0,0 +1,9 @@
+// Ported from .base-ui/packages/react/src/input/Input.tsx (v1.6.0). A native `<input>` that
+// works with Field out of the box — literally `<Field.Control/>`.
+import { createElement } from 'octane';
+
+import { Field } from './field';
+
+export function Input(props: any): any {
+	return createElement(Field.Control, props);
+}

package/src/internal.ts

@@ -0,0 +1,42 @@
+// Slot mechanics for @octanejs/base-ui'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/base-ui:' + tag)));
+	return sym;
+}

package/src/merge-props.ts

@@ -0,0 +1,2 @@
+// Public entry — mirrors @base-ui/react/merge-props.
+export { mergeProps, mergePropsN, mergeClassNames, makeEventPreventable } from './utils/mergeProps';

package/src/meter.ts

@@ -0,0 +1,204 @@
+// Ported from .base-ui/packages/react/src/meter/ (v1.6.0): root/MeterRoot,
+// root/MeterRootContext, track/MeterTrack, indicator/MeterIndicator, value/MeterValue,
+// label/MeterLabel — plus its `index.parts` (the `Meter` namespace).
+//
+// A meter visualizes a value within a known range. `Meter.Root` (`role="meter"`) owns
+// the range math and screen-reader aria; `Track`/`Indicator` draw the bar; `Value`/`Label`
+// render text. 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 { useRegisteredLabelId } from './utils/useRegisteredLabelId';
+import { valueToPercent } from './utils/valueToPercent';
+import { clamp } from './utils/clamp';
+import { formatNumber } from './utils/formatNumber';
+import { visuallyHidden } from './utils/visuallyHidden';
+
+// --- Context -----------------------------------------------------------------
+
+export interface MeterRootContextValue {
+	formattedValue: string;
+	max: number;
+	min: number;
+	/** The value normalized to a `0`–`100` percentage of the range, clamped to those bounds. */
+	percentageValue: number;
+	setLabelId: (id: string | undefined) => void;
+	value: number;
+}
+
+const MeterRootContext = createContext<MeterRootContextValue | undefined>(undefined);
+
+function useMeterRootContext(): MeterRootContextValue {
+	const context = useContext(MeterRootContext);
+	if (context === undefined) {
+		throw new Error(
+			'Base UI: MeterRootContext is missing. Meter parts must be placed within <Meter.Root>.',
+		);
+	}
+	return context;
+}
+
+// --- Root --------------------------------------------------------------------
+
+export interface MeterRootProps {
+	'aria-valuetext'?: string;
+	format?: Intl.NumberFormatOptions;
+	getAriaValueText?: (formattedValue: string, value: number) => string;
+	locale?: Intl.LocalesArgument;
+	max?: number;
+	min?: number;
+	value: number;
+	render?: RenderProp<Record<string, never>>;
+	className?: string | ((state: Record<string, never>) => string | undefined);
+	style?: Record<string, any>;
+	ref?: any;
+	[key: string]: any;
+}
+
+function MeterRoot(props: MeterRootProps): any {
+	const slot = S('MeterRoot');
+	const {
+		format,
+		getAriaValueText,
+		locale,
+		max = 100,
+		min = 0,
+		value: valueProp,
+		render,
+		className,
+		children,
+		style,
+		ref,
+		...elementProps
+	} = props;
+
+	const [labelId, setLabelId] = useState<string | undefined>(undefined, subSlot(slot, 'labelId'));
+
+	// `clamp` handles infinity, but NaN needs an explicit fallback before normalizing.
+	const rawPercentage = valueToPercent(valueProp, min, max);
+	const percentageValue = clamp(Number.isNaN(rawPercentage) ? 0 : rawPercentage, 0, 100);
+	const clampedValue = clamp(Number.isNaN(valueProp) ? min : valueProp, min, max);
+
+	// Without an explicit `format`, the value shows as its position within the range so
+	// the text stays in sync with the indicator fill for any `min`/`max`.
+	const formattedValue = format
+		? formatNumber(valueProp, locale, format)
+		: formatNumber(percentageValue / 100, locale, { style: 'percent' });
+
+	let ariaValuetext = formattedValue;
+	if (getAriaValueText) {
+		ariaValuetext = getAriaValueText(formattedValue, valueProp);
+	}
+
+	const defaultProps = {
+		'aria-labelledby': labelId,
+		'aria-valuemax': max,
+		'aria-valuemin': min,
+		'aria-valuenow': clampedValue,
+		'aria-valuetext': ariaValuetext,
+		role: 'meter',
+		children: [
+			children,
+			// force NVDA to read the label (mui/base-ui#4184)
+			createElement('span', { role: 'presentation', style: visuallyHidden, children: 'x' }),
+		],
+	};
+
+	const contextValue: MeterRootContextValue = useMemo(
+		() => ({ formattedValue, max, min, percentageValue, setLabelId, value: valueProp }),
+		[formattedValue, max, min, percentageValue, setLabelId, valueProp],
+		subSlot(slot, 'ctx'),
+	);
+
+	const element = useRenderElement(
+		'div',
+		{ render, className, style },
+		{ ref, props: [defaultProps, elementProps] },
+		subSlot(slot, 're'),
+	);
+
+	return createElement(MeterRootContext.Provider, { value: contextValue, children: element });
+}
+
+// --- Track -------------------------------------------------------------------
+
+function MeterTrack(props: any): any {
+	const slot = S('MeterTrack');
+	const { render, className, style, ref, ...elementProps } = props;
+	return useRenderElement(
+		'div',
+		{ render, className, style },
+		{ ref, props: elementProps },
+		subSlot(slot, 're'),
+	);
+}
+
+// --- Indicator ---------------------------------------------------------------
+
+function MeterIndicator(props: any): any {
+	const slot = S('MeterIndicator');
+	const { render, className, style, ref, ...elementProps } = props;
+	const { percentageValue } = useMeterRootContext();
+	return useRenderElement(
+		'div',
+		{ render, className, style },
+		{
+			ref,
+			props: [
+				{ style: { insetInlineStart: 0, height: 'inherit', width: `${percentageValue}%` } },
+				elementProps,
+			],
+		},
+		subSlot(slot, 're'),
+	);
+}
+
+// --- Value -------------------------------------------------------------------
+
+function MeterValue(props: any): any {
+	const slot = S('MeterValue');
+	const { className, render, children, style, ref, ...elementProps } = props;
+	const { value, formattedValue } = useMeterRootContext();
+	return useRenderElement(
+		'span',
+		{ render, className, style },
+		{
+			ref,
+			props: [
+				{
+					'aria-hidden': true,
+					children:
+						typeof children === 'function' ? children(formattedValue, value) : formattedValue,
+				},
+				elementProps,
+			],
+		},
+		subSlot(slot, 're'),
+	);
+}
+
+// --- Label -------------------------------------------------------------------
+
+function MeterLabel(props: any): any {
+	const slot = S('MeterLabel');
+	const { render, className, style, id: idProp, ref, ...elementProps } = props;
+	const { setLabelId } = useMeterRootContext();
+	const id = useRegisteredLabelId(idProp, setLabelId, subSlot(slot, 'labelId'));
+	return useRenderElement(
+		'span',
+		{ render, className, style },
+		{ ref, props: [{ id, role: 'presentation' }, elementProps] },
+		subSlot(slot, 're'),
+	);
+}
+
+// --- Namespace (mirrors `export * as Meter`) ---------------------------------
+
+export const Meter = {
+	Root: MeterRoot,
+	Track: MeterTrack,
+	Indicator: MeterIndicator,
+	Value: MeterValue,
+	Label: MeterLabel,
+};