@octanejs/shadcn 0.0.38 → 0.0.40

package/{LICENSE → LICENSE.upstream}

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Dominic Gannaway
+Copyright (c) 2023 shadcn
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -10,7 +10,7 @@ npm install @octanejs/shadcn
 pnpm add @octanejs/shadcn
 ```
 
-Upstream pin: `shadcn-ui/ui@4baadbc6` + CLI `shadcn@4.14.1`.
+Upstream pin: `shadcn-ui/ui@7c9eaba1` + CLI `shadcn@4.21.0`.
 
 ## What ships
 
@@ -33,16 +33,20 @@ Upstream pin: `shadcn-ui/ui@4baadbc6` + CLI `shadcn@4.14.1`.
 ## Component coverage
 
 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.
+Switching `style` changes which primitive a component uses. Each base retains its
+upstream API; for example, Base UI Navigation Menu exposes a Positioner that owns
+its viewport, and Base UI Select aliases its hostless Root.
 
-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.
+The Base UI wrappers target `@octanejs/base-ui`'s Base UI 1.8.0 API, including
+Select, Navigation Menu, and Scroll Area from the 4.21.0 registry with Nova
+utilities. Combobox is outside this package's current family inventory.
+
+All three bases use `cn@0.2.6`, matching the upstream update. Existing Octane
+adaptations and styling remain intact; `@octanejs/shadcn/cn` re-exports the same helper.
 
 <!-- BEGIN COVERAGE -->
 
-**44 families** — Radix 44/44 · React Aria 33/44 · Base UI 40/44
+**44 families** — Radix 44/44 · React Aria 33/44 · Base UI 43/44
 
 ✅ ported · — not ported yet (fair game) · ⛔ blocked, see notes below
 
@@ -71,13 +75,13 @@ Combobox, Navigation Menu, and Scroll Area primitives are available from
 | `label` | ✅ | ✅ | ✅ |
 | `menubar` | ✅ | ⛔ | ✅ |
 | `native-select` | ✅ | ✅ | ✅ |
-| `navigation-menu` | ✅ | ⛔ | — |
+| `navigation-menu` | ✅ | ⛔ | ✅ |
 | `pagination` | ✅ | ✅ | ✅ |
 | `popover` | ✅ | ✅ | ✅ |
 | `progress` | ✅ | ⛔ | ✅ |
 | `radio-group` | ✅ | ✅ | ✅ |
-| `scroll-area` | ✅ | ✅ | — |
-| `select` | ✅ | ⛔ | — |
+| `scroll-area` | ✅ | ✅ | ✅ |
+| `select` | ✅ | ⛔ | ✅ |
 | `separator` | ✅ | ✅ | ✅ |
 | `sheet` | ✅ | ✅ | ✅ |
 | `sidebar` | ✅ | ⛔ | ✅ |
@@ -142,7 +146,7 @@ same mechanism shadcn uses upstream, where its own registry is
 
 | `style` | Primitives | Families |
 | --- | --- | --- |
-| `base-nova` *(default)* | `@octanejs/base-ui` | 40 |
+| `base-nova` *(default)* | `@octanejs/base-ui` | 43 |
 | `radix-nova` | `@octanejs/radix` | 44 |
 | `aria-nova` | `@octanejs/aria` | 33 |
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@octanejs/shadcn",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "license": "MIT",
   "type": "module",
   "engines": {
     "node": ">=22.22.2"
   },
-  "description": "shadcn/ui for the octane renderer — the Radix-base shadcn component distribution ported onto octane: cva-variant components preserving the upstream data-slot/class contract, built on @octanejs/radix, published as importable source with a shadcn-CLI-compatible registry planned.",
+  "description": "shadcn/ui components for Octane, with Base UI, Radix, and React Aria implementations and an installable source registry.",
   "author": {
     "name": "Dominic Gannaway",
     "email": "dg@domgan.com"
@@ -21,7 +21,8 @@
   },
   "files": [
     "src",
-    "README.md"
+    "README.md",
+    "LICENSE.upstream"
   ],
   "sideEffects": [
     "./src/styles/theme.css"
@@ -127,10 +128,13 @@
     "./base-ui/Label": "./src/bases/base-ui/ui/label.tsrx",
     "./base-ui/Menubar": "./src/bases/base-ui/ui/menubar.tsrx",
     "./base-ui/NativeSelect": "./src/bases/base-ui/ui/native-select.tsrx",
+    "./base-ui/NavigationMenu": "./src/bases/base-ui/ui/navigation-menu.tsrx",
     "./base-ui/Pagination": "./src/bases/base-ui/ui/pagination.tsrx",
     "./base-ui/Popover": "./src/bases/base-ui/ui/popover.tsrx",
     "./base-ui/Progress": "./src/bases/base-ui/ui/progress.tsrx",
     "./base-ui/RadioGroup": "./src/bases/base-ui/ui/radio-group.tsrx",
+    "./base-ui/ScrollArea": "./src/bases/base-ui/ui/scroll-area.tsrx",
+    "./base-ui/Select": "./src/bases/base-ui/ui/select.tsrx",
     "./base-ui/Separator": "./src/bases/base-ui/ui/separator.tsrx",
     "./base-ui/Sheet": "./src/bases/base-ui/ui/sheet.tsrx",
     "./base-ui/Sidebar": "./src/bases/base-ui/ui/sidebar.tsrx",
@@ -151,10 +155,9 @@
   },
   "dependencies": {
     "class-variance-authority": "0.7.1",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "3.6.0",
-    "@octanejs/aria": "0.0.46",
-    "@octanejs/base-ui": "0.1.51",
+    "cn": "0.2.6",
+    "@octanejs/aria": "0.0.48",
+    "@octanejs/base-ui": "0.1.52",
     "@octanejs/lucide": "0.1.47",
     "@octanejs/radix": "0.1.52",
     "@octanejs/sonner": "0.1.47"
@@ -163,14 +166,18 @@
     "octane": "^0.2.5"
   },
   "devDependencies": {
-    "@tsrx/react": "^0.2.67",
+    "@base-ui/react": "1.8.0",
+    "@tsrx/react": "^0.2.71",
+    "@types/react": "^19.2.17",
+    "clsx": "^2.1.1",
     "esbuild": "^0.28.1",
     "lucide-react": "1.24.0",
     "radix-ui": "^1.6.4",
     "react": "19.2.7",
     "react-dom": "19.2.7",
+    "tailwind-merge": "3.6.0",
     "vitest": "^4.1.10",
-    "octane": "0.2.5"
+    "octane": "0.2.8"
   },
   "scripts": {
     "test": "vitest run",

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

@@ -12,7 +12,7 @@
 import { Accordion as AccordionPrimitive } from '@octanejs/base-ui/accordion';
 import { ChevronDownIcon, ChevronUpIcon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export function Accordion({ className, ...props }: Record<string, any>) @{
 	<AccordionPrimitive.Root

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

@@ -17,7 +17,7 @@
 // props.children channel.
 import { AlertDialog as AlertDialogPrimitive } from '@octanejs/base-ui/alert-dialog';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { DivProps } from '../../../lib/types';
 import { Button } from './button.tsrx';
 

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

@@ -10,7 +10,7 @@
 // interleave, so every part uses the `@{ … }` shorthand.
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { DivProps } from '../../../lib/types';
 
 export const alertVariants = cva(

package/src/bases/base-ui/ui/aspect-ratio.tsrx

@@ -5,7 +5,7 @@
 // `alert` was confirmed byte-identical between the two bases, which is why this is plausible —
 // but it is not proof, and the bases DO diverge elsewhere. Diff the class strings against the
 // upstream source before treating this as ported.
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { DivProps } from '../../../lib/types';
 
 export interface AspectRatioProps extends DivProps {

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

@@ -13,7 +13,7 @@
 // transcribed from upstream's Base UI source.
 import { Avatar as AvatarPrimitive } from '@octanejs/base-ui/avatar';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type Props = { className?: string } & Record<string, unknown>;
 

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

@@ -18,7 +18,7 @@
 // spread `badgeVariants({ variant })` onto it directly, which is what the class export is for.
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export const badgeVariants = cva(

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

@@ -26,7 +26,7 @@
 import { ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
 import { type OctaneNode } from 'octane';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type Props = { className?: string } & Record<string, unknown>;
 

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

@@ -15,7 +15,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Button as ButtonPrimitive } from '@octanejs/base-ui/button';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export const buttonVariants = cva(
 	'group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',

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

@@ -3,7 +3,7 @@
 // UNVERIFIED PROVENANCE: derived from this package's React Aria base rather than transcribed
 // from upstream's `bases/base-ui/ui/card.tsx`, which was not available at port time.
 // Diff the class strings against the upstream source before treating this as ported.
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { DivProps } from '../../../lib/types';
 
 export interface CardProps extends DivProps {

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

@@ -18,7 +18,7 @@
 import { Checkbox as CheckboxPrimitive } from '@octanejs/base-ui/checkbox';
 import { CheckIcon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export interface CheckboxProps extends Record<string, unknown> {
 	className?: string;

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

@@ -26,7 +26,7 @@ import { type OctaneNode } from 'octane';
 import { ContextMenu as ContextMenuPrimitive } from '@octanejs/base-ui/context-menu';
 import { CheckIcon, ChevronRightIcon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 

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

@@ -14,7 +14,7 @@ import { type OctaneNode } from 'octane';
 import { Dialog as DialogPrimitive } from '@octanejs/base-ui/dialog';
 import { XIcon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import { Button } from './button.tsrx';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;

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

@@ -41,7 +41,7 @@ import { type OctaneNode } from 'octane';
 import { Menu as MenuPrimitive } from '@octanejs/base-ui/menu';
 import { CheckIcon, ChevronRightIcon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 

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

@@ -5,7 +5,7 @@
 // Diff the class strings against the upstream source before treating this as ported.
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { DivProps, HostProps } from '../../../lib/types';
 
 export function Empty({ className, ...props }: DivProps) @{

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

@@ -19,7 +19,7 @@
 import { createElement, useMemo, type OctaneNode } from 'octane';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import { Label } from './label.tsrx';
 import { Separator } from './separator.tsrx';
 

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

@@ -26,7 +26,7 @@
 import { createElement } from 'octane';
 import { PreviewCard as PreviewCardPrimitive } from '@octanejs/base-ui/preview-card';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 /** Props routed to the Positioner rather than the popup. */
 export type BaseUiPositioningProps =

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

@@ -13,7 +13,7 @@
 // keeps its commit-on-blur meaning.
 import { Input as InputPrimitive } from '@octanejs/base-ui/input';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export function Input({ className, type, ...props }: Record<string, any>) @{
 	<InputPrimitive

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

@@ -13,7 +13,7 @@
 // apply `itemVariants({ variant, size })` directly, which is what the class export is for.
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import { Separator } from './separator.tsrx';
 
 type DivProps = { className?: string } & Record<string, unknown>;

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

@@ -4,7 +4,7 @@
 //
 // UNVERIFIED PROVENANCE: class strings taken from this package's React Aria base rather than
 // transcribed from upstream's Base UI source.
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export function Kbd({ className, ...props }: HostProps<'kbd'>) @{

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

@@ -16,7 +16,7 @@
 // UNVERIFIED PROVENANCE: the class string is taken from this package's React Aria base rather
 // than transcribed from upstream's Base UI source. It carries one utility the Radix base omits
 // (`peer-data-disabled:opacity-50`).
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export function Label({ className, ...props }: HostProps<'label'>) @{

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

@@ -29,7 +29,7 @@ import { Menubar as MenubarPrimitive } from '@octanejs/base-ui/menubar';
 import { Menu as MenuPrimitive } from '@octanejs/base-ui/menu';
 import { CheckIcon, ChevronRightIcon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 

package/src/bases/base-ui/ui/native-select.tsrx

@@ -9,7 +9,7 @@
 // `onChange` handlers are passed through unrenamed.
 import { ChevronDownIcon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export type NativeSelectProps =

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

@@ -0,0 +1,137 @@
+// Adapted from shadcn/ui 4.21.0 (7c9eaba1), Base UI with the Nova style.
+// MIT: see LICENSE.upstream. Octane uses native events and refs as props.
+import * as React from 'octane';
+import { ChevronDownIcon } from '@octanejs/lucide';
+import { NavigationMenu as NavigationMenuPrimitive } from '@octanejs/base-ui/navigation-menu';
+import { cva } from 'class-variance-authority';
+import { cn } from 'cn';
+
+function NavigationMenu({
+	align = 'start',
+	className,
+	children,
+	...props
+}: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>) {
+	return <NavigationMenuPrimitive.Root
+		data-slot="navigation-menu"
+		className={cn(
+			'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<NavigationMenuPositioner align={align} />
+	</NavigationMenuPrimitive.Root>;
+}
+
+function NavigationMenuList({ className, ...props }: React.ComponentPropsWithRef<
+	typeof NavigationMenuPrimitive.List
+>) {
+	return <NavigationMenuPrimitive.List
+		data-slot="navigation-menu-list"
+		className={cn('gap-0 group flex flex-1 list-none items-center justify-center', className)}
+		{...props}
+	/>;
+}
+
+function NavigationMenuItem({ className, ...props }: React.ComponentPropsWithRef<
+	typeof NavigationMenuPrimitive.Item
+>) {
+	return <NavigationMenuPrimitive.Item
+		data-slot="navigation-menu-item"
+		className={cn('relative', className)}
+		{...props}
+	/>;
+}
+
+const navigationMenuTriggerStyle = cva(
+	'hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none',
+);
+
+function NavigationMenuTrigger({
+	className,
+	children,
+	...props
+}: NavigationMenuPrimitive.Trigger.Props) {
+	return <NavigationMenuPrimitive.Trigger
+		data-slot="navigation-menu-trigger"
+		className={cn(navigationMenuTriggerStyle(), 'group', className)}
+		{...props}
+	>
+		{children}
+		{' '}
+		<ChevronDownIcon
+			className="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+			aria-hidden="true"
+		/>
+	</NavigationMenuPrimitive.Trigger>;
+}
+
+function NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.Content.Props) {
+	return <NavigationMenuPrimitive.Content
+		data-slot="navigation-menu-content"
+		className={cn(
+			'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+function NavigationMenuPositioner({
+	className,
+	side = 'bottom',
+	sideOffset = 8,
+	align = 'start',
+	alignOffset = 0,
+	...props
+}: NavigationMenuPrimitive.Positioner.Props) {
+	return <NavigationMenuPrimitive.Portal>
+		<NavigationMenuPrimitive.Positioner
+			side={side}
+			sideOffset={sideOffset}
+			align={align}
+			alignOffset={alignOffset}
+			className={cn(
+				'ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] data-instant:transition-none',
+				className,
+			)}
+			{...props}
+		>
+			<NavigationMenuPrimitive.Popup
+				className="bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]"
+			>
+				<NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
+			</NavigationMenuPrimitive.Popup>
+		</NavigationMenuPrimitive.Positioner>
+	</NavigationMenuPrimitive.Portal>;
+}
+
+function NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props) {
+	return <NavigationMenuPrimitive.Link
+		data-slot="navigation-menu-link"
+		className={cn(
+			'data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*=\'size-\'])]:size-4',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+function NavigationMenuIndicator({ className, ...props }: React.ComponentPropsWithRef<
+	typeof NavigationMenuPrimitive.Icon
+>) {
+	return <NavigationMenuPrimitive.Icon
+		data-slot="navigation-menu-indicator"
+		className={cn(
+			'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden',
+			className,
+		)}
+		{...props}
+	>
+		<div className="bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45" />
+	</NavigationMenuPrimitive.Icon>;
+}
+
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuPositioner };

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

@@ -21,7 +21,7 @@
 import { createElement, type OctaneNode } from 'octane';
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import { Button, type ButtonProps } from './button.tsrx';
 
 type Props = { className?: string } & Record<string, unknown>;

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

@@ -29,7 +29,7 @@
 import { createElement } from 'octane';
 import { Popover as PopoverPrimitive } from '@octanejs/base-ui/popover';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type Props = { className?: string } & Record<string, unknown>;
 

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

@@ -21,7 +21,7 @@
 // Indicator to match the extra part.
 import { Progress as ProgressPrimitive } from '@octanejs/base-ui/progress';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export interface ProgressProps extends Record<string, unknown> {
 	className?: string;

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

@@ -28,7 +28,7 @@ import { RadioGroup as RadioGroupPrimitive } from '@octanejs/base-ui/radio-group
 import { Radio as RadioPrimitive } from '@octanejs/base-ui/radio';
 import { CircleIcon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type Props = { className?: string } & Record<string, unknown>;
 

package/src/bases/base-ui/ui/scroll-area.tsrx

@@ -0,0 +1,44 @@
+// Adapted from shadcn/ui 4.21.0 (7c9eaba1), Base UI with the Nova style.
+// MIT: see LICENSE.upstream. Octane uses native events and refs as props.
+import * as React from 'octane';
+import { ScrollArea as ScrollAreaPrimitive } from '@octanejs/base-ui/scroll-area';
+import { cn } from 'cn';
+
+function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props) {
+	return <ScrollAreaPrimitive.Root
+		data-slot="scroll-area"
+		className={cn('relative', className)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.Viewport
+			data-slot="scroll-area-viewport"
+			className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+		>{children}</ScrollAreaPrimitive.Viewport>
+		<ScrollBar />
+		<ScrollAreaPrimitive.Corner />
+	</ScrollAreaPrimitive.Root>;
+}
+
+function ScrollBar({
+	className,
+	orientation = 'vertical',
+	...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+	return <ScrollAreaPrimitive.Scrollbar
+		data-slot="scroll-area-scrollbar"
+		data-orientation={orientation}
+		orientation={orientation}
+		className={cn(
+			'data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none',
+			className,
+		)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.Thumb
+			data-slot="scroll-area-thumb"
+			className="rounded-full relative flex-1 bg-border"
+		/>
+	</ScrollAreaPrimitive.Scrollbar>;
+}
+
+export { ScrollArea, ScrollBar };