Toolbar

npm install @kuzenbo/core

import { Toolbar } from "@kuzenbo/core";
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";

function Example() {
  return (
    <Toolbar>
      <Toolbar.Button aria-label="Bold">
        <BoldIcon />
      </Toolbar.Button>
      <Toolbar.Button aria-label="Italic">
        <ItalicIcon />
      </Toolbar.Button>
      <Toolbar.Separator />
      <Toolbar.Button aria-label="Underline">
        <UnderlineIcon />
      </Toolbar.Button>
    </Toolbar>
  );
}

<Toolbar>
  <Toolbar.Group>
    <Toolbar.Button aria-label="Bold">
      <BoldIcon />
    </Toolbar.Button>
    <Toolbar.Button aria-label="Italic">
      <ItalicIcon />
    </Toolbar.Button>
    <Toolbar.Button aria-label="Underline">
      <UnderlineIcon />
    </Toolbar.Button>
  </Toolbar.Group>
  <Toolbar.Separator />
  <Toolbar.Group>
    <Toolbar.Button aria-label="Align left">
      <AlignLeftIcon />
    </Toolbar.Button>
    <Toolbar.Button aria-label="Align center">
      <AlignCenterIcon />
    </Toolbar.Button>
    <Toolbar.Button aria-label="Align right">
      <AlignRightIcon />
    </Toolbar.Button>
  </Toolbar.Group>
</Toolbar>

import { DropdownMenu } from "@kuzenbo/core";

<Toolbar>
  <Toolbar.Button>Action</Toolbar.Button>
  <Toolbar.Separator />
  <DropdownMenu>
    <Toolbar.Button asChild>
      <DropdownMenu.Trigger>
        More
        <ChevronDownIcon />
      </DropdownMenu.Trigger>
    </Toolbar.Button>
    <DropdownMenu.Content>
      <DropdownMenu.Item>Option 1</DropdownMenu.Item>
      <DropdownMenu.Item>Option 2</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu>
</Toolbar>

<Toolbar>
  <Toolbar.Input placeholder="Search..." className="w-64" />
  <Toolbar.Separator />
  <Toolbar.Button>Search</Toolbar.Button>
</Toolbar>

<div className="space-y-4">
  <Toolbar size="sm">
    <Toolbar.Button>Small</Toolbar.Button>
  </Toolbar>
  <Toolbar size="md">
    <Toolbar.Button>Medium</Toolbar.Button>
  </Toolbar>
  <Toolbar size="lg">
    <Toolbar.Button>Large</Toolbar.Button>
  </Toolbar>
</div>

<Toolbar orientation="vertical">
  <Toolbar.Button aria-label="Cut">
    <ScissorsIcon />
  </Toolbar.Button>
  <Toolbar.Button aria-label="Copy">
    <CopyIcon />
  </Toolbar.Button>
  <Toolbar.Button aria-label="Paste">
    <ClipboardIcon />
  </Toolbar.Button>
</Toolbar>