@blocknote/shadcn 0.36.1 → 0.38.0

package/src/components/ui/tooltip.tsx

@@ -1,28 +1,57 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "../../lib/utils.js";
+import { cn } from "../../lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider;
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
 
-const Tooltip = TooltipPrimitive.Root;
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
 
-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(
-      "bn-z-50 bn-overflow-hidden bn-rounded-md bn-border bn-bg-popover bn-px-3 bn-py-1.5 bn-text-sm bn-text-popover-foreground bn-shadow-md bn-animate-in bn-fade-in-0 bn-zoom-in-95 data-[state=closed]:bn-animate-out data-[state=closed]:bn-fade-out-0 data-[state=closed]:bn-zoom-out-95 data-[side=bottom]:bn-slide-in-from-top-2 data-[side=left]:bn-slide-in-from-right-2 data-[side=right]:bn-slide-in-from-left-2 data-[side=top]:bn-slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Content
+      data-slot="tooltip-content"
+      sideOffset={sideOffset}
+      className={cn(
+        "bg-primary text-primary-foreground 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 origin-(--radix-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+    </TooltipPrimitive.Content>
+  );
+}
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components.ts

@@ -34,7 +34,6 @@ import { Badge, BadgeGroup } from "./badge/Badge.js";
 
 import { PanelButton } from "./panel/PanelButton.js";
 import { PanelFileInput } from "./panel/PanelFileInput.js";
-import "./style.css";
 import { GridSuggestionMenuItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.js";
 import { GridSuggestionMenuLoader } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.js";
 

package/src/form/TextInput.tsx

@@ -35,19 +35,19 @@ export const TextInput = forwardRef<
     <div
       className={cn(
         className,
-        "bn-flex bn-h-10 bn-w-full bn-rounded-md bn-border bn-border-input bn-bg-background bn-px-3 bn-py-2 bn-text-sm bn-ring-offset-background file:bn-border-0 file:bn-bg-transparent file:bn-text-sm file:bn-font-medium placeholder:bn-text-muted-foreground focus-visible:bn-outline-none focus-visible:bn-ring-2 focus-visible:bn-ring-ring focus-visible:bn-ring-offset-2 disabled:bn-cursor-not-allowed disabled:bn-opacity-50",
-        "bn-items-center bn-gap-2 bn-text-foreground",
+        "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "text-foreground items-center gap-2",
       )}
     >
       {icon}
-      <div className="bn-flex-1">
+      <div className="flex-1">
         {label && (
           <ShadCNComponents.Label.Label htmlFor={label}>
             {label}
           </ShadCNComponents.Label.Label>
         )}
         <ShadCNComponents.Input.Input
-          className={cn(className, "bn-border-none bn-p-0 bn-h-auto")}
+          className={cn(className, "h-auto border-none p-0")}
           id={label}
           name={name}
           autoFocus={autoFocus}

package/src/index.tsx

@@ -1,4 +1,3 @@
-import "./style.css";
-
 export { BlockNoteView } from "./BlockNoteView.js";
 export { components } from "./components.js";
+export * from "./ShadCNComponentsContext.jsx";

package/src/lib/utils.ts

@@ -1,11 +1,5 @@
-import { type ClassValue, clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-
-// Ensures that `bn-` prefixed Tailwind classes are recognized as Tailwind
-// classes, so they can be merged correctly.
-const twMerge = extendTailwindMerge({
-  prefix: "bn-",
-});
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));

package/src/menu/Button.tsx

@@ -30,7 +30,7 @@ export const MenuButton = forwardRef<
   return (
     <ShadCNComponents.Button.Button
       variant={"ghost"}
-      className={cn(className, "bn-text-gray-400")}
+      className={cn(className, "text-gray-400")}
       ref={ref}
       aria-label={label}
       onClick={onClick}

package/src/menu/Menu.tsx

@@ -153,7 +153,7 @@ export const MenuItem = forwardRef<
   if (checked !== undefined) {
     return (
       <ShadCNComponents.DropdownMenu.DropdownMenuCheckboxItem
-        className={cn(className, "bn-gap-1", checked ? "" : "bn-px-2")}
+        className={cn(className, "gap-1", checked ? "" : "px-2")}
         ref={ref}
         checked={checked}
         onClick={onClick}
@@ -174,7 +174,7 @@ export const MenuItem = forwardRef<
     >
       {icon}
       {children}
-      {subTrigger && <ChevronRight className="bn-ml-auto bn-h-4 bn-w-4" />}
+      {subTrigger && <ChevronRight className="ml-auto h-4 w-4" />}
     </ShadCNComponents.DropdownMenu.DropdownMenuItem>
   );
 });

package/src/panel/Panel.tsx

@@ -25,7 +25,7 @@ export const Panel = forwardRef<
 
   return (
     <ShadCNComponents.Tabs.Tabs
-      className={cn(className, "bn-bg-popover bn-p-2 bn-rounded-lg")}
+      className={cn(className, "bg-popover rounded-lg p-2")}
       ref={ref}
       value={openTab}
       defaultValue={defaultOpenTab}
@@ -44,7 +44,7 @@ export const Panel = forwardRef<
       {tabs.map((tab) => (
         <ShadCNComponents.Tabs.TabsContent value={tab.name} key={tab.name}>
           <ShadCNComponents.Card.Card>
-            <ShadCNComponents.Card.CardContent className={"bn-p-4"}>
+            <ShadCNComponents.Card.CardContent className={"p-4"}>
               {tab.tabPanel}
             </ShadCNComponents.Card.CardContent>
           </ShadCNComponents.Card.Card>

package/src/panel/PanelTab.tsx

@@ -16,7 +16,7 @@ export const PanelTab = forwardRef<
     <div
       className={cn(
         className,
-        "bn-flex bn-flex-col bn-gap-2 bn-items-start bn-justify-center",
+        "flex flex-col items-start justify-center gap-2",
       )}
       ref={ref}
     >

package/src/panel/PanelTextInput.tsx

@@ -18,7 +18,7 @@ export const PanelTextInput = forwardRef<
   return (
     <ShadCNComponents.Input.Input
       data-test={"embed-input"}
-      className={cn(className, "bn-w-80")}
+      className={cn(className, "w-80")}
       ref={ref}
       value={value}
       placeholder={placeholder}

package/src/popover/popover.tsx

@@ -57,9 +57,9 @@ export const PopoverContent = forwardRef<
       sideOffset={8}
       className={cn(
         className,
-        "bn-flex bn-flex-col bn-gap-2",
+        "flex flex-col gap-2",
         variant === "panel-popover"
-          ? "bn-p-0 bn-border-none bn-shadow-none bn-max-w-none bn-w-fit"
+          ? "w-fit max-w-none border-none p-0 shadow-none"
           : "",
       )}
       ref={ref}

package/src/sideMenu/SideMenuButton.tsx

@@ -30,7 +30,7 @@ export const SideMenuButton = forwardRef<
   return (
     <ShadCNComponents.Button.Button
       variant={"ghost"}
-      className={cn(className, "bn-text-gray-400")}
+      className={cn(className, "text-gray-400")}
       ref={ref}
       aria-label={label}
       onClick={onClick}

package/src/style.css

@@ -1,77 +1,12 @@
-@import "./tailwindStyles.css";
-@import url("@blocknote/react/style.css");
+@import "@blocknote/react/style.css";
 
-@tailwind components;
-@tailwind utilities;
-
-.bn-shadcn {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 222.2 84% 4.9%;
-
-  --radius: 0.5rem;
-}
-
-.bn-shadcn.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
-
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
-
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 212.7 26.8% 83.9%;
-}
-
-.bn-shadcn * {
-  @apply bn-border-border;
+.bn-shadcn svg:not([class*="size-"]) {
+  width: revert;
+  height: revert;
 }
 
-.bn-shadcn .bn-editor {
-  @apply bn-bg-background bn-text-foreground;
+.bn-shadcn svg {
+  pointer-events: all;
 }
 
 .bn-shadcn .bn-editor a {
@@ -106,62 +41,6 @@
   overflow: auto;
 }
 
-.bn-shadcn .bn-suggestion-menu {
-  height: fit-content;
-  max-height: inherit;
-}
-
-.bn-shadcn .bn-suggestion-menu-item[aria-selected="true"],
-.bn-shadcn .bn-suggestion-menu-item:hover {
-  background-color: hsl(var(--accent));
-}
-
-.bn-shadcn .bn-grid-suggestion-menu {
-  background: var(--bn-colors-menu-background);
-  border-radius: var(--bn-border-radius-large);
-  box-shadow: var(--bn-shadow-medium);
-  display: grid;
-  gap: 7px;
-  height: fit-content;
-  justify-items: center;
-  max-height: inherit;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-.bn-shadcn .bn-grid-suggestion-menu-item {
-  align-items: center;
-  border-radius: var(--bn-border-radius-large);
-  cursor: pointer;
-  display: flex;
-  font-size: 24px;
-  height: 32px;
-  justify-content: center;
-  margin: 2px;
-  padding: 4px;
-  width: 32px;
-}
-
-.bn-shadcn .bn-grid-suggestion-menu-item[aria-selected="true"],
-.bn-shadcn .bn-grid-suggestion-menu-item:hover {
-  background-color: var(--bn-colors-hovered-background);
-}
-
-.bn-shadcn .bn-grid-suggestion-menu-empty-item,
-.bn-shadcn .bn-grid-suggestion-menu-loader {
-  align-items: center;
-  color: var(--bn-colors-menu-text);
-  display: flex;
-  font-size: 14px;
-  font-weight: 500;
-  height: 32px;
-  justify-content: center;
-}
-
-.bn-shadcn .bn-grid-suggestion-menu-loader span {
-  background-color: hsl(var(--accent));
-}
-
 .bn-shadcn .bn-extend-button-add-remove-columns {
   cursor: col-resize;
 }

package/src/suggestionMenu/SuggestionMenu.tsx

@@ -18,7 +18,7 @@ export const SuggestionMenu = forwardRef<
       role="listbox"
       // Styles from ShadCN DropdownMenuContent component
       className={cn(
-        "bn-z-50 bn-min-w-[8rem] bn-overflow-auto bn-rounded-md bn-border bn-bg-popover bn-p-1 bn-text-popover-foreground bn-shadow-md data-[state=open]:bn-animate-in data-[state=closed]:bn-animate-out data-[state=closed]:bn-fade-out-0 data-[state=open]:bn-fade-in-0 data-[state=closed]:bn-zoom-out-95 data-[state=open]:bn-zoom-in-95 data-[side=bottom]:bn-slide-in-from-top-2 data-[side=left]:bn-slide-in-from-right-2 data-[side=right]:bn-slide-in-from-left-2 data-[side=top]:bn-slide-in-from-bottom-2",
+        "bg-popover text-popover-foreground 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 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
         className,
       )}
       ref={ref}

package/src/suggestionMenu/SuggestionMenuEmptyItem.tsx

@@ -16,7 +16,9 @@ export const SuggestionMenuEmptyItem = forwardRef<
     <div
       // Styles from ShadCN DropdownMenuItem component
       className={cn(
-        "bn-relative bn-flex bn-cursor-default bn-select-none bn-items-center bn-rounded-sm bn-px-2 bn-py-1.5 bn-text-sm bn-outline-none bn-transition-colors focus:bn-bg-accent focus:bn-text-accent-foreground data-[disabled]:bn-pointer-events-none data-[disabled]:bn-opacity-50",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=text-])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "hover:bg-accent hover:text-accent-foreground data-[variant=destructive]:hover:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 data-[variant=destructive]:hover:text-destructive",
+        "aria-selected:bg-accent aria-selected:text-accent-foreground data-[variant=destructive]:aria-selected:bg-destructive/10 dark:data-[variant=destructive]:aria-selected:bg-destructive/20 data-[variant=destructive]:aria-selected:text-destructive",
         className,
       )}
       ref={ref}

package/src/suggestionMenu/SuggestionMenuItem.tsx

@@ -37,10 +37,13 @@ export const SuggestionMenuItem = forwardRef<
     <div
       // Styles from ShadCN DropdownMenuItem component
       className={cn(
-        "bn-relative bn-flex bn-cursor-pointer bn-select-none bn-items-center bn-rounded-sm bn-px-2 bn-py-1.5 bn-text-sm bn-outline-none bn-transition-colors focus:bn-bg-accent focus:bn-text-accent-foreground data-[disabled]:bn-pointer-events-none data-[disabled]:bn-opacity-50",
-        props.item.size === "small" ? "bn-gap-3 bn-py-1" : "",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=text-])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "hover:bg-accent hover:text-accent-foreground data-[variant=destructive]:hover:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 data-[variant=destructive]:hover:text-destructive",
+        "aria-selected:bg-accent aria-selected:text-accent-foreground data-[variant=destructive]:aria-selected:bg-destructive/10 dark:data-[variant=destructive]:aria-selected:bg-destructive/20 data-[variant=destructive]:aria-selected:text-destructive",
+        props.item.size === "small" ? "gap-3 py-1" : "",
         className,
       )}
+      data-highlighted
       ref={mergeRefs([ref, itemRef])}
       id={id}
       onMouseDown={(event) => event.preventDefault()}
@@ -51,8 +54,8 @@ export const SuggestionMenuItem = forwardRef<
       {item.icon && (
         <div
           className={cn(
-            "bn-p-3",
-            props.item.size === "small" ? "bn-p-0" : "",
+            "p-3",
+            props.item.size === "small" ? "p-0" : "",
             className,
           )}
           data-position="left"
@@ -60,11 +63,11 @@ export const SuggestionMenuItem = forwardRef<
           {item.icon}
         </div>
       )}
-      <div className="bn-flex-1">
+      <div className="flex-1">
         <div
           className={cn(
-            "bn-text-base",
-            props.item.size === "small" ? "bn-text-sm" : "",
+            "text-base",
+            props.item.size === "small" ? "text-sm" : "",
             className,
           )}
         >
@@ -72,8 +75,8 @@ export const SuggestionMenuItem = forwardRef<
         </div>
         <div
           className={cn(
-            "bn-text-xs",
-            props.item.size === "small" ? "bn-hidden" : "",
+            "text-xs",
+            props.item.size === "small" ? "hidden" : "",
             className,
           )}
         >
@@ -81,7 +84,7 @@ export const SuggestionMenuItem = forwardRef<
         </div>
       </div>
       {item.badge && (
-        <div data-position="right" className="bn-text-xs">
+        <div data-position="right" className="text-xs">
           <ShadCNComponents.Badge.Badge variant={"secondary"}>
             {item.badge}
           </ShadCNComponents.Badge.Badge>

package/src/suggestionMenu/SuggestionMenuLabel.tsx

@@ -15,7 +15,10 @@ export const SuggestionMenuLabel = forwardRef<
   return (
     <div
       // Styles from ShadCN DropdownMenuLabel component
-      className={cn("bn-px-2 bn-py-1.5 bn-text-sm bn-font-semibold", className)}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
       ref={ref}
     >
       {children}

package/src/suggestionMenu/SuggestionMenuLoader.tsx

@@ -13,7 +13,7 @@ export const SuggestionMenuLoader = forwardRef<
   assertEmpty(rest);
 
   return (
-    <div className={cn(className, "bn-animate-spin")} ref={ref}>
+    <div className={cn(className, "animate-spin")} ref={ref}>
       {/* Taken from Google Material Icons */}
       {/* https://fonts.google.com/icons?selected=Material+Symbols+Rounded:progress_activity:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=load&icon.size=24&icon.color=%23e8eaed&icon.set=Material+Symbols&icon.style=Rounded&icon.platform=web */}
       <svg
@@ -21,7 +21,8 @@ export const SuggestionMenuLoader = forwardRef<
         height="1em"
         viewBox="0 -960 960 960"
         width="1em"
-        fill="#e8eaed">
+        fill="#e8eaed"
+      >
         <path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Z" />
       </svg>
     </div>

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx

@@ -2,6 +2,8 @@ import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
+import { cn } from "../../lib/utils.js";
+
 export const GridSuggestionMenu = forwardRef<
   HTMLDivElement,
   ComponentProps["GridSuggestionMenu"]["Root"]
@@ -12,7 +14,12 @@ export const GridSuggestionMenu = forwardRef<
 
   return (
     <div
-      className={className}
+      // Styles from ShadCN DropdownMenuContent component
+      className={cn(
+        "bg-popover text-popover-foreground 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 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
+        "grid",
+        className,
+      )}
       style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` } as any}
       ref={ref}
       id={id}

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx

@@ -2,6 +2,8 @@ import { assertEmpty } from "@blocknote/core";
 import { ComponentProps, elementOverflow, mergeRefs } from "@blocknote/react";
 import { forwardRef, useEffect, useRef } from "react";
 
+import { cn } from "../../lib/utils.js";
+
 export const GridSuggestionMenuItem = forwardRef<
   HTMLDivElement,
   ComponentProps["GridSuggestionMenu"]["Item"]
@@ -31,7 +33,14 @@ export const GridSuggestionMenuItem = forwardRef<
 
   return (
     <div
-      className={className}
+      // Styles from ShadCN DropdownMenuItem component
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=text-])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "hover:bg-accent hover:text-accent-foreground data-[variant=destructive]:hover:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 data-[variant=destructive]:hover:text-destructive",
+        "aria-selected:bg-accent aria-selected:text-accent-foreground data-[variant=destructive]:aria-selected:bg-destructive/10 dark:data-[variant=destructive]:aria-selected:bg-destructive/20 data-[variant=destructive]:aria-selected:text-destructive",
+        "text-lg!",
+        className,
+      )}
       ref={mergeRefs([ref, itemRef])}
       id={id}
       role="option"

package/src/tableHandle/ExtendButton.tsx

@@ -22,12 +22,12 @@ export const ExtendButton = forwardRef<
       variant={"ghost"}
       className={cn(
         className,
-        "bn-p-0 bn-h-full bn-w-full bn-text-gray-400",
-        className?.includes("bn-extend-button-add-remove-columns")
-          ? "bn-ml-1"
-          : "bn-mt-1",
-        className?.includes("bn-extend-button-editing")
-          ? "bn-bg-accent bn-text-accent-foreground"
+        "h-full w-full p-0 text-gray-400",
+        className?.includes("extend-button-add-remove-columns")
+          ? "ml-1"
+          : "mt-1",
+        className?.includes("extend-button-editing")
+          ? "bg-accent text-accent-foreground"
           : "",
       )}
       ref={ref}

package/src/tableHandle/TableHandle.tsx

@@ -29,7 +29,7 @@ export const TableHandle = forwardRef<
   return (
     <ShadCNComponents.Button.Button
       variant={"ghost"}
-      className={cn(className, "bn-p-0 bn-h-fit bn-w-fit bn-text-gray-400")}
+      className={cn(className, "h-fit w-fit p-0 text-gray-400")}
       ref={ref}
       aria-label={label}
       draggable={draggable}

package/src/toolbar/Toolbar.tsx

@@ -27,8 +27,8 @@ export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
         <div
           className={cn(
             className,
-            "bn-flex bn-gap-1 bn-p-1 bn-bg-popover bn-text-popover-foreground bn-border bn-rounded-lg bn-shadow-md bn-h-fit",
-            variant === "action-toolbar" ? "bn-w-fit" : "",
+            "bg-popover text-popover-foreground flex h-fit gap-1 rounded-lg border p-1 shadow-md",
+            variant === "action-toolbar" ? "w-fit" : "",
           )}
           ref={ref}
           onMouseEnter={onMouseEnter}
@@ -70,7 +70,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
         <ShadCNComponents.Button.Button
           className={cn(
             className,
-            variant === "compact" ? "bn-h-6 bn-min-w-6 bn-p-0" : "",
+            variant === "compact" ? "h-6 min-w-6 p-0" : "",
           )}
           variant="ghost"
           size={variant === "compact" ? "sm" : "default"}
@@ -88,7 +88,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
           className={cn(
             className,
             "data-[state=open]:bg-accent data-[state=closed]:text-accent-foreground",
-            variant === "compact" ? "bn-h-6 bn-min-w-6 bn-p-0" : "",
+            variant === "compact" ? "h-6 min-w-6 p-0" : "",
           )}
           size={variant === "compact" ? "sm" : "default"}
           aria-label={label}
@@ -111,9 +111,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
           {trigger}
         </ShadCNComponents.Tooltip.TooltipTrigger>
         <ShadCNComponents.Tooltip.TooltipContent
-          className={
-            "bn-flex bn-flex-col bn-items-center bn-whitespace-pre-wrap"
-          }
+          className={"flex flex-col items-center whitespace-pre-wrap"}
         >
           <span>{mainTooltip}</span>
           {secondaryTooltip && <span>{secondaryTooltip}</span>}
@@ -135,7 +133,7 @@ export const ToolbarSelect = forwardRef<
 
   // TODO?
   const SelectItemContent = (props: any) => (
-    <div className={"bn-flex bn-gap-1 bn-items-center"}>
+    <div className={"flex items-center gap-1"}>
       {props.icon}
       {props.text}
     </div>
@@ -155,7 +153,7 @@ export const ToolbarSelect = forwardRef<
       }
       disabled={isDisabled}
     >
-      <ShadCNComponents.Select.SelectTrigger className={"bn-border-none"}>
+      <ShadCNComponents.Select.SelectTrigger className={"border-none"}>
         <ShadCNComponents.Select.SelectValue />
       </ShadCNComponents.Select.SelectTrigger>
       <ShadCNComponents.Select.SelectContent className={className} ref={ref}>

package/types/src/BlockNoteView.d.ts

@@ -1,6 +1,7 @@
 import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
 import { BlockNoteViewRaw } from "@blocknote/react";
 import { ShadCNComponents } from "./ShadCNComponentsContext.js";
+import "./style.css";
 export declare const BlockNoteView: <BSchema extends BlockSchema, ISchema extends InlineContentSchema, SSchema extends StyleSchema>(props: React.ComponentProps<typeof BlockNoteViewRaw<BSchema, ISchema, SSchema>> & {
     /**
      * (optional)Provide your own shadcn component overrides