@octanejs/shadcn 0.0.6 → 0.0.8

package/src/bases/react-aria/ui/alert-dialog.tsrx

@@ -0,0 +1,154 @@
+// 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 {
+	Dialog as AlertDialogPrimitive,
+	DialogTrigger as AlertDialogTriggerPrimitive,
+	Heading,
+	ModalOverlay as ModalOverlayPrimitive,
+	Modal as ModalPrimitive,
+	type DialogProps as AlertDialogPrimitiveProps,
+	type DialogTriggerProps as AlertDialogTriggerPrimitiveProps,
+	type ModalOverlayProps as ModalOverlayPrimitiveProps,
+} 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';
+
+export function AlertDialogTrigger({ ...props }: AlertDialogTriggerPrimitiveProps) {
+	return <AlertDialogTriggerPrimitive data-slot="alert-dialog-trigger" {...props} />;
+}
+
+export function AlertDialogOverlay({ className, children, ...props }: Omit<
+	ModalOverlayPrimitiveProps,
+	'className' | 'children'
+> & {
+	className?: string;
+	children: OctaneNode;
+}) {
+	return <ModalOverlayPrimitive
+		data-slot="alert-dialog-overlay"
+		className={cn(
+			'fixed inset-0 isolate z-50 bg-black/10 duration-100 data-entering:animate-in data-entering:fade-in-0 data-exiting:animate-out data-exiting:fade-out-0 supports-backdrop-filter:backdrop-blur-xs',
+			className,
+		)}
+		{...props}
+	>{children}</ModalOverlayPrimitive>;
+}
+
+export function AlertDialog({ className, size = 'default', children, ...props }: Omit<
+	ModalOverlayPrimitiveProps,
+	'className' | 'children'
+> & { isDismissable?: boolean } & {
+	className?: string;
+	size?: 'default' | 'sm';
+	children: OctaneNode;
+}) {
+	return <AlertDialogOverlay {...props}>
+		<ModalPrimitive
+			data-slot="alert-dialog-content"
+			data-size={size}
+			className={cn(
+				'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none 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-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm',
+				className,
+			)}
+		>
+			<AlertDialogPrimitive
+				data-slot="alert-dialog"
+				role="alertdialog"
+				className="[display:inherit] [gap:inherit] outline-none"
+			>{children}</AlertDialogPrimitive>
+		</ModalPrimitive>
+	</AlertDialogOverlay>;
+}
+
+export function AlertDialogContent({ className, size = 'default', children, ...props }: Record<
+	string,
+	any
+>) {
+	return <AlertDialog className={className} size={size} {...props}>{children}</AlertDialog>;
+}
+
+export function AlertDialogHeader({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="alert-dialog-header"
+		className={cn(
+			'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AlertDialogFooter({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="alert-dialog-footer"
+		className={cn(
+			'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AlertDialogMedia({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="alert-dialog-media"
+		className={cn(
+			'mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*=\'size-\'])]:size-6',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AlertDialogTitle({ className, ...props }: Omit<HeadingProps, 'slot'>) {
+	return <Heading
+		slot="title"
+		data-slot="alert-dialog-title"
+		className={cn(
+			'text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AlertDialogDescription({ className, ...props }: Omit<HostProps<'div'>, 'slot'>) {
+	return <div
+		data-slot="alert-dialog-description"
+		className={cn(
+			'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AlertDialogAction({ className, ...props }: Record<string, any>) {
+	return <Button
+		slot="close"
+		data-slot="alert-dialog-action"
+		className={cn(className)}
+		{...props}
+	/>;
+}
+
+export function AlertDialogCancel({
+	className,
+	variant = 'outline',
+	size = 'default',
+	...props
+}: Record<string, any>) {
+	return <Button
+		slot="close"
+		data-slot="alert-dialog-cancel"
+		className={cn(className)}
+		variant={variant}
+		size={size}
+		{...props}
+	/>;
+}

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

@@ -0,0 +1,60 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+const alertVariants = cva(
+	'group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*=\'size-\'])]:size-4',
+	{
+		variants: {
+			variant: {
+				default: 'bg-card text-card-foreground',
+				destructive: 'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export function Alert({ className, variant, ...props }: HostProps<'div'> & VariantProps<
+	typeof alertVariants
+>) {
+	return <div
+		data-slot="alert"
+		role="alert"
+		className={cn(alertVariants({ variant }), className)}
+		{...props}
+	/>;
+}
+
+export function AlertTitle({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="alert-title"
+		className={cn(
+			'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AlertDescription({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="alert-description"
+		className={cn(
+			'text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AlertAction({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="alert-action"
+		className={cn('absolute top-2 right-2', className)}
+		{...props}
+	/>;
+}

package/src/bases/react-aria/ui/aspect-ratio.tsrx

@@ -0,0 +1,13 @@
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export function AspectRatio({ ratio, className, ...props }: HostProps<'div'> & { ratio: number }) {
+	return <div
+		data-slot="aspect-ratio"
+		style={{
+			'--ratio': ratio,
+		} as Record<string, string | number>}
+		className={cn('relative aspect-(--ratio)', className)}
+		{...props}
+	/>;
+}

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

@@ -0,0 +1,83 @@
+import { useState } from 'octane';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export function Avatar({ className, size = 'default', ...props }: HostProps<'div'> & {
+	size?: 'default' | 'sm' | 'lg';
+}) {
+	return <div
+		data-slot="avatar"
+		data-size={size}
+		className={cn(
+			'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+type ImageState = 'loading' | 'loaded' | 'error';
+
+export function AvatarImage({ className, ...props }: HostProps<'img'>) {
+	const [state, setState] = useState<ImageState>(props.src ? 'loading' : 'error');
+	return <img
+		data-slot="avatar-image"
+		alt={props.alt || ''}
+		data-state={state}
+		onLoad={() => setState('loaded')}
+		onError={() => setState('error')}
+		className={cn(
+			'peer aspect-square size-full rounded-full object-cover data-[state=error]:hidden',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AvatarFallback({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="avatar-fallback"
+		className={cn(
+			'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs peer-data-[state=error]:flex peer-[*]:hidden',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AvatarBadge({ className, ...props }: HostProps<'span'>) {
+	return <span
+		data-slot="avatar-badge"
+		className={cn(
+			'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
+			'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+			'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+			'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AvatarGroup({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="avatar-group"
+		className={cn(
+			'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function AvatarGroupCount({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="avatar-group-count"
+		className={cn(
+			'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+			className,
+		)}
+		{...props}
+	/>;
+}

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

@@ -0,0 +1,48 @@
+import { type OctaneNode } from 'octane';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export const badgeVariants = cva(
+	'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+				destructive: 'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+				outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export function Badge({ className, variant = 'default', render, ...props }: HostProps<
+	'span'
+> & VariantProps<typeof badgeVariants> & {
+	render?: (props: Record<string, unknown>) => OctaneNode;
+}) {
+	if (render) {
+		const renderProps = {
+			'data-slot': 'badge',
+			'data-variant': variant,
+			className: cn(badgeVariants({ variant }), className),
+			...props,
+		};
+
+		return render(renderProps);
+	}
+
+	return <span
+		data-slot="badge"
+		data-variant={variant}
+		className={cn(badgeVariants({ variant }), className)}
+		{...props}
+	/>;
+}

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

@@ -0,0 +1,100 @@
+// 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 {
+	Breadcrumb as BreadcrumbPrimitive,
+	Breadcrumbs as BreadcrumbsPrimitive,
+	composeRenderProps,
+	Link as LinkPrimitive,
+	type BreadcrumbProps,
+	type BreadcrumbRenderProps,
+	type BreadcrumbsProps,
+	type LinkProps,
+} from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+import { ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
+
+export function Breadcrumb({ className, ...props }: HostProps<'nav'>) {
+	return <nav
+		aria-label="breadcrumb"
+		data-slot="breadcrumb"
+		className={cn(className)}
+		{...props}
+	/>;
+}
+
+export function BreadcrumbList<T extends object>({ className, ...props }: BreadcrumbsProps<T>) {
+	return <BreadcrumbsPrimitive
+		data-slot="breadcrumb-list"
+		className={cn(
+			'flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function BreadcrumbItem({
+	className,
+	children,
+	separatorClassName,
+	...props
+}: BreadcrumbProps & { separatorClassName?: string }) {
+	return <BreadcrumbPrimitive
+		data-slot="breadcrumb-item"
+		className={cn('inline-flex items-center gap-1', className)}
+		{...props}
+	>{composeRenderProps(
+		children,
+		(children, { isCurrent }: BreadcrumbRenderProps) => <>
+			{children}
+			{!isCurrent &&
+				<span
+					data-slot="breadcrumb-separator"
+					role="presentation"
+					aria-hidden="true"
+					className={cn('[&>svg]:size-3.5', separatorClassName)}
+				>
+					<ChevronRightIcon />
+				</span>}
+		</>,
+	)}</BreadcrumbPrimitive>;
+}
+
+export function BreadcrumbLink({ className, render, ...props }: LinkProps) {
+	return <LinkPrimitive
+		data-slot="breadcrumb-link"
+		className={cn('transition-colors hover:text-foreground', className)}
+		render={render}
+		{...props}
+	/>;
+}
+
+export function BreadcrumbPage({ className, ...props }: HostProps<'span'>) {
+	return <span
+		data-slot="breadcrumb-page"
+		role="link"
+		aria-disabled="true"
+		aria-current="page"
+		className={cn('font-normal text-foreground', className)}
+		{...props}
+	/>;
+}
+
+export function BreadcrumbEllipsis({ className, ...props }: HostProps<'span'>) {
+	return <span
+		data-slot="breadcrumb-ellipsis"
+		role="presentation"
+		aria-hidden="true"
+		className={cn('flex size-5 items-center justify-center [&>svg]:size-4', className)}
+		{...props}
+	>
+		<MoreHorizontalIcon />
+		<span className="sr-only">More</span>
+	</span>;
+}

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

@@ -0,0 +1,96 @@
+// React Aria base button — structure from upstream `bases/aria/ui/button.tsx`
+// (RAC Button + Link primitives, both slotted as `button`, and the aria base's
+// data-variant/data-size attributes, which the Base UI base omits).
+//
+// STYLING: the cva strings are this package's Radix-base (default-Tailwind,
+// utilities-inlined) flavor rather than upstream's `cn-*` semantic hooks, so
+// this component styles against a plain Tailwind v4 build like the migrated
+// Radix families do. Upstream's own bases share button's class strings exactly,
+// so nothing is lost here — but that is NOT a general rule: where a selector
+// keys off a primitive-emitted attribute the bases legitimately diverge (the
+// Radix separator styles `data-horizontal:`, the aria one
+// `aria-[orientation=horizontal]:`). `tests/cross-base.test.ts` therefore pins
+// the structural contract — data-slot names and exported components — not class
+// equality.
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Button as ButtonPrimitive, Link as LinkPrimitive } from '@octanejs/aria/components';
+import type {
+	ButtonProps as ButtonPrimitiveProps,
+	LinkProps as LinkPrimitiveProps,
+} from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+
+export const buttonVariants = cva(
+	'group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+				outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+				ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+				destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				xs: 'h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=\'size-\'])]:size-3',
+				sm: 'h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=\'size-\'])]:size-3.5',
+				lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				icon: 'size-8',
+				'icon-xs': 'size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*=\'size-\'])]:size-3',
+				'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+				'icon-lg': 'size-9',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+export interface ButtonProps extends Omit<ButtonPrimitiveProps, 'className'> {
+	variant?: ButtonVariants['variant'];
+	size?: ButtonVariants['size'];
+	className?: string;
+}
+
+export interface LinkButtonProps extends Omit<LinkPrimitiveProps, 'className'> {
+	variant?: ButtonVariants['variant'];
+	size?: ButtonVariants['size'];
+	className?: string;
+}
+
+export function Button({
+	className,
+	variant = 'default',
+	size = 'default',
+	...props
+}: ButtonProps) @{
+	<ButtonPrimitive
+		data-slot="button"
+		data-variant={variant}
+		data-size={size}
+		className={cn(buttonVariants({ variant, size, className }))}
+		{...props}
+	/>
+}
+
+export function LinkButton({
+	className,
+	variant = 'default',
+	size = 'default',
+	...props
+}: LinkButtonProps) @{
+	<LinkPrimitive
+		data-slot="button"
+		data-variant={variant}
+		data-size={size}
+		className={cn(buttonVariants({ variant, size, className }))}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,73 @@
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export function Card({ className, size = 'default', ...props }: HostProps<'div'> & {
+	size?: 'default' | 'sm';
+}) {
+	return <div
+		data-slot="card"
+		data-size={size}
+		className={cn(
+			'group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function CardHeader({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="card-header"
+		className={cn(
+			'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function CardTitle({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="card-title"
+		className={cn(
+			'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function CardDescription({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="card-description"
+		className={cn('text-sm text-muted-foreground', className)}
+		{...props}
+	/>;
+}
+
+export function CardAction({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="card-action"
+		className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+		{...props}
+	/>;
+}
+
+export function CardContent({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="card-content"
+		className={cn('px-(--card-spacing)', className)}
+		{...props}
+	/>;
+}
+
+export function CardFooter({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="card-footer"
+		className={cn(
+			'flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)',
+			className,
+		)}
+		{...props}
+	/>;
+}

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

@@ -0,0 +1,37 @@
+// 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 {
+	Checkbox as CheckboxPrimitive,
+	composeRenderProps,
+	type CheckboxProps,
+	type CheckboxRenderProps,
+} from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import { CheckIcon } from '@octanejs/lucide';
+
+export function Checkbox({ className, children, ...props }: CheckboxProps) {
+	return <CheckboxPrimitive
+		data-slot="checkbox"
+		className={cn(
+			'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 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, isIndeterminate }: CheckboxRenderProps) => <>
+			<span
+				data-slot="checkbox-indicator"
+				className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+			>
+				{(isSelected || isIndeterminate) && <CheckIcon />}
+			</span>
+			{children}
+		</>,
+	)}</CheckboxPrimitive>;
+}