@blocknote/shadcn 0.13.0

package/src/components/ui/select.tsx

@@ -0,0 +1,152 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}>
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}>
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}>
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  // <SelectPrimitive.Portal>
+  <SelectPrimitive.Content
+    ref={ref}
+    className={cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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",
+      position === "popper" &&
+        "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    )}
+    position={position}
+    {...props}>
+    <SelectScrollUpButton />
+    <SelectPrimitive.Viewport
+      className={cn(
+        "p-1",
+        position === "popper" &&
+          "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+      )}>
+      {children}
+    </SelectPrimitive.Viewport>
+    <SelectScrollDownButton />
+  </SelectPrimitive.Content>
+  // </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

package/src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "../../lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/ui/toggle.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "../../lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/form/Form.tsx

@@ -0,0 +1,21 @@
+import { ComponentProps } from "@blocknote/react";
+
+import { assertEmpty } from "@blocknote/core";
+import { useForm } from "react-hook-form";
+import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
+
+export const Form = (props: ComponentProps["Generic"]["Form"]["Root"]) => {
+  const { children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  const form = useForm();
+
+  return (
+    <ShadCNComponents.Form.Form {...form}>
+      {children}
+    </ShadCNComponents.Form.Form>
+  );
+};

package/src/form/TextInput.tsx

@@ -0,0 +1,61 @@
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+import { assertEmpty } from "@blocknote/core";
+import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
+
+export const TextInput = forwardRef(
+  (props: ComponentProps["Generic"]["Form"]["TextInput"]) => {
+    const {
+      className,
+      name,
+      label,
+      icon, // TODO: implement
+      value,
+      autoFocus,
+      placeholder,
+      onKeyDown,
+      onChange,
+      onSubmit,
+      ...rest
+    } = props;
+
+    assertEmpty(rest);
+
+    const ShadCNComponents = useShadCNComponentsContext()!;
+
+    if (!label) {
+      return (
+        <ShadCNComponents.Input.Input
+          aria-label={name}
+          name={name}
+          autoFocus={autoFocus}
+          placeholder={placeholder}
+          value={value}
+          onKeyDown={onKeyDown}
+          onChange={onChange}
+          onSubmit={onSubmit}
+        />
+      );
+    }
+
+    return (
+      <div>
+        <ShadCNComponents.Label.Label htmlFor={label}>
+          {label}
+        </ShadCNComponents.Label.Label>
+        <ShadCNComponents.Input.Input
+          className={className}
+          id={label}
+          name={name}
+          autoFocus={autoFocus}
+          placeholder={placeholder}
+          value={value}
+          onKeyDown={onKeyDown}
+          onChange={onChange}
+          onSubmit={onSubmit}
+        />
+      </div>
+    );
+  }
+);

package/src/index.tsx

@@ -0,0 +1,122 @@
+import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
+import {
+  BlockNoteViewRaw,
+  Components,
+  ComponentsContext,
+} from "@blocknote/react";
+import { ComponentProps, useMemo } from "react";
+
+import {
+  ShadCNComponents,
+  ShadCNComponentsContext,
+  ShadCNDefaultComponents,
+} from "./ShadCNComponentsContext";
+import { Form } from "./form/Form";
+import {
+  Menu,
+  MenuDivider,
+  MenuDropdown,
+  MenuItem,
+  MenuLabel,
+  MenuTrigger,
+} from "./menu/Menu";
+import { Panel } from "./panel/Panel";
+import { PanelButton } from "./panel/PanelButton";
+import { PanelFileInput } from "./panel/PanelFileInput";
+import { PanelTab } from "./panel/PanelTab";
+import { PanelTextInput } from "./panel/PanelTextInput";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover/popover";
+import { SideMenu } from "./sideMenu/SideMenu";
+import { SideMenuButton } from "./sideMenu/SideMenuButton";
+import { SuggestionMenu } from "./suggestionMenu/SuggestionMenu";
+import { SuggestionMenuEmptyItem } from "./suggestionMenu/SuggestionMenuEmptyItem";
+import { SuggestionMenuItem } from "./suggestionMenu/SuggestionMenuItem";
+import { SuggestionMenuLabel } from "./suggestionMenu/SuggestionMenuLabel";
+import { SuggestionMenuLoader } from "./suggestionMenu/SuggestionMenuLoader";
+import { TableHandle } from "./tableHandle/TableHandle";
+import { TextInput } from "./form/TextInput";
+import { Toolbar, ToolbarButton, ToolbarSelect } from "./toolbar/Toolbar";
+
+import "./style.css";
+
+export const components: Components = {
+  FormattingToolbar: {
+    Root: Toolbar,
+    Button: ToolbarButton,
+    Select: ToolbarSelect,
+  },
+  ImagePanel: {
+    Root: Panel,
+    Button: PanelButton,
+    FileInput: PanelFileInput,
+    TabPanel: PanelTab,
+    TextInput: PanelTextInput,
+  },
+  LinkToolbar: {
+    Root: Toolbar,
+    Button: ToolbarButton,
+  },
+  SideMenu: {
+    Root: SideMenu,
+    Button: SideMenuButton,
+  },
+  SuggestionMenu: {
+    Root: SuggestionMenu,
+    Item: SuggestionMenuItem,
+    EmptyItem: SuggestionMenuEmptyItem,
+    Label: SuggestionMenuLabel,
+    Loader: SuggestionMenuLoader,
+  },
+  TableHandle: {
+    Root: TableHandle,
+  },
+  Generic: {
+    Form: {
+      Root: Form,
+      TextInput: TextInput,
+    },
+    Menu: {
+      Root: Menu,
+      Trigger: MenuTrigger,
+      Dropdown: MenuDropdown,
+      Divider: MenuDivider,
+      Label: MenuLabel,
+      Item: MenuItem,
+    },
+    Popover: {
+      Root: Popover,
+      Trigger: PopoverTrigger,
+      Content: PopoverContent,
+    },
+  },
+};
+
+export const BlockNoteView = <
+  BSchema extends BlockSchema,
+  ISchema extends InlineContentSchema,
+  SSchema extends StyleSchema
+>(
+  props: ComponentProps<typeof BlockNoteViewRaw<BSchema, ISchema, SSchema>> & {
+    /**
+     * (optional)Provide your own shadcn component overrides
+     */
+    shadCNComponents?: Partial<ShadCNComponents>;
+  }
+) => {
+  const { shadCNComponents, ...rest } = props;
+
+  const componentsValue = useMemo(() => {
+    return {
+      ...shadCNComponents,
+      ...ShadCNDefaultComponents,
+    };
+  }, [shadCNComponents]);
+
+  return (
+    <ShadCNComponentsContext.Provider value={componentsValue}>
+      <ComponentsContext.Provider value={components}>
+        <BlockNoteViewRaw {...rest} />
+      </ComponentsContext.Provider>
+    </ShadCNComponentsContext.Provider>
+  );
+};

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/menu/Menu.tsx

@@ -0,0 +1,212 @@
+import type * as ShadCNDropdownMenu from "../components/ui/dropdown-menu";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { ChevronRight } from "lucide-react";
+import { forwardRef, useMemo } from "react";
+import { useShadCNComponentsContext } from "../ShadCNComponentsContext";
+import { cn } from "../lib/utils";
+
+// hacky HoC to change DropdownMenuTrigger to open a menu on PointerUp instead of PointerDown
+// Needed to fix this issue: https://github.com/radix-ui/primitives/issues/2867
+const MenuTriggerWithPointerUp = (
+  Comp: typeof ShadCNDropdownMenu.DropdownMenuTrigger
+) =>
+  forwardRef<
+    any,
+    React.ComponentProps<typeof ShadCNDropdownMenu.DropdownMenuTrigger>
+  >((props, ref) => {
+    return (
+      <Comp
+        onPointerDown={(e) => {
+          if (!(e.nativeEvent as any).fakeEvent) {
+            // setting ctrlKey will block the menu from opening
+            // as it will block this line: https://github.com/radix-ui/primitives/blob/b32a93318cdfce383c2eec095710d35ffbd33a1c/packages/react/dropdown-menu/src/DropdownMenu.tsx#L120
+            e.ctrlKey = true;
+          }
+        }}
+        onPointerUp={(event) => {
+          // dispatch a pointerdown event so the Radix pointer down handler gets called that opens the menu
+          const e = new PointerEvent("pointerdown", event.nativeEvent);
+          (e as any).fakeEvent = true;
+          event.target.dispatchEvent(e);
+        }}
+        {...props}
+        ref={ref}
+      />
+    );
+  });
+
+export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
+  const {
+    children,
+    onOpenChange,
+    position, // Unused
+    sub,
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  if (sub) {
+    return (
+      <ShadCNComponents.DropdownMenu.DropdownMenuSub
+        onOpenChange={onOpenChange}>
+        {children}
+      </ShadCNComponents.DropdownMenu.DropdownMenuSub>
+    );
+  } else {
+    return (
+      <ShadCNComponents.DropdownMenu.DropdownMenu onOpenChange={onOpenChange}>
+        {children}
+      </ShadCNComponents.DropdownMenu.DropdownMenu>
+    );
+  }
+};
+
+export const MenuTrigger = (
+  props: ComponentProps["Generic"]["Menu"]["Trigger"]
+) => {
+  const { children, sub, ...rest } = props;
+
+  assertEmpty(rest);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  const DropdownMenuTrigger = useMemo(
+    () =>
+      MenuTriggerWithPointerUp(
+        ShadCNComponents.DropdownMenu.DropdownMenuTrigger
+      ),
+    [ShadCNComponents.DropdownMenu.DropdownMenuTrigger]
+  );
+
+  if (sub) {
+    return (
+      <ShadCNComponents.DropdownMenu.DropdownMenuSubTrigger>
+        {children}
+      </ShadCNComponents.DropdownMenu.DropdownMenuSubTrigger>
+    );
+  } else {
+    return (
+      <DropdownMenuTrigger asChild={true} {...rest}>
+        {children}
+      </DropdownMenuTrigger>
+    );
+  }
+};
+
+export const MenuDropdown = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Menu"]["Dropdown"]
+>((props, ref) => {
+  const { className, children, sub, ...rest } = props;
+
+  assertEmpty(rest);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  if (sub) {
+    return (
+      <ShadCNComponents.DropdownMenu.DropdownMenuSubContent
+        className={className}
+        ref={ref}>
+        {children}
+      </ShadCNComponents.DropdownMenu.DropdownMenuSubContent>
+    );
+  } else {
+    return (
+      <ShadCNComponents.DropdownMenu.DropdownMenuContent
+        className={className}
+        ref={ref}>
+        {children}
+      </ShadCNComponents.DropdownMenu.DropdownMenuContent>
+    );
+  }
+});
+
+export const MenuItem = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Menu"]["Item"]
+>((props, ref) => {
+  const { className, children, icon, checked, subTrigger, onClick, ...rest } =
+    props;
+
+  assertEmpty(rest);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  if (subTrigger) {
+    return (
+      <>
+        {icon}
+        {children}
+      </>
+    );
+  }
+
+  if (checked !== undefined) {
+    return (
+      <ShadCNComponents.DropdownMenu.DropdownMenuCheckboxItem
+        className={cn(className, "gap-1")}
+        ref={ref}
+        checked={checked}
+        onClick={onClick}
+        {...rest}>
+        {icon}
+        {children}
+      </ShadCNComponents.DropdownMenu.DropdownMenuCheckboxItem>
+    );
+  }
+
+  return (
+    <ShadCNComponents.DropdownMenu.DropdownMenuItem
+      className={className}
+      ref={ref}
+      onClick={onClick}
+      {...rest}>
+      {icon}
+      {children}
+      {subTrigger && <ChevronRight className="ml-auto h-4 w-4" />}
+    </ShadCNComponents.DropdownMenu.DropdownMenuItem>
+  );
+});
+
+export const MenuDivider = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Menu"]["Divider"]
+>((props, ref) => {
+  const { className, ...rest } = props;
+
+  assertEmpty(rest);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  return (
+    <ShadCNComponents.DropdownMenu.DropdownMenuSeparator
+      className={className}
+      ref={ref}
+    />
+  );
+});
+
+export const MenuLabel = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Menu"]["Label"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  return (
+    <ShadCNComponents.DropdownMenu.DropdownMenuLabel
+      className={className}
+      ref={ref}>
+      {children}
+    </ShadCNComponents.DropdownMenu.DropdownMenuLabel>
+  );
+});