@octanejs/shadcn 0.0.8 → 0.0.9

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

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

package/src/bases/base-ui/ui/field.tsrx

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

package/src/bases/base-ui/ui/item.tsrx

@@ -0,0 +1,163 @@
+// Base UI base item — class strings from the maintainer-supplied radix source, verbatim. Ten of the
+// eleven parts are plain host elements, and the eleventh (`ItemSeparator`) delegates to this base's
+// own Separator, so it picks up Base UI's `aria-orientation` dialect automatically.
+//
+// NO DIALECT RISK IN THE VARIANTS, which is worth stating because they look like the ones that
+// caught toggle and slider: `data-[size=…]` and `data-[variant=…]` here read attributes THIS
+// component writes itself, not state emitted by a primitive. Nothing underneath emits anything.
+//
+// `Item` SHIPS WITHOUT `asChild`, the same call as badge and breadcrumb in this base. Radix swaps in
+// `Slot`; React Aria takes a `render` function; Base UI has no Slot, and item has no primitive to
+// borrow a `render` prop from, so nothing here settles the spelling upstream uses. Adding it later
+// is additive; shipping the wrong shape is breaking. A consumer needing a different element can
+// apply `itemVariants({ variant, size })` directly, which is what the class export is for.
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import { Separator } from './separator.tsrx';
+
+type DivProps = { className?: string } & Record<string, unknown>;
+
+export function ItemGroup({ className, ...props }: DivProps) @{
+	<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 }: DivProps) @{
+	<Separator
+		data-slot="item-separator"
+		orientation="horizontal"
+		className={cn('my-2', className)}
+		{...props}
+	/>
+}
+
+export 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 interface ItemProps extends Record<string, unknown> {
+	className?: string;
+	/** Not supported in this base — see the header. Declared so it fails to compile, not silently. */
+	asChild?: never;
+	variant?: VariantProps<typeof itemVariants>['variant'];
+	size?: VariantProps<typeof itemVariants>['size'];
+}
+
+export function Item({ className, variant = 'default', size = 'default', ...props }: ItemProps) @{
+	<div
+		data-slot="item"
+		data-variant={variant}
+		data-size={size}
+		className={cn(itemVariants({ variant, size, className }))}
+		{...props}
+	/>
+}
+
+export 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 interface ItemMediaProps extends Record<string, unknown> {
+	className?: string;
+	variant?: VariantProps<typeof itemMediaVariants>['variant'];
+}
+
+export function ItemMedia({ className, variant = 'default', ...props }: ItemMediaProps) @{
+	<div
+		data-slot="item-media"
+		data-variant={variant}
+		className={cn(itemMediaVariants({ variant, className }))}
+		{...props}
+	/>
+}
+
+export function ItemContent({ className, ...props }: DivProps) @{
+	<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 }: DivProps) @{
+	<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 }: DivProps) @{
+	<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 }: DivProps) @{
+	<div data-slot="item-actions" className={cn('flex items-center gap-2', className)} {...props} />
+}
+
+export function ItemHeader({ className, ...props }: DivProps) @{
+	<div
+		data-slot="item-header"
+		className={cn('flex basis-full items-center justify-between gap-2', className)}
+		{...props}
+	/>
+}
+
+export function ItemFooter({ className, ...props }: DivProps) @{
+	<div
+		data-slot="item-footer"
+		className={cn('flex basis-full items-center justify-between gap-2', className)}
+		{...props}
+	/>
+}