@octanejs/base-ui 0.1.1 → 0.1.2

package/README.md

@@ -1,7 +1,7 @@
 # @octanejs/base-ui
 
 [Base UI](https://base-ui.com) (`@base-ui/react`) ported to the
-[octane](https://github.com/octanejs/octane) renderer — headless, accessible, unstyled
+[octane](https://github.com/octanejs/octane) UI framework — headless, accessible, unstyled
 UI primitives.
 
 Alpha, in progress. Ported at full fidelity from the pinned `mui/base-ui` source
@@ -31,3 +31,9 @@ Every component takes Base UI's universal composition props — `render` (a JSX
 - **ref-as-prop.** No `forwardRef`; `ref` is a normal prop (React-19 shape).
 - **`className` composition** follows octane's `normalizeClass` at the apply site; the
   `render`-prop merge concatenates strings exactly like Base UI.
+
+## Status
+
+Current scope, known divergences, and verification status are tracked in the
+generated [bindings status table](../../docs/bindings-status.md), sourced from
+this package's [`status.json`](./status.json).

package/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@octanejs/base-ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
   "type": "module",
+  "octane": {
+    "hookSlots": {
+      "manual": [
+        "src"
+      ]
+    }
+  },
   "description": "Base UI (@base-ui/react) for the octane renderer — headless, accessible, unstyled UI primitives ported from base-ui.com at full fidelity.",
   "author": {
     "name": "Dominic Gannaway",
@@ -28,14 +35,15 @@
     "./*": "./src/*.ts"
   },
   "dependencies": {
+    "@floating-ui/utils": "^0.2.11",
     "aria-hidden": "^1.2.6",
     "tabbable": "^6.5.0",
-    "@octanejs/floating-ui": "0.1.2",
-    "octane": "0.1.3"
+    "@octanejs/floating-ui": "0.1.3",
+    "octane": "0.1.4"
   },
   "devDependencies": {
     "@base-ui/react": "^1.6.0",
-    "@tsrx/react": "^0.2.33",
+    "@tsrx/react": "^0.2.37",
     "esbuild": "^0.28.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

package/src/alert-dialog.ts

@@ -0,0 +1,47 @@
+// Ported from .base-ui/packages/react/src/alert-dialog/ (v1.6.0). AlertDialog is a thin variant of
+// Dialog: the Root delegates to Dialog's `useRenderDialogRoot` with the `'alert-dialog'` mode (which
+// forces `modal: true`, `disablePointerDismissal: true`, `role: 'alertdialog'`), and every other part
+// — Trigger, Portal, Backdrop, Popup, Title, Description, Close — is literally Dialog's part reused.
+// The handle extends `DialogHandle`, enforcing the alert-dialog invariants on its store.
+import { useRenderDialogRoot, DialogHandle, DialogStore, Dialog } from './dialog';
+
+const alertDialogState = {
+	modal: true,
+	disablePointerDismissal: true,
+	role: 'alertdialog',
+} as const;
+
+/**
+ * A handle to control an Alert Dialog imperatively and to associate detached triggers with it.
+ */
+export class AlertDialogHandle<Payload> extends DialogHandle<Payload> {
+	constructor(store?: DialogStore<Payload>) {
+		const alertDialogStore = store ?? new DialogStore<Payload>(alertDialogState as any);
+		super(alertDialogStore);
+
+		if (store) {
+			// Supplied stores may have been created as plain dialogs; enforce alert-dialog state.
+			this.store.update(alertDialogState as any);
+		}
+	}
+}
+
+export function createAlertDialogHandle<Payload>(): AlertDialogHandle<Payload> {
+	return new AlertDialogHandle<Payload>();
+}
+
+function AlertDialogRoot<Payload>(props: any): any {
+	return useRenderDialogRoot<Payload>(props, 'alert-dialog');
+}
+
+export const AlertDialog = {
+	Root: AlertDialogRoot,
+	Trigger: Dialog.Trigger,
+	Portal: Dialog.Portal,
+	Backdrop: Dialog.Backdrop,
+	Popup: Dialog.Popup,
+	Title: Dialog.Title,
+	Description: Dialog.Description,
+	Close: Dialog.Close,
+	createHandle: createAlertDialogHandle,
+};

package/src/checkbox.ts

@@ -4,10 +4,11 @@
 //
 // A checkbox renders a `<span role="checkbox">` + a hidden `<input type="checkbox">`, with an
 // optional `<Checkbox.Indicator>` (transition-mounted). octane adaptations mirror Switch:
-// native events (no `.nativeEvent`); the uncontrolled-input pattern (initial checked →
-// attribute, live `input.checked` PROPERTY via the native setter, native click/change
-// dispatch); `input.indeterminate` set imperatively as a property. The CheckboxGroup /
-// parent-checkbox branches stay dormant until CheckboxGroup lands (groupContext undefined).
+// native events (no `.nativeEvent`); the hidden input takes the live `checked` prop (octane
+// inputs are CONTROLLED exactly like React's) with native click dispatch;
+// `input.indeterminate` set imperatively as a property (it has no attribute). The
+// CheckboxGroup / parent-checkbox branches stay dormant until CheckboxGroup lands
+// (groupContext undefined).
 import {
 	createContext,
 	createElement,
@@ -225,9 +226,6 @@ function CheckboxRoot(props: CheckboxRootProps): any {
 		subSlot(slot, 'checked'),
 	);
 
-	// octane: reflect the INITIAL checked as the `checked` ATTRIBUTE (see Switch).
-	const initialCheckedRef = useRef(checked, subSlot(slot, 'initialChecked'));
-
 	const computedChecked = isGroupedWithParent ? Boolean(groupChecked) : checked;
 	const computedIndeterminate = isGroupedWithParent
 		? groupIndeterminate || indeterminate
@@ -289,19 +287,13 @@ function CheckboxRoot(props: CheckboxRootProps): any {
 		subSlot(slot, 'ariaLabelledBy'),
 	);
 
-	// octane: set `checked` (property) + `indeterminate` (property) imperatively; matches
-	// React's controlled input (property-only, never a `checked` attribute beyond the initial).
+	// `indeterminate` has no attribute — set the property imperatively (per Base UI).
 	useLayoutEffect(
 		() => {
 			const input = inputRef.current;
 			if (!input) {
 				return;
 			}
-			const setNativeChecked = Object.getOwnPropertyDescriptor(
-				ownerWindow(input).HTMLInputElement.prototype,
-				'checked',
-			)?.set;
-			setNativeChecked?.call(input, checked);
 			input.indeterminate = computedIndeterminate;
 			if (checked) {
 				setFilled(true);
@@ -327,8 +319,7 @@ function CheckboxRoot(props: CheckboxRootProps): any {
 
 	const inputProps: Record<string, any> = mergeProps(
 		{
-			// octane: initial checked → attribute; live value driven via the property (above).
-			checked: initialCheckedRef.current || undefined,
+			checked,
 			disabled,
 			form,
 			name: parent ? undefined : name,