@octanejs/shadcn 0.0.38 → 0.0.39

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

@@ -27,7 +27,7 @@
 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<
 	Value extends number | readonly number[] = number | readonly number[],

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;

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

@@ -16,7 +16,7 @@
 // rather than upstream's Base UI source.
 import { Switch as SwitchPrimitive } from '@octanejs/base-ui/switch';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export interface SwitchProps extends Record<string, unknown> {
 	className?: string;

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

@@ -7,7 +7,7 @@
 // `data-[state=selected]` on the row is written by the CONSUMER — a data-table library setting
 // selection state — not emitted by anything underneath, so unlike checkbox or toggle it is not a
 // Radix-ism that needs translating.
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 // Multi-host family (div/table/thead/tbody/tr/th/td/caption): no single host
 // prop table applies, so the shared alias stays structural.

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

@@ -12,7 +12,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Tabs as TabsPrimitive } from '@octanejs/base-ui/tabs';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type StyledProps<P> = Omit<P, 'className'> & { className?: string };
 

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

@@ -7,7 +7,7 @@
 //
 // Octane divergence (shadcn-native-input-events): per-keystroke handling is the native `onInput` event, not a synthetic
 // `onChange`; native `change` keeps its commit-on-blur meaning.
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export function Textarea({ className, ...props }: HostProps<'textarea'>) @{

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

@@ -27,7 +27,7 @@ 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';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import { toggleVariants } from './toggle.tsrx';
 
 const ToggleGroupContext = createContext<

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

@@ -14,7 +14,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Toggle as TogglePrimitive } from '@octanejs/base-ui/toggle';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export const toggleVariants = cva(
 	'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-pressed:bg-accent data-pressed:text-accent-foreground 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/tooltip.tsrx

@@ -15,7 +15,7 @@
 import { createElement, Fragment, type OctaneNode } from 'octane';
 import { Tooltip as TooltipPrimitive } from '@octanejs/base-ui/tooltip';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export interface TooltipProviderProps extends Record<string, unknown> {
 	delay?: number;

package/src/bases/radix/ui/accordion.tsrx

@@ -9,7 +9,7 @@ import { Accordion as AccordionPrimitive } from '@octanejs/radix';
 import { ChevronDownIcon, ChevronUpIcon } from '@octanejs/lucide';
 import type { OctaneNode } from 'octane';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 

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

@@ -6,7 +6,7 @@
 import { createElement, type OctaneNode } from 'octane';
 import { AlertDialog as AlertDialogPrimitive } from '@octanejs/radix';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import { Button, type ButtonProps } from './button.tsrx';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;

package/src/bases/radix/ui/alert.tsrx

@@ -2,7 +2,7 @@
 // cva strings verbatim. Pure template JSX (no consumer-children interleave).
 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/radix/ui/avatar.tsrx

@@ -3,7 +3,7 @@
 // @octanejs/radix; pure template JSX.
 import { Avatar as AvatarPrimitive } from '@octanejs/radix';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type Props = { className?: string } & Record<string, unknown>;
 

package/src/bases/radix/ui/badge.tsrx

@@ -4,7 +4,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Slot } from '@octanejs/radix';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export const badgeVariants = cva(

package/src/bases/radix/ui/breadcrumb.tsrx

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

package/src/bases/radix/ui/button.tsrx

@@ -7,7 +7,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Slot } from '@octanejs/radix';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export const buttonVariants = cva(

package/src/bases/radix/ui/card.tsrx

@@ -1,6 +1,6 @@
 // Default-Tailwind (package canonical) card — user-supplied flavor, class strings verbatim (uses the
 // --card-spacing custom-property pattern and the nova cn-font-heading hook).
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { DivProps } from '../../../lib/types';
 
 type Props = DivProps;

package/src/bases/radix/ui/checkbox.tsrx

@@ -6,7 +6,7 @@
 import { Checkbox as CheckboxPrimitive } from '@octanejs/radix';
 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/radix/ui/context-menu.tsrx

@@ -8,7 +8,7 @@ import { createElement, type OctaneNode } from 'octane';
 import { ContextMenu as ContextMenuPrimitive } from '@octanejs/radix';
 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/radix/ui/dialog.tsrx

@@ -9,7 +9,7 @@ import { createElement, type OctaneNode } from 'octane';
 import { Dialog as DialogPrimitive } from '@octanejs/radix';
 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/radix/ui/dropdown-menu.tsrx

@@ -8,7 +8,7 @@ import { createElement, type OctaneNode } from 'octane';
 import { DropdownMenu as DropdownMenuPrimitive } from '@octanejs/radix';
 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/radix/ui/empty.tsrx

@@ -3,7 +3,7 @@
 // as a <div> (typed as "p") — both preserved as-is.
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type DivProps = { className?: string } & Record<string, unknown>;
 

package/src/bases/radix/ui/field.tsrx

@@ -6,7 +6,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/radix/ui/hover-card.tsrx

@@ -10,7 +10,7 @@
 import { createElement } from 'octane';
 import { HoverCard as HoverCardPrimitive } from '@octanejs/radix';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export function HoverCard(props: Record<string, unknown>) @{
 	<HoverCardPrimitive.Root data-slot="hover-card" {...props} />

package/src/bases/radix/ui/input.tsrx

@@ -1,6 +1,6 @@
 // Default-Tailwind (package canonical) input — user-supplied flavor, class string verbatim.
 // Octane divergence (shadcn-native-input-events): per-keystroke handling is the native onInput event.
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export interface InputProps extends HostProps<'input'> {}

package/src/bases/radix/ui/item.tsrx

@@ -4,7 +4,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Slot } from '@octanejs/radix';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import { Separator } from './separator.tsrx';
 
 type DivProps = { className?: string } & Record<string, unknown>;

package/src/bases/radix/ui/kbd.tsrx

@@ -1,7 +1,7 @@
 // Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
 // apps/v4/registry/bases/radix/ui/kbd.tsx. Note: upstream renders KbdGroup as
 // a <kbd> host too — preserved as-is.
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export interface KbdProps extends HostProps<'kbd'> {}

package/src/bases/radix/ui/label.tsrx

@@ -3,7 +3,7 @@
 // dropped — octane has no RSC axis).
 import { Label as LabelPrimitive } from '@octanejs/radix';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export interface LabelProps extends Record<string, unknown> {
 	className?: string;

package/src/bases/radix/ui/menubar.tsrx

@@ -8,7 +8,7 @@ import { createElement, type OctaneNode } from 'octane';
 import { Menubar as MenubarPrimitive } from '@octanejs/radix';
 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/radix/ui/native-select.tsrx

@@ -5,7 +5,7 @@
 // <select> and the chevron keep their fixed classes.
 import { ChevronDownIcon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export interface NativeSelectProps extends Record<string, unknown> {
 	className?: string;

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

@@ -7,7 +7,7 @@ import { cva } from 'class-variance-authority';
 import { NavigationMenu as NavigationMenuPrimitive } from '@octanejs/radix';
 import { ChevronDownIcon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 

package/src/bases/radix/ui/pagination.tsrx

@@ -6,7 +6,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/radix/ui/popover.tsrx

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

package/src/bases/radix/ui/progress.tsrx

@@ -5,7 +5,7 @@
 // Root, whose role/aria-valuemax/data-state contract comes from its defaults.
 import { Progress as ProgressPrimitive } from '@octanejs/radix';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export interface ProgressProps extends Record<string, unknown> {
 	className?: string;

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

@@ -4,7 +4,7 @@
 import { RadioGroup as RadioGroupPrimitive } from '@octanejs/radix';
 import { CircleIcon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type Props = { className?: string } & Record<string, unknown>;
 

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

@@ -5,7 +5,7 @@
 import type { OctaneNode } from 'octane';
 import { ScrollArea as ScrollAreaPrimitive } from '@octanejs/radix';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 

package/src/bases/radix/ui/select.tsrx

@@ -7,7 +7,7 @@ import { createElement, type OctaneNode } from 'octane';
 import { Select as SelectPrimitive } from '@octanejs/radix';
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 

package/src/bases/radix/ui/separator.tsrx

@@ -3,7 +3,7 @@
 // is dropped — octane has no RSC axis).
 import { Separator as SeparatorPrimitive } from '@octanejs/radix';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export interface SeparatorProps extends Record<string, unknown> {
 	className?: string;

package/src/bases/radix/ui/sheet.tsrx

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

@@ -18,7 +18,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { Slot } from '@octanejs/radix';
 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/radix/ui/skeleton.tsrx

@@ -1,6 +1,6 @@
 // Default-Tailwind flavor (package canonical) — utilities-inlined upstream styling.
 // apps/v4/registry/bases/radix/ui/skeleton.tsx.
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 import type { HostProps } from '../../../lib/types';
 
 export interface SkeletonProps extends HostProps<'div'> {}

package/src/bases/radix/ui/slider.tsrx

@@ -9,7 +9,7 @@
 import { createElement, useMemo } from 'octane';
 import { Slider as SliderPrimitive } from '@octanejs/radix';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export interface SliderProps extends Record<string, unknown> {
 	className?: string;

package/src/bases/radix/ui/spinner.tsrx

@@ -6,7 +6,7 @@
 // @octanejs/lucide. Other icon libraries are a registry-emit concern.
 import { Loader2Icon } from '@octanejs/lucide';
 
-import { cn } from '../../../lib/utils';
+import { cn } from 'cn';
 
 export interface SpinnerProps extends Record<string, unknown> {
 	className?: string;