@octanejs/shadcn 0.0.7 → 0.0.9

package/src/bases/base-ui/ui/dropdown-menu.tsrx

@@ -0,0 +1,292 @@
+// Base UI base dropdown-menu — runs on @octanejs/base-ui's `Menu`. Class strings come from the
+// maintainer-supplied radix source; every difference below was verified by rendering the primitive
+// and reading the DOM, not inferred.
+//
+// PART TREE. Radix's `Content` is one element; Base UI splits positioning out, exactly as this
+// base's popover already does:
+//
+//     radix     Root > Portal > Content
+//     Base UI   Root > Portal > Positioner > Popup      (Positioner owns align/sideOffset)
+//
+// THREE CSS VARIABLES ARE RENAMED. Radix publishes per-component names; Base UI's Positioner
+// publishes generic ones, and a utility pointing at a variable nothing sets silently does nothing:
+//
+//     --radix-dropdown-menu-content-available-height  ->  --available-height
+//     --radix-dropdown-menu-trigger-width             ->  --anchor-width
+//     --radix-dropdown-menu-content-transform-origin  ->  --transform-origin
+//
+// THE SUBMENU TRIGGER'S OPEN ATTRIBUTE DIFFERS. Base UI marks an open trigger with
+// `data-popup-open` (triggerOpenStateMapping), not the `data-open` the popup itself carries — so
+// radix's `data-open:bg-accent` on the sub-trigger would never match and an open submenu's parent
+// row would not stay highlighted.
+//
+// WHAT DOES CARRY OVER UNCHANGED, and is worth recording because it looks like it should not:
+// radix styles item highlight with `focus:`, which works here because Base UI moves REAL DOM focus
+// onto the highlighted item (checked by driving ArrowDown and reading document.activeElement) as
+// well as publishing `data-highlighted`. `data-side`, `data-align`, `data-open`, `data-closed` and
+// `data-disabled` are all emitted with the same spellings radix uses.
+//
+// TWO PARTS ARE PLAIN HOST ELEMENTS ON PURPOSE:
+//   - `Label` is a `<div>`, NOT `Menu.GroupLabel`. That part calls useMenuGroupRootContext and
+//     THROWS "MenuGroupContext is missing" outside a `Menu.Group`, while shadcn's label is
+//     routinely used standalone. Same trap as `Field.Label`, which already shipped as a crash once.
+//   - `Separator` is a `<div>`, because the Menu namespace has no Separator part at all (its
+//     sibling ContextMenu does). The radix classes are pure styling, so nothing is lost.
+// 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 menu on the default side, and both `side` and
+// `alignOffset` land on the DOM as invalid attributes. They are therefore destructured and routed
+// explicitly rather than swept up by the rest spread.
+import { type OctaneNode } from 'octane';
+import { Menu as MenuPrimitive } from '@octanejs/base-ui/menu';
+import { CheckIcon, ChevronRightIcon } from '@octanejs/lucide';
+
+import { cn } from '../../../lib/utils';
+
+type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
+
+export function DropdownMenu(props: Record<string, unknown>) @{
+	<MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+export function DropdownMenuPortal(props: Record<string, unknown>) @{
+	<MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+export function DropdownMenuTrigger(props: Record<string, unknown>) @{
+	<MenuPrimitive.Trigger data-slot="dropdown-menu-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 DropdownMenuContentProps extends Props, BaseUiPositioningProps {}
+
+export function DropdownMenuContent({
+	className,
+	align = 'start',
+	sideOffset = 4,
+	side,
+	alignOffset,
+	anchor,
+	positionMethod,
+	collisionBoundary,
+	collisionPadding,
+	collisionAvoidance,
+	arrowPadding,
+	sticky,
+	disableAnchorTracking,
+	...props
+}: DropdownMenuContentProps) @{
+	<MenuPrimitive.Portal>
+		<MenuPrimitive.Positioner
+			side={side}
+			sideOffset={sideOffset}
+			align={align}
+			alignOffset={alignOffset}
+			anchor={anchor}
+			positionMethod={positionMethod}
+			collisionBoundary={collisionBoundary}
+			collisionPadding={collisionPadding}
+			collisionAvoidance={collisionAvoidance}
+			arrowPadding={arrowPadding}
+			sticky={sticky}
+			disableAnchorTracking={disableAnchorTracking}
+		>
+			<MenuPrimitive.Popup
+				data-slot="dropdown-menu-content"
+				className={cn(
+					'z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 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-closed:overflow-hidden 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}
+			/>
+		</MenuPrimitive.Positioner>
+	</MenuPrimitive.Portal>
+}
+
+export function DropdownMenuGroup(props: Record<string, unknown>) @{
+	<MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+export function DropdownMenuItem({ className, inset, variant = 'default', ...props }: Props & {
+	inset?: boolean;
+	variant?: 'default' | 'destructive';
+}) @{
+	<MenuPrimitive.Item
+		data-slot="dropdown-menu-item"
+		data-inset={inset}
+		data-variant={variant}
+		className={cn(
+			'group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function DropdownMenuCheckboxItem(props: Props & {
+	checked?: boolean;
+	inset?: boolean;
+}) @{
+	const { className, children: _children, checked, inset, ...rest } = props;
+
+	<MenuPrimitive.CheckboxItem
+		data-slot="dropdown-menu-checkbox-item"
+		data-inset={inset}
+		className={cn(
+			'relative flex 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 focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			className,
+		)}
+		checked={checked}
+		{...rest}
+	>
+		<span
+			className="pointer-events-none absolute right-2 flex items-center justify-center"
+			data-slot="dropdown-menu-checkbox-item-indicator"
+		>
+			<MenuPrimitive.CheckboxItemIndicator>
+				<CheckIcon />
+			</MenuPrimitive.CheckboxItemIndicator>
+		</span>
+		{props.children}
+	</MenuPrimitive.CheckboxItem>
+}
+
+export function DropdownMenuRadioGroup(props: Record<string, unknown>) @{
+	<MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
+}
+
+export function DropdownMenuRadioItem(props: Props & { inset?: boolean }) @{
+	const { className, children: _children, inset, ...rest } = props;
+
+	<MenuPrimitive.RadioItem
+		data-slot="dropdown-menu-radio-item"
+		data-inset={inset}
+		className={cn(
+			'relative flex 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 focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			className,
+		)}
+		{...rest}
+	>
+		<span
+			className="pointer-events-none absolute right-2 flex items-center justify-center"
+			data-slot="dropdown-menu-radio-item-indicator"
+		>
+			<MenuPrimitive.RadioItemIndicator>
+				<CheckIcon />
+			</MenuPrimitive.RadioItemIndicator>
+		</span>
+		{props.children}
+	</MenuPrimitive.RadioItem>
+}
+
+export function DropdownMenuLabel({ className, inset, ...props }: Props & { inset?: boolean }) @{
+	<div
+		data-slot="dropdown-menu-label"
+		data-inset={inset}
+		className={cn(
+			'px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function DropdownMenuSeparator({ className, ...props }: Props) @{
+	<div
+		role="separator"
+		aria-orientation="horizontal"
+		data-slot="dropdown-menu-separator"
+		className={cn('-mx-1 my-1 h-px bg-border', className)}
+		{...props}
+	/>
+}
+
+export function DropdownMenuShortcut({ className, ...props }: Props) @{
+	<span
+		data-slot="dropdown-menu-shortcut"
+		className={cn(
+			'ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function DropdownMenuSub(props: Record<string, unknown>) @{
+	<MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+export function DropdownMenuSubTrigger(props: Props & { inset?: boolean }) @{
+	const { className, children: _children, inset, ...rest } = props;
+
+	<MenuPrimitive.SubmenuTrigger
+		data-slot="dropdown-menu-sub-trigger"
+		data-inset={inset}
+		className={cn(
+			'flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+			className,
+		)}
+		{...rest}
+	>
+		{props.children}
+		<ChevronRightIcon className="cn-rtl-flip ml-auto" />
+	</MenuPrimitive.SubmenuTrigger>
+}
+
+export function DropdownMenuSubContent({
+	className,
+	align,
+	sideOffset,
+	side,
+	alignOffset,
+	anchor,
+	positionMethod,
+	collisionBoundary,
+	collisionPadding,
+	collisionAvoidance,
+	arrowPadding,
+	sticky,
+	disableAnchorTracking,
+	...props
+}: Props & BaseUiPositioningProps) @{
+	<MenuPrimitive.Portal>
+		<MenuPrimitive.Positioner
+			side={side}
+			sideOffset={sideOffset}
+			align={align}
+			alignOffset={alignOffset}
+			anchor={anchor}
+			positionMethod={positionMethod}
+			collisionBoundary={collisionBoundary}
+			collisionPadding={collisionPadding}
+			collisionAvoidance={collisionAvoidance}
+			arrowPadding={arrowPadding}
+			sticky={sticky}
+			disableAnchorTracking={disableAnchorTracking}
+		>
+			<MenuPrimitive.Popup
+				data-slot="dropdown-menu-sub-content"
+				className={cn(
+					'z-50 min-w-[96px] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 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}
+			/>
+		</MenuPrimitive.Positioner>
+	</MenuPrimitive.Portal>
+}

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/field.tsrx

@@ -0,0 +1,201 @@
+// Base UI base field — TRANSCRIBED from upstream's `bases/base-ui/ui/field.tsx` (maintainer-supplied),
+// class strings verbatim. Byte-for-byte the same component as the radix base apart from which
+// `Label` and `Separator` it imports.
+//
+// UPSTREAM DOES NOT USE THE `Field` PRIMITIVE HERE, even though @octanejs/base-ui ships one whose
+// parts line up exactly (Root/Control/Label/Description/Error/Validity/Item). That is worth stating
+// because the opposite is the natural guess, and it decides the class strings: `data-invalid` and
+// `data-disabled` on these elements are written by the CONSUMER, so `data-[invalid=true]:` and
+// `group-data-[disabled=true]/field:` are correct as written. Had this routed through `Field.Root`,
+// the primitive would emit BARE `data-invalid=""` (see fieldValidityMapping) and every one of those
+// variants would silently match nothing.
+//
+// It also means `FieldLabel` is safe standalone: it renders this base's plain `<label>`, not
+// `Field.Label`, which hard-requires a `<Field.Root>` ancestor and throws without one.
+//
+// Octane adaptations: "use client" dropped; Label/Separator come from this base's own ports;
+// FieldSeparator and FieldError compose their conditional children with createElement (a
+// `children && …` branch beside a sibling descriptor), everything else is template JSX.
+import { createElement, useMemo, type OctaneNode } from 'octane';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import { Label } from './label.tsrx';
+import { Separator } from './separator.tsrx';
+
+type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
+
+export function FieldSet({ className, ...props }: Props) @{
+	<fieldset
+		data-slot="field-set"
+		className={cn(
+			'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function FieldLegend({ className, variant = 'legend', ...props }: Props & {
+	variant?: 'legend' | 'label';
+}) @{
+	<legend
+		data-slot="field-legend"
+		data-variant={variant}
+		className={cn(
+			'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function FieldGroup({ className, ...props }: Props) @{
+	<div
+		data-slot="field-group"
+		className={cn(
+			'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export const fieldVariants = cva(
+	'group/field flex w-full gap-2 data-[invalid=true]:text-destructive',
+	{
+		variants: {
+			orientation: {
+				vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
+				horizontal: 'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+				responsive: 'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+			},
+		},
+		defaultVariants: {
+			orientation: 'vertical',
+		},
+	},
+);
+
+export function Field({ className, orientation = 'vertical', ...props }: Props & {
+	orientation?: VariantProps<typeof fieldVariants>['orientation'];
+}) @{
+	<div
+		role="group"
+		data-slot="field"
+		data-orientation={orientation}
+		className={cn(fieldVariants({ orientation }), className)}
+		{...props}
+	/>
+}
+
+export function FieldContent({ className, ...props }: Props) @{
+	<div
+		data-slot="field-content"
+		className={cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className)}
+		{...props}
+	/>
+}
+
+export function FieldLabel({ className, ...props }: Props) @{
+	<Label
+		data-slot="field-label"
+		className={cn(
+			'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10',
+			'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function FieldTitle({ className, ...props }: Props) @{
+	<div
+		data-slot="field-label"
+		className={cn(
+			'flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function FieldDescription({ className, ...props }: Props) @{
+	<p
+		data-slot="field-description"
+		className={cn(
+			'text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
+			'last:mt-0 nth-last-2:-mt-1',
+			'[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function FieldSeparator({ children, className, ...props }: Props) {
+	return createElement(
+		'div',
+		{
+			'data-slot': 'field-separator',
+			'data-content': !!children,
+			className: cn(
+				'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+				className,
+			),
+			...props,
+		},
+		createElement(Separator, { key: 'rule', className: 'absolute inset-0 top-1/2' }),
+		children
+			? createElement(
+					'span',
+					{
+						key: 'content',
+						className: 'relative mx-auto block w-fit bg-background px-2 text-muted-foreground',
+						'data-slot': 'field-separator-content',
+					},
+					children,
+				)
+			: null,
+	);
+}
+
+export function FieldError(props: Props & { errors?: Array<{ message?: string } | undefined> }) {
+	const { className, children: _children, errors: _errors, ...rest } = props;
+	// Read through `props` inside the callback: octane's destructured-parameter
+	// locals are not the value channel the compiler threads into a closure.
+	const content = useMemo(() => {
+		if (props.children) return props.children;
+		const errors = props.errors;
+		if (!errors?.length) return null;
+
+		const uniqueErrors = [
+			...new Map(errors.map((error) => [error?.message, error])).values(),
+		];
+
+		if (uniqueErrors?.length == 1) return uniqueErrors[0]?.message;
+
+		return createElement(
+			'ul',
+			{ className: 'ml-4 flex list-disc flex-col gap-1' },
+			uniqueErrors.map(
+				(error, index) => error?.message
+					? createElement('li', { key: index }, error.message)
+					: null,
+			),
+		);
+	});
+
+	if (!content) return null;
+
+	return createElement(
+		'div',
+		{
+			role: 'alert',
+			'data-slot': 'field-error',
+			className: cn('text-sm font-normal text-destructive', className),
+			...rest,
+		},
+		content,
+	);
+}

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}
+	/>
+}