@octanejs/base-ui 0.1.14 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/base-ui",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -41,19 +41,19 @@
     "@floating-ui/utils": "^0.2.12",
     "aria-hidden": "^1.2.6",
     "tabbable": "^6.5.0",
-    "@octanejs/floating-ui": "0.1.15"
+    "@octanejs/floating-ui": "0.1.17"
   },
   "peerDependencies": {
-    "octane": "0.1.16"
+    "octane": "0.1.18"
   },
   "devDependencies": {
     "@base-ui/react": "^1.6.0",
-    "@tsrx/react": "^0.2.50",
+    "@tsrx/react": "^0.2.54",
     "esbuild": "^0.28.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "vitest": "^4.1.10",
-    "octane": "0.1.16"
+    "octane": "0.1.18"
   },
   "scripts": {
     "test": "vitest run"

package/src/alert-dialog.ts

@@ -40,8 +40,10 @@ export const AlertDialog = {
 	Portal: Dialog.Portal,
 	Backdrop: Dialog.Backdrop,
 	Popup: Dialog.Popup,
+	Viewport: Dialog.Viewport,
 	Title: Dialog.Title,
 	Description: Dialog.Description,
 	Close: Dialog.Close,
 	createHandle: createAlertDialogHandle,
+	Handle: AlertDialogHandle,
 };

package/src/button.ts

@@ -0,0 +1,63 @@
+// Ported from .base-ui/packages/react/src/button/Button.tsx (v1.6.0). A button that can be
+// used to trigger actions. Renders a `<button>` element.
+import { S, subSlot } from './internal';
+import { useButton } from './utils/useButton';
+import { useRenderElement } from './utils/useRenderElement';
+
+export interface ButtonState {
+	/** Whether the button should ignore user interaction. */
+	disabled: boolean;
+}
+
+export interface ButtonProps {
+	disabled?: boolean;
+	/**
+	 * Whether the button should be focusable when disabled.
+	 * @default false
+	 */
+	focusableWhenDisabled?: boolean;
+	/**
+	 * Whether the component renders a native `<button>` element when replacing it via the
+	 * `render` prop.
+	 * @default true
+	 */
+	nativeButton?: boolean;
+	className?: string | ((state: ButtonState) => string | undefined);
+	render?: import('./utils/useRenderElement').RenderProp<ButtonState>;
+	ref?: any;
+	[key: string]: any;
+}
+
+// octane: forwardRef → ref-as-prop.
+export function Button(props: ButtonProps): any {
+	const slot = S('Button');
+	const {
+		render,
+		className,
+		disabled = false,
+		focusableWhenDisabled = false,
+		nativeButton = true,
+		style,
+		ref,
+		...elementProps
+	} = props;
+
+	const { getButtonProps, buttonRef } = useButton(
+		{ disabled, focusableWhenDisabled, native: nativeButton },
+		subSlot(slot, 'btn'),
+	);
+
+	const state: ButtonState = { disabled };
+
+	return useRenderElement(
+		'button',
+		{ className, render, style },
+		{ state, ref: [ref, buttonRef], props: [elementProps, getButtonProps] },
+		subSlot(slot, 're'),
+	);
+}
+
+export namespace Button {
+	export type Props = ButtonProps;
+	export type State = ButtonState;
+}

package/src/context-menu.ts

@@ -0,0 +1,317 @@
+// Ported from .base-ui/packages/react/src/context-menu/ (v1.6.0) — Phase 3f STAGE 4.
+//
+// A `ContextMenu` is a `Menu.Root` opened by right-click or long-press at the pointer, anchored to a
+// synthetic zero-size rect at the cursor instead of to a trigger element. `ContextMenu.Root`
+// provides the `ContextMenuRootContext` that `Menu` has been branching on since stage 1
+// (`parent.type === 'context-menu'`): a modal focus manager, `mousedown`-grace-period outside-press
+// dismissal, `fixed` positioning, `start` alignment, and the item `mouseup` guards that stop the
+// gesture which OPENED the menu from immediately activating an item under the cursor.
+//
+// `ContextMenuRootContext` itself lives in `./utils/ContextMenuRootContext` — it landed as a
+// context-only module in stage 1 so `Menu`'s parent-union branches could be written verbatim ahead
+// of this component.
+//
+// Every part other than `Root` and `Trigger` is `Menu`'s own, re-exported through this namespace
+// exactly as upstream's `context-menu/index.parts.ts` does.
+//
+// octane adaptations: `createElement`, not JSX; `forwardRef` → ref-as-prop; per-call-site `S('…')`
+// slots with `subSlot`; native events, so `event.nativeEvent` collapses to `event`; upstream's
+// `React.TouchEvent`/`React.MouseEvent` are the native types here.
+import { createElement, useState, useRef, useEffect, useMemo, useId } from 'octane';
+
+import { S, subSlot } from './internal';
+import { Menu, MenuRootContext, useMenuRootContext } from './menu';
+import type { MenuRootContextValue } from './menu';
+import { ContextMenuRootContext, useContextMenuRootContext } from './utils/ContextMenuRootContext';
+import type { ContextMenuRootContextValue } from './utils/ContextMenuRootContext';
+import { useRenderElement } from './utils/useRenderElement';
+import { useTimeout } from './utils/useTimeout';
+import { addEventListener } from './utils/addEventListener';
+import { ownerDocument } from './utils/owner';
+import { contains } from './utils/contains';
+import { getTarget, stopEvent } from './utils/composite/list-utils';
+import { createChangeEventDetails, REASONS } from './utils/createChangeEventDetails';
+import { pressableTriggerOpenStateMapping } from './utils/popupStateMapping';
+import { findRootOwnerId } from './utils/findRootOwnerId';
+
+const LONG_PRESS_DELAY = 500;
+
+// --- Root ---------------------------------------------------------------------
+
+/**
+ * A component that creates a context menu activated by right clicking or long pressing.
+ * Doesn't render its own HTML element.
+ */
+function ContextMenuRoot(props: any): any {
+	const slot = S('ContextMenuRoot');
+	const [anchor, setAnchor] = useState<ContextMenuRootContextValue['anchor']>(
+		{
+			getBoundingClientRect() {
+				return DOMRect.fromRect({ width: 0, height: 0, x: 0, y: 0 });
+			},
+		},
+		subSlot(slot, 'anchor'),
+	);
+
+	const backdropRef = useRef<HTMLDivElement | null>(null, subSlot(slot, 'backdrop'));
+	const internalBackdropRef = useRef<HTMLDivElement | null>(null, subSlot(slot, 'ibackdrop'));
+	const actionsRef = useRef<ContextMenuRootContextValue['actionsRef']['current']>(
+		null,
+		subSlot(slot, 'actions'),
+	);
+	const positionerRef = useRef<HTMLElement | null>(null, subSlot(slot, 'positioner'));
+	const allowMouseUpTriggerRef = useRef(true, subSlot(slot, 'amut'));
+	const initialCursorPointRef = useRef<{ x: number; y: number } | null>(
+		null,
+		subSlot(slot, 'cursor'),
+	);
+	// Raw `useId` (no `base-ui-` prefix), matching Base UI's `@base-ui/utils/useId`.
+	const id = useId(subSlot(slot, 'id'));
+
+	const contextValue: ContextMenuRootContextValue = useMemo(
+		() => ({
+			anchor,
+			setAnchor,
+			actionsRef,
+			backdropRef,
+			internalBackdropRef,
+			positionerRef,
+			allowMouseUpTriggerRef,
+			initialCursorPointRef,
+			rootId: id,
+		}),
+		[anchor, id],
+		subSlot(slot, 'ctx'),
+	);
+
+	// The inner `MenuRootContext.Provider value={undefined}` is load-bearing, not defensive: it is
+	// how `MenuRoot` tells "this Menu IS the context menu" apart from "this Menu is nested inside a
+	// ContextMenu.Trigger" (the `contextMenuContext && !parentMenuRootContext` guard).
+	return createElement(ContextMenuRootContext.Provider, {
+		value: contextValue,
+		children: createElement(MenuRootContext.Provider, {
+			value: undefined,
+			children: createElement(Menu.Root, props),
+		}),
+	});
+}
+
+// --- Trigger ------------------------------------------------------------------
+
+/**
+ * An area that opens the menu on right click or long press.
+ * Renders a `<div>` element.
+ */
+function ContextMenuTrigger(componentProps: any): any {
+	const slot = S('ContextMenuTrigger');
+	const { render, className, style, ref: forwardedRef, ...elementProps } = componentProps;
+
+	const {
+		setAnchor,
+		actionsRef,
+		internalBackdropRef,
+		backdropRef,
+		positionerRef,
+		allowMouseUpTriggerRef,
+		initialCursorPointRef,
+		rootId,
+	} = useContextMenuRootContext(false);
+
+	const { store } = useMenuRootContext() as MenuRootContextValue;
+	const open = store.useState('open', subSlot(slot, 'open'));
+	const disabled = store.useState('disabled', subSlot(slot, 'disabled'));
+
+	const triggerRef = useRef<HTMLDivElement | null>(null, subSlot(slot, 'trigger'));
+	const touchPositionRef = useRef<{ x: number; y: number } | null>(null, subSlot(slot, 'touch'));
+	const longPressTimeout = useTimeout(subSlot(slot, 'lp'));
+	const allowMouseUpTimeout = useTimeout(subSlot(slot, 'amu'));
+	const allowMouseUpRef = useRef(false, subSlot(slot, 'amur'));
+
+	function handleLongPress(x: number, y: number, event: MouseEvent | TouchEvent) {
+		const isTouchEvent = event.type.startsWith('touch');
+
+		initialCursorPointRef.current = { x, y };
+
+		setAnchor({
+			getBoundingClientRect() {
+				return DOMRect.fromRect({
+					width: isTouchEvent ? 10 : 0,
+					height: isTouchEvent ? 10 : 0,
+					x,
+					y,
+				});
+			},
+		});
+
+		allowMouseUpRef.current = false;
+		actionsRef.current?.setOpen(true, createChangeEventDetails(REASONS.triggerPress, event));
+
+		allowMouseUpTimeout.start(LONG_PRESS_DELAY, () => {
+			allowMouseUpRef.current = true;
+		});
+	}
+
+	function handleContextMenu(event: MouseEvent) {
+		if (disabled) {
+			return;
+		}
+		allowMouseUpTriggerRef.current = true;
+		stopEvent(event);
+		// octane dispatches NATIVE events, so upstream's `event.nativeEvent` collapses to `event`.
+		handleLongPress(event.clientX, event.clientY, event);
+		const doc = ownerDocument(triggerRef.current);
+
+		addEventListener(
+			doc,
+			'mouseup',
+			(mouseEvent: Event) => {
+				allowMouseUpTriggerRef.current = false;
+
+				if (!allowMouseUpRef.current) {
+					return;
+				}
+
+				allowMouseUpTimeout.clear();
+				allowMouseUpRef.current = false;
+
+				const mouseUpTarget = getTarget(mouseEvent) as Element | null;
+
+				if (contains(positionerRef.current, mouseUpTarget)) {
+					return;
+				}
+
+				if (rootId && mouseUpTarget && findRootOwnerId(mouseUpTarget) === rootId) {
+					return;
+				}
+
+				actionsRef.current?.setOpen(
+					false,
+					createChangeEventDetails(REASONS.cancelOpen, mouseEvent),
+				);
+			},
+			{ once: true },
+		);
+	}
+
+	function handleTouchStart(event: TouchEvent) {
+		if (disabled) {
+			return;
+		}
+		allowMouseUpTriggerRef.current = false;
+		if (event.touches.length === 1) {
+			event.stopPropagation();
+			const touch = event.touches[0];
+			touchPositionRef.current = { x: touch.clientX, y: touch.clientY };
+			longPressTimeout.start(LONG_PRESS_DELAY, () => {
+				if (touchPositionRef.current) {
+					handleLongPress(touchPositionRef.current.x, touchPositionRef.current.y, event);
+				}
+			});
+		}
+	}
+
+	function handleTouchMove(event: TouchEvent) {
+		if (longPressTimeout.isStarted() && touchPositionRef.current && event.touches.length === 1) {
+			const touch = event.touches[0];
+			const moveThreshold = 10;
+
+			const deltaX = Math.abs(touch.clientX - touchPositionRef.current.x);
+			const deltaY = Math.abs(touch.clientY - touchPositionRef.current.y);
+
+			if (deltaX > moveThreshold || deltaY > moveThreshold) {
+				longPressTimeout.clear();
+			}
+		}
+	}
+
+	function handleTouchEnd() {
+		longPressTimeout.clear();
+		touchPositionRef.current = null;
+	}
+
+	useEffect(
+		() => {
+			function handleDocumentContextMenu(event: Event) {
+				if (disabled) {
+					return;
+				}
+
+				const target = getTarget(event);
+				const targetElement = target as HTMLElement | null;
+				if (
+					contains(triggerRef.current, targetElement) ||
+					contains(internalBackdropRef.current, targetElement) ||
+					contains(backdropRef.current, targetElement)
+				) {
+					event.preventDefault();
+				}
+			}
+
+			const doc = ownerDocument(triggerRef.current);
+			return addEventListener(doc, 'contextmenu', handleDocumentContextMenu);
+		},
+		[backdropRef, disabled, internalBackdropRef],
+		subSlot(slot, 'e:ctxmenu'),
+	);
+
+	const state: ContextMenuTriggerState = {
+		open,
+	};
+
+	return useRenderElement(
+		'div',
+		componentProps,
+		{
+			state,
+			ref: [triggerRef, forwardedRef],
+			props: [
+				{
+					onContextMenu: handleContextMenu,
+					onTouchStart: handleTouchStart,
+					onTouchMove: handleTouchMove,
+					onTouchEnd: handleTouchEnd,
+					onTouchCancel: handleTouchEnd,
+					style: {
+						WebkitTouchCallout: 'none',
+					},
+				},
+				elementProps,
+			],
+			stateAttributesMapping: pressableTriggerOpenStateMapping,
+		},
+		subSlot(slot, 're'),
+	);
+}
+
+export interface ContextMenuTriggerState {
+	/** Whether the context menu is currently open. */
+	open: boolean;
+}
+
+// --- Namespace ----------------------------------------------------------------
+
+/**
+ * Mirrors upstream's `context-menu/index.parts.ts`: `Root` and `Trigger` are ContextMenu's own,
+ * everything else is `Menu`'s part re-exported here.
+ */
+export const ContextMenu = {
+	Root: ContextMenuRoot,
+	Trigger: ContextMenuTrigger,
+	Backdrop: Menu.Backdrop,
+	Portal: Menu.Portal,
+	Positioner: Menu.Positioner,
+	Popup: Menu.Popup,
+	Arrow: Menu.Arrow,
+	Group: Menu.Group,
+	GroupLabel: Menu.GroupLabel,
+	Item: Menu.Item,
+	CheckboxItem: Menu.CheckboxItem,
+	CheckboxItemIndicator: Menu.CheckboxItemIndicator,
+	LinkItem: Menu.LinkItem,
+	RadioGroup: Menu.RadioGroup,
+	RadioItem: Menu.RadioItem,
+	RadioItemIndicator: Menu.RadioItemIndicator,
+	SubmenuRoot: Menu.SubmenuRoot,
+	SubmenuTrigger: Menu.SubmenuTrigger,
+	Separator: Menu.Separator,
+};

package/src/csp-provider.ts

@@ -0,0 +1,37 @@
+// Ported from .base-ui/packages/react/src/csp-provider/CSPProvider.tsx (v1.6.0). Provides a
+// default Content Security Policy configuration for Base UI components that require inline
+// `<style>` or `<script>` tags.
+import { createElement, useMemo } from 'octane';
+
+import { S, subSlot } from './internal';
+import { CSPContext } from './utils/CSPContext';
+import type { CSPContextValue } from './utils/CSPContext';
+
+export interface CSPProviderProps {
+	children?: any;
+	/** The nonce value to apply to inline `<style>` and `<script>` tags. */
+	nonce?: string;
+	/**
+	 * Whether inline `<style>` elements created by Base UI components should not be rendered.
+	 * Instead, components must specify the CSS styles via custom class names or other methods.
+	 * @default false
+	 */
+	disableStyleElements?: boolean;
+}
+
+export function CSPProvider(props: CSPProviderProps): any {
+	const slot = S('CSPProvider');
+	const { children, nonce, disableStyleElements } = props;
+
+	const contextValue: CSPContextValue = useMemo(
+		() => ({ nonce, disableStyleElements }),
+		[nonce, disableStyleElements],
+		subSlot(slot, 'ctx'),
+	);
+
+	return createElement(CSPContext.Provider, { value: contextValue, children });
+}
+
+export namespace CSPProvider {
+	export type Props = CSPProviderProps;
+}

package/src/dialog.ts

@@ -9,6 +9,7 @@
 import {
 	createContext,
 	createElement,
+	Fragment,
 	useContext,
 	useMemo,
 	useRef,
@@ -33,7 +34,11 @@ import { useDismiss } from './utils/floating/useDismiss';
 import { useScrollLock } from './utils/useScrollLock';
 import { useOpenChangeComplete } from './utils/useOpenChangeComplete';
 import { useOpenMethodTriggerProps } from './utils/useOpenInteractionType';
-import { triggerOpenStateMapping, popupStateMapping } from './utils/popupStateMapping';
+import {
+	triggerOpenStateMapping,
+	popupStateMapping,
+	CommonPopupDataAttributes,
+} from './utils/popupStateMapping';
 import { transitionStatusMapping } from './utils/useTransitionStatus';
 import type { StateAttributesMapping } from './utils/getStateAttributesProps';
 import { EMPTY_OBJECT } from './utils/empty';
@@ -404,14 +409,7 @@ function DialogInteractions(props: any): any {
 		subSlot(slot, 'pip'),
 	);
 
-	// Renders the Dialog's children (see the note at the `content` call site). No DOM of its own.
-	return props.children ?? null;
-}
-
-// Passthrough used when the interactions aren't mounted, to keep the Provider's children a stable
-// element-descriptor shape (see the note at the `content` call site).
-function DialogChildren(props: any): any {
-	return props.children ?? null;
+	return null;
 }
 
 export function useRenderDialogRoot<Payload>(
@@ -482,19 +480,19 @@ export function useRenderDialogRoot<Payload>(
 	const resolvedChildren =
 		typeof children === 'function' && !isChildrenBlock(children) ? children({ payload }) : children;
 
-	// The Provider's `children` must stay a STABLE shape (always an element descriptor) across
-	// renders: octane's `childrenAsBody` runs a render-FUNCTION child directly in the Provider scope
-	// (owning `scope.slots`) but routes a DESCRIPTOR child through `childSlot(scope, 0)` — alternating
-	// the two across renders (a raw children-block when closed vs a component when open) collides those
-	// slot namespaces and crashes octane's reconciler (see octane bug note). So a no-DOM component
-	// wraps the children in BOTH states: `DialogInteractions` (runs the open-state hooks) when
-	// open/mounted, else `DialogChildren` (a passthrough). Both just render `props.children`.
-	const content = createElement(shouldRenderInteractions ? DialogInteractions : DialogChildren, {
-		store,
-		parentContext: parentDialogRootContext?.store.context,
-		isDrawer,
-		children: resolvedChildren,
-	});
+	// `DialogInteractions` is a headless SIBLING of the children, exactly as Base UI renders it, so
+	// toggling it never disturbs them.
+	const content = [
+		shouldRenderInteractions
+			? createElement(DialogInteractions, {
+					key: 'interactions',
+					store,
+					parentContext: parentDialogRootContext?.store.context,
+					isDrawer,
+				})
+			: null,
+		createElement(Fragment, { key: 'children', children: resolvedChildren }),
+	];
 
 	return createElement(IsDrawerContext.Provider, {
 		value: false,
@@ -844,6 +842,73 @@ function DialogClose(componentProps: any): any {
 	);
 }
 
+// --- Viewport ----------------------------------------------------------------
+
+export const DialogViewportDataAttributes = {
+	open: CommonPopupDataAttributes.open,
+	closed: CommonPopupDataAttributes.closed,
+	startingStyle: CommonPopupDataAttributes.startingStyle,
+	endingStyle: CommonPopupDataAttributes.endingStyle,
+	nested: 'data-nested',
+	nestedDialogOpen: 'data-nested-dialog-open',
+} as const;
+
+const viewportStateAttributesMapping: StateAttributesMapping<any> = {
+	...(popupStateMapping as StateAttributesMapping<any>),
+	...(transitionStatusMapping as StateAttributesMapping<any>),
+	nested(value: boolean) {
+		return value ? { [DialogViewportDataAttributes.nested]: '' } : null;
+	},
+	nestedDialogOpen(value: boolean) {
+		return value ? { [DialogViewportDataAttributes.nestedDialogOpen]: '' } : null;
+	},
+};
+
+// A positioning container for the dialog popup that can be made scrollable.
+function DialogViewport(componentProps: any): any {
+	const slot = S('DialogViewport');
+	const { render, className, style, children, ref, ...elementProps } = componentProps;
+
+	const keepMounted = useDialogPortalContext();
+	const { store } = useDialogRootContext() as DialogRootContextValue;
+
+	const open = store.useState('open', subSlot(slot, 'open'));
+	const nested = store.useState('nested', subSlot(slot, 'nested'));
+	const transitionStatus = store.useState('transitionStatus', subSlot(slot, 'ts'));
+	const nestedOpenDialogCount = store.useState('nestedOpenDialogCount', subSlot(slot, 'nodc'));
+	const mounted = store.useState('mounted', subSlot(slot, 'mounted'));
+
+	const setViewportElement = store.useStateSetter('viewportElement', subSlot(slot, 'sve'));
+
+	const state = {
+		open,
+		nested,
+		transitionStatus,
+		nestedDialogOpen: nestedOpenDialogCount > 0,
+	};
+
+	return useRenderElement(
+		'div',
+		{ render, className, style },
+		{
+			enabled: keepMounted || mounted,
+			state,
+			ref: [ref, setViewportElement],
+			stateAttributesMapping: viewportStateAttributesMapping,
+			props: [
+				{
+					role: 'presentation',
+					hidden: !mounted,
+					style: { pointerEvents: !open ? 'none' : undefined },
+					children,
+				},
+				elementProps,
+			],
+		},
+		subSlot(slot, 're'),
+	);
+}
+
 // --- Namespace ---------------------------------------------------------------
 
 export const Dialog = {
@@ -852,8 +917,10 @@ export const Dialog = {
 	Portal: DialogPortal,
 	Backdrop: DialogBackdrop,
 	Popup: DialogPopup,
+	Viewport: DialogViewport,
 	Title: DialogTitle,
 	Description: DialogDescription,
 	Close: DialogClose,
 	createHandle: createDialogHandle,
+	Handle: DialogHandle,
 };

package/src/direction-provider.ts

@@ -0,0 +1,32 @@
+// Ported from .base-ui/packages/react/src/direction-provider/DirectionProvider.tsx (v1.6.0).
+// Enables RTL behavior for Base UI components.
+//
+// octane adaptation: `utils/DirectionContext` carries the `TextDirection` string DIRECTLY
+// rather than Base UI's `{ direction }` wrapper object, so the provider needs no `useMemo`
+// to stay referentially stable. The context value is never observable in the DOM, and every
+// consumer reads it through `useDirection()`.
+import { createElement } from 'octane';
+
+import { DirectionContext, useDirection } from './utils/DirectionContext';
+import type { TextDirection } from './utils/DirectionContext';
+
+export type { TextDirection };
+export { useDirection };
+
+export interface DirectionProviderProps {
+	children?: any;
+	/**
+	 * The reading direction of the text.
+	 * @default 'ltr'
+	 */
+	direction?: TextDirection;
+}
+
+export function DirectionProvider(props: DirectionProviderProps): any {
+	const { direction = 'ltr' } = props;
+	return createElement(DirectionContext.Provider, { value: direction, children: props.children });
+}
+
+export namespace DirectionProvider {
+	export type Props = DirectionProviderProps;
+}

package/src/index.ts

@@ -5,19 +5,29 @@
 export { Separator } from './separator';
 export { AlertDialog } from './alert-dialog';
 export { Avatar } from './avatar';
+export { Button } from './button';
+export { CSPProvider } from './csp-provider';
+export { DirectionProvider, useDirection } from './direction-provider';
+export type { TextDirection } from './direction-provider';
+export { useMediaQuery } from './unstable-use-media-query';
 export { Checkbox } from './checkbox';
+export { ContextMenu } from './context-menu';
 export { CheckboxGroup } from './checkbox-group';
 export { Dialog } from './dialog';
 export { Field } from './field';
 export { Fieldset } from './fieldset';
 export { Form } from './form';
 export { Input } from './input';
+export { Menu } from './menu';
+export { Menubar } from './menubar';
 export { Meter } from './meter';
 export { NumberField } from './number-field';
 export { Progress } from './progress';
 export { Radio } from './radio';
 export { RadioGroup } from './radio-group';
 export { Popover } from './popover';
+export { PreviewCard } from './preview-card';
+export { Tooltip } from './tooltip';
 export { Slider } from './slider';
 export { Switch } from './switch';
 export { Toggle } from './toggle';