@octanejs/shadcn 0.0.7 → 0.0.9

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

@@ -0,0 +1,163 @@
+// Base UI base item — class strings from the maintainer-supplied radix source, verbatim. Ten of the
+// eleven parts are plain host elements, and the eleventh (`ItemSeparator`) delegates to this base's
+// own Separator, so it picks up Base UI's `aria-orientation` dialect automatically.
+//
+// NO DIALECT RISK IN THE VARIANTS, which is worth stating because they look like the ones that
+// caught toggle and slider: `data-[size=…]` and `data-[variant=…]` here read attributes THIS
+// component writes itself, not state emitted by a primitive. Nothing underneath emits anything.
+//
+// `Item` SHIPS WITHOUT `asChild`, the same call as badge and breadcrumb in this base. Radix swaps in
+// `Slot`; React Aria takes a `render` function; Base UI has no Slot, and item has no primitive to
+// borrow a `render` prop from, so nothing here settles the spelling upstream uses. Adding it later
+// is additive; shipping the wrong shape is breaking. A consumer needing a different element can
+// apply `itemVariants({ variant, size })` directly, which is what the class export is for.
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import { Separator } from './separator.tsrx';
+
+type DivProps = { className?: string } & Record<string, unknown>;
+
+export function ItemGroup({ className, ...props }: DivProps) @{
+	<div
+		role="list"
+		data-slot="item-group"
+		className={cn(
+			'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function ItemSeparator({ className, ...props }: DivProps) @{
+	<Separator
+		data-slot="item-separator"
+		orientation="horizontal"
+		className={cn('my-2', className)}
+		{...props}
+	/>
+}
+
+export const itemVariants = cva(
+	'group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted',
+	{
+		variants: {
+			variant: {
+				default: 'border-transparent',
+				outline: 'border-border',
+				muted: 'border-transparent bg-muted/50',
+			},
+			size: {
+				default: 'gap-2.5 px-3 py-2.5',
+				sm: 'gap-2.5 px-3 py-2.5',
+				xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+export interface ItemProps extends Record<string, unknown> {
+	className?: string;
+	/** Not supported in this base — see the header. Declared so it fails to compile, not silently. */
+	asChild?: never;
+	variant?: VariantProps<typeof itemVariants>['variant'];
+	size?: VariantProps<typeof itemVariants>['size'];
+}
+
+export function Item({ className, variant = 'default', size = 'default', ...props }: ItemProps) @{
+	<div
+		data-slot="item"
+		data-variant={variant}
+		data-size={size}
+		className={cn(itemVariants({ variant, size, className }))}
+		{...props}
+	/>
+}
+
+export const itemMediaVariants = cva(
+	'flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				icon: '[&_svg:not([class*=\'size-\'])]:size-4',
+				image: 'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export interface ItemMediaProps extends Record<string, unknown> {
+	className?: string;
+	variant?: VariantProps<typeof itemMediaVariants>['variant'];
+}
+
+export function ItemMedia({ className, variant = 'default', ...props }: ItemMediaProps) @{
+	<div
+		data-slot="item-media"
+		data-variant={variant}
+		className={cn(itemMediaVariants({ variant, className }))}
+		{...props}
+	/>
+}
+
+export function ItemContent({ className, ...props }: DivProps) @{
+	<div
+		data-slot="item-content"
+		className={cn(
+			'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function ItemTitle({ className, ...props }: DivProps) @{
+	<div
+		data-slot="item-title"
+		className={cn(
+			'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function ItemDescription({ className, ...props }: DivProps) @{
+	<p
+		data-slot="item-description"
+		className={cn(
+			'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function ItemActions({ className, ...props }: DivProps) @{
+	<div data-slot="item-actions" className={cn('flex items-center gap-2', className)} {...props} />
+}
+
+export function ItemHeader({ className, ...props }: DivProps) @{
+	<div
+		data-slot="item-header"
+		className={cn('flex basis-full items-center justify-between gap-2', className)}
+		{...props}
+	/>
+}
+
+export function ItemFooter({ className, ...props }: DivProps) @{
+	<div
+		data-slot="item-footer"
+		className={cn('flex basis-full items-center justify-between gap-2', 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/pagination.tsrx

@@ -0,0 +1,125 @@
+// Base UI base pagination — TRANSCRIBED from upstream's `bases/base-ui/ui/pagination.tsx`
+// (maintainer-supplied), class strings verbatim. There is no pagination primitive in any base;
+// the family is host elements plus button styling, and the only base-specific question is how the
+// link acquires that styling.
+//
+// THE LINK GOES THROUGH `Button`, NOT THROUGH `buttonVariants`. The radix base writes
+// `<Button asChild><a/></Button>`, where Slot is a pure prop-merger that layers no button
+// semantics onto the anchor. Base UI has no Slot, so upstream uses the `render` prop plus
+// `nativeButton={false}` — the documented escape for "this Button is not a native `<button>`".
+//
+// THE TWO BASES THEREFORE DIVERGE OBSERVABLY, and that is upstream's call, not a porting bug:
+// this base's links carry `role="button"` and `tabindex="0"` (verified by rendering) where the
+// radix base's carry neither. `nativeButton={false}` is what keeps keyboard activation working on
+// a non-button element, which is the trade upstream chose. Do not "fix" this toward radix by
+// dropping Button for a bare `buttonVariants()` anchor: it diverges from the source, and it also
+// drops the key handling Base UI attaches.
+//
+// Octane adaptations: lucide-react → @octanejs/lucide, and children are passed explicitly rather
+// than riding along in the props spread — React's `ComponentProps<"a">` carries `children`, octane
+// routes it through its own channel.
+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, {
+		variant: isActive ? 'outline' : 'ghost',
+		size,
+		className: cn(className),
+		nativeButton: false,
+		render: 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/bases/base-ui/ui/popover.tsrx

@@ -0,0 +1,124 @@
+// 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.
+// POSITIONING PROPS BELONG TO THE POSITIONER, NOT THE POPUP. Radix has one `Content` element that
+// takes them all; Base UI splits positioning into its own layer, so anything forwarded to `Popup`
+// instead is inert — `side="top"` silently leaves the popup on the default side, and the prop lands
+// on the DOM as an invalid attribute. They are destructured and routed explicitly.
+//
+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 BaseUiPositioningProps {
+	/** Forwarded to the Positioner; see the note at the top of this file. */
+	side?: 'top' | 'right' | 'bottom' | 'left';
+	sideOffset?: number;
+	align?: 'start' | 'center' | 'end';
+	alignOffset?: number;
+	anchor?: unknown;
+	positionMethod?: 'absolute' | 'fixed';
+	collisionBoundary?: unknown;
+	collisionPadding?: unknown;
+	collisionAvoidance?: unknown;
+	arrowPadding?: number;
+	sticky?: boolean;
+	disableAnchorTracking?: boolean;
+}
+
+export interface PopoverContentProps extends Record<string, unknown>, BaseUiPositioningProps {
+	className?: string;
+}
+
+export function PopoverContent({
+	className,
+	align = 'center',
+	sideOffset = 4,
+	side,
+	alignOffset,
+	anchor,
+	positionMethod,
+	collisionBoundary,
+	collisionPadding,
+	collisionAvoidance,
+	arrowPadding,
+	sticky,
+	disableAnchorTracking,
+	...props
+}: PopoverContentProps) {
+	return createElement(PopoverPrimitive.Portal, {
+		children: createElement(PopoverPrimitive.Positioner, {
+			side,
+			sideOffset,
+			align,
+			alignOffset,
+			anchor,
+			positionMethod,
+			collisionBoundary,
+			collisionPadding,
+			collisionAvoidance,
+			arrowPadding,
+			sticky,
+			disableAnchorTracking,
+			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/progress.tsrx

@@ -0,0 +1,46 @@
+// Base UI base progress — runs on @octanejs/base-ui's Progress.
+//
+// TWO STRUCTURAL DIFFERENCES FROM THE RADIX BASE, both verified by rendering the primitive
+// rather than inferred:
+//
+//   1. THERE IS A TRACK PART. Radix goes Root > Indicator; Base UI goes Root > Track > Indicator,
+//      and the Track is what carries the rail. Rendering an Indicator directly under Root would
+//      put it outside the element the primitive sizes against.
+//
+//   2. THE INDICATOR SIZES ITSELF. Radix leaves the fill entirely to the consumer, which is why
+//      its base ships `style={{ transform: translateX(-${100 - value}%) }}`. Base UI's Indicator
+//      already emits `width: <value>%` inline. Carrying the radix transform across would shift a
+//      correctly-sized bar sideways by the same amount again — a double offset, worst at the
+//      midpoint and invisible at 0% and 100%.
+//
+// So `value` is forwarded to the Root (which owns the aria-valuenow/valuetext contract) and NOT
+// turned into a transform.
+//
+// UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
+// transcribed from upstream's Base UI source; the rail/fill classes are split across Track and
+// Indicator to match the extra part.
+import { Progress as ProgressPrimitive } from '@octanejs/base-ui/progress';
+
+import { cn } from '../../../lib/utils';
+
+export interface ProgressProps extends Record<string, unknown> {
+	className?: string;
+	value?: number | null;
+}
+
+export function Progress({ className, value, ...props }: ProgressProps) @{
+	// Base UI's Root types `value` as `number | null` where shadcn's prop is optional, and null is
+	// its documented indeterminate state — so an omitted value maps to null rather than being
+	// forwarded as undefined.
+	<ProgressPrimitive.Root data-slot="progress" value={value ?? null} {...props}>
+		<ProgressPrimitive.Track
+			data-slot="progress-track"
+			className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
+		>
+			<ProgressPrimitive.Indicator
+				data-slot="progress-indicator"
+				className="h-full bg-primary transition-all"
+			/>
+		</ProgressPrimitive.Track>
+	</ProgressPrimitive.Root>
+}

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

@@ -0,0 +1,62 @@
+// 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.
+//
+// THE ROOT MUST CARRY ITS OWN DISPLAY, and this is the second consequence of that same `<span>`.
+// Radix's radio root is a `<button>`, which is `display: inline-block` by default, so its class
+// string never needed one and `size-4` just worked. A bare `<span>` is `display: inline`, where
+// width and height are IGNORED — the box collapses and only `border` paints, rendering the control
+// as a thin vertical bar beside its label rather than a circle. The React Aria base hit the same
+// thing (its root is not a button either) and carries `relative flex` for it; this base copied the
+// radix string and lost it. Hence `relative flex … items-center justify-center` here.
+//
+// The indicator is `size-full` rather than `relative` so the dot, which positions itself with
+// `absolute … -translate-1/2`, anchors to the ROOT's 16px box — matching the React Aria base. Left
+// `relative`, it would anchor to a zero-sized flex item and sit off-centre.
+//
+// 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(
+			'relative flex aspect-square size-4 shrink-0 items-center justify-center 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="flex size-full 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}
+	/>
+}