@octanejs/shadcn 0.0.5 → 0.0.7

package/src/bases/react-aria/ui/kbd.tsrx

@@ -0,0 +1,30 @@
+// React Aria base kbd — structure from upstream `bases/aria/ui/kbd.tsx`, which
+// renders BOTH parts through RAC's Keyboard primitive (the Radix base uses a
+// plain <kbd> host for each; upstream likewise renders KbdGroup as a keyboard
+// element rather than a <div>). Class strings are the package's shipped
+// utilities-inlined flavor, matching the Radix base.
+import { Keyboard as KbdPrimitive } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export interface KbdProps extends HostProps<'kbd'> {}
+
+export function Kbd({ className, ...props }: KbdProps) @{
+	<KbdPrimitive
+		data-slot="kbd"
+		className={cn(
+			'pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*=\'size-\'])]:size-3',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function KbdGroup({ className, ...props }: KbdProps) @{
+	<KbdPrimitive
+		data-slot="kbd-group"
+		className={cn('inline-flex items-center gap-1', className)}
+		{...props}
+	/>
+}

package/src/bases/react-aria/ui/label.tsrx

@@ -0,0 +1,22 @@
+import { LabelContext, Label as LabelPrimitive, type LabelProps } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+
+export function Label({ className, htmlFor, slot, ...props }: LabelProps) {
+	const label = <LabelPrimitive
+		data-slot="label"
+		className={cn(
+			'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-disabled:opacity-50',
+			className,
+		)}
+		{...props}
+		htmlFor={htmlFor}
+		slot={slot}
+	/>;
+
+	if (htmlFor && slot === undefined) {
+		return <LabelContext.Provider value={null}>{label}</LabelContext.Provider>;
+	}
+
+	return label;
+}

package/src/bases/react-aria/ui/native-select.tsrx

@@ -0,0 +1,44 @@
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+import { ChevronDownIcon } from '@octanejs/lucide';
+
+type NativeSelectProps =
+	Omit<HostProps<'select'>, 'size'> & {
+		size?: 'sm' | 'default';
+	};
+
+export function NativeSelect({ className, size = 'default', ...props }: NativeSelectProps) {
+	return <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 }: HostProps<'option'>) {
+	return <option
+		data-slot="native-select-option"
+		className={cn('bg-[Canvas] text-[CanvasText]', className)}
+		{...props}
+	/>;
+}
+
+export function NativeSelectOptGroup({ className, ...props }: HostProps<'optgroup'>) {
+	return <optgroup
+		data-slot="native-select-optgroup"
+		className={cn('bg-[Canvas] text-[CanvasText]', className)}
+		{...props}
+	/>;
+}

package/src/bases/react-aria/ui/pagination.tsrx

@@ -0,0 +1,92 @@
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+import { LinkButton } from './button.tsrx';
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
+
+export function Pagination({ className, ...props }: HostProps<'nav'>) {
+	return <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 }: HostProps<'ul'>) {
+	return <ul
+		data-slot="pagination-content"
+		className={cn('flex items-center gap-0.5', className)}
+		{...props}
+	/>;
+}
+
+export function PaginationItem({ ...props }: HostProps<'li'>) {
+	return <li data-slot="pagination-item" {...props} />;
+}
+
+type PaginationLinkProps =
+	{
+		isActive?: boolean;
+	} & Omit<Record<string, any>, 'variant'>;
+
+export function PaginationLink({
+	className,
+	isActive,
+	size = 'icon',
+	...props
+}: PaginationLinkProps) {
+	return <LinkButton
+		variant={isActive ? 'outline' : 'ghost'}
+		size={size}
+		className={cn(className)}
+		aria-current={isActive ? 'page' : undefined}
+		data-slot="pagination-link"
+		data-active={isActive}
+		{...props}
+	/>;
+}
+
+export function PaginationPrevious({ className, text = 'Previous', ...props }: Record<
+	string,
+	any
+> & { text?: string }) {
+	return <PaginationLink
+		aria-label="Go to previous page"
+		size="default"
+		className={cn('pl-1.5!', className)}
+		{...props}
+	>
+		<ChevronLeftIcon data-icon="inline-start" />
+		<span className="hidden sm:block">{text}</span>
+	</PaginationLink>;
+}
+
+export function PaginationNext({ className, text = 'Next', ...props }: Record<string, any> & {
+	text?: string;
+}) {
+	return <PaginationLink
+		aria-label="Go to next page"
+		size="default"
+		className={cn('pr-1.5!', className)}
+		{...props}
+	>
+		<span className="hidden sm:block">{text}</span>
+		<ChevronRightIcon data-icon="inline-end" />
+	</PaginationLink>;
+}
+
+export function PaginationEllipsis({ className, ...props }: HostProps<'span'>) {
+	return <span
+		aria-hidden
+		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/bases/react-aria/ui/popover.tsrx

@@ -0,0 +1,57 @@
+import {
+	DialogTrigger,
+	Heading,
+	Popover as PopoverPrimitive,
+	type DialogTriggerProps,
+	type PopoverProps as PopoverPrimitiveProps,
+} from '@octanejs/aria/components';
+import type { HeadingProps } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export function PopoverTrigger({ children, ...props }: DialogTriggerProps) {
+	return <DialogTrigger data-slot="popover-trigger" {...props}>{children}</DialogTrigger>;
+}
+
+export function Popover({
+	className,
+	placement = 'bottom',
+	offset = 4,
+	crossOffset = 0,
+	...props
+}: Omit<PopoverPrimitiveProps, 'className'> & {
+	className?: string;
+}) {
+	return <PopoverPrimitive
+		data-slot="popover-content"
+		placement={placement}
+		offset={offset}
+		crossOffset={crossOffset}
+		className={cn(
+			'z-50 flex w-72 origin-(--trigger-anchor-point) 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-entering:animate-in data-entering:fade-in-0 data-entering:zoom-in-95 data-exiting:animate-out data-exiting:fade-out-0 data-exiting:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function PopoverHeader({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="popover-header"
+		className={cn('flex flex-col gap-0.5 text-sm', className)}
+		{...props}
+	/>;
+}
+
+export function PopoverTitle({ className, ...props }: HeadingProps) {
+	return <Heading data-slot="popover-title" className={cn('font-medium', className)} {...props} />;
+}
+
+export function PopoverDescription({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="popover-description"
+		className={cn('text-muted-foreground', className)}
+		{...props}
+	/>;
+}

package/src/bases/react-aria/ui/radio-group.tsrx

@@ -0,0 +1,46 @@
+// OCTANE ADAPTATION: octane's renderable type is `OctaneNode = unknown`, and a
+// union containing `unknown` collapses to `unknown` — so RAC's
+// `ChildrenOrFunction` cannot keep its render-prop arm distinguishable the way
+// React's precise `ReactNode` union does, and composeRenderProps has nothing to
+// infer its render values from. Annotating them here restores the upstream
+// parameter types without weakening the binding.
+import {
+	composeRenderProps,
+	RadioGroup as RadioGroupPrimitive,
+	Radio as RadioPrimitive,
+	type RadioGroupProps,
+	type RadioRenderProps,
+	type RadioProps,
+} from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+
+export function RadioGroup({ className, ...props }: RadioGroupProps) {
+	return <RadioGroupPrimitive
+		data-slot="radio-group"
+		className={cn('grid w-full gap-2', className)}
+		{...props}
+	/>;
+}
+
+export function RadioGroupItem({ className, children, ...props }: RadioProps) {
+	return <RadioPrimitive
+		data-slot="radio-group-item"
+		className={cn(
+			'group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-focus-visible:border-ring data-focus-visible:ring-3 data-focus-visible:ring-ring/50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-selected:border-primary data-selected:bg-primary data-selected:text-primary-foreground data-invalid:data-selected:border-primary dark:data-selected:bg-primary',
+			className,
+		)}
+		{...props}
+	>{composeRenderProps(
+		children,
+		(children, { isSelected }: RadioRenderProps) => <>
+			<span data-slot="radio-group-indicator" className="flex size-4 items-center justify-center">
+				{isSelected &&
+					<span
+						className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground"
+					/>}
+			</span>
+			{children}
+		</>,
+	)}</RadioPrimitive>;
+}

package/src/bases/react-aria/ui/scroll-area.tsrx

@@ -0,0 +1,14 @@
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export function ScrollArea({ className, children, ...props }: HostProps<'div'>) {
+	// Use native scrollbar-width and scrollbar-color to customize the scrollbar.
+	return <div
+		data-slot="scroll-area"
+		className={cn(
+			'relative [scrollbar-width:thin] [scrollbar-color:var(--color-border)_transparent] overflow-auto outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1',
+			className,
+		)}
+		{...props}
+	>{children}</div>;
+}

package/src/bases/react-aria/ui/separator.tsrx

@@ -0,0 +1,28 @@
+// React Aria base separator — structure from upstream `bases/aria/ui/separator.tsx`
+// (RAC Separator).
+//
+// The class string is NOT the Radix base's. RAC's Separator publishes
+// orientation as `aria-orientation`, where Radix publishes `data-orientation`,
+// so the orientation-conditional utilities must key off the attribute this
+// primitive actually emits — upstream's own bases diverge here for the same
+// reason. The non-conditional utilities stay in step with the Radix base.
+import { Separator as SeparatorPrimitive } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+
+export interface SeparatorProps extends Record<string, unknown> {
+	className?: string;
+	orientation?: 'horizontal' | 'vertical';
+}
+
+export function Separator({ className, orientation = 'horizontal', ...props }: SeparatorProps) @{
+	<SeparatorPrimitive
+		data-slot="separator"
+		orientation={orientation}
+		className={cn(
+			'block shrink-0 border-0 bg-border aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=vertical]:w-px aria-[orientation=vertical]:self-stretch [:is(hr)]:h-px [:is(hr)]:w-full',
+			className,
+		)}
+		{...props}
+	/>
+}

package/src/bases/react-aria/ui/sheet.tsrx

@@ -0,0 +1,143 @@
+// OCTANE ADAPTATION: RAC does not publish a `ModalProps` type (upstream writes
+// `React.ComponentProps<typeof Modal>` for exactly that reason), so the one
+// prop borrowed from Modal is spelled out instead of picked.
+import { type OctaneNode } from 'octane';
+import {
+	Heading,
+	ModalOverlay as ModalOverlayPrimitive,
+	Modal as ModalPrimitive,
+	Dialog as SheetPrimitive,
+	DialogTrigger as SheetTriggerPrimitive,
+	type ModalOverlayProps as ModalOverlayPrimitiveProps,
+	type DialogProps as SheetPrimitiveProps,
+	type DialogTriggerProps as SheetTriggerPrimitiveProps,
+} from '@octanejs/aria/components';
+import type { HeadingProps } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+import { Button } from './button.tsrx';
+import { XIcon } from '@octanejs/lucide';
+
+export function SheetTrigger({ ...props }: SheetTriggerPrimitiveProps) {
+	return <SheetTriggerPrimitive data-slot="sheet-trigger" {...props} />;
+}
+
+export function SheetClose({ className, variant = 'outline', size = 'default', ...props }: Record<
+	string,
+	any
+>) {
+	return <Button
+		slot="close"
+		data-slot="sheet-close"
+		variant={variant}
+		size={size}
+		className={cn(className)}
+		{...props}
+	/>;
+}
+
+function SheetOverlay({ className, children, ...props }: Omit<
+	ModalOverlayPrimitiveProps,
+	'className' | 'children'
+> & {
+	className?: string;
+	children: OctaneNode;
+}) {
+	return <ModalOverlayPrimitive
+		data-slot="sheet-overlay"
+		isDismissable
+		className={cn(
+			'fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-entering:opacity-0 data-exiting:opacity-0 supports-backdrop-filter:backdrop-blur-xs',
+			className,
+		)}
+		{...props}
+	>{children}</ModalOverlayPrimitive>;
+}
+
+export function Sheet({
+	className,
+	children,
+	side = 'right',
+	showCloseButton = true,
+	...props
+}: Omit<ModalOverlayPrimitiveProps, 'className' | 'children'> & { isDismissable?: boolean } & {
+	className?: string;
+	children: OctaneNode;
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	showCloseButton?: boolean;
+}) {
+	return <SheetOverlay {...props}>
+		<ModalPrimitive
+			data-slot="sheet-content"
+			data-side={side}
+			className={cn(
+				'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-entering:opacity-0 data-exiting:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-entering:translate-y-[2.5rem] data-[side=bottom]:data-exiting:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-entering:translate-x-[-2.5rem] data-[side=left]:data-exiting:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-entering:translate-x-[2.5rem] data-[side=right]:data-exiting:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-entering:translate-y-[-2.5rem] data-[side=top]:data-exiting:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
+				className,
+			)}
+		>
+			<SheetPrimitive
+				data-slot="sheet"
+				className="[display:inherit] h-full max-h-[inherit] [flex-direction:inherit] [gap:inherit] outline-none"
+			>
+				{children}
+				{showCloseButton &&
+					<SheetClose variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</SheetClose>}
+			</SheetPrimitive>
+		</ModalPrimitive>
+	</SheetOverlay>;
+}
+
+export function SheetContent({
+	className,
+	children,
+	side = 'right',
+	showCloseButton = true,
+	...props
+}: Record<string, any> & {
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	showCloseButton?: boolean;
+}) {
+	return <Sheet
+		className={className}
+		side={side}
+		showCloseButton={showCloseButton}
+		{...props}
+	>{children}</Sheet>;
+}
+
+export function SheetHeader({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="sheet-header"
+		className={cn('flex flex-col gap-0.5 p-4', className)}
+		{...props}
+	/>;
+}
+
+export function SheetFooter({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="sheet-footer"
+		className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+		{...props}
+	/>;
+}
+
+export function SheetTitle({ className, ...props }: Omit<HeadingProps, 'slot'>) {
+	return <Heading
+		slot="title"
+		data-slot="sheet-title"
+		className={cn('text-base font-medium text-foreground', className)}
+		{...props}
+	/>;
+}
+
+export function SheetDescription({ className, ...props }: Omit<HostProps<'div'>, 'slot'>) {
+	return <div
+		data-slot="sheet-description"
+		className={cn('text-sm text-muted-foreground', className)}
+		{...props}
+	/>;
+}

package/src/bases/react-aria/ui/skeleton.tsrx

@@ -0,0 +1,10 @@
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export function Skeleton({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="skeleton"
+		className={cn('animate-pulse rounded-md bg-muted', className)}
+		{...props}
+	/>;
+}

package/src/bases/react-aria/ui/slider.tsrx

@@ -0,0 +1,56 @@
+// OCTANE ADAPTATION: octane's renderable type is `OctaneNode = unknown`, and a
+// union containing `unknown` collapses to `unknown`, so RAC's children render
+// prop carries no inferable render values here. Annotating them restores the
+// upstream parameter types without weakening the binding.
+import {
+	SliderFill,
+	Slider as SliderPrimitive,
+	SliderThumb,
+	SliderTrack,
+	type SliderProps as SliderPrimitiveProps,
+	type SliderRenderProps,
+} from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+
+type SliderValue = number | number[];
+type SliderProps<T extends SliderValue = SliderValue> =
+	Omit<SliderPrimitiveProps<T>, 'className'> & {
+		className?: string;
+	};
+
+export function Slider<T extends SliderValue = SliderValue>({ className, ...props }: SliderProps<
+	T
+>) {
+	return <SliderPrimitive
+		className={cn(
+			'group relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col',
+			className,
+		)}
+		data-slot="slider"
+		{...props}
+	>
+		{({ state }: SliderRenderProps) => {
+			return <>
+				<SliderTrack
+					data-slot="slider-track"
+					className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+				>
+					<SliderFill
+						data-slot="slider-range"
+						className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+					/>
+				</SliderTrack>
+				{state.values.map(
+					(_: number, index: number) =>
+						<SliderThumb
+							data-slot="slider-thumb"
+							key={index}
+							index={index}
+							className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none group-data-horizontal:top-[50%] group-data-vertical:left-[50%] 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>;
+}

package/src/bases/react-aria/ui/spinner.tsrx

@@ -0,0 +1,28 @@
+// React Aria base spinner. Upstream's aria spinner is presentational — it uses
+// no RAC primitive — so this matches the Radix base apart from its own class
+// string.
+//
+// OCTANE DIVERGENCE: upstream's IconPlaceholder (the CLI-resolved iconLibrary
+// axis) is resolved at port time to the default library, lucide, via
+// @octanejs/lucide. Other icon libraries are a registry-emit concern.
+//
+// The props are a permissive record rather than HostProps<'svg'>: these are
+// forwarded to a lucide component, not applied to a host element, so the host
+// SVG attribute types do not describe them.
+import { Loader2Icon } from '@octanejs/lucide';
+
+import { cn } from '../../../lib/utils';
+
+export interface SpinnerProps extends Record<string, unknown> {
+	className?: string;
+}
+
+export function Spinner({ className, ...props }: SpinnerProps) @{
+	<Loader2Icon
+		data-slot="spinner"
+		role="status"
+		aria-label="Loading"
+		className={cn('size-4 animate-spin', className)}
+		{...props}
+	/>
+}

package/src/bases/react-aria/ui/switch.tsrx

@@ -0,0 +1,38 @@
+// OCTANE ADAPTATION: octane's renderable type is `OctaneNode = unknown`, and a
+// union containing `unknown` collapses to `unknown` — so RAC's
+// `ChildrenOrFunction` cannot keep its render-prop arm distinguishable the way
+// React's precise `ReactNode` union does, and composeRenderProps has nothing to
+// infer its render values from. Annotating them here restores the upstream
+// parameter types without weakening the binding.
+import {
+	composeRenderProps,
+	Switch as SwitchPrimitive,
+	type SwitchProps as SwitchPrimitiveProps,
+	type SwitchRenderProps,
+} from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+
+export function Switch({ className, size = 'default', children, ...props }: SwitchPrimitiveProps & {
+	size?: 'sm' | 'default';
+}) {
+	return <SwitchPrimitive
+		data-slot="switch"
+		data-size={size}
+		className={cn(
+			'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none not-data-selected:bg-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-focus-visible:border-ring data-focus-visible:ring-3 data-focus-visible:ring-ring/50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:not-data-selected:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-selected:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50',
+			className,
+		)}
+		{...props}
+	>{composeRenderProps(
+		children,
+		(children, { isSelected }: SwitchRenderProps) => <>
+			<span
+				data-slot="switch-thumb"
+				data-selected={isSelected || undefined}
+				className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=default]/switch:not-data-selected:translate-x-0 group-data-[size=sm]/switch:size-3 group-data-[size=sm]/switch:not-data-selected:translate-x-0 dark:not-data-selected:bg-foreground group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground group-data-[size=default]/switch:data-selected:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-selected:translate-x-[calc(100%-2px)] dark:data-selected:bg-primary-foreground"
+			/>
+			{children}
+		</>,
+	)}</SwitchPrimitive>;
+}