@octanejs/shadcn 0.0.37 → 0.0.38

package/README.md

@@ -1,9 +1,7 @@
 # @octanejs/shadcn
 
-shadcn/ui for the [octane](https://github.com/octanejs/octane) renderer — a port
-of the **Radix base** of [shadcn-ui/ui](https://github.com/shadcn-ui/ui) onto
-octane's hooks and native events, built on
-[`@octanejs/radix`](../radix).
+shadcn/ui for the [octane](https://github.com/octanejs/octane) renderer, with
+Base UI, Radix, and React Aria bases adapted to octane's hooks and native events.
 
 ## Installation
 
@@ -16,7 +14,7 @@ Upstream pin: `shadcn-ui/ui@4baadbc6` + CLI `shadcn@4.14.1`.
 
 ## What ships
 
-- **40 component families (~185 exports)**: the full Tier-1 static set, all 24
+- **44 component families across three bases**: the full Tier-1 static set, all 24
   radix-backed Tier-2 components, and the first Tier-3 composites (Sidebar with
   `useSidebar`/`useIsMobile`, Field), plus `cn()` and the default neutral theme
   tokens (`@octanejs/shadcn/theme.css`).
@@ -34,10 +32,14 @@ Upstream pin: `shadcn-ui/ui@4baadbc6` + CLI `shadcn@4.14.1`.
 
 ## Component coverage
 
-Each primitive base ships the families its primitives support, exactly as upstream's do.
+The coverage table tracks the families ported for each primitive base.
 Switching `style` changes which primitive a component is built on — the `data-slot` contract and
 component names stay identical.
 
+The Base UI wrappers target `@octanejs/base-ui`'s Base UI 1.8.0 API. Select,
+Combobox, Navigation Menu, and Scroll Area primitives are available from
+`@octanejs/base-ui`; their shadcn Base UI wrappers have not been ported yet.
+
 <!-- BEGIN COVERAGE -->
 
 **44 families** — Radix 44/44 · React Aria 33/44 · Base UI 40/44
@@ -69,13 +71,13 @@ component names stay identical.
 | `label` | ✅ | ✅ | ✅ |
 | `menubar` | ✅ | ⛔ | ✅ |
 | `native-select` | ✅ | ✅ | ✅ |
-| `navigation-menu` | ✅ | ⛔ | ⛔ |
+| `navigation-menu` | ✅ | ⛔ | — |
 | `pagination` | ✅ | ✅ | ✅ |
 | `popover` | ✅ | ✅ | ✅ |
 | `progress` | ✅ | ⛔ | ✅ |
 | `radio-group` | ✅ | ✅ | ✅ |
-| `scroll-area` | ✅ | ✅ | ⛔ |
-| `select` | ✅ | ⛔ | ⛔ |
+| `scroll-area` | ✅ | ✅ | — |
+| `select` | ✅ | ⛔ | — |
 | `separator` | ✅ | ✅ | ✅ |
 | `sheet` | ✅ | ✅ | ✅ |
 | `sidebar` | ✅ | ⛔ | ✅ |
@@ -95,9 +97,6 @@ component names stay identical.
 
 | Base | Family | Reason |
 | --- | --- | --- |
-| Base UI | `navigation-menu` | @octanejs/base-ui has no navigation-menu primitive |
-| Base UI | `scroll-area` | @octanejs/base-ui has no scroll-area primitive |
-| Base UI | `select` | @octanejs/base-ui has no select primitive |
 | Base UI | `sonner` | needs next-themes, which has no octane binding |
 | React Aria | `context-menu` | no counterpart in upstream’s aria base |
 | React Aria | `dropdown-menu` | no counterpart in upstream’s aria base |
@@ -143,12 +142,12 @@ same mechanism shadcn uses upstream, where its own registry is
 
 | `style` | Primitives | Families |
 | --- | --- | --- |
-| `base-nova` *(default)* | `@octanejs/base-ui` | 21 |
+| `base-nova` *(default)* | `@octanejs/base-ui` | 40 |
 | `radix-nova` | `@octanejs/radix` | 44 |
 | `aria-nova` | `@octanejs/aria` | 33 |
 
-The bases deliberately ship different family counts, exactly as upstream's do — a base only
-has the families its primitives support. Switching `style` changes which primitive a component
+The bases currently ship different family counts; see the coverage table for remaining ports.
+Switching `style` changes which primitive a component
 is built on; the `data-slot` contract and component names stay identical, so your markup and
 styling do not change.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/shadcn",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -154,23 +154,23 @@
     "clsx": "^2.1.1",
     "tailwind-merge": "3.6.0",
     "@octanejs/aria": "0.0.46",
-    "@octanejs/base-ui": "0.1.50",
+    "@octanejs/base-ui": "0.1.51",
     "@octanejs/lucide": "0.1.47",
-    "@octanejs/radix": "0.1.51",
+    "@octanejs/radix": "0.1.52",
     "@octanejs/sonner": "0.1.47"
   },
   "peerDependencies": {
-    "octane": "^0.1.51 || ^0.2.0"
+    "octane": "^0.2.5"
   },
   "devDependencies": {
-    "@tsrx/react": "^0.2.63",
+    "@tsrx/react": "^0.2.67",
     "esbuild": "^0.28.1",
     "lucide-react": "1.24.0",
     "radix-ui": "^1.6.4",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
     "vitest": "^4.1.10",
-    "octane": "0.2.0"
+    "octane": "0.2.5"
   },
   "scripts": {
     "test": "vitest run",

package/src/bases/base-ui/ui/context-menu.tsrx

@@ -30,21 +30,23 @@ import { cn } from '../../../lib/utils';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 
-export interface BaseUiPositioningProps {
-	/** Forwarded to the Positioner; see the note at the top of this file. */
-	side?: 'top' | 'right' | 'bottom' | 'left';
-	sideOffset?: number;
-	align?: 'start' | 'center' | 'end';
-	alignOffset?: number;
-	anchor?: unknown;
-	positionMethod?: 'absolute' | 'fixed';
-	collisionBoundary?: unknown;
-	collisionPadding?: unknown;
-	collisionAvoidance?: unknown;
-	arrowPadding?: number;
-	sticky?: boolean;
-	disableAnchorTracking?: boolean;
-}
+/** Props routed to the Positioner rather than the popup. */
+export type BaseUiPositioningProps =
+	Pick<
+		ContextMenuPrimitive.Positioner.Props,
+		| 'side'
+		| 'sideOffset'
+		| 'align'
+		| 'alignOffset'
+		| 'anchor'
+		| 'positionMethod'
+		| 'collisionBoundary'
+		| 'collisionPadding'
+		| 'collisionAvoidance'
+		| 'arrowPadding'
+		| 'sticky'
+		| 'disableAnchorTracking'
+	>;
 
 export function ContextMenu(props: Record<string, unknown>) @{
 	<ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
@@ -221,7 +223,10 @@ export function ContextMenuCheckboxItem(props: Props & {
 	</ContextMenuPrimitive.CheckboxItem>
 }
 
-export function ContextMenuRadioItem(props: Props & { inset?: boolean }) @{
+export function ContextMenuRadioItem(props: Omit<
+	ContextMenuPrimitive.RadioItem.Props,
+	'className'
+> & { className?: string; inset?: boolean }) @{
 	const { className, children: _children, inset, ...rest } = props;
 
 	<ContextMenuPrimitive.RadioItem

package/src/bases/base-ui/ui/dialog.tsrx

@@ -10,7 +10,7 @@
 //
 // UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
 // transcribed from upstream's Base UI source.
-import { createElement, type OctaneNode } from 'octane';
+import { type OctaneNode } from 'octane';
 import { Dialog as DialogPrimitive } from '@octanejs/base-ui/dialog';
 import { XIcon } from '@octanejs/lucide';
 
@@ -46,7 +46,8 @@ export function DialogOverlay({ className, ...props }: Props) @{
 	/>
 }
 
-export interface DialogContentProps extends Props {
+export interface DialogContentProps extends Omit<DialogPrimitive.Popup.Props, 'className'> {
+	className?: string;
 	showCloseButton?: boolean;
 }
 
@@ -55,38 +56,30 @@ export function DialogContent({
 	children,
 	showCloseButton = true,
 	...props
-}: DialogContentProps) {
-	return createElement(
-		DialogPrimitive.Portal,
-		{ 'data-slot': 'dialog-portal' },
-		createElement(DialogOverlay, { key: 'overlay' }),
-		createElement(
-			DialogPrimitive.Popup,
-			{
-				key: 'content',
-				'data-slot': 'dialog-content',
-				className: cn(
-					'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-					className,
-				),
-				...props,
-			},
-			children,
-			showCloseButton
-				? createElement(DialogPrimitive.Close, {
-						key: 'close',
-						'data-slot': 'dialog-close',
-						className: 'absolute top-2 right-2',
-						render: createElement(
-							Button,
-							{ variant: 'ghost', size: 'icon-sm' },
-							createElement(XIcon, { key: 'icon' }),
-							createElement('span', { key: 'sr', className: 'sr-only' }, 'Close'),
-						),
-					})
-				: null,
-		),
-	);
+}: DialogContentProps) @{
+	<DialogPrimitive.Portal data-slot="dialog-portal">
+		<DialogOverlay />
+		<DialogPrimitive.Popup
+			data-slot="dialog-content"
+			className={cn(
+				'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			@if (showCloseButton) {
+				<DialogPrimitive.Close
+					data-slot="dialog-close"
+					className="absolute top-2 right-2"
+					render={<Button variant="ghost" size="icon-sm">
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</Button>}
+				/>
+			}
+		</DialogPrimitive.Popup>
+	</DialogPrimitive.Portal>
 }
 
 export function DialogHeader({ className, ...props }: Props) @{
@@ -109,11 +102,9 @@ export function DialogFooter(props: DialogFooterProps) @{
 		{...rest}
 	>
 		{props.children}
-		{showCloseButton
-			? createElement(DialogPrimitive.Close, {
-					render: createElement(Button, { variant: 'outline' }, 'Close'),
-				})
-			: null}
+		@if (showCloseButton) {
+			<DialogPrimitive.Close render={<Button variant="outline">Close</Button>} />
+		}
 	</div>
 }
 

package/src/bases/base-ui/ui/dropdown-menu.tsrx

@@ -57,21 +57,23 @@ export function DropdownMenuTrigger(props: Record<string, unknown>) @{
 	<MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
 }
 
-export interface BaseUiPositioningProps {
-	/** Forwarded to the Positioner; see the note at the top of this file. */
-	side?: 'top' | 'right' | 'bottom' | 'left';
-	sideOffset?: number;
-	align?: 'start' | 'center' | 'end';
-	alignOffset?: number;
-	anchor?: unknown;
-	positionMethod?: 'absolute' | 'fixed';
-	collisionBoundary?: unknown;
-	collisionPadding?: unknown;
-	collisionAvoidance?: unknown;
-	arrowPadding?: number;
-	sticky?: boolean;
-	disableAnchorTracking?: boolean;
-}
+/** Props routed to the Positioner rather than the popup. */
+export type BaseUiPositioningProps =
+	Pick<
+		MenuPrimitive.Positioner.Props,
+		| 'side'
+		| 'sideOffset'
+		| 'align'
+		| 'alignOffset'
+		| 'anchor'
+		| 'positionMethod'
+		| 'collisionBoundary'
+		| 'collisionPadding'
+		| 'collisionAvoidance'
+		| 'arrowPadding'
+		| 'sticky'
+		| 'disableAnchorTracking'
+	>;
 
 export interface DropdownMenuContentProps extends Props, BaseUiPositioningProps {}
 
@@ -170,7 +172,10 @@ export function DropdownMenuRadioGroup(props: Record<string, unknown>) @{
 	<MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
 }
 
-export function DropdownMenuRadioItem(props: Props & { inset?: boolean }) @{
+export function DropdownMenuRadioItem(props: Omit<MenuPrimitive.RadioItem.Props, 'className'> & {
+	className?: string;
+	inset?: boolean;
+}) @{
 	const { className, children: _children, inset, ...rest } = props;
 
 	<MenuPrimitive.RadioItem

package/src/bases/base-ui/ui/hover-card.tsrx

@@ -28,21 +28,23 @@ import { PreviewCard as PreviewCardPrimitive } from '@octanejs/base-ui/preview-c
 
 import { cn } from '../../../lib/utils';
 
-export interface BaseUiPositioningProps {
-	/** Forwarded to the Positioner; see the note at the top of this file. */
-	side?: 'top' | 'right' | 'bottom' | 'left';
-	sideOffset?: number;
-	align?: 'start' | 'center' | 'end';
-	alignOffset?: number;
-	anchor?: unknown;
-	positionMethod?: 'absolute' | 'fixed';
-	collisionBoundary?: unknown;
-	collisionPadding?: unknown;
-	collisionAvoidance?: unknown;
-	arrowPadding?: number;
-	sticky?: boolean;
-	disableAnchorTracking?: boolean;
-}
+/** Props routed to the Positioner rather than the popup. */
+export type BaseUiPositioningProps =
+	Pick<
+		PreviewCardPrimitive.Positioner.Props,
+		| 'side'
+		| 'sideOffset'
+		| 'align'
+		| 'alignOffset'
+		| 'anchor'
+		| 'positionMethod'
+		| 'collisionBoundary'
+		| 'collisionPadding'
+		| 'collisionAvoidance'
+		| 'arrowPadding'
+		| 'sticky'
+		| 'disableAnchorTracking'
+	>;
 
 export function HoverCard(props: Record<string, unknown>) @{
 	<PreviewCardPrimitive.Root data-slot="hover-card" {...props} />

package/src/bases/base-ui/ui/menubar.tsrx

@@ -33,21 +33,23 @@ import { cn } from '../../../lib/utils';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 
-export interface BaseUiPositioningProps {
-	/** Forwarded to the Positioner; see the note at the top of this file. */
-	side?: 'top' | 'right' | 'bottom' | 'left';
-	sideOffset?: number;
-	align?: 'start' | 'center' | 'end';
-	alignOffset?: number;
-	anchor?: unknown;
-	positionMethod?: 'absolute' | 'fixed';
-	collisionBoundary?: unknown;
-	collisionPadding?: unknown;
-	collisionAvoidance?: unknown;
-	arrowPadding?: number;
-	sticky?: boolean;
-	disableAnchorTracking?: boolean;
-}
+/** Props routed to the Positioner rather than the popup. */
+export type BaseUiPositioningProps =
+	Pick<
+		MenuPrimitive.Positioner.Props,
+		| 'side'
+		| 'sideOffset'
+		| 'align'
+		| 'alignOffset'
+		| 'anchor'
+		| 'positionMethod'
+		| 'collisionBoundary'
+		| 'collisionPadding'
+		| 'collisionAvoidance'
+		| 'arrowPadding'
+		| 'sticky'
+		| 'disableAnchorTracking'
+	>;
 
 export function Menubar({ className, ...props }: Props) @{
 	<MenubarPrimitive
@@ -170,7 +172,10 @@ export function MenubarCheckboxItem(props: Props & {
 	</MenuPrimitive.CheckboxItem>
 }
 
-export function MenubarRadioItem(props: Props & { inset?: boolean }) @{
+export function MenubarRadioItem(props: Omit<MenuPrimitive.RadioItem.Props, 'className'> & {
+	className?: string;
+	inset?: boolean;
+}) @{
 	const { className, children: _children, inset, ...rest } = props;
 
 	<MenuPrimitive.RadioItem

package/src/bases/base-ui/ui/popover.tsrx

@@ -41,21 +41,23 @@ export function PopoverTrigger(props: Record<string, unknown>) @{
 	<PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
 }
 
-export interface BaseUiPositioningProps {
-	/** Forwarded to the Positioner; see the note at the top of this file. */
-	side?: 'top' | 'right' | 'bottom' | 'left';
-	sideOffset?: number;
-	align?: 'start' | 'center' | 'end';
-	alignOffset?: number;
-	anchor?: unknown;
-	positionMethod?: 'absolute' | 'fixed';
-	collisionBoundary?: unknown;
-	collisionPadding?: unknown;
-	collisionAvoidance?: unknown;
-	arrowPadding?: number;
-	sticky?: boolean;
-	disableAnchorTracking?: boolean;
-}
+/** Props routed to the Positioner rather than the popup. */
+export type BaseUiPositioningProps =
+	Pick<
+		PopoverPrimitive.Positioner.Props,
+		| 'side'
+		| 'sideOffset'
+		| 'align'
+		| 'alignOffset'
+		| 'anchor'
+		| 'positionMethod'
+		| 'collisionBoundary'
+		| 'collisionPadding'
+		| 'collisionAvoidance'
+		| 'arrowPadding'
+		| 'sticky'
+		| 'disableAnchorTracking'
+	>;
 
 export interface PopoverContentProps extends Record<string, unknown>, BaseUiPositioningProps {
 	className?: string;

package/src/bases/base-ui/ui/slider.tsrx

@@ -23,29 +23,26 @@
 // `thumbAlignment="edge"` is forwarded as upstream does: it insets the thumb so the two extremes
 // sit flush with the ends of the track instead of overhanging them.
 //
-// Thumbs are composed with createElement for the same reason as the radix base: one per entry of
-// `_values`, and mapped descriptors are octane's channel for computed children.
-import { createElement, useMemo } from 'octane';
+// One keyed thumb is rendered for each value.
+import { useMemo } from 'octane';
 import { Slider as SliderPrimitive } from '@octanejs/base-ui/slider';
 
 import { cn } from '../../../lib/utils';
 
-export interface SliderProps extends Record<string, unknown> {
+export interface SliderProps<
+	Value extends number | readonly number[] = number | readonly number[],
+> extends Omit<SliderPrimitive.Root.Props<Value>, 'className'> {
 	className?: string;
-	defaultValue?: number | number[];
-	value?: number | number[];
-	min?: number;
-	max?: number;
 }
 
-export function Slider({
+export function Slider<Value extends number | readonly number[]>({
 	className,
 	defaultValue,
 	value,
 	min = 0,
 	max = 100,
 	...props
-}: SliderProps) {
+}: SliderProps<Value>) @{
 	// This drives HOW MANY THUMBS get rendered, so a value shape it fails to recognise is a visible
 	// bug rather than a type nicety.
 	//
@@ -67,45 +64,37 @@ export function Slider({
 		return [min, max];
 	}, [value, defaultValue, min, max]);
 
-	return createElement(
-		SliderPrimitive.Root,
-		{
-			className: cn(
-				'data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full',
-				className,
-			),
-			'data-slot': 'slider',
-			defaultValue,
-			value,
-			min,
-			max,
-			thumbAlignment: 'edge',
-			...props,
-		},
-		createElement(
-			SliderPrimitive.Control,
-			{
-				className: 'relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-			},
-			createElement(
-				SliderPrimitive.Track,
-				{
-					'data-slot': 'slider-track',
-					className: 'relative grow overflow-hidden rounded-full bg-muted select-none data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1',
-				},
-				createElement(SliderPrimitive.Indicator, {
-					'data-slot': 'slider-range',
-					className: 'bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
-				}),
-			),
-			...Array.from(
-				{ length: _values.length },
-				(_, index) => createElement(SliderPrimitive.Thumb, {
-					'data-slot': 'slider-thumb',
-					key: index,
-					className: 'relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50',
-				}),
-			),
-		),
-	);
+	<SliderPrimitive.Root
+		className={cn(
+			'data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full',
+			className,
+		)}
+		data-slot="slider"
+		defaultValue={defaultValue}
+		value={value}
+		min={min}
+		max={max}
+		thumbAlignment="edge"
+		{...props}
+	>
+		<SliderPrimitive.Control
+			className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"
+		>
+			<SliderPrimitive.Track
+				data-slot="slider-track"
+				className="relative grow overflow-hidden rounded-full bg-muted select-none data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1"
+			>
+				<SliderPrimitive.Indicator
+					data-slot="slider-range"
+					className="bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+				/>
+			</SliderPrimitive.Track>
+			@for (const index of _values.keys(); key index) {
+				<SliderPrimitive.Thumb
+					data-slot="slider-thumb"
+					className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+				/>
+			}
+		</SliderPrimitive.Control>
+	</SliderPrimitive.Root>
 }

package/src/bases/base-ui/ui/tabs.tsrx

@@ -2,17 +2,8 @@
 // class strings verbatim. Runs on @octanejs/base-ui's `Tabs`, which was ported for this family:
 // Root / List / Tab / Panel.
 //
-// ONE DEPARTURE FROM THE SOURCE, FORCED BY A VERSION SKEW. Upstream writes its orientation variants
-// as `data-horizontal:` / `data-vertical:` — bare attributes. The pinned @octanejs/base-ui (v1.6.0)
-// converts the orientation state to `data-orientation="horizontal" | "vertical"` instead, so those
-// utilities would match nothing: the root would never switch to a column, and every
-// `group-data-horizontal/tabs:` and `group-data-vertical/tabs:` selector on the trigger would be
-// dead. They are written as `data-[orientation=…]:` here.
-//
-// This is the SAME skew the slider hit, and it is not a porting mistake in either layer — shadcn's
-// Base UI sources target a newer Base UI than the pin this package binds. The primitive stays
-// faithful to its pin; the adaptation belongs here. When the binding moves to a release that emits
-// the bare attributes, these revert to upstream's spelling.
+// Base UI 1.8 emits `data-orientation="horizontal" | "vertical"`, so orientation
+// selectors target the attribute value on the root, list, trigger, and panel.
 //
 // `data-active` on the trigger needs no such treatment: the pin emits it exactly as upstream's
 // classes expect (verified by rendering).
@@ -23,9 +14,9 @@ import { Tabs as TabsPrimitive } from '@octanejs/base-ui/tabs';
 
 import { cn } from '../../../lib/utils';
 
-type Props = { className?: string } & Record<string, unknown>;
+type StyledProps<P> = Omit<P, 'className'> & { className?: string };
 
-export interface TabsProps extends Props {
+export interface TabsProps extends StyledProps<TabsPrimitive.Root.Props> {
 	orientation?: 'horizontal' | 'vertical';
 }
 
@@ -54,7 +45,7 @@ export const tabsListVariants = cva(
 	},
 );
 
-export interface TabsListProps extends Props {
+export interface TabsListProps extends StyledProps<TabsPrimitive.List.Props> {
 	variant?: VariantProps<typeof tabsListVariants>['variant'];
 }
 
@@ -67,7 +58,7 @@ export function TabsList({ className, variant = 'default', ...props }: TabsListP
 	/>
 }
 
-export function TabsTrigger({ className, ...props }: Props) @{
+export function TabsTrigger({ className, ...props }: StyledProps<TabsPrimitive.Tab.Props>) @{
 	<TabsPrimitive.Tab
 		data-slot="tabs-trigger"
 		className={cn(
@@ -81,7 +72,7 @@ export function TabsTrigger({ className, ...props }: Props) @{
 	/>
 }
 
-export function TabsContent({ className, ...props }: Props) @{
+export function TabsContent({ className, ...props }: StyledProps<TabsPrimitive.Panel.Props>) @{
 	<TabsPrimitive.Panel
 		data-slot="tabs-content"
 		className={cn('flex-1 text-sm outline-none', className)}

package/src/bases/base-ui/ui/toggle-group.tsrx

@@ -20,13 +20,9 @@
 // The pressed dialect is `data-pressed`, not radix's `data-[state=on]` — see toggle.tsrx, whose
 // `toggleVariants` this file reuses, so the two bases cannot drift apart.
 //
-// ToggleGroup is composed with createElement: the consumer's children must sit INSIDE the context
-// Provider, and opaque compiled .tsrx children can only flow through the props.children channel
-// (see breadcrumb.tsrx's comment).
-//
 // UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
 // transcribed from upstream's Base UI source.
-import { createContext, createElement, useContext, type OctaneNode } from 'octane';
+import { createContext, useContext, type CSSProperties, type OctaneNode } from 'octane';
 import { type VariantProps } from 'class-variance-authority';
 import { ToggleGroup as ToggleGroupPrimitive } from '@octanejs/base-ui/toggle-group';
 import { Toggle as TogglePrimitive } from '@octanejs/base-ui/toggle';
@@ -65,32 +61,26 @@ export function ToggleGroup({
 	type,
 	children,
 	...props
-}: ToggleGroupProps) {
-	return createElement(
-		ToggleGroupPrimitive,
-		{
-			'data-slot': 'toggle-group',
-			'data-variant': variant,
-			'data-size': size,
-			'data-spacing': spacing,
-			// Forwarded to the primitive: it drives the arrow-key axis (a vertical group must
-			// ignore left/right and use up/down). The primitive also emits `data-orientation`
-			// itself, so unlike the radix base this is not set by hand.
-			orientation,
-			multiple: type === 'multiple',
-			style: { '--gap': spacing },
-			className: cn(
-				'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
-				className,
-			),
-			...props,
-		},
-		createElement(
-			ToggleGroupContext.Provider,
-			{ value: { variant, size, spacing, orientation } },
-			children,
-		),
-	);
+}: ToggleGroupProps) @{
+	const style: CSSProperties & { '--gap': number } = { '--gap': spacing };
+	<ToggleGroupPrimitive
+		data-slot="toggle-group"
+		data-variant={variant}
+		data-size={size}
+		data-spacing={spacing}
+		orientation={orientation}
+		multiple={type === 'multiple'}
+		style={style}
+		className={cn(
+			'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
+			className,
+		)}
+		{...props}
+	>
+		<ToggleGroupContext.Provider
+			value={{ variant, size, spacing, orientation }}
+		>{children}</ToggleGroupContext.Provider>
+	</ToggleGroupPrimitive>
 }
 
 export interface ToggleGroupItemProps extends Record<string, unknown> {

package/src/bases/base-ui/ui/tooltip.tsrx

@@ -39,21 +39,23 @@ export interface TooltipContentProps extends Record<string, unknown> {
 	children?: OctaneNode;
 }
 
-export interface BaseUiPositioningProps {
-	/** Forwarded to the Positioner; see the note at the top of this file. */
-	side?: 'top' | 'right' | 'bottom' | 'left';
-	sideOffset?: number;
-	align?: 'start' | 'center' | 'end';
-	alignOffset?: number;
-	anchor?: unknown;
-	positionMethod?: 'absolute' | 'fixed';
-	collisionBoundary?: unknown;
-	collisionPadding?: unknown;
-	collisionAvoidance?: unknown;
-	arrowPadding?: number;
-	sticky?: boolean;
-	disableAnchorTracking?: boolean;
-}
+/** Props routed to the Positioner rather than the popup. */
+export type BaseUiPositioningProps =
+	Pick<
+		TooltipPrimitive.Positioner.Props,
+		| 'side'
+		| 'sideOffset'
+		| 'align'
+		| 'alignOffset'
+		| 'anchor'
+		| 'positionMethod'
+		| 'collisionBoundary'
+		| 'collisionPadding'
+		| 'collisionAvoidance'
+		| 'arrowPadding'
+		| 'sticky'
+		| 'disableAnchorTracking'
+	>;
 
 export function TooltipContent({
 	className,