@mbao01/common 0.0.20 → 0.0.21

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>;

package/src/components/Menu/Menubar/Menubar.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { forwardRef } from "react";
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import type {
+  MenubarCheckboxItemProps,
+  MenubarContentProps,
+  MenubarItemProps,
+  MenubarLabelProps,
+  MenubarProps,
+  MenubarRadioItemProps,
+  MenubarSeparatorProps,
+  MenubarShortcutProps,
+  MenubarSubContentProps,
+  MenubarSubTriggerProps,
+  MenubarTriggerProps,
+} from "./types";
+import { cn } from "../../../utilities";
+import {
+  getMenubarCheckboxItemClasses,
+  getMenubarClasses,
+  getMenubarContentClasses,
+  getMenubarItemClasses,
+  getMenubarLabelClasses,
+  getMenubarRadioItemClasses,
+  getMenubarSeparatorClasses,
+  getMenubarShortcutClasses,
+  getMenubarSubContentClasses,
+  getMenubarSubTriggerClasses,
+  getMenubarTriggerClasses,
+} from "./constants";
+
+const Menubar = ({ className, ...props }: MenubarProps) => (
+  <MenubarPrimitive.Root
+    className={cn(getMenubarClasses(), className)}
+    {...props}
+  />
+);
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  MenubarTriggerProps
+>(({ className, variant, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(getMenubarTriggerClasses({ variant }), className)}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  MenubarSubTriggerProps
+>(({ className, inset, variant, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(getMenubarSubTriggerClasses({ inset, variant }), className)}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  MenubarSubContentProps
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(getMenubarSubContentClasses(), className)}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  MenubarContentProps
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(getMenubarContentClasses(), className)}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+);
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  MenubarItemProps
+>(({ className, inset, variant, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(getMenubarItemClasses({ inset, variant }), className)}
+    {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  MenubarCheckboxItemProps
+>(({ className, children, variant, ...props }, ref) => (
+  <MenubarPrimitive.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">
+      <MenubarPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  MenubarRadioItemProps
+>(({ className, children, variant, ...props }, ref) => (
+  <MenubarPrimitive.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">
+      <MenubarPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  MenubarLabelProps
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(getMenubarLabelClasses({ inset }), className)}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  MenubarSeparatorProps
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn(getMenubarSeparatorClasses(), className)}
+    {...props}
+  />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({ className, ...props }: MenubarShortcutProps) => {
+  return (
+    <span className={cn(getMenubarShortcutClasses(), className)} {...props} />
+  );
+};
+MenubarShortcut.displayname = "MenubarShortcut";
+
+Menubar.Menu = MenubarPrimitive.Menu;
+Menubar.Group = MenubarPrimitive.Group;
+Menubar.Portal = MenubarPrimitive.Portal;
+Menubar.Sub = MenubarPrimitive.Sub;
+Menubar.RadioGroup = MenubarPrimitive.RadioGroup;
+Menubar.Trigger = MenubarTrigger;
+Menubar.Content = MenubarContent;
+Menubar.Item = MenubarItem;
+Menubar.Separator = MenubarSeparator;
+Menubar.Label = MenubarLabel;
+Menubar.CheckboxItem = MenubarCheckboxItem;
+Menubar.RadioItem = MenubarRadioItem;
+Menubar.SubContent = MenubarSubContent;
+Menubar.SubTrigger = MenubarSubTrigger;
+Menubar.Shortcut = MenubarShortcut;
+
+export { Menubar };

package/src/components/Menu/Menubar/constants.ts

@@ -0,0 +1,107 @@
+import { cva } from "../../../libs";
+
+const itemVariant = {
+  primary: "focus:bg-primary focus:text-primary-content",
+  secondary: "focus:bg-secondary focus:text-secondary-content",
+  accent: "focus:bg-accent focus:text-accent-content",
+  neutral: "focus:bg-neutral focus:text-neutral-content",
+  base: "focus:bg-base-300 focus:text-base-content",
+  info: "focus:bg-info focus:text-info-content",
+  success: "focus:bg-success focus:text-success-content",
+  warning: "focus:bg-warning focus:text-warning-content",
+  error: "focus:bg-error focus:text-error-content",
+};
+
+const triggerVariant = {
+  primary:
+    "focus:bg-primary focus:text-primary-content data-[state=open]:bg-primary data-[state=open]:text-primary-content",
+  secondary:
+    "focus:bg-secondary focus:text-secondary-content data-[state=open]:bg-secondary data-[state=open]:text-secondary-content",
+  accent:
+    "focus:bg-accent focus:text-accent-content data-[state=open]:bg-accent data-[state=open]:text-accent-content",
+  neutral:
+    "focus:bg-neutral focus:text-neutral-content data-[state=open]:bg-neutral data-[state=open]:text-neutral-content",
+  base: "focus:bg-base-300 focus:text-base-content data-[state=open]:bg-base-300 data-[state=open]:text-base-content",
+  info: "focus:bg-info focus:text-info-content data-[state=open]:bg-info data-[state=open]:text-info-content",
+  success:
+    "focus:bg-success focus:text-success-content data-[state=open]:bg-success data-[state=open]:text-success-content",
+  warning:
+    "focus:bg-warning focus:text-warning-content data-[state=open]:bg-warning data-[state=open]:text-warning-content",
+  error:
+    "focus:bg-error focus:text-error-content data-[state=open]:bg-error data-[state=open]:text-error-content",
+};
+
+export const getMenubarClasses = cva(
+  "flex h-9 items-center space-x-1 rounded-md border bg-base-100 p-1 shadow-sm"
+);
+
+export const getMenubarTriggerClasses = cva(
+  "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none",
+  {
+    variants: {
+      variant: triggerVariant,
+    },
+  }
+);
+
+export const getMenubarSubTriggerClasses = cva(
+  "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+  {
+    variants: {
+      variant: triggerVariant,
+      inset: {
+        true: "pl-8",
+      },
+    },
+  }
+);
+
+export const getMenubarContentClasses = cva(
+  "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-base-100 p-1 text-base-content shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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"
+);
+
+export const getMenubarSubContentClasses = cva(
+  "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-base-100 p-1 text-base-content shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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"
+);
+
+export const getMenubarItemClasses = cva(
+  "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  {
+    variants: {
+      variant: itemVariant,
+      inset: {
+        true: "pl-8",
+      },
+    },
+  }
+);
+
+export const getMenubarCheckboxItemClasses = cva(
+  "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  {
+    variants: {
+      variant: itemVariant,
+    },
+  }
+);
+
+export const getMenubarRadioItemClasses = cva(
+  "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  {
+    variants: {
+      variant: itemVariant,
+    },
+  }
+);
+
+export const getMenubarLabelClasses = cva("px-2 py-1.5 text-sm font-semibold", {
+  variants: {
+    inset: {
+      true: "pl-8",
+    },
+  },
+});
+
+export const getMenubarSeparatorClasses = cva("-mx-1 my-1 h-px bg-base-200");
+
+export const getMenubarShortcutClasses = cva("ml-auto text-xs tracking-widest");

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

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

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

@@ -0,0 +1,66 @@
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { type VariantProps } from "../../../libs";
+import {
+  getMenubarCheckboxItemClasses,
+  getMenubarContentClasses,
+  getMenubarItemClasses,
+  getMenubarLabelClasses,
+  getMenubarRadioItemClasses,
+  getMenubarSeparatorClasses,
+  getMenubarShortcutClasses,
+  getMenubarSubContentClasses,
+  getMenubarSubTriggerClasses,
+  getMenubarTriggerClasses,
+} from "./constants";
+
+export type MenubarProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Root
+>;
+
+export type MenubarTriggerProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Trigger
+> &
+  VariantProps<typeof getMenubarTriggerClasses>;
+
+export type MenubarSubTriggerProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.SubTrigger
+> &
+  VariantProps<typeof getMenubarSubTriggerClasses>;
+
+export type MenubarContentProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Content
+> &
+  VariantProps<typeof getMenubarContentClasses>;
+
+export type MenubarSubContentProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.SubContent
+> &
+  VariantProps<typeof getMenubarSubContentClasses>;
+
+export type MenubarItemProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Item
+> &
+  VariantProps<typeof getMenubarItemClasses>;
+
+export type MenubarCheckboxItemProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.CheckboxItem
+> &
+  VariantProps<typeof getMenubarCheckboxItemClasses>;
+
+export type MenubarRadioItemProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.RadioItem
+> &
+  VariantProps<typeof getMenubarRadioItemClasses>;
+
+export type MenubarLabelProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Label
+> &
+  VariantProps<typeof getMenubarLabelClasses>;
+
+export type MenubarSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof MenubarPrimitive.Separator
+> &
+  VariantProps<typeof getMenubarSeparatorClasses>;
+
+export type MenubarShortcutProps = React.HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof getMenubarShortcutClasses>;