@octanejs/shadcn 0.0.1

package/src/ui/field.tsrx

@@ -0,0 +1,188 @@
+// Field — maintainer-supplied default-Tailwind flavor, class strings verbatim.
+// Octane adaptations: "use client" dropped; Label/Separator come from the
+// package'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/ui/hover-card.tsrx

@@ -0,0 +1,48 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/hover-card.tsx (the `"use client"` directive
+// is dropped — octane has no RSC axis).
+//
+// HoverCardContent renders Portal > Content: the Portal's child must be a real
+// element DESCRIPTOR (radix portals cannot enumerate opaque compiled .tsrx
+// children), so the pair is composed with createElement; the consumer's
+// children flow into the Content primitive through the ordinary props.children
+// channel.
+import { createElement } from 'octane';
+import { HoverCard as HoverCardPrimitive } from '@octanejs/radix';
+
+import { cn } from '../lib/utils';
+
+export function HoverCard(props: Record<string, unknown>) @{
+	<HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+export function HoverCardTrigger(props: Record<string, unknown>) @{
+	<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+}
+
+export interface HoverCardContentProps extends Record<string, unknown> {
+	className?: string;
+	align?: 'start' | 'center' | 'end';
+	sideOffset?: number;
+}
+
+export function HoverCardContent({
+	className,
+	align = 'center',
+	sideOffset = 4,
+	...props
+}: HoverCardContentProps) {
+	return createElement(HoverCardPrimitive.Portal, {
+		'data-slot': 'hover-card-portal',
+		children: createElement(HoverCardPrimitive.Content, {
+			'data-slot': 'hover-card-content',
+			align,
+			sideOffset,
+			className: cn(
+				'z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+				className,
+			),
+			...props,
+		}),
+	});
+}

package/src/ui/input.tsrx

@@ -0,0 +1,18 @@
+// Default-Tailwind (package canonical) input — user-supplied flavor, class string verbatim.
+// OCTANE DIVERGENCE: per-keystroke handling is the native onInput event.
+import { cn } from '../lib/utils';
+import type { HostProps } from '../lib/types';
+
+export interface InputProps extends HostProps<'input'> {}
+
+export function Input({ className, type, ...props }: InputProps) @{
+	<input
+		type={type}
+		data-slot="input"
+		className={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',
+			className,
+		)}
+		{...props}
+	/>
+}

package/src/ui/item.tsrx

@@ -0,0 +1,171 @@
+// Item — maintainer-supplied default-Tailwind flavor, class strings verbatim.
+// Octane adaptations: radix-ui Slot → @octanejs/radix (asChild via the @if/Slot
+// descriptor contract); Separator comes from the package's own port.
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from '@octanejs/radix';
+
+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;
+	variant?: VariantProps<typeof itemVariants>['variant'];
+	size?: VariantProps<typeof itemVariants>['size'];
+	// OCTANE DIVERGENCE: asChild composes element descriptors (createElement),
+	// not opaque compiled .tsrx children — the documented radix Slot contract.
+	asChild?: boolean;
+}
+
+export function Item({
+	className,
+	variant = 'default',
+	size = 'default',
+	asChild = false,
+	...props
+}: ItemProps) @{
+	@if (asChild) {
+		<Slot
+			data-slot="item"
+			data-variant={variant}
+			data-size={size}
+			className={cn(itemVariants({ variant, size, className }))}
+			{...props}
+		/>
+	} @else {
+		<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}
+	/>
+}

package/src/ui/kbd.tsrx

@@ -0,0 +1,26 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/kbd.tsx. Note: upstream renders KbdGroup as
+// a <kbd> host too — preserved as-is.
+import { cn } from '../lib/utils';
+import type { HostProps } from '../lib/types';
+
+export interface KbdProps extends HostProps<'kbd'> {}
+
+export function Kbd({ className, ...props }: KbdProps) @{
+	<kbd
+		data-slot="kbd"
+		className={cn(
+			'pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function KbdGroup({ className, ...props }: KbdProps) @{
+	<kbd
+		data-slot="kbd-group"
+		className={cn('inline-flex items-center gap-1', className)}
+		{...props}
+	/>
+}

package/src/ui/label.tsrx

@@ -0,0 +1,21 @@
+// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
+// apps/v4/registry/bases/radix/ui/label.tsx (the `"use client"` directive is
+// dropped — octane has no RSC axis).
+import { Label as LabelPrimitive } from '@octanejs/radix';
+
+import { cn } from '../lib/utils';
+
+export interface LabelProps extends Record<string, unknown> {
+	className?: string;
+}
+
+export function Label({ className, ...props }: LabelProps) @{
+	<LabelPrimitive.Root
+		data-slot="label"
+		className={cn(
+			'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+			className,
+		)}
+		{...props}
+	/>
+}

package/src/ui/menubar.tsrx

@@ -0,0 +1,198 @@
+// Menubar — maintainer-supplied default-Tailwind flavor, class strings
+// verbatim. Octane adaptations: "use client" dropped, lucide-react →
+// @octanejs/lucide, radix-ui → @octanejs/radix. Content composes through the
+// local MenubarPortal wrapper with createElement (radix's Portal slots its
+// child); parts interleaving consumer children with sibling descriptors use
+// the {props.children} lowering in template JSX.
+import { createElement, type OctaneNode } from 'octane';
+import { Menubar as MenubarPrimitive } 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 Menubar({ className, ...props }: Props) @{
+	<MenubarPrimitive.Root
+		data-slot="menubar"
+		className={cn('flex h-8 items-center gap-0.5 rounded-lg border p-[3px]', className)}
+		{...props}
+	/>
+}
+
+export function MenubarMenu(props: Record<string, unknown>) @{
+	<MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+export function MenubarGroup(props: Record<string, unknown>) @{
+	<MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+export function MenubarPortal(props: Record<string, unknown>) @{
+	<MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+export function MenubarRadioGroup(props: Record<string, unknown>) @{
+	<MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+}
+
+export function MenubarTrigger({ className, ...props }: Props) @{
+	<MenubarPrimitive.Trigger
+		data-slot="menubar-trigger"
+		className={cn(
+			'flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function MenubarContent({
+	className,
+	align = 'start',
+	alignOffset = -4,
+	sideOffset = 8,
+	...props
+}: Props & { align?: string; alignOffset?: number; sideOffset?: number }) {
+	return createElement(
+		MenubarPortal,
+		{},
+		createElement(MenubarPrimitive.Content, {
+			'data-slot': 'menubar-content',
+			align,
+			alignOffset,
+			sideOffset,
+			className: cn(
+				'z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden 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',
+				className,
+			),
+			...props,
+		}),
+	);
+}
+
+export function MenubarItem({ className, inset, variant = 'default', ...props }: Props & {
+	inset?: boolean;
+	variant?: 'default' | 'destructive';
+}) @{
+	<MenubarPrimitive.Item
+		data-slot="menubar-item"
+		data-inset={inset}
+		data-variant={variant}
+		className={cn(
+			'group/menubar-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 MenubarCheckboxItem(props: Props & {
+	checked?: boolean | 'indeterminate';
+	inset?: boolean;
+}) @{
+	const { className, children: _children, checked, inset, ...rest } = props;
+
+	<MenubarPrimitive.CheckboxItem
+		data-slot="menubar-checkbox-item"
+		data-inset={inset}
+		className={cn(
+			'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 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 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+			className,
+		)}
+		checked={checked}
+		{...rest}
+	>
+		<span
+			className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4"
+		>
+			<MenubarPrimitive.ItemIndicator>
+				<CheckIcon />
+			</MenubarPrimitive.ItemIndicator>
+		</span>
+		{props.children}
+	</MenubarPrimitive.CheckboxItem>
+}
+
+export function MenubarRadioItem(props: Props & { inset?: boolean }) @{
+	const { className, children: _children, inset, ...rest } = props;
+
+	<MenubarPrimitive.RadioItem
+		data-slot="menubar-radio-item"
+		data-inset={inset}
+		className={cn(
+			'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 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 left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4"
+		>
+			<MenubarPrimitive.ItemIndicator>
+				<CheckIcon />
+			</MenubarPrimitive.ItemIndicator>
+		</span>
+		{props.children}
+	</MenubarPrimitive.RadioItem>
+}
+
+export function MenubarLabel({ className, inset, ...props }: Props & { inset?: boolean }) @{
+	<MenubarPrimitive.Label
+		data-slot="menubar-label"
+		data-inset={inset}
+		className={cn('px-1.5 py-1 text-sm font-medium data-inset:pl-7', className)}
+		{...props}
+	/>
+}
+
+export function MenubarSeparator({ className, ...props }: Props) @{
+	<MenubarPrimitive.Separator
+		data-slot="menubar-separator"
+		className={cn('-mx-1 my-1 h-px bg-border', className)}
+		{...props}
+	/>
+}
+
+export function MenubarShortcut({ className, ...props }: Props) @{
+	<span
+		data-slot="menubar-shortcut"
+		className={cn(
+			'ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function MenubarSub(props: Record<string, unknown>) @{
+	<MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+export function MenubarSubTrigger(props: Props & { inset?: boolean }) @{
+	const { className, children: _children, inset, ...rest } = props;
+
+	<MenubarPrimitive.SubTrigger
+		data-slot="menubar-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-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*=\'size-\'])]:size-4',
+			className,
+		)}
+		{...rest}
+	>
+		{props.children}
+		<ChevronRightIcon className="cn-rtl-flip ml-auto size-4" />
+	</MenubarPrimitive.SubTrigger>
+}
+
+export function MenubarSubContent({ className, ...props }: Props) @{
+	<MenubarPrimitive.SubContent
+		data-slot="menubar-sub-content"
+		className={cn(
+			'z-50 min-w-32 origin-(--radix-menubar-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}
+	/>
+}