@octanejs/shadcn 0.0.6 → 0.0.8

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

@@ -0,0 +1,137 @@
+// Base UI base dialog — runs on @octanejs/base-ui's Dialog.
+// Part mapping: Overlay -> Backdrop, Content -> Popup, and the close affordance composes a
+// Button through Base UI's render-as-ELEMENT contract rather than radix's `asChild`.
+//
+// `data-open:`/`data-closed:` need no adaptation — the radix base already uses that exact form
+// and Base UI emits the same attributes.
+//
+// Drops upstream's `cn-font-heading` on the title, matching the react-aria base and this base's
+// alert-dialog: the package ships the utilities-inlined flavor and nothing defines that hook.
+//
+// UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
+// transcribed from upstream's Base UI source.
+import { createElement, type OctaneNode } from 'octane';
+import { Dialog as DialogPrimitive } from '@octanejs/base-ui/dialog';
+import { XIcon } from '@octanejs/lucide';
+
+import { cn } from '../../../lib/utils';
+import { Button } from './button.tsrx';
+
+type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
+
+export function Dialog(props: Record<string, unknown>) @{
+	<DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+export function DialogTrigger(props: Record<string, unknown>) @{
+	<DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+export function DialogPortal(props: Record<string, unknown>) @{
+	<DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+export function DialogClose(props: Record<string, unknown>) @{
+	<DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+export function DialogOverlay({ className, ...props }: Props) @{
+	<DialogPrimitive.Backdrop
+		data-slot="dialog-overlay"
+		className={cn(
+			'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export interface DialogContentProps extends Props {
+	showCloseButton?: boolean;
+}
+
+export function DialogContent({
+	className,
+	children,
+	showCloseButton = true,
+	...props
+}: DialogContentProps) {
+	return createElement(
+		DialogPrimitive.Portal,
+		{ 'data-slot': 'dialog-portal' },
+		createElement(DialogOverlay, { key: 'overlay' }),
+		createElement(
+			DialogPrimitive.Popup,
+			{
+				key: 'content',
+				'data-slot': 'dialog-content',
+				className: cn(
+					'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm 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,
+			},
+			children,
+			showCloseButton
+				? createElement(DialogPrimitive.Close, {
+						key: 'close',
+						'data-slot': 'dialog-close',
+						className: 'absolute top-2 right-2',
+						render: createElement(
+							Button,
+							{ variant: 'ghost', size: 'icon-sm' },
+							createElement(XIcon, { key: 'icon' }),
+							createElement('span', { key: 'sr', className: 'sr-only' }, 'Close'),
+						),
+					})
+				: null,
+		),
+	);
+}
+
+export function DialogHeader({ className, ...props }: Props) @{
+	<div data-slot="dialog-header" className={cn('flex flex-col gap-2', className)} {...props} />
+}
+
+export interface DialogFooterProps extends Props {
+	showCloseButton?: boolean;
+}
+
+export function DialogFooter(props: DialogFooterProps) @{
+	const { className, showCloseButton = false, children: _children, ...rest } = props;
+
+	<div
+		data-slot="dialog-footer"
+		className={cn(
+			'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
+			className,
+		)}
+		{...rest}
+	>
+		{props.children}
+		{showCloseButton
+			? createElement(DialogPrimitive.Close, {
+					render: createElement(Button, { variant: 'outline' }, 'Close'),
+				})
+			: null}
+	</div>
+}
+
+export function DialogTitle({ className, ...props }: Props) @{
+	<DialogPrimitive.Title
+		data-slot="dialog-title"
+		className={cn('text-base leading-none font-medium', className)}
+		{...props}
+	/>
+}
+
+export function DialogDescription({ className, ...props }: Props) @{
+	<DialogPrimitive.Description
+		data-slot="dialog-description"
+		className={cn(
+			'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+			className,
+		)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,88 @@
+// Base UI base empty — presentational, no headless primitive in any base.
+//
+// UNVERIFIED PROVENANCE: derived from this package's React Aria base rather than transcribed
+// from upstream's `bases/base-ui/ui/empty.tsx`, which was not available at port time.
+// Diff the class strings against the upstream source before treating this as ported.
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import type { DivProps, HostProps } from '../../../lib/types';
+
+export function Empty({ className, ...props }: DivProps) @{
+	<div
+		data-slot="empty"
+		className={cn(
+			'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function EmptyHeader({ className, ...props }: DivProps) @{
+	<div
+		data-slot="empty-header"
+		className={cn('flex max-w-sm flex-col items-center gap-2', className)}
+		{...props}
+	/>
+}
+
+export const emptyMediaVariants = cva(
+	'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				icon: 'flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*=\'size-\'])]:size-4',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export interface EmptyMediaProps extends DivProps {
+	variant?: VariantProps<typeof emptyMediaVariants>['variant'];
+}
+
+export function EmptyMedia({ className, variant = 'default', ...props }: EmptyMediaProps) @{
+	<div
+		data-slot="empty-icon"
+		data-variant={variant}
+		className={cn(emptyMediaVariants({ variant, className }))}
+		{...props}
+	/>
+}
+
+export function EmptyTitle({ className, ...props }: DivProps) @{
+	<div
+		data-slot="empty-title"
+		className={cn('text-sm font-medium tracking-tight', className)}
+		{...props}
+	/>
+}
+
+// Upstream types this part as a `<p>` while rendering a `<div>`; the prop type is transcribed
+// as-authored rather than "corrected", so the surface matches upstream exactly.
+export function EmptyDescription({ className, ...props }: HostProps<'p'>) @{
+	<div
+		data-slot="empty-description"
+		className={cn(
+			'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function EmptyContent({ className, ...props }: DivProps) @{
+	<div
+		data-slot="empty-content"
+		className={cn(
+			'flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance',
+			className,
+		)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,28 @@
+// Base UI base input — runs on the @octanejs/base-ui `Input` primitive, which is a native
+// `<input>` wired into Field (it is literally `Field.Control`).
+//
+// No `composeRenderProps` here, unlike the React Aria base: RAC routes `className` through a
+// render-prop pipeline that must be composed, whereas Base UI's `className` is a plain string or
+// a `(state) => string`, so `cn` applies directly.
+//
+// UNVERIFIED PROVENANCE: the class string is taken from this package's React Aria base rather
+// than transcribed from upstream's Base UI source. Nothing in it keys off a primitive-emitted
+// attribute, so it is a lower-risk case than `separator` — but verify before treating as ported.
+//
+// OCTANE DIVERGENCE: per-keystroke handling is the native `onInput` event; native `change`
+// keeps its commit-on-blur meaning.
+import { Input as InputPrimitive } from '@octanejs/base-ui/input';
+
+import { cn } from '../../../lib/utils';
+
+export function Input({ className, type, ...props }: Record<string, any>) @{
+	<InputPrimitive
+		type={type}
+		data-slot="input"
+		className={cn(
+			'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-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 disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+			className,
+		)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,27 @@
+// Base UI base kbd — plain host `<kbd>` elements. Base UI ships no Keyboard primitive (the
+// React Aria base renders both parts through RAC's `Keyboard`), so this matches the Radix
+// base's plain-host shape.
+//
+// UNVERIFIED PROVENANCE: class strings taken from this package's React Aria base rather than
+// transcribed from upstream's Base UI source.
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export function Kbd({ className, ...props }: HostProps<'kbd'>) @{
+	<kbd
+		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 }: HostProps<'kbd'>) @{
+	<kbd
+		data-slot="kbd-group"
+		className={cn('inline-flex items-center gap-1', className)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,31 @@
+// Base UI base label — a plain host `<label>`.
+//
+// NOT `Field.Label`, and that is the whole point of this file. Base UI's label part is
+// `Field.Label`, but it calls `useFieldRootContext(false)` — it HARD-REQUIRES a `<Field.Root>`
+// ancestor and throws "FieldRootContext is missing" without one. Upstream's own FieldLabel does
+// the same, so that is faithful behavior, not a porting defect.
+//
+// shadcn's `Label`, by contrast, is a standalone component: the docs use it beside an Input with
+// no Field wrapper at all, which is exactly how the playground uses it. Routing it through
+// `Field.Label` made every such use a runtime crash. A plain `<label>` works standalone AND
+// inside a Field, and consumers who want Base UI's automatic label/control association can reach
+// for `Field.Label` directly.
+//
+// Regression coverage: `tests/base-ui-standalone.test.ts`.
+//
+// UNVERIFIED PROVENANCE: the class string is taken from this package's React Aria base rather
+// than transcribed from upstream's Base UI source. It carries one utility the Radix base omits
+// (`peer-data-disabled:opacity-50`).
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export function Label({ className, ...props }: HostProps<'label'>) @{
+	<label
+		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}
+	/>
+}

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

@@ -0,0 +1,54 @@
+// Base UI base native-select — a real `<select>`, so no headless primitive in any base.
+//
+// UNVERIFIED PROVENANCE: derived from this package's React Aria base rather than transcribed
+// from upstream's `bases/base-ui/ui/native-select.tsx`, which was not available at port time.
+// Diff the class strings against the upstream source before treating this as ported.
+//
+// OCTANE DIVERGENCE: upstream's IconPlaceholder resolves to lucide via @octanejs/lucide.
+// Events are native: a `<select>`'s `change` keeps its platform commit meaning, so consumer
+// `onChange` handlers are passed through unrenamed.
+import { ChevronDownIcon } from '@octanejs/lucide';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export type NativeSelectProps =
+	Omit<HostProps<'select'>, 'size'> & {
+		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 }: HostProps<'option'>) @{
+	<option
+		data-slot="native-select-option"
+		className={cn('bg-[Canvas] text-[CanvasText]', className)}
+		{...props}
+	/>
+}
+
+export function NativeSelectOptGroup({ className, ...props }: HostProps<'optgroup'>) @{
+	<optgroup
+		data-slot="native-select-optgroup"
+		className={cn('bg-[Canvas] text-[CanvasText]', className)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,85 @@
+// Base UI base popover — runs on @octanejs/base-ui's Popover.
+//
+// TWO POSITIONING DIFFERENCES FROM THE RADIX BASE, both verified by rendering the primitive and
+// reading the DOM rather than inferred:
+//
+//   1. THE TRANSFORM-ORIGIN CSS VAR IS NAMED DIFFERENTLY. Radix publishes
+//      `--radix-popover-content-transform-origin`; Base UI's Positioner publishes plain
+//      `--transform-origin`. Copying radix's `origin-(--radix-popover-content-transform-origin)`
+//      leaves the utility referencing a variable nothing ever sets, so the popup would scale
+//      from the wrong corner on open — visible only in motion, and invisible to any class
+//      comparison.
+//
+//   2. THERE IS A POSITIONER LAYER. Radix goes Portal > Content; Base UI goes
+//      Portal > Positioner > Popup, and the Positioner owns side/align/offset. `data-side` and
+//      `data-align` land on BOTH the positioner and the popup, so the `data-[side=…]` slide
+//      utilities still resolve on the popup where the radix base put them.
+//
+// NO PopoverAnchor. Radix ships an Anchor part for positioning against something other than the
+// trigger; Base UI's Positioner takes an `anchor` prop instead, so there is no element to render
+// and no slot to emit. Recorded in tests/cross-base.test.ts rather than faked.
+//
+// UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
+// transcribed from upstream's Base UI source.
+import { createElement } from 'octane';
+import { Popover as PopoverPrimitive } from '@octanejs/base-ui/popover';
+
+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.Positioner, {
+			align,
+			sideOffset,
+			children: createElement(PopoverPrimitive.Popup, {
+				'data-slot': 'popover-content',
+				className: cn(
+					'z-50 flex w-72 origin-(--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 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/bases/base-ui/ui/radio-group.tsrx

@@ -0,0 +1,50 @@
+// Base UI base radio-group — runs on @octanejs/base-ui's `RadioGroup` plus `Radio`.
+//
+// PART MAPPING DIFFERS FROM RADIX. Radix nests everything under one namespace
+// (RadioGroup.Root / .Item / .Indicator); Base UI splits the group from the item, so the item
+// is `Radio.Root` from a separate subpath and the indicator is `Radio.Indicator`. The exported
+// component names and every data-slot stay as shadcn defines them, so consumers see no
+// difference — this is wiring, not API.
+//
+// `disabled:` becomes `data-disabled:` for the same reason as checkbox and switch: Radio.Root
+// renders a `<span role="radio">`, which is never `:disabled`, so the pseudo-class variant could
+// never match. The primitive publishes `data-disabled` instead.
+//
+// UNVERIFIED PROVENANCE: the non-conditional utilities come from this package's radix base
+// rather than upstream's Base UI source.
+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';
+
+type Props = { className?: string } & Record<string, unknown>;
+
+// Base UI's Radio.Root requires `value` (Radix infers it from the item), so the item's props
+// type demands it. shadcn usage always passes one, so this tightens the type without changing
+// the surface.
+type ItemProps = { className?: string; value: any } & Record<string, unknown>;
+
+export function RadioGroup({ className, ...props }: Props) @{
+	<RadioGroupPrimitive data-slot="radio-group" className={cn('grid gap-3', className)} {...props} />
+}
+
+export function RadioGroupItem({ className, ...props }: ItemProps) @{
+	<RadioPrimitive.Root
+		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 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
+			className,
+		)}
+		{...props}
+	>
+		<RadioPrimitive.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"
+			/>
+		</RadioPrimitive.Indicator>
+	</RadioPrimitive.Root>
+}

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

@@ -0,0 +1,34 @@
+// Base UI base separator — runs on the @octanejs/base-ui `Separator` primitive.
+//
+// THE CLASS STRING IS DELIBERATELY THE ARIA BASE'S, NOT THE RADIX BASE'S, and this is the one
+// family where copying the wrong base is a real bug rather than a cosmetic risk. The
+// orientation-conditional utilities must key off the attribute the primitive actually emits:
+//
+//   Radix     sets `data-orientation` -> `data-horizontal:h-px`
+//   RAC       sets `aria-orientation` -> `aria-[orientation=horizontal]:h-px`
+//   Base UI   sets `aria-orientation` -> same as RAC (verified in the primitive: it renders
+//             `role="separator"` plus `aria-orientation={orientation}`)
+//
+// Taking the Radix string here would produce a separator with no height or width at all, and
+// nothing in a class-string comparison would flag it. Upstream's own bases diverge here for
+// 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';
+
+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/base-ui/ui/skeleton.tsrx

@@ -0,0 +1,17 @@
+// Base UI base skeleton — presentational, no headless primitive in any base.
+//
+// UNVERIFIED PROVENANCE: derived from this package's React Aria base rather than transcribed
+// from upstream's `bases/base-ui/ui/skeleton.tsx`, which was not available at port time.
+// 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 type { DivProps } from '../../../lib/types';
+
+export function Skeleton({ className, ...props }: DivProps) @{
+	<div
+		data-slot="skeleton"
+		className={cn('animate-pulse rounded-md bg-muted', className)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,30 @@
+// Base UI base spinner — presentational, no headless primitive in any base.
+//
+// UNVERIFIED PROVENANCE: derived from this package's React Aria base rather than transcribed
+// from upstream's `bases/base-ui/ui/spinner.tsx`, which was not available at port time.
+// Diff the class strings against the upstream source before treating this as ported.
+//
+// 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/base-ui/ui/switch.tsrx

@@ -0,0 +1,43 @@
+// Base UI base switch — runs on the @octanejs/base-ui `Switch` primitive.
+//
+// TWO ATTRIBUTE DIALECTS DIFFER FROM THE RADIX BASE, both verified by rendering the primitive:
+//
+//   1. Checked state. Radix publishes `data-state="checked"`, Base UI publishes bare
+//      `data-checked` / `data-unchecked` attributes:
+//        radix:   `data-[state=checked]:bg-primary`
+//        base-ui: `data-checked:bg-primary`
+//      Copying the radix form would leave the switch permanently showing its unchecked colours
+//      and the thumb never translating — the exact symptom of a wrong-base copy.
+//
+//   2. Disabled. Switch.Root renders a `<span role="switch">`, never `:disabled`, so
+//      `disabled:` cannot match; the primitive emits `data-disabled` instead.
+//
+// UNVERIFIED PROVENANCE: the non-conditional utilities come from this package's radix base
+// rather than upstream's Base UI source.
+import { Switch as SwitchPrimitive } from '@octanejs/base-ui/switch';
+
+import { cn } from '../../../lib/utils';
+
+export interface SwitchProps extends Record<string, unknown> {
+	className?: string;
+	size?: 'sm' | 'default';
+}
+
+export function Switch({ className, size = 'default', ...props }: SwitchProps) @{
+	<SwitchPrimitive.Root
+		data-slot="switch"
+		data-size={size}
+		className={cn(
+			'peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80',
+			className,
+		)}
+		{...props}
+	>
+		<SwitchPrimitive.Thumb
+			data-slot="switch-thumb"
+			className={cn(
+				'pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-checked:translate-x-[calc(100%-2px)] data-unchecked:translate-x-0 dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground',
+			)}
+		/>
+	</SwitchPrimitive.Root>
+}

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

@@ -0,0 +1,22 @@
+// Base UI base textarea — a plain host `<textarea>`. Base UI ships no textarea primitive (its
+// Input is a native `<input>` via Field.Control), so unlike the React Aria base there is no
+// `TextArea` component to compose and this matches the Radix base's plain-host shape.
+//
+// UNVERIFIED PROVENANCE: class string taken from this package's React Aria base rather than
+// transcribed from upstream's Base UI source.
+//
+// OCTANE DIVERGENCE: 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 type { HostProps } from '../../../lib/types';
+
+export function Textarea({ className, ...props }: HostProps<'textarea'>) @{
+	<textarea
+		data-slot="textarea"
+		className={cn(
+			'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+			className,
+		)}
+		{...props}
+	/>
+}