@mbao01/common 0.0.19 → 0.0.21

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "../../utilities";
+import { forwardRef } from "react";
+import { DrawerProps } from "./types";
+import {
+  getDrawerContentClasses,
+  getDrawerDescriptionClasses,
+  getDrawerFooterClasses,
+  getDrawerHeaderClasses,
+  getDrawerOverlayClasses,
+  getDrawerTitleClasses,
+} from "./constants";
+
+const Drawer = ({ shouldScaleBackground = true, ...props }: DrawerProps) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn(getDrawerOverlayClasses(), className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(getDrawerContentClasses(), className)}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[80px] rounded-full bg-base-300" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn(getDrawerHeaderClasses(), className)} {...props} />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn(getDrawerFooterClasses(), className)} {...props} />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(getDrawerTitleClasses(), className)}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn(getDrawerDescriptionClasses(), className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+Drawer.Portal = DrawerPortal;
+Drawer.Overlay = DrawerOverlay;
+Drawer.Trigger = DrawerTrigger;
+Drawer.Close = DrawerClose;
+Drawer.Content = DrawerContent;
+Drawer.Header = DrawerHeader;
+Drawer.Footer = DrawerFooter;
+Drawer.Title = DrawerTitle;
+Drawer.Description = DrawerDescription;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

package/src/components/Drawer/constants.ts

@@ -0,0 +1,19 @@
+import { cva } from "../../libs";
+
+export const getDrawerContentClasses = cva(
+  "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-base-100"
+);
+
+export const getDrawerDescriptionClasses = cva("text-sm");
+
+export const getDrawerHeaderClasses = cva(
+  "grid gap-1.5 p-4 text-center sm:text-left"
+);
+
+export const getDrawerFooterClasses = cva("mt-auto flex flex-col gap-2 p-4");
+
+export const getDrawerOverlayClasses = cva("fixed inset-0 z-50 bg-black/80");
+
+export const getDrawerTitleClasses = cva(
+  "text-lg font-semibold leading-none tracking-tight"
+);

package/src/components/Drawer/index.ts

@@ -0,0 +1 @@
+export { Drawer } from "./Drawer";

package/src/components/Drawer/types.ts

@@ -0,0 +1,3 @@
+import { Drawer as DrawerPrimitive } from "vaul";
+
+export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;

package/src/components/Menu/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { forwardRef } from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons";
+import type {
+  ContextMenuCheckboxItemProps,
+  ContextMenuContentProps,
+  ContextMenuItemProps,
+  ContextMenuLabelProps,
+  ContextMenuProps,
+  ContextMenuRadioItemProps,
+  ContextMenuSeparatorProps,
+  ContextMenuShortcutProps,
+  ContextMenuSubContentProps,
+  ContextMenuSubTriggerProps,
+} from "./types";
+import { cn } from "../../../utilities";
+import {
+  getMenubarCheckboxItemClasses,
+  getMenubarContentClasses,
+  getMenubarItemClasses,
+  getMenubarLabelClasses,
+  getMenubarRadioItemClasses,
+  getMenubarSeparatorClasses,
+  getMenubarShortcutClasses,
+  getMenubarSubContentClasses,
+  getMenubarSubTriggerClasses,
+} from "../Menubar/constants";
+
+const ContextMenu = (props: ContextMenuProps) => (
+  <ContextMenuPrimitive.Root {...props} />
+);
+
+const ContextMenuSubTrigger = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  ContextMenuSubTriggerProps
+>(({ className, inset, variant, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(getMenubarSubTriggerClasses({ inset, variant }), className)}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  ContextMenuSubContentProps
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(getMenubarSubContentClasses(), className)}
+    {...props}
+  />
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  ContextMenuContentProps
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(getMenubarContentClasses(), className)}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  ContextMenuItemProps
+>(({ className, inset, variant, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(getMenubarItemClasses({ inset, variant }), className)}
+    {...props}
+  />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  ContextMenuCheckboxItemProps
+>(({ className, children, variant, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(getMenubarCheckboxItemClasses({ variant }), className)}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  ContextMenuRadioItemProps
+>(({ className, children, variant, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(getMenubarRadioItemClasses({ variant }), className)}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  ContextMenuLabelProps
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(getMenubarLabelClasses({ inset }), className)}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  ContextMenuSeparatorProps
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn(getMenubarSeparatorClasses(), className)}
+    {...props}
+  />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: ContextMenuShortcutProps) => {
+  return (
+    <span className={cn(getMenubarShortcutClasses(), className)} {...props} />
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+ContextMenu.Trigger = ContextMenuPrimitive.Trigger;
+ContextMenu.Group = ContextMenuPrimitive.Group;
+ContextMenu.Portal = ContextMenuPrimitive.Portal;
+ContextMenu.Sub = ContextMenuPrimitive.Sub;
+ContextMenu.RadioGroup = ContextMenuPrimitive.RadioGroup;
+ContextMenu.Content = ContextMenuContent;
+ContextMenu.Item = ContextMenuItem;
+ContextMenu.CheckboxItem = ContextMenuCheckboxItem;
+ContextMenu.RadioItem = ContextMenuRadioItem;
+ContextMenu.Label = ContextMenuLabel;
+ContextMenu.Separator = ContextMenuSeparator;
+ContextMenu.Shortcut = ContextMenuShortcut;
+ContextMenu.SubContent = ContextMenuSubContent;
+ContextMenu.SubTrigger = ContextMenuSubTrigger;
+
+export { ContextMenu };

package/src/components/Menu/ContextMenu/index.ts

@@ -0,0 +1 @@
+export { ContextMenu } from "./ContextMenu";

package/src/components/Menu/ContextMenu/types.ts

@@ -0,0 +1,60 @@
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { type VariantProps } from "../../../libs";
+import {
+  getMenubarCheckboxItemClasses,
+  getMenubarContentClasses,
+  getMenubarItemClasses,
+  getMenubarLabelClasses,
+  getMenubarRadioItemClasses,
+  getMenubarSeparatorClasses,
+  getMenubarShortcutClasses,
+  getMenubarSubContentClasses,
+  getMenubarSubTriggerClasses,
+} from "../Menubar/constants";
+
+export type ContextMenuProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Root
+>;
+
+export type ContextMenuSubTriggerProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.SubTrigger
+> &
+  VariantProps<typeof getMenubarSubTriggerClasses>;
+
+export type ContextMenuContentProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Content
+> &
+  VariantProps<typeof getMenubarContentClasses>;
+
+export type ContextMenuSubContentProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.SubContent
+> &
+  VariantProps<typeof getMenubarSubContentClasses>;
+
+export type ContextMenuItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Item
+> &
+  VariantProps<typeof getMenubarItemClasses>;
+
+export type ContextMenuCheckboxItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.CheckboxItem
+> &
+  VariantProps<typeof getMenubarCheckboxItemClasses>;
+
+export type ContextMenuRadioItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.RadioItem
+> &
+  VariantProps<typeof getMenubarRadioItemClasses>;
+
+export type ContextMenuLabelProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Label
+> &
+  VariantProps<typeof getMenubarLabelClasses>;
+
+export type ContextMenuSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Separator
+> &
+  VariantProps<typeof getMenubarSeparatorClasses>;
+
+export type ContextMenuShortcutProps = React.HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof getMenubarShortcutClasses>;

package/src/components/Menu/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons";
+import type {
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuContentProps,
+  DropdownMenuItemProps,
+  DropdownMenuLabelProps,
+  DropdownMenuProps,
+  DropdownMenuRadioItemProps,
+  DropdownMenuSeparatorProps,
+  DropdownMenuShortcutProps,
+  DropdownMenuSubContentProps,
+  DropdownMenuSubTriggerProps,
+} from "./types";
+import { cn } from "../../../utilities";
+import {
+  getMenubarCheckboxItemClasses,
+  getMenubarContentClasses,
+  getMenubarItemClasses,
+  getMenubarLabelClasses,
+  getMenubarRadioItemClasses,
+  getMenubarSeparatorClasses,
+  getMenubarShortcutClasses,
+  getMenubarSubContentClasses,
+  getMenubarSubTriggerClasses,
+} from "../Menubar/constants";
+
+const DropdownMenu = (props: DropdownMenuProps) => (
+  <DropdownMenuPrimitive.Root {...props} />
+);
+
+const DropdownMenuSubTrigger = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  DropdownMenuSubTriggerProps
+>(({ className, inset, variant, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(getMenubarSubTriggerClasses({ inset, variant }), className)}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  DropdownMenuSubContentProps
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(getMenubarSubContentClasses(), className)}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  DropdownMenuContentProps
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(getMenubarContentClasses(), className)}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  DropdownMenuItemProps
+>(({ className, inset, variant, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(getMenubarItemClasses({ inset, variant }), className)}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  DropdownMenuCheckboxItemProps
+>(({ className, children, variant, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(getMenubarCheckboxItemClasses({ variant }), className)}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  DropdownMenuRadioItemProps
+>(({ className, children, variant, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(getMenubarRadioItemClasses({ variant }), className)}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  DropdownMenuLabelProps
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(getMenubarLabelClasses({ inset }), className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  DropdownMenuSeparatorProps
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn(getMenubarSeparatorClasses(), className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: DropdownMenuShortcutProps) => {
+  return (
+    <span className={cn(getMenubarShortcutClasses(), className)} {...props} />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+DropdownMenu.Trigger = DropdownMenuPrimitive.Trigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.CheckboxItem = DropdownMenuCheckboxItem;
+DropdownMenu.RadioItem = DropdownMenuRadioItem;
+DropdownMenu.Label = DropdownMenuLabel;
+DropdownMenu.Separator = DropdownMenuSeparator;
+DropdownMenu.Shortcut = DropdownMenuShortcut;
+DropdownMenu.Group = DropdownMenuPrimitive.Group;
+DropdownMenu.Portal = DropdownMenuPrimitive.Portal;
+DropdownMenu.Sub = DropdownMenuPrimitive.Sub;
+DropdownMenu.SubContent = DropdownMenuSubContent;
+DropdownMenu.SubTrigger = DropdownMenuSubTrigger;
+DropdownMenu.RadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+export { DropdownMenu };

package/src/components/Menu/DropdownMenu/index.ts

@@ -0,0 +1 @@
+export { DropdownMenu } from "./DropdownMenu";

package/src/components/Menu/DropdownMenu/types.ts

@@ -0,0 +1,60 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { type VariantProps } from "../../../libs";
+import {
+  getMenubarCheckboxItemClasses,
+  getMenubarContentClasses,
+  getMenubarItemClasses,
+  getMenubarLabelClasses,
+  getMenubarRadioItemClasses,
+  getMenubarSeparatorClasses,
+  getMenubarShortcutClasses,
+  getMenubarSubContentClasses,
+  getMenubarSubTriggerClasses,
+} from "../Menubar/constants";
+
+export type DropdownMenuProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Root
+>;
+
+export type DropdownMenuSubTriggerProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.SubTrigger
+> &
+  VariantProps<typeof getMenubarSubTriggerClasses>;
+
+export type DropdownMenuContentProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Content
+> &
+  VariantProps<typeof getMenubarContentClasses>;
+
+export type DropdownMenuSubContentProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.SubContent
+> &
+  VariantProps<typeof getMenubarSubContentClasses>;
+
+export type DropdownMenuItemProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Item
+> &
+  VariantProps<typeof getMenubarItemClasses>;
+
+export type DropdownMenuCheckboxItemProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.CheckboxItem
+> &
+  VariantProps<typeof getMenubarCheckboxItemClasses>;
+
+export type DropdownMenuRadioItemProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.RadioItem
+> &
+  VariantProps<typeof getMenubarRadioItemClasses>;
+
+export type DropdownMenuLabelProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Label
+> &
+  VariantProps<typeof getMenubarLabelClasses>;
+
+export type DropdownMenuSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Separator
+> &
+  VariantProps<typeof getMenubarSeparatorClasses>;
+
+export type DropdownMenuShortcutProps = React.HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof getMenubarShortcutClasses>;