@octanejs/shadcn 0.0.6 → 0.0.7

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

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

@@ -0,0 +1,20 @@
+import {
+	DisclosurePanel as CollapsibleContentPrimitive,
+	Disclosure as CollapsiblePrimitive,
+	Button as CollapsibleTriggerPrimitive,
+	type ButtonProps,
+	type DisclosurePanelProps,
+	type DisclosureProps,
+} from '@octanejs/aria/components';
+
+export function Collapsible({ ...props }: DisclosureProps) {
+	return <CollapsiblePrimitive data-slot="collapsible" {...props} />;
+}
+
+export function CollapsibleTrigger({ ...props }: ButtonProps) {
+	return <CollapsibleTriggerPrimitive slot="trigger" data-slot="collapsible-trigger" {...props} />;
+}
+
+export function CollapsibleContent({ ...props }: DisclosurePanelProps) {
+	return <CollapsibleContentPrimitive data-slot="collapsible-content" {...props} />;
+}

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

@@ -0,0 +1,131 @@
+import { type OctaneNode } from 'octane';
+import {
+	Dialog as DialogPrimitive,
+	DialogTrigger as DialogTriggerPrimitive,
+	Heading,
+	ModalOverlay as ModalOverlayPrimitive,
+	Modal as ModalPrimitive,
+	type DialogProps as DialogPrimitiveProps,
+	type DialogTriggerProps as DialogTriggerPrimitiveProps,
+	type ModalOverlayProps as ModalOverlayPrimitiveProps,
+} from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+import { Button } from './button.tsrx';
+import { XIcon } from '@octanejs/lucide';
+
+export function DialogTrigger({ ...props }: DialogTriggerPrimitiveProps) {
+	return <DialogTriggerPrimitive data-slot="dialog-trigger" {...props} />;
+}
+
+export function DialogClose({ className, variant = 'outline', size = 'default', ...props }: Record<
+	string,
+	any
+>) {
+	return <Button
+		slot="close"
+		data-slot="dialog-close"
+		variant={variant}
+		size={size}
+		className={cn(className)}
+		{...props}
+	/>;
+}
+
+export function DialogOverlay({ className, children, ...props }: Omit<
+	ModalOverlayPrimitiveProps,
+	'className' | 'children'
+> & {
+	className?: string;
+	children: OctaneNode;
+}) {
+	return <ModalOverlayPrimitive
+		data-slot="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 Dialog({
+	className,
+	children,
+	showCloseButton = true,
+	isDismissable = true,
+	...props
+}: Omit<ModalOverlayPrimitiveProps, 'className' | 'children'> & Pick<
+	Record<string, any>,
+	'isDismissable'
+> & {
+	className?: string;
+	children: OctaneNode;
+	showCloseButton?: boolean;
+}) {
+	return <DialogOverlay isDismissable={isDismissable} {...props}>
+		<ModalPrimitive
+			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 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 sm:max-w-sm',
+				className,
+			)}
+		>
+			<DialogPrimitive data-slot="dialog" className="[display:inherit] [gap:inherit] outline-none">
+				{children}
+				{showCloseButton &&
+					<DialogClose variant="ghost" className="absolute top-2 right-2" size="icon-sm">
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</DialogClose>}
+			</DialogPrimitive>
+		</ModalPrimitive>
+	</DialogOverlay>;
+}
+
+export function DialogHeader({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="dialog-header"
+		className={cn('flex flex-col gap-2', className)}
+		{...props}
+	/>;
+}
+
+export function DialogFooter({ className, showCloseButton = false, children, ...props }: HostProps<
+	'div'
+> & {
+	showCloseButton?: boolean;
+}) {
+	return <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,
+		)}
+		{...props}
+	>
+		{children}
+		{showCloseButton && <DialogClose variant="outline">Close</DialogClose>}
+	</div>;
+}
+
+export function DialogTitle({ className, ...props }: Omit<Record<string, any>, 'slot'>) {
+	return <Heading
+		slot="title"
+		data-slot="dialog-title"
+		className={cn('text-base leading-none font-medium', className)}
+		{...props}
+	/>;
+}
+
+export function DialogDescription({ className, ...props }: Omit<HostProps<'div'>, 'slot'>) {
+	return <div
+		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/bases/react-aria/ui/empty.tsrx

@@ -0,0 +1,79 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export function Empty({ className, ...props }: HostProps<'div'>) {
+	return <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 }: HostProps<'div'>) {
+	return <div
+		data-slot="empty-header"
+		className={cn('flex max-w-sm flex-col items-center gap-2', className)}
+		{...props}
+	/>;
+}
+
+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 function EmptyMedia({ className, variant = 'default', ...props }: HostProps<
+	'div'
+> & VariantProps<typeof emptyMediaVariants>) {
+	return <div
+		data-slot="empty-icon"
+		data-variant={variant}
+		className={cn(emptyMediaVariants({ variant, className }))}
+		{...props}
+	/>;
+}
+
+export function EmptyTitle({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="empty-title"
+		className={cn('text-sm font-medium tracking-tight', className)}
+		{...props}
+	/>;
+}
+
+export function EmptyDescription({ className, ...props }: HostProps<'p'>) {
+	return <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 }: HostProps<'div'>) {
+	return <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/react-aria/ui/field.tsrx

@@ -0,0 +1,170 @@
+import { type OctaneNode, useMemo } from 'octane';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+import { Label } from './label.tsrx';
+import { Separator } from './separator.tsrx';
+
+export function FieldSet({ className, ...props }: HostProps<'fieldset'>) {
+	return <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 }: HostProps<'legend'> & {
+	variant?: 'legend' | 'label';
+}) {
+	return <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 }: HostProps<'div'>) {
+	return <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}
+	/>;
+}
+
+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 }: HostProps<
+	'div'
+> & VariantProps<typeof fieldVariants>) {
+	return <div
+		role="group"
+		data-slot="field"
+		data-orientation={orientation}
+		className={cn(fieldVariants({ orientation }), className)}
+		{...props}
+	/>;
+}
+
+export function FieldContent({ className, ...props }: HostProps<'div'>) {
+	return <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 }: Record<string, any>) {
+	return <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-selected:border-primary/30 has-data-selected: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 dark:has-data-selected:border-primary/20 dark:has-data-selected:bg-primary/10',
+			'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function FieldTitle({ className, ...props }: HostProps<'div'>) {
+	return <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 }: HostProps<'p'>) {
+	return <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 }: HostProps<'div'> & {
+	children?: OctaneNode;
+}) {
+	return <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}
+	>
+		<Separator className="absolute inset-0 top-1/2" />
+		{children &&
+			<span
+				className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+				data-slot="field-separator-content"
+			>{children}</span>}
+	</div>;
+}
+
+export function FieldError({ className, children, errors, ...props }: HostProps<'div'> & {
+	errors?: Array<{ message?: string } | undefined>;
+}) {
+	const content = useMemo(() => {
+		if (children) {
+			return children;
+		}
+
+		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 <ul className="ml-4 flex list-disc flex-col gap-1">{uniqueErrors.map(
+			(error, index) => error?.message && <li key={index}>{error.message}</li>,
+		)}</ul>;
+	}, [children, errors]);
+
+	if (!content) {
+		return null;
+	}
+
+	return <div
+		role="alert"
+		data-slot="field-error"
+		className={cn('text-sm font-normal text-destructive', className)}
+		{...props}
+	>{content}</div>;
+}

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

@@ -0,0 +1,28 @@
+// React Aria base input — structure from upstream `bases/aria/ui/input.tsx`
+// (RAC Input, className routed through composeRenderProps so a caller's render
+// prop still receives its render values). Class strings are the package's
+// shipped utilities-inlined flavor, matching the Radix base.
+//
+// OCTANE DIVERGENCE: per-keystroke handling is the native `onInput` event;
+// native `change` keeps its commit-on-blur meaning.
+import { composeRenderProps, Input as InputPrimitive } from '@octanejs/aria/components';
+import type { InputProps as InputPrimitiveProps } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+
+export interface InputProps extends InputPrimitiveProps {}
+
+export function Input({ className, type, ...props }: InputProps) @{
+	<InputPrimitive
+		type={type}
+		data-slot="input"
+		className={composeRenderProps(
+			className,
+			(resolved: string | undefined) => 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',
+				resolved,
+			),
+		)}
+		{...props}
+	/>
+}

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

@@ -0,0 +1,148 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Link as LinkPrimitive, type LinkProps } from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+import { Separator } from './separator.tsrx';
+
+export function ItemGroup({ className, ...props }: HostProps<'div'>) {
+	return <div
+		role="list"
+		data-slot="item-group"
+		className={cn(
+			'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function ItemSeparator({ className, ...props }: Record<string, any>) {
+	return <Separator
+		data-slot="item-separator"
+		orientation="horizontal"
+		className={cn('my-2', className)}
+		{...props}
+	/>;
+}
+
+const itemVariants = cva(
+	'group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted',
+	{
+		variants: {
+			variant: {
+				default: 'border-transparent',
+				outline: 'border-border',
+				muted: 'border-transparent bg-muted/50',
+			},
+			size: {
+				default: 'gap-2.5 px-3 py-2.5',
+				sm: 'gap-2.5 px-3 py-2.5',
+				xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+export function Item({ className, variant = 'default', size = 'default', ...props }: Omit<
+	LinkProps,
+	'children'
+> & Record<string, unknown> & VariantProps<typeof itemVariants>) {
+	const Element =
+		'href' in props ? LinkPrimitive : 'div';
+	return <Element
+		data-slot="item"
+		data-variant={variant}
+		data-size={size}
+		className={cn(itemVariants({ variant, size, className }))}
+		{...props}
+	/>;
+}
+
+const itemMediaVariants = cva(
+	'flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				icon: '[&_svg:not([class*=\'size-\'])]:size-4',
+				image: 'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export function ItemMedia({ className, variant = 'default', ...props }: HostProps<
+	'div'
+> & VariantProps<typeof itemMediaVariants>) {
+	return <div
+		data-slot="item-media"
+		data-variant={variant}
+		className={cn(itemMediaVariants({ variant, className }))}
+		{...props}
+	/>;
+}
+
+export function ItemContent({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="item-content"
+		className={cn(
+			'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function ItemTitle({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="item-title"
+		className={cn(
+			'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function ItemDescription({ className, ...props }: HostProps<'p'>) {
+	return <p
+		data-slot="item-description"
+		className={cn(
+			'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+			className,
+		)}
+		{...props}
+	/>;
+}
+
+export function ItemActions({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="item-actions"
+		className={cn('flex items-center gap-2', className)}
+		{...props}
+	/>;
+}
+
+export function ItemHeader({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="item-header"
+		className={cn('flex basis-full items-center justify-between gap-2', className)}
+		{...props}
+	/>;
+}
+
+export function ItemFooter({ className, ...props }: HostProps<'div'>) {
+	return <div
+		data-slot="item-footer"
+		className={cn('flex basis-full items-center justify-between gap-2', className)}
+		{...props}
+	/>;
+}