@octanejs/shadcn 0.0.37 → 0.0.39

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

@@ -29,25 +29,27 @@ 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>;
 
-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/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>;
 
@@ -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/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 };

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

@@ -0,0 +1,157 @@
+// 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 { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@octanejs/lucide';
+import * as React from 'octane';
+import { Select as SelectPrimitive } from '@octanejs/base-ui/select';
+import { cn } from 'cn';
+
+const Select = SelectPrimitive.Root;
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+	return <SelectPrimitive.Group
+		data-slot="select-group"
+		className={cn('scroll-my-1 p-1', className)}
+		{...props}
+	/>;
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+	return <SelectPrimitive.Value
+		data-slot="select-value"
+		className={cn('flex flex-1 text-left', className)}
+		{...props}
+	/>;
+}
+
+function SelectTrigger({
+	className,
+	size = 'default',
+	children,
+	...props
+}: SelectPrimitive.Trigger.Props & {
+	size?: 'sm' | 'default';
+}) {
+	return <SelectPrimitive.Trigger
+		data-slot="select-trigger"
+		data-size={size}
+		className={cn(
+			'border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*=\'size-\'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<SelectPrimitive.Icon
+			render={<ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />}
+		/>
+	</SelectPrimitive.Trigger>;
+}
+
+function SelectContent({
+	className,
+	children,
+	side = 'bottom',
+	sideOffset = 4,
+	align = 'center',
+	alignOffset = 0,
+	alignItemWithTrigger = true,
+	...props
+}: SelectPrimitive.Popup.Props & Pick<
+	SelectPrimitive.Positioner.Props,
+	'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'
+>) {
+	return <SelectPrimitive.Portal>
+		<SelectPrimitive.Positioner
+			side={side}
+			sideOffset={sideOffset}
+			align={align}
+			alignOffset={alignOffset}
+			alignItemWithTrigger={alignItemWithTrigger}
+			className="isolate z-50"
+		>
+			<SelectPrimitive.Popup
+				data-slot="select-content"
+				data-align-trigger={alignItemWithTrigger}
+				className={cn(
+					'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none',
+					className,
+				)}
+				{...props}
+			>
+				<SelectScrollUpButton />
+				<SelectPrimitive.List>{children}</SelectPrimitive.List>
+				<SelectScrollDownButton />
+			</SelectPrimitive.Popup>
+		</SelectPrimitive.Positioner>
+	</SelectPrimitive.Portal>;
+}
+
+function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
+	return <SelectPrimitive.GroupLabel
+		data-slot="select-label"
+		className={cn('text-muted-foreground px-1.5 py-1 text-xs', className)}
+		{...props}
+	/>;
+}
+
+function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
+	return <SelectPrimitive.Item
+		data-slot="select-item"
+		className={cn(
+			'focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+			className,
+		)}
+		{...props}
+	>
+		<SelectPrimitive.ItemText
+			className="flex flex-1 gap-2 shrink-0 whitespace-nowrap"
+		>{children}</SelectPrimitive.ItemText>
+		<SelectPrimitive.ItemIndicator
+			render={<span
+				className="pointer-events-none absolute right-2 flex size-4 items-center justify-center"
+			/>}
+		>
+			<CheckIcon className="pointer-events-none" />
+		</SelectPrimitive.ItemIndicator>
+	</SelectPrimitive.Item>;
+}
+
+function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {
+	return <SelectPrimitive.Separator
+		data-slot="select-separator"
+		className={cn('bg-border -mx-1 my-1 h-px pointer-events-none', className)}
+		{...props}
+	/>;
+}
+
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<
+	typeof SelectPrimitive.ScrollUpArrow
+>) {
+	return <SelectPrimitive.ScrollUpArrow
+		data-slot="select-scroll-up-button"
+		className={cn(
+			'bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*=\'size-\'])]:size-4 top-0 w-full',
+			className,
+		)}
+		{...props}
+	>
+		<ChevronUpIcon />
+	</SelectPrimitive.ScrollUpArrow>;
+}
+
+function SelectScrollDownButton({ className, ...props }: React.ComponentProps<
+	typeof SelectPrimitive.ScrollDownArrow
+>) {
+	return <SelectPrimitive.ScrollDownArrow
+		data-slot="select-scroll-down-button"
+		className={cn(
+			'bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*=\'size-\'])]:size-4 bottom-0 w-full',
+			className,
+		)}
+		{...props}
+	>
+		<ChevronDownIcon />
+	</SelectPrimitive.ScrollDownArrow>;
+}
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

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

@@ -14,7 +14,7 @@
 // exactly this reason. The non-conditional utilities stay in step with the other bases.
 import { Separator as SeparatorPrimitive } from '@octanejs/base-ui/separator';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export interface SeparatorProps extends Record<string, unknown> {
 	className?: string;

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

@@ -27,7 +27,7 @@ import { type OctaneNode } from 'octane';
 import { Dialog as SheetPrimitive } 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/sidebar.tsrx

@@ -35,7 +35,7 @@ import {
 import { cva, type VariantProps } from 'class-variance-authority';
 import { PanelLeftIcon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import { useIsMobile } from '../../../hooks/use-mobile';
 import { Button } from './button.tsrx';
 import { Input } from './input.tsrx';

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

@@ -5,7 +5,7 @@
 // Skeleton is the WORST case for this, and the reason the whole batch is labelled: the Radix
 // base renders `bg-accent` where the React Aria base renders `bg-muted`, so the one token that
 // matters here is known to differ ACROSS bases. Verify against the upstream source.
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { DivProps } from '../../../lib/types';
 
 export function Skeleton({ className, ...props }: DivProps) @{

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';
+import { cn } from 'cn';
 
-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/spinner.tsrx

@@ -13,7 +13,7 @@
 // describe them.
 import { Loader2Icon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export interface SpinnerProps extends Record<string, unknown> {
 	className?: string;