@blocknote/shadcn 0.30.0 → 0.30.1

package/src/components/ui/label.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import { cn } from "../../lib/utils.js";
 
 const labelVariants = cva(
-  "bn-text-sm bn-font-medium bn-leading-none peer-disabled:bn-cursor-not-allowed peer-disabled:bn-opacity-70"
+  "bn-text-sm bn-font-medium bn-leading-none peer-disabled:bn-cursor-not-allowed peer-disabled:bn-opacity-70",
 );
 
 const Label = React.forwardRef<

package/src/components/ui/popover.tsx

@@ -18,7 +18,7 @@ const PopoverContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "bn-z-50 bn-w-72 bn-rounded-md bn-border bn-bg-popover bn-p-4 bn-text-popover-foreground bn-shadow-md bn-outline-none 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
+      className,
     )}
     {...props}
   />

package/src/components/ui/select.tsx

@@ -18,9 +18,10 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "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
+      className,
     )}
-    {...props}>
+    {...props}
+  >
     {children}
     <SelectPrimitive.Icon asChild>
       <ChevronDown className="bn-h-4 bn-w-4 bn-opacity-50" />
@@ -37,9 +38,10 @@ const SelectScrollUpButton = React.forwardRef<
     ref={ref}
     className={cn(
       "bn-flex bn-cursor-default bn-items-center bn-justify-center bn-py-1",
-      className
+      className,
     )}
-    {...props}>
+    {...props}
+  >
     <ChevronUp className="bn-h-4 bn-w-4" />
   </SelectPrimitive.ScrollUpButton>
 ));
@@ -53,9 +55,10 @@ const SelectScrollDownButton = React.forwardRef<
     ref={ref}
     className={cn(
       "bn-flex bn-cursor-default bn-items-center bn-justify-center bn-py-1",
-      className
+      className,
     )}
-    {...props}>
+    {...props}
+  >
     <ChevronDown className="bn-h-4 bn-w-4" />
   </SelectPrimitive.ScrollDownButton>
 ));
@@ -73,17 +76,19 @@ const SelectContent = React.forwardRef<
       "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]: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
+      className,
     )}
     position={position}
-    {...props}>
+    {...props}
+  >
     <SelectScrollUpButton />
     <SelectPrimitive.Viewport
       className={cn(
         "bn-p-1",
         position === "popper" &&
-          "bn-h-[var(--radix-select-trigger-height)] bn-w-full bn-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>
     <SelectScrollDownButton />
@@ -100,7 +105,7 @@ const SelectLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "bn-py-1.5 bn-pl-8 bn-pr-2 bn-text-sm bn-font-semibold",
-      className
+      className,
     )}
     {...props}
   />
@@ -115,9 +120,10 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "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
+      className,
     )}
-    {...props}>
+    {...props}
+  >
     <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="bn-h-4 bn-w-4" />

package/src/components/ui/skeleton.tsx

@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      className={cn("bg-primary/10 animate-pulse rounded-md", className)}
       {...props}
     />
   );

package/src/components/ui/tabs.tsx

@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       "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
+      className,
     )}
     {...props}
   />
@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "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
+      className,
     )}
     {...props}
   />
@@ -43,7 +43,7 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "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
+      className,
     )}
     {...props}
   />

package/src/components/ui/toggle.tsx

@@ -23,7 +23,7 @@ const toggleVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 const Toggle = React.forwardRef<

package/src/components/ui/tooltip.tsx

@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
     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
+      className,
     )}
     {...props}
   />

package/src/menu/Button.tsx

@@ -37,7 +37,8 @@ export const MenuButton = forwardRef<
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
       draggable={draggable}
-      {...rest}>
+      {...rest}
+    >
       {icon}
       {children}
     </ShadCNComponents.Button.Button>

package/src/menu/Menu.tsx

@@ -31,7 +31,7 @@ const MenuTriggerWithPointerUp = (Comp: typeof ShadCNDropdownMenuTrigger) =>
           ref={ref}
         />
       );
-    }
+    },
   );
 
 export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
@@ -50,7 +50,8 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
   if (sub) {
     return (
       <ShadCNComponents.DropdownMenu.DropdownMenuSub
-        onOpenChange={onOpenChange}>
+        onOpenChange={onOpenChange}
+      >
         {children}
       </ShadCNComponents.DropdownMenu.DropdownMenuSub>
     );
@@ -58,7 +59,8 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
     return (
       <ShadCNComponents.DropdownMenu.DropdownMenu
         modal={false}
-        onOpenChange={onOpenChange}>
+        onOpenChange={onOpenChange}
+      >
         {children}
       </ShadCNComponents.DropdownMenu.DropdownMenu>
     );
@@ -66,7 +68,7 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
 };
 
 export const MenuTrigger = (
-  props: ComponentProps["Generic"]["Menu"]["Trigger"]
+  props: ComponentProps["Generic"]["Menu"]["Trigger"],
 ) => {
   const { children, sub, ...rest } = props;
 
@@ -77,9 +79,9 @@ export const MenuTrigger = (
   const DropdownMenuTrigger = useMemo(
     () =>
       MenuTriggerWithPointerUp(
-        ShadCNComponents.DropdownMenu.DropdownMenuTrigger
+        ShadCNComponents.DropdownMenu.DropdownMenuTrigger,
       ),
-    [ShadCNComponents.DropdownMenu.DropdownMenuTrigger]
+    [ShadCNComponents.DropdownMenu.DropdownMenuTrigger],
   );
 
   if (sub) {
@@ -111,7 +113,8 @@ export const MenuDropdown = forwardRef<
     return (
       <ShadCNComponents.DropdownMenu.DropdownMenuSubContent
         className={className}
-        ref={ref}>
+        ref={ref}
+      >
         {children}
       </ShadCNComponents.DropdownMenu.DropdownMenuSubContent>
     );
@@ -119,7 +122,8 @@ export const MenuDropdown = forwardRef<
     return (
       <ShadCNComponents.DropdownMenu.DropdownMenuContent
         className={className}
-        ref={ref}>
+        ref={ref}
+      >
         {children}
       </ShadCNComponents.DropdownMenu.DropdownMenuContent>
     );
@@ -153,7 +157,8 @@ export const MenuItem = forwardRef<
         ref={ref}
         checked={checked}
         onClick={onClick}
-        {...rest}>
+        {...rest}
+      >
         {icon}
         {children}
       </ShadCNComponents.DropdownMenu.DropdownMenuCheckboxItem>
@@ -165,7 +170,8 @@ export const MenuItem = forwardRef<
       className={className}
       ref={ref}
       onClick={onClick}
-      {...rest}>
+      {...rest}
+    >
       {icon}
       {children}
       {subTrigger && <ChevronRight className="bn-ml-auto bn-h-4 bn-w-4" />}
@@ -204,7 +210,8 @@ export const MenuLabel = forwardRef<
   return (
     <ShadCNComponents.DropdownMenu.DropdownMenuLabel
       className={className}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </ShadCNComponents.DropdownMenu.DropdownMenuLabel>
   );

package/src/panel/Panel.tsx

@@ -29,7 +29,8 @@ export const Panel = forwardRef<
       ref={ref}
       value={openTab}
       defaultValue={defaultOpenTab}
-      onValueChange={setOpenTab}>
+      onValueChange={setOpenTab}
+    >
       {/*{loading && <LoadingOverlay visible={loading} />}*/}
 
       <ShadCNComponents.Tabs.TabsList>

package/src/panel/PanelButton.tsx

@@ -20,7 +20,8 @@ export const PanelButton = forwardRef<
       className={className}
       aria-label={label}
       ref={ref}
-      onClick={onClick}>
+      onClick={onClick}
+    >
       {children}
     </ShadCNComponents.Button.Button>
   );

package/src/panel/PanelTab.tsx

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

package/src/popover/popover.tsx

@@ -6,7 +6,7 @@ import { cn } from "../lib/utils.js";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext.js";
 
 export const Popover = (
-  props: ComponentProps["Generic"]["Popover"]["Root"]
+  props: ComponentProps["Generic"]["Popover"]["Root"],
 ) => {
   const {
     children,
@@ -39,7 +39,7 @@ export const PopoverTrigger = forwardRef(
         {children}
       </ShadCNComponents.Popover.PopoverTrigger>
     );
-  }
+  },
 );
 
 export const PopoverContent = forwardRef<
@@ -60,9 +60,10 @@ export const PopoverContent = forwardRef<
         "bn-flex bn-flex-col bn-gap-2",
         variant === "panel-popover"
           ? "bn-p-0 bn-border-none bn-shadow-none bn-max-w-none bn-w-fit"
-          : ""
+          : "",
       )}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </ShadCNComponents.Popover.PopoverContent>
   );

package/src/sideMenu/SideMenuButton.tsx

@@ -37,7 +37,8 @@ export const SideMenuButton = forwardRef<
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
       draggable={draggable}
-      {...rest}>
+      {...rest}
+    >
       {icon}
       {children}
     </ShadCNComponents.Button.Button>

package/src/suggestionMenu/SuggestionMenu.tsx

@@ -19,9 +19,10 @@ export const SuggestionMenu = forwardRef<
       // 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",
-        className
+        className,
       )}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </div>
   );

package/src/suggestionMenu/SuggestionMenuEmptyItem.tsx

@@ -17,9 +17,10 @@ export const SuggestionMenuEmptyItem = forwardRef<
       // 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",
-        className
+        className,
       )}
-      ref={ref}>
+      ref={ref}
+    >
       <div>{children}</div>
     </div>
   );

package/src/suggestionMenu/SuggestionMenuItem.tsx

@@ -24,7 +24,7 @@ export const SuggestionMenuItem = forwardRef<
 
     const overflow = elementOverflow(
       itemRef.current,
-      document.querySelector(".bn-suggestion-menu")!
+      document.querySelector(".bn-suggestion-menu")!,
     );
     if (overflow === "top") {
       itemRef.current.scrollIntoView(true);
@@ -38,13 +38,14 @@ export const SuggestionMenuItem = forwardRef<
       // 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",
-        className
+        className,
       )}
       ref={mergeRefs([ref, itemRef])}
       id={id}
       onClick={onClick}
       role="option"
-      aria-selected={isSelected || undefined}>
+      aria-selected={isSelected || undefined}
+    >
       {item.icon && (
         <div className="bn-p-3" data-position="left">
           {item.icon}

package/src/suggestionMenu/SuggestionMenuLabel.tsx

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

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx

@@ -16,7 +16,8 @@ export const GridSuggestionMenu = forwardRef<
       style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` } as any}
       ref={ref}
       id={id}
-      role="grid">
+      role="grid"
+    >
       {children}
     </div>
   );

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx

@@ -14,7 +14,8 @@ export const GridSuggestionMenuEmptyItem = forwardRef<
     <div
       className={className}
       style={{ gridColumn: `1 / ${columns + 1}` }}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </div>
   );

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx

@@ -19,7 +19,7 @@ export const GridSuggestionMenuItem = forwardRef<
 
     const overflow = elementOverflow(
       itemRef.current,
-      document.querySelector(".bn-grid-suggestion-menu")!
+      document.querySelector(".bn-grid-suggestion-menu")!,
     );
 
     if (overflow === "top") {
@@ -36,7 +36,8 @@ export const GridSuggestionMenuItem = forwardRef<
       id={id}
       role="option"
       onClick={onClick}
-      aria-selected={isSelected || undefined}>
+      aria-selected={isSelected || undefined}
+    >
       {item.icon}
     </div>
   );

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx

@@ -19,7 +19,8 @@ export const GridSuggestionMenuLoader = forwardRef<
     <div
       className={className}
       style={{ gridColumn: `1 / ${columns + 1}` }}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </div>
   );

package/src/tableHandle/ExtendButton.tsx

@@ -28,12 +28,13 @@ export const ExtendButton = forwardRef<
           : "bn-mt-1",
         className?.includes("bn-extend-button-editing")
           ? "bn-bg-accent bn-text-accent-foreground"
-          : ""
+          : "",
       )}
       ref={ref}
       onClick={onClick}
       onMouseDown={onMouseDown}
-      {...rest}>
+      {...rest}
+    >
       {children}
     </ShadCNComponents.Button.Button>
   );

package/src/tableHandle/TableHandle.tsx

@@ -36,7 +36,8 @@ export const TableHandle = forwardRef<
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
       style={style}
-      {...rest}>
+      {...rest}
+    >
       {children}
     </ShadCNComponents.Button.Button>
   );

package/src/tailwindStyles.css

@@ -37,22 +37,22 @@
     -moz-tab-size: 4; /* 3 */
     tab-size: 4; /* 3 */
     font-family: theme(
-            "fontFamily.sans",
-            ui-sans-serif,
-            system-ui,
-            sans-serif,
-            "Apple Color Emoji",
-            "Segoe UI Emoji",
-            "Segoe UI Symbol",
-            "Noto Color Emoji"
+      "fontFamily.sans",
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji"
     ); /* 4 */
     font-feature-settings: theme(
-            "fontFamily.sans[1].fontFeatureSettings",
-            normal
+      "fontFamily.sans[1].fontFeatureSettings",
+      normal
     ); /* 5 */
     font-variation-settings: theme(
-            "fontFamily.sans[1].fontVariationSettings",
-            normal
+      "fontFamily.sans[1].fontVariationSettings",
+      normal
     ); /* 6 */
     -webkit-tap-highlight-color: transparent; /* 7 */
   }
@@ -131,23 +131,23 @@
   samp,
   pre {
     font-family: theme(
-            "fontFamily.mono",
-            ui-monospace,
-            SFMono-Regular,
-            Menlo,
-            Monaco,
-            Consolas,
-            "Liberation Mono",
-            "Courier New",
-            monospace
+      "fontFamily.mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace
     ); /* 1 */
     font-feature-settings: theme(
-            "fontFamily.mono[1].fontFeatureSettings",
-            normal
+      "fontFamily.mono[1].fontFeatureSettings",
+      normal
     ); /* 2 */
     font-variation-settings: theme(
-            "fontFamily.mono[1].fontVariationSettings",
-            normal
+      "fontFamily.mono[1].fontVariationSettings",
+      normal
     ); /* 3 */
     font-size: 1em; /* 4 */
   }

package/src/toolbar/Toolbar.tsx

@@ -29,16 +29,17 @@ export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
           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" : ""
+            variant === "action-toolbar" ? "bn-w-fit" : "",
           )}
           ref={ref}
           onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}>
+          onMouseLeave={onMouseLeave}
+        >
           {children}
         </div>
       </ShadCNComponents.Tooltip.TooltipProvider>
     );
-  }
+  },
 );
 
 type ToolbarButtonProps = ComponentProps["FormattingToolbar"]["Button"] &
@@ -71,7 +72,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" ? "bn-h-6 bn-min-w-6 bn-p-0" : "",
           )}
           variant="ghost"
           size={variant === "compact" ? "sm" : "default"}
@@ -79,7 +80,8 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
           onClick={onClick}
           ref={ref}
           aria-label={label}
-          {...rest}>
+          {...rest}
+        >
           {icon}
           {children}
         </ShadCNComponents.Button.Button>
@@ -88,7 +90,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" ? "bn-h-6 bn-min-w-6 bn-p-0" : "",
           )}
           size={variant === "compact" ? "sm" : "default"}
           aria-label={label}
@@ -98,7 +100,8 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
           data-state={isSelected ? "on" : "off"}
           data-disabled={isDisabled}
           ref={ref}
-          {...rest}>
+          {...rest}
+        >
           {icon}
           {children}
         </ShadCNComponents.Toggle.Toggle>
@@ -112,13 +115,14 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
         <ShadCNComponents.Tooltip.TooltipContent
           className={
             "bn-flex bn-flex-col bn-items-center bn-whitespace-pre-wrap"
-          }>
+          }
+        >
           <span>{mainTooltip}</span>
           {secondaryTooltip && <span>{secondaryTooltip}</span>}
         </ShadCNComponents.Tooltip.TooltipContent>
       </ShadCNComponents.Tooltip.Tooltip>
     );
-  }
+  },
 );
 
 export const ToolbarSelect = forwardRef<
@@ -151,7 +155,8 @@ export const ToolbarSelect = forwardRef<
       onValueChange={(value) =>
         items.find((item) => item.text === value)!.onClick?.()
       }
-      disabled={isDisabled}>
+      disabled={isDisabled}
+    >
       <ShadCNComponents.Select.SelectTrigger className={"bn-border-none"}>
         <ShadCNComponents.Select.SelectValue />
       </ShadCNComponents.Select.SelectTrigger>
@@ -160,7 +165,8 @@ export const ToolbarSelect = forwardRef<
           <ShadCNComponents.Select.SelectItem
             disabled={item.isDisabled}
             key={item.text}
-            value={item.text}>
+            value={item.text}
+          >
             <SelectItemContent {...item} />
           </ShadCNComponents.Select.SelectItem>
         ))}