@blocknote/shadcn 0.14.1 → 0.14.3

package/src/components/ui/select.tsx

@@ -17,13 +17,13 @@ const SelectTrigger = React.forwardRef<
   <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",
+      "bn-flex bn-h-10 bn-w-full bn-items-center bn-justify-between bn-rounded-md bn-border bn-border-input bn-bg-background bn-px-3 bn-py-2 bn-text-sm bn-ring-offset-background placeholder:bn-text-muted-foreground focus:bn-outline-none focus:bn-ring-2 focus:bn-ring-ring focus:bn-ring-offset-2 disabled:bn-cursor-not-allowed disabled:bn-opacity-50 [&>span]:bn-line-clamp-1",
       className
     )}
     {...props}>
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="bn-h-4 bn-w-4 bn-opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -36,11 +36,11 @@ const SelectScrollUpButton = React.forwardRef<
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
+      "bn-flex bn-cursor-default bn-items-center bn-justify-center bn-py-1",
       className
     )}
     {...props}>
-    <ChevronUp className="h-4 w-4" />
+    <ChevronUp className="bn-h-4 bn-w-4" />
   </SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -52,11 +52,11 @@ const SelectScrollDownButton = React.forwardRef<
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
+      "bn-flex bn-cursor-default bn-items-center bn-justify-center bn-py-1",
       className
     )}
     {...props}>
-    <ChevronDown className="h-4 w-4" />
+    <ChevronDown className="bn-h-4 bn-w-4" />
   </SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName =
@@ -70,9 +70,9 @@ const SelectContent = React.forwardRef<
   <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",
+      "bn-relative bn-z-50 bn-max-h-96 bn-min-w-[8rem] bn-overflow-hidden bn-rounded-md bn-border bn-bg-popover 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",
       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",
+        "data-[side=bottom]:bn-translate-y-1 data-[side=left]:bn--translate-x-1 data-[side=right]:bn-translate-x-1 data-[side=top]:bn--translate-y-1",
       className
     )}
     position={position}
@@ -80,9 +80,9 @@ const SelectContent = React.forwardRef<
     <SelectScrollUpButton />
     <SelectPrimitive.Viewport
       className={cn(
-        "p-1",
+        "bn-p-1",
         position === "popper" &&
-          "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          "bn-h-[var(--radix-select-trigger-height)] bn-w-full bn-min-w-[var(--radix-select-trigger-width)]"
       )}>
       {children}
     </SelectPrimitive.Viewport>
@@ -98,7 +98,10 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn(
+      "bn-py-1.5 bn-pl-8 bn-pr-2 bn-text-sm bn-font-semibold",
+      className
+    )}
     {...props}
   />
 ));
@@ -111,13 +114,13 @@ const SelectItem = React.forwardRef<
   <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",
+      "bn-relative bn-flex bn-w-full bn-cursor-default bn-select-none bn-items-center bn-rounded-sm bn-py-1.5 bn-pl-8 bn-pr-2 bn-text-sm bn-outline-none focus:bn-bg-accent focus:bn-text-accent-foreground data-[disabled]:bn-pointer-events-none data-[disabled]:bn-opacity-50",
       className
     )}
     {...props}>
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="bn-absolute bn-left-2 bn-flex bn-h-3.5 bn-w-3.5 bn-items-center bn-justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="bn-h-4 bn-w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
 
@@ -132,7 +135,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("bn--mx-1 bn-my-1 bn-h-px bn-bg-muted", className)}
     {...props}
   />
 ));

package/src/components/ui/tabs.tsx

@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      "bn-inline-flex bn-h-10 bn-items-center bn-justify-center bn-rounded-md bn-bg-muted bn-p-1 bn-text-muted-foreground",
       className
     )}
     {...props}
@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
   <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",
+      "bn-inline-flex bn-items-center bn-justify-center bn-whitespace-nowrap bn-rounded-sm bn-px-3 bn-py-1.5 bn-text-sm bn-font-medium bn-ring-offset-background bn-transition-all focus-visible:bn-outline-none focus-visible:bn-ring-2 focus-visible:bn-ring-ring focus-visible:bn-ring-offset-2 disabled:bn-pointer-events-none disabled:bn-opacity-50 data-[state=active]:bn-bg-background data-[state=active]:bn-text-foreground data-[state=active]:bn-shadow-sm",
       className
     )}
     {...props}
@@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
   <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",
+      "bn-mt-2 bn-ring-offset-background focus-visible:bn-outline-none focus-visible:bn-ring-2 focus-visible:bn-ring-ring focus-visible:bn-ring-offset-2",
       className
     )}
     {...props}

package/src/components/ui/toggle.tsx

@@ -5,18 +5,18 @@ 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",
+  "bn-inline-flex bn-items-center bn-justify-center bn-rounded-md bn-text-sm bn-font-medium bn-ring-offset-background bn-transition-colors hover:bn-bg-muted hover: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-pointer-events-none disabled:bn-opacity-50 data-[state=on]:bn-bg-accent data-[state=on]:bn-text-accent-foreground",
   {
     variants: {
       variant: {
-        default: "bg-transparent",
+        default: "bn-bg-transparent",
         outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+          "bn-border bn-border-input bn-bg-transparent hover:bn-bg-accent hover:bn-text-accent-foreground",
       },
       size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5",
+        default: "bn-h-10 bn-px-3",
+        sm: "bn-h-9 bn-px-2.5",
+        lg: "bn-h-11 bn-px-5",
       },
     },
     defaultVariants: {

package/src/components/ui/tooltip.tsx

@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
     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",
+      "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}

package/src/form/TextInput.tsx

@@ -4,58 +4,60 @@ import { forwardRef } from "react";
 
 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;
+export const TextInput = forwardRef<
+  HTMLInputElement,
+  ComponentProps["Generic"]["Form"]["TextInput"]
+>((props, ref) => {
+  const {
+    className,
+    name,
+    label,
+    icon, // TODO: implement
+    value,
+    autoFocus,
+    placeholder,
+    onKeyDown,
+    onChange,
+    onSubmit,
+    ...rest
+  } = props;
 
-    assertEmpty(rest);
+  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}
-        />
-      );
-    }
+  const ShadCNComponents = useShadCNComponentsContext()!;
 
+  if (!label) {
     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>
+      <ShadCNComponents.Input.Input
+        aria-label={name}
+        name={name}
+        autoFocus={autoFocus}
+        placeholder={placeholder}
+        value={value}
+        onKeyDown={onKeyDown}
+        onChange={onChange}
+        onSubmit={onSubmit}
+        ref={ref}
+      />
     );
   }
-);
+
+  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

@@ -1,4 +1,9 @@
-import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  mergeCSSClasses,
+  StyleSchema,
+} from "@blocknote/core";
 import {
   BlockNoteViewRaw,
   Components,
@@ -103,19 +108,22 @@ export const BlockNoteView = <
     shadCNComponents?: Partial<ShadCNComponents>;
   }
 ) => {
-  const { shadCNComponents, ...rest } = props;
+  const { className, shadCNComponents, ...rest } = props;
 
   const componentsValue = useMemo(() => {
     return {
-      ...shadCNComponents,
       ...ShadCNDefaultComponents,
+      ...shadCNComponents,
     };
   }, [shadCNComponents]);
 
   return (
     <ShadCNComponentsContext.Provider value={componentsValue}>
       <ComponentsContext.Provider value={components}>
-        <BlockNoteViewRaw {...rest} />
+        <BlockNoteViewRaw
+          className={mergeCSSClasses("bn-shadcn", className || "")}
+          {...rest}
+        />
       </ComponentsContext.Provider>
     </ShadCNComponentsContext.Provider>
   );

package/src/lib/utils.ts

@@ -1,5 +1,11 @@
 import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+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-",
+});
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));

package/src/menu/Menu.tsx

@@ -147,7 +147,7 @@ export const MenuItem = forwardRef<
   if (checked !== undefined) {
     return (
       <ShadCNComponents.DropdownMenu.DropdownMenuCheckboxItem
-        className={cn(className, "gap-1")}
+        className={cn(className, "bn-gap-1")}
         ref={ref}
         checked={checked}
         onClick={onClick}
@@ -166,7 +166,7 @@ export const MenuItem = forwardRef<
       {...rest}>
       {icon}
       {children}
-      {subTrigger && <ChevronRight className="ml-auto h-4 w-4" />}
+      {subTrigger && <ChevronRight className="bn-ml-auto bn-h-4 bn-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, "bg-popover p-2 rounded-lg")}
+      className={cn(className, "bn-bg-popover bn-p-2 bn-rounded-lg")}
       ref={ref}
       value={openTab}
       defaultValue={defaultOpenTab}
@@ -43,7 +43,7 @@ export const Panel = forwardRef<
       {tabs.map((tab) => (
         <ShadCNComponents.Tabs.TabsContent value={tab.name} key={tab.name}>
           <ShadCNComponents.Card.Card>
-            <ShadCNComponents.Card.CardContent className={"p-4"}>
+            <ShadCNComponents.Card.CardContent className={"bn-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,
-        "flex flex-col gap-2 items-start justify-center"
+        "bn-flex bn-flex-col bn-gap-2 bn-items-start bn-justify-center"
       )}
       ref={ref}>
       {children}

package/src/panel/PanelTextInput.tsx

@@ -18,7 +18,7 @@ export const PanelTextInput = forwardRef<
   return (
     <ShadCNComponents.Input.Input
       data-test={"embed-input"}
-      className={cn(className, "w-80")}
+      className={cn(className, "bn-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,
-        "flex flex-col gap-2",
+        "bn-flex bn-flex-col bn-gap-2",
         variant === "panel-popover"
-          ? "p-0 border-none shadow-none max-w-none w-fit"
+          ? "bn-p-0 bn-border-none bn-shadow-none bn-max-w-none bn-w-fit"
           : ""
       )}
       ref={ref}>

package/src/sideMenu/SideMenuButton.tsx

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

package/src/style.css

@@ -1,10 +1,10 @@
+@import "./tailwindStyles.css";
 @import url("@blocknote/react/style.css");
 
-@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-.bn-container {
+.bn-shadcn {
   --background: 0 0% 100%;
   --foreground: 222.2 84% 4.9%;
 
@@ -36,7 +36,7 @@
   --radius: 0.5rem;
 }
 
-.bn-container.dark {
+.bn-shadcn.dark {
   --background: 222.2 84% 4.9%;
   --foreground: 210 40% 98%;
 
@@ -66,45 +66,46 @@
   --ring: 212.7 26.8% 83.9%;
 }
 
-.bn-container * {
-  @apply border-border;
+.bn-shadcn * {
+  @apply bn-border-border;
 }
-.bn-editor {
-  @apply bg-background text-foreground;
+
+.bn-shadcn .bn-editor {
+  @apply bn-bg-background bn-text-foreground;
 }
 
-[data-radix-popper-content-wrapper] {
+.bn-shadcn [data-radix-popper-content-wrapper] {
   z-index: 99999 !important;
 }
 
-.bn-editor:focus-visible {
+.bn-shadcn .bn-editor:focus-visible {
   outline: none;
 }
 
-.bn-side-menu {
+.bn-shadcn .bn-side-menu {
   align-items: center;
   display: flex;
   justify-content: center;
 }
 
-.bn-side-menu .bn-button {
+.bn-shadcn .bn-side-menu .bn-button {
   padding: 0;
   height: 24px;
 }
 
-.bn-select {
+.bn-shadcn .bn-select {
   max-height: var(--radix-select-content-available-height);
 }
 
-.bn-menu-dropdown {
+.bn-shadcn .bn-menu-dropdown {
   max-height: var(--radix-dropdown-menu-content-available-height);
 }
 
-.bn-color-picker-dropdown {
+.bn-shadcn .bn-color-picker-dropdown {
   overflow: auto;
 }
 
-.bn-suggestion-menu-item[aria-selected="true"],
-.bn-suggestion-menu-item:hover {
+.bn-shadcn .bn-suggestion-menu-item[aria-selected="true"],
+.bn-shadcn .bn-suggestion-menu-item:hover {
   background-color: hsl(var(--accent));
 }

package/src/suggestionMenu/SuggestionMenu.tsx

@@ -18,7 +18,7 @@ export const SuggestionMenu = forwardRef<
       role="listbox"
       // Styles from ShadCN DropdownMenuContent component
       className={cn(
-        "z-50 min-w-[8rem] overflow-auto rounded-md border bg-popover p-1 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",
+        "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",
         className
       )}
       ref={ref}>

package/src/suggestionMenu/SuggestionMenuEmptyItem.tsx

@@ -16,7 +16,7 @@ export const SuggestionMenuEmptyItem = forwardRef<
     <div
       // Styles from ShadCN DropdownMenuItem component
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "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",
         className
       )}
       ref={ref}>

package/src/suggestionMenu/SuggestionMenuItem.tsx

@@ -35,7 +35,7 @@ export const SuggestionMenuItem = forwardRef<
     <div
       // Styles from ShadCN DropdownMenuItem component
       className={cn(
-        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "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",
         className
       )}
       ref={mergeRefs([ref, itemRef])}
@@ -44,16 +44,16 @@ export const SuggestionMenuItem = forwardRef<
       role="option"
       aria-selected={isSelected || undefined}>
       {item.icon && (
-        <div className="p-3" data-position="left">
+        <div className="bn-p-3" data-position="left">
           {item.icon}
         </div>
       )}
-      <div className="flex-1">
-        <div className="text-base">{item.title}</div>
-        <div className="text-xs">{item.subtext}</div>
+      <div className="bn-flex-1">
+        <div className="bn-text-base">{item.title}</div>
+        <div className="bn-text-xs">{item.subtext}</div>
       </div>
       {item.badge && (
-        <div data-position="right" className="text-xs">
+        <div data-position="right" className="bn-text-xs">
           <ShadCNComponents.Badge.Badge variant={"secondary"}>
             {item.badge}
           </ShadCNComponents.Badge.Badge>

package/src/suggestionMenu/SuggestionMenuLabel.tsx

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

package/src/tableHandle/TableHandle.tsx

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