@octanejs/base-ui 0.1.50 → 0.1.51

package/package.json

@@ -1,19 +1,12 @@
 {
   "name": "@octanejs/base-ui",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
   "engines": {
     "node": ">=22.22.2"
   },
-  "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",
@@ -32,45 +25,483 @@
   "types": "src/index.ts",
   "files": [
     "src",
-    "dist/cjs",
+    "LICENSE",
     "LICENSE.upstream",
     "README.md",
-    "UPSTREAM.md"
+    "UPSTREAM.md",
+    "MIGRATION.md"
   ],
   "exports": {
     ".": {
       "types": "./src/index.ts",
       "import": "./src/index.ts",
-      "require": "./dist/cjs/index.cjs",
       "default": "./src/index.ts"
     },
-    "./*": {
-      "types": "./src/*.ts",
-      "import": "./src/*.ts",
-      "require": "./dist/cjs/*.cjs",
-      "default": "./src/*.ts"
+    "./accordion": {
+      "types": "./src/accordion/index.ts",
+      "import": "./src/accordion/index.ts",
+      "default": "./src/accordion/index.ts"
+    },
+    "./alert-dialog": {
+      "types": "./src/alert-dialog/index.ts",
+      "import": "./src/alert-dialog/index.ts",
+      "default": "./src/alert-dialog/index.ts"
+    },
+    "./autocomplete": {
+      "types": "./src/autocomplete/index.ts",
+      "import": "./src/autocomplete/index.ts",
+      "default": "./src/autocomplete/index.ts"
+    },
+    "./avatar": {
+      "types": "./src/avatar/index.ts",
+      "import": "./src/avatar/index.ts",
+      "default": "./src/avatar/index.ts"
+    },
+    "./button": {
+      "types": "./src/button/index.ts",
+      "import": "./src/button/index.ts",
+      "default": "./src/button/index.ts"
+    },
+    "./checkbox": {
+      "types": "./src/checkbox/index.ts",
+      "import": "./src/checkbox/index.ts",
+      "default": "./src/checkbox/index.ts"
+    },
+    "./checkbox-group": {
+      "types": "./src/checkbox-group/index.ts",
+      "import": "./src/checkbox-group/index.ts",
+      "default": "./src/checkbox-group/index.ts"
+    },
+    "./collapsible": {
+      "types": "./src/collapsible/index.ts",
+      "import": "./src/collapsible/index.ts",
+      "default": "./src/collapsible/index.ts"
+    },
+    "./combobox": {
+      "types": "./src/combobox/index.ts",
+      "import": "./src/combobox/index.ts",
+      "default": "./src/combobox/index.ts"
+    },
+    "./csp-provider": {
+      "types": "./src/csp-provider/index.ts",
+      "import": "./src/csp-provider/index.ts",
+      "default": "./src/csp-provider/index.ts"
+    },
+    "./context-menu": {
+      "types": "./src/context-menu/index.ts",
+      "import": "./src/context-menu/index.ts",
+      "default": "./src/context-menu/index.ts"
+    },
+    "./dialog": {
+      "types": "./src/dialog/index.ts",
+      "import": "./src/dialog/index.ts",
+      "default": "./src/dialog/index.ts"
+    },
+    "./direction-provider": {
+      "types": "./src/direction-provider/index.ts",
+      "import": "./src/direction-provider/index.ts",
+      "default": "./src/direction-provider/index.ts"
+    },
+    "./drawer": {
+      "types": "./src/drawer/index.ts",
+      "import": "./src/drawer/index.ts",
+      "default": "./src/drawer/index.ts"
+    },
+    "./field": {
+      "types": "./src/field/index.ts",
+      "import": "./src/field/index.ts",
+      "default": "./src/field/index.ts"
+    },
+    "./fieldset": {
+      "types": "./src/fieldset/index.ts",
+      "import": "./src/fieldset/index.ts",
+      "default": "./src/fieldset/index.ts"
+    },
+    "./form": {
+      "types": "./src/form/index.ts",
+      "import": "./src/form/index.ts",
+      "default": "./src/form/index.ts"
+    },
+    "./input": {
+      "types": "./src/input/index.ts",
+      "import": "./src/input/index.ts",
+      "default": "./src/input/index.ts"
+    },
+    "./menu": {
+      "types": "./src/menu/index.ts",
+      "import": "./src/menu/index.ts",
+      "default": "./src/menu/index.ts"
+    },
+    "./menubar": {
+      "types": "./src/menubar/index.ts",
+      "import": "./src/menubar/index.ts",
+      "default": "./src/menubar/index.ts"
+    },
+    "./merge-props": {
+      "types": "./src/merge-props/index.ts",
+      "import": "./src/merge-props/index.ts",
+      "default": "./src/merge-props/index.ts"
+    },
+    "./meter": {
+      "types": "./src/meter/index.ts",
+      "import": "./src/meter/index.ts",
+      "default": "./src/meter/index.ts"
+    },
+    "./navigation-menu": {
+      "types": "./src/navigation-menu/index.ts",
+      "import": "./src/navigation-menu/index.ts",
+      "default": "./src/navigation-menu/index.ts"
+    },
+    "./number-field": {
+      "types": "./src/number-field/index.ts",
+      "import": "./src/number-field/index.ts",
+      "default": "./src/number-field/index.ts"
+    },
+    "./otp-field": {
+      "types": "./src/otp-field/index.ts",
+      "import": "./src/otp-field/index.ts",
+      "default": "./src/otp-field/index.ts"
+    },
+    "./popover": {
+      "types": "./src/popover/index.ts",
+      "import": "./src/popover/index.ts",
+      "default": "./src/popover/index.ts"
+    },
+    "./preview-card": {
+      "types": "./src/preview-card/index.ts",
+      "import": "./src/preview-card/index.ts",
+      "default": "./src/preview-card/index.ts"
+    },
+    "./progress": {
+      "types": "./src/progress/index.ts",
+      "import": "./src/progress/index.ts",
+      "default": "./src/progress/index.ts"
+    },
+    "./radio": {
+      "types": "./src/radio/index.ts",
+      "import": "./src/radio/index.ts",
+      "default": "./src/radio/index.ts"
+    },
+    "./radio-group": {
+      "types": "./src/radio-group/index.ts",
+      "import": "./src/radio-group/index.ts",
+      "default": "./src/radio-group/index.ts"
+    },
+    "./scroll-area": {
+      "types": "./src/scroll-area/index.ts",
+      "import": "./src/scroll-area/index.ts",
+      "default": "./src/scroll-area/index.ts"
+    },
+    "./select": {
+      "types": "./src/select/index.ts",
+      "import": "./src/select/index.ts",
+      "default": "./src/select/index.ts"
+    },
+    "./separator": {
+      "types": "./src/separator/index.ts",
+      "import": "./src/separator/index.ts",
+      "default": "./src/separator/index.ts"
+    },
+    "./slider": {
+      "types": "./src/slider/index.ts",
+      "import": "./src/slider/index.ts",
+      "default": "./src/slider/index.ts"
+    },
+    "./switch": {
+      "types": "./src/switch/index.ts",
+      "import": "./src/switch/index.ts",
+      "default": "./src/switch/index.ts"
+    },
+    "./tabs": {
+      "types": "./src/tabs/index.ts",
+      "import": "./src/tabs/index.ts",
+      "default": "./src/tabs/index.ts"
+    },
+    "./toast": {
+      "types": "./src/toast/index.ts",
+      "import": "./src/toast/index.ts",
+      "default": "./src/toast/index.ts"
+    },
+    "./toggle": {
+      "types": "./src/toggle/index.ts",
+      "import": "./src/toggle/index.ts",
+      "default": "./src/toggle/index.ts"
+    },
+    "./toggle-group": {
+      "types": "./src/toggle-group/index.ts",
+      "import": "./src/toggle-group/index.ts",
+      "default": "./src/toggle-group/index.ts"
+    },
+    "./toolbar": {
+      "types": "./src/toolbar/index.ts",
+      "import": "./src/toolbar/index.ts",
+      "default": "./src/toolbar/index.ts"
+    },
+    "./tooltip": {
+      "types": "./src/tooltip/index.ts",
+      "import": "./src/tooltip/index.ts",
+      "default": "./src/tooltip/index.ts"
+    },
+    "./types": {
+      "types": "./src/types/index.ts",
+      "import": "./src/types/index.ts",
+      "default": "./src/types/index.ts"
+    },
+    "./unstable-use-media-query": {
+      "types": "./src/unstable-use-media-query/index.ts",
+      "import": "./src/unstable-use-media-query/index.ts",
+      "default": "./src/unstable-use-media-query/index.ts"
+    },
+    "./use-render": {
+      "types": "./src/use-render/index.ts",
+      "import": "./src/use-render/index.ts",
+      "default": "./src/use-render/index.ts"
+    },
+    "./internals/composite": {
+      "types": "./src/internals/composite/index.ts",
+      "import": "./src/internals/composite/index.ts",
+      "default": "./src/internals/composite/index.ts"
+    },
+    "./internals/constants": {
+      "types": "./src/internals/constants.ts",
+      "import": "./src/internals/constants.ts",
+      "default": "./src/internals/constants.ts"
+    },
+    "./internals/createBaseUIEventDetails": {
+      "types": "./src/internals/createBaseUIEventDetails.ts",
+      "import": "./src/internals/createBaseUIEventDetails.ts",
+      "default": "./src/internals/createBaseUIEventDetails.ts"
+    },
+    "./internals/csp-context": {
+      "types": "./src/internals/csp-context/index.ts",
+      "import": "./src/internals/csp-context/index.ts",
+      "default": "./src/internals/csp-context/index.ts"
+    },
+    "./internals/direction-context": {
+      "types": "./src/internals/direction-context/index.ts",
+      "import": "./src/internals/direction-context/index.ts",
+      "default": "./src/internals/direction-context/index.ts"
+    },
+    "./internals/field-constants": {
+      "types": "./src/internals/field-constants/index.ts",
+      "import": "./src/internals/field-constants/index.ts",
+      "default": "./src/internals/field-constants/index.ts"
+    },
+    "./internals/field-register-control": {
+      "types": "./src/internals/field-register-control/index.ts",
+      "import": "./src/internals/field-register-control/index.ts",
+      "default": "./src/internals/field-register-control/index.ts"
+    },
+    "./internals/field-root-context": {
+      "types": "./src/internals/field-root-context/index.ts",
+      "import": "./src/internals/field-root-context/index.ts",
+      "default": "./src/internals/field-root-context/index.ts"
+    },
+    "./internals/filter": {
+      "types": "./src/internals/filter.ts",
+      "import": "./src/internals/filter.ts",
+      "default": "./src/internals/filter.ts"
+    },
+    "./internals/itemEquality": {
+      "types": "./src/internals/itemEquality.ts",
+      "import": "./src/internals/itemEquality.ts",
+      "default": "./src/internals/itemEquality.ts"
+    },
+    "./internals/form-context": {
+      "types": "./src/internals/form-context/index.ts",
+      "import": "./src/internals/form-context/index.ts",
+      "default": "./src/internals/form-context/index.ts"
+    },
+    "./internals/getDisabledMountTransitionStyles": {
+      "types": "./src/internals/getDisabledMountTransitionStyles.ts",
+      "import": "./src/internals/getDisabledMountTransitionStyles.ts",
+      "default": "./src/internals/getDisabledMountTransitionStyles.ts"
+    },
+    "./internals/getStateAttributesProps": {
+      "types": "./src/internals/getStateAttributesProps.ts",
+      "import": "./src/internals/getStateAttributesProps.ts",
+      "default": "./src/internals/getStateAttributesProps.ts"
+    },
+    "./internals/labelable-provider": {
+      "types": "./src/internals/labelable-provider/index.ts",
+      "import": "./src/internals/labelable-provider/index.ts",
+      "default": "./src/internals/labelable-provider/index.ts"
+    },
+    "./internals/noop": {
+      "types": "./src/internals/noop.ts",
+      "import": "./src/internals/noop.ts",
+      "default": "./src/internals/noop.ts"
+    },
+    "./internals/reasons": {
+      "types": "./src/internals/reasons.ts",
+      "import": "./src/internals/reasons.ts",
+      "default": "./src/internals/reasons.ts"
+    },
+    "./internals/resolveValueLabel": {
+      "types": "./src/internals/resolveValueLabel.tsrx",
+      "import": "./src/internals/resolveValueLabel.tsrx",
+      "default": "./src/internals/resolveValueLabel.tsrx"
+    },
+    "./internals/RequestQueue": {
+      "types": "./src/internals/RequestQueue.ts",
+      "import": "./src/internals/RequestQueue.ts",
+      "default": "./src/internals/RequestQueue.ts"
+    },
+    "./internals/serializeValue": {
+      "types": "./src/internals/serializeValue.ts",
+      "import": "./src/internals/serializeValue.ts",
+      "default": "./src/internals/serializeValue.ts"
+    },
+    "./internals/stateAttributesMapping": {
+      "types": "./src/internals/stateAttributesMapping.ts",
+      "import": "./src/internals/stateAttributesMapping.ts",
+      "default": "./src/internals/stateAttributesMapping.ts"
+    },
+    "./internals/temporal": {
+      "types": "./src/internals/temporal/index.ts",
+      "import": "./src/internals/temporal/index.ts",
+      "default": "./src/internals/temporal/index.ts"
+    },
+    "./internals/temporal-adapter-date-fns": {
+      "types": "./src/internals/temporal-adapter-date-fns/index.ts",
+      "import": "./src/internals/temporal-adapter-date-fns/index.ts",
+      "default": "./src/internals/temporal-adapter-date-fns/index.ts"
+    },
+    "./internals/temporal-adapter-luxon": {
+      "types": "./src/internals/temporal-adapter-luxon/index.ts",
+      "import": "./src/internals/temporal-adapter-luxon/index.ts",
+      "default": "./src/internals/temporal-adapter-luxon/index.ts"
+    },
+    "./internals/TimeoutManager": {
+      "types": "./src/internals/TimeoutManager.ts",
+      "import": "./src/internals/TimeoutManager.ts",
+      "default": "./src/internals/TimeoutManager.ts"
+    },
+    "./internals/types": {
+      "types": "./src/internals/types.ts",
+      "import": "./src/internals/types.ts",
+      "default": "./src/internals/types.ts"
+    },
+    "./internals/use-button": {
+      "types": "./src/internals/use-button/index.ts",
+      "import": "./src/internals/use-button/index.ts",
+      "default": "./src/internals/use-button/index.ts"
+    },
+    "./internals/useBaseUiId": {
+      "types": "./src/internals/useBaseUiId.ts",
+      "import": "./src/internals/useBaseUiId.ts",
+      "default": "./src/internals/useBaseUiId.ts"
+    },
+    "./internals/useAnchorPositioning": {
+      "types": "./src/internals/useAnchorPositioning.ts",
+      "import": "./src/internals/useAnchorPositioning.ts",
+      "default": "./src/internals/useAnchorPositioning.ts"
+    },
+    "./internals/useAnimationsFinished": {
+      "types": "./src/internals/useAnimationsFinished.ts",
+      "import": "./src/internals/useAnimationsFinished.ts",
+      "default": "./src/internals/useAnimationsFinished.ts"
+    },
+    "./internals/useOpenChangeComplete": {
+      "types": "./src/internals/useOpenChangeComplete.tsrx",
+      "import": "./src/internals/useOpenChangeComplete.tsrx",
+      "default": "./src/internals/useOpenChangeComplete.tsrx"
+    },
+    "./internals/usePressAndHold": {
+      "types": "./src/internals/usePressAndHold.ts",
+      "import": "./src/internals/usePressAndHold.ts",
+      "default": "./src/internals/usePressAndHold.ts"
+    },
+    "./internals/useRenderElement": {
+      "types": "./src/internals/useRenderElement.tsrx",
+      "import": "./src/internals/useRenderElement.tsrx",
+      "default": "./src/internals/useRenderElement.tsrx"
+    },
+    "./internals/useValueChanged": {
+      "types": "./src/internals/useValueChanged.ts",
+      "import": "./src/internals/useValueChanged.ts",
+      "default": "./src/internals/useValueChanged.ts"
+    },
+    "./internals/useTransitionStatus": {
+      "types": "./src/internals/useTransitionStatus.ts",
+      "import": "./src/internals/useTransitionStatus.ts",
+      "default": "./src/internals/useTransitionStatus.ts"
     }
   },
   "dependencies": {
     "@floating-ui/utils": "^0.2.12",
-    "aria-hidden": "^1.2.6",
-    "tabbable": "^6.5.0",
-    "@octanejs/floating-ui": "0.1.51"
+    "@octanejs/base-ui-utils": "0.1.1",
+    "@octanejs/floating-ui": "0.1.52"
   },
   "peerDependencies": {
-    "octane": "^0.1.51 || ^0.2.0"
+    "octane": "^0.2.5",
+    "date-fns": "^4.0.0",
+    "@date-fns/tz": "^1.2.0",
+    "luxon": "^3.7.2"
   },
   "devDependencies": {
-    "@base-ui/react": "^1.6.0",
-    "@tsrx/react": "^0.2.63",
+    "@base-ui/react": "1.8.0",
+    "@tsrx/react": "^0.2.67",
     "esbuild": "^0.28.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "vitest": "^4.1.10",
-    "octane": "0.2.0"
+    "@mui/internal-test-utils": "2.0.18-canary.25",
+    "@testing-library/user-event": "14.6.3",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.4",
+    "date-fns": "^4.0.0",
+    "@date-fns/tz": "^1.2.0",
+    "luxon": "^3.7.2",
+    "@types/luxon": "3.7.4",
+    "typescript-pristine": "npm:@typescript/typescript6@6.0.2",
+    "@floating-ui/dom": "^1.7.6",
+    "clsx": "^2.1.1",
+    "@testing-library/react": "16.3.2",
+    "@types/use-sync-external-store": "1.5.0",
+    "use-sync-external-store": "1.6.0",
+    "@floating-ui/react-dom": "2.1.9",
+    "react-router": "7.18.2",
+    "vitest-browser-react": "2.2.0",
+    "typescript-pristine-native": "npm:typescript@7.0.2",
+    "jsdom": "27.4.0",
+    "semver": "7.8.5",
+    "octane": "0.2.5",
+    "@octanejs/testing-library": "0.1.51",
+    "@octanejs/remix-router": "0.1.48"
+  },
+  "imports": {
+    "#prehydration/tabs/indicator": {
+      "browser": {
+        "default": "./src/internals/prehydrationScript.stub.ts"
+      },
+      "default": "./src/tabs/indicator/prehydrationScript.min.ts"
+    },
+    "#prehydration/slider/thumb": {
+      "browser": {
+        "default": "./src/internals/prehydrationScript.stub.ts"
+      },
+      "default": "./src/slider/thumb/prehydrationScript.min.ts"
+    }
+  },
+  "peerDependenciesMeta": {
+    "date-fns": {
+      "optional": true
+    },
+    "@date-fns/tz": {
+      "optional": true
+    },
+    "luxon": {
+      "optional": true
+    }
   },
   "scripts": {
-    "build:cjs": "node ../../scripts/build-package-commonjs.mjs",
-    "test": "vitest run"
+    "test": "vitest run --config tests/vitest.owned.config.ts",
+    "typecheck": "tsrx-tsc --noEmit -p tsconfig.json",
+    "upstream:verify": "node ../../scripts/react-parity/verify-provenance.mjs",
+    "test:upstream": "vitest run --config tests/vitest.config.ts",
+    "test:pristine": "node ../../scripts/react-parity/run-pristine.mjs base-ui",
+    "test:browser": "vitest run --config tests/vitest.browser.config.ts"
   }
 }

package/src/accordion/header/AccordionHeader.tsrx

@@ -0,0 +1,42 @@
+'use client';
+import type * as React from 'octane';
+import type { BaseUIComponentProps } from '../../internals/types';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import type { AccordionItemState } from '../item/AccordionItem.tsrx';
+import { useAccordionItemContext } from '../item/AccordionItemContext';
+import { accordionStateAttributesMapping } from '../item/stateAttributesMapping';
+
+/**
+ * A heading that labels the corresponding panel.
+ * Renders an `<h3>` element.
+ *
+ * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
+ */
+export const AccordionHeader = function AccordionHeader(
+	componentPropsWithRef: React.PropsWithoutRef<AccordionHeader.Props> & {
+		ref?: React.Ref<HTMLHeadingElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { render, className, style, ...elementProps } = componentProps;
+
+	const { state } = useAccordionItemContext();
+
+	const element = useRenderElement('h3', componentProps, {
+		state,
+		ref: forwardedRef,
+		props: elementProps,
+		stateAttributesMapping: accordionStateAttributesMapping,
+	});
+
+	return element;
+};
+
+export interface AccordionHeaderState extends AccordionItemState {}
+
+export interface AccordionHeaderProps extends BaseUIComponentProps<'h3', AccordionHeaderState> {}
+
+export namespace AccordionHeader {
+	export type State = AccordionHeaderState;
+	export type Props = AccordionHeaderProps;
+}

package/src/accordion/header/AccordionHeaderDataAttributes.ts

@@ -0,0 +1,13 @@
+/**
+ * Indicates the index of the accordion item.
+ * @type {number}
+ */
+export const index = 'data-index';
+/**
+ * Present when the accordion item is disabled.
+ */
+export const disabled = 'data-disabled';
+/**
+ * Present when the accordion item is open.
+ */
+export const open = 'data-open';

package/src/accordion/index.parts.ts

@@ -0,0 +1,5 @@
+export { AccordionRoot as Root } from './root/AccordionRoot.tsrx';
+export { AccordionItem as Item } from './item/AccordionItem.tsrx';
+export { AccordionHeader as Header } from './header/AccordionHeader.tsrx';
+export { AccordionTrigger as Trigger } from './trigger/AccordionTrigger.tsrx';
+export { AccordionPanel as Panel } from './panel/AccordionPanel.tsrx';

package/src/accordion/index.ts

@@ -0,0 +1,16 @@
+export * as Accordion from './index.parts';
+
+export type * from './root/AccordionRoot.tsrx';
+export type * from './item/AccordionItem.tsrx';
+export type * from './header/AccordionHeader.tsrx';
+export type * from './trigger/AccordionTrigger.tsrx';
+export type * from './panel/AccordionPanel.tsrx';
+
+// Retain the named runtime exports of the previous Octane binding.
+export {
+	Root as AccordionRoot,
+	Item as AccordionItem,
+	Header as AccordionHeader,
+	Trigger as AccordionTrigger,
+	Panel as AccordionPanel,
+} from './index.parts';