Toolbar

import { Toolbar } from "@craftdotui/baseui/components/toolbar";

<Toolbar>
  <Button size="icon" variant="ghost">
    <Bold />
  </Button>
  <Button size="icon" variant="ghost">
    <Italic />
  </Button>
  <Button size="icon" variant="ghost">
    <Underline />
  </Button>
</Toolbar>

import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight } from "lucide-react";

<Toolbar className="flex gap-1 border rounded-md p-1">
  <div className="flex gap-0.5">
    <Toggle size="icon">
      <Bold />
    </Toggle>
    <Toggle size="icon">
      <Italic />
    </Toggle>
    <Toggle size="icon">
      <Underline />
    </Toggle>
  </div>
  
  <Separator orientation="vertical" />
  
  <div className="flex gap-0.5">
    <Toggle size="icon">
      <AlignLeft />
    </Toggle>
    <Toggle size="icon">
      <AlignCenter />
    </Toggle>
    <Toggle size="icon">
      <AlignRight />
    </Toggle>
  </div>
</Toolbar>

<Toolbar>
  <ToggleGroup type="single">
    <ToggleGroupItem value="bold" size="icon">
      <Bold />
    </ToggleGroupItem>
    <ToggleGroupItem value="italic" size="icon">
      <Italic />
    </ToggleGroupItem>
    <ToggleGroupItem value="underline" size="icon">
      <Underline />
    </ToggleGroupItem>
  </ToggleGroup>
</Toolbar>

<Toolbar>
  <Button size="sm" variant="ghost">File</Button>
  <Button size="sm" variant="ghost">Edit</Button>
  <Button size="sm" variant="ghost">View</Button>
  
  <Separator orientation="vertical" />
  
  <Button size="icon" variant="ghost">
    <Save />
  </Button>
  <Button size="icon" variant="ghost">
    <Undo />
  </Button>
  <Button size="icon" variant="ghost">
    <Redo />
  </Button>
</Toolbar>