velloo 0.0.0 → 0.2.0

package/pkgs/shadcn-snapshot/src/components/ui/context-menu.tsx

@@ -0,0 +1,227 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/context-menu).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+// Canvas-safe: see ../canvas-portal.tsx. A context menu only opens on
+// right-click and portals to the body, so a static render would show the
+// trigger and nothing else. Everything from Content inward is a plain element —
+// Radix's menu parts read a context Portal/Content sets up, so they can't
+// render standalone, and the popup has to be inline for the design surface to
+// see it. Classes track upstream except for the ones that depend on Radix's
+// runtime positioning vars (`--radix-context-menu-*`) or animate on open, which
+// would leave screenshots catching a mid-transition frame.
+"use client";
+
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "../../lib/utils.ts";
+import { inlineOpenAttrs, pinOpenInDesignMode } from "../canvas-portal.tsx";
+
+const POPUP =
+  "cn-menu-target cn-menu-translucent z-50 rounded-lg bg-popover p-1 text-popover-foreground";
+
+const 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-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+
+const CHECKABLE_ITEM =
+  "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";
+
+const INDICATOR = "pointer-events-none absolute right-2";
+
+export function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...pinOpenInDesignMode(props)} />;
+}
+
+export function ContextMenuTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="context-menu-group" className={className} {...props} />;
+}
+
+/** Upstream's Portal, neutralized: children render where they sit. */
+export function ContextMenuPortal({ children }: React.ComponentProps<"div">) {
+  return <>{children}</>;
+}
+
+export function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+export function ContextMenuRadioGroup({ ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="context-menu-radio-group" {...props} />;
+}
+
+export function ContextMenuContent({
+  className,
+  side: _side,
+  sideOffset: _sideOffset,
+  align: _align,
+  alignOffset: _alignOffset,
+  collisionPadding: _collisionPadding,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: string;
+  sideOffset?: number;
+  align?: string;
+  alignOffset?: number;
+  collisionPadding?: number;
+}) {
+  return (
+    <div
+      data-slot="context-menu-content"
+      {...inlineOpenAttrs()}
+      className={cn(
+        POPUP,
+        "min-w-36 overflow-x-hidden overflow-y-auto shadow-md ring-1 ring-foreground/10",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & { inset?: boolean; variant?: "default" | "destructive" }) {
+  return (
+    <div
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-menu-item",
+        ITEM,
+        "focus:*:[svg]:text-accent-foreground 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-[variant=destructive]:*:[svg]:text-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & { inset?: boolean }) {
+  return (
+    <div
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(ITEM, "data-open:bg-accent data-open:text-accent-foreground", className)}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="cn-rtl-flip ml-auto" />
+    </div>
+  );
+}
+
+export function ContextMenuSubContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="context-menu-sub-content"
+      className={cn(POPUP, "min-w-32 overflow-hidden border shadow-lg", className)}
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<"div"> & { checked?: boolean; inset?: boolean }) {
+  return (
+    <div
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      data-state={checked ? "checked" : "unchecked"}
+      className={cn(CHECKABLE_ITEM, className)}
+      {...props}
+    >
+      <span className={INDICATOR}>{checked ? <CheckIcon /> : null}</span>
+      {children}
+    </div>
+  );
+}
+
+export function ContextMenuRadioItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<"div"> & { checked?: boolean; inset?: boolean }) {
+  return (
+    <div
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      data-state={checked ? "checked" : "unchecked"}
+      className={cn(CHECKABLE_ITEM, className)}
+      {...props}
+    >
+      <span className={INDICATOR}>{checked ? <CheckIcon /> : null}</span>
+      {children}
+    </div>
+  );
+}
+
+export function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<"div"> & { inset?: boolean }) {
+  return (
+    <div
+      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 }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+export function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <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/pkgs/shadcn-snapshot/src/components/ui/dialog.tsx

@@ -0,0 +1,131 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/dialog).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+// Canvas-safe: see ../canvas-portal.tsx. Content is a plain card sitting in the
+// page flow — not a portaled, viewport-centered layer — and it no longer pulls
+// the Overlay in with it, because a full-bleed backdrop would dim the whole
+// design surface. The close affordances are plain buttons rather than Radix
+// Close, so a Content placed on the canvas without its Root still renders.
+// Classes track upstream minus the open/close animations: we pin
+// `data-state="open"`, so those would replay on every render and screenshots
+// would catch a mid-transition frame.
+"use client";
+
+import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "../../lib/utils.ts";
+import { inlineOpenAttrs, pinOpenInDesignMode } from "../canvas-portal.tsx";
+import { Button } from "./button.tsx";
+
+export function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...pinOpenInDesignMode(props)} />;
+}
+
+export function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+export function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+/** Upstream's Portal, neutralized: children render where they sit. */
+export function DialogPortal({ children }: React.ComponentProps<"div">) {
+  return <>{children}</>;
+}
+
+export function DialogOverlay({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-overlay"
+      {...inlineOpenAttrs()}
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<"div"> & { showCloseButton?: boolean }) {
+  return (
+    <div
+      data-slot="dialog-content"
+      {...inlineOpenAttrs()}
+      className={cn(
+        "relative z-50 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 outline-none sm:max-w-sm",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <Button
+          data-slot="dialog-close"
+          variant="ghost"
+          className="absolute top-2 right-2"
+          size="icon-sm"
+        >
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="dialog-header" className={cn("flex flex-col gap-2", className)} {...props} />
+  );
+}
+
+export function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"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 && <Button variant="outline">Close</Button>}
+    </div>
+  );
+}
+
+export function DialogTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <h2
+      data-slot="dialog-title"
+      className={cn("cn-font-heading text-base leading-none font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/pkgs/shadcn-snapshot/src/components/ui/direction.tsx

@@ -0,0 +1,24 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/direction).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+// Regenerate with `bun run vendor` — do not hand-edit unless you are adding a
+// canvas adaptation, in which case add the id to vendor.ts's ADAPTED set.
+"use client";
+
+import { Direction } from "radix-ui";
+import type * as React from "react";
+
+function DirectionProvider({
+  dir,
+  direction,
+  children,
+}: React.ComponentProps<typeof Direction.DirectionProvider> & {
+  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"];
+}) {
+  return (
+    <Direction.DirectionProvider dir={direction ?? dir}>{children}</Direction.DirectionProvider>
+  );
+}
+
+const useDirection = Direction.useDirection;
+
+export { DirectionProvider, useDirection };

package/pkgs/shadcn-snapshot/src/components/ui/drawer.tsx

@@ -0,0 +1,112 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/drawer).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+//
+// Canvas-safe: see ../canvas-portal.tsx. Upstream builds on vaul, whose Root
+// owns a drag gesture and portals Content to the body once open — neither
+// survives a static render, so nothing of the drawer would reach the design
+// surface. The whole family is plain elements here, which also keeps vaul out
+// of the dependency tree; `emit_code` still emits `Drawer`, so the user's app
+// gets the real one from its own components/ui/drawer.
+//
+// `data-vaul-drawer-direction` is preserved because upstream's entire layout
+// hangs off it — the direction the caller asked for still styles correctly.
+"use client";
+
+import type * as React from "react";
+import { cn } from "../../lib/utils.ts";
+import { inlineOpenAttrs } from "../canvas-portal.tsx";
+
+type Direction = "top" | "bottom" | "left" | "right";
+
+export function Drawer({ ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="drawer" {...props} />;
+}
+
+export function DrawerTrigger({ ...props }: React.ComponentProps<"button">) {
+  return <button type="button" data-slot="drawer-trigger" {...props} />;
+}
+
+export function DrawerPortal({ children }: React.ComponentProps<"div">) {
+  return <>{children}</>;
+}
+
+export function DrawerClose({ ...props }: React.ComponentProps<"button">) {
+  return <button type="button" data-slot="drawer-close" {...props} />;
+}
+
+export function DrawerOverlay({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-overlay"
+      {...inlineOpenAttrs()}
+      className={cn("absolute inset-0 z-40 bg-black/10", className)}
+      {...props}
+    />
+  );
+}
+
+export function DrawerContent({
+  className,
+  children,
+  direction = "bottom",
+  ...props
+}: React.ComponentProps<"div"> & { direction?: Direction }) {
+  return (
+    <div
+      data-slot="drawer-content"
+      data-vaul-drawer-direction={direction}
+      {...inlineOpenAttrs()}
+      className={cn(
+        "group/drawer-content z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+      {children}
+    </div>
+  );
+}
+
+export function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+export function DrawerTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-title"
+      className={cn("cn-font-heading font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+export function DrawerDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="drawer-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}

package/pkgs/shadcn-snapshot/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,205 @@
+// Vendored from shadcn-ui (https://ui.shadcn.com/docs/components/radix/dropdown-menu).
+// Snapshot version: see packages/shadcn-snapshot/package.json#snapshotVersion.
+// Canvas-safe: see ../canvas-portal.tsx. Everything from Content inward is a
+// plain element — Radix's menu parts read a context Portal/Content sets up, so
+// they can't render standalone, and the popup has to be inline for the design
+// surface to see it. Classes track upstream except for the ones that depend on
+// Radix's runtime positioning vars (`--radix-dropdown-menu-*`) or animate on
+// open, which would leave screenshots catching a mid-transition frame.
+"use client";
+
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "../../lib/utils.ts";
+import { inlineOpenAttrs, pinOpenInDesignMode } from "../canvas-portal.tsx";
+
+const POPUP =
+  "cn-menu-target cn-menu-translucent z-50 min-w-32 overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground ring-1 ring-foreground/10";
+
+const 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-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+
+const CHECKABLE_ITEM =
+  "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-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+
+export function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...pinOpenInDesignMode(props)} />;
+}
+
+export function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+/** Upstream's Portal, neutralized: children render where they sit. */
+export function DropdownMenuPortal({ children }: React.ComponentProps<"div">) {
+  return <>{children}</>;
+}
+
+export function DropdownMenuContent({
+  className,
+  sideOffset: _sideOffset,
+  align: _align,
+  ...props
+}: React.ComponentProps<"div"> & { sideOffset?: number; align?: string }) {
+  return (
+    <div
+      data-slot="dropdown-menu-content"
+      {...inlineOpenAttrs()}
+      className={cn(POPUP, className)}
+      {...props}
+    />
+  );
+}
+
+export function DropdownMenuGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="dropdown-menu-group" className={className} {...props} />;
+}
+
+export function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & { inset?: boolean; variant?: "default" | "destructive" }) {
+  return (
+    <div
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item",
+        ITEM,
+        "not-data-[variant=destructive]:focus:**:text-accent-foreground 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-[variant=destructive]:*:[svg]:text-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<"div"> & { checked?: boolean }) {
+  return (
+    <div
+      data-slot="dropdown-menu-checkbox-item"
+      data-state={checked ? "checked" : "unchecked"}
+      className={cn(CHECKABLE_ITEM, className)}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
+        {checked ? <CheckIcon className="size-4" /> : null}
+      </span>
+      {children}
+    </div>
+  );
+}
+
+export function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+export function DropdownMenuRadioItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<"div"> & { checked?: boolean }) {
+  return (
+    <div
+      data-slot="dropdown-menu-radio-item"
+      data-state={checked ? "checked" : "unchecked"}
+      className={cn(CHECKABLE_ITEM, className)}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
+        {checked ? <CircleIcon className="size-2 fill-current" /> : null}
+      </span>
+      {children}
+    </div>
+  );
+}
+
+export function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<"div"> & { inset?: boolean }) {
+  return (
+    <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 }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+export function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <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
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+export function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & { inset?: boolean }) {
+  return (
+    <div
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(ITEM, "data-open:bg-accent data-open:text-accent-foreground", className)}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </div>
+  );
+}
+
+export function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dropdown-menu-sub-content"
+      className={cn(POPUP, "min-w-[96px] shadow-lg", className)}
+      {...props}
+    />
+  );
+}