@wealthx/shadcn 0.0.1 → 1.0.0

package/src/components/ui/dialog.tsx

@@ -0,0 +1,195 @@
+/**
+ * Dialog — WealthX DS overrides (shadcn / \@base-ui dialog)
+ *
+ * Changes from shadcn default:
+ *   - DialogOverlay:  `bg-black/50` → `bg-foreground/50` — DS foreground token (matches Figma)
+ *   - DialogContent:  `rounded-lg` removed — sharp corners per Figma
+ *   - DialogContent:  `shadow-lg` removed — flat panels per Figma
+ *   - DialogHeader:   `text-center` removed — always left-aligned per DS
+ *   - DialogFooter:   `border-t border-border pt-4` — separator above footer
+ *   - Close button:   no radius, `hover:bg-foreground/5`, `focus:ring-border`
+ */
+import { type ReactElement } from "react"
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import { cn } from "@/lib/utils"
+import { useThemeVars } from "@/lib/theme-provider"
+import { buttonVariants } from "@/components/ui/button"
+
+export type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>
+
+function Dialog({
+  ...props
+}: DialogProps): ReactElement {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+export type DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>
+
+function DialogTrigger({
+  ...props
+}: DialogTriggerProps): ReactElement {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+export type DialogPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>
+
+function DialogPortal({
+  ...props
+}: DialogPortalProps): ReactElement {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+export type DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>
+
+function DialogClose({
+  ...props
+}: DialogCloseProps): ReactElement {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+export type DialogOverlayProps = React.ComponentProps<typeof DialogPrimitive.Backdrop>
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogOverlayProps): ReactElement {
+  return (
+    <DialogPrimitive.Backdrop
+      className={cn(
+        // WealthX: foreground/50 scrim (matches Figma — foreground token at 50% opacity)
+        "fixed inset-0 z-50 bg-foreground/50 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0",
+        className
+      )}
+      data-slot="dialog-overlay"
+      {...props}
+    />
+  )
+}
+
+export type DialogContentProps = React.ComponentProps<typeof DialogPrimitive.Popup> & {
+  showCloseButton?: boolean
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  style,
+  ...props
+}: DialogContentProps): ReactElement {
+  const themeVars = useThemeVars();
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        className={cn(
+          // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels), foreground/50 scrim via DialogOverlay
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 outline-none data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 sm:max-w-lg",
+          className
+        )}
+        data-slot="dialog-content"
+        style={{ ...themeVars, ...style } as React.CSSProperties}
+        {...props}
+      >
+        {children}
+        {showCloseButton ? <DialogPrimitive.Close
+            className="absolute top-4 right-4 transition-colors hover:bg-foreground/5 focus:outline-hidden focus:ring-2 focus:ring-border focus:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            // WealthX: removed rounded-xs (sharp), replaced opacity fade with hover:bg-foreground/5,
+            // focus ring uses border color (subtle, matches Figma DialogClose focus state)
+            data-slot="dialog-close"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close> : null}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+export type DialogHeaderProps = React.ComponentProps<"div">
+
+function DialogHeader({ className, ...props }: DialogHeaderProps): ReactElement {
+  return (
+    <div
+      // WealthX: always left-aligned (no sm:text-left — no centered variant)
+      className={cn("flex flex-col gap-1.5", className)}
+      data-slot="dialog-header"
+      {...props}
+    />
+  )
+}
+
+export type DialogFooterProps = React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: DialogFooterProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        // WealthX: always row layout, right-aligned, separator above footer
+        "flex flex-row justify-end gap-2 border-t border-border pt-4",
+        className
+      )}
+      data-slot="dialog-footer"
+      {...props}
+    >
+      {children}
+      {showCloseButton ? <DialogPrimitive.Close
+          className={cn(buttonVariants({ variant: "outline" }))}
+        >
+          Close
+        </DialogPrimitive.Close> : null}
+    </div>
+  )
+}
+
+export type DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>
+
+function DialogTitle({
+  className,
+  ...props
+}: DialogTitleProps): ReactElement {
+  return (
+    <DialogPrimitive.Title
+      className={cn("text-lg leading-none font-semibold", className)}
+      data-slot="dialog-title"
+      {...props}
+    />
+  )
+}
+
+export type DialogDescriptionProps = React.ComponentProps<typeof DialogPrimitive.Description>
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogDescriptionProps): ReactElement {
+  return (
+    <DialogPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      data-slot="dialog-description"
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

package/src/components/ui/drawer.tsx

@@ -0,0 +1,169 @@
+/**
+ * Drawer — WealthX DS overrides (vaul/shadcn base)
+ *
+ * Changes from shadcn default:
+ *   - DrawerOverlay:  `bg-black/50` → `bg-foreground/50` — uses DS foreground token (matches Figma overlay)
+ *   - DrawerContent:  removed `rounded-b-lg` / `rounded-t-lg` — sharp corners per Figma (no radius)
+ *   - DrawerContent:  handle bar also shown for `direction=top` (not just bottom)
+ *   - DrawerHeader:   removed `text-center` for top/bottom — always left-aligned per DS rule
+ *   - DrawerTitle:    added `text-lg` — matches Figma Text-lg/Semibold
+ */
+import { type ReactElement } from "react"
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+import { cn } from "@/lib/utils"
+import { useThemeVars } from "@/lib/theme-provider"
+
+export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>
+
+function Drawer({
+  ...props
+}: DrawerProps): ReactElement {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+export type DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>
+
+function DrawerTrigger({
+  ...props
+}: DrawerTriggerProps): ReactElement {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+export type DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>
+
+function DrawerPortal({
+  ...props
+}: DrawerPortalProps): ReactElement {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+export type DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>
+
+function DrawerClose({
+  ...props
+}: DrawerCloseProps): ReactElement {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+export type DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Overlay>
+
+function DrawerOverlay({
+  className,
+  ...props
+}: DrawerOverlayProps): ReactElement {
+  return (
+    <DrawerPrimitive.Overlay
+      className={cn(
+        // WealthX: foreground/50 scrim — matches Figma overlay token
+        "fixed inset-0 z-50 bg-foreground/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      data-slot="drawer-overlay"
+      {...props}
+    />
+  )
+}
+
+export type DrawerContentProps = React.ComponentProps<typeof DrawerPrimitive.Content>
+
+function DrawerContent({
+  className,
+  children,
+  style,
+  ...props
+}: DrawerContentProps): ReactElement {
+  const themeVars = useThemeVars();
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        className={cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-background",
+          // WealthX: no rounded corners (Figma: sharp edges)
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        )}
+        data-slot="drawer-content"
+        style={{ ...themeVars, ...style } as React.CSSProperties}
+        {...props}
+      >
+        {/* WealthX: handle shown for both top and bottom directions */}
+        <div className="mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block group-data-[vaul-drawer-direction=top]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+export type DrawerHeaderProps = React.ComponentProps<"div">
+
+function DrawerHeader({ className, ...props }: DrawerHeaderProps): ReactElement {
+  return (
+    <div
+      // WealthX: always left-aligned — no text-center for any direction
+      className={cn("flex flex-col gap-1 p-4", className)}
+      data-slot="drawer-header"
+      {...props}
+    />
+  )
+}
+
+export type DrawerFooterProps = React.ComponentProps<"div">
+
+function DrawerFooter({ className, ...props }: DrawerFooterProps): ReactElement {
+  return (
+    <div
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      data-slot="drawer-footer"
+      {...props}
+    />
+  )
+}
+
+export type DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>
+
+function DrawerTitle({
+  className,
+  ...props
+}: DrawerTitleProps): ReactElement {
+  return (
+    <DrawerPrimitive.Title
+      // WealthX: text-lg matches Figma Text-lg/Semibold
+      className={cn("text-lg font-semibold text-foreground", className)}
+      data-slot="drawer-title"
+      {...props}
+    />
+  )
+}
+
+export type DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>
+
+function DrawerDescription({
+  className,
+  ...props
+}: DrawerDescriptionProps): ReactElement {
+  return (
+    <DrawerPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      data-slot="drawer-description"
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,315 @@
+/**
+ * DropdownMenu — shadcn/WealthX
+ * Base: npx shadcn\@latest add dropdown-menu
+ * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=73-229
+ *
+ * WealthX overrides:
+ *   - DropdownMenuContent: rounded-md → rounded-none (sharp corners)
+ *   - DropdownMenuItem: rounded-sm → rounded-none
+ *   - DropdownMenuSubTrigger: rounded-sm → rounded-none
+ *   - DropdownMenuCheckboxItem: rounded-sm → rounded-none; added data-checked:bg-primary/10
+ *   - DropdownMenuRadioItem: rounded-sm → rounded-none; added data-checked:bg-primary/10
+ *   - DropdownMenuSubContent: rounded-md → rounded-none
+ */
+import { type ReactElement } from "react"
+import * as React from "react"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import { cn } from "@/lib/utils"
+import { useThemeVars } from "@/lib/theme-provider"
+
+export type DropdownMenuProps = React.ComponentProps<typeof MenuPrimitive.Root>
+
+function DropdownMenu({
+  ...props
+}: DropdownMenuProps): ReactElement {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+export type DropdownMenuPortalProps = React.ComponentProps<typeof MenuPrimitive.Portal>
+
+function DropdownMenuPortal({
+  ...props
+}: DropdownMenuPortalProps): ReactElement {
+  return (
+    <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+export type DropdownMenuTriggerProps = React.ComponentProps<typeof MenuPrimitive.Trigger>
+
+function DropdownMenuTrigger({
+  ...props
+}: DropdownMenuTriggerProps): ReactElement {
+  return (
+    <MenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+export type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Popup> & {
+  sideOffset?: number
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  style,
+  ...props
+}: DropdownMenuContentProps): ReactElement {
+  const themeVars = useThemeVars();
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner sideOffset={sideOffset}>
+        <MenuPrimitive.Popup
+          className={cn(
+            "z-50 min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-none border bg-popover p-1 text-popover-foreground shadow-md 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-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+            className
+          )}
+          data-slot="dropdown-menu-content"
+          style={{ ...themeVars, ...style } as React.CSSProperties}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+export type DropdownMenuGroupProps = React.ComponentProps<typeof MenuPrimitive.Group>
+
+function DropdownMenuGroup({
+  ...props
+}: DropdownMenuGroupProps): ReactElement {
+  return (
+    <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+export type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: DropdownMenuItemProps): ReactElement {
+  return (
+    <MenuPrimitive.Item
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-none px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      data-inset={inset}
+      data-slot="dropdown-menu-item"
+      data-variant={variant}
+      {...props}
+    />
+  )
+}
+
+export type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof MenuPrimitive.CheckboxItem>
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: DropdownMenuCheckboxItemProps): ReactElement {
+  return (
+    <MenuPrimitive.CheckboxItem
+      checked={checked}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-none py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-checked:bg-primary/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      data-slot="dropdown-menu-checkbox-item"
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+export type DropdownMenuRadioGroupProps = React.ComponentProps<typeof MenuPrimitive.RadioGroup>
+
+function DropdownMenuRadioGroup({
+  ...props
+}: DropdownMenuRadioGroupProps): ReactElement {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+export type DropdownMenuRadioItemProps = React.ComponentProps<typeof MenuPrimitive.RadioItem>
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: DropdownMenuRadioItemProps): ReactElement {
+  return (
+    <MenuPrimitive.RadioItem
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-none py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-checked:bg-primary/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      data-slot="dropdown-menu-radio-item"
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenuPrimitive.RadioItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+export type DropdownMenuLabelProps = React.ComponentProps<typeof MenuPrimitive.GroupLabel> & {
+  inset?: boolean
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: DropdownMenuLabelProps): ReactElement {
+  return (
+    <MenuPrimitive.GroupLabel
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-inset:pl-8",
+        className
+      )}
+      data-inset={inset}
+      data-slot="dropdown-menu-label"
+      {...props}
+    />
+  )
+}
+
+export type DropdownMenuSeparatorProps = React.ComponentProps<typeof MenuPrimitive.Separator>
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: DropdownMenuSeparatorProps): ReactElement {
+  return (
+    <MenuPrimitive.Separator
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      data-slot="dropdown-menu-separator"
+      {...props}
+    />
+  )
+}
+
+export type DropdownMenuShortcutProps = React.ComponentProps<"span">
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: DropdownMenuShortcutProps): ReactElement {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      data-slot="dropdown-menu-shortcut"
+      {...props}
+    />
+  )
+}
+
+export type DropdownMenuSubProps = React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>
+
+function DropdownMenuSub({
+  ...props
+}: DropdownMenuSubProps): ReactElement {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+export type DropdownMenuSubTriggerProps = React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {
+  inset?: boolean
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: DropdownMenuSubTriggerProps): ReactElement {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-none px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      data-inset={inset}
+      data-slot="dropdown-menu-sub-trigger"
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+export type DropdownMenuSubContentProps = React.ComponentProps<typeof MenuPrimitive.Popup> & {
+  sideOffset?: number
+}
+
+function DropdownMenuSubContent({
+  className,
+  sideOffset = 0,
+  style,
+  ...props
+}: DropdownMenuSubContentProps): ReactElement {
+  const themeVars = useThemeVars();
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner sideOffset={sideOffset}>
+        <MenuPrimitive.Popup
+          className={cn(
+            "z-50 min-w-[8rem] overflow-hidden rounded-none border bg-popover p-1 text-popover-foreground shadow-lg 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-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+            className
+          )}
+          data-slot="dropdown-menu-sub-content"
+          style={{ ...themeVars, ...style } as React.CSSProperties}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}