@octanejs/shadcn 0.0.1

package/src/ui/context-menu.tsrx

@@ -0,0 +1,179 @@
+// ContextMenu — maintainer-supplied default-Tailwind flavor, class strings
+// verbatim. Octane adaptations: "use client" dropped, lucide-react →
+// @octanejs/lucide, radix-ui → @octanejs/radix. Content composes its Portal
+// subtree with createElement (radix's Portal slots its child); parts that
+// interleave consumer children with sibling descriptors use the
+// {props.children} lowering in template JSX.
+import { createElement, type OctaneNode } from 'octane';
+import { ContextMenu as ContextMenuPrimitive } from '@octanejs/radix';
+import { CheckIcon, ChevronRightIcon } from '@octanejs/lucide';
+
+import { cn } from '../lib/utils';
+
+type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
+
+export function ContextMenu(props: Record<string, unknown>) @{
+	<ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+export function ContextMenuTrigger({ className, ...props }: Props) @{
+	<ContextMenuPrimitive.Trigger
+		data-slot="context-menu-trigger"
+		className={cn('select-none', className)}
+		{...props}
+	/>
+}
+
+export function ContextMenuGroup(props: Record<string, unknown>) @{
+	<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+}
+
+export function ContextMenuPortal(props: Record<string, unknown>) @{
+	<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+}
+
+export function ContextMenuSub(props: Record<string, unknown>) @{
+	<ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+export function ContextMenuRadioGroup(props: Record<string, unknown>) @{
+	<ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />
+}
+
+export function ContextMenuContent({ className, ...props }: Props & {
+	side?: 'top' | 'right' | 'bottom' | 'left';
+}) {
+	return createElement(
+		ContextMenuPrimitive.Portal,
+		null,
+		createElement(ContextMenuPrimitive.Content, {
+			'data-slot': 'context-menu-content',
+			className: cn(
+				'z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-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-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 ContextMenuItem({ className, inset, variant = 'default', ...props }: Props & {
+	inset?: boolean;
+	variant?: 'default' | 'destructive';
+}) @{
+	<ContextMenuPrimitive.Item
+		data-slot="context-menu-item"
+		data-inset={inset}
+		data-variant={variant}
+		className={cn(
+			'group/context-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 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 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function ContextMenuSubTrigger(props: Props & { inset?: boolean }) @{
+	const { className, children: _children, inset, ...rest } = props;
+
+	<ContextMenuPrimitive.SubTrigger
+		data-slot="context-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 data-inset:pl-7 data-open:bg-accent data-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" />
+	</ContextMenuPrimitive.SubTrigger>
+}
+
+export function ContextMenuSubContent({ className, ...props }: Props) @{
+	<ContextMenuPrimitive.SubContent
+		data-slot="context-menu-sub-content"
+		className={cn(
+			'z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg 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 ContextMenuCheckboxItem(props: Props & {
+	checked?: boolean | 'indeterminate';
+	inset?: boolean;
+}) @{
+	const { className, children: _children, checked, inset, ...rest } = props;
+
+	<ContextMenuPrimitive.CheckboxItem
+		data-slot="context-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 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">
+			<ContextMenuPrimitive.ItemIndicator>
+				<CheckIcon />
+			</ContextMenuPrimitive.ItemIndicator>
+		</span>
+		{props.children}
+	</ContextMenuPrimitive.CheckboxItem>
+}
+
+export function ContextMenuRadioItem(props: Props & { inset?: boolean }) @{
+	const { className, children: _children, inset, ...rest } = props;
+
+	<ContextMenuPrimitive.RadioItem
+		data-slot="context-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 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">
+			<ContextMenuPrimitive.ItemIndicator>
+				<CheckIcon />
+			</ContextMenuPrimitive.ItemIndicator>
+		</span>
+		{props.children}
+	</ContextMenuPrimitive.RadioItem>
+}
+
+export function ContextMenuLabel({ className, inset, ...props }: Props & { inset?: boolean }) @{
+	<ContextMenuPrimitive.Label
+		data-slot="context-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 ContextMenuSeparator({ className, ...props }: Props) @{
+	<ContextMenuPrimitive.Separator
+		data-slot="context-menu-separator"
+		className={cn('-mx-1 my-1 h-px bg-border', className)}
+		{...props}
+	/>
+}
+
+export function ContextMenuShortcut({ className, ...props }: Props) @{
+	<span
+		data-slot="context-menu-shortcut"
+		className={cn(
+			'ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground',
+			className,
+		)}
+		{...props}
+	/>
+}

package/src/ui/dialog.tsrx

@@ -0,0 +1,133 @@
+// Default-Tailwind dialog flavor (package canonical) — user-supplied styling,
+// class strings verbatim. Octane adaptations: "use client" dropped,
+// lucide-react → @octanejs/lucide, radix-ui → @octanejs/radix. DialogContent
+// composes Portal > Overlay + Content with createElement (radix's Portal
+// slots its child — descriptors required); consumer children flow through
+// the props.children channel. Template parts use the {props.children}
+// lowering.
+import { createElement, type OctaneNode } from 'octane';
+import { Dialog as DialogPrimitive } from '@octanejs/radix';
+import { XIcon } from '@octanejs/lucide';
+
+import { cn } from '../lib/utils';
+import { Button } from './button.tsrx';
+
+type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
+
+export function Dialog(props: Record<string, unknown>) @{
+	<DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+export function DialogTrigger(props: Record<string, unknown>) @{
+	<DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+export function DialogPortal(props: Record<string, unknown>) @{
+	<DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+export function DialogClose(props: Record<string, unknown>) @{
+	<DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+export function DialogOverlay({ className, ...props }: Props) @{
+	<DialogPrimitive.Overlay
+		data-slot="dialog-overlay"
+		className={cn(
+			'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export interface DialogContentProps extends Props {
+	showCloseButton?: boolean;
+}
+
+export function DialogContent({
+	className,
+	children,
+	showCloseButton = true,
+	...props
+}: DialogContentProps) {
+	return createElement(
+		DialogPrimitive.Portal,
+		{ 'data-slot': 'dialog-portal' },
+		createElement(DialogOverlay, { key: 'overlay' }),
+		createElement(
+			DialogPrimitive.Content,
+			{
+				key: 'content',
+				'data-slot': 'dialog-content',
+				className: cn(
+					'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+					className,
+				),
+				...props,
+			},
+			children,
+			showCloseButton
+				? createElement(
+						DialogPrimitive.Close,
+						{ key: 'close', 'data-slot': 'dialog-close', asChild: true },
+						createElement(
+							Button,
+							{ variant: 'ghost', className: 'absolute top-2 right-2', size: 'icon-sm' },
+							createElement(XIcon, { key: 'icon' }),
+							createElement('span', { key: 'sr', className: 'sr-only' }, 'Close'),
+						),
+					)
+				: null,
+		),
+	);
+}
+
+export function DialogHeader({ className, ...props }: Props) @{
+	<div data-slot="dialog-header" className={cn('flex flex-col gap-2', className)} {...props} />
+}
+
+export interface DialogFooterProps extends Props {
+	showCloseButton?: boolean;
+}
+
+export function DialogFooter(props: DialogFooterProps) @{
+	const { className, showCloseButton = false, children: _children, ...rest } = props;
+
+	<div
+		data-slot="dialog-footer"
+		className={cn(
+			'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
+			className,
+		)}
+		{...rest}
+	>
+		{props.children}
+		{showCloseButton
+			? createElement(
+					DialogPrimitive.Close,
+					{ asChild: true },
+					createElement(Button, { variant: 'outline' }, 'Close'),
+				)
+			: null}
+	</div>
+}
+
+export function DialogTitle({ className, ...props }: Props) @{
+	<DialogPrimitive.Title
+		data-slot="dialog-title"
+		className={cn('cn-font-heading text-base leading-none font-medium', className)}
+		{...props}
+	/>
+}
+
+export function DialogDescription({ className, ...props }: Props) @{
+	<DialogPrimitive.Description
+		data-slot="dialog-description"
+		className={cn(
+			'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+			className,
+		)}
+		{...props}
+	/>
+}

package/src/ui/dropdown-menu.tsrx

@@ -0,0 +1,189 @@
+// DropdownMenu — maintainer-supplied default-Tailwind flavor, class strings
+// verbatim. Octane adaptations: "use client" dropped, lucide-react →
+// @octanejs/lucide, radix-ui → @octanejs/radix. Content composes its Portal
+// subtree with createElement (radix's Portal slots its child, so the child must
+// be a real element descriptor); the parts that interleave consumer children
+// with sibling descriptors use the {props.children} lowering in template JSX.
+import { createElement, type OctaneNode } from 'octane';
+import { DropdownMenu as DropdownMenuPrimitive } from '@octanejs/radix';
+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>) @{
+	<DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+export function DropdownMenuPortal(props: Record<string, unknown>) @{
+	<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+export function DropdownMenuTrigger(props: Record<string, unknown>) @{
+	<DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+export function DropdownMenuContent({
+	className,
+	align = 'start',
+	sideOffset = 4,
+	...props
+}: Props & {
+	align?: string;
+	sideOffset?: number;
+}) {
+	return createElement(
+		DropdownMenuPrimitive.Portal,
+		null,
+		createElement(DropdownMenuPrimitive.Content, {
+			'data-slot': 'dropdown-menu-content',
+			sideOffset,
+			align,
+			className: cn(
+				'z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-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-[state=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,
+		}),
+	);
+}
+
+export function DropdownMenuGroup(props: Record<string, unknown>) @{
+	<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+export function DropdownMenuItem({ className, inset, variant = 'default', ...props }: Props & {
+	inset?: boolean;
+	variant?: 'default' | 'destructive';
+}) @{
+	<DropdownMenuPrimitive.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 | 'indeterminate';
+	inset?: boolean;
+}) @{
+	const { className, children: _children, checked, inset, ...rest } = props;
+
+	<DropdownMenuPrimitive.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"
+		>
+			<DropdownMenuPrimitive.ItemIndicator>
+				<CheckIcon />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{props.children}
+	</DropdownMenuPrimitive.CheckboxItem>
+}
+
+export function DropdownMenuRadioGroup(props: Record<string, unknown>) @{
+	<DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
+}
+
+export function DropdownMenuRadioItem(props: Props & { inset?: boolean }) @{
+	const { className, children: _children, inset, ...rest } = props;
+
+	<DropdownMenuPrimitive.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"
+		>
+			<DropdownMenuPrimitive.ItemIndicator>
+				<CheckIcon />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{props.children}
+	</DropdownMenuPrimitive.RadioItem>
+}
+
+export function DropdownMenuLabel({ className, inset, ...props }: Props & { inset?: boolean }) @{
+	<DropdownMenuPrimitive.Label
+		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) @{
+	<DropdownMenuPrimitive.Separator
+		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>) @{
+	<DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+export function DropdownMenuSubTrigger(props: Props & { inset?: boolean }) @{
+	const { className, children: _children, inset, ...rest } = props;
+
+	<DropdownMenuPrimitive.SubTrigger
+		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-open:bg-accent data-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" />
+	</DropdownMenuPrimitive.SubTrigger>
+}
+
+export function DropdownMenuSubContent({ className, ...props }: Props) @{
+	<DropdownMenuPrimitive.SubContent
+		data-slot="dropdown-menu-sub-content"
+		className={cn(
+			'z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-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}
+	/>
+}

package/src/ui/empty.tsrx

@@ -0,0 +1,86 @@
+// Empty — maintainer-supplied default-Tailwind flavor, class strings verbatim.
+// Upstream renders EmptyMedia with data-slot="empty-icon" and EmptyDescription
+// as a <div> (typed as "p") — both preserved as-is.
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+
+type DivProps = { className?: string } & Record<string, unknown>;
+
+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 Record<string, unknown> {
+	className?: string;
+	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('cn-font-heading text-sm font-medium tracking-tight', className)}
+		{...props}
+	/>
+}
+
+export function EmptyDescription({ className, ...props }: DivProps) @{
+	<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}
+	/>
+}