toolbar

1'use client';
2 
3import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';
4 
5import { cn } from '@/registry/lib/utils';
6 
7function Toolbar({ className, ...props }: ToolbarPrimitive.Root.Props) {
8  return (
9    <ToolbarPrimitive.Root
10      data-slot="toolbar"
11      className={cn('flex items-center gap-1', className)}
12      {...props}
13    />
14  );
15}
16 
17function ToolbarButton({ className, ...props }: ToolbarPrimitive.Button.Props) {
18  return (
19    <ToolbarPrimitive.Button
20      data-slot="toolbar-button"
21      className={cn(
22        "inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding px-3 h-9 gap-1.5 text-sm font-medium whitespace-nowrap transition-all outline-none select-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
23        className
24      )}
25      {...props}
26    />
27  );
28}
29 
30function ToolbarLink({ className, ...props }: ToolbarPrimitive.Link.Props) {
31  return (
32    <ToolbarPrimitive.Link
33      data-slot="toolbar-link"
34      className={cn(
35        "inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent px-3 h-9 gap-1.5 text-sm font-medium whitespace-nowrap transition-all outline-none select-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
36        className
37      )}
38      {...props}
39    />
40  );
41}
42 
43function ToolbarGroup({ className, ...props }: ToolbarPrimitive.Group.Props) {
44  return (
45    <ToolbarPrimitive.Group
46      data-slot="toolbar-group"
47      className={cn('flex items-center gap-1', className)}
48      {...props}
49    />
50  );
51}
52 
53function ToolbarSeparator({ className, ...props }: ToolbarPrimitive.Separator.Props) {
54  return (
55    <ToolbarPrimitive.Separator
56      data-slot="toolbar-separator"
57      className={cn('mx-1 h-5 w-px shrink-0 bg-border/50', className)}
58      {...props}
59    />
60  );
61}
62 
63export { Toolbar, ToolbarButton, ToolbarLink, ToolbarGroup, ToolbarSeparator };