@octanejs/shadcn 0.0.1

package/src/ui/native-select.tsrx

@@ -0,0 +1,55 @@
+// NativeSelect — maintainer-supplied default-Tailwind flavor, class strings
+// verbatim. Octane adaptations: lucide-react → @octanejs/lucide.
+//
+// The consumer className lands on the WRAPPER div (upstream behavior); the
+// <select> and the chevron keep their fixed classes.
+import { ChevronDownIcon } from '@octanejs/lucide';
+
+import { cn } from '../lib/utils';
+
+export interface NativeSelectProps extends Record<string, unknown> {
+	className?: string;
+	size?: 'sm' | 'default';
+}
+
+export function NativeSelect({ className, size = 'default', ...props }: NativeSelectProps) @{
+	<div
+		className={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}
+		data-slot="native-select-wrapper"
+		data-size={size}
+	>
+		<select
+			data-slot="native-select"
+			data-size={size}
+			className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+			{...props}
+		/>
+		<ChevronDownIcon
+			className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
+			aria-hidden="true"
+			data-slot="native-select-icon"
+		/>
+	</div>
+}
+
+export function NativeSelectOption({ className, ...props }: { className?: string } & Record<
+	string,
+	unknown
+>) @{
+	<option
+		data-slot="native-select-option"
+		className={cn('bg-[Canvas] text-[CanvasText]', className)}
+		{...props}
+	/>
+}
+
+export function NativeSelectOptGroup({ className, ...props }: { className?: string } & Record<
+	string,
+	unknown
+>) @{
+	<optgroup
+		data-slot="native-select-optgroup"
+		className={cn('bg-[Canvas] text-[CanvasText]', className)}
+		{...props}
+	/>
+}

package/src/ui/navigation-menu.tsrx

@@ -0,0 +1,116 @@
+// NavigationMenu — maintainer-supplied default-Tailwind flavor, class strings
+// verbatim. Octane adaptations: lucide-react → @octanejs/lucide, radix-ui →
+// @octanejs/radix. Root and Trigger interleave consumer children with sibling
+// descriptors, so they use the {props.children} lowering in template JSX.
+import type { OctaneNode } from 'octane';
+import { cva } from 'class-variance-authority';
+import { NavigationMenu as NavigationMenuPrimitive } from '@octanejs/radix';
+import { ChevronDownIcon } from '@octanejs/lucide';
+
+import { cn } from '../lib/utils';
+
+type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
+
+export function NavigationMenu(props: Props & { viewport?: boolean }) @{
+	const { className, children: _children, viewport = true, ...rest } = props;
+
+	<NavigationMenuPrimitive.Root
+		data-slot="navigation-menu"
+		data-viewport={viewport}
+		className={cn(
+			'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+			className,
+		)}
+		{...rest}
+	>
+		{props.children}
+		@if (viewport) {
+			<NavigationMenuViewport />
+		}
+	</NavigationMenuPrimitive.Root>
+}
+
+export function NavigationMenuList({ className, ...props }: Props) @{
+	<NavigationMenuPrimitive.List
+		data-slot="navigation-menu-list"
+		className={cn('group flex flex-1 list-none items-center justify-center gap-0', className)}
+		{...props}
+	/>
+}
+
+export function NavigationMenuItem({ className, ...props }: Props) @{
+	<NavigationMenuPrimitive.Item
+		data-slot="navigation-menu-item"
+		className={cn('relative', className)}
+		{...props}
+	/>
+}
+
+export const navigationMenuTriggerStyle = cva(
+	'group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted',
+);
+
+export function NavigationMenuTrigger(props: Props) @{
+	const { className, children: _children, ...rest } = props;
+
+	<NavigationMenuPrimitive.Trigger
+		data-slot="navigation-menu-trigger"
+		className={cn(navigationMenuTriggerStyle(), 'group', className)}
+		{...rest}
+	>
+		{props.children}
+		{' '}
+		<ChevronDownIcon
+			className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
+			aria-hidden="true"
+		/>
+	</NavigationMenuPrimitive.Trigger>
+}
+
+export function NavigationMenuContent({ className, ...props }: Props) @{
+	<NavigationMenuPrimitive.Content
+		data-slot="navigation-menu-content"
+		className={cn(
+			'top-0 left-0 w-full p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 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 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function NavigationMenuViewport({ className, ...props }: Props) @{
+	<div className={cn('absolute top-full left-0 isolate z-50 flex justify-center')}>
+		<NavigationMenuPrimitive.Viewport
+			data-slot="navigation-menu-viewport"
+			className={cn(
+				'origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100 md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90',
+				className,
+			)}
+			{...props}
+		/>
+	</div>
+}
+
+export function NavigationMenuLink({ className, ...props }: Props) @{
+	<NavigationMenuPrimitive.Link
+		data-slot="navigation-menu-link"
+		className={cn(
+			'flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*=\'size-\'])]:size-4',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function NavigationMenuIndicator({ className, ...props }: Props) @{
+	<NavigationMenuPrimitive.Indicator
+		data-slot="navigation-menu-indicator"
+		className={cn(
+			'top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in',
+			className,
+		)}
+		{...props}
+	>
+		<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+	</NavigationMenuPrimitive.Indicator>
+}

package/src/ui/pagination.tsrx

@@ -0,0 +1,113 @@
+// Pagination — maintainer-supplied default-Tailwind flavor, class strings
+// verbatim. Octane adaptations: lucide-react → @octanejs/lucide; PaginationLink
+// is upstream's `<Button asChild><a …>` — Slot needs a real element descriptor
+// as its child, so the Button/anchor pair composes with createElement and the
+// link's children flow through the anchor's children prop.
+import { createElement, type OctaneNode } from 'octane';
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
+
+import { cn } from '../lib/utils';
+import { Button, type ButtonProps } from './button.tsrx';
+
+type Props = { className?: string } & Record<string, unknown>;
+
+export function Pagination({ className, ...props }: Props) @{
+	<nav
+		role="navigation"
+		aria-label="pagination"
+		data-slot="pagination"
+		className={cn('mx-auto flex w-full justify-center', className)}
+		{...props}
+	/>
+}
+
+export function PaginationContent({ className, ...props }: Props) @{
+	<ul
+		data-slot="pagination-content"
+		className={cn('flex items-center gap-0.5', className)}
+		{...props}
+	/>
+}
+
+export function PaginationItem(props: Record<string, unknown>) @{
+	<li data-slot="pagination-item" {...props} />
+}
+
+export interface PaginationLinkProps extends Record<string, unknown> {
+	className?: string;
+	isActive?: boolean;
+	size?: ButtonProps['size'];
+	children?: OctaneNode;
+}
+
+export function PaginationLink({
+	className,
+	isActive,
+	size = 'icon',
+	children,
+	...props
+}: PaginationLinkProps) {
+	return createElement(
+		Button,
+		{
+			asChild: true,
+			variant: isActive ? 'outline' : 'ghost',
+			size,
+			className: cn(className),
+		},
+		createElement('a', {
+			'aria-current': isActive ? 'page' : undefined,
+			'data-slot': 'pagination-link',
+			'data-active': isActive,
+			...props,
+			children,
+		}),
+	);
+}
+
+export function PaginationPrevious({
+	className,
+	text = 'Previous',
+	...props
+}: PaginationLinkProps & {
+	text?: string;
+}) @{
+	<PaginationLink
+		aria-label="Go to previous page"
+		size="default"
+		className={cn('pl-1.5!', className)}
+		{...props}
+	>
+		<ChevronLeftIcon data-icon="inline-start" className="cn-rtl-flip" />
+		<span className="hidden sm:block">{text as string}</span>
+	</PaginationLink>
+}
+
+export function PaginationNext({ className, text = 'Next', ...props }: PaginationLinkProps & {
+	text?: string;
+}) @{
+	<PaginationLink
+		aria-label="Go to next page"
+		size="default"
+		className={cn('pr-1.5!', className)}
+		{...props}
+	>
+		<span className="hidden sm:block">{text as string}</span>
+		<ChevronRightIcon data-icon="inline-end" className="cn-rtl-flip" />
+	</PaginationLink>
+}
+
+export function PaginationEllipsis({ className, ...props }: Props) @{
+	<span
+		aria-hidden="true"
+		data-slot="pagination-ellipsis"
+		className={cn(
+			'flex size-8 items-center justify-center [&_svg:not([class*=\'size-\'])]:size-4',
+			className,
+		)}
+		{...props}
+	>
+		<MoreHorizontalIcon />
+		<span className="sr-only">More pages</span>
+	</span>
+}

package/src/ui/popover.tsrx

@@ -0,0 +1,73 @@
+// Popover — maintainer-supplied default-Tailwind flavor, class strings
+// verbatim. Octane adaptations: "use client" dropped, radix-ui →
+// @octanejs/radix.
+//
+// PopoverContent renders Portal > Content: the Portal's child must be a real
+// element DESCRIPTOR (radix portals cannot enumerate opaque compiled .tsrx
+// children), so the pair is composed with createElement; the consumer's
+// children flow into the Content primitive through the ordinary props.children
+// channel.
+import { createElement } from 'octane';
+import { Popover as PopoverPrimitive } from '@octanejs/radix';
+
+import { cn } from '../lib/utils';
+
+type Props = { className?: string } & Record<string, unknown>;
+
+export function Popover(props: Record<string, unknown>) @{
+	<PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+export function PopoverTrigger(props: Record<string, unknown>) @{
+	<PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+export interface PopoverContentProps extends Record<string, unknown> {
+	className?: string;
+	align?: 'start' | 'center' | 'end';
+	sideOffset?: number;
+}
+
+export function PopoverContent({
+	className,
+	align = 'center',
+	sideOffset = 4,
+	...props
+}: PopoverContentProps) {
+	return createElement(PopoverPrimitive.Portal, {
+		children: createElement(PopoverPrimitive.Content, {
+			'data-slot': 'popover-content',
+			align,
+			sideOffset,
+			className: cn(
+				'z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 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,
+		}),
+	});
+}
+
+export function PopoverAnchor(props: Record<string, unknown>) @{
+	<PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export function PopoverHeader({ className, ...props }: Props) @{
+	<div
+		data-slot="popover-header"
+		className={cn('flex flex-col gap-0.5 text-sm', className)}
+		{...props}
+	/>
+}
+
+export function PopoverTitle({ className, ...props }: Props) @{
+	<div data-slot="popover-title" className={cn('font-medium', className)} {...props} />
+}
+
+export function PopoverDescription({ className, ...props }: Props) @{
+	<p
+		data-slot="popover-description"
+		className={cn('text-muted-foreground', className)}
+		{...props}
+	/>
+}

package/src/ui/progress.tsrx

@@ -0,0 +1,27 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/progress.tsx (the `"use client"` directive
+// is dropped — octane has no RSC axis). As upstream, `value` drives only the
+// indicator transform — it is destructured off and NOT forwarded to the radix
+// Root, whose role/aria-valuemax/data-state contract comes from its defaults.
+import { Progress as ProgressPrimitive } from '@octanejs/radix';
+
+import { cn } from '../lib/utils';
+
+export interface ProgressProps extends Record<string, unknown> {
+	className?: string;
+	value?: number | null;
+}
+
+export function Progress({ className, value, ...props }: ProgressProps) @{
+	<ProgressPrimitive.Root
+		data-slot="progress"
+		className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
+		{...props}
+	>
+		<ProgressPrimitive.Indicator
+			data-slot="progress-indicator"
+			className="h-full w-full flex-1 bg-primary transition-all"
+			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+		/>
+	</ProgressPrimitive.Root>
+}

package/src/ui/radio-group.tsrx

@@ -0,0 +1,37 @@
+// Default-Tailwind radio-group flavor (package canonical) — utilities-inlined
+// upstream styling. Octane adaptations: "use client" dropped, lucide-react →
+// @octanejs/lucide, radix-ui → @octanejs/radix; pure template JSX.
+import { RadioGroup as RadioGroupPrimitive } from '@octanejs/radix';
+import { CircleIcon } from '@octanejs/lucide';
+
+import { cn } from '../lib/utils';
+
+type Props = { className?: string } & Record<string, unknown>;
+
+export function RadioGroup({ className, ...props }: Props) @{
+	<RadioGroupPrimitive.Root
+		data-slot="radio-group"
+		className={cn('grid gap-3', className)}
+		{...props}
+	/>
+}
+
+export function RadioGroupItem({ className, ...props }: Props) @{
+	<RadioGroupPrimitive.Item
+		data-slot="radio-group-item"
+		className={cn(
+			'aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
+			className,
+		)}
+		{...props}
+	>
+		<RadioGroupPrimitive.Indicator
+			data-slot="radio-group-indicator"
+			className="relative flex items-center justify-center"
+		>
+			<CircleIcon
+				className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary"
+			/>
+		</RadioGroupPrimitive.Indicator>
+	</RadioGroupPrimitive.Item>
+}

package/src/ui/scroll-area.tsrx

@@ -0,0 +1,43 @@
+// ScrollArea — maintainer-supplied default-Tailwind flavor, class strings
+// verbatim. Octane adaptations: "use client" dropped, radix-ui →
+// @octanejs/radix; ScrollArea interleaves consumer children with sibling
+// descriptors (ScrollBar, Corner), so it uses the {props.children} lowering.
+import type { OctaneNode } from 'octane';
+import { ScrollArea as ScrollAreaPrimitive } from '@octanejs/radix';
+
+import { cn } from '../lib/utils';
+
+type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
+
+export function ScrollArea(props: Props) @{
+	const { className, children: _children, ...rest } = props;
+
+	<ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn('relative', className)} {...rest}>
+		<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"
+		>{props.children}</ScrollAreaPrimitive.Viewport>
+		<ScrollBar />
+		<ScrollAreaPrimitive.Corner />
+	</ScrollAreaPrimitive.Root>
+}
+
+export function ScrollBar({ className, orientation = 'vertical', ...props }: Props & {
+	orientation?: 'vertical' | 'horizontal';
+}) @{
+	<ScrollAreaPrimitive.ScrollAreaScrollbar
+		data-slot="scroll-area-scrollbar"
+		data-orientation={orientation}
+		orientation={orientation}
+		className={cn(
+			'flex touch-none p-px transition-colors select-none 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',
+			className,
+		)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.ScrollAreaThumb
+			data-slot="scroll-area-thumb"
+			className="relative flex-1 rounded-full bg-border"
+		/>
+	</ScrollAreaPrimitive.ScrollAreaScrollbar>
+}

package/src/ui/select.tsrx

@@ -0,0 +1,165 @@
+// Select — maintainer-supplied default-Tailwind flavor, class strings verbatim.
+// Octane adaptations: "use client" dropped, lucide-react → @octanejs/lucide,
+// radix-ui → @octanejs/radix. Trigger/Content/Item compose with createElement
+// where a Portal child or an `asChild` slot target must be a real element
+// descriptor; consumer children flow through the props.children channel.
+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';
+
+type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
+
+export function Select(props: Record<string, unknown>) @{
+	<SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+export function SelectGroup({ className, ...props }: Props) @{
+	<SelectPrimitive.Group
+		data-slot="select-group"
+		className={cn('scroll-my-1 p-1', className)}
+		{...props}
+	/>
+}
+
+export function SelectValue(props: Record<string, unknown>) @{
+	<SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+export function SelectTrigger({ className, size = 'default', children, ...props }: Props & {
+	size?: 'sm' | 'default';
+}) {
+	return createElement(
+		SelectPrimitive.Trigger,
+		{
+			'data-slot': 'select-trigger',
+			'data-size': size,
+			className: cn(
+				'flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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',
+				className,
+			),
+			...props,
+		},
+		children,
+		createElement(
+			SelectPrimitive.Icon,
+			{ key: 'icon', asChild: true },
+			createElement(ChevronDownIcon, {
+				className: 'pointer-events-none size-4 text-muted-foreground',
+			}),
+		),
+	);
+}
+
+export function SelectContent({
+	className,
+	children,
+	position = 'item-aligned',
+	align = 'center',
+	...props
+}: Props & { position?: string; align?: string }) {
+	return createElement(
+		SelectPrimitive.Portal,
+		null,
+		createElement(
+			SelectPrimitive.Content,
+			{
+				'data-slot': 'select-content',
+				'data-align-trigger': position === 'item-aligned',
+				className: cn(
+					'relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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 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',
+					position === 'popper' &&
+						'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+					className,
+				),
+				position,
+				align,
+				...props,
+			},
+			createElement(SelectScrollUpButton, { key: 'up' }),
+			createElement(
+				SelectPrimitive.Viewport,
+				{
+					key: 'viewport',
+					'data-position': position,
+					className: cn(
+						'data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)',
+						position === 'popper' && '',
+					),
+				},
+				children,
+			),
+			createElement(SelectScrollDownButton, { key: 'down' }),
+		),
+	);
+}
+
+export function SelectLabel({ className, ...props }: Props) @{
+	<SelectPrimitive.Label
+		data-slot="select-label"
+		className={cn('px-1.5 py-1 text-xs text-muted-foreground', className)}
+		{...props}
+	/>
+}
+
+export function SelectItem({ className, children, ...props }: Props) {
+	return createElement(
+		SelectPrimitive.Item,
+		{
+			'data-slot': 'select-item',
+			className: cn(
+				'relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+				className,
+			),
+			...props,
+		},
+		createElement(
+			'span',
+			{
+				key: 'indicator',
+				className: 'pointer-events-none absolute right-2 flex size-4 items-center justify-center',
+			},
+			createElement(
+				SelectPrimitive.ItemIndicator,
+				null,
+				createElement(CheckIcon, { className: 'pointer-events-none' }),
+			),
+		),
+		createElement(SelectPrimitive.ItemText, { key: 'text' }, children),
+	);
+}
+
+export function SelectSeparator({ className, ...props }: Props) @{
+	<SelectPrimitive.Separator
+		data-slot="select-separator"
+		className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
+		{...props}
+	/>
+}
+
+export function SelectScrollUpButton({ className, ...props }: Props) @{
+	<SelectPrimitive.ScrollUpButton
+		data-slot="select-scroll-up-button"
+		className={cn(
+			'z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*=\'size-\'])]:size-4',
+			className,
+		)}
+		{...props}
+	>
+		<ChevronUpIcon />
+	</SelectPrimitive.ScrollUpButton>
+}
+
+export function SelectScrollDownButton({ className, ...props }: Props) @{
+	<SelectPrimitive.ScrollDownButton
+		data-slot="select-scroll-down-button"
+		className={cn(
+			'z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*=\'size-\'])]:size-4',
+			className,
+		)}
+		{...props}
+	>
+		<ChevronDownIcon />
+	</SelectPrimitive.ScrollDownButton>
+}

package/src/ui/separator.tsrx

@@ -0,0 +1,30 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/separator.tsx (the `"use client"` directive
+// is dropped — octane has no RSC axis).
+import { Separator as SeparatorPrimitive } from '@octanejs/radix';
+
+import { cn } from '../lib/utils';
+
+export interface SeparatorProps extends Record<string, unknown> {
+	className?: string;
+	orientation?: 'horizontal' | 'vertical';
+	decorative?: boolean;
+}
+
+export function Separator({
+	className,
+	orientation = 'horizontal',
+	decorative = true,
+	...props
+}: SeparatorProps) @{
+	<SeparatorPrimitive.Root
+		data-slot="separator"
+		decorative={decorative}
+		orientation={orientation}
+		className={cn(
+			'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+			className,
+		)}
+		{...props}
+	/>
+}