@octanejs/shadcn 0.0.1

package/src/ui/alert-dialog.tsrx

@@ -0,0 +1,161 @@
+// Default-Tailwind alert-dialog flavor (package canonical) — user-supplied
+// styling, class strings verbatim. Octane adaptations: "use client" dropped,
+// radix-ui → @octanejs/radix; Content composes Portal > Overlay + Content via
+// createElement (Portal slots its child); Action/Cancel wrap the primitive in
+// Button-asChild (descriptor child), consumer children via props.children.
+import { createElement, type OctaneNode } from 'octane';
+import { AlertDialog as AlertDialogPrimitive } from '@octanejs/radix';
+
+import { cn } from '../lib/utils';
+import { Button, type ButtonProps } from './button.tsrx';
+
+type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
+
+export function AlertDialog(props: Record<string, unknown>) @{
+	<AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+export function AlertDialogTrigger(props: Record<string, unknown>) @{
+	<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+}
+
+export function AlertDialogPortal(props: Record<string, unknown>) @{
+	<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+}
+
+export function AlertDialogOverlay({ className, ...props }: Props) @{
+	<AlertDialogPrimitive.Overlay
+		data-slot="alert-dialog-overlay"
+		className={cn(
+			'fixed inset-0 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 AlertDialogContentProps extends Props {
+	size?: 'default' | 'sm';
+}
+
+export function AlertDialogContent({
+	className,
+	size = 'default',
+	children,
+	...props
+}: AlertDialogContentProps) {
+	return createElement(
+		AlertDialogPrimitive.Portal,
+		{ 'data-slot': 'alert-dialog-portal' },
+		createElement(AlertDialogOverlay, { key: 'overlay' }),
+		createElement(AlertDialogPrimitive.Content, {
+			key: 'content',
+			'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-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]: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,
+		}),
+	);
+}
+
+export function AlertDialogHeader({ className, ...props }: Props) @{
+	<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 }: Props) @{
+	<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 }: Props) @{
+	<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 }: Props) @{
+	<AlertDialogPrimitive.Title
+		data-slot="alert-dialog-title"
+		className={cn(
+			'cn-font-heading 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 }: Props) @{
+	<AlertDialogPrimitive.Description
+		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 interface AlertDialogActionProps extends Props {
+	variant?: ButtonProps['variant'];
+	size?: ButtonProps['size'];
+}
+
+export function AlertDialogAction({
+	className,
+	variant = 'default',
+	size = 'default',
+	children,
+	...props
+}: AlertDialogActionProps) {
+	return createElement(
+		Button,
+		{ variant, size, asChild: true },
+		createElement(AlertDialogPrimitive.Action, {
+			'data-slot': 'alert-dialog-action',
+			className: cn(className),
+			...props,
+			children,
+		}),
+	);
+}
+
+export function AlertDialogCancel({
+	className,
+	variant = 'outline',
+	size = 'default',
+	children,
+	...props
+}: AlertDialogActionProps) {
+	return createElement(
+		Button,
+		{ variant, size, asChild: true },
+		createElement(AlertDialogPrimitive.Cancel, {
+			'data-slot': 'alert-dialog-cancel',
+			className: cn(className),
+			...props,
+			children,
+		}),
+	);
+}

package/src/ui/alert.tsrx

@@ -0,0 +1,69 @@
+// Default-Tailwind alert flavor (package canonical) — user-supplied styling,
+// cva strings verbatim. Pure template JSX (no consumer-children interleave).
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+import type { DivProps } from '../lib/types';
+
+export 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 interface AlertProps extends DivProps {
+	variant?: VariantProps<typeof alertVariants>['variant'];
+}
+
+export function Alert({ className, variant, ...props }: AlertProps) @{
+	<div
+		data-slot="alert"
+		role="alert"
+		className={cn(alertVariants({ variant }), className)}
+		{...props}
+	/>
+}
+
+export function AlertTitle({ className, ...props }: { className?: string } & Record<
+	string,
+	unknown
+>) @{
+	<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 }: { className?: string } & Record<
+	string,
+	unknown
+>) @{
+	<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 }: { className?: string } & Record<
+	string,
+	unknown
+>) @{
+	<div data-slot="alert-action" className={cn('absolute top-2 right-2', className)} {...props} />
+}

package/src/ui/aspect-ratio.tsrx

@@ -0,0 +1,10 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/aspect-ratio.tsx (the `"use client"`
+// directive is dropped — octane has no RSC axis).
+import { AspectRatio as AspectRatioPrimitive } from '@octanejs/radix';
+
+type Props = Record<string, unknown>;
+
+export function AspectRatio(props: Props) @{
+	<AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}

package/src/ui/avatar.tsrx

@@ -0,0 +1,79 @@
+// Default-Tailwind avatar flavor (package canonical) — user-supplied styling,
+// class strings verbatim. Octane adaptations: "use client" dropped, radix-ui →
+// @octanejs/radix; pure template JSX.
+import { Avatar as AvatarPrimitive } from '@octanejs/radix';
+
+import { cn } from '../lib/utils';
+
+type Props = { className?: string } & Record<string, unknown>;
+
+export interface AvatarProps extends Props {
+	size?: 'default' | 'sm' | 'lg';
+}
+
+export function Avatar({ className, size = 'default', ...props }: AvatarProps) @{
+	<AvatarPrimitive.Root
+		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}
+	/>
+}
+
+export function AvatarImage({ className, ...props }: Props) @{
+	<AvatarPrimitive.Image
+		data-slot="avatar-image"
+		className={cn('aspect-square size-full rounded-full object-cover', className)}
+		{...props}
+	/>
+}
+
+export function AvatarFallback({ className, ...props }: Props) @{
+	<AvatarPrimitive.Fallback
+		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',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AvatarBadge({ className, ...props }: Props) @{
+	<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 }: Props) @{
+	<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 }: Props) @{
+	<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/ui/badge.tsrx

@@ -0,0 +1,50 @@
+// Default-Tailwind (package canonical) badge — user-supplied flavor, cva strings verbatim. Octane
+// adaptations: radix-ui Slot → @octanejs/radix, asChild via the @if/Slot
+// descriptor pattern.
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from '@octanejs/radix';
+
+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 interface BadgeProps extends HostProps<'span'> {
+	variant?: VariantProps<typeof badgeVariants>['variant'];
+	asChild?: boolean;
+}
+
+export function Badge({ className, variant = 'default', asChild = false, ...props }: BadgeProps) @{
+	@if (asChild) {
+		<Slot
+			data-slot="badge"
+			data-variant={variant}
+			className={cn(badgeVariants({ variant }), className)}
+			{...props}
+		/>
+	} @else {
+		<span
+			data-slot="badge"
+			data-variant={variant}
+			className={cn(badgeVariants({ variant }), className)}
+			{...props}
+		/>
+	}
+}

package/src/ui/breadcrumb.tsrx

@@ -0,0 +1,89 @@
+// Default-Tailwind breadcrumb flavor (package canonical) — user-supplied
+// styling, class strings verbatim. Octane adaptations: lucide-react →
+// @octanejs/lucide, radix-ui Slot → @octanejs/radix (@if asChild);
+// BreadcrumbSeparator's `children ?? icon` fallback composes with
+// createElement (opaque children beside a descriptor default).
+import { Slot } from '@octanejs/radix';
+import { ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
+import { createElement, type OctaneNode } from 'octane';
+
+import { cn } from '../lib/utils';
+
+type Props = { className?: string } & Record<string, unknown>;
+
+export function Breadcrumb({ className, ...props }: Props) @{
+	<nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />
+}
+
+export function BreadcrumbList({ className, ...props }: Props) @{
+	<ol
+		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, ...props }: Props) @{
+	<li
+		data-slot="breadcrumb-item"
+		className={cn('inline-flex items-center gap-1', className)}
+		{...props}
+	/>
+}
+
+export function BreadcrumbLink({ asChild, className, ...props }: Props & { asChild?: boolean }) @{
+	@if (asChild) {
+		<Slot
+			data-slot="breadcrumb-link"
+			className={cn('transition-colors hover:text-foreground', className)}
+			{...props}
+		/>
+	} @else {
+		<a
+			data-slot="breadcrumb-link"
+			className={cn('transition-colors hover:text-foreground', className)}
+			{...props}
+		/>
+	}
+}
+
+export function BreadcrumbPage({ className, ...props }: Props) @{
+	<span
+		data-slot="breadcrumb-page"
+		role="link"
+		aria-disabled="true"
+		aria-current="page"
+		className={cn('font-normal text-foreground', className)}
+		{...props}
+	/>
+}
+
+export function BreadcrumbSeparator(props: Props & { children?: OctaneNode }) @{
+	const { className, children: _children, ...rest } = props;
+
+	<li
+		data-slot="breadcrumb-separator"
+		role="presentation"
+		aria-hidden="true"
+		className={cn('[&>svg]:size-3.5', className)}
+		{...rest}
+	>
+		{props.children ?? <ChevronRightIcon className="cn-rtl-flip" />}
+	</li>
+}
+
+export function BreadcrumbEllipsis({ className, ...props }: Props) @{
+	<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/ui/button.tsrx

@@ -0,0 +1,71 @@
+// Default-Tailwind (package canonical) button — the Base UI shadcn flavor's styling, verbatim cva
+// strings. ADAPTATION: upstream builds on @base-ui/react/button, which
+// @octanejs/base-ui does not yet ship (binding gap, logged) — the host is a
+// plain <button>, and Base UI's render-prop polymorphism maps to octane's
+// asChild/Slot descriptor pattern. Upstream's base flavor sets no
+// data-variant/data-size attributes; preserved as-is.
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from '@octanejs/radix';
+
+import { cn } from '../lib/utils';
+import type { HostProps } from '../lib/types';
+
+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',
+		},
+	},
+);
+
+export interface ButtonProps extends HostProps<'button'> {
+	variant?: VariantProps<typeof buttonVariants>['variant'];
+	size?: VariantProps<typeof buttonVariants>['size'];
+	// OCTANE DIVERGENCE: asChild composes element descriptors (createElement),
+	// not opaque compiled .tsrx children — the documented radix Slot contract.
+	asChild?: boolean;
+}
+
+export function Button({
+	className,
+	variant = 'default',
+	size = 'default',
+	asChild = false,
+	...props
+}: ButtonProps) @{
+	@if (asChild) {
+		<Slot
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	} @else {
+		<button
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	}
+}

package/src/ui/card.tsrx

@@ -0,0 +1,75 @@
+// Default-Tailwind (package canonical) card — user-supplied flavor, class strings verbatim (uses the
+// --card-spacing custom-property pattern and the nova cn-font-heading hook).
+import { cn } from '../lib/utils';
+import type { DivProps } from '../lib/types';
+
+type Props = DivProps;
+
+export interface CardProps extends Props {
+	size?: 'default' | 'sm';
+}
+
+export function Card({ className, size = 'default', ...props }: CardProps) @{
+	<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 }: Props) @{
+	<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 }: Props) @{
+	<div
+		data-slot="card-title"
+		className={cn(
+			'cn-font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function CardDescription({ className, ...props }: Props) @{
+	<div
+		data-slot="card-description"
+		className={cn('text-sm text-muted-foreground', className)}
+		{...props}
+	/>
+}
+
+export function CardAction({ className, ...props }: Props) @{
+	<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 }: Props) @{
+	<div data-slot="card-content" className={cn('px-(--card-spacing)', className)} {...props} />
+}
+
+export function CardFooter({ className, ...props }: Props) @{
+	<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/ui/checkbox.tsrx

@@ -0,0 +1,31 @@
+// Default-Tailwind (utilities-inlined) checkbox flavor — the package's
+// canonical styling direction. Octane adaptations from the shared React
+// source: "use client" dropped, lucide-react → @octanejs/lucide, radix-ui →
+// @octanejs/radix; structure (Root > Indicator > CheckIcon) is template JSX
+// (no consumer children interleave).
+import { Checkbox as CheckboxPrimitive } from '@octanejs/radix';
+import { CheckIcon } from '@octanejs/lucide';
+
+import { cn } from '../lib/utils';
+
+export interface CheckboxProps extends Record<string, unknown> {
+	className?: string;
+}
+
+export function Checkbox({ className, ...props }: CheckboxProps) @{
+	<CheckboxPrimitive.Root
+		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 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',
+			className,
+		)}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator
+			data-slot="checkbox-indicator"
+			className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+		>
+			<CheckIcon />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
+}

package/src/ui/collapsible.tsrx

@@ -0,0 +1,21 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/collapsible.tsx (the `"use client"`
+// directive is dropped — octane has no RSC axis). Upstream references the
+// `CollapsiblePrimitive.CollapsibleTrigger` / `CollapsibleContent` aliases;
+// the @octanejs/radix binding exports the same components as `Trigger` /
+// `Content`.
+import { Collapsible as CollapsiblePrimitive } from '@octanejs/radix';
+
+type Props = Record<string, unknown>;
+
+export function Collapsible(props: Props) @{
+	<CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+export function CollapsibleTrigger(props: Props) @{
+	<CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+}
+
+export function CollapsibleContent(props: Props) @{
+	<CollapsiblePrimitive.Content data-slot="collapsible-content" {...props} />
+}