import React from "react";

export function Toolbar({ className = "", children, ...props }) {
  return <div role="toolbar" className={["o-toolbar", className].filter(Boolean).join(" ")} data-slot="toolbar" {...props}>{children}</div>;
}

export function ToolbarGroup({ className = "", children, ...props }) {
  return <div className={["o-toolbar__group", className].filter(Boolean).join(" ")} data-slot="toolbar-group" {...props}>{children}</div>;
}

export function ToolbarSeparator({ className = "" }) {
  return <div className={["o-toolbar__separator", className].filter(Boolean).join(" ")} data-slot="toolbar-separator" data-orientation="vertical" />;
}
